/* ==========================================================
   ENUW — Perfex CRM Light Theme v2
   useus.pro admin panel — full design system coverage
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── TOKENS ─────────────────────────────────────────── */
:root {
  --bg:           #f1f4f8;
  --surface:      #ffffff;
  --elevated:     #f8fafc;
  --border:       #e2e8f0;
  --border-hi:    #cbd5e1;
  --fg:           #0f172a;
  --fg-muted:     #475569;
  --fg-dim:       #94a3b8;
  --accent:       #0369a1;
  --accent-mid:   #0284c7;
  --accent-light: #0ea5e9;
  --accent-dim:   rgba(3,105,161,0.08);
  --accent-glow:  rgba(3,105,161,0.16);
  --danger:       #dc2626;
  --danger-dim:   rgba(220,38,38,0.08);
  --success:      #16a34a;
  --success-dim:  rgba(22,163,74,0.08);
  --warning:      #d97706;
  --warning-dim:  rgba(217,119,6,0.08);
  --info-dim:     rgba(3,105,161,0.08);
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --sh-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-md: 0 4px 16px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.04);
  --sh-lg: 0 10px 32px rgba(0,0,0,.09),0 4px 8px rgba(0,0,0,.05);
  --sh-xl: 0 20px 48px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.06);
}

/* ─── BASE ───────────────────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--fg) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
}
a { color: var(--accent-mid); transition: color .15s; }
a:hover, a:focus { color: var(--accent); text-decoration: none; }
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: 'Manrope', sans-serif !important;
  color: var(--fg) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
code, pre, .mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: .87em;
}
small, .text-muted  { color: var(--fg-muted) !important; }
.text-primary       { color: var(--accent-mid) !important; }
.text-success       { color: var(--success) !important; }
.text-danger        { color: var(--danger) !important; }
.text-warning       { color: var(--warning) !important; }
.text-info          { color: var(--accent-light) !important; }
hr { border-top: 1px solid var(--border) !important; }
::placeholder { color: var(--fg-dim) !important; opacity: 1 !important; }
::-webkit-input-placeholder { color: var(--fg-dim) !important; }

/* ─── LAYOUT ─────────────────────────────────────────── */
#wrapper { background: var(--bg) !important; }
.content {
  background: var(--bg) !important;
  color: var(--fg) !important;
  padding: 24px 28px !important;
  min-height: calc(100vh - 57px) !important;
}
@media(max-width:768px){ .content { padding: 14px !important; } }
.page-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--fg) !important;
  margin-bottom: 20px !important;
}
.breadcrumb {
  background: transparent !important;
  padding-left: 0 !important;
  margin-bottom: 6px !important;
  font-size: 12.5px;
}
.breadcrumb > li + li::before { color: var(--border-hi) !important; }
.breadcrumb > .active { color: var(--fg-muted) !important; }

/* ─── HEADER ─────────────────────────────────────────── */
#header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 var(--border), var(--sh-sm) !important;
  height: 57px !important;
}
#logo a, #logo .logo-text {
  color: var(--fg) !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.navbar-nav > li > a {
  color: var(--fg-muted) !important;
  border-radius: var(--r-sm) !important;
  transition: background .15s, color .15s !important;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav .open > a {
  background: var(--elevated) !important;
  color: var(--fg) !important;
}
#header li > a.active {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  border-radius: var(--r-sm) !important;
}
/* search */
#search_input {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;
  border-radius: var(--r-sm) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
