/* ============================================================
   Domain Sales Manager — App Stylesheet
   Matches CRM look and feel: Nexus palette, Satoshi/General Sans,
   collapsible sidebar, sticky topbar, light + dark mode
   ============================================================ */

:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, .7rem + .25vw, .875rem);
  --text-sm: clamp(.875rem, .8rem + .35vw, 1rem);
  --text-base: clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + .75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;
  --color-bg:#f7f6f2;--color-surface:#f9f8f5;--color-surface-2:#fbfbf9;
  --color-surface-offset:#f3f0ec;--color-surface-dynamic:#e6e4df;
  --color-divider:#dcd9d5;--color-border:#d4d1ca;
  --color-text:#28251d;--color-text-muted:#7a7974;--color-text-faint:#bab9b4;
  --color-text-inverse:#f9f8f4;
  --color-primary:#01696f;--color-primary-hover:#0c4e54;--color-primary-highlight:#cedcd8;
  --color-success:#437a22;--color-warning:#964219;--color-error:#a12c7b;
  --color-blue:#006494;--color-purple:#7a39bb;--color-red:#a12c7b;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;
  --radius-xl:1rem;--radius-full:9999px;
  --shadow-sm:0 1px 2px oklch(0.2 0.01 80/.06);
  --shadow-md:0 4px 12px oklch(0.2 0.01 80/.08);
  --shadow-lg:0 12px 32px oklch(0.2 0.01 80/.12);
  --tf:180ms cubic-bezier(.16,1,.3,1);
  --font-d:'General Sans','Inter',sans-serif;
  --font-b:'Satoshi','Inter',sans-serif;
  --sb-w:280px;--sb-c:84px;
}
[data-theme="dark"] {
  --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
  --color-surface-offset:#1d1c1a;--color-surface-dynamic:#2d2c2a;
  --color-divider:#262523;--color-border:#393836;
  --color-text:#cdccca;--color-text-muted:#979591;--color-text-faint:#5a5957;
  --color-text-inverse:#2b2a28;
  --color-primary:#4f98a3;--color-primary-hover:#227f8b;--color-primary-highlight:#313b3b;
  --color-success:#6daa45;--color-warning:#bb653b;--color-error:#d163a7;
  --color-blue:#5591c7;--color-purple:#a86fdf;--color-red:#d163a7;
  --shadow-sm:0 1px 2px oklch(0 0 0/.2);
  --shadow-md:0 4px 12px oklch(0 0 0/.3);
  --shadow-lg:0 12px 32px oklch(0 0 0/.4);
}
@media(prefers-color-scheme:dark){:root:not([data-theme]){
  --color-bg:#171614;--color-surface:#1c1b19;--color-surface-2:#201f1d;
  --color-surface-offset:#1d1c1a;--color-surface-dynamic:#2d2c2a;
  --color-divider:#262523;--color-border:#393836;
  --color-text:#cdccca;--color-text-muted:#979591;--color-text-faint:#5a5957;
  --color-text-inverse:#2b2a28;--color-primary:#4f98a3;--color-primary-hover:#227f8b;
  --color-primary-highlight:#313b3b;--color-success:#6daa45;--color-warning:#bb653b;
  --color-blue:#5591c7;--color-purple:#a86fdf;
}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font-b);font-size:var(--text-base);background:var(--color-bg);color:var(--color-text);line-height:1.5}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
table{width:100%;border-collapse:collapse}
.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}

/* ── App shell ── */
.app{display:grid;grid-template-columns:var(--sb-w) 1fr;min-height:100dvh;transition:grid-template-columns var(--tf)}
.app.collapsed{grid-template-columns:var(--sb-c) 1fr}

/* ── Sidebar ── */
.sidebar{background:var(--color-surface);border-right:1px solid var(--color-border);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-5);position:sticky;top:0;height:100dvh;overflow-y:auto;overflow-x:hidden;transition:width var(--tf)}
.brand{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2)}
.brand-mark{width:42px;height:42px;flex-shrink:0;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-primary),var(--color-blue));display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-md)}
.brand-text h1{font-family:var(--font-d);font-size:var(--text-sm);font-weight:700;white-space:nowrap}
.brand-text p{font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap}
.sb-toggle{margin-left:auto;width:40px;height:40px;flex-shrink:0;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--color-surface-2);border:1px solid var(--color-border);transition:background var(--tf)}
.sb-toggle:hover{background:var(--color-primary-highlight);color:var(--color-primary)}
.nav-grp{display:grid;gap:2px}
.nav-lbl{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);padding:var(--space-3) var(--space-2) var(--space-1);white-space:nowrap;overflow:hidden}
.nav-link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-lg);color:var(--color-text-muted);min-height:48px;white-space:nowrap;overflow:hidden;transition:background var(--tf),color var(--tf)}
.nav-link i{flex-shrink:0;width:20px;height:20px}
.nav-link:hover,.nav-link.active{background:var(--color-primary-highlight);color:var(--color-primary)}
.sb-footer{margin-top:auto;display:grid;gap:var(--space-3)}
.sb-notice{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);background:color-mix(in oklab,var(--color-primary) 8%,var(--color-surface));border:1px solid color-mix(in oklab,var(--color-primary) 18%,var(--color-border))}
.sb-notice.sb-warn{background:color-mix(in oklab,var(--color-warning) 8%,var(--color-surface));border-color:color-mix(in oklab,var(--color-warning) 20%,var(--color-border))}
.sb-notice strong{font-size:var(--text-sm)}
.sb-notice p{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}

