/* ============================================================
   My New Rental — App Stylesheet
   ============================================================ */

/* ─── 1. CSS Reset + Variables ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { cursor: pointer; user-select: none; -webkit-user-select: none; }

:root {
  /* ── Theme colors (light mode defaults) ── */
  --color-bg: #f4f5f7;
  --color-sidebar: #111827;
  --color-sidebar-text: #ffffff;
  --color-sidebar-hover: rgba(255,255,255,0.1);
  --color-surface: #ffffff;
  --color-border: #e1e4e8;
  --color-text-primary: #1a1a2e;
  --color-text-secondary: #6b7280;
  --color-accent: #c0c7d0;
  --color-accent-hover: #a8b2bc;
  --color-primary: #5B8DEF;
  --color-primary-hover: #4a7de0;
  --color-table-header: #f8f9fa;
  --color-table-row-hover: #f0f4ff;
  --color-badge-bg: #e8edf5;
  --color-input-bg: #ffffff;
  --color-input-border: #d1d5db;
  --color-danger: #dc2626;
  --color-success: #16a34a;

  /* ── Legacy aliases (keep inline styles working) ── */
  --navy: var(--color-primary);
  --navy-dark: var(--color-sidebar);
  --navy-hover: var(--color-primary-hover);
  --gold: var(--color-accent);
  --gold-hover: var(--color-accent-hover);
  --white: var(--color-surface);
  --bg: var(--color-bg);
  --border: var(--color-border);
  --text: var(--color-text-primary);
  --text-muted: var(--color-text-secondary);
  --text-light: var(--color-text-secondary);
  --success: var(--color-success);
  --danger: var(--color-danger);
  --warning: #ff8b00;
  --info: #0052cc;

  /* ── Layout ── */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 56px;
  --topbar-height: 56px;
  --radius: 4px;
  --shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

  /* ── Unified Shell (v3.58.0) ── */
  --shell-header-bg: #111827;
  --shell-icon-size: 28px;
}

/* ── Warm Light Theme ── */
[data-theme='warm'] {
  --color-bg: #f5ebe0;
  --color-sidebar: #2c1a0c;
  --color-sidebar-text: #faebd7;
  --color-sidebar-hover: rgba(255,255,255,0.12);
  --color-surface: #fdf6ec;
  --color-border: #d4b896;
  --color-text-primary: #2a1800;
  --color-text-secondary: #7a5c38;
  --color-accent: #c8974e;
  --color-accent-hover: #b07c38;
  --color-primary: #7a3010;
  --color-primary-hover: #932012;
  --color-table-header: #ecdcc8;
  --color-table-row-hover: #e8d4bc;
  --color-badge-bg: #e8d4b8;
  --color-input-bg: #fdf6ec;
  --color-input-border: #c8a878;
  --color-danger: #b03010;
  --color-success: #2a6b22;
}

/* ── Dim (easy on eyes) Theme ── */
[data-theme='dim'] {
  --color-bg: #1e2433;
  --color-sidebar: #141922;
  --color-sidebar-text: #d0d8e8;
  --color-sidebar-hover: rgba(255,255,255,0.08);
  --color-surface: #252d3d;
  --color-border: #3a4560;
  --color-text-primary: #d8dfe8;
  --color-text-secondary: #8a97b0;
  --color-accent: #c0c7d0;
  --color-accent-hover: #a8b2bc;
  --color-primary: #4a7cc7;
  --color-primary-hover: #5a8ed4;
  --color-table-header: #2a3348;
  --color-table-row-hover: #2a3348;
  --color-badge-bg: #2a3348;
  --color-input-bg: #252d3d;
  --color-input-border: #3a4560;
  --color-danger: #f87171;
  --color-success: #4ade80;
}

[data-theme='dark'] {
  --color-bg: #0f1623;
  --color-sidebar: #0a0f1a;
  --color-sidebar-text: #e2e8f0;
  --color-sidebar-hover: rgba(255,255,255,0.08);
  --color-surface: #1a2236;
  --color-border: #2d3748;
  --color-text-primary: #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-accent: #c0c7d0;
  --color-accent-hover: #a8b2bc;
  --color-primary: #2d4a8a;
  --color-primary-hover: #3a5fa8;
  --color-table-header: #1e2d47;
  --color-table-row-hover: #1e2d47;
  --color-badge-bg: #1e2d47;
  --color-input-bg: #1a2236;
  --color-input-border: #2d3748;
  --color-danger: #f87171;
  --color-success: #4ade80;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-bg);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Page load auth guard -- show skeleton instead of blank white */
#app[style*='display:none'], #app[style*='display: none'] {
  display: block !important;
  visibility: hidden;
}

/* Fast page transition -- fade in once auth resolves */
#app {
  animation: fadeIn 0.15s ease-in;
}
@keyframes pulse-green {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ─── 2. App Layout ──────────────────────────────────────────── */
.app-container {
  display: flex;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}


/* ─── 3. Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh; height: 100dvh;
  background: var(--color-sidebar);
  color: var(--color-sidebar-text);
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.2s ease, background-color 0.2s;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.06);
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-logo {
  padding: 16px;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sidebar-logo-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-logo-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .sidebar-logo-sub {
  display: none;
}

.nav-list {
  list-style: none;
  margin-top: 8px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  border-left: 3px solid transparent;
}

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

.nav-item.active {
  background: rgba(26, 188, 156, 0.12);
  color: #1abc9c;
  border-left: 3px solid #1abc9c;
  padding-left: calc(12px - 3px);
}

.nav-item .nav-icon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar.collapsed .nav-label {
  display: none;
}

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

.nav-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px 16px;
}

.nav-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.35);
  padding: 8px 16px 4px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed .nav-section-label {
  display: none;
}

/* ── Colorful nav icon tiles (v3.58.0) ── */
.nav-icon-tile {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Sidebar Filter Search (v3.58.0) ── */
.sidebar.collapsed .sidebar-search {
  display: none;
}
.sidebar-search {
  padding: 10px 12px 6px;
}
.sidebar-search-wrap {
  position: relative;
}
.sidebar-search-wrap svg {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.4;
  color: #fff;
}
.sidebar-search input {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  padding: 6px 10px 6px 30px;
  outline: none;
  box-sizing: border-box;
}
.sidebar-search input::placeholder {
  color: rgba(255,255,255,0.35);
}
.sidebar-search input:focus {
  border-color: rgba(26,188,156,0.4);
  background: rgba(255,255,255,0.1);
}


/* ─── 4. Main Content + Topbar ──────────────────────────────── */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  transition: background-color 0.2s;
  position: relative;
  box-shadow: inset 2px 0 8px rgba(0,0,0,0.15);
}

.topbar {
  height: var(--topbar-height);
  background: var(--shell-header-bg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 2px 12px rgba(0,0,0,0.3);
  transition: background-color 0.2s, border-color 0.2s;
}

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

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-breadcrumb {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.user-email {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}


/* ─── 5. Sidebar Toggle Button ──────────────────────────────── */
.sidebar-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius);
  color: var(--color-text-primary);
  font-size: 18px;
  display: flex;
  align-items: center;
}

.sidebar-toggle:hover {
  background: var(--color-bg);
  color: var(--color-text-primary);
}

/* Desktop: sidebar always visible, hamburger always hidden — no way to collapse */
@media (min-width: 769px) {
  .sidebar-toggle {
    display: none !important;
  }
  .sidebar {
    /* Ensure desktop sidebar is never collapsed-hidden */
    transform: none !important;
  }
}


/* ─── 5b. Theme Toggle Button ───────────────────────────────── */
.theme-toggle {
  background: none;
  border: 1px solid var(--color-border);
  cursor: pointer;
  padding: 5px 8px;
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  font-size: 15px;
  display: flex;
  align-items: center;
  line-height: 1;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.theme-toggle:hover {
  background: var(--color-bg);
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
}


/* ─── 6. Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-sidebar-text);
  border-color: var(--color-primary);
}

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

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

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

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

.btn-danger:hover {
  filter: brightness(0.88);
}

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

.btn-gold {
  background: var(--color-accent);
  color: #111827;
  border-color: var(--color-accent);
}

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


/* ─── 7. Page Header ─────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

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

.page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}


/* ─── 8. Filter / Search Bar ─────────────────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  padding: 7px 12px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  font-size: 13px;
  outline: none;
  background: var(--color-input-bg);
  color: var(--color-text-primary);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.2s;
}

.search-input:focus {
  border-color: #5B8DEF;
  box-shadow: 0 0 0 4px rgba(91, 141, 239, 0.18);
}

.search-input::placeholder {
  color: var(--color-text-secondary);
}

.filter-select {
  padding: 7px 10px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--color-input-bg);
  outline: none;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: border-color 0.15s, background-color 0.2s;
}

.filter-select:focus {
  border-color: var(--color-primary);
}


/* ─── 9. Table ───────────────────────────────────────────────── */
.table-container {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow);
  transition: background-color 0.2s, border-color 0.2s;
}

.data-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead {
  background: var(--color-table-header);
  transition: background-color 0.2s;
}

.data-table th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.data-table th:hover {
  color: var(--color-text-primary);
}

.data-table th.sort-asc::after {
  content: ' ↑';
}

.data-table th.sort-desc::after {
  content: ' ↓';
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}

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

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

.data-table .cell-primary {
  font-weight: 500;
  color: var(--color-primary);
}

.data-table .cell-muted {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-secondary);
}