#search_input:focus {
  border-color: var(--accent-mid) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none !important;
}
/* Tailwind-hardened search override */
.tw-ring-0:focus { --tw-ring-shadow: none !important; }
.hide-menu { color: var(--fg-muted) !important; }
.hide-menu:hover { background: var(--elevated) !important; border-radius: var(--r-sm) !important; }
/* header dropdowns */
.navbar-nav > li > .dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--sh-xl) !important;
  border-radius: var(--r-md) !important;
  padding: 6px !important;
}
.navbar-nav > li > .dropdown-menu li a {
  color: var(--fg-muted) !important;
  border-radius: var(--r-xs) !important;
  padding: 7px 12px !important;
}
.navbar-nav > li > .dropdown-menu li a:hover {
  background: var(--elevated) !important;
  color: var(--fg) !important;
}
/* notification badge */
.notifications-count,
.notifications-list-count {
  background: var(--danger) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

/* ─── SIDEBAR ────────────────────────────────────────── */
.sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 1px 0 0 var(--border) !important;
}
/* sidebar user card */
.sidebar .profile-info,
.sidebar .tw-bg-white {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  margin: 10px 10px 6px !important;
}
.sidebar .profile-info .name,
.sidebar .tw-font-semibold {
  color: var(--fg) !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
}
.sidebar .profile-info .position,
.sidebar .tw-text-neutral-500 { color: var(--fg-dim) !important; }
/* nav items */
.sidebar > ul.nav > li,
.sidebar .metismenu > li {
  margin: 1px 8px !important;
  border-radius: var(--r-sm) !important;
}
.sidebar ul.nav li a,
.sidebar .metismenu li a {
  color: var(--fg-muted) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 12px !important;
  transition: background .15s, color .15s !important;
  border-left: 2px solid transparent !important;
}
.sidebar ul.nav li a:hover,
.sidebar .metismenu li a:hover {
  background: var(--elevated) !important;
  color: var(--fg) !important;
}
.sidebar ul.nav li.active > a,
.sidebar .metismenu li.active > a,
.sidebar ul.nav li.mm-active > a {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
  font-weight: 600 !important;
}
.sidebar ul.nav li a i,
.sidebar .metismenu li a i {
  color: var(--fg-dim) !important;
  width: 18px !important;
  text-align: center !important;
}
.sidebar ul.nav li.active > a i,
.sidebar .metismenu li.active > a i {
  color: var(--accent) !important;
}
/* sub-menu */
.sidebar .nav-second-level,
.sidebar ul.nav > li > ul {
  background: var(--elevated) !important;
  border-radius: var(--r-sm) !important;
  margin: 2px 4px !important;
  padding: 4px 0 !important;
}
.sidebar .nav-second-level li a { font-size: 13px !important; padding-left: 36px !important; }
/* sidebar bottom area */
.sidebar-bottom, .sidebar-footer {
  border-top: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

/* ─── PANELS / CARDS ────────────────────────────────── */
.panel_s, .panel, .card,
.tw-bg-white.tw-rounded-lg,
.tw-bg-white.tw-shadow {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-sm) !important;
  margin-bottom: 20px !important;
}
.panel-heading, .card-header,
.panel_s > .panel-heading {
  background: var(--elevated) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
  padding: 14px 18px !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--fg) !important;
}
.panel-body, .card-body {
  padding: 18px !important;
  background: var(--surface) !important;
}
.panel-footer, .card-footer {
  background: var(--elevated) !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 18px !important;
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
}
.well {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  padding: 16px !important;
}
/* stat/KPI cards on dashboard */
.stat-cell, .stat-box, .top-stats-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-sm) !important;
  padding: 18px !important;
}
.stat-cell .heading, .top-stats-item .heading {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--fg-dim) !important;
  margin-bottom: 6px !important;
}
.stat-cell .val, .top-stats-item .val,
.stat-cell h2, .top-stats-item h2 {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: var(--fg) !important;
}