/* Collapsed state */
.app.collapsed .brand-text,
.app.collapsed .nav-lbl,
.app.collapsed .nav-link span,
.app.collapsed .sb-footer .sb-notice,
.app.collapsed .sb-footer .theme-label{display:none}
.app.collapsed .nav-link{justify-content:center}
.app.collapsed .sb-toggle svg{transform:rotate(180deg)}

/* ── Main ── */
.main{display:grid;grid-template-rows:auto 1fr;min-width:0}
.topbar{position:sticky;top:0;z-index:10;background:color-mix(in oklab,var(--color-bg) 84%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--color-divider);padding:var(--space-4) var(--space-6);display:flex;align-items:center;gap:var(--space-4);justify-content:space-between}
.topbar-left h2{font-family:var(--font-d);font-size:var(--text-xl);font-weight:700;line-height:1.1}
.topbar-left p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.content{padding:var(--space-6);display:grid;gap:var(--space-6)}

/* ── Buttons ── */
.btn,.icon-btn,.pill-btn{min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface);display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);box-shadow:var(--shadow-sm);transition:background var(--tf),color var(--tf),border-color var(--tf)}
.btn:hover,.icon-btn:hover,.pill-btn:hover{background:var(--color-surface-offset)}
.btn.primary,.pill-btn.primary{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
.btn.primary:hover,.pill-btn.primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn.danger{background:color-mix(in oklab,var(--color-error) 8%,var(--color-surface));color:var(--color-error);border-color:color-mix(in oklab,var(--color-error) 25%,var(--color-border))}
.btn.danger:hover{background:color-mix(in oklab,var(--color-error) 16%,var(--color-surface))}
.icon-btn.sm{min-height:36px;min-width:36px;padding:0 var(--space-2)}

/* ── Cards ── */
.card{background:var(--color-surface);border:1px solid color-mix(in oklab,var(--color-text) 12%,transparent);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}
.panel{padding:var(--space-5);display:grid;gap:var(--space-5)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}
.panel-head h3{font-size:var(--text-lg);font-weight:700;line-height:1.15}
.panel-head p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:3px}

/* ── KPIs ── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.kpi-card{padding:var(--space-5);display:grid;gap:var(--space-3)}
.kpi-head{display:flex;justify-content:space-between;align-items:center;color:var(--color-text-muted);font-size:var(--text-sm)}
.kpi-head i{width:20px;height:20px}
.kpi-val{font-family:var(--font-d);font-size:var(--text-xl);font-weight:700;line-height:1;font-variant-numeric:tabular-nums lining-nums}
.kpi-foot{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ── Table ── */
.tbl-wrap{overflow-x:auto}
th,td{text-align:left;padding:var(--space-3) var(--space-4);font-size:var(--text-sm);vertical-align:middle}
thead th{color:var(--color-text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--color-divider);white-space:nowrap;background:var(--color-surface)}
tbody tr{border-bottom:1px solid var(--color-divider);transition:background var(--tf)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:color-mix(in oklab,var(--color-primary-highlight) 40%,var(--color-surface))}
.d-cell{display:grid;gap:2px}
.d-cell strong{font-size:var(--text-sm)}
.d-cell span{font-size:var(--text-xs);color:var(--color-text-muted)}
.price{font-variant-numeric:tabular-nums lining-nums;font-weight:700}
.warn-cell{color:var(--color-warning);font-weight:700}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:.3rem .7rem;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;white-space:nowrap}
.b-green {background:color-mix(in oklab,var(--color-success) 14%,var(--color-surface));color:var(--color-success)}
.b-amber {background:color-mix(in oklab,var(--color-warning) 14%,var(--color-surface));color:var(--color-warning)}
.b-blue  {background:color-mix(in oklab,var(--color-blue)    14%,var(--color-surface));color:var(--color-blue)}
.b-teal  {background:color-mix(in oklab,var(--color-primary) 12%,var(--color-surface));color:var(--color-primary)}
.b-red   {background:color-mix(in oklab,var(--color-red)     14%,var(--color-surface));color:var(--color-red)}
.b-purple{background:color-mix(in oklab,var(--color-purple)  14%,var(--color-surface));color:var(--color-purple)}
.b-grey  {background:var(--color-surface-offset);color:var(--color-text-muted)}

/* ── Filters row ── */
.filters{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--space-3);align-items:end}
.field{display:grid;gap:var(--space-1)}
.field label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}
.ctrl{min-height:46px;border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface-2);padding:0 var(--space-3);width:100%;transition:border-color var(--tf)}
.ctrl:focus{border-color:var(--color-primary);outline:none}
textarea.ctrl{min-height:100px;padding:var(--space-3);resize:vertical;line-height:1.5}

