/*
 * Intouch Ai Analytics design system — theme layer for the loyalty webapp.
 *
 * Maps the handoff tokens (Inter, navy #1e293b, teal #0d847a/#0d9488, gray-50
 * page, white rounded cards, Tailwind-style badges/tables/forms) onto the
 * existing Bootstrap 3 + AdminLTE markup. Load it LAST in <head> so it wins
 * over style.css / AdminLTE / skin-blue without touching each page.
 */

/* ---------- Fonts (self-hosted: CSP only allows style-src 'self') ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter/inter-latin-700-normal.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
  --it-navy: #1e293b;
  --it-teal-50: #f0fdfa;
  --it-teal-100: #ccfbf1;
  --it-teal-500: #0d9488;
  --it-teal-600: #0d847a;
  --it-teal-700: #0f766e;
  --it-gray-50: #f9fafb;
  --it-gray-100: #f3f4f6;
  --it-gray-200: #e5e7eb;
  --it-gray-300: #d1d5db;
  --it-gray-400: #9ca3af;
  --it-gray-500: #6b7280;
  --it-gray-600: #4b5563;
  --it-gray-700: #374151;
  --it-font: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --it-ring: 0 0 0 2px #fff, 0 0 0 4px var(--it-teal-500);
  --it-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --it-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --it-header-h: 64px;
}

/* ---------- Base ---------- */
html, body,
body.skin-blue,
.main-content,
h1, h2, h3, h4, h5, h6,
.btn, .form-control, .table, .select2-container, .dropdown-menu, .modal, .tooltip, .popover {
  font-family: var(--it-font) !important;
}
body {
  background: var(--it-gray-50) !important;
  color: var(--it-gray-700);
  font-size: 14px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { color: var(--it-navy); }
a { color: var(--it-teal-600); }
a:hover, a:focus { color: var(--it-teal-700); }
::selection { background: var(--it-teal-100); }

/* Visible focus ring on every interactive element (WCAG 2.1 AA) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none !important;
  box-shadow: var(--it-ring) !important;
}

/* ---------- Top nav ---------- */
header.main-header,
header {
  background: #fff !important;
  border-bottom: 1px solid var(--it-gray-200) !important;
  min-height: var(--it-header-h);
  max-height: none;
  box-shadow: none;
}
header .logo-client { margin-left: 56px; float: left; }
header .logo-client a { height: var(--it-header-h); width: auto; }
.it-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none !important;
}
.it-logo img.it-logo-icon { height: 28px; width: auto; max-width: none; }
.it-logo img.it-logo-text { height: 16px; width: auto; max-width: none; }
.it-logo .it-ai-badge {
  background: var(--it-teal-500);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
header .navbar-toggle { margin-top: 14px; margin-left: 12px; border-radius: 8px; }
header .navbar-toggle:hover { background: var(--it-teal-50); }
header .navbar-toggle .icon-bar { background-color: var(--it-gray-600); }
header .navbar-right { padding-top: 0 !important; }
header .navbar-right .nav > li.notifications-label,
header .navbar-right .nav > li.notifications-wc {
  font-size: 14px !important;
  line-height: var(--it-header-h);
  padding-top: 0 !important;
  color: var(--it-gray-500) !important;
}
header .navbar-right .nav > li.notifications-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; }
header .navbar-right .nav > li.notifications-label span { color: var(--it-gray-300); }
header .navbar-right .nav > li.notifications-wc span { color: var(--it-navy); font-weight: 600; }
header .navbar-right .nav > li.user-menu { margin-left: 16px; margin-right: 32px; padding-top: 12px; }
header .navbar-right .nav > li.user-menu img.img-circle {
  width: 36px !important;
  height: 36px;
  object-fit: cover;
  border: 2px solid var(--it-gray-200);
}
header .navbar-right .nav > li.user-menu a i.online { background-color: #16a34a; border-color: #fff; }

/* User dropdown */
.dp.dropdown-menu {
  border: 1px solid var(--it-gray-200) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
  padding: 4px 0 8px;
}
.dp.dropdown-menu hr { border-color: var(--it-gray-200); }
.dropdown-item.aitem { color: var(--it-gray-600) !important; font-size: 14px; transition: all .15s; }
.dropdown-item.aitem:hover { background-color: var(--it-teal-50) !important; color: var(--it-teal-500) !important; }

@media (max-width: 767px) {
  header .logo-client { margin-left: 48px; }
  header .logo-client a { height: 44px; }
  header .navbar-right .nav > li.notifications-wc { line-height: 44px; font-size: 12px !important; }
  header .navbar-right .nav > li.user-menu { padding-top: 6px; margin-right: 12px; }
}
@media (max-width: 480px) {
  header .navbar-right .nav > li.notifications-wc { display: none; }
  .container-section.page-banner .dropdown-item1 { font-size: 20px; }
}

/* ---------- Sidebar ---------- */
.main-sidebar {
  background: #fff !important;
  border-right: 1px solid var(--it-gray-200);
  padding-top: var(--it-header-h) !important;
}
.main-sidebar .sidebar { padding: 12px 8px; }
.main-sidebar .sidebar .sidebar-menu > li > a,
.skin-blue .sidebar-menu > li > a {
  color: var(--it-gray-600) !important;
  background: transparent !important;
  border-left: 0 !important;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  margin: 1px 0;
  transition: all .2s;
}
.main-sidebar .sidebar .sidebar-menu > li > a .fa,
.main-sidebar .sidebar .sidebar-menu > li > a i { color: var(--it-gray-400); transition: color .2s; }
.main-sidebar .sidebar .sidebar-menu > li:hover > a,
.main-sidebar .sidebar .sidebar-menu > li.menu-open > a:hover {
  color: var(--it-teal-500) !important;
  background: var(--it-teal-50) !important;
}
.main-sidebar .sidebar .sidebar-menu > li:hover > a i { color: var(--it-teal-500); }
.main-sidebar .sidebar .sidebar-menu > li.menu-open > a { color: var(--it-navy) !important; background: transparent !important; }
.main-sidebar .sidebar .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.active > a {
  background: var(--it-teal-50) !important;
  color: var(--it-teal-600) !important;
  font-weight: 600;
}
.main-sidebar .sidebar .sidebar-menu > li.active > a i { color: var(--it-teal-600); }
.main-sidebar .sidebar .sidebar-menu .treeview-menu,
.main-sidebar .sidebar .sidebar-menu > li > .treeview-menu,
.skin-blue .sidebar-menu > li > .treeview-menu {
  background: transparent !important;
  margin: 2px 0 6px 18px !important;
  padding-left: 8px;
  border-left: 1px solid var(--it-gray-200);
}
.main-sidebar .sidebar-menu .treeview-menu > li > a,
.skin-blue .sidebar-menu .treeview-menu > li > a,
.main-sidebar .sidebar .sidebar-menu > li > .treeview-menu li.licls a {
  color: var(--it-gray-500) !important;
  font-size: 13px;
  padding: 7px 10px !important;
  margin-left: 0 !important;
  border-radius: 6px;
  transition: all .15s;
}
.main-sidebar .sidebar-menu .treeview-menu > li > a .fa-circle-o { font-size: 6px; vertical-align: middle; margin-right: 8px; color: var(--it-gray-300); }
.main-sidebar .sidebar-menu .treeview-menu > li > a:hover,
.skin-blue .sidebar-menu .treeview-menu > li > a:hover { color: var(--it-teal-500) !important; background: var(--it-teal-50); }
.main-sidebar .sidebar .sidebar-menu > li > .treeview-menu li.active > a,
.main-sidebar .sidebar-menu .treeview-menu > li.active > a {
  color: var(--it-teal-600) !important;
  font-weight: 600;
}
.main-sidebar .sidebar-menu .treeview-menu > li.active > a .fa-circle-o,
.main-sidebar .sidebar .sidebar-menu > li > .treeview-menu li.active a .fa-circle-o { color: var(--it-teal-500) !important; }
.main-sidebar::-webkit-scrollbar { width: 6px; }
.main-sidebar::-webkit-scrollbar-thumb { background: var(--it-gray-200); border-radius: 3px; }

/* ---------- Page shell ---------- */
#page-content-wrapper { padding-top: var(--it-header-h); background: transparent; }
.container-section { padding: 24px 32px; }
@media (max-width: 767px) { .container-section { padding: 16px; } }

/* The old blue banner + "-11%" pull-up becomes a plain page header (§6.4). */
.container-section.page-banner {
  background: transparent !important;
  padding-bottom: 0 !important;
}
.container-section.page-banner .col-md-12 {
  font-size: 24px !important;
  font-family: var(--it-font) !important;
  font-weight: 700;
  color: var(--it-navy);
  line-height: 32px;
}
.container-section.page-banner .dropdown-item1 { color: var(--it-navy) !important; font-size: 24px; text-decoration: none; }
.container-section.page-banner .dropdown-item1:first-child { color: var(--it-gray-400) !important; font-size: 16px; vertical-align: 2px; }
.container-section.page-banner .dropdown-item1:first-child:hover { color: var(--it-teal-500) !important; }
.container-section.page-banner .dropdown-item1[style*="#ccc"] { color: var(--it-gray-500) !important; font-size: 14px; font-weight: 400; }
.container-section.page-body { margin-top: 0 !important; padding-top: 16px; }

/* ---------- Cards (panels, AdminLTE boxes, wells) ---------- */
.panel, .panel-default, .box, .content-block, .well, .info-box, .small-box {
  background: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: var(--it-shadow-md) !important;
}
.panel { margin-bottom: 16px; }
.box { border-top: 0 !important; }
.box.box-primary, .box.box-info, .box.box-success, .box.box-warning, .box.box-danger { border-top: 0 !important; }
.panel-heading, .box-header, .box-header.with-border {
  background: transparent !important;
  border-bottom: 1px solid var(--it-gray-200) !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 16px 20px;
}
.panel-heading, .panel-title, .box-header .box-title,
.common-content-block h7, .common-content-block h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--it-navy) !important;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}
.common-content-block h7 b { font-weight: 600; }
.panel-body, .box-body, .common-content-block { padding: 20px; }
.box-footer, .panel-footer {
  background: transparent !important;
  border-top: 1px solid var(--it-gray-200) !important;
  border-radius: 0 0 8px 8px;
  padding: 16px 20px;
}