/* ─── TABLES ─────────────────────────────────────────── */
.table { width: 100% !important; }
.table > thead > tr > th {
  background: var(--elevated) !important;
  color: var(--fg-muted) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  border-bottom: 2px solid var(--border) !important;
  border-top: none !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
}
.table > tbody > tr > td {
  color: var(--fg) !important;
  border-top: 1px solid var(--border) !important;
  padding: 10px 14px !important;
  vertical-align: middle !important;
  font-size: 13.5px !important;
}
.table > tbody > tr:hover > td {
  background: var(--elevated) !important;
}
.table > tbody > tr:first-child > td { border-top: none !important; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--border) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: rgba(248,250,252,.7) !important;
}
/* DataTables */
.dataTables_wrapper { padding: 0 !important; }
.dataTables_length label,
.dataTables_filter label,
.dataTables_info {
  color: var(--fg-muted) !important;
  font-size: 13px !important;
}
.dataTables_length select,
.dataTables_filter input {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--fg) !important;
  padding: 4px 8px !important;
}
.dataTables_filter input:focus {
  border-color: var(--accent-mid) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none !important;
}
.paginate_button {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-muted) !important;
  border-radius: var(--r-xs) !important;
  padding: 4px 10px !important;
  margin: 0 2px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.paginate_button:hover {
  background: var(--elevated) !important;
  border-color: var(--border-hi) !important;
  color: var(--fg) !important;
}
.paginate_button.current,
.paginate_button.current:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.paginate_button.disabled,
.paginate_button.disabled:hover {
  background: var(--elevated) !important;
  border-color: var(--border) !important;
  color: var(--fg-dim) !important;
  cursor: default !important;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  background-position: center right 8px !important;
}

/* ─── FORMS ──────────────────────────────────────────── */
.form-group { margin-bottom: 16px !important; }
.control-label, label {
  color: var(--fg-muted) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  margin-bottom: 5px !important;
  display: block !important;
}
.form-control {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--fg) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  height: 38px !important;
  padding: 7px 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.form-control:focus {
  border-color: var(--accent-mid) !important;
  box-shadow: 0 0 0 3px var(--accent-glow), 0 1px 2px rgba(0,0,0,.04) !important;
  outline: none !important;
  background: var(--surface) !important;
}
.form-control[disabled], .form-control[readonly] {
  background: var(--elevated) !important;
  color: var(--fg-dim) !important;
  cursor: not-allowed !important;
}
textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}
/* input groups */
.input-group-addon {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--fg-muted) !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
}
.input-group .form-control:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm) !important; }
.input-group .form-control:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }
.input-group-addon:first-child { border-right: 0 !important; }
.input-group-addon:last-child  { border-left: 0 !important; }
/* checkboxes & radios */
.checkbox label, .radio label {
  color: var(--fg) !important;
  font-size: 13.5px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  cursor: pointer !important;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  accent-color: var(--accent-mid);
}
/* field validation */
.has-error .form-control {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px var(--danger-dim) !important;
}
.has-error .control-label,
.has-error .help-block { color: var(--danger) !important; }
.has-success .form-control { border-color: var(--success) !important; }
.has-success .control-label { color: var(--success) !important; }
.help-block { color: var(--fg-dim) !important; font-size: 12px !important; }

/* ─── BOOTSTRAP-SELECT ───────────────────────────────── */
.bootstrap-select > .dropdown-toggle {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--fg) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  height: 38px !important;
  padding: 7px 28px 7px 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  transition: border-color .15s !important;
}
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select.open > .dropdown-toggle {
  border-color: var(--accent-mid) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none !important;
}
.bootstrap-select .dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-xl) !important;
  padding: 6px !important;
  margin-top: 4px !important;
}
.bootstrap-select .dropdown-menu > li > a {
  color: var(--fg-muted) !important;
  border-radius: var(--r-xs) !important;
  padding: 7px 12px !important;
  font-size: 13.5px !important;
  transition: background .1s !important;
}
.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li.active > a {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
}
.bootstrap-select .dropdown-menu .bs-searchbox input {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--fg) !important;
  font-size: 13.5px !important;
}
.bootstrap-select .dropdown-menu .notify {
  background: var(--elevated) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--fg-dim) !important;
  font-size: 12px !important;
}
.bootstrap-select .caret { border-top-color: var(--fg-muted) !important; }