.empty-state-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.empty-state-text {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--color-text-primary);
}

.empty-state-sub {
  font-size: 13px;
}


/* ─── 10. Pagination ─────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  background: transparent;
}

.pagination-info {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.pagination-controls {
  display: flex;
  gap: 4px;
}

.btn-page {
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background 0.1s, background-color 0.2s;
}

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

.btn-page.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.btn-page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ─── 11. Dashboard Stats Cards ──────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s, background-color 0.2s, border-color 0.2s;
}

.stat-card:hover {
  box-shadow: var(--shadow-md);
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.stat-icon.blue {
  background: rgba(0, 82, 204, 0.1);
  color: #0052cc;
}

.stat-icon.green {
  background: rgba(0, 135, 90, 0.1);
  color: #00875a;
}

.stat-icon.gold {
  background: rgba(71, 179, 232, 0.15);
  color: var(--color-accent);
}

.stat-icon.purple {
  background: rgba(101, 84, 192, 0.1);
  color: #6554c0;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.stat-body {
  flex: 1;
}


/* ─── 12. Activity Feed + Dashboard Grid ─────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: background-color 0.2s, border-color 0.2s;
}

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

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

.card-body {
  padding: 0;
}

.activity-item {
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
}

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

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 4px;
  flex-shrink: 0;
}

.activity-text {
  flex: 1;
  color: var(--color-text-primary);
}

.activity-time {
  color: var(--color-text-secondary);
  font-size: 12px;
  white-space: nowrap;
}


/* ─── 13. Quick Actions ──────────────────────────────────────── */
.quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px;
}

.quick-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: background 0.15s, border-color 0.15s, color 0.15s, background-color 0.2s;
  text-decoration: none;
}

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


/* ─── 14. Slide-out Panel ────────────────────────────────────── */
.slide-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.slide-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
  height: 100vh; height: 100dvh;
  background: var(--color-surface);
  z-index: 101;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.slide-panel.open {
  transform: translateX(0);
}

.panel-header {
  padding: 20px 20px 20px;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
/* First span = icon + label — flex row, centered, larger type */
.panel-header > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Icon inside panel-header — 20px, vertically centered.
   !important overrides the width/height HTML attributes feather.js passes to the SVG. */
.panel-header > span:first-child svg,
.panel-header > span:first-child i {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  display: inline-block;
}
.panel-header h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.panel-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 4px;
  border-radius: var(--radius);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-close:hover {
  background: var(--color-bg);
  color: var(--color-text-primary);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

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

.panel-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.detail-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  align-items: start;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.detail-value {
  color: var(--color-text-primary);
  word-break: break-word;
}


/* ─── 15. Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.badge-blue {
  background: rgba(0, 82, 204, 0.1);
  color: #0052cc;
}

.badge-green {
  background: rgba(0, 135, 90, 0.1);
  color: #00875a;
}

.badge-orange {
  background: rgba(255, 139, 0, 0.12);
  color: #b85c00;
}

.badge-red {
  background: rgba(222, 53, 11, 0.1);
  color: #de350b;
}

.badge-purple {
  background: rgba(101, 84, 192, 0.1);
  color: #6554c0;
}

.badge-gray {
  background: rgba(151, 160, 175, 0.15);
  color: var(--color-text-secondary);
}

.badge-gold {
  background: rgba(71, 179, 232, 0.15);
  color: #1a6fa0;
}


/* ─── 16. Toast Notifications ────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 72px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  min-width: 240px;
  max-width: 360px;
  animation: slideInToast 0.22s cubic-bezier(.2,.8,.3,1) forwards;
  border-left: 4px solid rgba(255,255,255,.35);
}

.toast.fade-out {
  animation: fadeOutToast 0.25s ease-in forwards;
}

.toast.success { background: #16a34a; }
.toast.error   { background: #d97706; }
.toast.info    { background: #2563eb; }
.toast.warning { background: #ca8a04; }

/* Override glass.css .toast position:fixed so toasts stay inside .toast-container flex layout */
.toast-container .toast {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
}

@keyframes slideInToast {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeOutToast {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(32px); }
}


/* ─── 17. Login Page ─────────────────────────────────────────── */
.login-page {
  min-height: 100vh; min-height: 100dvh; height: 100dvh;
  background: var(--color-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: background-color 0.2s;
}

.login-card {
  background: var(--color-surface);
  border-radius: 8px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: var(--shadow-lg);
  transition: background-color 0.2s;
}

.login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.login-logo-text {
  font-size: 36px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -1px;
}

.login-logo-sub {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.login-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.login-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}

.login-error {
  background: rgba(220, 38, 38, 0.08);
  color: var(--color-danger);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}

.login-error.visible {
  display: block;
}

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

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

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

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.15);
}

.btn-login {
  width: 100%;
  padding: 11px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 8px;
}

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

.btn-login:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}


/* ─── 18. Forms + Modals ─────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-content {
  background: var(--color-surface);
  border-radius: 6px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
  transition: background-color 0.2s;
}

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

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

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.form-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--color-input-bg);
  outline: none;
  color: var(--color-text-primary);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.2s;
}

.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.15);
}

.form-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  font-size: 14px;
  outline: none;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-input-bg);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.2s;
}

.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(91, 141, 239, 0.15);
}

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


/* ─── 19. Responsive + Loading ───────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 300;
    transition: transform 0.25s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* iOS fix: when sidebar is open, only cover the area outside the sidebar.
     Eliminates z-index hit-testing competition in the sidebar area entirely. */
  body.sidebar-mobile-open .mobile-sidebar-overlay {
    top: 0;
    left: var(--sidebar-width, 260px);
    right: 0;
    bottom: 0;
  }

  .slide-panel {
    width: 100vw;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .page-content {
    padding: 16px;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input {
    max-width: none;
  }
}


/* Mobile topbar visibility */
@media (max-width: 767px) {
  .topbar {
    flex-shrink: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0 10px;
    gap: 8px;
  }
  .sidebar-toggle {
    display: flex !important;
    padding: 8px !important;
    font-size: 22px !important;
    color: #fff !important;
  }
  /* Search lives in topbar-left — let it stretch between hamburger and right group */
  .topbar-left {
    flex: 1;
    min-width: 0;
  }
  #searchBarWrap {
    max-width: none;
  }
  .topbar-right {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 8px;
  }
  /* Shrink avatar slightly on mobile */
  #profileAvatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
  }
  /* Hide ⌘K hint on mobile — not useful on touch */
  #searchKbdHint {
    display: none !important;
  }
  /* Prevent iOS auto-zoom on input focus (zoom fires when font-size < 16px) */
  #globalSearchInput,
  .sidebar-search input {
    font-size: 16px !important;
  }
}

/* Mobile table */
@media (max-width: 767px) {
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  .data-table {
    min-width: 480px;
  }
  .col-hide-mobile {
    display: none !important;
  }
  .page-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .page-header .btn {
    font-size: 13px;
    padding: 6px 12px;
  }
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  color: var(--color-text-secondary);
  font-size: 14px;
  gap: 8px;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ─── 20. Collapsible Nav Sections ───────────────────────────── */
.nav-section-li {
  list-style: none;
}

.nav-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 4px;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.15s;
}

