@charset "UTF-8";
:root {
  --color-main-teal: #26b7b7;
  --color-main-blue: #379dd9;
  --color-gradient: linear-gradient(135deg, #26b7b7 0%, #379dd9 100%);
  --color-gradient-hover: linear-gradient(135deg, #20a0a0 0%, #2a8bc4 100%);
  /* サイドバー・ログイン用の濃いめグラデーション */
  --color-gradient-dark: linear-gradient(160deg, #1e9a9a 0%, #2a7bb8 100%);
  --color-bg: #f5fafb;
  --color-surface: #ffffff;
  --color-border: #e0e8eb;
  --color-text: #333;
  --color-text-muted: #666;
  --color-link: var(--color-main-blue);
  --color-primary: var(--color-main-blue);
  --color-primary-hover: #2a8bc4;
  --color-secondary: var(--color-main-teal);
  --color-secondary-hover: #20a0a0;
  --color-success: #1a9d9d;
  --color-success-bg: #e0f5f5;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-warning: #d97706;
  --color-warning-bg: #fef3c7;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow: 0 1px 3px rgba(51, 51, 51, 0.08);
  --shadow-sm: 0 1px 2px rgba(51, 51, 51, 0.05);
  --shadow-lg: 0 4px 12px rgba(51, 51, 51, 0.1);
  --header-height: 56px;
  --header-bg: var(--color-surface);
  --header-border: var(--color-border);
  --header-padding-x: 1.5rem;
  --header-title-font-size: 1rem;
  --header-title-font-weight: 600;
  --header-title-color: var(--color-text);
  --header-user-font-size: 0.9rem;
  --header-user-icon-size: 1.35rem;
  --header-user-name-weight: 500;
  --header-punch-gap: 0.5rem;
  --header-punch-btn-padding: 0.35rem 0.75rem;
  --header-punch-btn-font-size: 0.8rem;
  /* 出勤：パステル緑 */
  --header-punch-in-bg: #a7f3d0;
  --header-punch-in-border: #6ee7b7;
  --header-punch-in-hover-bg: #6ee7b7;
  --header-punch-in-color: #065f46;
  /* 退勤：パステル赤 */
  --header-punch-out-bg: #fecaca;
  --header-punch-out-border: #fca5a5;
  --header-punch-out-hover-bg: #fca5a5;
  --header-punch-out-color: #991b1b;
  /* 休憩：パステルオレンジ（休憩入・休憩終） */
  --header-punch-break-bg: #fed7aa;
  --header-punch-break-border: #fdba74;
  --header-punch-break-hover-bg: #fdba74;
  --header-punch-break-color: #9a3412;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

a {
  color: var(--color-link);
}

.layout-sidebar {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--color-gradient-dark);
  color: white;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.layout-app {
  min-height: 100vh;
}

body.nav-drawer-open {
  overflow: hidden;
}

.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 299;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  display: none;
}
.nav-drawer-overlay.is-open {
  display: block;
}

.app-sidebar--drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(300px, 88vw);
  min-width: unset;
  height: 100vh;
  z-index: 300;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}
.app-sidebar--drawer.is-open {
  transform: translateX(0);
}

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  min-height: var(--header-height, 56px);
  padding: 0 0.25rem 0 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-drawer-head-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.nav-drawer-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 0.35rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.35rem;
  cursor: pointer;
}
.nav-drawer-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.nav-drawer-nav .nav-drawer-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-drawer-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.nav-drawer-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 1rem 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.08);
}

.nav-drawer-logout {
  margin: 0;
  width: 100%;
  padding: 0;
}
.nav-drawer-logout form,
.nav-drawer-logout .button_to {
  display: block;
  width: 100%;
  margin: 0;
}
.nav-drawer-logout button,
.nav-drawer-logout input[type=submit] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-danger, #dc2626);
  background: #fff;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.nav-drawer-logout button:hover,
.nav-drawer-logout input[type=submit]:hover {
  background: var(--color-danger-bg, #fef2f2);
  color: #b91c1c;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}
.nav-drawer-logout button:active,
.nav-drawer-logout input[type=submit]:active {
  transform: scale(0.98);
}
.nav-drawer-logout button:focus-visible,
.nav-drawer-logout input[type=submit]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.nav-drawer-logout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-danger-bg, #fef2f2);
  color: var(--color-danger, #dc2626);
  font-size: 1.1rem;
  line-height: 1;
}

.nav-drawer-logout__label {
  letter-spacing: 0.02em;
}

.nav-drawer-section__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 1rem 0.65rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  user-select: none;
}
.nav-drawer-section__summary::-webkit-details-marker {
  display: none;
}
.nav-drawer-section__summary::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  margin-top: -0.2em;
}

.nav-drawer-section[open] > .nav-drawer-section__summary::after {
  transform: rotate(-135deg);
  margin-top: 0.15em;
}

.nav-drawer-section__body {
  padding: 0 0 0.6rem;
}
.nav-drawer-section__body .nav-item {
  margin-left: 0.35rem;
  margin-right: 0.35rem;
  font-size: 0.88rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-logo {
  margin: 0;
  height: var(--header-height, 56px);
  min-height: var(--header-height, 56px);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}
.app-logo a {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 100%;
}
.app-logo a:hover {
  opacity: 0.9;
}

.app-logo-img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.sidebar-nav {
  padding: 0.75rem 0;
}

.nav-section {
  margin-bottom: 0.5rem;
}

.nav-section-label {
  display: block;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.5rem 1.25rem 0.25rem;
}

.nav-item {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.5rem 1.25rem;
  margin: 0 0.5rem;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-item:hover {
  color: white;
  background: rgba(255, 255, 255, 0.15);
}
.nav-item.current {
  color: white;
  background: rgba(255, 255, 255, 0.25);
  font-weight: 500;
}
.nav-item.nav-item--sub {
  font-size: 0.8rem;
  padding: 0.35rem 1.25rem 0.35rem 1.75rem;
}
.nav-item.nav-item--dashboard {
  font-weight: 600;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  padding-bottom: 0.65rem;
}
.nav-item.nav-item--billing {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}
.nav-item.nav-item--billing .nav-item-billing__ico {
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
  font-size: 1rem;
  opacity: 0.92;
}
.nav-item.nav-item--billing .nav-item-billing__lbl {
  flex: 1;
  min-width: 0;
}

.nav-recent-chat {
  margin-top: 0.25rem;
}

.app-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--color-bg);
}

.main-inner {
  flex: 1;
  padding: 1.25rem 1.5rem 2rem;
}

.row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.col-9 {
  flex: 0 0 calc(75% - 0.75rem);
  min-width: 0;
  box-sizing: border-box;
}

.col-3 {
  flex: 0 0 calc(25% - 0.75rem);
  min-width: 0;
  box-sizing: border-box;
}

.col-8 {
  flex: 0 0 calc(66.666% - 1rem);
  min-width: 0;
  max-width: calc(66.666% - 1rem);
  box-sizing: border-box;
}

.col-6 {
  flex: 0 0 calc(50% - 0.75rem);
  min-width: 0;
  max-width: calc(50% - 0.75rem);
  box-sizing: border-box;
}

.col-4 {
  flex: 0 0 calc(33.333% - 1rem);
  min-width: 0;
  max-width: calc(33.333% - 1rem);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .col-9,
  .col-8,
  .col-4,
  .col-3,
  .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .main-inner {
    padding: 1rem;
  }
  .row .col-9 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.layout-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gradient-dark);
}

.login-page {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
}

.login-box {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
}

.login-logo {
  margin: 0 0 0.5rem;
  text-align: center;
}
.login-logo .login-logo-img {
  height: 36px;
  width: auto;
}

.login-note {
  margin: 0 0 1.25rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

.login-lead {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

.login-form .field {
  margin-bottom: 1rem;
}
.login-form .field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.login-input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  box-sizing: border-box;
}
.login-input:focus {
  outline: none;
  border-color: var(--color-main-blue);
  box-shadow: 0 0 0 2px rgba(55, 157, 217, 0.25);
}

.login-submit {
  width: 100%;
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--color-gradient);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.login-submit:hover {
  background: var(--color-gradient-hover);
}
.login-submit:focus-visible {
  outline: 2px solid var(--color-main-teal);
  outline-offset: 2px;
}

.dashboard-hero {
  margin-bottom: 1.75rem;
  padding: 1.5rem 1.25rem;
  background: var(--color-gradient);
  border-radius: var(--radius-lg);
  color: #fff;
  box-shadow: var(--shadow-lg);
}

.dashboard-hero-inner {
  max-width: 100%;
}

.dashboard-hero-row {
  align-items: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
}
.dashboard-hero-row__date {
  display: flex;
  align-items: center;
}
.dashboard-hero-row__schedule {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.dashboard-hero-date {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.98);
}

.dashboard-hero-schedule-inline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.dashboard-hero-schedule-chip {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  max-width: 100%;
  padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.dashboard-hero-schedule-chip:hover {
  background: rgba(255, 255, 255, 0.24);
  opacity: 0.95;
}
.dashboard-hero-schedule-chip:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
.dashboard-hero-schedule-chip__meta {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.92;
}
.dashboard-hero-schedule-chip__title {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-hero-schedule-none {
  font-size: 0.85rem;
  opacity: 0.88;
  white-space: nowrap;
}

.dashboard-hero-schedule-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
  transition: background 0.15s ease;
}
.dashboard-hero-schedule-open:hover {
  background: rgba(255, 255, 255, 0.32);
  color: #fff;
}
.dashboard-hero-schedule-open:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .dashboard-hero-row__schedule {
    justify-content: flex-start;
  }
  .dashboard-hero-schedule-inline {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
  .dashboard-hero-schedule-open {
    margin-left: 0;
  }
}
.dashboard-daily-message {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
}
.dashboard-daily-message p {
  margin: 0;
}
.dashboard-daily-message p:not(:last-child) {
  margin-bottom: 0.4rem;
}

.dashboard-card--staff-chat .dashboard-card__header--staff-chat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.dashboard-card--staff-chat .dashboard-card__title-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: inherit;
}
.dashboard-card--staff-chat .dashboard-card__title-link .la {
  color: #06c755;
  font-size: 1.15rem;
}

.dashboard-staff-chat-badge {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: #06c755;
  border-radius: 999px;
  line-height: 1.4;
}

.dashboard-inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-inbox-list__item {
  border-bottom: 1px solid var(--color-border);
}
.dashboard-inbox-list__item:last-child {
  border-bottom: 0;
}

.dashboard-inbox-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.dashboard-inbox-item:hover {
  background: #f0fdf4;
  margin: 0 -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: var(--radius-sm);
}

.dashboard-inbox-item__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 1.25rem;
}

.dashboard-inbox-item__main {
  flex: 1;
  min-width: 0;
}