/* ─── BUTTONS ────────────────────────────────────────── */
.btn {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  border-radius: var(--r-sm) !important;
  padding: 7px 16px !important;
  height: 36px !important;
  line-height: 1.4 !important;
  transition: all .15s !important;
  cursor: pointer !important;
  border-width: 1px !important;
}
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(3,105,161,.3) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-mid) !important;
  border-color: var(--accent-mid) !important;
  box-shadow: 0 4px 12px rgba(3,105,161,.35) !important;
  color: #fff !important;
}
.btn-primary:active {
  background: #075985 !important;
  box-shadow: 0 1px 2px rgba(3,105,161,.2) !important;
  transform: translateY(1px) !important;
}
.btn-default {
  background: var(--surface) !important;
  border-color: var(--border-hi) !important;
  color: var(--fg-muted) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}
.btn-default:hover, .btn-default:focus {
  background: var(--elevated) !important;
  border-color: var(--border-hi) !important;
  color: var(--fg) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08) !important;
}
.btn-default:active {
  transform: translateY(1px) !important;
  box-shadow: none !important;
}
.btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(22,163,74,.3) !important;
}
.btn-success:hover { background: #15803d !important; border-color: #15803d !important; color: #fff !important; }
.btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(220,38,38,.3) !important;
}
.btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; }
.btn-warning {
  background: var(--warning) !important;
  border-color: var(--warning) !important;
  color: #fff !important;
}
.btn-warning:hover { background: #b45309 !important; border-color: #b45309 !important; color: #fff !important; }
.btn-info {
  background: var(--accent-light) !important;
  border-color: var(--accent-light) !important;
  color: #fff !important;
}
.btn-info:hover { background: var(--accent-mid) !important; color: #fff !important; }
/* size variants */
.btn-sm { padding: 4px 12px !important; height: 30px !important; font-size: 12.5px !important; }
.btn-xs { padding: 2px 8px !important; height: 24px !important; font-size: 11.5px !important; }
.btn-lg { padding: 10px 22px !important; height: 44px !important; font-size: 15px !important; }
.btn-block { width: 100% !important; height: auto !important; padding: 10px 16px !important; }
/* button groups */
.btn-group > .btn:not(:first-child):not(:last-child) { border-radius: 0 !important; }
.btn-group > .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm) !important; }
.btn-group > .btn:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0 !important; }

/* ─── STATUS LABELS / BADGES ─────────────────────────── */
.label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 100px !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
}
.label-default  { background: var(--elevated) !important; color: var(--fg-muted) !important; border: 1px solid var(--border-hi) !important; }
.label-primary  { background: var(--accent-dim) !important; color: var(--accent) !important; border: 1px solid rgba(3,105,161,.2) !important; }
.label-success  { background: var(--success-dim) !important; color: var(--success) !important; border: 1px solid rgba(22,163,74,.2) !important; }
.label-danger   { background: var(--danger-dim) !important; color: var(--danger) !important; border: 1px solid rgba(220,38,38,.2) !important; }
.label-warning  { background: var(--warning-dim) !important; color: var(--warning) !important; border: 1px solid rgba(217,119,6,.2) !important; }
.label-info     { background: var(--info-dim) !important; color: var(--accent-mid) !important; border: 1px solid rgba(3,105,161,.15) !important; }
/* invoice statuses */
.label-invoice-status-1 { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; } /* Unpaid */
.label-invoice-status-2 { background: var(--success-dim) !important; color: var(--success) !important; border: 1px solid rgba(22,163,74,.2) !important; } /* Paid */
.label-invoice-status-3 { background: var(--danger-dim) !important; color: var(--danger) !important; border: 1px solid rgba(220,38,38,.2) !important; } /* Overdue */
.label-invoice-status-4 { background: var(--elevated) !important; color: var(--fg-dim) !important; border: 1px solid var(--border) !important; } /* Draft */
.label-invoice-status-5 { background: var(--warning-dim) !important; color: var(--warning) !important; border: 1px solid rgba(217,119,6,.2) !important; } /* Partial */
.label-invoice-status-6 { background: var(--elevated) !important; color: var(--fg-dim) !important; border: 1px solid var(--border) !important; } /* Cancelled */
/* estimate statuses */
.label-estimate-status-1 { background: var(--elevated) !important; color: var(--fg-dim) !important; border: 1px solid var(--border) !important; } /* Draft */
.label-estimate-status-2 { background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; } /* Sent */
.label-estimate-status-3 { background: var(--success-dim) !important; color: var(--success) !important; border: 1px solid rgba(22,163,74,.2) !important; } /* Accepted */
.label-estimate-status-4 { background: var(--danger-dim) !important; color: var(--danger) !important; border: 1px solid rgba(220,38,38,.2) !important; } /* Declined */
.label-estimate-status-5 { background: var(--warning-dim) !important; color: var(--warning) !important; border: 1px solid rgba(217,119,6,.2) !important; } /* Expired */
/* badge (counts) */
.badge {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 100px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
}
.badge-success { background: var(--success) !important; }
.badge-danger  { background: var(--danger) !important; }
.badge-warning { background: var(--warning) !important; }

