@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap");

:root {
  color-scheme: light;
  --font-ui: "Segoe UI", "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --shadow-sm: 0 4px 14px rgba(58, 41, 24, 0.08);
  --shadow-md: 0 10px 30px rgba(58, 41, 24, 0.14);
  --shadow-lg: 0 24px 80px rgba(58, 41, 24, 0.22);
  --page-bg: #efe4d2;
  --page-bg-soft: #f5ecde;
  --surface-1: #fbf7ef;
  --surface-2: #f4ecdf;
  --surface-3: #eee2d1;
  --border-subtle: rgba(78, 58, 38, 0.14);
  --border-strong: rgba(78, 58, 38, 0.28);
  --text-primary: #211811;
  --text-secondary: #5f5246;
  --text-muted: #897b6d;
  --text-inverse: #fff8ed;
  --accent-primary: #d98235;
  --accent-primary-hover: #c97328;
  --accent-primary-soft: rgba(217, 130, 53, 0.14);
  --accent-blue: #0d4e66;
  --accent-teal: #0c7a78;
  --accent-green: #2f7d45;
  --accent-purple: #7156b8;
  --accent-red: #b5483d;
  --warning: #9f4f2d;
  --focus-ring: rgba(217, 130, 53, 0.38);
  --input-bg: #f8f0e3;
  --input-border: rgba(78, 58, 38, 0.22);
  --card-bg: rgba(255, 252, 246, 0.82);
  --card-border: rgba(78, 58, 38, 0.16);
  --app-header-bg: var(--card-bg);
  --app-header-border: var(--border-strong);
  --app-header-control-bg: var(--surface-2);
  --app-header-control-hover-bg: var(--surface-3);
  --app-header-control-border: var(--border-strong);
  --icon-tile-bg: rgba(255, 255, 255, 0.76);
  --icon-tile-border: rgba(30, 50, 70, 0.14);
  --disabled-opacity: 0.54;
  --bg: var(--page-bg);
  --bg-strong: var(--page-bg-soft);
  --surface: var(--surface-1);
  --surface-alt: var(--surface-2);
  --surface-card: color-mix(in srgb, var(--surface) 90%, var(--surface-strong) 10%);
  --panel: var(--surface-card);
  --surface-soft: rgba(255, 243, 232, 0.08);
  --ink: var(--text-primary);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --accent: var(--accent-primary);
  --accent-dark: var(--accent-primary-hover);
  --button-primary: var(--accent-primary);
  --secondary-button-bg: #ead3bb;
  --secondary-button-ink: #422616;
  --eyebrow-color: #d7bda4;
  --sidebar-tab-active-bg: #fff3e8;
  --sidebar-tab-active-ink: #2f2017;
  --success: #2f6b48;
  --shadow: var(--shadow-md);
  --card-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 240, 228, 0.98));
  --hero-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 248, 238, 0.94));
  --surface-strong: var(--surface-3);
  --sidebar-top: #231913;
  --sidebar-bottom: #3a2a1e;
  --sidebar-ink: #fff3e8;
  --sidebar-muted: #f2ddcc;
  --table-head: #d6e6f4;
  --radius: var(--radius-xl);
  --mono: "Consolas", "SFMono-Regular", monospace;
  --sans: var(--font-ui);
  --dashboard-page-bg:
    radial-gradient(circle at 15% 8%, rgba(166, 90, 42, 0.12), transparent 34%),
    linear-gradient(135deg, #f8efe2, #efe2cf);
  --dashboard-panel-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 240, 229, 0.96));
  --dashboard-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 238, 226, 0.98));
  --dashboard-card-border: var(--card-border);
  --dashboard-card-shadow: var(--shadow-sm);
  --dashboard-card-hover-shadow: var(--shadow-md);
  --dashboard-ink: var(--text-primary);
  --dashboard-muted: var(--text-secondary);
  --dashboard-subtle: var(--text-muted);
  --dashboard-divider: rgba(120, 90, 60, 0.18);
  --dashboard-control-bg: rgba(255, 255, 255, 0.74);
  --dashboard-stat-bg: rgba(255, 255, 255, 0.7);
  --dashboard-icon-bg-base: var(--icon-tile-bg);
  --dashboard-logo-filter: none;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #07131f;
  --page-bg-soft: #0a1825;
  --surface-1: #152232;
  --surface-2: #1b2a3a;
  --surface-3: #223243;
  --border-subtle: rgba(160, 178, 198, 0.16);
  --border-strong: rgba(210, 179, 132, 0.38);
  --text-primary: #f3eadc;
  --text-secondary: #c8b9a3;
  --text-muted: #8796a6;
  --text-inverse: #10161c;
  --accent-primary: #d98235;
  --accent-primary-hover: #ee9a4d;
  --accent-primary-soft: rgba(217, 130, 53, 0.14);
  --accent-blue: #5ba7ff;
  --accent-teal: #36d6df;
  --accent-green: #5edb73;
  --accent-purple: #9b86ff;
  --accent-red: #ef5f58;
  --warning: #e28b5b;
  --focus-ring: rgba(217, 130, 53, 0.42);
  --input-bg: #1b2530;
  --input-border: rgba(160, 178, 198, 0.22);
  --card-bg: rgba(18, 31, 45, 0.86);
  --card-border: rgba(160, 178, 198, 0.16);
  --app-header-bg: #101e2b;
  --app-header-border: rgba(255, 255, 255, 0.10);
  --app-header-control-bg: #11293c;
  --app-header-control-hover-bg: #17354c;
  --app-header-control-border: rgba(255, 214, 102, 0.16);
  --icon-tile-bg: rgba(255, 255, 255, 0.035);
  --icon-tile-border: rgba(255, 255, 255, 0.12);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.44);
  --bg: var(--page-bg);
  --bg-strong: var(--page-bg-soft);
  --surface: var(--surface-1);
  --surface-alt: var(--surface-2);
  --surface-strong: var(--surface-3);
  --surface-card: color-mix(in srgb, var(--surface) 96%, var(--surface-strong) 4%);
  --panel: var(--surface-card);
  --surface-soft: rgba(255, 238, 220, 0.08);
  --ink: var(--text-primary);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --accent: var(--accent-primary);
  --accent-dark: var(--accent-primary-hover);
  --button-primary: var(--accent-primary);
  --secondary-button-bg: #37414d;
  --secondary-button-ink: #f2e2d0;
  --eyebrow-color: #d7c2aa;
  --sidebar-tab-active-bg: #f2e5d6;
  --sidebar-tab-active-ink: #14181d;
  --success: #4fa476;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  --card-glass: linear-gradient(180deg, rgba(31, 37, 46, 0.96), rgba(25, 31, 39, 0.98));
  --hero-glass: linear-gradient(135deg, rgba(37, 44, 54, 0.92), rgba(28, 34, 43, 0.98));
  --sidebar-top: #10151c;
  --sidebar-bottom: #171d25;
  --sidebar-ink: #f2e5d6;
  --sidebar-muted: #d5c4b3;
  --table-head: #314151;
  --dashboard-page-bg:
    radial-gradient(circle at 15% 8%, rgba(55, 111, 150, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(7, 15, 25, 0.96), rgba(12, 29, 45, 0.96));
  --dashboard-panel-bg: linear-gradient(145deg, rgba(22, 36, 54, 0.94), rgba(13, 25, 39, 0.94));
  --dashboard-card-bg: linear-gradient(145deg, rgba(25, 39, 57, 0.94), rgba(17, 30, 46, 0.94));
  --dashboard-card-border: rgba(125, 152, 184, 0.24);
  --dashboard-card-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
  --dashboard-card-hover-shadow: 0 24px 44px rgba(0, 0, 0, 0.24);
  --dashboard-ink: #f8f5ef;
  --dashboard-muted: #aeb9c5;
  --dashboard-subtle: #b8c2cf;
  --dashboard-divider: rgba(255, 255, 255, 0.14);
  --dashboard-control-bg: rgba(21, 34, 51, 0.78);
  --dashboard-stat-bg: rgba(20, 34, 52, 0.72);
  --dashboard-icon-bg-base: rgba(15, 26, 40, 0.9);
  --dashboard-logo-filter: none;
}

