/*
|--------------------------------------------------------------------------
| GCM v2 -- tokens and typography ported from pwf_desktop's real design
| system (assets/css/app.css: --font-sans, the dark/light palette, the
| radius/shadow scale) rather than invented fresh -- same font loading
| convention too (inc/layout.php: preconnect + Poppins 400-800).
| Component class names below (.card, .btn, .input, .table, ...) are
| unchanged from the original app.css so no PHP template needed editing.
|--------------------------------------------------------------------------
*/

:root{
  --font-sans: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  color-scheme: dark;
  --bg-100:#07111f;
  --bg-200:#0f1b2d;
  --bg-300:#132238;
  --card:#0f1b2d;
  --border:rgba(148,163,184,.16);
  --border-strong:rgba(148,163,184,.26);
  --text:#f8fafc;
  --muted:#8fa1b8;
  --white-90:rgba(255,255,255,.9);
  --accent:#3b82f6;
  --accent-hover:#2563eb;
  --accent-soft:rgba(59,130,246,.14);
  --success:#10b981;
  --success-soft:rgba(16,185,129,.14);
  --danger:#ef4444;
  --danger-soft:rgba(239,68,68,.14);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.18);
  --shadow-md: 0 14px 34px rgba(0,0,0,.24);
}

html[data-theme="light"]{
  color-scheme: light;
  --bg-100:#f4f7fb;
  --bg-200:#ffffff;
  --bg-300:#eef3f8;
  --card:#ffffff;
  --border:rgba(15,23,42,.1);
  --border-strong:rgba(15,23,42,.18);
  --text:#0f172a;
  --muted:#55627a;
  --white-90:rgba(0,0,0,.9);
  --accent:#2457ff;
  --accent-hover:#1d46d6;
  --accent-soft:rgba(36,87,255,.1);
  --success:#0e9f6e;
  --success-soft:rgba(14,159,110,.12);
  --danger:#dc2626;
  --danger-soft:rgba(220,38,38,.1);
  --shadow-sm: 0 8px 20px rgba(15,23,42,.08);
  --shadow-md: 0 16px 36px rgba(15,23,42,.1);
}

*{box-sizing:border-box}
html{ scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at top right, var(--accent-soft), transparent 34%),
    var(--bg-100);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  background: color-mix(in srgb, var(--bg-200) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.brand{ font-weight:800; letter-spacing:.2px; font-size:16px; }
.top-actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

.wrap{ max-width:1100px; margin:0 auto; padding:22px 16px 60px; }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:18px;
  box-shadow: var(--shadow-sm);
}

.grid{ display:grid; gap:14px; grid-template-columns: 1fr; }
@media (min-width: 920px){
  .grid.two{ grid-template-columns: 1fr 1fr; }
}

.h1{ margin:0 0 6px; font-size:19px; font-weight:700; letter-spacing:-.01em; }
.muted{ color:var(--muted); font-size:13px; }

.input, .select{
  width:100%;
  background: var(--bg-300);
  color:var(--text);
  border:1px solid var(--border);
  padding:11px 13px;
  border-radius: var(--radius-sm);
  outline:none;
  font-family:inherit;
  font-size:14px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.input:focus, .select:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--bg-300);
  color:var(--text);
  font-family:inherit;
  font-weight:600;
  font-size:13.5px;
  cursor:pointer;
  transition: background .14s ease, border-color .14s ease, transform .06s ease;
  text-decoration:none;
}
.btn:hover{ border-color: var(--border-strong); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
  border-color: transparent;
  background: var(--accent);
  color:#fff;
}
.btn.primary:hover{ background: var(--accent-hover); }

.table{
  width:100%;
  border-collapse:collapse;
}
.table th,.table td{
  border-bottom:1px solid var(--border);
  padding:11px 8px;
  text-align:left;
  font-size:13.5px;
}
.table th{ color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }

.badge{
  font-size:11.5px;
  font-weight:600;
  padding:5px 11px;
  border-radius: var(--radius-pill);
  border:1px solid var(--border);
  color:var(--muted);
}
.link{ color:var(--white-90); text-decoration:none; font-size:13.5px; font-weight:500; }
.link:hover{ text-decoration:underline; }

.alert{ border-radius: var(--radius-sm); padding:11px 14px; font-size:13.5px; }
.alert.ok{ background: var(--success-soft); color: var(--success); border:1px solid transparent; }
.alert.bad{ background: var(--danger-soft); color: var(--danger); border:1px solid transparent; }

/* ===== Dark / Light safe select ===== */
select,
.select {
  background-color: var(--bg-300);
  color: var(--white-90);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  outline: none;
  font-family: inherit;
}

select option {
  background-color: var(--bg-300);
  color: var(--white-90);
}

select option:checked,
select option:hover {
  background-color: var(--accent);
  color: #fff;
}

code{
  font-family: var(--font-mono);
  font-size: .92em;
}

/* ===== File input -- style the "Choose File" button to match .btn,
   the browser's own OS-grey default otherwise leaks through ===== */
input[type="file"].input{
  padding:8px 13px;
  color:var(--muted);
}
input[type="file"].input::file-selector-button,
input[type="file"].input::-webkit-file-upload-button{
  margin-right:12px;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color:#fff;
  font-family:inherit;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition: background .14s ease;
}
input[type="file"].input::file-selector-button:hover,
input[type="file"].input::-webkit-file-upload-button:hover{
  background: var(--accent-hover);
}

/* ===== Dedicated login screen -- full-page centered card, same shape
   as pwf_desktop's own login.php, on this app's own tokens ===== */
.login-panel{
  display:grid; min-height:100vh; place-items:center; padding:28px;
}
.login-card{
  width:min(100%, 420px);
  padding:36px;
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-md);
}
.login-brand{
  display:flex; align-items:center; gap:12px; margin-bottom:28px;
}
.login-brand-mark{
  display:grid; place-items:center;
  width:44px; height:44px; flex:0 0 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.login-brand strong{ font-size:20px; color:var(--text); letter-spacing:-.01em; }
.login-brand small{ display:block; color:var(--muted); font-size:12px; font-weight:500; margin-top:1px; }
.login-field{ margin-bottom:18px; }
.login-field label{ display:block; margin-bottom:6px; font-size:13px; color:var(--muted); }
.login-submit{
  width:100%; padding:12px;
  border:none; border-radius: var(--radius-sm);
  background: var(--accent); color:#fff;
  font-family:inherit; font-size:14px; font-weight:600;
  cursor:pointer;
  transition: opacity .14s ease;
}
.login-submit:hover{ opacity:.92; }
.login-foot{ margin-top:20px; text-align:center; }