/* ===== シフパカ — Calm & Readable Design System =====
   Palette sampled directly from logo.png: sage green (~#7da667) and warm
   orange (~#f49c2e). --primary/--secondary here are darkened enough off
   those raw brand tones to keep white-on-color button text readable;
   the true brand hues live in --brand-green/--brand-orange for icons,
   illustrations and other non-text-bearing surfaces. */
:root {
  --bg-main: #f4f1e7;
  --bg-card: #ffffff;
  --bg-soft: #faf8f2;
  --border-color: #e2ddce;
  --border-color-strong: #cec7b0;

  --text-main: #2b2a1f;
  --text-muted: #6d6a58;
  --text-faint: #9a9581;

  --primary: #4f7d3f;
  --primary-dark: #3a5e2e;
  --primary-soft: #e6efdf;
  --brand-green: #7da667;
  --secondary: #cc7c17;
  --secondary-soft: #fbe8ce;
  --brand-orange: #f49c2e;
  --danger: #b5564a;
  --danger-soft: #f6e5e2;

  --avail-bg: #e6efdf;
  --avail-color: #3a5e2e;
  --off-bg: #f0ece1;
  --off-color: #8a8371;
  --none-bg: #f9f7f1;
  --none-color: #b7b09c;

  --shadow-sm: 0 1px 2px rgba(45, 38, 20, 0.06), 0 1px 1px rgba(45, 38, 20, 0.04);
  --shadow-md: 0 8px 24px rgba(45, 38, 20, 0.09), 0 2px 6px rgba(45, 38, 20, 0.05);
  --shadow-lg: 0 16px 40px rgba(45, 38, 20, 0.14);
  --focus-ring: 0 0 0 3px var(--primary-soft);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --font-base: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  font-size: var(--font-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

::selection { background: var(--primary-soft); color: var(--primary-dark); }

/* ===== Login Screen ===== */
.screen { min-height: 100vh; }
#screenLogin, #screenSignup, #screenVerifySent, #screenForgot, #screenReset,
#screenSetName, #screenRoleChoice, #screenCreateStore, #screenJoinStore,
#screenPending, #screenOnboarding {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 24px;
  background: var(--bg-main);
}
.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.login-logo {
  width: 64px; height: 64px;
  background: var(--primary);
  color: #fff;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto 18px;
}
.login-logo-img { width: 88px; height: 88px; object-fit: contain; margin: 0 auto 14px; display: block; }

/* ===== Onboarding (first launch only) ===== */
.onboarding-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 44px 36px 28px;
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.onboarding-slide { display: none; min-height: 300px; }
.onboarding-slide.active { display: block; animation: tabFadeIn 0.25s ease; }
.onboarding-logo { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 20px; }
.onboarding-icon {
  width: 84px; height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
}
.onboarding-title { font-size: 21px; font-weight: 900; margin-bottom: 12px; }
.onboarding-text { font-size: 14.5px; color: var(--text-muted); line-height: 1.7; }
.onboarding-dots { display: flex; justify-content: center; gap: 8px; margin: 28px 0 20px; }
.onboarding-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-color-strong);
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
}
.onboarding-dot.active { background: var(--secondary); width: 22px; border-radius: 4px; }
.onboarding-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onboarding-actions #onboardingNextBtn { flex: 1; justify-content: center; background: var(--secondary); }
.onboarding-actions #onboardingNextBtn:hover { background: var(--secondary-dark, #a8630f); }
.onboarding-actions #onboardingSkipBtn { flex-shrink: 0; }
.login-title { font-size: 26px; font-weight: 900; margin-bottom: 6px; }
.login-tagline { font-size: 14px; font-weight: 700; color: var(--secondary); margin-bottom: 14px; }
.login-logo-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.login-icon-img { width: 56px; height: 56px; object-fit: contain; }
.login-wordmark-text { font-size: 34px; font-weight: 900; color: var(--primary); letter-spacing: -0.03em; }
.login-wordmark-text .accent { color: var(--secondary); }
.login-logo-lockup { height: 54px; width: auto; object-fit: contain; }
.login-sub { color: var(--text-muted); font-size: 14.5px; margin-bottom: 28px; }
.login-card .form-group { text-align: left; margin-bottom: 18px; }
.login-error {
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  margin-top: 14px;
  font-weight: 500;
}
.login-switch-link {
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--text-muted);
  font-size: 12.5px;
}
.login-divider::before, .login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}
.personal-code-display {
  margin-top: 18px;
  padding: 20px;
  background: var(--primary-soft);
  border: 2px dashed var(--primary);
  border-radius: var(--radius-md);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--primary-dark);
  text-align: center;
}
.login-switch-link a { color: var(--primary-dark); font-weight: 700; text-decoration: none; }
.login-switch-link a:hover { text-decoration: underline; }

