/* ════════════════════════════════════════════════════════════
   TIA — Censys-style theme
   Clean · light · minimal. Loaded AFTER app.min.css.
   Strategy: override the template's own CSS variables on
   body[data-sidebar=light] (wins on specificity, cascades down).
   ════════════════════════════════════════════════════════════ */

/* ── Variable overrides (the clean way) ─────────────────────── */
body[data-sidebar="light"],
:root,
[data-bs-theme="light"] {
  /* Sidebar */
  --bs-sidebar-bg                        : #ffffff;
  --bs-sidebar-border-color              : #e5e7eb;
  --bs-sidebar-menu-item-color           : #3f4654;
  --bs-sidebar-menu-item-icon-color      : #8a93a4;
  --bs-sidebar-menu-item-hover-color     : #111827;
  --bs-sidebar-menu-item-active-color    : #0f766e;
  --bs-sidebar-menu-item-active-bg-color : #f1f5f4;
  --bs-sidebar-menu-sub-item-color       : #6b7280;
  /* Topbar */
  --bs-header-bg                         : #ffffff;
  --bs-border-color                      : #e5e7eb;
}

/* ── Typography / base ──────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  background-color: #f7f8fa;
  color: #212a33;
  font-size: 14px;
}
.main-content   { background-color: #f7f8fa; }
/* Keep the template's fixed-header (70px) and fixed-footer (60px) clearance.
   Only the horizontal padding is customised. */
.page-content   { padding: calc(70px + 1.25rem) 24px 70px 24px; background-color: #f7f8fa; }

/* ════ TOPBAR ════════════════════════════════════════════════ */
#page-topbar {
  background: #ffffff;
  border-bottom: 1px solid #e9ebef;
  box-shadow: none;
}
.navbar-header { height: 64px; padding-right: 14px; }

/* Brand box: white, sits above the sidebar column */
.navbar-brand-box {
  background: #ffffff !important;
  border-right: 1px solid #e9ebef;
  box-shadow: none !important;
  width: 250px;
}
.logo-txt {
  font-size: 17px; font-weight: 700; letter-spacing: .2px; color: #1a1d23;
}

/* Hamburger */
#vertical-menu-btn { color: #6b7280; font-size: 17px; }
#vertical-menu-btn:hover { color: #0f766e; }

/* Right-side header buttons → circular, quiet */
.header-item#mode-setting-btn,
#page-header-notifications-dropdown {
  width: 40px; height: 40px; padding: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6b7280;
  transition: background .15s, color .15s;
}
#mode-setting-btn:hover,
#page-header-notifications-dropdown:hover { background: #f3f4f6; color: #0f766e; }
#mode-setting-btn i { font-size: 16px; }

/* User dropdown button */
#page-header-user-dropdown {
  border: none !important;
  background: transparent !important;
  padding: 4px 10px !important;
  border-radius: 10px;
  transition: background .15s;
}
#page-header-user-dropdown:hover { background: #f3f4f6 !important; }
#page-header-user-dropdown .fa-user-circle {
  color: #0f766e !important;
  font-size: 30px !important;
}

/* Company switcher in topbar — tidy it up */
.navbar-header .row.pt-3 { padding-top: 0 !important; align-items: center; margin: 0; }
.navbar-header .row.pt-3 .form-label {
  font-size: 11px; font-weight: 600; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .4px; margin: 0;
}
.navbar-header .row.pt-3 .form-control {
  height: 36px; font-size: 13px; border-radius: 8px;
  border: 1px solid #e5e7eb; min-width: 200px;
}

/* ════ SIDEBAR ═══════════════════════════════════════════════ */
.vertical-menu {
  background: #ffffff;
  border-right: 1px solid #e9ebef;
  width: 250px;
}

/* Section labels */
#sidebar-menu .menu-title {
  padding: 18px 22px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
  color: #9aa3b2 !important;
}

/* Menu links */
#sidebar-menu ul li a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px;
  margin: 1px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #3f4654;
  transition: background .14s, color .14s;
}
#sidebar-menu ul li a i {
  min-width: 18px; font-size: 15px; text-align: center;
  color: #8a93a4; transition: color .14s;
}
#sidebar-menu ul li a:hover {
  background: #f6f7f9;
  color: #111827;
}
#sidebar-menu ul li a:hover i { color: #0f766e; }

