/*
 * PeakPro — PMR Design System
 * Theme: Colorado Autumn — Warm cream, aspen gold, rust canyon, sage
 * Typography: Bebas Neue (display) + Freight Text (serif body) + DM Sans (UI)
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@400;500;700&display=swap');

:root {
  /* Colorado Autumn Palette */
  --canvas:    #f5f0e8;        /* warm parchment — page background */
  --surface:   #ede8df;        /* card surfaces */
  --surface-2: #e6e0d6;        /* inset / input bg */
  --surface-3: #ddd6c8;        /* hover states */
  --border:    #c8bfae;        /* warm stone dividers */
  --border-l:  #ddd6c8;        /* light borders */

  /* Text */
  --ink:       #2a1f14;        /* deep walnut — headings */
  --body:      #4a3b2e;        /* warm brown — body text */
  --muted:     #8a7a6a;        /* sage muted */
  --ghost:     #b5a898;        /* placeholders */

  /* PMR Brand — kept exactly */
  --copper:    #da6227;        /* Texan Orange — primary accent */
  --copper-l:  #e87840;
  --copper-d:  #b84e1e;
  --rust:      #5f2412;        /* deep rust — headings/logo */

  /* Autumn accents */
  --aspen:     #c8941a;        /* aspen gold */
  --sage:      #5a7a5c;        /* Colorado sage */
  --sky:       #4a7fa8;        /* mountain sky blue */
  --pine:      #2d5a3d;        /* pine green */

  /* Status */
  --s-pending:   #da6227;      /* copper — pending */
  --s-lead:      #4a7fa8;      /* sky blue */
  --s-approved:  #5a7a5c;      /* sage green */
  --s-progress:  #c8941a;      /* aspen — in progress */
  --s-completed: #2d5a3d;      /* pine */
  --s-invoice:   #7a4fa0;      /* plum */
  --s-closed:    #8a7a6a;      /* stone */

  --completed:   var(--s-completed);
  --lead:        var(--s-lead);
  --approved:    var(--s-approved);

  /* Layout */
  --radius:   6px;
  --radius-l: 12px;
  --radius-xl: 18px;
  --shadow:   0 1px 4px rgba(42,31,20,.12);
  --shadow-m: 0 4px 16px rgba(42,31,20,.14);
  --shadow-l: 0 8px 32px rgba(42,31,20,.18);

  /* Nav heights */
  --nav-top-h: 40px;
  --nav-bot-h: 52px;
  --nav-total: calc(var(--nav-top-h) + var(--nav-bot-h)); /* 92px */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--canvas);
  color: var(--body);
  min-height: 100vh;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════
   DOUBLE NAV
══════════════════════════════════════════════════════ */

/* TOP NAV — utility strip */
.nav-top {
  background: var(--rust);
  height: var(--nav-top-h);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 200;
}

.nav-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.nav-top-release {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(238,233,224,.5);
  cursor: pointer;
  transition: color .15s;
  white-space: nowrap;
}
.nav-top-release:hover { color: var(--canvas); }

.nav-top-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-top-user {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.nav-top-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--copper);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .5px;
  flex-shrink: 0;
}

.nav-top-name {
  font-size: 12px;
  color: var(--canvas);
  font-weight: 500;
  white-space: nowrap;
}

.nav-top-settings {
  background: none;
  border: none;
  color: rgba(238,233,224,.6);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  transition: color .15s;
  font-size: 14px;
}
.nav-top-settings:hover { color: var(--canvas); }

/* BOTTOM NAV — main navigation */
.pmr-topbar {
  background: white;
  border-bottom: 2px solid var(--border-l);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--nav-bot-h);
  position: sticky;
  top: var(--nav-top-h);
  z-index: 199;
  box-shadow: var(--shadow);
}

/* Brand */
.brand-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  margin-right: 20px;
  flex-shrink: 0;
}
.brand-peak {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--copper);
  line-height: 1;
}
.brand-arrow {
  font-size: 12px;
  color: var(--ghost);
  margin: 0 1px;
}
.brand-pmr {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--ink);
  line-height: 1;
}
.brand-wrap:hover .brand-peak { color: var(--copper-l); }
.brand-wrap:hover .brand-pmr  { color: var(--rust); }

