/* ================================================
   app.css — DocSys | Three Themes
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ══ THEME 1 (default) — Light Teal (current) ══ */
:root {
  --sidebar-w:240px; --sidebar-w-collapsed:68px;
  --bg-page:#f0fdf9;
  --sidebar-bg:#ffffff; --sidebar-border:#e0f2fe;
  --sidebar-text:#64748b;
  --sidebar-active-bg:#f0fdfa; --sidebar-active-color:#0d9488; --sidebar-active-border:#14b8a6;
  --sidebar-section-color:#94a3b8; --sidebar-hover-bg:#f0fdfa;
  --sidebar-brand-sub:#64748b; --sidebar-footer-border:#e0f2fe; --sidebar-brand-text:#0f172a;
  --topbar-bg:#ffffff; --topbar-border:#e2f8f4; --topbar-shadow:0 1px 4px rgba(14,165,233,.07);
  --topbar-title:#0f172a; --topbar-link-bg:#f0fdfa; --topbar-link-border:#ccfbf1;
  --topbar-link-color:#0d9488; --topbar-link-hover:#ccfbf1;
  --card:#ffffff; --card-border:#e2f8f4; --card-shadow:0 1px 6px rgba(14,165,233,.07);
  --radius:14px;
  --accent:#14b8a6; --accent2:#0d9488; --accent-light:#f0fdfa; --accent-border:#ccfbf1;
  --text:#0f172a; --text-body:#334155; --muted:#64748b;
  --chip-bg:linear-gradient(135deg,#14b8a6,#0d9488);
  --table-head-bg:#f8fffe; --table-head-color:#94a3b8;
  --table-row-hover:#f0fdfa; --table-border:#e2f8f4; --table-text:#334155;
  --btn-primary-bg:linear-gradient(135deg,#14b8a6,#0d9488); --btn-primary-color:#ffffff;
  --input-border:#e2e8f0; --input-focus:#14b8a6; --input-bg:#fafffe;
  --badge-in-bg:#f0fdf4; --badge-in-color:#16a34a; --badge-in-border:#bbf7d0;
  --badge-out-bg:#f0fdfa; --badge-out-color:#0d9488; --badge-out-border:#99f6e4;
  --logout-bg:#fff5f5; --logout-color:#ef4444; --logout-hover:#fee2e2;
  --collapse-bg:#f0fdfa; --collapse-color:#64748b; --collapse-hover:#ccfbf1;
  --ref-color:#0d9488;
  --login-grad-a:#0d9488; --login-grad-b:#14b8a6; --login-blob1:rgba(20,184,166,.15); --login-blob2:rgba(13,148,136,.1);
}

/* ══ THEME 2 — Professional Blue ══ */
[data-theme="blue"] {
  --bg-page:#f0f7ff;
  --sidebar-bg:#1e3a6e; --sidebar-border:rgba(255,255,255,.08);
  --sidebar-text:rgba(255,255,255,.55);
  --sidebar-active-bg:rgba(255,255,255,.12); --sidebar-active-color:#ffffff; --sidebar-active-border:#60a5fa;
  --sidebar-section-color:#93c5fd; --sidebar-hover-bg:rgba(255,255,255,.08);
  --sidebar-brand-sub:#93c5fd; --sidebar-footer-border:rgba(255,255,255,.08); --sidebar-brand-text:#ffffff;
  --topbar-bg:#ffffff; --topbar-border:#dbeafe; --topbar-shadow:0 1px 4px rgba(59,130,246,.07);
  --topbar-title:#1e3a6e; --topbar-link-bg:#eff6ff; --topbar-link-border:#bfdbfe;
  --topbar-link-color:#2563eb; --topbar-link-hover:#dbeafe;
  --card:#ffffff; --card-border:#dbeafe; --card-shadow:0 1px 6px rgba(59,130,246,.07);
  --accent:#3b82f6; --accent2:#1d4ed8; --accent-light:#eff6ff; --accent-border:#bfdbfe;
  --text:#1e3a6e; --text-body:#334155; --muted:#64748b;
  --chip-bg:linear-gradient(135deg,#3b82f6,#1d4ed8);
  --table-head-bg:#f0f7ff; --table-head-color:#94a3b8;
  --table-row-hover:#eff6ff; --table-border:#dbeafe; --table-text:#334155;
  --btn-primary-bg:linear-gradient(135deg,#3b82f6,#1d4ed8); --btn-primary-color:#ffffff;
  --input-border:#e2e8f0; --input-focus:#3b82f6; --input-bg:#f8faff;
  --badge-in-bg:#f0fdf4; --badge-in-color:#16a34a; --badge-in-border:#bbf7d0;
  --badge-out-bg:#eff6ff; --badge-out-color:#2563eb; --badge-out-border:#bfdbfe;
  --logout-bg:rgba(239,68,68,.12); --logout-color:#fca5a5; --logout-hover:rgba(239,68,68,.2);
  --collapse-bg:rgba(255,255,255,.06); --collapse-color:rgba(255,255,255,.45); --collapse-hover:rgba(255,255,255,.1);
  --ref-color:#2563eb;
  --login-grad-a:#1d4ed8; --login-grad-b:#3b82f6; --login-blob1:rgba(59,130,246,.15); --login-blob2:rgba(29,78,216,.1);
}

/* ══ THEME 3 — Warm Slate ══ */
[data-theme="warm"] {
  --bg-page:#faf9f7;
  --sidebar-bg:#2c2520; --sidebar-border:rgba(255,255,255,.06);
  --sidebar-text:rgba(255,255,255,.4);
  --sidebar-active-bg:rgba(212,169,106,.14); --sidebar-active-color:#d4a96a; --sidebar-active-border:#d4a96a;
  --sidebar-section-color:#d4a96a; --sidebar-hover-bg:rgba(212,169,106,.08);
  --sidebar-brand-sub:#d4a96a; --sidebar-footer-border:rgba(255,255,255,.06); --sidebar-brand-text:#ffffff;
  --topbar-bg:#ffffff; --topbar-border:#e8e0d5; --topbar-shadow:0 1px 4px rgba(120,90,50,.06);
  --topbar-title:#2c2520; --topbar-link-bg:#fdf8f2; --topbar-link-border:#e8e0d5;
  --topbar-link-color:#b8873c; --topbar-link-hover:#f5ede0;
  --card:#ffffff; --card-border:#e8e0d5; --card-shadow:0 1px 6px rgba(120,90,50,.06);
  --accent:#d4a96a; --accent2:#b8873c; --accent-light:#fdf8f2; --accent-border:#e8d5b0;
  --text:#2c2520; --text-body:#44403c; --muted:#78716c;
  --chip-bg:linear-gradient(135deg,#d4a96a,#b8873c);
  --table-head-bg:#fdf8f2; --table-head-color:#a8a29e;
  --table-row-hover:#fdf8f2; --table-border:#e8e0d5; --table-text:#44403c;
  --btn-primary-bg:linear-gradient(135deg,#d4a96a,#b8873c); --btn-primary-color:#ffffff;
  --input-border:#e8e0d5; --input-focus:#d4a96a; --input-bg:#fdfaf6;
  --badge-in-bg:#f0fdf4; --badge-in-color:#16a34a; --badge-in-border:#bbf7d0;
  --badge-out-bg:#fdf8f2; --badge-out-color:#b8873c; --badge-out-border:#e8d5b0;
  --logout-bg:rgba(239,68,68,.1); --logout-color:#fca5a5; --logout-hover:rgba(239,68,68,.18);
  --collapse-bg:rgba(255,255,255,.05); --collapse-color:rgba(255,255,255,.4); --collapse-hover:rgba(212,169,106,.1);
  --ref-color:#b8873c;
  --login-grad-a:#2c2520; --login-grad-b:#4a3728; --login-blob1:rgba(212,169,106,.15); --login-blob2:rgba(184,135,60,.1);
}

/* ════ RESET ════ */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg-page);color:var(--text-body);font-size:14px}

/* ════ REF NUMBERS — IBM Plex Mono (clear 0 vs 8) ════ */
.ref-no, .ref-link, td .ref, .mono {
  font-family:'IBM Plex Mono',monospace!important;
  font-size:12px!important;
  font-weight:500!important;
  color:var(--ref-color)!important;
  letter-spacing:.3px;
}
a.ref-link{text-decoration:none}
a.ref-link:hover{text-decoration:underline}

/* ════ APP SHELL ════ */
.app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

/* ════ SIDEBAR ════ */
.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);padding:16px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto;box-shadow:2px 0 12px rgba(0,0,0,.04)}
.sidebar__brand{display:flex;align-items:center;gap:10px;padding:8px 10px 14px;border-bottom:1px solid var(--sidebar-border);margin-bottom:6px}
.sidebar__logo{width:36px;height:36px;border-radius:10px;object-fit:contain}
.sidebar__brandText{font-size:14px;font-weight:700;color:var(--sidebar-brand-text);line-height:1.2}
.sidebar__subText{font-size:11px;color:var(--sidebar-brand-sub);margin-top:1px}
.sidebar__section,.sidebar__sectionTitle{font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--sidebar-section-color);padding:12px 12px 4px}
.sidebar__nav{display:flex;flex-direction:column;gap:2px}
.sidebar__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--sidebar-text);text-decoration:none;font-size:13px;font-weight:500;border-left:3px solid transparent;transition:background .15s,color .15s}
.sidebar__item i{width:18px;text-align:center;font-size:15px;flex-shrink:0}
.sidebar__item:hover{background:var(--sidebar-hover-bg);color:var(--sidebar-active-color)}
.sidebar__item.active{background:var(--sidebar-active-bg);color:var(--sidebar-active-color);font-weight:600;border-left:3px solid var(--sidebar-active-border);padding-left:9px}
.sidebar__footer{margin-top:auto;padding-top:12px;border-top:1px solid var(--sidebar-footer-border);display:flex;flex-direction:column;gap:4px}
.sidebar__collapse{width:100%;border:0;background:var(--collapse-bg);color:var(--collapse-color);padding:9px 12px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;font-family:inherit;transition:background .15s}
.sidebar__collapse:hover{background:var(--collapse-hover);color:var(--sidebar-active-color)}
.sidebar__logout{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;color:var(--logout-color);text-decoration:none;font-size:13px;font-weight:500;background:var(--logout-bg);transition:background .15s}
.sidebar__logout:hover{background:var(--logout-hover)}