.dashboard-inbox-item__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.dashboard-inbox-item__name {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-inbox-item__time {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.dashboard-inbox-item__message {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-inbox-item__arrow {
  flex-shrink: 0;
  color: #cbd5e1;
  font-size: 1.1rem;
}

.dashboard-staff-chat-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #06c755;
  text-decoration: none;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.dashboard-staff-chat-all-btn:hover {
  background: #dcfce7;
  text-decoration: none;
}

.dashboard-staff-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 0.5rem;
  text-align: center;
}

.dashboard-staff-chat-empty__icon {
  font-size: 2rem;
  color: #cbd5e1;
  margin-bottom: 0.5rem;
}

.dashboard-staff-chat-empty__text {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.dashboard-staff-chat-empty__btn {
  font-size: 0.85rem;
}

.dashboard-card--attendees .dashboard-card__header--attendees {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.dashboard-card--attendees .dashboard-card__title-plain {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.dashboard-card--attendees .dashboard-card__title-plain .la {
  color: var(--color-primary, #2563eb);
  font-size: 1.1rem;
}
.dashboard-card--attendees .dashboard-card__title-link .la {
  color: var(--color-primary, #2563eb);
  font-size: 1.1rem;
}

.dashboard-attendees-badge {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary, #2563eb);
  background: rgba(37, 99, 235, 0.1);
  border-radius: 999px;
  line-height: 1.4;
}

.dashboard-attendee-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-attendee-list__item {
  border-bottom: 1px solid var(--color-border);
}
.dashboard-attendee-list__item:last-child {
  border-bottom: 0;
}

.dashboard-attendee-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0;
  text-decoration: none;
  color: inherit;
}
.dashboard-attendee-item:hover .dashboard-attendee-item__name {
  color: var(--color-primary, #2563eb);
}
.dashboard-attendee-item--static {
  cursor: default;
}
.dashboard-attendee-item--static:hover .dashboard-attendee-item__name {
  color: inherit;
}

.dashboard-attendee-item__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-bg-muted, #f1f5f9);
  color: var(--color-text-muted);
}
.dashboard-attendee-item__avatar .la {
  font-size: 1.1rem;
}

.dashboard-attendee-item__main {
  flex: 1;
  min-width: 0;
}

.dashboard-attendee-item__name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
}

.dashboard-attendee-item__meta {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-attendee-item__times {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.dashboard-attendee-item__clock {
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dashboard-attendee-item__status {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
}
.dashboard-attendee-item__status--in {
  color: #059669;
}
.dashboard-attendee-item__status--out {
  color: var(--color-text-muted);
}

.dashboard-attendees-empty {
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

.dashboard-body {
  margin-bottom: 1.5rem;
}
.dashboard-body__pair {
  align-items: stretch;
  margin-bottom: 1.25rem;
}
.dashboard-body__pair-main, .dashboard-body__pair-aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dashboard-body__rest {
  align-items: flex-start;
}
.dashboard-body__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.dashboard-body__aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.dashboard-body__pair .dashboard-card--staff-chat,
.dashboard-body__pair .dashboard-card--attendees {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  margin-bottom: 0;
  min-height: 14rem;
}
.dashboard-body__pair .dashboard-card__body--staff-chat,
.dashboard-body__pair .dashboard-card__body--attendees {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.dashboard-body__pair .dashboard-card__body--staff-chat .dashboard-inbox-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.dashboard-body__pair .dashboard-card__body--staff-chat .dashboard-staff-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dashboard-body__pair .dashboard-card__body--attendees .dashboard-attendee-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.dashboard-body__pair .dashboard-card__body--attendees .dashboard-attendees-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-body__aside .dashboard-owner-overview {
  margin: 0;
}

.dashboard-body--staff .dashboard-body__top {
  flex-wrap: nowrap;
  align-items: stretch;
  margin-bottom: 1.25rem;
}
@media (max-width: 768px) {
  .dashboard-body--staff .dashboard-body__top {
    flex-wrap: wrap;
  }
}
.dashboard-body--staff .dashboard-body__top-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dashboard-body--staff .dashboard-body__top-col .dashboard-card--staff-chat,
.dashboard-body--staff .dashboard-body__top-col .dashboard-card--work-tasks,
.dashboard-body--staff .dashboard-body__top-col .dashboard-card--work-todos {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  margin-bottom: 0;
  min-height: 14rem;
}
.dashboard-body--staff .dashboard-body__top-col .dashboard-card__body--staff-chat,
.dashboard-body--staff .dashboard-body__top-col .dashboard-card__body--flush {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.dashboard-body--staff .dashboard-body__top-col .dashboard-card__body--staff-chat .dashboard-inbox-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.dashboard-body--staff .dashboard-body__top-col .dashboard-card__body--staff-chat .dashboard-staff-chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dashboard-body--staff .dashboard-body__top-col .dashboard-work-focus,
.dashboard-body--staff .dashboard-body__top-col .dashboard-work-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.dashboard-body--staff .dashboard-body__attendees-row {
  margin-bottom: 1.25rem;
}
.dashboard-body--staff .dashboard-body__attendees-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dashboard-body--staff .dashboard-body__attendees-col .dashboard-card--attendees {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  margin-bottom: 0;
}
.dashboard-body--staff .dashboard-body__attendees-col .dashboard-card__body--attendees {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.dashboard-body--staff .dashboard-body__attendees-col .dashboard-card__body--attendees .dashboard-attendee-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.dashboard-body--staff .dashboard-body__staff-feed {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.dashboard-card__body--flush {
  padding: 0;
}

.dashboard-work-focus {
  display: flex;
  flex-direction: column;
}
.dashboard-work-focus__slot {
  border-bottom: 1px solid var(--color-border);
}
.dashboard-work-focus__slot:last-child {
  border-bottom: none;
}
.dashboard-work-focus__slot--suggested .dashboard-work-focus__label {
  color: var(--color-main-teal, #379dd9);
}
.dashboard-work-focus__label {
  margin: 0;
  padding: 0.55rem 1.25rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.dashboard-work-focus__link {
  display: block;
  padding: 0.45rem 1.25rem 0.75rem;
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.12s ease;
}
.dashboard-work-focus__link:hover {
  background: #f8fafc;
}
.dashboard-work-focus__link:focus-visible {
  outline: 2px solid var(--color-main-teal, #379dd9);
  outline-offset: -2px;
}
.dashboard-work-focus__title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}
.dashboard-work-focus__meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.dashboard-work-focus__reason {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--color-primary);
}

.dashboard-work-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dashboard-work-list__item {
  border-bottom: 1px solid var(--color-border);
}
.dashboard-work-list__item:last-child {
  border-bottom: none;
}
.dashboard-work-list__link {
  display: block;
  padding: 0.65rem 1.25rem;
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.12s ease;
}
.dashboard-work-list__link:hover {
  background: #f8fafc;
}
.dashboard-work-list__link:focus-visible {
  outline: 2px solid var(--color-main-teal, #379dd9);
  outline-offset: -2px;
}
.dashboard-work-list__title {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
}
.dashboard-work-list__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.dashboard-work-list__more {
  display: block;
  padding: 0.65rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  border-top: 1px solid var(--color-border);
}
.dashboard-work-list__more:hover {
  text-decoration: underline;
}
.dashboard-work-list__empty {
  margin: 0;
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.dashboard-body__aside .dashboard-kpi-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.dashboard-body__aside .dashboard-kpi-card {
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 0.75rem;
}
.dashboard-body__aside .dashboard-kpi-card .dashboard-kpi-card__icon {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}
.dashboard-body__aside .dashboard-kpi-card .dashboard-kpi-card__value {
  font-size: 1.2rem;
}
.dashboard-body__aside .dashboard-kpi-card .dashboard-kpi-card__label {
  font-size: 0.72rem;
}
.dashboard-body__aside .dashboard-kpi-card .dashboard-kpi-card__sub {
  font-size: 0.68rem;
  line-height: 1.35;
}
.dashboard-body__aside .dashboard-kpi-card .dashboard-kpi-card__badge {
  font-size: 0.65rem;
}

.dashboard-overview-heading,
.dashboard-shortcuts-heading {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.dashboard-overview-heading {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dashboard-management-overview {
  margin-top: 0.25rem;
}
.dashboard-management-overview__intro {
  margin-bottom: 0;
}
.dashboard-management-overview__period {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.dashboard-management-overview .dashboard-management-kpi-grid {
  margin-top: 1rem;
}

.dashboard-management-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

a.dashboard-kpi-card {
  text-decoration: none;
  color: inherit;
}

.dashboard-management-kpi-grid .dashboard-kpi-card {
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 0.75rem;
}
.dashboard-management-kpi-grid .dashboard-kpi-card .dashboard-kpi-card__icon {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}
.dashboard-management-kpi-grid .dashboard-kpi-card .dashboard-kpi-card__value {
  font-size: 1.15rem;
}
.dashboard-management-kpi-grid .dashboard-kpi-card .dashboard-kpi-card__label {
  font-size: 0.72rem;
}
.dashboard-management-kpi-grid .dashboard-kpi-card .dashboard-kpi-card__sub {
  font-size: 0.68rem;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .dashboard-management-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .dashboard-management-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .dashboard-management-kpi-grid {
    grid-template-columns: 1fr;
  }
}
.dashboard-kpi-card__value--muted {
  font-size: 1rem;
  color: var(--color-text-muted);
}

.dashboard-kpi-card__value--danger {
  color: #dc2626;
}

.dashboard-kpi-card__sub--up {
  color: #059669;
}

.dashboard-kpi-card__sub--down {
  color: #dc2626;
}

.dashboard-kpi-card__sub--muted {
  color: var(--color-text-muted);
}

.dashboard-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.dashboard-kpi-card {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.dashboard-kpi-card:hover {
  box-shadow: var(--shadow);
  border-color: #cbd5e1;
}
.dashboard-kpi-card__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border-radius: var(--radius);
  font-size: 1.25rem;
}
.dashboard-kpi-card__body {
  flex: 1;
  min-width: 0;
}
.dashboard-kpi-card__label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.dashboard-kpi-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}
.dashboard-kpi-card__unit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 0.15rem;
}
.dashboard-kpi-card__bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.dashboard-kpi-card__bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.35s ease;
}
.dashboard-kpi-card__bar-fill--success {
  background: var(--color-success);
}
.dashboard-kpi-card__sub {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.35rem;
}
.dashboard-kpi-card__badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-top: 0.4rem;
}
.dashboard-kpi-card__badge--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.dashboard-kpi-card__link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
  margin-top: 0.5rem;
}
.dashboard-kpi-card__link:hover {
  text-decoration: underline;
}

.dashboard-card {
  margin-bottom: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.dashboard-card--alert {
  background: var(--color-danger-bg);
  border-color: #fecaca;
}
.dashboard-card__header {
  padding: 1rem 1.25rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--color-border);
}
.dashboard-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.dashboard-card__title a {
  color: inherit;
  text-decoration: none;
}
.dashboard-card__title a:hover {
  color: var(--color-primary);
}
.dashboard-card__desc {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.dashboard-card__body {
  padding: 1rem 1.25rem;
}
.dashboard-card__link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}
.dashboard-card__link:hover {
  text-decoration: underline;
}

.dashboard-card--alert .dashboard-card__header {
  background: #fef2f2;
  border-bottom-color: #fecaca;
}

.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.dashboard-table th, .dashboard-table td {
  padding: 0.75rem 0;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.dashboard-table th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}
.dashboard-table tbody tr:last-child td {
  border-bottom: none;
}
.dashboard-table tbody tr:hover td {
  background: #f8fafc;
}
.dashboard-table a {
  color: var(--color-link);
  text-decoration: none;
}
.dashboard-table a:hover {
  text-decoration: underline;
}
.dashboard-table--compact th, .dashboard-table--compact td {
  padding: 0.5rem 0;
}
.dashboard-table tbody tr.dashboard-table-row--overdue td {
  background: #fef2f2;
}
.dashboard-table tbody tr.dashboard-table-row--overdue:hover td {
  background: #fee2e2;
}

.dashboard-table-project-link {
  margin-right: 0.35rem;
}

.dashboard-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-decoration: none;
  vertical-align: middle;
}
.dashboard-badge--overdue {
  color: #991b1b;
  background: #fecaca;
  border: 1px solid #f87171;
}
.dashboard-badge--overdue:hover {
  background: #fca5a5;
  color: #7f1d1d;
}

.dashboard-table-due--overdue a {
  color: #b91c1c;
  font-weight: 600;
}

.dashboard-cell-link {
  white-space: nowrap;
}
.dashboard-cell-link a {
  font-size: 0.85rem;
}

.dashboard-empty {
  margin: 0;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.dashboard-todo-progress-list {
  padding: 0;
}

.dashboard-todo-progress-item {
  margin-bottom: 1rem;
}
.dashboard-todo-progress-item:last-child {
  margin-bottom: 0.5rem;
}

.dashboard-todo-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.dashboard-todo-progress-title {
  font-size: 0.9rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.dashboard-todo-progress-count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.dashboard-todo-progress-bar-wrap {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.dashboard-todo-progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.dashboard-todo-progress-total {
  margin: 0.75rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.dashboard-todo-insight {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.dashboard-fee-rows {
  padding: 0;
}

.dashboard-fee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}
.dashboard-fee-row:last-child {
  border-bottom: none;
}
.dashboard-fee-row__label {
  color: var(--color-text-muted);
}
.dashboard-fee-row__value {
  font-weight: 500;
}

.dashboard-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.dashboard-nav__item {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dashboard-nav__item:hover {
  background: var(--color-bg);
  border-color: #cbd5e1;
}

.dashboard-list-wrap {
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.dashboard-shortcuts-wrap,
.dashboard-owner-overview {
  margin-top: 0;
  margin-bottom: 0;
}

.dashboard-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.4rem;
}

.dashboard-shortcuts-wrap--row .dashboard-shortcuts-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dashboard-shortcuts-wrap--row .dashboard-shortcut-card {
  flex: 1 1 0;
  min-width: 5.25rem;
  max-width: 9rem;
}

.dashboard-shortcut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 4.15rem;
  padding: 0.4rem 0.35rem;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 5px rgba(15, 23, 42, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.dashboard-shortcut-card:hover {
  border-color: rgba(55, 157, 217, 0.45);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(55, 157, 217, 0.1);
  transform: translateY(-1px);
}
.dashboard-shortcut-card:focus-visible {
  outline: 2px solid var(--color-main-teal, #379dd9);
  outline-offset: 2px;
}
.dashboard-shortcut-card__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: none;
}
.dashboard-shortcut-card__icon .la {
  font-size: 1.35rem;
  color: var(--color-main-teal, #379dd9);
  background: transparent;
}
.dashboard-shortcut-card__label {
  width: 100%;
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.dashboard-ai-batch {
  margin-bottom: 1rem;
}
.dashboard-ai-batch:last-child {
  margin-bottom: 0;
}

.dashboard-ai-batch__slot {
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
}

.dashboard-ai-batch__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
}

.dashboard-ai-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.dashboard-urgent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dashboard-urgent-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.dashboard-urgent-list li:last-child {
  border-bottom: none;
}

.dashboard-urgent-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.dashboard-todo-progress-bar--risk {
  background: linear-gradient(90deg, #f97316, #ea580c) !important;
}

.schedule-today-banner {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: linear-gradient(135deg, rgba(55, 157, 217, 0.08), rgba(26, 157, 157, 0.08));
}

.schedule-today-banner--offmonth {
  background: var(--color-surface);
}

.schedule-today-banner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.schedule-today-banner__title {
  font-size: 1.1rem;
}

.schedule-today-banner__cta {
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
}

.schedule-today-banner__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.schedule-today-banner__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.schedule-today-banner__time {
  font-weight: 600;
  min-width: 3.25rem;
}

.schedule-today-banner__staff {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.schedule-today-banner__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.staff-chat-layout {
  display: flex;
  align-items: stretch;
  min-height: min(70vh, 640px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.staff-chat-layout__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.staff-chat-layout__placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.staff-chat-placeholder {
  text-align: center;
  max-width: 20rem;
}
.staff-chat-placeholder__text {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.staff-chat-rooms {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 300px;
  border-right: 1px solid var(--color-border);
  background: #f8fafc;
}
.staff-chat-rooms__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.staff-chat-rooms__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.staff-chat-rooms__new {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  white-space: nowrap;
}
.staff-chat-rooms__empty {
  margin: 0;
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.staff-chat-room-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.staff-chat-room-list__item {
  border-bottom: 1px solid var(--color-border);
}
.staff-chat-room-list__item:last-child {
  border-bottom: 0;
}

.staff-chat-room-list__link {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.12s ease;
}
.staff-chat-room-list__link:hover {
  background: #eef2f7;
}
.staff-chat-room-list__link--active {
  background: #e0f2fe;
  border-left: 3px solid var(--color-main-teal, #26b7b7);
  padding-left: calc(1rem - 3px);
}

.staff-chat-room-list__avatar {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.staff-chat-room-list__avatar .la {
  font-size: 1.2rem;
}

.staff-chat-room-list__body {
  flex: 1;
  min-width: 0;
}

.staff-chat-room-list__name {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}

.staff-chat-room-list__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-chat-room-list__preview {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-chat-room-list__time {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.staff-chat-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.staff-chat-panel__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.staff-chat-panel__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}
.staff-chat-panel__back:hover {
  background: var(--color-bg-subtle, #f1f5f9);
}
.staff-chat-panel__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.staff-chat-panel .staff-chat-thread {
  flex: 1;
  min-height: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.staff-chat-panel .staff-chat-messages {
  flex: 1;
  max-height: none;
  min-height: 12rem;
}

.staff-chat-messages__empty {
  margin: 0;
  padding: 1rem 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .staff-chat-layout {
    min-height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .staff-chat-layout--index .staff-chat-layout__main {
    display: none;
  }
  .staff-chat-layout--show .staff-chat-rooms {
    display: none;
  }
  .staff-chat-layout--show .staff-chat-panel__back {
    display: flex;
  }
  .staff-chat-rooms {
    max-width: none;
    border-right: 0;
  }
}
@media (min-width: 769px) {
  .staff-chat-layout--show .staff-chat-panel__back {
    display: none;
  }
}
.staff-chat-directory {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.staff-chat-directory__item + .staff-chat-directory__item {
  border-top: 1px solid var(--color-border);
}

.staff-chat-directory__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--color-text);
}
.staff-chat-directory__link:hover {
  background: var(--color-bg-subtle, #f8fafc);
}
.staff-chat-directory__link .la {
  font-size: 1.35rem;
  color: var(--color-text-muted);
}

.staff-chat-directory__main {
  flex: 1;
  min-width: 0;
}

.staff-chat-directory__name {
  display: block;
  font-weight: 600;
}

.staff-chat-directory__preview {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-chat-directory__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  flex-shrink: 0;
}

.staff-chat-directory__time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.staff-chat-directory__role {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.staff-chat-directory__chevron {
  color: var(--color-text-muted);
}

.staff-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.staff-chat-messages {
  max-height: 50vh;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-subtle, #f8fafc);
}

.staff-chat-msg {
  margin-bottom: 0.75rem;
}
.staff-chat-msg__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.staff-chat-msg__body {
  font-size: 0.9rem;
}
.staff-chat-msg--mine {
  text-align: right;
}
.staff-chat-msg--mine .staff-chat-msg__body {
  display: inline-block;
  text-align: left;
  background: #dbeafe;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
}
.staff-chat-msg--other .staff-chat-msg__body {
  background: white;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
.staff-chat-msg--tell .staff-chat-msg__body {
  border-color: #fcd34d;
  background: #fffbeb;
}
.staff-chat-msg--system {
  text-align: center;
}
.staff-chat-msg--system .staff-chat-msg__meta {
  margin-bottom: 0.35rem;
}
.staff-chat-msg--system .staff-chat-msg__body {
  display: inline-block;
  max-width: 92%;
  background: #f1f5f9;
  border: 1px dashed var(--color-border);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-align: left;
}

.staff-chat-panel__header-main {
  flex: 1;
  min-width: 0;
}

.staff-chat-panel__subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.staff-chat-panel__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
}
.staff-chat-panel__action:hover {
  background: var(--color-bg-subtle, #f1f5f9);
}
.staff-chat-panel__action .la {
  font-size: 1.15rem;
}

.staff-chat-room-list__link--unread .staff-chat-room-list__name {
  font-weight: 700;
}
.staff-chat-room-list__link--unread .staff-chat-room-list__preview {
  color: var(--color-text);
}

.staff-chat-messages__meta-line {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.inbox-detail-list ul {
  margin: 0;
  padding-left: 1.1rem;
}
.inbox-detail-list li + li {
  margin-top: 0.35rem;
}

.inbox-detail-meta p {
  margin: 0.15rem 0;
}

.inbox-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}
.inbox-detail-actions__danger {
  color: #b91c1c;
  border-color: #fecaca;
}

.inquiry-channel-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.2rem;
  margin-right: 0;
  padding: 0.12rem 0.45rem;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.inquiry-channel-badge .la {
  font-size: 0.85rem;
}
.inquiry-channel-badge--line {
  background: #dcfce7;
  color: #15803d;
}
.inquiry-channel-badge--email {
  background: #dbeafe;
  color: #1d4ed8;
}
.inquiry-channel-badge--form {
  background: #f3e8ff;
  color: #6b21a8;
}
.inquiry-channel-badge--api {
  background: #f1f5f9;
  color: #475569;
}
.inquiry-channel-badge--other {
  background: #fef3c7;
  color: #92400e;
}

.inbox-status-badge {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 0;
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.inbox-status-badge--unread {
  background: #fee2e2;
  color: #b91c1c;
}
.inbox-status-badge--progress {
  background: #dbeafe;
  color: #1d4ed8;
}
.inbox-status-badge--replied {
  background: #d1fae5;
  color: #047857;
}
.inbox-status-badge--closed {
  background: #e2e8f0;
  color: #475569;
}

.inbox-sidebar-filter {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.inbox-sidebar-filter__label {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
  white-space: nowrap;
}
.inbox-sidebar-filter__select {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.inbox-inquiry-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--color-border);
}

.inbox-inquiry-quick-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.inbox-inquiry-quick-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.inbox-inquiry-quick-form__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.inbox-inquiry-quick-form__select {
  max-width: 14rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.inbox-inquiry-line-form {
  padding: 0.75rem;
  border-radius: var(--radius);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.inbox-inquiry-line-form__title {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
}

.staff-chat-form__input {
  width: 100%;
  max-width: 40rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  flex-shrink: 0;
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 0 var(--header-padding-x);
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 50;
}

.main-header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
}
.main-header-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  min-width: 5rem;
}
.main-header-logo a:focus-visible {
  outline: 2px solid var(--color-main-teal, #379dd9);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.main-header-logo-img {
  display: block;
  height: 32px;
  width: auto;
  /* CSS min() — SassC が Sass の min と誤解しないよう unquote */
  max-width: min(180px, 42vw);
  min-width: 72px;
  object-fit: contain;
  vertical-align: middle;
}

.nav-drawer-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0.1rem;
  margin: 0;
  padding: 0.15rem 0.35rem;
  border: none;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1;
}
.nav-drawer-toggle:hover {
  opacity: 0.75;
}
.nav-drawer-toggle:focus-visible {
  outline: 2px solid var(--color-main-teal, #379dd9);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.nav-drawer-toggle__icon {
  font-size: 1.35rem;
  line-height: 1;
}

.nav-drawer-toggle__label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.main-header-nav-toggle {
  flex-shrink: 0;
}

.main-header-title {
  flex: 1;
  min-width: 0;
  font-size: var(--header-title-font-size);
  font-weight: var(--header-title-font-weight);
  color: var(--header-title-color);
}

.main-header-punch {
  display: flex;
  align-items: center;
  gap: var(--header-punch-gap);
  margin-right: 1rem;
}

.main-header-punch-btn {
  margin: 0;
  padding: 4px 24px;
  /* Rails 7 は button、旧来は input */
}
.main-header-punch-btn input,
.main-header-punch-btn input[type=submit],
.main-header-punch-btn button,
.main-header-punch-btn button[type=submit] {
  padding: var(--header-punch-btn-padding);
  font-size: var(--header-punch-btn-font-size);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
}
.main-header-punch-btn input:hover,
.main-header-punch-btn input[type=submit]:hover,
.main-header-punch-btn button:hover,
.main-header-punch-btn button[type=submit]:hover {
  opacity: 0.9;
}

/* 出勤・退勤・休憩ボタン — パステル系、色は _variables.scss の --header-punch-* で変更可能 */
/* Rails 7 の button_to は <button type="submit"> に class が付く */
.main-header-punch .main-header-punch-in,
.main-header-punch .main-header-punch-out,
.main-header-punch .main-header-punch-break-start,
.main-header-punch .main-header-punch-break-end {
  border: 1px solid transparent !important;
}

/* 出勤：パステル緑 */
.main-header-punch .main-header-punch-in {
  color: var(--header-punch-in-color, #065f46) !important;
  background: var(--header-punch-in-bg, #a7f3d0) !important;
  border-color: var(--header-punch-in-border, #6ee7b7) !important;
}

.main-header-punch .main-header-punch-in:hover {
  background: var(--header-punch-in-hover-bg, #6ee7b7) !important;
}

/* 退勤：パステル赤 */
.main-header-punch .main-header-punch-out {
  color: var(--header-punch-out-color, #991b1b) !important;
  background: var(--header-punch-out-bg, #fecaca) !important;
  border-color: var(--header-punch-out-border, #fca5a5) !important;
}

.main-header-punch .main-header-punch-out:hover {
  background: var(--header-punch-out-hover-bg, #fca5a5) !important;
}

/* 休憩入・休憩終：パステルオレンジ */
.main-header-punch .main-header-punch-break-start,
.main-header-punch .main-header-punch-break-end {
  color: var(--header-punch-break-color, #9a3412) !important;
  background: var(--header-punch-break-bg, #fed7aa) !important;
  border-color: var(--header-punch-break-border, #fdba74) !important;
}

.main-header-punch .main-header-punch-break-start:hover,
.main-header-punch .main-header-punch-break-end:hover {
  background: var(--header-punch-break-hover-bg, #fdba74) !important;
}

.main-header-user {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  margin-right: 0.75rem;
  font-size: var(--header-user-font-size);
}
.main-header-user .las {
  font-size: var(--header-user-icon-size);
  color: var(--color-text);
}

.main-header-user-name {
  font-weight: var(--header-user-name-weight);
  color: var(--color-text);
}

.main-header-timers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  max-width: min(50vw, 28rem);
  margin-right: 0.5rem;
}

.main-header-timer {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.45rem;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
}
.main-header-timer__title {
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: #065f46;
  text-decoration: none;
}
.main-header-timer__title:hover {
  text-decoration: underline;
}
.main-header-timer__elapsed {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #047857;
}
.main-header-timer__stop-form {
  display: inline;
  margin: 0;
}
.main-header-timer__stop {
  margin: 0;
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #991b1b;
  background: #fecaca;
  border: 1px solid #fca5a5;
  border-radius: 4px;
  cursor: pointer;
}
.main-header-timer__stop:hover {
  background: #fca5a5;
}

.main .description {
  color: var(--color-text-muted);
  margin: 0.25rem 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
.main .description a {
  color: var(--color-primary);
}

.main .empty {
  margin: 0;
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  line-height: 1.6;
}
.main .empty a {
  color: var(--color-primary);
  font-weight: 500;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.flash {
  padding: 0.75rem 1rem;
}
.flash.notice {
  background: var(--color-success-bg);
  color: #0f766e;
}
.flash.alert {
  background: var(--color-danger-bg);
  color: #b91c1c;
}

.btn-new,
a.btn-new {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-gradient);
  color: white !important;
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}
.btn-new:hover,
a.btn-new:hover {
  background: var(--color-gradient-hover);
}
.btn-new:focus-visible,
a.btn-new:focus-visible {
  outline: 2px solid var(--color-main-teal);
  outline-offset: 2px;
}
.btn-new--small,
a.btn-new--small {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
}

.btn-secondary,
a.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.btn-secondary:hover,
a.btn-secondary:hover {
  background: #f8fafc;
  border-color: var(--color-main-teal);
  color: var(--color-primary);
}
.btn-secondary:focus-visible,
a.btn-secondary:focus-visible {
  outline: 2px solid var(--color-main-teal);
  outline-offset: 2px;
}
.btn-secondary--small,
a.btn-secondary--small {
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
}

.btn-small {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.task-complete-action {
  margin: 0 0 1.25rem;
}

.btn-complete-project {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-success);
  color: #fff !important;
  cursor: pointer;
}
.btn-complete-project:hover {
  filter: brightness(1.05);
}
.btn-complete-project:focus-visible {
  outline: 2px solid var(--color-main-teal);
  outline-offset: 2px;
}

.btn-complete-project-inline {
  border-color: var(--color-success);
  background: var(--color-success-bg);
  color: var(--color-success);
}
.btn-complete-project-inline:hover {
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-success-bg));
}

.project-timeline-complete {
  margin-top: 0.4rem;
}
.project-timeline-complete form.button_to {
  display: inline-block;
  margin: 0;
}

.tasks-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  margin-top: 0;
  font-size: 0.9rem;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.tasks-table th,
.tasks-table td {
  padding: 0.65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.tasks-table .actions {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.tasks-table .actions a,
.tasks-table .actions .btn-delete {
  font-size: 0.85rem;
}
.tasks-table .actions .btn-icon-edit,
.tasks-table .actions a.btn-icon-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1rem;
  color: var(--color-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.tasks-table .actions .btn-icon-edit:hover,
.tasks-table .actions a.btn-icon-edit:hover {
  color: var(--color-primary-hover, var(--color-primary));
  background: #eff6ff;
}
.tasks-table .actions .btn-icon-analyze,
.tasks-table .actions a.btn-icon-analyze {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1rem;
  color: var(--color-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.tasks-table .actions .btn-icon-analyze:hover,
.tasks-table .actions a.btn-icon-analyze:hover {
  background: #e0f5f5;
  color: var(--color-secondary-hover);
}
.tasks-table .actions form.btn-icon-delete,
.tasks-table .actions .btn-icon-delete {
  display: inline-flex;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.tasks-table .actions form.btn-icon-delete input, .tasks-table .actions form.btn-icon-delete button,
.tasks-table .actions .btn-icon-delete input,
.tasks-table .actions .btn-icon-delete button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  font-size: 1rem;
  border-radius: var(--radius-sm);
}
.tasks-table .actions form.btn-icon-delete input:hover, .tasks-table .actions form.btn-icon-delete button:hover,
.tasks-table .actions .btn-icon-delete input:hover,
.tasks-table .actions .btn-icon-delete button:hover {
  background: var(--color-danger-bg);
}
.tasks-table th {
  background: #f8fafc;
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.8rem;
}
.tasks-table tbody tr:last-child td {
  border-bottom: none;
}
.tasks-table tbody tr:hover td {
  background: #f8fafc;
}
.tasks-table a {
  color: var(--color-link);
  text-decoration: none;
}
.tasks-table a:hover {
  text-decoration: underline;
}

.btn-icon-edit,
a.btn-icon-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1rem;
  color: var(--color-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.btn-icon-edit:hover,
a.btn-icon-edit:hover {
  color: var(--color-primary-hover, var(--color-primary));
  background: #eff6ff;
}

.btn-icon-analyze,
a.btn-icon-analyze {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1rem;
  color: var(--color-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.btn-icon-analyze:hover,
a.btn-icon-analyze:hover {
  background: #e0f5f5;
  color: var(--color-secondary-hover);
}

form.btn-icon-delete,
.btn-icon-delete {
  display: inline-flex;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  vertical-align: middle;
}
form.btn-icon-delete input, form.btn-icon-delete button,
.btn-icon-delete input,
.btn-icon-delete button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  font-size: 1rem;
  border-radius: var(--radius-sm);
}
form.btn-icon-delete input:hover, form.btn-icon-delete button:hover,
.btn-icon-delete input:hover,
.btn-icon-delete button:hover {
  background: var(--color-danger-bg);
}

.form {
  max-width: 100%;
}
.form.form--wide {
  max-width: 100%;
}

input.form-input,
select.form-input,
textarea.form-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.45;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input.form-input::placeholder,
select.form-input::placeholder,
textarea.form-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.85;
}
input.form-input:hover:not(:disabled),
select.form-input:hover:not(:disabled),
textarea.form-input:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-main-teal) 28%, var(--color-border));
}
input.form-input:focus, input.form-input:focus-visible,
select.form-input:focus,
select.form-input:focus-visible,
textarea.form-input:focus,
textarea.form-input:focus-visible {
  outline: none;
  border-color: var(--color-main-teal);
  box-shadow: 0 0 0 3px rgba(38, 183, 183, 0.2);
}
input.form-input:disabled,
select.form-input:disabled,
textarea.form-input:disabled {
  background: #f1f5f9;
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

textarea.form-input {
  min-height: 5rem;
  resize: vertical;
}

select.form-input {
  cursor: pointer;
  appearance: auto;
}

.form-row {
  margin-bottom: 1.15rem;
}
.form-row > label {
  display: block;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin: 0 0 0.4rem;
}
.form-row > input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),
.form-row > select,
.form-row > textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.45;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-row > input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button])::placeholder,
.form-row > select::placeholder,
.form-row > textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.85;
}
.form-row > input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):hover:not(:disabled),
.form-row > select:hover:not(:disabled),
.form-row > textarea:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-main-teal) 28%, var(--color-border));
}
.form-row > input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):focus, .form-row > input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):focus-visible,
.form-row > select:focus,
.form-row > select:focus-visible,
.form-row > textarea:focus,
.form-row > textarea:focus-visible {
  outline: none;
  border-color: var(--color-main-teal);
  box-shadow: 0 0 0 3px rgba(38, 183, 183, 0.2);
}
.form-row > input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]):disabled,
.form-row > select:disabled,
.form-row > textarea:disabled {
  background: #f1f5f9;
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.form-row > textarea {
  min-height: 5rem;
  resize: vertical;
}
.form-row > select {
  cursor: pointer;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.form-actions input[type=submit],
.form-actions button[type=submit] {
  padding: 0.55rem 1.25rem;
  background: var(--color-gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.form-actions input[type=submit]:hover,
.form-actions button[type=submit]:hover {
  background: var(--color-gradient-hover);
}
.form-actions input[type=submit]:focus-visible,
.form-actions button[type=submit]:focus-visible {
  outline: 2px solid var(--color-main-teal);
  outline-offset: 2px;
}
.form-actions .btn-secondary {
  text-decoration: none;
}

.btn-primary,
a.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.25rem;
  background: var(--color-gradient);
  color: #fff !important;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary:hover,
a.btn-primary:hover {
  background: var(--color-gradient-hover);
}
.btn-primary:focus-visible,
a.btn-primary:focus-visible {
  outline: 2px solid var(--color-main-teal);
  outline-offset: 2px;
}

.form-hint {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.form-hint a {
  color: var(--color-primary);
  font-weight: 500;
}

label.required::after {
  content: " *";
  color: var(--color-danger);
  font-weight: 700;
  font-size: 0.9em;
}

.field_with_errors label {
  color: var(--color-danger);
}
.field_with_errors input:not([type=checkbox]):not([type=radio]),
.field_with_errors select,
.field_with_errors textarea {
  border-color: #fca5a5 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12) !important;
}

.btn-generate-message {
  background: #1a9d9d;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 8px 24px;
  margin-top: 1rem;
}
.btn-generate-message:hover {
  background: #1a9d9d;
}

.field {
  margin-bottom: 1.25rem;
}
.field label {
  display: block;
  font-weight: 600;
  margin: 0 0 0.4rem;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.field input[type=text],
.field input[type=email],
.field input[type=url],
.field input[type=number],
.field input[type=date],
.field input[type=time],
.field input[type=datetime-local],
.field input[type=password],
.field input[type=tel],
.field input[type=search],
.field select,
.field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.45;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.field input[type=text]::placeholder,
.field input[type=email]::placeholder,
.field input[type=url]::placeholder,
.field input[type=number]::placeholder,
.field input[type=date]::placeholder,
.field input[type=time]::placeholder,
.field input[type=datetime-local]::placeholder,
.field input[type=password]::placeholder,
.field input[type=tel]::placeholder,
.field input[type=search]::placeholder,
.field select::placeholder,
.field textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.85;
}
.field input[type=text]:hover:not(:disabled),
.field input[type=email]:hover:not(:disabled),
.field input[type=url]:hover:not(:disabled),
.field input[type=number]:hover:not(:disabled),
.field input[type=date]:hover:not(:disabled),
.field input[type=time]:hover:not(:disabled),
.field input[type=datetime-local]:hover:not(:disabled),
.field input[type=password]:hover:not(:disabled),
.field input[type=tel]:hover:not(:disabled),
.field input[type=search]:hover:not(:disabled),
.field select:hover:not(:disabled),
.field textarea:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-main-teal) 28%, var(--color-border));
}
.field input[type=text]:focus, .field input[type=text]:focus-visible,
.field input[type=email]:focus,
.field input[type=email]:focus-visible,
.field input[type=url]:focus,
.field input[type=url]:focus-visible,
.field input[type=number]:focus,
.field input[type=number]:focus-visible,
.field input[type=date]:focus,
.field input[type=date]:focus-visible,
.field input[type=time]:focus,
.field input[type=time]:focus-visible,
.field input[type=datetime-local]:focus,
.field input[type=datetime-local]:focus-visible,
.field input[type=password]:focus,
.field input[type=password]:focus-visible,
.field input[type=tel]:focus,
.field input[type=tel]:focus-visible,
.field input[type=search]:focus,
.field input[type=search]:focus-visible,
.field select:focus,
.field select:focus-visible,
.field textarea:focus,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--color-main-teal);
  box-shadow: 0 0 0 3px rgba(38, 183, 183, 0.2);
}
.field input[type=text]:disabled,
.field input[type=email]:disabled,
.field input[type=url]:disabled,
.field input[type=number]:disabled,
.field input[type=date]:disabled,
.field input[type=time]:disabled,
.field input[type=datetime-local]:disabled,
.field input[type=password]:disabled,
.field input[type=tel]:disabled,
.field input[type=search]:disabled,
.field select:disabled,
.field textarea:disabled {
  background: #f1f5f9;
  color: var(--color-text-muted);
  cursor: not-allowed;
  box-shadow: none;
}
.field textarea {
  min-height: 4.5em;
  resize: vertical;
}
.field select {
  cursor: pointer;
  appearance: auto;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.field-row.field-row--two .field {
  flex: 1;
  min-width: 10rem;
  margin-bottom: 0;
}

.field-staffs .field-staff-select,
.field-staffs select {
  min-width: 160px;
}

.actions {
  padding-top: 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.actions input[type=submit] {
  padding: 0.55rem 1.25rem;
  background: var(--color-gradient);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.actions input[type=submit]:hover {
  background: var(--color-gradient-hover);
}
.actions input[type=submit]:focus-visible {
  outline: 2px solid var(--color-main-teal);
  outline-offset: 2px;
}
.actions .btn-cancel {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  margin-left: 0;
}
.actions .btn-cancel:hover {
  color: var(--color-primary);
}

.hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.35rem;
  line-height: 1.45;
}

.form-section {
  margin: 1.5rem 0;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.form-section legend {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  padding: 0 0.5rem;
}
.form-section .form-section-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0.5rem 0 1rem;
  line-height: 1.5;
}

.filter-form {
  margin: 0.75rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.filter-form label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.filter-form select {
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
  min-width: 140px;
}
.filter-form input[type=submit] {
  padding: 0.4rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  cursor: pointer;
}
.filter-form input[type=submit]:hover {
  background: #f8fafc;
}

.errors {
  background: var(--color-danger-bg);
  border: 1px solid #fecaca;
  padding: 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.errors h2 {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.errors ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-danger);
}

.form-errors {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  list-style: none;
  background: var(--color-danger-bg);
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  font-size: 0.875rem;
  line-height: 1.5;
}
.form-errors li + li {
  margin-top: 0.25rem;
}

.breadcrumb {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

.task-detail dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.4rem 1.25rem;
  margin: 1rem 0;
}
.task-detail dt {
  font-weight: 500;
  color: var(--color-text-muted);
}
.task-detail dd {
  margin: 0;
}

.month-filter,
.shift-calendar-jump {
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.month-filter label,
.shift-calendar-jump label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}
.month-filter select,
.shift-calendar-jump select {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 4rem;
  cursor: pointer;
}
.month-filter select:focus, .month-filter select:focus-visible,
.shift-calendar-jump select:focus,
.shift-calendar-jump select:focus-visible {
  outline: none;
  border-color: var(--color-main-teal);
  box-shadow: 0 0 0 2px rgba(38, 183, 183, 0.15);
}
.month-filter input[type=submit],
.shift-calendar-jump input[type=submit] {
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  background: #f1f5f9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.month-filter input[type=submit]:hover,
.shift-calendar-jump input[type=submit]:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}
.month-filter input[type=submit]:focus-visible,
.shift-calendar-jump input[type=submit]:focus-visible {
  outline: 2px solid var(--color-main-teal);
  outline-offset: 2px;
}
.month-filter .month-nav,
.shift-calendar-jump .month-nav {
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.month-filter .btn-month,
.shift-calendar-jump .btn-month {
  font-size: 0.9rem;
  color: var(--color-primary);
  text-decoration: none;
}
.month-filter .btn-month:hover,
.shift-calendar-jump .btn-month:hover {
  text-decoration: underline;
}

.month-summary {
  font-weight: 500;
  margin-bottom: 1rem;
  color: var(--color-text);
}

.field-staffs .staff-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  min-height: 2rem;
  max-height: 8rem;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.staff-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: normal;
  cursor: pointer;
  font-size: 0.9rem;
}

.staff-none-hint {
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
}

.chatbot-panel {
  position: sticky;
  top: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  min-height: calc(90vh - 4rem);
  height: calc(90vh - 4rem);
}
.chatbot-panel--collapsed {
  min-height: 0;
  height: auto;
}

.chatbot-panel-toggle {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-main-teal, #26b7b7);
  cursor: pointer;
  font-family: inherit;
}
.chatbot-panel-toggle:hover {
  background: #f1f5f9;
}

.chatbot-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.chatbot-panel-body[hidden] {
  display: none !important;
}

.chatbot-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.chatbot-panel-head__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chatbot-panel-head__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.5rem;
}

.chatbot-panel-head__link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-main-teal, #26b7b7);
  text-decoration: none;
  white-space: nowrap;
}
.chatbot-panel-head__link--btn {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
}
.chatbot-panel-head__link--btn:hover {
  background: #f1f5f9;
  color: var(--color-text);
}
.chatbot-panel-head__link:hover {
  text-decoration: underline;
}

.chatbot-panel-staff-link {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.chatbot-status {
  flex-shrink: 0;
  font-size: 0.75rem;
  margin-bottom: 0.35rem;
  padding: 0.2rem 0;
}
.chatbot-status.chatbot-status--ok {
  color: var(--color-success, #1a9d9d);
}
.chatbot-status.chatbot-status--loading {
  color: var(--color-text-muted);
}

.chatbot-welcome {
  flex-shrink: 0;
  margin-bottom: 0.5rem;
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.chatbot-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 92%;
}
.chatbot-msg.chatbot-msg--user {
  align-self: flex-end;
  align-items: flex-end;
}

/* 吹き出し本体 */
.chatbot-msg-text {
  position: relative;
  display: inline-block;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  line-height: 1.5;
  word-break: break-word;
  max-width: 100%;
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
}

/* ユーザー吹き出し：右寄せ・メインカラー・しっぽ右・改行を表示 */
.chatbot-msg--user .chatbot-msg-text {
  background: var(--color-gradient, var(--color-primary));
  color: #fff;
  border-bottom-right-radius: 0.25rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.chatbot-msg--user .chatbot-msg-text::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left-color: var(--color-main-blue, var(--color-primary));
  border-top-width: 0;
  border-bottom-width: 0;
}

/* AI（ボット）吹き出し：左寄せ・薄い背景・しっぽ左・改行・リストを保持 */
.chatbot-msg--bot .chatbot-msg-text {
  background: #f0f9fa;
  color: var(--color-text);
  border: 1px solid #e0e8eb;
  border-bottom-left-radius: 0.25rem;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.65;
}
.chatbot-msg--bot .chatbot-msg-text::before {
  content: "";
  position: absolute;
  left: -6px;
  bottom: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right-color: #f0f9fa;
  border-top-width: 0;
  border-bottom-width: 0;
}

.chatbot-msg-time {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
  padding: 0 0.15rem;
}

.chatbot-link {
  color: var(--color-primary);
  text-decoration: underline;
}
.chatbot-link:hover {
  color: var(--color-primary-hover);
}

/* ボット返答の「該当文書」リンク */
.chatbot-msg-doc-links {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.chatbot-msg-doc-links .chatbot-link {
  font-weight: 500;
}

/* ボット案内の「〇〇へ移動」リンク */
.chatbot-nav-link {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  border-radius: 0.5rem;
  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
  text-decoration: none;
}
.chatbot-nav-link:hover {
  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
}

/* チャットボット用文書・抽出内容の表示 */
.chatbot-knowledge-show {
  margin-top: 1rem;
}

.chatbot-knowledge-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--color-bg-muted, #f5f5f5);
  border-radius: 0.5rem;
  font-size: 0.9rem;
}
.chatbot-knowledge-meta dt {
  color: var(--color-text-muted);
  font-weight: 500;
}

.chatbot-knowledge-content-title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.chatbot-knowledge-content {
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: #fff;
  overflow: auto;
  max-height: 70vh;
}

.chatbot-knowledge-section {
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
  word-break: break-word;
  border-bottom: 1px solid var(--color-border, #eee);
  scroll-margin-top: 1rem;
}
.chatbot-knowledge-section:last-child {
  border-bottom: none;
}

.chatbot-knowledge-content-body {
  margin: 0;
  padding: 1rem 1.25rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ボット利用料金（経営者向け） */
.chatbot-usage-summary {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--color-bg-muted, #f5f5f5);
  border-radius: 0.5rem;
}

.chatbot-usage-summary-heading {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.chatbot-usage-total-value,
.chatbot-usage-cost-value {
  font-weight: 600;
  margin-left: 0.5rem;
}

.chatbot-usage-cost-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-left: 0.5rem;
}

.chatbot-usage-table-heading {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
}

.chatbot-usage-table-wrap .empty {
  margin: 1rem 0;
  color: var(--color-text-muted);
}

/* チャットボット用文書・編集フォーム */
.chatbot-knowledge-edit-form {
  max-width: 48rem;
  margin-top: 1rem;
}
.chatbot-knowledge-edit-form .chatbot-knowledge-content-editor {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  font-family: inherit;
  resize: vertical;
  min-height: 12rem;
}
.chatbot-knowledge-edit-form .chatbot-knowledge-content-editor:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);
}

.chatbot-form {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.chatbot-input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
  font-size: 0.9rem;
  font-family: inherit;
  resize: none;
  min-height: 2.75rem;
  max-height: 8rem;
}
.chatbot-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(55, 157, 217, 0.15);
}

.chatbot-send {
  padding: 0.5rem 0.9rem;
  background: var(--color-gradient, var(--color-primary));
  color: #fff;
  border: none;
  border-radius: 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}
.chatbot-send:hover {
  opacity: 0.95;
}

.chatbot-conversations-list {
  list-style: none;
  padding: 0.5rem 0.75rem 0.75rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chatbot-conversations-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.chatbot-conversations-open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-decoration: none;
  color: inherit;
}
.chatbot-conversations-open:hover .chatbot-conversations-open__title {
  color: var(--color-main-teal, #26b7b7);
}
.chatbot-conversations-open__title {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
}
.chatbot-conversations-open__date {
  font-size: 0.78rem;
  color: var(--color-text-muted, #6b7280);
}

.chatbot-conversations-delete {
  flex-shrink: 0;
  padding: 0.25rem;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.chatbot-conversations-delete:hover {
  color: var(--color-danger, #dc2626);
}

.chatbot-conversations-search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: center;
}

.chatbot-conversations-search-input {
  flex: 1;
  max-width: 20rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.chatbot-conversation-detail .chatbot-conversation-meta {
  color: var(--color-text-muted, #6b7280);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.chatbot-conversation-detail .chatbot-conversation-messages {
  background: var(--color-bg-subtle, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
  max-height: 60vh;
  overflow-y: auto;
}
.chatbot-conversation-detail .chatbot-conversation-messages .chatbot-msg {
  margin-bottom: 0.75rem;
}
.chatbot-conversation-detail .chatbot-conversation-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.main-row--full .col-9 {
  flex: 1;
  max-width: 100%;
}

.main-col-sidebar--hidden {
  display: none;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
}

.badge--pending {
  background: var(--color-warning-bg, #fef3c7);
  color: var(--color-warning, #b45309);
}

.badge--ok {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--muted {
  background: var(--color-bg-subtle, #f3f4f6);
  color: var(--color-text-muted);
}

.attendance-member-lead {
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.attendance-member-month-filter {
  margin-bottom: 1rem;
}

.attendance-member-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}

.attendance-member-list__item + .attendance-member-list__item {
  border-top: 1px solid var(--color-border);
}

.attendance-member-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.12s ease;
}
.attendance-member-list__link:hover {
  background: var(--color-bg-subtle, #f9fafb);
}

.attendance-member-list__main {
  flex: 1;
  min-width: 10rem;
}

.attendance-member-list__name {
  display: block;
  font-weight: 600;
}

.attendance-member-list__meta {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.attendance-member-list__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  align-items: flex-end;
}

.attendance-member-list__stat {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 4.5rem;
}

.attendance-member-list__stat-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.attendance-member-list__stat-value {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}
.attendance-member-list__stat-value--pay {
  color: var(--color-main-teal, #26b7b7);
}

.attendance-member-list__chevron {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--color-text-muted);
  line-height: 1;
}

.attendance-month-summary__title {
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
}

.attendance-month-summary__note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.attendance-month-summary__pay-type {
  margin-left: 0.25rem;
  color: var(--color-text-muted);
}

.attendance-month-summary__grid--unified {
  grid-template-columns: repeat(3, 1fr);
}
.attendance-month-summary__grid--unified.attendance-month-summary__grid--no-pay {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  .attendance-month-summary__grid--unified {
    grid-template-columns: 1fr;
  }
}

.attendance-month-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
}
.attendance-month-summary__grid dt {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
}
.attendance-month-summary__grid dd {
  margin: 0.2rem 0 0;
  font-size: 1.05rem;
}

.attendance-month-summary__time-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
}

.attendance-month-summary__overtime {
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.attendance-month-summary__overtime strong {
  color: var(--color-text);
  font-weight: 700;
}

.staff-payroll-fields__body--disabled {
  opacity: 0.65;
}

.staff-payroll-fields {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #f8fafc;
}

.staff-payroll-fields__title {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.payroll-settings-subheading {
  margin: 1.25rem 0 0.75rem;
  font-size: 1rem;
}

.attendance-month-summary__formula {
  display: block;
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.page-header__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.3;
}

.page-header__desc {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 42rem;
}

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.page-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.page-toolbar .range-label,
.page-toolbar label {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.page-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin-bottom: 1rem;
  padding: 0.25rem;
  background: #eef4f6;
  border-radius: var(--radius);
  width: fit-content;
  max-width: 100%;
}

.page-tabs__item {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.page-tabs__item--current {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.page-tabs__item:hover:not(.page-tabs__item--current) {
  color: var(--color-primary);
}

.page-tabs__count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 0.15rem;
}

.page-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.25rem;
}
.page-panel--flush {
  padding: 0;
  overflow: hidden;
}
.page-panel--flush .tasks-table {
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.page-panel--compact {
  padding: 0.85rem 1.15rem;
  margin-bottom: 1rem;
}
.page-panel .page-panel__body {
  padding: 0 1.15rem 1rem;
}
.page-panel .page-panel__footer {
  padding: 0.75rem 1.15rem 1rem;
  border-top: 1px solid var(--color-border);
}

.page-panel__title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.empty-state {
  margin: 0;
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  line-height: 1.6;
}
.empty-state a {
  font-weight: 500;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
  border-radius: var(--radius-lg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-panel__title--padded {
  padding: 1rem 1.25rem 0.5rem;
  margin: 0;
}

.page-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.page-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.page-stat--highlight {
  border-color: rgba(38, 183, 183, 0.4);
  background: linear-gradient(145deg, #f0fdfa 0%, var(--color-surface) 100%);
}
.page-stat--highlight .page-stat__value {
  color: var(--color-main-teal, #26b7b7);
}
.page-stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.page-stat__value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}
.page-stat__unit {
  font-size: 0.85rem;
  font-weight: 600;
}
.page-stat__hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.accounting-index-note {
  margin: -0.5rem 0 1rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.accounting-year-table-hint {
  padding: 0.75rem 1.25rem 1rem;
  margin: 0;
}

.simulation-conditions {
  margin-bottom: 1rem;
}

.simulation-form__lead {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.department-grid {
  margin-bottom: 1.25rem;
}
.department-grid > .col-3 {
  display: flex;
  min-height: 100%;
}

.department-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 6.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.department-card:hover {
  border-color: rgba(38, 183, 183, 0.4);
  box-shadow: 0 4px 12px rgba(38, 183, 183, 0.1);
}

.department-card__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 2.75rem 1rem 1rem;
  text-decoration: none;
  color: inherit;
}
.department-card__main:hover .department-card__name {
  color: var(--color-main-teal, #26b7b7);
}

.department-card__name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
}

.department-card__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.department-card__edit {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}
.department-card__edit:hover {
  background: #f1f5f9;
  color: var(--color-text);
}

.app-modal,
.shift-modal {
  width: min(520px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.app-modal:not([open]),
.shift-modal:not([open]) {
  display: none;
}
.app-modal::backdrop,
.shift-modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.app-modal__inner,
.shift-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3rem);
}

.app-modal__header,
.shift-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--color-border);
  background: #f8fafc;
}

.app-modal__title,
.shift-modal__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.app-modal__close,
.shift-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  cursor: pointer;
}
.app-modal__close:hover,
.shift-modal__close:hover {
  background: #e2e8f0;
  color: var(--color-text);
}

.app-modal-form,
.shift-modal-form {
  padding: 1rem 1.15rem 1.15rem;
  overflow-y: auto;
}

.main .col-9 > h1:first-child,
.page-content > h1:first-child {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.main .col-9 > h1:first-child + .btn-new,
.main .col-9 > h1:first-child + .btn-secondary,
.page-content > h1:first-child + .btn-new {
  margin-top: -0.25rem;
  margin-bottom: 1rem;
}

.main-inner > .flash {
  margin: 0 0 1rem;
  max-width: none;
  border-radius: var(--radius);
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.main-inner > .flash::before {
  font-family: "Line Awesome Free";
  font-weight: 900;
  flex-shrink: 0;
}
.main-inner > .flash.notice {
  border: 1px solid #a7e8e8;
}
.main-inner > .flash.notice::before {
  content: "\f058";
  color: var(--color-success);
}
.main-inner > .flash.alert {
  border: 1px solid #fecaca;
}
.main-inner > .flash.alert::before {
  content: "\f071";
  color: var(--color-danger);
}

.breadcrumb {
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

.page-panel .form .field,
.page-panel form[class*=form] .field {
  margin-bottom: 1rem;
}
.page-panel .form label,
.page-panel form[class*=form] label {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: var(--color-text);
}
.page-panel .form input[type=text],
.page-panel .form input[type=email],
.page-panel .form input[type=password],
.page-panel .form input[type=number],
.page-panel .form input[type=date],
.page-panel .form input[type=datetime-local],
.page-panel .form select,
.page-panel .form textarea,
.page-panel form[class*=form] input[type=text],
.page-panel form[class*=form] input[type=email],
.page-panel form[class*=form] input[type=password],
.page-panel form[class*=form] input[type=number],
.page-panel form[class*=form] input[type=date],
.page-panel form[class*=form] input[type=datetime-local],
.page-panel form[class*=form] select,
.page-panel form[class*=form] textarea {
  width: 100%;
  max-width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.page-panel .form input[type=text]:focus,
.page-panel .form input[type=email]:focus,
.page-panel .form input[type=password]:focus,
.page-panel .form input[type=number]:focus,
.page-panel .form input[type=date]:focus,
.page-panel .form input[type=datetime-local]:focus,
.page-panel .form select:focus,
.page-panel .form textarea:focus,
.page-panel form[class*=form] input[type=text]:focus,
.page-panel form[class*=form] input[type=email]:focus,
.page-panel form[class*=form] input[type=password]:focus,
.page-panel form[class*=form] input[type=number]:focus,
.page-panel form[class*=form] input[type=date]:focus,
.page-panel form[class*=form] input[type=datetime-local]:focus,
.page-panel form[class*=form] select:focus,
.page-panel form[class*=form] textarea:focus {
  outline: none;
  border-color: var(--color-main-teal);
  box-shadow: 0 0 0 3px rgba(38, 183, 183, 0.15);
}

.project-timeline-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.project-timeline-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.project-timeline-range .range-label {
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
}
.project-timeline-range .range-input {
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
}

.project-list-header {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.project-timeline-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 8px;
  background: #fff;
}

.project-timeline {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  /* 表形式: 1日＝1列 */
}
.project-timeline th, .project-timeline td {
  vertical-align: middle;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.project-timeline thead th {
  background: var(--color-bg-subtle, #f8fafc);
  font-weight: 600;
  font-size: 0.85rem;
}
.project-timeline .project-timeline-name-col {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  border-right: 1px solid var(--color-border, #e2e8f0);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}
.project-timeline thead .project-timeline-name-col {
  background: var(--color-bg-subtle, #f8fafc);
}
.project-timeline .project-timeline-day-col {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  padding: 0.25rem 0;
  font-size: 0.7rem;
  color: var(--color-text-muted, #64748b);
  text-align: center;
  border-left: 1px solid var(--color-border, #e2e8f0);
  vertical-align: middle;
}
.project-timeline .project-timeline-day-col.is-today {
  background: #d4f1f1;
  color: var(--color-primary, #26b7b7);
  font-weight: 600;
}
.project-timeline.project-timeline--table .project-timeline-day-col.has-bar {
  background: var(--color-border, #e2e8f0);
}
.project-timeline.project-timeline--table .project-timeline-day-col.has-bar.is-in-progress {
  background: #a7e5e5;
}
.project-timeline.project-timeline--table tbody .project-timeline-day-col.has-bar {
  background: var(--color-border, #e2e8f0);
}
.project-timeline.project-timeline--table tbody .project-timeline-day-col.has-bar.is-in-progress {
  background: #a7e5e5;
}
.project-timeline .project-timeline-name {
  font-weight: 500;
  display: block;
}
.project-timeline .project-timeline-assignees {
  font-size: 0.75rem;
  color: var(--color-text-muted, #64748b);
  display: block;
  margin-top: 0.15rem;
}
.project-timeline .project-timeline-track {
  position: relative;
  height: 2rem;
  min-height: 2rem;
}
.project-timeline .project-timeline-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 1.25rem;
  min-width: 4px;
  border-radius: 4px;
  background: var(--color-border, #e2e8f0);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.project-timeline .project-timeline-bar.is-in-progress {
  background: #a7e5e5;
  border-color: #6ed9d9;
}
.project-timeline .project-timeline-bar-label {
  display: none;
}

.project-timeline-legend {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  margin: 0;
}
.project-timeline-legend .project-timeline-legend-item {
  margin-right: 1rem;
}
.project-timeline-legend .legend-swatch {
  display: inline-block;
  width: 1rem;
  height: 0.75rem;
  border-radius: 3px;
  background: var(--color-border, #e2e8f0);
  vertical-align: middle;
  margin-right: 0.25rem;
}
.project-timeline-legend .legend-swatch.is-in-progress {
  background: #a7e5e5;
}

.tasks-table .actions a,
.tasks-table .actions form {
  display: inline-block;
  margin-right: 0.5rem;
}
.tasks-table .btn-delete {
  display: inline;
}
.tasks-table .btn-delete input {
  background: none;
  border: none;
  color: #c00;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
}

.task-detail-header {
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.task-detail-header h1 {
  margin: 0;
  font-size: 1.5rem;
}

.task-detail dd.description {
  white-space: pre-wrap;
}

.task-detail .meta {
  font-size: 0.875rem;
  color: #888;
  margin-top: 1rem;
  display: block;
}

.task-detail .actions a,
.task-detail .actions .btn-delete {
  margin-right: 1rem;
}

.task-detail-back {
  margin-top: 2rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.task-staffs-chosen .task-staffs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  min-height: 1.5rem;
}
.task-staffs-chosen .task-staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: #e0f2fe;
  border: 1px solid #0ea5e9;
  border-radius: 4px;
  font-size: 0.9rem;
}
.task-staffs-chosen .task-staff-chip .task-staff-remove {
  padding: 0 0.15rem;
  margin: 0;
  border: none;
  background: transparent;
  color: #0369a1;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.task-staffs-chosen .task-staff-chip .task-staff-remove:hover {
  color: #dc2626;
}
.task-staffs-chosen .task-staffs-add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.task-staffs-chosen .task-staffs-add .field-staff-select {
  min-width: 12rem;
}
.task-staffs-chosen .task-staffs-add .btn-task-staff-add {
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.task-time-tracking {
  margin: 1.5rem 0;
}
.task-time-tracking__title {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}
.task-time-tracking__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.task-time-tracking__start-form {
  display: inline;
}
.task-time-tracking__running-note {
  font-size: 0.85rem;
  color: #059669;
  font-weight: 500;
}
.task-time-tracking__log-title {
  margin: 1.25rem 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.task-time-tracking__empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.task-time-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.task-time-compare__label {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 0.2rem;
}
.task-time-compare__value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}
.task-time-compare__sub {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.task-time-compare--over .task-time-compare__item--actual .task-time-compare__value {
  color: #dc2626;
}
.task-time-compare--near .task-time-compare__item--actual .task-time-compare__value {
  color: #d97706;
}
.task-time-compare--under .task-time-compare__item--actual .task-time-compare__value {
  color: #059669;
}

.task-time-manual {
  margin-bottom: 1rem;
}
.task-time-manual__summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-primary);
}
.task-time-manual__form {
  margin-top: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}
.task-time-manual__row {
  margin-bottom: 0.65rem;
}
.task-time-manual__row label {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}
.task-time-manual__input {
  width: 100%;
  max-width: 20rem;
}

.task-time-compact {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.task-time-compact__actual {
  font-weight: 600;
}
.task-time-compact__sep {
  color: var(--color-text-muted);
}
.task-time-compact__estimated {
  color: var(--color-text-muted);
}
.task-time-compact--over .task-time-compact__actual {
  color: #dc2626;
}
.task-time-compact--near .task-time-compact__actual {
  color: #d97706;
}
.task-time-compact--under .task-time-compact__actual {
  color: #059669;
}

.project-timeline-time {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

.task-time-report-filter {
  margin-bottom: 1rem;
}

.task-time-report-summary__title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.task-time-report-table,
.task-time-report-staff-table {
  font-size: 0.88rem;
}

.task-time-report-table tr.task-time-compare--over td:nth-child(4) {
  color: #dc2626;
  font-weight: 600;
}

.todo-timer-btn-form {
  display: inline;
  margin: 0 0.25rem;
}

.todo-timer-btn {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
}

.task-time-log {
  font-size: 0.88rem;
}
.task-time-log__row--running {
  background: #f0fdf4;
}
.task-time-log__actions {
  white-space: nowrap;
}
.task-time-log__actions form {
  display: inline;
}

.staff-work-schedule {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  margin: 0;
}
.staff-work-schedule legend {
  font-weight: 600;
  padding: 0 0.35rem;
}
.staff-work-schedule__intro {
  margin: 0 0 0.85rem;
}
.staff-work-schedule__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.85rem;
}
.staff-work-schedule__time {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.staff-work-schedule__time label {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
}
.staff-work-schedule__sep {
  padding-bottom: 0.45rem;
  color: var(--color-text-muted, #64748b);
}
.staff-work-schedule__break, .staff-work-schedule__weekly, .staff-work-schedule__annual {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 16rem;
  margin-bottom: 0.75rem;
}
.staff-work-schedule__break label, .staff-work-schedule__weekly label, .staff-work-schedule__annual label {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
}
.staff-work-schedule__input {
  max-width: 10rem;
}
.staff-work-schedule__preview {
  margin: 0.5rem 0 0;
  font-weight: 500;
  color: var(--color-primary, #2563eb);
}

.staff-retired td {
  opacity: 0.65;
}

.staff-show {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.staff-show-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  line-height: 1.5;
}
.staff-show-banner--retired {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.staff-show-hero {
  padding: 1.25rem 1.35rem;
}
.staff-show-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.staff-show-hero__identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.staff-show-hero__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #e0f7f7 0%, #f0fdfa 100%);
  color: var(--color-main-teal, #26b7b7);
  font-size: 1.75rem;
}
.staff-show-hero__name {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}
.staff-show-hero__subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.9rem;
}
.staff-show-hero__dept {
  color: var(--color-text-muted);
  font-weight: 500;
}
.staff-show-hero__dept::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--color-border);
}
.staff-show-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.staff-show-hero__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1.5rem;
  margin: 0;
}
@media (min-width: 560px) {
  .staff-show-hero__facts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .staff-show-hero__facts {
    grid-template-columns: repeat(3, 1fr);
  }
}
.staff-show-hero__fact {
  margin: 0;
}
.staff-show-hero__fact dt {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.staff-show-hero__fact dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  word-break: break-word;
}
.staff-show-hero__pay-type {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 500;
}
.staff-show-hero__pay-amount {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}
.staff-show-hero__pay-mode {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.staff-show-action-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 4.25rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.staff-show-action-btn i {
  font-size: 1.25rem;
  line-height: 1;
}
.staff-show-action-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: var(--color-text);
}
.staff-show-action-btn--primary {
  border-color: var(--color-main-teal, #26b7b7);
  background: var(--color-main-teal, #26b7b7);
  color: #fff;
}
.staff-show-action-btn--primary:hover {
  background: #1fa3a3;
  border-color: #1fa3a3;
  color: #fff;
}

.staff-badge {
  display: inline-block;
  width: fit-content;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
}
.staff-badge--owner {
  background: #ede9fe;
  color: #5b21b6;
}
.staff-badge--employee {
  background: #dbeafe;
  color: #1d4ed8;
}
.staff-badge--part-time {
  background: #f3f4f6;
  color: #374151;
}

.staff-show-stats__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}
.staff-show-stats__more {
  font-size: 0.85rem;
  font-weight: 500;
}
.staff-show-stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.staff-show-stats__grid--attendance {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 640px) {
  .staff-show-stats__grid--attendance {
    grid-template-columns: 1fr;
  }
}

.staff-show-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.staff-show-stat--pay {
  border-color: rgba(38, 183, 183, 0.35);
  background: linear-gradient(145deg, #f0fdfa 0%, var(--color-surface) 100%);
}
.staff-show-stat__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.staff-show-stat__value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}
.staff-show-stat--pay .staff-show-stat__value {
  color: var(--color-main-teal, #26b7b7);
}

.staff-show-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}
.staff-show-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.85rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s, border-color 0.15s;
}
.staff-show-nav__item i {
  font-size: 1.4rem;
  color: var(--color-main-teal, #26b7b7);
}
.staff-show-nav__item:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: var(--color-text);
}
.staff-show-nav__label {
  line-height: 1.2;
}

.staff-show-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px) {
  .staff-show-columns {
    grid-template-columns: 1fr 1fr;
  }
  .staff-show-columns .staff-show-block--wide {
    grid-column: 1/-1;
  }
}

.staff-show-block {
  padding: 0;
}
.staff-show-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--color-border);
  background: #fafafa;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.staff-show-block__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
}
.staff-show-block__link {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}
.staff-show-block__empty {
  margin: 0;
  padding: 1.5rem 1.15rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: center;
}

.staff-show-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.staff-show-list__row {
  display: grid;
  grid-template-columns: 2.75rem 1.25rem 1fr auto;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.staff-show-list__row:last-child {
  border-bottom: none;
}
.staff-show-list__row:hover {
  background: #fafafa;
}
.staff-show-list__row--attendance {
  grid-template-columns: 2.75rem 1.25rem 1fr auto;
}
@media (min-width: 480px) {
  .staff-show-list__row--attendance .staff-show-list__main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.staff-show-list__date {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.staff-show-list__weekday {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
}
.staff-show-list__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  min-width: 0;
}
.staff-show-list__primary {
  font-weight: 600;
  color: var(--color-text);
}
.staff-show-list__times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.staff-show-list__sep {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.staff-show-list__hours {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-main-teal, #26b7b7);
  white-space: nowrap;
}
.staff-show-list__badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
}
.staff-show-list__badge--ok {
  background: #d1fae5;
  color: #065f46;
}
.staff-show-list__badge--pending {
  background: #fef3c7;
  color: #92400e;
}
.staff-show-list__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.staff-show-list__btn:hover {
  background: #f3f4f6;
  color: var(--color-text);
}

.staff-payslip-profile {
  margin-top: 1rem;
}
.staff-payslip-profile__header {
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-border);
}
.staff-payslip-profile__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
}
.staff-payslip-profile__title .la {
  color: var(--color-main-teal, #26b7b7);
  font-size: 1.15rem;
}
.staff-payslip-profile__lead {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.staff-payslip-profile__sections {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.staff-payslip-profile__section-title {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.staff-payslip-profile__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
@media (min-width: 520px) {
  .staff-payslip-profile__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.staff-payslip-profile__grid:last-child {
  margin-bottom: 0;
}
.staff-payslip-profile__checks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.staff-payslip-profile__check {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fafafa;
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.4;
}
.staff-payslip-profile__check input {
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.staff-payslip-profile__check:has(input:checked) {
  border-color: rgba(38, 183, 183, 0.45);
  background: #f0fdfa;
}

.staff-show-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: #fef3c7;
  color: #92400e;
}
.staff-show-tag--paid-leave {
  background: #dbeafe;
  color: #1d4ed8;
}

.client-detail .company {
  font-size: 1.1rem;
  color: var(--color-text-muted, #555);
  margin: 0.25rem 0 1rem;
}

/* フォーム: 基本情報・サイト監視のセクション分け */
.form-section {
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  background: var(--color-bg-muted, #f9f9f9);
}
.form-section legend {
  font-size: 1rem;
  font-weight: 600;
  padding: 0 0.5rem;
}
.form-section .form-section-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0.5rem 0 1rem;
  line-height: 1.5;
}

.client-monitored-sites-preview {
  margin-top: 0.75rem;
}

/* 詳細・編集: セクション（基本情報 / サイト監視） */
.client-section {
  margin: 1.5rem 0;
}
.client-section .section-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border);
}
.client-section .section-note {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.client-section .sub-section-title {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0.75rem 0 0.5rem;
}

.client-monitored-sites .monitored-sites-list,
.client-monitored-sites-edit .monitored-sites-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.client-monitored-sites .monitored-sites-list li,
.client-monitored-sites-edit .monitored-sites-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.client-monitored-sites .monitored-sites-list li .monitored-site-status,
.client-monitored-sites-edit .monitored-sites-list li .monitored-site-status {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.client-monitored-sites .monitored-sites-list li .link-edit,
.client-monitored-sites-edit .monitored-sites-list li .link-edit {
  margin-left: auto;
}
.client-monitored-sites .empty,
.client-monitored-sites-edit .empty {
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.notice-client {
  padding: 0.5rem 0.75rem;
  background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.clients-table .actions a,
.clients-table .actions form {
  display: inline-block;
  margin-right: 0.5rem;
}

.clients-table .btn-delete input {
  background: none;
  border: none;
  color: #c00;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
}

.todo-new-form,
.todo-edit-form {
  margin-bottom: 1.5rem;
}
.todo-new-form .todo-new-form__content-row,
.todo-edit-form .todo-new-form__content-row {
  width: 100%;
  margin-bottom: 1.25rem;
}
.todo-new-form .todo-new-form__meta-row,
.todo-edit-form .todo-new-form__meta-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 0.25rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.todo-new-form .todo-description-row,
.todo-edit-form .todo-description-row {
  width: 100%;
  margin-bottom: 0.5rem;
}
.todo-new-form .todo-description-row label,
.todo-edit-form .todo-description-row label {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 0.25rem;
}

.todo-description-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.95rem;
  resize: vertical;
  min-height: 4.5em;
}
.todo-description-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.todo-due-date {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.todo-due-date label {
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.todo-due-date-input {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.9rem;
}

.todo-due {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  min-width: 5rem;
}

.todo-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 1rem;
}
.todo-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.btn-add-todo {
  padding: 0.6rem 1.25rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
.btn-add-todo:hover {
  background: #1d4ed8;
}

.todo-completed-filter {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.todo-completed-filter__clear {
  margin-left: 0.5rem;
}

.todo-completed-link {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}

.todo-list-panel {
  padding: 0.65rem 0.85rem 0.85rem;
}

.todo-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.todo-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.85rem 1rem;
  margin: 0;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 8px);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}
.todo-item.completed .todo-content {
  color: #94a3b8;
  text-decoration: line-through;
}

.todo-toggle-form {
  display: flex;
  margin: 0;
}

.todo-checkbox {
  width: 1.2rem;
  height: 1.2rem;
  cursor: pointer;
}

.todo-content {
  flex: 1;
}

.todo-staff-select-wrap {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.todo-staff-select-wrap label {
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  white-space: nowrap;
}

.todo-staff-select,
.field-staff-select {
  min-width: 140px;
  max-width: 200px;
  height: auto;
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--color-border, #e2e8f0);
}

/* 従来のチェックボックス用（他画面で未置換の場合用） */
.todo-staff-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
  flex: 0 0 auto;
  min-width: 180px;
  max-width: 320px;
  max-height: 4rem;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.todo-staff-checkboxes .todo-staff-label {
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  margin-right: 0.25rem;
  flex: 0 0 auto;
}
.todo-staff-checkboxes .staff-checkbox-label {
  font-size: 0.85rem;
  white-space: nowrap;
}

.todo-staff {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.todo-task {
  font-size: 0.85rem;
  color: #64748b;
}
.todo-task a {
  color: #64748b;
  text-decoration: none;
}
.todo-task a:hover {
  text-decoration: underline;
}

.task-todos {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.task-todos h2 {
  font-size: 1.1rem;
  margin: 0 0 1rem;
}
.task-todos .todo-new-form {
  margin-bottom: 1rem;
}

.btn-add-to-todo {
  padding: 0.5rem 1rem;
  background: #0ea5e9;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-add-to-todo:hover {
  background: #0284c7;
}

.todo-delete-form {
  display: inline;
  margin: 0;
}
.todo-delete-form input {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: underline;
}
.todo-delete-form input:hover {
  color: #dc2626;
}

.todo-count {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #64748b;
}

.inbox-detail-empty-body {
  margin: 0;
  color: var(--color-text-muted);
  font-style: italic;
}

.inquiry-detail .meta {
  color: #64748b;
  margin-bottom: 1rem;
}
.inquiry-detail .body {
  white-space: pre-wrap;
}
.inquiry-detail .memo {
  background: #f8fafc;
  padding: 0.75rem;
  border-radius: 4px;
}

.inquiry-line-reply {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius, 8px);
}
.inquiry-line-reply h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}
.inquiry-line-reply .field {
  margin-bottom: 0.75rem;
}
.inquiry-line-reply textarea {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.95rem;
}

.unread-row {
  background: #fef9c3;
}

.staff-chat-layout--inquiry {
  height: min(calc(100vh - 10rem), 720px);
  min-height: 420px;
}

.staff-chat-panel--inquiry {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.staff-chat-panel--inquiry .staff-chat-panel__header {
  flex-shrink: 0;
}

.inquiry-panel__grid {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.inquiry-panel__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg-subtle, #f8fafc);
}

.inquiry-panel__thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.inquiry-panel__message {
  max-width: 92%;
  font-size: 0.92rem;
  line-height: 1.55;
}
.inquiry-panel__message--inbound {
  align-self: flex-start;
}
.inquiry-panel__message--outbound {
  align-self: flex-end;
}

.inquiry-panel__msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.inquiry-panel__from-name {
  font-weight: 700;
  color: var(--color-text);
}

.inquiry-panel__from-time {
  color: var(--color-text-muted);
}

.inquiry-panel__reply-channel {
  padding: 0.08rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
}

.inquiry-panel__msg-body {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.inquiry-panel__msg-body p {
  margin: 0 0 0.65rem;
}
.inquiry-panel__msg-body p:last-child {
  margin-bottom: 0;
}

.inquiry-panel__message--outbound .inquiry-panel__msg-body {
  background: #e0f7f7;
  border-color: rgba(38, 183, 183, 0.35);
}

.inquiry-panel__reply-form {
  flex-shrink: 0;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.inquiry-panel__reply-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text);
}

.inquiry-panel__reply-hint {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.inquiry-panel__reply-mailto {
  font-weight: 600;
}

.inquiry-panel__reply-submit {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
}

.inquiry-panel__sidebar {
  flex-shrink: 0;
  width: min(300px, 38vw);
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem;
  overflow-y: auto;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
}

.inquiry-panel__meta {
  margin: 0;
  padding: 0.75rem 0.85rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.inquiry-panel__meta-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.35rem 0.65rem;
  margin: 0;
  padding: 0.35rem 0;
  font-size: 0.85rem;
}
.inquiry-panel__meta-row:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.15rem;
}
.inquiry-panel__meta-row dt {
  margin: 0;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.inquiry-panel__meta-row dd {
  margin: 0;
  word-break: break-word;
}

.inquiry-panel__form-card {
  padding: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fafbfc;
  box-shadow: var(--shadow-sm);
}

.inquiry-panel__form-title {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.inquiry-panel__form-row {
  margin-bottom: 0.75rem;
}
.inquiry-panel__form-row:last-of-type {
  margin-bottom: 0;
}
.inquiry-panel__form-row--status {
  margin-bottom: 0.65rem;
}

.inquiry-panel__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.inquiry-panel__select,
.inquiry-panel__textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  background: var(--color-surface);
}
.inquiry-panel__select:focus,
.inquiry-panel__textarea:focus {
  outline: none;
  border-color: var(--color-main-teal, #26b7b7);
  box-shadow: 0 0 0 2px rgba(38, 183, 183, 0.2);
}

.inquiry-panel__textarea {
  resize: vertical;
  min-height: 4.5em;
  line-height: 1.45;
}

.inquiry-panel__form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.inquiry-panel__save {
  flex: 1;
  min-width: 5rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.inquiry-panel__delete-form {
  margin: 0;
}

.inquiry-panel__delete {
  padding: 0.45rem 0.65rem;
  border: none;
  background: transparent;
  color: #b91c1c;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
}
.inquiry-panel__delete:hover {
  color: #991b1b;
}

.inquiry-panel__line-form {
  padding: 0.85rem;
  border-radius: var(--radius-lg);
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.inquiry-panel__line-form .inquiry-panel__form-title {
  color: #15803d;
}

.inquiry-panel__line-submit {
  width: 100%;
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .staff-chat-layout--inquiry {
    height: auto;
    min-height: 0;
  }
  .staff-chat-panel--inquiry {
    height: auto;
  }
  .inquiry-panel__grid {
    flex-direction: column;
    overflow: visible;
  }
  .inquiry-panel__sidebar {
    width: 100%;
    min-width: 0;
    border-left: 0;
    border-bottom: 1px solid var(--color-border);
    order: -1;
    overflow: visible;
  }
  .inquiry-panel__main {
    max-height: none;
    overflow: visible;
  }
}
.reservation-facility-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.reservation-facility-filter__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
}
.reservation-facility-filter__form {
  display: inline-block;
}
.reservation-facility-filter__select {
  padding: 0.4rem 0.75rem;
  font-size: 0.95rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 4px);
  min-width: 200px;
}
.reservation-facility-filter__current {
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
}

.reservation-source-type-badge {
  margin: 0 0 1rem;
  padding: 0.35rem 0.75rem;
  display: inline-block;
  background: var(--color-primary-bg, #ecfdf5);
  color: var(--color-primary, #166534);
  border-radius: var(--radius-sm, 4px);
  font-size: 0.95rem;
  font-weight: 600;
}

.source-category-label {
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
}

.reservation-category-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.reservation-category-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.35rem 1.5rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 12px);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.reservation-category-card:hover {
  border-color: rgba(38, 183, 183, 0.45);
  box-shadow: 0 6px 16px rgba(38, 183, 183, 0.12);
  transform: translateY(-1px);
}
.reservation-category-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md, 8px);
  background: #f0fdfa;
  color: var(--color-main-teal, #26b7b7);
  font-size: 1.35rem;
}
.reservation-category-card__title {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 700;
  color: var(--color-text);
}
.reservation-category-card__desc {
  font-size: 0.88rem;
  color: var(--color-text-muted, #64748b);
  margin: 0;
  line-height: 1.5;
}

.reservation-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.reservation-list-lead {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.55;
}

.reservation-link-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.reservation-link-with-icon .la {
  font-size: 1rem;
}

.reservations-by-source {
  margin-bottom: 2rem;
}
.reservations-by-source:last-child {
  margin-bottom: 0;
}

.reservations-by-source__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

.sync-section {
  margin-bottom: 1.5rem;
}
.sync-section h2 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.sync-section .sync-hint {
  color: var(--color-text-muted, #64748b);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}
.sync-section .sync-badge {
  font-size: 0.8rem;
  color: var(--color-warning, #b45309);
}
.sync-section .sync-badge--warn {
  color: #b91c1c;
  font-weight: 600;
}
.sync-section .sync-badge--muted {
  color: var(--color-text-muted, #64748b);
  font-weight: normal;
}

.sync-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sync-list li, .sync-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.sync-list li:last-child, .sync-list__item:last-child {
  border-bottom: none;
}
.sync-list__name {
  font-weight: 600;
  font-size: 0.92rem;
}
.sync-list__meta {
  font-size: 0.82rem;
  color: var(--color-text-muted, #64748b);
}

.btn-sync {
  padding: 0.35rem 0.75rem;
  background: #166534;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-sync:hover {
  background: #15803d;
}

.reservations-table tr.cancelled {
  opacity: 0.7;
  background: var(--color-background-muted, #f8fafc);
}

.reservations-table .status-cancelled {
  color: var(--color-text-muted, #64748b);
  font-style: italic;
}

.reservations-table .raw-data,
.reservation-detail .raw-data {
  background: #f1f5f9;
  padding: 1rem;
  border-radius: 4px;
  font-size: 0.85rem;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

.reservation-detail .raw-data {
  margin-top: 0.5rem;
}

.hint {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
}

.form--accommodation-facility .form-section {
  margin-bottom: 1.5rem;
}

.form--accommodation-facility .form-section__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}

.form--accommodation-facility .form-divider {
  border: none;
  border-top: 1px solid var(--color-border, #e2e8f0);
  margin: 1.5rem 0;
}

.form--accommodation-facility .form-section--optional .form-section__title {
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
}

.form--accommodation-reservation .form-section {
  margin-bottom: 1.5rem;
}

.form--accommodation-reservation .form-section__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}

.form--accommodation-reservation .form-divider {
  border: none;
  border-top: 1px solid var(--color-border, #e2e8f0);
  margin: 1.5rem 0;
}

.form--accommodation-reservation .input-readonly {
  background: var(--color-background-muted, #f1f5f9);
  cursor: not-allowed;
}

.field--file {
  margin-bottom: 1rem;
}
.field--file input[type=file] {
  display: block;
  margin-top: 0.35rem;
  padding: 0.5rem;
  min-width: 280px;
  font-size: 1rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 4px;
  background: var(--color-background, #fff);
}
.field--file input[type=file]::file-selector-button {
  padding: 0.35rem 0.75rem;
  margin-right: 0.75rem;
  font-size: 0.9rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 4px;
  background: var(--color-background-muted, #f1f5f9);
  cursor: pointer;
}
.field--file .hint {
  margin-top: 0.35rem;
}

.csv-import-errors {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
}
.csv-import-errors__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #b91c1c;
}
.csv-import-errors__list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  color: #991b1b;
}
.csv-import-errors__list li {
  margin-bottom: 0.25rem;
}

.cash-envelopes-table .uncollected {
  background: #fef9c3;
}
.cash-envelopes-table .actions {
  white-space: nowrap;
}
.cash-envelopes-table .inline-collect-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.5rem;
}
.cash-envelopes-table .inline-collect-form label {
  font-size: 0.85rem;
}
.cash-envelopes-table .inline-collect-form input[type=number] {
  width: 100px;
}
.cash-envelopes-table .btn-delete input {
  background: none;
  border: none;
  color: #c00;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
}

.btn-collect {
  padding: 0.35rem 0.75rem;
  background: #166534;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn-collect:hover {
  background: #15803d;
}

.cash-envelope-detail .actions .btn-collect {
  margin-right: 1rem;
}

.lesson-fee-stats {
  margin-bottom: 1.25rem;
}

.lesson-fee-toolbar {
  margin-bottom: 1.25rem;
}

.lesson-fee-panel {
  margin-bottom: 1.5rem;
}

.lesson-fee-payment-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-sm, 4px);
}
.lesson-fee-payment-badge--cash {
  background: #fef3c7;
  color: #92400e;
}
.lesson-fee-payment-badge--bank {
  background: #dbeafe;
  color: #1e40af;
}

.lesson-fee-done,
.lesson-fee-received {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.lesson-fee-muted {
  color: var(--color-text-muted, #64748b);
}

.lesson-fees-table .lesson-fee-inline-form {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}
.lesson-fees-table .lesson-fee-inline-form input[type=date] {
  width: 10rem;
  padding: 0.35rem;
}
.lesson-fees-table .lesson-fee-inline-form input[type=submit] {
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}
.lesson-fees-table .lesson-fee-check-form {
  display: inline;
}
.lesson-fees-table .lesson-fee-transfer-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.lesson-fees-table .lesson-fee-received {
  color: var(--color-success);
  font-size: 0.9rem;
}
.lesson-fees-table .btn-collect {
  padding: 0.35rem 0.75rem;
  background: var(--color-success);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}
.lesson-fees-table .btn-collect:hover {
  opacity: 0.9;
}
.lesson-fees-table .btn-link-small {
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.lesson-reports-table {
  margin-top: 3rem;
}

.lesson-reports-table .btn-send-inline {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
.lesson-reports-table .btn-send-inline button {
  padding: 0.2rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  background: var(--color-primary, #26b7b7);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}
.lesson-reports-table .btn-send-inline input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  min-height: 1.75rem;
  line-height: 1.2;
}
.lesson-reports-table .btn-send-inline input:hover {
  filter: brightness(0.92);
}
.lesson-reports-table .btn-send-inline input:active {
  transform: scale(0.98);
}
.lesson-reports-table .btn-send-inline input:focus-visible {
  outline: 2px solid var(--color-primary, #26b7b7);
  outline-offset: 2px;
}

.form-section {
  margin-bottom: 2rem;
}
.form-section .form-section-title {
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.form-section .form-section-description {
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  margin: -0.25rem 0 1rem;
}

.check-sheet-section .check-sheet-description {
  color: var(--color-text-muted, #64748b);
  font-size: 0.9rem;
  margin: -0.5rem 0 1rem;
}

.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.radio-label,
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: normal;
}
.radio-label input[type=radio],
.radio-label input[type=checkbox],
.checkbox-label input[type=radio],
.checkbox-label input[type=checkbox] {
  margin: 0;
  flex-shrink: 0;
}

.inline-after-radio,
.inline-after-checkbox {
  margin-left: 0.5rem;
  width: 12rem;
  max-width: 100%;
}

.check-sheet-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.check-sheet-programming {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}
.check-sheet-programming .check-sheet-subtitle {
  font-size: 1rem;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.field-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  margin: 0.25rem 0 0.35rem;
}

.check-sheet-detail {
  margin: 1.5rem 0;
}
.check-sheet-detail h2 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

.parent-message-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--color-bg-subtle, #f8fafc);
  border-radius: 8px;
}
.parent-message-section h2 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}
.parent-message-section .parent-message-body {
  white-space: pre-wrap;
  margin-bottom: 0.75rem;
  line-height: 1.6;
}
.parent-message-section .parent-message-empty {
  color: var(--color-text-muted, #64748b);
  margin-bottom: 0.75rem;
}
.parent-message-section .parent-message-actions {
  margin: 0;
}
.parent-message-section .btn-inline input {
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  background: var(--color-primary, #26b7b7);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.parent-message-section .btn-generate-message input,
.parent-message-section .btn-generate-message {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background: var(--color-primary, #26b7b7);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.parent-message-section .btn-generate-message:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.parent-message-generate-row .field-actions {
  margin-top: 0.5rem;
}
.parent-message-generate-row .generate-message-status {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.parent-message-generate-row .generate-message-status--success {
  color: var(--color-success, #059669);
}
.parent-message-generate-row .generate-message-status--error {
  color: var(--color-error, #dc2626);
}

.lesson-report-show {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.lesson-report-show__stats {
  margin-bottom: 0;
}
.lesson-report-show__stat-date {
  font-size: 1.15rem;
}
.lesson-report-show__stat-text {
  font-size: 0.95rem;
  line-height: 1.35;
  font-weight: 600;
}
.lesson-report-show__resend {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}
.lesson-report-show__resend input[type=submit] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.lesson-report-show__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 960px) {
  .lesson-report-show__columns {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  }
}
.lesson-report-show__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.lesson-report-show__aside {
  min-width: 0;
}
@media (min-width: 960px) {
  .lesson-report-show__aside {
    position: sticky;
    top: 1rem;
  }
}
.lesson-report-show__panel {
  margin-bottom: 0;
}
.lesson-report-show__section-title {
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--color-primary, #26b7b7);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text, #0f172a);
  letter-spacing: 0.01em;
}
.lesson-report-show__group-title {
  margin: 0 0 0.75rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted, #64748b);
  background: var(--color-bg-subtle, #f1f5f9);
  border-radius: var(--radius-sm, 4px);
  border-left: 3px solid var(--color-primary, #26b7b7);
}
.lesson-report-show__fields {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0;
}
.lesson-report-show__field {
  display: grid;
  grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr);
  gap: 0.35rem 1rem;
  align-items: start;
  margin: 0;
  padding: 0.55rem 0.65rem;
  background: var(--color-bg-subtle, #f8fafc);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border, #e2e8f0);
}
.lesson-report-show__field--block {
  grid-template-columns: 1fr;
  gap: 0.45rem;
}
.lesson-report-show__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-muted, #64748b);
}
.lesson-report-show__value {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text, #0f172a);
  word-break: break-word;
}
.lesson-report-show__value a {
  font-weight: 600;
}
.lesson-report-show__value-box {
  padding: 0.75rem 0.85rem;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.65;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.lesson-report-show__lms-id code {
  font-size: 0.9rem;
  padding: 0.15rem 0.4rem;
  background: var(--color-bg-subtle, #f1f5f9);
  border-radius: 4px;
}
.lesson-report-show__lms-id .hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
}
.lesson-report-show__check-group {
  padding-top: 1.15rem;
  margin-top: 1.15rem;
  border-top: 1px dashed var(--color-border, #e2e8f0);
}
.lesson-report-show__check-group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.lesson-report-show__prose p {
  margin: 0 0 0.65rem;
}
.lesson-report-show__prose p:last-child {
  margin-bottom: 0;
}
.lesson-report-show__message-panel {
  margin-bottom: 0;
  background: linear-gradient(180deg, #f8fafc 0%, var(--color-surface) 100%);
  border-color: rgba(38, 183, 183, 0.25);
}
.lesson-report-show__message-body {
  white-space: pre-wrap;
  word-break: break-word;
}
.lesson-report-show__message-empty {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.55;
}
.lesson-report-show__message-actions {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}
.lesson-report-show__regen, .lesson-report-show__generate {
  width: 100%;
  margin: 0;
}
.lesson-report-show__regen input[type=submit], .lesson-report-show__generate input[type=submit] {
  width: 100%;
}
.lesson-report-show__generate input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.lesson-report-detail .detail-list {
  margin: 1rem 0;
}

.lesson-report-images-preview {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.lesson-report-images-preview li {
  margin-bottom: 0.25rem;
}

.lesson-report-images-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.lesson-report-images-list li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.lesson-report-images-list .lesson-report-image-name {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
}

.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.settings-section {
  padding: 1.25rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.settings-section-title {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.settings-section-desc {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.settings-section .btn-new,
.settings-section .btn-secondary {
  margin-right: 0.5rem;
  margin-bottom: 0.75rem;
}

.settings-actions-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.settings-actions-inline form {
  display: inline-block;
}
.settings-actions-inline form.btn-secondary-inline input {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.settings-actions-inline form.btn-secondary-inline input:hover {
  background: #f8fafc;
  border-color: var(--color-main-teal);
  color: var(--color-primary);
}

.settings-table {
  margin-top: 0.5rem;
}

.settings-table .btn-sync {
  padding: 0.35rem 0.75rem;
  background: var(--color-success);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.settings-table .btn-delete input {
  background: none;
  border: none;
  color: #c00;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
}

.settings-section .empty {
  margin: 0.5rem 0 0;
}

.inquiry-api-url-form {
  margin-bottom: 0.75rem;
}
.inquiry-api-url-form .field {
  margin-bottom: 0.5rem;
}
.inquiry-api-url-form .inquiry-api-url-input {
  width: 100%;
  max-width: 560px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}
.inquiry-api-url-form .actions {
  margin-top: 0.75rem;
}

.settings-subsection {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.settings-subsection-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.inquiry-form-url-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.inquiry-form-url-wrap .inquiry-form-url {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  word-break: break-all;
}

.btn-copy-url {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-main-blue);
  font-family: inherit;
}
.btn-copy-url:hover {
  background: #f1f5f9;
  border-color: var(--color-main-teal);
}
.btn-copy-url--copied {
  color: var(--color-main-teal);
  border-color: var(--color-main-teal);
  background: #f0fdfa;
}

.settings-embed-details {
  margin-top: 1rem;
  font-size: 0.9rem;
}

.settings-embed-details summary {
  cursor: pointer;
  color: var(--color-primary);
}

.settings-embed-code {
  margin-top: 0.5rem;
  padding: 1rem;
  background: #f1f5f9;
  border-radius: var(--radius-sm);
}

.settings-embed-code .embed-label {
  margin: 0.75rem 0 0.25rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.settings-embed-code .embed-label:first-child {
  margin-top: 0;
}

.settings-embed-code pre {
  margin: 0;
  padding: 0.5rem 0.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.8rem;
}

.line-settings-form {
  margin-bottom: 0.75rem;
}
.line-settings-form .field {
  margin-bottom: 0.5rem;
}
.line-settings-form .line-setting-input {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
}
.line-settings-form .line-webhook-url-display {
  display: block;
  margin-top: 0.25rem;
  padding: 0.5rem 0.65rem;
  background: #f1f5f9;
  border-radius: 4px;
  font-size: 0.85rem;
  word-break: break-all;
}
.line-settings-form .actions {
  margin-top: 0.75rem;
}

.schedule-calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 0.5rem;
}
.schedule-calendar .cal-dow {
  width: 14.28%;
  padding: 0.5rem;
  text-align: center;
  font-weight: 600;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 0.9rem;
}
.schedule-calendar .cal-day {
  vertical-align: top;
  padding: 0.35rem;
  border: 1px solid #e2e8f0;
  min-height: 90px;
  height: 100px;
  font-size: 0.85rem;
}
.schedule-calendar .cal-day.other-month {
  background: #f8fafc;
}
.schedule-calendar .cal-day.today {
  background: #f0fdf4;
}
.schedule-calendar .cal-day.holiday {
  background: #fef2f2;
}
.schedule-calendar .cal-day.holiday .cal-day-num .date-link {
  color: #dc2626;
}

.cal-holiday-name {
  font-size: 0.7rem;
  color: #dc2626;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.cal-day-num {
  margin-bottom: 0.25rem;
}
.cal-day-num .date-link {
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: #0f172a;
}
.cal-day-num .date-link:hover {
  text-decoration: underline;
  color: #2563eb;
}

.cal-entries {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cal-entries li {
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-entries .cal-time {
  color: #64748b;
  margin-right: 0.25rem;
  font-size: 0.75rem;
}
.cal-entries .cal-staff {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-left: 0.2rem;
}
.cal-entries .cal-title {
  font-size: 0.8rem;
}

.cal-more {
  color: #64748b;
  font-size: 0.75rem;
}

.cal-add {
  display: inline-block;
  margin-top: 0.25rem;
  color: #64748b;
  font-size: 0.9rem;
  text-decoration: none;
}
.cal-add:hover {
  color: #2563eb;
}

.cal-rest {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.25rem;
  display: inline-block;
}

.day-rest-notice {
  color: #dc2626;
  margin-bottom: 1rem;
  font-weight: 500;
}

.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.schedule-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}
.schedule-list li .time {
  color: #64748b;
  min-width: 5rem;
}
.schedule-list .schedule-staff {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.schedule-list .link-edit {
  font-size: 0.85rem;
}
.schedule-list .btn-delete-inline {
  display: inline;
  margin-left: 0.5rem;
}
.schedule-list .btn-delete-inline input {
  background: none;
  border: none;
  color: #c00;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: 0.85rem;
}
.schedule-list a.btn-delete-inline {
  margin-left: 0.5rem;
  color: #c00;
  text-decoration: underline;
  font-size: 0.85rem;
}

.no-entry {
  color: #94a3b8;
}

.schedule-detail .meta {
  color: #64748b;
  margin-bottom: 1rem;
}

.day-header {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}
.day-header .day-holiday-name {
  margin-left: 0.5rem;
  color: #dc2626;
  font-weight: 500;
}
.day-header .btn-back {
  margin-left: 1rem;
  font-size: 0.9rem;
}

.schedule-day-table .col-time {
  width: 8rem;
  vertical-align: top;
}
.schedule-day-table .col-entries {
  min-width: 240px;
}
.schedule-day-table .col-actions {
  width: 11rem;
  white-space: nowrap;
}
.schedule-day-table .hour-label {
  font-weight: 500;
  color: #334155;
}
.schedule-day-table tr.current-hour {
  background: #dbeafe;
}

.btn-add-hour {
  font-size: 0.9rem;
}

.schedule-staffs-chosen .schedule-staffs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  min-height: 1.5rem;
}
.schedule-staffs-chosen .schedule-staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: #e0f2fe;
  border: 1px solid #0ea5e9;
  border-radius: 4px;
  font-size: 0.9rem;
}
.schedule-staffs-chosen .schedule-staff-chip .schedule-staff-remove {
  padding: 0 0.15rem;
  margin: 0;
  border: none;
  background: transparent;
  color: #0369a1;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.schedule-staffs-chosen .schedule-staff-chip .schedule-staff-remove:hover {
  color: #dc2626;
}
.schedule-staffs-chosen .schedule-staffs-add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.schedule-staffs-chosen .schedule-staffs-add .field-staff-select {
  min-width: 12rem;
}
.schedule-staffs-chosen .schedule-staffs-add .btn-schedule-staff-add {
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.shift-form-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.shift-form-section-title {
  font-size: 1rem;
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.shift-form-section-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}

.shift-form-section--off-day {
  background: #fffbeb;
  border-color: #f59e0b;
}

.field--off-day-check {
  margin-bottom: 0.75rem;
}

.shift-off-day-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  cursor: pointer;
}
.shift-off-day-check input[type=checkbox] {
  width: 1.1rem;
  height: 1.1rem;
}

.shift-calendar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.shift-calendar-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.shift-calendar-title {
  font-weight: 600;
  min-width: 8rem;
  text-align: center;
}

.shift-calendar-jump {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.shift-calendar {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}

/* 日曜を狭く、月〜土を広く */
.shift-calendar-weekdays {
  display: grid;
  grid-template-columns: 0.7fr repeat(6, 1fr);
  background: #1e293b;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
}

.shift-calendar-dow {
  padding: 0.5rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.shift-calendar-dow:last-child {
  border-right: none;
}

.shift-calendar-week {
  display: grid;
  grid-template-columns: 0.7fr repeat(6, 1fr);
  min-height: 100px;
}

.shift-calendar-day {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  background: white;
}
.shift-calendar-day:nth-child(7n) {
  border-right: none;
}
.shift-calendar-day.other-month {
  background: #f8fafc;
  visibility: hidden;
  min-height: 0;
  border-color: #e2e8f0;
}
.shift-calendar-day.today {
  background: #f0fdf4;
  outline: 2px solid #22c55e;
  outline-offset: -2px;
  z-index: 1;
}
.shift-calendar-day.holiday {
  background: #fef2f2;
}
.shift-calendar-day.holiday .shift-calendar-day-num {
  color: #dc2626;
}

.shift-calendar-holiday-name {
  font-size: 0.65rem;
  color: #dc2626;
  padding: 1rem 0.35rem;
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

.shift-calendar-day-header {
  padding: 0.25rem 0.35rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #f8fafc;
}

.shift-calendar-day-num {
  font-weight: 600;
  font-size: 0.95rem;
}

.shift-calendar-dow-mini {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.shift-calendar-day:nth-child(7n+1) .shift-calendar-dow-mini {
  color: #dc2626;
}

.shift-calendar-day:nth-child(7n) .shift-calendar-dow-mini {
  color: #2563eb;
}

.shift-calendar-day-body {
  flex: 1;
  padding: 0.35rem;
  overflow-y: auto;
  min-height: 0;
}

.shift-calendar-item {
  font-size: 0.8rem;
  padding: 0.2rem 0.35rem;
  margin-bottom: 0.2rem;
  background: #f1f5f9;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  /* アイコンボタンは背景・ボーダーなし（色分けのみ） */
  /* 時間の右にアイコンを横並び */
  /* 非オーナー時はアイコンのみ右寄せ */
}
.shift-calendar-item form.shift-calendar-item-approve,
.shift-calendar-item form.shift-calendar-item-delete {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.shift-calendar-item form.shift-calendar-item-approve button,
.shift-calendar-item form.shift-calendar-item-approve input,
.shift-calendar-item form.shift-calendar-item-delete button,
.shift-calendar-item form.shift-calendar-item-delete input {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.shift-calendar-item .shift-calendar-item-name {
  font-weight: 500;
  min-width: 0;
}
.shift-calendar-item .shift-calendar-item-name a {
  color: inherit;
  text-decoration: none;
}
.shift-calendar-item .shift-calendar-item-name a:hover {
  text-decoration: underline;
}
.shift-calendar-item .shift-calendar-item-time {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
.shift-calendar-item .shift-calendar-item-right {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}
.shift-calendar-item .shift-calendar-item-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.01rem;
  flex-shrink: 0;
}
.shift-calendar-item > .shift-calendar-item-actions {
  margin-left: auto;
}
.shift-calendar-item .shift-calendar-item-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--color-primary);
  text-decoration: none;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.shift-calendar-item .shift-calendar-item-edit:hover {
  color: var(--color-primary-hover, var(--color-primary));
}
.shift-calendar-item .shift-calendar-item-delete {
  display: inline-flex;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}
.shift-calendar-item .shift-calendar-item-delete input,
.shift-calendar-item .shift-calendar-item-delete button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #dc2626;
  cursor: pointer;
  font-size: 0.875rem;
}
.shift-calendar-item .shift-calendar-item-approve {
  display: inline-flex;
  margin: 0;
  padding: 0;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.shift-calendar-item .shift-calendar-item-approve input,
.shift-calendar-item .shift-calendar-item-approve button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  font-size: 0.875rem;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--color-primary, #26b7b7);
  cursor: pointer;
}

.shift-calendar-item--requested {
  background: #e0f2fe;
}

.shift-calendar-day-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.shift-calendar-day-add:hover {
  color: var(--color-primary);
}

.shift-calendar-day-rest {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  display: block;
}

.shift-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shift-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}
.shift-list li .time {
  color: #64748b;
  margin-right: 0.25rem;
}
.shift-list .link-edit {
  font-size: 0.85rem;
}
.shift-list .btn-delete-inline {
  display: inline;
}
.shift-list .btn-delete-inline input {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: 0.85rem;
}

.no-shift {
  color: #94a3b8;
}

.shift-proposals {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.shift-proposals-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.shift-proposals-desc {
  color: var(--color-muted, #64748b);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.shift-proposals-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.shift-proposals-actions .btn-propose-shift {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  background: var(--color-primary, #2563eb);
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}
.shift-proposals-actions .btn-propose-shift:hover:not(:disabled) {
  opacity: 0.9;
}
.shift-proposals-actions .btn-propose-shift:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.shift-proposals-actions .shift-proposals-loading {
  color: var(--color-muted, #64748b);
  font-size: 0.9rem;
}
.shift-proposals-actions .shift-proposals-error {
  color: #dc2626;
  font-size: 0.9rem;
}

.shift-proposals-result {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.shift-proposal-pattern {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}

.shift-proposal-pattern-name {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  margin: 0;
  background: #f1f5f9;
  border-bottom: 1px solid var(--color-border);
}

.shift-proposal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.shift-proposal-table th,
.shift-proposal-table td {
  padding: 0.5rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.shift-proposal-table th {
  font-weight: 600;
  background: #f8fafc;
}
.shift-proposal-table tbody tr:last-child td {
  border-bottom: none;
}

.shift-off-days-badge {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: 0.25rem 0.5rem;
  background: #f1f5f9;
  border-radius: var(--radius-sm);
}

.shift-calendar-item--off {
  background: #fef3c7;
  border-color: #f59e0b;
}
.shift-calendar-item--off .shift-calendar-item-name {
  font-size: 0.85rem;
}

.shift-calendar-item--paid-leave {
  background: #dbeafe;
  border-color: #3b82f6;
}
.shift-calendar-item--paid-leave .shift-calendar-item-name {
  font-size: 0.82rem;
  line-height: 1.25;
}
.shift-calendar-item--paid-leave .shift-calendar-item-staff {
  display: block;
  font-weight: 600;
  color: var(--color-text);
}
.shift-calendar-item--paid-leave .shift-calendar-item-kind {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1d4ed8;
  margin-top: 0.1rem;
}

.shift-off-days-section {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.shift-off-days-heading {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.shift-off-days-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.shift-off-days-staff-select {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.shift-off-days-staff-select label {
  font-size: 0.9rem;
  font-weight: 500;
}
.shift-off-days-staff-select select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.shift-off-days-item-staff {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-right: 0.25rem;
}

.shift-off-days-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.shift-off-days-list .shift-off-days-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  margin: 0 0.5rem 0.5rem 0;
  background: #fef3c7;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.shift-off-days-list .shift-off-days-remove {
  display: inline-flex;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: #b45309;
  cursor: pointer;
  font-size: 1rem;
}
.shift-off-days-list .shift-off-days-remove:hover {
  color: #92400e;
}

.shift-off-days-empty {
  color: var(--color-text-muted);
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.shift-off-days-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.shift-off-days-form label {
  margin-right: 0.25rem;
  font-size: 0.9rem;
}
.shift-off-days-form input[type=date] {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.shift-modal {
  width: min(520px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
}
.shift-modal::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.shift-modal__inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3rem);
}

.shift-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--color-border);
  background: #f8fafc;
}

.shift-modal__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.shift-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  cursor: pointer;
}
.shift-modal__close:hover {
  background: #e2e8f0;
  color: var(--color-text);
}

.shift-modal-form {
  padding: 1rem 1.15rem 1.15rem;
  overflow-y: auto;
}

.documents-table .actions a,
.documents-table .actions form {
  display: inline-block;
  margin-right: 0.5rem;
}
.documents-table .btn-delete input {
  background: none;
  border: none;
  color: #c00;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
}

.document-detail .meta-line {
  color: #64748b;
  margin-bottom: 1rem;
}
.document-detail .file-section,
.document-detail .content-text-section {
  margin-top: 1.5rem;
}
.document-detail .file-section h2,
.document-detail .content-text-section h2 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.document-detail .btn-download {
  font-weight: 500;
}
.document-detail .content-text {
  background: #f8fafc;
  padding: 1rem;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 60vh;
  overflow-y: auto;
  font-size: 0.9rem;
}
.document-detail .current-file,
.document-detail .hint {
  font-size: 0.875rem;
  color: #64748b;
  margin-top: 0.25rem;
}

.monitored-sites-table .actions a,
.monitored-sites-table .actions form {
  display: inline-block;
  margin-right: 0.5rem;
}
.monitored-sites-table .btn-analyze {
  color: #166534;
  font-weight: 500;
}
.monitored-sites-table .btn-delete input {
  background: none;
  border: none;
  color: #c00;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: inherit;
}

.monitoring-site-show {
  max-width: 1200px;
  margin: 0 auto;
}

.monitoring-site-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.monitoring-site-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}
.monitoring-site-hero__title {
  margin: 0 0 0.35rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
.monitoring-site-hero__url {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}
.monitoring-site-hero__url a {
  color: var(--color-link);
  word-break: break-all;
}
.monitoring-site-hero__url .la {
  font-size: 0.85em;
  margin-left: 0.2rem;
  opacity: 0.7;
}
.monitoring-site-hero__client {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.monitoring-site-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.monitoring-site-hero__actions .btn-analyze {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.1rem;
  background: linear-gradient(135deg, #166534 0%, #15803d 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.monitoring-site-hero__actions .btn-analyze:hover {
  filter: brightness(1.05);
}
.monitoring-site-hero__actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.monitoring-site-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}
.monitoring-site-badge--active {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.monitoring-site-badge--paused {
  background: #f1f5f9;
  color: #64748b;
}
.monitoring-site-badge--type {
  background: #e0f2fe;
  color: #0369a1;
}
.monitoring-site-badge--alert {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}
.monitoring-site-badge--alert:hover {
  text-decoration: underline;
}

.monitoring-site-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
  .monitoring-site-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.monitoring-stat-card {
  padding: 1rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.monitoring-stat-card--alert {
  border-color: #fecaca;
  background: #fffbfb;
}
.monitoring-stat-card__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}
.monitoring-stat-card__value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  word-break: break-word;
}
.monitoring-stat-card__value a {
  color: var(--color-danger);
  text-decoration: none;
}
.monitoring-stat-card__value a:hover {
  text-decoration: underline;
}
.monitoring-stat-card__value--is-ok {
  color: #166534;
}
.monitoring-stat-card__value--is-warn {
  color: #d97706;
  font-size: 0.95rem;
}
.monitoring-stat-card__value--is-danger {
  color: var(--color-danger);
  font-size: 0.95rem;
}
.monitoring-stat-card__value--is-muted {
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.95rem;
}

.monitoring-site-grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 960px) {
  .monitoring-site-grid {
    grid-template-columns: minmax(260px, 300px) 1fr;
  }
}

.monitoring-site-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.monitoring-site-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.monitoring-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem;
}
.monitoring-panel--priority {
  border-left: 4px solid var(--color-main-teal);
}
.monitoring-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.monitoring-panel__title {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.monitoring-panel__title .la {
  color: var(--color-main-teal);
  font-size: 1.15em;
}
.monitoring-panel__head .monitoring-panel__title {
  margin-bottom: 0;
}
.monitoring-panel__link {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-link);
  text-decoration: none;
  white-space: nowrap;
}
.monitoring-panel__link:hover {
  text-decoration: underline;
}
.monitoring-panel__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.monitoring-panel__more {
  display: inline-block;
  margin-top: 0.65rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.monitoring-panel__empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.monitoring-panel__empty--center {
  text-align: center;
  padding: 1.5rem 0.5rem;
}
.monitoring-panel__empty--center .la {
  display: block;
  font-size: 2rem;
  color: #86efac;
  margin-bottom: 0.5rem;
}

.monitoring-info-dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.5rem 0.75rem;
  margin: 0;
  font-size: 0.9rem;
}
.monitoring-info-dl dt {
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0;
}
.monitoring-info-dl dd {
  margin: 0;
  word-break: break-word;
}
.monitoring-info-dl__error {
  color: var(--color-danger);
  font-size: 0.85rem;
}
.monitoring-info-dl__memo {
  line-height: 1.5;
}
.monitoring-info-dl__truncate {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.monitoring-info-dl code {
  font-size: 0.85em;
  padding: 0.1rem 0.35rem;
  background: #f1f5f9;
  border-radius: 4px;
}

.monitoring-external-link {
  font-weight: 500;
}

.monitoring-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.monitoring-link-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
}
.monitoring-link-list li:last-child {
  border-bottom: none;
}
.monitoring-link-list__item {
  flex: 1;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-link);
}
.monitoring-link-list__item:hover {
  text-decoration: underline;
}

.monitoring-mini-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  background: #dbeafe;
  color: #1d4ed8;
  border-radius: 4px;
}

.monitoring-panel--plugin {
  border-left: 4px solid var(--color-main-teal);
  background: linear-gradient(180deg, #f0fdfa 0%, var(--color-surface) 28%);
}

.monitoring-plugin-intro {
  margin: -0.5rem 0 1rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.monitoring-plugin-alert {
  margin-bottom: 1rem;
  padding: 0.65rem 0.85rem;
  background: var(--color-danger-bg);
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: #991b1b;
}
.monitoring-plugin-alert--warn {
  background: var(--color-warning-bg);
  border-color: #fde68a;
  color: #92400e;
}
.monitoring-plugin-alert a {
  font-weight: 600;
}

.monitoring-plugin-config {
  margin: 0;
}
.monitoring-plugin-config__row {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.monitoring-plugin-config__row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.monitoring-plugin-config dt {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.4rem;
}
.monitoring-plugin-config dd {
  margin: 0;
}
.monitoring-plugin-config__value-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.monitoring-plugin-config__value {
  flex: 1;
  display: block;
  margin: 0;
  padding: 0.5rem 0.65rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.45;
  word-break: break-all;
  white-space: pre-wrap;
}
.monitoring-plugin-config__hint, .monitoring-plugin-config__warn {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.monitoring-plugin-config__warn {
  color: #b45309;
}

.monitoring-plugin-details {
  margin-top: 1rem;
  font-size: 0.85rem;
}
.monitoring-plugin-details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-link);
  list-style: none;
}
.monitoring-plugin-details summary::-webkit-details-marker {
  display: none;
}
.monitoring-plugin-details[open] summary {
  margin-bottom: 0.65rem;
}

.monitoring-plugin-meta-list {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.monitoring-plugin-meta-list code {
  font-size: 0.8em;
}

.monitoring-api-key-field__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.monitoring-api-key-field__input {
  flex: 1;
  min-width: 200px;
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  background: #f8fafc;
}
.monitoring-api-key-field__regenerate {
  margin: 0;
}

.monitoring-plugin-wpconfig {
  margin: 0;
  padding: 0.75rem;
  background: #1e293b;
  color: #e2e8f0;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.monitoring-quick-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.monitoring-quick-nav__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.monitoring-quick-nav__item .la {
  width: 1.1rem;
  color: var(--color-main-teal);
}
.monitoring-quick-nav__item:hover {
  background: var(--color-surface);
}
.monitoring-quick-nav__item--muted {
  color: var(--color-text-muted);
  font-weight: 400;
}
.monitoring-quick-nav__item--muted .la {
  color: var(--color-text-muted);
}

.monitoring-table-wrap {
  overflow-x: auto;
  margin: 0 -0.25rem;
}
.monitoring-table-wrap .tasks-table {
  margin: 0;
  font-size: 0.88rem;
}

.monitoring-table__date {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.monitoring-table__action {
  font-weight: 500;
  white-space: nowrap;
}

.monitoring-row--urgent {
  background: #fff7ed;
}

.monitoring-source-tag {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}
.monitoring-source-tag--ga4 {
  background: #fef3c7;
  color: #92400e;
}
.monitoring-source-tag--gsc {
  background: #dbeafe;
  color: #1e40af;
}

.monitoring-metric-sep {
  margin: 0 0.25rem;
  color: #cbd5e1;
}

.monitoring-result {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}
.monitoring-result--ok {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.monitoring-result--ng {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.monitoring-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text);
  list-style: none;
  padding: 0.25rem 0;
}
.monitoring-details__summary::-webkit-details-marker {
  display: none;
}
.monitoring-details__summary .la {
  color: var(--color-text-muted);
  margin-right: 0.35rem;
}
.monitoring-details__count {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-muted);
}
.monitoring-details[open] .monitoring-details__summary {
  margin-bottom: 1rem;
}

.monitoring-inline-details {
  font-size: 0.85rem;
}
.monitoring-inline-details summary {
  cursor: pointer;
  color: var(--color-link);
  font-weight: 500;
}
.monitoring-inline-details pre {
  margin-top: 0.5rem;
  max-width: 100%;
}

.monitoring-panel--collapsed {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.site-checks-table .result-row td {
  background: #f8fafc;
  padding: 1rem;
  vertical-align: top;
}

.result-json,
.result-raw {
  margin: 0;
  padding: 1rem;
  background: #f1f5f9;
  border-radius: 4px;
  font-size: 0.85rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.description.hint {
  font-size: 0.85rem;
  color: #64748b;
}

.monitoring-open-count {
  color: #b91c1c;
  font-weight: 600;
}

.monitoring-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}
.monitoring-filters .field {
  margin: 0;
}
.monitoring-filters .actions {
  margin: 0;
}

.monitoring-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}
.monitoring-badge.severity-low {
  background: #e2e8f0;
  color: #334155;
}
.monitoring-badge.severity-medium {
  background: #fef3c7;
  color: #92400e;
}
.monitoring-badge.severity-high {
  background: #ffedd5;
  color: #c2410c;
}
.monitoring-badge.severity-critical {
  background: #fee2e2;
  color: #b91c1c;
}
.monitoring-badge.status-open {
  background: #fee2e2;
  color: #b91c1c;
}
.monitoring-badge.status-progress {
  background: #dbeafe;
  color: #1d4ed8;
}
.monitoring-badge.status-resolved {
  background: #dcfce7;
  color: #166534;
}
.monitoring-badge.line-notified {
  background: #f0fdf4;
  color: #15803d;
}

.monitoring-alert-detail .monitoring-alert-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.monitoring-alert-detail .monitoring-alert-meta {
  margin-bottom: 1.5rem;
}
.monitoring-alert-detail .monitoring-alert-meta dt {
  font-weight: 600;
  margin-top: 0.5rem;
}
.monitoring-alert-detail .monitoring-alert-meta dd {
  margin-left: 0;
}
.monitoring-alert-detail .monitoring-alert-message {
  margin-bottom: 1.5rem;
}

.monitoring-alerts-table .alert-message-cell {
  max-width: 280px;
}

.settings-subtitle {
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
}

.settings-status {
  margin: 0.5rem 0 1rem;
  color: #64748b;
}
.settings-status--ok {
  color: #166534;
  font-weight: 500;
}

.ai-analysis {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 0.75rem 0 1rem;
}
.ai-analysis .ai-analysis__heading {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
  color: #0f172a;
}
.ai-analysis .ai-analysis__heading:first-child {
  margin-top: 0;
}
.ai-analysis .ai-analysis__body {
  margin-bottom: 0.5rem;
  color: #334155;
  line-height: 1.6;
}

.monitoring-summary-dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.35rem 1rem;
  margin-bottom: 1.5rem;
}
.monitoring-summary-dl dt {
  font-weight: 600;
  color: #475569;
}
.monitoring-summary-dl dd {
  margin: 0;
}

.monitoring-monthly-list {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.monitoring-monthly-index,
.monitoring-monthly-show {
  max-width: 1200px;
  margin: 0 auto;
}

.monitoring-monthly-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.monitoring-monthly-hero--detail {
  border-left: 4px solid var(--color-main-blue);
}
.monitoring-monthly-hero__title {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-text);
}
.monitoring-monthly-hero__desc {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.monitoring-monthly-hero__url {
  color: var(--color-link);
  word-break: break-all;
}
.monitoring-monthly-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}
.monitoring-monthly-hero__meta-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 999px;
}
.monitoring-monthly-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.monitoring-monthly-hero__actions .btn-analyze,
.monitoring-monthly-hero__actions .btn-secondary,
.monitoring-monthly-hero__actions .btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.monitoring-monthly-hero__actions .btn-analyze {
  padding: 0.55rem 1.1rem;
  background: linear-gradient(135deg, var(--color-main-blue) 0%, #2a8bc4 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}
.monitoring-monthly-hero__actions .btn-analyze:hover {
  filter: brightness(1.05);
}

.monitoring-monthly-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 480px) {
  .monitoring-monthly-stats {
    grid-template-columns: 1fr;
  }
}

.monitoring-monthly-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.monitoring-monthly-filters .field {
  margin: 0;
  min-width: 120px;
}
.monitoring-monthly-filters .field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.monitoring-monthly-filters .field select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  min-width: 100%;
}
.monitoring-monthly-filters .actions {
  margin: 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.monitoring-monthly-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .monitoring-monthly-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .monitoring-monthly-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.monitoring-monthly-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.monitoring-monthly-card:hover {
  border-color: #cbd5e1;
  box-shadow: var(--shadow);
}
.monitoring-monthly-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.15rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, #f8fafc 0%, var(--color-surface) 100%);
}
.monitoring-monthly-card__period {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-main-blue);
  margin-bottom: 0.2rem;
}
.monitoring-monthly-card__site {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}
.monitoring-monthly-card__site a {
  color: var(--color-text);
  text-decoration: none;
}
.monitoring-monthly-card__site a:hover {
  color: var(--color-link);
}
.monitoring-monthly-card__ai-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
  color: #3730a3;
  border-radius: 4px;
}
.monitoring-monthly-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin: 0;
  padding: 1rem 1.15rem;
  flex: 1;
}
.monitoring-monthly-card__metric {
  margin: 0;
}
.monitoring-monthly-card__metric dt {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 0 0 0.15rem;
}
.monitoring-monthly-card__metric dt .la {
  font-size: 0.95em;
}
.monitoring-monthly-card__metric dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.monitoring-monthly-card__metric--ga4 dt .la {
  color: #d97706;
}
.monitoring-monthly-card__metric--gsc dt .la {
  color: #2563eb;
}
.monitoring-monthly-card__empty {
  margin: 0;
  padding: 1.25rem 1.15rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  flex: 1;
}
.monitoring-monthly-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--color-border);
  background: #fafbfc;
}
.monitoring-monthly-card__meta {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.monitoring-monthly-card__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-link);
  text-decoration: none;
  white-space: nowrap;
}
.monitoring-monthly-card__link:hover {
  text-decoration: underline;
}

.monitoring-monthly-pagination {
  margin-top: 1.5rem;
}

.monitoring-monthly-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}
.monitoring-monthly-empty .la {
  font-size: 3rem;
  color: #cbd5e1;
  margin-bottom: 0.75rem;
}
.monitoring-monthly-empty p {
  margin: 0 0 0.5rem;
  color: var(--color-text-muted);
}
.monitoring-monthly-empty .hint {
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}

.monitoring-monthly-kpi {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 900px) {
  .monitoring-monthly-kpi {
    grid-template-columns: repeat(2, 1fr);
  }
}
.monitoring-monthly-kpi__group {
  padding: 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.monitoring-monthly-kpi__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.monitoring-monthly-kpi__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 480px) {
  .monitoring-monthly-kpi__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.monitoring-monthly-kpi__note {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.monitoring-kpi-tile {
  padding: 0.85rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.monitoring-kpi-tile__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
}
.monitoring-kpi-tile__value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  word-break: break-word;
}

.monitoring-monthly-show__grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 960px) {
  .monitoring-monthly-show__grid {
    grid-template-columns: 1fr minmax(220px, 260px);
  }
}

@media (max-width: 959px) {
  .monitoring-monthly-show__aside {
    order: -1;
  }
}

.monitoring-panel--ai {
  border-left: 4px solid #6366f1;
}
.monitoring-panel--ai .ai-analysis {
  margin-top: 0;
}

.monitoring-monthly-ai-placeholder {
  text-align: center;
  padding: 2rem 1rem;
}
.monitoring-monthly-ai-placeholder p {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
}
.monitoring-monthly-ai-placeholder .btn-analyze {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.25rem;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
}
.monitoring-monthly-ai-placeholder .hint {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.monitoring-monthly-show__nodata {
  margin-bottom: 1.25rem;
}

.monitoring-site-form-page {
  max-width: 1100px;
  margin: 0 auto;
}

.monitoring-form-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1.35rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.monitoring-form-hero__title {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-text);
}
.monitoring-form-hero__meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.monitoring-form-hero__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.monitoring-form-hero__actions .btn-secondary,
.monitoring-form-hero__actions .btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.monitoring-form-errors {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--color-danger-bg);
  border: 1px solid #fecaca;
  border-radius: var(--radius);
}
.monitoring-form-errors h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  color: #991b1b;
}
.monitoring-form-errors ul {
  margin: 0;
  padding-left: 1.25rem;
  color: #991b1b;
  font-size: 0.9rem;
}

.monitoring-form-grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 900px) {
  .monitoring-form-grid {
    grid-template-columns: 1fr minmax(220px, 260px);
  }
  .monitoring-form-grid .monitoring-form-main:only-child {
    grid-column: 1/-1;
  }
}

.monitoring-form-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.monitoring-form-section {
  margin: 0;
  padding: 0;
  border: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.35rem;
}
.monitoring-form-section legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.monitoring-form-section legend .la {
  color: var(--color-main-teal);
  font-size: 1.15em;
}
.monitoring-form-section--highlight {
  border-left: 4px solid var(--color-main-teal);
  background: linear-gradient(180deg, #f0fdfa 0%, var(--color-surface) 24%);
}
.monitoring-form-section--optional {
  background: #fafbfc;
}
.monitoring-form-section--optional legend .la {
  color: var(--color-text-muted);
}

.monitoring-form-section-desc {
  margin: -0.5rem 0 1rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.monitoring-form-section-desc a {
  font-weight: 500;
}

.monitoring-form-row {
  margin-bottom: 1.1rem;
}
.monitoring-form-row:last-child {
  margin-bottom: 0;
}
.monitoring-form-row > label,
.monitoring-form-row > .monitoring-form-label {
  display: block;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0 0 0.4rem;
}
.monitoring-form-row--required > label::after {
  content: " *";
  color: var(--color-danger);
  font-weight: 700;
}
.monitoring-form-row--checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
}
.monitoring-form-row--checkbox .monitoring-form-checkbox-label {
  margin: 0;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
}
.monitoring-form-row .form-input {
  width: 100%;
  max-width: 100%;
}

.monitoring-form-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.monitoring-form-hint code {
  font-size: 0.9em;
}

.monitoring-form-readonly {
  flex: 1;
  display: block;
  margin: 0;
  padding: 0.55rem 0.65rem;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  line-height: 1.45;
  word-break: break-all;
}

.monitoring-form-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (max-width: 899px) {
  .monitoring-form-aside {
    order: -1;
  }
}

.monitoring-form-aside-card {
  padding: 1rem 1.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.monitoring-form-aside-card h3 {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text);
}
.monitoring-form-aside-card ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.monitoring-form-aside-card ul a {
  font-weight: 500;
}
.monitoring-form-aside-card--tip {
  background: #f8fafc;
  border-style: dashed;
}

.monitoring-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  position: sticky;
  bottom: 1rem;
  z-index: 5;
}
.monitoring-form-footer .monitoring-form-submit {
  padding: 0.6rem 1.5rem;
  background: var(--color-gradient);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.monitoring-form-footer .monitoring-form-submit:hover {
  background: var(--color-gradient-hover);
}
.monitoring-form-footer .btn-cancel {
  font-size: 0.95rem;
}

.accounting-year-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.accounting-year-nav .accounting-year-label {
  font-weight: 600;
  font-size: 1.1rem;
  min-width: 4rem;
  text-align: center;
}
.accounting-year-nav .accounting-year-select {
  margin-left: 0.5rem;
}
.accounting-year-nav .accounting-year-select select {
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.accounting-year-nav .inline-form {
  display: inline;
}

.accounting-chart-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.accounting-chart-section .accounting-chart-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.accounting-chart-section .accounting-chart-wrap {
  position: relative;
  width: 100%;
  height: 450px;
}
.accounting-chart-section .accounting-chart-wrap canvas {
  max-width: 100%;
  width: 100% !important;
  height: 100% !important;
}
.accounting-chart-section .form-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
}

.accounting-year-table .accounting-row-empty td {
  color: var(--color-text-muted);
}
.accounting-year-table .btn-add-month,
.accounting-year-table a.btn-add-month {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: none;
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-sm);
  background: transparent;
}
.accounting-year-table .btn-add-month:hover,
.accounting-year-table a.btn-add-month:hover {
  background: rgba(55, 157, 217, 0.08);
  border-style: solid;
}
.accounting-year-table .btn-add-month .la-plus,
.accounting-year-table a.btn-add-month .la-plus {
  font-size: 0.9rem;
}

.summary-dl dt {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-top: 0.75rem;
}
.summary-dl dt:first-child {
  margin-top: 0;
}
.summary-dl dd {
  margin: 0.2rem 0 0;
  font-size: 1.05rem;
}

.labor-costs,
.analysis-section {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.labor-costs h2,
.analysis-section h2 {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

.analysis-text {
  white-space: pre-wrap;
  padding: 0.75rem;
  background: #f8fafc;
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.payroll-settings {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 52rem;
}

.payroll-settings__mode-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
}

.payroll-settings__mode-badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.payroll-settings__mode-badge--global {
  background: #dbeafe;
  color: #1d4ed8;
}
.payroll-settings__mode-badge--individual {
  background: #ede9fe;
  color: #5b21b6;
}

.payroll-settings__mode-text {
  flex: 1;
  min-width: 12rem;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.payroll-settings__section-title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.payroll-settings__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .payroll-settings__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.payroll-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.payroll-stat--highlight {
  border-color: rgba(38, 183, 183, 0.4);
  background: linear-gradient(145deg, #f0fdfa 0%, var(--color-surface) 100%);
}
.payroll-stat--highlight .payroll-stat__value {
  color: var(--color-main-teal, #26b7b7);
}
.payroll-stat--muted {
  opacity: 0.75;
  background: #f8fafc;
}
.payroll-stat--muted .payroll-stat__value {
  color: var(--color-text-muted);
  font-weight: 600;
}
.payroll-stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.payroll-stat__value {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.payroll-stat__hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.payroll-settings__individual-lead {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.payroll-settings__footer {
  padding-top: 0.25rem;
}

.payroll-settings-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 40rem;
}

.payroll-settings-form__section {
  padding: 1.15rem 1.25rem;
}

.payroll-settings-form__title {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.payroll-settings-form__radios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}
@media (min-width: 520px) {
  .payroll-settings-form__radios {
    grid-template-columns: 1fr 1fr;
  }
}

.payroll-settings-form__radio-card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.payroll-settings-form__radio-card input {
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.payroll-settings-form__radio-card:has(input:checked) {
  border-color: var(--color-main-teal, #26b7b7);
  background: #f0fdfa;
}
.payroll-settings-form__radio-card:hover {
  border-color: #cbd5e1;
}

.payroll-settings-form__radio-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.payroll-settings-form__radio-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.payroll-settings-form__radio-desc {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.payroll-settings-form__field {
  margin-bottom: 1rem;
}
.payroll-settings-form__field:last-child {
  margin-bottom: 0;
}

.payroll-settings-form__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
}

.payroll-settings-form__input {
  max-width: 14rem;
}

.payroll-settings-form__inline-radios {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 480px) {
  .payroll-settings-form__inline-radios {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }
}

.payroll-settings-form__amounts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 480px) {
  .payroll-settings-form__amounts {
    grid-template-columns: 1fr 1fr;
  }
}

.payroll-settings-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding-top: 0.25rem;
}

.payroll-individual-hint {
  margin: 0;
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.payroll-global-settings[hidden],
.payroll-individual-hint[hidden] {
  display: none !important;
}

.btn-new--block {
  display: block;
  width: 100%;
  text-align: center;
}

.payroll-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 900px) {
  .payroll-layout {
    grid-template-columns: minmax(220px, 260px) 1fr;
  }
}
.payroll-layout__aside-title {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.payroll-layout__divider {
  margin: 1rem 0;
  border: none;
  border-top: 1px solid var(--color-border);
}
.payroll-layout__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.payroll-month-nav__selects {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.payroll-month-nav__selects .form-input {
  width: auto;
  min-width: 4.25rem;
}
.payroll-month-nav__selects span {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.payroll-month-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.payroll-month-chip {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: #f1f5f9;
  border-radius: 999px;
  text-decoration: none;
}
.payroll-month-chip:hover {
  background: #e2e8f0;
  color: var(--color-text);
}
.payroll-month-chip--active {
  background: var(--color-main-teal, #26b7b7);
  color: #fff;
}

.company-settings-alert {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-lg);
}

.company-settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 42rem;
}
.company-settings-form__section {
  padding: 1.15rem 1.25rem;
}
.company-settings-form__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
}
.company-settings-form__lead {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.company-settings-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 560px) {
  .company-settings-form__grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 560px) {
  .company-settings-form__field--wide {
    grid-column: 1/-1;
  }
}
.company-settings-form__textarea {
  min-height: 5.5rem;
  resize: vertical;
  line-height: 1.45;
}
.company-settings-form__rates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (min-width: 560px) {
  .company-settings-form__rates {
    grid-template-columns: repeat(4, 1fr);
  }
}
.company-settings-form__actions {
  padding-top: 0.25rem;
}

.company-logo-upload {
  position: relative;
  max-width: 28rem;
  margin-bottom: 0.75rem;
  padding: 0.85rem;
  border: 2px dashed color-mix(in srgb, var(--color-border) 70%, var(--color-main-teal, #26b7b7));
  border-radius: var(--radius-lg);
  background: #f8fafc;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.company-logo-upload--dragover {
  border-color: var(--color-main-teal, #26b7b7);
  background: #ecfdf5;
}
.company-logo-upload__error {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  color: #b91c1c;
}
.company-logo-upload__preview {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 0.65rem;
}
.company-logo-upload__img {
  display: block;
  max-width: 100%;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-border);
}
.company-logo-upload__remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: background 0.12s ease, transform 0.12s ease;
}
.company-logo-upload__remove:hover {
  background: #b91c1c;
  transform: scale(1.05);
}
.company-logo-upload__remove:focus-visible {
  outline: 2px solid var(--color-main-teal, #26b7b7);
  outline-offset: 2px;
}
.company-logo-upload__remove .la {
  font-size: 1.1rem;
}
.company-logo-upload__hit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.5rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.12s ease;
}
.company-logo-upload__hit:hover {
  background: rgba(255, 255, 255, 0.65);
}
.company-logo-upload__hit:focus-visible {
  outline: 2px solid var(--color-main-teal, #26b7b7);
  outline-offset: 2px;
}
.company-logo-upload__hit--compact {
  padding-top: 0.35rem;
  font-size: 0.82rem;
}
.company-logo-upload__hit-icon {
  font-size: 1.35rem;
  color: var(--color-main-teal, #26b7b7);
  flex-shrink: 0;
}
.company-logo-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.payroll-company-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-lg);
}
.payroll-company-notice__text {
  margin: 0;
  font-size: 0.88rem;
  color: #92400e;
}

.payroll-layout__company {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  line-height: 1.45;
}
.payroll-layout__company-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.payroll-layout__company-edit {
  margin-left: 0.35rem;
  font-size: 0.82rem;
}

.payroll-company-name {
  margin-bottom: 0;
}
.payroll-company-name__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
}
.payroll-company-name__title .la {
  color: var(--color-main-teal, #26b7b7);
}
.payroll-company-name__alert {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius);
}
.payroll-company-name__current {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.payroll-company-name__form .field {
  margin-bottom: 0.5rem;
}
.payroll-company-name__form label {
  font-size: 0.78rem;
}
.payroll-company-name--compact {
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.payroll-payment-schedule {
  margin-bottom: 1rem;
  padding: 0.75rem 0.85rem;
  background: var(--color-bg-subtle, #f6f7f9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.payroll-payment-schedule__label {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.payroll-payment-schedule__date {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}
.payroll-payment-schedule .hint {
  margin: 0;
  font-size: 0.75rem;
}

.payroll-create-inline .field {
  margin-bottom: 0.75rem;
}
.payroll-create-inline .hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
}

.payroll-month-hero {
  padding: 1.15rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.payroll-month-hero__top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 640px) {
  .payroll-month-hero__top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
.payroll-month-hero__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.payroll-month-hero__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}
.payroll-month-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.payroll-month-hero__payment {
  margin: 0 0 0.25rem;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.payroll-month-hero .payroll-summary {
  margin-top: 0.85rem;
}

.payroll-month-empty {
  text-align: center;
  padding: 2rem 1.25rem;
}
.payroll-month-empty__title {
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.payroll-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.payroll-history-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.payroll-history-item:last-child {
  border-bottom: none;
}
.payroll-history-item--active {
  background: #f0fdfa;
}
@media (max-width: 639px) {
  .payroll-history-item {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .payroll-history-item__amount {
    grid-column: 1;
  }
  .payroll-history-item__actions {
    grid-column: 2;
    grid-row: 1/span 2;
  }
}
.payroll-history-item__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}
.payroll-history-item__link:hover .payroll-history-item__period {
  color: var(--color-main-teal, #26b7b7);
}
.payroll-history-item__meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.payroll-history-item__amount {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.payroll-history-item__actions {
  display: flex;
  gap: 0.35rem;
}

.payroll-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.payroll-detail__header {
  padding: 1rem 1.25rem;
}
.payroll-detail__header-row {
  margin-bottom: 0.25rem;
}
.payroll-detail__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.payroll-detail__meta {
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.payroll-detail__toolbar {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.payroll-detail__search .form-input {
  max-width: 16rem;
}
.payroll-detail__empty {
  text-align: center;
  padding: 2rem;
}

.payroll-detail-table th.num,
.payroll-detail-table td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.payroll-detail-table__code {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.payroll-detail-table__work {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.payroll-detail-table__deduction {
  color: #b45309;
}
.payroll-detail-table__net {
  font-weight: 700;
  color: var(--color-main-teal, #26b7b7);
}
.payroll-detail-table__detail td {
  padding: 0;
  background: #f8fafc;
  border-bottom: 1px solid var(--color-border);
}

.payroll-detail-breakdown {
  padding: 0.85rem 1.25rem 1rem;
}

.payslip-thank-you {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.payslip-thank-you p {
  margin: 0.1rem 0 0;
}

.payslip-detail-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.payslip-detail-table th,
.payslip-detail-table td {
  padding: 0.55rem 0.65rem;
  border: 1px solid #8a8a8a;
  vertical-align: middle;
}
.payslip-detail-table thead th {
  font-size: 0.8rem;
  font-weight: 700;
  background: #e8e8e8;
  color: #1a1a1a;
}
.payslip-detail-table__earning {
  width: 42%;
  background: #e8e8e8;
  color: #1a1a1a;
}
.payslip-detail-table__deduction {
  width: 24%;
  background: #e8e8e8;
  color: #1a1a1a;
}
.payslip-detail-table__amount {
  width: 10%;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.payslip-detail-table td.amount {
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 0.78rem;
}
.payslip-detail-table__line td {
  height: 2.35rem;
  box-sizing: border-box;
}
.payslip-detail-table tbody td:first-child,
.payslip-detail-table tbody td:nth-child(3) {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  font-size: 0.76rem;
}
.payslip-detail-table__total td {
  font-weight: 700;
  background: #d8d8d8;
}
.payslip-detail-table__meta td {
  font-size: 0.82rem;
  color: #4a4a4a;
  background: #fff;
}
.payslip-detail-table__meta.payslip-detail-table__line td, .payslip-detail-table__total.payslip-detail-table__line td, .payslip-detail-table__note.payslip-detail-table__line td {
  height: 2.35rem;
  box-sizing: border-box;
}
.payslip-detail-table__note td {
  font-size: 0.82rem;
  color: #4a4a4a;
  background: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.payslip-detail-table__blank td {
  height: 2rem;
  background: #fff;
  white-space: normal;
}
.payslip-detail-table__net td {
  font-weight: 800;
  font-size: 1rem;
  background: #f0f0f0;
  color: #111;
  border-color: #8a8a8a;
}
.payslip-detail-table__net .amount {
  font-size: 1.05rem;
  color: inherit;
}

.payroll-hub {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.payroll-create-form__fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
@media (min-width: 640px) {
  .payroll-create-form__fields {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
}
.payroll-create-form__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.payroll-create-form__period-inputs {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.payroll-create-form__period-inputs .form-input {
  width: auto;
  min-width: 4.5rem;
}
.payroll-create-form__period-unit {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-right: 0.25rem;
}
.payroll-create-form__payment .form-input {
  max-width: 11rem;
}
.payroll-create-form__hint {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.payroll-create-form__submit {
  width: 100%;
}
@media (min-width: 480px) {
  .payroll-create-form__submit {
    width: auto;
  }
}

.payroll-run-banner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.payroll-run-banner--compact {
  flex-direction: row;
  align-items: center;
  padding: 0.75rem 1rem;
  margin-bottom: 0.25rem;
}
.payroll-run-banner__main {
  flex: 1;
  min-width: 0;
}
.payroll-run-banner__title {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.payroll-run-banner__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.payroll-run-banner__date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.payroll-run-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.payroll-run-banner__form-btn {
  display: inline;
  margin: 0;
}

.payroll-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.payroll-badge--finalized {
  background: #dbeafe;
  color: #1d4ed8;
}
.payroll-badge--draft {
  background: #fef3c7;
  color: #92400e;
}
.payroll-badge--muted {
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
}

.payroll-summary {
  margin-top: 0.85rem;
}
.payroll-summary__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}
@media (min-width: 720px) {
  .payroll-summary__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.payroll-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.payroll-summary__stat--highlight {
  border-color: rgba(38, 183, 183, 0.45);
  background: linear-gradient(145deg, #f0fdfa 0%, var(--color-surface) 100%);
}
.payroll-summary__stat--highlight .payroll-summary__value {
  color: var(--color-main-teal, #26b7b7);
}
.payroll-summary__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.payroll-summary__value {
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.payroll-summary__value--deduction {
  color: #b45309;
}
.payroll-summary__unit {
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 0.1rem;
}

.payroll-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.payroll-panel-head .page-panel__title {
  margin: 0;
}
.payroll-panel-head__badge {
  flex-shrink: 0;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: #f1f5f9;
  border-radius: 999px;
}

.payroll-history-table__row--current {
  background: #f0fdfa;
}
.payroll-history-table__amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.payroll-show {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.payroll-show__empty {
  text-align: center;
  padding: 2rem 1.25rem;
}
.payroll-show__empty .empty {
  margin-bottom: 1rem;
}

.payslip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px) {
  .payslip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.payslip-slip {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.payslip-slip__head {
  padding: 1rem 1.1rem 0.75rem;
  color: var(--color-text);
  line-height: 1.5;
  border-bottom: 1px solid var(--color-border);
}
.payslip-slip__head-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.payslip-slip__head-meta {
  flex-shrink: 0;
  text-align: right;
}
.payslip-slip__company {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.payslip-slip__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.payslip-slip__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}
.payslip-slip__meta-line {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.payslip-slip__meta-line:last-child {
  margin-bottom: 0;
}
.payslip-slip__thanks {
  margin-top: 0.5rem;
}
.payslip-slip__thanks-line {
  margin: 0.12rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text);
}
.payslip-slip__body {
  padding: 0.75rem 0.85rem 0.85rem;
}
.payslip-slip__col {
  padding: 0.75rem 0.85rem;
  min-width: 0;
}
.payslip-slip__col--earning {
  border-right: 1px solid var(--color-border);
  background: #fafafa;
}
.payslip-slip__col--deduction {
  background: #fff;
}
.payslip-slip__col-title {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.payslip-slip__col--earning .payslip-slip__col-title {
  color: #0f766e;
}
.payslip-slip__col--deduction .payslip-slip__col-title {
  color: #b45309;
}
.payslip-slip__lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.payslip-slip__line {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.8rem;
  border-bottom: 1px dashed #e2e8f0;
}
.payslip-slip__line:last-of-type {
  border-bottom: none;
}
.payslip-slip__line--empty {
  color: var(--color-text-muted);
  font-style: italic;
  justify-content: flex-start;
}
.payslip-slip__line-label {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.payslip-slip__line-amount {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.payslip-slip__col-total {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 2px solid var(--color-border);
  font-size: 0.82rem;
  font-weight: 700;
}
.payslip-slip__foot {
  padding: 0.85rem 1rem;
  background: #f8fafc;
}
.payslip-slip__net {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.payslip-slip__net-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.payslip-slip__net-value {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--color-main-teal, #26b7b7);
}
.payslip-slip__tax-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.payslip-slip__tax-sep {
  margin: 0 0.2rem;
  opacity: 0.5;
}
.payslip-slip__note {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.payroll-settings-rates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 520px) {
  .payroll-settings-rates {
    grid-template-columns: 1fr 1fr;
  }
}

.billing-document-form__save-hint {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.billing-status-cell {
  white-space: nowrap;
}
.billing-status-cell .payroll-badge {
  display: inline-block;
  vertical-align: middle;
}
.billing-status-cell__at {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 400;
}

.billing-list-table .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
  align-items: center;
  white-space: normal;
}
.billing-list-table .billing-list-table__send-form,
.billing-list-table .billing-list-table__destroy-form {
  display: inline;
  margin: 0;
}
.billing-list-table .billing-list-table__send-form button,
.billing-list-table .billing-list-table__destroy-form button {
  margin: 0;
}

.billing-detail-nav {
  margin: 0 0 1.25rem;
}
.billing-detail-nav__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}
.billing-detail-nav__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 5.75rem;
  padding: 0.75rem 0.45rem;
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.billing-detail-nav__card:hover {
  border-color: color-mix(in srgb, var(--color-main-teal) 35%, var(--color-border));
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.billing-detail-nav__card:focus-visible {
  outline: 2px solid var(--color-main-teal);
  outline-offset: 2px;
}
.billing-detail-nav__card--active {
  border-color: #0f766e;
  background: linear-gradient(165deg, #ecfdf5 0%, var(--color-surface) 50%);
  box-shadow: 0 0 0 1px rgba(15, 118, 110, 0.12);
}
.billing-detail-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius);
  background: #f1f5f9;
  font-size: 1.25rem;
  color: var(--color-main-teal, #26b7b7);
}
.billing-detail-nav__icon .la {
  line-height: 1;
}
.billing-detail-nav__card--active .billing-detail-nav__icon {
  background: rgba(38, 183, 183, 0.18);
  color: #0f766e;
}
.billing-detail-nav__label {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.billing-hub {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.billing-hub__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.billing-hub__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.billing-hub__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.billing-hub__link {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}
.billing-hub__link:hover {
  color: var(--color-primary);
}

.billing-document-form {
  padding: 1rem 1.15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}
.billing-document-form .field {
  margin-bottom: 1rem;
}
.billing-document-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 640px) {
  .billing-document-form__grid {
    grid-template-columns: 1fr;
  }
}
.billing-document-form__field--wide {
  grid-column: 1/-1;
}
.billing-document-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.billing-line-items {
  margin: 1rem 0;
}
.billing-line-items__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.billing-line-items__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.billing-line-items__add {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.billing-line-items__table {
  width: 100%;
  margin-bottom: 0.5rem;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.billing-line-items__table th:nth-child(1),
.billing-line-items__table td:nth-child(1) {
  width: 48%;
}
.billing-line-items__table th:nth-child(2),
.billing-line-items__table td:nth-child(2) {
  width: 10%;
}
.billing-line-items__table th:nth-child(3),
.billing-line-items__table td:nth-child(3) {
  width: 24%;
}
.billing-line-items__table th:nth-child(4),
.billing-line-items__table td:nth-child(4) {
  width: 3.5rem;
}
.billing-line-items__table th,
.billing-line-items__table td {
  padding: 0.65rem 0.45rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.billing-line-items__table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: #f8fafc;
}
.billing-line-items__table .form-input {
  padding: 0.45rem 0.55rem;
  font-size: 0.875rem;
}
.billing-line-items__table .num {
  text-align: right;
  white-space: nowrap;
}
.billing-line-items__table .num .form-input {
  max-width: 100%;
}
.billing-line-items__actions {
  text-align: center;
  white-space: nowrap;
}
.billing-line-items__destroy-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.billing-line-items__remove {
  margin: 0 auto;
}
.billing-line-items__remove:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.billing-doc {
  max-width: 800px;
  margin: 0 auto 1rem;
}

/* A4 プレビュー（請求書・見積書） */
.billing-doc-preview-root {
  width: 210mm;
  max-width: 100%;
  margin: 0 auto 1.75rem;
}

.billing-doc-pages {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.billing-doc__a4-page {
  margin: 0 auto;
}

.billing-doc__a4-sheet {
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  margin: 0 auto;
  padding: 12mm 15mm;
  box-sizing: border-box;
  background: #fff;
  color: #111;
  border: none;
  border-radius: var(--radius-sm, 4px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.billing-doc__a4-body {
  position: relative;
}

.billing-doc__a4-chunk {
  margin-bottom: 0.35rem;
}

.billing-doc__a4-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.billing-doc__a4-topbar-spacer {
  flex: 1;
  min-width: 0;
}

.billing-doc__a4-docmeta {
  margin: 0;
  font-size: 0.82rem;
  text-align: right;
  line-height: 1.45;
}
.billing-doc__a4-docmeta div {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.25rem 0.6rem;
  justify-content: end;
  align-items: baseline;
}
.billing-doc__a4-docmeta dt {
  margin: 0;
  font-weight: 600;
  color: var(--color-text-muted);
}
.billing-doc__a4-docmeta dd {
  margin: 0;
  font-weight: 500;
}

.billing-doc__title--a4 {
  margin: 1.1rem 0 1.35rem;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 1.85rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
}

.billing-doc__sheet--a4 {
  margin-bottom: 0.25rem;
}

.billing-doc__lead-amount {
  margin: 0.55rem 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
}

.billing-doc__lead-amount-box {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  padding: 0.65rem 0.85rem;
  background-color: #f3f4f6;
  border-radius: var(--radius-sm, 4px);
}

.billing-doc__lead-amount-label {
  display: inline;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 0;
  letter-spacing: 0.02em;
}

.billing-doc__lead-amount-value {
  display: inline;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--color-text);
  white-space: nowrap;
}

.billing-doc__deadline-meta {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  line-height: 1.45;
  background-color: transparent !important;
  padding: 0;
  border-radius: 0;
}
.billing-doc__deadline-meta div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.35rem;
  align-items: baseline;
  background-color: transparent !important;
}
.billing-doc__deadline-meta dt {
  margin: 0;
  font-weight: 600;
  color: var(--color-text-muted);
  background-color: transparent !important;
}
.billing-doc__deadline-meta dd {
  margin: 0;
  background-color: transparent !important;
}

.billing-doc--a4 {
  max-width: none;
  width: 100%;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm;
  }
  .billing-doc-preview-root {
    width: 100%;
    margin: 0;
  }
  .billing-doc__a4-sheet {
    min-height: 0;
    border: none;
    box-shadow: none;
  }
  .billing-doc__a4-page {
    break-after: page;
    page-break-after: always;
  }
  .billing-doc__a4-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  .billing-doc__lead-amount-box {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .billing-doc__bank-transfer {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
.billing-doc__title:not(.billing-doc__title--a4) {
  margin: 0.85rem 0 1.25rem;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 1.85rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
}
.billing-doc__sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11rem, 34%);
  gap: 1rem 1.25rem;
  align-items: start;
  margin-bottom: 1rem;
}
@media (max-width: 640px) {
  .billing-doc__sheet {
    grid-template-columns: 1fr;
  }
}
.billing-doc__main {
  min-width: 0;
}
.billing-doc__issuer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--color-text);
  border-left: none;
  padding-left: 0;
}
@media (max-width: 640px) {
  .billing-doc__issuer {
    padding-top: 0.75rem;
    border-top: none;
  }
}
.billing-doc__issuer-logo {
  margin: 0 0 0.5rem;
  min-height: 0.25rem;
  align-self: flex-start;
}
.billing-doc__issuer-logo .billing-doc__logo-img {
  display: block;
  margin-left: 0;
  margin-right: auto;
  max-width: 70%;
  max-height: 36px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.billing-doc__issuer-amount {
  margin: 0 0 0.75rem;
  padding-bottom: 0;
  border-bottom: none;
}
.billing-doc__issuer-amount-label {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.billing-doc__issuer-amount-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.billing-doc__issuer-co {
  line-height: 1.65;
}
.billing-doc__issuer-co p {
  margin: 0 0 0.38rem;
}
.billing-doc__addressee {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}
.billing-doc__subject {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}
.billing-doc__intro {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.billing-doc__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
  margin: 0;
  max-width: 18rem;
  font-size: 0.88rem;
}
.billing-doc__meta div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.35rem;
  align-items: baseline;
}
.billing-doc__meta dt {
  font-weight: 600;
  margin: 0;
}
.billing-doc__meta dd {
  margin: 0;
  text-align: right;
}
.billing-doc__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.billing-doc__table col.billing-doc__col--item {
  width: 50%;
}
.billing-doc__table col.billing-doc__col--qty {
  width: 9%;
}
.billing-doc__table col.billing-doc__col--unit {
  width: 20.5%;
}
.billing-doc__table col.billing-doc__col--amt {
  width: 20.5%;
}
.billing-doc__table th,
.billing-doc__table td {
  border: 1px solid var(--color-border);
  padding: 0.75rem 0.55rem;
  vertical-align: middle;
}
.billing-doc__table thead th {
  background: #f8fafc;
  font-weight: 700;
  font-size: 0.82rem;
  text-align: center;
}
.billing-doc__table .num {
  text-align: right;
  white-space: nowrap;
}
.billing-doc__totals {
  margin-top: 1.25rem;
  margin-bottom: 0.35rem;
  margin-left: auto;
  max-width: 280px;
}
.billing-doc__totals p {
  display: flex;
  justify-content: space-between;
  margin: 0.42rem 0;
  font-size: 0.9rem;
}
.billing-doc__total-line {
  font-size: 1.05rem !important;
  padding-top: 0.55rem;
  margin-top: 0.35rem !important;
  border-top: none;
  font-weight: 600;
}
.billing-doc__tax-split-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 0.9rem;
}
.billing-doc__tax-split {
  width: 100%;
  max-width: 50%;
  margin-top: 0;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.billing-doc__tax-split th,
.billing-doc__tax-split td {
  border-bottom: 1px solid var(--color-border);
  padding: 0.35rem 0.4rem;
  font-weight: 400;
}
.billing-doc__tax-split th {
  width: 22%;
  text-align: left;
  color: var(--color-text-muted);
  font-weight: 600;
}
.billing-doc__tax-split .num {
  text-align: right;
  width: 28%;
}
.billing-doc__notes {
  margin-top: 1rem;
}
.billing-doc__bank-transfer {
  margin-top: 1.25rem;
  padding: 0.75rem 0.9rem;
  background: #f3f4f6;
  border-radius: var(--radius-sm, 4px);
  box-sizing: border-box;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-text);
}
.billing-doc__bank-transfer-title {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.billing-doc__bank-transfer-block {
  margin: 0 0 0.65rem;
}
.billing-doc__bank-transfer-block:last-child {
  margin-bottom: 0;
}
.billing-doc__bank-transfer-block p {
  margin: 0 0 0.25rem;
}

.billing-preview.billing-doc:not(.billing-doc--a4) {
  max-width: 800px;
}
.billing-preview__notes {
  margin-top: 1rem;
  font-size: 0.88rem;
}
.billing-preview__notes h3 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

.billing-portal-link {
  word-break: break-all;
}

.client-portal-credentials__new-password {
  margin: 0.75rem 0 1rem;
  padding: 0.75rem 0.9rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm, 6px);
}
.client-portal-credentials__value code {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.client-portal-credentials__list {
  margin: 0.75rem 0 1rem;
}
.client-portal-credentials__list div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  margin-bottom: 0.55rem;
}
.client-portal-credentials__list dt {
  margin: 0;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.client-portal-credentials__list dd {
  margin: 0;
  font-size: 0.88rem;
}
.client-portal-credentials__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.client-portal-password-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
}
.client-portal-password-field__display {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text);
}
.client-portal-password-field__toggle {
  padding: 0.25rem 0.65rem;
  font-size: 0.8rem;
}
.client-portal-password-field--empty .client-portal-password-field__display {
  color: var(--color-text-muted);
}

.client-portal-mypage__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.client-portal-mypage__staff-banner {
  margin: 0 0 1rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm, 6px);
  color: #1e40af;
}

.client-portal {
  max-width: 840px;
  margin: 0 auto;
  padding: 1rem 0 2rem;
}
.client-portal-back {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}
.client-portal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.client-portal-status {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
}
.client-portal-status--done {
  color: var(--color-text-muted);
}
.client-portal.client-portal-mypage {
  max-width: 52rem;
  padding: 0.35rem 0 2.75rem;
}
.client-portal.client-portal-mypage .client-portal-back {
  margin: 0 0 1.35rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.client-portal.client-portal-mypage .client-portal-mypage__hero {
  margin-bottom: 1.75rem;
  padding: 1.35rem 1.4rem;
  background: linear-gradient(145deg, rgba(240, 253, 250, 0.65) 0%, var(--color-surface, #fff) 42%, var(--color-surface, #fff) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.client-portal.client-portal-mypage .client-portal-mypage__hero-kicker {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-main-teal, #0d9488);
}
.client-portal.client-portal-mypage .client-portal-mypage__hero-name {
  margin: 0 0 0.5rem;
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
}
.client-portal.client-portal-mypage .client-portal-mypage__hero-note {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.client-portal.client-portal-mypage .client-portal-mypage__grid {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .client-portal.client-portal-mypage .client-portal-mypage__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.client-portal.client-portal-mypage .client-portal-mypage__panel {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
}
.client-portal.client-portal-mypage .client-portal-mypage__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.05rem;
  background: var(--color-bg-muted, #f8fafc);
  border-bottom: 1px solid var(--color-border);
}
.client-portal.client-portal-mypage .client-portal-mypage__panel-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--color-text);
}
.client-portal.client-portal-mypage .client-portal-mypage__panel-icon {
  display: inline-flex;
  width: 1.85rem;
  height: 1.85rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.client-portal.client-portal-mypage .client-portal-mypage__panel-icon--estimate {
  background: rgba(13, 148, 136, 0.14);
  color: var(--color-main-teal, #0d9488);
}
.client-portal.client-portal-mypage .client-portal-mypage__panel-icon--invoice {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
}
.client-portal.client-portal-mypage .client-portal-mypage__panel-count {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.client-portal.client-portal-mypage .client-portal-mypage__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.client-portal.client-portal-mypage .client-portal-mypage__card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.05rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.12s ease;
}
.client-portal.client-portal-mypage .client-portal-mypage__card:last-child {
  border-bottom: 0;
}
.client-portal.client-portal-mypage .client-portal-mypage__card:hover {
  background: rgba(13, 148, 136, 0.045);
}
.client-portal.client-portal-mypage .client-portal-mypage__card:focus-visible {
  outline: 2px solid var(--color-main-teal, #26b7b7);
  outline-offset: -2px;
}
.client-portal.client-portal-mypage .client-portal-mypage__card-body {
  flex: 1;
  min-width: 0;
}
.client-portal.client-portal-mypage .client-portal-mypage__doc-no {
  margin: 0 0 0.15rem;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.client-portal.client-portal-mypage .client-portal-mypage__doc-title {
  margin: 0 0 0.4rem;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.client-portal.client-portal-mypage .client-portal-mypage__doc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}
.client-portal.client-portal-mypage .client-portal-mypage__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.42rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
}
.client-portal.client-portal-mypage .client-portal-mypage__badge--sent {
  background: #e2e8f0;
  color: #475569;
}
.client-portal.client-portal-mypage .client-portal-mypage__badge--ordered {
  background: rgba(13, 148, 136, 0.16);
  color: #0f766e;
}
.client-portal.client-portal-mypage .client-portal-mypage__badge--paid {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}
.client-portal.client-portal-mypage .client-portal-mypage__doc-date {
  font-size: 0.76rem;
  color: var(--color-text-muted);
}
.client-portal.client-portal-mypage .client-portal-mypage__amount {
  margin-left: auto;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.client-portal.client-portal-mypage .client-portal-mypage__card-go {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1;
}
.client-portal.client-portal-mypage .client-portal-mypage__card:hover .client-portal-mypage__card-go {
  background: rgba(13, 148, 136, 0.15);
  color: var(--color-main-teal, #0d9488);
}
.client-portal.client-portal-mypage .client-portal-mypage__empty {
  margin: 0;
  padding: 1.65rem 1.1rem;
  text-align: center;
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  background: rgba(248, 250, 252, 0.85);
}

.paid-leave-stats {
  margin-bottom: 1.25rem;
}
.paid-leave-stats__heading {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.paid-leave-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
}
@media (min-width: 640px) {
  .paid-leave-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.paid-leave-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.paid-leave-stat--highlight {
  border-color: var(--color-main-teal, #26b7b7);
  background: linear-gradient(145deg, #f0fdfa 0%, var(--color-surface) 100%);
}
.paid-leave-stat--highlight .paid-leave-stat__value {
  color: var(--color-main-teal, #26b7b7);
}
.paid-leave-stat--pending .paid-leave-stat__value {
  color: #b45309;
}
.paid-leave-stat__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.paid-leave-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}
.paid-leave-stat__unit {
  font-size: 0.85rem;
  font-weight: 600;
  margin-left: 0.1rem;
}
.paid-leave-stat__sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.paid-leave-form-panel .page-panel__title {
  margin-bottom: 1rem;
}

.paid-leave-form {
  max-width: 32rem;
}
.paid-leave-form__field {
  margin-bottom: 1.25rem;
  border: none;
  padding: 0;
  margin-inline: 0;
}
.paid-leave-form__field--half[hidden] {
  display: none !important;
}
.paid-leave-form__label,
.paid-leave-form legend.paid-leave-form__label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--color-text);
  padding: 0;
}
.paid-leave-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 480px) {
  .paid-leave-form__row {
    grid-template-columns: 1fr 1fr;
  }
}
.paid-leave-form__input {
  width: 100%;
  max-width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.paid-leave-form__input:focus {
  outline: none;
  border-color: var(--color-main-teal, #26b7b7);
  box-shadow: 0 0 0 3px rgba(38, 183, 183, 0.15);
}
.paid-leave-form textarea.paid-leave-form__input {
  min-height: 5rem;
  resize: vertical;
}
.paid-leave-form__errors {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  color: #b91c1c;
  font-size: 0.88rem;
}
.paid-leave-form__errors ul {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
}
.paid-leave-form__errors-title {
  margin: 0;
  font-weight: 600;
}
.paid-leave-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}
.paid-leave-form__submit {
  min-width: 8rem;
  padding: 0.55rem 1.25rem;
  font-size: 0.95rem;
}

.paid-leave-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin: 0;
}
.paid-leave-mode-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.paid-leave-mode-toggle__option {
  cursor: pointer;
  margin: 0;
}
.paid-leave-mode-toggle__card {
  display: block;
  padding: 0.65rem 1rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color 0.15s, background 0.15s;
}
.paid-leave-mode-toggle__input:checked + .paid-leave-mode-toggle__card {
  border-color: var(--color-main-teal, #26b7b7);
  background: #f0fdfa;
  color: var(--color-main-teal, #26b7b7);
}

.paid-leave-range-preview {
  margin: -0.5rem 0 1rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-main-teal, #26b7b7);
  background: #f0fdfa;
  border-radius: var(--radius);
  border: 1px solid #99f6e4;
}

.paid-leave-form__hint {
  margin: -0.25rem 0 1rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.paid-leave-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.paid-leave-type-toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.paid-leave-type-toggle__option {
  cursor: pointer;
  margin: 0;
}
.paid-leave-type-toggle__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 5rem;
  padding: 0.85rem 0.5rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.paid-leave-type-toggle__card .la {
  font-size: 1.5rem;
  color: var(--color-text-muted);
}
.paid-leave-type-toggle__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}
.paid-leave-type-toggle__hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.paid-leave-type-toggle__input:checked + .paid-leave-type-toggle__card {
  border-color: var(--color-main-teal, #26b7b7);
  background: #f0fdfa;
  box-shadow: 0 0 0 3px rgba(38, 183, 183, 0.12);
}
.paid-leave-type-toggle__input:checked + .paid-leave-type-toggle__card .la {
  color: var(--color-main-teal, #26b7b7);
}
.paid-leave-type-toggle__input:focus-visible + .paid-leave-type-toggle__card {
  outline: 2px solid var(--color-main-teal, #26b7b7);
  outline-offset: 2px;
}

.paid-leave-half-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.paid-leave-half-segment__option {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}
.paid-leave-half-segment__option input {
  margin-right: 0.35rem;
}
.paid-leave-half-segment__option span {
  font-size: 0.9rem;
  font-weight: 500;
}
.paid-leave-half-segment__option:has(input:checked) {
  background: #f0fdfa;
  border-color: var(--color-main-teal, #26b7b7);
}
.paid-leave-half-segment__option {
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.paid-leave-staff-filter select {
  min-width: 12rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.paid-leave-pending-panel {
  margin-bottom: 1.25rem;
  border-color: #fcd34d;
}

.paid-leave-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: #fffbeb;
}
.paid-leave-panel-head .page-panel__title {
  margin: 0;
}
.paid-leave-panel-head__badge {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: #fef3c7;
  color: #92400e;
  border-radius: 999px;
}
.paid-leave-panel-head--inset {
  padding: 1rem 1.25rem 0.5rem;
  border-bottom: none;
  background: transparent;
}

.paid-leave-pending-actions {
  white-space: nowrap;
}
.paid-leave-pending-actions .button_to {
  display: inline-block;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.paid-leave-reject-form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  vertical-align: middle;
}

.paid-leave-reject-note {
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  min-width: 10rem;
}

.list-count {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-text-muted, #64748b);
}

.pagination-wrap {
  margin-top: 1.25rem;
  margin-bottom: 1rem;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9rem;
}
.pagination .page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 4px;
  color: var(--color-primary, #26b7b7);
  text-decoration: none;
  background: #fff;
}
.pagination .page:hover {
  background: var(--color-bg-subtle, #f8fafc);
}
.pagination .page.current {
  background: var(--color-primary, #26b7b7);
  color: #fff;
  border-color: var(--color-primary, #26b7b7);
  cursor: default;
}
.pagination .page.gap {
  border: none;
  background: none;
  cursor: default;
}
.pagination .page.prev, .pagination .page.next {
  padding: 0.35rem 0.6rem;
}
.pagination .page.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination a.page:hover {
  text-decoration: none;
}

.pagination-wrap--prev-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
}
.pagination-wrap--prev-next .pagination-prev,
.pagination-wrap--prev-next .pagination-next {
  color: var(--color-primary, #26b7b7);
  text-decoration: none;
}
.pagination-wrap--prev-next .pagination-prev:hover,
.pagination-wrap--prev-next .pagination-next:hover {
  text-decoration: underline;
}
.pagination-wrap--prev-next .pagination-current {
  color: var(--color-text-muted, #64748b);
}

/*# sourceMappingURL=style.css.map */