/* ── Forms ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.form-grid .full{grid-column:1/-1}
.form-section{padding:var(--space-5);display:grid;gap:var(--space-4)}
.form-section h3{font-size:var(--text-lg);font-weight:700;padding-bottom:var(--space-3);border-bottom:1px solid var(--color-divider)}
.form-actions{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-5);border-top:1px solid var(--color-divider);background:var(--color-surface-offset);border-radius:0 0 var(--radius-xl) var(--radius-xl)}

/* ── Flash messages ── */
.flash{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);margin:var(--space-4) var(--space-6) 0;font-size:var(--text-sm)}
.flash i{width:20px;height:20px;flex-shrink:0}
.flash-success{background:color-mix(in oklab,var(--color-success) 10%,var(--color-surface));color:var(--color-success);border:1px solid color-mix(in oklab,var(--color-success) 20%,var(--color-border))}
.flash-error  {background:color-mix(in oklab,var(--color-error)   10%,var(--color-surface));color:var(--color-error);border:1px solid color-mix(in oklab,var(--color-error)   20%,var(--color-border))}

/* ── Mini list ── */
.mini-list{display:grid;gap:var(--space-3)}
.mini-item{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-lg);background:var(--color-surface-2);border:1px solid var(--color-divider)}
.mini-item h4{font-size:var(--text-sm);font-weight:600}
.mini-item p{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}

/* ── Progress ── */
.prog-wrap{display:grid;gap:var(--space-2)}
.prog-label{display:flex;justify-content:space-between;font-size:var(--text-sm)}
.prog-bar{height:10px;border-radius:999px;background:var(--color-surface-dynamic);overflow:hidden}
.prog-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--color-primary),var(--color-blue));transition:width .6s ease}

/* ── Timeline ── */
.timeline{display:grid;gap:var(--space-4)}
.tl-item{display:grid;grid-template-columns:12px 1fr;gap:var(--space-3);align-items:flex-start}
.tl-dot{width:12px;height:12px;border-radius:999px;background:var(--color-primary);margin-top:4px;flex-shrink:0;box-shadow:0 0 0 6px color-mix(in oklab,var(--color-primary) 14%,transparent)}
.tl-item h4{font-size:var(--text-sm);font-weight:600}
.tl-item p{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}

/* ── Pagination ── */
.pagination{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}
.page-btn{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--color-border);font-size:var(--text-sm);background:var(--color-surface);transition:background var(--tf)}
.page-btn:hover{background:var(--color-primary-highlight);color:var(--color-primary)}
.page-btn.active{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}

/* ── WHOIS detail box ── */
.whois-box{background:var(--color-surface-offset);border-radius:var(--radius-lg);padding:var(--space-4);font-size:var(--text-sm);display:grid;gap:var(--space-3)}
.whois-row{display:grid;grid-template-columns:160px 1fr;gap:var(--space-3);border-bottom:1px solid var(--color-divider);padding-bottom:var(--space-3)}
.whois-row:last-child{border-bottom:none;padding-bottom:0}
.whois-row dt{color:var(--color-text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;padding-top:2px}
.whois-row dd{font-weight:500}
.raw-whois{background:var(--color-surface-2);border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:var(--space-4);font-family:monospace;font-size:var(--text-xs);white-space:pre-wrap;max-height:320px;overflow-y:auto;color:var(--color-text-muted);line-height:1.6}

/* ── Empty state ── */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-16) var(--space-8);color:var(--color-text-muted)}
.empty-state i{width:48px;height:48px;color:var(--color-text-faint);margin-bottom:var(--space-4)}
.empty-state h3{color:var(--color-text);font-size:var(--text-lg);margin-bottom:var(--space-2)}
.empty-state p{max-width:36ch;margin-bottom:var(--space-6);font-size:var(--text-sm)}

/* ── Responsive ── */
@media(max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .filters{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:min(88vw,320px);transform:translateX(-105%);transition:transform var(--tf);z-index:30}
  .sidebar.open{transform:translateX(0)}
  .mob-menu{display:inline-flex}
  .topbar{padding:var(--space-3) var(--space-4)}
  .topbar-left h2{font-size:var(--text-lg)}
  .content{padding:var(--space-4)}
  .kpi-grid,.filters,.form-grid{grid-template-columns:1fr}
}

/* ── User menu (sidebar footer) ── */
.user-menu{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-lg);background:var(--color-surface-2);border:1px solid var(--color-divider)}
.user-avatar{width:36px;height:36px;flex-shrink:0;border-radius:var(--radius-full);background:linear-gradient(135deg,var(--color-primary),var(--color-blue));display:grid;place-items:center;color:#fff;font-family:var(--font-d);font-weight:700;font-size:var(--text-sm)}
.user-info{flex:1;min-width:0;overflow:hidden}
.user-info strong{display:block;font-size:var(--text-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-info span{display:block;font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-actions{display:flex;gap:var(--space-1);flex-shrink:0}
.app.collapsed .user-info,.app.collapsed .user-actions{display:none}
.app.collapsed .user-menu{justify-content:center;padding:var(--space-2)}