/* Karaxel - Obsidian Intelligence design system.
   Shared across every real page in web/. Ported from the approved mockups (Milestone 8 design
   round) - both variable naming schemes the mockups used (the newer canvas/surf/primary set, and
   the older bg/surface/accent set from the auth pages) are kept as aliases of the same values, so
   markup adapted from either mockup family works without renaming every var() call. */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root{
  --canvas:#080b0f;--surf-1:#0d1117;--surf-2:#131a22;--surf-2t:rgba(19,26,34,0.82);--surf-3:#1a232e;
  --primary:#14b8a6;--primary-br:#2dd4bf;--secondary:#06b6d4;--tertiary:#3cddc7;
  --text:#f8fafc;--text-dim:#94a3b8;--text-faint:#475569;--border:#1e293b;
  --positive:#10b981;--warning:#f59e0b;--critical:#f43f5e;--radius:8px;

  /* aliases for the auth-page mockups' older variable names */
  --bg:var(--canvas);--surface:var(--surf-1);--surface-2:var(--surf-2);--surface-3:var(--surf-3);
  --accent:var(--primary);--accent-dim:#0d8a7d;--accent-soft:rgba(20,184,166,0.12);--danger:var(--critical);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;font-family:'Vazirmatn',system-ui,sans-serif;background:var(--canvas);color:var(--text);}
a{text-decoration:none;color:inherit;}
input,button,textarea{font-family:inherit;}
input::placeholder{color:var(--text-faint);}
input{transition:border-color .15s ease;}
input:focus{outline:none;border-color:var(--accent-dim);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--surf-3);border-radius:6px;}
::-webkit-scrollbar-track{background:transparent;}

.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;}
.msi{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:20px;line-height:1;display:inline-block;white-space:nowrap;direction:ltr;}

/* ------------------------------------------------------------------------------ app shell layout */
.app-shell{display:flex;min-height:100vh;width:100%;overflow-x:hidden;background:var(--canvas);font-size:14px;}
.app-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.app-topbar{height:64px;flex-shrink:0;background:rgba(8,11,15,0.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px;position:sticky;top:0;z-index:5;}
.app-content{flex:1;padding:22px 28px;display:flex;flex-direction:column;gap:18px;max-width:1400px;width:100%;margin:0 auto;}

.sidebar{width:236px;flex-shrink:0;background:rgba(13,17,23,0.82);backdrop-filter:blur(20px);border-left:1px solid var(--border);position:relative;z-index:1;padding:20px 14px;display:flex;flex-direction:column;gap:20px;}
.navitem{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:6px;font-size:13.5px;color:var(--text-dim);transition:background .15s,color .15s;cursor:pointer;}
.navitem.active{background:rgba(20,184,166,0.14);color:var(--primary-br);font-weight:600;}
.navitem:not(.active):hover{background:var(--surf-3);color:var(--text);}

/* ---------------------------------------------------------------------------------------- cards */
.kcard{position:relative;background:var(--surf-2t);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:14px;box-shadow:0 8px 24px -12px rgba(0,0,0,0.6);transition:box-shadow .2s,border-color .2s;overflow:hidden;}
.kcard:hover{box-shadow:0 0 24px rgba(20,184,166,0.12),0 8px 24px -12px rgba(0,0,0,0.6);border-color:rgba(45,212,191,0.3);}
.kcard .hairline{position:absolute;top:0;right:25%;left:25%;height:1px;background:linear-gradient(90deg,transparent,rgba(45,212,191,0.55),transparent);}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 2px rgba(2,3,1,0.5),0 12px 28px -14px rgba(2,3,1,0.75);}
.stat-card{box-shadow:0 1px 2px rgba(2,3,1,0.5),0 12px 28px -14px rgba(2,3,1,0.75);}

.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 7px;border-radius:4px;font-weight:600;}
.badge-pos{background:rgba(16,185,129,0.1);color:var(--positive);}
.badge-warn{background:rgba(245,158,11,0.12);color:var(--warning);}
.badge-crit{background:rgba(244,63,94,0.12);color:var(--critical);}
.chip{font-size:10.5px;padding:3px 8px;border-radius:4px;font-weight:600;}