html[data-theme="unmoored"] {
  color-scheme: dark;
  --page-bg: #0b0d10;
  --page-bg-soft: #14090b;
  --surface-1: #180d10;
  --surface-2: #221012;
  --surface-3: #2b1416;
  --border-subtle: rgba(169, 52, 43, 0.24);
  --border-strong: rgba(229, 73, 49, 0.52);
  --text-primary: #f7e6d4;
  --text-secondary: #d6aa91;
  --text-muted: #9b6f68;
  --text-inverse: #0b0d10;
  --accent-primary: #e54b32;
  --accent-primary-hover: #ff6a45;
  --accent-primary-soft: rgba(229, 75, 50, 0.16);
  --accent-blue: #4f8fb8;
  --accent-teal: #2f9d9b;
  --accent-green: #8ba85f;
  --accent-purple: #9a5cff;
  --accent-red: #ff3b2f;
  --warning: #ff9f74;
  --focus-ring: rgba(229, 75, 50, 0.48);
  --input-bg: #120b0d;
  --input-border: rgba(229, 75, 50, 0.26);
  --card-bg: rgba(23, 10, 12, 0.88);
  --card-border: rgba(229, 75, 50, 0.22);
  --icon-tile-bg: rgba(20, 5, 8, 0.7);
  --icon-tile-border: rgba(229, 75, 50, 0.28);
  --unmoored-glow: 0 0 30px rgba(229, 35, 24, 0.16);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.56);
  --bg: var(--page-bg);
  --bg-strong: var(--page-bg-soft);
  --surface: var(--surface-1);
  --surface-alt: var(--surface-2);
  --surface-strong: var(--surface-3);
  --surface-card: color-mix(in srgb, var(--surface) 96%, var(--surface-strong) 4%);
  --panel: var(--surface-card);
  --surface-soft: rgba(255, 224, 214, 0.08);
  --ink: var(--text-primary);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --accent: var(--accent-primary);
  --accent-dark: var(--accent-primary-hover);
  --button-primary: var(--accent-primary);
  --secondary-button-bg: #4a2323;
  --secondary-button-ink: #ffe9df;
  --eyebrow-color: #e2b3a8;
  --sidebar-tab-active-bg: #fff0ea;
  --sidebar-tab-active-ink: #2a0808;
  --success: #76b58a;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.42);
  --card-glass: linear-gradient(180deg, rgba(28, 15, 15, 0.97), rgba(18, 10, 10, 0.99));
  --hero-glass: linear-gradient(135deg, rgba(32, 15, 15, 0.9), rgba(18, 8, 8, 0.98));
  --surface-strong: var(--surface-3);
  --sidebar-top: #090505;
  --sidebar-bottom: #140808;
  --sidebar-ink: #fff0ea;
  --sidebar-muted: #e2b3a8;
  --table-head: #351919;
  --dashboard-page-bg:
    radial-gradient(circle at 15% 8%, rgba(197, 62, 62, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(7, 7, 8, 0.98), rgba(22, 9, 9, 0.98));
  --dashboard-panel-bg: linear-gradient(145deg, rgba(32, 15, 15, 0.94), rgba(18, 8, 8, 0.96));
  --dashboard-card-bg: linear-gradient(145deg, rgba(32, 15, 15, 0.94), rgba(18, 8, 8, 0.98));
  --dashboard-card-border: rgba(255, 92, 92, 0.22);
  --dashboard-card-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
  --dashboard-card-hover-shadow: 0 24px 44px rgba(0, 0, 0, 0.34);
  --dashboard-ink: #fff0ea;
  --dashboard-muted: #e2b3a8;
  --dashboard-subtle: #f0c8bd;
  --dashboard-divider: rgba(255, 180, 160, 0.14);
  --dashboard-control-bg: rgba(16, 10, 10, 0.88);
  --dashboard-stat-bg: rgba(20, 9, 9, 0.74);
  --dashboard-icon-bg-base: rgba(20, 8, 8, 0.9);
  --dashboard-logo-filter: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(166, 90, 42, 0.15), transparent 30%),
    linear-gradient(180deg, var(--page-bg-soft) 0%, var(--page-bg) 100%);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top right, rgba(203, 123, 67, 0.15), transparent 30%),
    linear-gradient(180deg, var(--page-bg-soft) 0%, var(--page-bg) 100%);
}

html[data-theme="unmoored"] body {
  background:
    radial-gradient(circle at top right, rgba(197, 62, 62, 0.16), transparent 28%),
    radial-gradient(circle at left center, rgba(255, 90, 70, 0.08), transparent 24%),
    linear-gradient(180deg, #080609 0%, var(--page-bg) 100%);
}

body.app-page,
html.route-app body {
  background: var(--page-bg);
}

html.route-dashboard .app-shell {
  display: none;
}

html.route-app .dashboard-shell {
  display: none;
}

html.route-app .app-shell {
  display: grid;
}

html.route-dashboard .dashboard-shell {
  display: grid;
}

html.user-gate-active .dashboard-shell,
html.user-gate-active .app-shell {
  display: none;
}

html.user-gate-active .user-gate-shell {
  display: grid;
}

.user-gate-shell {
  display: none;
  min-height: 100vh;
  padding: 20px;
  place-items: center;
}

.user-gate-card {
  width: min(1080px, 100%);
  display: grid;
  gap: 18px;
  padding: 28px;
  border-radius: 30px;
  border: 1px solid rgba(216, 198, 173, 0.85);
  background: var(--card-glass);
  box-shadow: var(--shadow);
}

.user-gate-card h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.user-gate-toolbar {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(280px, 420px);
}

.user-gate-password-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(216, 198, 173, 0.9);
  background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface-alt) 100%);
}

.user-gate-password-row {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 420px) auto;
  align-items: end;
}

.user-gate-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.user-gate-user-button {
  display: grid;
  gap: 8px;
  padding: 18px;
  text-align: left;
  border-radius: 22px;
  border: 1px solid rgba(216, 198, 173, 0.95);
  background: var(--card-glass);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.user-gate-user-button:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-1px);
}

.user-gate-user-button strong {
  font-size: 1.05rem;
}

.user-gate-user-button span {
  color: var(--muted);
  font-size: 0.92rem;
}

.user-gate-empty-state {
  margin-top: 0;
}

.dashboard-shell {
  min-height: 100vh;
  padding: 20px;
  gap: 16px;
  display: grid;
  align-content: start;
  background: var(--dashboard-page-bg);
  overflow-x: hidden;
}

.dashboard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.dashboard-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.dashboard-brand .drexel-brand-mount {
  width: min(320px, 48vw);
}

.dashboard-brand .drexel-app-brand__subtitle {
  font-size: 0.85rem;
}

.dashboard-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
  min-width: 0;
}

.dashboard-admin-test-mode-button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 0.9rem;
  border: 1px solid var(--dashboard-card-border);
  border-radius: 999px;
  color: var(--dashboard-ink);
  background: var(--dashboard-control-bg);
  font-weight: 700;
  white-space: nowrap;
}

.dashboard-admin-test-mode-button__indicator {
  width: 0.65rem;
  height: 0.65rem;
  flex: 0 0 0.65rem;
  border-radius: 999px;
  background: var(--text-muted, var(--muted));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-muted, var(--muted)) 18%, transparent);
}

.dashboard-admin-test-mode-button:hover {
  background: color-mix(in srgb, var(--dashboard-control-bg) 82%, var(--surface-3));
  border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--dashboard-card-border));
}

.dashboard-admin-test-mode-button.is-active {
  color: #fff8ed;
  background: color-mix(in srgb, var(--accent, #a65a2a) 82%, #1f120b);
  border-color: color-mix(in srgb, var(--accent, #a65a2a) 78%, #ffffff);
}

.dashboard-admin-test-mode-button.is-active .dashboard-admin-test-mode-button__indicator {
  background: #7ef29a;
  box-shadow: 0 0 0 3px rgba(126, 242, 154, 0.18);
}

.dashboard-admin-test-mode-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.dashboard-user-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1rem;
  border-left: 1px solid var(--dashboard-divider);
  min-width: 220px;
}

.dashboard-user-menu {
  position: relative;
  min-width: 0;
}

.dashboard-user-menu > summary {
  list-style: none;
  cursor: pointer;
  border-radius: 12px;
  outline: none;
}

.dashboard-user-menu > summary::-webkit-details-marker {
  display: none;
}

.dashboard-user-menu > summary:hover,
.dashboard-user-menu > summary:focus-visible,
.dashboard-user-menu[open] > summary {
  background: color-mix(in srgb, var(--dashboard-control-bg) 82%, transparent);
}

.dashboard-user-menu > summary:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 34%, transparent);
}

.dashboard-user-summary__copy {
  min-width: 0;
}

.dashboard-user-menu__chevron {
  color: var(--dashboard-muted);
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-2px);
  transition: transform 160ms ease;
}

.dashboard-user-menu[open] .dashboard-user-menu__chevron {
  transform: rotate(180deg) translateY(2px);
}

.dashboard-user-menu__popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: max(180px, 100%);
  padding: 8px;
  border: 1px solid var(--dashboard-card-border);
  border-radius: 12px;
  background: var(--dashboard-panel-bg);
  box-shadow: var(--shadow);
}

