/* ============================================
   CHECKLIST APP - Light Flat Theme
   Clean light grey, sharp edges, utilitarian
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
  /* Backgrounds */
  --bg-main: #f4f5f7;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #ebecf0;

  /* Borders */
  --border-light: #dfe1e6;
  --border-medium: #c1c7d0;
  /* Referenced throughout the stylesheet but was never defined, which made
     every `border: … var(--border-color)` shorthand invalid (no border at all). */
  --border-color: var(--border-light);

  /* Accent (dark blue) */
  --accent: #2c5282;
  --accent-hover: #234168;
  --accent-light: rgba(44, 82, 130, 0.08);

  /* Text */
  --text-primary: #172b4d;
  --text-secondary: #5e6c84;
  --text-muted: #97a0af;

  /* Priority Colors */
  --priority-high: #de350b;
  --priority-med: #ff991f;
  --priority-low: #ffab00;

  /* Status */
  --status-success: #00875a;
  --status-pending: #ff991f;
  --status-denied: #de350b;

  /* Sizing */
  --sidebar-width: 240px;
  --header-height: 44px;
  --radius-sm: 3px;
  --radius-md: 3px;
  --radius-lg: 4px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(9,30,66,0.08);
  --shadow-md: 0 2px 8px rgba(9,30,66,0.12);
  --shadow-lg: 0 8px 24px rgba(9,30,66,0.16);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.42;
  color: var(--text-primary);
  background: var(--bg-main);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
}

[x-cloak] {
  display: none !important;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}

.sidebar-brand {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-light);
}

.brand-icon {
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

.brand-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.sidebar-nav {
  flex: 1;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
  position: relative;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.nav-label {
  font-size: 14px;
}

.nav-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--priority-high);
  color: white;
  display: none;
}

.nav-badge:not(:empty) {
  display: inline-block;
}

.approvals-badges {
  margin-left: auto;
  display: flex;
  gap: 3px;
}

.priority-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 8px;
}

.priority-badge.high {
  background: rgba(220, 53, 69, 0.15);
  color: var(--priority-high);
}

.priority-badge.medium {
  background: rgba(245, 158, 11, 0.15);
  color: var(--priority-med);
}

.priority-badge.low {
  background: rgba(184, 134, 11, 0.12);
  color: var(--priority-low);
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border-light);
}

.logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.logout-btn:hover {
  background: var(--bg-hover);
  border-color: var(--text-secondary);
}

/* ---------- Main Wrapper ---------- */
.main-wrapper {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Top Header ---------- */
.top-header {
  height: var(--header-height);
  padding: 0 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.header-user {
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border);
  transition: transform 0.1s;
}
.header-color-dot:hover {
  transform: scale(1.2);
}

.color-picker-popover {
  position: fixed;
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s;
}
.color-swatch:hover {
  transform: scale(1.2);
}
.color-swatch.active {
  border-color: #333;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #333;
}

/* ---------- Main Content ---------- */
.main-content {
  flex: 1;
  padding: 14px 20px;
  overflow-y: auto;
}

/* ---------- Summary Cards ---------- */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.summary-cards.two-col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 600px;
}

.summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  transition: all 0.15s ease;
}

.summary-card.clickable {
  cursor: pointer;
}

.summary-card.clickable:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.summary-card-header {
  margin-bottom: 8px;
}

.summary-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.summary-card-content {
  font-size: 13px;
  color: var(--text-secondary);
}

.summary-card-content.muted {
  color: var(--text-muted);
}

/* Priority Pills */
.priority-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 6px;
}

.priority-pill.high {
  background: rgba(220, 53, 69, 0.1);
  color: var(--priority-high);
}

.priority-pill.med {
  background: rgba(245, 158, 11, 0.1);
  color: var(--priority-med);
}

.priority-pill.low {
  background: rgba(184, 134, 11, 0.12);
  color: #b8860b;
}

/* ---------- Facilities Layout ---------- */
.facilities-layout {
  display: flex;
  gap: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  min-height: 500px;
  overflow: hidden;
}

.facilities-sidebar {
  width: 260px;
  border-right: 1px solid var(--border-light);
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
}

.facilities-sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 15px;
}

.facilities-tree {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
}

.facilities-detail {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* Facility Nodes */
.facility-node {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.1s ease;
}

.facility-node:hover {
  background: var(--bg-hover);
}

.facility-node.selected {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

.facility-children {
  margin-left: 16px;
}

/* ---------- Content Sections ---------- */
.content-section {
  margin-bottom: 32px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: 600;
}

.subsection-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
}

.btn-secondary:hover {
  background: var(--border-light);
}

.btn-icon {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-icon:hover {
  background: var(--accent-hover);
}

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

.btn-danger:hover {
  background: #c82333;
}

/* Small buttons */
.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

/* ---------- Menu Grid ---------- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.menu-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: all 0.15s ease;
}

.menu-card.clickable {
  cursor: pointer;
}

.menu-card.clickable:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.menu-card-icon {
  font-size: 28px;
  line-height: 1;
}

.menu-card-body {
  flex: 1;
}

.menu-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.menu-card-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Card List ---------- */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s ease;
}

.list-card:hover {
  border-color: var(--border-medium);
}

.list-card.clickable {
  cursor: pointer;
}

.list-card.clickable:hover {
  border-color: var(--accent);
}

.list-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.list-card-icon.pending {
  background: rgba(245, 158, 11, 0.15);
  color: var(--status-pending);
}

.list-card-icon.approved {
  background: rgba(34, 197, 94, 0.15);
  color: var(--status-success);
}

.list-card-icon.denied {
  background: rgba(220, 53, 69, 0.15);
  color: var(--status-denied);
}

.list-card-body {
  flex: 1;
  min-width: 0;
}

.list-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.list-card-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.list-card-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.list-card-badge.high {
  background: var(--priority-high);
  color: white;
}

.list-card-badge.medium {
  background: var(--priority-med);
  color: white;
}

.list-card-badge.low {
  background: var(--priority-low);
  color: #b8860b;
}

/* ---------- Empty State ---------- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-message {
  text-align: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---------- Dynamic Content ---------- */
.dynamic-content {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
  min-height: 200px;
}

.dynamic-content:empty {
  display: none;
}

/* ---------- Modals ---------- */
.modal, .fs-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}

.modal.open, .fs-modal.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-card, .fs-modal-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(640px, 90vw);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fs-modal-card {
  width: min(800px, 90vw);
}

.modal-header, .fs-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title, .fs-modal-title {
  font-size: 16px;
  font-weight: 600;
}

.modal-close, .fs-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.modal-close:hover, .fs-modal-close:hover {
  background: var(--bg-hover);
}

.modal-body, .fs-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* ---------- Forms ---------- */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
  transition: border-color 0.15s ease;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

/* ---------- Tables ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-light);
}

.data-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.data-table tr:hover {
  background: var(--bg-hover);
}

/* ---------- Supervisor Only ---------- */
.supervisor-only {
  display: none;
}

body.is-supervisor .supervisor-only {
  display: flex;
}

/* ---------- Calendar ---------- */
.calendar-shell {
  padding: 12px;
}

.calendar-head {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 8px;
}

.calendar-head > div {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.cal-day {
  background: var(--bg-sidebar);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  min-height: 100px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cal-day:hover {
  border-color: var(--border-medium);
}

.cal-day.has-items {
  border-color: var(--accent);
  border-width: 2px;
}

.cal-date {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.cal-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
}

/* ---------- Priority Count (Header) ---------- */
.priority-count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  margin-right: 4px;
}

.priority-count.high {
  background: rgba(220, 53, 69, 0.15);
  color: var(--priority-high);
}

.priority-count.med {
  background: rgba(245, 158, 11, 0.15);
  color: var(--priority-med);
}

.priority-count.low {
  background: rgba(251, 191, 36, 0.2);
  color: #b8860b;
}

/* ---------- Approvals ---------- */
.approvals-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.approvals-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-hover);
  padding: 4px;
  border-radius: var(--radius-md);
}

.approvals-tab-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.approvals-tab-btn:hover {
  color: var(--text-primary);
}

.approvals-tab-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.tab-count {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  margin-left: 6px;
  background: var(--border-light);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.approvals-tab-btn.active .tab-count {
  background: var(--accent-light);
  color: var(--accent);
}

.todos-tab-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.todos-tab-btn:hover {
  color: var(--text-primary);
}

.todos-tab-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.todos-tab-btn.active .tab-count {
  background: var(--accent-light);
  color: var(--accent);
}

.approvals-search {
  flex: 0 1 280px;
}

.approvals-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.approvals-search input:focus {
  outline: none;
  border-color: var(--accent);
}

.approvals-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.approval-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.approval-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.approval-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.approval-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.approval-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.approval-card-status {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.approval-card-status.pending {
  background: rgba(245, 158, 11, 0.15);
  color: var(--status-pending);
}

.approval-card-status.approved {
  background: rgba(34, 197, 94, 0.15);
  color: var(--status-success);
}

.approval-card-status.denied {
  background: rgba(220, 53, 69, 0.15);
  color: var(--status-denied);
}

.approval-card-status.completed {
  background: rgba(34, 197, 94, 0.15);
  color: var(--status-success);
}

.approval-card-status.disregarded {
  background: rgba(249, 115, 22, 0.15);
  color: #c45000;
}

/* ---------- Detail Sections ---------- */
.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.detail-title {
  font-size: 18px;
  font-weight: 600;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* ---------- Squawk/Item List Rows ---------- */
.item-row {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--bg-sidebar);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.item-row:hover {
  background: var(--bg-hover);
}

.item-row-priority {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  margin-right: 12px;
}

.item-row-priority.high { background: var(--priority-high); }
.item-row-priority.medium { background: var(--priority-med); }
.item-row-priority.low { background: var(--priority-low); }

.item-row-body {
  flex: 1;
}

.item-row-title {
  font-size: 13px;
  font-weight: 500;
}

.item-row-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

.item-row-actions {
  display: flex;
  gap: 8px;
}

/* ---------- Action Picker ---------- */
.action-picker {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.action-btn {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.action-btn:hover {
  border-color: var(--border-medium);
}

.action-btn.selected {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}

.action-btn.approve.selected {
  border-color: var(--status-success);
  background: rgba(34, 197, 94, 0.1);
  color: var(--status-success);
}

.action-btn.deny.selected {
  border-color: var(--status-denied);
  background: rgba(220, 53, 69, 0.1);
  color: var(--status-denied);
}

.action-btn.complete.selected {
  border-color: var(--status-success);
  background: rgba(34, 197, 94, 0.1);
  color: var(--status-success);
}

.action-btn.disregard.selected {
  border-color: #c45000;
  background: rgba(249, 115, 22, 0.1);
  color: #c45000;
}

/* ---------- History List ---------- */
.history-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.history-item:last-child {
  border-bottom: none;
}

.history-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.history-icon.approve {
  background: rgba(34, 197, 94, 0.15);
  color: var(--status-success);
}

.history-icon.deny {
  background: rgba(220, 53, 69, 0.15);
  color: var(--status-denied);
}

.history-icon.complete {
  background: rgba(34, 197, 94, 0.15);
  color: var(--status-success);
}

.history-icon.disregard {
  background: rgba(249, 115, 22, 0.15);
  color: #c45000;
}

.history-icon.reopen {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.history-icon.comment {
  background: rgba(156, 163, 175, 0.15);
  color: var(--text-muted);
}

.history-content {
  flex: 1;
}

.history-header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 2px;
}

.history-action {
  font-weight: 600;
  font-size: 13px;
}

.history-user {
  font-size: 12px;
  color: var(--text-muted);
}

.history-comment {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.history-time {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---------- Complete Button ---------- */
.complete-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.complete-btn:hover {
  background: var(--accent-hover);
}

.done-check {
  color: var(--status-success);
  font-weight: 600;
}

/* ---------- Misc Legacy Support ---------- */
.modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.modal-table th {
  text-align: left;
  font-size: 11px;
  color: var(--text-muted);
  padding-bottom: 8px;
}

.modal-table td {
  padding: 10px 8px;
  vertical-align: top;
  border-top: 1px solid var(--border-light);
}

.modal-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.modal-filters button {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-filters button.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.due-red {
  color: var(--priority-high);
  font-weight: 600;
}

/* Legacy classes mapped to new system */
.primary-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}

.primary-btn:hover {
  background: var(--accent-hover);
}

.primary-btn.small-btn {
  padding: 6px 10px;
  font-size: 12px;
}

/* Header cards legacy */
.header-card, .facilities-header-cards .header-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  transition: all 0.15s ease;
}

.header-card.clickable:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  cursor: pointer;
}

.header-card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.header-card-content {
  font-size: 12px;
  color: var(--text-muted);
}

.facilities-header-cards, .trading-header-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.trading-header-cards {
  grid-template-columns: repeat(2, 1fr);
  max-width: 500px;
}

/* Trading section legacy */
.trading-container {
  max-width: 900px;
}

.trading-section {
  margin-bottom: 32px;
}

.trading-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.trading-section .section-header h3 {
  font-size: 16px;
  font-weight: 600;
}

/* Anti-todos legacy */
.antitodos-container, .hours-container {
  max-width: 900px;
}

.antitodos-header, .hours-header {
  margin-bottom: 24px;
}

.antitodos-header h2, .hours-header h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.antitodos-header .subtitle, .hours-header .subtitle {
  color: var(--text-muted);
  font-size: 14px;
}

.antitodos-menu, .hours-menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.antitodos-content, .hours-content {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.antitodos-content:empty, .hours-content:empty {
  display: none;
}

/* Reports grid */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.report-stat {
  background: var(--bg-sidebar);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
}

.report-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}

.report-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ========== FACILITIES SECTION OVERHAUL ========== */

/* Facilities Tree */
.facilities-tree {
  padding: 8px;
}

.facility-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s ease;
  margin-bottom: 2px;
}

.facility-row:hover {
  background: var(--bg-hover);
}

.facility-row.selected {
  background: var(--accent-light);
}

.facility-row.child {
  margin-left: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--border-light);
}

.facility-row.child:hover {
  border-left-color: var(--accent);
}

.facility-row.selected.child {
  border-left-color: var(--accent);
}

.facility-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.facility-row.selected .facility-name {
  color: var(--accent);
  font-weight: 600;
}

/* Hide the chevron/bullet - we use border-left for children instead */
.facility-row .chevron {
  display: none;
}

/* Priority count badges in tree */
.hp-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.hp-count.high {
  background: rgba(220, 53, 69, 0.15);
  color: var(--priority-high);
}

.hp-count.med {
  background: rgba(245, 158, 11, 0.15);
  color: var(--priority-med);
}

.hp-count.low {
  background: rgba(251, 191, 36, 0.2);
  color: #b8860b;
}

/* Facility Detail Panel */
.facility-detail {
  padding: 0;
}

.facility-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.facility-detail-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.facility-divider {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 0 0 16px 0;
}

/* Facility Tabs */
.facility-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 12px;
}

.facility-tabs .tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.facility-tabs .tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.facility-tabs .tab.active {
  background: var(--accent-light);
  color: var(--accent);
}

.facility-tab-body {
  min-height: 200px;
}

/* Subtle Button Variants */
.btn-subtle {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-subtle:hover {
  background: var(--border-light);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.btn-subtle-primary {
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid rgba(197, 139, 58, 0.3);
}

.btn-subtle-primary:hover {
  background: rgba(197, 139, 58, 0.2);
  border-color: var(--accent);
}

/* Squawks Section Overhaul */
.squawks-section {
  padding: 0;
}

.sq-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sq-header-row h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

/* Squawk Card Container */
.sq-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}

.sq-card h4,
.sq-subheader {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sq-empty {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 20px;
  margin: 0;
}

/* Squawk Items as Cards */
.squawk-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.squawk-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s ease;
}

.squawk-item:hover {
  border-color: var(--border-medium);
}

.squawk-item.clickable {
  cursor: pointer;
}

.squawk-item.clickable:hover {
  border-color: var(--accent);
}

.squawk-priority-bar {
  width: 4px;
  height: 36px;
  border-radius: 2px;
  flex-shrink: 0;
}

.squawk-priority-bar.high { background: var(--priority-high); }
.squawk-priority-bar.medium { background: var(--priority-med); }
.squawk-priority-bar.low { background: var(--priority-low); }

.squawk-info {
  flex: 1;
  min-width: 0;
}

.squawk-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.squawk-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.squawk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.squawk-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  text-transform: capitalize;
}

.squawk-badge.high {
  background: var(--priority-high);
  color: white;
}

.squawk-badge.medium {
  background: var(--priority-med);
  color: white;
}

.squawk-badge.low {
  background: var(--priority-low);
  color: #b8860b;
}

/* Done By Input */
.done-by-input {
  width: 100px;
  padding: 6px 8px;
  font-size: 11px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.done-by-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Mark Done Button */
.btn-mark-done {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--status-success);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-mark-done:hover {
  background: #16a34a;
}

.btn-mark-done:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Completed squawk styling */
.squawk-item.completed {
  opacity: 0.7;
}

.squawk-item.completed .squawk-title {
  color: var(--text-muted);
}

.squawk-done-check {
  color: var(--status-success);
  font-size: 14px;
}

.squawk-done-by-text {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* Legacy table styles - updated */
.squawk-table {
  display: none; /* Hide old table, use new card layout */
}

/* Specs and Maintenance - similar card style */
.specs-section,
.maint-section {
  padding: 0;
}

.spec-card,
.maint-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}

.spec-card-header,
.maint-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.spec-card-title,
.maint-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.spec-items,
.maint-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spec-item,
.maint-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.spec-item:hover,
.maint-item:hover {
  border-color: var(--accent);
}

.spec-item-name,
.maint-item-name {
  font-weight: 500;
  color: var(--text-primary);
}

.spec-item-value,
.maint-item-freq {
  color: var(--text-muted);
  font-size: 12px;
}

/* Spec card header */
.spec-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  cursor: pointer;
}

.spec-chevron {
  font-size: 12px;
  color: var(--text-muted);
}

.spec-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.spec-items.collapsed {
  display: none;
}

/* Maintenance item card */
.maint-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.maint-item:hover {
  border-color: var(--accent);
}

.maint-item-info {
  flex: 1;
}

.maint-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.maint-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
}

.maint-item-notes {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 200px;
  text-align: right;
}

.maint-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Loading state */
.loading {
  color: var(--text-muted);
  text-align: center;
  padding: 40px;
  font-size: 13px;
}

/* Legacy overrides */
.primary-btn.small,
.small-btn {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.primary-btn.small:hover,
.small-btn:hover {
  background: var(--border-light);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

/* Modal form styles */
.modal-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  margin-top: 14px;
}

.modal-label:first-child {
  margin-top: 0;
}

.input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
}

.input:focus {
  outline: none;
  border-color: var(--accent);
}

.danger-btn {
  background: transparent;
  color: var(--priority-high);
  border: 1px solid var(--priority-high);
  padding: 8px 14px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: 8px;
}

.danger-btn:hover {
  background: rgba(220, 53, 69, 0.1);
}

/* ========== MODALS OVERHAUL ========== */

/* Form inside modals */
.fs-modal-body .form-group {
  margin-bottom: 16px;
}

.fs-modal-body .form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.fs-modal-body .input,
.fs-modal-body .form-input,
.fs-modal-body .form-select,
.fs-modal-body .form-textarea,
.fs-modal-body textarea.input,
.fs-modal-body select.input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
}