.btn-primary{background:var(--primary);color:#04140f;font-weight:600;box-shadow:0 0 14px rgba(20,184,166,0.35);transition:background .15s,transform .12s;cursor:pointer;border:none;font-family:inherit;}
.btn-primary:hover{background:var(--primary-br);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{opacity:.55;cursor:default;transform:none;}
.btn-secondary{background:var(--surf-3);color:var(--text);font-weight:600;border:1px solid var(--border);cursor:pointer;font-family:inherit;transition:background .15s;}
.btn-secondary:hover{background:var(--surf-2);}

.tab{padding:10px 18px;border-radius:8px 8px 0 0;font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;}
.tab.active{background:var(--surf-2t);color:var(--primary-br);border:1px solid var(--border);border-bottom:none;}
.tab:not(.active){color:var(--text-faint);}
.tab:not(.active):hover{color:var(--text-dim);}

.pill-chip{font-size:11.5px;padding:8px 14px;border-radius:999px;border:1px solid var(--border);color:var(--text-dim);background:var(--surf-2);transition:border-color .15s,color .15s;cursor:pointer;}
.pill-chip:hover{border-color:var(--primary);color:var(--text);}

.step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;text-align:center;}
.step-dot{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

table{width:100%;border-collapse:collapse;font-size:13px;}
tbody tr{transition:background .15s ease;}
tbody tr:hover{background:var(--surface-2);}

.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field label{font-size:13px;color:var(--text-dim);}
.form-field input{height:48px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);padding:0 16px;font-size:14px;}
.pw-wrap{position:relative;display:flex;}
.pw-wrap input{flex:1;min-width:0;width:100%;padding-inline-end:48px;}
.pw-toggle{position:absolute;inset-inline-end:4px;top:0;bottom:0;width:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;color:var(--text-faint);cursor:pointer;border-radius:10px;}
.pw-toggle:hover,.pw-toggle:focus-visible{color:var(--accent);}
.form-error{background:rgba(244,63,94,0.1);border:1px solid rgba(244,63,94,0.35);color:#fda4af;border-radius:10px;padding:12px 16px;font-size:13px;display:none;}
.form-error.visible{display:block;}

/* ----------------------------------------------------------------------------------- brand panel */
.brand-panel{background:#05070a;}
.aurora-blob{position:absolute;border-radius:50%;filter:blur(64px);pointer-events:none;z-index:0;}
.aurora-1{top:-170px;left:-130px;width:480px;height:480px;background:radial-gradient(circle,rgba(20,184,166,0.5),transparent 72%);animation:auroraDrift1 9s ease-in-out infinite;}
.aurora-2{bottom:-160px;left:-90px;width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,0.38),transparent 72%);animation:auroraDrift2 11s ease-in-out infinite;}
.aurora-3{top:38%;left:55%;width:320px;height:320px;background:radial-gradient(circle,rgba(45,212,191,0.32),transparent 72%);animation:auroraDrift3 7.5s ease-in-out infinite;}
@keyframes auroraDrift1{0%,100%{transform:translate(0,0) scale(1);opacity:.55;}50%{transform:translate(55px,-45px) scale(1.25);opacity:.9;}}
@keyframes auroraDrift2{0%,100%{transform:translate(0,0) scale(1);opacity:.3;}50%{transform:translate(-50px,50px) scale(1.18);opacity:.62;}}
@keyframes auroraDrift3{0%,100%{transform:translate(0,0) scale(1);opacity:.4;}50%{transform:translate(35px,40px) scale(1.12);opacity:.72;}}
.brand-fg{position:relative;z-index:1;}

.logo-mark{width:38px;height:38px;position:relative;flex-shrink:0;}
.logo-glow{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,0.55),transparent 70%);filter:blur(10px);animation:logoGlowPulse 3.2s ease-in-out infinite;}
.logo-ring{position:absolute;inset:0;border-radius:8px;padding:2px;background:conic-gradient(from 0deg,#0d8a7d,#2dd4bf,#06b6d4,#14b8a6,#0d8a7d);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:logoSpin 4s linear infinite;}
.logo-core{position:absolute;inset:9px;border-radius:3px;transform:rotate(45deg);background:linear-gradient(120deg,#0a5e54,#2dd4bf,#06b6d4,#0a5e54);background-size:240% 240%;animation:logoFlow 3.4s ease-in-out infinite;}
@keyframes logoSpin{from{transform:rotate(45deg);}to{transform:rotate(405deg);}}
@keyframes logoFlow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes logoGlowPulse{0%,100%{opacity:.5;}50%{opacity:1;}}

.emblem{position:absolute;pointer-events:none;z-index:0;}
.emblem-glow{position:absolute;inset:-22%;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,0.62),transparent 70%);filter:blur(48px);animation:emblemPulse 3.2s ease-in-out infinite;}
.emblem-ring{position:absolute;inset:0;border-radius:22%;padding:4%;background:conic-gradient(from 0deg,#0d8a7d,#5eead4,#2dd4bf,#06b6d4,#14b8a6,#0d8a7d);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:blur(2px);animation:emblemSpin 5s linear infinite;}
.emblem-core{position:absolute;inset:24%;border-radius:9%;transform:rotate(45deg);background:linear-gradient(120deg,#0d8a7d,#5eead4,#2dd4bf,#06b6d4,#0d8a7d);background-size:240% 240%;filter:blur(3px);animation:emblemFlow 3.8s ease-in-out infinite;}
@keyframes emblemSpin{from{transform:rotate(45deg);}to{transform:rotate(405deg);}}
@keyframes emblemFlow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
@keyframes emblemPulse{0%,100%{opacity:.6;}50%{opacity:1;}}

/* ------------------------------------------------------------------------------------- utilities */
.center-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.skeleton{background:linear-gradient(90deg,var(--surf-2) 25%,var(--surf-3) 37%,var(--surf-2) 63%);background-size:400% 100%;animation:skeletonShine 1.4s ease infinite;border-radius:8px;}
@keyframes skeletonShine{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.empty-state{color:var(--text-faint);font-size:13px;text-align:center;padding:32px 16px;}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid rgba(248,250,252,0.25);border-top-color:#04140f;animation:spin .7s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ----------------------------------------------------------------------------------- auth pages */
/* Milad's layout: brand panel on the right, form on the left (order:-1 puts the panel at the RTL
   start; no row-reverse). On a narrow phone the panel stacks above the form instead. */
.auth-layout{min-height:100vh;display:flex;overflow:hidden;}
.auth-form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-brand{--brand-w:clamp(560px,38vw,760px);order:-1;width:var(--brand-w);height:100vh;border-inline-end:1px solid var(--border);padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;flex-shrink:0;}
/* the rounded ring spins; at its widest it spans ~1.23x its size, so 0.8 of the panel just fits */
.auth-brand .emblem{width:min(calc(var(--brand-w) * 0.98),92vh) !important;height:min(calc(var(--brand-w) * 0.98),92vh) !important;}
.form-row{display:flex;gap:16px;}
.form-row > .form-field{flex:1;min-width:0;}

/* ---------------------------------------------------------------------------- app page helpers */
.sb-brand{display:flex;align-items:center;gap:9px;padding:0 4px;}
.sb-nav{display:flex;flex-direction:column;gap:3px;}
.sb-footer{margin-top:auto;display:flex;flex-direction:column;gap:10px;}
.sb-logout{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:6px;background:var(--surf-1);color:var(--text-dim);cursor:pointer;font-size:11px;}
.sb-account{display:flex;align-items:center;gap:9px;padding:9px;border-radius:8px;background:var(--surf-2);}
.nav-label-short{display:none;}
.topbar-search{position:relative;flex:1;max-width:420px;}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
.dash-split{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start;}
.tabs-row{flex-shrink:0;padding:16px 28px 0;display:flex;gap:6px;}
.ask-pane{height:calc(100vh - 210px);min-height:420px;}
.bubble-mine{max-width:60%;}
.bubble-bot{max-width:70%;}
.table-scroll{overflow-x:auto;}

@media (max-width: 900px){
  /* phones: the brand panel stays, stacked above the form and sized to the screen */
  .auth-layout{flex-direction:column;overflow:visible;}
  .auth-brand{width:100%;height:auto;min-height:320px;padding:28px 20px;gap:22px;
    justify-content:flex-start;border-inline-end:none;border-bottom:1px solid var(--border);}
  .auth-brand .emblem{width:300px !important;height:300px !important;}
  .auth-title{font-size:22px !important;}
  .auth-sub{font-size:13.5px !important;line-height:1.9 !important;}
  .auth-form-side{padding:28px 20px 40px;}
  .form-row{flex-direction:column;}

  /* the sidebar becomes a bottom tab bar; content keeps room for it */
  .app-shell{flex-direction:column;}
  .app-main{padding-bottom:calc(72px + env(safe-area-inset-bottom));}
  .sidebar{position:fixed;left:0;right:0;bottom:0;width:auto;z-index:20;flex-direction:row;align-items:stretch;gap:0;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-left:none;border-top:1px solid var(--border);background:rgba(13,17,23,0.96);}
  .sb-brand,.sb-account{display:none;}
  .sidebar{display:flex;}
  .sb-nav{flex-direction:row;flex:4 1 0%;gap:0;min-width:0;display:flex;}
  .sb-footer{margin-top:0;flex:1 1 0%;min-width:0;flex-direction:row;}
  .sb-nav .navitem,.sb-logout{flex:1 1 0%;min-width:0;flex-direction:column;justify-content:center;gap:2px;padding:6px 1px;font-size:10px;text-align:center;background:none;border-radius:8px;white-space:nowrap;overflow:hidden;}
  .sb-nav .navitem .msi,.sb-logout .msi{font-size:17px !important;}
  .nav-label{display:none;}
  .nav-label-short{display:inline;}

  .app-topbar{padding:0 14px;}
  .app-topbar{gap:10px;}
  .topbar-search{min-width:0;}
  .app-content{padding:14px;}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .kpi-value{font-size:18px !important;}
  .dash-split{grid-template-columns:1fr;}
  .hello-banner{padding:16px !important;}
  .hello-title{font-size:20px !important;}
  .tabs-row{padding:12px 14px 0;overflow-x:auto;scrollbar-width:none;}
  .tabs-row .tab{padding:9px 11px;white-space:nowrap;flex-shrink:0;}
  .ask-pane{height:calc(100dvh - 64px - 52px - 72px - 30px);min-height:360px;padding:14px !important;}
  .bubble-mine,.bubble-bot{max-width:88%;}
}

/* phone held sideways (any width): panel and form side by side again, same sides as desktop */
/* three tabs on a 360-390px phone: the words alone */
@media (max-width: 420px){.tabs-row .tab .msi{display:none;}}
@media (orientation: landscape) and (max-height: 500px){
  .auth-layout{flex-direction:row;overflow:visible;}
  .auth-brand{width:44%;height:100vh;min-height:0;position:sticky;top:0;padding:20px 24px;gap:14px;
    justify-content:center;border-bottom:none;border-inline-end:1px solid var(--border);}
  .auth-brand .emblem{width:240px !important;height:240px !important;}
  .auth-title{font-size:20px !important;}
  .auth-sub{font-size:13px !important;line-height:1.8 !important;}
  .auth-form-side{padding:24px;align-items:flex-start;}
  .form-row{flex-direction:row;}
}
.dataset-remove,.snapshot-remove{background:none;border:0;padding:6px;border-radius:6px;color:var(--text-faint);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.dataset-remove:hover,.dataset-remove:focus-visible,.snapshot-remove:hover,.snapshot-remove:focus-visible{color:var(--critical);background:rgba(244,63,94,0.1);}
.dataset-remove:disabled,.snapshot-remove:disabled{opacity:.4;cursor:default;}
/* upload icon on the Data page: a live light running around it, like the logo mark */
.upload-mark{position:relative;width:56px;height:56px;border-radius:14px;background:rgba(20,184,166,0.12);display:flex;align-items:center;justify-content:center;}
.upload-glow{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(45,212,191,0.5),transparent 70%);filter:blur(12px);animation:logoGlowPulse 3.2s ease-in-out infinite;pointer-events:none;}
.upload-ring{position:absolute;inset:0;border-radius:14px;padding:2px;overflow:hidden;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.upload-ring::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0 55%,#2dd4bf 75%,#5eead4 85%,transparent 100%);animation:uploadSweep 2.6s linear infinite;}
@keyframes uploadSweep{to{transform:rotate(360deg);}}
#dropzone:hover .upload-ring::before{animation-duration:1.2s;}
@media (prefers-reduced-motion:reduce){.upload-glow,.upload-ring::before{animation:none;}}
/* the whole drop area acts as one button: no text cursor, caret or selection on its icon or words */
#dropzone,#dropzone *{cursor:pointer;-webkit-user-select:none;user-select:none;caret-color:transparent;}