/* ─── MODALS ─────────────────────────────────────────── */
.modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-xl) !important;
  overflow: hidden !important;
}
.modal-header {
  background: var(--elevated) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}
.modal-header .modal-title {
  font-family: 'Manrope', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--fg) !important;
}
.modal-header .close {
  color: var(--fg-muted) !important;
  opacity: .7 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transition: opacity .15s !important;
}
.modal-header .close:hover { opacity: 1 !important; color: var(--danger) !important; }
.modal-body { padding: 20px !important; }
.modal-footer {
  background: var(--elevated) !important;
  border-top: 1px solid var(--border) !important;
  padding: 14px 20px !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  align-items: center !important;
}
.modal-backdrop { background: #0f172a !important; }
.modal-backdrop.in { opacity: .4 !important; }
/* modal sizes */
.modal-lg { width: 860px !important; max-width: 92vw !important; }
.modal-sm { width: 400px !important; }

/* ─── ALERTS ─────────────────────────────────────────── */
.alert {
  border-radius: var(--r-md) !important;
  border-width: 1px !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  border-left-width: 4px !important;
}
.alert-success {
  background: var(--success-dim) !important;
  border-color: var(--success) !important;
  color: #14532d !important;
}
.alert-danger, .alert-error {
  background: var(--danger-dim) !important;
  border-color: var(--danger) !important;
  color: #7f1d1d !important;
}
.alert-warning {
  background: var(--warning-dim) !important;
  border-color: var(--warning) !important;
  color: #78350f !important;
}
.alert-info {
  background: var(--info-dim) !important;
  border-color: var(--accent-light) !important;
  color: #0c4a6e !important;
}
/* float alerts */
.alert_float_container,
#alert_float_container {
  z-index: 9999 !important;
  top: 70px !important;
  right: 20px !important;
}
.alert_float {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  min-width: 260px !important;
}