/* Active item — quiet pill, Censys style */
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a.active,
#sidebar-menu ul li.mm-active > a {
  background: #eef5f4;
  color: #0f766e;
  font-weight: 600;
}
#sidebar-menu ul li a.active i,
#sidebar-menu ul li.mm-active > a i { color: #0f766e; }

/* Has-arrow caret — flex layout ignores the template's float:right,
   so push the chevron to the far right with margin-left:auto */
#sidebar-menu ul li a.has-arrow::after {
  margin-left: auto;
  margin-right: 0;
  color: #b6bcc7;
}

/* Sub-menus */
#sidebar-menu ul ul.sub-menu { padding: 2px 0; }
#sidebar-menu ul ul.sub-menu li a {
  padding: 7px 16px 7px 45px;
  margin: 1px 12px;
  font-size: 13px;
  color: #6b7280;
}
#sidebar-menu ul ul.sub-menu li a:hover { color: #0f766e; background: #f6f7f9; }
#sidebar-menu ul ul ul.sub-menu li a { padding-left: 60px; }

/* Scrollbar in sidebar */
.vertical-menu .simplebar-scrollbar::before { background: #d1d5db; }

/* ════ CARDS ═════════════════════════════════════════════════ */
.card, .card-h-100 {
  background: #ffffff;
  border: 1px solid #e9ebef;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.card-header {
  background: #ffffff;
  border-bottom: 1px solid #f1f2f4;
  border-radius: 12px 12px 0 0;
  padding: 15px 20px;
}
.card-body  { padding: 20px; }
.card-title { font-size: 14px; font-weight: 700; color: #1a1d23; margin: 0; }

/* ════ TABLES ════════════════════════════════════════════════ */
.table { font-size: 14px; color: #1f2733; }
.table thead th {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: #6b7385;
  background: #fafbfc; border-bottom: 1px solid #eceef1;
  padding: 11px 14px;
}
.table tbody td {
  padding: 11px 14px; vertical-align: middle; border-color: #eef0f3;
  color: #1f2733; font-weight: 400;
}
/* No zebra striping — it muddied the colored avatars. Clean white rows
   separated by a hairline border, with a soft teal hover instead. */
.table-striped > tbody > tr > * { background: transparent; }
.table > tbody > tr > * { border-bottom: 1px solid #eef0f3; }
.table > tbody > tr:last-child > * { border-bottom: none; }
.table-hover > tbody > tr:hover > * { background: #f3f8f7; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13px; padding: 5px 10px;
}
.dataTables_paginate .paginate_button.current {
  background: #0f766e !important; border-color: #0f766e !important; color: #fff !important;
  border-radius: 7px;
}

/* ════ BUTTONS ═══════════════════════════════════════════════ */
.btn { border-radius: 8px; font-size: 13px; font-weight: 500; padding: 8px 16px; }
.btn-sm { padding: 5px 12px; font-size: 12px; }

/* Table row action button (kebab ⋮) — small, quiet, theme-matched */
.btn-row-action {
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #fff;
  color: #6b7280;
  font-size: 13px;
  line-height: 1;
  transition: background .14s, border-color .14s, color .14s;
}
.btn-row-action:hover,
.btn-row-action:focus,
.btn-row-action[aria-expanded="true"] {
  background: #eef5f4;
  border-color: #b9d4d0;
  color: #0f766e;
}
.btn-row-action::after { display: none; }      /* no bootstrap caret */
.btn-row-action i { pointer-events: none; }
/* Comfortable menu coming off the row action */
.btn-row-action + .dropdown-menu { min-width: 184px; }
.btn-primary { background: #0f766e; border-color: #0f766e; }
.btn-primary:hover, .btn-primary:focus { background: #0c5f58; border-color: #0c5f58; }
.btn-success { background: #16a34a; border-color: #16a34a; }
.btn-success:hover { background: #15803d; border-color: #15803d; }
.btn-info { background: #0ea5e9; border-color: #0ea5e9; }

/* ════ FORMS ═════════════════════════════════════════════════ */
.form-control, .form-select {
  border: 1px solid #e5e7eb; border-radius: 8px;
  font-size: 13px; color: #3f4654; padding: 8px 12px;
}
.form-control:focus, .form-select:focus {
  border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}
.form-label { font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 5px; }

.select2-container--default .select2-selection--single {
  border: 1px solid #e5e7eb; border-radius: 8px; height: 38px;
  display: flex; align-items: center;
}
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}
.select2-dropdown { border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 6px 24px rgba(16,24,40,.1); }

/* ════ DROPDOWNS ═════════════════════════════════════════════ */
.dropdown-menu {
  border: 1px solid #e5e7eb; border-radius: 11px;
  box-shadow: 0 8px 28px rgba(16,24,40,.12);
  padding: 6px; font-size: 13px;
}
.dropdown-item { border-radius: 7px; padding: 8px 12px; color: #3f4654; }
.dropdown-item:hover { background: #f3f4f6; color: #111827; }
.dropdown-divider { border-color: #f1f2f4; margin: 4px 0; }

/* ════ MODALS / OFFCANVAS ════════════════════════════════════ */
.modal-content { border: none; border-radius: 14px; box-shadow: 0 12px 48px rgba(16,24,40,.18); }
.modal-header  { border-bottom: 1px solid #f1f2f4; padding: 16px 22px; }
.modal-footer  { border-top: 1px solid #f1f2f4; padding: 13px 22px; }
.modal-title   { font-size: 15px; font-weight: 700; color: #1a1d23; }
.offcanvas         { box-shadow: -6px 0 30px rgba(16,24,40,.14); border: none; }
.offcanvas-header  { border-bottom: 1px solid #f1f2f4; padding: 16px 22px; }
.offcanvas-title   { font-size: 14px; font-weight: 700; color: #1a1d23; }
.offcanvas-footer  { border-top: 1px solid #f1f2f4; padding: 13px 22px; }

/* ════ PERSON CELL (clients / users / suppliers) ═════════════ */
.person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.person-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  flex-shrink: 0; text-transform: uppercase;
  /* hairline ring so the avatar edge stays crisp on any row */
  box-shadow: 0 0 0 1px rgba(17, 24, 39, .07);
}
.person-info { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.person-name {
  font-size: 13.5px; font-weight: 600; color: #1f2733;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
.person-id { font-size: 11.5px; color: #8a93a4; font-weight: 500; }

/* ════ MISC ══════════════════════════════════════════════════ */
.badge { font-size: 10.5px; font-weight: 600; border-radius: 6px; padding: 3px 8px; }
.alert { border-radius: 9px; font-size: 13px; border: none; }

/* Scrollable content area: the footer lives at the bottom of this flex
   column, so it scrolls with the content yet stays at the bottom-most. */
.content-scroll { height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.page-content   { flex: 1 0 auto; }

/* Footer — in normal flow (not fixed/absolute), full width of the content area */
.footer {
  position: static; left: auto; right: auto; bottom: auto; height: auto;
  flex-shrink: 0; margin-top: auto;
  background: #ffffff; border-top: 1px solid #e9ebef;
  font-size: 12px; color: #9aa3b2; padding: 11px 24px;
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-left { color: #6b7280; font-weight: 500; }
.footer-left strong { color: #0f766e; font-weight: 600; }
.footer-right { color: #9aa3b2; }
.footer-right a { color: #0f766e; font-weight: 600; text-decoration: none; }
.footer-right a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .footer-inner { justify-content: center; text-align: center; gap: 6px; }
}

/* Thin bottom notification offcanvas (non-blocking) */
.notice-canvas { height: auto !important; max-height: 130px; border-top: 1px solid #e9ebef;
  box-shadow: 0 -6px 22px rgba(17, 24, 39, .08); background: #fff; }
.notice-canvas .notice-inner { display: flex; align-items: center; gap: 13px; padding: 11px 20px; }
.notice-canvas .notice-ico { width: 34px; height: 34px; border-radius: 9px; background: #eef5f4; color: #0f766e;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notice-canvas .notice-body { flex: 1; min-width: 0; font-size: 13px; color: #374151; overflow: hidden; }
.notice-canvas .notice-body .alert { margin: 0; padding: 4px 11px; font-size: 12.5px; border-radius: 7px; }
.notice-canvas .notice-body p { margin: 0; }
.notice-canvas .btn-close { flex-shrink: 0; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d7dd; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b6bcc7; }