/* overrides.css — pass penyempurnaan, tombol tema, dan sidebar versi mobile. */

/* ===== Upgrade pass — crafted, non-generic ===== */
.avatar { box-shadow: inset 0 0 0 1px var(--line-strong); }

.tab.active, .menu-item.active {
  background: var(--surface2);
  color: var(--ink);
}
.menu-item.active { font-weight: 600; }
.menu-item.active svg { color: var(--accent); }

.chip, .badge, .section-tabs button { letter-spacing: 0.01em; }
.chip:hover { border-color: var(--line-strong); color: var(--ink); }

.bubble { box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset; }

.cite { transition: border-color 0.15s; }
.cite:hover { border-color: var(--line-strong); }



.portal-card, .panel, .modal { background: var(--surface); }
.portal-card { transition: border-color 0.15s, transform 0.15s; }
.portal-card:hover { border-color: var(--line-strong); }

tbody tr:hover td { background: rgba(255,255,255,0.025); }
.notif-btn { border-radius: 10px; }
.notif-panel { border-radius: 16px; }



/* ===== Theme toggle button ===== */
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.theme-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface2); }
.theme-btn svg { width: 17px; height: 17px; }
.theme-btn .ico-moon { display: none; }
html[data-theme="light"] .theme-btn .ico-moon { display: block; }
html[data-theme="light"] .theme-btn .ico-sun { display: none; }

/* Light-theme adjustments */
html[data-theme="light"] .landing { background: var(--bg); }
html[data-theme="light"] nav.site-nav { background: var(--bg); }
html[data-theme="light"] .login-wrap { background: var(--bg); }
html[data-theme="light"] .portal-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .modal { background: var(--surface); }
html[data-theme="light"] .side { background: var(--surface); }
html[data-theme="light"] .msg.assistant .bubble { background: var(--bubble-assistant); }
html[data-theme="light"] tbody tr:hover td { background: rgba(15,18,20,0.03); }
html[data-theme="light"] .l-ws,
html[data-theme="light"] .notif-panel { background: var(--surface); }
/* Tombol tema kini bagian dari header panggung (.login-top), bukan
   elemen absolut — lihat css/layout/app-shell.css. */
.docs-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ===== Mobile: sidebar jadi strip menu horizontal (tidak terpotong) ===== */
@media (max-width: 720px) {
  /* Sidebar jadi top bar: brand + toggle tetap terlihat, menu digeser
     horizontal di dalam #tabs (bukan seluruh sidebar yang melebar 1700px). */
  .app-body { flex-direction: column; }
  .side {
    width: 100%;
    min-width: 0;
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: hidden; /* #tabs yang scroll, bukan .side */
  }
  .side-head {
    flex: none;
    height: auto;
    margin: 0;
    padding: 0;
    gap: 4px;
  }
  .side .brand { display: flex; padding: 0; }
  .side .brand .brandtext { display: none; } /* logo saja, hemat lebar */
  .side-search { display: inline-flex; }
  .menu-label { display: none; }

  #tabs {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 2px 0;
  }
  #tabs::-webkit-scrollbar { display: none; }
  .menu-group { display: flex; gap: 4px; margin: 0; flex: none; }
  .menu-item {
    white-space: nowrap;
    width: auto;
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 0;
    flex: none;
  }
  .menu-item.active::before { display: none; }

  .side-foot {
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    margin: 0;
  }
  .theme-row { display: none; } /* tema bisa diganti dari layar login */
  .user-chip {
    margin: 0;
    padding: 0;
    border-top: 0;
    flex: none;
    height: auto;
  }
  .user-chip .uinfo, .user-chip #logout { display: none; }
  /* Panel kanan: tombol toggle sudah ada di top-right absolut. */
  .top-right { top: 6px; }
}