.nav-section-header:hover {
  color: rgba(255, 255, 255, 0.7);
}

.nav-section-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
  display: flex;
  align-items: center;
}

.nav-section-header.collapsed .nav-section-chevron {
  transform: rotate(-90deg);
}

.nav-section-body {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar.collapsed .nav-section-header {
  padding: 6px 0;
  justify-content: center;
}

.sidebar.collapsed .nav-section-header .nav-label,
.sidebar.collapsed .nav-section-header .nav-section-chevron {
  display: none;
}


/* ─── 21. Mobile Sidebar Overlay ─────────────────────────────── */
.mobile-sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0; /* explicit, not inset shorthand */
  background: rgba(0, 0, 0, 0.35);
  z-index: 299;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.mobile-sidebar-overlay.active {
  display: block;
}


/* ─── 22. View Toggle (List / Pipeline) ─────────────────────── */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.view-toggle-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background: var(--color-surface);
  border: none;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.1s, color 0.1s;
  white-space: nowrap;
}

.view-toggle-btn + .view-toggle-btn {
  border-left: 1px solid var(--color-border);
}

.view-toggle-btn.active {
  background: var(--color-primary);
  color: white;
}

.view-toggle-btn:hover:not(.active) {
  background: var(--color-bg);
  color: var(--color-text-primary);
}


/* ─── 23. Kanban / Pipeline Board ────────────────────────────── */
.kanban-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 16px;
  align-items: flex-start;
  min-height: 200px;
}

.kanban-column {
  flex-shrink: 0;
  width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: background-color 0.2s, border-color 0.2s;
}

.kanban-column.drag-over {
  border-color: var(--color-accent);
  background: rgba(71, 179, 232, 0.05);
}

.kanban-col-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  background: var(--color-table-header);
}

.kanban-col-count {
  background: var(--color-badge-bg);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.kanban-col-body {
  padding: 8px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kanban-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: grab;
  font-size: 12px;
  transition: box-shadow 0.15s, border-color 0.15s;
  user-select: none;
}

.kanban-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card.dragging {
  opacity: 0.4;
}

.kanban-card-title {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-sub {
  color: var(--color-text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-empty {
  text-align: center;
  padding: 20px 8px;
  color: var(--color-text-secondary);
  font-size: 12px;
}


/* ─── 24. Saved Views Chips ──────────────────────────────────── */
.saved-views-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.saved-views-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.saved-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  background: var(--color-surface);
  color: var(--color-text-primary);
  transition: background 0.1s, border-color 0.1s;
  white-space: nowrap;
}

.saved-view-chip:hover {
  background: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.saved-view-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.saved-view-chip-del {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  margin-left: 2px;
}

.saved-view-chip-del:hover {
  opacity: 1;
}


/* ─── 25. Toggle Switch ──────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--color-border);
  border-radius: 20px;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--color-success);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(16px);
}


/* ─── 26. Settings Page ──────────────────────────────────────── */
.settings-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  transition: background-color 0.2s, border-color 0.2s;
}

.settings-section-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.settings-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.settings-section-sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.settings-section-body {
  padding: 20px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-row-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.settings-row-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* Google Maps autocomplete dropdown -- must sit above modal */
.pac-container {
  z-index: 9999 !important;
}

/* Related record links -- always blue */
.detail-value a, .kanban-card-sub a, td a {
  color: #2563eb !important;
  text-decoration: none;
}
.detail-value a:hover, .kanban-card-sub a:hover, td a:hover {
  text-decoration: underline;
}

/* Clickable widget cards */
.widget-clickable {
  cursor: pointer;
  transition: filter .15s, transform .15s;
}
.widget-clickable:hover {
  filter: brightness(0.94);
  transform: translateY(-1px);
}

/* Overdue task indicator */
@keyframes overdueGlow {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  50% { opacity: .7; box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
.overdue-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: overdueGlow 1.8s ease-in-out infinite;
}
.task-overdue-row { border-left: 3px solid #ef4444 !important; }
.task-overdue-card { background: rgba(239,68,68,0.04) !important; border-color: #fca5a5 !important; }

/* ── Follow-Up Modal shared styles ── */
@keyframes fuCalFadeIn { from { opacity:0; transform:scale(.95) } to { opacity:1; transform:scale(1) } }
.fu-quick { background:var(--color-bg); border:1px solid var(--color-border); color:var(--color-text-secondary); border-radius:20px; padding:5px 14px; cursor:pointer; font-size:12px; font-weight:600; transition:all .15s; }
.fu-quick:hover, .fu-quick.active { background:#2563eb; border-color:#2563eb; color:#fff; }
.fu-day-chip { background:var(--color-bg); border:1px solid var(--color-border); color:var(--color-text-secondary); border-radius:8px; padding:7px 10px; cursor:pointer; font-size:11px; font-weight:700; text-align:center; min-width:44px; transition:all .15s; flex:1; }
.fu-day-chip:hover, .fu-day-chip.active { background:#2563eb; border-color:#2563eb; color:#fff; }
.fu-time-slot { background:var(--color-bg); border:1px solid var(--color-border); color:var(--color-text-secondary); border-radius:6px; padding:5px 10px; cursor:pointer; font-size:12px; text-align:center; transition:all .15s; white-space:nowrap; }
.fu-time-slot:hover, .fu-time-slot.active { background:#2563eb; border-color:#2563eb; color:#fff; }
.fu-method { background:var(--color-bg); border:1px solid var(--color-border); color:var(--color-text-secondary); border-radius:20px; padding:6px 16px; cursor:pointer; font-size:12px; font-weight:600; transition:all .15s; }
.fu-method:hover { background:var(--color-badge-bg); color:var(--color-text-primary); }
.fu-method-active { background:#2563eb !important; border-color:#2563eb !important; color:#fff !important; }
.fu-nav-btn { background:none; border:1px solid var(--color-border); color:var(--color-text-secondary); border-radius:6px; padding:4px 10px; cursor:pointer; font-size:12px; transition:all .15s; }
.fu-nav-btn:hover { border-color:#2563eb; color:#2563eb; }
.fu-cal-day { text-align:center; padding:7px 2px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:600; color:var(--color-text-secondary); transition:all .15s; }
.fu-cal-day:hover { background:var(--color-bg); color:var(--color-text-primary); }
.fu-cal-day.today { color:#f59e0b; border:1.5px solid #f59e0b; }
.fu-cal-day.selected { background:#2563eb; color:#fff !important; border-color:#2563eb; }
.fu-cal-day.empty { cursor:default; }
.fu-assignee-dd-row { display:flex; align-items:center; gap:8px; padding:9px 14px; cursor:pointer; font-size:13px; font-weight:600; color:var(--color-text-primary); transition:background .1s; }
.fu-assignee-dd-row:hover { background:var(--color-bg); }
.fu-assignee-dd-row.active { background:#f0fdfa; color:#5B8DEF; }
[data-theme='dark'] .fu-assignee-dd-row.active, [data-theme='dim'] .fu-assignee-dd-row.active { background:#1e3a8a; color:#93c5fd; }

/* ─── Global table alignment (added v3.18.24) ───────────────────────── */
/* Text columns: left-aligned. Number columns: right-aligned.            */
/* Applies to both prop-table (record pages) and data-table (list pages) */
.prop-table th,
.prop-table td,
.data-table th,
.data-table td {
  text-align: left;
}
/* Number/currency/percentage columns get right-aligned treatment        */
/* via .col-num class on th/td, or when the column is explicitly numeric */
.prop-table th.col-num,
.prop-table td.col-num,
.data-table th.col-num,
.data-table td.col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Global Search Bar (v3.45.0) ───────────────────────────────────── */
@keyframes searchGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#searchBarWrap {
  background: linear-gradient(270deg, #4f7de0, #5B8DEF, #7aa8ff, #5B8DEF);
  background-size: 300% 300%;
  animation: none;
  border-radius: 22px;
  padding: 3px;
  box-shadow: 0 0 18px rgba(91,141,239,0.25), 0 2px 8px rgba(0,0,0,0.08);
  transition: box-shadow 0.25s ease;
}
#searchBarWrap:focus-within {
  box-shadow: 0 0 0 3px rgba(91,141,239,0.30), 0 0 20px rgba(91,141,239,0.18);
}
[data-theme='dark'] #searchBarWrap:focus-within,
[data-theme='dim'] #searchBarWrap:focus-within {
  box-shadow: 0 0 0 4px rgba(91,141,239,0.30), 0 0 28px rgba(91,141,239,0.25), 0 0 48px rgba(91,141,239,0.15);
}
#searchBarInner {
  background: #ffffff;
  border: none;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  height: 36px;
  transition: background 0.15s;
}
#searchBarInner:focus-within {
  background: #f8fafc;
}
#globalSearchInput {
  background: none;
  border: none;
  outline: none;
  color: #111827;
  font-size: 14px;
  width: 100%;
}
#globalSearchInput::placeholder {
  color: #9ca3af;
}
#searchIconWrap {
  color: #6b7280;
  display: flex;
  align-items: center;
}
#searchKbdHint {
  font-size: 11px;
  color: #6b7280;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
#globalSearchDropdown { scrollbar-width: thin; }
/* Dark/dim mode search bar overrides */
[data-theme='dark'] #searchBarInner, [data-theme='dim'] #searchBarInner { background: #1e2535; }
[data-theme='dark'] #searchBarInner:focus-within, [data-theme='dim'] #searchBarInner:focus-within { background: #252f42; }
[data-theme='dark'] #globalSearchInput, [data-theme='dim'] #globalSearchInput { color: #e2e8f0; }
[data-theme='dark'] #globalSearchInput::placeholder, [data-theme='dim'] #globalSearchInput::placeholder { color: rgba(226,232,240,0.4); }
[data-theme='dark'] #searchIconWrap, [data-theme='dim'] #searchIconWrap { color: rgba(226,232,240,0.5); }
[data-theme='dark'] #searchKbdHint, [data-theme='dim'] #searchKbdHint { color: rgba(226,232,240,0.35); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }

/* ── Shell redesign v3.104.0 ── */

/* Profile dropdown — always dark glass (§8.17) */
#profileDropdown {
  background: rgba(20, 24, 32, 0.92) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.10), 0 16px 48px rgba(0,0,0,0.5) !important;
  border-radius: 16px !important;
}
/* Light mode: profile dropdown — light frosted glass */
/* ── PROFILE DROPDOWN — day mode: light glass, NO white text ── */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) #profileDropdown {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.90) !important;
  --color-text-primary: #1d1d1f;
  --color-text-secondary: rgba(29,29,31,0.65);
}
/* Nuclear: ALL descendants go dark ink — catches every JS-injected color:#fff */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) #profileDropdown * {
  color: rgba(29, 29, 31, 0.85) !important;
}
/* Hover: dark tint */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) #profileDropdown .pdmi:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
/* Profile header section */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) #profileDropdown div[style*='padding:16px'],
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) #profileDropdown div[style*='padding: 16px'] {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}
/* Sign out: restore red (overrides the * rule above) */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) #profileDropdown button[style*='#FF453A'],
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) #profileDropdown button[style*='color:#FF4'] {
  color: #FF453A !important;
}

