/* ============================================================
   Local Appliance Repair CRM — Design System
   ============================================================
   Direction: a field-service operations tool, not a generic
   SaaS dashboard. Deep navy structure (uniform, trust) with a
   single warm copper accent (tools, brass fittings, warranty
   seals) used sparingly for anything that means "act on this."
   Numbers, invoice IDs, and job codes are set in a monospace
   face throughout — this is read like a ledger, not a brochure.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  /* Structure */
  --navy:#16233d; --navy-2:#1e3155; --navy-3:#0f1a2e;
  --ink:#1c1e24; --muted:#6f6a5e; --muted-2:#8a8578;

  /* Surface */
  --paper:#f6f4ef; --card:#ffffff; --line:#e6e1d5; --line-soft:#efece3;

  /* Signature accent */
  --copper:#bd5f2c; --copper-dark:#994c22; --copper-light:#e29a68; --copper-tint:#fbeade;

  /* Semantic status (muted, not neon) */
  --ok:#3a7d54;    --ok-tint:#e8f3ea;
  --danger:#b23b2e; --danger-tint:#fbeae7;
  --warn:#b3791f;  --warn-tint:#fbf1de;
  --info:#3c5f8a;  --info-tint:#e9f0f8;
  --plum:#6a5490;  --plum-tint:#f0ecf7;
  --teal:#3d7a75;  --teal-tint:#e7f3f1;
  --grey:#6b6f76;  --grey-tint:#f1f1ef;

  --radius:10px; --radius-sm:6px;
  --shadow:0 1px 2px rgba(22,35,61,.06), 0 4px 16px rgba(22,35,61,.06);
  --shadow-sm:0 1px 2px rgba(22,35,61,.08);
}

*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--paper);font-family:'IBM Plex Sans',Arial,sans-serif;color:var(--ink);font-size:14px;line-height:1.45}
a{text-decoration:none;color:inherit}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--copper); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

