/* Approved Shipleys v2 visual layer. Existing layout, forms and state remain authoritative. */
body.app-reference {
  --shipleys-canvas: #091426;
  --shipleys-panel: #12233c;
  --shipleys-yellow: #f3cd18;
  --app-reference-page: #091426;
  --app-reference-deep: #091426;
  --app-reference-rail: #142235;
  --app-reference-panel: #12233c;
  --app-reference-panel-2: #1b2b40;
  --app-reference-line: #304767;
  --app-reference-ink: #f2f5fb;
  --app-reference-muted: #b1c1db;
  /* Compatibility aliases for the existing component vocabulary. */
  --app-reference-pink: #315fc9;
  --app-reference-pink-text: #b7d0ff;
  --app-reference-orange: #f3cd18;
  --app-reference-green: #a4d7c2;
  --rota-reference-page: #091426;
  --rota-reference-deep: #091426;
  --rota-reference-rail: #142235;
  --rota-reference-panel: #12233c;
  --rota-reference-panel-2: #1b2b40;
  --rota-reference-line: #304767;
  --rota-reference-ink: #f2f5fb;
  --rota-reference-muted: #b1c1db;
  --rota-reference-soft: #b1c1db;
  --rota-reference-pink: #315fc9;
  --rota-reference-pink-text: #b7d0ff;
  --rota-reference-orange: #f3cd18;
  --rota-reference-green: #a4d7c2;
  --bg: #091426; --bg-deep: #091426; --sidebar: #142235;
  --card: #12233c; --card-solid: #12233c; --panel: #12233c;
  --ink: #f2f5fb; --muted: #b1c1db; --muted-strong: #c6d6ef;
  --border: #304767; --accent: #315fc9; --accent-2: #315fc9;
  --accent-3: #b7d0ff; --warning: #f3cd18; --danger: #ffb9a9;
  --success: #a4d7c2; --shadow: none;
  --radius-xl: 8px; --radius-lg: 8px; --radius-md: 6px;
  background: var(--shipleys-canvas);
  color: var(--ink);
  font-family: 'Segoe UI', Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
body.app-reference::before { display: none; }
/* Remove legacy decorative paint, not the responsive or workflow contracts. */
body.app-reference :where(section, article, aside, header, nav, details, summary, form, table, th, td, button, a, .badge, .avatar) {
  box-shadow: none;
  backdrop-filter: none;
  text-shadow: none;
}
body.app-reference .sidebar { background: #142235; border-color: #304155; box-shadow: none; }
body.app-reference .brand-logo { width: 176px; max-width: 100%; height: auto; object-fit: contain; border: 0; border-radius: 0; background: transparent; padding: 0; }
body.app-reference .sidebar-brand { gap: 14px; border-color: #304155; }
body.app-reference .sidebar-brand h1 { font-size: 13px; font-weight: 500; letter-spacing: .06em; }
body.app-reference .sidebar-brand .eyebrow { color: #e1e8f7; font-size: 10px; }
body.app-reference .nav-link { color: #e6edff; border-radius: 6px; background: transparent; box-shadow: none; }
body.app-reference .nav-link:hover { background: #23364d; transform: none; }
body.app-reference .portal-nav .nav-link.active { background: #11274f; border-color: #6884b9; color: #fff; box-shadow: inset 3px 0 0 var(--shipleys-yellow); }
body.app-reference .nav-glyph { color: #bfcfee; }
body.app-reference .shell-topline { background: #101f36; padding: 10px 14px; border-bottom: 1px solid #304767; border-radius: 6px; }
body.app-reference .topbar-account-actions { margin-left: auto; background: #101f36; }
body.app-reference .avatar { background: #294d95; color: #fff; border: 1px solid #7593c9; border-radius: 50%; }
body.app-reference .topbar-account-link { background: transparent; }
/* Page-level surfaces share one content gutter; nested planner scrollers keep
   their existing compact/edge-to-edge layout and the rota wide shell is unchanged. */
body.app-reference .hero-card { background: var(--shipleys-panel); border: 1px solid var(--border); box-shadow: none; }
@media screen {
  body.app-reference .content-shell > :is(.hero-card, .panel, .dashboard-section) {
    padding-inline: clamp(1rem, 3vw, 1.35rem);
  }
}
/* The centered guest form retains its deliberately roomier gutter. */
body.app-reference.is-guest .auth-shell > .auth-card {
  padding-inline: clamp(1.35rem, 5vw, 2rem);
}
body.app-reference .hero-card::before, body.app-reference .hero-card::after { display: none; }
body.app-reference h2 { letter-spacing: -.025em; }
body.app-reference .eyebrow { color: #b1c1db; }
body.app-reference :is(.panel,.dashboard-section,.action-panel,.document-card,.staff-card,.account-details,.settings,.auth-card,.rota-review-panel,.rota-day-details,.rota-week-editor,.rota-workflow-tools > details) {
  background: #12233c; border-color: #304767; border-radius: 8px; box-shadow: none;
}
body.app-reference :is(.dashboard-priority-strip,.dashboard-control-panel,.rota-staff-summary,.rota-summary-strip) { background: #1b2b40; border-color: #496493; border-radius: 8px; box-shadow: none; }
body.app-reference :is(.priority-card,.dashboard-priority-card,.metric-card,.stat-card,.quick-action-grid a) { background: #1b2b40; border-color: #304767; box-shadow: none; }
body.app-reference :is(.rota-day-summary,.rota-week-editor-heading,.document-card-header,.staff-card-header) { background: #1b2b40; border-color: #3b5273; }
body.app-reference :is(button,.button-link,.link-button,.button-primary,.stacked-form button) { background: #315fc9; color: #fff; border: 1px solid #6489e5; border-radius: 6px; box-shadow: none; }
body.app-reference :is(button,.button-link,.link-button):hover { background: #3b6cdd; box-shadow: none; transform: none; }
body.app-reference :is(.button-secondary,.logout-button,.topbar-logout-button,.rota-week-popover-close) { background: #1b3152; border-color: #49658d; color: #f2f5fb; }
body.app-reference :is(input:not([type=checkbox]):not([type=radio]),select,textarea),
body.app-reference .stacked-form :is(input,select,textarea),body.app-reference .inline-form :is(input,select,textarea) {
  background: #0d1c32; color: #f2f5fb; border-color: #6881a3; border-radius: 6px;
}
body.app-reference input::placeholder,body.app-reference textarea::placeholder { color: #acbbd0; opacity: 1; }
body.app-reference :is(input[type=checkbox],input[type=radio]) { accent-color: #315fc9; }
body.app-reference :focus-visible { outline: 3px solid #f3cd18; outline-offset: 3px; }
body.app-reference :is(.section-tabs,.rota-tabs) { background: transparent; }
body.app-reference .section-tab.active::after { background: #f3cd18; }
body.app-reference .section-tab.active { color: #fff; background: #1b2b40; }
body.app-reference table { background: #12233c; color: #f2f5fb; }
body.app-reference th { background: #203b64; color: #c5d4eb; box-shadow: none; }
body.app-reference td { background: #12233c; border-color: #2d4260; }
body.app-reference tbody tr:nth-child(even) td { background: #142740; }
body.app-reference .rota-staff-week-table .rota-week-person { background: #162c4b; box-shadow: none; }
body.app-reference .rota-staff-week-table thead th { background: #203b64; box-shadow: none; }
body.app-reference .rota-week-person-avatar { background: #294d95; color: #fff; }
body.app-reference .rota-week-shift-editor > summary,
body.app-reference .rota-week-shift-card.status-published .rota-week-shift-editor > summary { background: #203f70; color: #f4f7ff; border: 1px solid #456ca4; border-radius: 5px; box-shadow: none; }
body.app-reference .rota-week-shift-card.status-draft .rota-week-shift-editor > summary,
body.app-reference .rota-week-shift-card.has-pending-change .rota-week-shift-editor > summary { background: #393722; border-color: #b2983b; color: #fff1a9; }
body.app-reference .rota-week-shift-editor > summary strong { color: #c6d6ef; }
body.app-reference .rota-week-shift-state { color: #dce7fa; background: #1b2b40; }
body.app-reference .rota-week-cell-add > summary { color: #b1c1db; background: transparent; }
body.app-reference :is(.rota-week-shift-popover,.rota-week-cell-add-popover,.rota-edit-form,.rota-mobile-day-add[open],.rota-shift-edit[open]) { background: #152943; border-color: #6881a3; box-shadow: none; }
body.app-reference .rota-week-shift-popover .rota-edit-form { background: transparent; }
body.app-reference :is(.badge,.status-pill) { background: #244773; color: #e3edff; border-color: #496a97; }
body.app-reference :is(.badge-warning,.status-draft,.flash-warning) { color: #fff0b4; }
body.app-reference :is(.flash-error,.field-error,.error-message) { background: #382923; color: #ffcebf; border-color: #ae7861; }
body.app-reference .auth-topbar { background: #142235; border-bottom: 1px solid #304155; }
body.app-reference .auth-brand-lockup .brand-logo { width: 256px; height: auto; }
@media (max-width: 860px) {
  body.app-reference .sidebar { margin: 0; padding: 10px 12px; border-radius: 0; gap: 8px; }
  body.app-reference .sidebar-brand { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 2px 0 8px; border: 0; }
  body.app-reference .sidebar-brand .brand-logo { width: 150px; height: auto; }
  body.app-reference .sidebar-brand h1 { font-size: 10px; max-width: 110px; text-align: right; }
  body.app-reference .sidebar-brand .eyebrow { display: none; }
  body.app-reference .nav-glyph { display: none; }
  body.app-reference .portal-nav .nav-link.active { box-shadow: inset 0 -3px 0 #f3cd18; }
  body.app-reference .shell-topline { padding: 4px 0; margin-bottom: 12px; border-radius: 0; }
  body.app-reference .content-shell { padding-top: 6px; }
  body.app-reference :is(button,.button-link,.link-button,summary) { min-height: 44px; }
  body.app-reference .auth-brand-lockup .brand-logo { width: 220px; height: auto; }
}
@media print {
  body.app-reference { background: white; color: black; }
  body.app-reference :is(section,article,table,th,td) { background: white; color: black; }
}

body.app-reference .rota-manager-summary-bar,
body.app-reference .rota-manager-summary-bar > *,
body.app-reference .rota-summary-card,
body.app-reference .rota-summary-grid { background: #1b2b40; border-color: #496493; box-shadow: none; }
body.app-reference .topbar-account-copy small { display: block; }
/* Retire literal legacy paints at their original selector specificity. */
/* End manager staff-by-week editor */

/* End scroll performance polish */

/* Reference-led manager rota workspace: deep plum, operational metrics, no decorative charts. */
.page-manager-rota { background: #1b2b40; }
.page-manager-rota .rota-manager-summary-bar > span.needs-attention { background: #1b2b40; }
.page-manager-rota .rota-primary-actions { background: #1b2b40; }
.page-manager-rota .rota-primary-actions form button[type="submit"]:not(.button-secondary) { color: #fff; }
body.app-reference :is(.compact-details,.rota-chip-actions,.rota-chip-note-details) > summary { color: #b7d0ff; }
.page-manager-rota .rota-primary-create[open] { background: #1b2b40; }
.page-manager-rota .rota-tab-count { background: #1b2b40; }
.page-manager-rota .rota-staff-week-table thead th { background: #1b2b40; }
.page-manager-rota .rota-staff-week-table thead th.is-today { background: #1b2b40; }
.page-manager-rota .rota-staff-week-table .rota-week-person-heading,
.page-manager-rota .rota-staff-week-table .rota-week-person { background: #1b2b40; }
.page-manager-rota .rota-week-unassigned-row .rota-week-person { background: #1b2b40; }
.page-manager-rota .rota-week-unassigned-row .rota-week-staff-cell { background: #1b2b40; }
.page-manager-rota .rota-week-cell-add > summary:hover,
.page-manager-rota .rota-week-cell-add > summary:focus-visible { border-color: #49658d; background: #1b2b40; }
.page-manager-rota .rota-week-shift-popover,
.page-manager-rota .rota-week-cell-add-popover { background: #1b2b40; }
.page-manager-rota .sidebar { background: #1b2b40; }
/* End reference-led manager rota workspace. */

/* Reference-led whole-rota skin: shared shell and staff workspace. */
.page-rota-reference { background: #1b2b40; }
.page-rota-reference .rota-mobile-quicklinks a:hover,
.page-rota-reference .rota-mobile-quicklinks a:focus-visible { border-color: #49658d; background: #1b2b40; }
.page-rota-reference .staff-shift-card { background: #1b2b40; }
.page-rota-reference .staff-shift-time { background: #1b2b40; }
.page-rota-reference .shift-type-tag { border-color: #49658d; background: #1b2b40; }
.page-rota-reference .staff-rota-extra-days,
.page-rota-reference .staff-rota-extra-days[open] { background: #1b2b40; }
.page-rota-reference .rota-form input,
.page-rota-reference .rota-form select,
.page-rota-reference .rota-form textarea { background: #1b2b40; }
.page-manager-rota .rota-empty-week { border-color: #49658d; background: #1b2b40; }
.page-rota-reference .sidebar { background: #1b2b40; }
/* End reference-led whole-rota skin. */

/* Whole-app reference design: authenticated portal only. */
body.app-reference { background: #091426; }
body.app-reference .sidebar { background: #142235; }
body.app-reference .priority-tile:hover,
body.app-reference .summary-card:hover,
body.app-reference .staff-next-shift-card:hover { border-color: #49658d; background: #1b2b40; }
body.app-reference .button-secondary:hover,
body.app-reference .secondary-button:hover,
body.app-reference .ghost-button:hover { border-color: #49658d; background: #1b2b40; }
body.app-reference .stacked-form input,
body.app-reference .stacked-form select,
body.app-reference .stacked-form textarea,
body.app-reference .inline-form input,
body.app-reference .inline-form select,
body.app-reference .inline-form textarea { background: #1b2b40; }
body.app-reference table { background: #1b2b40; }
body.app-reference th { background: #1b2b40; }
body.app-reference .rota-staff-week-table .rota-week-person-heading { background: #203b64; }
body.app-reference .section-tab .badge, body.app-reference .tab-count { background: #244773; color: #e3edff; }