.dashboard-user-menu__action {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--dashboard-ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.dashboard-user-menu__action:hover,
.dashboard-user-menu__action:focus-visible {
  border-color: color-mix(in srgb, var(--accent-red, #c9544d) 38%, var(--dashboard-card-border));
  background: color-mix(in srgb, var(--accent-red, #c9544d) 12%, transparent);
  color: var(--accent-red, #c9544d);
  outline: none;
}

.dashboard-user-menu__action:disabled {
  opacity: 0.65;
  cursor: wait;
}

.dashboard-user-summary strong {
  display: block;
  color: var(--dashboard-ink);
  font-size: 1rem;
}

.dashboard-user-summary .job-meta {
  margin: 0.15rem 0 0;
  color: var(--dashboard-muted);
}

.dashboard-user-avatar {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff7ec;
  background: linear-gradient(135deg, #e29a45, #a96728);
  font-weight: 800;
}

.dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.45fr);
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--dashboard-panel-bg);
  border: 1px solid var(--dashboard-card-border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.dashboard-hero > * {
  position: relative;
  z-index: 1;
}

.dashboard-hero__copy {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.dashboard-hero__copy .intro {
  max-width: 60ch;
  color: var(--dashboard-subtle);
}

.dashboard-hero__copy .eyebrow {
  color: #f5a33f;
}

.dashboard-hero__controls {
  display: grid;
  gap: 12px;
  min-width: 0;
  grid-column: 1 / -1;
}

.dashboard-hero__utility-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-hero__icon-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-hero__icon-button {
  width: 3rem;
  min-width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--dashboard-card-border);
  border-radius: 999px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--dashboard-ink);
  background: var(--dashboard-control-bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

.dashboard-hero__icon-button:hover {
  background: color-mix(in srgb, var(--dashboard-control-bg) 82%, var(--surface-3));
  border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--dashboard-card-border));
}

.dashboard-hero__icon-button.has-active-notifications {
  color: #fff3e8;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: color-mix(in srgb, var(--accent) 68%, currentColor);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

.dashboard-hero__icon-indicator {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ff5b5b;
  border: 2px solid var(--surface-card);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
}

/* Shared application header tools: notifications, suggestions, and bug reports. */
[data-drexel-header-action] {
  position: relative;
}

.drexel-header-notification-indicator {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ff5b5b;
  border: 2px solid var(--surface-card);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

.drexel-app-tools-overlay {
  position: fixed;
  inset: 0;
  z-index: 5100;
}

.drexel-app-tools-overlay__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(7, 10, 16, 0.58);
  backdrop-filter: blur(10px);
  cursor: default;
}

.drexel-app-tools-overlay__viewport {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
}

.drexel-app-tools-panel {
  width: min(760px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  overflow: auto;
  display: grid;
  gap: 16px;
  pointer-events: auto;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
}

.drexel-app-tools-panel--notifications {
  width: min(900px, calc(100vw - 32px));
}

.drexel-app-tools-form,
.drexel-app-tools-notifications-list {
  display: grid;
  gap: 14px;
}

.drexel-app-tools-form textarea {
  resize: vertical;
  min-height: 120px;
}

.drexel-app-tools-form__footer,
.drexel-app-tools-error-card,
.drexel-app-tools-notifications-toolbar,
.drexel-app-tools-notification__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.drexel-app-tools-form__footer > p {
  margin: 0;
}

.drexel-app-tools-error-card {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #ef4444 45%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, #ef4444 10%, var(--surface-card));
}

.drexel-app-tools-error-card p,
.drexel-app-tools-notification p,
.drexel-app-tools-notification h4 {
  margin: 0;
}

.drexel-app-tools-notifications-toolbar {
  justify-content: flex-end;
}

.drexel-app-tools-notification {
  display: grid;
  gap: 10px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-alt);
}

.drexel-app-tools-notification.is-unread {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: inset 4px 0 0 var(--accent);
}

.drexel-app-tools-notification.is-read {
  opacity: 0.82;
}

.drexel-app-tools-notification__heading {
  align-items: flex-start;
}

.drexel-app-tools-notification__heading > div {
  display: grid;
  gap: 6px;
}

.quote-approval-changes {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-card);
}

.quote-approval-changes > strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.quote-approval-changes ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.quote-approval-changes li {
  color: var(--text);
  line-height: 1.45;
}

.quote-approval-changes li::marker {
  color: var(--accent);
}

body.drexel-app-tools-open {
  overflow: hidden;
}

@media (max-width: 680px) {
  .drexel-app-tools-overlay__viewport {
    align-items: end;
    padding: 12px;
  }

  .drexel-app-tools-panel,
  .drexel-app-tools-panel--notifications {
    width: 100%;
    max-height: 92vh;
  }

  .drexel-app-tools-form__footer,
  .drexel-app-tools-error-card,
  .drexel-app-tools-notification__heading {
    align-items: stretch;
    flex-direction: column;
  }
}

:root {
  --admin-dashboard-surface: var(--surface-card);
}

html[data-theme="dark"] {
  --admin-dashboard-surface: #12171d;
}

html[data-theme="unmoored"] {
  --admin-dashboard-surface: var(--surface-1);
}

.dashboard-current-user-card {
  min-width: 280px;
  display: none;
}

.dashboard-current-user-card .status-pill {
  width: fit-content;
  max-width: 100%;
}

.dashboard-act-as-controls {
  display: grid;
  gap: 8px;
}

.dashboard-act-as-controls select {
  width: 100%;
}

.dashboard-theme-toggle {
  justify-self: end;
}

.dashboard-hero h1 {
  margin: 0;
  color: var(--dashboard-ink);
  font-size: clamp(2.3rem, 4vw, 3.5rem);
  line-height: 1;
}

.dashboard-stat-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 1rem;
  padding: 1.45rem;
  border: 1px solid var(--dashboard-card-border);
  border-radius: 16px;
  background: var(--dashboard-stat-bg);
}

.dashboard-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.dashboard-stat + .dashboard-stat {
  padding-left: 1.2rem;
  border-left: 1px solid var(--dashboard-divider);
}

.dashboard-stat__icon {
  width: 3.8rem;
  height: 3.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  color: #41bfe5;
  border: 1px solid rgba(65, 191, 229, 0.35);
  background: rgba(41, 145, 178, 0.12);
  font-size: 1.3rem;
}

.dashboard-stat__icon--warm {
  color: #f39b42;
  border-color: rgba(243, 155, 66, 0.34);
  background: rgba(243, 155, 66, 0.12);
}

.dashboard-stat strong {
  display: block;
  color: var(--dashboard-ink);
  font-size: 1.18rem;
}

.dashboard-stat p {
  margin: 0.35rem 0 0;
  color: var(--dashboard-muted);
}

.dashboard-apps-section {
  display: grid;
  gap: 1.1rem;
  padding: 1.4rem 1rem 0;
}

.dashboard-apps-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 1rem;
  align-items: end;
}

.dashboard-apps-header h2 {
  margin: 0 0 0.45rem;
  color: var(--dashboard-ink);
}

.dashboard-apps-header .intro {
  margin: 0;
  color: var(--dashboard-muted);
}

.dashboard-hero.is-unmoored {
  border-color: var(--border-strong);
  background:
    radial-gradient(circle at 12% 18%, rgba(155, 20, 24, 0.16), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(110, 12, 26, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(14, 5, 7, 0.98) 0%, rgba(31, 7, 10, 0.97) 52%, rgba(7, 8, 10, 0.99) 100%);
  box-shadow:
    var(--shadow-md),
    var(--unmoored-glow),
    inset 0 0 0 1px rgba(229, 75, 50, 0.14);
}

.dashboard-hero.is-unmoored .eyebrow,
.dashboard-hero.is-unmoored .intro,
.dashboard-hero.is-unmoored h1,
.dashboard-hero.is-unmoored .dashboard-search span,
.dashboard-hero.is-unmoored .user-select span {
  color: #ffe9df;
}

.dashboard-hero.is-unmoored .dashboard-theme-toggle,
.dashboard-hero.is-unmoored .dashboard-search input,
.dashboard-hero.is-unmoored .user-select select {
  border-color: rgba(255, 92, 92, 0.45);
  background: rgba(16, 10, 10, 0.88);
  color: #fff2ea;
}

.dashboard-unmoored-tornado {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(13, 3, 5, 0.9), rgba(16, 4, 7, 0.58), rgba(8, 6, 8, 0.88)),
    url("/assets/unmoored.webp") center / cover no-repeat;
  border-radius: inherit;
  opacity: 0.5;
  z-index: 0;
}

.dashboard-search {
  min-width: 0;
  max-width: 480px;
}

.dashboard-search span {
  font-size: 0.9rem;
  font-weight: 700;
}

.dashboard-search input {
  margin-top: 6px;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.05rem;
}

.dashboard-password-panel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.dashboard-password-header {
  align-items: center;
}

.dashboard-bug-report-header,
.dashboard-admin-notifications-header {
  align-items: start;
}

.dashboard-hero__icon-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-password-grid {
  grid-template-columns: minmax(220px, 1.1fr) minmax(180px, 0.8fr) minmax(240px, 1.1fr) auto;
  align-items: end;
}

.dashboard-bug-report-grid,
.dashboard-support-grid {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr);
}

.dashboard-password-actions {
  display: flex;
  align-items: end;
  height: 100%;
}

.dashboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 4900;
}

.dashboard-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 16, 0.54);
  backdrop-filter: blur(12px);
}

.dashboard-overlay__viewport {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.dashboard-overlay-card,
.dashboard-bug-report-panel,
.dashboard-suggestion-panel,
.dashboard-admin-notifications-panel {
  width: min(960px, calc(100vw - 32px));
  max-height: min(86vh, 920px);
  overflow: auto;
  display: grid;
  gap: 14px;
}

.dashboard-notifications-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-notifications-tabs .ghost-button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.dashboard-notifications-section {
  display: grid;
  gap: 16px;
}

.dashboard-notifications-section__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.dashboard-bug-report-latest-error {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface-alt) 100%);
}

.dashboard-bug-report-error-text {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.dashboard-admin-panel {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}

html[data-theme="dark"] .dashboard-admin-panel,
html[data-theme="dark"] .dashboard-admin-stage,
html[data-theme="dark"] .dashboard-admin-view,
html[data-theme="unmoored"] .dashboard-admin-panel,
html[data-theme="unmoored"] .dashboard-admin-stage,
html[data-theme="unmoored"] .dashboard-admin-view {
  background: var(--admin-dashboard-surface);
}

html[data-theme="dark"] .dashboard-shell,
html[data-theme="dark"] #dashboard-view,
html[data-theme="dark"] .app-grid,
html[data-theme="unmoored"] .dashboard-shell,
html[data-theme="unmoored"] #dashboard-view,
html[data-theme="unmoored"] .app-grid {
  background: var(--admin-dashboard-surface);
}

.dashboard-admin-heading {
  margin-bottom: 0;
}

.dashboard-admin-notifications-subtitle {
  margin: 0 0 10px;
  font-size: 1rem;
}

.dashboard-admin-notifications-list {
  display: grid;
  gap: 12px;
}

body.dashboard-overlay-open {
  overflow: hidden;
}

.dashboard-settings-list {
  display: grid;
  gap: var(--space-3);
}

.dashboard-default-views-settings {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--card-border);
}

.dashboard-default-views-settings h3,
.dashboard-default-views-settings p {
  margin: 0;
}

.dashboard-default-view-settings-list {
  display: grid;
  gap: var(--space-2);
}

.dashboard-default-view-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.55fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.dashboard-default-view-setting > span {
  display: grid;
  gap: var(--space-1);
}

.dashboard-default-view-setting small,
.dashboard-app-view-choice small,
.dashboard-app-view-default-choice small {
  color: var(--text-secondary);
  line-height: 1.4;
}

.dashboard-app-view-chooser-panel {
  width: min(720px, calc(100vw - 32px));
}

.dashboard-app-view-chooser-list {
  display: grid;
  gap: var(--space-3);
}

.dashboard-app-view-choice {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.dashboard-app-view-choice:hover,
.dashboard-app-view-choice:focus-visible,
.dashboard-app-view-choice.is-default {
  border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--card-border));
  background: color-mix(in srgb, var(--accent-primary) 7%, var(--surface-2));
}

