:root {
  --color-dark-bg: #1a1f3a;
  --color-header-bg: #2d3561;
  --color-warm-accent: #ff6b35;
  --color-row-alt: #e8eaf6;
  --color-row-white: #ffffff;
  --color-border: #4a5899;
  --color-text-dark: #1a1f3a;
  --color-light-text: #e8eaf6;
  --color-gray: #888888;
  --color-success: #4caf50;
  --color-danger: #f44336;

  /* Role identity colors — picked for high contrast against the dark theme
     and against each other so a glance at the header / login screen tells
     you which role is which. All four pass WCAG AA against their fg text. */
  --role-ranger-bg:      #2e7d32;  /* forest green */
  --role-ranger-fg:      #ffffff;
  --role-ranger-border:  #66bb6a;
  --role-khaki-bg:       #e88a3a;  /* SOAK warm amber */
  --role-khaki-fg:       #1a1a1a;
  --role-khaki-border:   #ffb74d;
  --role-ooh-bg:         #c62828;  /* deep red */
  --role-ooh-fg:         #ffffff;
  --role-ooh-border:     #ef5350;
  --role-production-bg:  #6a1b9a;  /* deep purple */
  --role-production-fg:  #ffffff;
  --role-production-border: #ce93d8;

  --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Courier New', monospace;

  --field-height: 42px;
  --field-font-size: 17px;
  --border-radius: 4px;
}

/* Bump the root from the browser default 16px → 18px. Almost everything in
   this stylesheet sizes in rem, so this single change scales the whole UI
   up ~12.5% — the SOP-friendly bigger-typeface ask. Inline em-based sizes in
   JS-rendered tables inherit too. Field inputs get a slightly larger
   absolute size via --field-font-size so form text doesn't lag. */
html {
  font-size: 18px;
}

/* Role chip — used in the header and anywhere we tag "who you're signed in
   as." Bold colors so role is unmistakable at a glance. */
.role-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border: 1px solid transparent;
  line-height: 1;
}
.role-chip.role-ranger     { background: var(--role-ranger-bg);     color: var(--role-ranger-fg);     border-color: var(--role-ranger-border); }
.role-chip.role-khaki      { background: var(--role-khaki-bg);      color: var(--role-khaki-fg);      border-color: var(--role-khaki-border); }
.role-chip.role-ooh        { background: var(--role-ooh-bg);        color: var(--role-ooh-fg);        border-color: var(--role-ooh-border); }
.role-chip.role-production { background: var(--role-production-bg); color: var(--role-production-fg); border-color: var(--role-production-border); box-shadow: 0 1px 4px rgba(106,27,154,0.35); }

/* Role tile — used on the login page role picker. Bigger, with the same
   palette, so the active role visually announces itself. */
