/* ============================================================
   Color palette — dark (default) and light, switchable at runtime.
   Softened from the original harsh black/neon-blue combo: a warmer
   near-black instead of pure black, a calmer teal accent instead of
   saturated blue, and a full light theme as an alternative.
   ============================================================ */
/* ============================================================
   Color palette — built from Tech Around Appliance's actual logo
   (sampled directly: navy #0A0C3C, gold #F4E007). Dark theme pairs navy
   background with gold accents (matches the logo's fill/outline
   combination exactly); light theme pairs a white background with navy
   as the primary color -- the same two colors, just which one leads
   changes with the theme.
   ============================================================ */
:root {
  --bg: #0a0c3c;
  --panel: #12154a;
  --panel-2: #191d5c;
  --border: #2a2f70;
  --text: #f2f3f8;
  --muted: #9ba0c4;
  --accent: #f4e007;
  --accent-2: #d8c700;
  --btn-primary-text: #0a0c3c;
  --success: #4ade80;
  --success-bg: #143424;
  --success-border: #1f5734;
  --error: #f28b8b;
  --error-bg: #3a1a1a;
  --error-border: #5a2626;
  --warn: #e8a94f;
  --radius: 10px;
}

:root[data-theme="light"] {
  --bg: #fafafc;
  --panel: #ffffff;
  --panel-2: #f1f2f7;
  --border: #e1e3ee;
  --text: #0a0c3c;
  --muted: #5b5f82;
  --accent: #0a0c3c;
  --accent-2: #05061e;
  --btn-primary-text: #ffffff;
  --success: #1a9a53;
  --success-bg: #e7f8ef;
  --success-border: #b7ecd0;
  --error: #d84343;
  --error-bg: #fdeded;
  --error-border: #f6c9c9;
  --warn: #b3720a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background-color .15s, color .15s;
}

/* ============================================================
   Top bar & mobile navigation
   ============================================================ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.brand { color: var(--text); font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  width: 38px; height: 38px; border-radius: 8px; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.topnav {
  display: none; /* hidden by default, opened via hamburger on mobile */
  flex-direction: column; gap: 2px; padding: 10px 16px 14px;
  background: var(--panel); border-bottom: 1px solid var(--border);
}
.topnav.open { display: flex; }
.topnav a {
  color: var(--text); text-decoration: none; font-size: .95rem;
  padding: 11px 8px; border-radius: 8px;
}
.topnav a:hover, .topnav a:active { background: var(--panel-2); color: var(--accent); }
/* A nav link styled as a button (e.g. "+ New Job") must let .btn/.btn-primary
   fully control its color -- ".topnav a" above is more specific than
   ".btn-primary" alone (it combines a class + an element selector), so
   without this override, the button's text silently inherited the plain
   nav-link text color instead of its intended button text color. In the
   light theme specifically, --text and --accent are both navy, so a
   navy-on-navy button rendered with genuinely invisible text -- this was
   a real bug, not a visual preference. */
.topnav a.btn { color: var(--btn-primary-text); }
.topnav a.btn-ghost { color: var(--text); }
.topnav .btn { margin: 6px 0; text-align: center; }
.whoami { color: var(--muted); font-size: .8rem; padding: 8px; }

@media (min-width: 860px) {
  .icon-btn#nav-toggle { display: none; }
  .topnav {
    display: flex !important; flex-direction: row; align-items: center; gap: 14px;
    padding: 14px 24px; border-bottom: none; background: transparent;
    max-width: 1100px; margin: 0 auto;
  }
  .topnav a { padding: 4px 2px; }
  .whoami { border-left: 1px solid var(--border); padding-left: 10px; }
  .topnav .btn { margin: 0; }
}

.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
@media (min-width: 860px) { .container { padding: 24px; } }

h1 { font-size: 1.25rem; margin-bottom: 16px; word-break: break-word; }
@media (min-width: 860px) { h1 { font-size: 1.4rem; } }
h2 { font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }
h3 { font-size: .95rem; margin: 18px 0 8px; }