/* ════ CONTENT & TOPBAR ════ */
.content{padding:18px 22px;min-width:0;background:var(--bg-page)}
.topbar{height:58px;display:flex;align-items:center;justify-content:space-between;background:var(--topbar-bg);border-radius:var(--radius);padding:0 20px;box-shadow:var(--topbar-shadow);border:1px solid var(--topbar-border);margin-bottom:18px;position:relative}
.topbar__title{font-size:17px;font-weight:700;color:var(--topbar-title)}
.topbar__right{display:flex;align-items:center;gap:8px}
.topbar__link{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;text-decoration:none;color:var(--topbar-link-color);background:var(--topbar-link-bg);border:1px solid var(--topbar-link-border);font-size:12px;font-weight:500;transition:background .15s}
.topbar__link:hover{background:var(--topbar-link-hover)}

/* ════ PROFILE DROPDOWN ════ */
.profile-menu{position:relative;display:inline-block}
.profile-btn{display:flex;align-items:center;gap:8px;padding:5px 5px 5px 12px;border-radius:10px;border:1px solid var(--topbar-link-border);background:var(--topbar-link-bg);color:var(--topbar-link-color);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;user-select:none}
.profile-btn:hover{background:var(--topbar-link-hover)}
.profile-btn .profile-chevron{font-size:10px;transition:transform .2s;margin-left:2px;margin-right:4px}
.profile-menu.open .profile-chevron{transform:rotate(180deg)}
.chip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--chip-bg);color:#fff;font-weight:700;font-size:12px}

