/* =============================================================================
   theme.css  –  Design tokens, resets, shared UI components
   ============================================================================= */

/* ── Light theme (default) ──────────────────────────────────────────────── */
:root {
  --primary:         #1c2a56;
  --primary-light:   #2d3f78;
  --primary-subtle:  rgba(28,42,86,.07);
  --accent:          #4a7cff;
  --accent-glow:     rgba(74,124,255,.14);

  --bg:              #eef1f8;
  --surface:         #ffffff;
  --surface-alt:     #f5f7fb;
  --surface-raised:  #ffffff;
  --border:          #dfe3ed;
  --border-subtle:   #eceff6;

  --text:            #1a1a2e;
  --text-muted:      #6b7294;
  --text-light:      #9ba3c2;

  /* Project status */
  --st-planning-fg:  #1d4ed8; --st-planning-bg:  #dbeafe;
  --st-progress-fg:  #92400e; --st-progress-bg:  #fef3c7;
  --st-complete-fg:  #166534; --st-complete-bg:  #dcfce7;

  /* Publish status */
  --ps-pending-fg:   #92400e; --ps-pending-bg:   #fef3c7;
  --ps-public-fg:    #166534; --ps-public-bg:    #dcfce7;
  --ps-internal-fg:  #1e40af; --ps-internal-bg:  #dbeafe;

  /* Categories */
  --cat-water-bg:      #ecfeff;  --cat-water-fg:      #0891b2;
  --cat-utilities-bg:  #fff7ed;  --cat-utilities-fg:  #d97706;
  --cat-roads-bg:      #dbeafe;  --cat-roads-fg:      #2563eb;
  --cat-buildings-bg:  #f3e8ff;  --cat-buildings-fg:  #7c3aed;
  --cat-other-bg:      #f3f4f6;  --cat-other-fg:      #6b7294;

  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 1px 8px rgba(28,42,86,.07);
  --shadow-md: 0 4px 20px rgba(28,42,86,.12);
  --shadow-lg: 0 8px 32px rgba(28,42,86,.18);
  --hdr-grad:  linear-gradient(90deg,#4a7cff,#a855f7,#4a7cff);
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --primary:         #2d3f78;
  --primary-light:   #3b52a0;
  --primary-subtle:  rgba(74,124,255,.1);
  --accent:          #748ffc;
  --accent-glow:     rgba(116,143,252,.2);

  --bg:              #0f1117;
  --surface:         #1a1d27;
  --surface-alt:     #222635;
  --surface-raised:  #1f2336;
  --border:          #2d3354;
  --border-subtle:   #242840;

  --text:            #e8eaf6;
  --text-muted:      #8b92b8;
  --text-light:      #5c6490;

  --st-planning-fg:  #93c5fd; --st-planning-bg:  rgba(37,99,235,.22);
  --st-progress-fg:  #fcd34d; --st-progress-bg:  rgba(146,64,14,.28);
  --st-complete-fg:  #86efac; --st-complete-bg:  rgba(22,163,74,.22);

  --ps-pending-fg:   #fcd34d; --ps-pending-bg:   rgba(146,64,14,.28);
  --ps-public-fg:    #86efac; --ps-public-bg:    rgba(22,163,74,.22);
  --ps-internal-fg:  #93c5fd; --ps-internal-bg:  rgba(30,64,175,.28);

  --cat-water-bg:      rgba(8,145,178,.18);   --cat-water-fg:      #22d3ee;
  --cat-utilities-bg:  rgba(217,119,6,.18);   --cat-utilities-fg:  #fbbf24;
  --cat-roads-bg:      rgba(37,99,235,.18);   --cat-roads-fg:      #60a5fa;
  --cat-buildings-bg:  rgba(124,58,237,.18);  --cat-buildings-fg:  #c084fc;
  --cat-other-bg:      rgba(107,114,148,.18); --cat-other-fg:      #9ba3c2;

  --shadow:    0 1px 8px rgba(0,0,0,.35);
  --shadow-md: 0 4px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.55);
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html,body {
  height:100%;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .2s,color .2s;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Scrollbars ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-light); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.app-header {
  height:56px; background:var(--primary);
  display:flex; align-items:center;
  padding:0 20px; gap:12px;
  position:relative; flex-shrink:0; z-index:100;
}
.app-header::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:3px; background:var(--hdr-grad);
}
.app-header .logo { height:34px; width:auto; filter:brightness(0) invert(1); }
.app-header .app-title { color:#fff; font-size:14px; font-weight:500; line-height:1.2; }
.app-header .app-title strong { font-weight:800; }
.hdr-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.hdr-badge {
  background:rgba(255,255,255,.12); color:#fff;
  font-size:11px; padding:3px 12px; border-radius:20px; font-weight:600;
  white-space:nowrap;
}
.hdr-divider { width:1px; height:20px; background:rgba(255,255,255,.2); }
.hdr-username { color:rgba(255,255,255,.8); font-size:12px; font-weight:500; }

.theme-toggle {
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; width:32px; height:32px; border-radius:8px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:background .15s;
}
.theme-toggle:hover { background:rgba(255,255,255,.22); }

/* ── Loading / empty states ──────────────────────────────────────────────── */
.spinner {
  width:26px; height:26px; border:3px solid var(--border);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin .7s linear infinite; flex-shrink:0;
}
@keyframes spin { to { transform:rotate(360deg); } }

.loading-state {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:12px; padding:80px 20px;
  color:var(--text-muted); font-size:13px;
}
.empty-state {
  padding:60px 20px; text-align:center;
  color:var(--text-muted); font-size:13px;
}
.empty-state i { font-size:32px; margin-bottom:12px; color:var(--border); display:block; }

/* ── Category badges ─────────────────────────────────────────────────────── */
.badge-cat {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; padding:2px 8px; border-radius:6px;
}
.cat-water     { background:var(--cat-water-bg);     color:var(--cat-water-fg);     }
.cat-utilities { background:var(--cat-utilities-bg); color:var(--cat-utilities-fg); }
.cat-roads     { background:var(--cat-roads-bg);     color:var(--cat-roads-fg);     }
.cat-buildings { background:var(--cat-buildings-bg); color:var(--cat-buildings-fg); }
.cat-other     { background:var(--cat-other-bg);     color:var(--cat-other-fg);     }

/* ── Status badges ───────────────────────────────────────────────────────── */
.badge-status {
  font-size:10px; font-weight:600; padding:2px 10px;
  border-radius:20px; display:inline-block; white-space:nowrap;
}
.st-planning { background:var(--st-planning-bg); color:var(--st-planning-fg); }
.st-progress { background:var(--st-progress-bg); color:var(--st-progress-fg); }
.st-complete { background:var(--st-complete-bg); color:var(--st-complete-fg); }
.st-other    { background:var(--cat-other-bg);   color:var(--text-muted);     }

/* ── Publish status badges ───────────────────────────────────────────────── */
.badge-publish {
  font-size:11px; font-weight:700; padding:3px 10px;
  border-radius:20px; display:inline-flex; align-items:center;
  gap:4px; white-space:nowrap;
}
.ps-pending  { background:var(--ps-pending-bg);  color:var(--ps-pending-fg);  }
.ps-public   { background:var(--ps-public-bg);   color:var(--ps-public-fg);   }
.ps-internal { background:var(--ps-internal-bg); color:var(--ps-internal-fg); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border:none; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; cursor:pointer;
  font-family:inherit; transition:all .15s;
  white-space:nowrap; text-decoration:none; line-height:1;
}
.btn:hover { filter:brightness(1.08); }
.btn:active { transform:scale(.97); }
.btn-primary   { background:var(--accent);    color:#fff; }
.btn-secondary { background:var(--surface-alt); color:var(--text); border:1px solid var(--border); }
.btn-success   { background:#16a34a; color:#fff; }
.btn-danger    { background:#dc2626; color:#fff; }
.btn-warning   { background:#d97706; color:#fff; }
.btn-ghost     { background:transparent; color:var(--text-muted); border:1px solid var(--border); }
.btn-sm        { padding:5px 11px; font-size:12px; }
.btn-xs        { padding:3px 8px;  font-size:11px; }
.btn-icon-only { padding:6px 8px; }
.btn:disabled  { opacity:.5; cursor:not-allowed; pointer-events:none; }

/* ── Form controls ───────────────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-row.cols-3 { grid-template-columns:1fr 1fr 1fr; }

.form-label {
  display:block; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px;
  color:var(--text-muted); margin-bottom:5px;
}
.form-label.required::after { content:' *'; color:#dc2626; }

.form-control {
  width:100%; padding:9px 12px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:13px; font-family:inherit;
  background:var(--surface); color:var(--text);
  transition:border-color .15s,box-shadow .15s;
}
.form-control:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.form-control:disabled {
  background:var(--surface-alt); color:var(--text-muted); cursor:not-allowed;
}
textarea.form-control { resize:vertical; min-height:80px; }
select.form-control { cursor:pointer; }

.form-hint { font-size:11px; color:var(--text-muted); margin-top:4px; }

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.filter-bar {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:10px 20px; display:flex; gap:8px;
  flex-wrap:wrap; align-items:center; flex-shrink:0;
}
.filter-bar .form-control { padding:7px 10px; }
.filter-bar input[type=text] { flex:1; min-width:160px; }
.filter-bar select { min-width:130px; }
.filter-bar input[type=date] { width:140px; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  z-index:1000; display:flex; align-items:center;
  justify-content:center; padding:20px;
  backdrop-filter:blur(3px);
}
.modal-overlay.hidden { display:none; }

.modal {
  background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); width:100%; max-width:780px;
  max-height:90vh; display:flex; flex-direction:column; overflow:hidden;
}
.modal-sm { max-width:440px; }

.modal-header {
  padding:18px 24px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.modal-header h2 { font-size:16px; font-weight:700; flex:1; }

.modal-close {
  background:none; border:none; color:var(--text-muted);
  font-size:18px; cursor:pointer; padding:4px;
  border-radius:6px; line-height:1; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover { background:var(--surface-alt); color:var(--text); }

.modal-tabs {
  display:flex; border-bottom:1px solid var(--border);
  background:var(--surface-alt); flex-shrink:0;
}
.modal-tab {
  padding:10px 20px; font-size:13px; font-weight:600;
  color:var(--text-muted); cursor:pointer; border:none;
  background:none; font-family:inherit;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .15s;
}
.modal-tab.active {
  color:var(--accent); border-bottom-color:var(--accent);
  background:var(--surface);
}
.modal-tab-panel { display:none; }
.modal-tab-panel.active { display:block; }

.modal-body { padding:20px 24px; overflow-y:auto; flex:1; }
.modal-footer {
  padding:14px 24px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px;
  flex-shrink:0; background:var(--surface);
}

/* ── Toast notifications ─────────────────────────────────────────────────── */
#toast-container {
  position:fixed; bottom:24px; right:24px; z-index:2000;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  padding:12px 18px; border-radius:var(--radius-sm); font-size:13px;
  font-weight:500; color:#fff; box-shadow:var(--shadow-md);
  pointer-events:auto; display:flex; align-items:center; gap:8px;
  max-width:340px; animation:toast-in .25s ease;
}
.toast-success { background:#16a34a; }
.toast-error   { background:#dc2626; }
.toast-info    { background:var(--accent); }
@keyframes toast-in  { from { transform:translateY(8px); opacity:0; } }
@keyframes toast-out { to   { transform:translateY(8px); opacity:0; } }

/* ── Confirm dialog ──────────────────────────────────────────────────────── */
.confirm-dialog { text-align:center; padding:8px 0 4px; }
.confirm-dialog .confirm-icon { font-size:36px; color:#dc2626; margin-bottom:12px; }
.confirm-dialog p { font-size:14px; color:var(--text-muted); line-height:1.6; }
.confirm-dialog strong { color:var(--text); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:768px) {
  .filter-bar input[type=text] { min-width:100%; flex-basis:100%; }
  .filter-bar select, .filter-bar input[type=date] { flex:1; min-width:0; }
  .form-row { grid-template-columns:1fr; }
  .modal { margin:0; max-height:100vh; border-radius:0; }
}