@import url('../vendor/fonts/fonts.css');

:root {
  --navy: #123153;
  --navy-deep: #0B1D32;
  --indigo: #1D6098;
  --teal: #1769AA;
  --teal-dark: #12558A;
  --teal-light: #EAF3FB;
  --teal-mid: #C8DFF2;
  --sky: #52A4DC;
  --slate-50: #F7F9FC;
  --slate-100: #EEF2F7;
  --slate-200: #E1E8F0;
  --slate-400: #8998AA;
  --slate-600: #536477;
  --slate-700: #3A4B5F;
  --slate-800: #25364A;
  --green: #10B981;
  --green-light: #D1FAE5;
  --amber: #F59E0B;
  --amber-light: #FEF3C7;
  --red: #EF4444;
  --red-light: #FEE2E2;
  --purple: #8B5CF6;
  --purple-light: #EDE9FE;

  /* Backward-compatible aliases used throughout the existing styles. */
  --brand-navy: var(--navy);
  --brand-blue: var(--teal);
  --brand-blue-dark: var(--teal-dark);
  --sidebar-bg: var(--navy);
  --sidebar-hover: rgba(255,255,255,.08);
  --page-bg: #F4F7FB;
}

body {
  background-color: var(--page-bg);
  font-family: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--slate-800);
  font-size: 0.88rem;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.01em;
}

/* ---- Splash / Auth pages ---- */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-blue-dark) 100%);
}
.auth-card {
  background: #fff;
  border-radius: 14px;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.auth-brand {
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.5rem;
}
.auth-brand .dot { color: var(--brand-blue); }
.splash-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, var(--indigo), var(--navy-deep));
  color: #fff;
  text-align: center;
}
.splash-logo {
  width: 84px; height: 84px; border-radius: 20px;
  background: var(--brand-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 800; margin-bottom: 1.5rem;
}

/* ===================================================================
   App shell — sidebar is fixed to the viewport and scrolls
   independently from the page content; header/topbar is sticky.
   =================================================================== */
:root {
  --sidebar-width: 255px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 64px;
}

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  color: #cbd5e1;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  transition: width .18s ease;
  z-index: 40;
}
.sidebar-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem 0.75rem 1rem;
}
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }

.sidebar .brand {
  color: #fff; font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 800; font-size: 1.1rem;
  padding: 0 0.5rem 1.25rem 0.5rem; display: flex; align-items: center; gap: 10px; white-space: normal;
}
.sidebar .brand-text { min-width:0; font-size:1rem; font-weight:800; line-height:1.15; white-space:nowrap; }
.sidebar-compact-toggle { display:none; }
.sidebar .brand-icon {
  width: 36px; height: 36px; border-radius: 0; flex-shrink: 0;
  background: none; box-shadow: none; filter: none;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.sidebar .brand-icon img { width:100%; height:100%; display:block; object-fit:contain; border:0; box-shadow:none; filter:none; }
.sidebar a {
  color: rgba(255,255,255,.65); text-decoration: none; display: flex; align-items: center; gap: 10px;
  padding: 0.5rem 0.7rem; border-radius: 9px; font-size: 0.88rem; margin-bottom: 3px;
  transition: all .15s; white-space: nowrap; position: relative;
}
.sidebar a i {
  width: 26px; height: 26px; border-radius: 7px; text-align: center; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
  background: rgba(255,255,255,.06); transition: all .15s;
}
.sidebar a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar a.active {
  background: rgba(247,148,29,.16); color: #fff; font-weight: 600;
}
.sidebar a.active i { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff; }
.sidebar .section-label {
  text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.07em; font-weight: 700;
  color: rgba(255,255,255,.32); margin: 1.1rem 0 0.5rem 0.7rem; white-space: nowrap; overflow: hidden;
}
.nav-pill {
  margin-left: auto; background: var(--teal); color: #fff; font-size: 0.68rem; font-weight: 700;
  padding: 1px 7px; border-radius: 20px; line-height: 1.4;
}

.sidebar-footer {
  flex-shrink: 0; padding: 0.9rem 1rem; border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-status { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: #cbd5e1; margin-bottom: 4px; white-space: nowrap; }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0;
  box-shadow: 0 0 0 rgba(16,185,129,.5); animation: status-pulse 2s infinite;
}
@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.sidebar-version { font-size: 0.68rem; color: var(--slate-400); white-space: nowrap; overflow: hidden; }

/* Collapsed sidebar state */
.sidebar-collapsed .sidebar { width: var(--sidebar-width-collapsed); }
.sidebar-collapsed .sidebar .brand-text,
.sidebar-collapsed .sidebar .nav-text,
.sidebar-collapsed .sidebar .section-label,
.sidebar-collapsed .sidebar .nav-pill,
.sidebar-collapsed .sidebar-status .nav-text,
.sidebar-collapsed .sidebar-version { display: none; }
.sidebar-collapsed .sidebar a { justify-content: center; }
.sidebar-collapsed .main-content { margin-left: var(--sidebar-width-collapsed); }

.main-content { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; margin-left: var(--sidebar-width); transition: margin-left .18s ease; }

.topbar {
  background: #fff; border-bottom: 1px solid var(--slate-200);
  padding: 0.65rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 30; height: var(--topbar-height); gap: 1rem;
}
.topbar-title { font-weight: 600; color: var(--navy); font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; white-space: nowrap; }
.sidebar-toggle {
  background: none; border: none; color: var(--slate-600); font-size: 1.05rem; width: 34px; height: 34px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--slate-100); color: var(--navy); }

.topbar-search {
  position: relative; max-width: 360px; width: 100%; display: none;
}
@media (min-width: 768px) { .topbar-search { display: block; } }
.topbar-search i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--slate-400); font-size: 0.85rem;
}
.topbar-search input {
  width: 100%; border: 1px solid var(--slate-200); background: var(--slate-50); border-radius: 999px;
  padding: 0.5rem 0.9rem 0.5rem 2.3rem; font-size: 0.85rem; outline: none; transition: all .15s;
}
.topbar-search input:focus { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 3px rgba(247,148,29,.12); }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--slate-200); background: #fff;
  color: var(--slate-600); display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.icon-btn:hover { background: var(--slate-50); color: var(--navy); }
.notif-dot {
  position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); border: 2px solid #fff;
}
.notif-dropdown { width: 340px; padding: 0; border: 1px solid var(--slate-200); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.notif-header { padding: 0.85rem 1rem 0.5rem; font-weight: 700; font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--navy); }
.notif-section-label { padding: 0.4rem 1rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate-400); font-weight: 600; }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 0.55rem 1rem; text-decoration: none; color: inherit;
}
.notif-item:hover { background: var(--slate-50); }
.notif-item strong { display: block; font-size: 0.85rem; color: var(--navy); }
.notif-item span { display: block; font-size: 0.76rem; color: var(--slate-600); }
.notif-empty { padding: 1.5rem 1rem; text-align: center; color: var(--slate-400); font-size: 0.85rem; }
.notif-footer {
  display: block; text-align: center; padding: 0.65rem; font-size: 0.8rem; font-weight: 600;
  color: var(--teal-dark); text-decoration: none; border-top: 1px solid var(--slate-200);
}
.notif-footer:hover { background: var(--slate-50); }

.user-chip {
  display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--slate-200);
  border-radius: 30px; padding: 0.3rem 0.7rem 0.3rem 0.3rem;
}
.user-chip:hover { background: var(--slate-50); }
.avatar-circle {
  width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700;
  flex-shrink: 0;
}

.page-body { padding: 1.5rem; }

@media (max-width: 900px) {
  .sidebar { width: var(--sidebar-width-collapsed); }
  .sidebar .brand-text, .sidebar .nav-text, .sidebar .section-label, .sidebar .nav-pill,
  .sidebar-status .nav-text, .sidebar-version { display: none; }
  .sidebar a { justify-content: center; }
  .main-content { margin-left: var(--sidebar-width-collapsed); }
}

/* True mobile: rather than a permanent 72px icon rail eating a chunk
   of a ~375px screen, the sidebar goes fully off-canvas and slides
   in as an overlay only when the hamburger is tapped. */