.profile-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#ffffff;border:1px solid #e2e8f0;border-radius:14px;padding:6px;min-width:230px;box-shadow:0 12px 40px rgba(0,0,0,.13);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:2000}
.profile-menu.open .profile-dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.pd-header{padding:10px 12px 10px;border-bottom:1px solid #f1f5f9;margin-bottom:4px}
.pd-email{font-size:12px;font-weight:700;color:#0f172a}
.pd-role{font-size:10px;color:#94a3b8;font-weight:500;margin-top:2px;text-transform:capitalize}

.pd-section{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#94a3b8;padding:8px 12px 4px}

/* Theme rows inside dropdown */
.pd-theme{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .12s;border:1.5px solid transparent;background:transparent;width:100%;font-family:inherit;text-align:left;margin-bottom:2px}
.pd-theme:hover{background:#f8fafc}
.pd-theme.active-theme{background:#f8fafc;border-color:#e2e8f0}
.th-swatch{width:28px;height:28px;border-radius:8px;flex-shrink:0;border:2px solid rgba(0,0,0,.07)}
.th-info{flex:1}
.th-name{font-size:12px;font-weight:700;color:#0f172a;display:block}
.th-desc{font-size:10px;color:#94a3b8;display:block;margin-top:1px}
.th-check{font-size:12px;color:#16a34a;opacity:0}
.pd-theme.active-theme .th-check{opacity:1}

.pd-divider{height:1px;background:#f1f5f9;margin:6px 4px}
.pd-action{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;text-decoration:none;font-size:12px;font-weight:500;color:#64748b;transition:background .12s;cursor:pointer;border:none;background:transparent;width:100%;font-family:inherit}
.pd-action:hover{background:#f8fafc;color:#0f172a}
.pd-action.danger{color:#ef4444}
.pd-action.danger:hover{background:#fff5f5}
.pd-action i{width:16px;text-align:center;font-size:13px}

/* ════ CARD ════ */
.card-custom{background:var(--card);border-radius:var(--radius);box-shadow:var(--card-shadow);border:1px solid var(--card-border)}
.page{margin-top:0}

/* ════ BUTTONS ════ */
.btn-teal,.btn-primary{padding:9px 20px;background:var(--btn-primary-bg);color:var(--btn-primary-color);border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .15s,transform .1s}
.btn-teal:hover,.btn-primary:hover{opacity:.88;transform:translateY(-1px)}
.btn-outline-teal,.btn-outline{padding:8px 18px;border:1.5px solid var(--accent);color:var(--accent2);background:transparent;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.btn-outline-teal:hover,.btn-outline:hover{background:var(--accent-light)}

/* ════ FORMS ════ */
.form-control,.form-select{border:1.5px solid var(--input-border)!important;border-radius:10px!important;font-size:13px!important;color:var(--text)!important;background:var(--input-bg)!important;font-family:inherit!important;transition:border-color .15s!important}
.form-control:focus,.form-select:focus{border-color:var(--input-focus)!important;box-shadow:0 0 0 3px rgba(20,184,166,.1)!important;outline:none!important;background:#fff!important}

/* ════ TABLE ════ */
.table{font-size:13px!important}
.table thead th{font-size:10px!important;font-weight:600!important;letter-spacing:1px!important;text-transform:uppercase!important;color:var(--table-head-color)!important;border-bottom:1.5px solid var(--table-border)!important;background:var(--table-head-bg)!important;padding:10px 12px!important}
.table tbody td{padding:11px 12px!important;vertical-align:middle!important;border-bottom:1px solid var(--table-border)!important;color:var(--table-text)!important}
.table tbody tr:hover td{background:var(--table-row-hover)!important}
.table tbody tr:last-child td{border-bottom:none!important}

/* ════ BADGES ════ */
.badge-in{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;background:var(--badge-in-bg);color:var(--badge-in-color);border:1px solid var(--badge-in-border)}
.badge-out{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;background:var(--badge-out-bg);color:var(--badge-out-color);border:1px solid var(--badge-out-border)}
.badge-draft{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}
.badge-submitted{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;background:#eff6ff;color:#2563eb;border:1px solid #bfdbfe}
.badge-reviewed{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;background:#fffbeb;color:#d97706;border:1px solid #fde68a}
.badge-approved{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
.badge-archived{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;background:#faf5ff;color:#7c3aed;border:1px solid #ddd6fe}
.badge-admin{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.badge-user{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;background:#f0fdfa;color:#0d9488;border:1px solid #99f6e4}
.badge-external{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd}
.badge-internal{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:700;background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe}
.badge-type{display:inline-block;padding:3px 10px;border-radius:99px;font-size:10px;font-weight:600;background:#f8fafc;color:#64748b;border:1px solid #e2e8f0}

/* ════ MISC ════ */
.page-section-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.page-section-title::after{content:'';flex:1;height:1px;background:var(--accent-border)}

/* ════ COLLAPSED SIDEBAR ════ */
body.sidebar-collapsed .app-shell{grid-template-columns:var(--sidebar-w-collapsed) 1fr}
body.sidebar-collapsed .sidebar__brandText,
body.sidebar-collapsed .sidebar__subText,
body.sidebar-collapsed .sidebar__section,
body.sidebar-collapsed .sidebar__sectionTitle,
body.sidebar-collapsed .sidebar__item span,
body.sidebar-collapsed .sidebar__collapse span,
body.sidebar-collapsed .sidebar__logout span{display:none}
body.sidebar-collapsed .sidebar__item{justify-content:center;padding:10px;border-left:none!important}
body.sidebar-collapsed .sidebar__brand{justify-content:center}
body.sidebar-collapsed .sidebar__collapse,
body.sidebar-collapsed .sidebar__logout{justify-content:center;padding:10px}

/* ════ TRANSITIONS ════ */
body,.sidebar,.topbar,.card-custom,.content,.sidebar__item{transition:background .25s ease,color .2s ease,border-color .25s ease}

/* ════ LOGIN PAGE ════ */
body.login-page{background:linear-gradient(135deg,var(--login-grad-a),var(--login-grad-b));min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}
body.login-page::before{content:'';position:absolute;width:500px;height:500px;background:var(--login-blob1);border-radius:50%;top:-120px;right:-100px;filter:blur(60px)}
body.login-page::after{content:'';position:absolute;width:400px;height:400px;background:var(--login-blob2);border-radius:50%;bottom:-80px;left:-80px;filter:blur(60px)}
.login-card{background:#ffffff;border-radius:24px;padding:44px 40px;width:100%;max-width:420px;box-shadow:0 24px 80px rgba(0,0,0,.18);position:relative;z-index:1}
.login-logo-wrap{display:flex;justify-content:center;margin-bottom:6px}
.login-logo{width:56px;height:56px;border-radius:16px;object-fit:contain;box-shadow:0 4px 16px rgba(0,0,0,.12)}
.login-title{text-align:center;font-size:22px;font-weight:800;color:#0f172a;margin-bottom:4px}
.login-sub{text-align:center;font-size:13px;color:#64748b;margin-bottom:28px}
.login-label{font-size:12px;font-weight:600;color:#374151;margin-bottom:5px;display:block}
.login-input{width:100%;padding:11px 14px;border:1.5px solid #e2e8f0;border-radius:11px;font-size:14px;font-family:inherit;color:#0f172a;background:#f8fafc;outline:none;transition:border-color .15s,box-shadow .15s}
.login-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(20,184,166,.12);background:#fff}
.login-btn{width:100%;padding:13px;background:var(--btn-primary-bg);color:#fff;border:none;border-radius:11px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:20px;transition:opacity .15s,transform .1s;letter-spacing:.3px}
.login-btn:hover{opacity:.88;transform:translateY(-1px)}
.login-error{background:#fff5f5;border:1px solid #fecaca;color:#dc2626;padding:10px 14px;border-radius:10px;font-size:12px;margin-bottom:16px;display:flex;align-items:center;gap:8px}

/* ════ PROFILE DROPDOWN ════ */
.profile-menu{position:relative;display:inline-block}

.profile-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:6px;
  min-width:220px;
  box-shadow:0 12px 40px rgba(0,0,0,.13);
  opacity:0;visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:2000;
}
.profile-menu.open .profile-dropdown{
  opacity:1;visibility:visible;transform:translateY(0);
}

.pd-header{padding:10px 12px;border-bottom:1px solid #f1f5f9;margin-bottom:4px}
.pd-email{font-size:12px;font-weight:700;color:#0f172a}
.pd-role{font-size:10px;color:#94a3b8;font-weight:500;margin-top:2px;text-transform:capitalize}

.pd-section{font-size:9px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#94a3b8;padding:8px 12px 4px}

.pd-theme{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:10px;
  cursor:pointer;
  border:1.5px solid transparent;
  background:transparent;
  width:100%;font-family:inherit;text-align:left;
  margin-bottom:2px;transition:background .12s;
}
.pd-theme:hover{background:#f8fafc}
.pd-theme.active-theme{background:#f0fdf4;border-color:#bbf7d0}

.th-swatch{width:26px;height:26px;border-radius:7px;flex-shrink:0;border:1.5px solid rgba(0,0,0,.08)}
.th-info{flex:1}
.th-name{font-size:12px;font-weight:700;color:#0f172a;display:block}
.th-desc{font-size:10px;color:#94a3b8;display:block;margin-top:1px}
.th-check{font-size:11px;color:#16a34a;opacity:0;transition:opacity .15s}
.pd-theme.active-theme .th-check{opacity:1}

.pd-divider{height:1px;background:#f1f5f9;margin:5px 4px}

.pd-action{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:10px;
  text-decoration:none;font-size:12px;font-weight:500;
  color:#64748b;transition:background .12s;
  cursor:pointer;border:none;background:transparent;
  width:100%;font-family:inherit;
}
.pd-action:hover{background:#f8fafc;color:#0f172a;text-decoration:none}
.pd-action.danger{color:#ef4444}
.pd-action.danger:hover{background:#fff5f5;color:#ef4444}
.pd-action i{width:16px;text-align:center;font-size:13px}

/* ════ AI ASSISTANT SIDEBAR BUTTON ════ */
.sidebar__item--ai {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.08)) !important;
  border-left: 3px solid transparent !important;
  color: #818cf8 !important;
  position: relative;
  margin-top: 4px;
}
.sidebar__item--ai:hover {
  background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.14)) !important;
  color: #a5b4fc !important;
}
.sidebar__item--ai.active {
  background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(139,92,246,.18)) !important;
  border-left-color: #818cf8 !important;
  color: #c7d2fe !important;
}
.sidebar__item--ai i { color: inherit !important; }

.ai-badge {
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .8px !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  color: #fff !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
  margin-left: auto !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  flex-shrink: 0;
}
body.sidebar-collapsed .ai-badge { display: none; }

/* ════ AI CHAT PAGE ════ */
.ai-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 100px);
  gap: 0;
}

.ai-header {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  box-shadow: var(--card-shadow);
}
.ai-avatar {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99,102,241,.3);
}
.ai-header-info { flex: 1; }
.ai-header-name { font-size: 14px; font-weight: 700; color: var(--text); }
.ai-header-sub  { font-size: 11px; color: var(--muted); margin-top: 1px; display: flex; align-items: center; gap: 6px; }
.ai-status-dot  {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,.2);
  animation: aipulse 2s infinite;
  display: inline-block;
}
@keyframes aipulse { 0%,100%{opacity:1} 50%{opacity:.5} }

.ai-header-actions { display: flex; gap: 8px; }
.ai-hbtn {
  padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600;
  border: 1.5px solid var(--input-border); background: var(--accent-light);
  color: var(--accent2); cursor: pointer; font-family: inherit; transition: background .15s;
  display: flex; align-items: center; gap: 6px;
}
.ai-hbtn:hover { background: var(--accent-border); }

/* Messages area */
.ai-messages {
  flex: 1;
  overflow-y: auto;
  background: var(--bg-page);
  border-left: 1px solid var(--card-border);
  border-right: 1px solid var(--card-border);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
}
.ai-messages::-webkit-scrollbar { width: 5px; }
.ai-messages::-webkit-scrollbar-track { background: transparent; }
.ai-messages::-webkit-scrollbar-thumb { background: var(--input-border); border-radius: 10px; }

/* Message bubbles */
.ai-msg { display: flex; gap: 10px; align-items: flex-start; animation: msgIn .2s ease; }
@keyframes msgIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.ai-msg--user { flex-direction: row-reverse; }
.ai-msg-avatar {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.ai-msg--ai .ai-msg-avatar { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; }
.ai-msg--user .ai-msg-avatar { background: var(--chip-bg); color: #fff; font-size: 11px; font-weight: 700; }

.ai-msg-bubble {
  max-width: 72%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.6;
}
.ai-msg--ai .ai-msg-bubble {
  background: var(--card);
  border: 1px solid var(--card-border);
  color: var(--text-body);
  border-radius: 4px 14px 14px 14px;
  box-shadow: var(--card-shadow);
}
.ai-msg--user .ai-msg-bubble {
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  color: #fff;
  border-radius: 14px 4px 14px 14px;
}
.ai-msg-time { font-size: 10px; color: var(--muted); margin-top: 4px; }
.ai-msg--user .ai-msg-time { text-align: right; }

/* Doc cards inside AI messages */
.ai-doc-card {
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.ai-doc-card i { color: var(--accent); font-size: 16px; }
.ai-doc-ref { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--accent2); font-size: 11px; }
.ai-doc-name { font-weight: 600; color: var(--text); }
.ai-doc-type { font-size: 10px; color: var(--muted); }

/* Typing indicator */
.ai-typing { display: flex; gap: 4px; align-items: center; padding: 4px 2px; }
.ai-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6366f1; opacity: .4;
  animation: typing 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }

/* Quick prompts */
.ai-quick-prompts {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 0 4px;
}
.ai-quick-btn {
  padding: 6px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
  border: 1.5px solid var(--accent-border); background: var(--accent-light);
  color: var(--accent2); cursor: pointer; font-family: inherit; transition: all .15s;
  display: flex; align-items: center; gap: 6px;
}
.ai-quick-btn:hover {
  background: var(--accent-border);
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* Input bar */
.ai-input-bar {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px 16px;
  flex-shrink: 0;
}
.ai-input-row {
  display: flex; gap: 10px; align-items: flex-end;
}
.ai-input-wrap { flex: 1; position: relative; }
#aiInput {
  width: 100%;
  padding: 11px 44px 11px 14px;
  border: 1.5px solid var(--input-border);
  border-radius: 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--input-bg);
  resize: none;
  line-height: 1.5;
  min-height: 44px;
  max-height: 120px;
  overflow-y: auto;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#aiInput:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.ai-send-btn {
  width: 42px; height: 42px; border-radius: 11px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 4px 12px rgba(99,102,241,.3);
}
.ai-send-btn:hover { opacity: .88; transform: translateY(-1px); }
.ai-send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.ai-input-hint { font-size: 10px; color: var(--muted); margin-top: 8px; text-align: center; }

/* Welcome state */
.ai-welcome {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px; padding: 40px 20px; text-align: center;
}
.ai-welcome-icon {
  width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #fff;
  box-shadow: 0 8px 24px rgba(99,102,241,.3);
  margin-bottom: 4px;
}
.ai-welcome h3 { font-size: 18px; font-weight: 800; color: var(--text); margin: 0; }
.ai-welcome p  { font-size: 13px; color: var(--muted); margin: 0; max-width: 340px; line-height: 1.6; }

/* Code blocks in AI responses */
.ai-msg-bubble pre {
  background: rgba(0,0,0,.06); border-radius: 8px;
  padding: 10px 12px; margin: 8px 0 0;
  font-size: 11px; overflow-x: auto;
  font-family: 'IBM Plex Mono', monospace;
}
.ai-msg--user .ai-msg-bubble pre { background: rgba(255,255,255,.15); }

/* Classification result badge */
.ai-classify-result {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 700;
  background: rgba(99,102,241,.1); color: #6366f1;
  border: 1px solid rgba(99,102,241,.2);
  margin: 6px 4px 0 0;
}