.dashboard-app-view-choice > span:first-child {
  display: grid;
  gap: var(--space-1);
}

.dashboard-app-view-choice > span:last-child:not(.status-badge) {
  color: var(--accent-primary);
  font-weight: 800;
}

.dashboard-app-view-choice .status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-primary) 14%, var(--surface-2));
  color: var(--accent-primary);
  font-size: 0.78rem;
  font-weight: 800;
}

.dashboard-app-view-default-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  cursor: pointer;
}

.dashboard-app-view-default-choice input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--accent-primary);
}

.dashboard-app-view-default-choice span {
  display: grid;
  gap: var(--space-1);
}

@media (max-width: 640px) {
  .dashboard-default-view-setting {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

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

.dashboard-setting-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  cursor: pointer;
}

.dashboard-setting-card__icon,
.backup-opt-in-modal__illustration-icon {
  display: block;
  background: linear-gradient(145deg, var(--accent-blue), var(--accent-primary));
  -webkit-mask: url("/assets/icons/save_backup.svg") center / contain no-repeat;
  mask: url("/assets/icons/save_backup.svg") center / contain no-repeat;
}

.dashboard-setting-card__icon {
  width: 48px;
  height: 48px;
}

.dashboard-setting-card__copy {
  display: grid;
  gap: var(--space-1);
  color: var(--text-secondary);
}

.dashboard-setting-card__copy strong {
  color: var(--text-primary);
}

.dashboard-setting-card__control {
  position: relative;
  width: 48px;
  height: 28px;
}

.dashboard-setting-card__control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dashboard-setting-card__control span {
  position: absolute;
  inset: 0;
  border: 1px solid var(--input-border);
  border-radius: 999px;
  background: var(--surface-3);
  transition: background 160ms ease, border-color 160ms ease;
}

.dashboard-setting-card__control span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 160ms ease, background 160ms ease;
}

.dashboard-setting-card__control input:checked + span {
  border-color: var(--accent-primary);
  background: var(--accent-primary-soft);
}

.dashboard-setting-card__control input:checked + span::after {
  transform: translateX(20px);
  background: var(--accent-primary);
}

.dashboard-setting-card:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.backup-opt-in-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  padding: var(--space-5);
}

.backup-opt-in-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 16, 0.7);
  backdrop-filter: blur(12px);
}

.backup-opt-in-modal {
  position: relative;
  z-index: 1;
  width: min(900px, calc(100vw - 32px));
  max-height: min(92vh, 900px);
  overflow: auto;
  display: grid;
  gap: var(--space-5);
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  color: var(--text-primary);
  background:
    radial-gradient(circle at 72% 38%, var(--accent-primary-soft), transparent 38%),
    var(--surface-1);
  box-shadow: var(--shadow-lg);
}

html[data-theme="unmoored"] .backup-opt-in-modal {
  box-shadow: var(--unmoored-glow), var(--shadow-lg);
}

.backup-opt-in-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: var(--text-secondary);
  background: transparent;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.backup-opt-in-modal__close:hover {
  color: var(--text-primary);
  background: var(--accent-primary-soft);
}

.backup-opt-in-modal__success {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-right: 48px;
}

.backup-opt-in-modal__success-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 1px solid color-mix(in srgb, var(--success) 72%, var(--border-strong));
  border-radius: 50%;
  color: var(--text-inverse);
  background: var(--success);
  font-size: 2.25rem;
  font-weight: 800;
}

.backup-opt-in-modal__success h2,
.backup-opt-in-modal__success p,
.backup-opt-in-modal__copy h3,
.backup-opt-in-modal__copy p,
.backup-opt-in-modal__settings-note {
  margin: 0;
}

.backup-opt-in-modal__success h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.backup-opt-in-modal__success p,
.backup-opt-in-modal__copy p,
.backup-opt-in-modal__settings-note {
  color: var(--text-secondary);
}

.backup-opt-in-modal__divider {
  height: 1px;
  background: var(--border-subtle);
}

.backup-opt-in-modal__main {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.5fr);
  gap: clamp(22px, 4vw, 44px);
  align-items: center;
}

.backup-opt-in-modal__illustration {
  display: grid;
  place-items: center;
  min-height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-primary-soft), transparent 68%);
}

.backup-opt-in-modal__illustration-icon {
  width: min(210px, 100%);
  aspect-ratio: 308 / 286;
}

.backup-opt-in-modal__copy {
  display: grid;
  gap: var(--space-4);
  font-size: 1.04rem;
  line-height: 1.55;
}

.backup-opt-in-modal__copy h3 {
  color: var(--accent-primary-hover);
  font-size: 1.45rem;
}

.backup-opt-in-modal__copy strong {
  color: var(--accent-primary-hover);
}

.backup-opt-in-modal__secondary {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.backup-opt-in-modal__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
  cursor: pointer;
}

.backup-opt-in-modal__option input {
  width: 24px;
  height: 24px;
  accent-color: var(--accent-primary);
}

.backup-opt-in-modal__option-copy {
  display: grid;
  gap: var(--space-1);
}

.backup-opt-in-modal__option-copy strong {
  font-size: 1.08rem;
}

.backup-opt-in-modal__option-copy span {
  color: var(--text-secondary);
}

.backup-opt-in-modal__recommended {
  padding: 7px 12px;
  border: 1px solid var(--accent-primary);
  border-radius: 999px;
  color: var(--accent-primary-hover);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.backup-opt-in-modal__settings-note {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.backup-opt-in-modal__settings-note > span {
  font-size: 1.55rem;
}

.backup-opt-in-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

body.backup-opt-in-open {
  overflow: hidden;
}

.local-backup-preference-toast {
  position: fixed;
  z-index: 6100;
  right: var(--space-5);
  bottom: var(--space-5);
  max-width: min(430px, calc(100vw - 32px));
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.local-backup-preference-toast[data-tone="warning"] {
  border-color: var(--warning);
}

.local-backup-preference-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .backup-opt-in-overlay {
    padding: var(--space-2);
  }

  .backup-opt-in-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .backup-opt-in-modal__success {
    align-items: flex-start;
    gap: var(--space-3);
  }

  .backup-opt-in-modal__success-icon {
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
  }

  .backup-opt-in-modal__main {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .backup-opt-in-modal__illustration {
    min-height: 120px;
  }

  .backup-opt-in-modal__illustration-icon {
    width: 120px;
  }

  .backup-opt-in-modal__option,
  .dashboard-setting-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .backup-opt-in-modal__recommended,
  .dashboard-setting-card__control {
    grid-column: 2;
    justify-self: start;
  }

  .backup-opt-in-modal__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .backup-opt-in-modal__actions button {
    width: 100%;
  }
}

.dashboard-admin-notification-item {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface-alt) 100%);
}

.dashboard-admin-notification-item__header,
.dashboard-admin-notification-item__footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  flex-wrap: wrap;
}

.dashboard-admin-notification-item__title {
  display: grid;
  gap: 4px;
}

.dashboard-admin-notification-item__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-admin-notification-item__title h4 {
  margin: 0;
  font-size: 1rem;
}

.dashboard-admin-notification-item__body {
  display: grid;
  gap: 8px;
}

.dashboard-admin-notification-item__body p {
  margin: 0;
  white-space: pre-wrap;
}

.dashboard-admin-notification-item__technical {
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-size: 0.86rem;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, black 18%);
  white-space: pre-wrap;
  word-break: break-word;
}

.dashboard-user-notification-item.is-unread {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.dashboard-user-notification-item.is-read {
  opacity: 0.82;
}

.admin-reminder-banner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-card) 88%, var(--surface)), color-mix(in srgb, var(--surface-alt) 84%, var(--surface-card)));
  box-shadow: var(--shadow);
}

.admin-reminder-banner.is-hidden {
  display: none;
}

.admin-reminder-banner__body {
  display: grid;
  gap: 6px;
}

.admin-reminder-banner__body strong {
  font-size: 1rem;
  color: var(--accent-dark);
}

.admin-reminder-banner__body p {
  margin: 0;
  color: var(--ink);
}

.admin-reminder-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

html[data-theme="dark"] .admin-reminder-banner,
html[data-theme="unmoored"] .admin-reminder-banner {
  border-color: color-mix(in srgb, #e09a62 38%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, #2b2420 88%, var(--surface)), color-mix(in srgb, #382c23 82%, var(--surface-alt)));
}

html[data-theme="dark"] .admin-reminder-banner__body strong,
html[data-theme="unmoored"] .admin-reminder-banner__body strong {
  color: #ffd1a9;
}

.dashboard-admin-launcher {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.dashboard-admin-stage {
  display: grid;
  gap: 16px;
  padding: 0;
  border-radius: 24px;
}

.dashboard-admin-stage.is-collapsed {
  gap: 12px;
}

.admin-workspace-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.admin-workspace-tabs,
.admin-workspace-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-subtab-panel.is-hidden {
  display: none;
}

.admin-workspace-header__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-dirty-prompt {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1500;
}

.admin-dirty-prompt__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 16, 0.48);
  backdrop-filter: blur(4px);
}

.admin-dirty-prompt__panel {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  z-index: 1;
}

.dashboard-admin-view .card,
.dashboard-admin-panel > .card {
  background: var(--admin-dashboard-surface);
}

.dashboard-admin-stage.is-hidden {
  display: none;
}

.dashboard-admin-stage.is-collapsed .dashboard-admin-stage-header,
.dashboard-admin-stage.is-collapsed .dashboard-admin-view {
  display: none;
}

.dashboard-admin-stage.is-collapsed .admin-workspace-subtabs {
  display: none;
}

.dashboard-admin-stage-header {
  margin-bottom: 0;
  background: var(--admin-dashboard-surface);
}

.admin-view-button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid rgba(216, 198, 173, 0.9);
  border-radius: 24px;
  background: var(--surface-card);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.admin-view-button:focus {
  outline: none;
}