.role-tile {
  display: block;
  padding: 12px 8px;
  border: 2px solid var(--color-border, #4a5899);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
  color: var(--color-text, #eee);
  font-weight: bold;
  font-size: 0.95rem;
  text-align: center;
  background: rgba(255,255,255,0.04);
}
.role-tile:hover { transform: translateY(-1px); }
/* Inactive tiles get a thin tint of the role color on the border, so even
   un-selected the four roles read distinctly. */
.role-tile.tile-ranger     { border-color: var(--role-ranger-border); }
.role-tile.tile-khaki      { border-color: var(--role-khaki-border); }
.role-tile.tile-ooh        { border-color: var(--role-ooh-border); }
.role-tile.tile-production { border-color: var(--role-production-border); }
.role-tile.tile-ranger:hover     { background: rgba(46,125,50,0.20); }
.role-tile.tile-khaki:hover      { background: rgba(232,138,58,0.20); }
.role-tile.tile-ooh:hover        { background: rgba(198,40,40,0.20); }
.role-tile.tile-production:hover { background: rgba(106,27,154,0.20); }
/* Selected: full-saturation fill with the role color. */
input[type="radio"]:checked + .role-tile.tile-ranger     { background: var(--role-ranger-bg);     color: var(--role-ranger-fg);     border-color: var(--role-ranger-fg); box-shadow: 0 0 0 3px rgba(46,125,50,0.35); }
input[type="radio"]:checked + .role-tile.tile-khaki      { background: var(--role-khaki-bg);      color: var(--role-khaki-fg);      border-color: var(--role-khaki-fg); box-shadow: 0 0 0 3px rgba(232,138,58,0.35); }
input[type="radio"]:checked + .role-tile.tile-ooh        { background: var(--role-ooh-bg);        color: var(--role-ooh-fg);        border-color: var(--role-ooh-fg); box-shadow: 0 0 0 3px rgba(198,40,40,0.35); }
input[type="radio"]:checked + .role-tile.tile-production { background: var(--role-production-bg); color: var(--role-production-fg); border-color: var(--role-production-fg); box-shadow: 0 0 0 3px rgba(106,27,154,0.35); }

.color-picker {
  width: 100%;
  height: 50px;
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  cursor: pointer;
}

.color-value {
  display: inline-block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-light-text);
  background: rgba(255,255,255,0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-dark-bg);
  color: var(--color-light-text);
  line-height: 1.6;
  min-height: 100vh;
}

body[data-role="khaki"] {
  background-color: #3a3020;
}

body[data-role="ooh"] {
  background-color: #2a1a3a;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

header {
  background-color: var(--color-header-bg);
  padding: 20px;
  border-bottom: 3px solid var(--color-warm-accent);
  margin-bottom: 30px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 10px;
}

.header-left {
  flex: 1;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-title {
  color: var(--color-warm-accent);
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.header-subtitle {
  color: var(--color-light-text);
  font-size: 1rem;
  margin-bottom: 0;
}

.callsign-selector {
  display: flex;
  align-items: center;
  background-color: rgba(139, 94, 60, 0.3);
  padding: 8px 12px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

.callsign-selector label {
  color: var(--color-light-text);
  white-space: nowrap;
}

.callsign-selector select {
  min-width: 120px;
  height: 32px;
  padding: 4px 8px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-row-white);
  color: var(--color-text-dark);
  font-size: 0.9rem;
}

.btn-small {
  padding: 4px 10px;
  font-size: 0.9rem;
  height: 32px;
  min-width: 40px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  background-color: var(--color-warm-accent);
  color: white;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}

.btn-small:hover {
  background-color: #E67F2F;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.btn-small.shift-off {
  background-color: var(--color-danger);
}

.btn-small.shift-on {
  background-color: var(--color-success);
}

.event-status {
  background-color: var(--color-warm-accent);
  color: white;
  padding: 8px 15px;
  border-radius: var(--border-radius);
  font-weight: bold;
  font-size: 1.1rem;
  margin: 10px 0;
  display: inline-block;
}

.shift-schedule {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.shift-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--border-radius);
  font-size: 0.85rem;
  font-weight: 500;
  background-color: rgba(139, 94, 60, 0.3);
  color: var(--color-light-text);
  border: 1px solid var(--color-border);
  /* Bug #84: was 'transition: all 0.3s' which interpolated bg-color
     across a 300ms window when .active was added — Sean caught a
     screenshot mid-transition where the active badge rendered as
     near-white with white text. Limit the transition to color only;
     bg snaps instantly so the label is always readable. */
  transition: color 0.3s, border-color 0.3s;
}

.shift-badge.active {
  /* #84 follow-up: dark text on the orange bg (was white). Reads
     cleaner and survives any flash before --color-warm-accent
     resolves. The !important defeats theme overrides. */
  background-color: #ff6b35;
  background-color: var(--color-warm-accent, #ff6b35);
  color: #1a1a1a !important;
  font-weight: bold;
  border-color: #ff6b35;
  border-color: var(--color-warm-accent, #ff6b35);
  box-shadow: 0 0 10px rgba(212, 114, 42, 0.5);
}

footer {
  background-color: var(--color-header-bg);
  padding: 15px 20px;
  text-align: center;
  color: var(--color-light-text);
  font-size: 0.9rem;
  margin-top: 40px;
  border-top: 2px solid var(--color-warm-accent);
}

.section-box {
  background-color: var(--color-header-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 20px;
  margin-bottom: 25px;
}

.section-title {
  color: var(--color-warm-accent);
  font-size: 1.3rem;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.form-section {
  background-color: var(--color-header-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 25px;
  margin-bottom: 25px;
}

.form-section h2 {
  color: var(--color-warm-accent);
  font-size: 1.4rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-warm-accent);
}

.form-section h3 {
  color: var(--color-light-text);
  font-size: 1.1rem;
  margin: 20px 0 10px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  color: var(--color-gray);
  margin-bottom: 5px;
  font-size: 0.9rem;
  font-weight: 500;
}

input[type="text"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="email"],
textarea,
select {
  width: 100%;
  min-height: var(--field-height);
  padding: 8px 12px;
  font-size: var(--field-font-size);
  font-family: var(--font-body);
  background-color: var(--color-row-white);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: border-color 0.2s;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-warm-accent);
  box-shadow: 0 0 0 2px rgba(212, 114, 42, 0.2);
}

textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

textarea.large {
  min-height: 200px;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-group label {
  margin-bottom: 0;
  cursor: pointer;
}

.radio-group {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

.repeating-row {
  background-color: var(--color-row-white);
  padding: 15px;
  margin-bottom: 10px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  position: relative;
}

.repeating-row:nth-child(even) {
  background-color: var(--color-row-alt);
}

.repeating-row label {
  color: var(--color-gray);
}

.repeating-row input,
.repeating-row textarea {
  background-color: white;
}

.remove-row-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--color-danger);
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s;
}

.remove-row-btn:hover {
  background-color: #8B2F20;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  min-height: var(--field-height);
  font-size: var(--field-font-size);
  font-weight: 600;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  text-align: center;
}

.btn-primary {
  background-color: var(--color-warm-accent);
  color: white;
}

.btn-primary:hover {
  background-color: #C05E1E;
}

.btn-secondary {
  background-color: var(--color-border);
  color: white;
}

.btn-secondary:hover {
  background-color: #73502F;
}

.btn-success {
  background-color: var(--color-success);
  color: white;
}

.btn-success:hover {
  background-color: #3B6347;
}

.btn-danger {
  background-color: var(--color-danger);
  color: white;
}

.btn-danger:hover {
  background-color: #8B2F20;
}

.btn-group {
  display: flex;
  gap: 15px;
  margin-top: 25px;
  flex-wrap: wrap;
}

.add-row-btn {
  margin-top: 10px;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

.saved-forms-list {
  max-height: 600px;
  overflow-y: auto;
}

.form-card {
  background-color: var(--color-row-white);
  color: var(--color-text-dark);
  padding: 15px;
  margin-bottom: 15px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.form-card:hover {
  border-color: var(--color-warm-accent);
  box-shadow: 0 2px 8px rgba(212, 114, 42, 0.3);
}

.form-card-type {
  display: inline-block;
  background-color: var(--color-warm-accent);
  color: white;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.form-card-summary {
  font-size: 1rem;
  margin-bottom: 5px;
  color: var(--color-text-dark);
}

.form-card-meta {
  font-size: 0.85rem;
  color: var(--color-gray);
}

.delete-form-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--color-danger);
  color: white;
  border: none;
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.delete-form-btn:hover {
  background-color: #8B2F20;
}

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: var(--color-success);
  color: white;
  padding: 15px 25px;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  animation: slideIn 0.3s ease-out;
}

.toast.error {
  background-color: var(--color-danger);
}

.modal-overlay {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-modal {
  background-color: var(--color-header-bg);
  border: 2px solid var(--color-warm-accent);
  border-radius: var(--border-radius);
  padding: 30px;
  max-width: 500px;
  width: 90%;
}

.review-modal h3 {
  color: var(--color-warm-accent);
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.review-modal p {
  color: var(--color-light-text);
  margin-bottom: 15px;
  font-size: 0.9rem;
}

.review-modal textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-input-bg);
  color: var(--color-light-text);
  font-family: inherit;
  resize: vertical;
  margin-bottom: 15px;
}

.modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: var(--color-header-bg);
  border: 2px solid var(--color-warm-accent);
  border-radius: var(--border-radius);
  padding: 30px;
  max-width: 500px;
  width: 90%;
  position: relative;
}

.modal-header {
  color: var(--color-warm-accent);
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2rem;
  color: var(--color-light-text);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
}

.modal-close:hover {
  color: var(--color-warm-accent);
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.auto-populated {
  border-left: 3px solid var(--color-warm-accent);
}

.active-shift-display {
  background-color: var(--color-row-white);
  color: var(--color-text-dark);
  padding: 15px;
  border-radius: var(--border-radius);
  margin-bottom: 15px;
  border: 2px solid var(--color-warm-accent);
}

.active-shift-display strong {
  color: var(--color-warm-accent);
}

.filter-group {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-group select {
  min-width: 200px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-gray);
  font-style: italic;
}

.form-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-light-text);
  margin: 8px 0;
  padding: 0 4px;
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.leadership-role {
  background-color: var(--color-row-white);
  padding: 15px;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

.leadership-role h4 {
  color: var(--color-warm-accent);
  margin-bottom: 10px;
  font-size: 1rem;
}

.leadership-role label {
  color: var(--color-gray);
}

.leadership-role input {
  background-color: white;
}

.compact-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr 1fr 2fr;
  gap: 10px;
  align-items: end;
}

@media (max-width: 768px) {
  .form-row,
  .compact-row,
  .leadership-grid {
    grid-template-columns: 1fr;
  }
  
  .button-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-group {
    flex-direction: column;
  }
  
  .filter-group select {
    width: 100%;
  }
}

/* Incident Cards */
.incident-card {
  background: var(--color-row-alt);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 15px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.incident-card:hover {
  background: var(--color-row-white);
  border-color: var(--color-warm-accent);
  box-shadow: 0 2px 8px rgba(212, 114, 42, 0.2);
}

/* State Badges */
.state-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
}

.incident-item {
  background: var(--color-header-bg);
  border-left: 4px solid #888;
  padding: 15px;
  margin-bottom: 12px;
  border-radius: 6px;
}

.incident-item.state-escalated {
  border-left-color: #d9534f;
  border-left-width: 6px;
  background: rgba(217, 83, 79, 0.10);
  box-shadow: 0 0 0 1px rgba(217, 83, 79, 0.35), 0 2px 8px rgba(217, 83, 79, 0.18);
}

.incident-item.state-open {
  border-left-color: #e74c3c;
}

.incident-item.state-in-progress {
  border-left-color: #f39c12;
}

.incident-item.state-monitoring,
.incident-item.state-ongoing {
  border-left-color: #3498db;
}

.incident-item.state-resolved {
  border-left-color: #2ecc71;
}

.incident-item.state-closed {
  border-left-color: #95a5a6;
}

.incident-state {
  background: rgba(255,255,255,0.1);
  color: var(--color-light-text);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.2);
}

/* status-shield — used in the Active Incidents table and elsewhere. Pill
   shape; color comes from the .state-* class applied alongside it. */
.status-shield {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* Bug #55: secondary chip stacks under the primary state chip in the
   same Status cell. Keeps the underlying state readable while still
   surfacing modifiers (Needs Review, etc). Smaller + lighter weight
   than .status-shield so the eye lands on the state first. */
.status-shield-secondary,
.state-badge-secondary {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.2px;
  opacity: 0.92;
}
/* When both primary and secondary exist, force a line break so the
   secondary stacks below the primary instead of wrapping awkwardly. */
.status-shield + .status-shield-secondary,
.state-badge   + .state-badge-secondary {
  display: block;
  width: fit-content;
}

/* Status pills — palette spread across the wheel so a glance at the table
   reads as multi-colored, not a wash of red. Escalated keeps red (it earns
   it). Needs-Review uses amber/yellow → orange → deep red as the day count
   grows. Open/In-Progress/Monitoring/Resolved/Closed get distinct hues. */
.state-escalated {
  background: linear-gradient(135deg, #d9534f, #b52b27);
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(217, 83, 79, 0.6);
  animation: escalated-pulse 2s ease-in-out infinite;
}

@keyframes escalated-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(217, 83, 79, 0.6); }
  50%      { box-shadow: 0 0 14px rgba(217, 83, 79, 0.9); }
}

/* Needs-Review — amber tier, gets warmer as days accumulate. Default styling
   is the day-1 amber; the inline ⏰ icon + "Open N Days" copy carries the
   day count. We could split into 3 classes if we want per-tier coloring;
   for now amber is loud enough to flag. */
.state-needs-review {
  background: linear-gradient(135deg, #fbc02d, #f57c00);
  color: #1a1a1a;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border: 1px solid #ffd54f;
}

.state-open {
  /* Bright blue — "open" should invite action, not alarm. */
  background: #1976d2;
  color: #fff;
}

.state-in-progress {
  /* Warm amber — work is in motion. */
  background: #f57c00;
  color: #fff;
}

.state-monitoring,
.state-ongoing {
  /* Teal — eyes on it, calm. */
  background: #00897b;
  color: #fff;
}

.state-resolved {
  /* Forest green — done well. */
  background: #2e7d32;
  color: #fff;
}

.state-closed {
  /* Deep slate — archived. */
  background: #455a64;
  color: #fff;
}

/* ── Shift bubbles ────────────────────────────────────────────────────────
   Compact role+callsign cards used on the Manage Rangers on Shift page
   (Khaki+ — clickable to expand) and on the dashboard's "Currently On
   Duty" widget (any role — read-only). Same visual language as the
   "Current Leadership" cards: role label up top, big callsign, optional
   meta below. Per-role border/accent colors so the roster reads at a
   glance. Pair-grouped bubbles wrap in a subtle dashed container with a
   👥 chip so partners are visually paired up. */
.shift-bubble-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}
.shift-bubble {
    flex: 0 0 auto;
    min-width: 170px;
    max-width: 230px;
    background: rgba(0,0,0,0.20);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 14px;
    text-align: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.shift-bubble.clickable { cursor: pointer; }
.shift-bubble.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.shift-bubble-role {
    font-size: 0.74rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-warm-accent);
    margin-bottom: 4px;
}
.shift-bubble-callsign {
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
}
.shift-bubble-meta {
    font-size: 0.78rem;
    color: var(--color-light-text);
    margin-top: 6px;
    line-height: 1.35;
}

/* Per-role palette — match the existing role styling on form badges. */
.shift-bubble.role-ooh        { border-color: #d9534f; background: rgba(217,83,79,0.10); }
.shift-bubble.role-ooh        .shift-bubble-role { color: #ff6b6b; }
.shift-bubble.role-khaki      { border-color: var(--color-warm-accent); background: rgba(232,138,58,0.10); }
.shift-bubble.role-khaki      .shift-bubble-role { color: var(--color-warm-accent); }
.shift-bubble.role-kit        { border-color: #fdd835; background: rgba(253,216,53,0.10); }
.shift-bubble.role-kit        .shift-bubble-role { color: #fdd835; }
.shift-bubble.role-alpha      { border-color: #9c27b0; background: rgba(156,39,176,0.10); }
.shift-bubble.role-alpha      .shift-bubble-role { color: #ce93d8; }
.shift-bubble.role-mentor     { border-color: #00897b; background: rgba(0,137,123,0.10); }
.shift-bubble.role-mentor     .shift-bubble-role { color: #80cbc4; }
.shift-bubble.role-dirt       { border-color: #f57c00; background: rgba(245,124,0,0.08); }
.shift-bubble.role-dirt       .shift-bubble-role { color: #ffb74d; }

/* Pod grouping — goldenrod outline + tinted backdrop so a podded set of
   bubbles reads as one unit, not just two bubbles that happen to be
   side-by-side. The "POD" chip on top labels the container explicitly.
   Bug #43 — earlier styling was a 1px dashed near-white border, which
   was nearly invisible against the dark page. */
.shift-pair {
    display: flex;
    gap: 10px;
    padding: 18px 14px 14px 14px;
    background: rgba(218, 165, 32, 0.10);  /* goldenrod tint */
    border-radius: 14px;
    border: 2px solid #daa520;             /* goldenrod */
    align-items: stretch;
    position: relative;
    flex: 0 0 auto;
    margin-top: 10px;  /* room for the POD chip on top */
    box-shadow: 0 2px 10px rgba(218, 165, 32, 0.12);
}
.shift-pair::before {
    content: '👥 POD';
    position: absolute;
    top: -12px;
    left: 14px;
    background: #daa520;
    color: #1a1a1a;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.shift-pair .shift-bubble { min-width: 150px; }

/* Posts (bug #48). Persistent named-location containers — like
   .shift-pair but with a real label, an outline that's distinct from
   the goldenrod pod outline, and an empty-state placeholder so empty
   posts still show. Teal palette to differentiate from pods. */
.shift-posts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: stretch;
}
.shift-post {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
    /* Bug #71: bumped top padding from 22px → 30px so the now-2-line
       wrap-capable chip has room above the occupants without
       overlapping. */
    padding: 30px 14px 14px 14px;
    background: rgba(0, 137, 123, 0.08);   /* teal tint */
    border-radius: 14px;
    border: 2px solid #00897b;             /* teal */
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 137, 123, 0.12);
}
.shift-post::before {
    content: '📍 ' attr(data-name);
    position: absolute;
    top: -14px;
    left: 14px;
    background: #00897b;
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: bold;
    letter-spacing: 0.4px;
    line-height: 1.2;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    /* Bug #71: taller chip — allow up to 2 lines so longer assignment
       names ("Working on Welcome Camp medical tent") display fully
       instead of getting ellipsised. Width still capped to leave room
       for the edit button on the right (bug #59). */
    max-width: calc(100% - 80px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shift-post-edit {
    position: absolute;
    top: -10px;
    right: 14px;
    background: rgba(0, 137, 123, 0.85);
    color: #fff;
    border: none;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.78rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.shift-post-edit:hover { background: #00695c; }
.shift-post-occupants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    min-height: 110px;  /* room for the empty placeholder */
}
.shift-post-empty {
    color: var(--color-light-text);
    font-style: italic;
    font-size: 0.85rem;
    padding: 28px 12px;
    text-align: center;
    border: 1px dashed rgba(0,137,123,0.45);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}
.shift-post .shift-bubble { min-width: 150px; }
/* Drag-over state for posts mirrors pods, in the post's teal palette. */
.shift-post.drag-over {
    outline: 3px dashed #4db6ac;
    outline-offset: 2px;
    background: rgba(0, 137, 123, 0.18);
}

/* Drag-and-drop pod-assignment affordances. The bubble being dragged dims
   slightly; valid drop targets (other bubbles, pod containers, or the row
   itself for "leave pod") light up with an accent ring. */
.shift-bubble[draggable="true"] { cursor: grab; }
.shift-bubble[draggable="true"]:active { cursor: grabbing; }
.shift-bubble.drag-source { opacity: 0.45; }
.shift-bubble.drag-over,
.shift-pair.drag-over {
    outline: 3px dashed var(--color-warm-accent, #e88a3a);
    outline-offset: 2px;
    background: rgba(232,138,58,0.16);
}
.shift-bubble-row.drag-over {
    outline: 2px dashed rgba(232,138,58,0.45);
    outline-offset: 6px;
    border-radius: 12px;
}

/* Modal — opens when a manager clicks a bubble to edit/remove/note. */
.bubble-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000; padding: 24px;
}
.bubble-modal {
    background: var(--color-header-bg);
    border: 2px solid var(--color-warm-accent);
    border-radius: 10px;
    padding: 22px 26px;
    max-width: 480px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.bubble-modal h3 {
    color: var(--color-warm-accent);
    margin: 0 0 4px 0;
    font-size: 1.4rem;
}
.bubble-modal-meta {
    color: var(--color-light-text);
    font-size: 0.9rem;
    margin-bottom: 14px;
}
.bubble-modal-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 0.92rem;
}
.bubble-modal-row > span:first-child { color: var(--color-light-text); }
.bubble-modal-actions {
    margin-top: 16px;
    display: flex; gap: 8px; flex-wrap: wrap;
}

/* Admin usage chart — two tabs (Rangers / Incidents) + stacked-area
   chart + clickable legend chips. Each chip carries its category color
   in --chip-color (set inline) and toggles visibility on click. */
.usage-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-light-text);
    padding: 10px 18px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: bold;
    letter-spacing: 0.02em;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.usage-tab:hover { color: #fff; }
.usage-tab.active {
    color: var(--color-warm-accent);
    border-bottom-color: var(--color-warm-accent);
}

/* Bug #73: Login History tab on /admin/usage. Compact table; failed
   attempts get a subtle red row tint so a long string of fails reads
   at a glance. */
.login-history-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.login-history-tbl th {
    text-align: left;
    padding: 8px 10px;
    background: var(--color-header-bg);
    color: var(--color-warm-accent);
    font-weight: 600;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.login-history-tbl td {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    vertical-align: top;
}
.login-history-tbl tr.lh-fail   td { background: rgba(217,83,79,0.06); }
.login-history-tbl tr.lh-ok    td.lh-result { color: var(--color-success); font-weight: 600; }
.login-history-tbl tr.lh-fail  td.lh-result { color: #ff8a80;             font-weight: 600; }
.login-history-tbl td.lh-when  { font-family: monospace; font-size: 0.78rem; color: var(--color-light-text); white-space: nowrap; }
.login-history-tbl td.lh-cs    { white-space: nowrap; }
.login-history-tbl td.lh-ip    { font-family: monospace; font-size: 0.78rem; color: var(--color-light-text); }
.login-history-tbl td.lh-detail{ color: var(--color-light-text); font-size: 0.82rem; max-width: 380px; }

/* Saved Reports list — bug #53. Plain stacked div items with no
   visual separation made it hard to tell which View/Edit + Attach-to-IR
   buttons belonged to which report. Now each item has its own padded
   block with a thin separator above. */
.form-item {
    padding: 12px 4px;
    border-top: 1px solid var(--color-border);
}
.form-item:first-child {
    border-top: none;
    padding-top: 4px;
}
.form-item-header {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    margin-bottom: 6px;
}
.form-item-body {
    display: flex; justify-content: space-between; gap: 12px;
    align-items: center; flex-wrap: wrap;
}
.form-item-info { color: var(--color-light-text); font-size: 0.85rem; display: flex; gap: 12px; flex-wrap: wrap; }
.form-item-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.form-title { color: #fff; font-weight: 600; margin-bottom: 4px; }
.form-date  { color: var(--color-light-text); font-size: 0.82rem; margin-left: auto; }
.form-type-badge {
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.78rem;
    color: var(--color-warm-accent);
    font-weight: 600;
}
.ir-badge {
    background: rgba(212,114,42,0.15);
    border: 1px solid var(--color-warm-accent);
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 0.78rem;
    color: var(--color-warm-accent);
    font-family: monospace;
}

/* Bug #69: rendered-markdown inside a Saved Reports tile. Tighten the
   default heading sizes / margins so a multi-paragraph Khaki Shift
   Summary doesn't blow the tile out of proportion. */
.md-body { line-height: 1.5; }
.md-body p { margin: 6px 0; }
.md-body p:first-child { margin-top: 0; }
.md-body p:last-child  { margin-bottom: 0; }
.md-body .md-h1,
.md-body .md-h2,
.md-body .md-h3 {
    color: var(--color-warm-accent);
    font-weight: 700;
    line-height: 1.25;
    margin: 10px 0 4px;
}
.md-body .md-h1 { font-size: 1.05rem; }
.md-body .md-h2 { font-size: 1.0rem; }
.md-body .md-h3 { font-size: 0.95rem; letter-spacing: 0.2px; }
.md-body .md-h1:first-child,
.md-body .md-h2:first-child,
.md-body .md-h3:first-child { margin-top: 0; }
.md-body .md-ul {
    margin: 6px 0 6px 18px;
    padding: 0;
}
.md-body .md-ul li { margin: 2px 0; }
.md-body strong { color: #fff; font-weight: 600; }
.md-body em     { color: var(--color-light-text); font-style: italic; }
.md-body code {
    background: rgba(255,255,255,0.08);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.92em;
}

/* Per-row attribute chips — small label/value pills under the title that
   bubble up the most useful fields per form-type (location, category,
   shift, witness, etc). Visually subordinate to the main title. */
.form-attr-chips {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin: 4px 0 8px;
}
.form-attr-chip {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.78rem;
    color: var(--color-light-text);
    line-height: 1.4;
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.form-attr-chip-label {
    color: var(--color-warm-accent);
    font-weight: 600;
    margin-right: 3px;
}

/* Saved Reports filter chips. One per form-type, all active by default;
   click any chip to fade it out and remove that type from the list.
   Same toggle pattern as the usage-chart legend chips, but the chip
   itself wears the type color (no separate swatch needed). */
.report-filter-chip {
    background: var(--chip-color);
    border: 1.5px solid var(--chip-color);
    color: #fff;
    border-radius: 999px;
    padding: 5px 5px 5px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    transition: background 0.15s, color 0.15s, opacity 0.15s, filter 0.15s;
    line-height: 1.2;
}
.report-filter-chip:hover { filter: brightness(1.18); }
.report-filter-chip.off {
    background: transparent;
    color: var(--color-light-text);
    opacity: 0.55;
    border-color: var(--color-border);
}
.report-filter-chip.off:hover { filter: none; opacity: 0.85; }
.report-filter-chip-count {
    background: rgba(0,0,0,0.32);
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 0.78rem;
    font-weight: bold;
    min-width: 22px;
    text-align: center;
}
.report-filter-chip.off .report-filter-chip-count {
    background: rgba(255,255,255,0.10);
    color: var(--color-light-text);
}

/* Bug #65: inline header sign-out link. Sits to the left of the role
   chip + "Signed in as Phaethon" block. Subtle so it doesn't compete
   with the chip color, but underlined on hover for affordance. */
.header-signout {
    color: var(--color-light-text);
    font-size: 0.82rem;
    margin-right: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid var(--color-border);
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.header-signout:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: rgba(217, 83, 79, 0.08);
    text-decoration: none;
}

/* Bug #54: inline image attachments. The thumbnail rail sits below the
   description / note textarea while composing — each thumb represents a
   [screenshot:tmp-N] placeholder in the text and ships with the form
   submit. The .bug-inline-attach <a><img></a> renders the resolved
   attachment in the bug-detail panel description / notes. */
.bug-attach-rail {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 10px;
    padding: 8px;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
}
.bug-attach-thumb {
    position: relative;
    width: 110px; height: 80px;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--color-border);
}
.bug-attach-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.bug-attach-thumb-meta {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 4px;
    line-height: 1.2;
    text-align: center;
    font-family: monospace;
}
.bug-attach-thumb-x {
    position: absolute; top: 2px; right: 2px;
    background: rgba(217,83,79,0.92);
    color: #fff;
    border: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
}
.bug-inline-attach {
    display: inline-block;
    margin: 6px 0;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
    max-width: 480px;
    vertical-align: top;
}
.bug-inline-attach img {
    display: block;
    max-width: 100%;
    height: auto;
}
.bug-inline-attach:hover {
    border-color: var(--color-warm-accent);
}

/* Bug #56: collapsible per-ranger note groups on /shift/manage. Default
   collapsed; click the summary row to expand. Disclosure triangle from
   the browser is hidden in favour of our own ▸ that rotates on open. */
.ranger-notes-group {
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}
.ranger-notes-group > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 4px 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.ranger-notes-group > summary::-webkit-details-marker { display: none; }
.ranger-notes-toggle-arrow {
    color: var(--color-light-text);
    font-size: 0.85rem;
    transition: transform 0.15s;
    display: inline-block;
}
.ranger-notes-group[open] > summary > .ranger-notes-toggle-arrow {
    transform: rotate(90deg);
}
.ranger-notes-callsign {
    color: var(--color-warm-accent);
    font-weight: bold;
    font-size: 0.95rem;
}
.ranger-notes-count {
    color: var(--color-light-text);
    font-size: 0.78rem;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    padding: 1px 9px;
    font-weight: 600;
}
.ranger-notes-group > summary:hover .ranger-notes-callsign {
    text-decoration: underline;
}
.ranger-notes-body {
    padding: 4px 0 12px 24px;
}

.usage-legend-toggle {
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    color: var(--color-light-text);
    padding: 3px 10px;
    cursor: pointer;
    font-size: 0.80rem;
    transition: color 0.15s, border-color 0.15s;
}
.usage-legend-toggle:hover {
    color: var(--color-warm-accent);
    border-color: var(--color-warm-accent);
}

.usage-legend-chip {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    transition: opacity 0.15s, background 0.15s;
}
.usage-legend-chip.compact {
    padding: 3px 9px 3px 7px;
    font-size: 0.78rem;
}
.usage-legend-chip.expanded {
    padding: 5px 4px 5px 9px;
    font-size: 0.85rem;
}
.usage-legend-chip:hover { background: rgba(255,255,255,0.10); }
.usage-legend-chip.off { opacity: 0.38; }
.usage-legend-chip.off .usage-legend-swatch { background: transparent; border-color: var(--chip-color); }

.usage-legend-swatch {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 2px;
    background: var(--chip-color);
    border: 1.5px solid var(--chip-color);
    flex: 0 0 auto;
}
.usage-legend-name { white-space: nowrap; }
.usage-legend-total {
    background: var(--chip-color);
    color: #fff;
    font-weight: bold;
    font-size: 0.78rem;
    padding: 1px 8px;
    border-radius: 999px;
    margin-left: 4px;
    min-width: 22px;
    text-align: center;
}