/* Shared application chrome. Loaded after page styles, including the admin theme. */
html { scroll-padding-top: 80px; }
body { -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font-family: var(--font-sans); }
button, .btn, .button, .landing-button, input[type="submit"], .tab, summary {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
button, .btn, input[type="submit"], select { touch-action: manipulation; }
.btn, .button { border-radius: var(--radius-md); font-weight: 600; }
.btn-secondary { background: var(--color-surface); color: var(--color-text); --bs-btn-color: var(--color-text); border: 1px solid var(--color-border); }
.ui-icon { width: 21px; height: 21px; flex: 0 0 21px; vertical-align: middle; pointer-events: none; }
.ui-icon-control { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.ui-control-label { white-space: nowrap; }
.ui-line-notice {
  display: block; min-width: 0; max-width: 100%; white-space: nowrap;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
.ui-line-notice br { display: none; }
.ui-line-notice::-webkit-scrollbar { display: none; }
.ui-line-notice > * { white-space: nowrap; }
.approval-summary > div { display: inline; margin-right: 12px; }
.ui-alert { align-items: center; min-width: 0; border-radius: var(--radius-md); }
.ui-alert > div { flex: 1; min-width: 0; }
.ui-alert__icon { flex: 0 0 auto; }
.ui-line-notice:focus-visible { outline-offset: -2px; }

/* One continuous vertical page, with horizontal movement only for wide tables. */
.app-main { height: auto; min-height: calc(100dvh - 64px); overflow: visible; padding: 20px; }
.app-content { width: 100%; max-width: 800px; margin: 0 auto; padding: 20px 16px 28px; }
.app-content.team-mounted { max-width: none; padding: 20px 16px 28px; }
.admin-layout { height: auto; align-items: start; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
.grid-panel, .side-panel { min-width: 0; height: auto; max-height: none; }
.grid-panel { border: 0; border-radius: var(--radius-lg); background: var(--color-surface); }
.side-tab-panel, .approval-log { max-height: none; overflow: visible; }
.grid-wrap, .team-grid-wrap {
  flex: none; height: auto; max-height: none; min-height: 0;
  overflow-x: auto; overflow-y: hidden; border: 0; border-radius: 0;
  max-width: 100%; -webkit-overflow-scrolling: touch;
}
.month-cal-wrap:not(.hidden) { overflow: visible; }
.team-schedule-grid th, .team-schedule-grid td { border-color: var(--color-border-subtle); }
.team-schedule-grid .col-name { background: #f8fafc; }
.team-schedule-grid thead th, .team-schedule-grid thead .col-name { background: #eef3f7; }
.team-schedule-grid thead, .schedule-grid thead { position: relative; z-index: 7; }
.team-schedule-grid .job-group .job-group-label,
.team-schedule-grid .job-group .job-group-span { background: #e4f1f6; }
.team-schedule-grid .job-group-manager .job-group-label,
.team-schedule-grid .job-group-manager .job-group-span { background: var(--color-brand); }

/* Compact, persistent navigation with room for device safe areas. */
.mobile-header {
  height: auto; min-height: 64px; padding: env(safe-area-inset-top, 0px) 20px 0;
  background: rgba(255, 255, 255, .97); color: var(--color-text);
  border-bottom: 1px solid var(--color-border-subtle); gap: 8px; z-index: 30;
}
.mobile-header__title { white-space: nowrap; font-size: 1.05rem; letter-spacing: -.02em; }
.mobile-header__actions { gap: 4px; min-width: 0; }
.mobile-header__user { color: var(--color-text-muted); font-size: .75rem; max-width: 9rem; }
.mobile-header .ui-icon-control {
  border: 0; border-radius: 12px; color: var(--color-brand-dark); background: transparent;
  width: 44px; height: 44px; padding: 0; flex: 0 0 44px;
}
.mobile-header .ui-icon-control:hover { background: #edf5f8; }
.app-body { padding-bottom: calc(76px + var(--safe-b)); }
.tab-bar {
  height: calc(72px + var(--safe-b)); padding: 6px max(12px, env(safe-area-inset-right, 0px)) var(--safe-b);
  background: rgba(255, 255, 255, .98); border-top: 1px solid var(--color-border-subtle);
  box-shadow: 0 -4px 24px rgba(24, 48, 66, .04); gap: 6px;
}
.tab.ui-icon-control { display: flex; flex-direction: column; gap: 4px; border-radius: 14px; font-size: .7rem; }
.tab.active { background: #edf6fa; color: var(--color-brand-dark); }
.tab .ui-icon { width: 23px; height: 23px; }
.tab-badge { right: calc(50% - 26px); }
.card { border: 1px solid var(--color-border-subtle); box-shadow: none; border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px; }
.card h2 { font-size: 1rem; }
.card-hero { border: 0; background: #eaf5fa; }
.cal-header, .team-date-nav { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.cal-header > span { min-width: 0; font-size: 1.1rem; font-weight: 700; text-align: center; white-space: nowrap; }
.cal-header > span .muted, .cal-header > span .badge-finalized { font-size: .7rem; font-weight: 500; }
.cal-header .btn, .team-date-nav .btn { flex: 0 0 44px; width: 44px; padding: 0; border-radius: 12px; }
.cal-header #cal-prev .ui-control-label, .cal-header #cal-next .ui-control-label,
#team-date-prev .ui-control-label, #team-date-next .ui-control-label,
#month-prev .ui-control-label, #month-next .ui-control-label { display: none; }
#team-date-today, #cal-today, #month-today {
  flex: 0 0 auto; width: auto; padding: 0 10px; min-height: 44px;
}
#team-date-today .ui-control-label, #cal-today .ui-control-label, #month-today .ui-control-label {
  display: inline;
}
.cal-view-toggle, .team-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: #e9eff4; margin-bottom: 12px; }
.cal-view-toggle .btn, .team-tabs button { flex: 1; border: 0; border-radius: 10px; background: transparent; font-size: .85rem; padding: 8px; }
.cal-view-toggle .btn.active, .team-tabs button.active { background: #fff; color: var(--color-brand-dark); box-shadow: var(--shadow-sm); }
.cal-grid--month { gap: 4px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-day--rich { min-width: 0; min-height: 82px; padding: 8px 3px 4px; border-radius: 12px; border-color: var(--color-border-subtle); }
.cal-day--rich .cal-day-num { font-size: .82rem; margin-left: 3px; }
.cal-day.today { border: 2px solid var(--color-brand); background: #edf7fb; }
.cal-day.other { opacity: .5; }
.cal-day-chips { gap: 3px; margin-top: 6px; }
.cal-chip { font-size: .65rem; line-height: 1.4; color: #173345; }
.cal-chip--request { color: #80571b; }
.cal-feed-details { border: 1px solid var(--color-border-subtle); border-radius: 14px; padding: 14px; background: #fff; margin-top: 24px; }
.cal-feed-details > summary { cursor: pointer; color: var(--color-text-muted); font-weight: 600; }
.cal-legend, .team-job-filters, .team-legend, .legend, .side-tabs,
.toolbar-actions, .modal-actions, .rule-weekday-presets, .rule-list-actions,
.secondment-actions, .admin-seg-actions, .feedback-actions, .sheet-actions {
  flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow-x: auto;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.cal-legend > *, .team-job-filters > *, .team-legend > *, .legend > *,
.side-tabs > *, .toolbar-actions > *, .modal-actions > *, .sheet-actions > * { flex-shrink: 0; }
.profile-actions, .share-actions, .staff-card .staff-actions, .qual-list,
.management-actions, .rule-weekday-checks, .cr-actions, .email-inline {
  display: flex; flex-wrap: nowrap; gap: 8px; max-width: 100%; overflow-x: auto;
  scrollbar-width: thin; align-items: center;
}
.profile-actions > *, .share-actions > *, .staff-actions > *, .qual-list > *,
.management-actions > *, .cr-actions > * { flex-shrink: 0; }
.management-actions { margin-top: 12px; }
.management-actions input { min-width: 140px; }
.management-header {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap; overflow-x: auto;
}
.management-header h1 { margin: 0; font-size: 1rem; }
.management-header > * { flex-shrink: 0; }
.management-header a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-brand); }
.management-header .ui-icon-control { width: 44px; min-width: 44px; height: 44px; padding: 0; }
.email-inline > * { flex-shrink: 0; }
.management-page .staff-card { border-color: var(--color-border-subtle); border-radius: 16px; padding: 16px; }
.profile-card { padding-top: 72px; }
.feedback-fab.ui-icon-control { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%; }
.feedback-fab .ui-control-label { display: none; }
.msg-item { display: block; min-width: 0; max-width: 100%; }
.msg-item .user-text { display: block; white-space: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.msg-item .msg-meta { flex-wrap: nowrap; white-space: nowrap; }
.landing-hero__copy, .landing-feature-card, .landing-step, .landing-section__inner { min-width: 0; }
.landing-hero__actions { flex-wrap: nowrap; overflow-x: auto; }
.landing-hero__actions > * { flex-shrink: 0; }
.team-date-label { min-width: 0; white-space: nowrap; }
.team-banner { font-size: .8rem; background: #edf5f9; border: 0; border-radius: 10px; }
.team-job-btn { border-radius: 22px; padding: 8px 16px; }
.team-day-job { border-radius: 10px; padding: 10px 12px; }
.team-day-row { padding: 12px; }

/* Manager pages share the same spacing, controls and document scrolling. */
.app-header { height: auto; min-height: 64px; padding: 10px 20px; gap: 16px; background: var(--color-surface); color: var(--color-text); border-bottom: 1px solid var(--color-border-subtle); }
.app-header__brand { white-space: nowrap; font-size: 1rem; color: var(--color-brand-dark); overflow: hidden; text-overflow: ellipsis; }
.app-header__controls { flex-wrap: nowrap; gap: 8px; min-width: 0; }
.app-header__controls > label { white-space: nowrap; font-size: .75rem; }
.app-header__controls select { max-width: 160px; border-color: var(--color-border); border-radius: 10px; color: var(--color-text); background: #f5f8fa; }
.app-header__user { flex-wrap: nowrap; gap: 4px; }
.app-header__nav { gap: 4px; opacity: 1; }
.app-header__nav .ui-icon-control { position: relative; }
#profile-req-badge:not(:empty) { position: absolute; right: 0; top: 0; }
.app-header__nav a, .app-header .logout-button {
  width: auto; min-width: 44px; height: 44px; min-height: 44px; padding: 0 10px;
  color: var(--color-brand-dark); border: 0; border-radius: 10px; background: #f3f7fa; text-decoration: none;
}
.management-header .ui-icon-control, .mobile-header .ui-icon-control {
  width: auto; min-width: 44px; height: 44px; padding: 0 10px;
}
.month-nav { flex-wrap: nowrap; white-space: nowrap; }
.month-nav button { color: var(--color-brand-dark); border-color: var(--color-border); background: var(--color-surface); }
.toolbar { position: static; padding: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr); border-color: var(--color-border-subtle); }
.toolbar .legend { max-width: 100%; align-items: center; }
.toolbar-actions { grid-column: 1 / -1; padding-bottom: 4px; }
.toolbar-actions .btn { font-size: .8rem; }
.side-tabs { padding: 4px; background: #e9eff4; border-radius: 12px; }
.side-tab { white-space: nowrap; min-height: 44px; border-radius: 8px; }
.side-tab.active { background: #fff; color: var(--color-brand-dark); }
.panel { border: 1px solid var(--color-border-subtle); border-radius: 14px; box-shadow: none; }
.admin-month-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.admin-month-day { min-width: 0; overflow: hidden; border-radius: 10px; }
.admin-month-summary { white-space: nowrap; }
.login-card { max-width: 420px; padding: 28px; border: 1px solid var(--color-border-subtle); border-radius: 24px; box-shadow: var(--shadow-md); }
.login-card input { background: #f8fafc; border-radius: 12px; }
.login-back { white-space: nowrap; }
.profile-main { max-width: 800px; margin: 0 auto; }
.error-page { display: grid; place-content: center; min-height: 100dvh; margin: 0; padding: 24px; font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); }
.error-page a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-brand); }

@media (min-width: 768px) {
  .tab-bar { justify-content: center; }
  .tab { max-width: 180px; }
  .ui-line-notice, .ui-line-notice > * { white-space: normal; }
  .ui-line-notice { overflow: visible; }
  .ui-line-notice br { display: initial; }
}
@media (max-width: 1100px) {
  .app-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .app-header__controls { grid-row: 2; grid-column: 1 / -1; overflow-x: auto; }
  .app-header__user { grid-column: 2; grid-row: 1; }
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
  .grid-panel { order: 0; min-height: 0; }
  .side-panel { order: 1; max-height: none; }
}
@media (max-width: 767px) {
  .app-main { padding: 12px; overflow: visible; }
  .app-header { padding: 8px 12px; gap: 8px; }
  .app-header__brand { font-size: .85rem; }
  .app-header__user #user-display { display: none; }
  .app-header__nav a, .app-header .logout-button,
  .management-header .ui-icon-control, .mobile-header .ui-icon-control {
    width: 40px; min-width: 40px; padding: 0;
  }
  .app-header__nav .ui-control-label,
  .app-header .logout-button .ui-control-label,
  .management-header .ui-control-label,
  .mobile-header .ui-control-label { display: none; }
  .app-header__nav { gap: 0; }
  .app-header__controls .status-badge, .app-header__controls .ui-save-status { flex: 0 0 auto; white-space: nowrap; }
  .toolbar-actions .ui-icon-control { min-width: 44px; height: 44px; padding: 8px; gap: 3px; }
  /* Labels stay visible so duplicate icons remain distinguishable (C-A1). */
  .toolbar-actions .ui-icon-control .ui-control-label { display: inline; font-size: .65rem; }
  .mobile-header { padding-left: 12px; padding-right: 8px; }
  .mobile-header__user { max-width: 5rem; }
  .app-content, .app-content.team-mounted { padding: 14px 12px 24px; }
  .cal-day--rich { min-height: 72px; }
  .cal-legend { font-size: .7rem; gap: 10px; }
  .ui-line-notice { font-size: .78rem; }
  .card { padding: 16px; }
  .feedback-fab { bottom: calc(86px + var(--safe-b)); }
}
@media (max-width: 374px) {
  .mobile-header__user { display: none; }
  .mobile-header__title { font-size: .9rem; }
  .app-header__brand { font-size: .7rem; }
  .app-header__nav a, .app-header .logout-button { width: 36px; min-width: 36px; }
  .cal-grid--month { gap: 2px; }
  .cal-day--rich { padding-left: 1px; padding-right: 1px; }
  .cal-header > span { font-size: 1rem; }
}
@media print {
  .mobile-header, .tab-bar, .toolbar, .app-header, .feedback-fab { display: none; }
  .app-body { padding: 0; }
  .grid-wrap, .team-grid-wrap, .ui-line-notice { overflow: visible; }
}