.admin-view-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent),
    var(--shadow);
}

.admin-view-button.active {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 22px 42px rgba(58, 41, 24, 0.16);
}

.admin-view-button:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.admin-view-button__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent-dark);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.admin-view-button__body {
  display: grid;
  gap: 6px;
}

.admin-view-button__body strong {
  font-size: 1.05rem;
}

.admin-view-button__body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.admin-view-button__launch {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-dark);
}

.dashboard-admin-view {
  display: grid;
  gap: 16px;
}

.dashboard-admin-view.is-hidden {
  display: none;
}

.dashboard-admin-view .card.admin-card-minimized > :not(.section-heading) {
  display: none;
}

.dashboard-admin-view .card.admin-card-minimized .section-heading {
  margin-bottom: 0;
}

.section-heading-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.po-admin-list {
  display: grid;
  gap: 16px;
}

.po-admin-workspace-card .po-admin-list {
  padding: 20px 24px 24px;
}

.po-admin-workspace-card {
  padding: 0;
  overflow: hidden;
}

.po-admin-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}

.po-admin-section-header h3,
.po-admin-section-header p {
  margin: 0;
}

.po-admin-section-header h3 {
  margin-top: 3px;
}

.po-admin-section-header .job-meta {
  max-width: 720px;
  margin-top: 6px;
}

.po-admin-section-header__eyebrow,
.po-admin-card__eyebrow {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.po-admin-section-header__actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
}

.po-admin-vendor-filter {
  min-width: min(280px, 40vw);
}

.po-admin-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--admin-dashboard-surface);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
}

.po-admin-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-alt) 72%, transparent);
}

.po-admin-card__identity {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.po-admin-card__identity h4,
.po-admin-card__identity p {
  margin: 0;
}

.po-admin-card__identity h4 {
  overflow-wrap: anywhere;
  font-size: 1.05rem;
}

.po-admin-card__identity p {
  color: var(--muted);
  font-size: 0.88rem;
}

.po-admin-record-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.po-admin-record-badge--active {
  border-color: color-mix(in srgb, var(--accent-green) 48%, var(--line));
  background: color-mix(in srgb, var(--accent-green) 12%, transparent);
  color: var(--accent-green);
}

.po-admin-record-badge--inactive {
  color: var(--muted);
}

.po-admin-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 20px;
}

.po-admin-grid--product {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.po-admin-grid__full {
  grid-column: 1 / -1;
}

.po-admin-field {
  min-width: 0;
  display: grid;
  align-content: end;
  gap: 7px;
}

.po-admin-field > span:first-child {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.po-admin-field--wide {
  grid-column: span 2;
}

.po-currency-input {
  position: relative;
}

.po-currency-input__symbol {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.po-currency-input input {
  padding-left: 28px;
}

.po-admin-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-alt) 45%, transparent);
}

.po-admin-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
}

.po-admin-record-save-state {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.po-admin-record-save-state__dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
}

.po-admin-record-save-state--dirty {
  color: var(--warning);
}

.po-admin-record-save-state--saving {
  color: var(--accent-blue);
}

.po-admin-record-save-state--saving .po-admin-record-save-state__dot {
  animation: po-admin-saving-pulse 900ms ease-in-out infinite alternate;
}

.po-admin-record-save-state--saved {
  color: var(--accent-green);
}

.po-admin-record-save-state--error {
  color: var(--accent-red);
}

@keyframes po-admin-saving-pulse {
  from { opacity: 0.35; transform: scale(0.78); }
  to { opacity: 1; transform: scale(1); }
}

.po-admin-delete-button {
  color: var(--muted);
}

.po-admin-add-row,
.po-admin-tabs {
  margin-bottom: 14px;
}

.po-admin-status-card {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--admin-dashboard-surface);
}

.po-admin-status-card__details {
  display: grid;
  gap: 8px;
}

.po-admin-feedback {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--admin-dashboard-surface);
  color: var(--text);
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.po-admin-feedback--subtle {
  border-color: var(--line);
  color: var(--muted);
}

.po-admin-feedback--success {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 11%, var(--admin-dashboard-surface));
  color: var(--text);
}

.po-admin-feedback--saving {
  border-color: color-mix(in srgb, var(--accent-blue) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-blue) 9%, var(--admin-dashboard-surface));
}

.po-admin-feedback--error {
  border-color: color-mix(in srgb, var(--accent-red) 48%, var(--line));
  background: color-mix(in srgb, var(--accent-red) 10%, var(--admin-dashboard-surface));
  color: var(--accent-red);
}

.po-admin-status-card__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.po-admin-status-card__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.po-admin-status-card__actions {
  justify-content: flex-start;
}

.admin-health-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.admin-health-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--admin-dashboard-surface);
}

.admin-health-card--ok {
  border-color: color-mix(in srgb, #2f9e44 42%, var(--line));
}

.admin-health-card--error {
  border-color: color-mix(in srgb, #c92a2a 48%, var(--line));
}

.admin-health-details {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.admin-health-detail {
  display: grid;
  grid-template-columns: minmax(130px, 0.35fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.88rem;
}

.admin-health-detail span {
  color: var(--muted);
}

.admin-health-detail strong {
  overflow-wrap: anywhere;
  font-weight: 650;
}

.po-admin-vendor-filter {
  display: grid;
  gap: 6px;
  min-width: min(360px, 100%);
  flex: 1 1 260px;
}

.po-admin-vendor-filter span {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.app-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1rem;
  align-items: center;
  min-height: 9.5rem;
  padding: 1.3rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  box-shadow: var(--dashboard-card-shadow);
  text-decoration: none;
  color: var(--dashboard-ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.app-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--app-accent) 55%, var(--line));
  box-shadow: var(--dashboard-card-hover-shadow);
}

.app-card:focus-visible {
  border-color: var(--accent-primary);
  box-shadow: var(--dashboard-card-hover-shadow), 0 0 0 3px var(--focus-ring);
}

html[data-theme="unmoored"] .app-card:hover,
html[data-theme="unmoored"] .app-card:focus-visible {
  border-color: color-mix(in srgb, var(--app-accent) 70%, var(--accent-primary));
  box-shadow: var(--unmoored-glow), var(--shadow-md);
}

.app-card__icon,
.app-icon-tile {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--app-accent) 10%, var(--icon-tile-bg));
  border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--icon-tile-border));
  color: var(--app-accent);
  font-weight: 800;
  letter-spacing: 0.05em;
}

.app-card__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.app-icon-tile svg,
.app-card__icon svg {
  width: 62%;
  height: 62%;
}

html[data-theme="dark"] .app-card__icon,
html[data-theme="unmoored"] .app-card__icon {
  background: color-mix(in srgb, var(--app-accent) 10%, var(--icon-tile-bg));
}

html[data-theme="unmoored"] .app-icon-tile,
html[data-theme="unmoored"] .app-card__icon {
  color: color-mix(in srgb, var(--app-accent), var(--accent-primary) 30%);
}

.app-card__body {
  display: grid;
  gap: 0.55rem;
  align-self: center;
}

.app-card__body strong {
  color: var(--dashboard-ink);
  font-size: 1.08rem;
}

.app-card__body p {
  margin: 0;
  color: var(--dashboard-muted);
  line-height: 1.45;
}

.app-card__launch {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--dashboard-divider);
  text-align: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--app-accent) 78%, var(--dashboard-ink));
}

.dashboard-empty-state {
  text-align: center;
  margin-top: 8px;
}

.user-select {
  display: grid;
  gap: 6px;
}

.user-select span {
  font-size: 0.9rem;
  font-weight: 700;
}

.sidebar-user-select {
  margin-top: 16px;
  max-width: 100%;
}

.sidebar-user-select select,
.dashboard-hero__controls select,
.drexel-user-select select {
  width: 100%;
}

.toggle-field {
  display: grid;
  gap: 10px;
  align-content: start;
}

.user-list {
  display: grid;
  gap: 12px;
}

.drexel-admin-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.drexel-item-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.drexel-draft-jobs-notice {
  margin-top: 14px;
  padding: 14px 16px;
}

.drexel-draft-jobs-notice p {
  margin: 4px 0 0;
}

.drexel-draft-jobs-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  gap: 14px;
  align-items: end;
  margin-top: 16px;
}

.drexel-draft-jobs-search {
  margin: 0;
}

.drexel-draft-jobs-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  white-space: nowrap;
}

.drexel-draft-jobs-select-all input,
.drexel-draft-job-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.drexel-draft-jobs-list,
.drexel-draft-jobs-results {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.drexel-draft-job-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1.3fr) minmax(150px, .8fr) minmax(135px, .65fr) minmax(110px, .55fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  cursor: pointer;
}

.drexel-draft-job-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.drexel-draft-job-card:focus-within {
  outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
  outline-offset: 2px;
}

.drexel-draft-job-card__identity,
.drexel-draft-job-card__meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.drexel-draft-job-card__identity strong,
.drexel-draft-job-card__meta span {
  overflow-wrap: anywhere;
}

.drexel-draft-job-card__label {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.drexel-draft-job-card__value {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.drexel-draft-job-result {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.drexel-draft-job-result--success {
  border-color: color-mix(in srgb, var(--success) 52%, var(--line));
}

.drexel-draft-job-result--error {
  border-color: color-mix(in srgb, var(--accent-red) 52%, var(--line));
}

.drexel-draft-jobs-empty {
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 900px) {
  .drexel-draft-jobs-toolbar {
    grid-template-columns: 1fr auto;
  }

  .drexel-draft-jobs-search {
    grid-column: 1 / -1;
  }

  .drexel-draft-job-card {
    grid-template-columns: auto minmax(0, 1fr) minmax(130px, .65fr);
  }
}

@media (max-width: 600px) {
  .drexel-draft-jobs-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .drexel-draft-jobs-select-all {
    min-height: auto;
  }

  .drexel-draft-job-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .drexel-draft-job-card__meta {
    grid-column: 2;
  }
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.filter-tab {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 16px;
  font: inherit;
  cursor: pointer;
}

.filter-tab.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.drexel-item-card {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(216, 198, 173, 0.9);
  background: var(--admin-dashboard-surface);
}

.drexel-item-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.drexel-item-card__meta {
  display: grid;
  gap: 6px;
}

.drexel-item-card__meta strong {
  font-size: 1rem;
}

.drexel-item-card__meta p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.drexel-item-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.drexel-item-card__tags span {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid rgba(216, 198, 173, 0.85);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent-dark);
}

.drexel-item-editor {
  display: grid;
  gap: 14px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed rgba(216, 198, 173, 0.9);
}

.drexel-item-editor__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.drexel-item-editor__full {
  grid-column: 1 / -1;
}

.drexel-search-picker {
  position: relative;
}

.drexel-search-picker__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid rgba(216, 198, 173, 0.95);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 32px rgba(48, 34, 20, 0.18);
  padding: 6px;
}

.drexel-search-picker.is-open .drexel-search-picker__menu {
  display: grid;
  gap: 4px;
}

.drexel-search-picker.opens-up .drexel-search-picker__menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.drexel-search-picker__option {
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: inherit;
}

.drexel-search-picker__option strong {
  font-size: 0.94rem;
}

.drexel-search-picker__option span {
  font-size: 0.78rem;
  color: var(--muted);
}

.drexel-search-picker__option:hover,
.drexel-search-picker__option.is-selected {
  background: color-mix(in srgb, var(--table-head) 46%, var(--surface) 54%);
  border-color: rgba(159, 140, 116, 0.45);
}

.drexel-search-picker__empty {
  padding: 12px;
  font-size: 0.85rem;
  color: var(--muted);
}

.drexel-item-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.user-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--admin-dashboard-surface);
}

.user-card--editing {
  display: block;
  padding: 20px;
  border-color: rgba(166, 90, 42, 0.32);
  box-shadow: 0 0 0 1px rgba(166, 90, 42, 0.12);
}

.user-card__meta {
  display: grid;
  gap: 4px;
}

.user-card__meta strong {
  font-size: 1rem;
}

.user-card__meta p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.user-card__editor {
  display: grid;
  gap: 14px;
}

.user-card__editor-grid {
  grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) auto;
}

.user-card__editor-grid .inline-checkbox {
  display: grid;
  gap: 8px;
  align-content: start;
}

.user-card__editor-grid .inline-checkbox input {
  width: auto;
  justify-self: start;
}

.user-card__editor-share {
  grid-column: 1 / -1;
}

.user-card__editor-actions {
  justify-content: flex-start;
}

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

  .role-access-card__editor {
    grid-template-columns: 1fr;
  }
}

.batch-user-role-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.role-definition-add {
  display: flex;
  align-items: end;
}

.role-definition-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.role-access-card {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--admin-dashboard-surface);
}

.role-access-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.role-access-card__meta {
  display: grid;
  gap: 4px;
}

.role-access-card__meta p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.role-access-card__editor {
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) auto;
}

.role-access-card__summary {
  display: grid;
  gap: 6px;
  align-content: end;
}

.role-access-card__summary span {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.role-app-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.role-app-checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--admin-dashboard-surface);
}

.role-app-checkbox input {
  width: auto;
  margin-top: 3px;
}

.role-app-checkbox span {
  display: grid;
  gap: 4px;
}

.role-app-checkbox small {
  color: var(--muted);
  line-height: 1.4;
}

.batch-user-role-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--admin-dashboard-surface);
}

#dashboard-admin-panel .filter-tab:not(.is-active),
#dashboard-admin-panel .role-definition-list .card,
#dashboard-admin-panel .admin-share-chip-field,
#dashboard-admin-panel .dashboard-password-card,
#dashboard-admin-panel .po-block,
#dashboard-admin-panel .po-admin-card,
#dashboard-admin-panel .drexel-item-card,
#dashboard-admin-panel .user-card,
#dashboard-admin-panel .role-access-card,
#dashboard-admin-panel .role-app-checkbox,
#dashboard-admin-panel .batch-user-role-option {
  background: var(--admin-dashboard-surface);
}

.batch-user-role-option input {
  width: auto;
  margin-top: 3px;
}

.batch-user-role-option span {
  display: grid;
  gap: 2px;
}

.batch-user-role-option small {
  color: var(--muted);
  font-size: 0.85rem;
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 330px 1fr;
  min-height: 100vh;
  color: var(--text-primary);
  background:
    radial-gradient(circle at top left, var(--page-bg-soft), transparent 38%),
    var(--page-bg);
}

html[data-theme="unmoored"] .app-shell {
  background:
    radial-gradient(circle at 50% 0%, rgba(120, 0, 0, 0.22), transparent 34%),
    radial-gradient(circle at 70% 20%, rgba(90, 0, 25, 0.16), transparent 26%),
    var(--page-bg);
}

.sidebar {
  background: linear-gradient(180deg, var(--sidebar-top) 0%, var(--sidebar-bottom) 100%);
  color: var(--sidebar-ink);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--eyebrow-color);
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

.intro,
.muted {
  color: var(--muted);
}

.sidebar .intro {
  color: var(--sidebar-muted);
  line-height: 1.5;
}

.tab-list {
  display: grid;
  gap: 10px;
}

.tab-button,
.primary-button,
.secondary-button,
.ghost-button,
.button-primary,
.button-secondary,
.button-ghost {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.tab-button:hover,
.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
}

.tab-button {
  background: var(--surface-soft);
  color: var(--sidebar-ink);
  text-align: left;
}

.tab-button.active {
  background: var(--sidebar-tab-active-bg);
  color: var(--sidebar-tab-active-ink);
}

.job-library {
  flex: 1;
  min-height: 0;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.job-search-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.job-search-field span {
  font-size: 0.9rem;
  font-weight: 700;
}

.job-list,
.piece-list,
.color-list {
  display: grid;
  gap: 12px;
}

.job-list {
  max-height: calc(100vh - 330px);
  overflow: auto;
  padding-right: 6px;
}

.job-card,
.piece-card,
.color-card {
  border-radius: 18px;
  background: var(--surface-soft);
  padding: 14px;
}

.job-card .action-row {
  justify-content: flex-start;
}

.job-card .action-row button {
  width: auto;
}

.main-content {
  padding: 28px;
  min-width: 0;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

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

.app-header-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.app-header-logo {
  flex: 0 0 auto;
  width: min(13rem, 34vw);
  height: auto;
  max-height: 5.25rem;
  display: block;
  object-fit: contain;
}

.app-header-brand__copy {
  min-width: 0;
}

.app-header-brand--sidebar {
  align-items: flex-start;
}

.header-actions,
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  min-width: 0;
}

.card--interactive {
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.card--interactive:hover {
  border-color: var(--accent-primary);
  background: color-mix(in srgb, var(--card-bg), var(--accent-primary) 5%);
}

html[data-theme="unmoored"] .card--interactive:hover {
  border-color: rgba(255, 82, 55, 0.7);
  box-shadow: 0 0 24px rgba(255, 45, 20, 0.14);
}

.app-header {
  background: var(--app-header-bg, var(--card-bg));
  border: 1px solid var(--app-header-border, var(--border-strong));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

:root {
  --drexel-wordmark-color: #173149;
  --drexel-roof-color: #007f95;
  --drexel-subtitle-color: #52697a;
  --drexel-d-mark-color: #173149;
  --drexel-d-mark-inner-color: #697b89;
}

html[data-theme="dark"] {
  --drexel-wordmark-color: #eef2f4;
  --drexel-roof-color: #22b8cf;
  --drexel-subtitle-color: #aebbc5;
  --drexel-d-mark-color: #eef2f4;
  --drexel-d-mark-inner-color: #8f9da8;
}

html[data-theme="unmoored"] {
  --drexel-wordmark-color: #e8dfcf;
  --drexel-roof-color: #d95a3d;
  --drexel-subtitle-color: #b8aa95;
  --drexel-d-mark-color: #e8dfcf;
  --drexel-d-mark-inner-color: #a99d8d;
}

.drexel-brand-mount {
  width: min(13rem, 34vw);
  min-width: 9.5rem;
  min-height: 4.75rem;
  display: flex;
  align-items: center;
}

.drexel-app-brand {
  width: 100%;
  display: grid;
  grid-template-columns: 27.5% minmax(0, 1fr);
  align-items: end;
  gap: 6.5%;
}

.drexel-app-brand__mark {
  width: 100%;
  height: auto;
  display: block;
  color: var(--drexel-d-mark-color);
}

.drexel-app-brand__lockup {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.drexel-app-brand__art {
  position: relative;
  width: 100%;
  aspect-ratio: 2.65 / 1;
}

.drexel-app-brand__wordmark,
.drexel-app-brand__roof {
  position: absolute;
  display: block;
  height: auto;
}

.drexel-app-brand__wordmark {
  left: 0;
  bottom: 0;
  width: 100%;
  color: var(--drexel-wordmark-color);
}

.drexel-app-brand__roof {
  top: 0;
  left: 14%;
  width: 79%;
  color: var(--drexel-roof-color);
}

.drexel-app-brand__subtitle {
  display: block;
  width: 100%;
  color: var(--drexel-subtitle-color);
  font-size: 0.6rem;
  font-family: "Montserrat", var(--font-ui);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.32em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.drexel-d-mark__inner {
  fill: var(--drexel-d-mark-inner-color);
}

[data-drexel-d-mark] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboard-return-button__mark {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  color: var(--drexel-d-mark-color);
}

html[data-theme="dark"] .app-header {
  --surface-2: var(--app-header-control-bg);
  --surface-3: var(--app-header-control-hover-bg);
  --border-strong: var(--app-header-control-border);
  --button-ghost-bg: var(--app-header-control-bg);
  --button-border: var(--app-header-control-border);
}

html[data-theme="dark"] .app-header .ghost-button,
html[data-theme="dark"] .app-header .button-ghost,
html[data-theme="dark"] .app-header .button.ghost-button {
  background: var(--app-header-control-bg);
  border-color: var(--app-header-control-border);
}

html[data-theme="dark"] .app-header .ghost-button:hover,
html[data-theme="dark"] .app-header .button-ghost:hover,
html[data-theme="dark"] .app-header .button.ghost-button:hover {
  background: var(--app-header-control-hover-bg);
  border-color: color-mix(in srgb, var(--accent-primary) 48%, var(--app-header-control-border));
}

.role-view-access {
  grid-column: 1 / -1;
  margin: 0 0 var(--space-3, 12px) 2rem;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-subtle, var(--line));
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-2, var(--surface-alt));
}

.role-view-access.is-disabled { opacity: 0.62; }
.role-view-access__heading,
.role-view-access__default { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); }
.role-view-access__heading small { color: var(--text-secondary, var(--muted)); }
.role-view-access__options { display: grid; gap: var(--space-2, 8px); margin: var(--space-3, 12px) 0; }
.role-view-access__options label { display: flex; gap: var(--space-2, 8px); align-items: flex-start; }
.role-view-access__options span { display: grid; gap: 2px; }
.role-view-access__options small { color: var(--text-secondary, var(--muted)); }
.role-view-access__default select { min-width: 12rem; }

.app-view-selector {
  display: inline-flex;
  align-items: center;
}

.app-view-selector__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0;
  color: var(--text-secondary, var(--muted));
  font-size: 0.82rem;
  font-weight: 700;
}

.app-view-selector__select {
  min-width: 11rem;
  min-height: 2.45rem;
  margin: 0;
  border-radius: var(--radius-sm, 10px);
  background: var(--input-bg);
  color: var(--text-primary, var(--ink));
  border: 1px solid var(--input-border, var(--line));
}

@media (max-width: 720px) {
  .app-view-selector,
  .app-view-selector__label,
  .app-view-selector__select {
    width: 100%;
  }
}

html[data-theme="unmoored"] .app-header {
  box-shadow: var(--unmoored-glow);
}

.compact-row-list {
  display: grid;
  gap: 14px;
}

.compact-row {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface-alt) 100%);
}