/* ---------- Dashboard KPI cards (§6.5) ---------- */
/* KPI cards float their label column and icon; make the card grow to contain them
   instead of letting long labels spill below it. */
.panel > .common-content-block { display: flow-root; }
.panel > .common-content-block[style*="padding-bottom"] { padding-bottom: 20px !important; }
/* Equal-height KPI cards in a row. */
.row:has(> .col-md-3 > .panel) { display: flex; flex-wrap: wrap; }
.row:has(> .col-md-3 > .panel)::before, .row:has(> .col-md-3 > .panel)::after { display: none; }
.row > .col-md-3:has(> .panel) { display: flex; }
.row > .col-md-3 > .panel { flex: 1; }
@media (max-width: 991px) { .row > .col-md-3:has(> .panel) { width: 50%; } }
@media (max-width: 575px) { .row > .col-md-3:has(> .panel) { width: 100%; } }
.icon.icon-shape.rounded-circle {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  float: right;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 9999px !important;
  box-shadow: none !important;
  background: var(--it-teal-50) !important;
  color: var(--it-teal-500) !important;
  font-size: 15px;
}
.icon.icon-shape.bg-gradient-info    { background: #eef2ff !important; color: #6366f1 !important; }
.icon.icon-shape.bg-gradient-orange  { background: #fffbeb !important; color: #f59e0b !important; }
.icon.icon-shape.bg-gradient-red     { background: #ecfdf5 !important; color: #10b981 !important; }
.icon.icon-shape.bg-gradient-green   { background: #eff6ff !important; color: #3b82f6 !important; }
.icon.icon-shape.bg-gradient-primary { background: #faf5ff !important; color: #a855f7 !important; }
.icon.icon-shape i { color: inherit !important; }

/* ---------- Buttons (§6.7) ---------- */
.btn {
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  box-shadow: none !important;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn-sm, .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; }
.btn-xs, .btn-group-xs > .btn { padding: 2px 8px; font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 16px; }
.btn:active { transform: none !important; }
.btn-primary, .btn-info,
.btn-primary.disabled, .btn-primary[disabled] {
  background-color: var(--it-teal-600) !important;
  border-color: var(--it-teal-600) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-info:hover, .btn-info:focus, .btn-info:active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--it-teal-700) !important;
  border-color: var(--it-teal-700) !important;
  color: #fff !important;
}
.btn-default, .btn-secondary {
  background: #fff !important;
  border: 1px solid var(--it-gray-300) !important;
  color: var(--it-gray-700) !important;
}
.btn-default:hover, .btn-default:focus, .btn-secondary:hover, .btn-secondary:focus { background: var(--it-gray-50) !important; }
.btn-success { background-color: #16a34a !important; border-color: #16a34a !important; }
.btn-success:hover { background-color: #15803d !important; border-color: #15803d !important; }
.btn-danger { background-color: #dc2626 !important; border-color: #dc2626 !important; }
.btn-danger:hover { background-color: #b91c1c !important; border-color: #b91c1c !important; }
.btn-warning { background-color: #d97706 !important; border-color: #d97706 !important; }
.btn-warning:hover { background-color: #b45309 !important; border-color: #b45309 !important; }
.btn-link { color: var(--it-teal-600) !important; }
.btn[disabled], .btn.disabled { opacity: .7; cursor: not-allowed; }

/* ---------- Forms (§6.8) ---------- */
.control-label, label { font-size: 14px; font-weight: 500; color: var(--it-gray-700); }
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.bootstrap-select > .dropdown-toggle {
  border: 1px solid var(--it-gray-300) !important;
  border-radius: 8px !important;
  font-size: 14px;
  color: var(--it-gray-700);
  box-shadow: none !important;
  transition: border-color .15s, box-shadow .15s;
}
.form-control { height: 38px; padding: 8px 12px; }
textarea.form-control { height: auto; }
select[multiple].form-control { height: auto; }
.select2-container--default .select2-selection--single { height: 38px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.bootstrap-select > .dropdown-toggle:focus {
  border-color: var(--it-teal-500) !important;
  box-shadow: 0 0 0 2px rgb(13 148 136 / 0.35) !important;
  outline: none !important;
}
.form-control[disabled], .form-control[readonly] { background: var(--it-gray-50); }
.input-group-addon {
  background: var(--it-gray-50);
  border-color: var(--it-gray-300);
  color: var(--it-gray-500);
  border-radius: 8px;
}
.input-group .form-control:first-child, .input-group-addon:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group .form-control:last-child, .input-group-addon:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--it-teal-600); }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--it-teal-50); border: 1px solid var(--it-teal-100); color: var(--it-teal-700); border-radius: 9999px;
}
.select2-dropdown { border-color: var(--it-gray-200); border-radius: 8px; box-shadow: var(--it-shadow-md); }
.has-error .form-control { border-color: #dc2626 !important; }
.text-danger, .error { color: #dc2626; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--it-teal-600); }

/* ---------- Tables (§6.9) ---------- */
.table { font-size: 14px; color: var(--it-gray-700); margin-bottom: 0; }
.table-bordered { border: 1px solid var(--it-gray-200) !important; border-radius: 8px; }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td,
.table-bordered > thead > tr > td, .table-bordered > tfoot > tr > td,
.table > thead > tr > th, .table > tbody > tr > td, .table > tbody > tr > th {
  border-color: var(--it-gray-200) !important;
}
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border-left: 0 !important; border-right: 0 !important; }
.table > thead > tr > th,
table.dataTable thead th {
  background: var(--it-gray-50) !important;
  color: var(--it-gray-500) !important;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px !important;
  border-bottom: 1px solid var(--it-gray-200) !important;
  white-space: nowrap;
}
.table > tbody > tr > td { padding: 10px 12px !important; vertical-align: middle !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fff; }
.table-hover > tbody > tr:hover,
.table-striped > tbody > tr:hover,
table.dataTable tbody tr:hover { background: var(--it-gray-50) !important; }
.dataTables_wrapper table.dataTable thead th:first-child { background: var(--it-gray-50) !important; }
.dataTables_wrapper table.dataTable tbody tr:hover td:first-child { background: var(--it-gray-50) !important; }
.dataTables_wrapper { font-size: 14px !important; color: var(--it-gray-600); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--it-gray-300);
  border-radius: 8px;
  padding: 6px 10px;
  height: 34px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { border-color: var(--it-teal-500); outline: none; box-shadow: 0 0 0 2px rgb(13 148 136 / 0.35); }
.dataTables_wrapper .dataTables_info { color: var(--it-gray-500); font-size: 13px; }
.dataTables_empty { color: var(--it-gray-400); }
.dt-buttons .btn, .dt-button { margin-right: 6px; }

/* Pagination */
.pagination > li > a, .pagination > li > span {
  color: var(--it-gray-600);
  border-color: var(--it-gray-200);
  font-size: 13px;
  padding: 6px 12px;
}
.pagination > li:first-child > a, .pagination > li:first-child > span { border-radius: 8px 0 0 8px; }
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0 8px 8px 0; }
.pagination > li > a:hover, .pagination > li > a:focus { background: var(--it-teal-50); color: var(--it-teal-600); border-color: var(--it-gray-200); }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span, .pagination > .active > span:hover {
  background: var(--it-teal-600) !important;
  border-color: var(--it-teal-600) !important;
  color: #fff !important;
}

/* ---------- Badges & labels (§6.10) ---------- */
.label, .badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 2px 8px;
  border-radius: 9999px;
}
.label-default, .badge   { background: var(--it-gray-100); color: var(--it-gray-600); }
.label-primary, .bg-teal { background: var(--it-teal-50) !important; color: var(--it-teal-700) !important; }
.label-success           { background: #dcfce7; color: #15803d; }
.label-warning           { background: #fef3c7; color: #b45309; }
.label-danger            { background: #fee2e2; color: #b91c1c; }
.label-info              { background: #dbeafe; color: #2563eb; }
.badge-success { background: #dcfce7 !important; color: #15803d !important; }
.badge-warning { background: #fef3c7 !important; color: #b45309 !important; }
.badge-danger  { background: #fee2e2 !important; color: #b91c1c !important; }
.badge-info    { background: #dbeafe !important; color: #2563eb !important; }
.badge-primary { background: var(--it-teal-50) !important; color: var(--it-teal-700) !important; }

/* ---------- Alerts (inline strips) ---------- */
.alert {
  border: 0 !important;
  border-radius: 8px !important;
  font-size: 14px;
  padding: 10px 14px;
}
.alert-success { background: #f0fdf4 !important; color: #15803d !important; }
.alert-danger, .alert-error { background: #fef2f2 !important; color: #b91c1c !important; }
.alert-warning { background: #fffbeb !important; color: #b45309 !important; }
.alert-info { background: var(--it-teal-50) !important; color: var(--it-teal-700) !important; }
.alert .close { opacity: .5; text-shadow: none; }

/* ---------- Modals (§6.11) ---------- */
.modal-backdrop.in { opacity: .4; }
.modal-content {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--it-shadow-xl) !important;
}
.modal-header {
  border-bottom: 0 !important;
  padding: 24px 24px 8px !important;
  background: transparent !important;
  color: var(--it-navy) !important;
  border-radius: 12px 12px 0 0;
}
.modal-title { font-size: 18px; font-weight: 600; color: var(--it-navy); }
.modal-body { padding: 16px 24px !important; }
.modal-footer { border-top: 0 !important; padding: 8px 24px 24px !important; }
.modal-header .close { color: var(--it-gray-400); opacity: 1; font-weight: 400; text-shadow: none; }
.modal-header .close:hover { color: var(--it-gray-600); }

/* ---------- Dropdowns, nav tabs, datepickers ---------- */
.dropdown-menu { border-color: var(--it-gray-200); border-radius: 8px; box-shadow: var(--it-shadow-md); }
.dropdown-menu > li > a { font-size: 14px; color: var(--it-gray-600); padding: 8px 16px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: var(--it-teal-50); color: var(--it-teal-500); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover { background: var(--it-teal-600); color: #fff; }

/* Browser-tab style tab strip (§6.3) */
.nav-tabs { border-bottom: 1px solid var(--it-gray-200); }
.nav-tabs > li > a {
  border-radius: 8px 8px 0 0;
  color: var(--it-gray-500);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  border: 1px solid transparent;
}
.nav-tabs > li > a:hover { background: var(--it-gray-100); color: var(--it-gray-700); border-color: transparent; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  color: var(--it-teal-600);
  background: #fff;
  border: 1px solid var(--it-gray-200);
  border-bottom-color: #fff;
}
.nav-tabs-custom { border-radius: 8px; box-shadow: var(--it-shadow-md); }
.nav-tabs-custom > .nav-tabs > li.active { border-top-color: var(--it-teal-500); }
.nav-pills > li.active > a, .nav-pills > li.active > a:hover { background: var(--it-teal-600); }

.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.active, .datepicker table tr td span.active,
.daterangepicker td.active, .daterangepicker td.active:hover,
.ui-datepicker .ui-state-active, .ui-datepicker .ui-state-highlight {
  background: var(--it-teal-600) !important;
  border-color: var(--it-teal-600) !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* Progress bars */
.progress { background: var(--it-gray-100); border-radius: 9999px; box-shadow: none; }
.progress-bar { background-color: var(--it-teal-500); }

/* ---------- Status colours used across pages ---------- */
.text-primary { color: var(--it-teal-600) !important; }
.bg-primary, .bg-light-blue, .bg-aqua { background-color: var(--it-teal-600) !important; color: #fff !important; }
.text-muted { color: var(--it-gray-400) !important; }

/* ---------- Toasts (§6.12) — see js/intouch-ui.js ---------- */
#it-toast-stack {
  position: fixed; top: 20px; right: 20px; z-index: 10010;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.it-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 8px;
  min-width: 250px; max-width: 400px;
  padding: 12px 12px 12px 16px;
  border-radius: 8px;
  color: #fff; font-family: var(--it-font); font-size: 14px; font-weight: 500; line-height: 1.4;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  transform: translateX(120%);
  transition: transform .3s ease;
  word-break: break-word;
}
.it-toast.it-show { transform: translateX(0); }
.it-toast-success { background: #16a34a; }
.it-toast-error   { background: #dc2626; }
.it-toast-warning { background: #d97706; }
.it-toast-info    { background: var(--it-teal-600); }
.it-toast-icon { flex: none; margin-right: 4px; }
.it-toast-msg { flex: 1; }
.it-toast-close {
  background: none; border: 0; padding: 0 4px; margin-left: 4px;
  color: #fff; opacity: .7; font-size: 18px; line-height: 1; cursor: pointer;
}
.it-toast-close:hover { opacity: 1; }
@media (max-width: 480px) {
  #it-toast-stack { left: 16px; right: 16px; top: 12px; }
  .it-toast { min-width: 0; max-width: none; width: 100%; }
}

/* ---------- Confirm modal (§6.11) — see confirmModal() in js/intouch-ui.js ---------- */
.it-modal-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000;
  background: rgb(0 0 0 / 0.4);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; transition: opacity .15s ease;
}
.it-modal-overlay.it-show { opacity: 1; }
.it-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--it-shadow-xl);
  width: 100%; max-width: 448px;
  max-height: 92vh; overflow-y: auto;
  padding: 24px;
  font-family: var(--it-font);
  transform: translateY(8px); transition: transform .15s ease;
}
.it-modal-overlay.it-show .it-modal { transform: none; }
.it-modal-title { font-size: 18px; font-weight: 600; color: var(--it-navy); margin: 0 0 8px; }
.it-modal-msg { font-size: 14px; line-height: 1.5; color: var(--it-gray-600); margin: 0; white-space: pre-line; word-break: break-word; }
.it-modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.it-modal-actions .btn { min-width: 88px; }

/* ---------- Login ---------- */
.it-login-page { background: var(--it-gray-50) !important; }
.it-login-page #page-content-wrapper { padding-left: 0 !important; }
.it-login-page .main-sidebar { display: none; }
.it-login-page header.main-header { margin-top: 0 !important; }
.it-login-page header .navbar-toggle { display: none; }
.it-login-page header .logo-client { margin-left: 24px; }
.it-login-page .sing-up { padding: 64px 16px; }
.it-login-page .sing-up .row > .col-sm-6:first-child { display: none; }
.it-login-page .sing-up .row > .col-sm-6:last-child { float: none; width: 100%; max-width: 440px; margin: 0 auto; }
.sing-up-block {
  background: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--it-shadow-xl);
  padding: 32px !important;
}
.sing-up-block h2 {
  font-size: 24px !important;
  font-weight: 700;
  color: var(--it-navy) !important;
  text-align: left !important;
  margin-bottom: 4px !important;
}
.sing-up-block .it-login-sub { color: var(--it-gray-500); font-size: 14px; text-align: left; margin: 0 0 24px; }
.sing-up-block .form-group { margin-bottom: 16px !important; }
.sing-up-block .form-control {
  background: #fff !important;
  border: 1px solid var(--it-gray-300) !important;
  border-radius: 8px !important;
  height: 42px !important;
  font-size: 14px !important;
  text-align: left !important;
}
.sing-up-block button,
.sing-up-block button:hover, .sing-up-block button:focus, .sing-up-block button:active {
  width: 100%;
  max-width: none !important;
  height: 42px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500;
  background-color: var(--it-teal-600) !important;
  border: 0 !important;
  color: #fff !important;
  margin-bottom: 12px;
}
.sing-up-block button:hover { background-color: var(--it-teal-700) !important; }
.sing-up-block a { color: var(--it-teal-600); font-size: 14px; }
.sing-up-block .error { display: block; font-size: 14px; margin-bottom: 8px; }