/* =====================================================================
   Rampart Garrison — app.css (STRUCTURAL BASE)
   Layout, spacing, component skeletons. Loaded BEFORE rampart-theme.css,
   which overrides the color variables + re-skins for dark/light.
   The :root below is a light-mode FALLBACK; rampart-theme.css redefines it.
   CLEANED: removed the dead commented-out .nav block.
   ===================================================================== */
:root{
  --blue:#1a73e8; --blue-d:#1558b0; --green:#34a853; --red:#d93025;
  --amber:#f9ab00; --gray:#5f6368; --line:#e0e3e7; --bg:#f5f7fa; --card:#fff;
  --radius:12px; --shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#202124;background:var(--bg);line-height:1.5}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
/* ROOT-CAUSE FIX (build 128): this used to be  code{background:#eef1f5}  with NO text colour, so in the
   dark theme light text landed on a near-white pill (white-on-white). It is now driven by --code-bg / --code-fg,
   which rampart-theme.css defines for BOTH themes. Never hard-code a colour in this file — use a variable. */
code,kbd,samp{background:var(--code-bg,#eef1f5);color:var(--code-fg,#16233b);border:1px solid var(--code-line,transparent);
  padding:1px 5px;border-radius:5px;font-size:.9em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* code inside a tinted notice: part of the box, same text colour (the opaque pill would look like a hole) */
.notice code,.warn code,.pill code,.badge code{background:rgba(127,127,127,.18);color:inherit;border-color:rgba(127,127,127,.28)}
/* Topbar */
.topbar{display:flex;align-items:center;gap:24px;background:var(--card);
  border-bottom:1px solid var(--line);padding:10px 22px;position:sticky;top:0;z-index:10}
.brand a{font-size:20px;font-weight:700;color:#202124}
.brand span{color:var(--blue)}
.user{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px}
.avatar{width:30px;height:30px;border-radius:50%}
.user em{color:var(--blue);font-style:normal;font-size:12px}
.logout{color:var(--gray);font-size:13px}
/* Layout */
.container{max-width:1080px;margin:24px auto;padding:0 20px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){
  .cols,.grid-2{grid-template-columns:1fr}
}
/* Flash */
.flash{max-width:1080px;margin:14px auto 0;padding:11px 16px;border-radius:8px;font-size:14px}
.flash-success{background:#e6f4ea;color:#137333;border:1px solid #ceead6}
.flash-error{background:#fce8e6;color:#c5221f;border:1px solid #f5c6c3}
/* Cards & stats */
.stat .lbl{font-size:13px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
@media(max-width:760px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;text-align:center;box-shadow:var(--shadow)}
.stat .num{display:block;font-size:30px;font-weight:700;color:var(--blue)}
.stat .lbl{color:var(--gray)}
/* Rows */
.row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line);color:#202124}
.row:hover{background:#f8f9fa;text-decoration:none}
.row:last-child{border-bottom:none}
.row-title{flex:1}
.due{color:var(--gray);font-size:13px}
.mini{font-size:12px;color:var(--gray);margin-left:4px}
/* Tasks table */
.tasks-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.tasks-table tr.done .tlink{text-decoration:line-through;color:var(--gray)}
.tlink{font-weight:600}
.preview{color:var(--gray);font-size:12.5px;margin-top:3px}
.center{text-align:center}
.muted{color:var(--gray)}
.small{font-size:13px}
.lock{color:var(--red)}
/* Filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filters input,.filters select{padding:8px max(10px,14px);border:1px solid var(--field-line);border-radius:var(--field-radius);font-size:14px;background:var(--field-bg,#fff);color:var(--text,#202124)}
.chk{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--gray)}
.hint{color:var(--gray);font-size:13px;font-style:italic}
/* Kanban base (rampart-theme.css re-skins these for dark/light) */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:14px;
  overflow-x:auto;padding-bottom:12px;align-items:start}
.column{background:#eef1f5;border-radius:var(--radius);min-height:120px;display:flex;flex-direction:column}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  border-top:3px solid transparent;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);
  font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.col-count{background:#fff;border-radius:20px;padding:0 9px;font-size:12px;color:var(--gray)}
.col-body{padding:10px;display:flex;flex-direction:column;gap:10px;min-height:60px;flex:1;transition:background .15s}
.col-body.drag-over{background:#dde6f5;outline:2px dashed var(--blue);outline-offset:-6px;border-radius:8px}
.kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;
  box-shadow:var(--shadow);cursor:grab;transition:box-shadow .15s,transform .05s}
.kcard:hover{box-shadow:0 3px 8px rgba(0,0,0,.12)}
.kcard.dragging{opacity:.5;transform:rotate(1deg);cursor:grabbing}
.kcard.is-blocked{border-left:3px solid var(--red)}
.kcard.card-done .kcard-title{text-decoration:line-through;color:var(--gray)}
.kcard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.kcard-icons{display:flex;gap:5px;font-size:12px;color:var(--gray);align-items:center}
.kcard-title{display:block;font-weight:600;color:#202124;font-size:14px;line-height:1.3}
.kcard-title:hover{color:var(--blue);text-decoration:none}
.kcard-notes{color:var(--gray);font-size:12px;margin:6px 0 0}
.kcard-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.chip{background:#f1f3f4;border-radius:20px;padding:2px 8px;font-size:11.5px;color:#3c4043}
.chip-overdue{background:#fce8e6;color:#c5221f}
/* BUILD 181: .toast / .toast-ok / .toast-err (the Task Board's own pop-up) are gone — every message is the one toast in toast.css */
/* Forms */
.task-form label,.field-edit label,.card form label{display:block;margin-bottom:14px;font-size:14px;font-weight:500}
.task-form input,.task-form select,.task-form textarea,
.card form input,.card form select,.card form textarea{
  width:100%;padding:9px max(11px,14px);border:1px solid var(--field-line);border-radius:var(--field-radius);font-size:14px;font-family:inherit;margin-top:5px;
  background:var(--field-bg,#fff);color:var(--text,#202124)}
/* BUILD 129: ticking a box must not be stretched like a text field. This rule is why, in forms inside a card (the Deploy
   page's "Add this to Release Notes" options), the checkbox was pushed to the far right, away from its words, and looked
   like it belonged to the NEXT line. */
.task-form input[type=checkbox],.task-form input[type=radio],.card form input[type=checkbox],.card form input[type=radio]{
  width:auto;padding:0;margin:0 8px 0 0;flex:none}
/* One consistent "[box] words" row for options and toggles. */
.check-row{display:flex!important;align-items:flex-start;gap:10px;margin:0 0 10px!important;font-weight:500;line-height:1.45;cursor:pointer}
.check-row input[type=checkbox],.check-row input[type=radio]{margin:3px 0 0!important;width:auto!important;flex:none}
.check-row .check-note{display:block;font-weight:400;color:var(--muted);font-size:13px}
.task-form input[type=file]{padding:7px;background:#fafbfc}
.task-form textarea{resize:vertical}
.custom-fields,.recur-box{border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:8px 0 18px}
.custom-fields legend,.recur-box legend{font-weight:600;padding:0 8px}
.form-actions{margin-top:10px}
.req{color:var(--red)}
/* Recurrence box */
.recur-row{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.recur-row label{margin-bottom:6px}
.recur-int{display:flex;align-items:center;gap:8px}
.recur-int input{width:80px}
#recur-unit{color:var(--gray);font-weight:500;align-self:flex-end;padding-bottom:9px}
/* Markdown editor */
.md-editor{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:5px}
@media(max-width:760px){
  .md-editor{grid-template-columns:1fr}
}
.md-editor textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.md-preview{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:#fafbfc;overflow:auto;min-height:120px}
/* Markdown rendered body */
.markdown-body h1,.markdown-body h2,.markdown-body h3{margin:.6em 0 .3em}
.markdown-body pre{background:var(--code-bg,#f6f8fa);color:var(--code-fg,#16233b);padding:12px;border-radius:8px;overflow:auto}
.markdown-body pre code{background:transparent;border:0;padding:0}
.markdown-body blockquote{border-left:3px solid var(--line);margin:0;padding-left:12px;color:var(--gray)}
.markdown-body ul.task-list{list-style:none;padding-left:4px}
.markdown-body img{max-width:100%;border-radius:8px}
/* Attachments */
.att-list{list-style:none;margin:0 0 12px;padding:0}
.att-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.att-icon{font-size:18px}
.att-name{font-weight:500;flex-shrink:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att-meta{color:var(--gray);font-size:12px;flex:1}
.att-del{margin:0}
.att-upload{display:flex;gap:8px;align-items:center;margin-top:6px}
.att-upload input[type=file]{flex:1;padding:6px;border:1px solid var(--line);border-radius:8px;background:#fafbfc;font-size:13px}
/* Detail page */
.detail-grid{display:grid;grid-template-columns:1fr 320px;gap:18px}
@media(max-width:860px){
  .detail-grid{grid-template-columns:1fr}
}
.meta-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.pill{background:var(--tint-neutral-bg,#f1f3f4);border-radius:20px;padding:4px 12px;font-size:13px;color:var(--tint-neutral-fg,#3c4043)}
.pill-google{background:var(--tint-blue-bg,#e8f0fe);color:var(--tint-blue-fg,#1558b0)}
.pill-recur{background:var(--tint-purple-bg,#f3e8fd);color:var(--tint-purple-fg,#6b21a8)}
/* PO status pills — trends/purchase_orders.php (Status column) */
.status-pill{display:inline-block;background:var(--tint-neutral-bg,#eef1f5);color:var(--tint-neutral-fg,#3c4043);border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.status-pill.status-issued{background:var(--tint-neutral-bg,#eef1f5);color:var(--tint-neutral-fg,#3c4043)}
.status-pill.status-partial{background:var(--tint-warn-bg,#fff4e0);color:var(--tint-warn-fg,#8a4b00)}
.status-pill.status-closed-short{background:var(--tint-red-bg,#fdeaea);color:var(--tint-red-fg,#b3261e)}
.status-pill.status-received{background:var(--tint-green-bg,#e6f7ec);color:var(--tint-green-fg,#137333)}
.cf-list{margin:0}
.cf-item{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}
.cf-item dt{font-weight:600;color:var(--gray)}
.dep-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.dep-row a.done{text-decoration:line-through;color:var(--gray)}
.add-dep{display:flex;gap:6px;margin-top:8px}
.add-dep select{flex:1;padding:7px;border:1px solid var(--field-line);border-radius:var(--field-radius)}
.notice{background:var(--tint-warn-bg,#fef7e0);border:1px solid var(--tint-warn-line,#feefc3);color:var(--tint-warn-fg,#8a4b00);padding:12px;border-radius:8px;font-size:14px;margin-bottom:12px}
.notice-info{background:var(--tint-info-bg,#f3e8fd);border-color:var(--tint-info-line,#e5d0fb);color:var(--tint-info-fg,#6b21a8)}
/* Links and code inside a tinted notice must follow the notice's own text colour, not the page link colour. */
.notice a,.warn a{color:inherit;text-decoration:underline}
/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8f0fe,#f5f7fa)}
.login-card{background:#fff;border-radius:16px;padding:40px;max-width:440px;width:100%;box-shadow:0 8px 30px rgba(0,0,0,.12);text-align:center}
.login-card h1{font-size:34px;margin:0 0 6px}
.login-card .accent{color:var(--blue)}
.login-card .sub{color:var(--gray);margin-bottom:22px}
.btn-google{width:100%;justify-content:center;border:1px solid var(--line);padding:12px;font-weight:600}
.btn-google img{width:18px;height:18px}
.features{list-style:none;padding:0;margin:22px 0 0;text-align:left;font-size:14px;color:var(--text-soft,#3c4043)}
.features li{padding:5px 0}
.warn{background:var(--tint-warn-bg,#fef7e0);color:var(--tint-warn-fg,#8a4b00);padding:10px;border-radius:8px;font-size:13px;margin-top:14px}
.footer{text-align:center;color:var(--gray);font-size:13px;padding:24px}
/* NEW (build 113, feature); FIXED (build 114, bug fix): Warden inbox
   multi-select bulk-action bar (select multiple threads, then Delete/
   Restore/Purge selected in one click).
   FIXED (build 114): this bar was hardcoded to a pale-yellow Bootstrap-ish
   "warning" style (#fff3cd bg / #ffe69c border / default-black text) that
   was never adapted for the app's dark navy theme — see the bug report
   screenshot: it renders as a jarring, out-of-place cream box, and the
   "N selected" text (inherited dark-on-dark from nowhere in particular)
   is nearly unreadable against it. Restyled to use the SAME theme
   variables every other themed surface in this file already uses
   (.kpi-card/.mini-card's --card-2 background, --line border, --text
   text) with a left accent bar in the app's own orange accent color
   (--blue, which is actually the safety-orange brand color — see
   rampart-theme.css's :root comment) instead of a random unrelated
   yellow, so light mode (html[data-theme="light"]) also just works via
   the existing CSS variables — no separate light-mode override needed. */
.warden-bulk-bar{display:flex;align-items:center;gap:10px;background:var(--card-2,#12213a);
  border:1px solid var(--line,#25395a);border-left:4px solid var(--blue,#EA5B2B);
  border-radius:8px;padding:10px 14px;margin-bottom:10px;font-size:13px;color:var(--text,#e7edf5)}
.warden-bulk-bar strong{color:var(--text,#e7edf5)}
.warden-row-check{display:flex;align-items:center;justify-content:center}
/* NEW (build 115, feature): Rampart Gmail Notes — the in-app
   /gmail-notes browse page. Each note reads as a colored card whose left
   border is the note's own color (the same color the user picked inside
   Gmail), so the page visually matches what they see on the conversation.
   Uses the app's existing theme variables throughout, so light mode works
   with no separate override. */
.gn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.gn-item{background:var(--card-2,#12213a);border:1px solid var(--line,#25395a);
  border-left:5px solid var(--blue,#EA5B2B);border-radius:10px;padding:12px 14px}
.gn-item.gn-done{opacity:.6}
.gn-item.gn-done .gn-subject{text-decoration:line-through}
.gn-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.gn-subject{font-weight:600;color:var(--text,#e7edf5)}
.gn-spacer{flex:1}
.gn-body{font-size:14px;color:var(--text-soft,#aebcce);line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:8px}
.gn-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gn-actions{margin-top:8px;display:flex;gap:12px;align-items:center}
/* NEW (build 116, feature): shared vs. personal Gmail notes. A private
   note gets a dashed left border so the two kinds are distinguishable
   at a glance even in a long list, without relying on reading the badge
   text (and without a second color, which would fight with the note's
   OWN user-chosen color already used on that border). */
.gn-item.gn-private{border-left-style:dashed}
.gn-badge-private{background:rgba(var(--accent-rgb),.15);color:var(--blue,#EA5B2B);
  border:1px solid rgba(var(--accent-rgb),.35)}
html[data-theme="light"] .gn-badge-private{background:rgba(var(--accent-rgb),.12);color:var(--blue-d,#C4451A)}
.dot-unread{color:var(--blue,#EA5B2B);font-size:10px;vertical-align:middle}