/* =============================================================================
   DK Search — Premium Design System v2 (Green Theme)
   ============================================================================= */

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

/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --c-accent:       #2e9e3f;
  --c-accent-hover: #257e32;
  --c-accent-light: #e5f5e8;
  --c-accent-glow:  rgba(46,158,63,.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(46,158,63,.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(46,158,63,.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"] body.login-page::before{
  background-image:
    radial-gradient(circle at 20% 20%,rgba(0,0,0,.02) 0%,transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(46,158,63,.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;
  background:var(--c-accent-light);
  border:1px solid var(--c-border);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  color:var(--c-accent);
}
.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__item--dark{color:#1f2937;font-weight:700;}
/* Advanced Search / All Gas keep their dark bold label even while they're
   the current page (per explicit instruction) - the light-green active
   background and left border still mark which page is open. */
.sidebar__item--pinned-dark,
.sidebar__item--pinned-dark.active{color:#1f2937;font-weight:700;}
.sidebar__item--pinned-green,
.sidebar__item--pinned-green.active{color:#1f7a2e;font-weight:700;}
.sidebar__item--dark:hover{background:var(--c-surface-2);color:#1f2937;}
.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--sub_admin{background:var(--c-accent);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(46,158,63,.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(46,158,63,.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(46,158,63,.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(46,158,63,.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(46,158,63,.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(46,158,63,.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(46,158,63,.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(46,158,63,.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(46,158,63,.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;}
/* Agent list headings: smaller, and long names wrap onto two lines so the
   columns stay narrow (2026-10-05, per explicit instruction). */
table.agents-table thead th{white-space:normal;font-size:9.5px;letter-spacing:.2px;line-height:1.25;
  padding:7px 8px;min-width:64px;max-width:96px;vertical-align:middle;}

/* ── Login page ──────────────────────────────────────────────────────────── */
body.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#eeeef6 0%,#ffffff 100%);
  position:relative;overflow:hidden;
}
body.login-page::before{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(0,0,0,.02) 0%,transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(46,158,63,.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(46,158,63,.06);
  animation:fadeUp .5s ease both;
}
.login-logo{text-align:center;margin-bottom:32px;}
.login-logo__icon{
  width:100px;height:100px;
  background:linear-gradient(135deg,var(--c-accent-hover),var(--c-accent));
  border-radius:18px;display:inline-flex;align-items:center;justify-content:center;
  font-size:43px;color:#ffffff;margin-bottom:14px;
  box-shadow:0 10px 28px rgba(46,158,63,.4);
}
.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-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:#2e9e3f;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:#2e9e3f;color:#2e9e3f;}
.pan-tab.active{background:#2e9e3f;border-color:#2e9e3f;color:#fff;box-shadow:0 4px 14px rgba(46,158,63,.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:#2e9e3f;box-shadow:0 0 0 3px rgba(46,158,63,.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:#2e9e3f;color:#fff;box-shadow:0 4px 18px rgba(46,158,63,.3);}
.pan-search-btn:hover:not(:disabled){background:#257e32;transform:translateY(-1px);box-shadow:0 6px 20px rgba(46,158,63,.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:#2e9e3f;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-not-found{background:var(--c-surface,#fff);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);padding:16px;color:#f87171;font-weight:600;}
.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;}
}