/* ─── TABS ───────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid var(--border) !important;
  margin-bottom: 16px !important;
}
.nav-tabs > li > a {
  color: var(--fg-muted) !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  padding: 10px 16px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  border-radius: 0 !important;
  transition: color .15s, border-color .15s !important;
}
.nav-tabs > li > a:hover {
  background: transparent !important;
  border-color: transparent transparent var(--border-hi) !important;
  color: var(--fg) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.tab-content {
  background: var(--surface) !important;
  padding: 0 !important;
}
/* pill/settings tabs */
.nav-pills > li > a {
  border-radius: var(--r-sm) !important;
  color: var(--fg-muted) !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  transition: all .15s !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.nav-pills > li > a:hover {
  background: var(--elevated) !important;
  color: var(--fg) !important;
}

/* ─── DROPDOWNS ──────────────────────────────────────── */
.dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-xl) !important;
  padding: 6px !important;
  min-width: 180px !important;
}
.dropdown-menu > li > a {
  color: var(--fg-muted) !important;
  font-size: 13.5px !important;
  padding: 7px 12px !important;
  border-radius: var(--r-xs) !important;
  transition: background .1s !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li.active > a {
  background: var(--elevated) !important;
  color: var(--fg) !important;
}
.dropdown-menu > .divider {
  background: var(--border) !important;
  margin: 5px 0 !important;
}
.dropdown-header {
  color: var(--fg-dim) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 6px 12px !important;
}

/* ─── PROGRESS BARS ──────────────────────────────────── */
.progress {
  background: var(--elevated) !important;
  border-radius: 100px !important;
  box-shadow: none !important;
  height: 8px !important;
  border: 1px solid var(--border) !important;
}
.progress-bar {
  background: var(--accent) !important;
  border-radius: 100px !important;
  transition: width .4s ease !important;
}
.progress-bar-success { background: var(--success) !important; }
.progress-bar-danger  { background: var(--danger) !important; }
.progress-bar-warning { background: var(--warning) !important; }
.progress-bar-info    { background: var(--accent-light) !important; }

/* ─── DATETIMEPICKER ─────────────────────────────────── */
.xdsoft_datetimepicker {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-xl) !important;
}
.xdsoft_datetimepicker .xdsoft_datepicker {
  background: var(--surface) !important;
}
.xdsoft_datetimepicker .xdsoft_calendar th {
  background: var(--elevated) !important;
  color: var(--fg-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td {
  background: var(--surface) !important;
  color: var(--fg-muted) !important;
  border: 1px solid var(--elevated) !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td:hover div,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current div {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  border-radius: var(--r-xs) !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today div {
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  border-radius: var(--r-xs) !important;
}
.xdsoft_datetimepicker .xdsoft_monthpicker,
.xdsoft_datetimepicker .xdsoft_timepicker {
  background: var(--surface) !important;
}
.xdsoft_datetimepicker .xdsoft_label { color: var(--fg) !important; }
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_today_button {
  background: var(--elevated) !important;
  color: var(--fg-muted) !important;
  border-radius: var(--r-xs) !important;
}

/* ─── DROPZONE ───────────────────────────────────────── */
.dropzone {
  background: var(--elevated) !important;
  border: 2px dashed var(--border-hi) !important;
  border-radius: var(--r-md) !important;
  padding: 32px 20px !important;
  text-align: center !important;
  transition: border-color .2s, background .2s !important;
}
.dropzone:hover, .dropzone.dz-drag-hover {
  border-color: var(--accent) !important;
  background: var(--accent-dim) !important;
}
.dropzone .dz-message {
  color: var(--fg-muted) !important;
  font-size: 14px !important;
}
.dropzone .dz-message i { color: var(--fg-dim) !important; margin-bottom: 8px !important; }
.dropzone .dz-preview .dz-image {
  border-radius: var(--r-sm) !important;
  background: var(--elevated) !important;
}
.dropzone .dz-preview .dz-progress { background: var(--border) !important; }
.dropzone .dz-preview .dz-progress .dz-upload { background: var(--accent) !important; }
.dropzone .dz-preview .dz-filename span,
.dropzone .dz-preview .dz-size { color: var(--fg-muted) !important; font-size: 12px !important; }
.dropzone .dz-error .dz-error-mark svg { fill: var(--danger) !important; }

/* ─── TAGSINPUT ──────────────────────────────────────── */
.bootstrap-tagsinput {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  padding: 5px 8px !important;
  min-height: 38px !important;
}
.bootstrap-tagsinput:focus-within {
  border-color: var(--accent-mid) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
.bootstrap-tagsinput .tag {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  border-radius: 100px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border: 1px solid rgba(3,105,161,.15) !important;
  margin: 2px !important;
}
.bootstrap-tagsinput .tag [data-role="remove"]::after { color: var(--accent) !important; }
.bootstrap-tagsinput input {
  color: var(--fg) !important;
  font-size: 14px !important;
}

/* ─── TINYMCE EDITOR ─────────────────────────────────── */
.tox-tinymce {
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.tox .tox-toolbar,
.tox .tox-toolbar__primary {
  background: var(--elevated) !important;
  border-bottom: 1px solid var(--border) !important;
}
.tox .tox-toolbar__group { border-right: 1px solid var(--border) !important; }
.tox .tox-tbtn {
  color: var(--fg-muted) !important;
  border-radius: var(--r-xs) !important;
}
.tox .tox-tbtn:hover { background: var(--border) !important; color: var(--fg) !important; }
.tox .tox-edit-area { background: var(--surface) !important; }
.tox .tox-statusbar {
  background: var(--elevated) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--fg-dim) !important;
}

/* ─── COLORPICKER ────────────────────────────────────── */
.colorpicker-component .input-group-addon {
  cursor: pointer !important;
}
.colorpicker {
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
  border: 1px solid var(--border) !important;
}

/* ─── ACCOUNTING TEMPLATE (Invoices/Estimates) ───────── */
.accounting-template { background: var(--surface) !important; }
/* line items table */
.accounting-template .invoice-items-table th {
  background: var(--elevated) !important;
  color: var(--fg-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 10px 12px !important;
  border-bottom: 2px solid var(--border) !important;
}
.accounting-template .invoice-items-table td {
  border-top: 1px solid var(--border) !important;
  padding: 8px 10px !important;
  vertical-align: middle !important;
}
.accounting-template .invoice-items-table tr:hover td {
  background: var(--elevated) !important;
}
/* totals section */
.accounting-template .tax-summary-wrapper {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  padding: 16px !important;
}
.accounting-template .tax-summary-wrapper .tax-total-row { border-top: 1px solid var(--border) !important; }
/* item select */
.accounting-template #item_select .bootstrap-select > .dropdown-toggle {
  background: var(--elevated) !important;
}
/* discount / adjustment */
.accounting-template .discount-row input.form-control,
.accounting-template .adjustment-row input.form-control {
  text-align: right !important;
  font-family: 'JetBrains Mono', monospace !important;
}
/* subtotal, tax, total labels */
.accounting-template .text-right strong,
.accounting-template .table-totals strong {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  color: var(--fg) !important;
}
.accounting-template .grand-total strong,
.accounting-template .invoice-total strong {
  font-size: 18px !important;
  color: var(--accent) !important;
}
/* note / terms */
.accounting-template .invoice-note textarea,
.accounting-template .invoice-terms textarea {
  font-size: 13.5px !important;
  min-height: 70px !important;
}

/* ─── DASHBOARD WIDGETS ──────────────────────────────── */
.widget {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-sm) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
.widget .widget-head {
  background: var(--elevated) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: var(--fg) !important;
}
.widget .widget-body { padding: 16px !important; }
/* FullCalendar */
.fc-toolbar { margin-bottom: 12px !important; }
.fc-toolbar h2 {
  font-family: 'Manrope', sans-serif !important;
  font-size: 15px !important;
  color: var(--fg) !important;
}
.fc-toolbar .fc-button {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg-muted) !important;
  border-radius: var(--r-sm) !important;
  font-size: 12.5px !important;
  padding: 4px 10px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.fc-toolbar .fc-button:hover { background: var(--elevated) !important; }
.fc-toolbar .fc-button.fc-state-active {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.fc-head-container.fc-widget-header th {
  background: var(--elevated) !important;
  color: var(--fg-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  border-color: var(--border) !important;
  padding: 6px 4px !important;
}
.fc-day { border-color: var(--border) !important; background: var(--surface) !important; }
.fc-today { background: var(--accent-dim) !important; }
.fc-event {
  background: var(--accent) !important;
  border: none !important;
  border-radius: var(--r-xs) !important;
  font-size: 11.5px !important;
  padding: 2px 5px !important;
}

/* ─── SETTINGS PAGE ──────────────────────────────────── */
#settings-nav .nav-pills { border-right: 1px solid var(--border) !important; padding-right: 8px !important; }
#settings-nav .nav-pills > li > a {
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-radius: var(--r-sm) !important;
  color: var(--fg-muted) !important;
}
#settings-nav .nav-pills > li.active > a,
#settings-nav .nav-pills > li > a:hover {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
}

/* ─── KANBAN BOARD ───────────────────────────────────── */
.kanban-col {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
}
.kanban-col-header {
  background: var(--elevated) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  font-family: 'Manrope', sans-serif !important;
  font-size: 13px !important;
  color: var(--fg) !important;
}
.kanban-card, .task-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--sh-sm) !important;
  padding: 12px !important;
  margin-bottom: 8px !important;
  transition: box-shadow .15s !important;
  cursor: pointer !important;
}
.kanban-card:hover, .task-card:hover {
  box-shadow: var(--sh-md) !important;
  border-color: var(--border-hi) !important;
}

/* ─── TIMELINE / ACTIVITY ────────────────────────────── */
.timeline {
  border-left: 2px solid var(--border) !important;
  padding-left: 20px !important;
}
.timeline-item { margin-bottom: 16px !important; }
.timeline-badge {
  background: var(--accent) !important;
  border: 2px solid var(--surface) !important;
  border-radius: 50% !important;
  width: 10px !important;
  height: 10px !important;
}
.timeline-body {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
}
.timeline-footer { color: var(--fg-dim) !important; font-size: 12px !important; }

/* ─── TOOLTIPS ───────────────────────────────────────── */
.tooltip .tooltip-inner {
  background: var(--fg) !important;
  color: var(--surface) !important;
  border-radius: var(--r-sm) !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  max-width: 220px !important;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--fg) !important; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--fg) !important; }
.tooltip.left .tooltip-arrow { border-left-color: var(--fg) !important; }
.tooltip.right .tooltip-arrow { border-right-color: var(--fg) !important; }

/* ─── POPOVER ────────────────────────────────────────── */
.popover {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--sh-lg) !important;
}
.popover-title {
  background: var(--elevated) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
  color: var(--fg) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}