.fs-modal-body .input:focus {
  outline: none;
  border-color: var(--accent);
}

.fs-modal-body .form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.fs-modal-body .primary-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.fs-modal-body .primary-btn:hover {
  background: var(--accent-hover);
}

.fs-modal-body .secondary-btn {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.fs-modal-body .secondary-btn:hover {
  background: var(--border-light);
  color: var(--text-primary);
}

.fs-modal-body .danger-btn {
  background: transparent;
  color: var(--priority-high);
  border: 1px solid var(--priority-high);
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Priority picker in forms */
.priority-picker {
  display: flex;
  gap: 8px;
}

.priority-btn {
  flex: 1;
  padding: 8px 12px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.priority-btn:hover {
  border-color: var(--border-medium);
}

.priority-btn.active[data-priority="high"] {
  border-color: var(--priority-high);
  background: rgba(220, 53, 69, 0.1);
  color: var(--priority-high);
}

.priority-btn.active[data-priority="medium"] {
  border-color: var(--priority-med);
  background: rgba(245, 158, 11, 0.1);
  color: var(--priority-med);
}

.priority-btn.active[data-priority="low"] {
  border-color: var(--priority-low);
  background: rgba(184, 134, 11, 0.12);
  color: #b8860b;
}

/* Toggle labels */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Radio labels */
.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  font-size: 13px;
}

.notify-when {
  display: flex;
  margin-bottom: 10px;
}

.delay-wrapper {
  display: flex;
  gap: 8px;
}

.small-input {
  width: auto;
  min-width: 80px;
}

/* ========== CALENDAR MODAL ========== */

.calendar-grid-view {
  padding: 0;
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.calendar-nav .nav-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.calendar-nav .nav-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
}

.calendar-nav .nav-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.weekday-labels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.weekday-labels span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.cal-cell {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px;
  min-height: 70px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cal-cell:hover {
  border-color: var(--border-medium);
}

.cal-cell.has-items {
  border-color: var(--accent);
  border-width: 2px;
}

.cal-cell.today {
  background: var(--accent-light);
}

.cal-cell.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}

.cell-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.cell-count {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}

.cell-completed {
  font-size: 10px;
  color: var(--status-success);
}

/* Day Detail View */
.day-detail {
  padding: 0;
}

.day-items-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.day-item {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.day-item.completed {
  opacity: 0.7;
}

.day-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  flex-shrink: 0;
}

.day-item-content {
  flex: 1;
  min-width: 0;
}

.day-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.day-item-facility {
  font-size: 11px;
  color: var(--text-muted);
}

.day-item-done {
  color: var(--status-success);
  font-size: 12px;
  font-weight: 500;
}

.day-item-complete {
  display: flex;
  align-items: center;
  gap: 8px;
}

.day-item-complete .done-by-input {
  width: 100px;
  padding: 6px 8px;
  font-size: 11px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

/* ========== HISTORY MODAL ========== */

.history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-week,
.history-date-group,
.calendar-date-group {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px;
}

.history-week h4,
.history-date-group h4,
.calendar-date-group h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.history-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

.history-entry:last-child {
  border-bottom: none;
}

.entry-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.entry-type {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--bg-hover);
  color: var(--text-muted);
}

.entry-facility {
  font-size: 11px;
  color: var(--text-muted);
}

.entry-by {
  font-size: 11px;
  color: var(--text-muted);
}

/* Calendar item in list */
.calendar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}

.calendar-item.completed {
  opacity: 0.6;
}

.calendar-item .item-title {
  font-size: 13px;
  font-weight: 500;
}

.done-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.15);
  color: var(--status-success);
  font-weight: 500;
}

.complete-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ========== ALL SQUAWKS MODAL ========== */

.all-squawks-view {
  padding: 0;
}

.squawks-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.squawks-filters .search-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
}

.status-filter {
  display: flex;
  gap: 4px;
}

.filter-btn {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.filter-btn:hover {
  background: var(--bg-hover);
}

.filter-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.squawks-grouped-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.assignee-group {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.assignee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border-light);
}

.assignee-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.assignee-count {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

.assignee-squawks {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Squawk card in All Squawks */
.squawk-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.squawk-card:hover {
  border-color: var(--accent);
}

.squawk-card.completed {
  opacity: 0.6;
}

.squawk-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  flex-shrink: 0;
}

.squawk-card-content {
  flex: 1;
  min-width: 0;
}

.squawk-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.squawk-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.squawk-card-assignee {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.squawk-card-assignee.unassigned {
  color: var(--text-muted);
  opacity: 0.7;
}

.squawk-card-facility {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.squawk-card-details {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.squawk-card-due {
  font-size: 11px;
  color: var(--priority-high);
  margin-top: 4px;
}

.squawk-done-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.15);
  color: var(--status-success);
  font-weight: 500;
  align-self: flex-start;
}

/* Squawk detail view */
.squawk-detail {
  padding: 0;
}

.detail-section {
  margin-bottom: 16px;
}

.detail-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.detail-value {
  font-size: 14px;
  color: var(--text-primary);
}

.priority-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.priority-badge.high {
  background: var(--priority-high);
  color: white;
}

.priority-badge.medium {
  background: var(--priority-med);
  color: white;
}

.priority-badge.low {
  background: var(--priority-low);
  color: #b8860b;
}

.complete-section {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 20px 0;
}

.detail-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

/* ========== TRADING VIEW ========== */

.trading-container {
  max-width: 900px;
}

/* Squawks section uses same card style */
.squawks-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

/* ========== HOURS & ANTI-TODOS LISTS ========== */

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.list-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

/* Data tables - make them card-like */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 13px;
}

.data-table thead tr {
  background: var(--bg-sidebar);
}

.data-table th {
  text-align: left;
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: var(--bg-hover);
}

.data-table .clickable {
  cursor: pointer;
  color: var(--accent);
}

.data-table .clickable:hover {
  text-decoration: underline;
}

/* Small buttons in tables */
.data-table .small-btn {
  padding: 5px 10px;
  font-size: 11px;
  margin-right: 4px;
}

.data-table .small-btn.secondary {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}

.data-table .small-btn.secondary:hover {
  background: var(--bg-hover);
  color: var(--priority-high);
  border-color: var(--priority-high);
}

/* Small input in tables */
.data-table .small-input {
  padding: 5px 8px;
  font-size: 11px;
  width: 100px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

/* Badges */
.vacation-badge {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
}

.regular-badge {
  background: rgba(34, 197, 94, 0.15);
  color: var(--status-success);
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
}

/* Summary row */
.summary-row {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  padding: 14px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-label {
  font-size: 12px;
  color: var(--text-muted);
}

.summary-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

/* Reports filters */
.reports-header {
  margin-bottom: 16px;
}

.reports-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.reports-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.filter-group .input {
  padding: 8px 10px;
  font-size: 13px;
  min-width: 140px;
}

.filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.export-btn {
  background: var(--bg-hover) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-light) !important;
}

.export-btn:hover {
  background: var(--border-light) !important;
}

.reports-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.reports-summary .summary-card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
}

.reports-summary .summary-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.reports-summary .summary-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.reports-table-wrapper {
  overflow-x: auto;
}

.reports-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 12px;
}

.reports-table th {
  background: var(--bg-sidebar);
  padding: 10px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}

.reports-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
}

.reports-table tbody tr:last-child td {
  border-bottom: none;
}

.reports-table .empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: 30px;
}

/* Anti-todo history */
.history-entry-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 10px;
}

.entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.entry-date {
  font-size: 11px;
  color: var(--text-muted);
}

.entry-details {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}

.entry-minutes {
  font-size: 12px;
  color: var(--priority-high);
  font-weight: 500;
}

.entry-opp-total {
  font-size: 12px;
  color: var(--text-muted);
}

.opp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.opp-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--bg-hover);
  color: var(--text-secondary);
}

/* Opportunity cost form rows */
.opp-cost-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.opp-cost-row .input {
  flex: 1;
}

.opp-cost-row .input.small {
  flex: 0;
  width: 80px;
}

/* Select prompt */
.select-prompt {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1024px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .facilities-header-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 60px;
  }

  .sidebar-brand .brand-text,
  .nav-label,
  .logout-btn span {
    display: none;
  }

  .sidebar-brand {
    justify-content: center;
    padding: 16px 8px;
  }

  .nav-item {
    justify-content: center;
    padding: 12px 8px;
  }

  .logout-btn {
    justify-content: center;
  }

  .main-wrapper {
    margin-left: 60px;
  }

  .main-content {
    padding: 16px;
  }

  .summary-cards {
    grid-template-columns: 1fr;
  }

  .facilities-layout {
    flex-direction: column;
  }

  .facilities-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-light);
    max-height: 200px;
  }
}

/* ========== HOURS & ANTI-TODOS CARD LAYOUTS ========== */

/* Section subtitle */
.section-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Hours Summary Row */
.hours-summary-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.hours-summary-card {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hours-summary-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.hours-summary-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.hours-summary-value.vacation {
  color: #3b82f6;
}

/* Hours Log Items */
.hours-log-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hours-log-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: border-color 0.15s ease;
}

.hours-log-item:hover {
  border-color: var(--accent);
}

.hours-log-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 100px;
}

.hours-log-info {
  flex: 1;
  min-width: 0;
}

.hours-log-category {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.hours-log-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.hours-log-notes {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.hours-log-type {
  flex-shrink: 0;
}

.hours-log-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Type badges */
.type-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 10px;
}

.type-badge.vacation {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.type-badge.regular {
  background: rgba(34, 197, 94, 0.15);
  color: var(--status-success);
}

/* Category Items */
.category-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.category-item:hover {
  border-color: var(--accent);
}

.category-item-info {
  flex: 1;
}

.category-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.category-item-rates {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rate-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.rate-badge.vacation {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.category-item-actions {
  display: flex;
  gap: 6px;
}

/* Anti Item Rows */
.anti-item-row,
.wantto-item-row,
.delegate-item-row {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.anti-item-row:hover,
.wantto-item-row:hover,
.delegate-item-row:hover {
  border-color: var(--accent);
}

.anti-item-icon,
.wantto-item-icon,
.delegate-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.anti-item-info,
.wantto-item-info,
.delegate-item-info {
  flex: 1;
  min-width: 0;
}

.anti-item-title,
.wantto-item-title,
.delegate-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.anti-item-meta,
.wantto-item-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
}

.anti-item-actions,
.wantto-item-actions,
.delegate-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Danger button variant */
.btn-subtle.danger {
  color: var(--priority-high);
}

.btn-subtle.danger:hover {
  background: rgba(220, 53, 69, 0.1);
  border-color: var(--priority-high);
}

/* ========== SQUAWK DETAIL VIEW (All Squawks Modal) ========== */

.squawk-detail-view {
  padding: 0;
}

.detail-header-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}

.detail-header-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.detail-priority-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
}

.detail-header-info {
  flex: 1;
  min-width: 0;
}

.detail-header-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.detail-header-facility {
  font-size: 13px;
  color: var(--text-muted);
}

.detail-description {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.detail-info-item {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-info-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.detail-info-content {
  flex: 1;
  min-width: 0;
}

.detail-info-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.detail-info-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.detail-info-value.status-done {
  color: var(--status-success);
}

.detail-info-value.status-open {
  color: var(--status-pending);
}

.detail-complete-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 16px;
}

.detail-complete-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.detail-complete-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.detail-complete-row .done-by-input {
  flex: 1;
  padding: 10px 12px;
  font-size: 14px;
}

.detail-actions-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

/* ─────────────────────────────────────────────
   Add Link Button & Inline Links
───────────────────────────────────────────── */

.btn-link-insert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-link-insert:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-sidebar);
}

.btn-link-insert svg {
  flex-shrink: 0;
}

.inline-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  transition: all 0.15s ease;
}