.btn {
  display: inline-block; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); text-decoration: none; cursor: pointer; font-size: .9rem;
  min-height: 40px; line-height: 1.2;
}
.btn-primary { background: var(--accent); border-color: var(--accent-2); color: var(--btn-primary-text); font-weight: 700; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 6px 10px; font-size: .8rem; min-height: 34px; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: .9rem; }
.flash-success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.flash-error { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); }

/* Toast notifications: fixed position so they float above the page
   instead of taking up space in it -- previously flash messages sat
   inline at the very top of the page, which combined with every save
   redirecting back to the top of the page, made every save feel like an
   annoying jolt back to the top just to see a message that was often
   already off-screen by the time you'd scrolled back up. Auto-dismissing
   fixes the "how do I get rid of this" half of that; the scroll-preserving
   redirect (see job_detail.html anchors) fixes the "why did the page jump" half. */
#toast-container {
  position: fixed; top: 16px; right: 16px; z-index: 1000;
  display: flex; flex-direction: column; gap: 8px; max-width: min(90vw, 380px);
}
.toast {
  margin-bottom: 0; box-shadow: 0 4px 16px rgba(0,0,0,.25);
  animation: toast-in .2s ease-out, toast-out .3s ease-in 2.2s forwards;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filters input, .filters select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 10px; border-radius: 8px; font-size: .95rem; min-height: 42px;
}
.filters input { flex: 1; min-width: 160px; }

.job-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .job-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.job-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; text-decoration: none; color: var(--text); display: block;
  transition: border-color .15s;
}
.job-card:hover { border-color: var(--accent); }
.job-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.job-number { font-weight: 700; }
.status-badge { color: white; font-size: .72rem; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
.status-badge.large { font-size: .85rem; padding: 5px 12px; }
.job-customer { font-size: 1rem; margin-bottom: 4px; }
.job-meta { color: var(--muted); font-size: .85rem; margin-bottom: 10px; }
.job-total { font-weight: 700; color: var(--success); }

.empty { color: var(--muted); }

.form-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; max-width: 480px; display: flex; flex-direction: column; gap: 14px;
}
.form-card label, .part-form label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--muted); }
.form-card input, .form-card textarea, .form-card select, .part-form input, .part-form select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 11px 10px; border-radius: 8px; font-size: .95rem; font-family: inherit; min-height: 42px;
}
.tag { color: var(--accent); }
.form-footer-link { margin-top: 22px; color: var(--muted); font-size: .9rem; }

.job-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.job-columns { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 860px) { .job-columns { grid-template-columns: 1fr 1.3fr; gap: 20px; } }
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px;
}
.panel p { margin: 6px 0; font-size: .9rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-form select { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 10px; min-height: 42px; }

.audit-list { list-style: none; padding: 0; margin: 0; font-size: .82rem; color: var(--muted); }
.audit-list li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.audit-time { color: var(--muted); margin-right: 6px; }

/* Tables scroll horizontally WITHIN themselves on narrow screens,
   instead of forcing the whole page to scroll sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
.parts-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 480px; }
.table-scroll .parts-table { margin-bottom: 0; }
.parts-table th, .parts-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.parts-table th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; white-space: nowrap; }
.total-label { text-align: right; font-weight: 600; }
.total-value { font-weight: 700; color: var(--success); }

.part-form { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .part-form { grid-template-columns: 1fr 1fr; } }
.part-form input, .part-form select { grid-column: span 1; }
.price-preview { font-size: .9rem; color: var(--muted); }
@media (min-width: 560px) { .price-preview, .part-form > .btn { grid-column: span 2; } }

@media (max-width: 800px) {
  .job-columns { grid-template-columns: 1fr; }
}

.subtitle { color: var(--muted); font-size: .9rem; margin: -8px 0 18px; }
.subtitle-inline { color: var(--muted); font-weight: 400; font-size: .85rem; }
.audit-who { color: var(--muted); }