/* ============================================================
   auth-ui.css — top-bar identity controls + login page.
   Uses theme.css variables; degrades gracefully if missing.
   ============================================================ */

/* ---- top-bar: preview switcher (demo only) ---- */
.previewwrap {
  display: none;                       /* shown by JS only in demo mode */
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 9px;
  background: var(--panel-2, rgba(255, 255, 255, .03));
  color: var(--muted, #7b8494);
}
.previewwrap svg { flex: 0 0 auto; opacity: .8; }
.previewwrap select {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text, #e7eaf0);
  font: 600 12px/1 'Archivo', system-ui, sans-serif;
  cursor: pointer;
  padding-right: 2px;
  max-width: 190px;
}
.previewwrap select:focus { outline: none; }
.previewwrap option { color: #14181f; }

/* ---- top-bar: user chip + logout ---- */
.userbox { display: flex; align-items: center; gap: 9px; padding-left: 4px; }
.userchip {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  line-height: 1.15;
}
.userchip .uname { font: 700 12.5px/1 'Archivo', system-ui, sans-serif; color: var(--text, #e7eaf0); }
.userchip .urole {
  font: 600 9px/1 'IBM Plex Mono', monospace;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted, #7b8494);
}
body.role-founder  .userchip .urole { color: var(--accent, #5b8cff); }
.logout-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 9px;
  background: var(--panel-2, rgba(255, 255, 255, .03));
  color: var(--muted, #7b8494);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.logout-btn:hover { color: var(--text, #e7eaf0); border-color: var(--line-strong, #3a4150); background: var(--panel-3, rgba(255, 255, 255, .05)); }

/* ---- filter bar: export button ---- */
.export-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 8px;
  background: var(--panel, #141822); border: 1px solid var(--line, #232936);
  color: var(--text-2, #b6bdca); font: 600 12.5px/1 'Archivo', system-ui, sans-serif;
  cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.export-btn:hover { color: var(--text, #e8eaef); border-color: var(--accent, #5b8cff); background: var(--panel-2, #0e1117); }
.export-btn svg { flex: 0 0 auto; opacity: .85; }
.export-btn.busy { opacity: .6; cursor: default; }

/* ---- filter bar: locked salesman chip (salesman role) ---- */
.sm-locked {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--panel, #141822); border: 1px solid var(--line, #232936);
  color: var(--text, #e8eaef); font: 600 12.5px/1 'Archivo', system-ui, sans-serif;
}
.sm-locked svg { color: var(--muted, #7b8494); flex: 0 0 auto; }

/* ============================================================
   Laporan Penjualan tab
   ============================================================ */
.lp-filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: var(--gap, 18px);
}
.lp-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 220px; min-width: 180px;
  padding: 9px 12px; border-radius: 9px;
  background: var(--panel, #141822); border: 1px solid var(--line, #232936);
  transition: border-color .15s;
}
.lp-search:focus-within { border-color: var(--accent, #5b8cff); }
.lp-search svg { color: var(--muted, #7b8494); flex: 0 0 auto; }
.lp-search input {
  flex: 1; min-width: 0; background: transparent; border: 0;
  color: var(--text, #e8eaef); font: 500 13px/1 'Archivo', system-ui, sans-serif;
}
.lp-search input:focus { outline: none; }
.lp-search input::placeholder { color: var(--muted, #7b8494); opacity: .7; }
.lp-clear {
  padding: 9px 15px; border-radius: 9px; cursor: pointer;
  background: var(--panel-2, #0e1117); border: 1px solid var(--line, #232936);
  color: var(--text-2, #b6bdca); font: 600 12.5px/1 'Archivo', system-ui, sans-serif;
  transition: color .15s, border-color .15s;
}
.lp-clear:hover { color: var(--text, #e8eaef); border-color: var(--line-strong, #3a4150); }

.lp-pager {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line-soft, rgba(255,255,255,.06));
}
.lp-count { font-size: 12px; color: var(--muted, #7b8494); }
.lp-count b { color: var(--text-2, #b6bdca); font-weight: 700; }
.lp-pgctl { display: flex; align-items: center; gap: 10px; }
.lp-pgctl button {
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
  background: var(--panel-2, #0e1117); border: 1px solid var(--line, #232936);
  color: var(--text-2, #b6bdca); font: 600 12px/1 'Archivo', system-ui, sans-serif;
  transition: color .15s, border-color .15s, opacity .15s;
}
.lp-pgctl button:hover:not(:disabled) { color: var(--text, #e8eaef); border-color: var(--accent, #5b8cff); }
.lp-pgctl button:disabled { opacity: .4; cursor: default; }
.lp-pg { font-size: 12px; color: var(--muted, #7b8494); font-weight: 600; min-width: 84px; text-align: center; }

/* keep the report table readable when many columns are present */
#lpTableWrap .dtable td span[title] { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ============================================================
   Login page
   ============================================================ */
.login-stage {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(91, 140, 255, .10), transparent 60%),
    var(--bg, #0b0d12);
}
.login-card {
  width: 100%; max-width: 396px;
  background: var(--panel, #14171e);
  border: 1px solid var(--line, #232833);
  border-radius: 18px;
  padding: 34px 32px 28px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.login-brand .mk {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--accent, #5b8cff); color: #fff;
  font: 800 20px/1 'Archivo', sans-serif;
}
.login-brand .co { font: 700 14px/1.2 'Archivo', sans-serif; color: var(--text, #e7eaf0); }
.login-brand .sub { font: 600 10.5px/1 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--muted, #7b8494); margin-top: 4px; }

.login-h { font: 700 19px/1.2 'Archivo', sans-serif; color: var(--text, #e7eaf0); margin: 0 0 4px; }
.login-p { font: 400 12.5px/1.5 'Archivo', sans-serif; color: var(--muted, #7b8494); margin: 0 0 22px; }

.login-field { margin-bottom: 14px; }
.login-field label {
  display: block; font: 600 10px/1 'IBM Plex Mono', monospace;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted, #7b8494);
  margin-bottom: 7px;
}
.login-field input {
  width: 100%; box-sizing: border-box;
  background: var(--panel-2, #0e1117);
  border: 1px solid var(--line, #232833);
  border-radius: 10px;
  padding: 11px 13px;
  font: 500 13.5px/1 'Archivo', sans-serif;
  color: var(--text, #e7eaf0);
  transition: border-color .15s;
}
.login-field input:focus { outline: none; border-color: var(--accent, #5b8cff); }
.login-field input::placeholder { color: var(--muted, #7b8494); opacity: .6; }

.login-btn {
  width: 100%; margin-top: 6px;
  background: var(--accent, #5b8cff); color: #fff;
  border: 0; border-radius: 10px;
  padding: 12px;
  font: 700 13.5px/1 'Archivo', sans-serif;
  cursor: pointer;
  transition: filter .15s;
}
.login-btn:hover { filter: brightness(1.07); }
.login-btn:disabled { opacity: .6; cursor: default; }

.login-err {
  display: none;
  margin-top: 14px;
  font: 500 12px/1.4 'Archivo', sans-serif;
  color: var(--neg, #f0676b);
  background: color-mix(in oklab, var(--neg, #f0676b) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--neg, #f0676b) 30%, transparent);
  border-radius: 9px; padding: 9px 12px;
}
.login-err.show { display: block; }

.login-demo {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line, #232833);
}
.login-demo .lab {
  font: 600 9.5px/1 'IBM Plex Mono', monospace;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted, #7b8494);
  margin-bottom: 11px;
}
.login-demo .picks { display: flex; flex-wrap: wrap; gap: 7px; }
.login-demo button {
  background: var(--panel-2, #0e1117);
  border: 1px solid var(--line, #232833);
  border-radius: 8px;
  padding: 7px 10px;
  font: 600 11.5px/1 'Archivo', sans-serif;
  color: var(--text-2, #b6bdca);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.login-demo button:hover { border-color: var(--accent, #5b8cff); color: var(--text, #e7eaf0); }
.login-demo button .r { color: var(--muted, #7b8494); font-weight: 500; }
.login-foot { margin-top: 22px; text-align: center; font: 400 10.5px/1.4 'Archivo', sans-serif; color: var(--muted, #7b8494); }