/* ============================================================
   AskForeman — Admin reskin (v2 design language)
   Override-only stylesheet loaded AFTER admin.html's inline CSS.
   Strategy:
     1. Re-declare the v2 design tokens (copied from v2/app.css).
     2. Remap the legacy admin CSS variables (--concrete-gray,
        --safety-yellow, --light-gray, ...) onto v2 tokens so the
        page's inline styles and JS-injected markup restyle
        themselves automatically.
     3. Targeted overrides for hardcoded light-theme colors.
   No markup is hidden or repositioned; all JS left untouched.
   ============================================================ */

:root {
  /* ---- v2 tokens (copied from v2/app.css) ---- */
  --bg: #14171c;
  --bg-deep: #0f1216;
  --surface: #1b1f26;
  --surface-2: #21262f;
  --surface-3: #2a303b;
  --border: #2e3540;
  --border-soft: #262c36;
  --text: #e8eaed;
  --text-dim: #9fa8b4;
  --text-faint: #6b7480;
  --accent: #ff7a1a;
  --accent-hi: #ff9346;
  --accent-dim: rgba(255, 122, 26, 0.14);
  --accent-glow: rgba(255, 122, 26, 0.35);
  --on-accent: #16181c;
  --blue-line: rgba(96, 138, 189, 0.055);
  --blue-line-hi: rgba(96, 138, 189, 0.10);
  --ok: #37c26e;
  --err: #ff5a52;
  --warn: #ffc24b;
  --scrollbar: #3a4250;
  --overlay-bg: rgba(10, 12, 15, 0.72);
  --topbar-bg: rgba(20, 23, 28, 0.92);
  --row-hover: rgba(255, 255, 255, 0.02);
  --hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
  --radius: 10px;
  --radius-lg: 14px;
  --font: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head: "Barlow Semi Condensed", "Barlow", -apple-system, sans-serif;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55);

  /* ---- Legacy admin variables remapped to v2 tokens ----
     These names are used throughout admin.html's inline styles and
     the HTML its JavaScript injects, so remapping them restyles the
     dynamic content without touching any JS. */
  --construction-orange: var(--accent);
  --safety-yellow: var(--accent);
  --concrete-gray: var(--text);
  --steel-gray: var(--text-dim);
  --blueprint-blue: #5b8fd6;
  --hi-vis-green: var(--ok);
  --warning-red: var(--err);
  --white: var(--surface);
  --light-gray: var(--surface-2);
  --medium-gray: var(--border);
  --dark-gray: var(--on-accent);
}

[data-theme="light"] {
  --bg: #eef0f3;
  --bg-deep: #e4e7ec;
  --surface: #ffffff;
  --surface-2: #f4f5f8;
  --surface-3: #e9ecf1;
  --border: #ccd3dc;
  --border-soft: #dde2e9;
  --text: #1e2530;
  --text-dim: #4b5565;
  --text-faint: #7d8794;
  --accent: #e86a00;
  --accent-hi: #c95c00;
  --accent-dim: rgba(232, 106, 0, 0.10);
  --accent-glow: rgba(232, 106, 0, 0.28);
  --on-accent: #ffffff;
  --blue-line: rgba(70, 120, 180, 0.09);
  --blue-line-hi: rgba(70, 120, 180, 0.15);
  --ok: #188a4c;
  --err: #d3372e;
  --warn: #a87400;
  --scrollbar: #b7c0cc;
  --overlay-bg: rgba(35, 42, 54, 0.45);
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --row-hover: rgba(30, 37, 48, 0.035);
  --hover-shadow: 0 8px 24px rgba(30, 40, 60, 0.12);
  --shadow: 0 4px 6px rgba(30, 40, 60, 0.10);
  --shadow-lg: 0 18px 50px rgba(30, 40, 60, 0.20);
}

/* ============ Base ============ */

body {
  font-family: var(--font);
  color: var(--text);
  background-color: var(--bg);
  /* Blueprint grid (v2) */
  background-image:
    linear-gradient(var(--blue-line-hi) 1px, transparent 1px),
    linear-gradient(90deg, var(--blue-line-hi) 1px, transparent 1px),
    linear-gradient(var(--blue-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blue-line) 1px, transparent 1px);
  background-size: 132px 132px, 132px 132px, 22px 22px, 22px 22px;
}

h1, h2, h3, h4, h5 { font-family: var(--font-head); letter-spacing: 0.01em; }

::selection { background: var(--accent-glow); }

* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

code {
  background: var(--surface-3);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.85em;
}

/* ============ New slim v2 admin topbar (added markup) ============ */

.v2-admin-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1.25rem;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.v2-admin-topbar .hardhat-mini {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}
.v2-admin-topbar strong {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}
.v2-admin-topbar strong span { color: var(--text-dim); font-weight: 600; }
.v2-admin-topbar .v2-topbar-spacer { flex: 1; }
.v2-admin-topbar .v2-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: color 0.13s, border-color 0.13s, background 0.13s;
}
.v2-admin-topbar .v2-back-link:hover {
  color: var(--accent-hi);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ============ Login screen ============ */

.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.login-box h2 { color: var(--text); }
.login-box input {
  color: var(--text);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.13s, box-shadow 0.13s;
}
.login-box input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.login-box button {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--on-accent);
  border: 1px solid var(--accent-glow);
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  box-shadow: 0 2px 12px rgba(255, 122, 26, 0.22);
  transition: filter 0.13s, box-shadow 0.13s, transform 0.13s;
}
.login-box button:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 18px var(--accent-glow);
  transform: translateY(-1px);
}

/* ============ Legacy header (inside admin container) ============ */

.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  padding: 0.85rem 1.5rem;
}
.header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

/* ============ Buttons ============ */

.btn {
  font-family: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.13s ease, border-color 0.13s ease, filter 0.13s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); background: var(--surface-3); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  border-color: var(--accent-glow);
  color: var(--on-accent);
  box-shadow: 0 2px 12px rgba(255, 122, 26, 0.22);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  filter: brightness(1.08);
  box-shadow: 0 4px 18px var(--accent-glow);
}

.btn-success { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
.btn-success:hover:not(:disabled) { background: var(--ok); filter: brightness(1.1); }

.btn-danger { background: transparent; border-color: var(--err); color: var(--err); }
.btn-danger:hover:not(:disabled) { background: rgba(255, 90, 82, 0.12); }

/* Hardcoded one-off button colors in existing markup, harmonized.
   (Attribute-substring matches leave the JS handlers untouched.) */
.btn[style*="background: #6c757d"] {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.btn[style*="background: #2196F3"] {
  background: var(--blueprint-blue) !important;
  color: var(--on-accent) !important;
  border-color: transparent !important;
}
.btn[style*="background:#e0e0e0"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* ============ Panels & layout ============ */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.panel h2 {
  color: var(--text);
  border-bottom: 2px solid var(--accent);
  font-weight: 700;
}

/* Project list */
.client-item {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  transition: background 0.13s, border-color 0.13s, transform 0.13s;
}
.client-item:hover {
  background: var(--surface-3);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.client-item.selected {
  background: var(--accent-dim);
  border-color: var(--accent);
}

/* Tabs */
.tabs { border-bottom: 2px solid var(--border); }
.tab {
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-head);
  font-size: 1rem;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.13s, background 0.13s, border-color 0.13s;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.active {
  background: var(--surface-2);
  color: var(--accent-hi);
  border-bottom: 2px solid var(--accent);
}

/* ============ Forms ============ */

.form-group label { color: var(--text-dim); }

.form-group input,
.form-group textarea,
.form-group select,
.change-rates-input {
  font-family: inherit;
  color: var(--text);
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.13s, box-shadow 0.13s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.change-rates-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-group select option { background: var(--surface-2); color: var(--text); }

/* Bare inputs/selects injected by JS (category pickers, rename fields, ...) */
.panel input[type="text"],
.panel input[type="number"],
.panel textarea,
.panel select {
  color: var(--text);
  background: var(--bg-deep);
  border-color: var(--border);
}
.panel select option { background: var(--surface-2); color: var(--text); }
.panel input[readonly] { color: var(--text-faint); }

/* Readonly folder-name field (inline background: #f0f0f0) */
input[style*="background: #f0f0f0"] {
  background: var(--surface-3) !important;
  color: var(--text-dim) !important;
}

input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); }

/* ============ Tables ============ */

.document-table th {
  background: var(--surface-2);
  color: var(--text-dim);
  font-family: var(--font-head);
  letter-spacing: 0.03em;
}
.document-table tbody tr:hover { background: var(--row-hover); }

/* Rows flagged with hardcoded light warning tints by JS */
tr[style*="background-color: #ffebee"],
td[style*="background-color: #ffebee"] {
  background-color: rgba(255, 90, 82, 0.10) !important;
}
tr[style*="background-color: #fff3e0"],
td[style*="background-color: #fff3e0"] {
  background-color: rgba(255, 194, 75, 0.10) !important;
}

/* Table header row injected with inline background: #f0f0f0 */
tr[style*="background: #f0f0f0"] {
  background: var(--surface-2) !important;
}

/* ============ Upload areas ============ */

.file-upload-area {
  background: var(--surface-2);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-dim);
}
.file-upload-area:hover,
.file-upload-area.dragover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--text);
}