/* ── Bell notification redesign (v3.314.0 / WO-B4a) ────────────────────────── */
.rtb{flex:none;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1;padding:3.5px 7px;border-radius:7px;white-space:nowrap;color:#fff;background:linear-gradient(180deg,var(--g1),var(--g2));border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 1px rgba(0,0,0,.14),0 1px 2px rgba(20,20,43,.24);text-shadow:0 1px 1px rgba(0,0,0,.24)}
.rt-lead{--g1:#7BA3F3;--g2:#3f6fd6}
.rt-tenant{--g1:#54d772;--g2:#23a044}
.rt-owner{--g1:#48d0c8;--g2:#1d9a94}
.rt-vendor{--g1:#a88eff;--g2:#7856ee}
.rt-team{--g1:#9ea4b0;--g2:#697180}
.rt-prospect{--g1:#ffb84f;--g2:#e6870a}

.t-blue{--tc:#3d6fd6;--tt:rgba(91,141,239,.11)}
.t-green{--tc:#1f8a43;--tt:rgba(52,199,89,.12)}
.t-red{--tc:#d83a3c;--tt:rgba(216,58,60,.1)}
.t-amber{--tc:#c07d09;--tt:rgba(255,159,10,.12)}
.t-teal{--tc:#1f8a86;--tt:rgba(42,168,163,.12)}
.t-indigo{--tc:#5a52d6;--tt:rgba(110,100,240,.1)}
.t-gold{--tc:#b8860b;--tt:rgba(184,134,11,.1)}
[data-theme='dark'] .t-blue,[data-theme='dim'] .t-blue{--tc:#9db9f5;--tt:rgba(91,141,239,.16)}
[data-theme='dark'] .t-green,[data-theme='dim'] .t-green{--tc:#6fe093;--tt:rgba(52,199,89,.15)}
[data-theme='dark'] .t-red,[data-theme='dim'] .t-red{--tc:#ff9a95;--tt:rgba(255,107,100,.14)}
[data-theme='dark'] .t-amber,[data-theme='dim'] .t-amber{--tc:#ffbe5c;--tt:rgba(255,159,10,.15)}
[data-theme='dark'] .t-teal,[data-theme='dim'] .t-teal{--tc:#63cfca;--tt:rgba(42,168,163,.16)}
[data-theme='dark'] .t-indigo,[data-theme='dim'] .t-indigo{--tc:#b3a3ff;--tt:rgba(110,100,240,.16)}
[data-theme='dark'] .t-gold,[data-theme='dim'] .t-gold{--tc:#ffd76a;--tt:rgba(184,134,11,.16)}

.nic{display:block;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-image:var(--i);mask-image:var(--i)}
.ic-bell{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>")}
.ic-phone{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/></svg>")}
.ic-msg{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>")}
.ic-mail{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='M22 6l-10 7L2 6'/></svg>")}
.ic-clock{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='12 7 12 12 15.5 14'/></svg>")}
.ic-star{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 3 14.6 8.6 20.5 9.3 16.2 13.4 17.3 19.2 12 16.3 6.7 19.2 7.8 13.4 3.5 9.3 9.4 8.6 12 3'/></svg>")}
.ic-at{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.9 7.9'/></svg>")}
.ic-check{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")}
.ic-arrow{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>")}
.ic-voicemail{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='5.5' cy='11.5' r='4.5'/><circle cx='18.5' cy='11.5' r='4.5'/><line x1='5.5' y1='16' x2='18.5' y2='16'/></svg>")}

.av-0{background:linear-gradient(150deg,#b69bff,#8e7bff)}
.av-1{background:linear-gradient(150deg,#5ad97f,#2a9d4f)}
.av-2{background:linear-gradient(150deg,#7ba3f3,#4478e6)}
.av-3{background:linear-gradient(150deg,#7ec8f0,#3f83d6)}
.av-4{background:linear-gradient(150deg,#6ad4d0,#2ba8a3)}
.av-5{background:linear-gradient(150deg,#e8927c,#c96a52)}

.fbell{position:relative;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--btn-bg,rgba(255,255,255,.09));border:1px solid var(--glass-edge,rgba(255,255,255,.14));color:var(--ink-2,rgba(255,255,255,.6));box-shadow:inset 0 1px 0 var(--inset,rgba(255,255,255,.1));cursor:pointer;transition:box-shadow .15s,color .15s}
.fbell.act,.fbell:has(+ #notifDropdown[style*="flex"]){color:var(--blue,#5B8DEF);box-shadow:inset 0 1px 0 var(--inset,rgba(255,255,255,.1)),0 0 0 3px rgba(91,141,239,.16)}
.fbell .fdot{position:absolute;top:-3px;right:-4px;min-width:18px;width:auto;height:18px;padding:0 3px;border-radius:50px;background:var(--red,#d83a3c);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1;text-align:center;box-shadow:0 0 0 2px var(--bg,#08080d)}

/* v3.430.1: bell panel border-radius matches avatar-menu (16px, same card pattern) */
#notifDropdown.ndrop,#notifDropdown{border-radius:16px!important;background:var(--pop-solid)!important;-webkit-backdrop-filter:blur(40px) saturate(185%)!important;backdrop-filter:blur(40px) saturate(185%)!important;border:1px solid var(--pop-edge,rgba(255,255,255,.14))!important;box-shadow:var(--pop-shadow,0 26px 64px rgba(0,0,0,.62),0 6px 18px rgba(0,0,0,.5)),inset 0 1px 0 var(--inset,rgba(255,255,255,.1))!important;overflow:hidden;max-height:88vh}
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) #notifDropdown{background:var(--pop-solid)!important;border:1px solid var(--pop-edge,rgba(255,255,255,.85))!important;box-shadow:0 24px 60px rgba(20,20,43,.24),0 6px 18px rgba(20,20,43,.14),inset 0 1px 0 rgba(255,255,255,.9)!important}

.nhd{display:flex;align-items:center;gap:10px;padding:15px 16px 12px;border-bottom:1px solid var(--hairline,rgba(255,255,255,.09))}
.htit{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink,#f5f5f7)}
.htit .nic{color:var(--ink-2,rgba(255,255,255,.6))}
.hcount{min-width:18px;width:auto;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;background:var(--red,#d83a3c);border-radius:50px}
.hmark{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:11.5px;font-weight:650;color:var(--blue,#5B8DEF);background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:7px}
.hmark:hover{background:var(--row-h,rgba(255,255,255,.05))}

.nseg{display:flex;gap:3px;margin:0 12px 8px;padding:3px;background:var(--seg-bg,rgba(255,255,255,.06));border:1px solid var(--hairline,rgba(255,255,255,.09));border-radius:12px}
.ntab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 3px;border:none;border-radius:9px;background:none;font:inherit;font-size:11.5px;font-weight:650;color:var(--ink-2,rgba(255,255,255,.6));cursor:pointer;transition:color .15s,background .15s}
.ntab:hover{color:var(--ink,#f5f5f7)}
.ntab.on,.ntab.bell-tab--active{background:var(--seg-on,rgba(255,255,255,.16));color:var(--ink,#f5f5f7);box-shadow:var(--seg-on-sh,inset 0 1px 0 rgba(255,255,255,.22),0 2px 8px rgba(0,0,0,.45))}
.tcount{min-width:16px;width:auto;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;line-height:1;border-radius:50px;background:#5B8DEF;color:#fff;box-shadow:0 1px 2px rgba(91,141,239,.4),inset 0 1px 0 rgba(255,255,255,.35)}

.nlist{overflow-y:auto;max-height:392px;padding:2px 8px 8px}
.nlist::-webkit-scrollbar{width:8px}
.nlist::-webkit-scrollbar-thumb{background:var(--row-h,rgba(255,255,255,.05));border-radius:8px;border:2px solid transparent;background-clip:padding-box}

.nrow{position:relative;display:flex;gap:11px;padding:11px 12px;border-radius:13px;cursor:pointer;transition:background .15s}
.nrow+.nrow{margin-top:1px}
.nrow:hover{background:var(--row-h,rgba(255,255,255,.05))}
.nrow.unread{background:var(--tt);box-shadow:0 0 15px -8px var(--tc)}
.nrow.unread:hover{background:var(--tt);box-shadow:0 0 24px -2px var(--tc)}
.nrow.unread::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:0 3px 3px 0;background:var(--tc)}
.nrow.read{opacity:.66}

.nlead{position:relative;flex:none;width:36px;height:36px}
.nav{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:750;color:#fff;box-shadow:0 0 0 1px var(--glass-edge,rgba(255,255,255,.14));position:relative}
.ndisc{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tt);color:var(--tc)}
.nbadge{position:absolute;bottom:-3px;right:-4px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--tc);box-shadow:0 0 0 2px var(--pop-solid)}

.nbody{flex:1;min-width:0}
.nlabel{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tc);margin-bottom:2px}
.ntitleRow{display:flex;align-items:center;gap:7px;margin-bottom:2px;min-width:0}
.nname{font-size:12.5px;font-weight:650;color:var(--ink,#f5f5f7);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nsnip{font-size:11.5px;color:var(--ink,#f5f5f7);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.ntrail{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:7px;padding-top:1px}
.ntime{flex:none;font-size:10px;font-weight:600;color:var(--ink-3,rgba(255,255,255,.4))}

/* Bell snooze button — hidden until row hover */
.nqa{flex:none;display:none;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;background:none;border:none;cursor:pointer;color:var(--ink-3,rgba(255,255,255,.4));transition:background .12s,color .12s;padding:0}
.nrow:hover .nqa{display:inline-flex}
.nqa:hover{background:var(--row-h,rgba(255,255,255,.06));color:var(--ink-2,rgba(255,255,255,.65))}

/* Bell snooze floating menu */
#bellSnzMenu{position:fixed;z-index:10600;width:188px;background:var(--pop-solid);-webkit-backdrop-filter:blur(44px) saturate(180%);backdrop-filter:blur(44px) saturate(180%);border:1px solid var(--glass-edge,rgba(255,255,255,.14));border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.38);padding:4px;display:none}
#bellSnzMenu button{display:flex;width:100%;align-items:center;gap:8px;padding:9px 11px;border:none;background:none;border-radius:9px;cursor:pointer;font:inherit;font-size:12.5px;font-weight:620;color:var(--ink,#f5f5f7);text-align:left;transition:background .12s}
#bellSnzMenu button:hover{background:var(--row-h,rgba(255,255,255,.06))}
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) #bellSnzMenu button{color:var(--ink,#1d1d1f)}

.nempty{padding:44px 16px;text-align:center;color:var(--ink-3,rgba(255,255,255,.4));font-size:12.5px;display:flex;flex-direction:column;align-items:center;gap:10px}

.nfoot{display:flex;align-items:center;justify-content:center;padding:11px 16px;border-top:1px solid var(--hairline,rgba(255,255,255,.09))}
.nfoot a{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--blue,#5B8DEF);text-decoration:none;cursor:pointer}

html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .nhd .htit{color:var(--ink,#1d1d1f)}
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .nname{color:var(--ink,#1d1d1f)}
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .nsnip{color:var(--ink,#1d1d1f)}
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .nbadge{box-shadow:0 0 0 2px var(--pop-solid)}
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .fbell .fdot{box-shadow:0 0 0 2px var(--bg,#eef0f6)}
/* ── end bell redesign ─────────────────────────────────────────────────────── */

/* Pinnable nav — pin/unpin buttons */
.nav-pin-btn, .nav-unpin-btn {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: background .12s;
}
.nav-pin-btn:hover, .nav-unpin-btn:hover {
  background: rgba(91,141,239,0.3);
  border-color: rgba(91,141,239,0.5);
  color: #fff;
}
li:hover .nav-pin-btn, li:hover .nav-unpin-btn {
  display: inline-flex;
}
.nav-unpin-btn {
  background: rgba(255,255,255,0.08);
}

/* ── end shell redesign ── */

/* ── Teal pulsing dot for Upcoming tasks (v3.104.0) ── */
.upcoming-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(32,178,170,0.9);
  flex-shrink: 0;
  animation: upcomingGlow 2s ease-in-out infinite;
}
@keyframes upcomingGlow {
  0% { box-shadow: 0 0 0 0 rgba(32,178,170,0.6) }
  50% { box-shadow: 0 0 0 6px rgba(32,178,170,0) }
  100% { box-shadow: none }
}

/* ── Global liquid glass select / picklist standard (§8.29) ── */
/* Collapsed state: glass-styled with chevron */
select.form-input, select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px 13px;
  padding-right: 36px;
}
/* Night mode: dark glass select */
[data-theme='dark'] select.form-input, [data-theme='dim'] select.form-input,
[data-theme='dark'] select, [data-theme='dim'] select {
  background-color: rgba(20,24,32,0.65) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  color: #fff !important;
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.08);
}
/* Day mode: light glass select */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) select.form-input,
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) select {
  background-color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  border-radius: 10px !important;
  color: #1D1D1F !important;
  color-scheme: light;
}
/* Selected option highlight — override OS orange */
[data-theme='dark'] select.form-input option,
[data-theme='dim'] select.form-input option,
[data-theme='dark'] select option,
[data-theme='dim'] select option {
  background: #1a2236 !important;
  color: #fff !important;
}
[data-theme='dark'] select.form-input option:checked,
[data-theme='dim'] select.form-input option:checked,
[data-theme='dark'] select option:checked,
[data-theme='dim'] select option:checked {
  background: #3B6FD4 !important;
  color: #fff !important;
}
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) select option:checked {
  background: #3B6FD4 !important;
  color: #fff !important;
}
/* ── end global select ── */

/* ── Day mode: Apple iOS 26 Liquid Glass global background (§2.5, approved 2026-06-08) ── */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) body {
  background: #D2D8E2 !important;
}
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) body::before {
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(200,210,230,0.60) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 75% 70%, rgba(180,195,220,0.45) 0%, transparent 65%) !important;
}
/* Day mode topbar — light glass to match adaptive sidebar */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .topbar {
  background: rgba(255, 255, 255, 0.85) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
}

/* ── Sidebar section folder labels — white in dark, var(--ink) in light ── */
.nav-section-header {
  color: #fff !important;
}
.nav-section-header:hover {
  color: #fff !important;
}
html:not([data-theme='dark']) .sidebar .nav-section-header {
  color: var(--ink) !important;
}
html:not([data-theme='dark']) .sidebar .nav-section-header:hover {
  color: var(--ink) !important;
}

/* ── Day mode: section/table headers — dark navy glass + white text (§8.23-light, Brock-approved 2026-06-08) ── */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .settings-section-header,
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .section-header:not(.panel-header),
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .card-header:not(.panel-header),
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) table thead tr,
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .table-header-row {
  background: rgba(20,40,80,0.68) !important;
  backdrop-filter: blur(44px) saturate(200%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(44px) saturate(200%) brightness(1.05) !important;
  box-shadow:
    inset 0 1.5px 0 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 0 rgba(0,0,0,0.20),
    inset 0 0 0 1px rgba(91,141,239,0.18) !important;
  border-bottom: 1px solid rgba(91,141,239,0.25) !important;
  color: #fff !important;
}
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) table thead th {
  color: #fff !important;
  background: transparent !important;
}
/* ── end day mode section headers ── */

/* ── end §2.5 ── */


/* ── Day mode: dashboard panel-header — no fill, no divider, day text color ── */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .panel-header {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 18px 20px 14px !important;
}
/* Day mode panel-header icon color */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .panel-header svg,
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .panel-header i {
  color: #1D1D1F !important;
}
/* Timestamp secondary text */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .panel-header span + span,
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .panel-header #lastRefreshTime {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: rgba(29,29,31,0.50) !important;
}

/* ── Glass / search-input select fallback (glass-select.js not yet built) ── */
/* Covers selects inside .glass-select-wrap AND bare select.search-input (e.g. work-orders filter bar) */
.glass-select-wrap .glass-native-select,
.glass-select-wrap > select:not(.glass-select) {
  position: relative;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
}
.glass-select-wrap .glass-native-select option,
.glass-select-wrap > select:not(.glass-select) option {
  background: var(--pop, #fff);
  color: var(--ink);
}
[data-theme="dark"] .glass-select-wrap .glass-native-select,
[data-theme="dark"] .glass-select-wrap > select:not(.glass-select) {
  color: #f5f5f7 !important;
}
[data-theme="dark"] .glass-select-wrap .glass-native-select option,
[data-theme="dark"] .glass-select-wrap > select:not(.glass-select) option {
  background: rgba(28, 28, 38, 0.95);
  color: #f5f5f7;
}
/* Bare select.search-input (work-orders filter bar + any page without glass-select-wrap) */
/* background:transparent shorthand also zeros background-image, preventing SVG chevron bleed — verified clean in 8bf0e5b */
select.search-input {
  position: relative;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
}
[data-theme="dark"] select.search-input {
  color: #f5f5f7 !important;
}
[data-theme="dark"] select.search-input option {
  background: rgba(28, 28, 38, 0.95);
  color: #f5f5f7;
}

/* ── Day mode: topbar search bar — dark ink on light glass chrome ── */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .topbar .search-input {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  color: #1d1d1f !important;
}
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .topbar .search-input::placeholder {
  color: rgba(29, 29, 31, 0.45) !important;
}
/* Explicit override: any glass-field or search-input NOT in topbar or sidebar gets dark ink in light mode */
html:not([data-theme='dark']) .main-content .search-input,
html:not([data-theme='dark']) .filter-bar .search-input,
html:not([data-theme='dark']) .main-content .glass-field,
html:not([data-theme='dark']) .filter-bar .glass-field {
  color: #1d1d1f !important;
}
html:not([data-theme='dark']) .main-content .search-input::placeholder,
html:not([data-theme='dark']) .filter-bar .search-input::placeholder,
html:not([data-theme='dark']) .main-content .glass-field::placeholder,
html:not([data-theme='dark']) .filter-bar .glass-field::placeholder {
  color: #6b7280 !important;
}

/* ── Day mode: section-header / card-header — exclude dashboard panel-header ── */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .settings-section-header {
  background: rgba(20,40,80,0.68) !important;
  backdrop-filter: blur(44px) saturate(200%) brightness(1.05) !important;
  border-bottom: 1px solid rgba(91,141,239,0.25) !important;
  color: #fff !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   F2 — LIQUID GLASS CHROME (sidebar + topbar)
   Source: docs/design/LIQUID-GLASS-DESIGN-SYSTEM-2026-06-20.md §10.2 (chrome
   stays dark glass regardless of theme), §6 (active = brand-blue indicator),
   §nav-icon-mapping (per-item app-icon tile).
   These rules override the legacy --color-sidebar fills above for both themes.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar: adaptive glass — dark in dark mode, light in light mode ── */
.sidebar {
  background: rgba(28, 28, 38, 0.72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
  color: #f5f5f7 !important;
}
html:not([data-theme='dark']) .sidebar {
  background: rgba(255, 255, 255, 0.70) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.04);
  color: #1d1d1f !important;
}

@supports not (backdrop-filter: blur(1px)) {
  .sidebar { background: rgba(20, 22, 32, 0.96) !important; }
  html:not([data-theme='dark']) .sidebar { background: rgba(250, 250, 252, 0.97) !important; }
}

/* sidebar logo container — keep transparent, glass shows through */
.sidebar-logo {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
html:not([data-theme='dark']) .sidebar-logo {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* two-PNG logo swap via CSS filter — white logo inverts to black on light sidebar */
html:not([data-theme='dark']) .sidebar-logo img {
  filter: invert(1);
}

/* ── Nav items: app-icon tile + brand-blue active indicator ─────────── */
.sidebar .nav-item {
  color: rgba(245, 245, 247, 0.82) !important;
  border-left: 2px solid transparent;
  padding: 9px 14px;
  transition: background .15s, color .15s, border-color .15s;
}
.sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}
.sidebar .nav-item.active {
  background: rgba(91, 141, 239, 0.12) !important;
  color: #fff !important;
  border-left: 2px solid #5B8DEF !important;
  padding-left: calc(14px - 2px);
}
.sidebar .nav-item.active .nav-icon-tile {
  box-shadow: 0 0 0 1px rgba(91, 141, 239, 0.6), 0 4px 10px rgba(91, 141, 239, 0.25);
}
/* light mode nav overrides */
html:not([data-theme='dark']) .sidebar .nav-item {
  color: rgba(29, 29, 31, 0.80) !important;
}
html:not([data-theme='dark']) .sidebar .nav-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #1d1d1f !important;
}
html:not([data-theme='dark']) .sidebar .nav-item.active {
  background: rgba(91, 141, 239, 0.10) !important;
  color: #5B8DEF !important;
}

/* app-icon tile (existing) — glass treatment + subtle inner highlight */
.sidebar .nav-icon-tile {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
              0 1px 2px rgba(0, 0, 0, 0.25);
  color: #fff;
  transition: box-shadow .15s, transform .15s;
}
.sidebar .nav-item:hover .nav-icon-tile {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
              0 3px 8px rgba(0, 0, 0, 0.35);
}
.sidebar .nav-icon-tile svg {
  width: 14px; height: 14px;
  stroke-width: 2.25;
}

/* section header label + chevron */
.sidebar .nav-section-label,
.sidebar .nav-section-header {
  color: #fff !important;
}
.sidebar .nav-divider {
  background: rgba(255, 255, 255, 0.06) !important;
}
html:not([data-theme='dark']) .sidebar .nav-section-label,
html:not([data-theme='dark']) .sidebar .nav-section-header {
  color: var(--ink) !important;
}
html:not([data-theme='dark']) .sidebar .nav-divider {
  background: rgba(0, 0, 0, 0.06) !important;
}

/* sidebar search field — glass-thin field */
.sidebar .sidebar-search input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.sidebar .sidebar-search input::placeholder {
  color: rgba(255, 255, 255, 0.40) !important;
}
.sidebar .sidebar-search input:focus {
  border-color: #5B8DEF !important;
  box-shadow: 0 0 0 4px rgba(91, 141, 239, 0.18) !important;
  background: rgba(255, 255, 255, 0.10) !important;
}
html:not([data-theme='dark']) .sidebar .sidebar-search input {
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  color: #1d1d1f !important;
}
html:not([data-theme='dark']) .sidebar .sidebar-search input::placeholder {
  color: rgba(29, 29, 31, 0.45) !important;
}

/* ── Topbar (header): always dark glass, both themes ─────────────────── */
.topbar {
  background: rgba(28, 28, 38, 0.72) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04),
              0 4px 16px rgba(0, 0, 0, 0.20) !important;
  color: #f5f5f7 !important;
}
/* dim mode: keep topbar dark glass (base .topbar rule covers dark; this explicit rule ensures dim stays dark too) */
html[data-theme='dim'] .topbar {
  background: rgba(28, 28, 38, 0.78) !important;
}

@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: rgba(20, 22, 32, 0.96) !important; }
}

.topbar .page-breadcrumb,
.topbar .page-title { color: rgba(245, 245, 247, 0.82) !important; }
/* Day mode: topbar text — dark ink on light glass */
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .topbar .page-breadcrumb,
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .topbar .page-title { color: rgba(29, 29, 31, 0.80) !important; }
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .topbar button,
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .topbar a,
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .topbar svg { color: #1d1d1f !important; stroke: #1d1d1f; }
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .topbar .topbar-icon,
html:is(:not([data-theme]),[data-theme='light'],[data-theme='warm']) .topbar [class*="icon"] { color: rgba(29,29,31,0.70) !important; }

/* keep main-content inner shadow tasteful in glass-chrome era */
.main-content { box-shadow: none !important; }

/* ─── Board Card — shared container for Lead, Showing, and Application boards ─── */
/* All kanban boards reuse .board-card for the card shell.                         */
/* Content-specific styles (padding, photo banner, name etc.) go in each page.     */
:root { --person-bg: rgba(255,255,255,0.55); }
[data-theme='dark'] { --person-bg: rgba(255,255,255,0.07); }
.board-card {
  display: block;
  width: 100%;
  background: var(--person-bg);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 0 var(--inset);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background .2s, box-shadow .15s;
  box-sizing: border-box;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.board-card:hover { box-shadow: inset 0 1px 0 0 var(--inset), 0 0 0 2px rgba(91,141,239,.32); }

/* ─── v3.426.0 — no-topbar Phase 1 pages ────────────────────────────
   When <body class="no-topbar">, the topbar dark bar is hidden entirely.
   The .topbar element still exists in HTML but collapses to 0 height so
   content fills to the top. The mini bell/avatar pill + floating sidebar
   toggle are injected into document.body by initTopbar. */
body.no-topbar .topbar {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  border: none !important;
}
body.no-topbar .main-content > .page-content {
  padding-top: 20px;
}

/* ─── v3.430.1 — Floating sidebar toggle (mobile-only) — SITE-WIDE
   Circle twin of the quick-action dock button. Bottom-LEFT corner,
   matches dock size/shape. Text █ = site chrome; squircle = record actions. */
body.no-topbar .mnr-floating-sidebar-toggle {
  position: fixed;
  top: auto;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 16px;
  z-index: 10400;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--dock-glass, rgba(20,20,28,.82));
  /* Exact dock glass recipe: saturate(200%) is what pulls ambient color through */
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--dock-edge, rgba(255,255,255,.14));
  box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 var(--dock-inner, rgba(255,255,255,.12));
  /* Icon color matches dock chevron token. !important beats L1441 .sidebar-toggle { color: #fff !important }
     which was forcing white on the floating ham. Dark mode: --ink-2 resolves to gray. */
  color: var(--ink-2, rgba(255,255,255,.72)) !important;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  /* No separate light-mode override — dock-glass token already theme-switches; twins are automatic */
}
@media (max-width: 768px) {
  body.no-topbar .mnr-floating-sidebar-toggle { display: flex; }
  /* V-R8: ham lifts above open sidebar so it stays visible + tappable to close.
     Sidebar z-peak is 10800 (board page-local); 10850 beats it site-wide. */
  body.sidebar-mobile-open .mnr-floating-sidebar-toggle { z-index: 10850 !important; }
  /* Pin quick-action dock to bottom-RIGHT on mobile — circle twin of the ham button.
     CSS !important beats _dockApplyDefaultPos inline styles (proven in P16). */
  #mnrQuickDock {
    top: auto !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important;
    right: 16px !important;
    transform: none !important;
  }
  /* V-R5: dock circle shadow matches ham (light mode .28 alpha, was .12).
     !important beats quick-dock.js injected stylesheet which loads AFTER app.css. */
  html:not([data-theme='dark']) #mnrQuickDock .mnr-dock-pill {
    box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 var(--dock-inner, rgba(255,255,255,.80)) !important;
  }
}

/* ─── v3.426.0 — Mini bell/avatar dock (top-right glass pill) ──────── */
/* R8-29: skin stripped — .mnr-pill-glass owns background/blur/border/shadow on both themes.
   ID selector (1-0-0) was beating .mnr-pill-glass (0-1-0), so every token fix was dead on arrival. */
#mnrMiniDock {
  position: fixed;
  top: 12px;
  right: 16px;
  z-index: 10400;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* R8-29: bg removed; dark border for definition on light pages (--dock-edge is white in light mode) */
html:not([data-theme='dark']) #mnrMiniDock {
  border-color: rgba(0,0,0,.12);
}
#mnrMiniDock .fbell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: transparent;
  color: var(--ink, #f5f5f7);
  padding: 0;
  transition: background .12s ease;
}
#mnrMiniDock .fbell:hover {
  background: rgba(255,255,255,.10);
}
html:not([data-theme='dark']) #mnrMiniDock .fbell {
  color: #1d1d1f;
}
html:not([data-theme='dark']) #mnrMiniDock .fbell:hover {
  background: rgba(0,0,0,.06);
}
#mnrMiniDock #profileMenuBtn { padding: 0; overflow: hidden; }
#mnrMiniDock #profileAvatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #111827; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; overflow: hidden; flex-shrink: 0;
}
#mnrMiniDock #notifBadge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: #ff3b30; color: #fff;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ─── v3.426.0 — Quick Dock search mode ─────────────────────────── */
#mnrQuickDock[data-search-open="true"] .mnr-dock-btn:not(#mnrDockSearchInputWrap),
#mnrQuickDock[data-search-open="true"] .mnr-dock-chevron {
  display: none !important;
}
#mnrQuickDock .mnr-dock-btn.mnr-dock-anim-out {
  opacity: 0;
  transform: translateY(6px) scale(.85);
  pointer-events: none;
}
#mnrQuickDock .mnr-dock-btn.mnr-dock-anim-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .16s ease, transform .16s ease;
}
#mnrDockSearch {
  background: transparent;
  color: var(--ink, #fff);
}
#mnrDockSearchInputWrap {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 12px;
  min-width: 320px;
  max-width: 60vw;
  animation: mnrDockSearchExpand .18s ease-out;
}
#mnrQuickDock[data-search-open="true"] #mnrDockSearchInputWrap {
  display: inline-flex;
}
#mnrDockSearchInputWrap svg {
  color: var(--ink-2, rgba(255,255,255,.72));
  flex-shrink: 0;
}
#mnrDockSearchInput {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink, #fff);
  font: inherit;
  font-size: 14px;
  padding: 8px 0;
}
html:not([data-theme='dark']) #mnrDockSearchInput { color: #1d1d1f; }
#mnrDockSearchInput::placeholder {
  color: var(--ink-3, rgba(255,255,255,.5));
}
#mnrDockSearchKbd {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,.10);
  color: var(--ink-2, rgba(255,255,255,.6));
  font-weight: 600;
  flex-shrink: 0;
}
html:not([data-theme='dark']) #mnrDockSearchKbd {
  background: rgba(0,0,0,.06);
  color: rgba(29,29,31,.6);
}
#mnrDockSearchClose {
  border: none;
  background: transparent;
  color: var(--ink-2, rgba(255,255,255,.7));
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
#mnrDockSearchClose:hover {
  background: rgba(255,255,255,.10);
  color: var(--ink, #fff);
}
html:not([data-theme='dark']) #mnrDockSearchClose { color: #6e6e73; }
html:not([data-theme='dark']) #mnrDockSearchClose:hover {
  background: rgba(0,0,0,.06);
  color: #1d1d1f;
}
@keyframes mnrDockSearchExpand {
  from { opacity: 0; width: 40px; }
  to   { opacity: 1; }
}

/* ─── v3.426.0 — Grouped glass results panel ───────────────────── */
#mnrSearchResultsPanel {
  position: fixed;
  z-index: 10600;
  min-width: 380px;
  max-width: 520px;
  max-height: 60vh;
  overflow-y: auto;
  border-radius: 18px;
  background: var(--glass, rgba(20,20,28,.82));
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-edge, rgba(255,255,255,.14));
  box-shadow: 0 8px 40px rgba(0,0,0,.45);
  color: var(--ink, #f5f5f7);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .15s ease-out, transform .15s ease-out;
  pointer-events: none;
  display: none;
}
#mnrSearchResultsPanel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: block;
}
html:not([data-theme='dark']) #mnrSearchResultsPanel {
  background: rgba(255,255,255,.88);
  border-color: rgba(0,0,0,.08);
  color: #1d1d1f;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.mnr-results-section {
  padding: 0;
}
.mnr-results-section-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(255,255,255,.6));
  background: var(--glass, rgba(20,20,28,.82));
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--glass-edge, rgba(255,255,255,.08));
}
html:not([data-theme='dark']) .mnr-results-section-header {
  background: rgba(255,255,255,.86);
  color: #6e6e73;
  border-bottom-color: rgba(0,0,0,.06);
}
.mnr-results-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--ink-2, rgba(255,255,255,.65));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}
html:not([data-theme='dark']) .mnr-results-section-count {
  background: rgba(0,0,0,.06);
  color: #6e6e73;
}
.mnr-results-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px solid var(--glass-edge, rgba(255,255,255,.06));
  transition: background .12s ease;
}
.mnr-results-row:last-child { border-bottom: none; }
.mnr-results-row:hover,
.mnr-results-row.mnr-kb-active {
  background: rgba(255,255,255,.08);
}
html:not([data-theme='dark']) .mnr-results-row:hover,
html:not([data-theme='dark']) .mnr-results-row.mnr-kb-active {
  background: rgba(0,0,0,.05);
}
.mnr-results-row-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  color: var(--ink, #f5f5f7);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  overflow: hidden;
  border: 1px solid var(--glass-edge, rgba(255,255,255,.10));
}
.mnr-results-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mnr-results-row-avatar.mnr-avatar-round { border-radius: 50%; }
.mnr-results-row-body {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}
.mnr-results-row-primary {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #f5f5f7);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
html:not([data-theme='dark']) .mnr-results-row-primary { color: #1d1d1f; }
.mnr-results-row-primary .mnr-hl {
  font-weight: 700;
  color: var(--color-accent, #c0c7d0);
}
html:not([data-theme='dark']) .mnr-results-row-primary .mnr-hl {
  color: #1d4ed8;
}
.mnr-results-row-secondary {
  font-size: 11px;
  color: var(--ink-3, rgba(255,255,255,.55));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
html:not([data-theme='dark']) .mnr-results-row-secondary { color: #6e6e73; }
.mnr-results-row-chip {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.mnr-results-empty {
  padding: 24px 20px;
  font-size: 13px;
  color: var(--ink-3, rgba(255,255,255,.55));
  text-align: center;
}
html:not([data-theme='dark']) .mnr-results-empty { color: #6e6e73; }
.mnr-results-shimmer-row {
  display: flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 16px;
  border-bottom: 1px solid var(--glass-edge, rgba(255,255,255,.06));
}
.mnr-results-shimmer-avatar,
.mnr-results-shimmer-line {
  background: linear-gradient(90deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 100%);
  background-size: 200% 100%;
  animation: mnrShimmer 1.2s linear infinite;
  border-radius: 6px;
}
html:not([data-theme='dark']) .mnr-results-shimmer-avatar,
html:not([data-theme='dark']) .mnr-results-shimmer-line {
  background: linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.10) 50%, rgba(0,0,0,.06) 100%);
  background-size: 200% 100%;
}
.mnr-results-shimmer-avatar {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
}
.mnr-results-shimmer-lines {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
}
.mnr-results-shimmer-line.line-a { height: 10px; width: 60%; }
.mnr-results-shimmer-line.line-b { height: 8px;  width: 40%; }
@keyframes mnrShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.mnr-results-recent-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--ink-2, rgba(255,255,255,.6));
}
html:not([data-theme='dark']) .mnr-results-recent-header { color: #6e6e73; }
.mnr-results-recent-clear {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3, rgba(255,255,255,.5));
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 6px; border-radius: 6px;
}
.mnr-results-recent-clear:hover { color: var(--ink, #fff); background: rgba(255,255,255,.08); }
html:not([data-theme='dark']) .mnr-results-recent-clear:hover { color: #1d1d1f; background: rgba(0,0,0,.05); }
.mnr-results-quick-links {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px 14px;
  border-top: 1px solid var(--glass-edge, rgba(255,255,255,.06));
}
.mnr-results-quick-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--ink, #f5f5f7);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--glass-edge, rgba(255,255,255,.10));
  transition: background .12s ease;
}
.mnr-results-quick-link:hover { background: rgba(255,255,255,.14); }
html:not([data-theme='dark']) .mnr-results-quick-link {
  background: rgba(0,0,0,.05);
  color: #1d1d1f;
  border-color: rgba(0,0,0,.08);
}
html:not([data-theme='dark']) .mnr-results-quick-link:hover { background: rgba(0,0,0,.10); }
@media (prefers-reduced-motion: reduce) {
  #mnrSearchResultsPanel,
  .mnr-results-shimmer-avatar,
  .mnr-results-shimmer-line { transition: none !important; animation: none !important; }
}

/* ─── v3.539.0 — laptop band ~80% page zoom-out ──────────
   Locked bands (Brock / DaVinci): min-width 769px AND max-width 1728px
   ONE uniform ~80% page zoom-out on the .page-content root.
   Use transform:scale(0.8) + transform-origin:top left (NOT zoom:0.8).
   Chrome zoom insets from the start and, with a 125% used width, Atlas
   .page (max-width + margin:auto) grew a blank LEFT gutter. Origin
   top-left keeps the painted box flush after the sidebar.
   Transform does not shrink the layout box, so the unscaled flex slot
   leaves a dead 20% strip on the right and bottom (looks like extra
   padding) and the visual pane is only 80% tall (height cut off).
   Compensate with width/height: calc(100% / 0.8) so the scaled visual
   fills the pane; flex: none so a later min-height:0 (Atlas wiki pin)
   cannot shrink the box back; overflow-y:auto so tall pages scroll
   instead of clipping. .main-content overflow:hidden clips only the
   unused 25% layout that scale no longer paints. Do not use zoom:0.8.
   ≤768 (phone/tablet) and >1728 (large desktop) stay 100% — no rule.
   Resize is live CSS (no JS scale cache).
   Chrome at native 100%:
     #mnrMiniDock / .topbar / .topbar-right — not inside the scaled root
       (zoom:1 lock if a page nests chrome).
     .atlas-track / #atlasTrack / .view-toggle — sit with the chrome
       (Atlas Wiki/Map + similar top-right floating toggles). They live
       inside .page-content, so counter-zoom 1.25 restores native size
       and sliding-lens alignment (do not scale these with the content). */
@media (min-width: 769px) and (max-width: 1728px) {
  .main-content > .page-content {
    transform: scale(0.8);
    transform-origin: top left;
    width: calc(100% / 0.8);
    max-width: none;
    height: calc(100% / 0.8);
    min-height: calc(100% / 0.8);
    margin-left: 0;
    margin-right: 0;
    align-self: flex-start;
    flex: 0 0 auto;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body:not(.no-topbar) .main-content > .page-content {
    height: calc((100% - var(--topbar-height)) / 0.8);
    min-height: calc((100% - var(--topbar-height)) / 0.8);
  }
  #mnrMiniDock,
  .topbar,
  .topbar-right {
    zoom: 1;
  }
  .atlas-track,
  #atlasTrack,
  .view-toggle {
    zoom: 1.25;
  }
}