/*
 * app.css — brings logged-in app pages onto the shared Snow Contractor design.
 *
 * Load it LAST in <head> (after modern-theme.css and the page's own <style>),
 * so equal-specificity rules here win over the old terminal styles.
 *
 * Scope: colour, typography, borders and backgrounds ONLY. Nothing here sets
 * display, visibility, position, size or anything JavaScript reads, so page
 * behaviour cannot change. Per-page green/black values that JS writes via
 * element.style are deliberately left alone.
 *
 * Opt-in per page: only pages that link this file are affected. Billing,
 * login/auth and payment pages do not link it.
 */
@import url("tokens.css");

/* 1. Point modern-theme.css's variables at the shared tokens. Everything
 *    modern-theme already styles (body, buttons, .container, .section, forms)
 *    follows automatically. Declared after modern-theme, so this also replaces
 *    its prefers-color-scheme:dark palette: the app is light everywhere. */
:root {
  --primary-color:   var(--c-accent);
  --primary-hover:   var(--c-accent-hover);
  --primary-light:   var(--c-accent);
  --secondary-color: var(--c-ink-3);
  --accent-color:    var(--c-ok);
  --danger-color:    var(--c-error);
  --warning-color:   #b45309;            /* 5.0:1 on white */
  --bg-primary:      var(--c-surface);
  --bg-secondary:    var(--c-bg-soft);
  --bg-tertiary:     var(--c-bg-tint);
  --text-primary:    var(--c-ink);
  --text-secondary:  var(--c-ink-2);
  --text-muted:      var(--c-ink-3);     /* was #94a3b8, 2.6:1 — now 5.9:1 */
  --border-color:    var(--c-line);
  --font-mono:       ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 2. Base — replaces the per-page black background / green monospace text. */
html { -webkit-text-size-adjust: 100%; }
body { background-color: var(--c-bg-soft); color: var(--c-ink); font-family: var(--font-sans); }
h1, h2, h3, h4, h5, h6 {
  color: var(--c-ink) !important;       /* beats the old "#6 contrast fix" green !important */
  border-bottom-color: var(--c-line);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
}
.muted { color: var(--c-ink-3) !important; }
a { color: var(--c-accent); }
a:hover { color: var(--c-accent-hover); }
code, pre, kbd { font-family: var(--font-mono); }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

/* 3. Form controls */
input, select, textarea {
  background-color: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-line-strong);
  font-family: var(--font-sans);
}
input::placeholder, textarea::placeholder { color: var(--c-ink-3); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--c-accent); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--c-accent); }
button, .btn, .button { font-family: var(--font-sans); }
button:hover, .btn:hover, .button:hover { border-color: var(--c-accent-hover); }

/* 4. Tables */
table { background-color: var(--c-surface); color: var(--c-ink); border-color: var(--c-line); }
th, td { border-color: var(--c-line); color: inherit; }
th { background-color: var(--c-bg-soft); color: var(--c-ink); }
tr:nth-child(even) { background-color: #f8fafc; }
tr:hover { background-color: var(--c-bg-tint); }

/* 5. Panels the old theme painted black with a green border. */
.container, .section, .card, .modal-content, .dialog, .filters, .filter-section, .summary,
.info-box, .form-container, .password-section, .header, .stat-box, .property-item,
.property-selector, .dashboard-switcher, .form-group {
  background-color: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-line);
}
.modal, .overlay { background-color: rgba(15, 29, 43, .55); }
.back-link, .back-button { color: var(--c-accent); border-color: var(--c-accent); background-color: var(--c-surface); font-family: var(--font-sans); }
.back-link:hover, .back-button:hover { background-color: var(--c-bg-tint); color: var(--c-accent-hover); }
.back-btn, .back-btn:hover { color: var(--c-on-accent) !important; border-color: transparent; font-family: var(--font-sans); }  /* modern-theme paints it --secondary-color and forces link colour */
.error { color: var(--c-error); }
.stat-value, .stat-box .value { color: var(--c-accent); }
.loading, .empty-state { color: var(--c-ink-3); }
label { color: var(--c-ink); }
.info-label { color: var(--c-ok); }

/* 6. Page-specific classes from the terminal theme, mostly rendered from API data
 *    (cards, list rows, status chips). Same specificity as the page rules, loaded later. */
.pending-user-card, .identity-badge, .status-section, .crew-card, .event-card, .event-dates, .stat-item,
.property-card, .ticket-status, .filter-bar, .conversations-list, .conversation-item, .messages-container {
  background-color: var(--c-surface); color: var(--c-ink); border-color: var(--c-line);
}
.event-dates, .stat-item, .identity-badge, .ticket-status { background-color: var(--c-bg-soft); }
.conversation-item:hover { background-color: var(--c-bg-tint); border-color: var(--c-accent); }
.role-select, .notes-input, .equipment-input, .filter-select,
.filter-group select, .filter-group input,
.form-group input, .form-group select, .form-group textarea {
  background-color: var(--c-surface); color: var(--c-ink); border-color: var(--c-line-strong); font-family: var(--font-sans);
}
.form-group label { color: var(--c-ink); }
.success, .status-checked-in, .event-card.active, .event-status.active, .active-event-banner,
.btn.active-event, .conversation-item.active, .message.inbound {
  background-color: var(--c-ok-bg); color: var(--c-ink); border-color: var(--c-ok);
}
.success, .status-checked-in, .event-status.active { color: var(--c-ok); }
.user-info h3, .crew-name, .event-header h3, .active-event-banner h3, .info-box h3,
.property-name, .conversation-item .user-name, .date-value { color: var(--c-ink); }
.crew-info, #message { color: var(--c-ink-2); }
.cost-column { color: var(--c-ok); }
.close { color: var(--c-ink-3); }
.close:hover { color: var(--c-accent); }
.start-btn, .finish-btn, .action-btn {
  background-color: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); font-family: var(--font-sans);
}
.action-btn:hover { background-color: var(--c-accent-hover); }
.remove-btn, .remove-btn:hover { color: var(--c-on-accent) !important; border-color: transparent; }  /* modern-theme paints it --danger-color */

/* 7. Inline style="" attributes left over from the terminal theme (static markup and
 *    innerHTML templates). Colour/border/background/font only — never layout. */
[style*="#80ff80"], [style*="#00ff00"], [style*="#00cc00"], [style*="#66b3ff"] { color: var(--c-ink) !important; border-color: var(--c-line) !important; }
[style*="background:#000"], [style*="background: #000"], [style*="background-color:#000"], [style*="background-color: #000"],
[style*="background-color: #111"], [style*="background-color:#111"], [style*="background: #111"], [style*="#0a0a0a"],
[style*="background: #1a1a1a"], [style*="background:#1a1a1a"], [style*="background-color: #1a1a1a"], [style*="background-color:#1a1a1a"] {
  background-color: var(--c-surface) !important; color: var(--c-ink) !important;
}
[style*="color: #888"], [style*="color:#888"], [style*="color: #666"], [style*="color:#666"], [style*="color:#8aa"], [style*="color: #8aa"] { color: var(--c-ink-3) !important; }
[style*="Courier"], [style*="monospace"] { font-family: var(--font-sans) !important; }