/* ============================================================
   ArchPay Admin — app shell
   ArchCRM navy / teal design system (from APIDocs) + kanvas-style
   collapsible sidebar app layout.
   ============================================================ */

:root {
  --navy:#16314A; --navy-deep:#0e2236; --teal:#15897B; --teal-d:#0f6f63;
  --bg:#ffffff; --bg-alt:#f7f9f9; --panel:#ffffff; --ink:#1c2b33; --ink-soft:#41525c;
  --muted:#6b7c85; --line:#e7edee; --line-strong:#d4dee0; --code-bg:#f1f5f5;
  --brand:#16314A; --accent:#15897B; --accent-soft:#e7f4f1;
  --shadow:0 1px 2px rgba(22,49,74,.06),0 8px 24px rgba(22,49,74,.05);
  --shadow-lg:0 12px 40px rgba(14,34,54,.18);
  --get:#1a7f4b; --get-bg:#e9f7ef; --post:#2257c0; --post-bg:#e8f0fc;
  --warnc:#b42318; --warn-bg:#fdecea; --okc:#1a7f4b; --ok-bg:#e9f7ef;
  --infoc:#1e5fae; --info-bg:#eaf2fc; --provc:#9a6112; --prov-bg:#fff7e8;
  --radius:12px; --radius-sm:8px;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --sidebar-w:248px; --sidebar-w-c:66px;
}
body.dark {
  --navy:#9fd4cb; --bg:#0d141a; --bg-alt:#111b22; --panel:#15202a; --ink:#e5edf0;
  --ink-soft:#c3d0d6; --muted:#8597a0; --line:#233039; --line-strong:#31424c;
  --code-bg:#16242e; --brand:#9fd4cb; --accent:#3db8a5; --accent-soft:#16302c;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 16px 50px rgba(0,0,0,.55);
  --get-bg:#10301f; --post-bg:#0f2647; --warn-bg:#3a1f1f; --ok-bg:#16301f;
  --info-bg:#102740; --prov-bg:#332708; --provc:#e7b463; --infoc:#7db4ee;
  --okc:#6cd397; --warnc:#f0a0a0; --get:#6cd397; --post:#7db4ee;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--sans); font-size:15px; line-height:1.6;
  color:var(--ink); background:var(--bg-alt);
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.muted { color:var(--muted); }
.mono { font-family:var(--mono); font-size:.85em; }
h1,h2,h3 { color:var(--brand); }

/* ---------------- App layout ---------------- */
.app-body { display:flex; min-height:100vh; }
.app-main { flex:1; min-width:0; margin-left:var(--sidebar-w); transition:margin-left .18s; }
.app-content { max-width:1200px; margin:0 auto; padding:28px 36px 80px; }
.sidebar.collapsed ~ .app-main { margin-left:var(--sidebar-w-c); }

.page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.page-header h1 { font-size:26px; margin:0 0 4px; letter-spacing:-.01em; }
.page-header .sub { color:var(--muted); font-size:14px; }

/* ---------------- Sidebar ---------------- */
.sidebar {
  position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); z-index:100;
  display:flex; flex-direction:column; background:var(--navy-deep); color:#c7d6df;
  transition:width .18s; overflow:hidden;
}
.sidebar.collapsed { width:var(--sidebar-w-c); }
.sidebar__logo { display:flex; align-items:center; gap:10px; padding:18px 18px 14px; min-height:64px; }
.sidebar__logo img { height:30px; width:auto; flex:none; }
.sidebar__logo-text { font-weight:700; font-size:15px; color:#fff; white-space:nowrap; letter-spacing:.01em; }
.sidebar.collapsed .sidebar__logo-text { display:none; }

.sidebar-nav { list-style:none; margin:0; padding:8px 10px; flex:1; overflow-y:auto; }
.sidebar-nav__section { font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:#6f8695; font-weight:600; padding:16px 10px 6px; white-space:nowrap; }
.sidebar.collapsed .sidebar-nav__section { text-align:center; padding:16px 0 6px; overflow:hidden; }
.sidebar-nav__divider { height:1px; background:rgba(255,255,255,.08); margin:8px 6px; }
.sidebar-nav__link {
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px;
  color:#c7d6df; font-size:14px; font-weight:500; white-space:nowrap;
  border-left:3px solid transparent;
}
.sidebar-nav__link:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.sidebar-nav__link.active { background:color-mix(in srgb,var(--teal) 26%,transparent);
  color:#fff; border-left-color:var(--teal); }
.sidebar-nav__link i { width:18px; height:18px; flex:none; }
.sidebar.collapsed .sidebar-nav__link span { display:none; }
.sidebar.collapsed .sidebar-nav__link { justify-content:center; padding:9px 0; border-left:none; }

.sidebar__footer { border-top:1px solid rgba(255,255,255,.08); padding:12px 12px; }
.sidebar__user { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sidebar__avatar { width:34px; height:34px; flex:none; border-radius:50%; background:var(--teal);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.sidebar__user-name { font-size:13.5px; color:#fff; font-weight:600; white-space:nowrap; }
.sidebar__user-role { font-size:11.5px; color:#8ba0ad; white-space:nowrap; }
.sidebar.collapsed .sidebar__user-info, .sidebar.collapsed .sidebar__footer-bottom .sidebar__version { display:none; }
.sidebar__footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sidebar__version { font-size:11px; color:#6f8695; }
.sidebar__logout { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#a9bcc7; }
.sidebar__logout:hover { color:#fff; text-decoration:none; }
.sidebar__logout i { width:15px; height:15px; }

.sidebar__toggle { position:absolute; top:20px; right:12px; width:26px; height:26px;
  border:none; border-radius:7px; background:rgba(255,255,255,.08); color:#c7d6df; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.sidebar__toggle:hover { background:rgba(255,255,255,.16); color:#fff; }
.sidebar__toggle i { width:16px; height:16px; }
.sidebar.collapsed .sidebar__toggle { right:0; left:0; margin:auto; }

/* ---------------- Buttons / chips / badges ---------------- */
.btn { display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:600;
  font-size:14px; padding:9px 16px; border-radius:10px; cursor:pointer; border:1px solid transparent; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--teal-d); }
.btn-ghost { background:var(--panel); border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm { padding:6px 11px; font-size:13px; border-radius:8px; }
.chip { display:inline-block; font-family:var(--mono); font-size:11.5px; background:var(--code-bg);
  border:1px solid var(--line); border-radius:6px; padding:1px 8px; color:var(--ink-soft); }

.status-badge { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:2px 9px; border-radius:20px; border:1px solid transparent; }
.st-ok       { color:var(--okc);   background:var(--ok-bg);   border-color:color-mix(in srgb,var(--okc) 30%,transparent); }
.st-info     { color:var(--infoc); background:var(--info-bg); border-color:color-mix(in srgb,var(--infoc) 30%,transparent); }
.st-warn     { color:var(--provc); background:var(--prov-bg); border-color:color-mix(in srgb,var(--provc) 30%,transparent); }
.st-err      { color:var(--warnc); background:var(--warn-bg); border-color:color-mix(in srgb,var(--warnc) 30%,transparent); }

.method { font-family:var(--mono); font-weight:600; font-size:10.5px; letter-spacing:.03em;
  padding:2px 6px; border-radius:5px; text-transform:uppercase; }
.m-get { color:var(--get); background:var(--get-bg); }
.m-post { color:var(--post); background:var(--post-bg); }
.m-put { color:var(--provc); background:var(--prov-bg); }
.m-delete { color:var(--warnc); background:var(--warn-bg); }

/* ---------------- Cards / stat tiles ---------------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; margin:4px 0 26px; }
.stat-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow); }
.stat-card__label { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.stat-card__value { font-size:28px; font-weight:700; color:var(--brand); margin-top:6px; letter-spacing:-.02em; }
.stat-card__hint { font-size:12.5px; color:var(--muted); margin-top:4px; }

/* ---------------- Forms ---------------- */
label.field { display:block; margin:14px 0 4px; font-size:13px; font-weight:600; color:var(--ink); }
input[type=text], input[type=email], input[type=search], input[type=password], select, textarea {
  width:100%; font:inherit; font-size:14px; color:var(--ink); background:var(--panel);
  border:1px solid var(--line-strong); border-radius:9px; padding:9px 12px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
.form-narrow { max-width:520px; }
.form-actions { display:flex; gap:10px; margin-top:20px; }
.form-inline { display:flex; gap:10px; align-items:center; margin:10px 0 4px; }
.form-inline select { flex:1; width:auto; min-width:0; }
.inline-form { display:inline; }

/* ---------------- Tables ---------------- */
.table-scroll { max-width:100%; overflow-x:auto; margin:6px 0 20px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--panel); }
table.data { width:100%; border-collapse:collapse; font-size:13.5px; background:var(--panel); }
table.data th, table.data td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
table.data th { background:var(--bg-alt); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:600; white-space:nowrap; }
table.data tbody tr:last-child td { border-bottom:none; }
table.data tbody tr:hover { background:var(--bg-alt); }
table.data td code { white-space:normal; overflow-wrap:anywhere; }

/* ---------------- Callouts (flash + notes) ---------------- */
.callout { border-radius:var(--radius-sm); padding:12px 16px; margin:12px 0; border-left:4px solid; font-size:14px; }
.callout .lbl { font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.06em; margin-right:6px; }
.callout.info { background:var(--info-bg); border-color:var(--infoc); color:var(--ink-soft); }
.callout.ok   { background:var(--ok-bg);   border-color:var(--okc);   color:var(--ink-soft); }
.callout.warn { background:var(--warn-bg); border-color:var(--warnc); color:var(--ink-soft); }
.callout.prov { background:var(--prov-bg); border-color:var(--provc); color:var(--ink-soft); }
.callout.info .lbl { color:var(--infoc); } .callout.ok .lbl { color:var(--okc); }
.callout.warn .lbl { color:var(--warnc); } .callout.prov .lbl { color:var(--provc); }

code { font-family:var(--mono); font-size:.85em; background:var(--code-bg);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--ink); }
pre { background:var(--navy-deep); color:#e7eef6; border-radius:var(--radius-sm);
  padding:16px 18px; overflow-x:auto; font-size:13px; line-height:1.6; margin:14px 0; }
pre code { background:none; border:none; color:inherit; padding:0; }

/* ---------------- Theme toggle ---------------- */
.themebtn { border:1px solid var(--line-strong); background:var(--panel); color:var(--ink-soft);
  width:36px; height:36px; border-radius:9px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.themebtn:hover { border-color:var(--accent); color:var(--accent); }

/* ---------------- Login ---------------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:linear-gradient(135deg,var(--navy-deep),var(--navy)); }
.login-card { width:100%; max-width:420px; background:var(--panel); border-radius:16px;
  box-shadow:var(--shadow-lg); padding:36px 32px; text-align:center; }
.login-card img { height:40px; margin-bottom:18px; }
.login-card h1 { font-size:22px; margin:0 0 6px; }
.login-card p { color:var(--muted); font-size:14px; margin:0 0 24px; }
.login-provider { display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:11px 16px; margin:8px 0; border:1px solid var(--line-strong); border-radius:10px;
  background:var(--panel); color:var(--ink); font-weight:600; font-size:14px; cursor:pointer; }
.login-provider:hover { border-color:var(--accent); text-decoration:none; }

/* ---------------- Responsive ---------------- */
@media (max-width:820px) {
  .sidebar { transform:translateX(-105%); transition:transform .2s; width:var(--sidebar-w); }
  .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); }
  .app-main { margin-left:0; }
  .app-content { padding:22px 16px 80px; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }