:root{
  --navy:#14304C;
  --navy-deep:#0D2038;
  --line-cyan:#6FA8C7;
  --paper:#F6F3EC;
  --chalk:#F5F6F5;
  --concrete:#8B8D87;
  --orange:#E8622C;
  --green:#4C7A3D;
  --red:#D6294F;
  --blue:#2B6CB0;
  --header-height:56px;

  /* Semantic tokens — light mode (default) */
  --bg-page: var(--paper);
  --bg-surface: #ffffff;
  --bg-surface-rgb: 255,255,255;
  --bg-surface-alt: #fbf9f4;
  --bg-surface-alt-rgb: 251,249,244;
  --text-primary: var(--navy-deep);
  --text-muted: var(--concrete);
  --border-color: #ddd8cb;
  --border-color-soft: #eee8da;
  --header-bg: var(--navy);
  --header-bg-rgb: 20,48,76;
  --header-text: var(--chalk);
  --input-bg: #ffffff;
  --input-border: #ccc5b3;
  --banner-bg: #fdf3e9;
  --banner-border: #f0d9bd;
  --surface-alpha: 1; /* adjustable via the transparency slider in the nav */
}

[data-theme="dark"]{
  --bg-page: #12181f;
  --bg-surface: #1b232c;
  --bg-surface-rgb: 27,35,44;
  --bg-surface-alt: #212b35;
  --bg-surface-alt-rgb: 33,43,53;
  --text-primary: #e7e9ec;
  --text-muted: #98a2ad;
  --border-color: #2d3947;
  --border-color-soft: #28323d;
  --header-bg: #0a1017;
  --header-bg-rgb: 10,16,23;
  --header-text: #e7e9ec;
  --input-bg: #212b35;
  --input-border: #3a4756;
  --banner-bg: #2a2213;
  --banner-border: #4a3b1c;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',Arial,sans-serif;color:var(--text-primary);transition:background 0.15s ease, color 0.15s ease;
  background: linear-gradient(rgba(8,11,15,0.72), rgba(8,11,15,0.72)), url('assets/login_bg.jpg') center center / cover no-repeat fixed;
  min-height:100vh;
}
html[data-bg="off"] body{background:var(--bg-page);}
/* In light mode the dark login_bg image + dark overlay fights the light theme, so use
   the solid light page background instead (regardless of the image on/off toggle). */
html[data-theme="light"] body{background:var(--bg-page);}
h1,h2,h3,h4,.label,nav,.btn,th{font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:0.4px;}
.mono, td.num, .tag-cell{font-family:'IBM Plex Mono',monospace;font-weight:500;}

/* Top nav */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);color:var(--header-text);height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 16px;}
.site-header .brand{font-weight:700;color:var(--chalk);text-decoration:none;font-size:18px;display:flex;align-items:center;}
.brand-logo{height:38px;width:auto;display:block;}
.nav{display:flex;gap:18px;align-items:center;}
.nav a{color:var(--header-text);text-decoration:none;font-size:13px;font-weight:500;}
.nav a:hover{color:var(--line-cyan);}
.nav-toggle{display:none;background:none;border:none;color:var(--header-text);font-size:22px;cursor:pointer;}
.theme-toggle{background:none;border:1.5px solid var(--header-text);color:var(--header-text);border-radius:14px;padding:4px 10px;font-size:14px;cursor:pointer;line-height:1;}
.theme-toggle:hover{border-color:var(--line-cyan);color:var(--line-cyan);}
.project-banner{background:rgba(var(--bg-surface-alt-rgb), var(--surface-alpha));border-bottom:1px solid var(--border-color);color:var(--text-primary);font-size:12.5px;padding:4px 16px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.chart-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;}
@media (max-width:900px){
  .chart-grid{grid-template-columns:1fr;}
}
.reports-half-row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;}
.reports-half-box{flex:1 1 380px;max-width:calc(50% - 8px);}
@media (max-width:800px){
  .reports-half-box{max-width:100%;}
}

@media (max-width:768px){
  .nav{position:fixed;top:var(--header-height);left:0;right:0;background:var(--header-bg);flex-direction:column;align-items:flex-start;padding:12px 16px;display:none;gap:10px;}
  .nav.nav-open{display:flex;}
  .nav-toggle{display:block;}
}

.container{max-width:1850px;margin:0 auto;padding:10px 14px 24px;}

/* Buttons */
.btn{display:inline-block;background:var(--orange);color:#fff;border:none;padding:9px 16px;font-size:13px;font-weight:600;border-radius:3px;cursor:pointer;text-decoration:none;}
.btn:hover{opacity:0.9;}
.btn.ghost{background:transparent;border:1.5px solid var(--red);color:var(--red);}
.btn.ghost.neutral{border-color:var(--text-muted);color:var(--text-primary);}
.btn-sm{padding:5px 10px;font-size:12px;min-width:130px;text-align:center;}
.btn:disabled{opacity:0.4;cursor:not-allowed;}

/* Summary chips */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px;}
.chips.chips-pinned{position:sticky;top:var(--header-height);z-index:40;padding:6px 0 6px;margin:0 0 8px;border-bottom:1px solid var(--border-color);}
.chip{background:rgba(var(--bg-surface-rgb), var(--surface-alpha));border:1px solid var(--border-color);border-left:4px solid var(--navy);border-radius:4px;padding:6px 11px;min-width:92px;}
.chips-compact{overflow-x:auto;padding-bottom:2px;}
.chips-compact .chip{min-width:0;padding:4px 7px;flex-shrink:0;}
.chips-compact .chip .chip-label{font-size:8px;}
.chips-compact .chip .chip-value{font-size:13px;}
.chip.status-good{border-left-color:var(--green);}
.chip.status-warn{border-left-color:var(--orange);}
.chip.status-bad{border-left-color:var(--red);}
.chip .chip-label{font-size:10.5px;color:var(--text-muted);font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:0.25px;font-weight:600;}
.chip .chip-value{font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:700;color:var(--text-primary);}
.chip-groups{display:block;}
.filters-form{display:block;}
.signal-and-filters-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-bottom:8px;}
.signal-and-filters-row .chip-group{flex:1 1 auto;}
.signal-and-filters-row .filters{flex:0 0 auto;margin-bottom:0;}
.chip[draggable="true"]{cursor:grab;}
.chip.chip-dragging{opacity:0.35;}
.chip.chip-drag-over{outline:2px dashed var(--orange);outline-offset:-2px;}
.schedule-chip{cursor:pointer;}
.schedule-chip summary{list-style:none;cursor:pointer;}
.schedule-chip summary::-webkit-details-marker{display:none;}
.schedule-chip summary::marker{content:'';}
.schedule-chip:hover{border-left-color:var(--orange);}
.schedule-chip[open]{width:100%;}
.schedule-chip form{max-width:420px;}

/* Table */
.table-wrap{overflow:auto;max-height:76vh;background:rgba(var(--bg-surface-rgb), var(--surface-alpha));border:1px solid var(--border-color);border-radius:4px;}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:12.5px;}
th{background:rgba(var(--header-bg-rgb), var(--surface-alpha));color:var(--header-text);position:sticky;top:0;padding:8px 6px;text-align:left;font-size:10.5px;white-space:nowrap;z-index:2;}
.filter-row th{position:static;text-transform:none;letter-spacing:normal;font-family:'Inter',Arial,sans-serif;padding:4px 6px;background:rgba(var(--bg-surface-alt-rgb), var(--surface-alpha));}
.filter-row input, .filter-row select{width:100%;min-width:70px;}
td{padding:5px 6px;border-bottom:1px solid var(--border-color-soft);white-space:nowrap;}
tr:hover td{background:var(--bg-surface-alt);}
td.desc-cell{max-width:200px;overflow:hidden;text-overflow:ellipsis;}
.stage-cell{display:flex;align-items:center;gap:4px;}
.stage-select{width:auto;min-width:100px;padding:4px 6px;font-size:12px;}
.punch-btn{background:none;border:1px solid var(--input-border);color:var(--text-muted);border-radius:3px;font-size:11px;padding:3px 6px;cursor:pointer;line-height:1;white-space:nowrap;}
.punch-btn:hover{border-color:var(--orange);color:var(--orange);}
.punch-btn.close-btn:hover{border-color:var(--green);color:var(--green);}
.punch-cell{display:flex;align-items:flex-start;gap:6px;}
.punch-items{display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
.punch-group{display:inline-flex;align-items:center;gap:3px;}
.punch-flag-toggle{margin-left:auto;flex-shrink:0;position:relative;}
.punch-flag-toggle .punch-flag-form{
  position:absolute;top:100%;right:0;margin-top:4px;
  background:var(--bg-surface);border:1px solid var(--border-color);border-radius:4px;
  padding:8px;box-shadow:0 6px 18px rgba(0,0,0,0.35);z-index:50;
  white-space:normal;flex-wrap:wrap;width:260px;
}

.notes-toggle{position:relative;}
.notes-toggle summary{list-style:none;}
.notes-toggle summary::-webkit-details-marker{display:none;}
.notes-popover{
  position:absolute;top:100%;right:0;margin-top:4px;
  background:var(--bg-surface);border:1px solid var(--border-color);border-radius:4px;
  padding:10px;box-shadow:0 6px 18px rgba(0,0,0,0.35);z-index:50;
  white-space:normal;width:280px;max-height:260px;overflow-y:auto;
}
.notes-list{display:flex;flex-direction:column;gap:8px;font-size:12px;}
.note-item{border-bottom:1px solid var(--border-color-soft);padding-bottom:6px;}
.note-item:last-child{border-bottom:none;padding-bottom:0;}
.note-meta{color:var(--text-muted);font-size:10.5px;display:flex;justify-content:space-between;gap:6px;}
.note-remove{color:var(--red);cursor:pointer;background:none;border:none;font-size:10.5px;padding:0;}
.note-body{margin-top:2px;white-space:pre-wrap;word-break:break-word;}
.note-body-editable{cursor:text;}
.note-body-editable:hover{background:rgba(255,255,255,0.05);border-radius:3px;}

/* Recheck row highlighting — red background always; the flashing animation only runs
   unless the user has turned it off via the nav toggle (data-flash-recheck="off"). */
tr.row-recheck td{background:rgba(214,41,79,0.18);}
@keyframes recheck-flash{0%,100%{background:rgba(214,41,79,0.18);}50%{background:rgba(214,41,79,0.42);}}
html:not([data-flash-recheck="off"]) tr.row-recheck td{animation:recheck-flash 1.4s ease-in-out infinite;}

/* Notes page: condensed rows, inline note text, click-to-enlarge modal */
.notes-table th, .notes-table td{padding:5px 6px;font-size:12px;}
.notes-cell{cursor:pointer;max-width:340px;}
.notes-cell:hover{background:rgba(255,255,255,0.04);}
.notes-inline-preview{display:flex;flex-direction:column;gap:2px;max-height:54px;overflow:hidden;}
.notes-inline-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;}
.notes-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:200;align-items:center;justify-content:center;}
.notes-modal-backdrop.open{display:flex;}
.notes-modal{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:6px;padding:18px;width:480px;max-width:92vw;max-height:80vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,0.5);}
.notes-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.notes-modal-close{cursor:pointer;background:none;border:none;font-size:20px;color:var(--text-muted);line-height:1;}
.notes-modal .notes-list{display:flex;flex-direction:column;gap:10px;font-size:13px;margin-bottom:10px;}
.notes-modal .note-item.archived{opacity:0.7;}
.notes-modal-archived-toggle{font-size:12px;color:var(--concrete);display:flex;align-items:center;gap:5px;margin-bottom:10px;cursor:pointer;}

@media (max-width:768px){
  th{position:static;}
}

/* Status badges */
.status-badge{display:inline-block;padding:3px 8px;border-radius:3px;font-size:11px;font-weight:600;font-family:'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:0.3px;}
.status-not_started{background:#e7e5df;color:var(--concrete);}
.status-in_progress{background:#fde8de;color:var(--orange);}
.status-complete{background:#e1ead9;color:var(--green);}
/* Client's tag color scheme: Orange Tag (electrical/construction handoff), Blue Tag
   (mechanical inspection), Green Tag (ONEOK/witness signoff). No tag color was given
   for step 3 (Jasper's own loop test), so Automation Complete just keeps the default
   green .status-complete above rather than getting its own distinct color. */
.status-complete-electrical{background:#fbe4d6;color:var(--orange);}
.status-complete-inspection{background:#dbe8f5;color:var(--blue);}
.status-complete-witness{background:#e1ead9;color:var(--green);}
.status-complete-automation{background:#e7e5df;color:var(--concrete);}
.stage-select.select-complete-electrical{background:#fbe4d6;color:var(--orange);border-color:var(--orange);}
.stage-select.select-complete-inspection{background:#dbe8f5;color:var(--blue);border-color:var(--blue);}
.stage-select.select-complete-witness{background:#e1ead9;color:var(--green);border-color:var(--green);}
.stage-select.select-complete-automation{background:#e7e5df;color:var(--concrete);border-color:#ccc5b3;}
.status-punchlist_open{background:#f6d9d3;color:var(--red);}
.status-punchlist_closed{background:#dde9f0;color:var(--navy);}
.change-new{background:#dcefd3;color:var(--green);}
.change-removed{background:#f6d9d3;color:var(--red);}
.change-reactivated{background:#dde9f0;color:var(--navy);}
.change-renamed{background:#dbe8f5;color:var(--blue);}

/* Removed tags stay visible (per project decision) but read as struck-through/muted */
tr.row-removed td{text-decoration:line-through;color:var(--concrete);}
tr.row-removed td .status-badge{text-decoration:none;}

/* Forms */
label{font-size:12px;color:var(--text-muted);display:block;margin-bottom:4px;}
input,select,textarea{font-family:'Inter',Arial,sans-serif;padding:7px 9px;border:1px solid var(--input-border);border-radius:3px;font-size:13px;width:100%;background:var(--input-bg);color:var(--text-primary);}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;align-items:flex-end;}
.filters .field{min-width:160px;}

/* Login */
.login-box{max-width:360px;margin:60px auto;background:rgba(var(--bg-surface-rgb), var(--surface-alpha));border:1px solid var(--border-color);border-radius:6px;padding:28px;}
.login-box h1{font-size:20px;margin-top:0;}
.field-group{margin-bottom:14px;}

.readonly-banner{background:var(--banner-bg);border:1px solid var(--banner-border);color:var(--text-primary);padding:6px 12px;font-size:12.5px;border-radius:4px;margin-bottom:10px;}

/* Simple on/off toggle switch (Project Started, etc.) */
.switch{position:relative;display:inline-block;width:42px;height:22px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--concrete);transition:.2s;border-radius:22px;}
.switch .slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:#fff;transition:.2s;border-radius:50%;}
.switch input:checked + .slider{background-color:var(--green);}
.switch input:checked + .slider:before{transform:translateX(20px);}

/* ============================================================
   PRINT — used by the Reports page's "Print / Save as PDF"
   button (window.print()), but applies to a direct Ctrl+P too.
   ============================================================ */
@media print {
  /* Force a plain, ink-friendly light theme regardless of the on-screen light/dark
     toggle state or the background image — everything already uses these variables,
     so overriding them here cascades through every component for free. */
  :root, html[data-theme="dark"] {
    --bg-page: #ffffff;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f4f4f4;
    --text-primary: #111111;
    --text-muted: #555555;
    --border-color: #cccccc;
    --border-color-soft: #e5e5e5;
    --header-bg: #ffffff;
    --header-text: #111111;
    --input-bg: #ffffff;
    --input-border: #999999;
    --banner-bg: #ffffff;
    --banner-border: #cccccc;
  }
  body{ background: #ffffff !important; }

  /* Interactive-only chrome that means nothing on paper */
  .print-hide, .site-header .theme-toggle, .nav-toggle, .project-banner form,
  .filters { display: none !important; }

  .site-header{ position: static; box-shadow: none; border-bottom: 2px solid #000; }
  .project-banner{ border-bottom: 1px solid #ccc; }

  /* A <details> normally hides its content entirely unless [open] is set — this
     override forces every section to render its content in print regardless of
     on-screen collapsed state (paired with the JS in reports.php that also sets
     .open = true before calling window.print(), belt-and-suspenders). */
  details > *:not(summary) { display: block !important; }
  details .chips { display: flex !important; flex-wrap: wrap !important; }
  details summary {
    all: unset;
    display: block;
    font-family: 'Oswald', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    font-size: 15px;
    color: #000;
    margin: 14px 0 8px;
  }

  /* Scrollable boxes need to print their FULL content, not just the visible slice */
  .table-wrap { max-height: none !important; overflow: visible !important; border: 1px solid #ccc; }
  th { position: static !important; background: #eee !important; color: #000 !important; }

  .chip, .table-wrap, #trend-chart, #daily-chart { break-inside: avoid; border: 1px solid #ccc; }
  .chart-grid { grid-template-columns: 1fr 1fr; }
  #trend-chart, #daily-chart { height: 280px !important; }
  .schedule-chip[open], .schedule-chip { width: auto !important; }
  .schedule-chip form { display: none !important; }

  a[href]:after { content: none !important; } /* some browsers auto-append URLs to links */
}