.login-hint {
  margin-top: 26px;
  background: var(--bg-soft);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.7;
}
.login-hint i { color: var(--secondary); margin-right: 4px; }

/* ===== Role choice (オーナーで参加 / スタッフで参加) =====
   Two big targets rather than a radio group: this is a one-time, consequential
   fork on a phone, so each option gets room to explain itself. */
.role-choice-btn {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color-strong);
  border-radius: var(--radius-md);
  padding: 18px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.role-choice-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.role-choice-btn:active { transform: scale(0.99); }
.role-choice-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
}
.role-choice-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.role-choice-title { font-size: 15.5px; font-weight: 800; color: var(--text-main); }
.role-choice-desc { font-size: 12.5px; font-weight: 500; color: var(--text-muted); line-height: 1.6; white-space: normal; }

/* The invite key is read aloud or copied by hand off a phone screen, so it
   gets monospace-ish spacing and is never lowercased by the browser. */
.invite-key-input {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 800;
  text-align: center;
  font-size: 19px;
}

/* ===== Upgrade prompt (free auto-generate allowance used up) ===== */
.upgrade-plan-card {
  background: var(--primary-soft);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin: 4px 0 16px;
}
.upgrade-plan-name { font-size: 15.5px; font-weight: 900; color: var(--primary-dark); margin-bottom: 10px; }
.upgrade-plan-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.upgrade-plan-list li { font-size: 13.5px; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.upgrade-plan-list i { color: var(--primary); font-size: 12px; }

.store-switch-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.store-switch-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border: 1.5px solid var(--border-color-strong);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.store-switch-item:hover { background: var(--primary-soft); border-color: var(--primary); transform: translateY(-1px); }
.store-switch-name { font-weight: 800; font-size: 15px; }
.store-switch-role { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* ===== Header ===== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 0 rgba(45,38,20,0.03), 0 2px 10px rgba(45,38,20,0.04);
  padding: 14px 28px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand-section { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo-icon { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; }
.brand-logo {
  width: 42px; height: 42px;
  background: var(--primary);
  color: #fff;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
.brand-logo-img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.brand-title { min-width: 0; }
.brand-title h1 { font-size: 18px; font-weight: 900; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-title p { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Mobile-first action button stack (e.g. 自動作成/クリア/確定/PDF出力 on the
   予定シフト tab) — one full-width button per row instead of a cramped
   wrapping row, since this app targets a phone screen first. */
.header-actions-col { flex-direction: column; align-items: stretch; margin-bottom: 16px; }
.header-actions-col .btn { justify-content: center; width: 100%; }

/* Hidden on screen; only shown by the @media print block below, as a
   printout title (screen already has this info in the header/summary bar,
   which print hides). */
.print-title { display: none; }

.date-navigator {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 5px 6px;
}
.current-month { font-weight: 700; font-size: 14.5px; min-width: 96px; text-align: center; }
.nav-btn {
  width: 30px; height: 30px;
  border: none; border-radius: 999px;
  background: transparent;
  color: var(--primary-dark);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.nav-btn:hover { background: var(--primary-soft); }
.nav-btn:active { transform: scale(0.94); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn:disabled:active { transform: none; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--bg-card); color: var(--text-main); border: 1.5px solid var(--border-color-strong); }
.btn-secondary:hover { background: var(--bg-soft); border-color: var(--text-faint); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; border: 1.5px solid var(--danger); color: var(--danger); }
.btn-ghost:hover { background: var(--danger-soft); }
.btn-block { width: 100%; justify-content: center; }
.btn-lg { padding: 13px 20px; font-size: 15.5px; border-radius: var(--radius-md); }

/* ===== Layout / Tabs ===== */
.main-content { max-width: 1400px; margin: 0 auto; padding: 22px 28px calc(90px + env(safe-area-inset-bottom)); }

.tabs {
  display: flex; gap: 2px; margin-bottom: 20px;
  overflow-x: auto;
  border-bottom: 2px solid var(--border-color);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  display: flex; align-items: center; gap: 7px;
  font-family: inherit;
  font-size: 14.5px; font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 11px 16px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
}
.tab-btn i { font-size: 13px; opacity: 0.85; }
.tab-btn:hover { color: var(--primary-dark); }
.tab-btn.active { color: var(--primary-dark); border-bottom-color: var(--primary); }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tabFadeIn 0.18s ease; }
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Bottom tab bar (シフパカ — mobile-app-first navigation) =====
   Always fixed to the bottom, not just under a mobile media query: this
   product targets an iPhone app first, so the bottom-tab-bar IS the
   primary nav rather than a squeezed-down fallback of a desktop top-bar. */
.bottom-tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -4px 16px rgba(45,38,20,0.08);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.bottom-tab-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: inherit;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 4px;
  cursor: pointer;
  color: var(--text-faint);
  transition: background 0.15s, color 0.15s;
}
.bottom-tab-btn i { font-size: 19px; }
.bottom-tab-btn span { font-size: 11px; font-weight: 700; letter-spacing: -0.01em; }
.bottom-tab-btn:hover { background: var(--bg-soft); }
.bottom-tab-btn.active { color: var(--primary-dark); background: var(--primary-soft); }

/* Pill-style sub-navigation within the シフト tab (予定シフト/希望一覧/実績・人件費) */
.subtab-nav {
  display: flex; gap: 8px; margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subtab-nav::-webkit-scrollbar { display: none; }
.subtab-btn {
  display: flex; align-items: center; gap: 6px;
  font-family: inherit;
  font-size: 13.5px; font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.subtab-btn i { font-size: 12px; }
.subtab-btn:hover { border-color: var(--border-color-strong); }
.subtab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.shift-subtab-panel { display: none; }
.shift-subtab-panel.active { display: block; animation: tabFadeIn 0.18s ease; }

/* Menu tab list rows (利用規約/プライバシー/お問い合わせ/アカウント) */
.menu-list-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  font-family: inherit;
  font-size: 14.5px; font-weight: 700;
  color: var(--text-main);
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-color);
  padding: 14px 4px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-list-row:first-child { border-top: none; }
.menu-list-row i:first-child { color: var(--primary-dark); width: 18px; text-align: center; }
.menu-list-chevron { margin-left: auto; color: var(--text-faint); font-size: 12px; }
.menu-version { text-align: center; color: var(--text-faint); font-size: 12.5px; margin: 18px 0 6px; }

/* ===== Cards ===== */
.card-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin-bottom: 18px;
}
.panel-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
/* .card-panel sections that are <details>/<summary> (collapsible on
   mobile — see #adminCoverageTab) reuse .panel-header on the <summary>
   itself; strip the native disclosure marker and draw our own chevron
   that flips when open, so it still reads as a normal card header when
   the section isn't collapsible (desktop leaves everything open). */
summary.panel-header { cursor: pointer; list-style: none; user-select: none; }
summary.panel-header::-webkit-details-marker { display: none; }
summary.panel-header::after {
  content: '\f078'; /* fa-chevron-down */
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: 12px; color: var(--text-faint);
  transition: transform 0.15s;
  flex-shrink: 0;
}
details[open] > summary.panel-header::after { transform: rotate(180deg); }
.panel-title { font-size: 16.5px; font-weight: 700; display: flex; align-items: center; gap: 9px; letter-spacing: -0.01em; }
.panel-title i {
  color: var(--primary-dark);
  width: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14.5px;
  flex-shrink: 0;
}
.panel-note { color: var(--text-muted); font-size: 13.5px; margin-bottom: 16px; line-height: 1.7; }

/* ===== Forms ===== */
.form-group { margin-bottom: 14px; }
.form-group.inline { display: flex; align-items: center; gap: 10px; }
.pattern-picker { margin-bottom: 4px; }
.pattern-picker .form-control { max-width: 260px; }
.form-group.inline .form-label { margin-bottom: 0; flex-shrink: 0; white-space: nowrap; }
.form-group.inline .form-control { flex: 1 1 auto; width: auto; min-width: 0; }
.form-label { display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.form-control {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 10px 13px;
  border: 1.5px solid var(--border-color-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-main);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); }
.form-control-lg { padding: 13px 16px; font-size: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.form-group-wide { grid-column: 1 / -1; }

.role-checks { display: flex; gap: 10px; flex-wrap: wrap; }
.role-check-item {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-soft);
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.role-check-item:has(input:checked) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.role-check-item input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }

/* ===== Settings row-list (business hours / late-night — aligned single-column rows) ===== */
.settings-row-list {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.settings-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}
.settings-row:last-child { border-bottom: none; }
.settings-row:nth-child(even) { background: var(--bg-soft); }
.settings-row-label { font-weight: 700; font-size: 14px; color: var(--text-main); }
.settings-row-control { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.settings-row-control .form-control { width: auto; min-width: 128px; }
.settings-row-sep { color: var(--text-faint); font-size: 13.5px; font-weight: 600; flex-shrink: 0; }

/* ===== Card-grid editors (roles / timeslots — aligned into rows/columns) ===== */
.timeslot-editor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.timeslot-card {
  background: var(--bg-soft);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.timeslot-card .form-group { margin-bottom: 10px; }
.timeslot-card .form-group:last-child { margin-bottom: 0; }
.timeslot-card .btn { margin-top: auto; }
/* Flex items default to min-width:auto, which for a native time input is
   its intrinsic "HH:MM + spinner" width — that can't shrink below ~90px no
   matter what width:100% says, so on a narrow card the two inputs + "〜"
   separator overflow the card's edge instead of shrinking to fit. Letting
   them wrap (and giving them an explicit shrinkable min-width) keeps both
   inputs inside the card on narrow screens instead. */
.timeslot-time-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.timeslot-time-row input[type="time"] { min-width: 0; flex: 1 1 90px; }
.timeslot-editor > .btn {
  min-height: 64px;
  border: 1.5px dashed var(--border-color-strong);
  background: transparent;
  color: var(--text-muted);
  justify-content: center;
  border-radius: var(--radius-md);
}
.timeslot-editor > .btn:hover { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }

/* ===== Break tier rows (flex, not grid — a grid track's fixed width
   doesn't clip its content, so an unshrinkable neighbor (the nowrap unit
   text) could render past its column and visually overlap the arrow icon
   next to it. Flex avoids that: every item shrinks or wraps in normal
   flow instead of bleeding into a neighboring fixed-size track.) ===== */
.break-tier-list {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.break-tier-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}
.break-tier-row:last-child { border-bottom: none; }
.break-tier-row:nth-child(even) { background: var(--bg-soft); }
.tier-field { display: flex; align-items: center; gap: 4px; min-width: 0; flex-shrink: 1; }
.tier-field .form-control { width: 56px; min-width: 0; flex-shrink: 1; text-align: center; padding-left: 4px; padding-right: 2px; }
.tier-unit { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.tier-arrow { color: var(--text-faint); font-size: 13px; flex-shrink: 0; }
.break-tier-row .icon-btn { margin-left: auto; flex-shrink: 0; }

/* ===== Data Table (staff / coverage) ===== */
.staff-table-wrap, .coverage-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Force a real minimum width so narrow screens get a horizontal scrollbar
   instead of the browser compressing columns until cell text wraps. */
.staff-table-wrap .data-table { min-width: 760px; }
.coverage-grid-wrap .data-table { min-width: 420px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table td { white-space: nowrap; }
.data-table td.cell-wrap { white-space: normal; }
.data-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--bg-soft); }
.staff-name-cell { display: inline-flex; align-items: center; gap: 10px; }
.avatar-circle {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12.5px;
  flex-shrink: 0;
}
.avatar-circle.av-1 { background: var(--primary-soft); color: var(--primary-dark); }
.avatar-circle.av-2 { background: var(--secondary-soft); color: #8a5f22; }
.avatar-circle.av-3 { background: #e5e9f5; color: #3f4f8a; }
.avatar-circle.av-4 { background: #f5e5ea; color: #8a3f5f; }
.role-tag {
  display: inline-block;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 11.5px; font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  margin: 2px 3px 2px 0;
}
.employment-badge {
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.employment-badge.type-社員 { background: var(--secondary-soft); color: #8a5f22; }
.employment-badge.type-アルバイト { background: var(--primary-soft); color: var(--primary-dark); }
.icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color-strong);
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); }

/* ===== Coverage table ===== */
.coverage-controls { margin-bottom: 14px; }
.coverage-table th, .coverage-table td { text-align: center; }
.coverage-table td input {
  width: 56px; text-align: center;
  padding: 7px 4px;
  border: 1.5px solid var(--border-color-strong);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
}
.coverage-total { font-weight: 800; color: var(--text-muted); }
.coverage-total.coverage-total-warn { color: #8a5f22; }

/* ===== Requests list (staff input) ===== */
.request-list { display: flex; flex-direction: column; gap: 8px; }
.request-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px;
  background: var(--bg-soft);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
}
.request-row.is-weekend-sun .request-date-label { color: var(--danger); }
.request-row.is-weekend-sat .request-date-label { color: #3f6fae; }
.request-date-label { font-weight: 800; min-width: 92px; font-size: 14.5px; }
.request-toggle { display: flex; gap: 8px; }
.toggle-pill {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--border-color-strong);
  background: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.toggle-pill.active-work { background: var(--avail-bg); color: var(--avail-color); border-color: var(--avail-color); }
.toggle-pill.active-off { background: var(--off-bg); color: var(--off-color); border-color: var(--off-color); }
.request-times { display: flex; align-items: center; gap: 8px; }
.request-times input { width: 118px; }
.request-times.hidden { display: none; }

/* ===== Help requests (cross-store) ===== */
.help-request-card {
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
}
.help-request-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.help-request-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.help-request-date { font-weight: 800; font-size: 15px; }
.help-request-notes { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.help-offer-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.help-offer-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}
.help-offer-actions { display: flex; gap: 6px; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.status-badge { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.status-badge.status-open { background: var(--avail-bg); color: var(--avail-color); }
.status-badge.status-filled { background: var(--primary-soft); color: var(--primary-dark); }
.status-badge.status-cancelled { background: var(--none-bg); color: var(--text-faint); }
.status-badge.status-offered { background: var(--secondary-soft); color: #8a5f22; }
.status-badge.status-confirmed { background: var(--primary-soft); color: var(--primary-dark); }
.status-badge.status-declined, .status-badge.status-withdrawn { background: var(--none-bg); color: var(--text-faint); }
.status-badge.status-deadline-ok { background: var(--avail-bg); color: var(--avail-color); }
.status-badge.status-deadline-soon { background: var(--secondary-soft); color: #8a5f22; }
.status-badge.status-deadline-passed { background: var(--danger-soft); color: var(--danger); }

.deadline-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}

.eligibility-table th, .eligibility-table td { text-align: center; }
.eligibility-table td input, .eligibility-table th { vertical-align: middle; }

/* ===== Confirmed shift (staff view) ===== */
.confirmed-summary {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
/* Neutral by default — a stat isn't inherently "good" just for existing, so
   it doesn't get the same green as a real positive-status indicator. Color
   is reserved for .warn/.danger, where it actually means something. */
.summary-chip {
  background: var(--bg-soft);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 13px 18px;
  font-weight: 700;
  min-width: 130px;
  flex: 1 1 130px;
}
.summary-chip .summary-label { font-size: 12px; font-weight: 700; color: var(--text-muted); display: block; margin-bottom: 4px; }
.summary-chip .summary-value { font-size: 19px; }
.confirmed-list { display: flex; flex-direction: column; gap: 8px; }
.confirmed-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  border: 1px solid var(--border-color);
  font-weight: 600;
}
.confirmed-row .c-off { color: var(--text-faint); }
.empty-notice {
  text-align: center;
  padding: 30px;
  color: var(--text-muted);
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  font-weight: 600;
}

/* ===== Legend ===== */
.legend-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.legend-chip { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.legend-avail { background: var(--avail-bg); color: var(--avail-color); }
.legend-off { background: var(--off-bg); color: var(--off-color); }
.legend-none { background: var(--none-bg); color: var(--none-color); border: 1px dashed var(--border-color-strong); }

/* ===== Schedule Grid (overview + admin editor) ===== */
.schedule-scroll { overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; }
.schedule-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.schedule-table th, .schedule-table td {
  border: 1px solid var(--border-color);
  padding: 8px 6px;
  text-align: center;
  white-space: nowrap;
}
.schedule-table thead th {
  background: var(--bg-soft);
  font-weight: 800;
  position: sticky; top: 0; z-index: 2;
}
.schedule-table thead th:first-child, .schedule-table tbody td:first-child {
  position: sticky; left: 0; z-index: 3;
  background: var(--bg-card);
  text-align: left;
  font-weight: 800;
  min-width: 124px;
}
.schedule-table thead th:first-child { z-index: 4; background: var(--bg-soft); }
.day-header { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.day-header .day-name.sun { color: var(--danger); }
.day-header .day-name.sat { color: #3f6fae; }

.status-cell { cursor: pointer; border-radius: 8px; padding: 6px 4px; font-weight: 700; min-width: 58px; }
.status-avail { background: var(--avail-bg); color: var(--avail-color); }
.status-off { background: var(--off-bg); color: var(--off-color); }
.status-none { background: var(--none-bg); color: var(--none-color); }

.shift-cell { cursor: pointer; border-radius: 8px; padding: 6px 4px; font-weight: 700; min-width: 68px; transition: background 0.15s; }
.shift-cell:hover { filter: brightness(0.96); }
.shift-cell.cell-work { background: var(--primary-soft); color: var(--primary-dark); }
.shift-cell.cell-off { background: var(--none-bg); color: var(--text-faint); }
.shift-cell .cell-roles { font-size: 10px; font-weight: 600; opacity: 0.85; display: block; }
.shift-cell .cell-break { font-size: 9.5px; font-weight: 600; opacity: 0.75; display: block; }

.footer-total { font-weight: 800; background: var(--bg-soft); }

/* ===== Summary Bar ===== */
.summary-bar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.summary-bar .summary-chip.positive { background: var(--primary-soft); color: var(--primary-dark); border-color: transparent; }
.summary-bar .summary-chip.warn { background: var(--secondary-soft); color: #8a5f22; border-color: transparent; }
.summary-bar .summary-chip.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

/* ===== Monthly budget panel & labor-cost gauge ===== */
.budget-panel .panel-header { margin-bottom: 0; }
.budget-panel[open] .panel-header { margin-bottom: 14px; }
.budget-panel-hint {
  font-size: 12.5px; font-weight: 700; color: var(--text-faint);
  white-space: nowrap;
  margin-right: auto; /* keeps title+hint together at the left, chevron pinned right */
}
.budget-panel-hint.is-set { color: var(--primary-dark); }
.budget-panel-body { display: flex; flex-wrap: wrap; gap: 14px; }
.budget-panel-body .form-group { flex: 1 1 180px; margin-bottom: 0; }

.budget-gauge-wrap { margin: 2px 0 18px; }
.budget-gauge-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border-color);
  overflow: visible;
}
.budget-gauge-fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.35s cubic-bezier(.3,1,.4,1), background-color 0.2s;
  overflow: hidden;
}
.budget-gauge-wrap.is-warn .budget-gauge-fill { background: var(--secondary); }
.budget-gauge-wrap.is-over .budget-gauge-fill { background: var(--danger); }
.budget-gauge-target {
  position: absolute; top: -3px; bottom: -3px; left: 0%; width: 2px;
  background: var(--text-main); opacity: 0.5;
  transition: left 0.35s cubic-bezier(.3,1,.4,1);
}
.budget-gauge-target::after {
  content: '目標';
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--text-muted); white-space: nowrap;
}
.budget-gauge-caption {
  margin-top: 9px; font-size: 13px; font-weight: 700;
  color: var(--primary-dark);
}
.budget-gauge-wrap.is-warn .budget-gauge-caption { color: #8a5f22; }
.budget-gauge-wrap.is-over .budget-gauge-caption { color: var(--danger); }

.publish-status {
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  margin-bottom: 14px;
}
.publish-status.is-published { color: var(--primary-dark); }

/* ===== Warning / Shortfall panels ===== */
.shortfall-panel { margin-bottom: 16px; }
.warning-panel-title {
  font-size: 13.5px; font-weight: 800;
  color: #8a5f22;
  background: var(--secondary-soft);
  padding: 10px 14px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex; align-items: center; gap: 8px;
}
.warning-item {
  font-size: 13px;
  color: var(--text-main);
  background: #fbf5ea;
  border-left: 3px solid var(--secondary);
  padding: 9px 14px;
  border-top: 1px solid var(--border-color);
}
.warning-item:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.warning-chip-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: #fbf5ea;
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 10px 12px;
  max-height: 168px;
  overflow-y: auto;
}
.warning-chip {
  font-size: 12px; font-weight: 600;
  color: var(--text-main);
  background: #fff;
  border: 1px solid var(--secondary);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: normal;
  max-width: 100%;
  word-break: break-word;
}
.shortfall-ok {
  font-size: 13px; font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-soft);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 8px;
}

/* ===== Modal ===== */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(35, 32, 26, 0.5);
  align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  width: 100%; max-width: 520px;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.modal-title { font-size: 17.5px; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); line-height: 1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* ===== Install banner (PWA "add to home screen") ===== */
.install-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 480px;
  margin: 0 auto;
  background: var(--primary-dark);
  color: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 12px 14px 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  z-index: 150;
  font-size: 13.5px;
  font-weight: 600;
}
.install-banner i { margin-right: 4px; }
.install-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.install-banner .btn-primary { background: #fff; color: var(--primary-dark); }
.install-banner .btn-primary:hover { background: #f0efe9; }
.install-banner .modal-close { color: #fff; opacity: 0.85; }
@media (max-width: 640px) {
  .install-banner { bottom: calc(60px + env(safe-area-inset-bottom)); left: 10px; right: 10px; }
}

/* ===== Toast ===== */
.toast-container { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast {
  background: var(--primary-dark);
  color: #fff;
  padding: 13px 20px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 8px;
}
.toast.toast-error { background: var(--danger); }

/* ===============================================================
   Responsive breakpoints
   Tablet (iPad-class): <=1024px — tighten spacing, 2-col grids stay
   Mobile (phones): <=640px — bottom tab bar, single-column stacking,
   near-fullscreen modals, smaller (but still readable) type scale.
   =============================================================== */

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .main-content { padding: 20px 20px 56px; }
  .app-header { padding: 12px 20px; }
  .card-panel { padding: 18px 18px; }
  .timeslot-editor { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .schedule-table th, .schedule-table td { padding: 7px 5px; }
}

/* ----- Mobile ----- */
@media (max-width: 640px) {
  :root { --font-base: 14.5px; }

  .app-header { padding: 10px 14px; gap: 10px; }
  .brand-logo-img, .brand-logo { width: 36px; height: 36px; }
  .brand-title h1 { font-size: 15px; max-width: 46vw; }
  .brand-title p { display: none; }
  .header-actions { gap: 8px; }
  .date-navigator { padding: 4px 5px; gap: 4px; }
  .current-month { font-size: 13px; min-width: 78px; }
  .nav-btn { width: 27px; height: 27px; font-size: 12px; }
  #staffLogoutBtn span, #adminLogoutBtn span { display: none; }
  .btn { padding: 9px 12px; font-size: 13px; }

  .main-content { padding: 14px 12px 84px; }
  .card-panel { padding: 15px 14px; border-radius: var(--radius-md); margin-bottom: 14px; }
  .panel-title { font-size: 15px; }
  .panel-note { font-size: 12.5px; }

  .form-grid { grid-template-columns: 1fr; }
  .form-control { font-size: 16px; padding: 10px 12px; } /* 16px avoids iOS auto-zoom on focus */

  /* Settings rows: keep single-row alignment but shrink label column */
  .settings-row { grid-template-columns: 60px 1fr; padding: 9px 10px; gap: 6px; }
  .settings-row-label { font-size: 12px; }
  .settings-row-control { gap: 5px; }
  .settings-row-control .form-control { min-width: 0; flex: 1 1 84px; padding: 8px 6px; font-size: 14.5px; }
  .settings-row-sep { font-size: 12px; }

  .timeslot-editor { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .timeslot-card { padding: 10px 10px; }
  .timeslot-card .form-group { margin-bottom: 7px; }
  .timeslot-card .form-label { font-size: 11.5px; }
  .timeslot-card .form-control { padding: 7px 8px; } /* keeps the inherited 16px font-size on text inputs — avoids iOS auto-zoom on focus */
  .timeslot-time-row { gap: 5px; }
  .timeslot-time-row span { font-size: 12px; }
  .timeslot-card .btn-ghost { padding: 6px 8px; font-size: 12px; }
  .timeslot-editor > .btn { grid-column: 1 / -1; }

  .break-tier-row { padding: 9px 10px; gap: 6px; }
  .tier-field { gap: 3px; }
  .tier-field .form-control { width: 46px; min-width: 0; padding: 6px 2px; } /* keeps the inherited 16px font-size — avoids iOS auto-zoom on focus */
  .tier-unit { font-size: 11.5px; }
  .tier-arrow { font-size: 11px; }

  .role-checks { gap: 7px; }
  .role-check-item { padding: 7px 11px; font-size: 12.5px; }

  .data-table { font-size: 12.5px; }
  .data-table th, .data-table td { padding: 9px 8px; }

  .request-row { padding: 10px 12px; gap: 8px; }
  .request-date-label { min-width: auto; flex-shrink: 0; font-size: 13.5px; }
  .request-toggle { gap: 6px; }
  .toggle-pill { padding: 6px 10px; font-size: 11.5px; }
  .request-times input { width: 88px; }

  .confirmed-summary { gap: 8px; }
  .summary-chip { padding: 11px 14px; min-width: 0; }
  .summary-chip .summary-value { font-size: 17px; }

  .schedule-table { font-size: 11.5px; }
  .schedule-table thead th:first-child, .schedule-table tbody td:first-child { min-width: 92px; }

  /* Modal becomes a near-fullscreen sheet */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box { max-width: 100%; width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .modal-actions { position: sticky; bottom: -20px; background: #fff; padding: 10px 0 4px; margin-top: 14px; }

  /* Toast sits just below the header on mobile, not at the bottom — the
     fixed bottom tab bar already occupies that space, so a bottom toast
     would render on top of it and overlap whatever content is scrolled
     near there. Below the header (rather than covering it) keeps the
     header's own buttons tappable while the toast is showing. */
  .toast-container { left: 12px; right: 12px; bottom: auto; top: calc(66px + env(safe-area-inset-top)); }
  .toast { font-size: 13px; padding: 12px 16px; }

  /* Bottom app-bar style tab navigation. There can be anywhere from 2
     (staff, single-store) to 6+ tabs (owner admin view with billing) — if
     they all fit, space-around centers them like a normal bottom nav; once
     there are too many to fit at a readable size, it degrades to a
     horizontally scrollable bar instead of squishing icons/labels illegible. */
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    border-bottom: none;
    box-shadow: 0 -4px 16px rgba(45,38,20,0.08);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    margin-bottom: 0;
    justify-content: space-around;
    overflow-x: auto;
  }
  .tab-btn {
    flex: 1 0 68px;
    max-width: 92px;
    flex-direction: column;
    gap: 3px;
    padding: 7px 4px;
    border-bottom: none;
    border-radius: var(--radius-sm);
    margin-bottom: 0;
  }
  .tab-btn i { font-size: 16.5px; opacity: 1; color: var(--text-faint); }
  .tab-btn span { font-size: 10.5px; letter-spacing: -0.01em; }
  .tab-btn.active { background: var(--primary-soft); }
  .tab-btn.active i { color: var(--primary-dark); }
  .main-content { padding-bottom: 90px; }
}

@media (max-width: 380px) {
  .current-month { min-width: 66px; }
  .brand-title h1 { max-width: 38vw; }
}

/* ===== Notifications & Badges ===== */
.position-relative { position: relative !important; }
.notification-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--danger);
  color: #fff;
  font-size: 10px; font-weight: 800;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg-card);
}
.notification-list { display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto; }
.notification-item {
  background: var(--bg-soft);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13.5px;
}
.notification-item.unread { border-left: 4px solid var(--primary); background: var(--primary-soft); }
.notification-time { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; display: block; }

/* ===== Shift Trade Cards ===== */
.trade-card {
  background: var(--bg-soft);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.trade-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.trade-info { font-weight: 800; font-size: 14.5px; }
.trade-reason { font-size: 13px; color: var(--text-muted); background: var(--bg-card); padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); margin: 8px 0; }
.trade-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }

/* ===== Print Styles (A4 Landscape) — the app's "PDF出力" IS this: print()
   with a printer destination of "Save as PDF"/iOS's print-preview share
   sheet, which renders Japanese text correctly via system fonts without
   needing to embed a font in a PDF library. See exportPdf() in script.js. ===== */
@media print {
  body { background: #fff !important; color: #000 !important; font-size: 11px !important; }
  .app-header, .tabs, .bottom-tab-bar, .subtab-nav, .header-actions, .btn, .sidebar, .login-card, .install-banner, .toast-container, .panel-note, .deadline-row, #crossStoreNotice, #crossStoreSelectWrap, #schedulePatternWrap, .date-navigator {
    display: none !important;
  }
  .screen, .main-content, .card-panel { padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; }
  .main-content { padding-bottom: 0 !important; }
  .print-title { display: block !important; font-size: 16px !important; font-weight: 900 !important; margin-bottom: 10px !important; color: #000 !important; }
  .summary-bar { display: flex !important; gap: 10px !important; margin-bottom: 12px !important; }
  .summary-bar .summary-chip { border: 1px solid #333 !important; background: #fff !important; color: #000 !important; }
  .schedule-scroll { overflow: visible !important; border: none !important; }
  .schedule-table { width: 100% !important; min-width: 100% !important; font-size: 10px !important; }
  .schedule-table th, .schedule-table td { border: 1px solid #333 !important; padding: 4px 2px !important; color: #000 !important; background: #fff !important; }
  .schedule-table thead th:first-child, .schedule-table tbody td:first-child { position: static !important; }
  .shift-cell { background: #f0f0f0 !important; color: #000 !important; border: 1px solid #666 !important; }

  @page {
    size: A4 landscape;
    margin: 10mm;
  }
}

/* ===== Standalone static page (privacy.html) ===== */
.policy-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  line-height: 1.8;
}
.policy-page h1 { font-size: 24px; margin-bottom: 4px; }
.policy-page h2 { font-size: 17px; color: var(--primary-dark); margin: 32px 0 8px; }
.policy-page p, .policy-page li { color: var(--text-main); font-size: 14.5px; }
.policy-page ul, .policy-page ol { padding-left: 20px; }
.policy-page li { margin-bottom: 6px; }
.policy-page .policy-updated { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
.policy-page .policy-disclaimer { color: var(--text-muted); font-size: 13px; }
.policy-page .policy-back { display: inline-block; margin-top: 32px; color: var(--primary-dark); font-weight: 700; text-decoration: none; }


/* ---- メールアドレス未確認バナー ----
   Sits directly under the app header on both the staff and admin screens.
   Uses the secondary (amber) palette rather than --danger: nothing is broken
   and the app works fine unconfirmed, it just costs them self-service
   password reset until they do it. */
.verify-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--secondary-soft);
  border: 1px solid var(--brand-orange);
  border-radius: var(--radius-md);
  color: #7a4a09;
  font-size: 13px;
  line-height: 1.55;
}
.verify-banner > i { color: var(--secondary); font-size: 16px; flex-shrink: 0; }
.verify-banner > span { flex: 1 1 200px; min-width: 0; }
.verify-banner-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1px solid var(--secondary);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.verify-banner-btn:hover { background: var(--secondary); color: #fff; }
.verify-banner-btn:disabled { opacity: .6; cursor: default; }