/*
 * Professional Admin UI for OpenCart 3.0.2.0 - v1.0.2
 * Pure presentation layer: no controller/model/database changes.
 * Admin-only local stylesheet: no external assets, scripts or network calls.
 */

/* ---------- Base ---------- */
html,
body {
  background: #f4f7fb;
  color: #172033;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-size: 13px;
}

a {
  color: #2563eb;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

a:hover,
a:focus {
  color: #1d4ed8;
  text-decoration: none;
}

::selection {
  background: #dbeafe;
  color: #172033;
}

/* ---------- Top header ---------- */
#header {
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid #e7edf5;
  box-shadow: 0 4px 20px rgba(15, 23, 42, .055);
}

#header .navbar-header {
  background: #ffffff;
  border-right: 1px solid #eef2f7;
}

#header .navbar-brand {
  padding-top: 11px;
  padding-bottom: 11px;
}

#header .nav > li > a {
  color: #344054;
  border-left-color: #eef2f7;
  font-weight: 500;
}

#header .nav > li > a:hover,
#header .nav > li.open > a,
#header .nav > li.open > a:hover,
#header .nav > li.open > a:focus {
  color: #111827;
  background: #f8fafc;
}

#button-menu {
  color: #475467;
}

#button-menu:hover {
  color: #111827;
  background: #f8fafc;
}

#header .dropdown-menu {
  border: 1px solid #e7edf5;
  border-radius: 10px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .14);
  padding: 7px;
}

#header .dropdown-menu > li > a {
  border-radius: 7px;
  padding: 8px 11px;
  color: #344054;
}

#header .dropdown-menu > li > a:hover,
#header .dropdown-menu > li > a:focus {
  background: #f1f5f9;
  color: #111827;
}

/* ---------- Left navigation ---------- */
#column-left {
  background: #111827;
  border-right: 0;
  box-shadow: 6px 0 20px rgba(15, 23, 42, .06);
}

#column-left #profile {
  border-bottom: 1px solid rgba(255,255,255,.07);
}

#column-left #profile > div,
#column-left #profile small,
#column-left #profile h4 {
  color: #f8fafc;
}

#column-left #profile .fa {
  color: #93c5fd;
}

#menu,
#menu ul,
#menu li {
  background: transparent;
}

#menu > li {
  border-bottom: 0;
}

#menu > li > a {
  color: #cbd5e1;
  border: 0;
  margin: 3px 9px;
  border-radius: 8px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-weight: 500;
}

#menu > li > a .fa {
  color: #94a3b8;
  transition: color .16s ease;
}

#menu > li > a:hover,
#menu > li.active > a,
#menu > li.open > a {
  background: rgba(255, 255, 255, .085);
  color: #ffffff;
}

#menu > li > a:hover .fa,
#menu > li.active > a .fa,
#menu > li.open > a .fa {
  color: #60a5fa;
}

#menu > li > ul {
  background: #0b1220;
  border: 0;
  padding: 5px 0 8px;
}

#menu > li > ul > li > a,
#menu > li > ul > li > ul > li > a,
#menu > li > ul > li > ul > li > ul > li > a {
  color: #aebaca;
  border: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}

#menu > li > ul > li > a:hover,
#menu > li > ul > li.active > a,
#menu > li > ul > li > ul > li > a:hover,
#menu > li > ul > li > ul > li.active > a {
  color: #ffffff;
  background: rgba(37, 99, 235, .18);
}

#menu li li a:before {
  color: #64748b;
}

/* ---------- Main content ---------- */
#content {
  background: #f4f7fb;
  min-height: calc(100vh - 50px);
}

.page-header {
  margin: 0 0 22px;
  padding: 20px 0 16px;
  border-bottom: 1px solid #e7edf5;
}

.page-header h1 {
  color: #101828;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.35px;
  margin-top: 4px;
}

.breadcrumb {
  background: transparent;
  padding: 4px 0;
  margin-bottom: 0;
}

.breadcrumb > li,
.breadcrumb > li > a {
  color: #667085;
}

.breadcrumb > li:last-child,
.breadcrumb > li:last-child > a {
  color: #344054;
  font-weight: 500;
}

/* ---------- Panels / cards ---------- */
.panel {
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .055);
  /* Dropdowns must be allowed to extend beyond short panels. */
  overflow: visible;
  background: #ffffff;
}

/* Keep floated legacy OpenCart/extension content contained safely. */
.panel::before,
.panel::after {
  display: table;
  content: " ";
}

.panel::after {
  clear: both;
}

/* Preserve the rounded card appearance without clipping interactive content. */
.panel > .panel-heading:first-child {
  border-radius: 11px 11px 0 0;
}

.panel > .panel-footer:last-child {
  border-radius: 0 0 11px 11px;
}

.panel-default > .panel-heading,
.panel-heading {
  background: #ffffff;
  border-bottom: 1px solid #edf1f6;
  color: #1d2939;
  min-height: 48px;
  padding: 14px 16px;
  font-weight: 600;
}

.panel-heading h3,
.panel-title {
  color: #1d2939;
  font-size: 14px;
  font-weight: 650;
}

.panel-heading .fa {
  color: #64748b;
}

.panel-body {
  padding: 18px;
}

.panel-footer {
  background: #fbfcfe;
  border-top: 1px solid #edf1f6;
}

/* Dashboard statistic tiles */
.tile,
.tile-primary,
.tile-success,
.tile-warning,
.tile-danger {
  border-radius: 12px;
  overflow: hidden;
  border: 0;
  box-shadow: 0 9px 25px rgba(15, 23, 42, .10);
}

.tile .tile-heading {
  border-bottom-color: rgba(255,255,255,.15);
  font-weight: 600;
}

.tile .tile-body {
  min-height: 108px;
}

.tile .tile-footer {
  background: rgba(0,0,0,.10);
}

/* ---------- Tables ---------- */
.table-responsive {
  border: 0;
}

/*
 * Bootstrap 3 responsive table wrappers can also clip action menus.
 * Desktop tables do not need horizontal scrolling, so let menus escape there.
 * Mobile keeps the core horizontal scrolling behaviour intact.
 */
@media (min-width: 768px) {
  .panel > .table-responsive,
  .panel-body > .table-responsive {
    overflow: visible;
  }
}

.table {
  color: #344054;
  margin-bottom: 0;
}

.table > thead > tr > td,
.table > thead > tr > th {
  background: #f8fafc;
  border-bottom: 1px solid #e7edf5;
  color: #475467;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
  vertical-align: middle;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
  border-top: 1px solid #edf1f6;
  vertical-align: middle;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th,
.table > tbody > tr:hover > td {
  background: #f8fbff;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: #fcfdff;
}

.table img,
.img-thumbnail {
  border-color: #e4eaf2;
  border-radius: 8px;
  background: #fff;
}

/* ---------- Forms ---------- */
.form-control {
  min-height: 38px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  color: #1f2937;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .025) inset;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

textarea.form-control {
  min-height: 90px;
}

.form-control:hover {
  border-color: #b9c4d2;
}

.form-control:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background: #f2f4f7;
  color: #667085;
}

.control-label,
label {
  color: #344054;
  font-weight: 600;
}

.input-group-addon {
  color: #667085;
  background: #f8fafc;
  border-color: #d7dee8;
}

.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.form-horizontal .form-group {
  border-bottom-color: #edf1f6;
  padding-top: 4px;
  padding-bottom: 4px;
}

.checkbox label,
.radio label {
  font-weight: 500;
  color: #475467;
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 8px;
  font-weight: 600;
  border-width: 1px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .10);
}

.btn:active,
.btn.active {
  transform: translateY(0);
}

.btn-primary {
  background: #2563eb;
  border-color: #2563eb;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.btn-success {
  background: #16a34a;
  border-color: #16a34a;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background: #15803d;
  border-color: #15803d;
}

.btn-danger {
  background: #dc2626;
  border-color: #dc2626;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background: #b91c1c;
  border-color: #b91c1c;
}

.btn-warning {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}

.btn-info {
  background: #0891b2;
  border-color: #0891b2;
}

.btn-default {
  color: #344054;
  background: #ffffff;
  border-color: #d0d7e2;
}

.btn-default:hover,
.btn-default:focus {
  color: #111827;
  background: #f8fafc;
  border-color: #b9c4d2;
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}

/* ---------- Tabs / pills ---------- */
.nav-tabs {
  border-bottom: 1px solid #dfe6ef;
}

.nav-tabs > li > a {
  color: #667085;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  padding: 10px 14px;
}