h1,h2,h3,.page-title,.brand-title{font-family:'Space Grotesk',sans-serif;letter-spacing:-.01em}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{
  width:280px;background:linear-gradient(175deg,var(--navy) 0%,var(--navy-3) 100%);
  color:#f3f1ea;position:fixed;top:0;bottom:0;left:0;padding:20px 14px;overflow:auto;
  border-right:1px solid rgba(0,0,0,.2);
}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:26px;padding:0 4px}
.logo{font-size:30px;line-height:1}
.brand-title{font-size:18px;font-weight:700;line-height:1.2;color:#fff}
.brand-sub{font-size:12px;color:var(--copper-light);margin-top:3px;font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;text-transform:uppercase}

.nav a{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;margin:2px 0;
  font-size:14px;font-weight:500;color:#c9cede;border-left:3px solid transparent;
}
.nav a .ico{width:22px;text-align:center;font-size:17px;opacity:.9}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:rgba(189,95,44,.16);color:#fff;font-weight:600;border-left:3px solid var(--copper)}

.import-box{
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);margin-top:24px;padding:14px;
  background:rgba(255,255,255,.04);
}
.import-box h3{margin:0 0 12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--copper-light)}
.import-box p{display:flex;justify-content:space-between;margin:9px 0;font-size:12px;color:#c9cede}
.import-box p b{color:#fff;font-family:'IBM Plex Mono',monospace;font-weight:500}

.main{margin-left:280px;width:calc(100% - 280px)}
.topbar{
  height:64px;background:var(--card);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:3;
}
.top-left{display:flex;align-items:center;gap:20px}
.menu{font-size:22px;color:var(--muted)}
.page-title{font-size:19px;font-weight:600;color:var(--ink)}
.top-right{display:flex;align-items:center;gap:20px;font-size:13px;color:var(--muted);font-weight:500}
.content{padding:22px}

/* ---------- Cards & stats ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.summary{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-bottom:18px}

.stat{padding:16px;min-height:130px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.stat-main{display:flex;gap:13px;align-items:center}
.circle{
  width:44px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:19px;flex:0 0 auto;
}
.c-blue{background:var(--info-tint);color:var(--info)}
.c-red{background:var(--danger-tint);color:var(--danger)}
.c-orange{background:var(--warn-tint);color:var(--warn)}
.c-purple{background:var(--plum-tint);color:var(--plum)}
.c-teal{background:var(--teal-tint);color:var(--teal)}
.c-green{background:var(--ok-tint);color:var(--ok)}
.c-grey{background:var(--grey-tint);color:var(--grey)}

.stat:has(.c-blue)::before{background:var(--info)}
.stat:has(.c-red)::before{background:var(--danger)}
.stat:has(.c-orange)::before{background:var(--warn)}
.stat:has(.c-purple)::before{background:var(--plum)}
.stat:has(.c-teal)::before{background:var(--teal)}
.stat:has(.c-green)::before{background:var(--ok)}
.stat:has(.c-grey)::before{background:var(--grey)}

.stat-num{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600;color:var(--ink);line-height:1}
.stat-label{font-weight:600;font-size:13px;margin-top:2px}
.stat-sub{font-size:11px;color:var(--muted);margin-top:3px}

.view{border-top:1px solid var(--line-soft);padding-top:11px;font-weight:600;font-size:13px}
.view.blue{color:var(--info)}.view.red{color:var(--danger)}.view.orange{color:var(--warn)}
.view.purple{color:var(--plum)}.view.teal{color:var(--teal)}.view.green{color:var(--ok)}.view.grey{color:var(--grey)}

.panel{padding:18px;margin-bottom:14px}
.panel h2{margin:0 0 14px;font-size:19px;font-weight:600}
.panel h3{margin:0 0 12px;font-size:16px;font-weight:600}

/* ---------- Forms ---------- */
.filters{display:grid;grid-template-columns:2fr 1.2fr 1.2fr 1.2fr auto;gap:12px;margin-bottom:14px}
label{font-weight:600;display:block;margin:10px 0 5px;font-size:13px;color:var(--ink)}
input,select,textarea{
  border:1px solid #d8d2c4;border-radius:var(--radius-sm);padding:9px 11px;font-family:inherit;font-size:14px;
  background:#fff;color:var(--ink);width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--copper)}
textarea{min-height:70px}

.btn,button{
  display:inline-block;border:1px solid var(--navy);color:var(--navy);background:#fff;
  border-radius:var(--radius-sm);padding:9px 16px;font-weight:600;font-size:13px;cursor:pointer;text-align:center;
  font-family:'IBM Plex Sans',sans-serif;
}
.btn:hover,button:hover{background:var(--paper)}
.btn.fill,button.fill{background:var(--copper);color:#fff;border-color:var(--copper)}
.btn.fill:hover,button.fill:hover{background:var(--copper-dark)}
.btn.green{border-color:var(--ok);color:var(--ok)}
.btn.red{border-color:var(--danger);color:var(--danger)}
.btn.teal{border-color:var(--teal);color:var(--teal)}
.btn.orange{border-color:var(--warn);color:var(--warn)}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
th{background:var(--paper);border-bottom:1px solid var(--line);text-align:left;padding:11px 10px;font-weight:600;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
td{border-bottom:1px solid var(--line-soft);padding:12px 10px;vertical-align:top}
tr:hover td{background:#fbfaf7}
.money{font-family:'IBM Plex Mono',monospace;color:var(--danger);font-weight:600}
.link{color:var(--info);font-weight:600}

.badge{display:inline-block;border:1px solid var(--line);border-radius:5px;padding:4px 9px;font-weight:600;font-size:11px;font-family:'IBM Plex Mono',monospace}
.b-orange{border-color:#e0b877;color:var(--warn);background:var(--warn-tint)}
.b-blue{border-color:#a9c2dd;color:var(--info);background:var(--info-tint)}
.b-purple{border-color:#c3b4de;color:var(--plum);background:var(--plum-tint)}
.b-grey{border-color:var(--line);color:var(--grey);background:var(--grey-tint)}
.b-red{border-color:#dbb0aa;color:var(--danger);background:var(--danger-tint)}
.b-green{border-color:#a8cdb2;color:var(--ok);background:var(--ok-tint)}

.small{font-size:12px;color:var(--muted)}.muted{color:var(--muted)}
.bottom-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.widget-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.widget-title h3{margin:0}
.redtxt{color:var(--danger)}.purpletxt{color:var(--plum)}.tealtxt{color:var(--teal)}

.pill{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px}
.rowbtn{text-align:center;margin-top:16px}.wide{min-width:260px}
.footer{text-align:center;font-size:12px;color:var(--muted);padding:10px}

.danger td{background:var(--danger-tint)!important}
.warn td{background:var(--warn-tint)!important}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.form-card{border:1px solid var(--line);border-radius:var(--radius);padding:15px;background:#fdfcfa}

/* ---------- Alert / status banners (used on Update Job + View Job) ---------- */
.alert{background:var(--danger-tint);border:1px solid #e8c4bd;color:#7a281d;padding:11px 14px;border-radius:var(--radius-sm);margin:10px 0;font-size:13px}
.alert.ok{background:var(--ok-tint);border-color:#b6d9bf;color:#215934}
.alert.blue{background:var(--info-tint);border-color:#b7cbe2;color:#1f3a5c}
.ai{background:var(--warn-tint);border:1px solid #e6cd9a;color:#6e4c0f;padding:11px 14px;border-radius:var(--radius-sm);margin:10px 0;font-size:13px}
.hidden{display:none}

/* ---------- Update Job page specifics (job.html) ---------- */
.top{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:4px}
.box{background:var(--paper);border:1px solid var(--line);padding:10px 12px;border-radius:var(--radius-sm);font-size:12px}
.box b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;margin-bottom:3px}
.section{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.section h3{margin:0 0 8px 0;font-size:15px;color:var(--navy);font-weight:600}

@media(max-width:1200px){
  .summary{grid-template-columns:repeat(3,1fr)}
  .bottom-grid{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr}
  .sidebar{position:relative;width:100%}
  .main{margin-left:0;width:100%}
  .app{display:block}
  .top{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
}