@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

/* ── Design tokens: classify (picoco-class) palette, light + dark ── */
:root{
  /* classify light */
  --bg-color:#f0f0f0; --bg-hover:#e9e9e9; --text-color:#333; --text-light:#999;
  --prompt-bg:#fff; --prompt-placeholder:#bdbdbd; --prompt-submit:#e0e0e0;
  --button-bg:#0b6555; --button-color:#fff; --button-hover:#044337;
  --sidebar-bg:#fff; --sidebar-text:#333; --sidebar-button:#f2f2f2; --sidebar-hover:#e5e5e5; --sidebar-border:#d0d0d0;
  --border-color:#dee2e6; --background-primary:#fff; --background-secondary:#f8f9fa; --background-hover:#e9ecef;
  --text-secondary:#6c757d; --text-green:#43a047; --text-yellow:#e5a100; --text-red:#d32f2f;
  --link-color:#12a58c; --table-header-bg:#f5f5f5; --table-row-even:#f9f9f9;
  --accent:#0b6555; --accent-light:#12a58c; --accent-hover:#044337;
  --container-shadow:rgba(0,0,0,.08);
  /* translucent semantic backgrounds (theme-agnostic) */
  --miss-bg:rgba(211,47,47,.12); --miss-line:rgba(211,47,47,.40);
  --warn-bg:rgba(229,161,0,.14); --warn-line:rgba(229,161,0,.40);

  /* Khai semantic aliases -> classify tokens (so existing rules retheme automatically) */
  --bg:var(--bg-color); --panel:var(--background-primary); --ink:var(--text-color);
  --muted:var(--text-secondary); --line:var(--border-color);
  --brand:var(--accent); --brand2:var(--link-color);
  --ok:var(--text-green); --warn:var(--text-yellow);
  --warnbg:var(--warn-bg); --miss:var(--miss-bg); --missln:var(--miss-line);
}
.dark-theme{
  --bg-color:#222; --bg-hover:#333; --text-color:#f0f0f0; --text-light:#888;
  --prompt-bg:#333; --prompt-placeholder:#616161; --prompt-submit:#424242;
  --button-bg:#0b6555; --button-color:#fff; --button-hover:#0d7a66;
  --sidebar-bg:#1c1c1c; --sidebar-text:#fff; --sidebar-button:#282828; --sidebar-hover:#333; --sidebar-border:#404040;
  --border-color:#404040; --background-primary:#2a2a2a; --background-secondary:#333; --background-hover:#282828;
  --text-secondary:#999; --text-green:#81c784; --text-yellow:#ffd54f; --text-red:#ef5350;
  --link-color:#6ed2ff; --table-header-bg:#2a2a2a; --table-row-even:#292929;
  --accent:#12a58c; --accent-light:#6ed2ff; --accent-hover:#0d7a66;
  --container-shadow:rgba(0,0,0,.3);
  --warn-bg:rgba(255,213,79,.12); --warn-line:rgba(255,213,79,.35);
}

*{box-sizing:border-box}
[x-cloak]{display:none!important}
body{margin:0;font-family:'Roboto',Arial,sans-serif;color:var(--text-color);background:var(--bg-color);
  font-size:14px;transition:background-color .3s,color .3s}
a{color:var(--link-color);text-decoration:none}
.muted{color:var(--text-light)} .small{font-size:12px} .big{font-size:28px}

/* ── shell ── */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:220px;background:var(--sidebar-bg);color:var(--sidebar-text);border-right:1px solid var(--sidebar-border);
  display:flex;flex-direction:column;padding:16px 14px;transition:width .2s ease}
/* Lucide renders <i data-lucide> into <svg class="lucide ...">; size the SVGs (not the <i>) */
svg.lucide{width:16px;height:16px;flex:none;vertical-align:-.18em}
.sidebar i,.sidebar svg{width:18px;height:18px;flex:none}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo,.brand svg{width:26px!important;height:26px!important;color:var(--accent)}
.dark-theme .brand-logo{color:var(--text-yellow)}
.brand-name{font-weight:700;font-size:18px;color:var(--text-color);letter-spacing:.3px;white-space:nowrap}
.brand-tag{font-size:11px;color:var(--text-light);margin-top:2px;white-space:nowrap}
.icon-btn{background:var(--sidebar-button);color:var(--text-color);border:none;border-radius:6px;cursor:pointer;
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}
.icon-btn:hover{background:var(--sidebar-hover)}
.sidebar nav{margin-top:22px;display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:10px;color:var(--sidebar-text);padding:8px 10px;border-radius:6px;white-space:nowrap}
.nav-item i,.nav-item svg{color:var(--text-light)}
.nav-item:hover{background:var(--sidebar-hover)}
.sidebar-foot{margin-top:auto;font-size:12px;border-top:1px solid var(--sidebar-border);padding-top:12px;display:flex;flex-direction:column;gap:6px}
.nav-item-static{display:flex;align-items:center;gap:10px;color:var(--text-light);white-space:nowrap}
.foot-controls{display:flex;gap:6px;margin-bottom:4px}
.content{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;background:var(--background-primary);border-bottom:1px solid var(--border-color)}
.page{padding:22px;min-width:0}