.nav-tabs > li > a:hover {
  color: #1d4ed8;
  background: #f8fafc;
  border-color: transparent transparent #dfe6ef;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #1d4ed8;
  border-color: #dfe6ef #dfe6ef #fff;
  background: #fff;
}

.nav-pills > li > a {
  border-radius: 8px;
}

/* ---------- Pagination ---------- */
.pagination > li > a,
.pagination > li > span {
  color: #475467;
  border-color: #e0e6ee;
  background: #fff;
  margin: 0 2px;
  border-radius: 7px !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  color: #fff;
  background: #2563eb;
  border-color: #2563eb;
}

/* ---------- Alerts / labels / badges ---------- */
.alert {
  border-radius: 9px;
  border-width: 1px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .045);
}

.alert-success {
  color: #166534;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.alert-danger {
  color: #991b1b;
  background: #fef2f2;
  border-color: #fecaca;
}

.alert-warning {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

.alert-info {
  color: #155e75;
  background: #ecfeff;
  border-color: #a5f3fc;
}

.label,
.badge {
  border-radius: 999px;
  font-weight: 600;
  padding-left: 8px;
  padding-right: 8px;
}

/* ---------- Dropdowns ---------- */
.dropdown-menu {
  border: 1px solid #e4eaf2;
  border-radius: 9px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .13);
  padding: 6px;
  z-index: 1080;
}

.dropdown-menu > li > a {
  color: #344054;
  border-radius: 6px;
  padding: 7px 10px;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: #f1f5f9;
  color: #101828;
}

/* ---------- Modals ---------- */
.modal-content {
  border: 0;
  border-radius: 13px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
  overflow: hidden;
}

.modal-header {
  border-bottom: 1px solid #edf1f6;
  padding: 16px 18px;
}

.modal-title {
  color: #101828;
  font-weight: 650;
}

.modal-footer {
  background: #fbfcfe;
  border-top: 1px solid #edf1f6;
}

/* ---------- Well / filter blocks ---------- */
.well {
  background: #f8fafc;
  border: 1px solid #e4eaf2;
  border-radius: 10px;
  box-shadow: none;
}

/* ---------- Progress bars ---------- */
.progress {
  border-radius: 999px;
  background: #e9eef5;
  box-shadow: none;
}

.progress-bar {
  box-shadow: none;
}

/* ---------- Summernote / editor shells ---------- */
.note-editor.note-frame,
.note-editor.panel {
  border-color: #d7dee8;
  border-radius: 9px;
}

.note-editor .note-toolbar {
  background: #f8fafc;
  border-bottom: 1px solid #e4eaf2;
}

/* ---------- Datepicker ---------- */
.datetimepicker,
.datepicker {
  border-radius: 10px !important;
  border-color: #e4eaf2 !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .13) !important;
}

/* ---------- Login ---------- */
body #content .container-fluid > .row:first-child .panel.panel-default {
  background: #fff;
}

body[class*="common-login"] .panel,
body[class*="common-forgotten"] .panel {
  border: 0;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
}

/* ---------- Scrollbar (Chromium/Safari) ---------- */
#column-left::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

#column-left::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, .30);
  border-radius: 99px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .page-header h1 {
    font-size: 21px;
  }

  .panel-body {
    padding: 14px;
  }

  .table > thead > tr > td,
  .table > thead > tr > th,
  .table > tbody > tr > td,
  .table > tbody > tr > th {
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  #content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .page-header {
    padding-top: 14px;
    margin-bottom: 14px;
  }

  .page-header h1 {
    font-size: 19px;
    margin-bottom: 7px;
  }

  .panel {
    border-radius: 10px;
  }

  .panel-heading {
    padding: 12px 13px;
  }

  .panel-body {
    padding: 12px;
  }

  .btn {
    min-height: 34px;
  }

  .form-horizontal .control-label {
    padding-bottom: 7px;
  }
}

/* ---------- Utility refinements ---------- */
.text-muted {
  color: #7b8797;
}

hr {
  border-top-color: #e7edf5;
}

.close {
  color: #475467;
  opacity: .65;
}

.close:hover,
.close:focus {
  color: #111827;
  opacity: 1;
}

.list-group-item {
  border-color: #e8edf3;
}

.list-group-item:first-child {
  border-top-left-radius: 9px;
  border-top-right-radius: 9px;
}

.list-group-item:last-child {
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}

/* Keep OpenCart core icon/action behavior intact */
.fa,
.glyphicon {
  line-height: inherit;
}