/* =============================================================================
   CRM Portal — Premium Design System v2 (Light Purple Theme)
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --c-accent:       #4f46e5;
  --c-accent-hover: #4338ca;
  --c-accent-light: #ede9fb;
  --c-accent-glow:  rgba(79,70,229,.25);

  --c-success:       #10b981; --c-success-bg: rgba(16,185,129,.12); --c-success-border: rgba(16,185,129,.4);
  --c-warning:       #f59e0b; --c-warning-bg: rgba(245,158,11,.12); --c-warning-border: rgba(245,158,11,.4);
  --c-danger:        #f87171; --c-danger-bg:  rgba(248,113,113,.12); --c-danger-border:  rgba(248,113,113,.4);
  --c-info:          #38bdf8; --c-info-bg:    rgba(56,189,248,.12); --c-info-border:    rgba(56,189,248,.4);

  --c-bg:         #eeeef6;
  --c-surface:    #ffffff;
  --c-surface-2:  #eeeef6;
  --c-border:     #e0e0e0;
  --c-sidebar-bg: #ffffff;

  --c-text:      #333333;
  --c-text-muted:#555555;
  --c-text-soft: #999999;

  --r-sm:4px; --r-md:12px; --r-lg:12px; --r-xl:12px; --r-full:9999px;

  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.05);
  --shadow-lg:  0 10px 25px -5px rgba(0,0,0,.12),0 8px 10px -6px rgba(0,0,0,.06);
  --shadow-xl:  0 20px 40px -10px rgba(0,0,0,.15);
  --shadow-accent: 0 4px 18px rgba(79,70,229,.3);

  --t:160ms ease;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Consolas','Cascadia Code','Courier New',monospace;
}

/* ── Light theme override (toggled via html[data-theme="light"]) ────────────── */
html[data-theme="light"] {
  --c-bg:         #eeeef6;
  --c-surface:    #ffffff;
  --c-surface-2:  #eeeef6;
  --c-border:     #e0e0e0;
  --c-sidebar-bg: #ffffff;

  --c-text:      #333333;
  --c-text-muted:#555555;
  --c-text-soft: #999999;

  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -1px rgba(0,0,0,.05);
  --shadow-lg:  0 10px 25px -5px rgba(0,0,0,.12),0 8px 10px -6px rgba(0,0,0,.06);
  --shadow-xl:  0 20px 40px -10px rgba(0,0,0,.15);
  --shadow-accent: 0 4px 18px rgba(79,70,229,.3);

  color-scheme: light;
}
html[data-theme="light"] *{scrollbar-color:#cccccc #f0f0f0;}
html[data-theme="light"] ::-webkit-scrollbar-track{background:#f0f0f0;}
html[data-theme="light"] ::-webkit-scrollbar-thumb{background:#cccccc;}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#aaaaaa;}
html[data-theme="light"] code{color:#555555;}
html[data-theme="light"] .na{color:#aaaaaa;}
html[data-theme="light"] .pg-btn.pg-disabled,
html[data-theme="light"] .pg-btn[disabled]{color:#cccccc;}
html[data-theme="light"] div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html[data-theme="light"] div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{color:#cccccc!important;}
html[data-theme="light"] body.login-page{
  background:linear-gradient(160deg,#eeeef6 0%,#ffffff 100%);
}
html[data-theme="light"] .login-form-side::before{
  background-image:
    radial-gradient(circle at 80% 80%,rgba(79,70,229,.08) 0%,transparent 50%);
}
html[data-theme="light"] .login-box{
  background:rgba(255,255,255,.97);
  box-shadow:0 32px 64px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.04);
}

/* ── Theme toggle control ─────────────────────────────────────────────────── */
button.sidebar__item{
  width:100%;background:none;border:none;border-left:3px solid transparent;
  text-align:left;font-family:var(--font);cursor:pointer;font-size:13px;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:light;overflow-x:hidden;}
body{
  margin:0;font-family:var(--font);font-size:14px;line-height:1.6;
  color:var(--c-text);background:var(--c-bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;max-width:100vw;
}
a{color:var(--c-accent);}
code{
  font-family:var(--font-mono);background:var(--c-surface);
  border:1px solid var(--c-border);padding:1px 6px;color:#555555;
  border-radius:var(--r-sm);font-size:12px;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */
*{scrollbar-color:#cccccc #f0f0f0;scrollbar-width:thin;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#f0f0f0;}
::-webkit-scrollbar-thumb{background:#cccccc;border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:#aaaaaa;}

/* ── Keyframe animations ────────────────────────────────────────────────────── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes slideIn  { from{opacity:0;transform:translateX(-12px)} to{opacity:1;transform:translateX(0)} }
@keyframes pulse    { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes shimmer  { from{background-position:-600px 0} to{background-position:600px 0} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes scaleIn  { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }
@keyframes glow     {
  0%,100%{box-shadow:0 0 0 0 var(--c-accent-glow)}
  50%{box-shadow:0 0 0 8px transparent}
}

/* ── App shell / Sidebar ───────────────────────────────────────────────────── */
.app-shell{display:flex;align-items:stretch;min-height:100vh;}

.sidebar{
  width:212px;flex-shrink:0;
  background:var(--c-sidebar-bg);border-right:1px solid var(--c-border);
  position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:200;
  display:flex;flex-direction:column;padding:20px 14px;
}
.sidebar__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding:0 4px;}
.sidebar__brand{
  display:flex;align-items:center;gap:10px;color:var(--c-text);
  text-decoration:none;font-weight:800;font-size:15px;letter-spacing:-.2px;
}
.sidebar__brand-icon{
  width:44px;height:44px;flex-shrink:0;object-fit:contain;
}
.sidebar__hamburger{
  background:none;border:none;color:var(--c-text-muted);font-size:18px;
  cursor:pointer;padding:4px;line-height:1;border-radius:6px;transition:background var(--t),color var(--t);
}
.sidebar__hamburger:hover{background:var(--c-surface);color:var(--c-accent);}
.sidebar__section-label{
  font-size:11px;font-weight:700;color:var(--c-text-soft);
  text-transform:uppercase;letter-spacing:.08em;margin:8px 8px 8px;
}
.sidebar__group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.sidebar__item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  color:var(--c-text);text-decoration:none;font-size:13.5px;font-weight:500;
  border-left:3px solid transparent;
  transition:background var(--t),color var(--t),border-color var(--t);cursor:pointer;
}
/* Bold only for the Advanced Search link, per explicit instruction - every
   other sidebar item stays at the normal 500 weight above. */
.sidebar__item[href="advanced_search.php"]{font-weight:700;}
.sidebar__item:hover{background:var(--c-surface-2);color:var(--c-text);}
.sidebar__item.active{background:var(--c-accent-light);color:var(--c-accent);border-left-color:var(--c-accent);font-weight:700;}
.sidebar__avatar{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-accent);color:#ffffff;font-size:12px;font-weight:700;
}
.sidebar__icon{
  width:26px;height:26px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-text-soft);font-size:14px;
}
.sidebar__item.active .sidebar__icon{color:var(--c-accent);}

.sidebar__footer{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--c-border);
  display:flex;align-items:center;gap:9px;
}
.sidebar__footer-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--c-accent);border:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#ffffff;
}
.sidebar__footer-info{flex:1;min-width:0;}
.sidebar__footer-name{
  font-size:12.5px;font-weight:700;color:var(--c-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar__footer-email{
  font-size:11px;color:var(--c-text-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar__footer-logout{
  color:var(--c-text-muted);font-size:15px;flex-shrink:0;
  transition:color var(--t);
}
.sidebar__footer-logout:hover{color:#e05252;}

/* ── App main / top bar ───────────────────────────────────────────────────── */
.app-main{flex:1;min-width:0;background:var(--c-bg);min-height:100vh;margin-left:212px;}
.app-topbar{
  display:flex;align-items:center;justify-content:flex-end;gap:16px;
  padding:16px 28px 0;flex-wrap:wrap;
}
/* Hidden on desktop (the sidebar's own hamburger, inside <aside>, handles
   it there) - shown only under the @media(max-width:768px) rule below,
   where it's the ONLY way to open the sidebar at all. margin-right:auto
   pushes it to the opposite end of this flex row from the
   justify-content:flex-end items without disturbing their own alignment. */
.app-topbar__menu-btn{
  display:none;margin-right:auto;
  background:none;border:1px solid var(--c-border);color:var(--c-text);
  font-size:18px;line-height:1;padding:7px 10px;border-radius:var(--r-sm);cursor:pointer;
}
.app-topbar__expiry{
  font-size:12.5px;color:#777777;
  display:flex;align-items:center;gap:6px;font-weight:500;
}
.app-topbar__logout{
  display:inline-flex;align-items:center;gap:5px;
  color:#e05252;text-decoration:none;font-size:12px;font-weight:500;
  padding:6px 11px;border-radius:var(--r-sm);
  border:1px solid var(--c-border);transition:all var(--t);
}
.app-topbar__logout:hover{background:var(--c-danger-bg);border-color:#e05252;color:#e05252;}
.topbar__role{
  display:inline-block;padding:2px 8px;border-radius:var(--r-full);
  font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
.topbar__role--admin{background:#f59e0b;color:#ffffff;}
.topbar__role--agent{background:var(--c-success-bg);color:var(--c-success);}

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.container{max-width:100%;margin:0;padding:16px 20px 40px;}

/* ── Page title ────────────────────────────────────────────────────────────── */
.page-title-main{
  font-size:26px;font-weight:800;color:#1a1a2e;
  letter-spacing:.3px;margin:6px 0 16px;
}

/* ── Admin page headers ────────────────────────────────────────────────────── */
.page-header{margin:6px 0 18px;}
.page-title{
  font-size:22px;font-weight:800;color:#1a1a2e;letter-spacing:-.2px;
  display:flex;align-items:center;gap:9px;margin:0 0 4px;
}
.page-title .bi{color:var(--c-accent);font-size:20px;}
.page-subtitle{font-size:13px;color:var(--c-text-soft);margin:0;}

/* ── Search Panel ───────────────────────────────────────────────────────────── */
.sp-wrap{
  background:var(--c-surface);
  border:none;
  border-radius:12px;margin-bottom:16px;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.sp-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 10px;border-bottom:1px solid var(--c-border);
  background:var(--c-surface-2);
  flex-wrap:wrap;gap:10px;
}
.sp-title{
  font-size:16px;font-weight:800;color:var(--c-text);display:flex;align-items:center;gap:8px;
}
.sp-title .bi{font-size:15px;color:var(--c-accent);opacity:1;}
.sp-sub{
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:600;color:var(--c-accent);margin-left:4px;
  background:transparent;border:1px solid var(--c-accent);
  padding:2px 9px;border-radius:var(--r-full);
}
.sp-stats{display:flex;gap:6px;}
.sp-stat{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:8px;padding:5px 14px;text-align:center;min-width:70px;
}
.sp-stat span{display:block;font-size:13px;font-weight:700;color:var(--c-text);line-height:1.2;}
.sp-stat label{display:block;font-size:9px;color:var(--c-text-soft);text-transform:uppercase;letter-spacing:.4px;margin-top:1px;}
.sp-stat--accent{background:var(--c-accent-light);border-color:rgba(79,70,229,.4);}
.sp-stat--accent span{color:var(--c-accent);}

.sp-row{
  display:flex;align-items:center;gap:12px;padding:9px 20px;
  border-bottom:1px solid var(--c-border);
}
.sp-row--form{border-bottom:none;padding:12px 20px 16px;}

.sp-pills{display:flex;gap:5px;flex-wrap:wrap;}
.sp-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 13px;border-radius:20px;
  font-size:12px;font-weight:500;
  border:1px solid var(--c-border);
  background:var(--c-surface);color:var(--c-text-muted);
  cursor:pointer;transition:all 150ms ease;white-space:nowrap;
}
.sp-pill:hover{background:var(--c-surface-2);color:var(--c-text);border-color:var(--c-accent);}
.sp-pill.active{background:var(--c-accent);color:#ffffff;border:none;font-weight:700;
  box-shadow:var(--shadow-accent);}

/* State pill colours when active — unified to accent per theme */
.sp-pill--ka.active{background:var(--c-accent);border-color:var(--c-accent);color:#ffffff;}
.sp-pill--tn.active{background:var(--c-accent);border-color:var(--c-accent);color:#ffffff;}
.sp-pill--kl.active{background:var(--c-accent);border-color:var(--c-accent);color:#ffffff;}
.sp-pill--ap.active{background:var(--c-accent);border-color:var(--c-accent);color:#ffffff;}
.sp-pill--all.active{background:var(--c-accent);border-color:var(--c-accent);color:#ffffff;}

.sp-form{display:flex;gap:10px;align-items:stretch;width:100%;flex-wrap:wrap;}
.sp-fields{display:flex;gap:8px;flex:1;flex-wrap:wrap;}
.field-group{display:flex;gap:8px;flex:1;}
.sp-input{
  flex:1;padding:11px 16px;border-radius:9px;
  border:1px solid var(--c-border);
  background:var(--c-surface);color:var(--c-text);
  font-size:13px;font-family:var(--font);outline:none;
  transition:all 150ms;
}
.sp-input::placeholder{color:#aaaaaa;}
.sp-input:focus{border-color:var(--c-accent);background:var(--c-surface);box-shadow:0 0 0 3px var(--c-accent-glow);}
.sp-textarea{resize:vertical;min-height:72px;}
.sp-btn{
  padding:11px 26px;border-radius:9px;border:none;
  background:var(--c-accent);
  color:#ffffff;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  white-space:nowrap;transition:all 150ms;
  box-shadow:var(--shadow-accent);
}
.sp-btn:hover{background:var(--c-accent-hover);transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(79,70,229,.45);}
.sp-btn:disabled{opacity:.65;cursor:wait;transform:none;}
.sp-btn-clear{
  background:var(--c-surface);color:var(--c-text-muted);
  border:1px solid var(--c-border);box-shadow:none;
}
.sp-btn-clear:hover{background:var(--c-danger-bg);border-color:var(--c-danger-border);
  color:var(--c-danger);box-shadow:none;transform:translateY(-1px);}
.sp-btn-export{
  background:var(--c-success);color:#ffffff;
  box-shadow:0 4px 18px rgba(16,185,129,.3);
}
.sp-btn-export:hover{background:#0d9668;transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(16,185,129,.45);}

/* ── Confetti (2026-08-08, index.php) ──────────────────────────────────────── */
/* Fixed to the right-hand content panel only - left offset matches the
   sidebar's 212px width (see .sidebar) so it never covers the sidebar, and
   spans the full panel height/width rather than being boxed into the
   results card. pointer-events:none so it never blocks clicking anything
   underneath - purely decorative, shown only while a search has found
   results (see startConfetti()/stopConfetti() in index.php). Left offset
   collapses to 0 on mobile alongside the sidebar (see responsive section). */
.confetti-container{position:fixed;top:0;left:212px;right:0;bottom:0;z-index:250;overflow:hidden;pointer-events:none;}
.confetti-piece{
  position:absolute;top:-24px;opacity:.85;border-radius:1px;
  animation-name:confetti-float;animation-timing-function:linear;animation-iteration-count:infinite;
  will-change:transform;
}
@keyframes confetti-float{
  0%  {transform:translate(0,0)                 rotate(var(--rot-start));}
  25% {transform:translate(var(--sway),27vh)     rotate(calc(var(--rot-start) + 90deg));}
  50% {transform:translate(0,55vh)               rotate(calc(var(--rot-start) + 180deg));}
  75% {transform:translate(calc(var(--sway) * -1),82vh) rotate(calc(var(--rot-start) + 270deg));}
  100%{transform:translate(0,112vh)              rotate(calc(var(--rot-start) + 360deg));}
}

/* ── Results wrapper ─────────────────────────────────────────────────────────── */
.results-wrap{
  background:var(--c-surface);border-radius:12px;
  border:none;
  box-shadow:var(--shadow-sm);
  overflow:hidden;margin-top:4px;
}
.results-table-wrap{overflow-x:auto;overflow-y:visible;}
/* E-Commerce results only (see ecommerce.php) — no export button there, and
   text selection is disabled so the data can't be drag-selected/copied either.
   Paired with copy/cut/contextmenu blockers in that page's JS. */
.no-copy{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card{
  background:var(--c-surface);border:none;
  border-radius:var(--r-xl);box-shadow:var(--shadow-sm);overflow:hidden;
  animation:fadeUp .4s ease both;
}
.card+.card,.card.mt{margin-top:12px;}
.card-header{
  display:flex;align-items:center;gap:8px;padding:10px 16px;
  border-bottom:1px solid var(--c-border);background:var(--c-surface-2);
  flex-wrap:wrap;
}
.card-title{font-size:12.5px;font-weight:700;color:var(--c-text);flex:1;letter-spacing:-.1px;}
.card-body{padding:14px;}
.card-body.p-0{padding:0;overflow-x:auto;}

/* ── State selector grid ────────────────────────────────────────────────────── */
.state-selector{
  display:grid;grid-template-columns:repeat(5,1fr);gap:7px;
}
@media(max-width:1100px){.state-selector{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px) {.state-selector{grid-template-columns:repeat(2,1fr);}}

.state-card{
  position:relative;border-radius:8px;padding:8px 12px;
  cursor:pointer;overflow:hidden;
  border:1px solid var(--c-border);
  background:var(--c-surface);
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 130ms ease;
  user-select:none;
}
.state-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.state-card.active{transform:translateY(-2px);}
.state-card input[type="radio"]{display:none;}

/* Active border per state */
.state-card--all.active  {border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(79,70,229,.15),var(--shadow-md);}
.state-card--ka.active   {border-color:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.12),var(--shadow-md);}
.state-card--tn.active   {border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.12),var(--shadow-md);}
.state-card--kl.active   {border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.12),var(--shadow-md);}
.state-card--ap.active   {border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.12),var(--shadow-md);}

/* Shine on hover */
.state-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%);
  transform:translateX(-100%);transition:transform 450ms ease;pointer-events:none;
}
.state-card:hover::before{transform:translateX(150%);}

/* Check mark */
.state-card__check{
  position:absolute;top:7px;right:8px;
  width:14px;height:14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:700;
  transform:scale(0);transition:transform 220ms cubic-bezier(.34,1.56,.64,1);
  z-index:2;
}
.state-card--all.active  .state-card__check{background:var(--c-accent);color:#fff;transform:scale(1);}
.state-card--ka.active   .state-card__check{background:#f87171;color:#000;transform:scale(1);}
.state-card--tn.active   .state-card__check{background:#10b981;color:#000;transform:scale(1);}
.state-card--kl.active   .state-card__check{background:#f59e0b;color:#000;transform:scale(1);}
.state-card--ap.active   .state-card__check{background:#38bdf8;color:#000;transform:scale(1);}

.state-card__name{
  font-size:11.5px;font-weight:700;color:var(--c-text);display:block;
  margin-bottom:1px;letter-spacing:-.1px;
}
.state-card--all.active  .state-card__name{color:var(--c-accent);}
.state-card--ka.active   .state-card__name{color:#f87171;}
.state-card--tn.active   .state-card__name{color:#10b981;}
.state-card--kl.active   .state-card__name{color:#f59e0b;}
.state-card--ap.active   .state-card__name{color:#38bdf8;}
.state-card__capital{
  font-size:10px;color:var(--c-text-soft);display:block;
}

/* ── Search option grid ─────────────────────────────────────────────────────── */
.search-options{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px;
}
@media(max-width:960px){.search-options{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.search-options{grid-template-columns:1fr;}}

.search-option{
  display:flex;align-items:center;gap:7px;padding:7px 10px;
  border:1px solid var(--c-border);border-radius:var(--r-sm);
  cursor:pointer;background:var(--c-surface);
  transition:all var(--t);user-select:none;
}
.search-option:hover{border-color:var(--c-accent);background:var(--c-accent-light);}
.search-option.active{
  border-color:var(--c-accent);background:var(--c-accent-light);
  box-shadow:0 0 0 2px var(--c-accent-glow);
}
.search-option input[type="radio"]{display:none;}
.search-option .bi{font-size:14px;color:var(--c-accent);flex-shrink:0;opacity:.65;transition:opacity var(--t),transform var(--t);}
.search-option:hover .bi,.search-option.active .bi{opacity:1;transform:scale(1.1);}
.search-option__label{font-size:11.5px;font-weight:500;color:var(--c-text-muted);transition:color var(--t);}
.search-option.active .search-option__label{color:var(--c-accent);font-weight:600;}

/* ── Search form ──────────────────────────────────────────────────────────── */
.search-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.field-group{display:flex;gap:10px;flex:1;flex-wrap:wrap;}
.form-control{
  flex:1;min-width:170px;padding:8px 13px;
  border:1px solid var(--c-border);border-radius:var(--r-md);
  font-family:var(--font);font-size:13px;color:var(--c-text);
  background:var(--c-surface);outline:none;appearance:none;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.form-control:focus{
  border-color:var(--c-accent);
  box-shadow:0 0 0 3px var(--c-accent-glow);
  transform:translateY(-1px);
}
.form-control::placeholder{color:#aaaaaa;}
textarea.form-control{resize:vertical;min-height:88px;}

.password-field-wrap{position:relative;display:flex;}
.password-field-wrap input{padding-right:40px;}
.password-toggle-btn{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:6px;cursor:pointer;
  color:var(--c-text-soft);font-size:15px;transition:color 150ms,background 150ms;
}
.password-toggle-btn:hover{color:var(--c-accent);background:var(--c-surface-2);}

/* ── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  padding:20px;animation:fadeIn 150ms ease;
}
.modal-box{
  background:var(--c-surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);width:100%;max-width:420px;
  max-height:90vh;overflow-y:auto;
  animation:scaleIn 150ms ease;
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px 20px;border-bottom:1px solid var(--c-border);
  font-weight:700;font-size:14px;color:var(--c-text);
}
.modal-close-btn{
  background:none;border:none;font-size:20px;line-height:1;cursor:pointer;
  color:var(--c-text-soft);padding:2px 6px;border-radius:6px;transition:all 150ms;
}
.modal-close-btn:hover{color:var(--c-danger);background:var(--c-surface-2);}
.modal-box form{padding:18px 20px;display:flex;flex-direction:column;gap:2px;}
.modal-box .form-group{margin-bottom:14px;}
.modal-box .form-label{
  display:block;font-size:12px;font-weight:600;color:var(--c-text-muted);
  margin-bottom:5px;
}
.modal-box .btn-primary{width:100%;padding:11px;margin-top:4px;}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 20px;border:none;border-radius:var(--r-md);
  font-family:var(--font);font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:all var(--t);outline:none;
}
.btn:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;}
.btn-primary{background:var(--c-accent);color:#ffffff;font-weight:700;box-shadow:var(--shadow-accent);}
.btn-primary:hover{background:var(--c-accent-hover);transform:translateY(-2px);box-shadow:0 8px 24px rgba(79,70,229,.45);color:#ffffff;}
.btn-primary:active{transform:translateY(0);}
.btn-secondary{background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border);}
.btn-secondary:hover{background:var(--c-surface-2);border-color:var(--c-accent);}
.btn-danger{background:var(--c-danger);color:#000;} .btn-danger:hover{background:#ef4444;}
.btn-success{background:var(--c-success);color:#000;} .btn-success:hover{background:#059669;}
.btn-warning{background:var(--c-warning);color:#000;} .btn-warning:hover{background:#d97706;}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:var(--r-sm);}
.btn-lg{padding:13px 30px;font-size:15px;border-radius:var(--r-md);}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;padding:3px 9px;
  border-radius:var(--r-full);font-size:11px;font-weight:600;letter-spacing:.3px;white-space:nowrap;
}
.badge-primary{background:var(--c-accent-light);color:var(--c-accent);border:1px solid rgba(79,70,229,.35);}
.badge-success{background:var(--c-success-bg);color:var(--c-success);border:1px solid var(--c-success-border);}
.badge-warning{background:var(--c-warning-bg);color:var(--c-warning);border:1px solid var(--c-warning-border);}
.badge-danger {background:var(--c-danger-bg); color:var(--c-danger);border:1px solid var(--c-danger-border);}
.badge-info   {background:var(--c-info-bg);   color:var(--c-info);border:1px solid var(--c-info-border);}
.badge-neutral{background:var(--c-surface);color:var(--c-text-muted);border:1px solid var(--c-border);}
.badge-male   {background:rgba(56,189,248,.12);color:#38bdf8;border:1px solid rgba(56,189,248,.35);}
.badge-female {background:rgba(244,114,182,.12);color:#f472b6;border:1px solid rgba(244,114,182,.35);}
.badge-other  {background:var(--c-accent-light);color:var(--c-accent);border:1px solid rgba(79,70,229,.35);}

/* ── Active state pill (shown in card header) ───────────────────────────── */
.state-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 12px;border-radius:var(--r-full);
  font-size:12px;font-weight:600;color:#000;
  transition:all 300ms ease;
}
.state-pill--all{background:linear-gradient(90deg,var(--c-accent-hover),var(--c-accent));}
.state-pill--ka {background:linear-gradient(90deg,#dc2626,#f87171);}
.state-pill--tn {background:linear-gradient(90deg,#059669,#10b981);}
.state-pill--kl {background:linear-gradient(90deg,#d97706,#f59e0b);}
.state-pill--ap {background:linear-gradient(90deg,#0284c7,#38bdf8);}

/* ── Skeleton loader ──────────────────────────────────────────────────────── */
.skeleton{
  display:block;border-radius:6px;
  background:linear-gradient(90deg,#eeeef6 25%,#f5f5fb 50%,#eeeef6 75%);
  background-size:600px 100%;
  animation:shimmer 1.4s infinite;
}
.skeleton-row td{padding:12px 14px;}

/* ── Results table — WOW professional grid ────────────────────────────────── */
div.dataTables_wrapper{overflow-x:visible;width:100%;color:var(--c-text-muted);}

table.results-table{
  border-collapse:collapse;
  font-size:14px;font-family:var(--font);
  width:100%!important;
}
/* Main search results table — fluid, percentage-based columns. The PAGE
   (sidebar, search form, header) always fits the viewport with no scroll;
   this table alone gets a modest floor so its 12 dense columns never
   squeeze into illegible single-letter-per-line headers — below that
   floor it scrolls locally within .results-table-wrap, not the page. */
table#results{
  table-layout:fixed;
  min-width:880px;
}

/* Header */
table.results-table thead tr{
  background:var(--c-accent);
}
table.results-table thead th{
  color:#ffffff;font-size:11.5px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;padding:7px 9px;
  border-right:1px solid rgba(255,255,255,.18);
  white-space:normal;overflow-wrap:break-word;word-break:normal;
  cursor:pointer;user-select:none;
  transition:background 120ms;
}
table.results-table thead th:hover{
  background:var(--c-accent-hover);color:#ffffff;
}
table.results-table thead th.sorting_asc,
table.results-table thead th.sorting_desc{
  background:var(--c-accent-hover)!important;color:#ffffff!important;
}

/* Body rows */
table.results-table tbody tr{
  transition:all 100ms;border-bottom:1px solid var(--c-border);
}
table.results-table tbody tr:nth-child(odd) {background:var(--c-surface);}
table.results-table tbody tr:nth-child(even){background:var(--c-surface-2);}
table.results-table tbody tr:hover{
  background:rgba(79,70,229,.06)!important;
  box-shadow:inset 3px 0 0 var(--c-accent);
}

/* Body cells */
table.results-table tbody td{
  padding:5px 9px;
  border-right:1px solid var(--c-border);
  vertical-align:middle;color:var(--c-text);
  white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;
  font-size:12.5px;line-height:1.25;
}
table.results-table tbody tr:last-child td{border-bottom:none;}

/* Name/Mobile sit closer together — tighter gap between just these two columns */
table.results-table thead th:nth-child(1),
table.results-table tbody td:nth-child(1){padding-right:4px;}
table.results-table thead th:nth-child(2),
table.results-table tbody td:nth-child(2){padding-left:4px;}

/* Cell types */
.col-name{font-weight:700;color:var(--c-text);font-size:12.5px;letter-spacing:-.1px;
  white-space:normal;word-break:break-word;display:block;}
.col-dob{
  font-family:var(--font-mono);font-size:12.5px;
  color:#ffffff;font-weight:700;letter-spacing:.2px;
  background:var(--c-accent);padding:1px 7px;border-radius:5px;
  display:inline-block;
}
.col-addr{
  font-size:12.5px;color:var(--c-text-muted);cursor:default;
  white-space:normal;word-break:break-word;
  display:block;
}
.col-email{font-size:12.5px;color:#38bdf8;font-weight:500;
  white-space:normal;word-break:break-word;display:block;}
.col-wrap{white-space:normal;word-break:break-word;display:block;}
.na{color:#aaaaaa;font-size:12.5px;}

.chip-mobile{
  font-family:var(--font-mono);font-size:12.5px;
  background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.35);
  padding:1px 7px;border-radius:5px;letter-spacing:.2px;
  display:inline-block;color:#10b981;font-weight:700;
  max-width:100%;white-space:normal;overflow-wrap:break-word;
}
.chip-id{
  font-family:var(--font-mono);font-size:12.5px;
  background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.35);
  color:#38bdf8;padding:2px 7px;border-radius:5px;font-weight:700;
  display:inline-block;
  white-space:normal;word-break:normal;overflow-wrap:break-word;
  max-width:100%;vertical-align:middle;line-height:1.25;
}

/* Badges (results-table scoped) */
.badge{font-size:10.5px;padding:2px 8px;border-radius:20px;font-weight:700;letter-spacing:.2px;
  white-space:normal;word-break:normal;overflow-wrap:break-word;display:inline-block;max-width:100%;}
.badge-male  {background:rgba(56,189,248,.12);color:#38bdf8;border:1px solid rgba(56,189,248,.35);}
.badge-female{background:rgba(244,114,182,.12);color:#f472b6;border:1px solid rgba(244,114,182,.35);}
.badge-other {background:var(--c-accent-light);color:var(--c-accent);border:1px solid rgba(79,70,229,.35);}
.badge-success{background:var(--c-success-bg);color:var(--c-success);border:1px solid var(--c-success-border);}
.badge-danger {background:var(--c-danger-bg);color:var(--c-danger);border:1px solid var(--c-danger-border);}
.badge-warning{background:var(--c-warning-bg);color:var(--c-warning);border:1px solid var(--c-warning-border);}
.badge-info   {background:var(--c-info-bg);color:var(--c-info);border:1px solid var(--c-info-border);}
.badge-neutral{background:var(--c-surface);color:var(--c-text-muted);border:1px solid var(--c-border);}
.badge-primary{background:var(--c-accent-light);color:var(--c-accent);border:1px solid rgba(79,70,229,.35);}

/* ── Search results table: plain black text only, no colour ────────────────── */
table#results .col-name,
table#results .col-addr,
table#results .col-email,
table#results .col-dob,
table#results .chip-mobile,
table#results .chip-id,
table#results .na,
table#results .badge{
  color:#000000!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  text-decoration:none!important;
}

/* ── Custom DT toolbar & footer ─────────────────────────────────────────────── */
.dt-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 16px;background:var(--c-surface-2);border-bottom:1px solid var(--c-border);gap:12px;
  flex-wrap:wrap;
}
.dt-toolbar__left,.dt-toolbar__right{display:flex;align-items:center;gap:8px;}
.dt-show-label{font-size:12px;color:var(--c-text-muted);display:flex;align-items:center;gap:6px;font-weight:500;}
.dt-select{
  border:1px solid var(--c-border);border-radius:7px;
  padding:4px 10px;font-size:12px;outline:none;cursor:pointer;
  background:var(--c-surface);color:var(--c-text);font-family:var(--font);
  transition:border-color 150ms;
}
.dt-select:focus{border-color:var(--c-accent);}
.dt-search-box{
  display:flex;align-items:center;gap:7px;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:8px;
  padding:5px 12px;transition:all 150ms;
}
.dt-search-box:focus-within{border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-glow);}
.dt-search-box .bi{font-size:12px;color:var(--c-text-soft);}
.dt-search-box input{
  border:none;outline:none;font-size:12px;font-family:var(--font);
  color:var(--c-text);width:200px;max-width:100%;background:transparent;
}
.dt-search-box input::placeholder{color:#aaaaaa;}

.dt-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 16px;background:var(--c-surface-2);border-top:1px solid var(--c-border);
  flex-wrap:wrap;gap:8px;
}
.dt-info{font-size:11.5px;color:var(--c-text-soft);}
.dt-pagination{display:flex;align-items:center;gap:3px;}
.pg-btn{
  border:1px solid var(--c-border);border-radius:7px;
  background:var(--c-surface);color:var(--c-text-muted);font-size:12px;font-family:var(--font);
  padding:4px 11px;cursor:pointer;transition:all 120ms;font-weight:500;
}
.pg-btn:hover:not([disabled]):not(.pg-active){
  background:var(--c-accent-light);border-color:var(--c-accent);color:var(--c-accent);
}
.pg-btn.pg-active{
  background:var(--c-accent);
  border-color:var(--c-accent);color:#ffffff;font-weight:700;
  box-shadow:var(--shadow-accent);
}
.pg-btn.pg-disabled,.pg-btn[disabled]{
  color:#cccccc;border-color:var(--c-border);cursor:default;background:transparent;
}
.pg-dots{font-size:13px;color:var(--c-text-soft);padding:0 4px;line-height:1;}
.dt-empty{
  text-align:center;padding:40px 20px;color:var(--c-text-soft);
}
.dt-empty .bi{font-size:36px;display:block;margin-bottom:8px;color:#cccccc;}
.dt-empty p{margin:0;font-size:13px;color:#aaaaaa;}

/* native DT controls hidden — replaced by custom toolbar/footer */
div.dataTables_wrapper .dataTables_length,
div.dataTables_wrapper .dataTables_filter,
div.dataTables_wrapper .dataTables_info,
div.dataTables_wrapper .dataTables_paginate{ display:none!important; }
div.dataTables_wrapper::after{content:'';display:table;clear:both;}

/* Sort arrows */
table.results-table thead .sorting::after    {color:rgba(255,255,255,.45);}
table.results-table thead .sorting_asc::after {color:#ffffff;}
table.results-table thead .sorting_desc::after{color:#ffffff;}

.results-summary{
  display:flex;align-items:center;gap:16px;padding:16px 22px;
  border-bottom:1px solid var(--c-border);background:var(--c-surface-2);
  flex-wrap:wrap;
}
.results-summary__item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-text-muted);}
.results-summary__item strong{color:var(--c-text);}

/* ── DataTables overrides ─────────────────────────────────────────────────── */
div.dataTables_wrapper{font-family:var(--font);}
div.dataTables_wrapper .dataTables_filter,
div.dataTables_wrapper .dataTables_length{padding:12px 16px 0;}
div.dataTables_wrapper .dataTables_filter input{
  border:1px solid var(--c-border);border-radius:var(--r-sm);
  padding:6px 10px;font-family:var(--font);font-size:13px;outline:none;
  background:var(--c-surface);color:var(--c-text);
  transition:border-color var(--t);margin-left:6px;
}
div.dataTables_wrapper .dataTables_filter input:focus{border-color:var(--c-accent);}
div.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--c-border);border-radius:var(--r-sm);
  padding:5px 28px 5px 8px;font-family:var(--font);font-size:13px;outline:none;margin:0 5px;
  background:var(--c-surface);color:var(--c-text);
}
div.dataTables_wrapper .dataTables_info{padding:10px 16px;font-size:12px;color:var(--c-text-soft);}
div.dataTables_wrapper .dataTables_paginate{padding:10px 16px;}
div.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:var(--r-sm)!important;border:1px solid var(--c-border)!important;
  margin:0 2px!important;padding:4px 10px!important;font-size:12px!important;
  font-family:var(--font)!important;transition:all var(--t)!important;
  background:var(--c-surface)!important;color:var(--c-text-muted)!important;
}
div.dataTables_wrapper .dataTables_paginate .paginate_button.current,
div.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--c-accent)!important;border-color:var(--c-accent)!important;color:#ffffff!important;
}
div.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--c-accent-light)!important;border-color:var(--c-accent)!important;color:var(--c-accent)!important;
}
div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
  color:#cccccc!important;border-color:var(--c-border)!important;background:transparent!important;
}

/* ── Notices ──────────────────────────────────────────────────────────────── */
.notice{
  display:flex;align-items:flex-start;gap:10px;padding:13px 16px;
  border-radius:var(--r-md);font-size:13px;margin-bottom:18px;border:1px solid transparent;
  animation:scaleIn .2s ease both;
}
.notice-success{background:var(--c-success-bg);border-color:var(--c-success-border);color:var(--c-success);}
.notice-danger {background:var(--c-danger-bg); border-color:var(--c-danger-border); color:var(--c-danger);}
.notice-info   {background:var(--c-info-bg);   border-color:var(--c-info-border);   color:var(--c-info);}
.notice-warning{background:var(--c-warning-bg);border-color:var(--c-warning-border);color:var(--c-warning);}
.notice:not([class*="notice-"]){background:var(--c-success-bg);border-color:var(--c-success-border);color:var(--c-success);}

/* ── Admin inline form ────────────────────────────────────────────────────── */
.inline-form{
  display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;
  padding:16px 20px;background:var(--c-surface-2);border-bottom:1px solid var(--c-border);
}
.inline-form input,.inline-form select{
  padding:8px 12px;border:1px solid var(--c-border);border-radius:var(--r-md);
  font-family:var(--font);font-size:13px;outline:none;
  background:var(--c-surface);transition:border-color var(--t),box-shadow var(--t);color:var(--c-text);
}
.inline-form input:focus,.inline-form select:focus{
  border-color:var(--c-accent);box-shadow:0 0 0 3px var(--c-accent-glow);
}
.action-cell{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;}
/* Grant/Revoke share one button, and "Revoke ..." is always longer than
   "Grant ..." - without a fixed width per button role, that length swap
   shifted every button after it sideways row to row, so the same action
   never lined up in the same spot on two consecutive rows. */
.agents-action-btn{justify-content:center;}
.agents-btn-lpg{min-width:104px;}
.agents-btn-panindia{min-width:148px;}
/* #accounts-table overrides table.results-table's forced width:100% -
   sizing to actual column content instead of always stretching to the full
   card width keeps it compact rather than artificially wide. */
#accounts-table{width:auto!important;}
.expiry-form{display:flex;gap:6px;align-items:center;}
.expiry-form input[type="datetime-local"],
.expiry-form input[type="date"],
.expiry-form input[type="time"]{
  padding:5px 10px;border:1px solid var(--c-border);border-radius:var(--r-sm);
  font-size:12px;font-family:var(--font);outline:none;background:var(--c-surface);color:var(--c-text);
  transition:border-color var(--t);
}
.expiry-form input[type="date"]{min-width:118px;}
.expiry-form input[type="time"]{min-width:90px;}
.expiry-form input[type="datetime-local"]:focus,
.expiry-form input[type="date"]:focus,
.expiry-form input[type="time"]:focus{border-color:var(--c-accent);}
table.agents-table td{vertical-align:middle;padding:12px 14px;}
table.agents-table thead th{white-space:nowrap;}

/* ── Login page ──────────────────────────────────────────────────────────── */
body.login-page{
  min-height:100vh;
  background:linear-gradient(160deg,#eeeef6 0%,#ffffff 100%);
  position:relative;overflow:hidden;
}
.login-split{
  min-height:100vh;width:100%;
  display:flex;align-items:stretch;
  position:relative;z-index:1;
}

/* Left panel: brand gradient + running-man animation */
.login-visual{
  flex:1 1 50%;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:28px;padding:40px;color:#fff;
  background:linear-gradient(145deg,var(--c-accent) 0%,#211d5c 100%);
}
.login-visual::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.10) 0%,transparent 45%),
    radial-gradient(circle at 85% 85%,rgba(255,255,255,.08) 0%,transparent 50%);
  pointer-events:none;
}
.gauge{
  position:relative;width:min(280px,42vw);height:auto;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.18));
}
.gauge__track{fill:none;stroke:rgba(255,255,255,.18);stroke-width:10;stroke-linecap:round;}
.gauge__value{
  fill:none;stroke:url(#gaugeGrad);stroke-width:10;stroke-linecap:round;
  stroke-dasharray:386.4;stroke-dashoffset:386.4;
  animation:gaugeFill 2.4s cubic-bezier(.45,0,.55,1) infinite;
}
.gauge__tick{stroke:rgba(255,255,255,.55);}
.gauge__tick--major{stroke:rgba(255,255,255,.9);stroke-width:2.5;}
.gauge__tick--minor{stroke-width:1.5;}
.gauge__needle line{stroke:#fff;stroke-width:4;stroke-linecap:round;}
.gauge__needle circle{fill:#fff;}
.login-visual__brand{position:relative;text-align:center;}
.login-visual__brand h2{margin:0 0 6px;font-size:26px;font-weight:800;letter-spacing:-.3px;}
.login-visual__brand p{margin:0;font-size:14px;color:rgba(255,255,255,.75);}

@keyframes gaugeFill{
  0%{stroke-dashoffset:386.4;}
  70%{stroke-dashoffset:40;}
  100%{stroke-dashoffset:386.4;}
}

/* Right panel: the sign-in form */
.login-form-side{
  flex:1 1 50%;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.login-form-side::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 80% 80%,rgba(79,70,229,.08) 0%,transparent 50%);
  pointer-events:none;
}
.login-wrap{position:relative;z-index:1;width:100%;max-width:420px;padding:16px;}
.login-box{
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  border:1px solid var(--c-border);
  border-radius:var(--r-xl);padding:44px 40px;
  box-shadow:0 32px 64px rgba(0,0,0,.12),0 0 0 1px rgba(79,70,229,.06);
  animation:fadeUp .5s ease both;
}
.login-logo{text-align:center;margin-bottom:32px;}
.login-logo__icon{
  width:100px;height:100px;object-fit:contain;
  display:inline-block;margin-bottom:14px;
}
.login-logo__title{font-size:24px;font-weight:800;color:var(--c-text);margin:0 0 5px;letter-spacing:-.3px;}
.login-logo__sub{margin:0;color:var(--c-text-muted);font-size:13px;}
.login-box .form-group{margin-bottom:16px;}
.login-box .form-label{
  display:block;font-size:12px;font-weight:600;color:var(--c-text-muted);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px;
}
.login-box .form-control{width:100%;}
.login-box .btn-primary{width:100%;padding:13px;font-size:15px;margin-top:6px;border-radius:var(--r-md);}
.login-error{
  display:flex;align-items:center;gap:8px;
  background:var(--c-danger-bg);border:1px solid var(--c-danger-border);
  color:var(--c-danger);border-radius:var(--r-md);padding:10px 14px;font-size:13px;margin-bottom:20px;
}
.login-notice{
  display:flex;align-items:center;gap:8px;
  background:var(--c-success-bg);border:1px solid var(--c-success-border);
  color:var(--c-success);border-radius:var(--r-md);padding:10px 14px;font-size:13px;margin-bottom:20px;
}

/* ── Import page ─────────────────────────────────────────────────────────── */
.import-zone{
  border:2px dashed var(--c-border);border-radius:var(--r-lg);
  padding:40px 32px;text-align:center;background:var(--c-surface-2);
  transition:border-color var(--t),background var(--t);cursor:pointer;
}
.import-zone:hover{border-color:var(--c-accent);background:var(--c-accent-light);}
.import-zone .bi{font-size:44px;color:var(--c-text-soft);margin-bottom:12px;display:block;}
.import-zone p{margin:0;color:var(--c-text-muted);font-size:13px;}

/* ── Import progress bar ─────────────────────────────────────────────────── */
.progress-wrap{margin-top:16px;}
.progress-track{
  width:100%;height:10px;border-radius:999px;overflow:hidden;
  background:var(--c-surface-2);border:1px solid var(--c-border);
}
.progress-fill{
  height:100%;background:var(--c-accent);border-radius:999px;
  transition:width .25s ease;width:0%;
}
.progress-meta{
  display:flex;justify-content:space-between;gap:12px;margin-top:6px;
  font-size:12px;color:var(--c-text-muted);
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.mt-4{margin-top:20px;} .mb-4{margin-bottom:20px;}
.text-muted{color:var(--c-text-muted);} .text-sm{font-size:12px;}
ul.skipped-list{margin:8px 0;padding-left:20px;font-size:13px;color:var(--c-text-muted);}
ul.skipped-list li{margin-bottom:3px;}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media(max-width:768px){
  .sidebar{
    z-index:300;
    transform:translateX(-100%);transition:transform 200ms ease;
  }
  /* Opening the sidebar on mobile used to leave it floating as a shadowed
     overlay on top of .app-main (still at margin-left:0 underneath it) -
     the 30px shadow blur read as a visible gap/disconnect between the two
     rather than one attached panel. Pushing .app-main over by the sidebar's
     own width when open instead makes it match the desktop layout: sidebar
     and content sit flush against each other, just like a normal
     (non-mobile) page. */
  .sidebar.sidebar--open{transform:translateX(0);}
  .app-main{margin-left:0;transition:margin-left 200ms ease;}
  .sidebar.sidebar--open + .app-main{margin-left:212px;}
  .confetti-container{left:0;}
  .app-topbar__menu-btn{display:inline-flex;align-items:center;}
  .app-topbar{padding:14px 16px 0;}
  .container{padding:16px 14px 40px;}
  .hero{padding:22px 20px;} .hero__stats{display:none;}
  .login-visual{display:none;}
  .login-box{padding:32px 24px;}
  .page-title-main{font-size:21px;}
  .page-title{font-size:18px;}
  .sp-topbar{padding:12px 14px 8px;}
  .sp-row{padding:9px 14px;}
  .sp-row--form{padding:12px 14px 14px;}
  .results-bar{padding:12px 14px;}
  .dt-toolbar,.dt-footer{padding:9px 14px;}
}
@media(max-width:480px){
  .card-body{padding:14px;}
  .inline-form{padding:12px 14px;}
  .sp-btn{padding:10px 16px;font-size:12.5px;}
  .sp-pill{padding:5px 10px;font-size:11.5px;}
  .dt-search-box input{width:120px;}
  .sp-stats{gap:4px;}
  .sp-stat{min-width:56px;padding:4px 8px;}
}

/* PAN India search - restyled (2026-08-11) to match the other tool pages'
   white-card/indigo-pill-tab look (rc_print.php/hp_gas.php/advanced_search.php's
   .as-card/.as-tabs/.as-btn) instead of this page's older underlined-tab,
   theme-variable-driven design, which read as visually inconsistent with
   the rest of the app. Fixed hex/rgba values used directly here (not the
   --c-* custom properties) for the same reason lpg_search.php's .lpg-table
   does: this page's own JS already hardcodes that same palette for its
   result-column highlighting (classifyColumn() in the inline <script>
   below), so the chrome now matches its own results table too. */
/* .pan-page previously had max-width:1120px;margin:0 auto - removed
   (2026-08-11): on wide screens that centered it with an empty gap between
   the sidebar and this page's content, while every other tool page
   (rc_print.php/hp_gas.php/advanced_search.php/etc.) just fills .container
   flush-left with no such wrapper. */
.pan-status{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:8px 12px;border:1px solid #e0e0e0;border-radius:999px;background:#fff;font-size:12px;color:#777;}
.pan-connect{display:flex;align-items:center;gap:9px;}
.pan-connect:not(:empty){margin-bottom:14px;}
.pan-login-link{padding:8px 12px;border-radius:999px;background:#4f46e5;color:#fff;text-decoration:none;font-size:12px;font-weight:600;}
.pan-search-card,.pan-results{background:var(--c-surface,#fff);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);overflow:hidden;border:none;}
.pan-tabs{display:flex;gap:10px;flex-wrap:wrap;padding:18px 20px 0;border-bottom:none;background:transparent;}
.pan-tab{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
  border:1px solid #e2e2ea;background:#fff;color:#555;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:all 150ms;white-space:nowrap;}
.pan-tab i{font-size:14px;}
.pan-tab:hover{border-color:#4f46e5;color:#4f46e5;}
.pan-tab.active{background:#4f46e5;border-color:#4f46e5;color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.35);}
.pan-search-row{display:flex;gap:10px;padding:18px 20px 20px;flex-wrap:wrap;}
/* Search/Clear on their own row below the input - flex-basis:100% on this
   flex-wrap:wrap row is what forces it to the next line regardless of how
   much space is left, same trick as ecommerce.php's .sp-actions. */
.pan-actions{display:flex;gap:10px;flex-basis:100%;}
.pan-input-wrap{position:relative;display:flex;align-items:center;flex:1;min-width:220px;}
.pan-input-wrap input{width:100%;padding:11px 16px;border:1px solid #e0e0e0;border-radius:9px;background:#fff;color:#333;font:inherit;font-size:13px;outline:none;}
.pan-input-wrap input:focus{border-color:#4f46e5;box-shadow:0 0 0 3px rgba(79,70,229,.15);}
.pan-search-btn,.pan-clear-btn{padding:11px 26px;border-radius:9px;font:inherit;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;cursor:pointer;transition:all 150ms;}
.pan-search-btn{border:none;background:#4f46e5;color:#fff;box-shadow:0 4px 18px rgba(79,70,229,.3);}
.pan-search-btn:hover:not(:disabled){background:#4338ca;transform:translateY(-1px);box-shadow:0 6px 20px rgba(79,70,229,.45);}
.pan-search-btn:disabled{opacity:.65;cursor:wait;transform:none;}
.pan-clear-btn{border:1px solid #e0e0e0;background:#fff;color:#333;box-shadow:none;}
.pan-clear-btn:hover{background:#eeeef6;border-color:#4f46e5;transform:none;}
.pan-alert{margin-top:16px;padding:12px 15px;border:1px solid rgba(239,68,68,.35);border-radius:9px;background:rgba(239,68,68,.08);color:#ef4444;font-size:13px;}
.pan-results{margin-top:22px;}
.pan-results-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--c-border);}
.pan-results-heading h2{margin:3px 0 0;font-size:18px;}
.pan-results-heading-right{display:flex;align-items:center;gap:14px;}
.pan-results-heading-right>span{color:var(--c-text-muted);font-size:12px;}
.pan-pdf-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:1px solid var(--c-danger-border);border-radius:var(--r-md);background:var(--c-surface);color:var(--c-danger);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
.pan-pdf-btn:hover{border-color:var(--c-danger);background:var(--c-danger-bg);color:var(--c-danger);}
#pan-result-list{padding:18px;}
table.results-table.pan-results-table{table-layout:fixed;}
/* Overrides table.results-table tbody td's nowrap/ellipsis (needs to match
   its specificity - a plain .pan-results-table td rule loses to that more
   specific selector and the ellipsis silently wins, which is exactly what
   was truncating every column here, not just the long ones). */
table.results-table.pan-results-table thead th{
  padding:4px 6px;font-size:9px;letter-spacing:.1px;line-height:1.25;
  /* Headers only wrap at a space, never mid-word (keep-all + normal) - a
     narrow column should show "PHONE" / "NUMBER" on two lines, not
     "PHON" / "E" / "NUMB" / "ER". */
  white-space:normal;word-break:keep-all;overflow-wrap:normal;overflow:visible;
}
table.results-table.pan-results-table tbody td{
  padding:4px 6px;font-size:10.5px;line-height:1.3;
  /* Data can be one long unbroken token (e.g. a comma-run address with no
     spaces at the wrap point) so this side still needs to force-break
     rather than overflow the column. */
  white-space:normal;word-break:break-word;overflow-wrap:anywhere;
  overflow:visible;text-overflow:clip;
}
.pan-result-state{display:flex;align-items:center;justify-content:center;gap:10px;min-height:100px;color:var(--c-text-muted);font-size:13px;}
.pan-spinner{width:18px;height:18px;border:2px solid var(--c-border);border-top-color:var(--c-accent);border-radius:50%;animation:pan-spin .7s linear infinite;}
.pan-spinner.small{display:inline-block;width:13px;height:13px;vertical-align:-2px;border-color:rgba(255,255,255,.35);border-top-color:#fff;}
@keyframes pan-spin{to{transform:rotate(360deg);}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

@media(max-width:700px){
  .pan-tabs{overflow-x:auto;}
  .pan-tab{white-space:nowrap;padding:10px 12px;}
  .pan-search-row{flex-wrap:wrap;padding:16px;}
  .pan-input-wrap{flex-basis:100%;}
  .pan-search-btn,.pan-clear-btn{flex:1;}
}

/* =============================================================================
   TraceKart theme (AWS copy, 2026-10-09) - matched to tracekart.in's own
   site.css: deep indigo/violet gradient sidebar with white text, light
   #f5f6fd page background, white cards with soft #e3e6f3 borders, indigo->
   violet gradient primary buttons, solid indigo table headers. Kept as one
   block at the end so it can be removed in one go to get the old look back.
   ============================================================================= */
:root, html[data-theme], html[data-theme="light"] {
  --c-accent:       #4f46e5;
  --c-accent-hover: #4338ca;
  --c-accent-light: #eef2ff;
  --c-accent-glow:  rgba(79,70,229,.25);
  --c-bg:           #f5f6fd;
  --c-surface:      #ffffff;
  --c-surface-2:    #f8fafc;
  --c-border:       #e3e6f3;
  --c-sidebar-bg:   #1e1b4b;
  --c-text:         #0f172a;
  --c-text-muted:   #64748b;
  --c-text-soft:    #94a3b8;
  --r-md:10px; --r-lg:14px; --r-xl:16px;
  --shadow-xs: 0 1px 2px rgb(15 23 42 / .04);
  --shadow-sm: 0 1px 3px rgb(15 23 42 / .06), 0 1px 2px -1px rgb(15 23 42 / .06);
  --shadow-md: 0 6px 12px -4px rgb(15 23 42 / .08), 0 2px 4px -2px rgb(15 23 42 / .06);
  --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / .10), 0 4px 6px -4px rgb(15 23 42 / .08);
  --shadow-accent: 0 6px 16px -6px rgba(79,70,229,.65);
  --tk-grad-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --tk-grad-sidebar: linear-gradient(180deg, #1e1b4b 0%, #2e1065 100%);
  --tk-sb-text: rgba(226,232,240,.86);
  --tk-sb-muted: rgba(196,181,253,.70);
  --tk-sb-hover: rgba(255,255,255,.08);
}

/* Sidebar */
.sidebar{background:var(--tk-grad-sidebar);border-right:none;box-shadow:4px 0 24px rgba(30,27,75,.18);}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);}
.sidebar__top{padding:4px 4px 14px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);}
.sidebar__brand{color:#ffffff;}
.sidebar__brand-icon{border-radius:10px;}
.sidebar__hamburger{color:var(--tk-sb-muted);}
.sidebar__hamburger:hover{background:var(--tk-sb-hover);color:#ffffff;}
.sidebar__section-label{color:var(--tk-sb-muted);font-size:10.5px;letter-spacing:.08em;}
.sidebar__group{gap:2px;}
.sidebar__item{color:var(--tk-sb-text);border-left:none;border-radius:10px;padding:8px 10px;position:relative;}
.sidebar__item:hover{background:var(--tk-sb-hover);color:#ffffff;}
.sidebar__item.active{background:linear-gradient(90deg, rgba(139,92,246,.38), rgba(99,102,241,.12));color:#ffffff;
  border-left:none;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.18);}
.sidebar__item.active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:#c4b5fd;}
.sidebar__avatar{border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.22);}
.sidebar__icon{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.08);}
.sidebar__item.active .sidebar__icon{color:#ffffff;}
.sidebar__footer{border-top:1px solid rgba(255,255,255,.1);}
.sidebar__footer-avatar{background:var(--tk-grad-brand);border:none;}
.sidebar__footer-name{color:#ffffff;}
.sidebar__footer-email{color:var(--tk-sb-muted);}
.sidebar__footer-logout{color:var(--tk-sb-muted);}
.sidebar__footer-logout:hover{color:#fca5a5;}

/* Top bar */
.app-topbar{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-border);padding:10px 24px;position:sticky;top:0;z-index:150;}
.app-topbar__expiry{background:#fffbeb;color:#b45309;border:1px solid #fde68a;border-radius:2rem;padding:4px 12px;font-size:12px;}
.app-topbar__logout{background:rgba(239,68,68,.08);color:#dc2626;border:1px solid transparent;border-radius:2rem;padding:6px 14px;}
.app-topbar__logout:hover{background:#dc2626;color:#ffffff;border-color:#dc2626;}

/* Titles */
.page-title,.page-title-main{color:var(--c-accent);font-weight:700;letter-spacing:.3px;}
.page-title .bi{color:var(--c-accent);}

/* Cards / panels */
.card,.sp-wrap{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);}
.card:hover{box-shadow:var(--shadow-md);}
.card-header{background:#f8fafc;border-bottom:1px solid var(--c-border);}
.card-title{color:var(--c-text);}

/* Buttons */
.btn{border-radius:10px;}
.btn-primary{background:var(--tk-grad-brand);border:none;color:#ffffff;box-shadow:var(--shadow-accent);}
.btn-primary:hover{background:var(--tk-grad-brand);filter:brightness(1.08);box-shadow:0 10px 22px -8px rgba(79,70,229,.75);color:#ffffff;}

/* Inputs */
.form-control,.app-main input[type="text"],.app-main input[type="search"],.app-main input[type="email"],
.app-main input[type="tel"],.app-main input[type="number"],.app-main input[type="password"],.app-main select,.app-main textarea{
  border-color:#cbd5e1;}
.form-control:focus,.app-main input:focus,.app-main select:focus,.app-main textarea:focus{
  border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(79,70,229,.10);outline:none;}

/* Tables - solid indigo header with white uppercase labels on every page.
   Per-column coloured headers (e.g. Night Out's nth-child colours) are more
   specific and keep their own colours. */
table.results-table thead tr{background:var(--c-accent);}
table.results-table tbody tr:nth-child(even){background:#f8fafc;}
.app-main table thead th{background:var(--c-accent);color:#ffffff;border-color:rgba(255,255,255,.18);}
.app-main table tbody tr:hover td{background-color:#eef2ff;}

/* Badges */
.badge-primary{background:#e0e7ff;color:#4338ca;}