/* ── collapsed sidebar -> icon rail ── */
.sidebar-collapsed .sidebar{width:64px;padding-left:8px;padding-right:8px}
.sidebar-collapsed .brand-text,
.sidebar-collapsed .brand-tag,
.sidebar-collapsed .label{display:none}
.sidebar-collapsed .brand,
.sidebar-collapsed .nav-item,
.sidebar-collapsed .nav-item-static,
.sidebar-collapsed .foot-controls,
.sidebar-collapsed .sidebar-top{justify-content:center}
.sidebar-collapsed .nav-item,.sidebar-collapsed .nav-item-static{gap:0}
.sidebar-collapsed .sidebar-top{flex-direction:column;gap:10px}
.sidebar-collapsed .collapse-btn i{transform:rotate(180deg)}

/* ── login — classify look; uses global theme tokens now ── */
.login-overlay{font-family:'Roboto',Arial,sans-serif;position:fixed;inset:0;z-index:9999;
  background:var(--bg-color);color:var(--text-color);display:flex;flex-direction:column;justify-content:center;align-items:center;transition:opacity .3s}
.login-box{text-align:center;max-width:400px;width:100%;padding:0 20px;transform:translateY(-10%)}
.login-logo{margin-bottom:20px;color:var(--accent)}
.dark-theme .login-logo{color:var(--text-yellow)}
.login-logo i,.login-logo svg{width:60px;height:60px}
.login-box .message{font-size:2em;font-weight:300;letter-spacing:.5px;margin-bottom:40px}
.login-box .login-form{display:flex;flex-direction:column;gap:20px;margin-bottom:30px}
.login-box .form-group{position:relative;display:flex;flex-direction:column}
.login-box .auth-input{width:100%;padding:12px 16px;font-size:1em;background:var(--prompt-bg);border:1px solid var(--prompt-submit);border-radius:6px;color:var(--text-color);outline:none;transition:all .3s}
.login-box .auth-input:focus{border-color:var(--button-bg)}
.login-box .auth-input::placeholder{color:var(--prompt-placeholder)}
.login-box .auth-input.error{border-color:#f44336;animation:login-shake .5s ease-in-out}
.login-box .password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--prompt-placeholder);cursor:pointer;padding:4px;display:flex;align-items:center;transition:color .3s}
.login-box .password-toggle:hover{color:var(--text-color)}
.login-box .password-toggle i{width:18px;height:18px}
.login-box .login-button{width:100%;padding:12px 24px;font-size:1em;font-weight:500;background:var(--button-bg);color:var(--button-color);border:none;border-radius:6px;cursor:pointer;transition:all .3s;min-height:48px}
.login-box .login-button:hover{background:var(--button-hover);transform:translateY(-1px)}
.login-box .error-message{padding:12px;color:#f44336;font-size:.9em;text-align:center}
.login-box .help-text{font-size:.85em;color:var(--text-light);line-height:1.4;margin-top:20px}
@keyframes login-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.alert{background:var(--warn-bg);color:var(--text-yellow);padding:8px 10px;border-radius:6px;margin-top:10px;font-size:13px}

/* ── buttons ── */
.btn{display:inline-block;padding:6px 12px;border:1px solid var(--border-color);background:var(--background-primary);border-radius:6px;cursor:pointer;font-size:13px;color:var(--text-color)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--button-bg);color:var(--button-color);border-color:var(--button-bg)}
.btn.primary:hover{background:var(--button-hover);border-color:var(--button-hover)}
.btn.primary[disabled]{opacity:.5;cursor:not-allowed}
.btn.tiny{padding:3px 7px;font-size:11px}
.link{background:none;border:none;color:var(--link-color);cursor:pointer;font-size:12px;padding:0}

/* ── tables ── */
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.search{padding:8px;border:1px solid var(--prompt-submit);border-radius:6px;width:320px;background:var(--prompt-bg);color:var(--text-color)}
.grid{width:100%;border-collapse:collapse;background:var(--background-primary);border:1px solid var(--border-color);border-radius:8px;overflow:hidden}
.grid th,.grid td{padding:9px 12px;border-bottom:1px solid var(--border-color);text-align:left}
.grid th{background:var(--table-header-bg);font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px}
.grid tr:nth-child(even) td{background:var(--table-row-even)}
.pill{background:var(--background-secondary);color:var(--accent);padding:2px 8px;border-radius:20px;font-size:12px;font-weight:600}
.status{padding:2px 8px;border-radius:20px;font-size:12px}
.status-draft{background:var(--background-secondary);color:var(--text-secondary)}
.status-validated{background:var(--background-secondary);color:var(--text-green)}
.status-submitted{background:var(--background-secondary);color:var(--accent-light)}
.status-rejected{background:var(--background-secondary);color:var(--text-red)}
.badge-warn{color:var(--text-yellow);font-weight:600} .badge-ok{color:var(--text-green);font-weight:600}

/* ── review ── */
.review-header{display:flex;justify-content:space-between;align-items:center;background:var(--background-primary);border:1px solid var(--border-color);border-radius:8px;padding:10px 14px;margin-bottom:14px}
.rh-left,.rh-right{display:flex;gap:10px;align-items:center}
.review-grid{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.form-pane{min-width:0}
.card{background:var(--background-primary);border:1px solid var(--border-color);border-radius:8px;margin-bottom:12px}
.card-head{padding:10px 14px;font-weight:600;cursor:pointer;border-bottom:1px solid var(--border-color)}
.card-body{padding:12px 14px}
.field{display:flex;align-items:center;gap:10px;padding:5px 0}
.field label{width:200px;font-size:13px;color:var(--text-secondary)}
.field .req{color:var(--text-red)}
.field-edit{display:flex;gap:6px;flex:1}
.field-edit input{flex:1;padding:6px 8px;border:1px solid var(--prompt-submit);border-radius:6px;background:var(--prompt-bg);color:var(--text-color)}
.field-missing .field-edit input{background:var(--miss-bg);border-color:var(--miss-line)}
.prov{font-size:14px;cursor:default}.prov.small{font-size:12px}
.prov i,.prov svg{width:14px;height:14px;vertical-align:-2px;color:var(--text-light)}
.qmark{width:20px;height:20px;border-radius:50%;border:1px solid var(--border-color);background:var(--background-primary);cursor:pointer;font-weight:700;color:var(--link-color);line-height:1}
.goods td,.goods th{font-size:13px}
.cell-missing{background:var(--miss-bg)}

/* ── issues ── */
.issues{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.issue{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:8px;padding:8px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.issue-kind{background:var(--text-yellow);color:#000;border-radius:4px;padding:1px 7px;font-size:11px;text-transform:uppercase}
.sources-panel{background:var(--background-primary);border:1px dashed var(--border-color);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.src-kind{display:inline-block;background:var(--background-secondary);color:var(--accent);border-radius:4px;padding:0 6px;font-size:11px;margin-right:6px}

/* ── chat ── */
.chat-pane{position:sticky;top:16px;background:var(--background-primary);border:1px solid var(--border-color);border-radius:8px;display:flex;flex-direction:column;max-height:calc(100vh - 120px)}
.chat-pane.collapsed{max-height:none}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border-color);font-weight:600;background:var(--background-secondary);border-radius:8px 8px 0 0}
.chat-body{display:flex;flex-direction:column;min-height:300px}
.chat-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;max-height:55vh}
.msg{padding:7px 10px;border-radius:10px;max-width:90%;font-size:13px;white-space:pre-wrap}
.msg.user{align-self:flex-end;background:var(--button-bg);color:#fff}
.msg.assistant{align-self:flex-start;background:var(--background-secondary);color:var(--text-color)}
.chat-input{display:flex;gap:6px;padding:10px;border-top:1px solid var(--border-color)}
.chat-input input{flex:1;padding:7px;border:1px solid var(--prompt-submit);border-radius:6px;background:var(--prompt-bg);color:var(--text-color)}