/* Nav links */
.pmr-topbar a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.pmr-topbar a:hover { color: var(--ink); background: var(--surface); }
.pmr-topbar a.active { color: var(--copper); }

.pmr-topbar a.btn-new {
  background: var(--copper);
  color: white;
  font-weight: 600;
  margin-left: 4px;
  border-radius: var(--radius);
}
.pmr-topbar a.btn-new:hover { background: var(--copper-l); color: white; }

.pmr-topbar a.btn-ai {
  color: var(--copper);
  border: 1px solid var(--border);
}
.pmr-topbar a.btn-ai:hover { background: var(--copper); color: white; border-color: var(--copper); }

/* Nav search (in progress) */
.nav-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--muted);
  cursor: default;
  margin-left: 8px;
  white-space: nowrap;
}
.nav-search svg { opacity: .5; }

.pmr-topbar .spacer { flex: 1; }
.pmr-topbar .user-info { display: none; } /* moved to top nav */
.pmr-topbar a.logout { display: none; }   /* moved to top nav */

/* Nav dropdown */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown > .nav-drop-btn {
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  background: none;
  border: none;
  font-family: 'DM Sans', sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .15s, background .15s;
}
.nav-dropdown > .nav-drop-btn:hover,
.nav-dropdown > .nav-drop-btn.active { color: var(--ink); background: var(--surface); }
.nav-drop-btn .chevron { font-size: 9px; opacity: .5; transition: transform .2s; }
.nav-dropdown.open .chevron { transform: rotate(180deg); }

.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  min-width: 210px;
  z-index: 300;
  box-shadow: var(--shadow-l);
  overflow: hidden;
  padding: 6px 0;
}
.nav-dropdown.open .nav-drop-menu { display: block; }
.nav-drop-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  color: var(--body);
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.nav-drop-menu a:hover { background: var(--surface); color: var(--ink); }
.nav-drop-menu a.active { color: var(--copper); }
.nav-drop-menu .drop-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.nav-drop-menu .drop-divider { height: 1px; background: var(--border-l); margin: 6px 0; }
.nav-drop-menu .drop-label {
  padding: 6px 16px 2px;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ghost);
}

/* Integration badges in nav */
.integ-badge { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 500; }
.integ-on    { background: rgba(45,90,61,.1); color: var(--pine); border: 1px solid rgba(45,90,61,.25); }
.integ-off   { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }

/* Page title sticky band */
.page-title-band {
  background: white;
  border-bottom: 1px solid var(--border-l);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: calc(var(--nav-top-h) + var(--nav-bot-h));
  z-index: 150;
  box-shadow: 0 1px 0 var(--border-l);
}
.page-title-band h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--ink);
  line-height: 1;
}
.page-title-band .breadcrumb {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.page-title-band .breadcrumb span { color: var(--ghost); }

/* Mobile nav */
.nav-hamburger {
  display: none; background: none; border: none;
  cursor: pointer; padding: 6px;
  flex-direction: column; gap: 4px; flex-shrink: 0;
}
.nav-hamburger span {
  display: block; width: 20px; height: 2px;
  background: var(--muted); border-radius: 2px; transition: all .2s;
}
.nav-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

.nav-drawer { display: none !important; }
.nav-drawer a {
  display: block; padding: 10px 14px; border-radius: var(--radius);
  color: var(--body); text-decoration: none; font-size: 14px;
  font-weight: 500; border: 1px solid transparent;
}
.nav-drawer a:hover  { background: var(--surface); color: var(--ink); }
.nav-drawer a.active { color: var(--copper); }
.nav-drawer a.btn-new { background: var(--copper); color: white; font-weight: 700; text-align: center; }
.nav-drawer a.btn-ai  { border-color: var(--border); color: var(--copper); text-align: center; }
.nav-drawer .nav-divider { height: 1px; background: var(--border-l); margin: 4px 0; }

/* ══════════════════════════════════════════════════════
   NOTIFICATION BELL
══════════════════════════════════════════════════════ */
.notif-wrap { position: relative; }
.notif-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 6px; border-radius: var(--radius); position: relative;
  display: flex; align-items: center; transition: color .15s;
}
.notif-btn:hover { color: var(--ink); }
.notif-badge {
  position: absolute; top: 1px; right: 1px;
  background: var(--copper); color: white;
  font-size: 9px; font-weight: 700; min-width: 16px; height: 16px;
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; padding: 0 3px;
}
.notif-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 320px; background: white; border: 1px solid var(--border);
  border-radius: var(--radius-l); box-shadow: var(--shadow-l); z-index: 200; overflow: hidden;
}
.notif-header {
  padding: 12px 16px; border-bottom: 1px solid var(--border-l);
  font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); display: flex; justify-content: space-between; align-items: center;
}
.notif-mark-read {
  background: none; border: none; color: var(--copper);
  font-size: 11px; cursor: pointer; font-family: 'DM Sans', sans-serif;
}
.notif-list { max-height: 320px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--border-l); cursor: pointer;
  transition: background .15s; align-items: flex-start;
}
.notif-item:hover { background: var(--surface); }
.notif-icon { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.notif-subject { font-size: 12px; color: var(--ink); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 2px; }
.notif-empty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--muted); }
.notif-footer { padding: 10px 16px; border-top: 1px solid var(--border-l); text-align: center; }
.notif-footer a { font-size: 11px; color: var(--copper); text-decoration: none; }

/* ══════════════════════════════════════════════════════
   PAGE LAYOUT
══════════════════════════════════════════════════════ */
.pmr-page {
  max-width: 1520px;
  margin: 0 auto;
  padding: 24px 24px;
}
.pmr-page-header {
  margin-bottom: 24px;
}
.pmr-page-header h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px; letter-spacing: 2px;
  color: var(--ink); line-height: 1;
}
.pmr-page-header p { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ══════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════ */
.pmr-card {
  background: white;
  border: 1px solid var(--border-l);
  border-radius: var(--radius-l);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.pmr-card-title {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--copper);
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border-l);
}

/* ══════════════════════════════════════════════════════
   STATUS BADGES — 7 states
══════════════════════════════════════════════════════ */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 10px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; white-space: nowrap;
}
.badge-pending   { background: rgba(218,98,39,.1);  color: var(--s-pending);   border: 1px solid rgba(218,98,39,.3); }
.badge-lead      { background: rgba(74,127,168,.1);  color: var(--s-lead);     border: 1px solid rgba(74,127,168,.3); }
.badge-approved  { background: rgba(90,122,92,.1);   color: var(--s-approved); border: 1px solid rgba(90,122,92,.3); }
.badge-progress, .badge-in\ progress, .badge-in_progress {
                   background: rgba(200,148,26,.12); color: var(--s-progress); border: 1px solid rgba(200,148,26,.3); }
.badge-completed { background: rgba(45,90,61,.1);    color: var(--s-completed);border: 1px solid rgba(45,90,61,.25); }
.badge-invoice   { background: rgba(122,79,160,.1);  color: var(--s-invoice);  border: 1px solid rgba(122,79,160,.25); }
.badge-closed    { background: var(--surface);       color: var(--muted);      border: 1px solid var(--border); }

/* ══════════════════════════════════════════════════════
   TABLE
══════════════════════════════════════════════════════ */
.pmr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pmr-table thead th {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
  padding: 10px 14px; text-align: left;
  border-bottom: 2px solid var(--border-l);
  background: var(--surface);
}
.pmr-table tbody td {
  padding: 11px 14px; border-bottom: 1px solid var(--border-l);
  vertical-align: middle; color: var(--body);
}
.pmr-table tbody tr:hover td { background: var(--surface); }
.pmr-table .wc     { font-family: monospace; font-size: 11px; color: var(--copper); }
.pmr-table .client { color: var(--ink); font-weight: 500; }
.pmr-table .meta   { font-size: 12px; color: var(--muted); }
.pmr-table .price  { color: var(--pine); font-weight: 600; }

/* ══════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════ */
.pmr-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pmr-form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.pmr-form-grid.single { grid-template-columns: 1fr; }

.pmr-field { display: flex; flex-direction: column; gap: 6px; }
.pmr-field label {
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
}
.pmr-field input,
.pmr-field select,
.pmr-field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  padding: 9px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.pmr-field input:focus,
.pmr-field select:focus,
.pmr-field textarea:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(218,98,39,.12);
}
.pmr-field input::placeholder,
.pmr-field textarea::placeholder { color: var(--ghost); }
.pmr-field textarea { resize: vertical; min-height: 80px; }