.inline-link:hover {
  color: var(--accent-hover);
  border-bottom-style: solid;
}

/* ─────────────────────────────────────────────
   Link Insert Modal
───────────────────────────────────────────── */

.link-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}

.link-modal-overlay.open {
  display: flex;
}

.link-modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
  margin: 20px;
  animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.link-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}

.link-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.link-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s ease;
}

.link-modal-close:hover {
  color: var(--text-primary);
}

.link-modal-body {
  padding: 20px;
}

.link-modal-body .form-group {
  margin-bottom: 16px;
}

.link-modal-body .form-group:last-child {
  margin-bottom: 0;
}

.link-modal-body .form-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  color: var(--text-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.link-modal-body .form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.link-modal-body .form-input::placeholder {
  color: var(--text-muted);
}

.link-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-sidebar);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ============================================
   OPERATIONS HUB
   ============================================ */

/* --- Toolbar --- */
.ops-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ops-view-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-hover);
  border-radius: var(--radius-md);
  padding: 3px;
}

.ops-view-tab {
  padding: 5px 14px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ops-view-tab.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.ops-view-tab:hover:not(.active) {
  color: var(--text-primary);
}

.ops-tab-icon {
  font-size: 15px;
}

.ops-date-display {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Filters --- */
.ops-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.ops-mine-toggle {
  display: flex;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ops-mine-btn {
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: background 0.15s, color 0.15s;
}

.ops-mine-btn.active {
  background: var(--accent);
  color: #fff;
}

.ops-mine-btn:not(.active):hover {
  background: var(--bg-hover);
}

.ops-filter-select {
  padding: 4px 10px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 12px;
  color: var(--text-primary);
  min-width: 140px;
}

.ops-filter-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.ops-filter-check input {
  accent-color: var(--accent);
}

/* --- Week Strip --- */
.ops-week-strip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.ops-week-month {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 4px 0 0;
}
.ops-week-row {
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.ops-week-nav {
  padding: 0 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
}

.ops-week-nav:hover {
  color: var(--accent);
}

.ops-week-days {
  display: flex;
  flex: 1;
  gap: 2px;
}

.ops-week-day {
  flex: 1;
  text-align: center;
  padding: 4px 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.ops-week-day:hover {
  background: var(--bg-hover);
}

.ops-week-day.selected {
  background: var(--accent-light);
  outline: 2px solid var(--accent);
}

.ops-week-day.today .ops-week-day-num {
  font-weight: 700;
  color: var(--accent);
}

.ops-week-day-name {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.ops-week-day-num {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 1px 0;
}

.ops-week-day-count {
  font-size: 10px;
  color: var(--text-secondary);
}

.ops-week-star {
  color: #FFC107;
  font-size: 12px;
}

/* --- Progress Bar --- */
.ops-progress-bar-container {
  margin-bottom: 10px;
}

.ops-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.ops-export-btn {
  font-size: 11px;
  padding: 2px 8px;
  margin-left: auto;
}
#ops-export-all-csv svg {
  flex-shrink: 0;
}
.ops-gold-star {
  font-size: 28px;
  color: var(--text-muted);
  transition: all 0.3s;
}

.ops-gold-star.earned {
  color: #FFC107;
  text-shadow: 0 0 12px rgba(255, 193, 7, 0.5);
  animation: starPulse 0.6s ease-out;
}

@keyframes starPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.ops-progress-bar {
  height: 6px;
  background: var(--border-light);
  border-radius: 3px;
  overflow: hidden;
}

.ops-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* --- Checklist --- */
.ops-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 50px;
}

.ops-dept-section {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ops-dept-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}

.ops-dept-header:hover {
  background: var(--bg-hover);
}

.ops-dept-color {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ops-dept-name {
  font-weight: 600;
  font-size: 14px;
  flex: 1;
}

.ops-dept-count {
  font-size: 13px;
  color: var(--text-muted);
}

.ops-dept-toggle {
  font-size: 10px;
  color: var(--text-muted);
}

.ops-dept-items {
  border-top: 1px solid var(--border-light);
}

.ops-dept-items.collapsed {
  display: none;
}

/* --- Checklist Item --- */
.ops-checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--border-light);
  transition: background 0.1s;
  position: relative;
}

.ops-checklist-item:last-child {
  border-bottom: none;
}

.ops-checklist-item:hover {
  background: var(--bg-hover);
}

.ops-checklist-item.completed {
  opacity: 0.75;
}

.ops-check-box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-medium);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--status-success);
  transition: all 0.15s;
}

.ops-check-box:hover:not(.checked) {
  border-color: var(--accent);
  background: var(--accent-light);
}

.ops-check-box.checked {
  background: var(--status-success);
  border-color: var(--status-success);
  color: white;
}

.ops-check-box.deferred {
  background: #b08a3e;
  border-color: #b08a3e;
  color: white;
  font-size: 11px;
}

.ops-checklist-item.deferred {
  opacity: 0.7;
  background: rgba(176, 138, 62, 0.06);
}

.ops-defer-btn {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 6px;
}
.ops-defer-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}

.ops-deferred-from-badge,
.ops-deferred-to-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(176, 138, 62, 0.15);
  color: #8a6a20;
  margin-left: 6px;
  vertical-align: middle;
}

.ops-item-info {
  flex: 1;
  min-width: 0;
}