.popover-content { color: var(--fg-muted) !important; font-size: 13.5px !important; }

/* ─── INVOICE ITEMS MODAL APPAREL TEMPLATE ───────────── */
#sales_item_modal .apparel-template-btn {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--fg-muted) !important;
  font-size: 12.5px !important;
  padding: 4px 12px !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
#sales_item_modal .apparel-template-btn:hover {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
#sales_item_modal .supplier-lookup-bar {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 14px !important;
  margin-bottom: 14px !important;
}
#sales_item_modal .supplier-lookup-bar input {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xs) !important;
  color: var(--fg) !important;
  font-size: 13.5px !important;
  padding: 5px 10px !important;
  width: 160px !important;
}
/* sanmar/ss buttons */
.btn-sanmar {
  background: #003087 !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
}
.btn-sanmar:hover { background: #00257a !important; color: #fff !important; }
.btn-ss-activewear {
  background: #c41230 !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
}
.btn-ss-activewear:hover { background: #a00e27 !important; color: #fff !important; }

/* ─── MISC ───────────────────────────────────────────── */
/* horizontal scroll for wide tables */
.table-responsive { border: none !important; }
/* empty state */
.no-results, .dataTables_empty {
  color: var(--fg-dim) !important;
  font-size: 14px !important;
  padding: 40px !important;
  text-align: center !important;
}
/* spinners / loading */
.fa-spin { color: var(--accent) !important; }
.loading-overlay {
  background: rgba(241,244,248,.85) !important;
  border-radius: var(--r-md) !important;
}
/* scrollbars */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--elevated); }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-dim); }
/* selection */
::selection { background: var(--accent-glow); color: var(--fg); }
/* print */
@media print {
  #header, .sidebar, .breadcrumb { display: none !important; }
  .content { padding: 0 !important; }
  .panel_s { box-shadow: none !important; border: 1px solid #ddd !important; }
}