/* zcomhub/htdocs/assets/theme.css
   Shared design tokens + common components for every Thaiseng Central page.
   Colors match zcomroom's real design tokens (theme.min.css) in light
   mode; dark mode is the near-black premium palette approved in
   sketch 010. Pulled out of login.php/index.php's inline <style> blocks
   so every Hub page (not just those two) shares one source of truth
   instead of copy-pasted, drift-prone CSS.
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#FFF8F0;
  --surface:#FFFFFF;
  --border:#FFE1C7;
  --text:#2B2118;
  --muted:#7E705F;
  --accent:#1F3C88;
  --accent-hover:#16295c;
  --on-accent:#FFFFFF;
  --shadow:rgba(43,33,24,.14);
  --glow:rgba(31,60,136,.10);
}
[data-theme="dark"]{
  --bg:#050506;
  --surface:#0f0f11;
  --border:#232326;
  --text:#f2f2f2;
  --muted:rgba(255,255,255,.55);
  --accent:#1F3C88;
  --accent-hover:#2b52b8;
  --on-accent:#FFFFFF;
  --shadow:rgba(0,0,0,.55);
  --glow:rgba(255,255,255,.10);
}

/* Explicit text-selection colors — without this, a drag-select falls back
   to the browser/OS default highlight, which isn't guaranteed to contrast
   against --text/--surface in dark mode (a light OS accent color can land
   near-white-on-near-white). Tied to --accent/--on-accent, the same pair
   already used for buttons, so it reads correctly in both themes. */
::selection{background:var(--accent);color:var(--on-accent)}
::-moz-selection{background:var(--accent);color:var(--on-accent)}

/* Same continuous gradient as login.php's .split — plain var(--bg) here
   read as flat since --bg/--surface are too close to show a visible
   gradient on their own (see the note in login.php). --border makes a
   more distinct starting stop; dark mode needs its own navy->near-black
   stops for the same reason. */
body{font-family:'Noto Sans Thai','Segoe UI',Tahoma,sans-serif;background:linear-gradient(100deg,var(--border) 0%,var(--surface) 100%);min-height:100vh;transition:background .25s ease}
[data-theme="dark"] body{background:linear-gradient(100deg,#0d1b4a 0%,#050506 100%)}

/* ===== Header (logo + app name + nav + theme toggle) ===== */
header{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;transition:background .25s ease}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:30px;height:auto;flex-shrink:0}
.brand span{font-weight:800;color:var(--text);font-size:15px}
.brand .user{color:var(--muted);font-weight:400;margin-left:6px}
nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;font-size:13px;white-space:nowrap}
nav a:hover{color:var(--text)}
.theme-toggle{display:flex;align-items:center;gap:2px;background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:3px;margin-left:8px;flex-shrink:0}
.theme-toggle button{border:none;background:transparent;width:28px;height:24px;border-radius:14px;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--text)}
.theme-toggle button.active{background:var(--accent);color:#fff}

/* Narrow screens: stack the brand line and nav line into two full-width
   rows instead of letting them squeeze/wrap into a jumbled column. */
@media (max-width:640px){
  header{flex-direction:column;align-items:stretch;padding:14px 20px;gap:10px}
  .brand{flex-wrap:wrap}
  .brand .user{display:block;margin-left:40px;font-size:12.5px}
  nav{width:100%;justify-content:flex-start;column-gap:16px;row-gap:8px}
  .theme-toggle{margin-left:auto}
}

/* ===== Page shell ===== */
main{max-width:920px;margin:0 auto;padding:48px 24px}
h2{color:var(--text);font-size:20px;font-weight:800;margin-bottom:22px}
p.hint{color:var(--muted);font-size:13px;margin-bottom:18px}

/* ===== Shared components (cards, tables, forms, buttons, alerts) ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:0 8px 24px var(--shadow)}

table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px var(--shadow);margin-bottom:24px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:14px;color:var(--text)}
th{background:var(--bg);color:var(--muted);font-weight:700}
tr:last-child td{border-bottom:none}

.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:10px;font-size:14px;outline:none;background:var(--surface);color:var(--text);font-family:inherit}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.7}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}

.btn{padding:11px 22px;background:var(--accent);color:var(--on-accent);border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:700}
.btn:hover{background:var(--accent-hover)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.err{background:#fff3f3;border:1px solid #ffcdd2;color:#c62828;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px}
.ok{background:#f1f8f1;border:1px solid #c8e6c9;color:#2e7d32;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px}
.inf{background:#e3f2fd;border:1px solid #90caf9;color:#1565c0;padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px}
[data-theme="dark"] .err{background:rgba(198,40,40,.15);border-color:rgba(198,40,40,.4);color:#ff8a80}
[data-theme="dark"] .ok{background:rgba(46,125,50,.15);border-color:rgba(46,125,50,.4);color:#81c995}
[data-theme="dark"] .inf{background:rgba(21,101,192,.15);border-color:rgba(21,101,192,.4);color:#82b1ff}

.empty{color:var(--muted);padding:24px;background:var(--surface);border-radius:12px;border:1px solid var(--border)}