.ops-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ops-owner-pill {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.ops-checklist-item.completed {
  opacity: 0.75;
}

.ops-facility-subheader {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 5px 12px;
  border-top: 1px solid var(--border-light);
}
.ops-facility-icon {
  font-size: 12px;
}

.ops-completed-divider {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding: 4px 12px;
  background: var(--bg-main);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.ops-batch-cb {
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.ops-batch-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  background: var(--bg-card);
  border-top: 2px solid var(--accent);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  z-index: 200;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

.ops-item-meta {
  display: flex;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.ops-item-cadence,
.ops-item-owner,
.ops-item-area,
.ops-item-facility {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-hover);
  padding: 1px 6px;
  border-radius: 3px;
}

.ops-item-done-by {
  font-size: 10px;
  color: var(--text-secondary);
  white-space: nowrap;
  background: var(--bg-hover);
  padding: 1px 6px;
  border-radius: 3px;
}

/* --- Complete form (inline) --- */
.ops-complete-form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}

.ops-complete-name {
  padding: 4px 8px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  font-size: 12px;
  width: 120px;
}

.ops-complete-btn {
  padding: 4px 10px;
  border: none;
  background: var(--status-success);
  color: white;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
}

.ops-complete-btn:hover {
  background: #16a34a;
}

.ops-empty {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}

/* ============================================
   CALENDAR VIEW
   ============================================ */

.ops-cal-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.ops-cal-nav-btn {
  padding: 6px 14px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  color: var(--text-secondary);
}

.ops-cal-nav-btn:hover {
  background: var(--bg-hover);
  color: var(--accent);
}

.ops-cal-month {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 200px;
  text-align: center;
}

.ops-cal-header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.ops-cal-header-cell {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px;
  letter-spacing: 0.5px;
}

.ops-cal-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ops-cal-week {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.ops-cal-cell {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px;
  min-height: 70px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.ops-cal-cell:hover {
  border-color: var(--accent);
}

.ops-cal-cell.selected {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.ops-cal-cell.other-month {
  opacity: 0.35;
}

.ops-cal-cell.today {
  border-color: var(--accent);
  background: var(--accent-light);
}

.ops-cal-cell.gold-star {
  background: rgba(255, 193, 7, 0.06);
}

.ops-cal-day-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.ops-cal-count {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.ops-cal-progress {
  width: 100%;
  height: 3px;
  background: var(--border-light);
  border-radius: 2px;
  margin-top: 3px;
  overflow: hidden;
}

.ops-cal-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.2s;
}

.ops-cal-cell.gold-star .ops-cal-progress-fill {
  background: #FFC107;
}

.ops-cal-star {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 16px;
  color: #FFC107;
}

.ops-cal-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 12px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 12px;
}

/* ============================================
   ALL ITEMS TABLE
   ============================================ */

.ops-items-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ops-items-count {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-left: auto;
}

.ops-items-search {
  padding: 7px 14px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-size: 13px;
  width: 260px;
}

.ops-items-table-wrap {
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.ops-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ops-items-table th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-light);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.ops-items-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.ops-items-table tr:last-child td {
  border-bottom: none;
}

.ops-items-table tr:hover {
  background: var(--bg-hover);
}

.ops-items-table tr.inactive {
  opacity: 0.5;
}

.ops-dept-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  color: white;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Facility chain on All Items: a segmented chip. The parent is the dark
   segment with a building/vehicle icon and ends in an arrow point that
   overlaps the light sub-location segment (breadcrumb ribbon). Parent-only
   facilities show the dark segment alone. */
.ops-location-pill {
  display: inline-flex;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #9aa5b8;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
  vertical-align: middle;
}
.ops-location-pill .parent {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px 0 8px;
  background: #4a5b78;
  color: #fff;
  font-weight: 600;
}
.ops-location-pill .parent svg { width: 11px; height: 11px; flex: none; }
.ops-location-pill .parent::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #4a5b78;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 1;
}
.ops-location-pill .sub {
  padding: 0 8px 0 12px;
  background: #eef1f6;
  color: var(--text-primary);
  font-weight: 500;
}

.ops-item-cell-title {
  font-weight: 500;
}

.ops-item-cell-notes {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ops-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.ops-status-pill.active {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.ops-status-pill.inactive {
  background: rgba(156, 163, 175, 0.15);
  color: var(--text-muted);
}

/* Item action buttons (edit/delete) */
.ops-item-actions {
  white-space: nowrap;
}

.ops-action-btn {
  background: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  cursor: pointer;
  color: var(--text-secondary);
  margin-left: 4px;
  line-height: 1;
}

.ops-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.ops-delete-btn:hover {
  color: var(--priority-high);
  border-color: var(--priority-high);
}

.ops-add-item-btn {
  margin-left: auto;
}

/* Item form (in generic modal) */
.ops-item-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0;
}

.ops-form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ops-form-row label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.ops-form-row input,
.ops-form-row select,
.ops-form-row textarea {
  padding: 7px 10px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-main);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}

.ops-form-row input:focus,
.ops-form-row select:focus,
.ops-form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.ops-detail-modal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.ops-detail-row {
  display: flex;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
}

.ops-detail-label {
  min-width: 80px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding-top: 1px;
}

.ops-detail-actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border-light);
}

.ops-detail-delete-btn {
  color: var(--priority-high) !important;
  border-color: var(--priority-high) !important;
}

.ops-form-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

.ops-form-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 2px;
}
.ops-form-hint b {
  color: var(--text-secondary);
  font-weight: 600;
}
.ops-form-static {
  font-size: 13px;
  color: var(--text-primary);
  padding: 4px 0;
}
.ops-label-soft {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Weekly cadence: day-of-week pills (multi-select). */
.ops-dow-pills {
  display: flex;
  gap: 6px;
}
.ops-dow-pill {
  flex: 1;
  padding: 7px 0;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-main);
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.ops-dow-pill:hover:not(.on) {
  border-color: var(--accent);
  color: var(--accent);
}
.ops-dow-pill.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Sub-task row editor (Ad-hoc item form + per-occurrence modal). */
.ops-subtask-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ops-subtask-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ops-subtask-row input[type="text"] {
  flex: 1;
  min-width: 0;
}
.ops-subtask-row input[type="number"] {
  width: 64px;
  flex: none;
}
.ops-subtask-row select {
  width: 96px;
  flex: none;
}
.ops-subtask-remove {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.ops-subtask-remove:hover {
  color: var(--priority-high);
}
.ops-subtask-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.ops-subtask-add {
  background: none;
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.ops-subtask-add:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.ops-subtask-total {
  font-size: 12px;
  color: var(--text-secondary);
}
.ops-subtask-total b {
  color: var(--text-primary);
  font-size: 13px;
}

/* Checklist cards for log-style items (Ad-hoc / Daily log). */
.ops-log-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6b4fbb;
  background: rgba(107, 79, 187, 0.12);
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.ops-subtasks {
  margin: 3px 0 2px;
}
.ops-subtask {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.6;
}
.ops-subtask::before {
  content: "•";
  color: var(--text-muted);
}
.ops-subtask .d {
  min-width: 0;
}
.ops-subtask .t {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}
.ops-subtask .t::before {
  content: "~";
}
.ops-subtasks-empty {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin: 3px 0 2px;
}
.ops-log-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.ops-log-btn:hover {
  background: var(--accent-light);
}
.ops-checklist-item.completed .ops-log-btn {
  border-color: var(--border-medium);
  color: var(--text-secondary);
}

/* Logged work sits below the scored list under its own heading. The separation
   is structural on purpose: recording extra work must never be able to cost the
   day its gold star, and nobody should have to read a tag to know that. */
.ops-log-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #6b4fbb;
  background: rgba(107, 79, 187, 0.06);
  padding: 4px 12px;
  border-top: 1px solid rgba(107, 79, 187, 0.18);
}
.ops-log-divider .t {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.ops-progress-stat {
  font-size: 11.5px;
  font-weight: 600;
  color: #6b4fbb;
}


/* ============================================
   MESSAGING
   ============================================ */

.nav-divider {
  height: 1px;
  background: var(--border-light);
  margin: 8px 16px;
}

.msg-nav-badge {
  background: var(--priority-high);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  margin-left: auto;
}

.msg-layout {
  display: flex;
  height: calc(100vh - var(--header-height) - 32px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}

.msg-sidebar {
  width: 260px;
  min-width: 260px;
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.msg-sidebar-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
}

.msg-sidebar-title {
  font-size: 14px;
}

.msg-section-label {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.msg-channel-list {
  flex: 1;
  overflow-y: auto;
}

.msg-channel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
}

.msg-channel-item:hover {
  background: var(--bg-hover);
}

.msg-channel-item.active {
  background: var(--accent-light);
  border-left-color: var(--accent);
}

.msg-channel-icon {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.msg-user-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.msg-channel-info {
  flex: 1;
  min-width: 0;
}

.msg-channel-name {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.msg-preview {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-unread-badge {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.msg-empty-channels {
  padding: 24px 16px;
  color: var(--text-muted);
  text-align: center;
}

/* Message main area */
.msg-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.msg-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.msg-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.msg-header-name {
  font-size: 14px;
  font-weight: 600;
}

.msg-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.msg-no-messages {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.msg-date-divider {
  text-align: center;
  margin: 16px 0 8px;
  font-size: 11px;
  color: var(--text-muted);
}

.msg-date-divider span {
  background: var(--bg-card);
  padding: 0 12px;
  position: relative;
}

.msg-bubble {
  position: relative;
  padding: 4px 8px 4px 0;
  max-width: 80%;
}

.msg-bubble.continuation {
  padding-top: 0;
}

.msg-bubble:hover .msg-actions {
  opacity: 1;
}

.msg-bubble.deleted {
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}

.msg-bubble-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.msg-sender-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.msg-sender-name {
  font-weight: 600;
  font-size: 13px;
}

.msg-time {
  font-size: 10px;
  color: var(--text-muted);
}

.msg-content {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.msg-edited {
  font-size: 10px;
  color: var(--text-muted);
}

.msg-actions {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  display: flex;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.msg-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  font-size: 12px;
  color: var(--text-secondary);
}

.msg-actions button:hover {
  color: var(--text-primary);
}

/* Attachments */
.msg-attachment {
  margin-top: 4px;
}

.msg-attachment-img {
  max-width: 300px;
  max-height: 200px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  cursor: pointer;
}

.msg-attachment-link {
  color: var(--accent);
  font-size: 12px;
}

/* Compose bar */
.msg-compose {
  padding: 8px 16px;
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.msg-input {
  flex: 1;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.msg-input:focus {
  border-color: var(--accent);
}

.msg-send-btn {
  padding: 8px 16px;
  font-size: 12px;
}

.msg-attach-btn {
  color: var(--text-secondary);
}

/* Typing indicator */
.msg-typing {
  padding: 0 16px 4px;
  font-size: 11px;
  color: var(--text-muted);
  min-height: 16px;
}

/* User picker (shared for new conv and channel settings) */
.msg-user-picker {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.msg-user-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  font-size: 13px;
}

.msg-user-dot-sm {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* New conversation modal tabs */
.msg-new-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.msg-new-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-secondary);
}

.msg-new-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Channel settings */
.msg-member-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.msg-member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}

.msg-member-role {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: auto;
}

.msg-remove-member {
  color: var(--priority-high);
  font-size: 16px;
}

/* Danger button */
.btn-danger {
  background: var(--priority-high);
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
}

.btn-danger:hover {
  opacity: 0.9;
}

.btn-secondary {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}


/* ============================================
   PERSONAL CALENDAR — Weekly Time Grid
   ============================================ */

.pcal-layout {
  display: flex;
  gap: 16px;
  height: calc(100vh - var(--header-height) - 32px);
}

.pcal-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pcal-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
}

.pcal-week-label {
  font-size: 15px;
  font-weight: 600;
  margin-left: 8px;
}

/* Week header (day names + dates) */
.pcal-week-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
}

.pcal-week-header {
  display: flex;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.pcal-time-gutter-header {
  width: 56px;
  min-width: 56px;
  border-right: 1px solid var(--border-light);
}

.pcal-day-header {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-right: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pcal-day-header:last-child {
  border-right: none;
}

.pcal-day-header-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pcal-day-header.today .pcal-day-header-name {
  color: var(--accent);
}

.pcal-day-header-num {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-primary);
}

.pcal-day-header-num.today {
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Scrollable time body */
.pcal-week-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  position: relative;
}

.pcal-time-gutter {
  width: 56px;
  min-width: 56px;
  position: relative;
  border-right: 1px solid var(--border-light);
}

.pcal-time-label {
  position: absolute;
  right: 8px;
  font-size: 10px;
  color: var(--text-muted);
  transform: translateY(-50%);
  white-space: nowrap;
}

.pcal-day-columns {
  flex: 1;
  display: flex;
}

.pcal-day-col {
  flex: 1;
  position: relative;
  border-right: 1px solid var(--border-light);
}

.pcal-day-col:last-child {
  border-right: none;
}

.pcal-day-col.today {
  background: rgba(44, 82, 130, 0.03);
}

/* Grid lines */
.pcal-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--border-light);
}

.pcal-half-hour-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed rgba(0, 0, 0, 0.06);
}

/* Clickable time slots */
.pcal-slot {
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  z-index: 1;
}

.pcal-slot:hover {
  background: var(--accent-light);
}

/* Now line */
.pcal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--priority-high);
  z-index: 5;
  pointer-events: none;
}

.pcal-now-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--priority-high);
}

/* Event blocks */
.pcal-event-block {
  position: absolute;
  left: 2px;
  right: 4px;
  background: var(--event-color, #3b82f6);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  font-size: 11px;
  overflow: hidden;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  border-left: 3px solid color-mix(in srgb, var(--event-color, #3b82f6) 70%, black);
}

.pcal-event-block:hover {
  opacity: 0.92;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.pcal-event-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcal-event-time {
  font-size: 10px;
  opacity: 0.85;
  white-space: nowrap;
}

/* Calendar sidebar (invites) */
.pcal-sidebar {
  width: 280px;
  min-width: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  overflow-y: auto;
}

.pcal-sidebar h3 {
  font-size: 14px;
  margin-bottom: 12px;
}

.pcal-invite-card {
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

.pcal-invite-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 4px;
}

.pcal-invite-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
}

.pcal-invite-actions {
  display: flex;
  gap: 8px;
}

/* Event detail modal */
.pcal-detail-event {
  padding: 10px 0;
}

.pcal-detail-row {
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pcal-detail-icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.pcal-detail-section {
  margin-top: 12px;
}

.pcal-detail-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.pcal-invitee-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 2px;
}

.pcal-invitee-row.accepted {
  background: rgba(0, 135, 90, 0.08);
}

.pcal-invitee-row.declined {
  background: rgba(222, 53, 11, 0.08);
}

.pcal-invitee-row.pending {
  background: rgba(255, 153, 31, 0.08);
}

.pcal-invitee-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.pcal-invitee-name {
  flex: 1;
  font-weight: 500;
}

.pcal-invitee-status {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: capitalize;
}

.pcal-detail-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}

/* Event creation/edit form */
.pcal-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pcal-form label {
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

.pcal-optional {
  font-weight: 400;
  color: var(--text-secondary);
}

.pcal-time-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.pcal-time-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pcal-time-field label {
  margin-top: 0;
}

.pcal-time-dash {
  padding-bottom: 8px;
  color: var(--text-secondary);
  font-size: 16px;
}

.pcal-time-select {
  cursor: pointer;
  appearance: auto;
}

/* Recurrence picker */
.pcal-recurrence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.pcal-rec-interval {
  width: 60px !important;
  text-align: center;
}

.pcal-rec-days-row {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.pcal-rec-day {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: all 0.15s;
  user-select: none;
}

.pcal-rec-day.selected {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}

.pcal-rec-day:hover {
  border-color: var(--accent-primary);
}

.pcal-invite-status-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.pcal-invite-status-label.accepted {
  color: var(--status-success);
}

.pcal-invite-status-label.declined {
  color: var(--status-denied);
}

.pcal-event-recur {
  font-size: 10px;
  margin-right: 2px;
}

#pcal-custom-recurrence {
  padding: 10px;
  background: var(--bg-hover);
  border-radius: 8px;
  margin-top: 4px;
}

/* ==================== MANAGE USERS ==================== */
.mu-layout { padding: 20px; }
.mu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.mu-head h2 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -0.2px; }
.mu-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.mu-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mu-search {
  width: 220px; padding: 7px 10px 7px 30px; font-size: 13px;
  border: 1px solid var(--border-medium); border-radius: var(--radius-sm); color: var(--text-primary);
  background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2397a0af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 9px center no-repeat;
}
.mu-search::placeholder { color: var(--text-muted); }
.mu-seg { display: inline-flex; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-card); }
.mu-seg button { border: 0; background: transparent; padding: 6px 11px; font-size: 12px; color: var(--text-secondary); cursor: pointer; border-right: 1px solid var(--border-light); font-family: inherit; }
.mu-seg button:last-child { border-right: 0; }
.mu-seg button:hover { background: var(--bg-hover); }
.mu-seg button.on { background: var(--accent); color: #fff; font-weight: 600; }

.mu-card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
/* The roster scrolls sideways inside its card when the window is narrow; the
   drawer overlays the page instead of squeezing the table. */
.mu-table-wrap { overflow-x: auto; }
.mu-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13px; }
.mu-table th {
  text-align: left; padding: 9px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted); background: #fafbfc; border-bottom: 1px solid var(--border-light); white-space: nowrap;
}
.mu-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-light); vertical-align: middle; white-space: nowrap; }
.mu-table td:nth-child(4) { white-space: normal; min-width: 200px; }  /* Manages / supports chips may wrap */
.mu-table td.c-person { min-width: 190px; }
.mu-table tbody tr[data-id] { cursor: pointer; }
.mu-table tbody tr[data-id]:hover td { background: #f7f8fa; }
.mu-table tr.mu-sel td { background: var(--accent-light); }
.mu-table tr.mu-grp td { background: #fbfcfd; padding: 12px 14px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-secondary); }
.mu-table tr.mu-grp td .n { color: var(--text-muted); font-weight: 500; margin-left: 6px; }
.mu-table tr.mu-grp td .hint { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-muted); margin-left: 10px; }
.mu-table tr.mu-empty td { color: var(--text-muted); font-size: 12.5px; padding: 14px; }
.mu-table tr.mu-inactive td { opacity: .55; }
.mu-table tr.mu-inactive:hover td { opacity: .8; }

.mu-person { display: flex; align-items: center; gap: 10px; }
.mu-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
}
.mu-avatar.lg { width: 38px; height: 38px; font-size: 13px; }
.mu-name { font-weight: 600; }
.mu-username { font-size: 11.5px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mu-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-secondary); }
.mu-none { color: #c8cdd6; }
.mu-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }

.mu-role { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: .2px; white-space: nowrap; }
.mu-role::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.mu-role.admin   { background: #e6effa; color: #1d4ed8; }
.mu-role.manager { background: #e3f5ec; color: #0b6b3a; }
.mu-role.ea      { background: #f3e8ff; color: #6b21a8; }
.mu-role.member  { background: var(--bg-hover); color: var(--text-secondary); }
/* legacy values, in case a stale row is ever shown */
.mu-role.supervisor { background: #e6effa; color: #1d4ed8; }
.mu-role.user { background: var(--bg-hover); color: var(--text-secondary); }

.mu-scope { display: flex; flex-wrap: wrap; gap: 4px; }
.mu-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }
.mu-chip.soft { background: var(--bg-hover); color: var(--text-secondary); font-weight: 500; }
.mu-chip.all { background: transparent; color: var(--text-muted); font-weight: 500; border: 1px dashed var(--border-medium); }
.mu-chip.warn { background: #fff4d6; color: #8a5a00; font-weight: 500; }

.mu-signin { display: inline-flex; gap: 4px; }
.mu-signin span { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: var(--bg-hover); color: var(--text-secondary); white-space: nowrap; }
.mu-signin span.ok { background: #e3f5ec; color: #0b6b3a; }

.mu-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.mu-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.mu-status.active { color: var(--status-success); } .mu-status.active::before { background: var(--status-success); }
.mu-status.inactive { color: var(--text-muted); } .mu-status.inactive::before { background: var(--border-medium); }

.mu-flag { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; margin-right: 4px; white-space: nowrap; }
.mu-flag-owner { background: #fef3c7; color: #92400e; }
.mu-flag-control { background: #dbeafe; color: #1e40af; }
.mu-flag-specified { background: #f3e8ff; color: #6b21a8; }
.mu-flag-muted { background: #f1f5f9; color: #64748b; }

.mu-actions { text-align: right; white-space: nowrap; }
.mu-ghost {
  font: 500 12px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--accent); cursor: pointer;
}
.mu-ghost:hover { background: var(--accent-light); }
.mu-ghost.quiet { color: var(--text-secondary); border-color: var(--border-medium); background: #fff; }
.mu-ghost.quiet:hover { background: var(--bg-hover); }
.mu-ghost.danger { color: var(--priority-high); }
.mu-ghost.danger:hover { background: #fdecea; }
.mu-ghost.sm { padding: 2px 7px; font-size: 13px; line-height: 1; }
.mu-ghost:disabled { opacity: .45; cursor: not-allowed; }

/* ---- roster + editor card side by side ---- */
.mu-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.mu-split.editing { grid-template-columns: minmax(0, 1fr) 390px; }
.mu-panel {
  display: none; flex-direction: column;
  position: sticky; top: calc(var(--header-height) + 16px); max-height: calc(100vh - var(--header-height) - 36px);
  background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.mu-panel.open { display: flex; }
@media (max-width: 1110px) {
  /* Not enough room side by side: the editor drops below the roster. */
  .mu-split.editing { grid-template-columns: minmax(0, 1fr); }
  .mu-panel { position: static; max-height: none; }
}
.mu-drawer-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-light); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.mu-drawer-title { min-width: 0; }
.mu-drawer-title .nm { font-weight: 600; font-size: 15px; letter-spacing: -0.1px; }
.mu-drawer-title .un { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-drawer-head-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.mu-drawer-close { border: 0; background: transparent; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 3px; }
.mu-drawer-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.mu-drawer-body { flex: 1; overflow: auto; padding: 14px; }
.mu-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-light); background: #fafbfc; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* ---- drawer form pieces ---- */
.mu-sec { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 18px 0 8px; }
.mu-sec:first-child { margin-top: 0; }
.mu-sec .line { flex: 1; height: 1px; background: var(--border-light); }
.mu-f { margin-bottom: 12px; }
.mu-lbl { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.mu-lbl .soft { font-weight: 400; color: var(--text-muted); }
.mu-input { width: 100%; padding: 7px 10px; font-size: 13px; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); background: #fff; color: var(--text-primary); box-sizing: border-box; font-family: inherit; }
.mu-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-light); }
.mu-input:disabled { background: var(--bg-main); color: var(--text-muted); cursor: not-allowed; }
.mu-input.sm { padding: 5px 8px; font-size: 12.5px; }
.mu-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.mu-hint.warn { color: #8a5a00; }
.mu-note { font-size: 12px; color: var(--text-secondary); padding: 9px 11px; background: var(--bg-main); border: 1px dashed var(--border-medium); border-radius: var(--radius-lg); }
.mu-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12.5px; }
.mu-checks label { display: flex; align-items: center; gap: 7px; cursor: pointer; }

.mu-dept-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mu-dept-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border-medium); border-radius: 14px;
  font: 500 12px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; cursor: pointer; background: #fff; color: var(--text-primary);
}
.mu-dept-pill:hover { border-color: var(--text-muted); }
.mu-dept-pill .sw { width: 8px; height: 8px; border-radius: 50%; }
.mu-dept-pill.on { color: #fff; font-weight: 600; }
.mu-dept-pill.on .sw { background: #fff !important; opacity: .9; }

.mu-princ { border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; }
.mu-princ-row { display: grid; grid-template-columns: 1fr 46px 62px 44px 24px; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-light); font-size: 12.5px; }
.mu-princ-row:last-child { border-bottom: 0; }
.mu-princ-row.head { background: #fafbfc; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.mu-princ-row.empty { grid-template-columns: 1fr; color: var(--text-muted); font-size: 12px; }
.mu-princ-row .who { display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; }
.mu-princ-add { padding: 8px 12px; background: #fafbfc; border-top: 1px solid var(--border-light); }
.mu-tog { width: 30px; height: 17px; border-radius: 10px; background: var(--border-medium); position: relative; border: 0; cursor: pointer; padding: 0; transition: background .15s; }
.mu-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.mu-tog.on { background: var(--status-success); } .mu-tog.on::after { left: 15px; }
.mu-tog.busy { opacity: .5; pointer-events: none; }

.mu-danger { margin-top: 18px; border: 1px solid #f5c2c7; background: #fff5f5; border-radius: var(--radius-lg); padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.mu-danger.ok { border-color: #bfe3cf; background: #f2faf5; }
.mu-danger b { font-weight: 600; }

/* Set-password modal (generic modal) keeps the small stacked form */
.mu-form { display: flex; flex-direction: column; gap: 8px; }
.mu-form label { font-size: 12px; font-weight: 500; margin-top: 4px; }

/* ==================== MANAGE FACILITIES ==================== */
/* Page shell: a portfolio band over a two-column property table.
   Modal styles (.mf-form and below) are shared with the editor and unchanged. */

.fa-page { padding: 20px; max-width: 1320px;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.fa-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.fa-head h2 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.3px; }
.fa-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.fa-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fa-search {
  width: 232px; padding: 7px 10px 7px 30px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border-medium); border-radius: var(--radius-sm); color: var(--text-primary);
  background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2397a0af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 9px center no-repeat;
}
.fa-search::placeholder { color: var(--text-muted); }
.fa-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--text-secondary); cursor: pointer; user-select: none; white-space: nowrap; }
.fa-check input { accent-color: var(--accent); }
.fa-check:hover { color: var(--text-primary); }

.fa-card { background: var(--bg-card); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(9,30,66,0.08), 0 18px 44px -28px rgba(16,32,68,0.6); }

/* Portfolio band — column names and totals in one field */
.fa-band { display: grid; grid-template-columns: minmax(0,1fr) repeat(4, auto) 132px; align-items: end; gap: 26px;
  padding: 17px 24px 15px; background: linear-gradient(112deg, #12294E 0%, #1C3C70 48%, #2F5695 100%); }
.fa-adhoc-on .fa-band { grid-template-columns: minmax(0,1fr) repeat(4, auto) 132px 104px; gap: 22px; }
.fa-band-k { font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.fa-band-v { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: #fff; margin-top: 4px;
  text-align: right; font-variant-numeric: tabular-nums; }
.fa-band-v.big { font-size: 23px; font-weight: 800; text-align: left; }
.fa-band-v.big span { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.66); margin-left: 7px; letter-spacing: 0; }
.fa-band-v.hot { color: #FF8A6B; } .fa-band-v.warm { color: #FFC46B; } .fa-band-v.cool { color: #9FD8FF; }
/* Recorded unplanned time. Purple everywhere it appears, matching the Ops Hub
   log badge and the Organizer's ad-hoc segment. */
.fa-band-v.ad { color: #C6AEFF; }

/* Two columns of properties, so the table stays short */
.fa-split { display: grid; grid-template-columns: 1fr 1fr; }
.fa-split.one { grid-template-columns: 1fr; }
.fa-split .fa-col + .fa-col { border-left: 1px solid var(--border-light); }
.fa-row { display: grid; grid-template-columns: minmax(0,1fr) 38px 38px 46px 50px 84px;
  column-gap: 8px; align-items: center; padding: 8px 14px; border-bottom: 1px solid #F0F2F6; position: relative; }
.fa-adhoc-on .fa-row { grid-template-columns: minmax(0,1fr) 38px 38px 46px 50px 84px 74px; }
.fa-row.fa-hdr { padding: 9px 14px 7px; background: #FBFCFD; border-bottom: 1px solid var(--border-light); }
.fa-row.fa-hdr div { font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #98A0AE; text-align: right; }
.fa-row.fa-hdr div:first-child { text-align: left; }
.fa-prop { cursor: pointer; }
.fa-prop:hover { background: #FAFBFD; }
.fa-prop.open { background: #F7F9FC; }

.fa-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fa-name-text { min-width: 0; }
.fa-title { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -0.25px; color: #101B32;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-meta { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-chev { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center;
  color: #A7AEBC; flex: none; transition: transform .16s; }
.fa-chev.hide { visibility: hidden; }
.fa-prop.open .fa-chev { transform: rotate(90deg); color: var(--accent); }

/* Identity tile: the property's own colour, its type as a white glyph */
.fa-tile-dot { position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-card); }
.fa-tile-dot.hot { background: #E8502E; } .fa-tile-dot.warm { background: #EFA02C; }
.fa-tile { position: relative; flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(145deg, var(--t-b), var(--t-a));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(16,32,68,0.24);
  display: inline-flex; align-items: center; justify-content: center; }

.fa-n { text-align: right; font-size: 14px; font-weight: 600; color: #3E4A5F; font-variant-numeric: tabular-nums; }
.fa-n.zero { color: #C9CFD9; font-weight: 500; }
.fa-c { text-align: right; white-space: nowrap; }
.fa-cap { display: inline-block; min-width: 30px; padding: 2px 8px; border-radius: 9px; font-size: 13.5px;
  font-weight: 800; font-variant-numeric: tabular-nums; }
.fa-cap.over { background: #FDEAE4; color: #C23A18; }
.fa-adhoc { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 9px;
  font-size: 12.5px; font-weight: 700; color: #6b4fbb; background: rgba(107, 79, 187, 0.10);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.fa-sub .fa-adhoc { font-size: 12px; }
.fa-cap.sq { background: #FFF3DC; color: #8A5A00; }
.fa-high { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #E8502E; margin-left: 4px; vertical-align: middle; }
.fa-load { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 9px;
  background: #EDF2FC; font-size: 12px; font-weight: 700; color: #24406F; font-variant-numeric: tabular-nums; }
.fa-load svg { color: #5B79AD; }
.fa-load.heavy { background: #E4EDFB; color: #1B3665; font-weight: 800; }
.fa-load.heavy svg { color: #3E63A0; }

/* Sub-locations, on the same grid so every figure stays in its column */
.fa-subs { background: #FCFDFE; border-bottom: 1px solid #F0F2F6; }
.fa-sub { padding-left: 46px; border-bottom: none; }
.fa-sub::before { content: ""; position: absolute; left: 31px; top: 0; bottom: 0; border-left: 1.5px solid #E1E6EE; }
.fa-sub:last-child::before { bottom: 50%; }
.fa-sub .fa-n, .fa-sub .fa-load { font-size: 12.5px; }
.fa-sub .fa-cap { font-size: 12px; padding: 1px 7px; min-width: 26px; }
.fa-sub-name.self { font-style: italic; color: var(--text-muted); }
.fa-sub-name { font-size: 12.5px; font-weight: 500; color: #56617A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-plate { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--text-muted);
  background: var(--bg-hover); padding: 1px 6px; border-radius: 3px; white-space: nowrap; flex: none; }

/* Row actions stay out of the way until the row is hovered */
.fa-acts { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap: 5px;
  opacity: 0; pointer-events: none; transition: opacity .12s; background: inherit; padding-left: 10px; }
.fa-row:hover .fa-acts, .fa-acts:focus-within { opacity: 1; pointer-events: auto; }
.fa-prop:hover .fa-acts { background: #FAFBFD; }
.fa-prop.open:hover .fa-acts { background: #F7F9FC; }
.fa-subs .fa-row:hover .fa-acts { background: #FCFDFE; }
.fa-act { font: 600 11.5px inherit; padding: 3px 9px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium); background: var(--bg-card); color: var(--text-secondary); cursor: pointer; }
.fa-act:hover { background: var(--bg-hover); color: var(--text-primary); }
.fa-act.danger:hover { border-color: #F5B5A6; background: #FFF1EE; color: #B62C0B; }
.fa-empty { padding: 28px; text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* ---------- Workspace: tree + facility panel ---------- */
.fa-ws { display: grid; grid-template-columns: 318px 1fr; gap: 16px; align-items: start; margin-top: 18px; }
.fa-tree-card { overflow: hidden; }
.fa-tree { padding: 8px; display: flex; flex-direction: column; gap: 6px;
  max-height: min(70vh, 720px); overflow-y: auto; overscroll-behavior: contain; }
.fa-tgrp { flex: 0 0 auto; border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; }
.fa-tgrp.in { border-color: var(--accent); }
.fa-tgrp.closed .fa-tkids { display: none; }
.fa-tp { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; background: #F7F9FC; }
.fa-tp:hover { background: #EEF2F8; }
.fa-tp.sel { background: var(--accent-light); }
.fa-tfold { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  color: #A7AEBC; flex: none; transition: transform .16s; }
.fa-tfold.hide { visibility: hidden; }
.fa-tgrp:not(.closed) .fa-tfold { transform: rotate(90deg); }
.fa-tname { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: #101B32;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-tbadges { display: flex; gap: 4px; flex: none; }
.fa-tbadges .fa-cap { min-width: 22px; padding: 1px 6px; font-size: 11px; }
.fa-tkids { padding: 3px 0 4px; }
.fa-tk { display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 34px; cursor: pointer; position: relative; }
.fa-tk::before { content: ""; position: absolute; left: 18px; top: -4px; bottom: 50%; width: 9px;
  border-left: 1.5px solid #E1E6EE; border-bottom: 1.5px solid #E1E6EE; border-bottom-left-radius: 4px; }
.fa-tk:hover { background: #F7F8FA; }
.fa-tk .fa-tname { font-weight: 500; color: #56617A; font-size: 12px; }
.fa-tk.sel { background: var(--accent-light); }
.fa-tk.sel .fa-tname { color: #101B32; font-weight: 700; }

.fa-ph { padding: 16px 20px 0; }
.fa-ph-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fa-ph-id { min-width: 0; }
.fa-crumb { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px; }
.fa-ph-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fa-ph-name h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.4px; color: #101B32; }
.fa-ph-addr { font-size: 12.5px; color: var(--text-secondary); margin-top: 4px; }
.fa-ph-acts { display: flex; gap: 6px; flex: none; }
.fa-tabs { display: flex; gap: 2px; margin-top: 15px; border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.fa-tab { border: 0; background: transparent; font: 500 12.5px inherit; color: var(--text-secondary);
  padding: 8px 11px; cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.fa-tab:hover { color: #101B32; }
.fa-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }
.fa-tab-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px;
  padding: 0 5px; border-radius: 8px; font-size: 10px; font-weight: 800; background: var(--bg-hover); color: var(--text-secondary); }
.fa-tab-n.zero { background: transparent; color: #CCD2DA; font-weight: 500; }
.fa-cap.hi { background: #DE350B; color: #fff; }
.fa-pbody { padding: 18px 20px 22px; }

.fa-kpis { display: flex; gap: 26px; flex-wrap: wrap; padding-bottom: 15px; margin-bottom: 18px; border-bottom: 1px solid var(--border-light); }
.fa-kpis .v { font-size: 21px; font-weight: 800; letter-spacing: -.6px; color: #101B32; font-variant-numeric: tabular-nums; }
.fa-kpis .v.hot { color: #C23A18; } .fa-kpis .v.warm { color: #8A5A00; }
.fa-kpis .l { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

.fa-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fa-sect { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 10px; display: flex; align-items: center; gap: 9px; }
.fa-sect .line { flex: 1; height: 1px; background: var(--border-light); }
.fa-kv { display: grid; grid-template-columns: 104px 1fr; row-gap: 8px; column-gap: 12px; font-size: 12.5px; margin: 0; }
.fa-kv dt { color: var(--text-muted); font-weight: 600; }
.fa-kv dd { margin: 0; color: #101B32; line-height: 1.5; }
.fa-card2 { border: 1px solid var(--border-light); border-radius: 12px; padding: 13px 15px; background: #FBFCFD; }
.fa-c-co { font-weight: 700; font-size: 13px; color: #101B32; }
.fa-c-nm { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }
.fa-hintline { font-size: 11px; color: var(--text-muted); margin-top: 7px; }
.fa-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text-secondary); }
.fa-selfrow { display: flex; gap: 22px; }
.fa-selfrow b { display: block; font-size: 17px; font-weight: 800; color: #101B32; font-variant-numeric: tabular-nums; }
.fa-selfrow b.hot { color: #C23A18; } .fa-selfrow b.warm { color: #8A5A00; }
.fa-selfrow span { font-size: 10.5px; color: var(--text-secondary); }

.fa-tbl { border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; }
.fa-mini { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fa-mini th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted);
  font-weight: 800; padding: 8px 10px; background: #FBFCFD; border-bottom: 1px solid var(--border-light); white-space: nowrap; }
.fa-mini td { padding: 8px 10px; border-bottom: 1px solid #F0F2F6; color: #3E4A5F; vertical-align: top; }
.fa-mini tr:last-child td { border-bottom: 0; }
.fa-mini tbody tr[data-pick] { cursor: pointer; }
.fa-mini tbody tr:hover td { background: #FAFBFD; }
.fa-mini .nm { font-weight: 700; color: #101B32; }
.fa-mini .r { text-align: right; font-variant-numeric: tabular-nums; }
.fa-mini .fa-cap { font-size: 12px; padding: 1px 7px; min-width: 24px; }
.fa-blank { padding: 26px; text-align: center; font-size: 12.5px; color: var(--text-muted);
  border: 1px dashed var(--border-medium); border-radius: 12px; background: #FBFCFD; }
.fa-src { display: inline-block; margin-left: 7px; font-size: 9px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-muted); background: var(--bg-hover); padding: 1px 6px; border-radius: 3px; }
.fa-prio { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; }
.fa-prio.high { background: #FDEAE4; color: #C23A18; }
.fa-prio.medium { background: #FFF3DC; color: #8A5A00; }
.fa-prio.low { background: var(--bg-hover); color: var(--text-secondary); }
.fa-type { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase; }
.fa-type.loc { background: #E6EFFA; color: #1D4ED8; }
.fa-type.veh { background: #E3F5EC; color: #0B6B3A; }
.fa-type.none { background: transparent; color: var(--text-muted); border: 1px dashed var(--border-medium); font-weight: 500; }

/* ---------- Panel fields: the panel is the editor ---------- */
.fa-fld { width: 100%; font: 500 12.5px inherit; padding: 5px 9px; color: #101B32; background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-sm); transition: background .1s, border-color .1s; }
.fa-fld:hover { border-color: var(--border-light); background: #FBFCFD; }
.fa-fld:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-light); }
.fa-fld::placeholder { color: #B6BDC8; }
.fa-fld-sm { width: auto; min-width: 128px; }
textarea.fa-fld { resize: vertical; min-height: 44px; line-height: 1.5; }
.fa-kv dd .fa-fld { margin-left: -9px; }
.fa-pair { display: flex; gap: 8px; }
.fa-name-fld { font-size: 18px; font-weight: 800; letter-spacing: -.4px; padding: 2px 7px; margin-left: -7px; }
.fa-tile-new { background: repeating-linear-gradient(135deg, #AAB2BE 0 5px, #9AA3B0 5px 10px) !important; }

.fa-newsubs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.fa-newsub { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--border-medium);
  border-radius: 10px; background: #FBFCFD; }
.fa-newsub-idx { font-size: 11px; font-weight: 700; color: var(--text-muted); flex: none; width: 16px; }
.fa-newsub .fa-fld { border-color: var(--border-light); background: #fff; }
.fa-x { border: 0; background: transparent; color: var(--text-muted); font-size: 16px; line-height: 1;
  cursor: pointer; padding: 2px 5px; border-radius: 4px; flex: none; }
.fa-x:hover { background: #FFF1EE; color: #B62C0B; }

.fa-savebar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 11px 20px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(6px); border-top: 1px solid var(--border-light); }
.fa-savebar[hidden] { display: none; }
.fa-savehint { flex: 1; font-size: 11.5px; color: var(--text-muted); }

@media (max-width: 1440px) and (min-width: 1181px) {
  /* Two columns side by side leave little room for the name once Ad-hoc joins;
     trim the fixed columns rather than letting the property name collapse. */
  .fa-adhoc-on .fa-row { grid-template-columns: minmax(0,1fr) 30px 34px 42px 46px 76px 66px; column-gap: 6px; }
}
@media (max-width: 1180px) {
  .fa-split { grid-template-columns: 1fr; }
  .fa-ws { grid-template-columns: 1fr; }
  .fa-two { grid-template-columns: 1fr; }
  .fa-split .fa-col + .fa-col { border-left: 0; border-top: 1px solid var(--border-light); }
  .fa-band { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 14px; }
  /* The ad-hoc rule is more specific than the one above, so it has to wrap here
     too or the band stays seven columns wide on a narrow screen. */
  .fa-adhoc-on .fa-band { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 26px; }
  .fa-band-v { text-align: left; }
}
.mf-btn {
  font: 500 12px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium); background: #fff; color: var(--text-primary);
  cursor: pointer;
}
.mf-btn:hover { background: var(--bg-hover); }
.mf-btn-ghost { border-color: transparent; background: transparent; color: var(--accent); }
.mf-btn-ghost:hover { background: var(--accent-light); }
.mf-btn-danger { border-color: transparent; background: transparent; color: var(--priority-high); }
.mf-btn-danger:hover { background: #fdecea; }
.mf-btn-danger-solid { background: var(--priority-high); border-color: var(--priority-high); color: #fff; }
.mf-btn-danger-solid:hover { background: #c82333; }

/* ---- facility modal ---- */
.mf-form .mf-sec {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-muted); margin: 18px 0 8px;
}
.mf-form .mf-sec:first-child { margin-top: 0; }
.mf-form .mf-sec .mf-line { flex: 1; height: 1px; background: var(--border-light); }
.mf-form .mf-sec .mf-hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.mf-hint { font-size: 11.5px; color: var(--text-muted); }
.mf-lbl { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.mf-req { color: var(--priority-high); }
.mf-in {
  width: 100%; box-sizing: border-box;
  padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--border-medium); border-radius: var(--radius-sm);
  background: #fff; color: var(--text-primary);
}
.mf-in:focus { outline: none; border-color: var(--accent); }
.mf-in-sm { padding: 6px 8px; font-size: 12.5px; }
.mf-field { margin-top: 10px; }
.mf-row { display: flex; gap: 10px; align-items: flex-end; }
.mf-row > * { flex: 1; }
.mf-row > .mf-narrow { flex: 0 0 150px; }
.mf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.mf-grid-vehicle { grid-template-columns: 90px 1fr 1fr; }
.mf-grid .mf-full { grid-column: 1 / -1; }
.mf-disc { border: 1px solid var(--border-light); border-radius: 4px; background: #fafbfc; margin-top: 8px; }
.mf-disc > summary {
  list-style: none; cursor: pointer; padding: 8px 12px;
  font-size: 12px; font-weight: 500; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
}
.mf-disc > summary::-webkit-details-marker { display: none; }
.mf-disc > summary::before { content: "▸"; font-size: 10px; }
.mf-disc[open] > summary::before { content: "▾"; }
.mf-disc > .mf-disc-body { padding: 4px 12px 12px; }

.mf-sub { border: 1px solid var(--border-light); border-radius: 4px; margin-bottom: 8px; background: #fff; }
.mf-sub-head { display: flex; gap: 8px; align-items: center; padding: 8px 10px; }
.mf-sub-head .mf-idx { font-size: 11px; color: var(--text-muted); width: 18px; text-align: right; }
.mf-sub-head .mf-sub-name { flex: 1; }
.mf-sub-head .mf-sub-type { flex: 0 0 130px; }
.mf-sub-body { display: none; padding: 4px 10px 12px 36px; border-top: 1px dashed var(--border-light); }
.mf-sub.open .mf-sub-body { display: block; }
.mf-x { border: none; background: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; }
.mf-x:hover { color: var(--priority-high); }

.mf-foot {
  display: flex; gap: 10px; align-items: center;
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border-light);
}
.mf-foot .mf-spacer { flex: 1; }

.mf-confirm p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.mf-confirm ul { margin: 6px 0 0 18px; font-size: 13px; line-height: 1.6; }
.mf-warn { background: #fdecea; border: 1px solid #f5c2c0; color: #8a1c14; padding: 10px 12px; border-radius: 4px; font-size: 12.5px; }
.mf-block { background: #fff7e6; border: 1px solid #f3d9a4; color: #7a4b00; padding: 10px 12px; border-radius: 4px; font-size: 12.5px; }

/* ==================== FLIGHT TRACKING ==================== */

.ft-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0;
}

.ft-tab {
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.ft-tab:hover { color: var(--text-primary); }
.ft-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.ft-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.ft-filters {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ft-year-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ft-year-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
}

.ft-year-btn:hover { background: var(--bg-hover); }

.ft-year-label {
  font-size: 16px;
  font-weight: 600;
  min-width: 48px;
  text-align: center;
}

.ft-select {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  background: var(--card-bg);
  color: var(--text-primary);
}

.ft-btn-primary {
  padding: 7px 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.ft-btn-primary:hover { opacity: 0.9; }

.ft-btn-secondary {
  padding: 7px 14px;
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

.ft-btn-sm {
  padding: 4px 10px;
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}

.ft-btn-icon {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ft-btn-icon:hover { background: var(--bg-hover); }
.ft-btn-danger { color: var(--status-denied); }
.ft-btn-danger:hover { background: rgba(220, 38, 38, 0.08); }

/* QBU Cards */

.ft-qbu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ft-qbu-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
}

.ft-qbu-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.ft-qbu-tail {
  font-size: 16px;
  font-weight: 600;
}

.ft-qbu-name {
  font-size: 12px;
  color: var(--text-secondary);
}

.ft-qbu-pct {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ft-qbu-icon { font-size: 16px; }
.ft-qbu-good { color: var(--status-success); }
.ft-qbu-warning { color: #d97706; }
.ft-qbu-danger { color: var(--status-denied); }

.ft-qbu-bar-track {
  height: 8px;
  background: var(--bg-hover);
  border-radius: 4px;
  position: relative;
  margin-bottom: 14px;
  overflow: visible;
}

.ft-qbu-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.ft-qbu-bar-fill.ft-qbu-good { background: var(--status-success); }
.ft-qbu-bar-fill.ft-qbu-warning { background: #d97706; }
.ft-qbu-bar-fill.ft-qbu-danger { background: var(--status-denied); }

.ft-qbu-bar-threshold {
  position: absolute;
  left: 50%;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--text-secondary);
  border-radius: 1px;
}

.ft-qbu-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.ft-qbu-stat {
  display: flex;
  flex-direction: column;
}

.ft-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.ft-stat-value {
  font-size: 14px;
  font-weight: 600;
}

/* Flight Table */

.ft-table {
  width: 100%;
  border-collapse: collapse;
}

.ft-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-color);
}

.ft-table td {
  font-size: 13px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

.ft-table tbody tr:nth-child(even) td { background: #f0f1f3; }

.ft-table-sm td { padding: 5px 10px; font-size: 13px; }

.ft-scrollable-table { max-height: 1050px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 8px; }
.ft-scrollable-table .ft-table thead th { position: sticky; top: 0; background: var(--card-bg); z-index: 1; }

.ft-card .ft-table { margin: -12px -14px; width: calc(100% + 28px); }
.ft-card .ft-table tbody tr:last-child td { border-bottom: none; }

.ft-clickable { cursor: pointer; }
.ft-clickable:hover td { background: var(--bg-hover); }

.ft-actions-cell { white-space: nowrap; text-align: right; }

.ft-empty {
  text-align: center;
  padding: 32px;
  color: var(--text-secondary);
  font-size: 14px;
}

.ft-empty-cell {
  text-align: center;
  color: var(--text-secondary);
  padding: 24px 10px !important;
}

.ft-empty-sm {
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 12px;
}

/* Badges */

.ft-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.ft-cls-business { background: rgba(22, 163, 74, 0.1); color: #16a34a; }
.ft-cls-investment { background: rgba(217, 119, 6, 0.1); color: #d97706; }
.ft-cls-personal { background: rgba(220, 38, 38, 0.1); color: #dc2626; }
.ft-cls-fringe { background: rgba(124, 58, 237, 0.1); color: #7c3aed; }
.ft-badge-info { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.ft-badge-warn { background: rgba(217, 119, 6, 0.1); color: #d97706; }
.ft-badge-muted { background: rgba(107, 114, 128, 0.1); color: #6b7280; font-size: 9px; }
.ft-badge-info { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

/* QBU card tables */
.ft-qbu-card-table { width: 100%; border-collapse: collapse; margin-top: 10px; border-top: 1px solid var(--border-light); }
.ft-qbu-card-table th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; text-align: left; padding: 8px 4px 4px; }
.ft-qbu-card-table td { font-size: 12px; color: var(--text-secondary); padding: 3px 4px; }
.ft-qbu-card-table td:last-child, .ft-qbu-card-table th:last-child { text-align: right; }
.ft-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ft-dot-business { background: #16a34a; }
.ft-dot-investment { background: #d97706; }
.ft-dot-personal { background: #dc2626; }
.ft-dot-fringe { background: #7c3aed; }
.ft-dot-deadhead { background: #6b7280; }
.ft-stat-good { color: #16a34a; }
.ft-stat-warn { color: #dc2626; }

/* Personal passenger rows */
.ft-pax-row-personal { flex-wrap: wrap; }
.ft-pax-pathway { min-width: 180px; }
.ft-pax-owner-label { font-size: 12px; display: flex; align-items: center; gap: 4px; color: var(--text-secondary); white-space: nowrap; }

/* QBU detail popup */
.ft-qbu-detail-header { text-align: center; padding: 16px 0 12px; }
.ft-qbu-detail-pct { font-size: 32px; font-weight: 700; }
.ft-qbu-detail-status { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; margin-top: 4px; }
.ft-qbu-detail-pct.ft-qbu-good, .ft-qbu-detail-status.ft-qbu-good { color: #16a34a; }
.ft-qbu-detail-pct.ft-qbu-warning, .ft-qbu-detail-status.ft-qbu-warning { color: #d97706; }
.ft-qbu-detail-pct.ft-qbu-danger, .ft-qbu-detail-status.ft-qbu-danger { color: #dc2626; }
.ft-qbu-detail-formula { background: var(--bg-main); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; text-align: center; }
.ft-qbu-detail-note { font-size: 11px; color: var(--text-secondary); margin-top: 6px; }
.ft-qbu-detail-notes { font-size: 12px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 8px; }
.ft-qbu-detail-notes strong { color: var(--text-primary); }
.ft-qbu-flight-list { max-height: 300px; overflow-y: auto; }


/* Section header */

.ft-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ft-section-header h3, .ft-section-header h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* Flight Form */

.ft-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ft-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ft-card-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.ft-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ft-optional {
  font-weight: 400;
  color: var(--text-secondary);
  opacity: 0.7;
}

.ft-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ft-form-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ft-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.ft-form-group label:not(.ft-label):not(.ft-pax-owner-label) {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.ft-form-group input,
.ft-form-group select,
.ft-form-group textarea {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  background: var(--bg-hover);
  color: var(--text-primary);
  font-family: inherit;
  transition: border-color 0.15s;
}

.ft-form-group input:focus,
.ft-form-group select:focus,
.ft-form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card-bg);
}

.ft-form-group textarea { resize: vertical; }

.ft-estimate-info {
  font-size: 12px;
  color: var(--accent);
  background: rgba(44, 82, 130, 0.06);
  padding: 6px 10px;
  border-radius: 6px;
  margin: -4px 0 4px;
}

.ft-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Passenger rows */

.ft-pax-section {
  padding-top: 0;
}

.ft-pax-row {
  margin-bottom: 6px;
}
.ft-pax-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ft-pax-row-opts {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 4px 0 2px 150px;
  padding: 4px 8px;
  background: var(--bg-secondary, #f9fafb);
  border-radius: 4px;
  font-size: 11px;
}

.ft-pax-row select {
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 12px;
  background: var(--card-bg);
  color: var(--text-primary);
}

.ft-pax-row .ft-pax-type { width: 150px; min-width: 150px; }
.ft-pax-row .ft-pax-person { flex: 1; min-width: 120px; }
.ft-pax-row .ft-pax-writein {
  flex: 1;
  min-width: 120px;
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 12px;
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
}
.ft-pax-row .ft-pax-writein:focus { border-color: var(--primary); }
.ft-pax-row select:nth-child(3) { width: 100px; }

.ft-pax-owner-label {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}

.ft-pax-owner-label input { margin: 0; }

/* Projections */

.ft-proj-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .ft-proj-layout { grid-template-columns: 1fr; }
}

.ft-proj-list-section {
  min-width: 0;
}

.ft-proj-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ft-proj-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  transition: border-color 0.15s;
}

.ft-proj-row:hover {
  border-color: var(--border-color);
}

.ft-proj-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ft-proj-row-detail {
  display: flex;
  gap: 12px;
  padding-top: 3px;
  border-top: 1px solid var(--border-light);
  margin-top: 2px;
}
.ft-proj-pax-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.ft-proj-pax-pair {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ft-proj-pax-tag {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  width: 26px;
  text-align: center;
  padding: 1px 0;
  border-radius: 2px;
  flex-shrink: 0;
}
.ft-proj-pax-tag-qbu {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
}
.ft-proj-pax-tag-non {
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.04);
}
.ft-proj-pax-pair label {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  width: 56px;
}
.ft-proj-pax {
  width: 36px;
  text-align: center;
  padding: 2px 4px;
  font-size: 11px;
  border: 1px solid var(--border-color) !important;
  border-radius: 3px;
  background: var(--bg-main);
}
.ft-proj-qbu-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(22, 163, 74, 0.08);
  align-self: flex-start;
  margin-bottom: 1px;
}
.ft-proj-cost-side {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 110px;
  padding-left: 10px;
  border-left: 1px solid var(--border-light);
  justify-content: center;
}
.ft-proj-cost-line {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-secondary);
}
.ft-proj-cost-line span:last-child {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ft-proj-cost-ded span:last-child {
  color: #16a34a;
}
.ft-proj-cost-nonded span:last-child {
  color: #dc2626;
}
.ft-proj-cost-empty {
  font-size: 9px;
  color: var(--text-muted);
  font-style: italic;
}

/* Projection passenger rows */
.ft-proj-pp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  margin-bottom: 4px;
  background: var(--bg-secondary, #f9fafb);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ft-proj-pp-row:hover {
  border-color: var(--border-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ft-proj-pp-row select {
  padding: 4px 6px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 11px;
  font-family: inherit;
  background: var(--card-bg);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s;
}
.ft-proj-pp-row select:focus {
  outline: none;
  border-color: var(--accent, #3b82f6);
}
.ft-proj-pp-person {
  flex: 1;
  min-width: 100px;
}
.ft-proj-pp-writein {
  flex: 1;
  min-width: 80px;
  padding: 4px 6px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 11px;
  background: var(--bg-color, #fff);
  color: var(--text-color, #111);
  transition: border-color 0.15s;
}
.ft-proj-pp-writein:focus {
  outline: none;
  border-color: var(--accent, #3b82f6);
}
.ft-proj-pp-type-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ft-proj-pp-reason {
  min-width: 130px;
}
.ft-proj-pp-w2-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  padding: 2px 6px;
  background: rgba(59, 130, 246, 0.06);
  border-radius: 4px;
}
.ft-proj-pp-w2-label input {
  margin: 0;
  accent-color: var(--accent, #3b82f6);
}
.ft-proj-pp-del {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}
.ft-proj-pp-del:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #dc2626;
}
.ft-proj-pp-empty {
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 8px;
  text-align: center;
  background: var(--bg-secondary, #f9fafb);
  border: 1px dashed var(--border-light);
  border-radius: 6px;
}
.ft-proj-pp-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.ft-proj-pp-actions .ft-proj-calc-sifl {
  margin-left: auto;
  background: var(--accent-color, #3b82f6);
  color: white;
}

.ft-proj-input {
  padding: 3px 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  background: var(--bg-main);
  color: var(--text-primary);
  transition: border-color 0.15s, background 0.15s;
}

.ft-proj-input:hover {
  border-color: var(--text-secondary);
}

.ft-proj-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card-bg);
}

.ft-proj-origin, .ft-proj-dest { width: 60px; text-transform: uppercase; }
.ft-proj-hours { width: 50px; text-align: right; }
.ft-proj-label { flex: 1; min-width: 60px; }

.ft-proj-arrow {
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

.ft-proj-add {
  margin-top: 8px;
}

.ft-proj-delete {
  flex-shrink: 0;
}

/* Projections summary panel */

.ft-proj-summary {
  position: sticky;
  top: 16px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ft-proj-summary-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.ft-proj-summary-section {
  margin-bottom: 12px;
}

.ft-proj-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.ft-proj-summary-row {
  font-size: 13px;
  color: var(--text-primary);
}

.ft-proj-summary-combined {
  text-align: center;
  padding: 14px 10px;
  border-radius: 8px;
  margin: 14px 0;
}

.ft-proj-summary-combined.ft-proj-safe { background: rgba(22, 163, 74, 0.06); }
.ft-proj-summary-combined.ft-proj-warning { background: rgba(217, 119, 6, 0.06); }
.ft-proj-summary-combined.ft-proj-critical { background: rgba(220, 38, 38, 0.06); }

.ft-proj-combined-pct {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}

.ft-proj-safe .ft-proj-combined-pct { color: #16a34a; }
.ft-proj-warning .ft-proj-combined-pct { color: #d97706; }
.ft-proj-critical .ft-proj-combined-pct { color: #dc2626; }

.ft-proj-combined-detail {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.ft-proj-status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 10px;
  margin-top: 6px;
}

.ft-proj-status-badge.ft-proj-safe { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.ft-proj-status-badge.ft-proj-warning { background: rgba(217, 119, 6, 0.12); color: #d97706; }
.ft-proj-status-badge.ft-proj-critical { background: rgba(220, 38, 38, 0.12); color: #dc2626; }

/* Projections progress bar */

.ft-proj-bar-wrapper {
  padding: 0 4px;
  margin-bottom: 12px;
}

.ft-proj-bar {
  position: relative;
  height: 10px;
  background: var(--bg-hover);
  border-radius: 5px;
  overflow: visible;
}

.ft-proj-bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}

.ft-proj-bar-fill.ft-proj-safe { background: #16a34a; }
.ft-proj-bar-fill.ft-proj-warning { background: #d97706; }
.ft-proj-bar-fill.ft-proj-critical { background: #dc2626; }

.ft-proj-bar-marker {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 14px;
  background: var(--text-muted);
  transform: translateX(-1px);
  border-radius: 1px;
}

.ft-proj-bar-marker span {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
}

.ft-proj-bar-marker-safe {
  background: #16a34a;
}

.ft-proj-needed {
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.12);
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.4;
}

.ft-proj-needed strong {
  color: var(--text-primary);
}

/* Flight detail */

.ft-detail { }

.ft-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.ft-detail-item { }

.ft-detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.ft-detail-value {
  font-size: 14px;
  font-weight: 500;
}

.ft-detail-section {
  margin-bottom: 16px;
}

.ft-detail-text {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
}

.ft-detail-note {
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
  padding: 8px 12px;
  background: #f9fafb;
  border-left: 3px solid #d1d5db;
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
}

/* ---- Cost Tracking ---- */
.ft-cost-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .ft-cost-layout { grid-template-columns: 1fr; }
}

.ft-cost-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.ft-cost-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.ft-cost-rate-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ft-cost-rate-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.ft-cost-rate-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.ft-cost-rate-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ft-cost-rate-total {
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
  margin-top: 4px;
}
.ft-cost-rate-total .ft-cost-rate-label {
  font-weight: 600;
  color: var(--text-primary);
}
.ft-cost-rate-total .ft-cost-rate-value {
  font-weight: 700;
}
.ft-cost-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ft-cost-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ft-cost-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}
.ft-cost-total-row {
  border-top: 2px solid var(--text-primary);
  padding-top: 10px;
  margin-top: 4px;
}
.ft-cost-total-row span {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 15px;
}
.ft-cost-total {
  color: var(--text-primary) !important;
}
.ft-cost-deduct-bar-wrapper { margin-bottom: 12px; }
.ft-cost-deduct-bar {
  height: 10px;
  background: #fee2e2;
  border-radius: 5px;
  overflow: hidden;
}
.ft-cost-deduct-bar-fill {
  height: 100%;
  background: #16a34a;
  border-radius: 5px;
  transition: width 0.3s;
}
.ft-cost-deduct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}
.ft-cost-deduct-label {
  font-size: 11px;
  color: var(--text-secondary);
}
.ft-cost-deduct-value {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ft-cost-deduct-yes .ft-cost-deduct-value { color: #16a34a; }
.ft-cost-deduct-no .ft-cost-deduct-value { color: #dc2626; }
.ft-cost-deduct-note {
  font-size: 10px;
  color: var(--text-secondary);
  font-style: italic;
}
.ft-cost-flights-section {
  margin-top: 8px;
}

/* Cost config form */
.ft-cost-config-section {
  margin-bottom: 16px;
}
.ft-cost-config-heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.ft-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.ft-input-prefix {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ft-input-prefix span {
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
}
.ft-input-prefix input {
  flex: 1;
}

/* ---- SIFL Valuation ---- */
.ft-sifl-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  margin-bottom: 12px;
}
@media (max-width: 900px) {
  .ft-sifl-layout { grid-template-columns: 1fr; }
}
.ft-sifl-main { min-width: 0; }
.ft-sifl-main .ft-cost-card { margin-bottom: 12px; }
.ft-sifl-sidebar { min-width: 0; }
.ft-sifl-note {
  font-size: 10px;
  color: var(--text-secondary);
  font-style: italic;
  margin-top: 8px;
}
.ft-sifl-cap-note {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.4;
}
.ft-sifl-pax-detail {
  font-size: 10px;
  color: var(--text-secondary);
  max-width: 300px;
}
.ft-sifl-summary-card {
  position: sticky;
  top: 12px;
}

/* ---- Gift Tax FMV ---- */
.ft-form-hint {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.3;
}
.ft-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.ft-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-color, #3b82f6);
}
.ft-gift-overview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 800px) {
  .ft-gift-overview { grid-template-columns: 1fr; }
}
.ft-gift-formula-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 14px;
}
.ft-gift-formula {
  background: var(--bg-secondary, #f9fafb);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 8px 0;
  font-size: 13px;
}
.ft-gift-formula code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: var(--text-primary);
}
.ft-gift-formula-note {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.ft-gift-config-note {
  font-size: 11px;
  color: var(--text-secondary);
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 8px 10px;
  margin-top: 10px;
}
.ft-gift-guests-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ft-gift-guest-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px;
  transition: box-shadow 0.15s;
}
.ft-gift-guest-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ft-gift-guest-card.ft-gift-warning {
  border-color: #f59e0b;
  background: linear-gradient(135deg, var(--card-bg, #fff) 95%, #fef3c7 100%);
}
.ft-gift-guest-card.ft-gift-exceeded {
  border-color: #ef4444;
  background: linear-gradient(135deg, var(--card-bg, #fff) 95%, #fee2e2 100%);
}
.ft-gift-guest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ft-gift-guest-name {
  font-size: 15px;
  font-weight: 600;
}
.ft-gift-status-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
}
.ft-gift-status-badge.ft-gift-safe {
  background: #dcfce7;
  color: #166534;
}
.ft-gift-status-badge.ft-gift-warning {
  background: #fef3c7;
  color: #92400e;
}
.ft-gift-status-badge.ft-gift-exceeded {
  background: #fee2e2;
  color: #991b1b;
}
.ft-gift-guest-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 10px;
}
.ft-gift-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ft-gift-stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ft-gift-stat-value {
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ft-gift-bar-container {
  position: relative;
  height: 22px;
  background: var(--bg-secondary, #f1f5f9);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ft-gift-bar {
  height: 100%;
  border-radius: 6px;
  transition: width 0.4s ease;
}
.ft-gift-bar.ft-gift-safe { background: #22c55e; }
.ft-gift-bar.ft-gift-warning { background: #f59e0b; }
.ft-gift-bar.ft-gift-exceeded { background: #ef4444; }
.ft-gift-bar-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
}
.ft-gift-flights-detail {
  margin-top: 4px;
}
.ft-gift-flights-detail summary {
  font-size: 11px;
  color: var(--accent-color, #3b82f6);
  cursor: pointer;
  font-weight: 500;
}
.ft-gift-flights-detail[open] summary {
  margin-bottom: 6px;
}
.ft-table-compact {
  font-size: 11px;
}
.ft-table-compact th, .ft-table-compact td {
  padding: 4px 8px;
}

/* ============================================================
   Checklist Features: Snooze, Reassign, Unsubmit, Dashboard
   ============================================================ */

.ops-item-actions-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  flex-shrink: 0;
}
.ops-item-estimate {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--border-light);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.ops-snooze-btn,
.ops-reassign-btn,
.ops-unsubmit-btn {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.ops-snooze-btn:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}
.ops-reassign-btn:hover {
  background: #ede9fe;
  border-color: #8b5cf6;
  color: #6d28d9;
}
.ops-unsubmit-btn:hover {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}

.ops-reassigned-badge {
  display: inline-block;
  font-size: 11px;
  color: #8b5cf6;
  margin-left: 4px;
  font-weight: 600;
}

/* Dashboard */
.ops-dash-controls {
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ops-dash-presets {
  display: flex;
  gap: 4px;
}
.ops-dash-preset {
  padding: 5px 12px;
  border: 1px solid var(--border-medium);
  border-radius: 6px;
  background: var(--bg-card);
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
}
.ops-dash-preset.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ops-dash-custom {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ops-dash-custom input[type="date"] {
  padding: 4px 8px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  font-size: 12px;
}

.ops-dash-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.ops-dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}
.ops-dash-card-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}
.ops-dash-card-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ops-dash-section {
  margin-bottom: 24px;
  overflow: hidden;
  min-width: 0;
}
.ops-dash-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

/* Time reporting. Recorded ad-hoc minutes are always purple and never share a
   figure with scheduled estimates: one is a record, the other a forecast. */
.ops-dash-card-value.ad { color: #6b4fbb; }
.ops-dash-note {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 8px;
}
.ops-lw-export-btn { float: right; margin-top: -4px; }
.ops-lw-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 28px;
  margin-bottom: 14px;
}
.ops-lw-sub {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.ops-lw-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 2px 0;
}
.ops-lw-bar .nm {
  width: 140px;
  flex: none;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-lw-bar .tr {
  flex: 1;
  height: 7px;
  background: var(--bg-hover);
  border-radius: 4px;
  overflow: hidden;
}
.ops-lw-bar .tr i {
  display: block;
  height: 100%;
  background: #6b4fbb;
  opacity: 0.65;
  border-radius: 4px;
}
.ops-lw-bar .vv {
  width: 56px;
  flex: none;
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ops-lw-table td { font-size: 12px; }

.ops-dash-rate-bar {
  display: inline-block;
  width: 60px;
  height: 8px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  vertical-align: middle;
  margin-right: 6px;
}
.ops-dash-rate-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}

.ops-dash-daily-chart {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  overflow-x: auto;
  padding-bottom: 8px;
  max-width: 100%;
  min-width: 0;
}
.ops-dash-day-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
  flex-shrink: 0;
}
.ops-dash-bar-track {
  width: 24px;
  height: 80px;
  background: var(--border-light);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.ops-dash-bar-fill {
  width: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: height 0.3s;
}
.ops-dash-day-bar.gold .ops-dash-bar-fill {
  background: #f59e0b;
}
.ops-dash-bar-label {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 4px;
  white-space: nowrap;
}
.ops-dash-bar-count {
  font-size: 10px;
  color: var(--text-secondary);
}
.ops-dash-bar-star {
  color: #f59e0b;
  font-size: 12px;
  height: 16px;
  line-height: 16px;
  visibility: visible;
}
.ops-dash-day-bar:not(.gold) .ops-dash-bar-star {
  visibility: hidden;
}

/* ============================================
   CALENDAR ORGANIZER (organizer.js)
   Mon–Fri month board with drag-to-reschedule
   ============================================ */
.org-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.org-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0 2px 10px;
}
.org-month { display: flex; align-items: center; gap: 4px; }
.org-nav-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1;
}
.org-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.org-month-label {
  font-size: 16px;
  font-weight: 600;
  min-width: 150px;
  text-align: center;
  color: var(--text-primary);
}
.org-today {
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
}
.org-today:hover { color: var(--accent); border-color: var(--accent); }
.org-sep { width: 1px; height: 22px; background: var(--border-light); margin: 0 2px; }
.org-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.org-people { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.org-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  border: 1px solid var(--border-medium);
  border-radius: 14px;
  background: var(--bg-card);
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary);
  user-select: none;
  transition: all 0.12s;
}
.org-person .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: 0.35; }
.org-person:hover { border-color: var(--c); }
.org-person.on {
  border-color: var(--c);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--c) 8%, #fff);
  font-weight: 600;
}
.org-person.on .dot { opacity: 1; }
.org-person .n { font-size: 10px; color: var(--text-muted); font-weight: 500; }
.org-person.on .n { color: var(--c); }
.org-select {
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-primary);
}
.org-seg { display: inline-flex; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); overflow: hidden; }
.org-seg button {
  border: 0;
  background: var(--bg-card);
  padding: 5px 9px;
  font-size: 11.5px;
  cursor: pointer;
  color: var(--text-secondary);
}
.org-seg button.on { background: var(--accent); color: #fff; }
.org-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.org-check input { accent-color: var(--accent); }
.org-status { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.org-status .moves { font-weight: 600; color: var(--text-primary); }
.org-undo {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--accent);
}
.org-undo:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-light); }
.org-undo:disabled { color: var(--text-muted); cursor: default; }

/* grid */
.org-head { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; margin-bottom: 3px; }
.org-head div {
  padding: 4px 8px;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.org-grid { display: flex; flex-direction: column; gap: 3px; transition: opacity 0.15s; }
.org-busy .org-grid { opacity: 0.55; pointer-events: none; }
/* Columns never grow for a long title: it truncates instead (full text on hover). */
.org-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.org-cell {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  min-height: 132px;
  min-width: 0;
  padding: 6px 6px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: box-shadow 0.12s, border-color 0.12s, background 0.12s;
}
.org-cell.other { background: transparent; border-style: dashed; opacity: 0.55; }
.org-cell.past { background: #fafbfc; }
.org-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.org-cell.holiday { background: repeating-linear-gradient(-45deg, #fff, #fff 6px, #f6f7f9 6px, #f6f7f9 12px); }
.org-cell.over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light), inset 0 0 0 1px var(--accent);
  background: #f6f9fd;
}
.org-cell.over.locked {
  border-color: var(--priority-high);
  box-shadow: 0 0 0 2px rgba(222, 53, 11, 0.12);
  background: #fff8f6;
}
.org-cell-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 3px; padding: 0 2px; }
.org-daynum { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.org-daymonth { font-weight: 400; color: var(--text-muted); font-size: 10px; margin-left: 4px; }
.org-cell.today .org-daynum { color: var(--accent); }
.org-cell.today .org-daynum::after {
  content: "Today";
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 5px;
  color: var(--accent);
}
.org-cell.past .org-daynum { color: var(--text-muted); }
.org-holiday { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-load {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  padding: 1px 7px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.org-load .n { font-weight: 700; color: var(--text-primary); }
.org-load b { color: var(--text-primary); font-weight: 700; }
.org-load.warn b { color: #b45309; }
.org-load.hot b { color: var(--priority-high); }
.org-load.warn { border-color: rgba(180, 83, 9, 0.35); background: #fff8f0; }
.org-load.hot { border-color: rgba(222, 53, 11, 0.35); background: #fff5f2; }
.org-loadbar { height: 3px; background: var(--border-light); border-radius: 2px; overflow: hidden; margin: 0 2px 4px; }
.org-loadbar i { display: block; height: 100%; background: var(--status-success); border-radius: 2px; transition: width 0.2s; }
.org-loadbar.warn i { background: #f59e0b; }
.org-loadbar.hot i { background: var(--priority-high); }
.org-drop-space { flex: 1; min-height: 14px; }
.org-more { font-size: 11px; color: var(--accent); cursor: pointer; padding: 2px 4px; font-weight: 600; }
.org-more:hover { text-decoration: underline; }

/* chips */
.org-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
  padding: 3px 6px 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  cursor: grab;
  font-size: 12px;
  line-height: 1.3;
  user-select: none;
}
.org-chip::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--c, var(--border-medium));
}
.org-chip:hover { background: #fff; border-color: var(--border-medium); box-shadow: var(--shadow-sm); }
.org-chip:active { cursor: grabbing; }
.org-chip.dragging { opacity: 0.35; }
.org-chip.locked { cursor: default; }
.org-chip .t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.org-chip .title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--text-primary);
}
.org-chip .est { font-size: 10.5px; font-weight: 500; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-chip .loc {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 1px;
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.org-chip .loc > * { overflow: hidden; text-overflow: ellipsis; }
.org-chip.ghost .loc, .org-chip.done .loc { opacity: 0.7; }
/* mini (default): building in the person colour, sub-location as the same tinted tag the cards use */
.org-chip .loc-mini .bld {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c, var(--accent)) 80%, #172b4d);
  flex-shrink: 1;
}
/* building groups: two or more open tasks in the same building share one soft
   card titled with the building; each task is a bulleted, draggable row and
   shows its sub-location per the chosen style */
.org-group {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
  background: var(--bg-main);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 3px 6px 4px 9px;
}
.org-group::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: var(--c, var(--border-medium));
}
.org-group.dragging { opacity: 0.35; }
.org-group-hd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding-bottom: 2px;
}
.org-group-hd .n {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-group-hd .c { font-size: 10px; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.org-group-hd.grab { cursor: grab; margin: -3px -6px 0 -9px; padding: 3px 6px 2px 9px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.org-group-hd.grab:hover { background: color-mix(in srgb, var(--c, var(--accent)) 10%, #fff); }
.org-group-hd.grab:active { cursor: grabbing; }
.org-group-hd .grip { font-size: 11px; color: var(--text-muted); line-height: 1; align-self: center; }
.org-group-hd.grab:hover .grip { color: var(--c, var(--accent)); }
.org-group .org-chip.in-group {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 1px 0 1px 11px;
}
.org-group .org-chip.in-group::before {
  left: 2px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  bottom: auto;
  background: var(--c, var(--border-medium));
}
.org-group .org-chip.in-group:hover { background: #fff; box-shadow: none; }

/* sub-location tag on each row of a building card (and on single chips) */
.org-chip .sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 15px;
  padding: 0 6px;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 48%;
  flex-shrink: 0;
}
/* sub-location tag: one static pastel for everyone (not the person colour) */
.org-chip .sub { color: #6b4f00; background: #fff0a6; border: 1px solid #f1d96a; }
/* chip states (restored — this block had been dropped by an earlier trim) */
.org-chip .who { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--border-medium)); flex-shrink: 0; }
/* moved-from (on the moved task) and moved-to (on its ghost): amber, like the Ops Hub's deferral badges */
.org-chip .from {
  font-size: 9.5px;
  font-weight: 700;
  color: #8a6a20;
  background: rgba(176, 138, 62, 0.15);
  padding: 0 5px;
  border-radius: 8px;
  white-space: nowrap;
}
.org-chip.moved { border-color: rgba(176, 138, 62, 0.45); background: #fdfbf6; }
.org-chip.done { cursor: default; opacity: 0.55; }
.org-chip.done .title { text-decoration: line-through; color: var(--text-secondary); }
.org-chip.done::before { background: var(--status-success); }
.org-chip.ghost { border-style: dashed; background: transparent; opacity: 0.5; cursor: default; }
.org-chip.ghost::before { background: transparent; border-left: 3px dashed var(--border-medium); }
.org-chip.ghost .title { color: var(--text-muted); font-weight: 400; }

/* sub-location tag follows the title; time keeps the right edge */
.org-chip.tag-inline .t .title { flex: 0 1 auto; }
.org-chip.tag-inline .t .est { margin-left: auto; }

/* Ad-hoc / daily-log work in the month board. Purple throughout, matching the
   Ops Hub's log badge: planned work is the person's colour, recorded work is
   always this one. The day pill carries both figures and the load bar gains a
   second segment, so a day reads against a working day including the unplanned
   work that landed on it. */
.org-load .plus { color: var(--text-muted); }
.org-load .ad { color: #6b4fbb; font-weight: 700; }
.org-loadbar { display: flex; }
.org-loadbar i { flex: 0 0 auto; }
.org-loadbar i.ad { background: #6b4fbb; opacity: 0.55; }
.org-loadbar.warn i.ad, .org-loadbar.hot i.ad { opacity: 0.7; }

.org-group.adhoc { background: rgba(107, 79, 187, 0.05); border-color: rgba(107, 79, 187, 0.28); }
.org-group.adhoc .org-group-hd .n,
.org-group.adhoc .org-group-hd .c { color: #6b4fbb; }
.org-group .org-chip.in-group.adhoc { padding-top: 2px; padding-bottom: 2px; }
.org-group .org-chip.in-group.adhoc .title { font-weight: 500; }
.org-sublines { margin: 1px 0 2px; }
.org-subline {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.org-subline::before { content: "·"; color: var(--text-muted); }
.org-subline .d { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-subline .m { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-sublines.empty { font-size: 10.5px; color: var(--text-muted); font-style: italic; }

/* a moved row: amber bullet and a lone ↩ after the title */
.org-chip .from.glyph { padding: 0 2px; background: transparent; font-size: 12px; line-height: 1; }
.org-group .org-chip.in-group.moved::before { background: #b08a3e; }

/* hover link between the two halves of a move */
.org-chip.org-linked { box-shadow: 0 0 0 2px #b08a3e; border-color: #b08a3e; }
.org-chip.ghost.org-linked { opacity: 0.95; background: rgba(176, 138, 62, 0.08); }
.org-group .org-chip.in-group.org-linked { background: rgba(176, 138, 62, 0.12); box-shadow: inset 0 0 0 1px #b08a3e; border-radius: 3px; }

/* drop scope: series highlight + toolbar switch */
.org-cell.over.series {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15), inset 0 0 0 1px #7c3aed;
  background: #faf7ff;
}
.org-seg.org-scope button.on.series { background: #7c3aed; }
/* toast + tooltip */
.org-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #172b4d;
  color: #fff;
  padding: 9px 12px 9px 14px;
  border-radius: 4px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: all 0.18s;
  z-index: 300;
  max-width: min(560px, calc(100vw - 32px));
  line-height: 1.35;
}
.org-toast > span { min-width: 0; }
.org-toast button { flex-shrink: 0; }
.org-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.org-toast.err { background: #8b2500; }
.org-toast button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 3px 9px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.org-toast button:hover { background: rgba(255, 255, 255, 0.12); }
.org-tip {
  position: fixed;
  z-index: 310;
  background: #172b4d;
  color: #fff;
  font-size: 11.5px;
  padding: 7px 9px;
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  max-width: 270px;
  line-height: 1.4;
}
.org-tip b { display: block; font-size: 12px; margin-bottom: 2px; }
.org-tip .m { color: rgba(255, 255, 255, 0.72); }
.org-tip .x { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.85); }

@media (max-width: 1100px) {
  .org-cell { min-height: 110px; }
}

/* ==================== ROLES & PERMISSIONS ==================== */
/* Controls gated by data-perm stay hidden until /auth/me says otherwise. */
[data-perm]:not(.perm-ok) { display: none !important; }

.header-user-role {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
  border-radius: 10px; background: rgba(255,255,255,0.14); color: inherit; opacity: .9;
}

/* Completion attribution: "by Alex · via Dana" */
.ops-item-done-by .ops-via { color: var(--text-muted); font-weight: 400; }
.ops-item-done-by .ops-via::before { content: "· via "; }

/* Item form: role hints and the submit-for-approval state */
.ops-form-role-hint {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px; margin: 2px 0 6px;
  font-size: 12px; line-height: 1.4; color: var(--text-secondary);
  background: var(--accent-light); border: 1px solid rgba(44,82,130,0.18); border-radius: var(--radius-lg);
}
.ops-form-role-hint svg { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--accent); }
.ops-form-role-hint.locked { background: #fff8e6; border-color: #f3d78a; }
.ops-form-role-hint.locked svg { color: #b7791f; }
.ops-item-form input:disabled, .ops-item-form select:disabled, .ops-item-form textarea:disabled {
  background: var(--bg-main); color: var(--text-muted); cursor: not-allowed;
}
.ops-form-static { font-size: 13px; padding: 6px 0; color: var(--text-primary); }
.ops-form-static.muted { color: var(--text-muted); }

/* Status pills for items awaiting approval */
.ops-approval-pill {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
}
.ops-approval-pill.proposed { background: #fff4d6; color: #8a5a00; }
.ops-approval-pill.rejected { background: #fdecea; color: #b42318; }
.ops-approval-pill.approved { background: #e3f5ec; color: #0b6b3a; }

/* Proposal cards in the Approvals tab */
.proposal-card { cursor: default; }
.proposal-card .proposal-dept {
  display: inline-block; padding: 2px 8px; border-radius: 10px; color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
}
.proposal-card .proposal-facts {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px;
  font-size: 12.5px; color: var(--text-secondary);
}
.proposal-card .proposal-facts b { color: var(--text-primary); font-weight: 600; }
.proposal-card .proposal-review {
  margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--priority-high);
  background: #fdf3f2; border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: 12.5px; color: var(--text-primary);
}
.proposal-card .proposal-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.proposal-card .proposal-history { margin-top: 10px; font-size: 11.5px; color: var(--text-muted); }
.proposal-card .proposal-history div { padding: 2px 0; }
.hp-count.proposed { background: #f3d78a; color: #5c3d00; }

/* Portal access: "No access" is a real, common state (records added for
   Flights), so it reads as a fact rather than a warning. */
.mu-signin span.none { background: #f1f5f9; color: #64748b; font-weight: 600; }
.mu-signin span.warn { background: #fff4d6; color: #8a5a00; }
.mu-access {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 8px; padding: 9px 11px; border-radius: var(--radius-lg);
  font-size: 12.5px; background: #f2faf5; border: 1px solid #bfe3cf; color: var(--text-primary);
}
.mu-access.none { background: #f8fafc; border-color: var(--border-medium); }
.mu-access b { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.mu-access .mu-hint { margin-top: 2px; }