.compact-row__summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.compact-row__summary-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.compact-row__summary-main p,
.compact-row__summary-main h4 {
  margin: 0;
}

.compact-row__summary-main h4 {
  font-size: 1rem;
}

.compact-row__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.compact-row__metric {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.compact-row__metric strong,
.compact-row__metric span {
  min-width: 0;
}

.compact-row__toggle {
  justify-self: start;
}

.compact-row__details {
  display: grid;
  gap: 14px;
}

.compact-row__details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.compact-row__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.compact-row__footer-total {
  display: grid;
  gap: 4px;
}

.compact-row__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.compact-row.is-collapsed .compact-row__details {
  display: none;
}

.compact-row.is-collapsed .compact-row__toggle::after {
  content: "Show Details";
}

.compact-row:not(.is-collapsed) .compact-row__toggle::after {
  content: "Hide Details";
}

@media (min-width: 1025px) {
  .compact-row {
    gap: 10px;
    padding: 12px;
  }

  .compact-row__toggle {
    display: none;
  }

  .compact-row.is-collapsed .compact-row__details {
    display: grid;
  }

  .compact-row__summary {
    align-items: center;
  }

  .compact-row__summary-main {
    gap: 2px;
  }

  .compact-row__summary-main h4 {
    font-size: 0.96rem;
  }

  .compact-row__metrics {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
  }

  .compact-row__details-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
  }

  .compact-row__footer {
    align-items: flex-start;
  }

  .sheet-items .compact-row {
    gap: 8px;
  }

  .sheet-items .compact-row__details-grid {
    grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(120px, 0.8fr));
  }

  .sheet-items .drexel-line-item-field--wide {
    grid-column: auto;
  }

  .sheet-items .compact-row__details .compact-row__metrics {
    grid-template-columns: repeat(2, minmax(120px, 180px));
  }

  .piece-card-compact .compact-row__details {
    grid-template-columns: minmax(260px, 0.95fr) minmax(220px, 1.05fr);
    align-items: start;
  }

  .piece-card-compact .piece-display-piece {
    margin-bottom: 0;
  }

  .piece-card-compact .piece-card-summary {
    margin-top: 0;
  }
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.1fr) minmax(360px, 1fr);
  gap: 20px;
}

.single-column {
  grid-template-columns: 1fr;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-grid {
  grid-template-columns: 1.5fr 1fr auto;
}

.admin-lock-grid {
  grid-template-columns: 1fr;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-primary);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--accent-primary);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--disabled-opacity);
  transform: none !important;
  box-shadow: none !important;
}

select {
  overflow: hidden;
}

.notes-field {
  grid-column: 1 / -1;
}

.triangle-only-field.is-hidden {
  display: none;
}

.trapezoid-only-field.is-hidden {
  display: none;
}

.is-hidden {
  display: none !important;
}

.app-processing-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 10, 16, 0.56);
  backdrop-filter: blur(12px);
}

.app-processing-modal {
  width: min(420px, calc(100vw - 32px));
  padding: 28px 24px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface) 100%);
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.app-processing-title {
  margin: 0;
}

.app-processing-message {
  margin: 0;
  color: var(--muted);
}

.app-processing-spinner {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 3px solid rgba(216, 138, 69, 0.22);
  border-top-color: var(--accent);
  animation: app-processing-spin 0.9s linear infinite;
}

@keyframes app-processing-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.qty-control {
  max-width: 96px;
  min-width: 96px;
}

.qty-control input {
  text-align: center;
}

.finished-sides {
  margin-top: 18px;
}

.piece-note-field {
  display: grid;
  gap: 8px;
}

.piece-note-field textarea {
  min-height: 72px;
  resize: vertical;
}

.finished-sides p {
  margin: 0;
  font-weight: 700;
}

.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.checkbox-chip,
.checkbox-inline,
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.checkbox-chip {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
}

.admin-share-chip-field {
  display: grid;
  gap: 10px;
  align-content: start;
}

.admin-share-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-share-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-alt);
}

.admin-share-chip .ghost-button {
  min-width: auto;
  padding: 2px 8px;
}

.preview-panel {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.piece-editor-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(280px, 420px);
  gap: 18px;
  align-items: start;
}

.piece-editor-card,
.piece-editor-preview-panel,
.piece-editor-fields {
  min-width: 0;
}

.piece-editor-fields {
  display: grid;
  gap: 18px;
}

.piece-meta-grid {
  grid-template-columns: minmax(84px, 104px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}

.piece-shape-row,
.piece-measure-row {
  align-items: end;
}

.piece-measure-row {
  gap: 12px;
}

.piece-measure-row > label {
  min-width: 0;
}

.piece-preview {
  margin-top: 2px;
}

.piece-preview,
.piece-display-piece {
  background:
    linear-gradient(135deg, rgba(166, 90, 42, 0.08), rgba(255, 255, 255, 0.65)),
    var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
}

.piece-preview {
  min-height: 540px;
}

@media (max-width: 1580px) {
  .piece-editor-layout {
    grid-template-columns: 1fr;
  }

  .piece-preview {
    min-height: 460px;
  }
}

.piece-preview svg,
.piece-display-piece svg {
  width: 100%;
  height: auto;
  display: block;
}

.piece-display-piece {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(92px, 0.55fr);
  gap: 8px;
  align-items: center;
  padding: 12px;
}

.piece-display-piece__meta {
  display: grid;
  gap: 3px;
  align-content: center;
  justify-items: start;
}

.piece-display-piece__meta strong {
  display: block;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.05;
}

.piece-display-piece__meta .piece-meta {
  margin: 0;
  color: var(--muted);
  line-height: 1.05;
  font-size: 0.82rem;
}

.piece-display-piece__meta .piece-note {
  color: var(--ink);
  font-size: 0.78rem;
}

.piece-display-piece--preview {
  min-height: 100%;
}

.piece-display-piece--export {
  break-inside: avoid;
  page-break-inside: avoid;
  height: 100%;
}

.piece-display-piece--preview .piece-display-piece__drawing,
.piece-display-piece--export .piece-display-piece__drawing {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.piece-display-piece--preview svg {
  max-height: 430px;
}

.piece-display-piece--export svg {
  max-height: 1.55in;
}

.piece-card-summary .piece-meta--muted {
  color: var(--muted);
}

.summary-strip,
.totals-panel,
.quote-settings-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  padding: 16px;
  background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface-alt) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.summary-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summary-strip__group {
  display: contents;
}

.totals-panel {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quote-settings-panel {
  align-items: end;
}

.quote-tax-row {
  display: flex;
  align-items: end;
  gap: 18px;
  grid-column: 1 / -1;
  flex-wrap: wrap;
}

.job-form .quote-tax-toggle {
  align-self: end;
  justify-content: flex-start;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-alt);
}

.quote-tax-row .quote-tax-rate-field {
  width: 160px;
}

.quote-tax-row .quote-tax-rate-field input {
  width: 100%;
}

.export-menu {
  position: relative;
}

.export-menu__trigger {
  min-width: 0;
}

.export-menu__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 2000;
  min-width: 250px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 32px rgba(48, 34, 20, 0.16);
}

.export-menu__action {
  width: 100%;
  justify-content: flex-start;
}

.summary-input {
  display: grid;
  gap: 6px;
}

.summary-input input {
  width: 100%;
}

.quote-sheet-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) minmax(220px, 1fr) 220px;
  gap: 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-alt);
}

.quote-sheet-row__drawing .piece-display-piece {
  min-height: 100%;
}

.quote-sheet-row__details,
.quote-sheet-row__pricing {
  display: grid;
  gap: 8px;
}

.quote-sheet-row__details p,
.quote-sheet-row__pricing p {
  margin: 0;
}