@media (max-width: 576px) {
  .sidebar {
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 1045;
  }
  .sidebar-collapsed .sidebar {
    width: var(--sidebar-width);
    transform: translateX(0);
    box-shadow: 0 12px 32px rgba(4,20,38,.24);
  }
  .sidebar-collapsed .sidebar .brand-text, .sidebar-collapsed .sidebar .nav-text,
  .sidebar-collapsed .sidebar .section-label, .sidebar-collapsed .sidebar .nav-pill,
  .sidebar-collapsed .sidebar-status .nav-text, .sidebar-collapsed .sidebar-version { display: block !important; }
  .sidebar-collapsed .sidebar a { justify-content: flex-start !important; }
  .sidebar-compact-toggle {
    display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; margin:0;
    padding:0; border:0; border-radius:6px; color:#b8cde0;
    background:transparent; font-size:.68rem;
  }
  .sidebar-compact-toggle:hover { color:#fff; background:rgba(255,255,255,.12); }
  .main-content, .sidebar-collapsed .main-content { margin-left: 0 !important; }
  .sidebar-collapsed .main-content::before {
    content:""; position:fixed; inset:0; z-index:1040;
    background:rgba(6,20,36,.42); cursor:pointer;
  }
  .page-body { padding: 1rem; }
  .topbar { padding: 0.6rem 0.85rem; flex-wrap: wrap; gap: 0.5rem; }
  .topbar-search { order: 3; flex-basis: 100%; }
}

/* Tables scroll horizontally on narrow screens instead of squashing
   columns unreadably or breaking the page layout. */
.card-panel { overflow-x: auto; }

/* Toolbar filters stack to full width below tablet size so nothing
   overflows the viewport (the fixed pixel widths above are sized for
   desktop only). */
@media (max-width: 640px) {
  .list-toolbar { flex-direction: column; align-items: stretch; }
  .list-toolbar form { flex-direction: column; align-items: stretch; }
  .list-toolbar input[type="text"], .list-toolbar input[type="search"],
  .list-toolbar input[type="date"], .list-toolbar select.form-select,
  .list-toolbar select.form-select-sm { width: 100% !important; }
  .list-toolbar > div:last-child { justify-content: stretch; }
  .list-toolbar > div:last-child > * { flex: 1; }
  .icon-action { width: 34px; height: 34px; font-size: 0.85rem; }
  .row-avatar { width: 26px; height: 26px; font-size: 0.65rem; }
  .stat-value { font-size: 1.4rem !important; }
}

/* ---- Cards / stats ---- */
.stat-card {
  position:relative; overflow:hidden; background:#fff; border-radius:14px; padding:1.2rem 1.25rem;
  box-shadow:0 1px 3px rgba(20,43,70,.04); border:1px solid var(--slate-200);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.stat-card:hover { transform:translateY(-2px); border-color:#cbd8e6; box-shadow:0 8px 22px rgba(20,43,70,.08); }
.stat-card .stat-icon {
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:1rem; margin-bottom:.9rem;
}
.stat-card .stat-value { font-family:'Plus Jakarta Sans','Inter','Segoe UI',sans-serif; font-size:1.85rem; font-weight:750; color:var(--navy); line-height:1.15; letter-spacing:-.035em; }
.stat-card .stat-label { color:var(--slate-600); font-size:.79rem; font-weight:600; margin-top:.25rem; }

.card-panel {
  background:#fff; border-radius:15px; border:1px solid var(--slate-200);
  box-shadow:0 1px 3px rgba(20,43,70,.04);
}

/* Status pills pair a semantic color with a compact indicator dot. */
.badge-active, .badge-expired, .badge-suspended, .badge-revoked {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 700; border-radius: 999px;
  padding: 0.28em 0.7em 0.28em 0.55em; font-size: 0.74em;
}
.badge-active::before, .badge-expired::before, .badge-suspended::before, .badge-revoked::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.badge-active { background: var(--green-light); color: #059669; }
.badge-active::before { background: #059669; }
.badge-expired { background: var(--red-light); color: #DC2626; }
.badge-expired::before { background: #DC2626; }
.badge-suspended { background: var(--amber-light); color: #D97706; }
.badge-suspended::before { background: #D97706; }
.badge-revoked { background: var(--slate-100); color: var(--slate-600); }
.badge-revoked::before { background: var(--slate-400); }

.btn-brand { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; border-radius: 9px; font-weight: 600; }
.btn-brand:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff; }
.email-settings-save { min-height:38px; padding:.4rem .75rem; font-size:.86rem; line-height:1.25; }
.btn { border-radius: 9px; }
.btn-sm { border-radius: 8px; }

/* ===================================================================
   List toolbars — the filter/search/export/add row above every
   data table. Previously these were bare, unstyled form controls
   sitting directly on the page background; wrapping them in a
   card gives every list page a consistent, deliberate "control bar"
   instead of looking like an unstyled HTML form.
   =================================================================== */
.list-toolbar {
  background: #fff;
  border: none;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  box-shadow: 0 1px 2px rgba(6,57,112,.05), 0 8px 20px rgba(6,57,112,.05);
}

/* Bootstrap's .form-control/.form-select default to width:100%, which
   inside a flex-wrap toolbar forces every filter input onto its own
   full-width line (search box, then each date picker, then the
   button, all stacked). Constraining them here is what actually
   keeps the whole toolbar on one compact row. */
.list-toolbar form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.list-toolbar-export { margin-left:.25rem; }
.list-toolbar .form-control, .list-toolbar .form-select {
  width: auto; flex: 0 0 auto;
}
.list-toolbar input[type="text"], .list-toolbar input[type="search"] { width: 230px; }
.list-toolbar input[type="date"] { width: 152px; }
.list-toolbar select.form-select, .list-toolbar select.form-select-sm { width: auto; min-width: 130px; }

/* Small initials circle used in table rows (customers, licenses, users)
   so name cells read as identity chips rather than plain text — an
   alternating blue/orange tint keeps long lists visually scannable. */
.row-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; margin-right: 0.6rem;
  background: var(--teal-light); color: var(--teal-dark);
}
.row-avatar.alt { background: #E6F1FB; color: var(--navy); }

.form-control, .form-select,
.form-control-sm, .form-select-sm {
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  color: var(--slate-800);
}
.form-control:focus, .form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(247,148,29,0.13);
}
.form-control::placeholder { color: var(--slate-400); }

/* Native date inputs render as plain browser chrome by default —
   this at least aligns their box model, border, and focus ring with
   every other control, and tints the picker icon toward the brand
   ink color instead of the default OS gray. */
input[type="date"], input[type="datetime-local"] {
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 0.32rem 0.6rem;
  color-scheme: light;
}
input[type="date"]:focus, input[type="datetime-local"]:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(247,148,29,0.13);
  outline: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(14%) sepia(20%) saturate(1200%) hue-rotate(200deg);
  opacity: 0.55;
  cursor: pointer;
}

/* Table headers — uppercase, tracked, on a soft ink-tinted band
   instead of Bootstrap's flat gray, so tables read as intentionally
   designed rather than default-browser. */
.table > thead > tr > th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #526579;
  background: #F6F8FB;
  border-bottom: 1px solid var(--slate-200);
  white-space: nowrap;
}
.table > tbody > tr:nth-child(even) { background:#FBFCFE; }
.table > tbody > tr:hover { background:#F0F6FC !important; }
.table > :not(caption) > * > * { padding:.78rem .95rem; border-bottom-color:#E9EEF4; }

/* Shared workspace polish */
.topbar { border-bottom-color:#E4EAF1; box-shadow:0 2px 8px rgba(20,43,70,.025); }
.topbar { min-height:72px; height:auto; padding:.7rem clamp(1rem,2vw,1.75rem); background:rgba(255,255,255,.96); }
.topbar-heading { display:flex; flex-direction:column; min-width:120px; line-height:1.2; }
.topbar-caption { margin-bottom:.2rem; color:#8a99a9; font-size:.59rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.topbar-title { color:#203750; font-size:.92rem; font-weight:750; letter-spacing:-.01em; }
.topbar-search { max-width:390px; }
.topbar-search input { height:39px; background:#f5f8fb; border:1px solid #e6ecf3; padding-left:2.5rem; font-size:.82rem; }
.topbar-search input:focus { border-color:#8cb8da; background:#fff; box-shadow:0 0 0 3px rgba(40,120,184,.1); }
.topbar-search i { left:15px; color:#8292a4; }
.topbar .btn-brand { min-height:32px; padding:.32rem .65rem; font-size:.82rem; box-shadow:0 2px 5px rgba(23,105,170,.12); }
.topbar .icon-btn { width:36px; height:36px; border-color:#e6ecf3; background:#fff; color:#536477; }
.topbar .icon-btn:hover { background:#f2f6fa; color:#1769aa; }
.topbar .user-chip { border-color:#e6ecf3; background:#fff; padding:.25rem .65rem .25rem .3rem; }
.topbar .user-chip:hover { background:#f8fafc; border-color:#d3dfeb; }
.topbar .avatar-circle { background:linear-gradient(135deg,#2878b8,#1769aa); }
.user-dropdown-menu { width:220px; padding:.4rem; border:1px solid #e5ebf2; border-radius:14px; box-shadow:0 14px 34px rgba(18,39,63,.16); }
.user-dropdown-header { display:flex; align-items:center; gap:.75rem; padding:.7rem .65rem .85rem; margin-bottom:.3rem; border-bottom:1px solid #edf1f5; }
.user-dropdown-header .avatar-circle { width:42px; height:42px; font-size:1rem; }
.user-dropdown-identity { min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.user-dropdown-identity strong { overflow:hidden; color:#23384e; font-size:.86rem; text-overflow:ellipsis; white-space:nowrap; }
.user-dropdown-identity span { margin-top:.15rem; color:#8795a5; font-size:.72rem; }
.user-dropdown-menu .dropdown-item { display:flex; align-items:center; gap:.7rem; min-height:42px; padding:.45rem .6rem; border-radius:8px; color:#42556a; font-size:.86rem; font-weight:550; }
.user-dropdown-menu .dropdown-item:hover,.user-dropdown-menu .dropdown-item:focus { background:#f1f6fb; color:#1769aa; }
.user-menu-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:#f0f4f8; color:#607489; font-size:.8rem; }
.user-dropdown-menu .dropdown-item:hover .user-menu-icon { color:#1769aa; background:#e3f0fb; }
.user-dropdown-menu .dropdown-divider { margin:.4rem .35rem; border-color:#edf1f5; }
.user-dropdown-menu form { margin:0; }
.user-dropdown-menu .user-logout { width:100%; color:#b9434e; }
.user-dropdown-menu .user-logout .user-menu-icon { color:#b9434e; background:#fff0f1; }
.user-dropdown-menu .user-logout:hover { color:#a72f3b; background:#fff3f4; }
.user-dropdown-menu .user-logout:hover .user-menu-icon { color:#a72f3b; background:#ffe5e8; }
.page-body { padding:1.6rem clamp(1rem,2vw,2rem); }
.workspace-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1.25rem; margin:0 0 1.45rem; }
.workspace-page-heading-copy { min-width:0; }
.workspace-page-heading h1 { max-width:100%; margin:0; color:#1d344d; font-family:'Plus Jakarta Sans','Inter','Segoe UI',sans-serif; font-size:1.25rem; line-height:1.3; font-weight:750; letter-spacing:-.025em; overflow-wrap:anywhere; }
.workspace-page-heading .page-eyebrow:empty,
.workspace-page-subtitle:empty { display:none; }
.workspace-page-heading .page-eyebrow { margin-bottom:.2rem; }
.workspace-page-subtitle { margin-top:.35rem; color:var(--slate-600); font-size:.88rem; }
.workspace-page-actions { flex:0 0 auto; }
.workspace-page-actions .btn { min-height:32px; padding:.32rem .68rem; font-size:.84rem; }
.page-body h1,.page-body h2,.page-body h3,.page-body h4,.page-body h5,.page-body h6 {
  color:#1d344d; font-family:'Plus Jakarta Sans','Inter','Segoe UI',sans-serif; font-weight:700;
}
.page-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:1.25rem; margin:0 0 1.45rem; }
.page-intro h1 { margin:0; font-size:1.65rem; letter-spacing:-.04em; }
.page-intro p { margin:.3rem 0 0; color:var(--slate-600); font-size:.88rem; }
.page-eyebrow { margin-bottom:.25rem; color:#2878B8; font-size:.66rem; font-weight:750; letter-spacing:.14em; }
.dashboard-filter { display:flex; align-items:center; gap:.7rem; padding:.5rem .65rem .5rem .85rem; background:#fff; border:1px solid var(--slate-200); border-radius:11px; }
.dashboard-filter label { color:var(--slate-600); font-size:.76rem; font-weight:650; }
.dashboard-filter .form-select { min-width:180px; border:0; background-color:#f7f9fc; }
.card-panel { overflow-x:auto; }
.card-panel h6 { font-size:.94rem; }
.list-toolbar { border:1px solid var(--slate-200); box-shadow:0 1px 3px rgba(20,43,70,.04); }
.table { --bs-table-color:var(--slate-800); margin-bottom:0; font-size:.84rem; }
.table > thead > tr > th { padding-top:.8rem; padding-bottom:.8rem; }
.table > tbody > tr > td { vertical-align:middle; }
.table-empty-state { color:var(--slate-600); }
.action-group { background:#f2f5f9; }
.icon-action:hover { background:#e6eff8; color:#1769aa; box-shadow:none; }

/* Keep the established dark sidebar while the top header uses a light surface. */
.sidebar { background:var(--navy); color:#cbd5e1; border-right:0; box-shadow:none; }
.sidebar-scroll { padding:1.25rem .75rem 1rem; }
.sidebar-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); }
.sidebar .brand { color:#fff; border-bottom:0; margin:0; padding:0 .15rem 1.25rem; gap:6px; }
.sidebar .brand-text { font-size:1rem; font-weight:800; }
.sidebar a { color:rgba(255,255,255,.68); border-radius:9px; padding:.5rem .7rem; margin-bottom:3px; font-weight:500; }
.sidebar a i { color:#d6e1ec; background:rgba(255,255,255,.07); border-radius:7px; }
.sidebar a:hover { background:rgba(255,255,255,.07); color:#fff; }
.sidebar a:hover i { color:#fff; background:rgba(255,255,255,.12); }
.sidebar a.active { position:relative; background:rgba(23,105,170,.28); color:#fff; font-weight:700; }
.sidebar a.active::before { content:""; position:absolute; top:7px; bottom:7px; left:0; width:3px; border-radius:0 3px 3px 0; background:#63b1e8; }
.sidebar a.active i { background:#1769aa; color:#fff; }
.sidebar .section-label { color:rgba(220,232,243,.48); font-size:.68rem; letter-spacing:.07em; margin:1.1rem 0 .5rem .7rem; }
.sidebar .nav-pill { background:#1769aa; }
.sidebar-footer { background:transparent; border-top-color:rgba(255,255,255,.08); }
.sidebar-status { color:#cbd5e1; }
.sidebar-version { color:#98aabd; }
@media (max-width:640px) {
  .page-body { padding:1.1rem .85rem; }
  .page-intro { align-items:stretch; flex-direction:column; gap:.85rem; }
  .page-intro h1 { font-size:1.45rem; }
  .dashboard-filter { justify-content:space-between; }
  .dashboard-filter .form-select { min-width:0; max-width:70%; }
}
@media (max-width:767px) {
  .topbar { min-height:60px; padding:.6rem .85rem; }
  .workspace-page-heading { align-items:flex-start; flex-direction:column; gap:.85rem; }
  .workspace-page-heading h1 { font-size:1.25rem; }
  .workspace-page-actions { width:100%; }
}

/* Icon-only action buttons grouped in a soft pill instead of three
   separate bordered buttons — quieter and reads as one control. */
.action-group {
  display: inline-flex; gap: 2px; background: var(--slate-50); border-radius: 9px; padding: 3px;
}
.icon-action {
  width: 28px; height: 28px; border: none; border-radius: 7px; background: transparent; color: var(--slate-600);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; cursor: pointer;
  text-decoration: none; transition: all .12s;
}
.icon-action:hover { background: #fff; box-shadow: 0 1px 3px rgba(6,57,112,.14); color: var(--navy); }
.icon-action.danger { color: var(--red); }
.icon-action.danger:hover { background: var(--red-light); color: var(--red); }
.icon-action.warn { color: #D97706; }
.icon-action.warn:hover { background: var(--amber-light); color: #D97706; }

/* Icon-prefixed input wrapper */
.field-icon-wrap { position: relative; }
.field-icon-wrap > i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--slate-400); font-size: 0.82rem; pointer-events: none; transition: color .12s; z-index: 2;
}
/* Every input/select/textarea inside a field-icon-wrap gets its own
   complete styling here — not just extra padding bolted onto
   .form-control — because some fields (Django's built-in password
   reset form, for one) render plain inputs with no Bootstrap class
   at all. Relying on .form-control being present is what caused the
   icon to sit on top of typed text instead of beside it. */
.field-icon-wrap input, .field-icon-wrap select {
  width: 100% !important; padding: 0.5rem 0.75rem 0.5rem 2.5rem !important;
  border: 1px solid var(--slate-200); border-radius: 8px;
  font-size: 0.875rem; color: var(--slate-800); background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.field-icon-wrap input:focus, .field-icon-wrap select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(247,148,29,.13);
}
.field-icon-wrap:focus-within > i { color: var(--teal); }

/* Segmented pill control — used for small fixed choice sets
   (license validity preset, OTP channel, etc.) instead of a plain
   <select>, so the option set is visible at a glance. */
.segmented { display: inline-flex; flex-wrap: wrap; background: var(--slate-100); border-radius: 10px; padding: 3px; gap: 2px; }
.segmented input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  padding: 0.42rem 0.9rem; border-radius: 8px; font-size: 0.78rem; font-weight: 600; color: var(--slate-600);
  cursor: pointer; margin: 0; transition: all .12s; user-select: none;
}
.segmented input[type="radio"]:checked + label { background: var(--navy); color: #fff; }
.segmented input[type="radio"]:focus-visible + label { box-shadow: 0 0 0 3px rgba(247,148,29,.3); }

/* Permission chips — role form checkboxes rendered as toggle chips
   instead of plain checkbox+label rows, so a long permission matrix
   reads as a scannable grid rather than a form wall. */
.perm-chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.perm-chip { position: absolute; opacity: 0; pointer-events: none; }
.perm-chip-label {
  display: inline-flex; align-items: center; gap: 6px; padding: 0.42rem 0.8rem; border-radius: 8px;
  border: 1.5px solid var(--slate-200); font-size: 0.78rem; font-weight: 600; color: var(--slate-600);
  cursor: pointer; transition: all .12s; margin: 0;
}
.perm-chip-label i { font-size: 0.65rem; opacity: 0; transition: opacity .12s; width: 0; overflow: hidden; }
.perm-chip:checked + .perm-chip-label { background: var(--navy); border-color: var(--navy); color: #fff; }
.perm-chip:checked + .perm-chip-label i { opacity: 1; width: auto; }
.perm-chip:focus-visible + .perm-chip-label { box-shadow: 0 0 0 3px rgba(247,148,29,.3); }

.pagination .page-link {
  border-color: var(--slate-200);
  color: var(--slate-700);
}
.pagination .page-item.active .page-link {
  background: var(--navy);
  border-color: var(--navy);
}
.pagination .page-link:hover { background: var(--slate-100); color: var(--navy); }

.dropdown-menu { border: 1px solid var(--slate-200); box-shadow: 0 12px 32px rgba(15,23,42,0.12); border-radius: 10px; }

/* Empty-state rows ("No customers match your filters.") */
.table-empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--slate-400); }
.table-empty-state i { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; color: var(--slate-200); }

/* Fallback styling so plain Django-rendered <input> fields (e.g. from
   UserCreationForm / PasswordResetForm) look consistent without needing
   django-widget-tweaks or django-crispy-forms installed. */
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"],
.card-panel form input[type="text"],
.card-panel form input[type="password"],
.card-panel form input[type="email"],
.card-panel form select {
  display: block; width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.95rem;
}

/* ===================================================================
   Auth pages — split-screen "activation software" look
   =================================================================== */
.auth-shell {
  min-height: 100vh;
  display: flex;
  background: #f5f7fb;
}
.auth-shell .auth-side {
  flex: 1 1 46%;
  max-width: 520px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 45%, var(--indigo) 100%);
  color: #fff;
  padding: 3rem 3rem;
  display: flex;
  flex-direction: column;
}
.auth-shell .auth-side::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(247,148,29,0.22), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(0,169,224,0.18), transparent 45%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 14px);
  pointer-events: none;
}
.auth-side-content { position: relative; z-index: 1; display:flex; flex-direction:column; height:100%; }
.auth-side-brand {
  display: flex; align-items: center; gap: 12px; font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 800; font-size: 1.35rem; margin-bottom: 3rem;
}
.auth-side-brand .badge-icon {
  width: 42px; height: 42px; border-radius: 0;
  background: none; box-shadow: none; filter: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  box-shadow: none;
}
.auth-side-brand .badge-icon img { width:100%; height:100%; display:block; object-fit:contain; border:0; box-shadow:none; filter:none; }
.auth-side-heading { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 1.7rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.75rem; }
.auth-side-sub { color: #A9C2CE; font-size: 0.95rem; margin-bottom: 2.5rem; max-width: 380px; }
.auth-feature-list { display: flex; flex-direction: column; gap: 1.1rem; margin-top: auto; margin-bottom: 2rem; }
.auth-feature-item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; color: #cbd5e1; }
.auth-feature-item i { color: var(--teal); margin-top: 3px; }
.auth-feature-item strong { color: #fff; display: block; font-size: 0.9rem; font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; }
.auth-side-footer { font-size: 0.85rem; line-height: 1.5; font-weight: 500; color: #e2edf4; }

.auth-shell .auth-form-side {
  flex: 1 1 54%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.auth-form-box { width: 100%; max-width: 380px; }
.auth-form-box .form-eyebrow {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700;
  color: var(--teal); margin-bottom: 0.5rem;
}
.auth-form-box h3 { font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem; }
.auth-form-box .form-lede { color: var(--slate-600); font-size: 0.92rem; margin-bottom: 2rem; }
.auth-form-box .form-control,
.auth-form-box input[type="text"],
.auth-form-box input[type="password"],
.auth-form-box input[type="email"] {
  padding: 0.65rem 0.9rem; border-radius: 10px; border: 1px solid var(--slate-200); font-size: 0.95rem;
}
.auth-form-box .form-control:focus,
.auth-form-box input:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(247,148,29,0.14); outline: none;
}
.auth-form-box .btn-brand {
  padding: 0.65rem; border-radius: 10px; font-weight: 600; letter-spacing: 0.01em;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark)); border: none;
  box-shadow: 0 8px 20px rgba(247,148,29,0.28);
}
.auth-form-box .btn-brand:hover { filter: brightness(1.08); }
.auth-back-link { font-size: 0.85rem; color: var(--slate-600); text-decoration: none; display:inline-flex; align-items:center; gap:6px; }
.auth-back-link:hover { color: var(--teal); }

@media (max-width: 900px) {
  .auth-shell .auth-side { display: none; }
  .auth-shell .auth-form-side { flex: 1 1 100%; }
}

/* Public software landing page */
.splash-page { margin:0; background:#071b34; }
.splash-shell { --splash-gutter:clamp(1.25rem,6vw,6rem); box-sizing:border-box; width:100%; min-height:100vh; min-height:100svh; position:relative; overflow:clip; isolation:isolate; padding:0 var(--splash-gutter); background:radial-gradient(ellipse at 83% 20%,rgba(16,117,185,.25),transparent 34%),linear-gradient(135deg,#06172c 0%,#082949 56%,#073d68 100%); color:#fff; }
.splash-shell::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
.splash-orb { position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.splash-orb-one { width:380px; height:380px; top:-230px; right:8%; border:1px solid rgba(255,255,255,.12); box-shadow:0 0 0 36px rgba(255,255,255,.025),0 0 0 72px rgba(255,255,255,.02); }
.splash-orb-two { width:220px; height:220px; bottom:-150px; left:13%; background:rgba(0,169,224,.1); filter:blur(45px); }
.splash-brandbar { min-height:94px; position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; margin-left:calc(0px - var(--splash-gutter)); margin-right:calc(0px - var(--splash-gutter)); padding:0 var(--splash-gutter); border-bottom:1px solid rgba(255,255,255,.1); background:rgba(6,23,44,.96); backdrop-filter:blur(14px); }
.splash-brand { display:flex; align-items:center; gap:.7rem; color:#fff; text-decoration:none; font-size:1.02rem; font-weight:600; line-height:1.1; letter-spacing:.01em; }
.splash-brand b { font-weight:800; }
.splash-brand small { display:block; margin-top:.35rem; color:#83a8c4; font-size:.52rem; font-weight:700; letter-spacing:.16em; }
.splash-brand-mark { width:42px; height:42px; display:block; flex:0 0 auto; }
.splash-brand-mark img { width:100%; height:100%; display:block; object-fit:contain; border:0; box-shadow:none; filter:none; }
.splash-nav { display:flex; align-items:center; gap:clamp(1.1rem,3vw,2.5rem); }
.splash-nav a { color:#c4d8e8; font-size:.82rem; font-weight:600; text-decoration:none; transition:color .2s ease; }
.splash-nav a:hover { color:#fff; }
.splash-nav .splash-login { padding:.68rem 1.15rem; border:1px solid rgba(255,255,255,.38); border-radius:8px; color:#fff; }
.splash-nav .splash-login span { margin-left:.45rem; color:#ffad42; }
.splash-hero { box-sizing:border-box; width:min(100%,1240px); min-height:575px; margin:auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(1.5rem,4vw,4rem); padding:4.3rem 0 5rem; }
.splash-hero-copy { position:relative; z-index:1; }
.splash-kicker { display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.35rem; color:#a8c9df; font-size:.66rem; font-weight:700; letter-spacing:.16em; }
.splash-kicker span { width:7px; height:7px; border-radius:50%; background:#f7941d; box-shadow:0 0 12px rgba(247,148,29,.8); }
.splash-hero h1 { max-width:700px; margin:0; color:#fff; font-size:clamp(2.5rem,4.5vw,4.25rem); line-height:1.08; font-weight:550; letter-spacing:-.065em; text-wrap:balance; overflow-wrap:anywhere; }
.splash-hero h1 strong { color:#ffad42; font-weight:750; }
.splash-lede { max-width:550px; margin:1.35rem 0 1.8rem; color:#c1d8e8; font-size:clamp(1rem,1.5vw,1.13rem); line-height:1.75; }
.splash-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.35rem; }
.splash-primary { display:inline-flex; align-items:center; gap:1rem; padding:.95rem 1.25rem; border-radius:8px; background:#ff9f2e; color:#10283e; font-size:.86rem; font-weight:750; text-decoration:none; box-shadow:0 10px 28px rgba(255,159,46,.18); transition:transform .2s,background .2s; }
.splash-primary:hover { transform:translateY(-2px); background:#ffb14c; color:#10283e; }
.splash-primary span { font-size:1.1rem; }
.splash-secondary { color:#d5e5f0; font-size:.82rem; font-weight:650; text-decoration:none; }
.splash-secondary:hover { color:#fff; }
.splash-secondary span { margin-left:.3rem; color:#ffad42; }
.splash-assurance { margin-top:1.5rem; color:#8eafc8; font-size:.72rem; }
.splash-assurance span { margin-right:.4rem; color:#57d3a1; font-weight:800; }
.splash-visual { min-height:380px; position:relative; display:flex; align-items:center; justify-content:center; }
.splash-glow { position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:rgba(17,144,210,.24); filter:blur(75px); }
.splash-window { width:min(100%,410px); position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:15px; background:#f8fbff; color:#172d43; box-shadow:0 30px 80px rgba(0,0,0,.3); transform:rotate(1.5deg); }
.splash-window-top { height:54px; display:flex; align-items:center; justify-content:space-between; padding:0 1.1rem; border-bottom:1px solid #e7edf3; background:#fff; }
.splash-window-brand { display:flex; align-items:center; gap:.48rem; font-size:.78rem; font-weight:800; }
.splash-window-brand img { width:22px; height:22px; }
.splash-window-dots { color:#9aabba; letter-spacing:.15em; }
.splash-window-body { padding:1.35rem 1.35rem 1rem; }
.splash-window-label { color:#6e879d; font-size:.55rem; font-weight:800; letter-spacing:.14em; }
.splash-window-title { margin:.35rem 0 1rem; font-size:1.2rem; font-weight:800; letter-spacing:-.03em; }
.splash-stat-row { min-height:67px; display:flex; align-items:center; justify-content:space-between; margin:.55rem 0; padding:.65rem .75rem; border:1px solid #e7edf3; border-radius:9px; background:#fff; }
.splash-stat-row small,.splash-stat-row b { display:block; }
.splash-stat-row small { margin-bottom:.22rem; color:#8292a2; font-size:.62rem; }
.splash-stat-row b { color:#263c50; font-size:.75rem; }
.splash-stat-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; background:#e8f8f1; color:#16a372; font-weight:800; }
.splash-stat-icon.blue { background:#eaf3fb; color:#1769aa; }
.splash-stat-icon.amber { background:#fff3e1; color:#d77d10; }
.splash-window-foot { display:flex; align-items:center; gap:.45rem; margin-top:1rem; color:#71869a; font-size:.62rem; }
.splash-window-foot span { width:6px; height:6px; border-radius:50%; background:#27bd88; }
.splash-float-card { position:absolute; right:-2%; bottom:2.5rem; display:flex; align-items:center; gap:.65rem; padding:.8rem 1rem; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:rgba(11,43,70,.88); box-shadow:0 14px 35px rgba(0,0,0,.2); }
.splash-float-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:rgba(255,173,66,.16); color:#ffad42; }
.splash-float-card small,.splash-float-card b { display:block; }
.splash-float-card small { color:#9cb7cd; font-size:.57rem; }
.splash-float-card b { margin-top:.12rem; color:#fff; font-size:.68rem; }
.splash-platform { width:min(100%,1240px); margin:0 auto; padding:3.2rem 0 4.5rem; border-top:1px solid rgba(255,255,255,.12); scroll-margin-top:110px; }
.splash-section-heading { max-width:650px; margin-bottom:1.8rem; }
.splash-section-heading > span { color:#ffad42; font-size:.62rem; font-weight:800; letter-spacing:.16em; }
.splash-section-heading h2 { margin:.65rem 0 .5rem; color:#fff; font-size:clamp(1.5rem,3vw,2.25rem); line-height:1.2; letter-spacing:-.04em; }
.splash-section-heading p { margin:0; color:#abc4d8; font-size:.86rem; }
.splash-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.splash-feature { min-height:175px; padding:1.25rem; border:1px solid rgba(255,255,255,.13); border-radius:11px; background:rgba(255,255,255,.045); }
.splash-feature-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:rgba(255,173,66,.12); color:#ffad42; font-size:.65rem; font-weight:800; }
.splash-feature h3 { margin:1rem 0 .45rem; color:#f4f8fb; font-size:.91rem; letter-spacing:-.02em; }
.splash-feature p { max-width:340px; margin:0; color:#a9c1d5; font-size:.75rem; line-height:1.65; }
.splash-footer { min-height:70px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.1); color:#a6bfd2; font-size:.7rem; }
@media (max-width:1000px) {
  .splash-shell { --splash-gutter:clamp(1.25rem,4vw,2.5rem); }
  .splash-hero { min-height:0; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:1.5rem; padding:4rem 0; }
  .splash-hero h1 { font-size:clamp(2.5rem,5.5vw,3.6rem); }
  .splash-window { width:100%; }
  .splash-float-card { right:-.25rem; }
}
@media (max-width:600px) {
  .splash-shell { --splash-gutter:1.2rem; }
  .splash-brandbar { min-height:76px; }
  .splash-brand-mark { width:35px; height:35px; }
  .splash-nav { gap:.65rem; }
  .splash-nav a { font-size:.7rem; }
  .splash-nav a:first-child,.splash-nav a:nth-child(2) { display:none; }
  .splash-nav .splash-login { padding:.58rem .8rem; }
  .splash-hero { min-height:0; grid-template-columns:minmax(0,1fr); gap:1.5rem; padding:3.4rem 0 3rem; }
  .splash-hero h1 { font-size:clamp(2.25rem,10vw,3.35rem); }
  .splash-lede { font-size:.95rem; }
  .splash-actions { align-items:flex-start; flex-direction:column; gap:1rem; }
  .splash-visual { min-height:320px; }
  .splash-window { width:90%; }
  .splash-float-card { right:-.2rem; bottom:1.1rem; }
  .splash-platform { padding:2.7rem 0 3rem; }
  .splash-feature-grid { grid-template-columns:1fr; gap:.7rem; }
  .splash-feature { min-height:0; }
  .splash-footer { min-height:75px; align-items:flex-start; justify-content:center; flex-direction:column; gap:.25rem; }
}
@media (min-width:601px) and (max-width:900px) {
  .splash-hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.2rem; }
  .splash-hero h1 { font-size:clamp(2.5rem,6vw,3.8rem); }
  .splash-float-card { right:-.5rem; }
}
.key-reveal-box {
  font-family: "Courier New", monospace; font-size: 1.3rem; letter-spacing: 1px;
  background: #0b1220; color: #4ade80; padding: 1rem 1.25rem; border-radius: 10px; text-align: center;
}

/* ===================================================================
   Bootstrap brand color overrides — align default Bootstrap "primary"
   utility classes with the CityHealth navy/teal palette instead of
   Bootstrap's default blue, so icons/badges using text-primary etc.
   stay visually consistent with the rest of the app.
   =================================================================== */
.text-primary { color: var(--teal) !important; }
.bg-primary { background-color: var(--teal) !important; }
.btn-primary {
  background-color: var(--teal) !important;
  border-color: var(--teal) !important;
}
.btn-primary:hover {
  background-color: var(--teal-dark) !important;
  border-color: var(--teal-dark) !important;
}
a { color: var(--teal-dark); }
a:hover { color: var(--navy); }

/* ===================================================================
   Bootstrap ships its default blue (#0d6efd) baked into individual
   component variables (buttons, checkboxes, focus rings, dropdowns,
   alerts) rather than one global variable, so overriding --bs-primary
   alone doesn't retheme them. Each is targeted explicitly here so the
   whole app — not just buttons/links — reflects the indigo/gold
   brand, down to checkbox and focus-ring color.
   =================================================================== */
.form-check-input:checked {
  background-color: var(--navy);
  border-color: var(--navy);
}
.form-check-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(247,148,29,0.18);
}
.form-check-input[type="checkbox"]:indeterminate { background-color: var(--navy); border-color: var(--navy); }

.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.page-link:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(247,148,29,0.25);
}
.btn-check:checked + .btn, .btn-check:focus + .btn { box-shadow: 0 0 0 3px rgba(247,148,29,0.2); }

.dropdown-item:hover, .dropdown-item:focus { background-color: var(--slate-100); color: var(--navy); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--navy); color: #fff; }

.alert-info { background-color: var(--teal-light); border-color: var(--teal-mid); color: var(--teal-dark); }
.alert-primary { background-color: var(--teal-light); border-color: var(--teal-mid); color: var(--navy); }

.nav-pills .nav-link.active, .nav-tabs .nav-link.active { background-color: var(--navy); color: #fff; border-color: var(--navy); }
.list-group-item.active { background-color: var(--navy); border-color: var(--navy); }
.progress-bar { background-color: var(--teal); }
.spinner-border.text-primary, .spinner-grow.text-primary { color: var(--teal) !important; }

.btn-outline-primary {
  color: var(--teal-dark); border-color: var(--teal);
}
.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: var(--teal); border-color: var(--teal); color: #fff;
}

/* Bootstrap's own input focus glow (box-shadow rgba(13,110,253,.25))
   is set as an inline component variable, so it must be overridden
   with the same specificity rather than relying on the .form-control
   rule above alone. */
.form-control, .form-select {
  --bs-body-color: var(--slate-800);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus,
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(247,148,29,0.18);
}

/* Optional dark workspace theme (the sidebar keeps its established navy). */
html[data-theme="dark"] {
  color-scheme:dark;
  --page-bg:#101923;
  --slate-50:#172330;
  --slate-100:#202e3c;
  --slate-200:#2b3a49;
  --slate-400:#91a1b2;
  --slate-600:#a9b8c7;
  --slate-700:#c3cfda;
  --slate-800:#e2eaf2;
  --teal-light:#1d3449;
  --teal-mid:#2b4d69;
  --green-light:#18392f;
  --amber-light:#40331e;
  --red-light:#40262a;
  --purple-light:#302746;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .main-content { background:#101923; color:#d9e3ec; }
html[data-theme="dark"] .sidebar { background:#141f2b; border-right:1px solid #263544; box-shadow:none; }
html[data-theme="dark"] .sidebar .brand { color:#f1f5f9; border-bottom-color:#293947; }
html[data-theme="dark"] .sidebar a { color:#b8c5d1; }
html[data-theme="dark"] .sidebar a i { color:#b5c3d0; background:#202d3a; }
html[data-theme="dark"] .sidebar a:hover { color:#fff; background:#202f3d; }
html[data-theme="dark"] .sidebar a:hover i { color:#fff; background:#2b3c4c; }
html[data-theme="dark"] .sidebar a.active { color:#e8f4ff; background:#1d3449; }
html[data-theme="dark"] .sidebar a.active::before { background:#63b1e8; }
html[data-theme="dark"] .sidebar a.active i { color:#fff; background:#1769aa; }
html[data-theme="dark"] .sidebar .section-label { color:#8394a5; }
html[data-theme="dark"] .sidebar-footer { background:transparent; border-top-color:#293947; }
html[data-theme="dark"] .sidebar-status { color:#b8c5d1; }
html[data-theme="dark"] .sidebar-version { color:#8394a5; }
html[data-theme="dark"] .topbar { background:#172330; border-bottom-color:#2b3a49; box-shadow:0 2px 8px rgba(0,0,0,.14); }
html[data-theme="dark"] .topbar-title,
html[data-theme="dark"] .workspace-page-heading h1,
html[data-theme="dark"] .page-body h1,
html[data-theme="dark"] .page-body h2,
html[data-theme="dark"] .page-body h3,
html[data-theme="dark"] .page-body h4,
html[data-theme="dark"] .page-body h5,
html[data-theme="dark"] .page-body h6 { color:#e6edf4; }
html[data-theme="dark"] .topbar-caption,
html[data-theme="dark"] .page-intro p,
html[data-theme="dark"] .workspace-page-subtitle,
html[data-theme="dark"] .stat-card .stat-label { color:#9babb9; }
html[data-theme="dark"] .topbar-search input { color:#e2eaf2; background:#111c27; border-color:#344555; }
html[data-theme="dark"] .topbar-search input::placeholder { color:#8293a4; }
html[data-theme="dark"] .topbar-search i { color:#91a2b3; }
html[data-theme="dark"] .card-panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .list-toolbar,
html[data-theme="dark"] .dashboard-filter { background:#182532; border-color:#2b3b4a; box-shadow:0 2px 8px rgba(0,0,0,.12); }
html[data-theme="dark"] .stat-card:hover { border-color:#3b5268; box-shadow:0 8px 22px rgba(0,0,0,.2); }
html[data-theme="dark"] .stat-card .stat-icon { background:#263a4d !important; color:#83c3ef !important; }
html[data-theme="dark"] .dashboard-filter label { color:#a9b8c7; }
html[data-theme="dark"] .dashboard-filter .form-select { background-color:#111c27; }
html[data-theme="dark"] .table { --bs-table-bg:transparent; --bs-table-color:#d9e3ec; --bs-table-border-color:#2b3b4a; --bs-table-striped-bg:#1b2936; --bs-table-striped-color:#d9e3ec; }
html[data-theme="dark"] .table > thead > tr > th { color:#b4c2d0; background:#202f3d; border-bottom-color:#354657; }
html[data-theme="dark"] .table > tbody > tr:nth-child(even) { background:#1b2936; }
html[data-theme="dark"] .table > tbody > tr:hover { background:#24394b !important; }
html[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color:#2b3b4a; }
html[data-theme="dark"] .table-empty-state { color:#a9b8c7; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-control-sm,
html[data-theme="dark"] .form-select-sm,
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"] { color:#e2eaf2; background-color:#111c27; border-color:#344555; }
html[data-theme="dark"] .form-control::placeholder { color:#8393a2; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { background-color:#14212d; color:#f3f6f9; }
html[data-theme="dark"] .text-muted { color:#9baaba !important; }
html[data-theme="dark"] .bg-light { background-color:#263746 !important; }
html[data-theme="dark"] .text-dark { color:#e2eaf2 !important; }
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .notif-dropdown,
html[data-theme="dark"] .user-dropdown-menu,
html[data-theme="dark"] .modal-content { color:#dce5ed; background:#1a2835; border-color:#334454; }
html[data-theme="dark"] .dropdown-item { color:#d3dee8; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { color:#8fcafa; background:#26394b; }
html[data-theme="dark"] .dropdown-divider,
html[data-theme="dark"] .user-dropdown-header { border-color:#344555; }
html[data-theme="dark"] .user-dropdown-identity strong { color:#e4ebf2; }
html[data-theme="dark"] .user-dropdown-identity span { color:#9baaba; }
html[data-theme="dark"] .user-menu-icon { color:#b4c2d0; background:#263746; }
html[data-theme="dark"] .user-dropdown-menu .user-logout { color:#ff929c; }
html[data-theme="dark"] .user-dropdown-menu .user-logout .user-menu-icon { color:#ff929c; background:#422b32; }
html[data-theme="dark"] .notif-header { color:#e4ebf2; }
html[data-theme="dark"] .notif-section-label { color:#99aaba; }
html[data-theme="dark"] .notif-item { color:#d3dee8; }
html[data-theme="dark"] .notif-item:hover { background:#26394b; }
html[data-theme="dark"] .notif-item strong { color:#e4ebf2; }
html[data-theme="dark"] .notif-item span,
html[data-theme="dark"] .notif-empty { color:#a9b8c7; }
html[data-theme="dark"] .notif-footer { color:#8fcafa; border-top-color:#344555; }
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .user-chip { color:#c8d4df; background:#1a2835; border-color:#344555; }
html[data-theme="dark"] .icon-btn:hover,
html[data-theme="dark"] .user-chip:hover { color:#fff; background:#263746; }
html[data-theme="dark"] .avatar-circle { color:#fff; }
html[data-theme="dark"] .page-link { color:#a8c8e2; background:#182532; border-color:#344555; }
html[data-theme="dark"] .page-item.active .page-link { color:#fff; background:#1769aa; border-color:#1769aa; }
html[data-theme="dark"] .btn-outline-secondary { color:#c2ced9; border-color:#526272; }
html[data-theme="dark"] .btn-outline-secondary:hover { color:#fff; background:#344555; border-color:#526272; }

/* Product catalog cards */
.product-intro { margin-bottom:1.6rem; }
.product-add-button { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .68rem; font-size:.84rem; }
.product-card { min-height:250px; padding:1.15rem; gap:.8rem; overflow:hidden; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
.product-card:hover { transform:translateY(-2px); border-color:#cbd8e6; box-shadow:0 10px 24px rgba(20,43,70,.08); }
.product-card-heading { display:flex; align-items:center; justify-content:space-between; }
.product-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#eaf3fb; color:#1769aa; font-size:1rem; }
.product-status { display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; padding:.3rem .6rem; font-size:.69rem; font-weight:700; }
.product-status i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.product-status.is-active { color:#12805c; background:#e9f7f1; }
.product-status.is-inactive { color:#68788a; background:#eef2f6; }
.product-card-copy h2 { margin:0 0 .3rem; color:#203750; font-size:1.02rem; font-weight:750; letter-spacing:-.02em; overflow-wrap:anywhere; }
.product-card-copy p { display:-webkit-box; min-height:2.8em; margin:0; overflow:hidden; color:#708094; font-size:.81rem; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.product-metrics { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; padding:.7rem; border:1px solid #edf1f5; border-radius:11px; background:#f9fbfd; }
.product-metric { display:flex; align-items:center; gap:.55rem; min-width:0; }
.product-metric + .product-metric { padding-left:.65rem; border-left:1px solid #e5ebf2; }
.product-metric-icon { width:29px; height:29px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; background:#eaf3fb; color:#337fb4; font-size:.73rem; }
.product-metric > span:last-child { display:flex; flex-direction:column; line-height:1.2; }
.product-metric strong { color:#263c55; font-size:.88rem; font-weight:750; }
.product-metric small { margin-top:.15rem; color:#8795a5; font-size:.66rem; }
.product-card-actions { display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding-top:.75rem; border-top:1px solid #edf1f5; }
.product-card-actions .btn { min-height:34px; padding:.35rem .65rem; font-size:.76rem; }
.product-delete-button { width:34px; height:34px; display:grid; place-items:center; border:1px solid #f0dfe1; border-radius:8px; color:#b9434e; text-decoration:none; }
.product-delete-button:hover { background:#fff2f3; color:#a72f3b; }
.product-empty-state { display:flex; min-height:300px; align-items:center; justify-content:center; flex-direction:column; padding:2rem; text-align:center; }
.product-empty-icon { width:54px; height:54px; display:grid; place-items:center; margin-bottom:.9rem; border-radius:16px; background:#eaf3fb; color:#2878b8; font-size:1.25rem; }
.product-empty-state h2 { margin:0; font-size:1.1rem; }
.product-empty-state p { margin:.4rem 0 1rem; color:#708094; font-size:.86rem; }
html[data-theme="dark"] .product-card:hover { border-color:#3b5268; box-shadow:0 10px 24px rgba(0,0,0,.22); }
html[data-theme="dark"] .product-icon,
html[data-theme="dark"] .product-metric-icon,
html[data-theme="dark"] .product-empty-icon { color:#8fcafa; background:#263b4e; }
html[data-theme="dark"] .product-card-copy h2,
html[data-theme="dark"] .product-metric strong,
html[data-theme="dark"] .product-empty-state h2 { color:#e2eaf2; }
html[data-theme="dark"] .product-card-copy p,
html[data-theme="dark"] .product-empty-state p { color:#a9b8c7; }
html[data-theme="dark"] .product-metrics { background:#14212d; border-color:#2b3b4a; }
html[data-theme="dark"] .product-metric + .product-metric,
html[data-theme="dark"] .product-card-actions { border-color:#2b3b4a; }
html[data-theme="dark"] .product-status.is-active { color:#74d6b2; background:#18392f; }
html[data-theme="dark"] .product-status.is-inactive { color:#b5c2ce; background:#2a3845; }
html[data-theme="dark"] .product-delete-button { color:#ff929c; border-color:#553940; }
html[data-theme="dark"] .product-delete-button:hover { color:#ffabb2; background:#3b2930; }
@media (max-width:640px) {
  .product-intro { align-items:stretch; }
  .product-add-button { justify-content:center; }
}

/* Compact, consistent form controls across workspace pages */
.form-control,.form-select,
.card-panel form input[type="text"],.card-panel form input[type="password"],
.card-panel form input[type="email"],.card-panel form select,
.field-icon-wrap input,.field-icon-wrap select {
  min-height:34px; padding:.34rem .62rem; font-size:.84rem; line-height:1.35;
}
.form-control-sm,.form-select-sm { min-height:30px; padding:.25rem .52rem; font-size:.79rem; }
.field-icon-wrap input,.field-icon-wrap select { padding:.34rem .62rem .34rem 2.3rem; }
textarea.form-control,.field-icon-wrap textarea { min-height:92px; padding:.5rem .65rem; }

/* Destructive confirmation page */
.delete-confirm-card { width:min(100%,560px); padding:1.35rem; }
.delete-confirm-heading { display:flex; align-items:center; gap:.75rem; padding-bottom:1rem; border-bottom:1px solid #e9eef4; }
.delete-confirm-icon { width:40px; height:40px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; color:#c5404b; background:#fff0f1; font-size:.95rem; }
.delete-confirm-kicker { margin-bottom:.12rem; color:#9aa7b4; font-size:.62rem; font-weight:750; letter-spacing:.13em; }
.delete-confirm-heading h2 { margin:0; color:#203750; font-size:1rem; font-weight:750; }
.delete-confirm-copy { margin:1rem 0; color:#526579; font-size:.88rem; line-height:1.55; }
.delete-confirm-copy strong { color:#263c55; }
.delete-confirm-warning { display:flex; align-items:flex-start; gap:.55rem; margin:0 0 1rem; padding:.7rem .8rem; border:1px solid #f4dc9b; border-radius:9px; background:#fff8e4; color:#805b12; font-size:.8rem; line-height:1.45; }
.delete-confirm-warning i { margin-top:.1rem; }
.delete-confirm-actions { display:flex; align-items:center; gap:.55rem; }
.delete-confirm-actions .btn { min-height:33px; padding:.35rem .7rem; font-size:.82rem; }
.delete-confirm-actions .btn-danger { background:#c9404b; border-color:#c9404b; }
.delete-confirm-actions .btn-danger:hover { background:#af303d; border-color:#af303d; }
html[data-theme="dark"] .delete-confirm-heading { border-bottom-color:#2b3b4a; }
html[data-theme="dark"] .delete-confirm-icon { color:#ff929c; background:#422b32; }
html[data-theme="dark"] .delete-confirm-heading h2,
html[data-theme="dark"] .delete-confirm-copy strong { color:#e2eaf2; }
html[data-theme="dark"] .delete-confirm-copy { color:#b3c0cc; }
html[data-theme="dark"] .delete-confirm-warning { border-color:#63502c; background:#342b1c; color:#f1d28e; }
@media (max-width:480px) {
  .delete-confirm-card { padding:1rem; }
  .delete-confirm-actions { align-items:stretch; flex-direction:column; }
  .delete-confirm-actions .btn { width:100%; }
}

/* Customer directory */
.customer-toolbar { padding:.7rem .8rem; gap:.75rem; }
.customer-toolbar form { align-items:center; gap:.45rem; }
.customer-search-field { position:relative; display:block; width:230px; margin:0; }
.customer-search-field > i { position:absolute; z-index:2; left:.7rem; top:50%; transform:translateY(-50%); color:#8b9aaa; font-size:.75rem; }
.customer-search-field .form-control { width:100%; padding-left:2rem; }
.customer-clear-link { color:#63768a; text-decoration:none; font-size:.8rem; }
.customer-toolbar-actions { display:flex; align-items:center; gap:.5rem; }
.customer-table-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1rem; border-bottom:1px solid #e9eef4; }
.customer-table-heading h2 { margin:0; color:#263c55; font-size:.92rem; font-weight:750; }
.customer-table-heading p { margin:.16rem 0 0; color:#8795a5; font-size:.73rem; }
.customer-count { display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .6rem; border-radius:999px; background:#f1f5f9; color:#607489; font-size:.73rem; font-weight:650; white-space:nowrap; }
.customer-identity { display:flex; align-items:center; min-width:170px; }
.customer-identity strong { color:#263c55; font-size:.82rem; font-weight:700; }
.customer-identity .row-avatar { width:32px; height:32px; margin-right:.55rem; background:#eaf3fb; color:#1769aa; }
.customer-contact { color:#536477; font-weight:550; }
.customer-email a { color:#3579a9; font-size:.8rem; text-decoration:none; }
.customer-email a:hover { text-decoration:underline; }
.customer-phone { white-space:nowrap; }
.customer-license-count { display:inline-flex; min-width:26px; height:25px; align-items:center; justify-content:center; border-radius:7px; background:#edf4fa; color:#316c98; font-size:.75rem; font-weight:700; }
html[data-theme="dark"] .customer-table-heading { border-bottom-color:#2b3b4a; }
html[data-theme="dark"] .customer-table-heading h2,
html[data-theme="dark"] .customer-identity strong { color:#e2eaf2; }
html[data-theme="dark"] .customer-table-heading p { color:#9baaba; }
html[data-theme="dark"] .customer-count { color:#bdcad6; background:#263746; }
html[data-theme="dark"] .customer-identity .row-avatar,
html[data-theme="dark"] .customer-license-count { color:#9bd2f5; background:#263b4e; }
html[data-theme="dark"] .customer-contact { color:#c1cdd8; }
html[data-theme="dark"] .customer-email a { color:#8fcafa; }
/* Shared search control for filtered table pages */
.list-search-field { position:relative; display:block; width:220px; margin:0 .5rem 0 0; }
.list-search-field > i { position:absolute; z-index:2; left:.7rem; top:50%; transform:translateY(-50%); color:#8b9aaa; font-size:.75rem; }
.list-search-field .form-control { width:100%; padding-left:2rem; }
.list-clear-link { align-self:center; padding:.25rem .35rem; color:#63768a; text-decoration:none; font-size:.8rem; }
.list-clear-link:hover { color:#1769aa; }
.expiring-threshold { display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.expiring-threshold > i { color:#8293a4; }
html[data-theme="dark"] .list-search-field > i { color:#94a6b7; }
html[data-theme="dark"] .list-clear-link { color:#9fb4c7; }
html[data-theme="dark"] .list-clear-link:hover { color:#8fcafa; }
html[data-theme="dark"] .expiring-threshold > i { color:#9caebe; }
@media (max-width:640px) {
  .list-search-field { width:100%; }
  .customer-toolbar { align-items:stretch !important; }
  .customer-toolbar form { display:grid; grid-template-columns:1fr 1fr; }
  .customer-search-field { grid-column:1 / -1; width:100%; }
  .customer-toolbar form > button { justify-self:start; }
  .customer-toolbar-actions { justify-content:flex-start; }
  .customer-table-heading { padding:.8rem; }
}

/* Consistent data-table presentation */
.table { width:100%; border-collapse:separate; border-spacing:0; font-size:.82rem; }
.table > thead > tr > th {
  padding:.72rem .85rem; color:#6a7b8d; background:#f7f9fc; border-bottom:1px solid #e4eaf1;
  font-size:.67rem; font-weight:750; letter-spacing:.075em; vertical-align:middle;
}
.table > tbody > tr { background:#fff; transition:background-color .12s ease; }
.table > tbody > tr:nth-child(even) { background:#fff; }
.table > tbody > tr:hover { background:#f4f8fc !important; }
.table > tbody > tr > td { padding:.68rem .85rem; color:#44586d; border-bottom:1px solid #edf1f5; vertical-align:middle; }
.table > tbody > tr:last-child > td { border-bottom:0; }
.table > tbody > tr > td .fw-semibold,
.table > tbody > tr > td strong { color:#273e55; }
.table-empty-state { min-height:132px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.35rem; padding:1.5rem; color:#7b8b9b; font-size:.83rem; }
.table-empty-state i { margin:0; color:#aab7c4; font-size:1.25rem; }
.card-panel > .pagination,
.card-panel > nav { border-top:1px solid #e8edf3 !important; }
.pagination { gap:.2rem; }
.pagination .page-link { min-width:29px; text-align:center; border-radius:7px; font-size:.78rem; }
html[data-theme="dark"] .table > thead > tr > th { color:#aebdcb; background:#202f3d; border-bottom-color:#354657; }
html[data-theme="dark"] .table > tbody > tr,
html[data-theme="dark"] .table > tbody > tr:nth-child(even) { background:#182532; }
html[data-theme="dark"] .table > tbody > tr:hover { background:#223647 !important; }
html[data-theme="dark"] .table > tbody > tr > td { color:#c2ced9; border-bottom-color:#293947; }
html[data-theme="dark"] .table > tbody > tr > td .fw-semibold,
html[data-theme="dark"] .table > tbody > tr > td strong { color:#e1e8ef; }
html[data-theme="dark"] .table-empty-state { color:#a9b8c7; }
html[data-theme="dark"] .table-empty-state i { color:#718397; }
html[data-theme="dark"] .card-panel > .pagination,
html[data-theme="dark"] .card-panel > nav { border-top-color:#2b3b4a !important; }

/* Account profile */
.profile-summary-card,.profile-info-card,.profile-security-card { padding:1.15rem; }
.profile-summary-card { display:flex; align-items:center; flex-direction:column; text-align:center; }
.profile-summary-avatar { width:66px; height:66px; display:grid; place-items:center; margin:.15rem 0 .75rem; border:4px solid #eaf3fb; border-radius:50%; background:linear-gradient(135deg,#2878b8,#1769aa); color:#fff; font-size:1.55rem; font-weight:750; }
.profile-summary-card h2 { margin:0; color:#203750; font-size:1.05rem; font-weight:750; overflow-wrap:anywhere; }
.profile-summary-username { margin:.18rem 0 .65rem; color:#8291a1; font-size:.8rem; }
.profile-role-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .6rem; border-radius:999px; background:#eaf3fb; color:#266e9f; font-size:.72rem; font-weight:700; }
.profile-summary-divider { width:100%; height:1px; margin:1rem 0 .55rem; background:#e9eef4; }
.profile-summary-item { display:flex; width:100%; justify-content:space-between; gap:.75rem; padding:.42rem 0; text-align:left; }
.profile-summary-item span,.profile-info-item span { color:#8291a1; font-size:.73rem; }
.profile-summary-item strong { color:#3f5368; font-size:.78rem; font-weight:650; text-align:right; }
.profile-summary-actions { display:grid; width:100%; gap:.5rem; margin-top:1rem; }
.profile-summary-actions .btn { min-height:32px; font-size:.8rem; }
.profile-info-card { margin-bottom:.85rem; }
.profile-section-heading { display:flex; align-items:center; gap:.65rem; padding-bottom:.85rem; margin-bottom:.8rem; border-bottom:1px solid #e9eef4; }
.profile-section-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#2878b8; background:#eaf3fb; font-size:.85rem; }
.profile-section-icon.security-icon { color:#16815e; background:#e9f7f1; }
.profile-section-heading h2 { margin:0; color:#263c55; font-size:.9rem; font-weight:750; }
.profile-section-heading p { margin:.12rem 0 0; color:#8795a5; font-size:.72rem; }
.profile-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1rem; row-gap:.9rem; }
.profile-info-item { display:flex; min-width:0; flex-direction:column; gap:.17rem; }
.profile-info-item strong { color:#344b62; font-size:.8rem; font-weight:650; overflow-wrap:anywhere; }
.profile-info-address { grid-column:1 / -1; }
.profile-security-method { display:flex; align-items:center; gap:.65rem; }
.profile-security-method-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#16815e; background:#e9f7f1; font-size:.83rem; }
.profile-security-method > div { display:flex; flex-direction:column; gap:.12rem; }
.profile-security-method > div span { color:#8291a1; font-size:.72rem; }
.profile-security-method > div strong { color:#344b62; font-size:.8rem; font-weight:700; }
html[data-theme="dark"] .profile-summary-card h2,
html[data-theme="dark"] .profile-section-heading h2 { color:#e2eaf2; }
html[data-theme="dark"] .profile-summary-username,
html[data-theme="dark"] .profile-summary-item span,
html[data-theme="dark"] .profile-info-item span,
html[data-theme="dark"] .profile-section-heading p,
html[data-theme="dark"] .profile-security-method > div span { color:#9baaba; }
html[data-theme="dark"] .profile-summary-item strong,
html[data-theme="dark"] .profile-info-item strong,
html[data-theme="dark"] .profile-security-method > div strong { color:#d6e0e9; }
html[data-theme="dark"] .profile-role-pill,
html[data-theme="dark"] .profile-section-icon { color:#9bd2f5; background:#263b4e; }
html[data-theme="dark"] .profile-section-icon.security-icon,
html[data-theme="dark"] .profile-security-method-icon { color:#74d6b2; background:#18392f; }
html[data-theme="dark"] .profile-summary-divider,
html[data-theme="dark"] .profile-section-heading { border-color:#2b3b4a; }
html[data-theme="dark"] .profile-summary-divider { background:#2b3b4a; }
@media (max-width:520px) { .profile-info-grid { grid-template-columns:1fr; } .profile-info-address { grid-column:auto; } }

/* Shared modal treatment */
.modal-backdrop.show { opacity:.48; }
.modal-dialog { max-width:min(520px,calc(100% - 2rem)); }
.modal-dialog.modal-lg { max-width:min(760px,calc(100% - 2rem)); }
.modal-content { overflow:hidden; border:1px solid #e2e9f0; border-radius:14px; background:#fff; box-shadow:0 20px 55px rgba(18,39,63,.2); }
.modal-header { padding:.9rem 1.15rem; border-bottom:1px solid #e9eef4; background:#fbfcfe; }
.modal-header .modal-title { color:#203750; font-family:'Plus Jakarta Sans','Inter','Segoe UI',sans-serif; font-size:.95rem; font-weight:750; }
.modal-header .btn-close { padding:.55rem; opacity:.55; }
.modal-header .btn-close:hover { opacity:.9; }
.modal-body { max-height:min(68vh,620px); overflow-y:auto; padding:1.1rem 1.15rem; color:#465a6e; font-size:.84rem; line-height:1.55; }
.modal-body p:last-child { margin-bottom:0; }
.modal-body .text-muted { color:#8291a1 !important; }
.modal-body .fw-semibold { color:#344b62; }
.modal-footer { gap:.45rem; padding:.75rem 1.15rem; border-top:1px solid #e9eef4; background:#fbfcfe; }
.modal-footer .btn { min-height:31px; padding:.3rem .7rem; font-size:.8rem; }
.modal-detail-grid > [class*="col"] { min-width:0; min-height:62px; display:flex; flex-direction:column; justify-content:center; gap:.28rem; padding:.62rem .7rem; border:1px solid #edf1f5; border-radius:9px; background:#fbfcfe; }
.modal-detail-grid > [class*="col"] > .text-muted { font-size:.7rem; font-weight:550; }
.modal-detail-grid > [class*="col"] > .fw-semibold { font-size:.79rem; font-weight:700 !important; overflow-wrap:anywhere; }
.modal-detail-grid > [class*="col"] > .fw-semibold.small { font-size:.74rem; }
.staff-detail-modal { max-width:min(620px,calc(100% - 2rem)); }
.staff-detail-modal-header { min-height:76px; }
.staff-modal-identity { display:flex; min-width:0; align-items:center; gap:.75rem; flex:1; }
.staff-modal-avatar { width:46px; height:46px; display:grid; place-items:center; flex:0 0 auto; border:3px solid #e4f0fa; border-radius:50%; background:linear-gradient(135deg,#2878b8,#1769aa); color:#fff; font-size:1.05rem; font-weight:750; }
.staff-modal-name { min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.staff-modal-name h2 { margin:0; color:#203750; font-family:'Plus Jakarta Sans','Inter','Segoe UI',sans-serif; font-size:.98rem; font-weight:750; overflow-wrap:anywhere; }
.staff-modal-name > span { margin-top:.15rem; color:#8291a1; font-size:.76rem; }
.staff-modal-status { display:inline-flex; align-items:center; gap:.35rem; flex:0 0 auto; margin-left:auto; padding:.28rem .55rem; border-radius:999px; font-size:.69rem; font-weight:700; }
.staff-modal-status i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.staff-modal-status.is-active { color:#16815e; background:#e9f7f1; }
.staff-modal-status.is-disabled { color:#718096; background:#eef2f6; }
.staff-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.staff-detail-item { min-width:0; min-height:62px; display:flex; flex-direction:column; justify-content:center; gap:.28rem; padding:.62rem .7rem; border:1px solid #edf1f5; border-radius:9px; background:#fbfcfe; }
.staff-detail-item > span { color:#8291a1; font-size:.7rem; font-weight:550; }
.staff-detail-item > span i { width:15px; margin-right:.18rem; color:#8ca0b3; font-size:.68rem; }
.staff-detail-item > strong { color:#344b62; font-size:.79rem; font-weight:700; overflow-wrap:anywhere; }
.staff-detail-address { grid-column:1 / -1; }
html[data-theme="dark"] .staff-modal-name h2 { color:#e2eaf2; }
html[data-theme="dark"] .staff-modal-name > span { color:#9baaba; }
html[data-theme="dark"] .staff-modal-avatar { border-color:#2b4257; }
html[data-theme="dark"] .staff-modal-status.is-active { color:#74d6b2; background:#18392f; }
html[data-theme="dark"] .staff-modal-status.is-disabled { color:#c0cbd5; background:#2a3845; }
html[data-theme="dark"] .staff-detail-item { border-color:#2b3b4a; background:#14212d; }
html[data-theme="dark"] .staff-detail-item > span { color:#9baaba; }
html[data-theme="dark"] .staff-detail-item > span i { color:#8fa3b6; }
html[data-theme="dark"] .staff-detail-item > strong { color:#d6e0e9; }
html[data-theme="dark"] .modal-detail-grid > [class*="col"] { border-color:#2b3b4a; background:#14212d; }
html[data-theme="dark"] .modal-content { background:#1a2835; border-color:#334454; box-shadow:0 20px 55px rgba(0,0,0,.4); }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { background:#172430; border-color:#344555; }
html[data-theme="dark"] .modal-header .modal-title { color:#e2eaf2; }
html[data-theme="dark"] .modal-header .btn-close { filter:invert(1) grayscale(100%) brightness(1.8); }
html[data-theme="dark"] .modal-body { color:#c2ced9; }
html[data-theme="dark"] .modal-body .text-muted { color:#9baaba !important; }
html[data-theme="dark"] .modal-body .fw-semibold { color:#e2eaf2; }

/* Keep button labels consistent by button size across the application. */
.btn:not(.btn-sm):not(.btn-lg) { font-size:.84rem !important; }
.btn.btn-sm { font-size:.76rem !important; }
.btn.btn-lg { font-size:.95rem !important; }

/* App-wide layout safeguards for tablet and phone widths. */
@media (max-width: 1024px) {
  .page-body { padding:1.15rem; }
  .workspace-page-heading { gap:1rem; }
  .list-toolbar { min-width:0; }
  .list-toolbar form { min-width:0; }
}
@media (max-width: 767px) {
  .page-body { padding:.9rem; }
  .topbar { min-height:58px; height:auto; padding:.55rem .75rem; gap:.55rem; }
  .topbar > div { min-width:0; }
  .topbar > div:first-child { flex:1 1 auto; }
  .topbar > div:last-child { flex:0 0 auto; gap:.4rem !important; }
  .topbar-search { display:none; }
  .workspace-page-heading { align-items:stretch; flex-direction:column; gap:.65rem; margin-bottom:1rem; }
  .workspace-page-actions { width:100%; }
  .workspace-page-actions .btn { min-height:36px; }
  .list-toolbar { align-items:stretch !important; padding:.7rem; }
  .list-toolbar form { width:100%; flex-direction:column; align-items:stretch; }
  .list-toolbar input[type="text"], .list-toolbar input[type="search"],
  .list-toolbar input[type="date"], .list-toolbar select.form-select,
  .list-toolbar select.form-select-sm { width:100% !important; }
  .list-toolbar form > .btn, .list-toolbar form > a.btn { align-self:flex-start; }
  .list-toolbar-export { margin-left:0; align-self:flex-start; }
  .list-toolbar .dropdown-menu { min-width:10rem; }
  .card-panel > .table { min-width:680px; }
  .modal-dialog, .modal-dialog.modal-lg { width:auto; max-width:none; margin:.6rem; }
  .modal-dialog-centered { min-height:calc(100% - 1.2rem); }
  .modal-body { max-height:calc(100dvh - 150px); padding:.9rem; }
  .modal-header, .modal-footer { padding:.75rem .9rem; }
  .notif-dropdown { width:min(340px,calc(100vw - 1.5rem)); }
  .user-dropdown-menu { max-width:calc(100vw - 1rem); }
}
@media (max-width: 480px) {
  .page-body { padding:.7rem; }
  .topbar { padding:.5rem .6rem; }
  .sidebar-toggle { width:30px; height:30px; }
  .topbar > div:last-child { gap:.3rem !important; }
  .topbar .icon-btn { width:32px; height:32px; }
  .topbar .user-chip { gap:.35rem; padding:.2rem .45rem .2rem .25rem; }
  .topbar .avatar-circle { width:25px; height:25px; }
  .workspace-page-heading h1 { font-size:1.12rem; }
  .workspace-page-subtitle { font-size:.8rem; }
  .modal-detail-grid > [class*="col"] { grid-column:1 / -1; }
  .staff-detail-grid { grid-template-columns:1fr; }
  .staff-detail-address { grid-column:auto; }
  .staff-modal-status { margin-left:auto; }
  .modal-footer { flex-wrap:wrap; }
  .modal-footer .btn { flex:1 1 auto; }
}