/* ============ Status & notice blocks ============ */

.status-success {
  background: rgba(55, 194, 110, 0.12);
  color: var(--ok);
  border: 1px solid rgba(55, 194, 110, 0.35);
  border-radius: var(--radius);
}
.status-error {
  background: rgba(255, 90, 82, 0.12);
  color: var(--err);
  border: 1px solid rgba(255, 90, 82, 0.35);
  border-radius: var(--radius);
}
.status-warning {
  background: rgba(255, 194, 75, 0.10);
  color: var(--warn);
  border: 1px solid rgba(255, 194, 75, 0.35);
  border-radius: var(--radius);
}

.file-limit-warning {
  background: rgba(255, 194, 75, 0.08);
  border: 1px solid rgba(255, 194, 75, 0.30);
  border-radius: var(--radius);
  color: var(--warn);
}
.file-limit-warning strong { color: var(--warn); }

.grounding-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.grounding-panel-title { color: var(--text); }
.grounding-doc-pill {
  background: var(--accent-dim);
  color: var(--text);
  transition: background 0.13s, color 0.13s;
}
.grounding-doc-pill:hover { background: var(--accent-glow); color: var(--text); }

/* ============ Hardcoded light backgrounds in static + injected markup ============ */

/* "Search Index Management" box, upload-progress modal card, index stats,
   inline notice blocks — anything the JS or static markup paints white/cream. */
div[style*="background: white"] {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
div[style*="background: #fff3e0"] {
  background: var(--surface-2) !important;
  border-color: var(--accent-glow) !important;
}
div[style*="background: #ffebee"] {
  background: rgba(255, 90, 82, 0.10) !important;
  border-color: rgba(255, 90, 82, 0.40) !important;
}

/* ============ Loading overlay & spinner ============ */

.loading-overlay { background: var(--overlay-bg); backdrop-filter: blur(3px); }
.spinner {
  border: 5px solid var(--surface-3);
  border-top: 5px solid var(--accent);
}

/* ============ Document preview modal (js/document-preview-modal.js) ============ */
/* Its styles are injected at runtime after this sheet, hence !important. */

.doc-preview-container {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.doc-preview-header {
  background: var(--surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.doc-preview-title { font-family: var(--font-head) !important; }
.doc-preview-action-btn {
  background: var(--surface-3) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.doc-preview-action-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent-hi) !important;
}
.doc-preview-close {
  background: transparent !important;
  color: var(--text-dim) !important;
}
.doc-preview-close:hover { color: var(--err) !important; }