.summary-label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.primary-button,
.button-primary {
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-primary-hover));
  color: var(--text-inverse);
  border: 1px solid color-mix(in srgb, var(--accent-primary), #ffffff 18%);
}

.secondary-button,
.button-secondary {
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

.ghost-button,
.button-ghost {
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--border-strong) 78%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

.ghost-button:hover,
.button-ghost:hover {
  background: color-mix(in srgb, var(--surface-3) 82%, transparent);
  border-color: color-mix(in srgb, var(--accent-primary) 44%, var(--border-strong));
  color: var(--text-primary);
}

.ghost-button.active,
.button-ghost.active {
  background: color-mix(in srgb, var(--accent-primary) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent-primary) 56%, var(--border-strong));
  color: var(--text-primary);
}

.main-content .ghost-button {
  color: var(--accent-dark);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
  border-color: color-mix(in srgb, var(--accent-dark) 26%, var(--border-strong));
}

.status-pill {
  background: rgba(166, 90, 42, 0.12);
  color: var(--accent-dark);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.piece-card {
  background: var(--surface-alt);
  border: 1px solid var(--line);
}

.piece-card-content p {
  margin-bottom: 8px;
}

.piece-card-summary {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.piece-card-content .piece-display-piece {
  margin-bottom: 12px;
}

.piece-card-actions,
.color-card {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.color-card {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}

.color-card__body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  flex: 0 0 auto;
  margin-top: 2px;
}

input[type="color"] {
  padding: 6px;
  height: 48px;
  min-height: 48px;
  border-radius: 14px;
  background: var(--surface-alt);
}

.job-meta,
.piece-meta {
  color: var(--muted);
  font-size: 0.92rem;
}

.admin-grid-full {
  grid-column: 1 / -1;
}

.system-alert-banner {
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 28px));
  z-index: 9999;
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface) 100%);
  box-shadow: var(--shadow);
}

.system-alert-banner.is-hidden {
  display: none;
}

.system-alert-banner__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.system-alert-banner__title {
  margin: 0;
  font-size: 1rem;
}

.system-alert-banner__meta,
.system-alert-banner__message {
  margin: 0;
}

.system-alert-banner__meta {
  color: var(--muted);
  font-size: 0.88rem;
}

.system-alert-banner__message {
  font-size: 1rem;
  line-height: 1.45;
}

.system-alert-banner__dismiss {
  justify-self: end;
}

.print-job-summary {
  margin-bottom: 16px;
  padding: 16px;
  background: linear-gradient(180deg, var(--surface-strong) 0%, var(--surface-alt) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.empty-state {
  border: 1px dashed var(--line);
  border-radius: 18px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.hidden-cost .cost-value,
.hidden-cost #piece-cost-wrapper,
.hidden-cost #total-cost-wrapper,
.hidden-cost .cost-column {
  display: none !important;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .workspace-grid,
  .piece-editor-layout,
  .form-grid,
  .admin-grid,
  .summary-strip,
  .totals-panel,
  .quote-settings-panel,
  .quote-sheet-row {
    grid-template-columns: 1fr;
  }

  .sidebar {
    padding-bottom: 10px;
  }

  .job-list {
    max-height: 300px;
  }

  .piece-display-piece {
    grid-template-columns: 1fr;
  }

  .piece-display-piece--export .piece-display-piece__meta {
    font-size: 10px;
  }
}

@media (max-width: 1400px) {
  .app-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .dashboard-hero__controls {
    width: 100%;
    max-width: none;
  }

  .dashboard-hero__utility-row {
    width: 100%;
  }

  .workspace-grid,
  .piece-editor-layout,
  .quote-sheet-row {
    grid-template-columns: 1fr;
  }

  .form-grid,
  .dashboard-password-grid,
  .dashboard-bug-report-grid,
  .dashboard-support-grid,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .piece-meta-grid {
    grid-template-columns: 1fr;
  }

  .qty-control {
    max-width: none;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-topbar,
  .dashboard-apps-header {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-topbar__actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .dashboard-user-summary {
    width: 100%;
    padding-left: 0;
    border-left: 0;
  }

  .dashboard-user-menu {
    width: 100%;
  }

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

  .dashboard-stat + .dashboard-stat {
    padding-left: 0;
    padding-top: 1rem;
    border-left: 0;
    border-top: 1px solid var(--dashboard-divider);
  }

  .dashboard-shell,
  .user-gate-shell {
    padding: 16px;
  }

  .dashboard-hero,
  .panel-header,
  .section-heading,
  .dashboard-hero__utility-row,
  .dashboard-bug-report-latest-error,
  .dashboard-admin-notification-item__header,
  .dashboard-admin-notification-item__footer,
  .dashboard-notifications-section__header,
  .dashboard-admin-stage-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-heading-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }

  .admin-reminder-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-reminder-banner__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .dashboard-hero {
    padding: 18px 20px;
  }

  .dashboard-hero__controls,
  .dashboard-search {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .dashboard-theme-toggle {
    justify-self: start;
  }

  .dashboard-overlay__viewport {
    padding: 16px;
  }

  .dashboard-overlay-card,
  .dashboard-bug-report-panel,
  .dashboard-suggestion-panel,
  .dashboard-admin-notifications-panel {
    width: min(100vw - 24px, 960px);
    max-height: 88vh;
  }

  .po-admin-grid,
  .po-admin-grid--product {
    grid-template-columns: 1fr;
  }

  .po-admin-field--wide {
    grid-column: auto;
  }

  .po-admin-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .po-admin-section-header__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .user-gate-password-row,
  .user-gate-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-view-button,
  .app-card {
    grid-template-columns: auto 1fr;
  }

  .admin-view-button__launch,
  .app-card__launch {
    grid-column: 1 / -1;
    padding-left: 0;
  }
}

@media (max-width: 720px) {
  .dashboard-shell,
  .user-gate-shell {
    padding: 12px;
  }

  .user-gate-card,
  .dashboard-hero,
  .card {
    border-radius: 22px;
  }

  .user-gate-card,
  .card {
    padding: 18px;
  }

  .dashboard-hero {
    padding: 16px 18px;
  }

  .dashboard-admin-launcher,
  .app-grid,
  .user-gate-list {
    grid-template-columns: 1fr;
  }

  .admin-view-button,
  .app-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .admin-view-button__icon,
  .app-card__icon {
    width: 48px;
    height: 48px;
  }

  .admin-view-button__launch,
  .app-card__launch {
    padding-left: 0;
  }

  .main-content,
  .sidebar {
    padding: 18px;
  }

  .sidebar {
    gap: 18px;
  }

  .header-actions,
  .action-row,
  .piece-card-actions,
  .color-card {
    width: 100%;
    justify-content: flex-start;
  }

  .po-admin-section-header__actions,
  .po-admin-card__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .po-admin-vendor-filter,
  .po-admin-section-header__actions > button,
  .po-admin-card__footer .po-admin-actions,
  .po-admin-card__footer .po-admin-actions > button {
    width: 100%;
  }

  .po-admin-card__footer .po-admin-actions {
    display: grid;
  }

  .job-card .action-row button,
  .piece-card-actions button,
  .header-actions > button,
  .header-actions > a,
  .action-row > button,
  .action-row > a,
  .action-row > label {
    width: 100%;
  }

  .quote-tax-row {
    gap: 12px;
  }

  .quote-tax-row .quote-tax-rate-field {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .user-gate-card h1,
  .dashboard-hero h1 {
    font-size: 1.7rem;
  }

  .user-gate-card,
  .dashboard-hero,
  .card,
  .main-content,
  .sidebar {
    padding: 14px;
  }

  .user-gate-user-button,
  .app-card,
  .admin-view-button {
    padding: 16px;
  }

  .job-list {
    max-height: 240px;
  }
}

@media print {
  body {
    background: white;
  }

  .sidebar,
  .panel-header,
  .job-form,
  .card:first-of-type .action-row,
  .tab-list,
  .job-library,
  .finished-sides,
  #dashboard-admin-panel {
    display: none !important;
  }

  .app-shell,
  .main-content,
  .tab-panel.active,
  .workspace-grid {
    display: block;
    padding: 0;
    margin: 0;
  }

  .card {
    border: 0;
    box-shadow: none;
    padding: 0;
    background: white;
  }

  .piece-card {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 18px;
    border: 1px solid #bbb;
  }

  .print-job-summary,
  .totals-panel {
    margin-bottom: 18px;
    border: 1px solid #bbb;
  }

  .piece-card-actions,
  .edit-piece-button,
  .delete-piece-button {
    display: none !important;
  }

  .piece-preview {
    min-height: 0;
  }
}
.calendar-data-sync-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.calendar-data-select-all {
  min-height: 2.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--button-border, var(--border-strong));
  border-radius: var(--radius-md, 14px);
  background: var(--button-secondary-bg, var(--surface-alt));
  color: var(--text-primary, var(--ink));
  font-weight: 700;
}

.calendar-data-select-all input,
.calendar-data-sync-checkbox {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent-primary, var(--accent));
}

.calendar-data-sync-help {
  margin: 0.75rem 0 0;
}

.calendar-data-sync-row {
  align-items: center;
  background: var(--panel, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.8rem 0.9rem;
}

.calendar-data-sync-row.is-selected {
  border-color: color-mix(in srgb, var(--accent-primary, var(--accent)) 58%, var(--border));
  background: color-mix(in srgb, var(--accent-primary, var(--accent)) 8%, var(--panel, var(--surface)));
}

.calendar-data-sync-row__details {
  min-width: 0;
  flex: 1 1 auto;
}

.calendar-data-sync-checkbox {
  flex: 0 0 auto;
}

.calendar-data-sync-row p {
  margin: 0.2rem 0 0;
}

@media (max-width: 720px) {
  .calendar-data-sync-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .calendar-data-sync-row .status-pill {
    margin-left: calc(1.15rem + 1rem);
  }
}