/* ══════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════ */
.pmr-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border: none; border-radius: var(--radius);
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all .15s;
  white-space: nowrap;
}
.pmr-btn-primary   { background: var(--copper); color: white; }
.pmr-btn-primary:hover { background: var(--copper-l); }
.pmr-btn-ghost     { background: var(--surface); color: var(--body); border: 1px solid var(--border); }
.pmr-btn-ghost:hover { border-color: var(--copper); color: var(--ink); background: white; }
.pmr-btn-danger    { background: rgba(200,50,50,.08); color: #c03232; border: 1px solid rgba(200,50,50,.25); }
.pmr-btn-danger:hover { background: #c03232; color: white; }
.pmr-btn-success   { background: rgba(45,90,61,.1); color: var(--pine); border: 1px solid rgba(45,90,61,.25); }
.pmr-btn-success:hover { background: var(--pine); color: white; }

/* ══════════════════════════════════════════════════════
   PILLS
══════════════════════════════════════════════════════ */
.pmr-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.pmr-pill {
  padding: 5px 14px; border: 1px solid var(--border); border-radius: 20px;
  font-size: 12px; font-weight: 500; color: var(--muted);
  cursor: pointer; background: white; transition: all .15s;
  font-family: 'DM Sans', sans-serif;
}
.pmr-pill:hover  { border-color: var(--copper); color: var(--copper); }
.pmr-pill.active { background: var(--copper); color: white; border-color: var(--copper); }

/* ══════════════════════════════════════════════════════
   KPI / STAT CARDS
══════════════════════════════════════════════════════ */
.kpi {
  background: white; border: 1px solid var(--border-l);
  border-radius: var(--radius-l); padding: 18px;
  position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.kpi::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent-color, var(--border));
}
.kpi .kpi-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.kpi .kpi-val   { font-family: 'Bebas Neue', sans-serif; font-size: 36px; color: var(--ink); letter-spacing: 1px; line-height: 1; }
.kpi .kpi-sub   { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ══════════════════════════════════════════════════════
   INFO GRID (detail view)
══════════════════════════════════════════════════════ */
.pmr-info-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 10px; margin-bottom: 16px;
}
.pmr-info-item { padding: 12px 14px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border-l); }
.pmr-info-item .lbl { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.pmr-info-item .val { font-size: 14px; color: var(--ink); font-weight: 500; }
.pmr-info-item.highlight .val { color: var(--copper); }
.pmr-info-item.money .val { color: var(--pine); }

/* ══════════════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════════════ */
.pmr-alert { padding: 12px 16px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; }
.pmr-alert-success { background: rgba(45,90,61,.08);  border: 1px solid rgba(45,90,61,.2); color: var(--pine); }
.pmr-alert-error   { background: rgba(192,50,50,.08); border: 1px solid rgba(192,50,50,.2); color: #c03232; }
.pmr-alert-info    { background: rgba(218,98,39,.08); border: 1px solid rgba(218,98,39,.2); color: var(--copper); }

/* ══════════════════════════════════════════════════════
   DESCRIPTION BOX
══════════════════════════════════════════════════════ */
.pmr-desc {
  background: var(--surface); border-left: 3px solid var(--copper);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 14px;
  margin-bottom: 14px;
}
.pmr-desc h3 { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--copper); margin-bottom: 6px; }
.pmr-desc p  { font-size: 14px; color: var(--body); line-height: 1.7; }

/* ══════════════════════════════════════════════════════
   STATS / WORK ITEMS
══════════════════════════════════════════════════════ */
.pmr-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 10px; margin-bottom: 20px;
}
.pmr-stat {
  background: white; border: 1px solid var(--border-l);
  border-radius: var(--radius-l); padding: 18px;
  position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.pmr-stat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--copper);
}
.pmr-stat.lead::before      { background: var(--s-lead); }
.pmr-stat.approved::before  { background: var(--s-approved); }
.pmr-stat.completed::before { background: var(--s-completed); }
.pmr-stat .num { font-family: 'Bebas Neue', sans-serif; font-size: 40px; color: var(--ink); line-height: 1; }
.pmr-stat .label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.wo-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--border-l);
}
.wo-row:last-child { border: none; }
.wo-code   { font-family: monospace; font-size: 11px; color: var(--copper); min-width: 100px; }
.wo-client { font-size: 13px; color: var(--ink); font-weight: 500; flex: 1; transition: color .15s; }
.wo-meta   { font-size: 11px; color: var(--muted); }
.wo-price  { font-size: 13px; color: var(--pine); font-weight: 600; min-width: 70px; text-align: right; }

