/* Shared area tools; the calendar's inner controls and card geometry are preserved. */
.app-shell .app-frame { min-height:100dvh; grid-template-columns:246px minmax(0,1fr); }
.app-shell.sidebar-collapsed .app-frame { grid-template-columns:72px minmax(0,1fr); }
.app-shell .sidebar { position:sticky; top:0; height:100dvh; min-height:100dvh; display:flex; flex-direction:column; align-self:start; overflow:hidden; padding:12px 10px; }
.app-shell .sidebar-links { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
.app-shell .sidebar-branding { flex:none; min-width:0; padding:4px 3px 12px; border-bottom:1px solid #ffffff25; margin-bottom:8px; }
.app-shell .sidebar-branding .brand { display:flex; align-items:center; gap:10px; padding:4px; margin:0; color:#fff; min-height:48px; }
.app-shell .sidebar-branding .brand-company-logo { flex:0 0 42px; max-width:80px; width:auto; height:42px; object-fit:contain; background:#fff; border-radius:5px; padding:3px; }
.app-shell .sidebar-company-name { min-width:0; overflow-wrap:anywhere; font-weight:700; font-size:.95rem; line-height:1.35; }
.app-shell .sidebar-branding .brand-mark { flex:0 0 38px; width:38px; height:38px; display:grid;place-items:center; }
.app-shell .sidebar-company-website { font-size:.72rem; padding:4px; margin:4px 0 0; }
.app-shell.sidebar-collapsed .sidebar-company-name,.app-shell.sidebar-collapsed .sidebar-company-website { display:none; }
.app-shell.sidebar-collapsed .sidebar-branding .brand-company-logo { flex-basis:38px; max-width:42px; }
.app-shell .sidebar-collapse-toggle { flex:none; }
.app-shell .sidebar-footer { position:static; flex:none; display:grid; gap:2px; padding-top:8px; margin-top:8px; border-top:1px solid #ffffff25; }
.app-shell .sidebar-clock { display:block; text-align:center; font-size:.72rem; color:#cfdae5; }
.app-shell .sidebar-footer .version-label { display:block; text-align:center; padding:8px 0; margin:0; min-height:32px; touch-action:manipulation; }
.app-shell .content { min-width:0; padding-top:16px; padding-bottom:88px; }
.app-shell .content-watchbook { padding:0 0 88px; }
.area-toolbar { position:sticky; top:0; z-index:25; min-height:76px; padding:12px 16px; margin-bottom:16px; border:1px solid #d2dce5; border-radius:10px; background:#fff; box-shadow:0 2px 6px #142e4608; gap:12px; }
.area-toolbar h1 { margin:0; font-size:1.4rem; line-height:1.25; font-weight:700; overflow-wrap:anywhere; }
.area-toolbar .eyebrow { margin:0 0 4px; }
.area-toolbar :is(.button,summary) { min-height:44px; font-size:.85rem; }
.area-toolbar :is(.button-row,.actions) { flex-wrap:wrap; gap:8px; }
.watchbook-heading.area-toolbar { border-radius:0; margin-bottom:0; }
.app-shell .mobile-nav-toggle { display:none; }
.notification-dock { --notification-bottom:16px; position:fixed; bottom:var(--notification-bottom); right:16px; z-index:60; width:56px; height:56px; }
.notification-dock[hidden] { display:none!important; }
.notification-dock .notification-menu { margin:0; padding:0; }
.notification-dock .notification-bell { display:grid; place-items:center; width:56px; height:56px; min-height:56px; padding:14px; border:0; border-radius:50%; color:#fff; background:#123654; box-shadow:0 4px 16px #102d4b40; list-style:none; }
.notification-dock .notification-bell::-webkit-details-marker { display:none; }
.notification-dock .notification-bell svg { width:26px; height:26px; }
.notification-dock .notification-count { position:absolute; top:-3px; right:-3px; min-width:22px; min-height:22px; display:grid; place-items:center; border:2px solid #fff; border-radius:20px; color:#fff; background:#c62828; font-size:.7rem; }
.notification-dock .notification-popover { position:fixed; inset:auto 12px calc(var(--notification-bottom) + 68px) auto; width:min(430px,calc(100vw - 24px)); max-height:calc(100dvh - var(--notification-bottom) - 92px); overflow:auto; }
.app-shell:has(dialog[open]) .notification-dock { visibility:hidden; }
body[data-watchbook-layout="panel"] .watchbook-layout { grid-template-columns:minmax(0,1fr); }
body[data-watchbook-layout="panel"] .watchbook-mobile-compose { display:block; width:auto; min-height:44px; margin:12px 16px; }
body[data-watchbook-layout="fixed"] .watchbook-mobile-compose { display:none; }
body[data-watchbook-layout="panel"] .watchbook-compose-dialog { inset:0 0 0 auto; margin:0; width:min(480px,100vw); height:100dvh; max-height:100dvh; max-width:100vw; border-radius:0; border:0; border-left:1px solid #b8c4d0; }
.watchbook-sidepanel { top:0; height:100dvh; }
.watchbook-layout-options { display:grid; gap:14px; border:0; padding:0; }
.watchbook-layout-options label { display:flex; gap:10px; align-items:center; padding:14px; border:1px solid #b8c4d0; border-radius:8px; }
.watchbook-layout-options input { width:18px; flex:none; }
@media(max-width:900px) {
 .app-shell .app-frame,.app-shell.sidebar-collapsed .app-frame { display:block; }
 .app-shell .sidebar { position:fixed; inset:0 auto 0 0; z-index:101; width:min(300px,calc(100vw - 48px)); height:100dvh; transform:translateX(-105%); transition:transform .2s; display:flex; }
 .app-shell.mobile-nav-open .sidebar { transform:translateX(0); }
 .app-shell .sidebar-branding { padding-top:48px; }
 .app-shell .mobile-nav-backdrop { position:fixed; inset:0; z-index:100; background:#0c243b80; }
 .app-shell .mobile-nav-toggle { display:grid; place-items:center; position:fixed; top:12px; left:12px; z-index:120; width:44px; height:44px; padding:0; border:1px solid #c2cfdb; border-radius:8px; color:#123654; background:#fff; font-size:1.5rem; }
 .app-shell .content { padding:0 12px 88px; }
 .app-shell .content-watchbook { padding:0 0 88px; }
 .app-shell .area-toolbar { padding-left:64px; min-height:72px; border-radius:0 0 8px 8px; }
 .app-shell .sidebar .sidebar-company-name { display:block; }
 .app-shell .sidebar .sidebar-branding .brand { justify-content:flex-start; }
 .app-shell .sidebar :is(.nav-label,.sidebar-group-toggle) { position:static; width:auto; height:auto; overflow:visible; clip:auto; opacity:1; }
 .app-shell .sidebar .sidebar-group-toggle { display:flex; width:100%; }
 .app-shell .sidebar .sidebar-submenu[hidden] { display:none; }
}
@media(max-width:700px) {
 body[data-watchbook-layout="fixed"] .watchbook-layout > .watchbook-sidepanel:has(.composer) { display:block; height:auto; }
 .area-toolbar h1 { font-size:1.2rem; }
}
@media print { .notification-dock,.mobile-nav-toggle { display:none!important; } .area-toolbar { position:static; } }

.area-toolbar:not(.schedule-toolbar) { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.area-toolbar > * { min-width:0; }
@media(max-width:900px) {
 .app-shell .schedule-toolbar.area-toolbar { padding-left:12px; }
 .app-shell .schedule-toolbar .schedule-heading { padding-left:48px; }
 .app-shell .sidebar-collapse-toggle { display:none; }
 .app-shell .sidebar .nav-label { display:inline; }
 .app-shell .sidebar .sidebar-parent { display:grid; }
 .app-shell .sidebar .sidebar-parent > button { display:block; }
}

.schedule-page { container-type:inline-size; container-name:calendar; }
@container calendar (max-width:1100px) {
  .schedule-page .schedule-desktop { display:none; }
  .schedule-page .schedule-agenda.schedule-mobile { display:grid; gap:0; background:#fff; border:1px solid var(--schedule-line); border-top:0; }
  .schedule-page .schedule-day { border:0; border-bottom:1px solid var(--schedule-line); border-radius:0; box-shadow:none; background:#fff; }
  .schedule-page .schedule-day.is-weekend { background:#f7f9fb; }
  .schedule-page .schedule-day.is-today { outline:0; box-shadow:inset 3px 0 var(--schedule-blue); }
  .schedule-page .schedule-day-head { min-height:52px; padding:8px 12px; border:0; background:transparent; }
  .schedule-page .schedule-date { color:var(--schedule-navy); }
  .schedule-page .schedule-date strong { font-size:.85rem; font-weight:600; }
  .schedule-page .schedule-day-body { padding:0 10px 10px; gap:10px; background:transparent; }
  .schedule-page .schedule-shift-wrap > .schedule-shift { padding:12px; }
  .schedule-page .schedule-card-time { font-size:.84rem; }
  .schedule-page .schedule-card-title { font-size:.94rem; }
  .schedule-page .schedule-week-detail,.schedule-page .schedule-assigned-names { font-size:.82rem; }
  .schedule-page .schedule-staffing { padding:8px 0 0; border:0; color:var(--schedule-status); }
  .schedule-page .schedule-shift-wrap .schedule-shift .schedule-staffing strong { display:inline-flex; align-items:center; min-height:28px; padding:3px 7px; border-radius:5px; background:var(--schedule-status); color:#fff; font-size:.8rem; }
  .schedule-page .schedule-shift-meta { padding:6px 0 0; }
  .schedule-page .schedule-shift-wrap > .schedule-quick-assign { position:relative; display:flex; align-items:center; justify-content:center; width:28px; min-width:28px; height:28px; min-height:28px; margin:0 8px 8px auto; padding:0; border:0; border-radius:5px; color:#111111; background:transparent; }
  .schedule-page .schedule-shift-wrap > .schedule-quick-assign > span { display:none; }
  .schedule-page .schedule-shift-wrap > .schedule-quick-assign::before { content:''; position:absolute; width:28px; height:28px; border:1px solid var(--schedule-line); border-radius:5px; background:#fff; }
  .schedule-page .schedule-shift-wrap > .schedule-quick-assign svg { position:relative; }
}
/* Area toolbars follow the calendar's navy header and shared control sizing. */
.area-toolbar:not(.schedule-toolbar) { background:#16354d; color:#fff; border-color:#16354d; }
.area-toolbar:not(.schedule-toolbar) :is(h1,h2) { color:#fff; }
.area-toolbar:not(.schedule-toolbar) :is(.eyebrow,p) { color:#d8e6f1; }
.area-toolbar:not(.schedule-toolbar) .button { background:transparent; color:#fff; border-color:#ffffff70; }
.area-toolbar:not(.schedule-toolbar) .button-primary { background:#fff; color:#16354d; border-color:#fff; }
.area-toolbar:not(.schedule-toolbar) .button:hover { background:#ffffff18; }
.area-toolbar:not(.schedule-toolbar) .button-primary:hover { background:#e9f2f8; }

/* The removed top bar no longer reserves 52px; sticky rows follow their area toolbar. */
.app-shell .watchbook-main .entry-list { overflow:clip; }
.app-shell .watchbook-main .entry-table-head { top:var(--area-toolbar-height,76px); }
.app-shell .watchbook-main .watchbook-date-separator { top:calc(var(--area-toolbar-height,76px) + var(--area-table-height,32px)); }