/* ══════════════════════════════════════════════════════
   TIME BUTTONS
══════════════════════════════════════════════════════ */
.time-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin-top: 8px; }
.time-btn {
  padding: 7px 4px; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: 12px; text-align: center;
  background: var(--surface); color: var(--muted);
  transition: all .15s; font-family: 'DM Sans', sans-serif;
}
.time-btn:hover { border-color: var(--copper); color: var(--copper); }
.time-btn.selected { background: var(--copper); color: white; border-color: var(--copper); font-weight: 600; }

/* ══════════════════════════════════════════════════════
   SAVE TOAST
══════════════════════════════════════════════════════ */
.save-toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  background: var(--ink); border-radius: var(--radius-l); padding: 12px 20px;
  font-size: 13px; color: var(--canvas);
  transform: translateY(80px); opacity: 0;
  transition: all .3s ease; pointer-events: none;
  box-shadow: var(--shadow-l);
}
.save-toast.show  { transform: translateY(0); opacity: 1; }
.save-toast.error { background: #c03232; }

/* ══════════════════════════════════════════════════════
   MISC
══════════════════════════════════════════════════════ */
.jtype { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 600; white-space: nowrap; }
.jtype-repair      { background: rgba(218,98,39,.1); color: var(--copper); border: 1px solid rgba(218,98,39,.25); }
.jtype-replacement { background: rgba(74,127,168,.1); color: var(--sky); border: 1px solid rgba(74,127,168,.25); }
.jtype-inspection  { background: rgba(90,122,92,.1);  color: var(--sage); border: 1px solid rgba(90,122,92,.25); }

a { color: var(--copper); }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .nav-hamburger { display: flex; }
  .pmr-topbar > a:not(.brand-wrap) { display: none; }
  .pmr-topbar > .spacer { display: none; }
  .pmr-topbar > .notif-wrap { display: flex; }
  .nav-drawer.open {
    display: flex !important; position: fixed;
    top: calc(var(--nav-top-h) + var(--nav-bot-h));
    left: 0; right: 0; background: white;
    border-bottom: 1px solid var(--border-l); z-index: 99;
    padding: 12px; flex-direction: column; gap: 4px;
    box-shadow: var(--shadow-l);
  }
  .nav-top-release { display: none; }
}

@media (max-width: 768px) {
  .pmr-page { padding: 12px; }
  .pmr-stats { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .pmr-form-grid { grid-template-columns: 1fr; }
  .pmr-form-grid.cols-3 { grid-template-columns: 1fr; }
  .pmr-info-grid { grid-template-columns: 1fr 1fr; }
  .pmr-card { padding: 16px; }
  .pmr-page-header h1 { font-size: 24px; }
  .time-grid { grid-template-columns: repeat(4,1fr); }
  .dash-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .dash-grid-2 { grid-template-columns: 1fr !important; }
  .kpi .kpi-val { font-size: 28px; }
  .layout { grid-template-columns: 1fr !important; }
  .sidebar { position: static !important; }
  .wo-list { max-height: 250px; }
  .payapp-layout { grid-template-columns: 1fr !important; }
  .ai-sidebar { display: none !important; }
  .page-title-band { top: calc(var(--nav-top-h) + var(--nav-bot-h)); }
}

@media (max-width: 480px) {
  .pmr-page { padding: 10px; }
  .pmr-stat .num { font-size: 32px; }
  .pmr-info-grid { grid-template-columns: 1fr; }
  .kpi { padding: 14px; }
  .kpi .kpi-val { font-size: 24px; }
  .notif-dropdown { width: calc(100vw - 20px); right: -10px; }
  input, select, textarea { font-size: 16px !important; }
}