:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --border: #e5e5e7;
  --accent: #0071e3;
  --accent-ghost: rgba(0,113,227,0.08);
  --color-primary: #2563eb;
  --color-primary-ink: #1d4ed8;
  --color-primary-soft: #eff6ff;
  --color-primary-border: #bfdbfe;
  --color-success: #16a34a;
  --color-success-ink: #166534;
  --color-success-soft: #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-warning: #f59e0b;
  --color-warning-ink: #92400e;
  --color-warning-soft: #fff8e1;
  --color-warning-border: #f9d67a;
  --color-danger: #dc2626;
  --color-danger-ink: #991b1b;
  --color-danger-soft: #fef2f2;
  --color-danger-border: #fecaca;
  --color-info: #0891b2;
  --color-info-ink: #0369a1;
  --color-info-soft: #eef8ff;
  --color-info-border: #bae6fd;
  --color-purple: #7c3aed;
  --color-purple-ink: #6d28d9;
  --color-purple-soft: #f3edff;
  --color-purple-border: #ddd6fe;
  --color-teal: #14b8a6;
  --color-teal-ink: #0f766e;
  --color-teal-soft: #e6fffb;
  --color-teal-border: #99f6e4;
  --text-strong: #0f172a;
  --text-muted: #64748b;
  --text-soft: #475569;
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --surface-subtle: #fbfdff;
  --border-soft: #e2e8f0;
  --border-muted: #cbd5e1;
  --theme-shell: rgba(255, 255, 255, 0.86);
  --theme-shell-strong: rgba(255, 255, 255, 0.96);
  --theme-mint: #f0fdf4;
  --theme-aqua: #f0f9ff;
  --theme-cream: #fff8e1;
  --theme-rose: #fff1f2;
  --theme-lavender: #f3edff;
  --theme-icon-bg: var(--surface);
  --theme-icon-blue: var(--surface);
  --theme-icon-success: var(--surface);
  --theme-icon-amber: var(--surface);
  --theme-icon-red: var(--surface);
  --theme-icon-purple: var(--surface);
  --theme-icon-border: var(--border-soft);
  --theme-icon-ink: var(--color-primary-ink);
  --theme-gradient: var(--surface);
  --progress-rainbow: linear-gradient(90deg, var(--color-primary) 0%, var(--color-purple) 24%, var(--color-info) 46%, var(--color-teal) 64%, var(--color-success) 80%, var(--color-warning) 92%, var(--color-danger) 100%);
  --nav-active-bg: #eef4ff;
  --nav-active-ink: #1d4ed8;
  --nav-active-border: #bfdbfe;
  --nav-active-shadow: 0 10px 22px rgba(37, 99, 235, 0.14);
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 12px 28px rgba(15, 23, 42, 0.06);
  --shadow-panel: 0 14px 34px rgba(15, 23, 42, 0.08);
  --btn-font-size: 14px;
  --btn-font-weight: 700;
  --btn-radius: 12px;
  --btn-height: 40px;
  --btn-padding-x: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --font-ui: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --ui-page-gap: var(--space-6);
  --ui-card-bg: var(--surface);
  --ui-card-border: var(--border-soft);
  --ui-card-radius: var(--radius-md);
  --ui-card-shadow: var(--shadow-card);
  --ui-control-height: var(--btn-height);
  --ui-focus-ring: 0 0 0 3px var(--accent-ghost);
  --ui-state-bg: var(--surface-muted);
  --ui-state-border: var(--border-muted);
  --modal-backdrop-bg: rgba(15, 23, 42, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--theme-gradient);
  background-attachment: fixed;
  font-family: var(--font-ui);
}

.hidden { display: none !important; }

.inline-form {
  margin: 0;
}

.pager-center {
  justify-content: center;
}

.stock-width-0 { width: 0%; }
.stock-width-5 { width: 5%; }
.stock-width-10 { width: 10%; }
.stock-width-15 { width: 15%; }
.stock-width-20 { width: 20%; }
.stock-width-25 { width: 25%; }
.stock-width-30 { width: 30%; }
.stock-width-35 { width: 35%; }
.stock-width-40 { width: 40%; }
.stock-width-45 { width: 45%; }
.stock-width-50 { width: 50%; }
.stock-width-55 { width: 55%; }
.stock-width-60 { width: 60%; }
.stock-width-65 { width: 65%; }
.stock-width-70 { width: 70%; }
.stock-width-75 { width: 75%; }
.stock-width-80 { width: 80%; }
.stock-width-85 { width: 85%; }
.stock-width-90 { width: 90%; }
.stock-width-95 { width: 95%; }
.stock-width-100 { width: 100%; }

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.72);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--theme-icon-ink);
  border: 1px solid var(--theme-icon-border);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

.brand-title { font-weight: 600; letter-spacing: 0.2px; }

.app-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: start;
  max-width: 1200px;
  margin: 18px auto 40px;
  gap: 18px;
  padding: 0 20px;
}

.sidebar {
  align-self: start;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  height: fit-content;
}

.section-title {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 8px 6px;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.menu-link:hover { background: #f2f2f4; }

.menu-link.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-ink);
  font-weight: 600;
}

.menu-link .icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--theme-icon-border);
  display: grid;
  place-items: center;
  font-size: 13px;
}

.main {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow);
  overflow-wrap: break-word;
  word-break: normal;
}

button, .btn,
.btn-edit, .btn-delete, .btn-open, .btn-approve, .btn-reject, .btn-toolbar, .btn-detail {
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  padding: 0 var(--btn-padding-x);
  min-height: var(--btn-height);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
}

button:hover, .btn:hover,
button:focus, .btn:focus,
button:active, .btn:active,
button:visited, .btn:visited {
  text-decoration: none !important;
}

button:disabled, .btn:disabled,
button[disabled], .btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn-secondary { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
.btn-success { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn-warning { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.btn-outline { background: #fff; border-color: #cbd5e1; color: #0f172a; }

.btn-info { background: var(--color-info); border-color: var(--color-info); color: var(--surface); }

.btn-neutral { background: var(--surface-muted); border-color: var(--border-muted); color: var(--text-soft); }

.btn-icon,
.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
}

.ui-icon-svg {
  display: block;
  width: 1em;
  height: 1em;
}

input:not([data-app-choice-option]), select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { background: #fafafa; color: var(--muted); font-weight: 600; }
th, td {
  overflow-wrap: break-word;
  word-break: normal;
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.status-approved { background: #e7f6ee; color: #0f5132; border: 1px solid #cfe9dd; }
.status-pending { background: #fff4e5; color: #8a5a00; border: 1px solid #f2e0c6; }
.status-rejected { background: #fdecec; color: #842029; border: 1px solid #f5c2c7; }
.status-unknown { background: #f1f3f5; color: #495057; border: 1px solid #e5e7eb; }

.leave-approval-flow {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.laf-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.laf-summary-text {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.laf-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.laf-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  min-width: 0;
}

.laf-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}

.laf-step-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.laf-step-title {
  color: #0f172a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.laf-step-meta,
.laf-step-time,
.laf-step-state {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.laf-step-state {
  color: #475569;
}

.laf-step.is-done {
  border-color: var(--color-success-border);
  background: #f0fdf4;
}

.laf-step.is-done .laf-step-dot {
  background: #16a34a;
  color: #ffffff;
}

.laf-step.is-current {
  border-color: #fed7aa;
  background: #fff7ed;
}

.laf-step.is-current .laf-step-dot {
  background: #f97316;
  color: #ffffff;
}

.laf-step.is-rejected {
  border-color: var(--color-danger-border);
  background: #fef2f2;
}

.laf-step.is-rejected .laf-step-dot {
  background: #dc2626;
  color: #ffffff;
}

.laf-step.is-skipped {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
}

.laf-step.is-skipped .laf-step-dot {
  background: var(--color-info);
  color: #ffffff;
}

.leave-approval-flow-compact .laf-steps {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.leave-request-card .leave-approval-flow-compact .laf-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leave-request-card .leave-approval-flow-compact .laf-step {
  min-height: 120px;
  padding: 12px;
}

.leave-request-card .leave-approval-flow-compact .laf-step-time {
  width: max-content;
  max-width: 100%;
  display: inline-grid;
  gap: 2px;
  margin-top: 4px;
  padding: 6px 9px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.leave-request-card .leave-approval-flow-compact .laf-step-time-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
}

.leave-request-card .leave-approval-flow-compact .laf-step-time-value {
  color: var(--text-strong);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .laf-steps,
  .leave-approval-flow-compact .laf-steps {
    grid-template-columns: 1fr;
  }

  .leave-request-card .leave-approval-flow-compact .laf-steps {
    grid-template-columns: 1fr;
  }

  .leave-request-card .leave-approval-flow-compact .laf-step-time {
    width: 100%;
  }
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}
.stat-grid > .stat-card:nth-child(1) { background:#eff6ff; border-color:#bfdbfe; }
.stat-grid > .stat-card:nth-child(2) { background:#fffbeb; border-color:#fde68a; }
.stat-grid > .stat-card:nth-child(3) { background:#f0fdf4; border-color:#bbf7d0; }
.stat-grid > .stat-card:nth-child(4) { background:#fef2f2; border-color:#fecaca; }

.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.quick-link {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fbfbfc;
  color: var(--ink);
  text-decoration: none;
}

.quick-link:hover { background: #f2f2f4; }

/* System design components: use these for all new module pages before adding page-specific CSS. */
.page-stack {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 100%;
}

.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.page-hero-main {
  display: grid;
  align-content: center;
  gap: var(--space-2);
  min-width: 0;
}

.page-kicker,
.section-kicker,
.field-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.page-kicker {
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  text-transform: uppercase;
}

.page-title {
  margin: 0;
  color: var(--text-strong);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0;
}

.page-subtitle {
  margin: 0;
  max-width: 760px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.page-hero-aside {
  min-width: 220px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.section-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  min-width: 0;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.section-card .section-title {
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0;
}

.section-subtitle {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.metric-grid,
.action-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.metric-card,
.action-card,
.record-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  min-width: 0;
}

.metric-card {
  display: grid;
  gap: 6px;
  padding: var(--space-3);
}

a.metric-card {
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

a.metric-card:hover,
a.metric-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.metric-card.is-primary,
.action-card.is-primary { border-color: var(--color-primary-border); background: var(--surface); color: var(--color-primary-ink); }
.metric-card.is-info,
.action-card.is-info { border-color: var(--color-info-border); background: var(--surface); color: var(--color-info-ink); }
.metric-card.is-warning,
.action-card.is-warning { border-color: var(--color-warning-border); background: var(--surface); color: var(--color-warning-ink); }
.metric-card.is-success,
.action-card.is-success { border-color: var(--color-success-border); background: var(--surface); color: var(--color-success-ink); }
.metric-card.is-danger,
.action-card.is-danger { border-color: var(--color-danger-border); background: var(--surface); color: var(--color-danger-ink); }
.metric-card.is-neutral,
.action-card.is-neutral { border-color: var(--border-muted); background: var(--surface); color: var(--text-soft); }

.metric-head,
.action-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 800;
}

.metric-icon,
.action-icon {
  font-size: 15px;
  line-height: 1;
}

.metric-value {
  color: var(--text-strong);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}

.metric-value.is-compact {
  font-size: 16px;
  line-height: 1.35;
}

.metric-sub,
.action-sub,
.record-meta {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.action-card {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.action-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.filter-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.activity-filter-card {
  display: grid;
  gap: var(--space-3);
}

.activity-filter-head,
.activity-export-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}

.activity-filter-head {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.activity-filter-head .btn {
  min-width: 132px;
  min-height: 44px;
}

.activity-filter-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.activity-filter-panel .action-row {
  justify-content: flex-start;
}

.activity-export-card {
  padding: var(--space-4);
  border: 1px solid #ccfbf1;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
  box-shadow: 0 12px 26px rgba(15, 118, 110, 0.08);
}

.activity-export-card h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
}

.activity-export-card p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.activity-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(136px, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

.activity-export-actions .btn-report {
  width: 100%;
  min-height: 44px;
  border-color: #0f766e;
  background: #0f766e;
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.18);
  white-space: nowrap;
}

.filter-grid {
  display: grid;
  gap: 10px;
  align-items: end;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.filter-grid .is-wide {
  grid-column: span 2;
}

.form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.form-actions,
.action-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.record-list,
.group-list {
  display: grid;
  gap: var(--space-3);
}

.record-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%);
  box-shadow: none;
}

.record-card:hover {
  border-color: #cfe0ee;
  box-shadow: var(--shadow-card);
}

.record-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.record-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.record-title {
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.record-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.record-detail-grid {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.record-detail-label,
.context-label {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.record-detail-text,
.context-value {
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.inventory-activity-page .inventory-activity-filter {
  display: grid;
  gap: var(--space-3);
}

.inventory-activity-page .inventory-activity-filter-grid.filter-grid {
  grid-template-columns: minmax(260px, 2fr) minmax(180px, 1fr) minmax(220px, 1fr);
  gap: var(--space-3);
}

.inventory-activity-page .inventory-activity-filter-grid .is-wide {
  grid-column: auto;
}

.inventory-activity-page .inventory-activity-filter-actions.form-actions {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  justify-self: end;
  width: min(100%, 360px);
  margin-top: 0;
  padding: 0;
  background: transparent;
}

.inventory-activity-page .inventory-activity-filter-actions .btn {
  width: 100%;
}

.inventory-activity-page .inventory-activity-detail-grid.record-detail-grid {
  grid-template-columns: 120px minmax(0, 1fr);
}

.inventory-activity-page .inventory-activity-detail-text.record-detail-text {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .inventory-activity-page .inventory-activity-filter-grid.filter-grid {
    grid-template-columns: 1fr;
  }

  .inventory-activity-page .inventory-activity-filter-actions.form-actions {
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .inventory-activity-page .inventory-activity-filter-actions.form-actions {
    grid-template-columns: 1fr;
  }
}

.context-item {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.context-label {
  color: var(--text-muted);
  text-transform: uppercase;
}

.rental-units-page .form-actions {
  position: static;
  z-index: auto;
  margin-top: 0;
  padding-top: 0;
  background: none;
}

.rental-unit-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-units-page .page-hero-aside {
  gap: var(--space-2);
}

.rental-unit-add-btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
  white-space: nowrap;
}

.rental-unit-form-sections,
.rental-unit-edit-grid {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.rental-unit-edit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.rental-unit-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-unit-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rental-unit-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-unit-filter-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-unit-filter-search {
  grid-column: span 5;
}

.rental-unit-filter-building {
  grid-column: span 3;
}

.rental-unit-filter-space,
.rental-unit-filter-status,
.rental-unit-filter-area {
  grid-column: span 2;
}

.rental-unit-filter-actions {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.rental-unit-filter-actions .btn {
  width: auto;
  min-width: 112px;
  min-height: 40px;
  padding-inline: var(--space-3);
}

.rental-unit-grid-identity {
  grid-template-columns: minmax(150px, .8fr) minmax(220px, 1fr) minmax(180px, 1fr);
}

.rental-unit-grid-location {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-unit-grid-usage,
.rental-unit-grid-files {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rental-unit-grid-files-create {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rental-unit-field-location {
  grid-column: 1 / -1;
}

.rental-unit-field-wide {
  grid-column: span 2;
}

.rental-units-page .rental-unit-form-section .form-field {
  align-content: start;
}

.rental-units-page .rental-unit-form-section textarea {
  min-height: 88px;
}

.rental-units-page .upload-dropzone {
  min-height: 76px;
}

.rental-unit-create-actions,
.rental-unit-card-actions {
  align-self: end;
}

.rental-unit-create-actions {
  display: grid;
  grid-column: 1 / -1;
  justify-self: end;
  width: min(200px, 100%);
}

.rental-unit-create-actions .btn {
  width: 100%;
  min-height: 44px;
}

.rental-space-types-page .page-hero-aside .btn {
  width: max-content;
}

.rental-space-type-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-space-type-admin {
  display: grid;
  gap: var(--space-4);
}

.rental-space-type-section-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.rental-space-type-section-icon,
.rental-space-type-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.rental-space-type-create-form {
  padding: var(--space-3);
}

.rental-space-type-create-grid {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr) minmax(120px, .45fr) auto;
  gap: var(--space-3);
  align-items: start;
  min-width: 0;
}

.rental-space-type-create-actions {
  align-self: end;
}

.rental-space-type-create-actions .btn {
  min-width: 132px;
  min-height: 40px;
}

.rental-space-type-admin .field-hint {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.rental-space-type-list {
  display: grid;
  gap: var(--space-3);
}

.rental-space-type-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
}

.rental-space-type-row-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  min-width: 0;
}

.rental-space-type-row-head .record-title {
  margin-top: var(--space-1);
}

.rental-space-type-row-head .badge-soft {
  width: max-content;
  max-width: 100%;
}

.rental-space-type-row-head .record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-2);
  margin: var(--space-1) 0 0;
}

.rental-space-type-row-head .record-meta strong {
  color: var(--text-strong);
}

.rental-space-type-edit-panel {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  min-width: 0;
}

.rental-space-type-row-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(96px, 140px) minmax(120px, auto) minmax(136px, auto);
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-space-type-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--text-soft);
  font-weight: 800;
  white-space: nowrap;
}

.rental-space-type-active-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}

.rental-space-type-toggle-form {
  display: flex;
  justify-content: flex-end;
}

.rental-space-type-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.rental-space-type-action-note {
  min-width: 0;
}

.rental-space-type-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.rental-space-type-row .btn {
  min-width: 128px;
  min-height: 40px;
  white-space: nowrap;
  justify-content: center;
}

.rental-space-type-delete-locked {
  display: inline-flex;
  align-items: center;
  max-width: none;
  min-height: 32px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  line-height: 1.35;
}

.rental-unit-card {
  align-items: stretch;
}

.rental-unit-zone-list {
  display: grid;
  gap: var(--space-5);
}

.rental-unit-zone-group {
  display: grid;
  gap: var(--space-3);
}

.rental-unit-zone-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}

.rental-unit-zone-head .section-title {
  margin: 0;
}

.rental-unit-card-compact {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.rental-unit-record-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.rental-unit-card-icon,
.rental-unit-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.rental-unit-card-compact .record-title,
.rental-unit-modal-title h2 {
  margin: 0;
}

.rental-unit-card-compact .record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  align-items: baseline;
  overflow-wrap: anywhere;
}

.rental-unit-card-compact .record-meta span:first-child {
  color: var(--text-muted);
  font-weight: 800;
}

.rental-unit-card-compact .record-meta strong {
  color: var(--text-soft);
  font-weight: 800;
}

.rental-unit-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.rental-unit-head-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.rental-unit-head-meta .record-meta {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
}

.rental-unit-context {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: 0;
  border-top: 0;
}

.rental-unit-context .context-item {
  padding: var(--space-2) 0;
}

.rental-unit-context .context-value {
  color: var(--text-strong);
  font-weight: 800;
}

.rental-unit-file-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.rental-unit-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.rental-unit-manage-btn {
  min-width: 128px;
  white-space: nowrap;
}

.rental-unit-modal {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(15, 23, 42, .52);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.rental-unit-modal.is-open,
.rental-unit-modal.is-closing {
  display: flex;
}

.rental-unit-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.rental-unit-modal-dialog.modal-card {
  width: min(1120px, 100%);
  max-height: min(90vh, 920px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  transform: translateY(var(--space-2));
  transition: opacity .2s ease, transform .2s ease;
}

.rental-unit-create-dialog.modal-card {
  width: min(1080px, 100%);
}

.rental-unit-modal .rental-unit-edit-grid {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.rental-unit-modal .rental-unit-form-section {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
}

.rental-unit-modal .rental-unit-form-section legend {
  margin-left: -2px;
  color: var(--text-soft);
  font-size: 13px;
}

.rental-unit-modal .rental-unit-grid-identity {
  grid-template-columns: minmax(170px, .8fr) minmax(220px, 1fr) minmax(180px, .8fr);
}

.rental-unit-modal .rental-unit-grid-location {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-unit-modal .rental-unit-grid-usage,
.rental-unit-modal .rental-unit-grid-files {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rental-unit-modal.is-visible .rental-unit-modal-dialog.modal-card {
  opacity: 1;
  transform: translateY(0);
}

.rental-unit-modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.rental-unit-modal-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.rental-unit-modal-title p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.rental-unit-modal-form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  min-height: 0;
}

.rental-unit-modal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: stretch;
}

.rental-unit-modal-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.rental-unit-modal-stat span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.rental-unit-modal-stat strong {
  min-width: 0;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rental-unit-modal-stat .badge-soft {
  width: max-content;
  max-width: 100%;
}

.rental-unit-modal-body {
  min-height: 0;
  overflow: auto;
  padding: var(--space-1) var(--space-1) var(--space-1) 0;
}

.rental-unit-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.rental-unit-modal-actions .btn {
  min-width: 128px;
}

.rental-unit-empty {
  display: grid;
  gap: 6px;
}

@media (max-width: 1080px) {
  .rental-unit-overview,
  .rental-space-type-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-unit-context {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rental-unit-grid-location,
  .rental-unit-modal .rental-unit-grid-location {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-unit-modal .rental-unit-grid-identity {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rental-unit-modal-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-space-type-create-grid,
  .rental-space-type-row-form {
    grid-template-columns: 1fr 1fr;
  }

  .rental-space-type-row {
    grid-template-columns: 1fr;
  }

  .rental-space-type-row-head,
  .rental-space-type-edit-panel,
  .rental-space-type-action-row,
  .rental-space-type-actions,
  .rental-space-type-toggle-form {
    grid-column: 1 / -1;
  }

  .rental-space-type-actions {
    grid-row: auto;
    min-width: 0;
  }

  .rental-space-type-actions,
  .rental-space-type-toggle-form {
    justify-content: flex-start;
  }

  .rental-space-type-delete-locked {
    text-align: left;
  }

  .rental-unit-grid-files-create .rental-unit-create-actions {
    min-width: 180px;
  }

}

@media (max-width: 680px) {
  .rental-unit-overview,
  .rental-space-type-overview,
  .rental-unit-card-head {
    grid-template-columns: 1fr;
  }

  .rental-unit-card-compact {
    padding: var(--space-3);
  }

  .rental-unit-record-head,
  .rental-unit-modal-title,
  .rental-space-type-section-title,
  .rental-space-type-row-head {
    grid-template-columns: 1fr;
  }

  .rental-unit-card-icon,
  .rental-unit-modal-icon,
  .rental-space-type-section-icon,
  .rental-space-type-row-icon {
    width: 38px;
    height: 38px;
  }

  .rental-unit-grid-identity,
  .rental-unit-grid-location,
  .rental-unit-grid-usage,
  .rental-unit-grid-files,
  .rental-unit-modal .rental-unit-grid-identity,
  .rental-unit-modal .rental-unit-grid-location,
  .rental-unit-modal .rental-unit-grid-usage,
  .rental-unit-modal .rental-unit-grid-files,
  .rental-unit-grid-files-create {
    grid-template-columns: 1fr;
  }

  .rental-unit-context {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .rental-unit-modal-summary {
    grid-template-columns: 1fr;
  }

  .rental-unit-field-location,
  .rental-unit-field-wide,
  .rental-unit-grid-files-create .rental-unit-create-actions {
    grid-column: auto;
    min-width: 0;
  }

  .rental-unit-filter-grid {
    grid-template-columns: 1fr;
  }

  .rental-unit-filter-search,
  .rental-unit-filter-building,
  .rental-unit-filter-space,
  .rental-unit-filter-status,
  .rental-unit-filter-area {
    grid-column: auto;
  }

  .rental-unit-filter-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .rental-unit-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }

  .rental-unit-zone-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .rental-space-type-create-grid,
  .rental-space-type-row,
  .rental-space-type-action-row,
  .rental-space-type-row-form {
    grid-template-columns: 1fr;
  }

  .rental-space-type-create-actions,
  .rental-space-type-create-actions .btn,
  .rental-space-type-row .btn,
  .rental-space-type-actions,
  .rental-space-type-toggle-form {
    width: 100%;
  }

  .rental-space-type-actions,
  .rental-space-type-toggle-form {
    display: grid;
  }

  .rental-space-type-actions {
    grid-template-columns: 1fr;
  }

  .rental-unit-head-meta {
    justify-items: start;
  }

  .rental-unit-card-footer {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .rental-unit-manage-btn,
  .rental-unit-modal-close,
  .rental-unit-modal-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .rental-unit-modal {
    padding: var(--space-2);
  }

  .rental-unit-modal-dialog.modal-card {
    max-height: 94vh;
    padding: var(--space-3);
  }

  .rental-unit-modal-head,
  .rental-unit-modal-actions {
    grid-template-columns: 1fr;
  }

  .rental-unit-modal-actions {
    display: grid;
  }

  .rental-unit-file-tools {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rental-unit-file-tools > * {
    width: 100%;
    justify-content: center;
  }
}

.rental-tenants-page .form-actions {
  position: static;
  z-index: auto;
  margin-top: 0;
  padding-top: 0;
  background: none;
}

.rental-tenant-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-tenant-form-sections,
.rental-tenant-edit-grid {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.rental-tenant-edit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.rental-tenant-contact-section {
  grid-column: 1 / -1;
}

.rental-tenant-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-tenant-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rental-tenant-grid,
.rental-tenant-filter-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-tenant-grid-identity {
  grid-template-columns: minmax(150px, .75fr) minmax(240px, 1.25fr) repeat(2, minmax(160px, .75fr));
}

.rental-tenant-field-user {
  grid-column: span 2;
}

.rental-tenant-grid-organization {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-tenant-field-company {
  grid-column: span 2;
}

.rental-tenant-grid-contact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rental-tenant-field-address {
  grid-column: 1 / -1;
}

.rental-tenants-page .rental-tenant-form-section .form-field {
  align-content: start;
}

.rental-tenants-page .rental-tenant-form-section textarea {
  min-height: 88px;
}

.rental-tenant-create-actions,
.rental-tenant-card-actions {
  display: flex;
  justify-content: flex-end;
  align-self: end;
}

.rental-tenant-create-actions .btn,
.rental-tenant-card-actions .btn {
  min-width: 180px;
  min-height: 44px;
}

.rental-tenant-filter-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-tenant-filter-search {
  grid-column: span 6;
}

.rental-tenant-filter-type,
.rental-tenant-filter-status {
  grid-column: span 3;
}

.rental-tenant-filter-actions {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.rental-tenant-filter-actions .btn {
  width: auto;
  min-width: 112px;
  min-height: 40px;
  padding-inline: var(--space-3);
}

.rental-tenant-card {
  align-items: stretch;
}

.rental-tenant-card .rental-tenant-edit-grid {
  grid-template-columns: 1fr;
}

.rental-tenant-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-tenant-head-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 0;
}

.rental-tenant-context {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-tenant-empty {
  display: grid;
  gap: 6px;
}

@media (max-width: 1080px) {
  .rental-tenant-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-tenant-edit-grid,
  .rental-tenant-context {
    grid-template-columns: 1fr;
  }

  .rental-tenant-grid-identity,
  .rental-tenant-grid-organization,
  .rental-tenant-grid-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .rental-tenant-overview,
  .rental-tenant-card-head,
  .rental-tenant-grid-identity,
  .rental-tenant-grid-organization,
  .rental-tenant-grid-contact,
  .rental-tenant-filter-grid {
    grid-template-columns: 1fr;
  }

  .rental-tenant-field-user,
  .rental-tenant-field-company,
  .rental-tenant-field-address,
  .rental-tenant-filter-search,
  .rental-tenant-filter-type,
  .rental-tenant-filter-status {
    grid-column: auto;
  }

  .rental-tenant-create-actions,
  .rental-tenant-card-actions {
    justify-content: stretch;
  }

  .rental-tenant-create-actions .btn,
  .rental-tenant-card-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .rental-tenant-filter-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .rental-tenant-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }

  .rental-tenant-head-meta {
    justify-items: start;
  }
}

.rental-applications-page .form-actions {
  position: static;
  z-index: auto;
  margin-top: 0;
  padding-top: 0;
  background: none;
}

.rental-application-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-application-form-sections {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.rental-application-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-application-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rental-application-grid,
.rental-application-filter-grid,
.rental-application-inline-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-application-grid-request {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-application-grid-request > .form-field {
  grid-column: span 3;
}

.rental-application-field-unit,
.rental-application-field-tenant,
.rental-application-field-organization {
  grid-column: span 4;
}

.rental-application-grid-timeline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-application-grid-purpose {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: stretch;
}

.rental-application-field-purpose {
  align-content: start;
}

.rental-applications-page textarea {
  min-height: 88px;
}

.rental-applications-page .upload-dropzone {
  min-height: 88px;
}

.rental-application-create-actions {
  display: grid;
  justify-self: end;
  width: min(240px, 100%);
}

.rental-application-create-actions .btn {
  width: 100%;
  min-height: 44px;
}

.rental-application-filter-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-application-filter-search {
  grid-column: span 8;
}

.rental-application-filter-status {
  grid-column: span 4;
}

.rental-application-filter-actions {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.rental-application-filter-actions .btn {
  width: auto;
  min-width: 112px;
  min-height: 40px;
  padding-inline: var(--space-3);
}

.rental-application-card {
  align-items: stretch;
}

.rental-application-card.is-info {
  border-left: 5px solid var(--color-info);
}

.rental-application-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-application-head-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 0;
}

.rental-application-context {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-application-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
  min-width: 0;
}

.rental-application-detail-panel {
  align-content: start;
}

.rental-application-file-list,
.rental-application-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.rental-application-file-list {
  justify-content: flex-start;
}

.rental-application-card-actions {
  justify-content: flex-end;
}

.rental-application-mini-empty {
  padding: var(--space-3);
}

.rental-application-log-list {
  gap: var(--space-2);
}

.rental-application-log-card {
  gap: 6px;
  padding: var(--space-3);
}

.rental-application-upload-grid {
  grid-template-columns: minmax(180px, .75fr) minmax(0, 1fr) minmax(180px, auto);
}

.rental-application-review-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-application-review-note {
  grid-column: span 2;
}

.rental-application-inline-actions {
  align-self: end;
}

.rental-application-inline-actions .btn {
  min-width: 180px;
  min-height: 44px;
}

.rental-application-empty {
  display: grid;
  gap: 6px;
}

.rental-committee-page .form-actions {
  position: static;
  z-index: auto;
  margin-top: 0;
  padding-top: 0;
  background: none;
}

.rental-committee-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-committee-form-sections,
.rental-committee-detail-grid {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.rental-committee-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-committee-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rental-committee-grid,
.rental-committee-filter-grid,
.rental-committee-inline-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-committee-grid-linked {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-committee-field-application,
.rental-committee-field-contract {
  grid-column: span 6;
}

.rental-committee-field-submission {
  grid-column: span 3;
}

.rental-committee-field-committee {
  grid-column: span 6;
}

.rental-committee-field-status {
  grid-column: span 3;
}

.rental-committee-grid-schedule {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-committee-field-agenda,
.rental-committee-field-date {
  grid-column: span 3;
}

.rental-committee-field-subject {
  grid-column: span 6;
}

.rental-committee-field-summary {
  grid-column: 1 / -1;
}

.rental-committee-grid-linked .form-field,
.rental-committee-grid-schedule .form-field {
  align-content: start;
}

.rental-committee-create-actions {
  display: grid;
  justify-self: end;
  width: min(240px, 100%);
}

.rental-committee-create-actions .btn {
  width: 100%;
  min-height: 44px;
}

.rental-committee-filter-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-committee-filter-search {
  grid-column: span 8;
}

.rental-committee-filter-status {
  grid-column: span 4;
}

.rental-committee-filter-actions {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.rental-committee-filter-actions .btn {
  width: auto;
  min-width: 112px;
  min-height: 40px;
  padding-inline: var(--space-3);
}

.rental-committee-card {
  align-items: stretch;
}

.rental-committee-card.is-info {
  border-left: 5px solid var(--color-info);
}

.rental-committee-card.is-warning {
  border-left: 5px solid var(--color-warning);
}

.rental-committee-card.is-success {
  border-left: 5px solid var(--color-success);
}

.rental-committee-card.is-danger {
  border-left: 5px solid var(--color-danger);
}

.rental-committee-card.is-neutral {
  border-left: 5px solid var(--border-muted);
}

.rental-committee-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-committee-head-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 0;
}

.rental-committee-context {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-committee-summary {
  align-content: start;
}

.rental-committee-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.rental-committee-detail-panel {
  align-content: start;
}

.rental-committee-resolution-list {
  display: grid;
  gap: var(--space-2);
}

.rental-committee-resolution-card {
  display: grid;
  gap: 6px;
  padding: var(--space-3);
}

.rental-committee-resolution-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.rental-committee-permit-link {
  width: fit-content;
}

.rental-committee-mini-empty {
  padding: var(--space-3);
}

.rental-committee-inline-form {
  margin: 0;
}

.rental-committee-status-grid {
  grid-template-columns: minmax(0, 1fr) auto;
}

.rental-committee-resolution-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-committee-field-text,
.rental-committee-upload-field {
  grid-column: 1 / -1;
}

.rental-committee-inline-actions {
  align-self: end;
}

.rental-committee-inline-actions .btn {
  min-width: 180px;
  min-height: 44px;
}

.rental-committee-upload-field .upload-dropzone {
  min-height: 88px;
}

.rental-committee-empty {
  display: grid;
  gap: 6px;
}

@media (max-width: 1080px) {
  .rental-committee-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-committee-grid-linked,
  .rental-committee-grid-schedule,
  .rental-committee-filter-grid,
  .rental-committee-context,
  .rental-committee-detail-grid,
  .rental-committee-resolution-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-committee-field-application,
  .rental-committee-field-contract,
  .rental-committee-field-submission,
  .rental-committee-field-committee,
  .rental-committee-field-status,
  .rental-committee-field-agenda,
  .rental-committee-field-date,
  .rental-committee-field-subject,
  .rental-committee-field-summary,
  .rental-committee-field-text,
  .rental-committee-upload-field,
  .rental-committee-inline-actions {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .rental-committee-overview,
  .rental-committee-card-head,
  .rental-committee-grid-linked,
  .rental-committee-grid-schedule,
  .rental-committee-filter-grid,
  .rental-committee-context,
  .rental-committee-detail-grid,
  .rental-committee-resolution-grid {
    grid-template-columns: 1fr;
  }

  .rental-committee-filter-search,
  .rental-committee-filter-status {
    grid-column: auto;
  }

  .rental-committee-filter-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .rental-committee-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }

  .rental-committee-head-meta {
    justify-items: start;
  }

  .rental-committee-create-actions,
  .rental-committee-inline-actions {
    width: 100%;
    justify-content: stretch;
  }

  .rental-committee-create-actions .btn,
  .rental-committee-inline-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 1080px) {
  .rental-application-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-application-grid-request,
  .rental-application-grid-timeline,
  .rental-application-grid-purpose,
  .rental-application-context,
  .rental-application-detail-grid,
  .rental-application-upload-grid,
  .rental-application-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-application-grid-request > .form-field,
  .rental-application-field-unit,
  .rental-application-field-tenant,
  .rental-application-field-organization,
  .rental-application-upload-field,
  .rental-application-review-note,
  .rental-application-inline-actions {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .rental-application-overview,
  .rental-application-grid-request,
  .rental-application-grid-timeline,
  .rental-application-grid-purpose,
  .rental-application-filter-grid,
  .rental-application-card-head,
  .rental-application-context,
  .rental-application-detail-grid,
  .rental-application-upload-grid,
  .rental-application-review-grid {
    grid-template-columns: 1fr;
  }

  .rental-application-filter-search,
  .rental-application-filter-status {
    grid-column: auto;
  }

  .rental-application-filter-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .rental-application-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }

  .rental-application-head-meta {
    justify-items: start;
  }

  .rental-application-card-actions,
  .rental-application-card-actions .form-actions,
  .rental-application-inline-actions {
    display: grid;
    justify-content: stretch;
    width: 100%;
  }

  .rental-application-card-actions .btn,
  .rental-application-inline-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

.rental-invoices-page .form-actions {
  position: static;
  z-index: auto;
}

.rental-invoice-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-invoice-ops-grid,
.rental-invoice-form-sections {
  display: grid;
  gap: var(--space-3);
}

.rental-invoice-ops-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.rental-invoice-period-form {
  align-content: end;
  grid-template-columns: minmax(180px, 1fr) auto;
}

.rental-invoice-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-invoice-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.rental-invoice-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
}

.rental-invoice-grid-billing {
  grid-template-columns: minmax(260px, 1.6fr) minmax(150px, .8fr) minmax(150px, .8fr);
}

.rental-invoice-grid-amounts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-invoice-field-contract,
.rental-invoice-field-invoice,
.rental-invoice-upload-field {
  grid-column: span 2;
}

.rental-invoice-create-actions,
.rental-invoice-payment-actions {
  justify-content: flex-end;
}

.rental-invoice-create-actions .btn,
.rental-invoice-payment-actions .btn {
  min-width: 180px;
  min-height: 44px;
}

.rental-invoice-card-list {
  display: grid;
  gap: var(--space-3);
}

.rental-invoice-card,
.rental-invoice-payment-card {
  align-items: stretch;
}

.rental-invoice-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-invoice-head-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 150px;
}

.rental-invoice-context,
.rental-invoice-payment-context {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rental-invoice-grid-payment {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-invoice-upload-field .upload-dropzone {
  min-height: 88px;
}

.rental-invoice-payment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.rental-invoice-verify-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-3);
}

.rental-invoice-empty {
  display: grid;
  gap: 6px;
}

@media (max-width: 1080px) {
  .rental-invoice-overview,
  .rental-invoice-ops-grid,
  .rental-invoice-grid-billing,
  .rental-invoice-context,
  .rental-invoice-payment-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-invoice-grid-amounts,
  .rental-invoice-grid-payment {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .rental-invoice-overview,
  .rental-invoice-ops-grid,
  .rental-invoice-period-form,
  .rental-invoice-grid-billing,
  .rental-invoice-grid-amounts,
  .rental-invoice-grid-payment,
  .rental-invoice-card-head,
  .rental-invoice-context,
  .rental-invoice-payment-context {
    grid-template-columns: 1fr;
  }

  .rental-invoice-field-contract,
  .rental-invoice-field-invoice,
  .rental-invoice-upload-field {
    grid-column: auto;
  }

  .rental-invoice-filter-actions,
  .rental-invoice-create-actions,
  .rental-invoice-payment-actions,
  .rental-invoice-verify-actions,
  .rental-invoice-payment-summary {
    justify-content: flex-end;
  }

  .rental-invoice-head-meta {
    justify-items: start;
    min-width: 0;
  }
}

.rental-tickets-page .form-actions {
  position: static;
  z-index: auto;
}

.rental-ticket-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-ticket-form-sections,
.rental-ticket-card-list {
  display: grid;
  gap: var(--space-3);
}

.rental-ticket-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-ticket-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.rental-ticket-grid,
.rental-ticket-filter-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
}

.rental-ticket-grid-context {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-ticket-field-unit {
  grid-column: span 4;
}

.rental-ticket-field-category {
  grid-column: span 3;
}

.rental-ticket-field-area {
  grid-column: span 5;
}

.rental-ticket-field-title {
  grid-column: span 5;
}

.rental-ticket-field-priority,
.rental-ticket-field-impact {
  grid-column: span 2;
}

.rental-ticket-field-safety {
  grid-column: span 3;
  align-self: end;
}

.rental-ticket-field-safety .toggle-switch {
  min-height: 46px;
  align-items: center;
}

.rental-ticket-grid-contact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-ticket-field-access {
  grid-column: span 4;
}

.rental-ticket-field-detail {
  grid-column: span 7;
  align-content: start;
}

.rental-ticket-upload-field {
  grid-column: span 5;
}

.rental-ticket-upload-field .upload-dropzone {
  min-height: 112px;
}

.rental-tickets-page textarea {
  min-height: 112px;
}

.rental-ticket-create-actions {
  align-self: auto;
  justify-content: flex-end;
  padding-top: 0;
}

.rental-ticket-create-actions .btn {
  min-width: 180px;
  min-height: 44px;
}

.rental-ticket-filter-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-ticket-filter-search {
  grid-column: span 4;
}

.rental-ticket-filter-status {
  grid-column: span 2;
}

.rental-ticket-filter-category,
.rental-ticket-filter-priority {
  grid-column: span 3;
}

.rental-ticket-filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 0;
}

.rental-ticket-filter-actions .btn {
  width: auto;
  min-width: 108px;
  min-height: 36px;
}

.rental-ticket-card {
  align-items: stretch;
}

.rental-ticket-card.is-warning {
  border-left: 5px solid var(--color-warning);
}

.rental-ticket-card.is-success {
  border-left: 5px solid var(--color-success);
}

.rental-ticket-card.is-danger {
  border-left: 5px solid var(--color-danger);
}

.rental-ticket-card.is-neutral {
  border-left: 5px solid var(--border-muted);
}

.rental-ticket-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-ticket-head-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 150px;
}

.rental-ticket-context {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-ticket-detail-box {
  align-content: start;
}

.rental-ticket-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rental-ticket-file-box {
  display: grid;
  gap: var(--space-2);
}

.rental-ticket-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.rental-ticket-update-form {
  margin: 0;
}

.rental-ticket-update-grid {
  grid-template-columns: minmax(160px, .75fr) minmax(0, 1fr) auto;
}

.rental-ticket-update-actions {
  justify-content: flex-end;
}

.rental-ticket-update-actions .btn {
  min-width: 140px;
  min-height: 40px;
}

.rental-ticket-empty {
  display: grid;
  gap: 6px;
}

@media (max-width: 1080px) {
  .rental-ticket-overview,
  .rental-ticket-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-ticket-grid-context,
  .rental-ticket-grid-contact,
  .rental-ticket-filter-grid,
  .rental-ticket-update-grid,
  .rental-ticket-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-ticket-field-unit,
  .rental-ticket-field-category,
  .rental-ticket-field-title,
  .rental-ticket-field-area,
  .rental-ticket-field-priority,
  .rental-ticket-field-impact,
  .rental-ticket-field-safety,
  .rental-ticket-field-access,
  .rental-ticket-field-detail,
  .rental-ticket-upload-field,
  .rental-ticket-filter-search,
  .rental-ticket-filter-status,
  .rental-ticket-filter-category,
  .rental-ticket-filter-priority,
  .rental-ticket-create-actions,
  .rental-ticket-update-actions {
    grid-column: auto;
  }

  .rental-ticket-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .rental-ticket-overview,
  .rental-ticket-grid-context,
  .rental-ticket-grid-contact,
  .rental-ticket-filter-grid,
  .rental-ticket-card-head,
  .rental-ticket-context,
  .rental-ticket-update-grid,
  .rental-ticket-info-grid {
    grid-template-columns: 1fr;
  }

  .rental-ticket-filter-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .rental-ticket-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }

  .rental-ticket-head-meta {
    justify-items: start;
    min-width: 0;
  }

  .rental-ticket-create-actions,
  .rental-ticket-update-actions {
    width: 100%;
    justify-content: stretch;
  }

  .rental-ticket-file-list {
    display: grid;
  }

  .rental-ticket-create-actions .btn,
  .rental-ticket-update-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

.rental-contracts-page .form-actions {
  position: static;
  z-index: auto;
}

.rental-contract-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-contract-create-form,
.rental-contract-create-sections {
  display: grid;
  gap: var(--space-3);
}

.rental-contract-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-contract-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rental-contract-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-contract-create-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-contract-create-grid .is-wide {
  grid-column: span 2;
}

.rental-contract-grid-identity {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-contract-field-number,
.rental-contract-field-type,
.rental-contract-field-status {
  grid-column: span 4;
}

.rental-contract-field-application,
.rental-contract-field-unit,
.rental-contract-field-tenant,
.rental-contract-field-renewal {
  grid-column: span 6;
}

.rental-contract-grid-period {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-contract-grid-finance {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rental-contract-grid-terms {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-contract-grid-terms > .form-field {
  grid-column: span 3;
}

.rental-contract-esign-field .toggle-switch {
  min-height: 46px;
  align-items: center;
}

.rental-contract-field-utility,
.rental-contract-field-special {
  grid-column: span 6;
  align-content: start;
}

.rental-contract-field-file {
  grid-column: 1 / -1;
}

.rental-contracts-page textarea {
  min-height: 112px;
}

.rental-contract-upload-field .upload-dropzone {
  min-height: 112px;
}

.rental-contract-create-actions {
  justify-content: flex-end;
  padding-top: 0;
}

.rental-contract-filter-grid {
  grid-template-columns: minmax(260px, 1.6fr) minmax(180px, .9fr) minmax(170px, .8fr) auto;
}

.rental-contract-filter-actions {
  align-self: end;
  justify-content: flex-end;
}

.rental-contract-filter-actions .btn {
  min-width: 112px;
  min-height: 40px;
}

.rental-contract-card-list {
  gap: var(--space-4);
}

.rental-contract-card {
  display: grid;
  gap: var(--space-4);
}

.rental-contract-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-contract-head-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 170px;
}

.rental-contract-context {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-contract-subform {
  display: grid;
  gap: var(--space-3);
}

.rental-contract-subform .filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-contract-subform .filter-grid .is-wide {
  grid-column: span 2;
}

.rental-contract-subform .form-actions {
  align-self: end;
}

.rental-contract-subform .form-actions .btn,
.rental-contract-create-form .form-actions .btn {
  min-width: 150px;
  min-height: 42px;
}

.rental-contract-empty {
  display: grid;
  gap: 6px;
}

@media (max-width: 1080px) {
  .rental-contract-overview,
  .rental-contract-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-contract-grid-identity,
  .rental-contract-grid-period,
  .rental-contract-grid-finance,
  .rental-contract-grid-terms,
  .rental-contract-create-grid,
  .rental-contract-subform .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-contract-field-number,
  .rental-contract-field-type,
  .rental-contract-field-status,
  .rental-contract-field-application,
  .rental-contract-field-unit,
  .rental-contract-field-tenant,
  .rental-contract-field-renewal,
  .rental-contract-grid-terms > .form-field,
  .rental-contract-field-utility,
  .rental-contract-field-special,
  .rental-contract-field-file {
    grid-column: auto;
  }

  .rental-contract-field-file {
    grid-column: 1 / -1;
  }

  .rental-contract-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-contract-filter-search,
  .rental-contract-filter-actions {
    grid-column: 1 / -1;
  }

  .rental-contract-filter-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 680px) {
  .rental-contract-overview,
  .rental-contract-grid-identity,
  .rental-contract-grid-period,
  .rental-contract-grid-finance,
  .rental-contract-grid-terms,
  .rental-contract-create-grid,
  .rental-contract-filter-grid,
  .rental-contract-card-head,
  .rental-contract-context,
  .rental-contract-subform .filter-grid {
    grid-template-columns: 1fr;
  }

  .rental-contract-field-number,
  .rental-contract-field-type,
  .rental-contract-field-status,
  .rental-contract-field-application,
  .rental-contract-field-unit,
  .rental-contract-field-tenant,
  .rental-contract-field-renewal,
  .rental-contract-grid-terms > .form-field,
  .rental-contract-field-utility,
  .rental-contract-field-special,
  .rental-contract-field-file,
  .rental-contract-create-grid .is-wide,
  .rental-contract-subform .filter-grid .is-wide,
  .rental-contract-filter-search,
  .rental-contract-filter-actions {
    grid-column: auto;
  }

  .rental-contract-filter-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

  .rental-contract-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }

  .rental-contract-head-meta {
    justify-items: start;
    min-width: 0;
  }

  .rental-contract-subform .form-actions,
  .rental-contract-create-form .form-actions {
    width: 100%;
    justify-content: stretch;
  }

  .rental-contract-subform .form-actions .btn,
  .rental-contract-create-form .form-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

.rental-inspections-page .form-actions {
  position: static;
  z-index: auto;
}

.rental-inspection-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-inspection-form-sections,
.rental-inspection-card-list {
  display: grid;
  gap: var(--space-3);
}

.rental-inspection-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-inspection-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rental-inspection-grid,
.rental-inspection-filter-grid,
.rental-inspection-update-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-inspection-filter-grid {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
}

.rental-inspection-filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 0;
}

.rental-inspection-filter-actions .btn {
  width: auto;
  min-width: 108px;
  min-height: 36px;
}

.rental-inspection-grid-context {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rental-inspection-field-no {
  grid-column: span 2;
}

.rental-inspection-field-unit {
  grid-column: span 4;
}

.rental-inspection-field-tenant,
.rental-inspection-field-contract {
  grid-column: span 3;
}

.rental-inspection-field-date,
.rental-inspection-field-type,
.rental-inspection-field-result {
  grid-column: span 4;
}

.rental-inspection-grid-result {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rental-inspection-field-summary {
  grid-column: 1 / -1;
  align-content: start;
}

.rental-inspection-upload-field {
  grid-column: auto;
}

.rental-inspections-page textarea {
  min-height: 112px;
}

.rental-inspection-upload-field .upload-dropzone {
  min-height: 112px;
}

.rental-inspection-create-actions,
.rental-inspection-subform-actions,
.rental-inspection-update-actions {
  justify-content: flex-end;
  padding-top: 0;
}

.rental-inspection-create-actions .btn,
.rental-inspection-subform-actions .btn,
.rental-inspection-update-actions .btn {
  min-width: 150px;
  min-height: 42px;
}

.rental-inspection-entry-grid {
  align-items: start;
  grid-template-columns: 1fr;
}

.rental-inspection-subform {
  display: grid;
  gap: var(--space-3);
}

.rental-inspection-grid-finding,
.rental-inspection-grid-complaint {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rental-inspection-field-wide {
  grid-column: 1 / -1;
}

.rental-inspection-card {
  border-left: 5px solid var(--border-muted);
}

.rental-inspection-card.is-success {
  border-left-color: var(--color-success);
}

.rental-inspection-card.is-info {
  border-left-color: var(--color-info);
}

.rental-inspection-card.is-warning,
.rental-finding-card.is-warning {
  border-left-color: var(--color-warning);
}

.rental-inspection-card.is-danger,
.rental-finding-card.is-danger,
.rental-complaint-card.is-danger {
  border-left-color: var(--color-danger);
}

.rental-finding-card,
.rental-complaint-card {
  border-left: 5px solid var(--border-muted);
}

.rental-complaint-card.is-success {
  border-left-color: var(--color-success);
}

.rental-complaint-card.is-info {
  border-left-color: var(--color-info);
}

.rental-inspection-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-inspection-card-head h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rental-inspection-head-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 150px;
}

.rental-inspection-context {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.rental-inspection-context span {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rental-inspection-context strong {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

.rental-inspection-detail-box {
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.rental-inspection-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.rental-inspection-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
}

.rental-inspection-update-form {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.rental-inspection-update-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-inspection-update-grid-complaint {
  grid-template-columns: minmax(180px, .5fr) minmax(0, 1fr);
}

.rental-inspection-empty {
  display: grid;
  gap: 6px;
}

@media (max-width: 1080px) {
  .rental-inspection-overview,
  .rental-inspection-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-inspection-grid-context,
  .rental-inspection-grid-result,
  .rental-inspection-filter-grid,
  .rental-inspection-update-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-inspection-field-no,
  .rental-inspection-field-unit,
  .rental-inspection-field-tenant,
  .rental-inspection-field-contract,
  .rental-inspection-field-date,
  .rental-inspection-field-type,
  .rental-inspection-field-result,
  .rental-inspection-field-summary,
  .rental-inspection-upload-field {
    grid-column: auto;
  }

  .rental-inspection-filter-actions,
  .rental-inspection-update-grid-complaint .rental-inspection-field-wide {
    grid-column: 1 / -1;
  }

  .rental-inspection-grid-result .rental-inspection-field-summary {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .rental-inspection-overview,
  .rental-inspection-grid-context,
  .rental-inspection-grid-result,
  .rental-inspection-grid-finding,
  .rental-inspection-grid-complaint,
  .rental-inspection-filter-grid,
  .rental-inspection-card-head,
  .rental-inspection-context,
  .rental-inspection-update-grid,
  .rental-inspection-update-grid-complaint {
    grid-template-columns: 1fr;
  }

  .rental-inspection-filter-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .rental-inspection-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }

  .rental-inspection-head-meta {
    justify-items: start;
    min-width: 0;
  }

  .rental-inspection-create-actions,
  .rental-inspection-subform-actions,
  .rental-inspection-update-actions {
    width: 100%;
    justify-content: stretch;
  }

  .rental-inspection-create-actions .btn,
  .rental-inspection-subform-actions .btn,
  .rental-inspection-update-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .rental-inspection-file-list {
    justify-content: flex-start;
  }
}

.rental-assets-page .form-actions {
  position: static;
  z-index: auto;
}

.rental-asset-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-asset-entry-grid,
.rental-asset-form-sections,
.rental-asset-card-list,
.rental-asset-form,
.rental-asset-update-form {
  display: grid;
  gap: var(--space-3);
}

.rental-asset-entry-grid {
  grid-template-columns: 1fr;
}

.rental-asset-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-asset-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rental-asset-grid,
.rental-asset-filter-grid,
.rental-asset-update-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-asset-filter-grid {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
}

.rental-asset-filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 0;
}

.rental-asset-filter-actions .btn {
  width: auto;
  min-width: 108px;
  min-height: 36px;
}

.rental-asset-grid-identity,
.rental-asset-grid-handover {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-asset-field-unit,
.rental-asset-field-name {
  grid-column: span 2;
}

.rental-asset-grid-files {
  grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr);
}

.rental-asset-grid-handover-detail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rental-asset-grid-handover-detail .rental-asset-upload-field {
  grid-column: 1 / -1;
}

.rental-asset-field-note,
.rental-asset-field-summary {
  align-content: start;
}

.rental-assets-page textarea {
  min-height: 112px;
}

.rental-asset-upload-field .upload-dropzone {
  min-height: 112px;
}

.rental-asset-create-actions,
.rental-asset-update-actions {
  justify-content: flex-end;
  padding-top: 0;
}

.rental-asset-create-actions .btn,
.rental-asset-update-actions .btn {
  min-width: 150px;
  min-height: 42px;
}

.rental-asset-card,
.rental-handover-card {
  border-left: 5px solid var(--border-muted);
}

.rental-asset-card.is-success,
.rental-handover-card.is-success {
  border-left-color: var(--color-success);
}

.rental-asset-card.is-info,
.rental-handover-card.is-info {
  border-left-color: var(--color-info);
}

.rental-asset-card.is-warning,
.rental-handover-card.is-warning {
  border-left-color: var(--color-warning);
}

.rental-asset-card.is-danger,
.rental-handover-card.is-danger {
  border-left-color: var(--color-danger);
}

.rental-asset-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-asset-card-head h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rental-asset-head-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 150px;
}

.rental-asset-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.rental-asset-context span {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rental-asset-context strong {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

.rental-asset-detail-box {
  display: grid;
  gap: 6px;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.rental-asset-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.rental-asset-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.rental-asset-update-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rental-asset-update-grid .rental-asset-field-note {
  grid-column: span 2;
}

.rental-asset-update-grid .rental-asset-upload-field {
  grid-column: span 1;
}

.rental-asset-empty {
  display: grid;
  gap: 6px;
}

@media (max-width: 1080px) {
  .rental-asset-overview,
  .rental-asset-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-asset-grid-identity,
  .rental-asset-grid-handover,
  .rental-asset-grid-handover-detail,
  .rental-asset-filter-grid,
  .rental-asset-update-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-asset-grid-files {
    grid-template-columns: 1fr;
  }

  .rental-asset-field-unit,
  .rental-asset-field-name,
  .rental-asset-update-grid .rental-asset-field-note,
  .rental-asset-update-grid .rental-asset-upload-field,
  .rental-asset-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .rental-asset-overview,
  .rental-asset-grid-identity,
  .rental-asset-grid-handover,
  .rental-asset-grid-handover-detail,
  .rental-asset-filter-grid,
  .rental-asset-card-head,
  .rental-asset-context,
  .rental-asset-update-grid {
    grid-template-columns: 1fr;
  }

  .rental-asset-head-meta {
    justify-items: start;
    min-width: 0;
  }

  .rental-asset-filter-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

  .rental-asset-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }

  .rental-asset-create-actions,
  .rental-asset-update-actions {
    width: 100%;
    justify-content: stretch;
  }

  .rental-asset-create-actions .btn,
  .rental-asset-update-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .rental-asset-card-footer {
    align-items: stretch;
  }

  .rental-asset-file-list {
    width: 100%;
  }
}

.rental-meters-page .form-actions {
  position: static;
  z-index: auto;
}

.rental-meter-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-meter-create-form,
.rental-meter-form-sections,
.rental-meter-card-list {
  display: grid;
  gap: var(--space-3);
}

.rental-meter-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-meter-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rental-meter-grid,
.rental-meter-filter-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-meter-filter-grid {
  grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr);
}

.rental-meter-filter-actions {
  justify-content: flex-end;
  padding-top: 0;
}

.rental-meter-filter-actions .btn {
  width: auto;
  min-width: 112px;
  min-height: 36px;
}

.rental-meter-grid-context {
  grid-template-columns: minmax(260px, 1fr) minmax(180px, .45fr);
}

.rental-meter-grid-usage {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rental-meter-create-actions {
  justify-content: flex-end;
  padding-top: 0;
}

.rental-meter-create-actions .btn {
  min-width: 150px;
  min-height: 42px;
}

.rental-meter-card {
  border-left: 5px solid var(--color-info);
}

.rental-meter-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-meter-card-head h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rental-meter-context,
.rental-meter-total-grid {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.rental-meter-context {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-meter-total-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rental-meter-context span,
.rental-meter-total-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rental-meter-context strong,
.rental-meter-total-grid strong {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

.rental-meter-empty {
  display: grid;
  gap: 6px;
}

@media (max-width: 1080px) {
  .rental-meter-overview,
  .rental-meter-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-meter-grid-context,
  .rental-meter-grid-usage,
  .rental-meter-total-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .rental-meter-overview,
  .rental-meter-filter-grid,
  .rental-meter-grid-context,
  .rental-meter-grid-usage,
  .rental-meter-card-head,
  .rental-meter-context,
  .rental-meter-total-grid {
    grid-template-columns: 1fr;
  }

  .rental-meter-filter-actions {
    justify-content: flex-end;
  }

  .rental-meter-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }

  .rental-meter-create-actions {
    width: 100%;
    justify-content: stretch;
  }

  .rental-meter-create-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

.rental-report-page .metric-value,
.rental-report-page .section-title,
.rental-report-page .action-title,
.rental-report-page .action-sub {
  overflow-wrap: anywhere;
}

.rental-report-overview,
.rental-report-summary-grid,
.rental-report-aging-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-report-benchmark-grid,
.rental-report-sla-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rental-report-filter-grid {
  grid-template-columns: minmax(170px, .42fr) minmax(260px, 1fr) minmax(150px, .38fr);
}

.rental-report-filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 0;
}

.rental-report-filter-actions .btn {
  width: auto;
  min-width: 128px;
  min-height: 36px;
}

.rental-report-export-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.rental-report-export-actions .action-card {
  min-height: 92px;
  align-content: center;
}

.rental-report-page .table-wrap {
  margin-top: var(--space-3);
}

.rental-report-page .rental-list-grid {
  margin-top: var(--space-3);
}

@media (max-width: 1080px) {
  .rental-report-overview,
  .rental-report-summary-grid,
  .rental-report-benchmark-grid,
  .rental-report-sla-grid,
  .rental-report-aging-grid,
  .rental-report-export-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-report-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .rental-report-overview,
  .rental-report-summary-grid,
  .rental-report-benchmark-grid,
  .rental-report-sla-grid,
  .rental-report-aging-grid,
  .rental-report-export-actions,
  .rental-report-filter-grid {
    grid-template-columns: 1fr;
  }

  .rental-report-filter-actions {
    justify-content: flex-end;
  }

  .rental-report-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }

  .rental-report-export-actions .action-card {
    min-height: 84px;
  }
}

.rental-action-plan-page .metric-value,
.rental-action-plan-page .section-title,
.rental-action-plan-page .action-title,
.rental-action-plan-page .action-sub,
.rental-action-plan-page h3 {
  overflow-wrap: anywhere;
}

.rental-action-plan-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-action-plan-benchmark-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rental-action-plan-filter-grid {
  grid-template-columns: minmax(170px, .44fr) minmax(170px, .44fr);
}

.rental-action-plan-filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 0;
}

.rental-action-plan-filter-actions .btn {
  width: auto;
  min-width: 128px;
  min-height: 36px;
}

.rental-action-plan-export-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.rental-action-plan-export-actions .action-card {
  min-height: 92px;
  align-content: center;
}

.rental-action-plan-card-list,
.rental-action-plan-risk-list,
.rental-action-plan-create-form,
.rental-action-plan-form-sections {
  display: grid;
  gap: var(--space-3);
}

.rental-action-plan-card,
.rental-action-plan-risk-card {
  border-left: 5px solid var(--border-muted);
}

.rental-action-plan-card.is-success,
.rental-action-plan-risk-card.is-success {
  border-left-color: var(--color-success);
}

.rental-action-plan-card.is-warning,
.rental-action-plan-risk-card.is-warning {
  border-left-color: var(--color-warning);
}

.rental-action-plan-card.is-danger,
.rental-action-plan-risk-card.is-danger {
  border-left-color: var(--color-danger);
}

.rental-action-plan-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-action-plan-card-head h3 {
  margin: 6px 0 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

.rental-action-plan-head-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.rental-action-plan-context,
.rental-action-plan-risk-context {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.rental-action-plan-context {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-action-plan-risk-context {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-action-plan-context span,
.rental-action-plan-risk-context span {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rental-action-plan-context strong,
.rental-action-plan-risk-context strong {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

.rental-action-plan-context-wide {
  grid-column: 1 / -1;
}

.rental-action-plan-target-form,
.rental-action-plan-status-form {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.rental-action-plan-target-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

.rental-action-plan-status-form {
  grid-template-columns: minmax(220px, .5fr) auto;
}

.rental-action-plan-target-actions,
.rental-action-plan-status-actions,
.rental-action-plan-create-actions {
  justify-content: flex-end;
  padding-top: 0;
}

.rental-action-plan-target-actions .btn,
.rental-action-plan-status-actions .btn,
.rental-action-plan-create-actions .btn {
  min-width: 132px;
  min-height: 40px;
}

.rental-action-plan-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-action-plan-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rental-action-plan-create-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-action-plan-create-grid-main {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-action-plan-create-grid-owner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rental-action-plan-field-title {
  grid-column: span 2;
}

.rental-action-plan-field-wide {
  grid-column: 1 / -1;
}

.rental-action-plan-page textarea {
  min-height: 112px;
}

.rental-action-plan-page .table-wrap {
  margin-top: var(--space-3);
}

@media (max-width: 1080px) {
  .rental-action-plan-overview,
  .rental-action-plan-benchmark-grid,
  .rental-action-plan-export-actions,
  .rental-action-plan-context,
  .rental-action-plan-risk-context,
  .rental-action-plan-create-grid-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-action-plan-filter-grid,
  .rental-action-plan-target-form,
  .rental-action-plan-status-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-action-plan-target-actions,
  .rental-action-plan-status-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .rental-action-plan-overview,
  .rental-action-plan-benchmark-grid,
  .rental-action-plan-export-actions,
  .rental-action-plan-filter-grid,
  .rental-action-plan-card-head,
  .rental-action-plan-context,
  .rental-action-plan-risk-context,
  .rental-action-plan-target-form,
  .rental-action-plan-status-form,
  .rental-action-plan-create-grid-main,
  .rental-action-plan-create-grid-owner {
    grid-template-columns: 1fr;
  }

  .rental-action-plan-head-meta {
    justify-content: flex-start;
  }

  .rental-action-plan-field-title,
  .rental-action-plan-field-wide,
  .rental-action-plan-target-actions,
  .rental-action-plan-status-actions {
    grid-column: auto;
  }

  .rental-action-plan-filter-actions {
    justify-content: flex-end;
  }

  .rental-action-plan-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }

  .rental-action-plan-target-actions,
  .rental-action-plan-status-actions,
  .rental-action-plan-create-actions {
    width: 100%;
    justify-content: stretch;
  }

  .rental-action-plan-target-actions .btn,
  .rental-action-plan-status-actions .btn,
  .rental-action-plan-create-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

.rental-move-report-page .metric-value,
.rental-move-report-page .section-title,
.rental-move-report-page .action-title,
.rental-move-report-page .action-sub,
.rental-move-report-page h3 {
  overflow-wrap: anywhere;
}

.rental-move-report-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-move-report-filter-grid {
  grid-template-columns: minmax(170px, .42fr) minmax(170px, .42fr) minmax(210px, .58fr);
}

.rental-move-report-filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 0;
}

.rental-move-report-filter-actions .btn {
  width: auto;
  min-width: 128px;
  min-height: 36px;
}

.rental-move-report-export-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.rental-move-report-export-actions .action-card {
  min-height: 92px;
  align-content: center;
}

.rental-move-report-card-list {
  display: grid;
  gap: var(--space-3);
}

.rental-move-report-card {
  border-left: 5px solid var(--border-muted);
}

.rental-move-report-card.is-success {
  border-left-color: var(--color-success);
}

.rental-move-report-card.is-warning {
  border-left-color: var(--color-warning);
}

.rental-move-report-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-move-report-card-head h3 {
  margin: 6px 0 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

.rental-move-report-head-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.rental-move-report-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.rental-move-report-context span {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rental-move-report-context strong {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 1080px) {
  .rental-move-report-overview,
  .rental-move-report-export-actions,
  .rental-move-report-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rental-move-report-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .rental-move-report-overview,
  .rental-move-report-export-actions,
  .rental-move-report-filter-grid,
  .rental-move-report-card-head,
  .rental-move-report-context {
    grid-template-columns: 1fr;
  }

  .rental-move-report-head-meta {
    justify-content: flex-start;
  }

  .rental-move-report-filter-actions {
    justify-content: flex-end;
  }

  .rental-move-report-filter-actions .btn {
    width: auto;
    min-width: 104px;
  }
}

.rental-announcements-page .metric-value,
.rental-announcements-page .section-title,
.rental-announcements-page h3 {
  overflow-wrap: anywhere;
}

.rental-announcement-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rental-announcement-create-form,
.rental-announcement-form-sections,
.rental-announcement-card-list {
  display: grid;
  gap: var(--space-3);
}

.rental-announcement-form-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.rental-announcement-form-section legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.rental-announcement-create-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .36fr);
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.rental-announcement-field-content {
  grid-column: 1 / -1;
}

.rental-announcements-page textarea {
  min-height: 132px;
}

.rental-announcement-create-actions {
  justify-content: flex-end;
  padding-top: 0;
}

.rental-announcement-create-actions .btn {
  min-width: 150px;
  min-height: 42px;
}

.rental-announcement-card {
  border-left: 5px solid var(--border-muted);
}

.rental-announcement-card.is-success {
  border-left-color: var(--color-success);
}

.rental-announcement-card.is-warning {
  border-left-color: var(--color-warning);
}

.rental-announcement-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.rental-announcement-card-head h3 {
  margin: 6px 0 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

.rental-announcement-head-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.rental-announcement-content {
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.rental-announcement-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
}

.rental-announcement-context span {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rental-announcement-context strong {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 1080px) {
  .rental-announcement-overview,
  .rental-announcement-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .rental-announcement-overview,
  .rental-announcement-create-grid,
  .rental-announcement-card-head,
  .rental-announcement-context {
    grid-template-columns: 1fr;
  }

  .rental-announcement-head-meta {
    justify-content: flex-start;
  }

  .rental-announcement-create-actions {
    width: 100%;
    justify-content: stretch;
  }

  .rental-announcement-create-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

.badge-soft,
.pill-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}

.badge-soft.is-primary,
.pill-soft.is-primary { border-color: var(--color-primary-border); background: var(--color-primary-soft); color: var(--color-primary-ink); }
.badge-soft.is-info,
.pill-soft.is-info { border-color: var(--color-info-border); background: var(--color-info-soft); color: var(--color-info-ink); }
.badge-soft.is-success,
.pill-soft.is-success { border-color: var(--color-success-border); background: var(--color-success-soft); color: var(--color-success-ink); }
.badge-soft.is-warning,
.pill-soft.is-warning { border-color: var(--color-warning-border); background: var(--color-warning-soft); color: var(--color-warning-ink); }
.badge-soft.is-danger,
.pill-soft.is-danger { border-color: var(--color-danger-border); background: var(--color-danger-soft); color: var(--color-danger-ink); }
.badge-soft.is-purple,
.pill-soft.is-purple { border-color: #ddd6fe; background: #ede9fe; color: #6d28d9; }
.badge-soft.is-teal,
.pill-soft.is-teal { border-color: #99f6e4; background: #ccfbf1; color: #0f766e; }
.badge-soft.is-neutral,
.pill-soft.is-neutral { border-color: var(--border-muted); background: var(--surface-muted); color: var(--text-soft); }

.alert-box {
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--text-soft);
  background: var(--surface-muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.alert-box.is-success {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.alert-box.is-danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.alert-box.is-info {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.alert-box.is-warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.code-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 50px;
  height: 28px;
}

.toggle-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  display: block;
  width: 50px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: #cbd5e1;
  position: relative;
  transition: background .18s ease;
}

.toggle-track::after {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease;
}

.toggle-switch input:checked + .toggle-track {
  background: var(--color-success);
}

.toggle-switch input:checked + .toggle-track::after {
  transform: translateX(22px);
}

.toggle-switch input:disabled + .toggle-track {
  background: #94a3b8;
}

.sticky-action-bar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-panel);
}

.sticky-action-title {
  display: block;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 900;
}

.sticky-action-subtitle {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.details-group {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.details-toggle {
  list-style: none;
  cursor: pointer;
}

.details-toggle::-webkit-details-marker {
  display: none;
}

.details-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--surface-subtle);
}

.details-group[open] .details-head {
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.details-title {
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
}

.details-subtitle {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.details-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.details-caret {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-soft);
  transition: transform .18s ease;
}

.details-group[open] .details-caret {
  transform: rotate(180deg);
}

.details-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-subtle);
}

.record-card.is-primary {
  border-left: 5px solid var(--color-primary);
}

.record-card.is-success {
  border-left: 5px solid var(--color-success);
}

.record-card.is-warning {
  border-left: 5px solid var(--color-warning);
}

.record-card.is-danger {
  border-left: 5px solid var(--color-danger);
}

.record-card.is-purple {
  border-left: 5px solid #7c3aed;
}

.record-card.is-neutral {
  border-left: 5px solid #94a3b8;
}

.leadership-history-panel {
  gap: var(--space-5);
}

.leadership-status-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.leadership-current-panel {
  gap: var(--space-4);
}

.leadership-current-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.leadership-current-card {
  display: grid;
  grid-template-columns: minmax(175px, 0.72fr) minmax(255px, 1.18fr) minmax(250px, 1fr) auto;
  align-items: stretch;
  align-content: start;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.leadership-current-card.is-active {
  border-left-color: var(--color-success);
}

.leadership-current-card.is-vacant {
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.leadership-current-identity,
.leadership-current-status,
.leadership-current-route,
.leadership-current-command {
  min-width: 0;
  padding: var(--space-3);
}

.leadership-current-identity {
  display: grid;
  align-content: center;
  gap: var(--space-2);
}

.leadership-current-identity > .badge-soft {
  justify-self: start;
}

.leadership-current-workline {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.leadership-current-card h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.leadership-history-count,
.leadership-current-note {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.leadership-current-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  border-left: 1px solid var(--border-soft);
}

.leadership-current-status > div {
  min-width: 0;
}

.leadership-current-label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.leadership-current-status strong,
.leadership-current-route strong {
  display: block;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.leadership-current-people {
  display: grid;
  gap: var(--space-1);
}

.leadership-current-person {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.leadership-current-person strong {
  color: var(--text-strong);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.leadership-current-person > span:last-child {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.leadership-current-route {
  display: grid;
  align-content: center;
  border-left: 1px solid var(--border-soft);
}

.leadership-current-command {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 170px;
  border-left: 1px solid var(--border-soft);
}

.leadership-current-command .btn {
  width: auto;
  white-space: nowrap;
}

.leadership-current-actions {
  justify-content: flex-end;
}

.leadership-current-actions .btn {
  width: auto;
}

.leadership-create-modal.form-modal {
  width: min(900px, calc(100vw - 28px));
  max-height: calc(100dvh - (var(--space-4) * 2));
  overflow: auto;
}

.leadership-create-modal form {
  gap: 0;
}

.leadership-form-section {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-soft);
}

.leadership-form-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.leadership-form-section-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.leadership-form-section-head > div {
  min-width: 0;
}

.leadership-form-section-head h3 {
  margin: 1px 0 0;
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
}

.leadership-form-section-head p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.leadership-create-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.leadership-create-grid-assignment {
  grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 1.4fr) minmax(190px, 0.9fr);
}

.leadership-create-modal .form-actions {
  margin-top: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.leadership-filter-card {
  gap: var(--space-4);
}

.leadership-filter-card .activity-filter-head {
  padding: 0 0 var(--space-4);
}

.leadership-filter-card .section-title {
  font-size: 20px;
  line-height: 1.3;
}

.leadership-filter-card .section-subtitle {
  max-width: 760px;
  line-height: 1.6;
}

.leadership-filter-panel {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.leadership-filter-grid {
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.leadership-filter-grid .form-field {
  grid-column: span 2;
  min-width: 0;
}

.leadership-filter-grid .leadership-filter-search {
  grid-column: span 4;
}

.leadership-filter-grid input,
.leadership-filter-grid select {
  min-height: 46px;
}

.leadership-filter-actions {
  justify-content: flex-end !important;
  gap: var(--space-2);
  margin-inline: var(--space-1);
  padding: var(--space-4) var(--space-1) var(--space-1);
  border-top: 1px solid var(--border-soft);
}

.leadership-filter-actions .btn {
  min-width: 116px;
}

@media (max-width: 1120px) {
  .leadership-current-card {
    grid-template-columns: minmax(190px, 0.75fr) minmax(0, 1.25fr);
  }

  .leadership-current-route {
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }

  .leadership-current-command {
    max-width: none;
    border-top: 1px solid var(--border-soft);
  }

  .leadership-create-grid,
  .leadership-create-grid-assignment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leadership-create-person-field {
    grid-column: span 2;
  }

  .leadership-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leadership-filter-grid .form-field,
  .leadership-filter-grid .leadership-filter-search {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .leadership-current-identity,
  .leadership-current-status,
  .leadership-current-route,
  .leadership-current-command {
    padding: var(--space-3);
  }

  .leadership-current-status,
  .leadership-current-route,
  .leadership-current-command {
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }

  .leadership-current-command {
    justify-content: stretch;
  }

  .leadership-current-command .btn {
    width: 100%;
  }

  .leadership-create-grid,
  .leadership-create-grid-assignment {
    grid-template-columns: 1fr;
  }

  .leadership-create-person-field {
    grid-column: auto;
  }

  .leadership-filter-card .activity-filter-head {
    padding-bottom: var(--space-3);
  }

  .leadership-filter-grid {
    grid-template-columns: 1fr;
  }

  .leadership-filter-actions {
    justify-content: stretch !important;
  }
}

.leadership-group-list {
  display: grid;
  gap: var(--space-4);
}

.leadership-group {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.leadership-group-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.leadership-group-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.leadership-group-title h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.leadership-group-title p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.leadership-group-stats {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 0;
}

.leadership-record-list {
  display: grid;
  gap: var(--space-3);
}

.leadership-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  gap: var(--space-3);
  align-items: stretch;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-left-width: 5px;
  border-radius: var(--radius-md);
  background: var(--surface);
  min-width: 0;
}

.leadership-record.is-primary {
  border-left-color: var(--color-primary);
}

.leadership-record.is-purple {
  border-left-color: #7c3aed;
}

.leadership-record.is-neutral {
  border-left-color: #94a3b8;
}

.leadership-record-main {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.leadership-record-person {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-width: 0;
}

.leadership-record-status {
  margin-left: auto;
  white-space: nowrap;
}

.leadership-record-person > div {
  min-width: 0;
}

.leadership-record-person h4 {
  margin: 0;
  color: var(--text-strong);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.leadership-record-person p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.leadership-record-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (max-width: 1180px) {
  .leadership-status-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leadership-record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.leadership-record-actions {
  display: grid;
  gap: var(--space-3);
  align-content: space-between;
  padding-left: var(--space-3);
  border-left: 1px dashed var(--border-soft);
}

.leadership-date-stack {
  display: grid;
  gap: 4px;
}

.leadership-record-actions .btn {
  width: 100%;
  min-height: 42px;
}

.leadership-past-panel {
  gap: var(--space-4);
}

.leadership-past-list {
  display: grid;
  gap: var(--space-3);
}

.leadership-past-item {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-left-width: 5px;
  border-radius: var(--radius-md);
  background: var(--surface);
  min-width: 0;
}

.leadership-past-item.is-primary {
  border-left-color: var(--color-primary);
}

.leadership-past-item.is-purple {
  border-left-color: #7c3aed;
}

.leadership-past-item.is-neutral {
  border-left-color: #94a3b8;
}

.leadership-past-person {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}

.leadership-past-person h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.leadership-past-person p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.leadership-past-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--modal-backdrop-bg);
}

.form-modal {
  width: min(560px, calc(100vw - 28px));
  display: grid;
  gap: var(--space-3);
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.modal-title {
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
}

.modal-meta {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 13px;
}

.overview-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--surface) 58%, var(--surface-muted) 100%);
}

.overview-title {
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
}

.overview-note {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.overview-value {
  min-width: 180px;
  text-align: right;
}

.overview-number {
  color: var(--text-strong);
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
}

.content-box {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.content-title {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 900;
}

.content-text,
.content-list {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.7;
}

.content-list {
  margin: 0;
  padding-left: 20px;
}

.table-center th,
.table-center td {
  text-align: center;
}

.empty-state {
  border: 1px dashed var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-weight: 800;
  padding: var(--space-6);
  text-align: center;
}

.ui-state,
.loading-state,
.error-state {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  border: 1px dashed var(--ui-state-border);
  border-radius: var(--ui-card-radius);
  background: var(--ui-state-bg);
  color: var(--text-muted);
  padding: var(--space-6);
  text-align: center;
}

.ui-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  line-height: 1;
}

.ui-state strong,
.loading-state strong,
.error-state strong {
  color: var(--text-strong);
  font-size: var(--font-size-md);
  font-weight: 900;
}

.ui-state p,
.loading-state p,
.error-state p {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--font-size-sm);
  line-height: 1.65;
}

.loading-state {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
}

.error-state {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
}

.text-center-muted {
  color: var(--text-muted);
  text-align: center;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.table-wrap > table,
.table-wrap > .nice-table {
  border: 0;
  border-radius: 0;
  min-width: 640px;
}

@media (max-width: 760px) {
  .page-hero {
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }
  .activity-filter-head,
  .activity-export-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .activity-filter-head .btn,
  .activity-export-actions .btn-report {
    width: 100%;
  }
  .activity-export-actions {
    grid-template-columns: 1fr;
  }
  .page-title {
    font-size: 23px;
  }
  .page-hero-aside {
    min-width: 0;
  }
  .filter-grid .is-wide {
    grid-column: auto;
  }
  .form-actions,
  .action-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .form-actions > *,
  .action-row > * {
    width: 100%;
    justify-content: center;
  }
  .record-head,
  .record-detail-grid {
    grid-template-columns: 1fr;
  }
  .leadership-group-head,
  .leadership-record,
  .leadership-record-grid,
  .leadership-status-metrics,
  .leadership-current-grid,
  .leadership-current-card,
  .leadership-vacant-state,
  .leadership-create-grid,
  .leadership-past-item,
  .leadership-past-meta {
    grid-template-columns: 1fr;
  }
  .leadership-group-stats {
    justify-content: flex-start;
  }
  .leadership-record-person {
    display: grid;
    gap: var(--space-2);
  }
  .leadership-record-status {
    margin-left: 0;
    justify-self: start;
  }
  .leadership-record-actions {
    padding-left: 0;
    padding-top: var(--space-3);
    border-left: 0;
    border-top: 1px dashed var(--border-soft);
  }
  .record-actions {
    justify-content: flex-start;
  }
  .sticky-action-bar {
    position: static;
    grid-template-columns: 1fr;
  }
  .details-head {
    display: grid;
    grid-template-columns: 1fr;
  }
  .details-meta {
    justify-content: flex-start;
  }
  .overview-band {
    display: grid;
    grid-template-columns: 1fr;
  }
  .overview-value {
    min-width: 0;
    text-align: left;
  }
}

.dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  width: 220px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 50;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  white-space: nowrap;
}

.menu-popover {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.topbar-btn {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.topbar-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

.notif-btn { padding: 8px 12px; }
.profile-btn { padding: 8px 10px; }

.notif-dropdown {
  width: 360px;
  max-height: 360px;
  overflow: auto;
}

.notif-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.notif-item.unread {
  background: #f5f8ff;
}

.notif-title {
  font-size: 13px;
  color: var(--ink);
}

.notif-meta {
  font-size: 11px;
  color: var(--muted);
}

.notif-actions {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: #fafafa;
}

.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.pager a {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--ink);
}

.pager a.active {
  background: var(--accent-ghost);
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 960px) {
  .app-layout { grid-template-columns: 1fr; }
  .main {
    width: 100%;
    max-width: 100%;
  }
  .main .card {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main table,
  .main .nice-table {
    width: 100%;
    min-width: 640px;
    table-layout: auto;
  }
}

/* --- Refined popup styles for Notifications & User menu --- */
.dropdown,
.notif-dropdown {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.notif-dropdown {
  width: 380px;
  max-height: 420px;
  overflow: auto;
  border-radius: 16px;
  padding: 8px 0;
}

.notif-head {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px 8px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.notif-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 6px;
  transition: background .18s ease, transform .18s ease;
}

.notif-item:hover {
  background: #f7f9ff;
  transform: translateY(-1px);
}

.notif-item.unread {
  background: #f2f6ff;
}

.notif-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.notif-msg {
  font-size: 12.5px;
  color: #394150;
  line-height: 1.5;
}

.notif-time {
  font-size: 11px;
  color: var(--muted);
}

.notif-empty {
  padding: 18px 14px;
  color: var(--muted);
  text-align: center;
  font-size: 12.5px;
}

.notif-actions {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: #fafafa;
}

.notif-actions a {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #eef2ff;
  color: #1e3a8a;
  font-weight: 600;
}

/* User dropdown polish */
#userMenu.dropdown {
  width: 240px;
  border-radius: 14px;
  overflow: hidden;
}

#userMenu .menu-link {
  padding: 10px 12px;
  border-radius: 0;
}

#userMenu .menu-link:hover {
  background: #f4f6fb;
}

#userMenu .px-4.py-3.text-xs {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Align user menu visuals with notification popup */
#userMenu.dropdown {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

#userMenu .menu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--ink);
}

#userMenu .menu-link:hover {
  background: #f7f9ff;
}

#userMenu .px-4.py-3.text-xs {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border-bottom: 1px solid var(--border);
}

/* User chip badge */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 12px;
  background: #eef2ff;
  color: #1e3a8a;
  font-weight: 600;
  border: 1px solid rgba(30,58,138,0.12);
}

.user-chip-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e0e7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.user-chip-name {
  font-size: 12.5px;
}

.user-chip-role {
  font-size: 11px;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 2px 8px;
  border-radius: 999px;
}

#userMenu .icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #1e3a8a;
  font-size: 12px;
}

.menu-popover .dropdown {
  top: calc(100% + 8px);
  margin-top: 0;
}

@media (max-width: 640px) {
  .notif-dropdown {
    width: min(92vw, 360px);
  }
  #userMenu.dropdown {
    width: min(88vw, 240px);
  }
}

/* --- Dropdown Visual Refresh --- */
.menu-popover .dropdown {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

.menu-popover .dropdown::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 22px;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.98);
  border-left: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
  transform: rotate(45deg);
}

#notifMenu.notif-dropdown {
  width: 390px;
  max-height: 440px;
  padding: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#notifMenu .notif-head {
  padding: 12px 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
}

#notifMenu .notif-item {
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f7;
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 6px;
}

#notifMenu .notif-item.unread {
  background: linear-gradient(90deg, #eff6ff 0%, #ffffff 45%);
}

#notifMenu .notif-item:hover {
  background: #f8fbff;
}

#notifMenu .notif-title {
  font-weight: 700;
  color: #1e293b;
}

#notifMenu .notif-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#notifMenu .notif-group-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

#notifMenu .notif-group-tag.group-room {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

#notifMenu .notif-group-tag.group-service {
  background: var(--color-teal-soft);
  color: var(--color-teal-ink);
  border-color: var(--color-teal-border);
}

#notifMenu .notif-group-tag.group-edoc,
#notifMenu .notif-group-tag.group-attendance,
#notifMenu .notif-group-tag.group-rental {
  background: var(--color-info-soft);
  color: var(--color-info-ink);
  border-color: var(--color-info-border);
}

#notifMenu .notif-group-tag.group-project {
  background: var(--color-purple-soft);
  color: var(--color-purple-ink);
  border-color: var(--color-purple-border);
}

#notifMenu .notif-group-tag.group-approval {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

#notifMenu .notif-group-tag.group-inventory {
  background: #ecfeff;
  color: #0e7490;
  border-color: #a5f3fc;
}

#notifMenu .notif-group-tag.group-leave {
  background: #f0fdf4;
  color: #166534;
  border-color: var(--color-success-border);
}

#notifMenu .notif-group-tag.group-other {
  background: #f8fafc;
  color: #475569;
  border-color: #cbd5e1;
}

#notifMenu .notif-msg {
  color: #334155;
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#notifMenu .notif-time {
  color: #94a3b8;
  font-size: 11px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#notifMenu a,
#notifMenu a:hover,
#notifMenu a:active,
#notifMenu a:focus {
  text-decoration: none;
}

#notifMenu .notif-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  justify-content: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.94) 0%, var(--surface) 100%);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -10px 22px rgba(15, 23, 42, 0.06);
}

#notifMenu .notif-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  background: var(--surface);
  color: var(--color-primary-ink);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

#userMenu.dropdown {
  width: 260px;
}

#userMenu .px-4.py-3.text-xs {
  padding: 12px 14px;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
}

#userMenu .menu-link {
  padding: 11px 14px;
  border-bottom: 1px solid #eef2f7;
}

#userMenu .menu-link:last-child {
  border-bottom: 0;
}

#userMenu .menu-link:hover {
  background: #f8fbff;
}

#userMenu .icon {
  background: #eff6ff;
  color: #1d4ed8;
}

/* Global responsive hardening */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

.main {
  min-width: 0;
}

.card {
  min-width: 0;
}

.table-wrap,
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.nice-table {
  width: 100%;
}

@media (max-width: 1200px) {
  .app-layout {
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .topbar-inner {
    padding: 12px 14px;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 8px !important;
  }

  .menu-popover .dropdown,
  #notifMenu.notif-dropdown,
  #userMenu.dropdown { width: min(94vw, 420px) !important; max-width: 94vw; }

  .main {
    padding: 14px;
    border-radius: 14px;
  }

  .sidebar {
    padding: 12px;
    border-radius: 14px;
  }
}

@media (max-width: 640px) {
  .app-layout {
    gap: 12px;
    margin: 10px auto 20px;
    padding: 0 10px;
  }

  .brand-title {
    font-size: 15px;
  }

  .main {
    padding: 12px;
    border-radius: 12px;
  }

  .card {
    padding: 12px;
    border-radius: 12px;
  }

  button, .btn {
    width: auto;
    text-align: center;
  }

  .main [style*="display:grid"][style*="minmax(560px"] {
    grid-template-columns: 1fr !important;
  }

  .main .card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table,
  .nice-table {
    width: 100%;
    min-width: 560px;
    table-layout: auto;
    border-radius: 10px;
  }

  th, td {
    padding: 8px 10px;
    font-size: 13px;
  }
}


/* Mobile-first responsive stabilization */
html {
  -webkit-text-size-adjust: 100%;
}

.topbar-inner,
.topbar-actions,
.app-layout,
.sidebar,
.main,
.card,
.modal-card {
  min-width: 0;
}

.menu-link {
  min-width: 0;
}

.menu-link span,
.menu-link strong,
.menu-link small {
  min-width: 0;
  overflow-wrap: anywhere;
}

input,
select,
textarea {
  max-width: 100%;
}

textarea {
  resize: vertical;
}

.modal-card {
  max-width: calc(100vw - 24px);
  max-height: min(88vh, 900px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 960px) {
  .sidebar {
    width: 100%;
  }

  .main,
  .sidebar,
  .card {
    overflow: hidden;
  }

  .main [style*="display:grid"],
  .main [style*="display: grid"] {
    min-width: 0 !important;
  }

  .main [style*="display:grid"] > *,
  .main [style*="display: grid"] > * {
    min-width: 0 !important;
  }

  .main [style*="display:flex"],
  .main [style*="display: flex"] {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  .topbar-inner {
    padding: 12px;
    gap: 10px;
  }

  .brand {
    width: 100%;
  }

  .topbar-actions {
    width: 100%;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .topbar-actions > * {
    max-width: 100%;
  }

  .main [style*="grid-template-columns"],
  .main form[style*="grid-template-columns"],
  .main [class*="grid"] {
    min-width: 0;
  }

  .main [style*="grid-template-columns: repeat"],
  .main [style*="grid-template-columns:repeat"],
  .main [style*="grid-template-columns: 1fr 1fr"],
  .main [style*="grid-template-columns:1fr 1fr"],
  .main [style*="grid-template-columns: minmax"],
  .main [style*="grid-template-columns:minmax"],
  .main [style*="grid-template-columns: 220px 1fr"],
  .main [style*="grid-template-columns:220px 1fr"],
  .main [style*="grid-template-columns: 240px 1fr"],
  .main [style*="grid-template-columns:240px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .main [style*="justify-content:flex-end"],
  .main [style*="justify-content: flex-end"] {
    justify-content: flex-start !important;
  }

  .main button,
  .main .btn,
  .main .btn-primary,
  .main .btn-secondary,
  .main .btn-success,
  .main .btn-danger {
    max-width: 100%;
  }

  .main table,
  .main .nice-table {
    min-width: 520px;
  }
}

@media (max-width: 560px) {
  .topbar {
    position: static;
  }

  .topbar-inner {
    padding: 10px;
  }

  .brand-title {
    font-size: 14px;
  }

  .brand > div > div:last-child {
    font-size: 11px !important;
    line-height: 1.35;
  }

  .lang-switch {
    width: auto;
  }

  .lang-switch a {
    min-width: 36px;
    padding: 6px 8px;
  }

  .app-layout {
    padding: 0 8px;
    gap: 10px;
  }

  .sidebar,
  .main,
  .card {
    border-radius: 12px;
  }

  .sidebar,
  .main {
    padding: 10px;
  }

  .card {
    padding: 10px;
  }

  .menu-link {
    padding: 10px;
    font-size: 13px;
  }

  .menu-link .icon {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .modal-card {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    padding: 12px;
    border-radius: 12px;
  }

  .main .card,
  .main .table-wrap,
  .main .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .main table,
  .main .nice-table {
    min-width: 480px;
  }
}
input, select, textarea, button, .btn {
  font-family: var(--font-ui) !important;
}



/* Mobile sidebar drawer */
.mobile-sidebar-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.mobile-sidebar-backdrop {
  display: none;
}

@media (max-width: 960px) {
  body.sidebar-open {
    overflow: hidden;
  }

  .mobile-sidebar-toggle {
    display: inline-flex;
    flex: 0 0 auto;
  }

  .mobile-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(2px);
    z-index: 85;
  }

  body.sidebar-open .mobile-sidebar-backdrop {
    display: block;
  }

  .app-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    top: 12px;
    left: 12px;
    bottom: 12px;
    width: min(320px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    margin: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 90;
    transform: translateX(calc(-100% - 20px));
    transition: transform .22s ease;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }
}

@media (max-width: 560px) {
  .mobile-sidebar-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .sidebar {
    top: 8px;
    left: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
}

/* Keep mobile topbar dropdowns above page content */
.topbar,
.topbar-inner,
.topbar-actions,
.menu-popover {
  overflow: visible !important;
}

.topbar {
  z-index: 2500;
}

.menu-popover .dropdown,
#notifMenu.notif-dropdown,
#userMenu.dropdown {
  z-index: 2600 !important;
}

@media (max-width: 560px) {
  .topbar {
    position: sticky !important;
    top: 0;
    z-index: 2500 !important;
  }

  .topbar-user-popover,
  .topbar-notif-popover {
    position: relative !important;
    overflow: visible !important;
  }

  #userMenu.dropdown,
  #notifMenu.notif-dropdown {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 24px) !important;
  }
}


/* Inventory admin settings page components. Centralized from app/Modules/Inventory/Views/admin/settings.php. */
.settings-page-subtitle {
    color: var(--muted);
    margin-bottom: 12px;
}
.settings-form-shell {
    margin-top: 12px;
    display: grid;
    gap: 16px;
}
.settings-section {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    display: grid;
    gap: 16px;
}
.settings-section-head {
    display: grid;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
}
.settings-section-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}
.settings-section-desc,
.settings-help {
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
}
.settings-alert {
    margin: 10px 0;
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}
.settings-alert-success {
    background: #ecfdf5;
    border-color: #86efac;
    color: #166534;
}
.settings-alert-error {
    background: #fef2f2;
    border-color: var(--color-danger-border);
    color: #b91c1c;
}
.settings-grid-two,
.remote-field-grid,
.office-coordinate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.settings-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-field-stack {
    display: grid;
    gap: 14px;
}
.settings-field {
    display: grid;
    gap: 8px;
    align-content: start;
}
.settings-field-full {
    grid-column: 1 / -1;
}
.settings-label {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}
.settings-field input {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border-radius: 12px;
    box-sizing: border-box;
}
.settings-preview-card {
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fbff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    flex-wrap: wrap;
}
.settings-preview-copy {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
}
.settings-preview-title {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
}
.settings-preview-path {
    font-size: 12px;
    color: #64748b;
    word-break: break-all;
}
.settings-preview-image {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
}
.settings-section-remote {
    gap: 18px;
}
.remote-hero {
    border: 1px solid #dbe7f3;
    border-radius: 14px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}
.remote-hero-title {
    font-size: 13px;
    font-weight: 800;
    color: #1d4ed8;
}
.remote-hero-desc {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: #475569;
}
.remote-card {
    min-width: 0;
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    display: grid;
    gap: 16px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}
.remote-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.remote-card-title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}
.remote-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: #e8f0fb;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
}
.remote-toggle-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
.remote-toggle-item {
    border: 1px solid #dbe7f3;
    border-radius: 14px;
    padding: 14px 16px;
    background: #ffffff;
    display: grid;
    gap: 6px;
}
.settings-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #0f172a;
}
.settings-check-row input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
}
.remote-toggle-title {
    line-height: 1.35;
}
.office-location-layout {
    display: grid;
    gap: 18px;
}
.office-location-intro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 18px;
    border: 1px solid #fed7aa;
    border-radius: 20px;
    background: linear-gradient(135deg, #fffaf4 0%, #ffffff 65%, #fff7ed 100%);
}
.office-location-intro-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffedd5 0%, #fdba74 100%);
    box-shadow: 0 12px 24px rgba(249, 115, 22, 0.18);
    font-size: 22px;
}
.office-location-intro-copy {
    display: grid;
    gap: 6px;
}
.office-location-intro-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}
.office-location-intro-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #475569;
}
.office-location-map-card {
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.08);
}
.office-location-map-frame {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(180deg, #f7fafc 0%, #edf4ff 100%);
    border: 1px solid #dbe7f3;
}
.office-location-map-frame iframe {
    position: relative;
    z-index: 0;
    width: 100%;
    min-height: 340px;
    border: 0;
    display: block;
}
.office-location-map-badge {
    position: absolute;
    z-index: 4;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #ea580c;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(10px);
}
.office-location-current-btn {
    position: absolute;
    z-index: 4;
    right: 18px;
    bottom: 18px;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    color: #0f172a;
    font-weight: 800;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}
.office-location-current-btn:hover,
.office-location-current-btn:focus {
    background: #ffffff;
    color: #ea580c;
}
.office-radius-overlay {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
}
.office-radius-overlay[hidden] {
    display: none;
}
.office-radius-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--office-radius-size, 120px);
    height: var(--office-radius-size, 120px);
    border: 2px solid rgba(14, 165, 233, 0.95);
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.13);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75), 0 12px 32px rgba(14, 165, 233, 0.18);
    transform: translate(-50%, -50%);
}
.office-radius-label {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: min(260px, calc(100% - 36px));
    padding: 7px 11px;
    border: 1px solid rgba(125, 211, 252, 0.85);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #075985;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(10px);
    transform: translate(-50%, -50%);
}
.office-location-map-caption {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: #64748b;
}
.office-location-map-caption::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.9;
}
.office-location-map-caption[data-state="ready"] {
    color: #166534;
}
.office-location-map-caption[data-state="loading"] {
    color: #c2410c;
}
.office-location-map-caption[data-state="error"] {
    color: #b91c1c;
}
.office-map-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 12px;
    align-items: end;
}
.office-map-parse-btn {
    width: 132px;
    height: 46px;
    border: 1px solid #fdba74;
    border-radius: 14px;
    background: #fff7ed;
    color: #ea580c;
    font-weight: 700;
    padding: 0 16px;
    white-space: nowrap;
}
.office-map-parse-btn:hover,
.office-map-parse-btn:focus {
    background: #ffedd5;
    color: #c2410c;
}
.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 4px;
}
.settings-save-btn,
.settings-cancel-btn,
.settings-danger-btn {
    min-width: 140px;
    height: 42px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.settings-save-btn {
    background: #16a34a;
    color: #fff;
}
.settings-cancel-btn {
    background: #dc2626;
    border: 1px solid #b91c1c;
    color: #fff;
}
.settings-danger-btn {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.settings-cancel-btn:hover,
.settings-cancel-btn:focus,
.settings-cancel-btn:active {
    color: #fff;
    text-decoration: none;
    background: #b91c1c;
}
@media (max-width: 900px) {
    .settings-grid-two,
    .remote-field-grid,
    .office-coordinate-grid,
    .office-map-link-row {
        grid-template-columns: 1fr;
    }
    .office-location-intro {
        grid-template-columns: 1fr;
    }
    .office-location-map-card,
    .office-location-intro {
        padding: 16px;
    }
    .office-location-map-frame,
    .office-location-map-frame iframe {
        min-height: 280px;
    }
    .office-location-current-btn {
        left: 16px;
        right: 16px;
        width: auto;
        justify-content: center;
    }
    .office-map-parse-btn,
    .settings-save-btn,
    .settings-cancel-btn,
    .settings-danger-btn {
        width: 100%;
    }
    .settings-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Settings page visual refresh */
.settings-page {
    display: grid;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 4px 0 28px;
}
.settings-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid #dbe7f3;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.settings-page-head h1 {
    margin: 0;
    color: #061a36;
    font-size: clamp(1.65rem, 2.2vw, 2.15rem);
    line-height: 1.2;
    letter-spacing: 0;
}
.settings-page-kicker {
    width: fit-content;
    margin-bottom: 8px;
    padding: 4px 10px;
    border: 1px solid #bfe3dc;
    border-radius: 999px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: 0.72rem;
    font-weight: 800;
}
.settings-page-subtitle {
    max-width: 780px;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}
.settings-page-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    background: #f0fdf4;
    color: #166534;
    font-size: 0.84rem;
    font-weight: 800;
    white-space: nowrap;
}
.settings-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
}
.settings-form-shell {
    margin-top: 0;
    gap: 18px;
}
.settings-section {
    border-color: #dbe7f3;
    border-radius: 22px;
    padding: 22px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}
.settings-section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    padding-bottom: 14px;
    border-color: #edf2f7;
}
.settings-section-title {
    color: #061a36;
    font-size: 1.12rem;
    line-height: 1.35;
}
.settings-section-desc,
.settings-help {
    color: #64748b;
}
.settings-field {
    min-width: 0;
}
.settings-label {
    color: #334155;
    font-size: 0.84rem;
    font-weight: 800;
}
.settings-field input {
    min-height: 46px;
    border: 1px solid #d4e0ea;
    border-radius: 13px;
    background: #ffffff;
    color: #061a36;
    padding: 9px 12px;
}
.settings-field input:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    outline: none;
}
.settings-file-field {
    min-width: 0;
}
.settings-file-wrap {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 68px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    border-radius: 14px;
    padding: 12px;
    min-width: 0;
    cursor: pointer;
    margin-bottom: 0;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.settings-file-wrap:hover,
.settings-file-wrap:focus-within {
    border-color: #93c5fd;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}
.settings-file-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #0f766e;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}
.settings-file-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.settings-file-title {
    color: #0f172a;
    font-weight: 800;
    font-size: 14px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.settings-file-meta {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}
.settings-file-wrap input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.settings-grid-two {
    gap: 12px;
}
.settings-preview-card {
    border-color: #c9d7e5;
    border-radius: 18px;
    background: #f8fafc;
    padding: 14px;
}
.settings-preview-image {
    width: 52px;
    height: 52px;
    border: 1px solid #dbe7f3;
    border-radius: 14px;
    background: #ffffff;
}
.remote-hero {
    display: grid;
    gap: 4px;
    border: 1px solid #bfe3dc;
    border-radius: 18px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
}
.remote-hero-title {
    color: #0f766e;
}
.remote-hero-desc {
    color: #475569;
}
.remote-card {
    border-color: #dbe7f3;
    border-radius: 20px;
    padding: 18px;
    background: #ffffff;
    box-shadow: none;
}
.remote-card-title {
    color: #061a36;
    font-size: 1rem;
}
.remote-chip {
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #3730a3;
}
.remote-toggle-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.remote-toggle-item {
    min-width: 0;
    min-height: 126px;
    border-color: #dbe7f3;
    border-radius: 18px;
    padding: 15px;
    background: #fbfdff;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.remote-toggle-item:has(input:checked) {
    border-color: #7dd3c7;
    background: #f0fdfa;
}
.remote-toggle-item:hover {
    transform: translateY(-1px);
}
.settings-check-row {
    align-items: flex-start;
    gap: 10px;
}
.settings-check-row input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: #0f766e;
}
.remote-toggle-title {
    color: #061a36;
    font-size: 0.94rem;
    font-weight: 800;
}
.remote-field-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.office-location-intro {
    border-color: #bfe3dc;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.office-location-intro-icon {
    background: #e6f4f1;
    box-shadow: none;
}
.office-location-map-card {
    border-radius: 20px;
    box-shadow: none;
}
.office-location-map-frame {
    min-height: 320px;
    border-radius: 16px;
}
.office-location-map-frame iframe {
    min-height: 320px;
}
.office-map-parse-btn,
.settings-save-btn,
.settings-cancel-btn,
.settings-danger-btn {
    min-height: 44px;
    height: auto;
    border-radius: 13px;
}
.settings-save-btn {
    border: 1px solid #0f766e;
    background: #0f766e;
}
.settings-save-btn:hover,
.settings-save-btn:focus {
    background: #0b5f59;
}
.settings-cancel-btn {
    border: 1px solid #d4e0ea;
    background: #ffffff;
    color: #334155;
}
.settings-cancel-btn:hover,
.settings-cancel-btn:focus,
.settings-cancel-btn:active {
    background: #f8fafc;
    color: #0f172a;
}
.settings-actions {
    align-items: center;
}
@media (max-width: 1100px) {
    .remote-toggle-list,
    .remote-field-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 720px) {
    .settings-page {
        gap: 14px;
        padding-bottom: 18px;
    }
    .settings-page-head {
        display: grid;
        padding: 18px;
        border-radius: 18px;
    }
    .settings-page-status {
        width: 100%;
        justify-content: center;
    }
    .settings-section,
    .remote-card {
        padding: 16px;
        border-radius: 18px;
    }
    .settings-grid-two,
    .remote-toggle-list,
    .remote-field-grid,
    .office-coordinate-grid,
    .office-map-link-row {
        grid-template-columns: 1fr;
    }
    .remote-toggle-item {
        min-height: 0;
    }
    .settings-preview-card {
        display: grid;
        grid-template-columns: 1fr;
    }
    .settings-preview-image {
        width: 58px;
        height: 58px;
    }
    .office-location-map-frame,
    .office-location-map-frame iframe {
        min-height: 245px;
    }
    .office-location-map-badge {
        top: 12px;
        left: 12px;
        max-width: calc(100% - 24px);
        white-space: normal;
    }
    .office-radius-label {
        max-width: calc(100% - 28px);
        white-space: normal;
    }
    .settings-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .settings-actions .settings-save-btn {
        order: 1;
    }
    .settings-actions .settings-cancel-btn {
        order: 2;
    }
}



/* Inventory admin users page components. Centralized from app/Modules/Inventory/Views/admin/users.php. */
:root {
    --users-photo-crop-bg: #e2e8f0;
    --users-photo-crop-stroke: rgba(255,255,255,.85);
}

.users-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 48%, #f0fdf4 100%);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}
.users-eyebrow {
    color: #2563eb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.users-hero h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
    color: #0f172a;
}
.users-hero p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}
.users-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(96px, 1fr));
    gap: 10px;
    min-width: min(420px, 100%);
}
.users-stat {
    display: grid;
    align-content: center;
    gap: 4px;
    min-height: 86px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: rgba(255,255,255,.82);
    color: #334155;
    text-decoration: none;
}
.users-stat span {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}
.users-stat strong {
    font-size: 24px;
    line-height: 1;
    color: #0f172a;
}
.users-stat.is-active {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.18);
}
.users-alert {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 700;
}
.users-alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.users-empty {
    margin-top: 14px;
    display: grid;
    gap: 6px;
    padding: 24px;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}
.users-empty strong {
    color: #0f172a;
    font-size: 16px;
}
.users-alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.users-toolbar {
    margin-top: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
    gap: 14px;
    align-items: end;
}
.users-toolbar h2 {
    margin: 0;
    color: #0f172a;
    font-size: 20px;
    line-height: 1.25;
}
.users-toolbar p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
}
.users-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) minmax(190px, 260px) auto auto;
    gap: 8px;
    align-items: center;
}
.users-search input[type="text"],
.users-search select {
    min-height: 42px;
    border-radius: 12px;
    background: #fff;
}
.workline-user-groups {
    margin-top: 14px !important;
}
.workline-user-group {
    border-radius: 16px;
    border-color: #dbe4ef;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}
.workline-user-group-head {
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
}
.workline-user-group-head h4 {
    font-size: 16px;
    font-weight: 800;
}
.user-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
}
.user-item-card {
    border-color: #dbe4ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.user-item-card:hover {
    transform: translateY(-2px);
    border-color: #bfdbfe;
    box-shadow: 0 16px 32px rgba(15, 23, 42, .10);
}
.user-item-card.is-inactive {
    background: #f8fafc;
    opacity: .86;
}
.user-name-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.status-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}
.status-pill-active { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.status-pill-inactive { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.user-photo img,
.user-photo-placeholder {
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}
.user-photo-placeholder {
    background: linear-gradient(135deg, #e0f2fe, #dcfce7);
}
.user-item-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}
.user-item-meta > div {
    min-width: 0;
    padding: 8px;
    border-radius: 10px;
    background: #f8fafc;
}
.user-item-actions button {
    width: 100%;
    max-width: 180px;
}
@media (max-width: 980px) {
    .users-hero {
        grid-template-columns: 1fr;
    }
    .users-hero-stats {
        min-width: 0;
    }
    .users-toolbar {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .users-hero {
        padding: 16px;
        border-radius: 14px;
    }
    .users-hero h1 {
        font-size: 22px;
    }
    .users-hero-stats {
        grid-template-columns: 1fr;
    }
    .users-stat {
        min-height: 64px;
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    .users-search {
        grid-template-columns: 1fr;
    }
    .user-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .user-item-head {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .user-photo img,
    .user-photo-placeholder {
        width: 48px;
        height: 48px;
    }
    .user-item-meta {
        grid-template-columns: 1fr;
    }
    .user-item-actions button {
        max-width: none;
    }
    .workline-user-group-head {
        align-items: flex-start;
        flex-direction: column;
    }
}
.nice-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    table-layout: auto;
}
.nice-table th, .nice-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    font-size: 13px;
    vertical-align: top;
    word-break: break-word;
}
.nice-table thead th {
    background: #f8fafc;
    font-weight: 600;
}
.nice-table tbody tr:hover {
    background: #f9fafb;
}
.workline-add {
    background: #f8fafc;
    border: 1px dashed #cbd5f5;
    padding: 12px;
    border-radius: 12px;
}
.workline-add-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.workline-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}
.workline-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    display: grid;
    gap: 8px;
}
.workline-row {
    display: grid;
    gap: 6px;
}
.workline-label {
    font-size: 12px;
    color: #64748b;
}
.workline-input {
    width: 100%;
}
.workline-actions {
    display: flex;
    gap: 8px;
}
.user-add-card {
    margin-top: 16px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}
.user-add-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-bottom: 1px solid #e2e8f0;
}
.user-add-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}
.user-add-head h2 {
    margin: 8px 0 4px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
}
.user-add-head p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}
.user-add-toggle,
.user-add-actions button {
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: #2563eb;
    color: #ffffff;
    font-weight: 900;
    padding: 0 16px;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
}
.user-add-panel {
    padding: 16px;
    background: #f8fafc;
}
.user-add-form {
    display: grid;
    gap: 14px;
}
.user-add-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.user-add-section {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}
.user-add-section:last-child {
    grid-column: 1 / -1;
}
.user-add-account-section,
.user-add-employee-section,
.user-add-work-section {
    grid-column: 1 / -1;
}
.user-add-contract-section,
.user-add-photo-section {
    grid-column: auto;
}
.user-add-section-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.user-add-section-head > span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 900;
}
.user-add-section-head h3 {
    margin: 0 0 3px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
}
.user-add-section-head p {
    margin: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}
.user-add-grid,
.user-add-upload-grid,
.user-add-assignment-grid {
    display: grid;
    gap: 10px;
}
.user-add-grid.two,
.user-add-upload-grid,
.user-add-assignment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.user-add-assignment-grid .role-card-standalone {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: block;
}
.user-add-assignment-grid .role-card-item {
    width: 100%;
    max-width: none;
}
.user-add-field {
    display: grid;
    gap: 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}
.user-add-field input,
.user-add-field select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    padding: 8px 11px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
}
.user-add-field input:focus,
.user-add-field select:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}
.user-add-role-block {
    display: grid;
    gap: 8px;
}
.user-add-label {
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}
.user-add-primary-role {
    max-width: 420px;
}
.user-add-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}
.btn-danger {
    background: #fee2e2;
    color: #b91c1c;
}
.roles-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 6px 10px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}
.role-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}
.role-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
    background: #f8fbff;
    border: 1px solid #dbeafe;
    align-items: start;
}
.role-card-item {
    border: 1px solid #cfe0ff;
    border-radius: 10px;
    background: #fff;
    padding: 8px 12px;
    min-height: 52px;
    font-weight: 500;
    display: grid !important;
    grid-template-columns: 18px 1fr !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 10px !important;
    line-height: 1.35;
    letter-spacing: .01em;
    text-align: left;
    position: relative;
    overflow: hidden;
    min-width: 0;
    box-sizing: border-box;
}
.role-card-item input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    justify-self: center;
}
.role-card-item span {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    clip: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
    display: block;
    width: auto !important;
    height: auto !important;
    min-width: 0;
    max-width: 100%;
    text-align: left;
    color: #0f172a;
    font-size: 13px;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.role-card-highlight {
    border-color: #86efac;
    background: #f0fdf4;
}
.role-card-standalone {
    margin-top: 6px;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    background: #f0fdf4;
    padding: 8px;
    display: flex;
    justify-content: flex-start;
}
.role-card-standalone .role-card-item {
    width: 100%;
    max-width: 360px;
}
.scope-card-grid {
    border-color: #fde68a;
    background: #fffbeb;
}
@media (max-width: 900px) {
    .user-add-head {
        align-items: stretch;
        flex-direction: column;
    }
    .user-add-toggle {
        width: 100%;
    }
    .user-add-sections {
        grid-template-columns: 1fr;
    }
    .user-add-section:last-child {
        grid-column: auto;
    }
    .user-add-account-section,
    .user-add-employee-section,
    .user-add-work-section,
    .user-add-contract-section,
    .user-add-photo-section {
        grid-column: auto;
    }
    .role-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .user-add-head,
    .user-add-panel {
        padding: 14px;
    }
    .user-add-head h2 {
        font-size: 19px;
    }
    .user-add-section {
        padding: 13px;
        border-radius: 14px;
    }
    .user-add-section-head {
        grid-template-columns: 30px minmax(0, 1fr);
    }
    .user-add-section-head > span {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }
    .user-add-grid.two,
    .user-add-upload-grid,
    .user-add-assignment-grid {
        grid-template-columns: 1fr;
    }
    .user-add-actions {
        display: grid;
    }
    .user-add-actions button {
        width: 100%;
    }
    .role-card-grid {
        grid-template-columns: 1fr;
    }
}
.table-scroll {
    width: 100%;
    overflow-x: auto;
}
.user-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
}
.workline-user-groups {
    display: grid;
    gap: 12px;
}
.workline-user-group {
    padding: 12px;
}
.workline-user-group-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.workline-user-group-head h4 {
    margin: 0;
    font-size: 15px;
    color: #0f172a;
}
.workline-leader-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.user-item-card {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 12px;
    display: grid;
    gap: 10px;
}
.user-item-head {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 10px;
    align-items: center;
}
.user-photo img,
.user-photo-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    background: #e5e7eb;
}
.user-item-meta {
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: #334155;
}
.meta-label {
    color: #64748b;
    font-weight: 600;
}
.user-item-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.user-status-form {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}
.user-status-form button {
    width: 100%;
}
.cell-main {
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
}
.cell-sub {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.3;
}
.pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}
.pill-green {
    background: #dcfce7;
    color: #166534;
}
.pill-red {
    background: #fee2e2;
    color: #b91c1c;
}
.pill-amber {
    background: #fef3c7;
    color: #92400e;
}
.pill-blue {
    background: #dbeafe;
    color: #1d4ed8;
}
.pill-blue-soft {
    background: #eff6ff;
    color: #1e40af;
}
.pill-amber-soft {
    background: #fffbeb;
    color: #b45309;
}
.pill-gray {
    background: #e2e8f0;
    color: #334155;
}
.user-table th:last-child,
.user-table td:last-child {
    text-align: center;
    white-space: nowrap;
}
.user-edit-modal {
    width: min(980px, 94vw);
    max-height: 88vh;
    overflow: auto;
    border-radius: 14px;
}
.user-edit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 10px;
    margin-bottom: 12px;
}
.user-edit-title {
    font-weight: 700;
    font-size: 18px;
    color: #0f172a;
}
.user-edit-subtitle {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}
.user-edit-close-btn {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #cbd5e1;
}
.user-edit-form {
    display: grid;
    gap: 12px;
}
.user-edit-grid {
    display: grid;
    gap: 12px;
}
.user-edit-section {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fbfdff;
    padding: 12px;
}
.user-edit-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}
.user-edit-fields {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.user-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}
.user-edit-cancel-btn {
    background: #ef4444;
    color: #fff;
}
.user-edit-save-btn {
    background: #2563eb;
    color: #fff;
}
@media (max-width: 640px) {
    .user-card-grid {
        grid-template-columns: 1fr;
    }
}
.user-item-card {
    padding: 14px;
    min-height: 100%;
    align-content: start;
}
.user-item-head {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eef2f7;
}
.user-name-line {
    align-items: center;
}
.cell-main {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.32;
}
.cell-sub {
    line-height: 1.45;
}
.user-item-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    font-size: 13px;
}
.user-item-meta > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 58px;
    padding: 11px 12px;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    background: #f8fafc;
    color: #1e293b;
    line-height: 1.42;
}
.meta-label {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}
.user-item-meta .pill,
.user-name-line .status-pill {
    width: fit-content;
}
.user-doc-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid #93c5fd;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
}
.user-doc-link:hover {
    border-color: #60a5fa;
    background: #dbeafe;
}
.user-doc-empty {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    color: #64748b;
    font-weight: 800;
}
.updated-stack {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.updated-stack strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}
.updated-stack small {
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
}
.user-item-actions {
    justify-content: stretch;
    margin-top: 2px;
}
.user-item-actions button {
    max-width: none;
    min-height: 42px;
    border-radius: 12px;
}
@media (max-width: 640px) {
    .user-item-card {
        padding: 12px;
    }
    .user-item-head {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 10px;
    }
    .user-item-meta {
        grid-template-columns: 1fr;
    }
    .user-item-meta > div {
        min-height: 0;
    }
}
/* Modernized user cards: cleaner desktop and mobile layout */
.workline-user-groups {
    gap: 18px;
}
.user-directory-sections {
    display: grid;
    gap: 18px;
    margin-top: 12px;
}
.user-directory-section {
    display: grid;
    gap: 14px;
}
.user-directory-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #dbe7f3;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}
.user-directory-section-head h3 {
    margin: 6px 0 4px;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
}
.user-directory-section-head p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}
.user-directory-general .user-directory-section-head {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}
.workline-user-group {
    padding: 18px;
    border: 1px solid #dbe7f3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
}
.workline-user-group-head {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e6edf5;
}
.workline-user-group-head h4 {
    font-size: 17px;
    letter-spacing: 0;
}
.workline-leader-summary {
    margin-bottom: 14px;
}
.workline-user-group.is-general-group .workline-user-group-head {
    margin-bottom: 12px;
}
.workline-user-group.is-general-group .user-card-grid {
    margin-top: 0;
}
.user-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
    gap: 16px;
    align-items: stretch;
}
.user-item-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #dbe7f3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .07);
}
.user-item-card:hover {
    transform: translateY(-2px);
    border-color: #93c5fd;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .11);
}
.user-item-head {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #e8eef6;
    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}
.user-photo img,
.user-photo-placeholder {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    border: 1px solid #dbe7f3;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.user-name-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
}
.cell-main {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.32;
    color: #0f172a;
}
.cell-sub {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}
.status-pill {
    min-height: 26px;
    padding: 4px 10px;
    font-size: 11px;
}
.user-item-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 4px 18px 14px;
    font-size: 13px;
    color: #1e293b;
}
.user-item-meta > div {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    min-height: 0;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid #edf2f7;
    border-radius: 0;
    background: transparent;
    line-height: 1.45;
}
.user-item-meta > div:last-child {
    border-bottom: 0;
}
.meta-label {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}
.user-item-meta .pill {
    width: fit-content;
    max-width: 100%;
    white-space: normal;
}
.rental-scope-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.user-updated-meta {
    align-items: center;
}
.user-item-actions {
    padding: 0 18px 18px;
    display: flex;
    justify-content: stretch;
}
.user-item-actions button {
    width: 100%;
    max-width: none;
    min-height: 44px;
    border-radius: 13px;
}
.user-item-actions > button,
.user-status-form {
    flex: 1 1 0;
}
.user-status-form {
    min-width: 0;
}
@media (max-width: 900px) {
    .user-directory-section-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .workline-user-group {
        padding: 14px;
    }
    .user-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 560px) {
    .user-directory-sections {
        gap: 14px;
    }
    .user-directory-section-head {
        padding: 14px;
        border-radius: 14px;
    }
    .user-directory-section-head h3 {
        font-size: 18px;
    }
    .workline-user-group {
        border-radius: 14px;
        padding: 12px;
    }
    .workline-user-group-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .user-item-card {
        border-radius: 16px;
    }
    .user-item-head {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 10px;
        padding: 14px 14px 12px;
    }
    .user-photo img,
    .user-photo-placeholder {
        width: 50px;
        height: 50px;
        border-radius: 13px;
    }
    .user-name-line {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .status-pill {
        width: fit-content;
    }
    .user-item-meta {
        padding: 2px 14px 12px;
    }
    .user-item-meta > div {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 11px 0;
    }
    .user-item-actions {
        padding: 0 14px 14px;
    }
}
/* Modern edit-user modal */
#userModal.modal-backdrop {
    padding: 20px;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(8px);
    align-items: center;
}
.user-edit-modal {
    width: min(900px, 96vw);
    max-height: min(94vh, 980px);
    padding: 0;
    overflow: hidden;
    border: 1px solid #dbe7f3;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 28px 70px rgba(15, 23, 42, .24);
    display: flex;
    flex-direction: column;
}
.user-edit-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0;
    padding: 22px 26px 18px;
    border-bottom: 1px solid #dbe7f3;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
}
.user-edit-title-wrap {
    min-width: 0;
}
.user-edit-title {
    font-size: 24px;
    font-weight: 900;
    line-height: 1.25;
    color: #0f172a;
}
.user-edit-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
}
.user-edit-close-btn {
    flex: 0 0 auto;
    min-width: 58px;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}
.user-edit-form {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0;
}
.user-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 22px;
}
.user-edit-section {
    display: grid;
    gap: 12px;
    grid-column: 1 / -1;
    align-content: start;
    padding: 16px;
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .05);
}
.user-edit-personal-section {
    grid-column: 1 / -1;
}
.user-edit-status-section {
    grid-column: 1 / -1;
}
.user-edit-photo-section,
.user-edit-contract-section {
    grid-column: 1 / -1;
}
.user-edit-permissions-section {
    grid-column: 1 / -1;
}
.user-edit-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.3;
}
.user-edit-section-title::before {
    content: "";
    width: 8px;
    height: 22px;
    border-radius: 99px;
    background: #2563eb;
}
.user-edit-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.user-edit-status-section .user-edit-fields {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.user-edit-role-group {
    display: grid;
    gap: 8px;
}
.user-edit-modal label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}
.user-edit-modal input,
.user-edit-modal select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 12px;
    border-color: #d7e0ea;
    background: #fbfdff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
}
.user-edit-modal input:focus,
.user-edit-modal select:focus {
    outline: 2px solid rgba(37, 99, 235, .18);
    border-color: #60a5fa;
    background: #ffffff;
}
#u_contract_document_current {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
}
#u_contract_document_current a {
    color: #2563eb;
    font-weight: 900;
    text-decoration: none;
}
.user-edit-permissions-section > div:not(.user-edit-section-title),
.user-edit-permissions-section > label {
    margin-top: 0;
}
.user-edit-permission-groups {
    display: grid;
    gap: 12px;
}
.user-edit-permission-block {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dbe7f3;
    border-radius: 14px;
    background: #fbfdff;
}
.user-edit-permission-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1e293b;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.3;
}
.user-edit-permission-title::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #2563eb;
}
.user-edit-role-groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.user-edit-role-cluster {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}
.user-edit-role-cluster-title {
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}
.user-edit-permissions-section .roles-check-grid {
    border-color: #dbe7f3;
    border-radius: 14px;
    background: #f8fafc;
    padding: 10px;
}
.user-edit-role-cluster .roles-check-grid {
    grid-template-columns: 1fr;
    padding: 0;
    border: 0;
    background: transparent;
}
.user-edit-permissions-section .role-card-item {
    min-height: 46px;
    border-color: #dbe7f3;
    border-radius: 12px;
    box-shadow: none;
}
.user-edit-addon-grid,
.user-edit-permission-selects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.user-edit-addon-grid .role-card-item {
    min-height: 54px;
}
.user-edit-approval-block {
    border-color: #fde68a;
    background: #fffbeb;
}
.user-edit-addon-block {
    border-color: var(--color-success-border);
    background: #f0fdf4;
}
.user-edit-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid #dbe7f3;
    background: rgba(248, 250, 252, .94);
    backdrop-filter: blur(10px);
}
.user-edit-actions button {
    min-width: 140px;
    min-height: 44px;
    border-radius: 13px;
}
.user-edit-cancel-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #334155;
}
.user-edit-save-btn {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}
@media (max-width: 900px) {
    .user-edit-grid {
        grid-template-columns: 1fr;
        padding: 14px;
    }
    .user-edit-section,
    .user-edit-personal-section,
    .user-edit-status-section,
    .user-edit-photo-section,
    .user-edit-contract-section,
    .user-edit-permissions-section {
        grid-column: 1 / -1;
    }
    .user-edit-role-groups {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    #userModal.modal-backdrop {
        padding: 8px;
        align-items: stretch;
    }
    .user-edit-modal {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 16px;
    }
    .user-edit-head {
        padding: 14px;
        align-items: flex-start;
    }
    .user-edit-title {
        font-size: 18px;
    }
    .user-edit-close-btn {
        min-width: 38px;
        min-height: 38px;
        padding: 0 12px;
    }
    .user-edit-grid {
        gap: 12px;
        padding: 12px;
    }
    .user-edit-section {
        padding: 13px;
        border-radius: 14px;
    }
    .user-edit-fields {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .user-edit-permission-block {
        padding: 10px;
    }
    .user-edit-addon-grid,
    .user-edit-permission-selects {
        grid-template-columns: 1fr;
    }
    .user-edit-actions {
        display: grid;
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .user-edit-actions button {
        width: 100%;
        min-width: 0;
    }
}
/* Edit modal upload fields, aligned with leave/create */
.user-upload-section {
    align-content: start;
}
.user-upload-field {
    display: grid;
    gap: 8px;
}
.user-upload-label {
    color: #1e293b;
    font-size: 13px;
    font-weight: 800;
}
.user-file-drop {
    position: relative;
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    min-height: 72px;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.user-file-drop:hover,
.user-file-drop:focus-within {
    border-color: #93c5fd;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}
.user-file-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.user-file-icon {
    width: 40px;
    height: 40px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
}
.user-file-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.user-file-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-file-sub {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}
.user-photo-crop {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #dbe7f3;
    border-radius: 14px;
    background: #ffffff;
}
.user-photo-crop.hidden {
    display: none;
}
.photo-crop-stage {
    width: min(100%, 260px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 18px;
    background: #e2e8f0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
}
.photo-crop-stage canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
}
.photo-crop-stage canvas:active {
    cursor: grabbing;
}
.photo-crop-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.photo-crop-controls label {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
}
.photo-crop-controls input[type="range"] {
    width: 100%;
    accent-color: #2563eb;
}
.photo-crop-reset {
    min-height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
    padding: 0 12px;
}
.user-current-file {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}
.user-current-file a {
    color: #2563eb;
    font-weight: 900;
    text-decoration: none;
}
@media (max-width: 560px) {
    .user-file-drop {
        grid-template-columns: 36px minmax(0, 1fr) !important;
        min-height: 64px;
        padding: 10px;
    }
    .user-file-icon {
        width: 36px;
        height: 36px;
    }
    .photo-crop-stage {
        width: 100%;
    }
    .photo-crop-controls {
        grid-template-columns: 1fr;
    }
}

/* Users page refresh */
.users-hero {
    border-color: #d8e4f2;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 56%, #eef6ff 100%);
    box-shadow: 0 18px 46px rgba(15, 23, 42, .08);
}
.users-control-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
    align-items: start;
}
.workline-manager-card,
.user-add-card,
.users-directory-board {
    border: 1px solid #dbe7f3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}
.users-control-grid .user-add-card {
    margin-top: 0;
}
.workline-manager-card {
    padding: 0;
    overflow: hidden;
}
.workline-manager-head,
.user-add-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid #e6edf5;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.workline-manager-head h2,
.user-add-head h2 {
    margin: 6px 0 4px;
    color: #0f172a;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 900;
}
.workline-manager-head p,
.user-add-head p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}
.panel-toggle-btn,
.user-add-toggle {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 900;
    box-shadow: none;
}
.workline-manager-panel,
.user-add-panel {
    padding: 16px;
    background: #fbfdff;
}
.workline-add {
    border-color: #bfdbfe;
    background: #eff6ff;
}
.workline-card {
    border-color: #dbe7f3;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .04);
}
.workline-empty {
    margin-top: 10px;
    color: #64748b;
    font-weight: 800;
}
.users-directory-board {
    margin-top: 18px;
    padding: 18px;
}
.users-toolbar {
    margin-top: 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #e6edf5;
}
.users-search input[type="text"],
.users-search select,
.users-search button,
.users-search .btn {
    min-height: 42px;
    border-radius: 12px;
}
.user-directory-sections {
    margin-top: 16px;
}
.user-directory-section-head {
    padding: 18px;
    border-radius: 18px;
    box-shadow: none;
}
.workline-user-group {
    padding: 0;
    overflow: hidden;
}
.workline-user-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    background: #fbfdff;
}
.workline-title-block {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.workline-title-block span {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}
.workline-title-block h4 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25;
}
.workline-leader-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 10px 18px 18px;
    background: #fbfdff;
}
.leader-chip {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 13px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}
.leader-chip small {
    width: fit-content;
    padding: 3px 8px;
    border-radius: 999px;
    color: #475569;
    background: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
}
.leader-chip strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.leader-head {
    border-color: #bfdbfe;
    background: #eff6ff;
}
.leader-head .leader-chip-label {
    color: #1d4ed8;
    background: #dbeafe;
}
.leader-acting {
    border-color: #fde68a;
    background: #fffbeb;
}
.leader-acting .leader-chip-label {
    color: #92400e;
    background: #fef3c7;
}
.user-card-grid {
    padding: 18px;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.user-item-card {
    border-radius: 16px;
}
@media (max-width: 1100px) {
    .users-control-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .users-hero,
    .users-directory-board {
        padding: 14px;
        border-radius: 16px;
    }
    .users-hero-stats {
        grid-template-columns: 1fr;
    }
    .workline-manager-head,
    .user-add-head,
    .users-toolbar,
    .workline-user-group-head {
        align-items: stretch;
        flex-direction: column;
    }
    .workline-leader-summary {
        grid-template-columns: 1fr;
        padding: 10px 14px 14px;
    }
    .panel-toggle-btn,
    .user-add-toggle {
        width: 100%;
    }
    .users-search {
        grid-template-columns: 1fr;
    }
    .users-search button,
    .users-search .btn {
        width: 100%;
    }
    .user-card-grid {
        padding: 12px;
        grid-template-columns: 1fr;
    }
    .user-item-meta > div {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/* Inventory admin users/settings shared component alignment. */
.users-page.page-stack,
.settings-page.page-stack {
    max-width: 1180px;
    margin-inline: auto;
    gap: var(--space-4);
}
.users-page .page-hero,
.settings-page .page-hero {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-muted) 100%);
    box-shadow: var(--shadow-card);
}
.users-page .page-title,
.settings-page .page-title,
.users-page .section-title,
.settings-page .settings-section-title,
.users-page .workline-manager-head h2,
.settings-page .remote-card-title {
    color: var(--text-strong);
    letter-spacing: 0;
}
.users-page .page-subtitle,
.settings-page .page-subtitle,
.users-page .section-subtitle,
.settings-page .settings-section-desc,
.settings-page .settings-help {
    color: var(--text-muted);
}
.users-page .section-card,
.settings-page .section-card {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.settings-page .settings-form-shell.section-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
}
.settings-page .settings-section.content-box,
.settings-page .remote-card.content-box,
.settings-page .settings-preview-card.content-box {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}
.settings-page .settings-section.content-box {
    padding: var(--space-4);
}
.settings-page .settings-section-head {
    border-color: var(--border-subtle);
}
.settings-page .settings-actions,
.users-page .workline-add-form {
    gap: var(--space-2);
}
.settings-page .settings-cancel-btn.btn,
.settings-page .settings-save-btn.btn,
.settings-page .settings-danger-btn.btn,
.settings-page .office-location-current-btn.btn,
.settings-page .office-map-parse-btn.btn,
.users-page .panel-toggle-btn.btn,
.users-page .workline-add-form .btn {
    min-height: 42px;
    border-radius: var(--radius-sm);
    font-weight: 800;
}
.settings-page .settings-field input,
.users-page input,
.users-page select,
.settings-page select {
    border-color: var(--border-soft);
    border-radius: var(--radius-sm);
}
.settings-page .settings-field input:focus,
.users-page input:focus,
.users-page select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.users-page .metric-card {
    min-width: 0;
}
.users-page .alert-box,
.settings-page .alert-box {
    border-radius: var(--radius-md);
}
.settings-page .badge-soft,
.users-page .badge-soft {
    border-radius: var(--radius-pill);
}
@media (max-width: 720px) {
    .users-page.page-stack,
    .settings-page.page-stack {
        gap: var(--space-3);
    }
    .users-page .page-hero,
    .settings-page .page-hero,
    .settings-page .settings-form-shell.section-card,
    .settings-page .settings-section.content-box {
        padding: var(--space-3);
        border-radius: var(--radius-md);
    }
    .settings-page .settings-actions {
        grid-template-columns: 1fr;
    }
    .settings-page .settings-actions .btn {
        width: 100%;
    }
}
/* Inventory employee profiles page components. Centralized from app/Modules/Inventory/Views/employee/profiles.php. */
/* Inventory approver dashboard page components. Centralized from app/Modules/Inventory/Views/approver/dashboard.php. */
.inv-approver-dashboard.page-stack {
    width: 100%;
    max-width: 1180px;
    gap: var(--space-4);
}

.inv-approver-dashboard .dash-hero.page-hero,
.inv-approver-dashboard .dash-panel.section-card {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.inv-approver-dashboard .dash-hero.page-hero {
    align-items: center;
}

.inv-approver-dashboard .dash-hero-copy.page-hero-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    min-width: 0;
}

.inv-approver-dashboard .dash-hero-copy .page-hero-icon {
    grid-row: 1 / span 3;
    width: 48px;
    height: 48px;
    margin: 0;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-strong);
    box-shadow: var(--shadow-sm);
}

.inv-approver-dashboard .dash-hero-copy .dash-kicker,
.inv-approver-dashboard .dash-hero-copy .page-title,
.inv-approver-dashboard .dash-hero-copy .page-subtitle {
    grid-column: 2;
    min-width: 0;
}

.inv-approver-dashboard .dash-hero-copy .dash-kicker {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
}

.inv-approver-dashboard .dash-actions,
.inv-approver-dashboard .metric-band,
.inv-approver-dashboard .borrow-monitor-summary,
.inv-approver-dashboard .queue-mini-grid,
.inv-approver-dashboard .recent-list,
.inv-approver-dashboard .borrow-monitor-list,
.inv-approver-dashboard .approval-card-grid,
.inv-approver-dashboard .approval-workload-groups,
.inv-approver-dashboard .approval-workload-group {
    display: grid;
    gap: var(--space-3);
}

.inv-approver-dashboard .dash-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inv-approver-dashboard .dash-action-card.action-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-height: 84px;
    padding: var(--space-3);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--text-strong);
    text-decoration: none;
}

.inv-approver-dashboard .dash-action-card.action-card.primary,
.inv-approver-dashboard .dash-action-card.action-card.is-primary {
    border-color: var(--color-primary-border);
}

.inv-approver-dashboard .dash-action-card .action-icon {
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-strong);
}

.inv-approver-dashboard .action-copy,
.inv-approver-dashboard .approval-card.record-card > div {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.inv-approver-dashboard .dash-action-card strong,
.inv-approver-dashboard .approval-workload-head h3,
.inv-approver-dashboard .recent-person {
    color: var(--text-strong);
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.inv-approver-dashboard .dash-action-card small,
.inv-approver-dashboard .approval-workload-head p,
.inv-approver-dashboard .panel-head p,
.inv-approver-dashboard .recent-purpose,
.inv-approver-dashboard .borrow-monitor-main p,
.inv-approver-dashboard .approval-card small {
    color: var(--text-muted);
    line-height: 1.5;
}

.inv-approver-dashboard .dash-panel.section-card,
.inv-approver-dashboard .approver-overview-panel,
.inv-approver-dashboard .approval-workload-panel,
.inv-approver-dashboard .borrow-monitor-panel,
.inv-approver-dashboard .recent-panel {
    display: grid;
    gap: var(--space-4);
}

.inv-approver-dashboard .panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}

.inv-approver-dashboard .panel-head > div,
.inv-approver-dashboard .panel-head h2,
.inv-approver-dashboard .panel-head p {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.inv-approver-dashboard .metric-band,
.inv-approver-dashboard .borrow-monitor-summary,
.inv-approver-dashboard .queue-mini-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inv-approver-dashboard .metric-tile.metric-card,
.inv-approver-dashboard .borrow-monitor-summary .metric-card,
.inv-approver-dashboard .queue-mini-grid .content-box,
.inv-approver-dashboard .recent-meta-item.content-box,
.inv-approver-dashboard .borrow-monitor-meta .content-box {
    min-width: 0;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    box-shadow: none;
}

.inv-approver-dashboard .metric-tile.metric-card,
.inv-approver-dashboard .borrow-monitor-summary .metric-card {
    position: relative;
    min-height: 112px;
    align-content: start;
    padding: var(--space-4);
    overflow: hidden;
    text-decoration: none;
}

.inv-approver-dashboard .metric-tile.metric-card::before,
.inv-approver-dashboard .borrow-monitor-summary .metric-card::before {
    content: '';
    position: absolute;
    inset: var(--space-4) auto var(--space-4) 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--border-muted);
}

.inv-approver-dashboard .metric-tile.metric-card.is-warning::before,
.inv-approver-dashboard .borrow-monitor-summary .metric-card.is-warning::before {
    background: var(--color-warning);
}

.inv-approver-dashboard .metric-tile.metric-card.is-success::before {
    background: var(--color-success);
}

.inv-approver-dashboard .metric-tile.metric-card.is-danger::before,
.inv-approver-dashboard .borrow-monitor-summary .metric-card.is-danger::before {
    background: var(--color-danger);
}

.inv-approver-dashboard .borrow-monitor-summary .metric-card.is-info::before {
    background: var(--color-info);
}

.inv-approver-dashboard .metric-tile.metric-card strong,
.inv-approver-dashboard .borrow-monitor-summary .metric-card strong,
.inv-approver-dashboard .queue-mini-grid strong,
.inv-approver-dashboard .borrow-monitor-meta strong,
.inv-approver-dashboard .recent-meta-item strong {
    color: var(--text-strong);
}

.inv-approver-dashboard .approval-workload-head h3,
.inv-approver-dashboard .approval-workload-head p {
    margin: 0;
}

.inv-approver-dashboard .approval-workload-head p {
    margin-top: var(--space-1);
    font-size: 12px;
}

.inv-approver-dashboard .borrow-monitor-list,
.inv-approver-dashboard .recent-list,
.inv-approver-dashboard .approval-card-grid {
    grid-template-columns: 1fr;
}

.inv-approver-dashboard .recent-row.record-card,
.inv-approver-dashboard .borrow-monitor-row.record-card,
.inv-approver-dashboard .approval-card.record-card {
    min-width: 0;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}

.inv-approver-dashboard .borrow-monitor-row.record-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.55fr) minmax(160px, 0.28fr);
    gap: var(--space-3);
    align-items: stretch;
    padding: var(--space-4);
}

.inv-approver-dashboard .borrow-monitor-main,
.inv-approver-dashboard .recent-main {
    display: grid;
    align-content: center;
    gap: var(--space-2);
    min-width: 0;
}

.inv-approver-dashboard .recent-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.inv-approver-dashboard .borrow-monitor-meta,
.inv-approver-dashboard .recent-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    align-self: stretch;
}

.inv-approver-dashboard .borrow-monitor-meta .content-box,
.inv-approver-dashboard .recent-meta-item.content-box {
    min-height: 76px;
    align-content: center;
}

.inv-approver-dashboard .borrow-monitor-actions,
.inv-approver-dashboard .recent-action,
.inv-approver-dashboard .approval-card.record-card {
    display: grid;
    gap: var(--space-2);
}

.inv-approver-dashboard .borrow-monitor-actions {
    align-content: center;
}

.inv-approver-dashboard .borrow-monitor-actions form {
    display: contents;
}

.inv-approver-dashboard .borrow-monitor-actions .btn,
.inv-approver-dashboard .recent-action .btn,
.inv-approver-dashboard .approval-card .btn,
.inv-approver-dashboard .dash-link.btn,
.inv-approver-dashboard .wide-link.btn {
    min-height: 40px;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.inv-approver-dashboard .status-badge.badge-soft,
.inv-approver-dashboard .type-chip.badge-soft,
.inv-approver-dashboard .borrow-monitor-state.badge-soft {
    width: max-content;
    max-width: 100%;
}

.inv-approver-dashboard .borrow-monitor-state.badge-soft.is-overdue {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
}

.inv-approver-dashboard .borrow-monitor-state.badge-soft.is-due-soon {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}

.inv-approver-dashboard .borrow-monitor-state.badge-soft.is-on-track {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}

.inv-approver-dashboard .borrow-monitor-state.badge-soft.is-neutral {
    border-color: var(--border-muted);
    background: var(--surface-muted);
    color: var(--text-soft);
}

.inv-approver-dashboard .recent-row.record-card {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.55fr) auto;
    gap: var(--space-3);
    align-items: stretch;
    padding: var(--space-4);
}

.inv-approver-dashboard .recent-action {
    align-content: center;
}

.inv-approver-dashboard .approval-card.record-card {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    min-height: 72px;
    padding: var(--space-3) var(--space-4);
}

@media (max-width: 980px) {
    .inv-approver-dashboard .dash-actions,
    .inv-approver-dashboard .metric-band,
    .inv-approver-dashboard .borrow-monitor-summary,
    .inv-approver-dashboard .queue-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inv-approver-dashboard .borrow-monitor-row.record-card,
    .inv-approver-dashboard .recent-row.record-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .inv-approver-dashboard .borrow-monitor-actions,
    .inv-approver-dashboard .recent-action {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inv-approver-dashboard .approval-card.record-card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .inv-approver-dashboard .approval-card.record-card .dash-link {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .inv-approver-dashboard.page-stack {
        gap: var(--space-3);
    }

    .inv-approver-dashboard .dash-hero.page-hero,
    .inv-approver-dashboard .dash-panel.section-card {
        padding: var(--space-4);
    }

    .inv-approver-dashboard .dash-hero-copy .page-hero-icon {
        width: 42px;
        height: 42px;
    }

    .inv-approver-dashboard .dash-actions,
    .inv-approver-dashboard .metric-band,
    .inv-approver-dashboard .borrow-monitor-summary,
    .inv-approver-dashboard .queue-mini-grid,
    .inv-approver-dashboard .borrow-monitor-meta,
    .inv-approver-dashboard .recent-meta,
    .inv-approver-dashboard .borrow-monitor-actions,
    .inv-approver-dashboard .recent-action,
    .inv-approver-dashboard .approval-card.record-card {
        grid-template-columns: 1fr;
    }

    .inv-approver-dashboard .panel-head {
        display: grid;
    }

    .inv-approver-dashboard .dash-link.btn,
    .inv-approver-dashboard .wide-link.btn,
    .inv-approver-dashboard .dash-action-card.action-card {
        width: 100%;
    }
}

/* Inventory approver pending shared component alignment. */
.inventory-pending-page.page-stack {
    width: 100%;
    max-width: 1180px;
}

.inventory-pending-page .pending-hero {
    align-items: center;
}

.inventory-pending-page .pending-hero .page-hero-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    min-width: 0;
}

.inventory-pending-page .pending-hero .page-hero-icon {
    grid-row: 1 / span 3;
    width: 48px;
    height: 48px;
    margin: 0;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-strong);
    box-shadow: var(--shadow-sm);
}

.inventory-pending-page .pending-hero .pending-kicker,
.inventory-pending-page .pending-hero .page-title,
.inventory-pending-page .pending-hero .page-subtitle {
    grid-column: 2;
    min-width: 0;
}

.inventory-pending-page .pending-hero-actions {
    justify-content: flex-end;
}

.inventory-pending-page .pending-summary-grid.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventory-pending-page .pending-summary-grid .metric-card {
    display: grid;
    gap: var(--space-2);
    position: relative;
    min-height: 112px;
    align-content: start;
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
    overflow: hidden;
    text-decoration: none;
}

.inventory-pending-page .pending-summary-grid .metric-card::before {
    content: '';
    position: absolute;
    inset: var(--space-4) auto var(--space-4) 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--border-muted);
}

.inventory-pending-page .pending-summary-grid .metric-card.is-warning::before {
    background: var(--color-warning);
}

.inventory-pending-page .pending-summary-grid .metric-card.is-info::before {
    background: var(--color-info);
}

.inventory-pending-page .pending-summary-grid .metric-card.is-success::before {
    background: var(--color-success);
}

.inventory-pending-page .pending-summary-grid .metric-head {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.inventory-pending-page .pending-summary-grid .metric-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
}

.inventory-pending-page .pending-summary-grid .metric-card strong {
    color: var(--text-strong);
    font-size: 32px;
    line-height: 1;
}

.inventory-pending-page .pending-panel.section-card {
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.inventory-pending-page .pending-panel-head,
.inventory-pending-page .request-card-head,
.inventory-pending-page .request-card-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.inventory-pending-page .pending-panel-head {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}

.inventory-pending-page .pending-panel-head > div,
.inventory-pending-page .pending-panel-head h2,
.inventory-pending-page .pending-panel-head p {
    min-width: 0;
    margin: 0;
}

.inventory-pending-page .pending-request-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.inventory-pending-page .pending-request-card.record-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}

.inventory-pending-page .pending-request-card .request-card-head {
    grid-column: 1;
    align-items: center;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}

.inventory-pending-page .pending-request-card .request-meta-grid,
.inventory-pending-page .pending-request-card .request-purpose,
.inventory-pending-page .pending-request-card .request-card-actions {
    grid-column: 1;
}

.inventory-pending-page .pending-request-card .request-card-actions {
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
}

.inventory-pending-page .request-id {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

.inventory-pending-page .pending-request-card h3 {
    margin: var(--space-1) 0 0;
    color: var(--text-strong);
    font-size: 16px;
    line-height: 1.35;
}

.inventory-pending-page .request-card-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.inventory-pending-page .type-pill.badge-soft,
.inventory-pending-page .status-badge.badge-soft {
    flex: 0 0 auto;
}

.inventory-pending-page .type-pill.badge-soft.borrow {
    border-color: var(--color-info-border);
    background: var(--color-info-soft);
    color: var(--color-info-ink);
}

.inventory-pending-page .type-pill.badge-soft.issue {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}

.inventory-pending-page .request-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-2);
}

.inventory-pending-page .request-meta-grid .content-box,
.inventory-pending-page .request-purpose.content-box {
    min-width: 0;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    box-shadow: none;
}

.inventory-pending-page .request-meta-grid span,
.inventory-pending-page .request-purpose span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}

.inventory-pending-page .request-meta-grid strong,
.inventory-pending-page .request-purpose p {
    color: var(--text-strong);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.inventory-pending-page .request-purpose p {
    margin: 0;
    line-height: 1.45;
}

.inventory-pending-page .request-card-actions {
    align-items: center;
    flex-wrap: wrap;
}

.inventory-pending-page .pending-link.btn,
.inventory-pending-page .open-btn.btn {
    min-height: 40px;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .inventory-pending-page .pending-panel-head {
        display: grid;
    }

    .inventory-pending-page .pending-hero-actions {
        justify-content: flex-start;
    }

    .inventory-pending-page .pending-summary-grid.metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .inventory-pending-page .pending-summary-grid.metric-grid,
    .inventory-pending-page .request-meta-grid,
    .inventory-pending-page .pending-request-card.record-card {
        grid-template-columns: 1fr;
    }

    .inventory-pending-page .pending-panel.section-card {
        padding: var(--space-4);
    }

    .inventory-pending-page .pending-hero .page-hero-icon {
        width: 42px;
        height: 42px;
    }

    .inventory-pending-page .pending-request-card .request-card-head,
    .inventory-pending-page .pending-request-card .request-meta-grid,
    .inventory-pending-page .pending-request-card .request-purpose,
    .inventory-pending-page .pending-request-card .request-card-actions {
        grid-column: 1;
        grid-row: auto;
    }

    .inventory-pending-page .pending-request-card .request-card-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .inventory-pending-page .pending-link.btn,
    .inventory-pending-page .open-btn.btn,
    .inventory-pending-page .pending-hero-actions {
        width: 100%;
    }
}

/* Inventory approver borrow history shared component alignment. */
.borrow-history-page {
    width: 100%;
    max-width: 1180px;
}

.borrow-history-page .borrow-hero {
    align-items: center;
}

.borrow-history-page .borrow-hero .page-hero-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
}

.borrow-history-page .borrow-hero .page-hero-icon {
    grid-row: 1 / span 3;
    width: 48px;
    height: 48px;
    margin: 0;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-strong);
    box-shadow: var(--shadow-sm);
}

.borrow-history-page .borrow-hero .borrow-kicker,
.borrow-history-page .borrow-hero .page-title,
.borrow-history-page .borrow-hero .page-subtitle {
    grid-column: 2;
}

.borrow-history-page .borrow-hero-actions {
    justify-content: flex-end;
}

.borrow-history-page .borrow-summary-grid.metric-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.borrow-history-page .borrow-summary-grid .metric-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    position: relative;
    min-height: 112px;
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
    overflow: hidden;
}

.borrow-history-page .borrow-summary-grid .metric-card::before {
    content: '';
    position: absolute;
    inset: var(--space-4) auto var(--space-4) 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--border-muted);
}

.borrow-history-page .borrow-summary-grid .metric-card.is-warning::before {
    background: var(--color-warning);
}

.borrow-history-page .borrow-summary-grid .metric-card.is-info::before {
    background: var(--color-info);
}

.borrow-history-page .borrow-summary-grid .metric-card.is-success::before {
    background: var(--color-success);
}

.borrow-history-page .borrow-summary-grid .metric-card.is-danger::before {
    background: var(--color-danger);
}

.borrow-history-page .borrow-summary-grid .metric-card.is-active {
    border-color: var(--color-primary-border);
}

.borrow-history-page .borrow-summary-grid .metric-icon {
    grid-row: 1 / span 2;
}

.borrow-history-page .borrow-summary-grid .metric-label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.borrow-history-page .borrow-summary-grid .metric-value {
    color: var(--text-strong);
    font-size: 32px;
    line-height: 1;
}

.borrow-history-page .borrow-panel.section-card {
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.borrow-history-page .borrow-panel-head,
.borrow-history-page .borrow-card-head,
.borrow-history-page .borrow-card-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.borrow-history-page .borrow-panel-head {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}

.borrow-history-page .borrow-list {
    display: grid;
    gap: var(--space-3);
}

.borrow-history-page .borrow-card.record-card {
    position: relative;
    gap: var(--space-3);
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
    overflow: hidden;
}

.borrow-history-page .borrow-card.record-card::before {
    content: '';
    position: absolute;
    inset: var(--space-4) auto var(--space-4) 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--border-muted);
}

.borrow-history-page .borrow-card.record-card.is-pending::before {
    background: var(--color-warning);
}

.borrow-history-page .borrow-card.record-card.is-borrowed::before {
    background: var(--color-info);
}

.borrow-history-page .borrow-card.record-card.is-due-soon::before {
    background: var(--color-warning);
}

.borrow-history-page .borrow-card.record-card.is-returned::before {
    background: var(--color-success);
}

.borrow-history-page .borrow-card.record-card.is-rejected::before,
.borrow-history-page .borrow-card.record-card.is-overdue::before {
    background: var(--color-danger);
}

.borrow-history-page .borrow-card.record-card.is-overdue {
    border-color: var(--color-danger-border);
}

.borrow-history-page .borrow-card.record-card.is-due-soon {
    border-color: var(--color-warning-border);
}

.borrow-history-page .borrow-card h3 {
    margin: var(--space-1) 0 0;
    color: var(--text-strong);
    font-size: 16px;
}

.borrow-history-page .borrow-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.borrow-history-page .borrow-id {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
}

.borrow-history-page .borrow-state.badge-soft {
    flex: 0 0 auto;
}

.borrow-history-page .borrow-state.badge-soft.is-pending {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}

.borrow-history-page .borrow-state.badge-soft.is-borrowed {
    border-color: var(--color-info-border);
    background: var(--color-info-soft);
    color: var(--color-info-ink);
}

.borrow-history-page .borrow-state.badge-soft.is-due-soon {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}

.borrow-history-page .borrow-state.badge-soft.is-returned {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}

.borrow-history-page .borrow-state.badge-soft.is-rejected,
.borrow-history-page .borrow-state.badge-soft.is-overdue {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
}

.borrow-history-page .borrow-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}

.borrow-history-page .borrow-info-grid .content-box {
    min-width: 0;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    box-shadow: none;
}

.borrow-history-page .borrow-info-grid span,
.borrow-history-page .borrow-card-actions > span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}

.borrow-history-page .borrow-info-grid strong {
    color: var(--text-strong);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.borrow-history-page .borrow-card-actions {
    align-items: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
    justify-content: space-between;
    gap: var(--space-3);
}

.borrow-history-page .borrow-card-actions form {
    margin: 0;
    display: flex;
}

.borrow-history-page .borrow-card-action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.borrow-history-page .borrow-card-action-buttons form .btn {
    width: 100%;
}

@media (max-width: 980px) {
    .borrow-history-page .borrow-summary-grid.metric-grid,
    .borrow-history-page .borrow-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .borrow-history-page .borrow-panel-head,
    .borrow-history-page .borrow-card-head,
    .borrow-history-page .borrow-card-actions {
        display: grid;
    }

    .borrow-history-page .borrow-card-action-buttons {
        justify-content: flex-start;
    }

    .borrow-history-page .borrow-hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .borrow-history-page .borrow-summary-grid.metric-grid,
    .borrow-history-page .borrow-info-grid {
        grid-template-columns: 1fr;
    }

    .borrow-history-page .borrow-panel.section-card {
        padding: var(--space-4);
    }

    .borrow-history-page .borrow-hero .page-hero-icon {
        width: 42px;
        height: 42px;
    }

    .borrow-history-page .borrow-card-actions {
        align-items: stretch;
    }

    .borrow-history-page .borrow-link.btn,
    .borrow-history-page .borrow-hero-actions {
        width: 100%;
    }

    .borrow-history-page .borrow-card-action-buttons {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .borrow-history-page .borrow-card-action-buttons form {
        width: 100%;
    }
}



/* Inventory approver approve page components. Centralized from app/Modules/Inventory/Views/approver/approve.php. */
.inventory-review-page {
    display: grid;
    gap: 14px;
}
.review-hero,
.review-card {
    border: 1px solid #dbe6f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}
.review-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    background: #fbfdff;
}
.review-kicker {
    width: fit-content;
    display: inline-flex;
    margin-bottom: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}
.review-hero h1,
.review-card h2,
.item-title strong {
    margin: 0;
    color: #0f172a;
}
.review-hero h1 {
    font-size: 28px;
    line-height: 1.18;
}
.review-hero p,
.review-card-head p,
.action-card p,
.closed-state p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}
.review-hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.review-link,
.review-actions button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
}
.review-link {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #ffffff;
}
.review-link.subtle {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #0f172a;
}
.review-alert {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 800;
}
.review-alert.is-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}
.review-alert.is-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}
.review-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    align-items: start;
}
.review-main,
.review-side {
    display: grid;
    gap: 14px;
}
.review-side {
    position: sticky;
    top: 96px;
}
.review-card {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
}
.review-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eef6;
}
.request-id {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}
.review-card h2 {
    font-size: 19px;
}
.request-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}
.info-item,
.purpose-panel,
.summary-grid div {
    display: grid;
    gap: 4px;
}
.info-item {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    min-height: 48px;
    padding: 10px 12px;
    border-bottom: 1px solid #e8eef6;
    background: #ffffff;
}
.info-item:last-child {
    border-bottom: 0;
}
.purpose-panel {
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}
.summary-grid div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e8eef6;
}
.summary-grid div:last-child {
    border-bottom: 0;
}
.info-item span,
.purpose-panel span,
.summary-grid span,
.item-metrics span,
.item-title span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}
.info-item strong,
.summary-grid strong,
.item-metrics strong {
    color: #0f172a;
    font-size: 13.5px;
}
.purpose-panel p {
    margin: 0;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.55;
}
.note-panel {
    background: #fffbeb;
    border-color: #fde68a;
}
.item-count {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.item-list {
    display: grid;
    gap: 8px;
}
.item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}
.item-row.is-risk {
    border-color: var(--color-danger-border);
    background: #fff7f7;
}
.item-title {
    display: grid;
    gap: 4px;
}
.item-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.item-metrics div {
    display: grid;
    gap: 3px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}
.summary-grid {
    display: grid;
    gap: 0;
}
.summary-grid strong {
    font-size: 22px;
    line-height: 1;
}
.summary-grid strong.is-danger {
    color: #b91c1c;
}
.action-card {
    border-color: #bfdbfe;
    background: #fbfdff;
}
.review-actions {
    display: grid;
    gap: 8px;
}
.review-actions .approve-btn {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
}
.review-actions .reject-btn {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}
.closed-state {
    display: grid;
    gap: 10px;
}
.review-empty {
    padding: 20px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
    font-weight: 800;
}
@media (max-width: 980px) {
    .review-layout {
        grid-template-columns: 1fr;
    }
    .review-side {
        position: static;
    }
}
@media (max-width: 720px) {
    .review-hero,
    .review-card-head,
    .item-row {
        display: grid;
    }
    .review-hero-actions {
        justify-content: flex-start;
    }
    .request-info-grid,
    .item-metrics {
        grid-template-columns: 1fr;
    }
    .info-item {
        grid-template-columns: 1fr;
        align-items: start;
    }
}
@media (max-width: 560px) {
    .review-hero,
    .review-card {
        padding: 14px;
        border-radius: 16px;
    }
    .review-hero h1 {
        font-size: 23px;
    }
    .review-link,
    .review-hero-actions,
    .review-actions button {
        width: 100%;
    }
}
/* Inventory approver approve page final layout. Scoped to avoid request-form item row collisions. */
.inventory-review-page {
    gap: 16px;
    color: #0f172a;
}
.inventory-review-page .review-hero,
.inventory-review-page .review-card {
    border-color: #dbe7f4;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.055);
}
.inventory-review-page .review-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 360px) auto;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
}
.inventory-review-page .review-hero-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.inventory-review-page .review-kicker {
    margin: 0;
    border: 1px solid #bfdbfe;
}
.inventory-review-page .review-hero h1 {
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.15;
}
.inventory-review-page .review-hero p {
    max-width: 720px;
}
.inventory-review-page .review-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.inventory-review-page .review-hero-metrics div {
    min-width: 0;
    min-height: 74px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #dbe7f4;
    border-radius: 14px;
    background: #ffffff;
}
.inventory-review-page .review-hero-metrics span {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
}
.inventory-review-page .review-hero-metrics strong {
    color: #0f172a;
    font-size: 24px;
    line-height: 1;
    font-weight: 900;
}
.inventory-review-page .review-hero-metrics .is-danger {
    border-color: var(--color-danger-border);
    background: #fef2f2;
}
.inventory-review-page .review-hero-metrics .is-danger strong {
    color: #b91c1c;
}
.inventory-review-page .review-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 150px;
}
.inventory-review-page .review-link {
    min-height: 42px;
    border-radius: 13px;
}
.inventory-review-page .review-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.inventory-review-page .review-side {
    position: static;
    grid-template-columns: minmax(0, 1fr);
}
.inventory-review-page .review-card {
    gap: 14px;
    padding: 18px;
}
.inventory-review-page .review-card-head {
    align-items: center;
    padding-bottom: 12px;
    border-bottom-color: #e6edf5;
}
.inventory-review-page .request-id {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.inventory-review-page .review-card h2 {
    margin-top: 4px;
    font-size: 20px;
    line-height: 1.25;
}
.inventory-review-page .review-request-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.inventory-review-page .request-type-banner {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.inventory-review-page .request-type-banner.is-borrow {
    border-color: var(--color-info);
    background: var(--color-info-soft);
}
.inventory-review-page .request-type-banner.is-issue {
    border-color: var(--color-success);
    background: var(--color-success-soft);
}
.inventory-review-page .request-type-banner span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}
.inventory-review-page .request-type-banner strong {
    color: var(--text-strong);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.3;
}
.inventory-review-page .request-type-banner p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}
.inventory-review-page .info-item,
.inventory-review-page .purpose-panel,
.inventory-review-page .review-summary-grid div,
.inventory-review-page .review-item-metrics div {
    border: 1px solid #dbe7f4;
    border-radius: 14px;
    background: #ffffff;
}
.inventory-review-page .info-item {
    min-height: 76px;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 7px;
    padding: 12px 14px;
}
.inventory-review-page .info-item.info-wide {
    grid-column: span 2;
}
.inventory-review-page .info-item span,
.inventory-review-page .purpose-panel span,
.inventory-review-page .review-summary-grid span,
.inventory-review-page .review-item-metrics span,
.inventory-review-page .review-item-title span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}
.inventory-review-page .info-item strong,
.inventory-review-page .review-summary-grid strong,
.inventory-review-page .review-item-metrics strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.inventory-review-page .purpose-panel {
    padding: 14px 16px;
    background: #fbfdff;
}
.inventory-review-page .purpose-panel p {
    font-size: 14px;
    line-height: 1.7;
}
.inventory-review-page .note-panel {
    background: #fffbeb;
    border-color: #fde68a;
}
.inventory-review-page .items-card {
    gap: 16px;
}
.inventory-review-page .item-count {
    min-height: 34px;
}
.inventory-review-page .item-list {
    gap: 10px;
}
.inventory-review-page .review-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dbe7f4;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}
.inventory-review-page .review-item-row.is-risk {
    border-color: var(--color-danger-border);
    background: #fff7f7;
}
.inventory-review-page .review-item-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}
.inventory-review-page .review-item-photo {
    width: 84px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}
.inventory-review-page .review-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inventory-review-page .review-item-title {
    min-width: 0;
    display: grid;
    gap: 6px;
}
.inventory-review-page .review-item-title strong {
    color: #0f172a;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.inventory-review-page .review-item-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.inventory-review-page .review-item-metrics div {
    display: grid;
    gap: 5px;
    min-height: 64px;
    padding: 10px 12px;
    background: #f8fbff;
}
.inventory-review-page .review-summary-grid {
    display: grid;
    gap: 8px;
}
.inventory-review-page .review-summary-grid div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 10px 12px;
}
.inventory-review-page .review-summary-grid strong {
    font-size: 26px;
    line-height: 1;
}
.inventory-review-page .review-summary-grid strong.is-danger {
    color: #b91c1c;
}
.inventory-review-page .action-card {
    border-color: #bfdbfe;
}
.inventory-review-page .review-actions {
    gap: 10px;
}
.inventory-review-page .review-actions button {
    min-height: 44px;
    border-radius: 13px;
    font-size: 14px;
}

@media (max-width: 1180px) {
    .inventory-review-page .review-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .inventory-review-page .review-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .inventory-review-page .review-layout {
        grid-template-columns: 1fr;
    }
    .inventory-review-page .review-side {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .inventory-review-page {
        gap: 14px;
    }
    .inventory-review-page .review-hero,
    .inventory-review-page .review-card {
        padding: 16px;
        border-radius: 16px;
    }
    .inventory-review-page .review-hero-metrics,
    .inventory-review-page .review-request-grid,
    .inventory-review-page .review-side,
    .inventory-review-page .review-item-row {
        grid-template-columns: 1fr;
    }
    .inventory-review-page .info-item.info-wide {
        grid-column: auto;
    }
    .inventory-review-page .review-card-head {
        display: grid;
        justify-items: start;
    }
    .inventory-review-page .review-hero-actions,
    .inventory-review-page .review-item-metrics {
        grid-template-columns: 1fr;
    }
    .inventory-review-page .review-link,
    .inventory-review-page .review-actions button {
        width: 100%;
    }
    .inventory-review-page .review-item-main {
        grid-template-columns: 72px minmax(0, 1fr);
    }
    .inventory-review-page .review-item-photo {
        width: 72px;
    }
}

/* Inventory approver approve shared component alignment. */
.inventory-review-page.page-stack {
    width: 100%;
    max-width: 1180px;
}

.inventory-review-page .review-hero.page-hero,
.inventory-review-page .review-card.section-card,
.inventory-review-page .review-item-row.record-card {
    box-shadow: var(--shadow-card);
}

.inventory-review-page .review-hero.page-hero {
    align-items: center;
}

.inventory-review-page .review-hero-metrics.metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inventory-review-page .review-hero-metrics .metric-card,
.inventory-review-page .content-box,
.inventory-review-page .record-card {
    min-width: 0;
}

.inventory-review-page .review-alert.alert-box {
    margin: 0;
}

.inventory-review-page .review-card.section-card {
    gap: var(--space-4);
}

.inventory-review-page .request-type-banner.content-box.is-borrow {
    border-color: var(--color-info-border);
    background: var(--color-info-soft);
    color: var(--color-info-ink);
}

.inventory-review-page .request-type-banner.content-box.is-issue {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}

.inventory-review-page .review-item-row.record-card.is-risk {
    border-color: var(--color-danger-border);
}

.inventory-review-page .status-badge.badge-soft,
.inventory-review-page .item-count.badge-soft {
    width: max-content;
    max-width: 100%;
}

.inventory-review-page .review-actions.form-actions {
    display: grid;
    gap: var(--space-2);
}

.inventory-review-page .review-actions.form-actions .btn {
    width: 100%;
}

@media (max-width: 760px) {
    .inventory-review-page .review-hero-metrics.metric-grid {
        grid-template-columns: 1fr;
    }
}

/* Inventory approver approve decision layout. */
.inventory-review-page .review-action-card.section-card {
    gap: var(--space-4);
}

.inventory-review-page .review-action-card > h2 {
    margin: 0;
}

.inventory-review-page .review-action-card > p {
    max-width: 720px;
}

.inventory-review-page .review-actions.review-action-grid.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.inventory-review-page .review-actions.review-action-grid.form-actions .review-decision-card.btn {
    width: auto;
    min-width: 72px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-3);
    text-align: center;
    white-space: nowrap;
    line-height: 1.35;
}

.inventory-review-page .review-decision-title {
    font-size: 16px;
    font-weight: 900;
}

.inventory-review-page .review-decision-note {
    max-width: 24rem;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    opacity: 0.9;
}

@media (max-width: 760px) {
    .inventory-review-page .review-actions.review-action-grid.form-actions {
        justify-content: flex-start;
    }
}



.external-notifications-page .page-hero-main {
  align-items: flex-start;
}

.external-channel-form.filter-panel {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
}

.external-channel-form-grid.filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.external-channel-form-grid .form-field.is-wide {
  grid-column: span 2;
}

.external-channel-form-grid > .form-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.external-log-filter-grid.filter-grid {
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 0.45fr) minmax(220px, 0.65fr) auto;
  align-items: end;
}

.external-log-filter-grid > .form-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.external-channel-active {
  justify-content: start;
}

.external-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  max-width: 100%;
  white-space: nowrap;
}

.external-status-label {
  color: var(--text-strong);
  font-weight: var(--font-semibold);
}

.external-channel-list.record-list {
  gap: var(--space-3);
}

.external-channel-card.record-card,
.external-log-card.record-card {
  display: grid;
  gap: var(--space-3);
}

.external-log-list.record-list {
  gap: var(--space-4);
}

.external-log-section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.external-log-card.record-card {
  position: relative;
  padding: var(--space-4);
  border-inline-start: 4px solid var(--border-muted);
}

.external-log-card.record-card.is-success {
  border-inline-start-color: var(--color-success);
}

.external-log-card.record-card.is-danger {
  border-inline-start-color: var(--color-danger);
}

.external-log-card.record-card.is-warning {
  border-inline-start-color: var(--color-warning);
}

.external-log-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.external-log-id {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--ui-control-height);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.external-log-id .action-icon {
  flex: 0 0 auto;
}

.external-log-card-head .record-main {
  min-width: 0;
}

.external-log-card-head .record-title {
  overflow-wrap: anywhere;
}

.external-log-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-soft);
}

.external-log-fact {
  min-width: 0;
}

.external-log-fact .record-detail-text {
  margin-top: var(--space-1);
  overflow-wrap: anywhere;
}

.external-log-message-block {
  min-width: 0;
}

.external-log-message-block .content-title {
  margin-bottom: var(--space-2);
}

.external-target-id {
  overflow-wrap: anywhere;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
}

.external-inline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.external-channel-actions.form-actions {
  justify-content: flex-end;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  background: transparent;
  box-shadow: none;
}

.external-channel-actions form {
  margin: 0;
}

.external-log-message {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.external-technical-details {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.external-technical-details summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-weight: var(--font-semibold);
  cursor: pointer;
  list-style: none;
}

.external-technical-details summary::-webkit-details-marker {
  display: none;
}

.external-technical-details .record-detail-grid {
  margin-top: var(--space-3);
}

@media (max-width: 1180px) {
  .external-channel-form-grid.filter-grid,
  .external-log-filter-grid.filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .external-channel-form-grid .form-field.is-wide,
  .external-log-filter-grid .form-field.is-wide {
    grid-column: span 2;
  }

  .external-log-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .external-channel-form-grid.filter-grid,
  .external-log-filter-grid.filter-grid,
  .external-channel-form-grid .form-field.is-wide,
  .external-log-filter-grid .form-field.is-wide {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .external-channel-actions.form-actions,
  .external-channel-actions form,
  .external-channel-actions .btn {
    width: 100%;
  }

  .external-log-section-actions {
    justify-content: flex-start;
  }

  .external-log-card.record-card {
    padding: var(--space-3);
  }

  .external-log-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .external-log-id {
    grid-column: 1 / -1;
    min-height: auto;
  }

  .external-log-facts {
    grid-template-columns: 1fr;
  }
}
/* Inventory item detail shared component alignment. */
.asset-detail-page {
    width: 100%;
    max-width: 1180px;
}

.asset-detail-page .detail-hero.page-hero {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
}

.asset-detail-page .detail-photo {
    width: 150px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.asset-detail-page .detail-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset-detail-page .asset-code-line {
    color: var(--text-soft);
    margin-bottom: var(--space-2);
}

.asset-detail-page .detail-status.badge-soft {
    width: max-content;
    max-width: 100%;
}

.asset-detail-page .detail-status.badge-soft.ok {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}

.asset-detail-page .detail-status.badge-soft.low {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}

.asset-detail-page .detail-status.badge-soft.out {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
}

.asset-detail-page .detail-section.section-card {
    gap: var(--space-4);
}

.asset-detail-page .detail-section .section-title {
    margin: 0;
}

.asset-detail-page .detail-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.asset-detail-page .detail-grid .content-box {
    min-width: 0;
}

.asset-detail-page .detail-grid span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.asset-detail-page .detail-grid strong {
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.asset-detail-page .detail-link {
    font-size: 12px;
}

@media (max-width: 640px) {
    .asset-detail-page .detail-hero.page-hero {
        grid-template-columns: 1fr;
    }

    .asset-detail-page .detail-photo {
        width: 100%;
        max-width: 220px;
    }
}

/* Inventory item create page components. Centralized from app/Modules/Inventory/Views/items/create.php. */
.item-create-page *,
.scan-modal-shell * {
    box-sizing: border-box;
}
.item-create-page {
    min-height: calc(100vh - 96px);
    padding: 18px clamp(12px, 2vw, 28px) 32px;
    background: #f6f8fb;
}
.item-create-shell {
    width: min(1100px, 100%);
    margin: 0 auto;
}
.item-create-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(18px, 3vw, 28px);
    margin-bottom: 16px;
    border: 1px solid #dbe7f3;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #eef6ff 62%, #f0fdf4 100%);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}
.item-create-kicker {
    margin-bottom: 6px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}
.item-create-title-block h1 {
    margin: 0;
    color: #06122b;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.08;
    letter-spacing: 0;
}
.item-create-title-block p {
    max-width: 660px;
    margin: 10px 0 0;
    color: #536176;
    font-size: 15px;
    line-height: 1.65;
}
.item-create-back,
.btn-secondary,
.btn-primary,
.btn-scan,
.scan-modal-head button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    padding: 0 16px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.item-create-back,
.btn-secondary,
.scan-modal-head button {
    background: #ffffff;
    color: #0f172a;
}
.btn-primary,
.btn-scan {
    border-color: #0b74de;
    background: #0b74de;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(11, 116, 222, 0.2);
}
.item-create-back:hover,
.btn-secondary:hover,
.scan-modal-head button:hover {
    background: #f8fafc;
}
.btn-primary:hover,
.btn-scan:hover {
    background: #075fb9;
    border-color: #075fb9;
}
.form-alert {
    margin-bottom: 14px;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 700;
}
.form-alert-error {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #991b1b;
}
.form-alert-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}
.item-create-form {
    display: grid;
    gap: 14px;
}
.form-section {
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: #ffffff;
    padding: clamp(16px, 2.3vw, 22px);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
}
.section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6edf5;
}
.section-head.compact {
    margin-bottom: 10px;
}
.section-head h2 {
    margin: 0;
    color: #10233f;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: 0;
}
.section-head p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}
.form-grid {
    display: grid;
    gap: 14px;
}
.two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.three-col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.field-wide {
    grid-column: 1 / -1;
}
.field {
    display: grid;
    gap: 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}
.field input:not([data-app-choice-option]),
.field select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border: 1px solid #cad7e5;
    border-radius: 12px;
    background: #fbfdff;
    color: #0f172a;
    padding: 0 13px;
    font: inherit;
    font-weight: 700;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.field input:not([data-app-choice-option]):focus,
.field select:focus {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.scan-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}
.type-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.type-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #f8fafc;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.type-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.choice-mark {
    width: 22px;
    height: 22px;
    border: 2px solid #94a3b8;
    border-radius: 8px;
    background: #ffffff;
    flex: 0 0 auto;
}
.type-choice input:checked + .choice-mark {
    border-color: #0b74de;
    background: #0b74de;
    box-shadow: inset 0 0 0 4px #ffffff;
}
.type-choice:has(input:checked) {
    border-color: #93c5fd;
    background: #eff6ff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}
.choice-text {
    color: #10233f;
    font-weight: 900;
    line-height: 1.35;
}
.asset-details-card {
    margin-top: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    padding: 14px;
    background: #f8fbff;
}
.asset-details-card[hidden] {
    display: none;
}
.asset-details-head {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dbeafe;
}
.asset-details-title {
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}
.asset-details-subtitle {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}
.asset-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.required-mark {
    color: #dc2626;
    font-weight: 900;
}
.item-upload-field {
    display: grid;
    gap: 6px;
}
.item-upload-label {
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}
.item-file-drop {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 68px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    padding: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.item-file-drop:hover,
.item-file-drop:focus-within {
    border-color: #93c5fd;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}
.item-file-drop.has-file {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
}
.item-file-drop.has-file .item-file-icon {
    border-color: var(--color-success-border);
    color: var(--color-success-ink);
}
.item-file-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.item-file-icon {
    width: 40px;
    height: 40px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #ffffff;
    color: #0f766e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
}
.item-file-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.item-file-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item-file-sub {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
}
.form-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 2px;
    padding: 14px 0 0;
    background: linear-gradient(180deg, rgba(246, 248, 251, 0), #f6f8fb 34%);
}
.form-actions .btn-primary,
.form-actions .btn-secondary {
    min-width: 160px;
}
.scan-modal-shell {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .64);
}
.scan-modal-shell.is-open {
    display: flex;
}
.scan-modal-card {
    width: min(440px, 100%);
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
}
.scan-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.scan-reader,
.scan-video {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #020617;
}
.scan-reader.is-hidden,
.scan-video.is-hidden {
    display: none;
}
.scan-video {
    display: none;
}
.scan-video.is-open {
    display: block;
}
.scan-hint {
    margin-top: 9px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}
@media (max-width: 860px) {
    .item-create-page {
        padding: 10px 10px 24px;
    }
    .item-create-hero {
        border-radius: 16px;
    }
    .two-col,
    .three-col,
    .asset-details-grid,
    .type-choice-grid {
        grid-template-columns: 1fr;
    }
    .form-actions {
        padding: 12px 0 0;
    }
}
@media (max-width: 560px) {
    .item-create-hero {
        display: grid;
        gap: 14px;
    }
    .item-create-title-block h1 {
        font-size: 28px;
    }
    .item-create-back,
    .form-actions .btn-primary,
    .form-actions .btn-secondary {
        width: 100%;
    }
    .scan-field-row {
        grid-template-columns: 1fr;
    }
    .form-actions {
        flex-direction: column-reverse;
    }
    .form-section {
        border-radius: 15px;
    }
    .item-file-drop {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 10px;
    }
    .item-file-icon {
        width: 36px;
        height: 36px;
    }
}



/* Inventory item manage page components. Centralized from app/Modules/Inventory/Views/items/manage.php. */
.manage-page {
        display: grid;
        gap: 16px;
        max-width: 100%;
        overflow-x: hidden;
    }
    .manage-page *,
    .manage-page *::before,
    .manage-page *::after {
        box-sizing: border-box;
    }
    .manage-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px;
        border: 1px solid #dbe5f3;
        border-radius: 12px;
        background: linear-gradient(135deg, #f8fbff 0%, #eef7f4 100%);
        min-width: 0;
        max-width: 100%;
    }
    .manage-title {
        min-width: 0;
        display: grid;
        gap: 4px;
    }
    .manage-title span {
        color: #0f766e;
        font-size: 12px;
        font-weight: 800;
    }
    .manage-title h1 {
        margin: 0;
        color: #0f172a;
        font-size: 30px;
        line-height: 1.18;
    }
    .manage-title p {
        margin: 0;
        color: #64748b;
    }
    .action-buttons,
    .manage-filter-actions,
    .item-actions,
    .item-edit-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }
    .action-buttons {
        justify-content: flex-end;
    }
    .action-btn,
    .manage-filter-actions button,
    .action-pill,
    .item-edit-actions button {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        padding: 8px 12px;
        font-weight: 800;
        text-decoration: none;
        border: 1px solid transparent;
        cursor: pointer;
    }
    .action-btn.primary,
    .manage-filter-actions button[type="submit"] {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
    }
    .action-btn.secondary {
        background: #fff;
        border-color: #cbd5e1;
        color: #334155;
    }
    .manage-alert {
        border-radius: 10px;
        padding: 10px 12px;
        font-weight: 700;
    }
    .manage-alert.error {
        background: #fee2e2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }
    .manage-alert.success {
        background: #dcfce7;
        color: #166534;
        border: 1px solid #bbf7d0;
    }
    .manage-filter-card {
        display: grid;
        gap: 14px;
        padding: 14px;
        border: 1px solid #dbe5f3;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    .manage-filter-card *,
    .manage-filter-card *::before,
    .manage-filter-card *::after {
        box-sizing: border-box;
    }
    .manage-quick-filter-row {
        display: grid;
        gap: 8px;
    }
    .manage-quick-filter-label {
        color: #64748b;
        font-size: 12px;
        font-weight: 900;
    }
    .manage-quick-filter-list {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }
    .manage-quick-filter-list a {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #dbe5f3;
        border-radius: 999px;
        background: #f8fafc;
        color: #334155;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 900;
        text-decoration: none;
        transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
    }
    .manage-quick-filter-list a:hover,
    .manage-quick-filter-list a.active {
        border-color: #93c5fd;
        background: #eff6ff;
        color: #1d4ed8;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.10);
    }
    .manage-quick-filter-list strong {
        border-radius: 999px;
        background: #fff;
        color: #0f766e;
        padding: 2px 7px;
        line-height: 1.3;
    }
    .manage-filter-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(120px, .8fr));
        min-width: 0;
    }
    .manage-filter-search {
        grid-column: span 2;
    }
    .manage-filter-grid label,
    .item-edit-form label,
    .edit-asset-details-grid label {
        min-width: 0;
        display: grid;
        gap: 6px;
        color: #475569;
        font-size: 12px;
        font-weight: 800;
    }
    .manage-filter-grid input,
    .manage-filter-grid select,
    .item-edit-form input,
    .item-edit-form select {
        width: 100%;
        min-height: 42px;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        background: #f8fafc;
        color: #0f172a;
        padding: 9px 11px;
    }
    .manage-filter-actions {
        justify-content: flex-start;
        padding-top: 12px;
        border-top: 1px solid #eef2f7;
    }
    .manage-filter-actions .action-btn.secondary {
        min-height: 38px;
    }
    .manage-empty {
        border: 1px dashed #cbd5e1;
        border-radius: 12px;
        background: #f8fafc;
        color: #64748b;
        padding: 24px;
        text-align: center;
    }
    .manage-category-list {
        display: grid;
        gap: 20px;
        min-width: 0;
        max-width: 100%;
    }
    .manage-category-section {
        display: grid;
        gap: 10px;
        min-width: 0;
        max-width: 100%;
    }
    .manage-category-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px;
        padding: 0 2px 8px;
        border-bottom: 1px solid #dbe5f3;
    }
    .manage-category-head span {
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
    }
    .manage-category-head h2 {
        margin: 2px 0 0;
        color: #0f172a;
        font-size: 20px;
    }
    .manage-category-head strong {
        flex: 0 0 auto;
        border: 1px solid #dbe5f3;
        border-radius: 999px;
        background: #f8fafc;
        color: #475569;
        padding: 6px 10px;
        font-size: 12px;
    }
    .item-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
        gap: 12px;
        min-width: 0;
        max-width: 100%;
    }
    .item-card {
        position: relative;
        min-width: 0;
        border: 1px solid #dbe5f3;
        border-radius: 12px;
        background: #fff;
        padding: 12px;
        display: grid;
        gap: 12px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    }
    .item-card.low-row {
        border-color: #fed7aa;
    }
    .item-disabled {
        opacity: .82;
        border-color: var(--color-danger-border);
        background: #fff7f7;
    }
    .item-card-head {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
    }
    .item-photo img,
    .item-photo-placeholder {
        width: 76px;
        aspect-ratio: 1;
        border-radius: 10px;
        object-fit: cover;
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #94a3b8;
        font-size: 12px;
        text-align: center;
    }
    .item-badges {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }
    .stock-badge,
    .type-badge,
    .status-toggle-badge {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 4px 8px;
        font-size: 11px;
        font-weight: 800;
    }
    .stock-badge.ok,
    .status-toggle-badge.on {
        background: #dcfce7;
        color: #166534;
    }
    .stock-badge.low {
        background: #fef3c7;
        color: #92400e;
    }
    .stock-badge.out,
    .status-toggle-badge.off {
        background: #fee2e2;
        color: #991b1b;
    }
    .type-badge.asset {
        background: #e0f2fe;
        color: #0369a1;
    }
    .type-badge.borrowable {
        background: #dcfce7;
        color: #166534;
    }
    .cell-main {
        color: #0f172a;
        font-size: 16px;
        font-weight: 800;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
    .cell-sub {
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }
    .item-meta-grid {
        display: grid;
        gap: 8px 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 10px 0;
        border-top: 1px solid #eef2f7;
        border-bottom: 1px solid #eef2f7;
        font-size: 13px;
        color: #0f172a;
    }
    .item-meta-grid div {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .meta-label {
        display: block;
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
        margin-bottom: 2px;
    }
    .stock-wrap {
        display: grid;
        gap: 5px;
    }
    .stock-number {
        color: #0f172a;
        font-size: 18px;
        font-weight: 900;
    }
    .stock-min {
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
    }
    .stock-bar {
        height: 7px;
        background: #e5e7eb;
        border-radius: 999px;
        overflow: hidden;
    }
    .stock-bar span {
        display: block;
        height: 100%;
        border-radius: 999px;
    }
    .stock-bar span.ok { background: #10b981; }
    .stock-bar span.danger { background: #f59e0b; }
    .item-actions {
        justify-content: flex-end;
    }
    .manage-hero-actions {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .barcode-batch-toolbar {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        margin: 14px 0 18px;
        padding: 12px 14px;
        border: 1px solid #dbe5f3;
        border-radius: 12px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }
    .barcode-toolbar-head {
        display: grid;
        gap: 3px;
        min-width: 0;
    }
    .barcode-toolbar-label {
        color: #0f172a;
        font-size: 13px;
        font-weight: 900;
    }
    .barcode-toolbar-note {
        color: #64748b;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.45;
    }
    .barcode-toolbar-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
    }
    .barcode-toolbar-actions .action-btn {
        min-height: 36px;
        padding: 7px 13px;
    }
    .barcode-toolbar-actions .is-active {
        background: #0f766e;
        border-color: #0f766e;
        color: #ffffff;
    }
    .manage-main-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
    }
    .barcode-selection-count {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 6px 12px;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid #dbe5f3;
        color: #475569;
        font-size: 12px;
        font-weight: 800;
    }
    .item-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
    }
    .item-action-group {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .item-action-group-tools {
        justify-content: flex-start;
    }
    .item-action-group-state {
        justify-content: flex-end;
    }
    .action-pill {
        font-size: 13px;
    }
    .action-pill.edit {
        background: #fff7ed;
        border-color: #fed7aa;
        color: #c2410c;
    }
    .action-pill.history {
        background: #eff6ff;
        border-color: #bfdbfe;
        color: #1d4ed8;
    }
    .action-pill.enable {
        background: #dcfce7;
        border-color: var(--color-success-border);
        color: #166534;
    }
    .action-pill.disable {
        background: #fee2e2;
        border-color: var(--color-danger-border);
        color: #991b1b;
    }
    .action-pill.barcode {
        background: #f0fdfa;
        border-color: #99f6e4;
        color: #0f766e;
    }
    .action-pill.barcode:disabled {
        cursor: not-allowed;
        opacity: .58;
        transform: none;
    }
    .barcode-select-pill {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        display: none;
        align-items: center;
        gap: 6px;
        min-height: 34px;
        padding: 0 9px;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: #ffffff;
        color: #1e3a8a;
        font-size: 12px;
        font-weight: 800;
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
        cursor: pointer;
        user-select: none;
    }
    .barcode-selection-mode .barcode-select-pill {
        display: inline-flex;
    }
    .barcode-selection-mode .item-card-head {
        padding-right: 112px;
    }
    .item-card:has(.barcode-select:checked) {
        border-color: #60a5fa;
        background: #f8fbff;
    }
    .barcode-select-pill:has(input:checked) {
        background: #dbeafe;
        border-color: #60a5fa;
        color: #1d4ed8;
    }
    .barcode-select-pill input {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #1d4ed8;
    }
    .barcode-select-pill span {
        white-space: nowrap;
    }
    .barcode-modal-card {
        width: min(760px, 96vw);
        max-height: 92vh;
        overflow: auto;
        padding: 0;
    }
    .barcode-modal-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
    }
    .barcode-modal-title {
        color: #0f172a;
        font-size: 18px;
        font-weight: 900;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }
    .barcode-modal-subtitle {
        color: #64748b;
        font-size: 13px;
        font-weight: 700;
        margin-top: 3px;
        overflow-wrap: anywhere;
    }
    .barcode-modal-body {
        display: grid;
        gap: 14px;
        padding: 16px 18px;
    }
    .barcode-meta-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .barcode-meta-grid > div {
        min-width: 0;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #f8fafc;
        padding: 10px 12px;
    }
    .barcode-meta-label {
        display: block;
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
        margin-bottom: 3px;
    }
    .barcode-meta-grid strong {
        color: #0f172a;
        font-size: 13px;
        overflow-wrap: anywhere;
    }
    .barcode-preview-shell {
        border: 1px dashed #cbd5e1;
        border-radius: 12px;
        background: #ffffff;
        padding: 16px;
        overflow-x: auto;
    }
    .barcode-preview {
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .barcode-preview svg {
        display: block;
        max-width: 100%;
        height: auto;
    }
    .barcode-message {
        border-radius: 10px;
        padding: 9px 11px;
        font-size: 13px;
        font-weight: 700;
    }
    .barcode-message.is-ready {
        background: #ecfdf5;
        color: #047857;
        border: 1px solid #a7f3d0;
    }
    .barcode-message.is-empty {
        background: #fff7ed;
        color: #c2410c;
        border: 1px solid #fed7aa;
    }
    .barcode-modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
        padding: 14px 18px;
        border-top: 1px solid #e2e8f0;
        background: #f8fafc;
    }
    .barcode-modal-actions .is-print {
        background: #1d4ed8;
        border-color: #1d4ed8;
        color: #ffffff;
    }
    .barcode-modal-actions .is-download {
        background: #f0fdfa;
        border-color: #99f6e4;
        color: #0f766e;
    }
    .barcode-print-page {
        margin: 0;
        padding: 0;
        background: #fff;
        color: #0f172a;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    .barcode-print-sheet {
        display: grid;
        gap: 0;
    }
    .barcode-print-label {
        width: 6cm;
        height: 2cm;
        box-sizing: border-box;
        padding: 1.5mm 1.5mm 1mm;
        display: grid;
        gap: 0.8mm;
        align-content: start;
        justify-items: center;
        page-break-after: always;
        overflow: hidden;
    }
    .barcode-print-label .barcode-print-title {
        width: 100%;
        font-size: 9px;
        line-height: 1.1;
        font-weight: 800;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .barcode-print-label .barcode-print-svg {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .barcode-print-label .barcode-print-svg svg {
        display: block;
        width: 100%;
        height: auto;
    }
    .barcode-print-page .barcode-print-sheet {
        width: 100%;
    }
    @media print {
        .barcode-print-page {
            width: 6cm;
            height: 2cm;
            overflow: hidden;
        }
    }
    @media (max-width: 720px) {
        .manage-hero-actions,
        .barcode-batch-toolbar,
        .barcode-toolbar-actions .action-btn,
        .manage-main-actions,
        .manage-main-actions .action-btn,
        .barcode-selection-count {
            width: 100%;
        }
        .manage-hero-actions {
            justify-content: stretch;
        }
        .barcode-batch-toolbar {
            grid-template-columns: 1fr;
            margin: 12px 0 16px;
        }
        .barcode-toolbar-head,
        .barcode-toolbar-actions,
        .manage-main-actions {
            display: grid;
            grid-template-columns: 1fr;
        }
        .item-actions {
            grid-template-columns: 1fr;
        }
        .item-action-group,
        .item-action-group-tools,
        .item-action-group-state,
        .item-action-group-state .inline-form,
        .item-action-group .action-pill {
            width: 100%;
        }
        .barcode-modal-head,
        .barcode-modal-actions {
            flex-direction: column;
        }
        .barcode-modal-actions,
        .barcode-modal-actions .action-pill,
        .barcode-meta-grid {
            width: 100%;
        }
        .barcode-meta-grid {
            grid-template-columns: 1fr;
        }
        .barcode-preview-shell {
            padding: 12px;
        }
        .barcode-select-pill {
            top: 8px;
            right: 8px;
        }
        .barcode-selection-mode .item-card-head {
            padding-right: 96px;
        }
    }
    .type-group-card,
    .edit-asset-details-card {
        border: 1px solid #dbe5f3;
        border-radius: 12px;
        padding: 12px;
        background: #f8fafc;
    }
    .type-group-title,
    .edit-asset-details-title {
        color: #0f172a;
        font-weight: 800;
        margin-bottom: 8px;
    }
    .type-group-grid,
    .edit-asset-details-grid,
    .item-edit-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 10px;
    }
    .type-group-grid label {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
    }
    .edit-asset-details-card[hidden] {
        display: none;
    }
    .edit-asset-details-head {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #dbeafe;
    }
    .edit-asset-details-subtitle {
        margin-top: 3px;
        color: #64748b;
        font-size: 12px;
        line-height: 1.5;
    }
    .required-mark {
        color: #dc2626;
        font-weight: 900;
    }
    .field-label-inline {
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
    }
    .item-edit-modal {
        width: min(920px, 94vw);
        max-height: 88vh;
        overflow: auto;
        padding: 0;
    }
    .item-edit-head {
        position: static;
        top: 0;
        z-index: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 16px 18px;
        border-bottom: 1px solid #e2e8f0;
        background: #fff;
    }
    .item-edit-kicker {
        color: #0f766e;
        font-size: 12px;
        font-weight: 800;
    }
    .item-edit-title {
        margin-top: 2px;
        color: #0f172a;
        font-size: 20px;
        font-weight: 900;
    }
    .item-edit-close {
        min-width: 54px;
        min-height: 38px;
        border-radius: 10px;
        border: 1px solid #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
        font-weight: 800;
    }
    .item-edit-form {
        display: grid;
        gap: 14px;
        padding: 16px 18px 18px;
        background: #f8fafc;
    }
    .item-edit-section {
        border: 1px solid #dbe5f3;
        border-radius: 12px;
        background: #fff;
        padding: 14px;
        display: grid;
        gap: 12px;
    }
    .item-edit-section-head {
        border-bottom: 1px solid #eef2f7;
        padding-bottom: 10px;
    }
    .item-edit-section-head.compact {
        padding-bottom: 6px;
    }
    .item-edit-section-head h3 {
        margin: 0;
        color: #0f172a;
        font-size: 15px;
        font-weight: 900;
    }
    .item-edit-actions {
        position: static;
        bottom: auto;
        z-index: auto;
        justify-content: flex-end;
        margin-top: 2px;
        padding: 14px 0 0;
        border-top: 1px solid #dbe5f3;
        background: transparent;
        box-shadow: none;
    }
    .item-edit-actions button[type="submit"] {
        background: #dcfce7;
        border-color: var(--color-success-border);
        color: #166534;
    }
    .item-edit-actions button[type="button"] {
        background: #fee2e2;
        border-color: var(--color-danger-border);
        color: #991b1b;
    }
    .item-edit-grid.two {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    }
    .item-edit-wide {
        grid-column: 1 / -1;
    }
    .scan-field-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }
    .btn-scan {
        min-width: 76px;
        border: 1px solid #2563eb;
        border-radius: 10px;
        background: #2563eb;
        color: #fff;
        font-weight: 800;
    }
    .type-choice-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .item-edit-form .type-choice {
        position: relative;
        min-height: 62px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid #dbe5f3;
        border-radius: 12px;
        background: #f8fafc;
        padding: 12px;
        color: #0f172a;
        font-weight: 800;
        cursor: pointer;
    }
    .item-edit-form .type-choice input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }
    .choice-mark {
        width: 24px;
        height: 24px;
        border: 2px solid #94a3b8;
        border-radius: 7px;
        background: #fff;
        flex: 0 0 auto;
    }
    .type-choice input:checked + .choice-mark {
        border-color: #2563eb;
        background: #2563eb;
        box-shadow: inset 0 0 0 5px #fff;
    }
    .choice-text {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .item-upload-field {
        display: grid;
        gap: 6px;
    }
    .item-upload-label {
        color: #334155;
        font-size: 13px;
        font-weight: 800;
    }
    .item-edit-form .item-file-drop {
        position: relative;
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        min-height: 68px;
        border: 1px dashed #cbd5e1;
        border-radius: 12px;
        background: #f8fafc;
        padding: 12px;
        cursor: pointer;
    }
    .item-edit-form .item-file-drop:hover,
    .item-edit-form .item-file-drop:focus-within {
        border-color: #93c5fd;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
    }
    .item-edit-form .item-file-drop input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }
    .item-file-icon {
        width: 40px;
        height: 40px;
        border: 1px solid #dbe5f3;
        border-radius: 12px;
        background: #fff;
        color: #0f766e;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 900;
    }
    .item-file-copy {
        min-width: 0;
        display: grid;
        gap: 3px;
    }
    .item-file-title {
        color: #0f172a;
        font-size: 14px;
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .item-file-sub {
        color: #64748b;
        font-size: 12px;
        line-height: 1.4;
    }
    @media (max-width: 1180px) {
        .manage-filter-grid {
            grid-template-columns: repeat(2, minmax(160px, 1fr));
        }
        .manage-filter-search {
            grid-column: 1 / -1;
        }
    }
    @media (max-width: 760px) {
        .manage-hero {
            display: grid;
            padding: 14px;
        }
        .manage-title h1 {
            font-size: 24px;
        }
        .action-buttons,
        .manage-filter-actions {
            justify-content: stretch;
        }
        .action-buttons > *,
        .manage-filter-actions > * {
            flex: 1 1 auto;
            text-align: center;
        }
        .manage-filter-grid,
        .item-card-grid {
            grid-template-columns: 1fr;
        }
        .manage-filter-search {
            grid-column: auto;
        }
        .manage-quick-filter-list a {
            flex: 1 1 calc(50% - 8px);
            justify-content: space-between;
        }
        .item-card-head {
            grid-template-columns: 64px minmax(0, 1fr);
        }
        .item-photo img,
        .item-photo-placeholder {
            width: 64px;
        }
        .item-meta-grid {
            grid-template-columns: 1fr;
        }
        .item-actions > * {
            flex: 1 1 auto;
        }
        .item-edit-grid.two,
        .type-choice-grid,
        .scan-field-row {
            grid-template-columns: 1fr;
        }
        .item-edit-head {
            align-items: flex-start;
        }
        .item-edit-actions {
            display: grid;
            grid-template-columns: 1fr;
        }
        .manage-category-head {
            align-items: flex-start;
        }
    }
    @media (max-width: 420px) {
        .item-card-head {
            grid-template-columns: 1fr;
        }
        .item-photo img,
        .item-photo-placeholder {
            width: 100%;
            max-height: 180px;
        }
        .manage-category-head {
            display: grid;
    }
}

.catalog-page.page-stack {
    width: min(100%, var(--content-max-wide, 1180px));
    max-width: 1180px;
    margin-inline: auto;
    gap: var(--space-4);
}
.catalog-page .catalog-hero.page-hero,
.catalog-page .catalog-filter.filter-panel,
.catalog-page .catalog-results.section-card,
.catalog-page .catalog-export-card.export-card {
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.catalog-page .catalog-hero.page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 520px);
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-5);
}
.catalog-page .catalog-title.page-hero-main {
    display: grid;
    align-content: center;
    gap: var(--space-2);
}
.catalog-page .catalog-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.catalog-page .catalog-quick-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}
.catalog-page .catalog-quick-stats .metric-card {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
    text-decoration: none;
}
.catalog-page .quick-stat.metric-card.active,
.catalog-page .quick-stat.metric-card:hover {
    border-color: var(--color-primary-border);
    background: var(--surface-subtle);
}
.catalog-page .quick-stat.metric-card .metric-icon {
    justify-self: start;
}
.catalog-page .quick-stat.metric-card span,
.catalog-page .catalog-item-title p,
.catalog-page .catalog-item-facts span,
.catalog-page .category-head span,
.catalog-detail-modal .detail-kicker,
.catalog-detail-modal .highlight-item span,
.catalog-detail-modal .detail-grid .k {
    color: var(--text-soft);
}
.catalog-page .catalog-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-muted);
}
.catalog-page .catalog-tabs .action-card {
    min-width: 0;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    text-align: center;
}
.catalog-page .catalog-tabs .action-card.active,
.catalog-page .catalog-tabs .action-card:hover {
    border-color: var(--color-primary-border);
    background: var(--surface);
    color: var(--color-primary-ink);
}
.catalog-page .catalog-filter.filter-panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
}
.catalog-page .catalog-filter-head,
.catalog-page .catalog-export-card.export-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-4);
}
.catalog-page .catalog-filter-head-copy,
.catalog-page .catalog-export-copy.export-copy {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}
.catalog-page .catalog-filter-head h2,
.catalog-page .catalog-filter-head p,
.catalog-page .catalog-export-copy h2,
.catalog-page .catalog-export-copy p,
.catalog-page .catalog-results-head h2,
.catalog-page .category-head h3 {
    margin: 0;
}
.catalog-page .catalog-filter-head-actions,
.catalog-page .catalog-export-actions.export-toolbar,
.catalog-page .filter-actions.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.catalog-page .catalog-filter-head-actions,
.catalog-page .catalog-export-actions.export-toolbar {
    justify-content: flex-end;
}
.catalog-page .filter-fields.filter-grid {
    grid-template-columns: minmax(260px, 1.45fr) minmax(180px, .8fr) minmax(160px, .7fr);
    gap: var(--space-3);
}
.catalog-page .form-field {
    gap: var(--space-2);
}
.catalog-page .catalog-filter .btn,
.catalog-page .catalog-item-actions .btn,
.catalog-page .catalog-export-actions .btn,
.catalog-detail-modal .detail-close-btn.btn {
    gap: var(--space-2);
}
.catalog-page .catalog-export-card.export-card,
.catalog-page .catalog-results.section-card {
    padding: var(--space-4);
}
.catalog-page .catalog-results.section-card,
.catalog-page .category-list,
.catalog-page .category-section,
.catalog-page .catalog-item-list.record-list {
    display: grid;
    gap: var(--space-4);
}
.catalog-page .catalog-results-head {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}
.catalog-page .category-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-soft);
}
.catalog-page .category-head strong {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height-sm);
    padding-inline: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    color: var(--text-muted);
}
.catalog-page .catalog-item-row.record-card {
    display: grid;
    grid-template-columns: minmax(280px, 1.35fr) minmax(300px, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}
.catalog-page .catalog-item-row.record-card:hover {
    border-color: var(--color-primary-border);
    background: var(--surface-subtle);
}
.catalog-page .catalog-item-main {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.catalog-page .catalog-item-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-soft);
    text-align: center;
}
.catalog-page .catalog-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.catalog-page .catalog-item-title {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}
.catalog-page .catalog-item-title h3,
.catalog-page .catalog-item-title p,
.catalog-page .catalog-item-facts strong {
    overflow-wrap: anywhere;
}
.catalog-page .item-badges,
.catalog-page .catalog-item-actions.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.catalog-page .catalog-item-actions.action-row {
    justify-content: flex-end;
}
.catalog-page .catalog-item-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    min-width: 0;
}
.catalog-page .catalog-item-facts .content-box {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: var(--space-2);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}
.catalog-page .stock-badge.badge-soft,
.catalog-page .type-badge.badge-soft {
    border-radius: var(--radius-pill);
}
.catalog-page .stock-badge.ok {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}
.catalog-page .stock-badge.low {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}
.catalog-page .stock-badge.out {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
}
.catalog-page .type-badge.asset {
    border-color: var(--color-info-border);
    background: var(--color-info-soft);
    color: var(--color-info-ink);
}
.catalog-page .type-badge.borrowable {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}
.catalog-page .catalog-pager.pager-center {
    justify-content: center;
}
.catalog-page .catalog-pager .pager-icon {
    line-height: 1;
}
.catalog-detail-modal.detail-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1200);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--modal-backdrop-bg);
}
.catalog-detail-modal.detail-modal.hidden {
    display: none;
}
.catalog-detail-modal .detail-card.modal-card.section-card {
    width: min(680px, 94vw);
    max-height: 88vh;
    overflow: auto;
    padding: 0;
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-panel);
}
.catalog-detail-modal .detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-muted);
}
.catalog-detail-modal .detail-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.catalog-detail-modal .detail-status-badge.badge-soft {
    border-radius: var(--radius-pill);
}
.catalog-detail-modal .detail-status-badge.status-ok {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}
.catalog-detail-modal .detail-status-badge.status-low {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}
.catalog-detail-modal .detail-status-badge.status-out {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
}
.catalog-detail-modal .detail-highlight {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}
.catalog-detail-modal .highlight-item {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}
.catalog-detail-modal .detail-grid {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
}
.catalog-detail-modal .detail-grid .v {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .catalog-page .catalog-hero.page-hero,
    .catalog-page .catalog-item-row.record-card {
        grid-template-columns: 1fr;
    }
    .catalog-page .catalog-item-actions.action-row {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .catalog-page .catalog-quick-stats,
    .catalog-page .catalog-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .catalog-page .catalog-filter-head,
    .catalog-page .catalog-export-card.export-card,
    .catalog-page .filter-fields.filter-grid,
    .catalog-page .catalog-item-facts,
    .catalog-detail-modal .detail-highlight,
    .catalog-detail-modal .detail-grid {
        grid-template-columns: 1fr;
    }
    .catalog-page .catalog-filter-head-actions,
    .catalog-page .catalog-export-actions.export-toolbar,
    .catalog-detail-modal .detail-head-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 420px) {
    .catalog-page .catalog-tabs,
    .catalog-page .catalog-item-main {
        grid-template-columns: 1fr;
    }
    .catalog-page .catalog-item-photo {
        width: 100%;
        max-height: 180px;
    }
}



/* Inventory request detail shared component alignment. */
.request-detail-page.page-stack {
    max-width: 1180px;
    gap: var(--space-4);
    color: var(--text-strong);
}
.request-detail-page .request-detail-hero.page-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%);
    box-shadow: var(--shadow-card);
}
.request-detail-page .request-detail-back.btn-secondary {
    gap: var(--space-2);
    width: fit-content;
}
.request-detail-page .request-detail-hero-main.page-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}
.request-detail-page .request-detail-title.page-title,
.request-detail-page .request-detail-subtitle.page-subtitle {
    margin: 0;
}
.request-detail-page .request-detail-status-stack {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}
.request-detail-page .request-detail-summary.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.request-detail-page .request-detail-stat.metric-card {
    min-height: 96px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.request-detail-page .request-detail-stat .metric-head {
    align-items: center;
    gap: var(--space-2);
}
.request-detail-page .request-detail-stat .metric-icon {
    flex: 0 0 auto;
}
.request-detail-page .request-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--space-4);
}
.request-detail-page .request-detail-card.section-card,
.request-detail-page .request-detail-items.section-card,
.request-detail-page .request-detail-status-panel.section-card,
.request-detail-page .request-detail-action.section-card {
    gap: var(--space-4);
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.request-detail-page .request-detail-section-head.section-head {
    margin: 0;
    padding: 0;
}
.request-detail-page .request-detail-section-title.section-title,
.request-detail-page .request-detail-section-note.section-subtitle {
    margin: 0;
}
.request-detail-page .request-detail-info-grid.context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.request-detail-page .request-detail-info.content-box,
.request-detail-page .request-detail-status-row.content-box,
.request-detail-page .request-detail-mobile-item-box.content-box {
    margin: 0;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}
.request-detail-page .request-detail-info.content-box.is-wide {
    grid-column: 1 / -1;
}
.request-detail-page .request-detail-label,
.request-detail-page .request-detail-status-row > span:first-child,
.request-detail-page .request-detail-mobile-item-box span {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 900;
}
.request-detail-page .request-detail-value,
.request-detail-page .request-detail-status-row strong,
.request-detail-page .request-detail-mobile-item-box strong {
    color: var(--text-strong);
}
.request-detail-page .request-detail-side-stack {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}
.request-detail-page .request-detail-status-list {
    display: grid;
    gap: var(--space-2);
}
.request-detail-page .request-detail-status-row.content-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.request-detail-page .status-badge.badge-soft {
    border-radius: var(--radius-pill);
}
.request-detail-page .status-badge.badge-soft.status-approved {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}
.request-detail-page .status-badge.badge-soft.status-pending {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}
.request-detail-page .status-badge.badge-soft.status-rejected {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
}
.request-detail-page .status-badge.badge-soft.status-unknown {
    border-color: var(--border-muted);
    background: var(--surface-muted);
    color: var(--text-soft);
}
.request-detail-page .request-detail-action p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}
.request-detail-page .request-detail-action .form-actions {
    justify-content: flex-start;
}
.request-detail-page .request-detail-return-btn {
    justify-content: center;
}
.request-detail-page .request-detail-table-wrap.table-wrap {
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
}
.request-detail-page .request-detail-table.nice-table th {
    background: var(--surface-muted);
    color: var(--text-soft);
}
.request-detail-page .request-item-name,
.request-detail-page .request-detail-mobile-item-name {
    color: var(--text-strong);
    font-weight: 900;
    line-height: 1.35;
}
.request-detail-page .request-item-code,
.request-detail-page .request-detail-mobile-item-code {
    margin-top: var(--space-1);
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 750;
}
.request-detail-page .request-detail-mobile-items {
    display: none;
}
.request-detail-page .request-detail-mobile-item.record-card {
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}
.request-detail-page .request-detail-mobile-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.request-detail-page .request-detail-mobile-item-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}

@media (max-width: 980px) {
    .request-detail-page .request-detail-summary.metric-grid,
    .request-detail-page .request-detail-grid,
    .request-detail-page .request-detail-info-grid.context-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .request-detail-page .request-detail-hero.page-hero,
    .request-detail-page .request-detail-card.section-card,
    .request-detail-page .request-detail-items.section-card,
    .request-detail-page .request-detail-status-panel.section-card,
    .request-detail-page .request-detail-action.section-card {
        padding: var(--space-3);
    }
    .request-detail-page .request-detail-hero-main.page-hero-main,
    .request-detail-page .request-detail-status-row.content-box {
        display: grid;
        grid-template-columns: 1fr;
    }
    .request-detail-page .request-detail-status-stack {
        justify-content: flex-start;
    }
    .request-detail-page .request-detail-table-wrap.table-wrap {
        display: none;
    }
    .request-detail-page .request-detail-mobile-items {
        display: grid;
        gap: var(--space-3);
    }
    .request-detail-page .request-detail-mobile-item-grid {
        grid-template-columns: 1fr;
    }
}



/* Inventory request list page components. Centralized from app/Modules/Inventory/Views/requests/list.php. */
.inventory-request-page {
    display: grid;
    gap: 16px;
}
.inventory-request-hero,
.inventory-request-section,
.inventory-request-filter {
    border: 1px solid #dbe7f4;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.05);
}
.inventory-request-hero {
    padding: 20px;
    background:
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.10), transparent 28%),
        radial-gradient(circle at left top, rgba(37, 99, 235, 0.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.inventory-request-hero-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.inventory-request-hero h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    color: #0f172a;
}
.inventory-request-hero p {
    margin: 8px 0 0;
    color: #64748b;
    max-width: 760px;
}
.inventory-request-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 800;
}
.inventory-request-metrics {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.inventory-request-metric {
    border: 1px solid #dbe7f4;
    border-radius: 14px;
    background: rgba(255,255,255,0.9);
    padding: 14px 16px;
    display: grid;
    gap: 6px;
}
.inventory-request-metric-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.inventory-request-metric-value {
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
    color: #0f172a;
}
.inventory-request-metric-note {
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
}
.inventory-request-filter {
    padding: 16px;
}
.inventory-request-filter-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px) minmax(150px, 210px) auto auto;
    gap: 12px;
    align-items: end;
}
.inventory-request-filter label {
    display: block;
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 6px;
}
.inventory-request-filter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.inventory-request-filter .btn,
.inventory-request-card-actions .btn,
.inventory-request-card-actions button,
.inventory-request-card-actions a.btn {
    min-height: 40px;
}
.inventory-request-section {
    padding: 18px;
}
.inventory-request-section-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.inventory-request-section-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #0f172a;
}
.inventory-request-section-desc {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
}
.inventory-request-total-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #dbe7f4;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}
.inventory-request-list {
    display: grid;
    gap: 12px;
}
.inventory-request-card {
    border: 1px solid #dbe7f4;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.04);
    padding: 16px 16px 14px 18px;
    display: grid;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.inventory-request-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: #dbe7f4;
}
.inventory-request-card.request-issue::before {
    background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%);
}
.inventory-request-card.request-borrow::before {
    background: linear-gradient(180deg, #8b5cf6 0%, #c084fc 100%);
}
.inventory-request-card.request-return-pending {
    border-color: #fbbf24;
    box-shadow: 0 16px 32px rgba(245, 158, 11, 0.12);
    background: linear-gradient(180deg, #fffdf7 0%, #ffffff 100%);
}
.inventory-request-card.request-return-pending::before {
    width: 7px;
    background: linear-gradient(180deg, #f59e0b 0%, #fbbf24 100%);
}
.inventory-request-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
}
.inventory-request-card-title-wrap {
    display: grid;
    gap: 7px;
    min-width: 0;
}
.inventory-request-order {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #1d4ed8;
}
.inventory-request-order-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}
.inventory-request-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: #0f172a;
    overflow-wrap: anywhere;
}
.inventory-request-card-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.inventory-request-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #dbe7f4;
    background: #f8fbff;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}
.inventory-request-chip.issue {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.inventory-request-chip.borrow {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #7c3aed;
}
.inventory-request-chip.return-pending {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}
.inventory-request-card-side {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-items: end;
    justify-content: flex-end;
    max-width: 280px;
}
.inventory-request-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.inventory-request-box {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 14px;
    background: #fff;
    min-width: 0;
}
.inventory-request-box.full {
    grid-column: 1 / -1;
    background: #f8fbff;
}
.inventory-request-box-label {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 6px;
}
.inventory-request-box-value {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
    word-break: break-word;
}
.request-items-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 3px;
}
.request-items-list li {
    line-height: 1.45;
}
.inventory-request-muted-placeholder {
    color: #64748b;
}
.inventory-request-card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px dashed #dbe7f4;
}
.inventory-request-card-actions form {
    margin: 0;
}
.inventory-request-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: #dc2626;
    background: #ef4444;
    color: #ffffff;
    text-decoration: none;
}
.inventory-request-detail-btn {
    padding: 7px 12px;
    text-decoration: none;
}
.inventory-request-cancel-btn {
    border-color: #991b1b;
    background: #b91c1c;
}
.inventory-request-return-btn {
    border-color: #bae6fd;
    background: #e0f2fe;
    color: #0369a1;
}
.inventory-request-empty {
    text-align: center;
    padding: 26px 18px;
    color: #64748b;
}
.inventory-request-pager {
    display: flex;
    justify-content: center;
}
@media (max-width: 960px) {
    .inventory-request-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .inventory-request-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .inventory-request-filter-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .inventory-request-hero,
    .inventory-request-filter,
    .inventory-request-section,
    .inventory-request-card {
        padding: 14px;
    }
    .inventory-request-hero h1 {
        font-size: 24px;
    }
    .inventory-request-metrics {
        grid-template-columns: 1fr;
    }
    .inventory-request-metric {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
    .inventory-request-metric-note {
        grid-column: 1 / -1;
    }
    .inventory-request-card-head {
        grid-template-columns: 1fr;
    }
    .inventory-request-card-side {
        justify-content: flex-start;
        max-width: none;
    }
    .inventory-request-card-grid {
        grid-template-columns: 1fr;
    }
    .inventory-request-card-actions,
    .inventory-request-card-actions form,
    .inventory-request-card-actions .btn,
    .inventory-request-card-actions button,
    .inventory-request-card-actions a.btn {
        width: 100%;
    }
    .inventory-request-card-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Inventory request list shared component alignment. */
.inventory-request-page.page-stack {
    max-width: 1180px;
    gap: var(--space-4);
}
.inventory-request-page .inventory-request-hero.page-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%);
    box-shadow: var(--shadow-card);
}
.inventory-request-page .inventory-request-hero-top.page-hero-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
}
.inventory-request-page .inventory-request-hero .page-title,
.inventory-request-page .inventory-request-hero .page-subtitle {
    margin: 0;
}
.inventory-request-page .inventory-request-pill.badge-soft {
    white-space: nowrap;
}
.inventory-request-page .inventory-request-metrics.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}
.inventory-request-page .inventory-request-metric.metric-card {
    min-height: 118px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.inventory-request-page .inventory-request-metric.metric-card .metric-icon {
    justify-self: start;
}
.inventory-request-page .inventory-request-metric-label.metric-head,
.inventory-request-page .inventory-request-metric-note.metric-sub {
    color: var(--text-soft);
}
.inventory-request-page .inventory-request-metric-value.metric-value {
    margin: 0;
    color: var(--text-strong);
}
.inventory-request-page .inventory-request-filter.filter-panel {
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.inventory-request-page .inventory-request-filter-grid.filter-grid {
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 220px) minmax(150px, 210px) auto auto;
    gap: var(--space-3);
}
.inventory-request-page .inventory-request-filter .form-field {
    gap: var(--space-2);
}
.inventory-request-page .inventory-request-filter-actions.action-row {
    justify-content: flex-start;
}
.inventory-request-page .inventory-request-clear-btn.btn-secondary {
    color: var(--text-strong);
}
.inventory-request-page .inventory-request-section.section-card {
    gap: var(--space-4);
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.inventory-request-page .inventory-request-section-head.section-head {
    margin: 0;
}
.inventory-request-page .inventory-request-section-title.section-title,
.inventory-request-page .inventory-request-section-desc.section-subtitle {
    margin: 0;
}
.inventory-request-page .inventory-request-total-chip.badge-soft {
    border-radius: var(--radius-pill);
}
.inventory-request-page .inventory-request-list.record-list {
    gap: var(--space-3);
}
.inventory-request-page .inventory-request-card.record-card {
    gap: var(--space-3);
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}
.inventory-request-page .inventory-request-card.record-card::before {
    background: var(--border-muted);
}
.inventory-request-page .inventory-request-card.request-issue.record-card::before {
    background: var(--color-info);
}
.inventory-request-page .inventory-request-card.request-borrow.record-card::before {
    background: var(--color-primary);
}
.inventory-request-page .inventory-request-card.request-return-pending.record-card {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
}
.inventory-request-page .inventory-request-card.request-return-pending.record-card::before {
    background: var(--color-warning);
}
.inventory-request-page .inventory-request-card-head.record-head {
    grid-template-columns: minmax(0, 1fr) auto;
}
.inventory-request-page .inventory-request-order.badge-soft,
.inventory-request-page .inventory-request-chip.badge-soft,
.inventory-request-page .status-badge.badge-soft {
    border-radius: var(--radius-pill);
}
.inventory-request-page .inventory-request-order-number {
    background: transparent;
    border: 0;
    color: inherit;
}
.inventory-request-page .status-badge.badge-soft.status-approved {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}
.inventory-request-page .status-badge.badge-soft.status-pending {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}
.inventory-request-page .status-badge.badge-soft.status-rejected {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
}
.inventory-request-page .status-badge.badge-soft.status-unknown {
    border-color: var(--border-muted);
    background: var(--surface-muted);
    color: var(--text-soft);
}
.inventory-request-page .inventory-request-card-grid.context-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}
.inventory-request-page .inventory-request-box.content-box {
    margin: 0;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}
.inventory-request-page .inventory-request-box.full.content-box {
    background: var(--surface-muted);
}
.inventory-request-page .inventory-request-box-label {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 900;
}
.inventory-request-page .inventory-request-box-value {
    color: var(--text-strong);
}
.inventory-request-page .inventory-request-card-actions.action-row {
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-soft);
}
.inventory-request-page .inventory-request-card-actions .btn,
.inventory-request-page .inventory-request-card-actions button {
    gap: var(--space-2);
    min-height: 40px;
    border-radius: var(--radius-sm);
}
.inventory-request-page .inventory-request-filter .btn {
    gap: var(--space-2);
}
.inventory-request-page .inventory-request-cancel-btn.btn-secondary {
    border-color: var(--color-danger-border);
    background: var(--surface);
    color: var(--color-danger-ink);
}
.inventory-request-page .inventory-request-return-btn.btn-primary {
    border-color: var(--color-info-border);
    background: var(--color-info-soft);
    color: var(--color-info-ink);
}
.inventory-request-page .inventory-request-pager .pager-icon {
    line-height: 1;
}
.inventory-request-page .inventory-request-empty.empty-state {
    margin: 0;
}

@media (max-width: 980px) {
    .inventory-request-page .inventory-request-metrics.metric-grid,
    .inventory-request-page .inventory-request-card-grid.context-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .inventory-request-page .inventory-request-filter-grid.filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .inventory-request-page .inventory-request-filter-grid .is-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .inventory-request-page .inventory-request-hero.page-hero,
    .inventory-request-page .inventory-request-filter.filter-panel,
    .inventory-request-page .inventory-request-section.section-card,
    .inventory-request-page .inventory-request-card.record-card {
        padding: var(--space-3);
    }
    .inventory-request-page .inventory-request-hero-top.page-hero-main,
    .inventory-request-page .inventory-request-card-head.record-head {
        display: grid;
        grid-template-columns: 1fr;
    }
    .inventory-request-page .inventory-request-metrics.metric-grid,
    .inventory-request-page .inventory-request-filter-grid.filter-grid,
    .inventory-request-page .inventory-request-card-grid.context-grid {
        grid-template-columns: 1fr;
    }
    .inventory-request-page .inventory-request-card-actions.action-row,
    .inventory-request-page .inventory-request-card-actions form,
    .inventory-request-page .inventory-request-card-actions .btn,
    .inventory-request-page .inventory-request-card-actions button,
    .inventory-request-page .inventory-request-card-actions a.btn {
        width: 100%;
    }
}



/* Inventory request create page components. Centralized from app/Modules/Inventory/Views/requests/create.php. */
.request-create-page,
.request-create-page * {
    box-sizing: border-box;
}
.request-create-page {
    display: grid;
    gap: 16px;
    width: 100%;
}
.request-create-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
}
.request-create-title {
    margin: 0;
    color: #061a36;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.2;
    letter-spacing: 0;
}
.request-create-subtitle {
    margin-top: 8px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}
.request-create-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f0fdfa;
    color: #0f766e;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.request-alert {
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 700;
}
.request-alert-error {
    color: #b91c1c;
    background: #fff1f2;
    border: 1px solid #fecdd3;
}
.request-alert-success {
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.request-form {
    display: grid;
    gap: 16px;
    width: 100%;
}
.request-info-card,
.request-items-wrap {
    min-width: 0;
    border: 0;
    border-radius: 18px;
    padding: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}
.request-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.request-section-title {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}
.request-section-note {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.55;
}
.request-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.request-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.request-field-span-2 {
    grid-column: span 2;
}
.request-field-span-4 {
    grid-column: span 4;
}
.request-field-label {
    color: #40536a;
    font-size: 12px;
    font-weight: 800;
}
.request-form input,
.request-form select,
.request-form textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #cfd9e6;
    border-radius: 12px;
    background: #ffffff;
    color: #071833;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.request-form input,
.request-form select {
    min-height: 42px;
}
.request-form textarea {
    min-height: 92px;
    resize: vertical;
}
.request-form input:focus,
.request-form select:focus,
.request-form textarea:focus {
    outline: none;
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}
.request-items-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}
.request-items-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}
.request-items-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.request-items-actions .btn-toolbar {
    border: 0;
    border-radius: 12px;
    min-height: 42px;
    padding: 0 14px;
    background: #0f766e;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.quick-pick-input {
    min-width: 280px;
}
.request-items-head {
    display: grid;
    grid-template-columns: 56px 1.8fr 140px 120px 64px;
    gap: 8px;
    margin-bottom: 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    align-items: center;
    justify-items: center;
}
.item-row {
    display: grid;
    gap: 8px;
    grid-template-columns: 56px 1.8fr 140px 120px 64px;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px;
    justify-items: center;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}
.item-row .item-seq {
    font-weight: 700;
    color: #0f766e;
    text-align: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0fdfa;
    border: 1px solid #ccfbf1;
}
.item-row > div {
    width: 100%;
}
.item-row .item-input,
.item-row .qty-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #cfd9e6;
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
}
.item-row .item-input {
    display: none;
}
.item-pick-meta {
    margin-top: 6px;
    min-height: 48px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fbff;
    font-size: 12px;
    color: #334155;
}
.item-pick-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #dbe3ef;
    background: #fff;
    object-fit: cover;
    flex: 0 0 36px;
}
.item-pick-meta .code {
    font-weight: 700;
    color: #1e3a8a;
}
.item-row .qty-input {
    text-align: center;
    font-weight: 600;
}
.item-row .qty-input.is-invalid {
    border-color: #dc2626;
    background: #fef2f2;
}
.item-row .unit-value {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155;
    font-weight: 600;
}
.item-row .remove-btn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.request-submit-grid button,
.request-submit-grid .btn {
    border-radius: 12px !important;
    box-shadow: none;
}
.request-submit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.request-submit-btn,
.request-cancel-btn {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.request-submit-btn {
    border: 0;
    background: #0f766e;
    color: #ffffff;
    cursor: pointer;
}
.request-cancel-btn {
    border: 1px solid #fecaca;
    background: #fff7f7;
    color: #b42318;
}
.request-empty-card {
    border-radius: 16px;
    padding: 16px;
    background: #fff7f7;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 700;
}
.request-empty-card a {
    display: inline-flex;
    margin-top: 8px;
    color: #0f766e;
    font-weight: 800;
}
.item-row .remove-btn:hover {
    background: #fecaca;
    border-color: #fca5a5;
}
.item-row .stock-msg {
    grid-column: 1 / -1;
    font-size: 12px;
    color: #b91c1c;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 8px;
    padding: 6px 8px;
}
.request-section-head-compact {
    margin-bottom: 0;
}
.request-items-container {
    display: grid;
    gap: 10px;
}
.scan-modal {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.62);
    z-index: 9999;
}
.scan-modal.is-open {
    display: flex;
}
.scan-dialog {
    width: min(100%, 440px);
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.24);
}
.scan-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.scan-title {
    color: #0f172a;
    font-weight: 800;
}
.scan-close {
    min-height: 36px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    color: #40536a;
    font-weight: 800;
    cursor: pointer;
}
.scan-video {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background: #000;
    object-fit: cover;
}
.scan-reader {
    overflow: hidden;
    border-radius: 14px;
    background: #0f172a;
}
.scan-reader video {
    border-radius: 14px;
}
.scan-reader__hidden,
.scan-video__hidden {
    display: none !important;
}
.scan-hint {
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}
.scan-manual {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}
.scan-manual label {
    color: #40536a;
    font-size: 12px;
    font-weight: 800;
}
.scan-manual-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}
.scan-manual-input {
    min-width: 0;
    min-height: 42px;
    border: 1px solid #cfd9e6;
    border-radius: 12px;
}
.scan-manual-btn {
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    background: #0f766e;
    color: #ffffff;
    font-weight: 800;
    padding: 0 14px;
    cursor: pointer;
}
@media (max-width: 860px) {
    .request-create-hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
    }
    .request-info-grid {
        grid-template-columns: 1fr;
    }
    .request-field-span-2,
    .request-field-span-4 {
        grid-column: span 1;
    }
    .request-items-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .request-items-actions {
        width: 100%;
    }
    .request-items-actions .btn-toolbar {
        flex: 1 1 auto;
    }
    .quick-pick-input {
        min-width: 0;
    }
    .request-items-head {
        display: none;
    }
    .item-row {
        position: relative;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: stretch;
        justify-items: stretch;
        padding: 14px;
    }
    .item-row .item-seq {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 30px;
        font-size: 13px;
        text-align: center;
    }
    .item-row > div:nth-child(2) {
        grid-column: 1 / -1;
        padding-top: 30px;
    }
    .item-row > div:nth-child(2)::before,
    .item-row > div:nth-child(3)::before,
    .item-row > div:nth-child(4)::before {
        display: block;
        margin-bottom: 5px;
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
    }
    .item-row > div:nth-child(2)::before {
        content: "รายการพัสดุ"; <?php /* __('guard.batch') */ ?>
    }
    .item-row > div:nth-child(3)::before {
        content: "จำนวน"; <?php /* __('guard.batch') */ ?>
    }
    .item-row > div:nth-child(4)::before {
        content: "หน่วย"; <?php /* __('guard.batch') */ ?>
    }
    .item-pick-meta {
        min-height: 58px;
        margin-top: 0;
        align-items: flex-start;
    }
    .item-row .qty-input,
    .item-row .unit-value {
        min-height: 42px;
    }
    .item-row .remove-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        min-height: 34px;
        border-radius: 10px;
        font-size: 18px;
    }
    .request-submit-grid {
        grid-template-columns: 1fr;
    }
    .scan-manual-row {
        grid-template-columns: 1fr;
    }
    .request-submit-btn {
        order: 1;
    }
    .request-cancel-btn {
        order: 2;
    }
}

.request-create-page {
    gap: 18px;
    color: #0f172a;
}
.request-create-hero,
.request-info-card,
.request-items-wrap,
.request-submit-grid,
.request-empty-card {
    border: 1px solid #dbe7f4;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.055);
}
.request-create-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 24px;
    border-top: 4px solid #0f766e;
}
.request-create-hero::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, #0f766e 0%, #2563eb 100%);
}
.request-create-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.request-create-eyebrow::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: #0f766e;
}
.request-create-title {
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 900;
}
.request-create-subtitle {
    max-width: 720px;
    font-size: 14px;
}
.request-create-badge {
    border: 1px solid #99f6e4;
    min-height: 38px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.request-create-flow {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}
.request-flow-step {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #dbe7f4;
    border-radius: 12px;
    background: rgba(255,255,255,.78);
}
.request-flow-number,
.request-section-number {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 900;
}
.request-flow-text {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.request-flow-title {
    font-size: 13px;
    font-weight: 900;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.request-flow-note {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}
.request-form {
    gap: 18px;
}
.request-info-card,
.request-items-wrap {
    padding: 20px;
}
.request-details-card {
    padding: 22px 24px 24px;
    border: 1px solid #dbe7f4;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.055);
}
.request-section-head,
.request-items-toolbar {
    align-items: center;
}
.request-section-head {
    justify-content: flex-start;
}
.request-section-title,
.request-items-title {
    font-size: 22px;
    font-weight: 900;
}
.request-section-note {
    font-size: 13px;
}
.request-info-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.request-field {
    grid-column: span 4;
    align-self: start;
    align-content: start;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}
.request-field-span-2 {
    grid-column: span 6;
}
.request-field-span-4 {
    grid-column: 1 / -1;
}
.request-info-grid .request-field:nth-child(4) {
    grid-column: span 4;
}
.request-info-grid .request-field:nth-child(5) {
    grid-column: span 8;
}
.request-info-grid .request-field:nth-child(6) {
    grid-column: 1 / -1;
}
.request-field-label {
    color: #475569;
    letter-spacing: .01em;
}
.request-form input,
.request-form select,
.request-form textarea,
.scan-manual-input {
    border-radius: 10px;
    border-color: #d6e0eb;
    padding: 9px 11px;
}
.request-form textarea {
    min-height: 104px;
}
.request-info-grid .request-field:nth-child(4) input {
    min-height: 46px;
}
.request-items-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    padding: 0 0 16px;
}
.request-items-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    width: 100%;
}
.request-items-actions .btn-toolbar,
.scan-manual-btn,
.request-submit-btn {
    background: #0f766e;
    box-shadow: 0 10px 18px rgba(15, 118, 110, .16);
}
.request-items-actions .btn-toolbar {
    white-space: nowrap;
}
.request-items-actions-compact {
    display: flex;
    justify-content: flex-end;
}
.quick-pick-input {
    min-width: 0;
}
.request-item-search-panel {
    display: grid;
    gap: 14px;
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid #dbe7f4;
    border-radius: 14px;
    background: #f8fbff;
}
.request-item-search-grid {
    display: grid;
    grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: end;
}
.request-item-search-field {
    display: grid;
    gap: 6px;
}
.request-item-search-field span {
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}
.request-item-search-field input,
.request-item-search-field select {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cfd9e6;
    border-radius: 10px;
    background: #ffffff;
    color: #071833;
}
.request-item-search-button,
.request-item-search-reset {
    min-height: 42px;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}
.request-item-search-button {
    border: 0;
    background: #0f766e;
    color: #ffffff;
}
.request-item-search-reset {
    border: 1px solid #dbe7f4;
    background: #ffffff;
    color: #475569;
}
.request-category-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.request-category-chip {
    flex: 0 0 auto;
    min-height: 34px;
    border: 1px solid #dbe7f4;
    border-radius: 999px;
    padding: 0 12px;
    background: #ffffff;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.request-category-chip.active {
    border-color: #99f6e4;
    background: #ecfdf5;
    color: #0f766e;
}
.request-browser {
    display: grid;
    gap: 12px;
    max-height: 430px;
    overflow: auto;
    padding-right: 4px;
}
.request-browser-section {
    display: grid;
    gap: 8px;
}
.request-browser-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}
.request-browser-head span:last-child {
    color: #64748b;
    font-size: 12px;
}
.request-browser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}
.request-pick-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #dbe7f4;
    border-radius: 12px;
    background: #ffffff;
    text-align: left;
}
.request-pick-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid #dbe7f4;
    background: #f8fafc;
    object-fit: cover;
}
.request-pick-thumb.empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 900;
}
.request-pick-info {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.request-pick-name {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.request-pick-meta-line {
    color: #64748b;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.request-pick-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.request-pick-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}
.request-pick-badge.asset {
    background: #e0f2fe;
    color: #0369a1;
}
.request-pick-badge.borrowable {
    background: #dcfce7;
    color: #166534;
}
.request-pick-stock {
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
}
.request-pick-add {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: #0f766e;
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
.request-browser-empty {
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}
.request-items-head {
    grid-template-columns: 48px minmax(0, 1fr) 120px 110px 48px;
    padding: 0 10px;
    text-align: left;
    justify-items: stretch;
}
.request-items-head > div {
    text-align: left;
}
.request-items-head > div:first-child,
.request-items-head > div:nth-child(3),
.request-items-head > div:nth-child(4),
.request-items-head > div:last-child {
    text-align: center;
}
.item-row {
    grid-template-columns: 48px minmax(0, 1fr) 120px 110px 48px;
    border-radius: 14px;
    background: #ffffff;
    border-color: #dbe7f4;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.045);
}
.item-row:focus-within {
    border-color: #99f6e4;
    box-shadow: 0 14px 28px rgba(15, 118, 110, .10);
}
.item-row .item-seq {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #0f766e;
    background: #ecfdf5;
}
.item-pick-meta {
    min-height: 58px;
    border-color: #dbe7f4;
    background: #f8fbff;
}
.item-pick-thumb {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
}
.item-row .unit-value,
.item-row .qty-input {
    min-height: 44px;
}
.item-row .remove-btn {
    border-radius: 10px;
}
.request-submit-grid {
    grid-template-columns: 1fr auto auto;
    align-items: center;
    padding: 14px;
}
.request-submit-grid::before {
    content: "ตรวจสอบข้อมูลให้ครบก่อนส่งคำขอ"; <?php /* __('guard.batch') */ ?>
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}
.request-submit-btn,
.request-cancel-btn {
    width: auto;
    min-width: 160px;
    padding: 0 18px;
}
.request-cancel-btn {
    background: #ffffff;
}
.request-alert {
    border-radius: 12px;
}
.scan-dialog {
    border: 1px solid #dbe7f4;
    border-radius: 16px;
}

.request-info-card {
    padding: 20px 22px 22px;
}
.request-details-card {
    padding: 22px 24px 24px;
    border: 1px solid #dbe7f4;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.055);
}
.request-info-card .request-section-head {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6edf5;
}
.request-details-card .request-section-head {
    margin-bottom: 18px;
}
.request-details-grid {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "type date return"
        "department department department"
        "purpose purpose purpose"
        "note note note";
    gap: 20px;
    align-items: start;
    padding: 2px;
}
.request-details-grid .request-field-type {
    grid-area: type;
}
.request-details-grid .request-field-date {
    grid-area: date;
}
.request-details-grid .request-field-return {
    grid-area: return;
}
.request-details-grid .request-field-department {
    grid-area: department;
}
.request-details-grid .request-field-purpose {
    grid-area: purpose;
}
.request-details-grid .request-field-note {
    grid-area: note;
}
.request-details-grid .request-field-purpose,
.request-details-grid .request-field-note {
    width: 100%;
}
.request-details-grid > .request-field-purpose,
.request-details-grid > .request-field-note,
.request-details-grid:not(.request-info-grid-issue) > .request-field-department {
    grid-column: 1 / -1 !important;
}
.request-details-grid.request-info-grid-issue > .request-field-department {
    grid-column: auto !important;
}
.request-details-grid.request-info-grid-issue > .request-field-note {
    grid-column: 1 / -1 !important;
}
.request-details-grid .request-field {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}
.request-details-grid .request-field-label {
    min-height: 18px;
    display: flex;
    align-items: center;
}
.request-details-grid input,
.request-details-grid select {
    min-height: 40px;
}
.request-details-grid textarea {
    min-height: 82px;
}
.request-details-grid .request-field-purpose textarea,
.request-details-grid .request-field-note textarea {
    display: block;
}
.request-details-grid .request-field-note textarea {
    min-height: 78px;
}
.request-details-grid.request-info-grid-issue {
    grid-template-areas:
        "type date department"
        "purpose purpose purpose"
        "note note note";
}
.request-details-grid.request-info-grid-issue .request-field-return {
    display: none !important;
}

@media (max-width: 820px) {
    .request-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "type date"
            "return return"
            "department department"
            "purpose purpose"
            "note note";
    }
    .request-details-grid.request-info-grid-issue {
        grid-template-areas:
            "type date"
            "department department"
            "purpose purpose"
            "note note";
    }
    .request-items-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

@media (max-width: 760px) {
    .request-create-page {
        gap: 14px;
    }
    .request-create-hero,
    .request-info-card,
    .request-items-wrap,
    .request-submit-grid,
    .request-empty-card {
        border-radius: 14px;
    }
    .request-create-hero {
        grid-template-columns: 1fr;
        padding: 18px;
    }
    .request-create-flow {
        grid-template-columns: 1fr;
        margin-top: 16px;
    }
    .request-create-badge {
        margin-top: 14px;
        width: 100%;
    }
    .request-info-card,
    .request-items-wrap {
        padding: 16px;
    }
    .request-details-card {
        padding: 18px;
        border: 1px solid #dbe7f4;
        border-radius: 14px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.055);
    }
    .request-section-head {
        align-items: flex-start;
    }
    .request-section-title,
    .request-items-title {
        font-size: 19px;
    }
    .request-details-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "type"
            "date"
            "return"
            "department"
            "purpose"
            "note";
        gap: 16px;
        padding: 0;
    }
    .request-details-grid.request-info-grid-issue {
        grid-template-areas:
            "type"
            "date"
            "department"
            "purpose"
            "note";
    }
    .request-details-grid .request-field {
        padding: 13px;
    }
    .request-items-actions {
        grid-template-columns: 1fr;
    }
    .request-items-actions .btn-toolbar {
        width: 100%;
    }
    .request-item-search-grid {
        grid-template-columns: 1fr;
    }
    .request-category-chips {
        margin-inline: -2px;
    }
    .request-browser {
        max-height: 360px;
    }
    .request-browser-grid {
        grid-template-columns: 1fr;
    }
    .item-row {
        position: relative;
        grid-template-columns: 1fr 1fr;
        padding: 14px;
        gap: 10px;
    }
    .item-row .item-seq {
        position: static;
        transform: none;
        grid-column: 1 / 2;
        justify-self: start;
        width: 34px;
        height: 34px;
    }
    .item-row > div:nth-child(2) {
        grid-column: 1 / -1;
        padding-top: 0;
    }
    .item-row > div:nth-child(3),
    .item-row > div:nth-child(4) {
        grid-column: span 1;
    }
    .item-row .remove-btn {
        position: absolute;
        top: 14px;
        right: 14px;
    }
    .item-pick-meta {
        min-height: 64px;
    }
    .request-submit-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .request-submit-grid::before {
        text-align: center;
    }
    .request-submit-btn,
    .request-cancel-btn {
        width: 100%;
        min-width: 0;
    }
}


/* Inventory request/create, item/create, and item/manage shared component alignment. */
.request-create-page.page-stack,
.item-create-page.page-stack,
.manage-page.page-stack {
    max-width: 1180px;
    gap: var(--space-4);
}
.request-create-page .request-create-hero.page-hero,
.item-create-page .item-create-hero.page-hero,
.manage-page .manage-hero.page-hero {
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%);
    box-shadow: var(--shadow-card);
}
.request-create-page .page-title,
.request-create-page .page-subtitle,
.item-create-page .page-title,
.manage-page .page-title,
.manage-page .page-subtitle {
    margin: 0;
}
.request-create-page .request-create-badge.badge-soft,
.request-create-page .request-flow-number.badge-soft,
.manage-page .badge-soft,
.manage-page .stock-badge.badge-soft,
.manage-page .type-badge.badge-soft,
.manage-page .status-toggle-badge.badge-soft {
    border-radius: var(--radius-pill);
}
.request-create-page .request-create-flow.page-hero-aside {
    min-width: min(340px, 100%);
}
.request-create-page .request-flow-step.content-box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
    margin: 0;
}
.request-create-page .request-alert.alert-box,
.item-create-page .form-alert.alert-box,
.manage-page .manage-alert.alert-box {
    margin: 0;
}
.request-create-page .section-card,
.request-create-page .request-items-wrap.section-card,
.item-create-page .form-section.section-card,
.manage-page .barcode-batch-toolbar.section-card,
.manage-page .manage-category-section.section-card {
    gap: var(--space-4);
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.request-create-page .request-section-head.section-head,
.request-create-page .request-items-toolbar.section-head,
.item-create-page .section-head,
.manage-page .manage-category-head.section-head {
    margin: 0;
}
.request-create-page .filter-grid,
.item-create-page .filter-grid,
.manage-page .filter-grid {
    gap: var(--space-3);
}
.request-create-page .form-field,
.item-create-page .form-field,
.manage-page .form-field {
    gap: var(--space-2);
}
.request-create-page .request-item-search-panel.filter-panel,
.manage-page .manage-filter-card.filter-panel {
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.request-create-page .request-category-chips,
.manage-page .manage-quick-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.request-create-page .request-category-chip.badge-soft,
.manage-page .manage-quick-filter-list .badge-soft {
    text-decoration: none;
}
.request-create-page .request-category-chip.active,
.manage-page .manage-quick-filter-list .active {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-ink);
}
.request-create-page .item-row.record-card,
.manage-page .item-card.record-card,
.item-create-page .type-choice.record-card,
.manage-page .type-choice.record-card {
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}
.request-create-page .request-submit-grid.sticky-action-bar {
    justify-content: flex-end;
}
.item-create-page .item-create-shell,
.item-create-page .item-create-form,
.manage-page .manage-category-list {
    display: grid;
    gap: var(--space-4);
}
.item-create-page .asset-details-card.content-box,
.manage-page .edit-asset-details-card.content-box {
    margin: 0;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}
.item-create-page .type-choice-grid,
.manage-page .type-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}
.item-create-page .type-choice.record-card,
.manage-page .type-choice.record-card {
    padding: var(--space-3);
}
.item-create-page .scan-field-row,
.manage-page .scan-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
}
.item-create-page .form-actions,
.manage-page .form-actions {
    justify-content: flex-end;
}
.manage-page .manage-main-actions,
.manage-page .barcode-toolbar-actions,
.manage-page .item-actions,
.manage-page .item-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.manage-page .manage-filter-card.filter-panel {
    display: grid;
    gap: var(--space-4);
}
.manage-page .item-card.record-card {
    padding: var(--space-4);
}
.manage-page .item-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-2);
}
.manage-page .modal-card .section-card {
    box-shadow: none;
}
.manage-page .item-edit-grid.filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

@media (max-width: 780px) {
    .request-create-page .request-create-hero.page-hero,
    .item-create-page .item-create-hero.page-hero,
    .manage-page .manage-hero.page-hero {
        grid-template-columns: 1fr;
        padding: var(--space-3);
    }
    .request-create-page .section-card,
    .request-create-page .request-items-wrap.section-card,
    .request-create-page .request-item-search-panel.filter-panel,
    .item-create-page .form-section.section-card,
    .manage-page .manage-filter-card.filter-panel,
    .manage-page .barcode-batch-toolbar.section-card,
    .manage-page .manage-category-section.section-card {
        padding: var(--space-3);
    }
    .request-create-page .request-submit-grid.sticky-action-bar,
    .item-create-page .form-actions,
    .manage-page .form-actions,
    .manage-page .manage-main-actions,
    .manage-page .barcode-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .request-create-page .request-submit-grid .btn,
    .item-create-page .form-actions .btn,
    .manage-page .manage-main-actions .btn,
    .manage-page .barcode-toolbar-actions .btn {
        width: 100%;
    }
    .item-create-page .scan-field-row,
    .manage-page .scan-field-row {
        grid-template-columns: 1fr;
    }
}

.request-create-page .request-pick-add.btn-icon,
.request-create-page .item-row .remove-btn.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: var(--radius-md);
    box-shadow: none;
}
.request-create-page .request-pick-add.btn-icon {
    color: var(--color-primary-ink);
}
.request-create-page .item-row .remove-btn.btn-icon {
    border-color: var(--border-soft);
    background: var(--surface);
    color: var(--color-danger-ink);
}
.request-create-page .request-pick-card.record-card {
    box-shadow: none;
}
.request-create-page .request-pick-badge.badge-soft {
    border-radius: var(--radius-pill);
}
.scan-modal .scan-close.btn,
.scan-modal .scan-manual-btn.btn {
    gap: var(--space-2);
    min-height: 42px;
    border-radius: var(--radius-md);
}
.scan-modal .scan-manual-btn.btn {
    padding-inline: var(--space-3);
}



/* Inventory reports index page components. Centralized from app/Modules/Inventory/Views/reports/index.php. */
.inventory-reports-page {
    display: grid;
    gap: 18px;
    min-width: 0;
}
.inventory-report-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 18px;
    align-items: stretch;
    padding: 22px;
    border: 1px solid #dbe5f3;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.07);
}
.inventory-report-hero-copy,
.inventory-report-purpose {
    display: grid;
    gap: 8px;
    align-content: center;
    min-width: 0;
}
.inventory-report-eyebrow,
.inventory-report-panel-head span {
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
}
.inventory-report-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: 32px;
    line-height: 1.18;
}
.inventory-report-hero p,
.inventory-report-purpose span {
    margin: 0;
    color: #64748b;
    line-height: 1.75;
}
.inventory-report-purpose {
    border: 1px solid #ccfbf1;
    border-radius: 18px;
    background: #f0fdfa;
    padding: 16px;
}
.inventory-report-purpose strong {
    color: #0f172a;
    font-size: 15px;
}
.inventory-report-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.inventory-report-actions a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    padding: 0 14px;
    font-weight: 800;
    text-decoration: none;
}
.inventory-report-export-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid #ccfbf1;
    border-radius: 18px;
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
    box-shadow: 0 12px 26px rgba(15, 118, 110, 0.08);
    min-width: 0;
}
.inventory-report-export-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.inventory-report-export-copy h2 {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
}
.inventory-report-export-copy p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}
.inventory-report-export-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(136px, 1fr));
    gap: 8px;
    min-width: 0;
}
.inventory-report-export-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #99f6e4;
    border-radius: 14px;
    background: #0f766e;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.18);
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.inventory-report-export-btn:hover {
    background: #0e6b64;
    border-color: #0e6b64;
    text-decoration: none;
}
.inventory-report-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.inventory-report-metric {
    min-width: 0;
    min-height: 126px;
    display: grid;
    gap: 8px;
    align-content: start;
    border: 1px solid #dbe5f3;
    border-radius: 18px;
    background: #ffffff;
    padding: 16px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.inventory-report-metric:hover,
.inventory-report-metric:focus {
    border-color: #93c5fd;
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}
.inventory-report-metric:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.22);
    outline-offset: 3px;
}
.inventory-report-metric span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.inventory-report-metric strong {
    color: #0f172a;
    font-size: 30px;
    line-height: 1;
}
.inventory-report-metric em {
    color: #475569;
    font-size: 12px;
    font-style: normal;
    line-height: 1.5;
}
.inventory-report-metric.is-approved strong,
.inventory-report-metric.is-approved em,
.inventory-report-metric.is-stock strong {
    color: #166534;
}
.inventory-report-metric.is-pending strong,
.inventory-report-metric.is-warning strong,
.inventory-report-metric.is-warning em {
    color: #92400e;
}
.inventory-report-metric.is-rejected strong,
.inventory-report-metric.is-danger strong,
.inventory-report-metric.is-danger em {
    color: #b91c1c;
}
.inventory-report-metric.is-asset strong {
    color: #1d4ed8;
}
.inventory-report-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.inventory-report-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
    border: 1px solid #dbe5f3;
    border-radius: 20px;
    background: #ffffff;
    padding: 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}
.inventory-report-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
}
.inventory-report-panel-head h2 {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.3;
}
.inventory-report-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
    color: #64748b;
    padding: 20px;
    text-align: center;
}
.inventory-report-bars,
.inventory-report-category-list,
.inventory-report-ranking,
.inventory-report-recent-list {
    display: grid;
    gap: 10px;
}
.inventory-report-bar-row {
    display: grid;
    gap: 8px;
}
.inventory-report-bar-row > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #475569;
    font-size: 13px;
}
.inventory-report-bar-row strong {
    color: #0f172a;
}
.inventory-report-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}
.inventory-report-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f766e 0%, #2563eb 100%);
}
.inventory-report-bar i.is-10 { width: 10%; }
.inventory-report-bar i.is-20 { width: 20%; }
.inventory-report-bar i.is-30 { width: 30%; }
.inventory-report-bar i.is-40 { width: 40%; }
.inventory-report-bar i.is-50 { width: 50%; }
.inventory-report-bar i.is-60 { width: 60%; }
.inventory-report-bar i.is-70 { width: 70%; }
.inventory-report-bar i.is-80 { width: 80%; }
.inventory-report-bar i.is-90 { width: 90%; }
.inventory-report-bar i.is-100 { width: 100%; }
.inventory-report-category-list article,
.inventory-report-ranking article,
.inventory-report-recent-item {
    min-width: 0;
    display: grid;
    gap: 8px;
    border: 1px solid #edf2f7;
    border-radius: 16px;
    background: #f8fbff;
    padding: 12px;
}
.inventory-report-category-list article {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}
.inventory-report-category-list strong,
.inventory-report-ranking strong,
.inventory-report-recent-item strong {
    color: #0f172a;
    line-height: 1.35;
}
.inventory-report-category-list span,
.inventory-report-ranking em,
.inventory-report-recent-item p,
.inventory-report-recent-meta span {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    line-height: 1.55;
}
.inventory-report-category-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.inventory-report-category-meta span,
.inventory-report-recent-meta span {
    border: 1px solid #dbe5f3;
    border-radius: 999px;
    background: #ffffff;
    padding: 4px 8px;
    font-weight: 700;
}
.inventory-report-table-wrap {
    min-width: 0;
    overflow-x: auto;
}
.inventory-report-table {
    width: 100%;
    min-width: 620px;
    border-collapse: separate;
    border-spacing: 0;
}
.inventory-report-table th,
.inventory-report-table td {
    padding: 12px;
    border-bottom: 1px solid #edf2f7;
    text-align: left;
    font-size: 13px;
    vertical-align: top;
}
.inventory-report-table thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 900;
}
.inventory-report-table tbody tr:hover {
    background: #f8fbff;
}
.inventory-report-ranking article {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
}
.inventory-report-ranking article > span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 900;
}
.inventory-report-recent-item {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}
.inventory-report-recent-item p {
    margin: 4px 0 0;
}
.inventory-report-recent-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.inventory-report-recent-meta .status-approved {
    border-color: var(--color-success-border);
    background: #f0fdf4;
    color: #166534;
}
.inventory-report-recent-meta .status-pending {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}
.inventory-report-recent-meta .status-rejected {
    border-color: var(--color-danger-border);
    background: #fef2f2;
    color: #b91c1c;
}

@media (max-width: 1120px) {
    .inventory-report-hero,
    .inventory-report-export-card,
    .inventory-report-content-grid {
        grid-template-columns: 1fr;
    }
    .inventory-report-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .inventory-report-hero,
    .inventory-report-export-card,
    .inventory-report-panel {
        padding: 16px;
    }
    .inventory-report-hero h1 {
        font-size: 26px;
    }
    .inventory-report-actions,
    .inventory-report-actions a {
        width: 100%;
    }
    .inventory-report-metric-grid {
        grid-template-columns: 1fr;
    }
    .inventory-report-export-actions {
        grid-template-columns: 1fr;
    }
    .inventory-report-category-list article,
    .inventory-report-recent-item {
        grid-template-columns: 1fr;
    }
    .inventory-report-category-meta,
    .inventory-report-recent-meta {
        justify-content: flex-start;
    }
}



/* Inventory staff dashboard page components. Centralized from app/Modules/Inventory/Views/staff/dashboard.php. */
.staff-dashboard-page {
    display: grid;
    gap: 14px;
}
.staff-dashboard-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}
.staff-dashboard-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: 26px;
    font-weight: 800;
}
.staff-dashboard-hero p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}
.staff-dashboard-hero-kpis {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.staff-dashboard-hero-kpis span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}
.staff-dashboard-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
}
.staff-dashboard-page .card,
.attendance-stats-card,
.recent-card-section,
.staff-summary-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}
.staff-summary-card {
    padding: 18px;
}
.staff-card-title {
    color: #0f172a;
    font-size: 18px;
    font-weight: 850;
    margin-bottom: 16px;
    letter-spacing: 0;
}
.staff-mini-grid,
.staff-request-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.staff-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.staff-mini-card,
.staff-request-stat {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 12px;
}
.staff-mini-card.leave-bucket-sick,
.staff-mini-card.leave-bucket-personal,
.staff-mini-card.leave-bucket-vacation,
.staff-mini-card.leave-bucket-other {
    --leave-accent: #64748b;
    --leave-accent-soft: #f8fafc;
    --leave-border: #cbd5e1;
    position: relative;
    overflow: hidden;
    min-height: 132px;
    padding: 16px 18px 16px 20px;
    border-radius: 18px;
    border-color: var(--leave-border);
    background: linear-gradient(180deg, #ffffff 0%, var(--leave-accent-soft) 100%);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.045);
    display: grid;
    align-content: start;
}
.staff-mini-card.leave-bucket-sick::before,
.staff-mini-card.leave-bucket-personal::before,
.staff-mini-card.leave-bucket-vacation::before,
.staff-mini-card.leave-bucket-other::before {
    content: '';
    position: absolute;
    inset: 14px auto 14px 0;
    width: 5px;
    border-radius: 999px;
    background: var(--leave-accent);
}
.staff-mini-card.leave-bucket-sick .staff-mini-label,
.staff-mini-card.leave-bucket-personal .staff-mini-label,
.staff-mini-card.leave-bucket-vacation .staff-mini-label,
.staff-mini-card.leave-bucket-other .staff-mini-label {
    color: var(--leave-accent);
}
.leave-bucket-sick {
    --leave-accent: #5B7E3C;
    --leave-accent-soft: #F4F7EF;
    --leave-border: #B8C8A5;
}
.leave-bucket-personal {
    --leave-accent: #EA5252;
    --leave-accent-soft: #FFF1F1;
    --leave-border: #F6B5B5;
}
.leave-bucket-vacation {
    --leave-accent: #FF9D23;
    --leave-accent-soft: #FFF5E6;
    --leave-border: #FFD59A;
}
.leave-bucket-other {
    --leave-accent: #FFD65A;
    --leave-accent-soft: #FFF9DB;
    --leave-border: #FFECA0;
}
.staff-mini-card.leave-bucket-sick {
    --leave-accent: #5B7E3C;
    --leave-accent-soft: #F4F7EF;
    --leave-border: #B8C8A5;
    border-color: var(--leave-border);
}
.staff-mini-card.leave-bucket-personal {
    --leave-accent: #EA5252;
    --leave-accent-soft: #FFF1F1;
    --leave-border: #F6B5B5;
    border-color: var(--leave-border);
}
.staff-mini-card.leave-bucket-vacation {
    --leave-accent: #FF9D23;
    --leave-accent-soft: #FFF5E6;
    --leave-border: #FFD59A;
    border-color: var(--leave-border);
}
.staff-mini-card.leave-bucket-other {
    --leave-accent: #FFD65A;
    --leave-accent-soft: #FFF9DB;
    --leave-border: #FFECA0;
    border-color: var(--leave-border);
}
.staff-mini-label {
    color: #64748b;
    font-size: 14px;
    font-weight: 850;
    margin-bottom: 10px;
    line-height: 1.3;
}
.staff-mini-value {
    font-size: 17px;
    font-weight: 850;
    line-height: 1.35;
}
.staff-mini-value.is-danger,
.staff-mini-note.is-danger {
    color: #b91c1c;
}
.staff-mini-note.is-warn {
    color: #f59e0b;
}
.staff-mini-note.is-ok {
    color: #10b981;
}
.staff-mini-note {
    font-size: 13px;
    font-weight: 800;
    margin-top: 6px;
    line-height: 1.35;
}
.staff-mini-progress {
    position: relative;
    height: 8px;
    margin-top: 14px;
    border-radius: 999px;
    background: #edf2f7;
    overflow: hidden;
}
.staff-mini-progress-value {
    position: absolute;
    inset: 0 auto 0 0;
    max-width: 100%;
    border-radius: inherit;
    background: var(--leave-accent);
    opacity: 0.82;
}
.staff-mini-progress.is-empty {
    display: none;
}
.staff-mini-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 7px;
    color: #64748b;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.3;
}
@media (max-width: 640px) {
    .staff-mini-grid {
        grid-template-columns: 1fr;
    }
}
.staff-request-value {
    color: #0f172a;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.1;
}
.staff-request-value.is-warn { color: #b45309; }
.staff-request-value.is-ok { color: #15803d; }
.staff-request-value.is-danger { color: #b91c1c; }
.attendance-stats-card {
    padding: 16px;
}
.attendance-stats-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.attendance-stats-title {
    font-weight: 800;
    font-size: 18px;
    color: #0f172a;
}
.attendance-stats-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.attendance-stats-filter .month-label {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    white-space: nowrap;
}
.attendance-stats-filter input[type="month"] {
    width: 180px;
    min-width: 180px;
}
.attendance-cutoff-note {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}
@media (max-width: 640px) {
    .attendance-stats-filter {
        flex-wrap: wrap;
    }
}
.attendance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.attendance-kpi-group {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    padding: 12px;
    display: grid;
    gap: 10px;
}
.attendance-kpi-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #edf2f7;
}
.attendance-kpi-group-title {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
}
.attendance-kpi-group-note {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
}
.attendance-kpi-group-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
}
.attendance-kpi-group.is-time {
    border-color: #bfdbfe;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.attendance-kpi-group.is-alert {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
}
.attendance-kpi-group.is-today {
    border-color: var(--color-success-border);
    background: linear-gradient(180deg, #ffffff 0%, #f7fef9 100%);
}
.attendance-kpi {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    min-height: 68px;
}
.attendance-kpi .kpi-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
    line-height: 1.2;
}
.attendance-kpi .kpi-value {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.attendance-kpi .kpi-value.kpi-warn {
    color: #d97706;
}
.attendance-kpi .kpi-value.kpi-danger {
    color: #b91c1c;
}
.attendance-kpi .kpi-value.kpi-in {
    color: #059669;
}
.attendance-kpi .kpi-value.kpi-out {
    color: #2563eb;
}
.attendance-kpi .kpi-value.kpi-none {
    color: #94a3b8;
}
@media (max-width: 760px) {
    .attendance-kpi-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .attendance-kpi-group-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
    .attendance-kpi-group-note {
        white-space: normal;
    }
}
.attendance-table-wrap {
    margin-top: 10px;
}
.attendance-table {
    width: 100%;
}
.attendance-table th,
.attendance-table td {
    text-align: center;
    vertical-align: middle;
}
.attendance-table td {
    white-space: nowrap;
}
.attendance-table td.attendance-col-date,
.attendance-table td.attendance-col-status {
    white-space: normal;
}
.attendance-table td.attendance-col-status {
    min-width: 150px;
}
.attendance-table tbody tr:nth-child(even) {
    background: #f8fafc;
}
.attendance-table .ot-value {
    color: #64748b;
}
.attendance-table .ot-value.ot-hot {
    color: #d97706;
    font-weight: 600;
}
.attendance-table .late-zero {
    color: #065f46;
    font-weight: 600;
}
.attendance-table .late-hot {
    color: #b45309;
    font-weight: 600;
}
.attendance-table .normal-text {
    color: #475569;
}
.attendance-status-pill {
    --status-color: #64748b;
    --status-bg: #f8fafc;
    --status-border: #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--status-border);
    border-radius: 999px;
    background: var(--status-bg);
    color: var(--status-color);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}
.attendance-status-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--status-color);
    flex: 0 0 7px;
}

.attendance-import-page {
    gap: var(--space-6);
}

.attendance-import-page .attendance-import-history-card {
    scroll-margin-top: 96px;
}

.attendance-import-page.is-history-mode .attendance-import-history-card {
    order: 1;
}

.attendance-import-page.is-history-mode .attendance-import-workspace {
    order: 2;
}

.attendance-import-page.is-history-mode .attendance-import-saved-mapping-card {
    order: 3;
}

.attendance-import-hero {
    align-items: stretch;
}

.attendance-import-hero .page-hero-main {
    min-width: 0;
}

.attendance-import-hero .page-hero-icon {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--space-3);
    border: 1px solid var(--theme-icon-border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--color-primary-ink);
}

.attendance-import-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    min-width: min(420px, 100%);
}

.attendance-import-hero-stats .metric-card {
    min-width: 0;
}

.attendance-import-workspace {
    display: block;
}

.attendance-import-upload-card,
.attendance-import-rules-card,
.attendance-import-preview-card,
.attendance-import-mapping-card,
.attendance-import-rows-card,
.attendance-import-saved-mapping-card,
.attendance-import-history-card {
    min-width: 0;
}

.attendance-import-upload-form {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.attendance-import-rules-panel {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
}

.attendance-import-rules-head {
    padding-bottom: 0;
}

.attendance-import-file-field {
    min-width: 0;
    max-width: none;
}

.attendance-import-file-field .upload-dropzone {
    width: 100%;
    max-width: min(520px, 100%);
}

.attendance-import-rule .record-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--theme-icon-border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--color-primary-ink);
}

.attendance-import-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: flex-start;
    padding-top: var(--space-3);
}

.attendance-import-actions .btn,
.attendance-import-confirm-form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.attendance-import-actions .btn {
    width: auto;
    min-width: 0;
}

.attendance-import-rule-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.attendance-import-rule {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    align-items: center;
    border-radius: var(--radius-xs);
    padding: var(--space-3);
}

.attendance-import-rule span:last-child {
    color: var(--text-soft);
    font-size: var(--font-size-sm);
    line-height: 1.55;
}

.attendance-import-preview-head {
    gap: var(--space-4);
}

.attendance-import-confirm-form {
    display: flex;
    justify-content: flex-end;
}

.attendance-import-metric-grid {
    margin-top: var(--space-4);
}

.attendance-import-metric-grid .metric-card {
    min-width: 0;
}

.attendance-import-metric-grid .metric-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.attendance-import-metric-grid .metric-icon {
    flex: 0 0 auto;
}

.attendance-import-context {
    margin-top: var(--space-4);
}

.attendance-import-table-wrap {
    margin-top: var(--space-3);
}

.attendance-import-table {
    min-width: 860px;
}

.attendance-import-table th,
.attendance-import-table td {
    vertical-align: middle;
}

.attendance-import-map-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
}

.attendance-import-map-form select {
    min-height: var(--ui-control-height);
    min-width: 0;
    max-width: 100%;
}

.attendance-import-table .code-pill,
.attendance-import-table .badge-soft {
    white-space: nowrap;
}

.attendance-import-history-list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.attendance-import-history-record {
    display: grid;
    gap: var(--space-4);
}

.attendance-import-history-head {
    gap: var(--space-3);
    align-items: flex-start;
}

.attendance-import-history-main,
.attendance-import-history-file {
    min-width: 0;
}

.attendance-import-history-title-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-start;
    min-width: 0;
}

.attendance-import-history-file {
    display: grid;
    gap: var(--space-1);
    flex: 1 1 320px;
}

.attendance-import-history-file .record-title {
    overflow-wrap: anywhere;
}

.attendance-import-history-badges,
.attendance-import-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.attendance-import-history-badges {
    justify-content: flex-end;
}

.attendance-import-history-counts.context-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.attendance-import-history-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
}

.attendance-import-history-status-note {
    display: grid;
    gap: var(--space-1);
    min-width: min(240px, 100%);
}

.attendance-import-history-actions .btn,
.attendance-import-history-delete-form .btn {
    width: auto;
}

@media (max-width: 1100px) {
    .attendance-import-hero-stats {
        grid-template-columns: 1fr;
    }

    .attendance-import-history-counts.context-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .attendance-import-page {
        gap: var(--space-4);
    }

    .attendance-import-hero .page-hero-icon {
        width: 44px;
        height: 44px;
    }

    .attendance-import-actions,
    .attendance-import-confirm-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .attendance-import-actions .btn,
    .attendance-import-confirm-form .btn {
        width: 100%;
    }

    .attendance-import-file-field {
        max-width: none;
    }

    .attendance-import-rule-list {
        grid-template-columns: 1fr;
    }

    .attendance-import-map-form {
        grid-template-columns: 1fr;
    }

    .attendance-import-history-badges,
    .attendance-import-history-actions,
    .attendance-import-history-delete-form,
    .attendance-import-history-actions .btn,
    .attendance-import-history-delete-form .btn {
        width: 100%;
    }

    .attendance-import-history-badges,
    .attendance-import-history-actions {
        justify-content: stretch;
    }

    .attendance-import-history-counts.context-grid {
        grid-template-columns: 1fr;
    }

    .attendance-import-history-footer {
        align-items: stretch;
    }
}

.attendance-status-pill.is-normal {
    --status-color: #0f766e;
    --status-bg: #f0fdfa;
    --status-border: #99f6e4;
}
.attendance-status-pill.is-duty {
    --status-color: #2563eb;
    --status-bg: #eff6ff;
    --status-border: #bfdbfe;
}
.attendance-status-pill.is-leave {
    --status-color: #b45309;
    --status-bg: #fffbeb;
    --status-border: #fde68a;
}
.attendance-status-pill.is-holiday-work {
    --status-color: #7c3aed;
    --status-bg: #f5f3ff;
    --status-border: #ddd6fe;
}
.attendance-status-pill.is-weekend {
    --status-color: #475569;
    --status-bg: #f8fafc;
    --status-border: #cbd5e1;
}
.attendance-status-pill.is-holiday,
.attendance-status-pill.is-absent {
    --status-color: #b91c1c;
    --status-bg: #fef2f2;
    --status-border: #fecaca;
}
.attendance-status-meta {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.35;
}
@media (max-width: 900px) {
    .attendance-table th,
    .attendance-table td {
        font-size: 12px;
    }
}
.recent-card-section {
    padding: 16px;
}
.recent-card-head {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
}
.recent-card-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
}
.recent-card-subtitle {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}
.recent-empty-state {
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    color: #64748b;
    padding: 18px;
    text-align: center;
}
.recent-item-list {
    display: grid;
    gap: 12px;
}
.recent-item-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    padding: 12px;
    display: grid;
    gap: 12px;
}
.recent-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.recent-item-title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.4;
}
.recent-item-subtitle {
    margin-top: 3px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}
.recent-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}
.recent-info-chip {
    border: 1px solid #e5edf6;
    border-radius: 12px;
    background: #f8fafc;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
}
.recent-info-chip-wide {
    grid-column: 1 / -1;
}
.recent-info-label {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.recent-info-value {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.5;
}
.recent-info-value small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
.recent-item-actions {
    display: flex;
    justify-content: flex-end;
}
.recent-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
}
.leave-history-section {
    background:
        linear-gradient(180deg, rgba(248, 251, 255, 0.94) 0%, #ffffff 44%),
        #ffffff;
    border-color: #dde8f4;
}
.leave-history-section .recent-card-head {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    padding: 2px 0 2px 14px;
}
.leave-history-section .recent-card-head::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    border-radius: 999px;
    background: #2563eb;
}
.leave-history-section .recent-card-title {
    font-size: 20px;
    letter-spacing: 0;
}
.leave-history-section .recent-card-subtitle {
    max-width: 560px;
}
.leave-history-list {
    gap: 12px;
}
.leave-history-card {
    --leave-accent: #FFD65A;
    --leave-accent-soft: #FFF9DB;
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-color: color-mix(in srgb, var(--leave-accent) 24%, #e4edf7);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.055);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.leave-history-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--leave-accent);
}
.leave-history-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--leave-accent) 38%, #c7daf2);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}
.leave-history-main {
    display: grid;
    gap: 11px;
    min-width: 0;
}
.leave-history-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.leave-history-title-wrap {
    min-width: 0;
}
.leave-history-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.leave-history-type {
    min-width: 0;
    color: var(--leave-accent);
    font-size: 17px;
    font-weight: 850;
    line-height: 1.35;
}
.leave-history-date {
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
}
.leave-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.leave-history-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid #dbe7f5;
    border-radius: 999px;
    background: #f8fbff;
    color: #334155;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}
.leave-history-pill strong {
    color: #0f172a;
    font-weight: 850;
}
.leave-history-days {
    align-self: stretch;
    min-width: 108px;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--leave-accent) 20%, #dbeafe);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--leave-accent-soft) 0%, #ffffff 100%);
    display: grid;
    place-items: center;
    text-align: center;
}
.leave-history-days-value {
    color: var(--leave-accent);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.1;
}
.leave-history-days-label {
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}
.leave-history-status {
    box-shadow: none;
    border-radius: 999px;
}
.leave-history-status.status-approved {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.leave-history-status.status-pending {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.leave-history-status.status-rejected {
    background: #fef2f2;
    color: #b91c1c;
    border-color: var(--color-danger-border);
}
.leave-history-card.leave-type-sick_leave,
.leave-history-card.leave-type-sick {
    --leave-accent: #5B7E3C;
    --leave-accent-soft: #F4F7EF;
}
.leave-history-card.leave-type-personal_leave,
.leave-history-card.leave-type-personal,
.leave-history-card.leave-type-personal_affair {
    --leave-accent: #EA5252;
    --leave-accent-soft: #FFF1F1;
}
.leave-history-card.leave-type-vacation_leave,
.leave-history-card.leave-type-vacation {
    --leave-accent: #FF9D23;
    --leave-accent-soft: #FFF5E6;
}
.leave-history-card.leave-type-maternity_leave,
.leave-history-card.leave-type-maternity {
    --leave-accent: #db2777;
    --leave-accent-soft: #fdf2f8;
}
.leave-history-card.leave-type-ordination_leave,
.leave-history-card.leave-type-ordination,
.leave-history-card.leave-type-ordination_hajj {
    --leave-accent: #d97706;
    --leave-accent-soft: #fffbeb;
}
.leave-history-card.leave-type-military_exam {
    --leave-accent: #475569;
    --leave-accent-soft: #f8fafc;
}
.leave-history-card.leave-type-study_training,
.leave-history-card.leave-type-professional_training {
    --leave-accent: #0891b2;
    --leave-accent-soft: #ecfeff;
}
.leave-history-card.leave-type-overseas_operation,
.leave-history-card.leave-type-follow_spouse {
    --leave-accent: #4f46e5;
    --leave-accent-soft: #eef2ff;
}
.leave-history-card.leave-type-assist_spouse_childbirth {
    --leave-accent: #e11d48;
    --leave-accent-soft: #fff1f2;
}
.leave-history-card.leave-type-work_injury {
    --leave-accent: #dc2626;
    --leave-accent-soft: #fef2f2;
}
.leave-history-card.leave-type-unpaid_leave,
.leave-history-card.leave-type-unpaid {
    --leave-accent: #64748b;
    --leave-accent-soft: #f8fafc;
}
.leave-history-card.leave-type-other_leave,
.leave-history-card.leave-type-other {
    --leave-accent: #FFD65A;
    --leave-accent-soft: #FFF9DB;
}
.leave-history-card.leave-bucket-sick,
.leave-history-card.leave-bucket-personal,
.leave-history-card.leave-bucket-vacation,
.leave-history-card.leave-bucket-other {
    --leave-accent: #64748b;
    --leave-accent-soft: #f8fafc;
}
.leave-history-card.leave-bucket-sick {
    --leave-accent: #5B7E3C;
    --leave-accent-soft: #F4F7EF;
}
.leave-history-card.leave-bucket-personal {
    --leave-accent: #EA5252;
    --leave-accent-soft: #FFF1F1;
}
.leave-history-card.leave-bucket-vacation {
    --leave-accent: #FF9D23;
    --leave-accent-soft: #FFF5E6;
}
.leave-history-card.leave-bucket-other {
    --leave-accent: #FFD65A;
    --leave-accent-soft: #FFF9DB;
}
@media (max-width: 640px) {
    .staff-dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
    }
    .staff-dashboard-hero h1 {
        font-size: 22px;
    }
    .staff-dashboard-hero-kpis {
        justify-content: flex-start;
    }
    .staff-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .recent-card-section {
        padding: 14px;
    }
    .recent-item-card {
        padding: 12px;
    }
    .recent-item-grid {
        grid-template-columns: 1fr;
    }
    .recent-item-actions {
        justify-content: stretch;
    }
    .recent-action-btn {
        width: 100%;
    }
    .leave-history-card {
        grid-template-columns: 1fr;
        padding: 14px;
    }
    .leave-history-top {
        flex-direction: column;
    }
    .leave-history-days {
        min-width: 0;
        justify-items: start;
        place-items: initial;
        text-align: left;
    }
}

/* Refreshed staff dashboard layout */
.staff-dashboard-page,
.staff-dashboard-page * {
    box-sizing: border-box;
    letter-spacing: 0;
}
.staff-dashboard-page {
    gap: 18px;
    color: #0f172a;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}
.staff-dashboard-page .card,
.staff-dashboard-page .attendance-stats-card,
.staff-dashboard-page .recent-card-section,
.staff-dashboard-page .staff-summary-card {
    border-radius: 8px;
    border: 1px solid #d9e2ec;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}
.staff-dashboard-hero {
    align-items: center;
    flex-direction: row;
    border-radius: 8px;
    padding: 20px 22px;
    border-color: #d7e2ee;
    background:
        linear-gradient(135deg, #ffffff 0%, #f7fbff 58%, #f7fdf9 100%);
}
.staff-dashboard-hero h1 {
    font-size: 28px;
    line-height: 1.18;
}
.staff-dashboard-hero p {
    margin-top: 8px;
    color: #526174;
    font-size: 13px;
}
.staff-dashboard-hero-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
    width: 100%;
}
.staff-dashboard-hero-kpis span {
    justify-content: space-between;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    background: #ffffff;
    border-color: #dbe6f1;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}
.staff-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "attendance"
        "leave-stats"
        "leave-history"
        "request-recent"
        "meeting";
    align-items: start;
    gap: 18px;
}
.attendance-stats-card { grid-area: attendance; }
.staff-leave-entitlement-card { grid-area: leave-stats; }
.leave-history-section { grid-area: leave-history; }
.meeting-recent-section { grid-area: meeting; }
.request-recent-section { grid-area: request-recent; }
.attendance-stats-card,
.staff-summary-card,
.recent-card-section {
    padding: 18px;
}
.attendance-stats-head,
.recent-card-head {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
}
.attendance-stats-title,
.staff-card-title,
.recent-card-title {
    font-size: 18px;
    font-weight: 850;
    color: #0f172a;
}
.staff-card-title {
    margin-bottom: 14px;
}
.recent-card-subtitle {
    color: #64748b;
    font-size: 13px;
}
.attendance-stats-filter {
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}
.attendance-stats-filter input[type="month"] {
    border-radius: 8px;
}
.attendance-submit-btn {
    min-height: 36px;
    padding: 7px 14px;
    border-radius: 8px;
}
.attendance-cutoff-note {
    border-radius: 8px;
    border-color: #dbe7f5;
    background: #f8fbff;
}
.attendance-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.attendance-kpi-group,
.attendance-kpi,
.staff-mini-card,
.staff-request-stat,
.recent-info-chip {
    border-radius: 8px;
}
.attendance-kpi-group {
    padding: 14px;
    border-color: #dbe5ef;
    box-shadow: none;
}
.attendance-kpi-group-head {
    align-items: flex-start;
}
.attendance-kpi-group-title {
    font-size: 14px;
}
.attendance-kpi-group-items {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.attendance-kpi {
    min-height: 74px;
    border-color: #e5edf6;
    background: #fbfdff;
}
.attendance-kpi .kpi-label {
    font-weight: 750;
}
.attendance-kpi .kpi-value {
    font-size: 17px;
    font-weight: 850;
}
.attendance-table-wrap {
    margin-top: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: auto;
}
.attendance-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 850;
}
.attendance-table td {
    border-top: 1px solid #edf2f7;
}
.attendance-status-pill,
.status-badge {
    border-radius: 999px;
}
.staff-mini-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.staff-mini-card.leave-bucket-sick,
.staff-mini-card.leave-bucket-personal,
.staff-mini-card.leave-bucket-vacation,
.staff-mini-card.leave-bucket-other {
    min-height: 0;
    padding: 15px 15px 14px 17px;
    border-radius: 8px;
    box-shadow: none;
}
.staff-mini-label {
    font-size: 13px;
}
.staff-mini-value {
    font-size: 16px;
}
.staff-request-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.staff-request-stat {
    background: #fbfdff;
    border-color: #e2e8f0;
}
.staff-request-value {
    font-size: 28px;
}
.recent-item-list {
    gap: 10px;
}
.recent-item-card {
    border-radius: 8px;
    border-color: #e0e8f1;
    background: #ffffff;
    box-shadow: none;
}
.recent-item-card:hover {
    border-color: #cdd9e6;
    background: #fbfdff;
}
.recent-action-btn {
    border-radius: 8px;
}
.dashboard-recent-list {
    gap: 14px;
}
.dashboard-recent-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--recent-accent, #2563eb) 20%, #dbe7f4);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--recent-accent, #2563eb) 4%, #ffffff) 0%, #ffffff 48%),
        #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
    transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.dashboard-recent-status {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
}
.dashboard-recent-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    width: auto;
    height: 4px;
    background: var(--recent-accent, #2563eb);
}
.dashboard-recent-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--recent-accent, #2563eb) 34%, #cbd5e1);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}
.dashboard-recent-main {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 0 132px 0 0;
}
.dashboard-recent-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid #edf2f7;
    background: transparent;
}
.dashboard-recent-eyebrow {
    color: var(--recent-accent, #2563eb);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.3;
}
.dashboard-recent-title {
    margin-top: 4px;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
    word-break: break-word;
}
.dashboard-recent-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dashboard-recent-summary {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.55;
}
.dashboard-recent-summary span {
    color: #64748b;
    font-weight: 800;
}
.dashboard-recent-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    max-width: 100%;
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--recent-accent, #2563eb) 18%, #dbe7f4);
    border-radius: 8px;
    background: color-mix(in srgb, var(--recent-accent, #2563eb) 5%, #ffffff);
}
.dashboard-recent-chip-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
}
.dashboard-recent-chip-value {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}
.dashboard-recent-action {
    min-width: 104px;
    min-height: 38px;
    border-radius: 8px;
    text-decoration: none;
}
.meeting-recent-card {
    --recent-accent: #2563eb;
}
.meeting-recent-card .dashboard-recent-side {
    background: transparent;
}
.meeting-room-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.25;
}
.request-recent-card {
    --recent-accent: #64748b;
}
.request-recent-card.is-approved {
    --recent-accent: #059669;
}
.request-recent-card.is-pending {
    --recent-accent: #d97706;
}
.request-recent-card.is-rejected {
    --recent-accent: #dc2626;
}
.request-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--recent-accent) 24%, #dbe7f4);
    border-radius: 8px;
    background: color-mix(in srgb, var(--recent-accent) 6%, #ffffff);
}
.request-kind-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--recent-accent) 20%, #dbe7f4);
    border-radius: 999px;
    background: color-mix(in srgb, var(--recent-accent) 8%, #ffffff);
    color: var(--recent-accent);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.25;
}
.request-date-badge span {
    color: #64748b;
    font-size: 11px;
    font-weight: 850;
}
.request-date-badge strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}
.leave-history-section {
    background: #ffffff;
    border-color: #dce7f2;
}
.leave-history-section .recent-card-head {
    padding: 0 0 14px;
}
.leave-history-section .recent-card-head::before {
    display: none;
}
.leave-history-card {
    border-radius: 8px;
    padding: 13px;
    box-shadow: none;
}
.leave-history-card:hover {
    transform: none;
    box-shadow: none;
}
.leave-history-days {
    border-radius: 8px;
    min-width: 92px;
}
.leave-history-type {
    font-size: 16px;
}
.leave-history-pill {
    border-radius: 8px;
    white-space: normal;
}
@media (max-width: 1180px) {
    .staff-mini-grid,
    .staff-request-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .staff-dashboard-hero-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .staff-dashboard-page {
        gap: 14px;
        margin-inline: auto;
        padding-inline: var(--space-2);
        width: 100%;
    }
    .staff-dashboard-hero {
        align-items: stretch;
        padding: 16px;
    }
    .staff-dashboard-hero h1 {
        font-size: 22px;
    }
    .staff-dashboard-hero-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        width: 100%;
    }
    .staff-dashboard-hero-kpis span {
        min-height: 40px;
        padding: 0 10px;
        font-size: 11px;
    }
    .attendance-stats-card,
    .staff-summary-card,
    .recent-card-section {
        padding: 14px;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }
    .attendance-stats-head {
        align-items: stretch;
    }
    .attendance-stats-filter {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        width: 100%;
    }
    .attendance-stats-filter .month-label {
        grid-column: 1 / -1;
    }
    .attendance-stats-filter input[type="month"] {
        width: 100%;
        min-width: 0;
    }
    .attendance-kpi-grid,
    .staff-mini-grid,
    .staff-request-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .attendance-table-wrap {
        border: 0;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        width: 100%;
    }
    .attendance-table-wrap > .attendance-table,
    .attendance-table-wrap > .nice-table {
        border: 0;
        min-width: 0;
        table-layout: fixed;
        width: 100%;
    }
    .attendance-table,
    .attendance-table tbody,
    .attendance-table tr,
    .attendance-table td {
        box-sizing: border-box;
        display: block;
        max-width: 100%;
        width: 100%;
    }
    .attendance-table thead {
        display: none;
    }
    .attendance-table tr {
        display: grid;
        gap: 0;
        margin-bottom: var(--space-3);
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--border-soft);
        border-radius: var(--radius-md);
        background: var(--surface);
    }
    .attendance-table td {
        display: grid;
        align-items: center;
        grid-template-columns: minmax(72px, 38%) minmax(0, 1fr);
        gap: var(--space-2);
        min-height: 38px;
        padding: var(--space-2);
        border: 0;
        border-bottom: 1px solid var(--border-soft);
        text-align: right;
        white-space: normal;
    }
    .attendance-table td:last-child {
        border-bottom: 0;
    }
    .attendance-table td::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 850;
        text-align: left;
    }
    .attendance-table td.attendance-col-date {
        background: var(--surface-muted);
        font-weight: 850;
        text-align: right;
    }
    .attendance-table td:first-child {
        display: none;
    }
    .attendance-table td:first-child::before,
    .attendance-table .attendance-empty-row::before {
        display: none;
    }
    .attendance-table .attendance-empty-row {
        display: block;
        text-align: center;
    }
    .attendance-col-status {
        align-items: center;
    }
    .attendance-status-pill {
        min-height: 28px;
        justify-self: end;
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
    .attendance-status-meta {
        grid-column: 2;
        justify-self: end;
        max-width: 100%;
        text-align: right;
    }
    .dashboard-recent-card {
        grid-template-columns: 1fr;
        padding: 48px 14px 14px;
    }
    .dashboard-recent-main {
        padding: 0;
    }
    .dashboard-recent-status {
        top: 14px;
        right: 14px;
    }
    .dashboard-recent-side {
        min-width: 0;
        align-items: stretch;
        padding: 10px 0 0;
        border-top: 1px solid #edf2f7;
    }
    .dashboard-recent-chip {
        min-width: 0;
        width: 100%;
    }
    .dashboard-recent-action {
        width: 100%;
    }
    .request-date-badge {
        min-width: 0;
        width: 100%;
        justify-content: space-between;
    }
    .leave-history-card {
        grid-template-columns: 1fr;
    }
    .leave-history-days {
        min-width: 0;
        padding: 10px 12px;
        justify-items: start;
        text-align: left;
    }
}
@media (max-width: 430px) {
    .staff-dashboard-page {
        gap: var(--space-3);
        padding-inline: var(--space-1);
    }
    .staff-dashboard-hero-kpis {
        grid-template-columns: 1fr;
    }
    .attendance-stats-card,
    .staff-summary-card,
    .recent-card-section {
        padding: var(--space-2);
    }
    .attendance-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2);
    }
    .attendance-kpi {
        min-width: 0;
        padding: var(--space-2);
    }
    .attendance-stats-filter {
        grid-template-columns: 1fr;
    }
    .attendance-table-wrap {
        margin-inline: 0;
    }
    .attendance-table tr {
        margin-bottom: var(--space-2);
        border-radius: var(--radius-sm);
    }
    .attendance-table td {
        grid-template-columns: 1fr;
        gap: var(--space-1);
        min-height: 0;
        padding: var(--space-2);
        text-align: left;
    }
    .attendance-table td::before {
        font-size: 11px;
    }
    .attendance-table td,
    .attendance-table td::before,
    .attendance-table td > * {
        overflow-wrap: anywhere;
        min-width: 0;
    }
    .attendance-kpi .kpi-label,
    .attendance-kpi .kpi-value {
        overflow-wrap: anywhere;
        min-width: 0;
    }
    .attendance-table td.attendance-col-date {
        text-align: left;
    }
    .attendance-status-pill,
    .attendance-status-meta {
        justify-self: start;
        text-align: left;
    }
    .attendance-status-meta {
        grid-column: 1;
    }
    .attendance-submit-btn {
        width: 100%;
    }
}

/* Inventory staff dashboard shared component alignment. */
.staff-dashboard-page.page-stack {
    max-width: 1180px;
    gap: var(--space-4);
    color: var(--text-strong);
}
.staff-dashboard-page .staff-dashboard-hero.page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%);
    box-shadow: var(--shadow-card);
}
.staff-dashboard-page .staff-dashboard-hero .page-title,
.staff-dashboard-page .staff-dashboard-hero .page-subtitle {
    margin: 0;
}
.staff-dashboard-page .section-card {
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.staff-dashboard-page .staff-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}
.staff-dashboard-page .attendance-stats-head.section-head,
.staff-dashboard-page .recent-card-head.section-head {
    margin: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}
.staff-dashboard-page .attendance-stats-title.section-title,
.staff-dashboard-page .recent-card-title.section-title {
    margin: 0;
    color: var(--text-strong);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25;
}
.staff-dashboard-page .recent-card-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.staff-dashboard-page .attendance-stats-filter.filter-panel {
    margin: 0;
    padding: var(--space-2);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}
.staff-dashboard-page .attendance-stats-filter-grid.filter-grid {
    grid-template-columns: minmax(190px, 1fr) auto;
    align-items: end;
    gap: var(--space-2);
}
.staff-dashboard-page .attendance-stats-filter .form-field {
    margin: 0;
}
.staff-dashboard-page .attendance-stats-filter .field-label {
    align-self: center;
    margin: 0;
    white-space: nowrap;
}
.staff-dashboard-page .attendance-stats-filter input[type="month"] {
    width: 100%;
    min-width: 0;
    border-color: var(--border-muted);
    border-radius: var(--radius-sm);
}
.staff-dashboard-page .attendance-submit-btn.btn-primary {
    min-height: 38px;
    border-radius: var(--radius-sm);
}
.staff-dashboard-page .attendance-stats-actions.form-actions {
    margin: 0;
    justify-content: flex-end;
}
.staff-dashboard-page .attendance-cutoff-note.content-box {
    margin: 0;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-muted);
}
.staff-dashboard-page .attendance-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
}
.staff-dashboard-page .attendance-kpi-group.content-box {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.staff-dashboard-page .attendance-kpi-group.is-today {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
}
.staff-dashboard-page .attendance-kpi-group.is-alert {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
}
.staff-dashboard-page .attendance-kpi-group.is-time {
    border-color: var(--color-info-border);
    background: var(--color-info-soft);
}
.staff-dashboard-page .attendance-kpi.metric-card {
    min-height: 76px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    box-shadow: none;
}
.staff-dashboard-page .attendance-kpi .kpi-label {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 800;
}
.staff-dashboard-page .attendance-kpi .kpi-value {
    color: var(--text-strong);
    font-size: 16px;
    font-weight: 900;
}
.staff-dashboard-page .attendance-table-wrap.table-wrap {
    margin-top: 0;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
}
.staff-dashboard-page .attendance-table.nice-table th {
    background: var(--surface-muted);
    color: var(--text-soft);
}
.staff-dashboard-page .attendance-table.nice-table td {
    border-top-color: var(--border-soft);
}
.staff-dashboard-page .attendance-empty-row.empty-state {
    display: table-cell;
    margin: 0;
    border: 0;
    background: transparent;
}
.staff-dashboard-page .pager.pager-center {
    margin-top: 0;
}
.staff-dashboard-page .recent-item-list {
    display: grid;
    gap: var(--space-3);
}
.staff-dashboard-page .recent-item-card.record-card {
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}
.staff-dashboard-page .dashboard-recent-card.record-card {
    padding: var(--space-4);
}
.staff-dashboard-page .dashboard-recent-side {
    border-top-color: var(--border-soft);
}
.staff-dashboard-page .dashboard-recent-action.btn-secondary {
    min-height: 38px;
    border-radius: var(--radius-sm);
}
.staff-dashboard-page .recent-empty-state.empty-state {
    margin: 0;
}
.staff-dashboard-page .status-badge.badge-soft.status-approved {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}
.staff-dashboard-page .status-badge.badge-soft.status-pending {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}
.staff-dashboard-page .status-badge.badge-soft.status-rejected {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
}
.staff-dashboard-page .status-badge.badge-soft.status-unknown {
    border-color: var(--border-muted);
    background: var(--surface-muted);
    color: var(--text-soft);
}
.staff-dashboard-page .meeting-room-pill.badge-soft,
.staff-dashboard-page .request-kind-pill.badge-soft,
.staff-dashboard-page .leave-history-pill.badge-soft,
.staff-dashboard-page .attendance-status-pill.badge-soft {
    border-radius: var(--radius-pill);
}
.staff-dashboard-page .request-date-badge,
.staff-dashboard-page .dashboard-recent-chip {
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

@media (max-width: 900px) {
    .staff-dashboard-page .attendance-kpi-grid {
        grid-template-columns: 1fr;
    }
    .staff-dashboard-page .attendance-stats-filter-grid.filter-grid {
        grid-template-columns: 1fr auto;
        width: 100%;
    }
    .staff-dashboard-page .attendance-stats-filter .field-label {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .staff-dashboard-page .staff-dashboard-hero.page-hero,
    .staff-dashboard-page .section-card {
        padding: var(--space-3);
    }
    .staff-dashboard-page .attendance-stats-filter-grid.filter-grid {
        grid-template-columns: 1fr;
    }
    .staff-dashboard-page .attendance-submit-btn.btn-primary,
    .staff-dashboard-page .dashboard-recent-action.btn-secondary {
        width: 100%;
    }
    .staff-dashboard-page .attendance-empty-row.empty-state {
        display: block;
    }
}

/* Staff dashboard tidy pass: reduce nested frames and prevent compact control/card overlap. */
.staff-dashboard-page.page-stack {
    width: min(100%, 1180px);
    margin-inline: auto;
    gap: var(--space-5);
}

.staff-dashboard-page .staff-dashboard-hero.page-hero {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.staff-dashboard-page .staff-dashboard-hero.page-hero::after {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary-soft) 0%, var(--color-info-soft) 100%);
}

.staff-dashboard-page .staff-dashboard-hero .page-hero-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
}

.staff-dashboard-page .staff-dashboard-hero .page-hero-icon {
    grid-row: 1 / span 3;
    margin: 0;
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-strong);
    box-shadow: var(--shadow-sm);
}

.staff-dashboard-page .staff-dashboard-hero .page-kicker,
.staff-dashboard-page .staff-dashboard-hero .page-title,
.staff-dashboard-page .staff-dashboard-hero .page-subtitle {
    grid-column: 2;
}

.staff-dashboard-page .staff-dashboard-grid {
    gap: var(--space-5);
}

.staff-dashboard-page .staff-overview-section.section-card {
    display: grid;
    gap: var(--space-4);
}

.staff-dashboard-page .staff-overview-grid.metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.staff-dashboard-page .staff-overview-card.metric-card {
    position: relative;
    min-height: 124px;
    align-content: start;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-strong);
    box-shadow: none;
    overflow: hidden;
}

.staff-dashboard-page .staff-overview-card.metric-card::before {
    content: '';
    position: absolute;
    inset: var(--space-4) auto var(--space-4) 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--border-muted);
}

.staff-dashboard-page .staff-overview-card.metric-card.is-primary::before {
    background: var(--color-primary);
}

.staff-dashboard-page .staff-overview-card.metric-card.is-info::before {
    background: var(--color-info);
}

.staff-dashboard-page .staff-overview-card.metric-card.is-warning {
    border-color: var(--color-warning-border);
}

.staff-dashboard-page .staff-overview-card.metric-card.is-warning::before {
    background: var(--color-warning);
}

.staff-dashboard-page .staff-overview-card.metric-card.is-success {
    border-color: var(--color-success-border);
}

.staff-dashboard-page .staff-overview-card.metric-card.is-success::before {
    background: var(--color-success);
}

.staff-dashboard-page .staff-overview-card .metric-head {
    color: var(--text-soft);
}

.staff-dashboard-page .staff-overview-card .metric-icon {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 14px;
}

.staff-dashboard-page .staff-overview-card .metric-value {
    overflow-wrap: anywhere;
}

.staff-dashboard-page .staff-leave-entitlement-card.section-card {
    display: grid;
    gap: var(--space-4);
}

.staff-dashboard-page .staff-leave-entitlement-card .recent-card-head.section-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.staff-dashboard-page .staff-leave-entitlement-card .recent-card-head .badge-soft {
    align-self: start;
    white-space: nowrap;
}

.staff-dashboard-page .staff-leave-type-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.staff-dashboard-page .staff-leave-breakdown-head h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
}

.staff-dashboard-page .staff-leave-type-grid.staff-mini-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.staff-dashboard-page .staff-leave-type-grid .staff-mini-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    min-height: 220px;
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}

.staff-dashboard-page .staff-leave-type-grid .staff-mini-card::before {
    inset: var(--space-4) auto var(--space-4) 0;
    width: 3px;
}

.staff-dashboard-page .staff-leave-type-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.staff-dashboard-page .staff-leave-type-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
}

.staff-dashboard-page .staff-leave-type-grid .staff-mini-label {
    margin: 0;
    color: var(--text-strong);
}

.staff-dashboard-page .staff-leave-balance {
    display: grid;
    gap: var(--space-1);
}

.staff-dashboard-page .staff-leave-balance span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.staff-dashboard-page .staff-leave-balance strong {
    color: var(--text-strong);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.staff-dashboard-page .staff-leave-type-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.staff-dashboard-page .staff-leave-type-detail span {
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.staff-dashboard-page .staff-leave-type-detail strong {
    color: var(--text-strong);
}

.staff-dashboard-page .staff-leave-type-grid .staff-mini-progress {
    margin: 0;
}

.staff-dashboard-page .staff-leave-type-grid .staff-mini-progress-meta {
    margin: calc(var(--space-2) * -1) 0 0;
}

.staff-dashboard-page .staff-leave-type-grid .staff-mini-label,
.staff-dashboard-page .staff-leave-type-grid .staff-mini-value,
.staff-dashboard-page .staff-leave-type-grid .staff-mini-note,
.staff-dashboard-page .staff-leave-type-grid .staff-mini-progress-meta {
    overflow-wrap: anywhere;
}

.staff-dashboard-page .section-card,
.staff-dashboard-page .attendance-stats-card.section-card,
.staff-dashboard-page .recent-card-section.section-card {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.staff-dashboard-page .attendance-stats-card.section-card {
    display: grid;
    gap: var(--space-4);
}

.staff-dashboard-page .attendance-stats-head.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
}

.staff-dashboard-page .attendance-stats-filter.filter-panel {
    min-width: min(100%, 420px);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}

.staff-dashboard-page .attendance-stats-filter-grid.filter-grid {
    grid-template-columns: minmax(190px, 1fr) auto;
    align-items: end;
    gap: var(--space-2);
}

.staff-dashboard-page .attendance-stats-filter .month-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.2;
}

.staff-dashboard-page .attendance-stats-filter input[type="month"] {
    min-height: 40px;
}

.staff-dashboard-page .attendance-submit-btn.btn-primary {
    min-width: 92px;
    min-height: 40px;
    padding-inline: var(--space-3);
    white-space: nowrap;
}

.staff-dashboard-page .attendance-cutoff-note.content-box {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.staff-dashboard-page .attendance-kpi-grid {
    align-items: stretch;
    gap: var(--space-3);
}

.staff-dashboard-page .attendance-kpi-group.content-box {
    min-width: 0;
    align-content: start;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}

.staff-dashboard-page .attendance-kpi-group.is-today {
    border-color: var(--color-success-border);
}

.staff-dashboard-page .attendance-kpi-group.is-alert {
    border-color: var(--color-warning-border);
}

.staff-dashboard-page .attendance-kpi-group.is-time {
    border-color: var(--color-info-border);
}

.staff-dashboard-page .attendance-kpi-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}

.staff-dashboard-page .attendance-kpi-group-title,
.staff-dashboard-page .attendance-kpi-group-note {
    min-width: 0;
    overflow-wrap: anywhere;
}

.staff-dashboard-page .attendance-kpi-group-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
}

.staff-dashboard-page .attendance-kpi.metric-card {
    min-width: 0;
    min-height: 88px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    box-shadow: none;
}

.staff-dashboard-page .attendance-kpi.metric-card::before {
    width: 3px;
}

.staff-dashboard-page .attendance-kpi .kpi-label,
.staff-dashboard-page .attendance-kpi .kpi-value {
    min-width: 0;
    overflow-wrap: anywhere;
}

.staff-dashboard-page .attendance-kpi .kpi-value {
    line-height: 1.35;
}

.staff-dashboard-page .attendance-table-wrap.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    box-shadow: none;
}

.staff-dashboard-page .attendance-table.nice-table {
    min-width: 940px;
}

.staff-dashboard-page .attendance-dashboard-panel .section-subtitle {
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.staff-dashboard-page .attendance-snapshot.content-box {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4);
    border-color: var(--border-soft);
    background: var(--surface-subtle);
    box-shadow: none;
}

.staff-dashboard-page .attendance-snapshot-main {
    display: grid;
    align-content: center;
    gap: var(--space-2);
    min-width: 0;
}

.staff-dashboard-page .attendance-snapshot-title {
    color: var(--text-strong);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.25;
}

.staff-dashboard-page .attendance-snapshot-progress {
    height: 10px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

.staff-dashboard-page .attendance-snapshot-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.staff-dashboard-page .attendance-snapshot-note {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.staff-dashboard-page .attendance-snapshot-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    min-width: 0;
}

.staff-dashboard-page .attendance-snapshot-metric {
    display: grid;
    align-content: center;
    gap: var(--space-1);
    min-width: 0;
    min-height: 92px;
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.staff-dashboard-page .attendance-snapshot-metric span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.staff-dashboard-page .attendance-snapshot-metric strong {
    color: var(--text-strong);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.staff-dashboard-page .attendance-insight-grid.attendance-kpi-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(320px, 1.25fr) minmax(260px, 0.95fr);
    gap: var(--space-3);
    margin-bottom: 0;
}

.staff-dashboard-page .attendance-insight-grid .attendance-kpi-group.content-box {
    display: grid;
    gap: var(--space-3);
    min-height: 100%;
}

.staff-dashboard-page .attendance-insight-grid .badge-soft {
    justify-self: end;
    min-height: 28px;
}

.staff-dashboard-page .attendance-flowline {
    display: grid;
    gap: var(--space-3);
}

.staff-dashboard-page .attendance-flowline-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.staff-dashboard-page .attendance-flowline-item .kpi-label,
.staff-dashboard-page .attendance-flowline-item strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.staff-dashboard-page .attendance-flowline-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.staff-dashboard-page .attendance-flowline-dot.is-in {
    background: var(--color-success);
    box-shadow: 0 0 0 4px var(--color-success-soft);
}

.staff-dashboard-page .attendance-flowline-dot.is-out {
    background: var(--color-info);
    box-shadow: 0 0 0 4px var(--color-info-soft);
}

.staff-dashboard-page .recent-card-head.section-head {
    display: grid;
    gap: var(--space-1);
}

.staff-dashboard-page .recent-item-card.record-card,
.staff-dashboard-page .dashboard-recent-card.record-card {
    border-radius: var(--radius-md);
    box-shadow: none;
}

.staff-dashboard-page .badge-soft,
.staff-dashboard-page .status-badge {
    max-width: 100%;
    white-space: normal;
}

@media (max-width: 1040px) {
    .staff-dashboard-page .staff-overview-grid.metric-grid,
    .staff-dashboard-page .staff-leave-type-grid.staff-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .staff-dashboard-page .attendance-stats-head.section-head {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .staff-dashboard-page .attendance-stats-filter.filter-panel {
        width: 100%;
        min-width: 0;
    }

    .staff-dashboard-page .attendance-snapshot.content-box,
    .staff-dashboard-page .attendance-insight-grid.attendance-kpi-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .staff-dashboard-page.page-stack {
        gap: var(--space-4);
    }

    .staff-dashboard-page .staff-dashboard-hero.page-hero,
    .staff-dashboard-page .section-card,
    .staff-dashboard-page .attendance-stats-card.section-card,
    .staff-dashboard-page .recent-card-section.section-card {
        padding: var(--space-4);
    }

    .staff-dashboard-page .attendance-stats-filter-grid.filter-grid {
        grid-template-columns: 1fr;
    }

    .staff-dashboard-page .attendance-snapshot.content-box {
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .staff-dashboard-page .attendance-snapshot-metrics {
        grid-template-columns: 1fr;
    }

    .staff-dashboard-page .attendance-submit-btn.btn-primary {
        width: 100%;
    }

    .staff-dashboard-page .staff-overview-grid.metric-grid,
    .staff-dashboard-page .staff-leave-type-grid.staff-mini-grid {
        grid-template-columns: 1fr;
    }

    .staff-dashboard-page .staff-leave-entitlement-card .recent-card-head.section-head {
        grid-template-columns: 1fr;
    }

    .staff-dashboard-page .staff-leave-entitlement-card .recent-card-head .badge-soft {
        justify-self: start;
    }

    .staff-dashboard-page .staff-leave-type-grid .staff-mini-card {
        min-height: 0;
    }

    .staff-dashboard-page .attendance-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* Staff dashboard 2026 refresh: dashboard summaries replace recent-list tables. */
.staff-dashboard-page .page-hero-aside {
    display: grid;
    gap: var(--space-1);
    min-width: min(100%, 240px);
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.staff-dashboard-page .page-hero-aside .metric-value {
    color: var(--text-strong);
    font-size: 20px;
    line-height: 1.25;
}

.staff-dashboard-page .staff-quick-actions-card.section-card,
.staff-dashboard-page .staff-dashboard-summary-card.section-card {
    display: grid;
    gap: var(--space-4);
}

.staff-dashboard-page .staff-action-grid.action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.staff-dashboard-page .staff-action-grid .action-card {
    min-height: 118px;
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}

.staff-dashboard-page .staff-action-grid .action-title,
.staff-dashboard-page .staff-action-grid .action-sub {
    min-width: 0;
    overflow-wrap: anywhere;
}

.staff-dashboard-page .staff-action-grid .action-icon {
    flex: 0 0 auto;
}

.staff-dashboard-page .staff-dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: stretch;
}

.staff-dashboard-page .staff-summary-panel.record-card {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    min-width: 0;
    min-height: 100%;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}

.staff-dashboard-page .staff-summary-panel.is-success {
    border-color: var(--color-success-border);
}

.staff-dashboard-page .staff-summary-panel.is-warning {
    border-color: var(--color-warning-border);
}

.staff-dashboard-page .staff-summary-panel.is-info {
    border-color: var(--color-info-border);
}

.staff-dashboard-page .staff-summary-panel-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.staff-dashboard-page .staff-summary-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: 20px;
}

.staff-dashboard-page .staff-summary-panel h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.3;
}

.staff-dashboard-page .staff-summary-panel p {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.staff-dashboard-page .staff-summary-progress {
    height: 10px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
}

.staff-dashboard-page .staff-summary-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.staff-dashboard-page .staff-summary-panel.is-success .staff-summary-progress span {
    background: var(--color-success);
}

.staff-dashboard-page .staff-summary-panel.is-warning .staff-summary-progress span {
    background: var(--color-warning);
}

.staff-dashboard-page .staff-summary-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.staff-dashboard-page .staff-summary-stat-grid div,
.staff-dashboard-page .staff-summary-next.content-box {
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    box-shadow: none;
}

.staff-dashboard-page .staff-summary-stat-grid span,
.staff-dashboard-page .staff-summary-next span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.staff-dashboard-page .staff-summary-stat-grid strong,
.staff-dashboard-page .staff-summary-next strong {
    display: block;
    margin-top: var(--space-1);
    color: var(--text-strong);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.staff-dashboard-page .staff-summary-next strong {
    font-size: 15px;
}

.staff-dashboard-page .staff-summary-link.btn {
    justify-self: start;
    align-self: end;
}

.staff-dashboard-page .staff-dashboard-detail-callout.content-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    box-shadow: none;
}

.staff-dashboard-page .staff-dashboard-detail-callout strong,
.staff-dashboard-page .staff-dashboard-detail-callout span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.staff-dashboard-page .staff-dashboard-detail-callout strong {
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 900;
}

.staff-dashboard-page .staff-dashboard-detail-callout span {
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.staff-dashboard-page .staff-dashboard-detail-callout .btn {
    white-space: nowrap;
}

@media (max-width: 1040px) {
    .staff-dashboard-page .staff-dashboard-summary-grid,
    .staff-dashboard-page .staff-action-grid.action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .staff-dashboard-page .page-hero-aside {
        padding: var(--space-3);
    }

    .staff-dashboard-page .staff-dashboard-summary-grid,
    .staff-dashboard-page .staff-action-grid.action-grid,
    .staff-dashboard-page .staff-dashboard-detail-callout.content-box {
        grid-template-columns: 1fr;
    }

    .staff-dashboard-page .staff-summary-link.btn,
    .staff-dashboard-page .staff-dashboard-detail-callout .btn {
        width: 100%;
        justify-content: center;
    }

    .staff-dashboard-page .staff-action-grid .action-card {
        min-height: 0;
    }
}



/* Inventory employee profiles page components. Centralized from app/Modules/Inventory/Views/employee/profiles.php. */
.employee-profiles-page {
    display: grid;
    gap: 16px;
}
.employee-profiles-hero {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-end;
    padding: 18px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fafc 0%, #eef6f3 100%);
}
.employee-profiles-hero h1 {
    margin: 0;
    font-size: 1.55rem;
    color: #102033;
}
.employee-profiles-hero p {
    margin: 6px 0 0;
    color: #607085;
}
.employee-scope-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #123c69;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}
.employee-profiles-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
.employee-list-panel,
.employee-detail-panel {
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #fff;
}
.employee-list-head {
    padding: 14px;
}
.employee-list-head form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 86px auto;
    gap: 10px;
    align-items: end;
    margin-top: 12px;
}
.employee-field {
    display: grid;
    gap: 6px;
}
.employee-field label {
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
}
.employee-list-head input {
    width: 100%;
    border: 1px solid #b9c7d8;
    border-radius: 8px;
    padding: 12px 78px 12px 44px;
    min-height: 46px;
    background: #fff;
    color: #102033;
    font-size: .95rem;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}
.employee-list-head input:focus {
    outline: 2px solid rgba(18, 60, 105, .16);
    border-color: #123c69;
}
.employee-picker-wrap {
    position: relative;
}
.employee-picker-input-wrap {
    position: relative;
}
.employee-picker-input-wrap::before {
    content: "⌕";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-52%);
    color: #64748b;
    font-size: 1.05rem;
    pointer-events: none;
}
.employee-picker-input-wrap::after {
    content: "⌄";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-52%);
    color: #52647a;
    font-size: 1.2rem;
    pointer-events: none;
}
.employee-picker-panel {
    position: absolute;
    z-index: 30;
    top: 52px;
    left: 0;
    right: 0;
    max-height: 360px;
    overflow: auto;
    border: 1px solid #b9c7d8;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
    padding: 6px;
}
.employee-picker-panel[hidden] {
    display: none;
}
.employee-picker-group {
    padding: 2px 0 6px;
}
.employee-picker-group + .employee-picker-group {
    border-top: 1px solid #e2e8f0;
    margin-top: 4px;
    padding-top: 8px;
}
.employee-picker-group-title {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 8px 6px;
    color: #123c69;
    font-size: .82rem;
    font-weight: 800;
    background: #f8fafc;
    border-radius: 6px;
}
.employee-picker-group-title span:last-child {
    color: #64748b;
    font-weight: 700;
    white-space: nowrap;
}
.employee-picker-option {
    width: 100%;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    justify-items: start;
    text-align: left;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 8px;
    color: #172033;
    cursor: pointer;
    font: inherit;
}
.employee-picker-option:hover,
.employee-picker-option:focus {
    outline: none;
    background: #eef6f3;
}
.employee-picker-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dbeafe;
    color: #123c69;
    font-size: .9rem;
    font-weight: 800;
    overflow: hidden;
    flex: 0 0 34px;
}
.employee-picker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.employee-picker-text {
    min-width: 0;
}
.employee-picker-option strong {
    display: block;
    font-size: .95rem;
    line-height: 1.25;
    color: #102033;
}
.employee-picker-option small {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.25;
}
.employee-picker-badge {
    justify-self: end;
    border-radius: 999px;
    padding: 3px 8px;
    background: #fff7ed;
    color: #9a3412;
    font-size: .75rem;
    font-weight: 800;
    white-space: nowrap;
}
.employee-picker-empty {
    padding: 16px 12px;
    color: #64748b;
    text-align: center;
}
.employee-list-head .btn {
    min-height: 46px;
    border-radius: 8px;
}
.employee-selector-note {
    margin-top: 10px;
    color: #64748b;
    font-size: .9rem;
}
.employee-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #dbeafe;
    color: #123c69;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    overflow: hidden;
}
.employee-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.employee-list-name {
    font-weight: 800;
    line-height: 1.25;
}
.employee-list-meta {
    margin-top: 3px;
    color: #64748b;
    font-size: .88rem;
}
.employee-list-stat {
    margin-top: 7px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.employee-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: .82rem;
    font-weight: 700;
}
.employee-chip.is-head {
    background: #fff7ed;
    color: #9a3412;
}
.employee-detail-head {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid #e6edf5;
}
.employee-detail-head .employee-avatar {
    width: 86px;
    height: 86px;
    font-size: 1.8rem;
}
.employee-detail-head h2 {
    margin: 0;
    font-size: 1.35rem;
    color: #102033;
}
.employee-detail-position {
    margin-top: 5px;
    color: #607085;
}
.employee-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #e6edf5;
}
.employee-summary-item {
    padding: 10px;
    border-radius: 8px;
    background: #f8fafc;
}
.employee-summary-item span {
    display: block;
    color: #64748b;
    font-size: .8rem;
}
.employee-summary-item strong {
    display: block;
    margin-top: 4px;
    color: #172033;
    word-break: break-word;
}
.employee-training-section {
    padding: 18px;
}
.employee-training-section h3 {
    margin: 0 0 12px;
    font-size: 1.05rem;
}
.employee-training-list {
    display: grid;
    gap: 10px;
}
.employee-training-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
}
.employee-training-title {
    font-weight: 800;
    color: #0f172a;
}
.employee-training-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    color: #64748b;
    font-size: .9rem;
}
.employee-training-note {
    margin-top: 8px;
    color: #475569;
}
.employee-training-actions {
    margin-top: 10px;
}
.employee-empty {
    padding: 26px 18px;
    color: #64748b;
    text-align: center;
}
.employee-training-summary-panel {
    min-width: 0;
    display: grid;
    gap: 14px;
    border: 1px solid #dbe4ef;
    border-radius: 10px;
    background: #fff;
    padding: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}
.employee-training-summary-card-list {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.employee-training-workline-groups {
    display: grid;
    gap: 20px;
}
.employee-training-workline-group {
    display: grid;
    gap: 10px;
}
.employee-training-workline-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 8px;
    border-bottom: 1px solid #dbe5f3;
}
.employee-training-workline-head span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.employee-training-workline-head h4 {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: 17px;
    line-height: 1.25;
}
.employee-training-workline-head > strong {
    flex: 0 0 auto;
    border: 1px solid #dbe5f3;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
}
.employee-training-summary-card {
    min-width: 0;
    display: grid;
    gap: 12px;
    border: 1px solid #dbe5f3;
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}
.employee-training-person {
    min-width: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}
.employee-training-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe5f3;
    background: #eff6ff;
    color: #123c69;
    font-size: 1rem;
    font-weight: 900;
    overflow: hidden;
}
.employee-training-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.employee-training-person strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.employee-training-person span {
    display: block;
    margin-top: 4px;
    max-width: 24rem;
    color: #64748b;
    font-size: .84rem;
    line-height: 1.35;
}
.employee-training-workline {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    margin-top: 0 !important;
    padding: 5px 10px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8 !important;
    font-weight: 900;
}
.employee-training-summary-card-metrics {
    display: grid;
    gap: 8px 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 10px 0;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
}
.employee-training-summary-card-metrics > div {
    min-width: 0;
}
.employee-training-summary-card-metrics span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.employee-training-summary-card-metrics strong {
    display: block;
    margin-top: 2px;
    color: #0f766e;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.employee-training-latest {
    display: grid;
    gap: 4px;
}
.employee-training-latest span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.employee-training-latest strong {
    color: #102033;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.employee-training-latest em {
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
}
@media (max-width: 980px) {
    .employee-profiles-hero {
        align-items: flex-start;
        flex-direction: column;
    }
    .employee-list-head form {
        grid-template-columns: 1fr auto;
    }
    .employee-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .employee-list-head form {
        grid-template-columns: 1fr;
    }
    .employee-picker-option {
        grid-template-columns: 32px minmax(0, 1fr);
    }
    .employee-picker-badge {
        justify-self: start;
        grid-column: 2;
    }
    .employee-detail-head {
        grid-template-columns: 1fr;
    }
    .employee-summary-grid {
        grid-template-columns: 1fr;
    }
}

.employee-profiles-page {
    gap: 18px;
}
.employee-profiles-hero {
    align-items: center;
    padding: 20px 22px;
    background: #f8fbfd;
    border-color: #d5e0ec;
}
.employee-hero-copy {
    display: grid;
    gap: 4px;
}
.employee-hero-kicker {
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
}
.employee-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 8px;
    min-width: min(300px, 100%);
}
.employee-hero-stat {
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}
.employee-hero-stat span {
    display: block;
    color: #64748b;
    font-size: .78rem;
    font-weight: 700;
}
.employee-hero-stat strong {
    display: block;
    margin-top: 3px;
    color: #0f172a;
    font-size: 1.25rem;
}
.employee-selector-panel {
    border: 1px solid #d5e0ec;
    border-radius: 8px;
    background: #fff;
}
.employee-list-head {
    padding: 16px;
}
.employee-selector-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}
.employee-selector-title strong {
    display: block;
    color: #0f172a;
    font-size: 1rem;
}
.employee-selector-title span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: .86rem;
}
.employee-list-head form {
    grid-template-columns: minmax(0, 1fr) auto auto;
    margin-top: 14px;
}
.employee-field label {
    margin-bottom: 2px;
}
.employee-picker-panel {
    max-height: 390px;
    padding: 8px;
}
.employee-picker-group-title {
    position: sticky;
    top: 0;
    z-index: 1;
}
.employee-picker-option {
    margin-top: 4px;
    min-height: 54px;
}
.employee-picker-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}
.employee-selected-profile {
    border: 1px solid #d5e0ec;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.employee-profile-hero {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) minmax(260px, 380px);
    gap: 18px;
    align-items: center;
    padding: 20px;
    background: #f8fbfd;
    border-bottom: 1px solid #e2e8f0;
}
.employee-profile-photo {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #dbeafe;
    color: #123c69;
    font-size: 2.1rem;
    font-weight: 900;
    border: 4px solid #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .12);
}
.employee-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.employee-profile-main {
    min-width: 0;
}
.employee-profile-main h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1.45rem;
    line-height: 1.25;
}
.employee-profile-subtitle {
    margin-top: 5px;
    color: #475569;
}
.employee-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}
.employee-profile-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eef6f3;
    color: #185c4b;
    font-size: .82rem;
    font-weight: 800;
}
.employee-profile-tag.is-muted {
    background: #f1f5f9;
    color: #475569;
}
.employee-profile-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.employee-profile-kpi {
    min-height: 72px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}
.employee-profile-kpi span {
    display: block;
    color: #64748b;
    font-size: .76rem;
    font-weight: 700;
}
.employee-profile-kpi strong {
    display: block;
    margin-top: 5px;
    color: #0f172a;
    font-size: 1.05rem;
    line-height: 1.2;
}
.employee-info-section,
.employee-training-section {
    padding: 18px 20px;
}
.employee-section-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}
.employee-section-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
}
.employee-section-head span {
    color: #64748b;
    font-size: .86rem;
}
.employee-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0;
    border-bottom: 0;
}
.employee-summary-item {
    min-height: 74px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    background: #fbfdff;
}
.employee-training-section {
    border-top: 1px solid #e2e8f0;
}
.employee-training-list {
    gap: 12px;
}
.employee-training-card {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 14px;
    background: #fff;
}
.employee-training-date {
    color: #123c69;
    font-size: .9rem;
    font-weight: 900;
}
.employee-training-content {
    min-width: 0;
}
.employee-training-title {
    line-height: 1.35;
}
.employee-training-meta {
    gap: 6px;
}
.employee-training-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f1f5f9;
}
.employee-training-actions {
    margin-top: 0;
}
.employee-empty {
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}
@media (max-width: 1080px) {
    .employee-profile-hero {
        grid-template-columns: 100px minmax(0, 1fr);
    }
    .employee-profile-kpis {
        grid-column: 1 / -1;
    }
}
@media (max-width: 760px) {
    .employee-profiles-hero,
    .employee-selector-title,
    .employee-section-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .employee-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    .employee-list-head form {
        grid-template-columns: 1fr;
    }
    .employee-list-head .btn {
        width: 100%;
    }
    .employee-profile-hero {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .employee-profile-photo {
        width: 92px;
        height: 92px;
    }
    .employee-profile-kpis,
    .employee-summary-grid {
        grid-template-columns: 1fr;
    }
    .employee-training-summary-panel {
        padding: 14px;
    }
    .employee-training-workline-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .employee-training-summary-card {
        grid-template-columns: 1fr;
    }
    .employee-training-summary-card-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .employee-training-card {
        grid-template-columns: 1fr;
    }
    .employee-training-actions .btn {
        width: 100%;
    }
}
@media (max-width: 460px) {
    .employee-hero-stats {
        grid-template-columns: 1fr;
    }
    .employee-picker-option {
        grid-template-columns: 38px minmax(0, 1fr);
    }
    .employee-picker-badge {
        grid-column: 2;
        justify-self: start;
    }
    .employee-training-summary-card {
        padding: 10px;
    }
    .employee-training-summary-card-metrics {
        grid-template-columns: 1fr;
    }
}

.employee-selector-panel {
    border-color: #d8e2ee;
}
.employee-list-head {
    padding: 18px;
}
.employee-selector-title {
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid #eef2f7;
}
.employee-selector-title strong {
    font-size: 1.08rem;
}
.employee-selector-title span {
    margin-top: 4px;
}
.employee-selector-count {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    font-size: .84rem;
    font-weight: 800;
    white-space: nowrap;
}
.employee-list-head form {
    grid-template-columns: minmax(0, 1fr) 92px auto;
    gap: 10px;
    margin-top: 16px;
}
.employee-field {
    gap: 0;
}
.employee-list-head input {
    border-color: #c8d4e2;
    padding-left: 42px;
    padding-right: 38px;
    background: #fbfdff;
}
.employee-list-head input:focus {
    background: #fff;
}
.employee-picker-input-wrap::before {
    content: "";
    width: 16px;
    height: 16px;
    left: 15px;
    border: 2px solid #64748b;
    border-radius: 50%;
    box-sizing: border-box;
}
.employee-picker-input-wrap::after {
    content: "";
    right: 17px;
    width: 7px;
    height: 7px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: translateY(-65%) rotate(45deg);
}
.employee-picker-input-wrap:has(input:focus)::before {
    border-color: #123c69;
}
.employee-picker-input-wrap:has(input:focus)::after {
    border-color: #123c69;
}
.employee-picker-panel {
    top: calc(100% + 10px);
    border-color: #d8e2ee;
    box-shadow: 0 20px 48px rgba(15, 23, 42, .16);
}
.employee-selector-note {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    color: #526173;
}
@media (max-width: 760px) {
    .employee-selector-title {
        align-items: flex-start;
    }
    .employee-selector-count {
        white-space: normal;
    }
    .employee-list-head form {
        grid-template-columns: 1fr;
    }
}



/* Inventory executive dashboard page components. Centralized from app/Modules/Inventory/Views/executive/dashboard.php. */
.summary-card {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}
.executive-card-top {
    margin-top: 10px;
}
.executive-rank-table {
    margin-bottom: 12px;
}
.executive-empty-row {
    text-align: center;
    color: #6b7280;
}
.project-overview-card {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}
.project-overview-head {
    margin-bottom: 10px;
}
.fiscal-filter-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.fiscal-field {
    display: grid;
    gap: 6px;
    flex: 0 0 calc(25% - 6px);
    min-width: 220px;
    max-width: 320px;
}
.fiscal-filter-form label {
    font-size: 13px;
    color: #475569;
    font-weight: 600;
}
.fiscal-filter-form select {
    width: 100%;
}
.fiscal-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.fiscal-active-label {
    color: #475569;
    font-size: 13px;
    margin-bottom: 4px;
}
.project-overview-title {
    font-weight: 700;
    color: #0f172a;
}
.project-overview-sub {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}
.project-overview-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.project-overview-grid.second-row {
    margin-top: 0;
}
.project-group-card {
    border: 1px solid #dbe4ef;
    border-radius: 12px;
    padding: 10px;
    background: #f8fbff;
    margin-top: 10px;
}
.project-group-title {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
}
.project-dept-wrap {
    margin-top: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    background: #f8fafc;
}
.project-dept-title {
    font-weight: 700;
    margin-bottom: 8px;
    color: #0f172a;
}
.project-dept-empty {
    color: #64748b;
}
.project-dept-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.project-dept-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 10px;
    background: #fff;
}
.project-funding-item {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.project-dept-item .dept-name {
    font-weight: 700;
    color: #0f172a;
}
.project-dept-item .dept-meta {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}
.project-dept-item .dept-budget {
    margin-top: 3px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
}
.summary-title {
    font-weight: 700;
    margin-bottom: 10px;
}
.summary-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.summary-item {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
}
.summary-item.summary-all { background:#eff6ff; border-color:#bfdbfe; }
.summary-item.summary-pending { background:#fffbeb; border-color:#fde68a; }
.summary-item.summary-approved { background:#f0fdf4; border-color:#bbf7d0; }
.summary-item.summary-rejected { background:#fef2f2; border-color:#fecaca; }
.summary-label {
    color: #64748b;
    font-size: 13px;
    margin-bottom: 4px;
}
.summary-value {
    color: #0f172a;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}
.summary-value.summary-ok { color: #15803d; }
.summary-value.summary-warn { color: #b45309; }
.summary-value.summary-bad { color: #b91c1c; }
.executive-panel {
    padding: 14px;
    margin-top: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.panel-head-second {
    margin-top: 8px;
}
.panel-title {
    font-weight: 700;
    color: #0f172a;
}
.month-filter-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.month-filter-form label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 600;
}
.month-filter-form input[type="month"] {
    width: 170px;
}
.export-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.top3-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 10px;
}
.top3-card {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
}
.top3-empty {
    color: #6b7280;
}
.top3-rank {
    font-size: 12px;
    color: #6b7280;
}
.top3-name {
    font-weight: 700;
    margin-top: 2px;
    color: #0f172a;
}
.top3-value {
    font-size: 13px;
    color: #334155;
    margin-top: 2px;
}
.table-centered th,
.table-centered td {
    text-align: center;
    vertical-align: middle;
}
.rank-table th,
.rank-table td {
    text-align: center;
    vertical-align: middle;
}
.btn-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    border-radius: 999px;
    text-decoration: none;
}
.btn-secondary {
    background: #64748b;
    border-color: #64748b;
}
.btn-secondary:hover {
    background: #475569;
    border-color: #475569;
}
@media (max-width: 680px) {
    .panel-head,
    .month-filter-form,
    .export-actions,
    .fiscal-filter-form {
        justify-content: flex-start;
    }
    .fiscal-field {
        flex: 1 1 100%;
        max-width: none;
    }
}



/* Notifications index page components. Centralized from app/Modules/Notifications/Views/index.php. */
.notif-page {
    max-width: 1180px;
}

.notif-page-head {
    align-items: stretch;
}

.notif-page-head .page-hero-main {
    min-width: 0;
}

.notif-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.notif-hero-action {
    display: grid;
    gap: var(--space-2);
    min-width: min(100%, 280px);
    align-content: center;
}

.notif-hero-action strong {
    color: var(--text-strong);
    font-size: var(--font-size-lg);
}

.notif-hero-action small {
    color: var(--text-muted);
    line-height: 1.5;
}

.notif-metrics.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.notif-workbench.section-card {
    display: grid;
    gap: var(--space-4);
}

.notif-filter-block {
    display: grid;
    gap: var(--space-2);
}

.notif-filter-label {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
}

.notif-filter-bar {
    gap: var(--space-2);
}

.notif-filter-btn,
.notif-mark-btn {
    min-height: var(--btn-height);
}

.notif-module-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.notif-module-filter-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 74px;
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-strong);
    text-decoration: none;
    box-shadow: none;
}

.notif-module-filter-card:hover,
.notif-module-filter-card.is-active {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    text-decoration: none;
}

.notif-module-icon,
.notif-group-icon,
.notif-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid var(--theme-icon-border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--theme-icon-ink);
}

.notif-module-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.notif-module-copy strong {
    color: var(--text-strong);
    font-size: var(--font-size-sm);
}

.notif-module-copy small {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

/* Inventory reports, executive dashboard, and employee profiles shared component alignment. */
.inventory-reports-page.page-stack,
.executive-dashboard-page.page-stack,
.employee-profiles-page.page-stack {
    max-width: 1180px;
    gap: var(--space-4);
}
.inventory-reports-page .page-hero,
.executive-dashboard-page .page-hero,
.employee-profiles-page .page-hero {
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%);
    box-shadow: var(--shadow-card);
}
.inventory-reports-page .page-title,
.inventory-reports-page .page-subtitle,
.executive-dashboard-page .page-title,
.employee-profiles-page .page-title,
.employee-profiles-page .page-subtitle {
    margin: 0;
}
.inventory-reports-page .section-card,
.executive-dashboard-page .section-card,
.employee-profiles-page .section-card {
    gap: var(--space-4);
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.inventory-reports-page .inventory-report-actions.action-row,
.inventory-reports-page .inventory-report-export-actions,
.executive-dashboard-page .export-actions.action-row,
.executive-dashboard-page .fiscal-actions.form-actions,
.employee-profiles-page #employeePickerForm.filter-panel {
    gap: var(--space-2);
}
.inventory-reports-page .inventory-report-metric.metric-card,
.executive-dashboard-page .metric-card,
.employee-profiles-page .metric-card {
    border-radius: var(--radius-md);
    box-shadow: none;
}
.inventory-reports-page .inventory-report-metric.metric-card {
    text-decoration: none;
}
.inventory-reports-page .inventory-report-panel.section-card,
.inventory-reports-page .inventory-report-export-card.section-card {
    display: grid;
}
.inventory-reports-page .record-card,
.employee-profiles-page .record-card,
.executive-dashboard-page .record-card {
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}
.inventory-reports-page .inventory-report-empty.empty-state,
.executive-dashboard-page .empty-state,
.employee-profiles-page .employee-empty.empty-state {
    margin: 0;
}
.inventory-reports-page .inventory-report-table-wrap.table-wrap,
.executive-dashboard-page .table-wrap {
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
}
.executive-dashboard-page .filter-panel,
.employee-profiles-page #employeePickerForm.filter-panel {
    padding: var(--space-3);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}
.executive-dashboard-page .summary-grid,
.executive-dashboard-page .project-overview-grid,
.employee-profiles-page .employee-summary-grid,
.employee-profiles-page .employee-profile-kpis,
.employee-profiles-page .employee-training-summary-card-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
}
.executive-dashboard-page .status-badge.badge-soft,
.employee-profiles-page .badge-soft {
    border-radius: var(--radius-pill);
}
.executive-dashboard-page .status-badge.badge-soft.status-approved {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}
.executive-dashboard-page .status-badge.badge-soft.status-pending {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}
.executive-dashboard-page .status-badge.badge-soft.status-rejected {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
}
.employee-profiles-page .employee-profiles-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: var(--space-4);
}
.employee-profiles-page .employee-selected-profile.section-card,
.employee-profiles-page .employee-info-section.section-card,
.employee-profiles-page .employee-training-section.section-card,
.employee-profiles-page .employee-training-summary-panel.section-card {
    display: grid;
}
.employee-profiles-page .employee-profile-hero.content-box,
.employee-profiles-page .employee-summary-item.content-box {
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}
.employee-profiles-page .employee-profile-tags,
.employee-profiles-page .employee-training-list,
.employee-profiles-page .employee-training-workline-groups,
.employee-profiles-page .employee-training-summary-card-list {
    display: grid;
    gap: var(--space-3);
}

@media (max-width: 900px) {
    .inventory-reports-page .inventory-report-hero.page-hero,
    .employee-profiles-page .employee-profiles-grid {
        grid-template-columns: 1fr;
    }
    .executive-dashboard-page .section-card,
    .employee-profiles-page .section-card,
    .inventory-reports-page .section-card {
        padding: var(--space-3);
    }
}

.notif-inline-form {
    margin: 0;
}

.notif-empty-card {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.notif-groups {
    display: grid;
    gap: var(--space-4);
}

.notif-group-section.section-card {
    padding: 0;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
    overflow: hidden;
}

.notif-group-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border-soft);
}

.notif-group-title-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.notif-group-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--text-strong);
    font-size: var(--font-size-lg);
}

.notif-group-count {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.notif-group-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.notif-group-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.notif-card-list {
    display: grid;
    gap: 0;
    background: var(--surface);
}

.notif-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    align-items: stretch;
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    background: var(--surface);
    box-shadow: none;
    position: relative;
}

.notif-card:last-child {
    border-bottom: 0;
}

.notif-card.is-unread {
    background: var(--surface);
}

.notif-card:hover {
    background: var(--surface-subtle);
}

.notif-card.is-unread::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--space-4);
    bottom: var(--space-4);
    width: 3px;
    background: var(--color-primary);
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.notif-card-main {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.notif-card-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
}

.notif-card-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.notif-card-time {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.notif-card-message {
    color: var(--text-strong);
    font-size: var(--font-size-md);
    font-weight: 650;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.notif-card-context {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 650;
}

.notif-card-context-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.notif-card-context-item + .notif-card-context-item::before {
    content: "•";
    margin-right: var(--space-2);
    color: var(--border-muted);
}

.notif-toggle-btn {
    border: 1px solid var(--border-muted);
    background: var(--surface);
    color: var(--text-strong);
    border-radius: var(--radius-xs);
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.notif-toggle-btn:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
}

.notif-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 32px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-soft);
    background: var(--surface);
    color: var(--text-strong);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.notif-open-btn:hover {
    background: var(--nav-active-bg);
    border-color: var(--color-primary-border);
    color: var(--color-primary-ink);
    text-decoration: none;
}

.notif-status-read {
    background: var(--surface-muted);
    color: var(--text-soft);
    border: 1px solid var(--border-muted);
}

.notif-status-unread {
    background: var(--color-primary-soft);
    color: var(--color-primary-ink);
    border: 1px solid var(--color-primary-border);
}

.notif-summary-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: color-mix(in srgb, var(--text-strong) 42%, transparent);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.notif-summary-modal.show,
.notif-summary-modal.is-open {
    display: flex;
}

.notif-summary-card {
    width: min(680px, 94vw);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
}

.notif-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border-soft);
}

.notif-summary-grid {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
}

.notif-summary-label {
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--font-size-xs);
}

.notif-summary-value {
    color: var(--text-strong);
    font-size: var(--font-size-md);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.notif-summary-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-soft);
    background: var(--surface-subtle);
}

.notif-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    background: var(--color-primary);
    color: var(--surface);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--font-size-sm);
    border: 0;
    cursor: pointer;
}

.notif-close-btn {
    border: 1px solid var(--border-muted);
    background: var(--surface);
    color: var(--text-strong);
    border-radius: var(--radius-xs);
    padding: var(--space-2) var(--space-3);
    font-weight: 600;
    cursor: pointer;
}

.notif-status-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 700;
    width: fit-content;
}

@media (max-width: 980px) {
    .notif-metrics.metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .notif-page-head {
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-3);
    }

    .notif-metrics.metric-grid,
    .notif-module-filter-grid {
        grid-template-columns: 1fr;
    }

    .notif-mark-btn,
    .notif-inline-form {
        width: 100%;
    }

    .notif-filter-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .notif-filter-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .notif-group-head {
        grid-template-columns: 1fr;
        align-items: stretch;
        padding: var(--space-3);
    }

    .notif-group-actions,
    .notif-toggle-btn {
        width: 100%;
    }

    .notif-card {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-3);
    }

    .notif-card-heading {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: var(--space-2);
    }

    .notif-open-btn {
        width: 100%;
    }

    .notif-summary-grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .notif-summary-actions {
        flex-direction: column-reverse;
    }

    .notif-summary-actions .notif-inline-form,
    .notif-close-btn,
    .notif-detail-btn {
        width: 100%;
    }
}



/* Auth login page components. Centralized from app/Modules/Auth/Views/login.php. */
body.auth-login-page {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Noto Sans Thai", system-ui, sans-serif;
            background:
                radial-gradient(1200px 500px at 15% -10%, #dbeafe 0%, transparent 60%),
                radial-gradient(900px 400px at 110% 110%, #e0f2fe 0%, transparent 55%),
                #f8fafc;
            color: #0f172a;
        }
body.auth-login-page .login-shell {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px 16px 44px;
            box-sizing: border-box;
        }
body.auth-login-page .login-card {
            width: 100%;
            max-width: 460px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid #e2e8f0;
            border-radius: 22px;
            box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
            backdrop-filter: blur(6px);
            padding: 28px 26px 24px;
            box-sizing: border-box;
        }
body.auth-login-page .login-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 18px;
        }
body.auth-login-page .logo-badge {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: transparent;
            color: #0f172a;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            overflow: hidden;
            flex: 0 0 auto;
        }
body.auth-login-page .logo-badge img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
body.auth-login-page .login-title {
            font-size: 24px;
            font-weight: 600;
            letter-spacing: -0.02em;
        }
body.auth-login-page .login-sub {
            color: #64748b;
            font-size: 13px;
        }
body.auth-login-page .login-error {
            color: #b91c1c;
            background: #fef2f2;
            border: 1px solid #fecaca;
            border-radius: 10px;
            padding: 9px 10px;
            margin: 0 0 12px;
            font-size: 14px;
        }
body.auth-login-page .login-form {
            display: grid;
            gap: 12px;
        }
body.auth-login-page .login-form label {
            display: grid;
            gap: 6px;
            font-size: 14px;
            color: #334155;
        }
body.auth-login-page .login-form input {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            background: #fff;
            padding: 10px 12px;
            font-size: 15px;
            outline: none;
            transition: border-color .15s ease, box-shadow .15s ease;
        }
body.auth-login-page .login-form input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }
body.auth-login-page .password-row {
            position: relative;
        }
body.auth-login-page .password-row input {
            padding-right: 46px;
        }
body.auth-login-page .login-form .password-toggle {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            border: 0;
            background: transparent;
            color: #64748b;
            border-radius: 8px;
            padding: 0;
            margin: 0;
            box-shadow: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
body.auth-login-page .login-form .password-toggle:hover {
            background: #eef2ff;
            color: #1d4ed8;
            transform: translateY(-50%);
            box-shadow: none;
        }
body.auth-login-page .password-toggle svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
body.auth-login-page .login-form button {
            margin-top: 4px;
            border: 0;
            border-radius: 12px;
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            padding: 11px 14px;
            cursor: pointer;
            box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
            transition: transform .12s ease, box-shadow .12s ease;
        }
body.auth-login-page .login-form button:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 24px rgba(37, 99, 235, 0.3);
        }
body.auth-login-page .register-link {
            margin-top: 8px;
            display: block;
            text-align: center;
            color: #1d4ed8;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
        }
body.auth-login-page .register-link:hover { text-decoration: underline; }
body.auth-login-page .login-page-footer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 14px;
            text-align: center;
            font-size: 12px;
            color: #64748b;
        }
body.auth-login-page .lang-switch-login {
            position: fixed;
            top: 16px;
            right: 16px;
            display: inline-flex;
            border: 1px solid #dbe3f0;
            border-radius: 999px;
            background: rgba(255,255,255,.95);
            padding: 4px;
            z-index: 10;
            gap: 4px;
        }
body.auth-login-page .lang-switch-login a {
            text-decoration: none;
            color: #475569;
            font-weight: 700;
            font-size: 12px;
            padding: 6px 10px;
            border-radius: 999px;
        }
body.auth-login-page .lang-switch-login a.active {
            background: #2563eb;
            color: #fff;
        }



/* Auth register page components. Centralized from app/Modules/Auth/Views/register.php. */
body.auth-register-page,
        body.auth-register-page * { box-sizing: border-box; }
        body.auth-register-page {
            margin: 0;
            min-height: 100vh;
            font-family: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            background: #f6f8fb;
            color: #0f172a;
        }
        body.auth-register-page .register-lang {
            position: fixed;
            top: 18px;
            right: 18px;
            z-index: 20;
            display: inline-flex;
            gap: 2px;
            padding: 3px;
            border: 1px solid #dbe3ee;
            border-radius: 999px;
            background: #fff;
        }
        body.auth-register-page .register-lang a {
            min-width: 38px;
            padding: 6px 9px;
            border-radius: 999px;
            color: #64748b;
            text-align: center;
            text-decoration: none;
            font-size: 12px;
            font-weight: 800;
        }
        body.auth-register-page .register-lang a.active {
            background: #0f172a;
            color: #fff;
        }
        body.auth-register-page .register-shell {
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 64px 16px 30px;
        }
        body.auth-register-page .register-panel {
            width: min(940px, 100%);
            border: 1px solid #dbe3ee;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 22px 50px rgba(15, 23, 42, 0.09);
            overflow: hidden;
        }
        body.auth-register-page .register-header {
            padding: 28px 32px 24px;
            border-bottom: 1px solid #edf2f7;
            background: #fff;
        }
        body.auth-register-page .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
            margin-bottom: 20px;
        }
        body.auth-register-page .brand-logo {
            width: 44px;
            height: 44px;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 0;
            border-radius: 0;
            background: transparent;
            color: #0f766e;
            font-weight: 900;
        }
        body.auth-register-page .brand-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        body.auth-register-page .brand-name {
            color: #0f172a;
            font-size: 15px;
            font-weight: 900;
            line-height: 1.3;
            overflow-wrap: anywhere;
        }
        body.auth-register-page .brand-sub {
            color: #64748b;
            font-size: 12px;
            line-height: 1.45;
        }
        body.auth-register-page .register-title {
            margin: 0;
            color: #0f172a;
            font-size: 29px;
            line-height: 1.22;
            font-weight: 900;
            letter-spacing: 0;
        }
        body.auth-register-page .register-subtitle {
            max-width: 720px;
            margin: 8px 0 0;
            color: #64748b;
            font-size: 14px;
            line-height: 1.75;
        }
        body.auth-register-page .register-note {
            max-width: 100%;
            margin-top: 14px;
            padding: 10px 12px;
            border-left: 3px solid #0f766e;
            background: #f8fafc;
            color: #334155;
            font-size: 12px;
            line-height: 1.65;
            font-weight: 700;
        }
        body.auth-register-page .register-note strong {
            color: #0f172a;
            font-weight: 900;
        }
        body.auth-register-page .register-body {
            padding: 28px 32px 30px;
            background: #fbfdff;
        }
        body.auth-register-page .register-error {
            margin: 0 0 16px;
            padding: 11px 13px;
            border: 1px solid #fecaca;
            border-radius: 12px;
            background: #fef2f2;
            color: #b91c1c;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.55;
        }
        body.auth-register-page .register-form {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
            align-items: start;
        }
        body.auth-register-page .form-section {
            display: grid;
            grid-template-columns: 190px minmax(0, 1fr);
            gap: 22px;
            min-width: 0;
            padding: 20px;
            border: 1px solid #dbe3ee;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
        }
        body.auth-register-page .section-head {
            display: grid;
            gap: 5px;
            align-content: start;
            min-width: 0;
        }
        body.auth-register-page .section-title {
            margin: 0;
            color: #0f172a;
            font-size: 16px;
            line-height: 1.35;
            font-weight: 900;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        body.auth-register-page .section-title::before {
            content: "";
            width: 8px;
            height: 8px;
            flex: 0 0 auto;
            border-radius: 999px;
            background: #0f766e;
        }
        body.auth-register-page .section-copy {
            margin: 0;
            color: #64748b;
            font-size: 12px;
            line-height: 1.65;
        }
        body.auth-register-page .field-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px 16px;
            min-width: 0;
        }
        body.auth-register-page .form-section.is-account .field-grid {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            align-items: start;
        }
        body.auth-register-page .field {
            display: grid;
            gap: 7px;
            min-width: 0;
        }
        body.auth-register-page .field.full {
            grid-column: 1 / -1;
        }
        body.auth-register-page .label-row {
            display: grid;
            gap: 2px;
        }
        body.auth-register-page .label {
            color: #334155;
            font-size: 13px;
            font-weight: 900;
        }
        body.auth-register-page .label-hint {
            color: #64748b;
            font-size: 12px;
            font-weight: 700;
        }
        body.auth-register-page .field input {
            width: 100%;
            min-height: 46px;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            background: #fff;
            color: #0f172a;
            padding: 10px 12px;
            font-size: 15px;
            outline: none;
            transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
        }
        body.auth-register-page .field input:focus {
            border-color: #0f766e;
            box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.11);
        }
        body.auth-register-page .help {
            color: #64748b;
            font-size: 12px;
            line-height: 1.55;
        }
        body.auth-register-page .username-help {
            color: #0f766e;
            font-weight: 700;
        }
        body.auth-register-page .password-wrap {
            position: relative;
        }
        body.auth-register-page .password-wrap input {
            padding-right: 48px;
        }
        body.auth-register-page .password-toggle {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            border: 0;
            border-radius: 9px;
            background: transparent;
            color: #64748b;
            padding: 0;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background .15s ease, color .15s ease;
        }
        body.auth-register-page .password-toggle:hover,
        body.auth-register-page .password-toggle:focus {
            background: #f1f5f9;
            color: #0f766e;
            outline: none;
        }
        body.auth-register-page .password-toggle svg {
            width: 19px;
            height: 19px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        body.auth-register-page .divider {
            display: none;
        }
        body.auth-register-page .consent {
            display: grid;
            gap: 10px;
            padding: 18px 20px;
            border: 1px solid #dbe3ee;
            border-radius: 16px;
            background: #fff;
            margin: 0;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.035);
        }
        body.auth-register-page .consent-title {
            color: #0f172a;
            font-size: 15px;
            font-weight: 900;
        }
        body.auth-register-page .consent-check {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            gap: 10px;
            align-items: start;
            color: #334155;
            font-size: 13px;
            line-height: 1.75;
        }
        body.auth-register-page .consent-check input {
            width: 18px;
            height: 18px;
            margin-top: 3px;
            accent-color: #0f766e;
        }
        body.auth-register-page .consent-link {
            width: fit-content;
            color: #0f766e;
            text-decoration: none;
            font-size: 13px;
            font-weight: 900;
        }
        body.auth-register-page .actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
            padding-top: 0;
        }
        body.auth-register-page .button {
            min-height: 44px;
            padding: 0 17px;
            border: 1px solid #cbd5e1;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: #334155;
            text-decoration: none;
            font-size: 14px;
            font-weight: 900;
            cursor: pointer;
        }
        body.auth-register-page .button.primary {
            border-color: #0f172a;
            background: #0f172a;
            color: #fff;
        }
        body.auth-register-page .button:hover,
        body.auth-register-page .button:focus {
            border-color: #94a3b8;
            background: #f8fafc;
        }
        body.auth-register-page .button.primary:hover,
        body.auth-register-page .button.primary:focus {
            border-color: #0f766e;
            background: #0f766e;
        }
        body.auth-register-page .register-footer {
            margin-top: 15px;
            color: #64748b;
            text-align: center;
            font-size: 12px;
        }
        @media (max-width: 900px) {
            body.auth-register-page .register-panel {
                width: min(720px, 100%);
            }
            body.auth-register-page .form-section {
                grid-template-columns: 1fr;
                gap: 14px;
                padding: 18px;
            }
            body.auth-register-page .field-grid,
            body.auth-register-page .form-section.is-account .field-grid {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 760px) {
            body.auth-register-page .register-shell {
                padding: 56px 10px 20px;
                place-items: start center;
            }
            body.auth-register-page .register-panel {
                border-radius: 16px;
            }
            body.auth-register-page .register-header {
                padding: 20px 18px 18px;
            }
            body.auth-register-page .brand {
                margin-bottom: 16px;
            }
            body.auth-register-page .register-title {
                font-size: 24px;
            }
            body.auth-register-page .register-note {
                padding: 11px 12px;
            }
            body.auth-register-page .register-body {
                padding: 20px 18px 22px;
            }
            body.auth-register-page .register-form {
                gap: 14px;
            }
            body.auth-register-page .field-grid { gap: 12px; }
            body.auth-register-page .consent {
                padding: 14px;
                border-radius: 14px;
            }
            body.auth-register-page .actions {
                display: grid;
                grid-template-columns: 1fr;
            }
            body.auth-register-page .button {
                width: 100%;
            }
            body.auth-register-page .button.primary {
                order: 1;
            }
            body.auth-register-page .actions .button:not(.primary) {
                order: 2;
            }
        }



/* Service logs page components. Centralized from app/Modules/Service/Views/logs.php. */
.service-logs-shell {
    display: grid;
    gap: 16px;
}
.service-logs-page-head {
    display: grid;
    gap: 4px;
}
.service-logs-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
}
.service-logs-subtitle {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}
.service-logs-card {
    border: 1px solid #dbe2ea;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}
.service-logs-filter-card {
    padding: 18px;
    display: grid;
    gap: 14px;
}
.service-logs-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.7fr) auto auto;
    gap: 10px;
    align-items: end;
}
.service-logs-filter-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.service-logs-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}
.service-logs-filter-field input,
.service-logs-filter-field select {
    width: 100%;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
}
.service-logs-btn {
    min-width: 140px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
}
.service-logs-btn.service-logs-btn-reset {
    background: #ef4444;
    color: #fff;
}
.service-logs-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.service-logs-summary-card {
    padding: 16px;
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    display: grid;
    gap: 6px;
}
.service-logs-summary-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}
.service-logs-summary-value {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
}
.service-logs-summary-value-compact {
    font-size: 20px;
}
.service-logs-summary-copy {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}
.service-logs-list-card {
    padding: 18px;
    display: grid;
    gap: 12px;
}
.service-logs-list-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.service-logs-list-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}
.service-logs-list-subtitle {
    font-size: 13px;
    color: #64748b;
}
.service-logs-timeline {
    display: grid;
    gap: 12px;
}
.service-log-entry {
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
    display: grid;
    gap: 12px;
}
.service-log-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.service-log-request {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.service-log-request-no {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    color: #2563eb;
    text-transform: uppercase;
}
.service-log-request-subject {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.45;
}
.service-log-request-meta {
    font-size: 13px;
    color: #64748b;
}
.service-log-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.service-log-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}
.service-log-date {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 5px 10px;
}
.logs-badge-created { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.logs-badge-status { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.logs-badge-forwarded { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.logs-badge-closed { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.logs-badge-warning { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.logs-badge-comment { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.logs-badge-danger { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.service-log-detail {
    border-top: 1px dashed #dbe7f3;
    padding-top: 12px;
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.service-log-detail-label {
    font-size: 12px;
    font-weight: 800;
    color: #475569;
}
.service-log-detail-text {
    font-size: 14px;
    line-height: 1.7;
    color: #0f172a;
    white-space: pre-wrap;
    word-break: break-word;
}
.service-logs-empty {
    padding: 36px 18px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}
@media (max-width: 980px) {
    .service-logs-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .service-logs-summary-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .service-logs-filter-grid {
        grid-template-columns: 1fr;
    }
    .service-logs-btn {
        width: 100%;
    }
    .service-log-entry-head {
        flex-direction: column;
        align-items: stretch;
    }
    .service-log-meta {
        justify-content: flex-start;
    }
    .service-log-detail {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}



/* Service dashboard page components. Centralized from app/Modules/Service/Views/dashboard.php. */
.service-dashboard-card { padding:14px; margin-bottom:12px; }
.service-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.kpi { border:1px solid #dbeafe; border-radius:12px; padding:10px; background:#fff; text-align:center; }
.kpi b { font-size:24px; display:block; margin-top:4px; color:#0f172a; }
.kpi.warn { border-color:#f59e0b; background:#fffaf0; }
.kpi.warn b { color:#b45309; }
.kpi.danger { border-color:#ef4444; background:#fff5f5; }
.kpi.danger b { color:#b91c1c; }
.service-dashboard-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; flex-wrap:wrap; }
.service-section-title { margin:0 0 10px 0; }
.service-empty { border:1px dashed #cbd5e1; border-radius:10px; padding:16px; text-align:center; color:#64748b; }
.service-latest-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.service-latest-item { border:1px solid #dbeafe; border-radius:12px; background:#fff; padding:10px; display:grid; gap:8px; }
.service-latest-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.service-latest-no { font-weight:800; color:#0f172a; }
.service-latest-subject { font-weight:700; color:#1e293b; }
.service-latest-image { position:relative; }
.service-latest-image a { display:block; overflow:hidden; border-radius:12px; }
.service-latest-image img { width:100%; max-height:220px; object-fit:cover; display:block; background:#f8fafc; }
.service-latest-image-count { position:absolute; right:10px; bottom:10px; padding:4px 8px; border-radius:999px; background:rgba(15,23,42,.8); color:#fff; font-size:11px; font-weight:700; }
.service-latest-meta { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; font-size:12px; color:#334155; }
.service-progress-wrap { border:1px solid #e2e8f0; border-radius:10px; padding:8px; background:#f8fafc; }
.service-progress-head { display:flex; justify-content:space-between; margin-bottom:6px; font-size:12px; }
.service-progress-bar { height:10px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
.service-progress-bar span { display:block; height:100%; background:linear-gradient(90deg,#3b82f6,#22c55e); }
.sla-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid transparent; }
.sla-badge.warn { background:#fff7ed; color:#b45309; border-color:#f59e0b; }
.sla-badge.danger { background:#fef2f2; color:#b91c1c; border-color:#ef4444; }
.sla-badge.ok { background:#f0fdf4; color:#166534; border-color:#22c55e; }
.sla-badge.done { background:#eef2ff; color:#3730a3; border-color:#6366f1; }
.sla-badge.none { background:#f8fafc; color:#475569; border-color:#cbd5e1; }
@media (max-width: 1200px) { .service-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 980px) { .service-latest-grid { grid-template-columns:1fr; } .service-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .service-kpi-grid { grid-template-columns:1fr; } .service-latest-meta { grid-template-columns:1fr; } .service-dashboard-actions .btn { width:100%; } }



/* Service types shared component alignment. */
.service-types-page {
  width: 100%;
  max-width: 1180px;
  gap: var(--space-4);
  color: var(--text-strong);
}

.service-types-page .page-hero,
.service-types-page .section-card,
.service-types-page .content-box,
.service-types-page .empty-state {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
}

.service-types-page .page-hero-icon.ui-icon,
.service-types-page .service-type-group-icon.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.service-types-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
}

.service-types-hero-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.service-types-page .page-title,
.service-types-page .page-subtitle,
.service-types-page .section-card-head h2,
.service-types-page .section-card-head p,
.service-types-page .service-type-group-head h3,
.service-types-page .service-type-group-head p,
.service-types-page .service-type-heading h3,
.service-types-page .service-type-heading span {
  margin: 0;
}

.service-types-page .page-subtitle,
.service-types-page .section-card-head p,
.service-types-page .service-type-group-head p,
.service-types-page .service-type-heading span,
.service-types-page .service-type-status-control small {
  color: var(--text-muted);
  line-height: 1.6;
}

.service-types-create-card.section-card,
.service-types-list-card.section-card {
  display: grid;
  gap: var(--space-4);
}

.service-types-page .section-head.section-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.service-types-form.filter-grid {
  grid-template-columns: minmax(260px, 1fr) minmax(140px, 180px) auto;
  align-items: end;
  gap: var(--space-3);
}

.service-types-name-field {
  min-width: 0;
}

.service-types-page .form-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--text-soft);
  font-weight: 900;
}

.service-types-page .form-field input {
  min-height: var(--btn-height);
  border-color: var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.service-types-page .form-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.service-types-form-actions.action-row {
  align-self: end;
  justify-content: flex-end;
  gap: var(--space-2);
}

.service-types-page .btn {
  gap: var(--space-2);
}

.service-type-group {
  display: grid;
  gap: var(--space-3);
}

.service-type-group + .service-type-group {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.service-type-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.service-type-group-icon {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--theme-icon-ink);
}

.service-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.service-type-card.content-box {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  box-shadow: none;
}

.service-type-card.is-active {
  border-left: var(--space-1) solid var(--color-success);
}

.service-type-card.is-inactive {
  border-left: var(--space-1) solid var(--border-muted);
  background: var(--surface-subtle);
}

.service-type-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: start;
  min-width: 0;
}

.service-type-number.badge-soft {
  min-width: 42px;
  justify-content: center;
  font-weight: 900;
}

.service-type-heading {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.service-type-heading h3 {
  color: var(--text-strong);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.service-type-edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
  gap: var(--space-3);
  align-items: end;
  min-width: 0;
}

.service-type-status-control.content-box {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-subtle);
  box-shadow: none;
  cursor: pointer;
}

.service-type-status-control input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--color-primary);
}

.service-type-status-control span {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.service-type-status-control b {
  color: var(--text-strong);
}

.service-type-card-actions.action-row {
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: var(--space-2);
}

.service-types-empty.empty-state {
  padding: var(--space-5);
  text-align: center;
}

@media (max-width: 980px) {
  .service-types-form.filter-grid,
  .service-type-grid {
    grid-template-columns: 1fr;
  }

  .service-type-edit-form {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
  }
}

@media (max-width: 760px) {
  .service-types-hero.page-hero,
  .service-type-group-head,
  .service-type-card-head,
  .service-type-edit-form {
    grid-template-columns: 1fr;
  }

  .service-types-hero-metrics {
    justify-content: flex-start;
  }

  .service-types-page .section-head.section-card-head,
  .service-types-form-actions.action-row,
  .service-type-card-actions.action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .service-types-form-actions.action-row,
  .service-type-card-actions.action-row {
    justify-content: stretch;
  }

  .service-types-form-actions .btn,
  .service-type-card-actions .btn {
    width: 100%;
  }
}


/* Service permissions shared component alignment. */
.service-permissions-page {
  width: 100%;
  max-width: 1180px;
}

.service-permissions-hero {
  align-items: center;
}

.service-permissions-hero-aside {
  align-items: flex-end;
}

.service-permissions-card,
.service-permissions-form {
  display: grid;
  gap: var(--space-4);
}

.service-permissions-table-wrap.table-wrapper {
  overflow-x: auto;
}

.service-permissions-card .nice-table th,
.service-permissions-card .nice-table td {
  vertical-align: middle;
}

.service-permissions-check-col {
  width: 170px;
}

.service-permissions-role-col {
  width: 180px;
}

.service-permissions-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.service-permissions-toggle input {
  flex: 0 0 auto;
}

.service-permissions-empty.empty-state {
  border: 0;
  border-radius: 0;
}

.service-permissions-actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .service-permissions-actions {
    justify-content: stretch;
  }

  .service-permissions-actions .btn {
    width: 100%;
  }
}



/* Service create page components. Centralized from app/Modules/Service/Views/create.php. */
.service-create-page {
    padding-bottom: 24px;
}
.service-create-shell {
    display: grid;
    gap: 16px;
    width: 100%;
    max-width: 1180px;
}
.service-create-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.06);
    padding: 20px 22px;
}
.service-create-copy {
    min-width: 0;
}
.service-create-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 900;
}
.service-create-hero h1 {
    margin: 8px 0 0;
    color: #0f172a;
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: 0;
}
.service-create-hero p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    max-width: 70ch;
}
.service-create-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #d6deea;
    border-radius: 12px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.service-create-back:hover {
    border-color: #cbd5e1;
    background: #ffffff;
}
.service-create-form {
    display: grid;
    gap: 14px;
}
.service-assignment-section {
    overflow: visible;
}
.service-assignment-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}
.service-assignment-card {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    border: 1px solid var(--border-soft, #dbe4ef);
    border-radius: var(--radius-md, 12px);
    background: var(--surface, #ffffff);
    padding: 14px;
}
.service-assignment-card-wide {
    grid-column: 1 / -1;
}
.service-assignment-card-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}
.service-assignment-step {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-soft, #dbe4ef);
    border-radius: 999px;
    background: var(--surface-muted, #f8fafc);
    color: var(--color-primary, #2563eb);
    font-size: 12px;
    font-weight: 900;
}
.service-assignment-card-head h3 {
    margin: 0;
    color: var(--text-strong, #0f172a);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
}
.service-assignment-card-head p {
    margin: 3px 0 0;
    color: var(--text-muted, #64748b);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.55;
}
.service-assignment-field {
    gap: 8px;
}
.service-related-user-picker {
    margin-top: 0;
}
.service-related-user-picker .duty-user-results {
    width: 100%;
    box-sizing: border-box;
}
.service-related-user-picker .duty-user-inputbox input {
    min-height: 0;
}
.app-choice-picker {
    position: relative;
    display: grid;
    gap: 8px;
}
.app-choice-trigger {
    display: none;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--border-soft, #cad7e5);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-subtle, #fbfdff);
    color: var(--text-strong, #0f172a);
    padding: 0 14px;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.app-choice-trigger:focus-visible,
.app-choice-picker.is-open .app-choice-trigger {
    border-color: var(--color-primary, #2563eb);
    background: var(--surface, #ffffff);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.app-choice-caret {
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-right: 2px solid var(--text-muted, #64748b);
    border-bottom: 2px solid var(--text-muted, #64748b);
    transform: translateY(-1px) rotate(45deg);
    transition: transform .16s ease, border-color .16s ease;
}
.app-choice-picker.is-open .app-choice-caret {
    border-color: var(--color-primary, #2563eb);
    transform: translateY(1px) rotate(225deg);
}
.app-choice-picker.is-enhanced .app-choice-trigger {
    display: flex;
}
.app-choice-picker.is-enhanced .app-choice-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.app-choice-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow: auto;
    border: 1px solid var(--border-soft, #cad7e5);
    border-radius: var(--radius-md, 12px);
    background: var(--surface, #ffffff);
    box-shadow: var(--shadow-sm, 0 12px 28px rgba(15, 23, 42, 0.12));
    padding: 6px;
}
.app-choice-picker.is-long-list .app-choice-menu {
    max-height: clamp(180px, calc(100vh - 260px), 224px);
    overscroll-behavior: contain;
}
.app-choice-options {
    display: grid;
    gap: 2px;
}
.app-choice-option {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    color: var(--text-strong, #0f172a);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    min-height: 38px;
    padding: 7px 8px;
    line-height: 1.35;
    transition: background .16s ease, border-color .16s ease;
}
.app-choice-picker.is-long-list .app-choice-options {
    gap: 4px;
}
.app-choice-picker.is-long-list .app-choice-option {
    align-items: center;
    min-height: 34px;
    padding: 6px 8px;
}
.app-choice-picker.is-long-list .app-choice-option span {
    min-width: 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.app-choice-picker.is-enhanced .app-choice-option.is-placeholder {
    display: none;
}
.app-choice-option:hover,
.app-choice-option:focus-within {
    background: var(--surface-muted, #f1f5f9);
    border-color: var(--border-soft, #dbe4ef);
}
.app-choice-option input {
    position: relative;
    display: block;
    align-self: center;
    justify-self: center;
    box-sizing: border-box;
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    appearance: none;
    border: 1px solid var(--border-soft, #cad7e5);
    border-radius: 5px;
    background: var(--surface, #ffffff);
    font: inherit;
    font-size: 0;
    line-height: 1;
    box-shadow: none;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.app-choice-option input[type="radio"] {
    border-radius: 999px;
    width: 10px;
    min-width: 10px;
    height: 10px;
    min-height: 10px;
}
.app-choice-option input:checked {
    border-color: var(--color-primary, #2563eb);
    background: var(--color-primary, #2563eb);
}
.app-choice-option input[type="radio"]:checked {
    background: var(--surface, #ffffff);
}
.app-choice-option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 3px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translate(-50%, -60%) rotate(-45deg);
}
.app-choice-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--color-primary, #2563eb);
    transform: translate(-50%, -50%);
}
.app-choice-option input:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.app-choice-option.is-selected,
.app-choice-option:has(input:checked) {
    border-color: rgba(37, 99, 235, 0.2);
    background: rgba(37, 99, 235, 0.04);
}
.app-choice-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.app-choice-selected:empty {
    display: none;
}
.app-choice-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    border: 1px solid var(--border-soft, #cad7e5);
    border-radius: 999px;
    background: var(--surface-muted, #f8fafc);
    color: var(--text-strong, #0f172a);
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
}
.app-choice-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-choice-chip small {
    color: var(--text-muted, #64748b);
    font-size: 11px;
    font-weight: 800;
}

.selection-action-bar[hidden] {
    display: none;
}

.selection-action-bar.record-card {
    border-color: var(--color-primary-border);
    background: var(--surface);
}

.selection-action-bar .record-head {
    align-items: center;
    gap: var(--space-3);
}

.selection-action-bar .record-actions {
    align-items: center;
    justify-content: flex-end;
}

.selection-action-groups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.selection-action-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.selection-action-group.is-danger-zone {
    margin-left: var(--space-2);
    padding-left: var(--space-3);
    border-left: 1px solid var(--border-soft);
}

.selection-action-group .btn {
    min-width: 156px;
}

.selection-summary.badge-soft {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    width: fit-content;
    margin-top: var(--space-2);
}

.selection-summary [data-ui-selected-count] {
    min-width: 1.4em;
    text-align: center;
}

.selection-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 34px;
    margin: 0 0 var(--space-2);
    padding: 6px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-strong);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.selection-chip:hover,
.selection-chip:focus-within {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
}

.selection-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.selection-box {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border-muted);
    border-radius: 6px;
    background: var(--surface);
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.selection-box::after {
    content: "";
    width: 8px;
    height: 4px;
    border-left: 2px solid var(--surface);
    border-bottom: 2px solid var(--surface);
    opacity: 0;
    transform: translateY(-1px) rotate(-45deg);
}

.selection-input:checked + .selection-box {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.selection-input:checked + .selection-box::after {
    opacity: 1;
}

.selection-input:focus-visible + .selection-box {
    box-shadow: 0 0 0 3px var(--color-primary-border);
}

.selection-chip:has(.selection-input:checked) {
    border-color: var(--color-primary-border);
    background: var(--color-primary-soft);
    color: var(--color-primary-ink);
}

[data-ui-selection-item].is-selected {
    border-color: var(--color-primary-border);
}

tr[data-ui-selection-item].is-selected td {
    background: var(--color-primary-soft);
}

@media (max-width: 760px) {
    .selection-action-bar .record-head,
    .selection-action-bar .record-actions,
    .selection-action-groups,
    .selection-action-group {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .selection-action-group.is-danger-zone {
        margin-left: 0;
        padding-top: var(--space-2);
        padding-left: 0;
        border-top: 1px solid var(--border-soft);
        border-left: 0;
    }

    .selection-action-bar .record-actions,
    .selection-action-bar .record-actions form,
    .selection-action-bar .record-actions .btn {
        width: 100%;
    }
}
.service-upload-field .item-file-sub {
    overflow-wrap: anywhere;
}
.service-form-card { padding: 14px; }
.service-request-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.service-field-full { grid-column: 1 / -1; }
.service-form-spacer { grid-column: span 2; }
.service-form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.service-create-help { margin-top:4px; font-size:12px; color:#64748b; }
@media (max-width: 900px) {
    .service-create-hero {
        flex-direction: column;
    }
    .service-create-hero h1 {
        font-size: 28px;
    }
    .service-assignment-grid {
        grid-template-columns: 1fr;
    }
    .service-assignment-card-wide {
        grid-column: auto;
    }
    .service-request-form { grid-template-columns:1fr; }
    .service-form-spacer { display: none; }
}
@media (max-width: 760px) {
    .service-create-hero {
        padding: 16px;
    }
    .service-create-back {
        width: 100%;
    }
    .service-assignment-card {
        padding: 12px;
    }
    .service-assignment-card-head {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 9px;
    }
    .service-assignment-step {
        width: 30px;
        height: 30px;
    }
    .app-choice-menu {
        max-height: 240px;
    }
    .app-choice-chip {
        max-width: 100%;
    }
    .service-create-form .form-actions {
        flex-direction: column-reverse;
    }
    .service-create-form .form-actions > * {
        width: 100%;
        justify-content: center;
    }
}



/* Service edit page components. Centralized from app/Modules/Service/Views/edit.php. */
.service-edit-attachments { display:grid; gap:10px; }
.service-existing-images { border:1px solid #dbeafe; border-radius:12px; background:#f8fbff; padding:12px; }
.service-existing-title { font-weight:700; color:#1e3a8a; margin-bottom:8px; }
.service-existing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }
.service-existing-item { border:1px solid #dbeafe; border-radius:12px; background:#fff; padding:10px; display:grid; gap:8px; cursor:default; }
.service-existing-thumb-wrap { aspect-ratio:4/3; overflow:hidden; border-radius:10px; background:#eff6ff; }
.service-existing-thumb-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.service-existing-name { font-size:12px; font-weight:700; color:#334155; word-break:break-word; }
.service-existing-remove, .service-existing-legacy { font-size:12px; color:#64748b; }



/* Service list page components. Centralized from app/Modules/Service/Views/list.php. */
.btn-teal { background:#0f766e; border-color:#0f766e; color:#fff; }
.btn-purple { background:#7c3aed; border-color:#7c3aed; color:#fff; }
.btn-slate { background:#475569; border-color:#475569; color:#fff; }
.service-list-page { display:grid; gap:18px; min-width:0; }
.service-filter-card {
  padding:18px;
  border:1px solid #e2e8f0;
  border-radius:20px;
  background:#ffffff;
  box-shadow:0 14px 30px rgba(15,23,42,.05);
  min-width:0;
}
.service-filter-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:18px;
  margin-bottom:16px;
  min-width:0;
}
.service-filter-head-copy { display:grid; gap:4px; min-width:0; }
.service-filter-head h2 { margin:0; font-size:16px; color:#0f172a; }
.service-filter-head p { margin:4px 0 0; color:#64748b; font-size:13px; line-height:1.6; }
.service-filter-head-actions { display:flex; justify-content:flex-end; min-width:0; }
.service-filter-head .btn {
  min-height:46px;
  min-width:142px;
  padding:0 16px;
  border-radius:16px;
  justify-content:center;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(37,99,235,.16);
}
.service-filter-form { display:grid; gap:12px; }
.service-filter-fields {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:12px;
  align-items:end;
  min-width:0;
}
.service-filter-field { display:grid; gap:8px; min-width:0; }
.service-filter-field label { font-size:12px; font-weight:600; color:#475569; }
.service-filter-field input,
.service-filter-field select {
  width:100%;
  min-width:0;
  min-height:46px;
  border-radius:14px;
  border:1px solid #dbe3ef;
  background:#f8fbff;
  box-sizing:border-box;
}
.service-filter-field-wide { min-width:0; }
.service-filter-actions {
  display:grid;
  grid-template-columns:minmax(140px,180px);
  justify-content:end;
  min-width:0;
}
.service-filter-actions .btn,
.service-filter-actions .btn-clear {
  min-height:46px;
  width:100%;
  padding:0 16px;
  border-radius:16px;
  justify-content:center;
}
.service-list-page .btn-clear {
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f8fbff;
  color:#0f172a;
  border:1px solid #dbe3ef;
}
.service-list-page .btn-report {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #99f6e4;
  background:#0f766e;
  color:#ffffff;
  text-decoration:none;
  box-shadow:0 12px 24px rgba(15,118,110,.18);
}
.service-export-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border:1px solid #ccfbf1;
  border-radius:18px;
  background:linear-gradient(180deg,#f0fdfa 0%,#ffffff 100%);
  box-shadow:0 12px 26px rgba(15,118,110,.08);
  min-width:0;
}
.service-export-copy { display:grid; gap:4px; min-width:0; }
.service-export-card h2 { margin:0; color:#0f172a; font-size:16px; }
.service-export-card p { margin:0; color:#64748b; font-size:13px; line-height:1.6; }
.service-export-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(116px,1fr));
  gap:8px;
  min-width:0;
}
.service-export-actions .btn { min-height:44px; border-radius:14px; width:100%; }
.service-list-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.service-toolbar-wrap { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:flex-end; }
.service-toolbar-group { display:grid; gap:4px; }
.service-toolbar-label { font-size:11px; font-weight:700; color:#64748b; }
.service-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.service-toolbar .btn { min-width: 92px; text-align:center; }
.service-empty-state { padding:16px; text-align:center; color:#64748b; }
.service-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.service-item { padding:12px; display:grid; gap:10px; }
.service-item.warn { border-left:4px solid #f59e0b; }
.service-item.danger { border-left:4px solid #ef4444; background:#fff7f7; }
.service-item.ok { border-left:4px solid #22c55e; }
.service-head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.service-head-badges { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
.service-no { font-weight:800; color:#0f172a; }
.service-time { font-size:12px; color:#64748b; }
.service-subject { font-size:16px; font-weight:700; color:#1e293b; }
.service-meta { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; font-size:13px; }
.service-attachments-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; }
.service-attachment-card { border:1px solid #dbeafe; border-radius:12px; background:#fff; padding:8px; display:grid; gap:6px; text-align:left; cursor:pointer; }
.service-attachment-card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:#eff6ff; }
.service-attachment-card span { font-size:12px; font-weight:700; color:#334155; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.service-progress-wrap { border:1px solid #e2e8f0; border-radius:10px; padding:8px; background:#f8fafc; }
.service-progress-head { display:flex; justify-content:space-between; margin-bottom:6px; font-size:12px; }
.service-progress-bar { height:10px; border-radius:999px; background:#e5e7eb; overflow:hidden; }
.service-progress-bar span { display:block; height:100%; background:linear-gradient(90deg,#3b82f6,#22c55e); }
.service-tags { display:flex; flex-wrap:wrap; gap:6px; }
.service-tag { font-size:11px; padding:3px 8px; border-radius:999px; background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.service-section-title { font-size:12px; font-weight:700; color:#334155; margin-top:2px; }
.service-timeline { border:1px solid #e2e8f0; border-radius:10px; padding:8px; max-height:120px; overflow:auto; }
.service-log-row { display:grid; grid-template-columns:160px 1fr; gap:8px; font-size:12px; padding:2px 0; }
.service-action-card { border:1px solid #e2e8f0; border-radius:10px; padding:8px; background:#f8fafc; }
.service-update-form { display:grid; grid-template-columns:minmax(140px,180px) minmax(120px,150px) minmax(220px,1fr) 96px; gap:8px; align-items:end; }
.service-update-form .btn { width:100%; }
.service-field { display:grid; gap:4px; }
.service-field label { font-size:11px; font-weight:700; color:#64748b; }
.service-more-info-form, .service-comment-form { display:grid; grid-template-columns:1fr 140px; gap:8px; }
.service-comment-form { grid-template-columns:180px 1fr 140px; }
.service-comments { border:1px solid #e2e8f0; border-radius:10px; padding:8px; display:grid; gap:6px; }
.service-comment-row { display:grid; grid-template-columns:200px 1fr 150px; gap:8px; font-size:12px; align-items:center; }
.service-comment-row.internal { background:#fff7ed; border-left:3px solid #f59e0b; padding:4px 6px; }
.service-comment-row.external { background:#f8fafc; border-left:3px solid #94a3b8; padding:4px 6px; }
.service-escalation { font-size:12px; color:#b91c1c; font-weight:700; }
.service-item-actions { display:flex; justify-content:flex-end; }
.sla-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid transparent; }
.sla-badge.warn { background:#fff7ed; color:#b45309; border-color:#f59e0b; }
.sla-badge.danger { background:#fef2f2; color:#b91c1c; border-color:#ef4444; }
.sla-badge.ok { background:#f0fdf4; color:#166534; border-color:#22c55e; }
.sla-badge.done { background:#eef2ff; color:#3730a3; border-color:#6366f1; }
.sla-badge.none { background:#f8fafc; color:#475569; border-color:#cbd5e1; }
.service-preview-modal[hidden] { display:none; }
.service-preview-modal { position:fixed; inset:0; z-index:60; }
.service-preview-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.6); }
.service-preview-dialog { position:relative; width:min(92vw,840px); margin:4vh auto; background:#fff; border-radius:18px; padding:16px; display:grid; gap:10px; box-shadow:0 24px 60px rgba(15,23,42,.25); }
.service-preview-close { position:absolute; top:10px; right:10px; width:40px; height:40px; border:none; border-radius:999px; background:#eef2ff; color:#1e3a8a; font-size:24px; cursor:pointer; }
.service-preview-title { font-size:16px; font-weight:800; color:#0f172a; padding-right:48px; }
.service-preview-body img { width:100%; max-height:72vh; object-fit:contain; border-radius:12px; background:#f8fafc; }
@media (max-width: 1100px) {
  .service-filter-head,
  .service-export-card { grid-template-columns:1fr; align-items:stretch; }
  .service-filter-head-actions { justify-content:flex-start; }
  .service-filter-fields { grid-template-columns:1fr 1fr; }
  .service-filter-field-wide { grid-column:1 / -1; }
}
@media (max-width: 760px) {
  .service-filter-card,
  .service-export-card { padding:16px; }
  .service-filter-head-actions,
  .service-filter-head .btn,
  .service-filter-actions,
  .service-list-actions .btn { width:100%; }
  .service-filter-fields,
  .service-export-actions,
  .service-meta,
  .service-update-form,
  .service-more-info-form,
  .service-comment-form,
  .service-comment-row,
  .service-log-row { grid-template-columns:1fr; }
  .service-filter-field-wide { grid-column:auto; }
  .service-list-actions,
  .service-toolbar-wrap { flex-direction:column; align-items:stretch; }
  .service-toolbar .btn { width:100%; min-width:0; }
}


@media not all {
/* Legacy Worklog team rules retained inactive for migration reference. */

.worklog-team-page { display:grid; gap:16px; }
.worklog-team-page.is-print { gap:14px; }
.worklog-team-page .worklog-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.worklog-team-page .worklog-tabs a { padding:10px 14px; border-radius:999px; border:1px solid #dbe2ea; text-decoration:none; color:#334155; background:#fff; }
.worklog-team-page .worklog-tabs a.active { background:#0f766e; color:#fff; border-color:#0f766e; }
.worklog-team-page .page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.worklog-team-page .page-head h1,
.worklog-team-page .print-report-head h1 { margin:0 0 6px; }
.worklog-team-page .page-head p,
.worklog-team-page .print-report-head p { margin:0; }
.worklog-team-page .page-actions { display:flex; gap:8px; flex-wrap:wrap; }
.worklog-team-page .muted { color:#64748b; }
.worklog-team-page .small { font-size:12px; }
.worklog-team-page .card { background:#fff; border:1px solid #dbe2ea; border-radius:18px; padding:16px; }
.worklog-team-page .filter-bar { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.worklog-team-page .filter-bar label { display:grid; gap:6px; min-width:170px; }
.worklog-team-page .search-wide { min-width:240px; flex:1; }
.worklog-team-page .filter-bar input,
.worklog-team-page .filter-bar select,
.worklog-team-page .review-form textarea { width:100%; border:1px solid #cbd5e1; border-radius:12px; padding:10px 12px; }
.worklog-team-page .filter-actions { display:flex; gap:8px; flex-wrap:wrap; }
.worklog-team-page .print-report-head { display:grid; gap:12px; }
.worklog-team-page .print-meta { display:flex; gap:8px; flex-wrap:wrap; }
.worklog-team-page .print-meta span { background:#f8fafc; border:1px solid #dbe2ea; border-radius:999px; padding:8px 12px; color:#334155; font-size:13px; }
.worklog-team-page .stat-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:10px; }
.worklog-team-page .stat-card { background:#fff; border:1px solid #dbe2ea; border-radius:16px; padding:14px; display:grid; gap:4px; }
.worklog-team-page .stat-card.warn { background:#fff7ed; border-color:#fdba74; }
.worklog-team-page .stat-card strong { font-size:24px; }
.worklog-team-page .team-grid { display:grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .95fr); gap:16px; align-items:start; }
.worklog-team-page .team-grid.print-layout { grid-template-columns: 1fr; }
.worklog-team-page .table-wrap { overflow:auto; }
.worklog-team-page .table { width:100%; border-collapse:collapse; }
.worklog-team-page .table th,
.worklog-team-page .table td { border-bottom:1px solid #e2e8f0; padding:10px 8px; text-align:left; vertical-align:top; }
.worklog-team-page .table th { background:#f8fafc; }
.worklog-team-page .status { display:inline-flex; padding:6px 10px; border-radius:999px; font-size:12px; background:#e2e8f0; }
.worklog-team-page .status.submitted { background:#dbeafe; }
.worklog-team-page .status.reviewed { background:#dcfce7; }
.worklog-team-page .status.returned { background:#fee2e2; }
.worklog-team-page .status.draft { background:#ffedd5; }
.worklog-team-page .status.missing { background:#f1f5f9; }
.worklog-team-page .detail-card { display:grid; gap:12px; }
.worklog-team-page .print-detail { page-break-inside:avoid; }
.worklog-team-page .detail-meta,
.worklog-team-page .item-list,
.worklog-team-page .review-form { display:grid; gap:10px; }
.worklog-team-page .detail-box { border:1px solid #e2e8f0; border-radius:14px; padding:12px; background:#f8fafc; }
.worklog-team-page .detail-box p { margin:8px 0 0; }
.worklog-team-page .item-card { border:1px solid #dbe2ea; border-radius:14px; padding:12px; background:#fff; }
.worklog-team-page .flash { padding:12px 14px; border-radius:14px; }
.worklog-team-page .flash.success { background:#ecfdf5; color:#166534; border:1px solid #bbf7d0; }
.worklog-team-page .flash.error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.worklog-team-page .empty { color:#64748b; text-align:center; padding:12px; }
@media (max-width: 1100px) {
.worklog-team-page .page-head,
.worklog-team-page .team-grid,
.worklog-team-page .stat-grid { grid-template-columns: 1fr; }
.worklog-team-page .page-head { display:grid; }
}
@media print {
.worklog-team-page { gap:12px; }
.worklog-team-page .card,
.worklog-team-page .stat-card,
.worklog-team-page .detail-box,
.worklog-team-page .item-card { border-color:#cbd5e1; box-shadow:none; }
.worklog-team-page .table-wrap { overflow:visible; }
.worklog-team-page .table th,
.worklog-team-page .table td { padding:8px 6px; font-size:12px; }
.worklog-team-page .stat-card strong { font-size:20px; }
}
/* Refreshed team worklog layout */
.worklog-team-page {
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 28px;
}
.worklog-team-page,
.worklog-team-page * {
    box-sizing: border-box;
}
.worklog-team-page .worklog-tabs {
    padding: 6px;
    border: 1px solid #dbe7f3;
    border-radius: 999px;
    background: #ffffff;
    width: fit-content;
    max-width: 100%;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
}
.worklog-team-page .worklog-tabs a {
    border: 0;
    color: #52657d;
    font-weight: 800;
}
.worklog-team-page .worklog-tabs a.active {
    background: #0f766e;
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.18);
}
.worklog-team-page .page-head {
    padding: 24px;
    border: 1px solid #dbe7f3;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 56%, #eef8f6 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}
.worklog-team-page .worklog-kicker {
    width: fit-content;
    padding: 5px 11px;
    margin-bottom: 8px;
    border: 1px solid #bfe4dc;
    border-radius: 999px;
    color: #0f766e;
    background: #eefbf8;
    font-size: 12px;
    font-weight: 800;
}
.worklog-team-page .page-head h1,
.worklog-team-page .print-report-head h1 {
    color: #06152f;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: 0;
}
.worklog-team-page .page-head p,
.worklog-team-page .print-report-head p {
    line-height: 1.7;
}
.worklog-team-page .page-actions .btn,
.worklog-team-page .filter-actions .btn,
.worklog-team-page .table .btn {
    border-radius: 999px;
    font-weight: 800;
}
.worklog-team-page .card,
.worklog-team-page .stat-card {
    min-width: 0;
    border-color: #d8e4f0;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}
.worklog-team-page .card {
    border-radius: 22px;
}
.worklog-team-page .filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    align-items: end;
    padding: 22px;
}
.worklog-team-page .filter-intro {
    grid-column: 1 / -1;
    padding-bottom: 14px;
    border-bottom: 1px solid #e6edf5;
}
.worklog-team-page .filter-intro h2 {
    margin: 0;
    color: #06152f;
    font-size: 20px;
    font-weight: 800;
}
.worklog-team-page .filter-intro p {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.65;
}
.worklog-team-page .filter-bar label {
    min-width: 0;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}
.worklog-team-page .search-wide {
    min-width: 0;
    flex: none;
}
.worklog-team-page .filter-bar input,
.worklog-team-page .filter-bar select,
.worklog-team-page .review-form textarea {
    min-height: 46px;
    border-color: #cfdceb;
    border-radius: 14px;
    color: #0f172a;
}
.worklog-team-page .filter-bar input:focus,
.worklog-team-page .filter-bar select:focus,
.worklog-team-page .review-form textarea:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
    outline: none;
}
.worklog-team-page .filter-actions {
    justify-content: flex-end;
}
.worklog-team-page .stat-grid {
    gap: 14px;
}
.worklog-team-page .stat-card {
    position: relative;
    min-height: 112px;
    padding: 18px;
    border-radius: 18px;
    overflow: hidden;
}
.worklog-team-page .stat-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: #0f766e;
}
.worklog-team-page .stat-card:nth-child(2)::before {
    background: #2563eb;
}
.worklog-team-page .stat-card:nth-child(3)::before {
    background: #16a34a;
}
.worklog-team-page .stat-card:nth-child(4)::before,
.worklog-team-page .stat-card.warn::before {
    background: #f97316;
}
.worklog-team-page .stat-card.warn {
    background: #ffffff;
    border-color: #fed7aa;
}
.worklog-team-page .stat-card strong {
    color: #06152f;
    line-height: 1;
}
.worklog-team-page .stat-card span {
    color: #5b6f88;
    font-weight: 700;
}
.worklog-team-page .team-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, .95fr);
}
.worklog-team-page .table-wrap {
    padding: 0;
    overflow: hidden;
}
.worklog-team-page .table {
    border-collapse: separate;
    border-spacing: 0;
}
.worklog-team-page .table th {
    padding: 14px 12px;
    background: #f8fbff;
    color: #52657d;
    font-size: 12px;
    font-weight: 800;
}
.worklog-team-page .table td {
    padding: 14px 12px;
    color: #0f172a;
    border-bottom-color: #e6edf5;
}
.worklog-team-page .table tr:last-child td {
    border-bottom: 0;
}
.worklog-team-page .status {
    border: 1px solid #cbd5e1;
    color: #334155;
    font-weight: 800;
}
.worklog-team-page .status.submitted {
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.worklog-team-page .status.reviewed {
    border-color: #86efac;
    color: #166534;
}
.worklog-team-page .status.returned {
    border-color: #fca5a5;
    color: #991b1b;
}
.worklog-team-page .status.draft {
    border-color: #fdba74;
    color: #9a3412;
}
.worklog-team-page .detail-card {
    position: sticky;
    top: 16px;
    padding: 18px;
    border-radius: 22px;
}
.worklog-team-page .detail-card h2 {
    margin: 0;
    color: #06152f;
    font-size: 22px;
}
.worklog-team-page .detail-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.worklog-team-page .detail-meta > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e2eaf3;
    border-radius: 14px;
    background: #fbfdff;
    color: #64748b;
    overflow-wrap: anywhere;
}
.worklog-team-page .detail-box,
.worklog-team-page .item-card {
    border-color: #e2eaf3;
    border-radius: 16px;
    background: #fbfdff;
}
.worklog-team-page .detail-box p,
.worklog-team-page .item-card div {
    overflow-wrap: anywhere;
}
.worklog-team-page .review-form {
    padding-top: 4px;
}
.worklog-team-page .review-form textarea {
    resize: vertical;
}
.worklog-team-page .flash {
    border-radius: 16px;
}

@media (max-width: 1100px) {
.worklog-team-page .team-grid {
        grid-template-columns: 1fr;
    }
.worklog-team-page .detail-card {
        position: static;
    }
.worklog-team-page .detail-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
.worklog-team-page {
        gap: 14px;
        padding-bottom: 22px;
    }
.worklog-team-page .worklog-tabs {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        border-radius: 18px;
    }
.worklog-team-page .worklog-tabs a {
        text-align: center;
    }
.worklog-team-page .page-head,
.worklog-team-page .filter-bar,
.worklog-team-page .detail-card {
        padding: 16px;
        border-radius: 18px;
    }
.worklog-team-page .page-head {
        display: grid;
        grid-template-columns: 1fr;
    }
.worklog-team-page .page-actions,
.worklog-team-page .page-actions .btn,
.worklog-team-page .filter-actions,
.worklog-team-page .filter-actions .btn {
        width: 100%;
    }
.worklog-team-page .filter-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
.worklog-team-page .filter-bar,
.worklog-team-page .stat-grid,
.worklog-team-page .detail-meta {
        grid-template-columns: 1fr;
    }
.worklog-team-page .stat-card {
        min-height: auto;
        padding: 15px 16px 14px;
    }
.worklog-team-page .table-wrap {
        padding: 14px;
        overflow: visible;
    }
.worklog-team-page .table,
.worklog-team-page .table tbody,
.worklog-team-page .table tr,
.worklog-team-page .table td {
        display: block;
        width: 100%;
    }
.worklog-team-page .table thead {
        display: none;
    }
.worklog-team-page .table tbody {
        display: grid;
        gap: 12px;
    }
.worklog-team-page .table tr {
        padding: 14px;
        border: 1px solid #d8e4f0;
        border-radius: 16px;
        background: #ffffff;
    }
.worklog-team-page .table td {
        display: grid;
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px solid #eef3f8;
        overflow-wrap: anywhere;
    }
.worklog-team-page .table td:last-child {
        border-bottom: 0;
    }
.worklog-team-page .table td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
    }
.worklog-team-page .table td.empty {
        display: block;
        text-align: center;
    }
.worklog-team-page .table td.empty::before {
        content: "";
    }
.worklog-team-page .table .btn {
        width: 100%;
    }
}
@media (max-width: 420px) {
.worklog-team-page .page-head h1,
.worklog-team-page .print-report-head h1 {
        font-size: 24px;
    }
.worklog-team-page .table td {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}
@media print {
.worklog-team-page {
        max-width: none;
        padding-bottom: 0;
    }
.worklog-team-page .card,
.worklog-team-page .stat-card {
        box-shadow: none;
        border-color: #cbd5e1;
    }
.worklog-team-page .detail-card {
        position: static;
    }
}



}
/* Edoc logs page components. Centralized from app/Modules/Edoc/Views/logs.php. */
.edoc-logs-shell {
    display: grid;
    gap: 18px;
}
.edoc-logs-page-head {
    display: grid;
    gap: 4px;
}
.edoc-logs-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
}
.edoc-logs-subtitle {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}
.edoc-logs-card {
    border: 1px solid #dbe2ea;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}
.edoc-logs-filter-card {
    padding: 18px;
    display: grid;
    gap: 14px;
}
.edoc-logs-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.8fr) auto auto;
    gap: 10px;
    align-items: end;
}
.edoc-logs-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.edoc-logs-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}
.edoc-logs-field input,
.edoc-logs-field select {
    width: 100%;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
}
.edoc-logs-btn {
    min-width: 138px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
}
.edoc-logs-btn-reset {
    background: #ef4444;
    color: #fff;
}
.edoc-logs-action-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.edoc-logs-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #dbe7f3;
    background: #fff;
    color: #334155;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}
.edoc-logs-action-pill.is-active {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.edoc-logs-action-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    padding: 0 6px;
    box-sizing: border-box;
}
.edoc-logs-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.edoc-logs-summary-card {
    padding: 16px;
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    display: grid;
    gap: 6px;
}
.edoc-logs-summary-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}
.edoc-logs-summary-value {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
}
.edoc-logs-summary-value-compact {
    font-size: 20px;
}
.edoc-logs-summary-copy {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}
.edoc-logs-list-card {
    padding: 18px;
    display: grid;
    gap: 14px;
}
.edoc-logs-list-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.edoc-logs-list-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}
.edoc-logs-list-subtitle {
    color: #64748b;
    font-size: 13px;
}
.edoc-logs-list-meta {
    font-size: 13px;
    color: #475569;
    font-weight: 700;
}
.edoc-logs-timeline {
    display: grid;
    gap: 12px;
}
.edoc-log-entry {
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
    display: grid;
    gap: 12px;
}
.edoc-log-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.edoc-log-request {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.edoc-log-request-no {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    color: #2563eb;
    text-transform: uppercase;
}
.edoc-log-request-subject {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.45;
    word-break: break-word;
}
.edoc-log-request-meta {
    font-size: 13px;
    color: #64748b;
}
.edoc-log-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.edoc-log-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}
.edoc-log-date {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 5px 10px;
}
.edoc-logs-badge-create { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.edoc-logs-badge-update { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.edoc-logs-badge-pending { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.edoc-logs-badge-progress { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.edoc-logs-badge-done { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.edoc-logs-badge-default { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.edoc-log-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.edoc-log-detail-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fbff;
    padding: 12px 14px;
    display: grid;
    gap: 6px;
}
.edoc-log-detail-label {
    font-size: 12px;
    font-weight: 800;
    color: #475569;
}
.edoc-log-detail-text {
    font-size: 14px;
    line-height: 1.7;
    color: #0f172a;
    white-space: pre-wrap;
    word-break: break-word;
}
.edoc-logs-empty {
    padding: 36px 18px;
    text-align: center;
    color: #64748b;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    background: #fff;
}
@media (max-width: 1180px) {
    .edoc-logs-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 960px) {
    .edoc-logs-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .edoc-logs-btn {
        width: 100%;
        min-width: 0;
    }
}
@media (max-width: 768px) {
    .edoc-logs-summary-grid,
    .edoc-log-detail-grid {
        grid-template-columns: 1fr;
    }
    .edoc-log-entry,
    .edoc-logs-list-card,
    .edoc-logs-filter-card {
        padding: 14px;
    }
}
@media (max-width: 640px) {
    .edoc-logs-title {
        font-size: 24px;
    }
    .edoc-logs-filter-grid {
        grid-template-columns: 1fr;
    }
    .edoc-log-entry-head,
    .edoc-logs-list-head {
        align-items: stretch;
    }
    .edoc-log-meta {
        justify-content: flex-start;
    }
    .edoc-logs-summary-grid {
        grid-template-columns: 1fr;
    }
}



/* Edoc edit/delete logs page components. Centralized from app/Modules/Edoc/Views/edit_delete_logs.php. */
.edoc-editlogs-shell {
    display: grid;
    gap: 18px;
}
.edoc-editlogs-page-head {
    display: grid;
    gap: 4px;
}
.edoc-editlogs-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
}
.edoc-editlogs-subtitle {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}
.edoc-editlogs-card {
    border: 1px solid #dbe2ea;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}
.edoc-editlogs-filter-card {
    padding: 18px;
    display: grid;
    gap: 14px;
}
.edoc-editlogs-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.7fr) auto auto auto;
    gap: 10px;
    align-items: end;
}
.edoc-editlogs-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.edoc-editlogs-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}
.edoc-editlogs-field input,
.edoc-editlogs-field select {
    width: 100%;
    min-width: 0;
    height: 44px;
    box-sizing: border-box;
}
.edoc-editlogs-btn {
    min-width: 132px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
}
.edoc-editlogs-btn-reset {
    background: #ef4444;
    color: #fff;
}
.edoc-editlogs-btn-export {
    background: #16a34a;
    color: #fff;
}
.edoc-editlogs-action-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.edoc-editlogs-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #dbe7f3;
    background: #fff;
    color: #334155;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}
.edoc-editlogs-action-pill.is-active {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.edoc-editlogs-action-pill.is-delete {
    background: #fff5f5;
    border-color: var(--color-danger-border);
    color: #b91c1c;
}
.edoc-editlogs-action-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #f8fafc;
    color: inherit;
    font-size: 11px;
    font-weight: 800;
    padding: 0 6px;
    box-sizing: border-box;
}
.edoc-editlogs-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.edoc-editlogs-summary-card {
    padding: 16px;
    border: 1px solid #dbe7f3;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    display: grid;
    gap: 6px;
}
.edoc-editlogs-summary-card.is-danger {
    border-color: var(--color-danger-border);
    background: linear-gradient(180deg, #fff7f7 0%, #fff1f2 100%);
}
.edoc-editlogs-summary-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}
.edoc-editlogs-summary-value {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
}
.edoc-editlogs-summary-value-compact {
    font-size: 20px;
}
.edoc-editlogs-summary-copy {
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
}
.edoc-editlogs-list-card {
    padding: 18px;
    display: grid;
    gap: 14px;
}
.edoc-editlogs-list-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.edoc-editlogs-list-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}
.edoc-editlogs-list-subtitle {
    color: #64748b;
    font-size: 13px;
}
.edoc-editlogs-list-meta {
    font-size: 13px;
    color: #475569;
    font-weight: 700;
}
.edoc-editlogs-timeline {
    display: grid;
    gap: 12px;
}
.edoc-editlog-entry {
    border: 1px solid #dbe7f3;
    border-left: 5px solid #cbd5e1;
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
    display: grid;
    gap: 12px;
}
.edoc-editlog-entry.is-update {
    border-left-color: #60a5fa;
}
.edoc-editlog-entry.is-delete {
    border-left-color: #ef4444;
    background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%);
}
.edoc-editlog-entry-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.edoc-editlog-request {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.edoc-editlog-request-no {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    color: #2563eb;
    text-transform: uppercase;
}
.edoc-editlog-request-subject {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.45;
    word-break: break-word;
}
.edoc-editlog-request-meta {
    font-size: 13px;
    color: #64748b;
}
.edoc-editlog-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.edoc-editlog-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}
.edoc-editlog-date {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 5px 10px;
}
.edoc-editlogs-badge-update { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.edoc-editlogs-badge-delete { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.edoc-editlogs-badge-default { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
.edoc-editlog-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.edoc-editlog-detail-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fbff;
    padding: 12px 14px;
    display: grid;
    gap: 6px;
}
.edoc-editlog-detail-card.is-danger {
    background: #fff8f8;
    border-color: var(--color-danger-border);
}
.edoc-editlog-detail-label {
    font-size: 12px;
    font-weight: 800;
    color: #475569;
}
.edoc-editlog-detail-text {
    font-size: 14px;
    line-height: 1.7;
    color: #0f172a;
    white-space: pre-wrap;
    word-break: break-word;
}
.edoc-editlogs-empty {
    padding: 36px 18px;
    text-align: center;
    color: #64748b;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    background: #fff;
}
@media (max-width: 1220px) {
    .edoc-editlogs-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 1040px) {
    .edoc-editlogs-filter-grid {
        grid-template-columns: 1fr 1fr;
    }
    .edoc-editlogs-btn {
        width: 100%;
        min-width: 0;
    }
}
@media (max-width: 768px) {
    .edoc-editlogs-summary-grid,
    .edoc-editlog-detail-grid {
        grid-template-columns: 1fr;
    }
    .edoc-editlogs-list-card,
    .edoc-editlogs-filter-card,
    .edoc-editlog-entry {
        padding: 14px;
    }
}
@media (max-width: 640px) {
    .edoc-editlogs-title {
        font-size: 24px;
    }
    .edoc-editlogs-filter-grid {
        grid-template-columns: 1fr;
    }
    .edoc-editlog-entry-head,
    .edoc-editlogs-list-head {
        align-items: stretch;
    }
    .edoc-editlog-meta {
        justify-content: flex-start;
    }
    .edoc-editlogs-summary-grid {
        grid-template-columns: 1fr;
    }
}



/* Edoc dashboard page components. Centralized from app/Modules/Edoc/Views/dashboard.php. */
.edoc-dash {
        display: grid;
        gap: 16px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .edoc-head {
        min-width: 0;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 20px;
        border: 1px solid #dbe6f2;
        border-radius: 20px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
    }
    .edoc-head h1 {
        margin: 0;
        line-height: 1.1;
        color: #0f172a;
        font-size: 28px;
        font-weight: 900;
    }
    .edoc-sub {
        margin-top: 6px;
        color: #64748b;
        font-size: 13px;
    }
    .edoc-actions-top {
        display: inline-flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .edoc-link-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 8px 12px;
        min-height: 40px;
        border-radius: 12px;
        border: 1px solid #dbe6f2;
        background: #fff;
        color: #334155;
        font-size: 12px;
        font-weight: 900;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
    }
    .edoc-link-btn:first-child {
        background: #0f766e;
        border-color: #0f766e;
        color: #fff;
    }
    .edoc-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 88px;
        min-height: 32px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid #bfdbfe;
        background: #eff6ff;
        color: #1d4ed8;
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
    }
    .edoc-action-btn:hover {
        background: #dbeafe;
        border-color: #93c5fd;
    }
    .edoc-kpis {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        min-width: 0;
    }
    .edoc-kpi {
        --kpi-accent: #2563eb;
        --kpi-soft: #eff6ff;
        padding: 16px 16px 16px 20px;
        border-radius: 16px;
        border: 1px solid #dbe6f2;
        background: #fff;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
        position: relative;
        overflow: hidden;
        min-width: 0;
        box-sizing: border-box;
    }
    .edoc-kpi::before {
        content: "";
        position: absolute;
        top: 14px;
        bottom: 14px;
        left: 0;
        width: 5px;
        border-radius: 0 999px 999px 0;
        background: var(--kpi-accent);
    }
    .edoc-kpi.is-urgent {
        --kpi-accent: #d97706;
        --kpi-soft: #fffbeb;
        border-color: #fde68a;
    }
    .edoc-kpi.is-month {
        --kpi-accent: #15803d;
        --kpi-soft: #ecfdf5;
        border-color: var(--color-success-border);
    }
    .edoc-kpi-label {
        font-size: 13px;
        color: #64748b;
    }
    .edoc-kpi-value {
        font-size: 32px;
        font-weight: 900;
        margin-top: 4px;
        color: var(--kpi-accent);
    }
    .edoc-priority-cards {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        min-width: 0;
    }
    .edoc-pcard {
        --priority-color: #2563eb;
        --priority-border: #bfdbfe;
        --priority-bg: #eff6ff;
        border: 1px solid var(--priority-border);
        border-radius: 14px;
        padding: 14px;
        background: #fff;
        box-shadow: none;
        min-width: 0;
        box-sizing: border-box;
    }
    .edoc-pcard.is-normal { --priority-color: #2563eb; --priority-border: #bfdbfe; --priority-bg: #eff6ff; }
    .edoc-pcard.is-urgent { --priority-color: #b45309; --priority-border: #fde68a; --priority-bg: #fffbeb; }
    .edoc-pcard.is-very-urgent { --priority-color: #c2410c; --priority-border: #fed7aa; --priority-bg: #fff7ed; }
    .edoc-pcard.is-most-urgent { --priority-color: #b91c1c; --priority-border: #fecaca; --priority-bg: #fef2f2; }
    .edoc-pcard h4 {
        margin: 0 0 6px;
        font-size: 14px;
        color: var(--priority-color);
    }
    .edoc-pcard .count {
        font-size: 24px;
        font-weight: 900;
        color: #0f172a;
    }
    .edoc-pcard a {
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        border-radius: 999px;
        border: 1px solid var(--priority-border);
        background: var(--priority-bg);
        color: var(--priority-color);
        transition: all .16s ease;
    }
    .edoc-pcard a:hover {
        background: #dbeafe;
        border-color: #93c5fd;
        transform: translateY(-1px);
    }
    .edoc-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        min-width: 0;
    }
    .edoc-card {
        padding: 16px;
        border-radius: 18px;
        border: 1px solid #dbe6f2;
        background: #fff;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .edoc-card h3 {
        margin: 0 0 12px;
        font-size: 20px;
        line-height: 1.2;
        color: #0f172a;
        font-weight: 900;
    }
    .edoc-card .table-wrap {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow: auto;
        background: #fff;
    }
    .edoc-card .nice-table {
        min-width: 100%;
    }
    .edoc-card .nice-table th,
    .edoc-card .nice-table td {
        text-align: center;
        vertical-align: middle;
    }
    .edoc-card .nice-table td {
        word-break: break-word;
    }
    .edoc-follow-table th,
    .edoc-follow-table td {
        vertical-align: middle;
        font-size: 12px;
    }
    .edoc-follow-table {
        min-width: 980px !important;
    }
    .edoc-pill {
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        padding: 3px 10px;
        font-size: 11px;
        font-weight: 700;
        border: 1px solid transparent;
        white-space: nowrap;
    }
    .edoc-pill.priority-most_urgent {
        background: #fef2f2;
        color: #b91c1c;
        border-color: var(--color-danger-border);
    }
    .edoc-pill.priority-very_urgent {
        background: #fff7ed;
        color: #c2410c;
        border-color: #fed7aa;
    }
    .edoc-pill.priority-urgent {
        background: #fffbeb;
        color: #b45309;
        border-color: #fde68a;
    }
    .edoc-pill.status-pending {
        background: #fff7ed;
        color: #b45309;
        border-color: #fed7aa;
    }
    .edoc-pill.status-in_progress {
        background: #eff6ff;
        color: #1d4ed8;
        border-color: #bfdbfe;
    }
    .edoc-pill.status-done {
        background: #ecfdf5;
        color: #166534;
        border-color: var(--color-success-border);
    }
    .edoc-follow-form {
        display: flex;
        align-items: center;
        gap: 6px;
        justify-content: center;
        flex-wrap: nowrap;
    }
    .edoc-follow-form select,
    .edoc-follow-form input {
        min-width: 120px;
        max-width: 180px;
        height: 32px;
    }
    .edoc-follow-form .btn {
        height: 32px;
        padding: 0 10px;
        white-space: nowrap;
        min-width: 76px;
    }
    .edoc-empty-row td {
        text-align: center !important;
        padding: 18px 10px;
        color: #94a3b8;
        font-style: italic;
    }
    .edoc-note {
        font-size: 11px;
        color: #64748b;
        margin-top: 2px;
    }
    .edoc-muted {
        color: #94a3b8;
    }
    .edoc-update-btn {
        background: #0ea5e9 !important;
        border-color: #0ea5e9 !important;
        color: #fff !important;
    }
    .edoc-stack {
        display: flex;
        flex-direction: column;
    }
    @media (max-width: 1200px) {
        .edoc-priority-cards {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 1024px) {
        .edoc-head {
            flex-direction: column;
            align-items: flex-start;
        }
        .edoc-kpis,
        .edoc-grid-2 {
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 820px) {
        .edoc-dash {
            gap: 12px;
        }
        .edoc-head {
            padding: 16px;
            border-radius: 18px;
        }
        .edoc-head h1 {
            font-size: 23px;
        }
        .edoc-actions-top,
        .edoc-link-btn {
            width: 100%;
        }
        .edoc-link-btn {
            min-height: 42px;
        }
        .edoc-priority-cards {
            grid-template-columns: 1fr;
        }
        .edoc-card {
            padding: 14px;
            border-radius: 16px;
        }
        .edoc-kpi {
            border-radius: 14px;
            padding: 14px 14px 14px 18px;
        }
        .edoc-kpi-value {
            font-size: 28px;
        }
        .edoc-follow-form {
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        .edoc-follow-form select,
        .edoc-follow-form input,
        .edoc-follow-form .btn {
            width: 100%;
            max-width: none;
        }
    }



/* Edoc forward departments page components. Centralized from app/Modules/Edoc/Views/forward_departments.php. */
.edoc-fd-card { margin-bottom: 12px; }
    .edoc-fd-title { margin: 0 0 10px; }
    .edoc-fd-add-form {
        display: grid;
        grid-template-columns: 1.5fr 1fr 130px 150px;
        gap: 10px;
        align-items: end;
    }
    .edoc-fd-add-form label,
    .edoc-fd-filter label {
        display: grid;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: #334155;
    }
    .edoc-fd-filter {
        display: grid;
        grid-template-columns: 1.4fr 180px 1fr;
        gap: 10px;
        margin-bottom: 10px;
        align-items: end;
    }
    .edoc-fd-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
        color: #64748b;
        font-size: 13px;
    }
    .edoc-fd-list {
        display: grid;
        gap: 10px;
    }
    .edoc-fd-group {
        border: 1px solid #dbe3ee;
        border-radius: 12px;
        background: #f8fbff;
        overflow: hidden;
    }
    .edoc-fd-group > summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
        font-weight: 700;
        color: #0f172a;
        background: #eef4ff;
        border-bottom: 1px solid #dbe3ee;
    }
    .edoc-fd-group > summary::-webkit-details-marker { display: none; }
    .edoc-fd-group-summary-right {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }
    .edoc-fd-group-count {
        padding: 2px 8px;
        border-radius: 999px;
        background: #dbeafe;
        color: #1d4ed8;
    }
    .edoc-fd-group-body {
        padding: 10px;
        display: grid;
        gap: 10px;
    }
    .edoc-fd-item {
        border: 1px solid #dbe3ee;
        border-radius: 12px;
        padding: 10px;
        background: #fff;
    }
    .edoc-fd-item-grid {
        display: grid;
        grid-template-columns: 1.4fr 1.2fr 110px 140px 1.2fr auto;
        gap: 8px;
        align-items: end;
    }
    .edoc-fd-item label {
        display: grid;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
        color: #334155;
    }
    .edoc-fd-item input[type="text"],
    .edoc-fd-item input[type="number"] {
        width: 100%;
        min-height: 38px;
        box-sizing: border-box;
    }
    .edoc-fd-actions {
        display: flex;
        gap: 6px;
        justify-content: center;
        align-items: center;
    }
    .edoc-fd-actions .btn {
        min-width: 84px;
        min-height: 36px;
        padding: 0 10px;
    }
    .edoc-fd-group-chip {
        display: inline-flex;
        padding: 4px 8px;
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 12px;
        font-weight: 700;
        margin-right: 6px;
    }
    .edoc-fd-empty {
        text-align: center;
        color: #64748b;
        padding: 16px;
        border: 1px dashed #cbd5e1;
        border-radius: 10px;
    }
    @media (max-width: 1280px) {
        .edoc-fd-item-grid { grid-template-columns: 1fr 1fr 100px 120px 1fr; }
        .edoc-fd-actions { grid-column: 1 / -1; justify-content: flex-end; }
    }
    @media (max-width: 1024px) {
        .edoc-fd-add-form { grid-template-columns: 1fr 1fr; }
        .edoc-fd-filter { grid-template-columns: 1fr 1fr; }
        .edoc-fd-item-grid { grid-template-columns: 1fr 1fr; }
        .edoc-fd-actions { justify-content: flex-start; }
    }
    @media (max-width: 720px) {
        .edoc-fd-add-form,
        .edoc-fd-filter { grid-template-columns: 1fr; }
        .edoc-fd-item-grid { grid-template-columns: 1fr; }
    }



/* Edoc create page components. Centralized from app/Modules/Edoc/Views/create.php. */

.edoc-create-wrap,
.edoc-create-wrap * {
        box-sizing: border-box;
    }
.edoc-create-wrap {
        display: grid;
        gap: 16px;
        width: 100%;
        max-width: none;
        margin: 0 auto;
    }
.edoc-create-wrap .edoc-create-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
        padding: 22px;
        border: 0;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
    }
.edoc-create-wrap .edoc-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }
.edoc-create-wrap .edoc-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 2px 2px 16px;
        border-bottom: 1px solid #e2e8f0;
    }
.edoc-create-wrap .edoc-head h1 {
        margin: 0;
        color: #061a36;
        font-size: clamp(22px, 3vw, 30px);
        line-height: 1.2;
        letter-spacing: 0;
    }
.edoc-create-wrap .edoc-head-note {
        margin-top: 8px;
        font-size: 12px;
        color: #52657c;
        line-height: 1.6;
    }
.edoc-create-wrap .edoc-required {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        border-radius: 999px;
        border: 1px solid #fecaca;
        background: #fff7f7;
        color: #b42318;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }
.edoc-create-wrap .edoc-section {
        position: relative;
        min-width: 0;
        border: 0;
        border-radius: 16px;
        background: #ffffff;
        padding: 16px;
        display: grid;
        gap: 12px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    }
.edoc-create-wrap .edoc-section-head {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
.edoc-create-wrap .edoc-section-num {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        background: #e7f6f3;
        color: #0f766e;
        font-size: 12px;
        font-weight: 800;
        box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.18);
    }
.edoc-create-wrap .edoc-section-title {
        min-width: 0;
        font-size: 15px;
        font-weight: 700;
        color: #0f172a;
        margin: 0;
    }
.edoc-create-wrap .edoc-section-note {
        margin: 0;
        padding: 0 0 10px 38px;
        font-size: 12px;
        color: #64748b;
        border-bottom: 1px solid #e2e8f0;
        line-height: 1.55;
    }
.edoc-create-wrap .edoc-grid-3 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        min-width: 0;
    }
.edoc-create-wrap .edoc-grid-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        min-width: 0;
    }
.edoc-create-wrap .edoc-span-2 { grid-column: span 2; }
.edoc-create-wrap .edoc-span-3 { grid-column: span 3; }
.edoc-create-wrap .edoc-form label {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 700;
        color: #40536a;
    }
.edoc-create-wrap .edoc-form input,
.edoc-create-wrap .edoc-form select,
.edoc-create-wrap .edoc-form textarea {
        width: 100%;
        min-width: 0;
        border-radius: 12px;
        border: 1px solid #cfd9e6;
        background: #fff;
        color: #071833;
        transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    }
.edoc-create-wrap .edoc-form input,
.edoc-create-wrap .edoc-form select {
        min-height: 42px;
    }
.edoc-create-wrap .edoc-form textarea {
        min-height: 84px;
        resize: vertical;
    }
.edoc-create-wrap .edoc-form input:focus,
.edoc-create-wrap .edoc-form select:focus,
.edoc-create-wrap .edoc-form textarea:focus {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
    }
.edoc-create-wrap .edoc-form .edoc-file-wrap {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        min-height: 68px;
        border: 1px dashed #cbd5e1;
        background: #f8fafc;
        border-radius: 14px;
        padding: 12px;
        min-width: 0;
        cursor: pointer;
        margin-bottom: 0;
        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    }
.edoc-create-wrap .edoc-form .edoc-file-wrap:hover,
.edoc-create-wrap .edoc-form .edoc-file-wrap:focus-within {
        border-color: #93c5fd;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
    }
.edoc-create-wrap .edoc-file-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #dbe2ea;
        background: #ffffff;
        color: #0f766e;
        font-size: 22px;
        font-weight: 800;
        line-height: 1;
    }
.edoc-create-wrap .edoc-file-copy {
        min-width: 0;
        display: grid;
        gap: 3px;
    }
.edoc-create-wrap .edoc-file-title {
        color: #0f172a;
        font-weight: 800;
        font-size: 14px;
        line-height: 1.35;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
.edoc-create-wrap .edoc-file-meta {
        color: #64748b;
        font-size: 12px;
        line-height: 1.4;
    }
.edoc-create-wrap .edoc-file-wrap input[type="file"] {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }
.edoc-create-wrap .edoc-help {
        font-size: 12px;
        color: #64748b;
        margin-top: 6px;
    }
.edoc-create-wrap .edoc-project-picker {
        position: relative;
        min-width: 0;
    }
.edoc-create-wrap .edoc-project-input-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
        min-width: 0;
    }
.edoc-create-wrap .edoc-project-clear {
        height: 42px;
        border-radius: 12px;
        border: 1px solid #d7e3f1;
        background: #fff;
        color: #52657c;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
    }
.edoc-create-wrap .edoc-project-clear:hover {
        border-color: var(--color-danger-border);
        background: #fff7f7;
        color: #b42318;
    }
.edoc-create-wrap .edoc-project-list {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        max-height: 240px;
        overflow: auto;
        border: 1px solid #b7d5f6;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14);
        z-index: 50;
    }
.edoc-create-wrap .edoc-project-item {
        padding: 10px 12px;
        cursor: pointer;
        font-size: 13px;
        border-bottom: 1px solid #f1f5f9;
    }
.edoc-create-wrap .edoc-project-item:hover {
        background: #f0fdfa;
    }
.edoc-create-wrap .edoc-project-item small {
        color: #64748b;
        margin-left: 6px;
    }
.edoc-create-wrap .edoc-project-empty {
        padding: 10px;
        font-size: 12px;
        color: #94a3b8;
    }
.edoc-create-wrap .edoc-forward-picker {
        position: relative;
        min-width: 0;
    }
.edoc-create-wrap .edoc-forward-list {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        max-height: 220px;
        overflow: auto;
        border: 1px solid #b7d5f6;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14);
        z-index: 60;
    }
.edoc-create-wrap .edoc-forward-item {
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        border: 0;
        border-bottom: 1px solid #f1f5f9;
        background: #fff;
        color: #0f172a;
        font-size: 13px;
        cursor: pointer;
    }
.edoc-create-wrap .edoc-forward-item:hover {
        background: #f0fdfa;
    }
.edoc-create-wrap .edoc-forward-empty {
        padding: 10px;
        font-size: 12px;
        color: #94a3b8;
    }
.edoc-create-wrap .edoc-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        border-top: 1px solid #e5e7eb;
        padding-top: 16px;
    }
.edoc-create-wrap .edoc-btn {
        min-width: 132px;
        min-height: 42px;
        text-align: center;
        text-decoration: none !important;
        border: 0;
        border-radius: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: none;
    }
.edoc-create-wrap .edoc-btn-cancel {
        background: #ffffff !important;
        color: #b42318 !important;
        border: 1px solid #fecaca !important;
    }
.edoc-create-wrap .edoc-btn-cancel:hover {
        background: #fff7f7 !important;
    }
.edoc-create-wrap .edoc-btn-save {
        background: #0f766e !important;
        color: #ffffff !important;
    }
.edoc-create-wrap .edoc-btn-save:hover {
        background: #0b665f !important;
    }
    @media (max-width: 1024px) {
.edoc-create-wrap .edoc-grid-3 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
.edoc-create-wrap .edoc-span-3 { grid-column: span 2; }
    }
    @media (max-width: 720px) {
.edoc-create-wrap {
            max-width: 100%;
        }
.edoc-create-wrap .edoc-create-card {
            padding: 14px;
            border-radius: 16px;
        }
.edoc-create-wrap .edoc-grid-3,
.edoc-create-wrap .edoc-grid-2 {
            grid-template-columns: 1fr;
        }
.edoc-create-wrap .edoc-span-2,
.edoc-create-wrap .edoc-span-3 {
            grid-column: span 1;
        }
.edoc-create-wrap .edoc-head {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
.edoc-create-wrap .edoc-head h1 {
            font-size: 22px;
        }
.edoc-create-wrap .edoc-required {
            align-self: flex-start;
        }
.edoc-create-wrap .edoc-section {
            padding: 14px 12px 14px 14px;
            border-radius: 14px;
        }
.edoc-create-wrap .edoc-section-note {
            padding-left: 0;
        }
.edoc-create-wrap .edoc-project-input-row {
            grid-template-columns: 1fr;
        }
.edoc-create-wrap .edoc-project-clear {
            width: 100%;
        }
.edoc-create-wrap .edoc-form .edoc-file-wrap {
            grid-template-columns: 38px minmax(0, 1fr);
            padding: 12px;
        }
.edoc-create-wrap .edoc-actions {
            justify-content: stretch;
            flex-direction: column-reverse;
        }
.edoc-create-wrap .edoc-btn {
            width: 100%;
            flex: 1;
        }
    }



/* Edoc list page components. Centralized from app/Modules/Edoc/Views/list.php. */

.edoc-list-wrap .edoc-filter-card {
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
}
.edoc-list-wrap .edoc-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.edoc-list-wrap .edoc-filter-grid .field {
    display: grid;
    gap: 6px;
    min-width: 150px;
    flex: 1 1 150px;
}
.edoc-list-wrap .edoc-filter-grid .field input[type="text"],
.edoc-list-wrap .edoc-filter-grid .field select {
    width: 100%;
    height: 42px;
    min-height: 42px;
    box-sizing: border-box;
}
.edoc-list-wrap .edoc-filter-grid .field.search {
    min-width: 280px;
    flex: 2 1 360px;
}
.edoc-list-wrap .edoc-filter-grid .field.project {
    min-width: 340px;
    flex: 2 1 380px;
}
.edoc-list-wrap .project-picker-input {
    margin: 0;
}
.edoc-list-wrap .edoc-filter-grid .field label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.edoc-list-wrap .filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex: 1 0 100%;
    padding-top: 2px;
}
.edoc-list-wrap .filter-actions .btn {
    white-space: nowrap;
    min-width: 96px;
    min-height: 42px;
    height: 42px;
    padding: 0 14px;
    box-sizing: border-box;
}
.edoc-list-wrap .btn.btn-danger-soft {
    background: #ef4444;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.edoc-list-wrap .edoc-view-switch {
    display: inline-flex;
    border: 1px solid #dbe3ee;
    border-radius: 10px;
    overflow: hidden;
}
.edoc-list-wrap .edoc-view-switch .btn {
    min-width: 84px;
    border-radius: 0;
    background: #e2e8f0;
    color: #0f172a;
}
.edoc-list-wrap .edoc-view-switch .btn.active {
    background: #2563eb;
    color: #fff;
}
.edoc-list-wrap .edoc-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.edoc-list-wrap .edoc-list-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #64748b;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 14px;
    background: #f8fafc;
}
.edoc-list-wrap .edoc-item-card {
    border: 1px solid #dbe3ee;
    border-left: 5px solid #cbd5e1;
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    display: grid;
    gap: 10px;
}
.edoc-list-wrap .edoc-item-card.priority-normal { border-left-color: #22c55e; background: linear-gradient(180deg, #ffffff 0%, #f7fff8 100%); }
.edoc-list-wrap .edoc-item-card.priority-urgent { border-left-color: #f59e0b; background: linear-gradient(180deg, #ffffff 0%, #fff9f2 100%); }
.edoc-list-wrap .edoc-item-card.priority-very-urgent { border-left-color: #f97316; background: linear-gradient(180deg, #ffffff 0%, #fff6f0 100%); }
.edoc-list-wrap .edoc-item-card.priority-most-urgent { border-left-color: #ef4444; background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%); }
.edoc-list-wrap .edoc-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.edoc-list-wrap .edoc-item-receive {
    font-weight: 800;
    color: #0f172a;
}
.edoc-list-wrap .edoc-item-date {
    font-size: 12px;
    color: #64748b;
}
.edoc-list-wrap .edoc-item-subject {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    word-break: break-word;
}
.edoc-list-wrap .edoc-item-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    font-size: 13px;
    color: #334155;
}
.edoc-list-wrap .edoc-item-meta div {
    min-width: 0;
    word-break: break-word;
}
.edoc-list-wrap .edoc-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.edoc-list-wrap .edoc-item-actions form {
    margin: 0;
}
@media (max-width: 1200px) {
.edoc-list-wrap .edoc-filter-grid .field.project {
        min-width: 280px;
    }
.edoc-list-wrap .edoc-list-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
.edoc-list-wrap .edoc-filter-grid .field.project,
.edoc-list-wrap .edoc-filter-grid .field.search {
        min-width: 0;
        flex-basis: 100%;
    }
.edoc-list-wrap .filter-actions {
        justify-content: stretch;
    }
.edoc-list-wrap .filter-actions .btn {
        flex: 1;
    }
.edoc-list-wrap .edoc-item-meta {
        grid-template-columns: 1fr;
    }
.edoc-list-wrap .edoc-item-actions {
        justify-content: stretch;
    }
.edoc-list-wrap .edoc-item-actions .btn {
        flex: 1;
    }
}
.edoc-list-wrap .edoc-list-panel {
    padding: 12px;
}
.edoc-list-wrap .edoc-list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.edoc-list-wrap .edoc-list-count {
    font-size: 13px;
    color: var(--text-muted);
}
.edoc-list-wrap .edoc-list-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.edoc-list-wrap .edoc-table-empty {
    text-align: center;
    color: var(--text-muted);
}
.edoc-list-wrap .edoc-table-subject {
    text-align: left;
    max-width: 320px;
}
.edoc-list-wrap .edoc-row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.edoc-list-wrap .edoc-list-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1300;
    padding: 16px;
}
.edoc-list-wrap .edoc-list-modal.is-edit {
    z-index: 1350;
}
.edoc-list-wrap .edoc-list-modal-card {
    width: min(760px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 14px;
}
.edoc-list-wrap .edoc-list-modal-card.is-wide {
    width: min(920px, 100%);
}
.edoc-list-wrap .edoc-list-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.edoc-list-wrap .edoc-list-modal-title {
    margin: 0;
}
.edoc-list-wrap .edoc-list-detail-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 8px 12px;
}
.edoc-list-wrap .edoc-list-prewrap {
    white-space: pre-wrap;
}
.edoc-list-wrap .edoc-list-edit-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.edoc-list-wrap .edoc-list-form-full,
.edoc-list-wrap .edoc-list-edit-actions {
    grid-column: 1 / -1;
}
.edoc-list-wrap .edoc-list-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}



/* Attendance duty type admin components. Centralized from app/Modules/Attendance/Views/duty_type_admin.php. */
.duty-admin-wrap {
    padding: 16px;
    border: 1px solid #dbe7f5;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.duty-admin-top {
    border: 1px solid #dbe7f5;
    border-radius: 12px;
    padding: 14px;
    background: #fff;
}
.duty-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 10px;
}
.duty-type-grid label {
    display: grid;
    gap: 6px;
    font-weight: 600;
}
.duty-type-grid label > span {
    font-size: 13px;
    color: #334155;
}
.duty-form-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 12px;
}
.duty-form-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 146px !important;
    height: 40px !important;
    padding: 0 14px !important;
    line-height: 1;
    box-sizing: border-box;
    white-space: nowrap;
}
.duty-form-note {
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
}
.duty-table-wrap {
    margin-top: 14px;
    border: 1px solid #dbe7f5;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
}
.duty-table-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.duty-table-head h2 {
    margin: 0;
    font-size: 18px;
}
.duty-count {
    font-size: 12px;
    color: #64748b;
}
.duty-empty {
    padding: 16px;
    text-align: center;
    color: #64748b;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
}
.duty-type-table td, .duty-type-table th {
    vertical-align: middle;
}
.duty-name-th {
    font-weight: 700;
    color: #0f172a;
}
.duty-meta {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}
.duty-actions-inline {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.duty-actions-inline form {
    margin: 0;
}
.duty-actions-inline .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px !important;
    height: 36px !important;
    padding: 0 12px !important;
    line-height: 1;
    box-sizing: border-box;
    white-space: nowrap;
}
@media (max-width: 980px) {
    .duty-type-grid {
        grid-template-columns: 1fr;
    }
    .duty-form-actions .btn {
        flex: 1 1 100%;
    }
}

.duty-admin-alert {
    margin-top: 10px;
}
.duty-admin-wrap {
    margin-top: 12px;
}
.duty-inline-form {
    display: inline;
}



/* Attendance holiday admin components. Centralized from app/Modules/Attendance/Views/holiday_admin.php. */
.holiday-admin-page {
  max-width: var(--content-wide);
  margin: 0 auto;
  gap: var(--space-4);
  color: var(--text-strong);
}

.holiday-admin-page .holiday-admin-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(620px, 1.1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border-color: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.holiday-admin-page .holiday-admin-hero-copy.page-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.holiday-admin-page .holiday-admin-kicker.page-kicker {
  color: var(--color-primary-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.holiday-admin-page .holiday-admin-hero-stats.metric-grid,
.holiday-admin-page .holiday-admin-stats.metric-grid {
  gap: var(--space-3);
}

.holiday-admin-page .holiday-admin-hero-stats.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.holiday-admin-page .holiday-admin-stats.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.holiday-admin-page .holiday-admin-stat-tile.metric-card,
.holiday-admin-page .holiday-stat-box.metric-card {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
}

.holiday-admin-page .holiday-admin-stat-tile.metric-card {
  align-content: center;
  min-height: 118px;
}

.holiday-admin-page .metric-head,
.holiday-admin-page .holiday-stat-box .label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
}

.holiday-admin-page .metric-icon {
  flex: 0 0 auto;
}

.holiday-admin-page .metric-value,
.holiday-admin-page .holiday-stat-box .value {
  color: var(--text-strong);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.holiday-admin-alert.alert-box {
  margin: 0;
}

.holiday-admin-grid {
  display: grid;
  gap: var(--space-4);
}

.holiday-admin-card.section-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.holiday-admin-card.is-list-card.section-card {
  padding: 0;
}

.holiday-card-head,
.holiday-list-head .holiday-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.holiday-admin-head.section-title {
  margin: 0;
}

.holiday-admin-sub {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6;
}

.holiday-card-chip.badge-soft {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
}

.holiday-admin-form-grid.filter-panel,
.holiday-filter-grid.filter-panel,
.holiday-inline-grid {
  display: grid;
  gap: var(--space-3);
}

.holiday-admin-form-grid.filter-panel {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
}

.holiday-filter-grid.filter-panel {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  align-items: end;
  margin: 0 var(--space-4);
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  box-shadow: none;
}

.holiday-admin-form-grid .holiday-admin-actions,
.holiday-filter-grid .holiday-admin-actions {
  align-self: end;
}

.holiday-admin-page .form-field {
  min-width: 0;
}

.holiday-admin-actions.form-actions,
.holiday-inline-actions.action-row,
.holiday-action-cluster.action-row {
  gap: var(--space-2);
  align-items: center;
}

.holiday-admin-actions.form-actions {
  justify-content: flex-end;
}

.holiday-list-head {
  padding: var(--space-4) var(--space-4) 0;
}

.holiday-list.record-list {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}

.holiday-row-card.record-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.holiday-row-card.is-collapsed .holiday-inline-grid {
  display: none;
}

.holiday-row-card.hidden-by-filter {
  display: none;
}

.holiday-row-top,
.holiday-row-tools {
  display: grid;
  gap: var(--space-3);
}

.holiday-row-top {
  grid-template-columns: minmax(0, 1fr);
}

.holiday-row-info {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.holiday-row-title {
  color: var(--text-strong);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.holiday-row-meta,
.holiday-source-note {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.holiday-source-note {
  width: fit-content;
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  overflow-wrap: anywhere;
}

.holiday-meta-chips,
.holiday-row-tools,
.holiday-row-tools > .holiday-action-cluster:last-child,
.holiday-pagination,
.holiday-pagination-controls,
.holiday-page-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.holiday-row-tools {
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.holiday-row-tools > .holiday-action-cluster:last-child {
  justify-content: flex-end;
}

.holiday-row-tools form {
  min-width: 0;
}

.holiday-inline-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.holiday-inline-grid .span-2 {
  grid-column: span 2;
}

.holiday-empty.empty-state {
  border-color: var(--border-muted);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  color: var(--text-muted);
}

.holiday-pagination {
  justify-content: space-between;
  padding: var(--space-4);
  border-top: 1px solid var(--border-soft);
  background: var(--surface-muted);
}

.holiday-pagination-info,
.holiday-pagination-controls .holiday-page-size-label {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 900;
}

.holiday-pagination-controls .holiday-page-size-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.holiday-pagination-controls .holiday-page-size-label select {
  width: 72px;
  min-width: 72px;
}

.holiday-page-btn.btn {
  min-width: 40px;
  width: auto;
  padding-inline: var(--space-3);
}

.holiday-page-btn.is-active {
  color: var(--surface);
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.holiday-page-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .holiday-admin-page .holiday-admin-hero.page-hero {
    grid-template-columns: 1fr;
  }

  .holiday-admin-page .holiday-admin-hero-stats.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .holiday-admin-page .holiday-admin-stats.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .holiday-inline-grid .span-2,
  .holiday-row-tools.span-2 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .holiday-admin-page .holiday-admin-hero.page-hero,
  .holiday-admin-card.section-card {
    padding: var(--space-3);
  }

  .holiday-admin-page .holiday-admin-hero-copy.page-hero-main,
  .holiday-admin-page .holiday-admin-hero-stats.metric-grid,
  .holiday-admin-page .holiday-admin-stats.metric-grid,
  .holiday-admin-form-grid.filter-panel,
  .holiday-filter-grid.filter-panel,
  .holiday-inline-grid,
  .holiday-card-head,
  .holiday-row-tools,
  .holiday-pagination,
  .holiday-pagination-controls {
    grid-template-columns: 1fr;
  }

  .holiday-admin-page .holiday-admin-hero-copy.page-hero-main,
  .holiday-card-head,
  .holiday-row-tools,
  .holiday-pagination,
  .holiday-pagination-controls {
    display: grid;
  }

  .holiday-filter-grid.filter-panel {
    margin: 0 var(--space-3);
    padding: var(--space-3);
  }

  .holiday-list-head {
    padding: var(--space-3) var(--space-3) 0;
  }

  .holiday-list.record-list,
  .holiday-pagination {
    padding: var(--space-3);
  }

  .holiday-card-chip.badge-soft,
  .holiday-admin-actions.form-actions,
  .holiday-inline-actions.action-row,
  .holiday-action-cluster.action-row,
  .holiday-admin-actions .btn,
  .holiday-inline-actions .btn,
  .holiday-action-cluster .btn,
  .holiday-row-tools form,
  .holiday-pagination-controls .holiday-page-size-label {
    width: 100%;
  }

  .holiday-row-tools > .holiday-action-cluster:last-child,
  .holiday-admin-actions.form-actions {
    justify-content: stretch;
  }

  .holiday-page-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .holiday-page-btn.btn {
    width: 100%;
  }
}
/* Attendance staff dashboard components. Centralized from app/Modules/Attendance/Views/staff_dashboard.php. */
.attendance-page-title { margin-bottom: 12px; }
.attendance-flash { margin-bottom: 12px; }
.attendance-flash-success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.attendance-flash-error { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.attendance-card { margin-bottom: 12px; border-radius: 14px; border-color: #dbe2ea; background: linear-gradient(180deg, #fff 0%, #fbfdff 100%); }
.attendance-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
    margin-bottom: 8px;
}
.attendance-head-card {
    display: grid;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.attendance-head {
    padding: 0;
    display: grid;
    gap: 4px;
}
.attendance-head-title { font-weight: 800; color: #0f172a; font-size: 24px; line-height: 1.15; }
.attendance-head-subtitle { color: #64748b; font-size: 13px; margin-top: 0; }
.attendance-head-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.attendance-head-chip {
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
}
.attendance-head-chip-accent {
    background: #f8fafc;
}
.attendance-head-chip-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}
.attendance-head-chip strong {
    font-size: 16px;
    color: #0f172a;
}
.attendance-form {
    display: grid;
    gap: 8px;
    padding: 0;
}
.attendance-form-title {
    font-weight: 700;
    color: #0f172a;
    font-size: 14px;
}
.attendance-form-normal {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
}
.attendance-form-grid { display: grid; grid-template-columns: 170px 1fr; gap: 8px; align-items: center; }
.attendance-form-grid label { margin: 0; color: #334155; font-weight: 600; }
.attendance-form-grid input[type="text"],
.attendance-form-grid input[type="file"],
.attendance-form-grid select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.attendance-form-help { font-size: 12px; color: #64748b; }
.attendance-absent-cutoff-notice {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
}
.attendance-leave-lock-notice {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
}
.attendance-holiday-notice {
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #991b1b;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
}
.attendance-form-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.attendance-normal-layout { display: grid; gap: 10px; margin-top: 6px; }
.attendance-action-block { display: grid; gap: 10px; }
.attendance-action-label {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}
.attendance-primary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 10px;
}
.attendance-primary-actions .btn { width: 100%; min-height: 52px; border-radius: 16px; font-size: 17px; font-weight: 800; border: none; box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08); }
.attendance-action-divider { height: 1px; margin: 2px 0; background: #e5edf5; }
.attendance-duty-link-btn { width: 100%; min-height: 46px; border-radius: 14px; text-align: center; border: 1px solid #d6e0eb; background: #f8fafc; color: #0f172a; font-weight: 700; }
.attendance-btn-checkin { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%); border-color: #16a34a; }
.attendance-btn-checkout { background: linear-gradient(180deg, #f38a8a 0%, #e86b6b 100%); border-color: #e86b6b; }
.attendance-quick-shell { display:grid; gap:12px; margin:14px 0; }





.pdpa-hero.page-hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
}

.pdpa-hero-status.page-hero-aside {
  display: grid;
  align-content: center;
  gap: var(--space-2);
}

.pdpa-hero-status .metric-value {
  line-height: 1;
}

.pdpa-hero-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.pdpa-hero-status-grid span {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.pdpa-hero-status-grid strong {
  color: var(--text-strong);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.pdpa-hero-status-grid small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.pdpa-overview-card {
  gap: var(--space-4);
}

.pdpa-overview-shell {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.35fr);
  gap: var(--space-4);
  align-items: stretch;
}

.pdpa-command-panel,
.pdpa-quick-panel {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  padding: var(--space-4);
}

.pdpa-command-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.pdpa-command-head h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 20px;
}

.pdpa-command-head p,
.pdpa-quick-head p {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.pdpa-command-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.pdpa-command-stats span {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.pdpa-command-stats strong {
  color: var(--text-strong);
  font-size: 19px;
  overflow-wrap: anywhere;
}

.pdpa-command-stats small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.pdpa-quick-grid.action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.pdpa-quick-grid .action-card {
  min-height: 132px;
}

.pdpa-page .section-card {
  scroll-margin-top: 96px;
}

.pdpa-page .section-head {
  align-items: flex-start;
}

.pdpa-disclosure {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.pdpa-disclosure + .empty-state,
.pdpa-disclosure + .record-list {
  margin-top: var(--space-3);
}

.pdpa-disclosure summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-4);
  color: var(--text-strong);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.pdpa-disclosure summary::-webkit-details-marker {
  display: none;
}

.pdpa-disclosure summary::after {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  margin-left: auto;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.pdpa-disclosure[open] summary::after {
  transform: rotate(225deg);
}

.pdpa-disclosure .filter-panel {
  margin: 0 var(--space-3) var(--space-3);
  border-color: var(--border-soft);
  background: var(--surface);
}

.pdpa-create-disclosure {
  margin-bottom: var(--space-3);
}

.pdpa-metric-grid.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pdpa-inventory-form-grid.filter-grid,
.pdpa-request-form-grid.filter-grid,
.pdpa-policy-form-grid.filter-grid,
.pdpa-retention-form-grid.filter-grid,
.pdpa-compliance-update-grid.filter-grid,
.pdpa-incident-form-grid.filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pdpa-check-row {
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-control);
  background: var(--surface-muted);
  font-weight: 700;
  color: var(--text-main);
}

.pdpa-check-row input {
  accent-color: var(--color-primary);
}

.pdpa-span-2 {
  grid-column: span 2;
}

.pdpa-span-full {
  grid-column: 1 / -1;
}

.pdpa-form-actions.form-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  margin: 0;
}

.pdpa-record-list.record-list {
  gap: var(--space-3);
}

.pdpa-inventory-card.record-card,
.pdpa-request-card.record-card,
.pdpa-compact-card.record-card,
.pdpa-legal-card.record-card,
.pdpa-incident-card.record-card {
  display: grid;
  gap: var(--space-3);
}

.pdpa-inventory-card .record-meta,
.pdpa-request-card .record-meta {
  flex-wrap: wrap;
}

.pdpa-inventory-card .record-detail-grid,
.pdpa-request-card .record-detail-grid,
.pdpa-context-grid.context-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pdpa-request-update.filter-panel {
  margin: 0;
  padding: var(--space-3);
}

.pdpa-request-update .filter-grid {
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) auto;
  align-items: end;
}

.pdpa-incident-update-grid.filter-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.pdpa-compliance-update-grid .form-field.is-wide,
.pdpa-incident-update-grid .form-field.is-wide {
  grid-column: span 2;
}

.pdpa-legal-list.record-list {
  gap: var(--space-3);
}

.pdpa-legal-card .record-title {
  max-width: 72ch;
}

.pdpa-page .context-value {
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .pdpa-hero.page-hero {
    grid-template-columns: 1fr;
  }

  .pdpa-overview-shell {
    grid-template-columns: 1fr;
  }

  .pdpa-quick-grid.action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdpa-metric-grid.metric-grid,
  .pdpa-inventory-form-grid.filter-grid,
  .pdpa-request-form-grid.filter-grid,
  .pdpa-policy-form-grid.filter-grid,
  .pdpa-retention-form-grid.filter-grid,
  .pdpa-compliance-update-grid.filter-grid,
  .pdpa-incident-form-grid.filter-grid,
  .pdpa-incident-update-grid.filter-grid,
  .pdpa-inventory-card .record-detail-grid,
  .pdpa-request-card .record-detail-grid,
  .pdpa-context-grid.context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdpa-request-update .filter-grid {
    grid-template-columns: 1fr;
  }

  .pdpa-compliance-update-grid .form-field.is-wide,
  .pdpa-incident-update-grid .form-field.is-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .pdpa-hero.page-hero,
  .pdpa-page .section-card,
  .pdpa-page .filter-panel,
  .pdpa-page .record-card {
    padding: var(--space-3);
  }

  .pdpa-metric-grid.metric-grid,
  .pdpa-quick-grid.action-grid,
  .pdpa-inventory-form-grid.filter-grid,
  .pdpa-request-form-grid.filter-grid,
  .pdpa-policy-form-grid.filter-grid,
  .pdpa-retention-form-grid.filter-grid,
  .pdpa-compliance-update-grid.filter-grid,
  .pdpa-incident-form-grid.filter-grid,
  .pdpa-incident-update-grid.filter-grid,
  .pdpa-inventory-card .record-detail-grid,
  .pdpa-request-card .record-detail-grid,
  .pdpa-context-grid.context-grid {
    grid-template-columns: 1fr;
  }

  .pdpa-span-2 {
    grid-column: 1;
  }

  .pdpa-hero-status-grid,
  .pdpa-command-stats {
    grid-template-columns: 1fr;
  }

  .pdpa-command-panel,
  .pdpa-quick-panel {
    padding: var(--space-3);
  }

  .pdpa-compliance-update-grid .form-field.is-wide,
  .pdpa-incident-update-grid .form-field.is-wide {
    grid-column: 1;
  }

  .pdpa-form-actions.form-actions,
  .pdpa-request-update .form-actions {
    justify-content: stretch;
  }

  .pdpa-form-actions .btn,
  .pdpa-request-update .btn {
    width: 100%;
    justify-content: center;
  }

  .pdpa-disclosure summary {
    align-items: flex-start;
    padding: var(--space-3);
  }

  .pdpa-disclosure .filter-panel {
    margin: 0 var(--space-2) var(--space-2);
  }
}












.attendance-btn-checkout { background: linear-gradient(180deg, #f38a8a 0%, #e86b6b 100%); border-color: #e86b6b; }
.attendance-quick-shell { display:grid; gap:12px; margin:14px 0; }
.attendance-flow-status.is-ready { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.attendance-flow-status.is-waiting { background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.attendance-flow-status.is-error { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.attendance-flow-shell { display:grid; gap:14px; margin:16px 0 14px; padding:18px; border:1px solid #d9e3ef; border-radius:22px; background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow:0 18px 40px rgba(15, 23, 42, 0.06); }
.attendance-flow-head { display:grid; gap:6px; padding-bottom:6px; border-bottom:1px solid #edf2f7; }
.attendance-flow-title { font-size:24px; font-weight:800; color:#0f172a; letter-spacing:-0.02em; }
.attendance-flow-subtitle { font-size:14px; color:#64748b; margin-top:0; line-height:1.6; max-width:680px; }
.attendance-flow-status { border:1px solid #dbe2ea; border-radius:16px; padding:12px 14px; min-height:48px; display:flex; align-items:center; font-size:14px; font-weight:700; background:#f8fafc; color:#334155; line-height:1.5; }
.attendance-remote-note { margin:0; padding:10px 12px; border-radius:12px; background:#eff6ff; border:1px solid #bfdbfe; color:#1e3a8a; }
.attendance-workmode-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:0; }
.attendance-workmode-option { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid #cbd5e1; border-radius:999px; background:#fff; }
.attendance-flow-main { display:grid; grid-template-columns:minmax(0, 1fr); gap:16px; align-items:stretch; }
.attendance-flow-mode, .attendance-flow-camera { border:1px solid #dbe5f0; border-radius:18px; background:#ffffff; padding:16px; display:grid; gap:10px; box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.85); }
.attendance-face-empty { color:#64748b; text-align:center; font-size:12px; }
.attendance-flow-label { font-size:15px; font-weight:800; color:#0f172a; }
.attendance-face-preview { width:100%; max-width:220px; aspect-ratio:4/5; object-fit:cover; border-radius:14px; background:#0f172a; }
.attendance-remote-note { margin:0; padding:12px 14px; border-radius:16px; background:linear-gradient(180deg, #f3f8ff 0%, #eef5ff 100%); border:1px solid #cfe0ff; color:#1e3a8a; line-height:1.6; }
.attendance-workmode-list { display:grid; grid-template-columns:1fr; gap:12px; margin-top:4px; align-items:stretch; }
.attendance-workmode-option { display:flex; align-items:center; justify-content:flex-start; gap:14px; width:100%; min-width:0; min-height:64px; padding:0 18px; border:1px solid #d9e3ef; border-radius:16px; background:#ffffff; box-shadow:0 4px 14px rgba(15, 23, 42, 0.04); font-size:15px; font-weight:700; color:#0f172a; white-space:nowrap; text-align:left; transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.attendance-flow-mode { gap:12px; padding:0; border:none; background:transparent; box-shadow:none; }
.attendance-workmode-option:hover { border-color:#bfd0e2; box-shadow:0 8px 18px rgba(15, 23, 42, 0.06); background:#fcfdff; }
.attendance-workmode-option input { accent-color:#2563eb; transform:scale(1.08); margin:0; flex:0 0 auto; }
.attendance-workmode-option:has(input:checked) { border-color:#2563eb; background:linear-gradient(180deg, #f3f8ff 0%, #e8f1ff 100%); box-shadow:0 10px 22px rgba(37, 99, 235, 0.12); }
.attendance-face-video-wrap { display:grid; gap:8px; }
.attendance-face-video { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px; background:#0f172a; }
.attendance-face-empty { color:#64748b; text-align:center; font-size:12px; }
.attendance-face-actions { display:flex; gap:8px; flex-wrap:wrap; }
.attendance-face-preview { width:100%; max-width:220px; aspect-ratio:4/5; object-fit:cover; border-radius:14px; background:#0f172a; }
.attendance-face-warning { margin-top:0; color:#b91c1c; font-size:13px; }
@media (max-width: 720px) { .attendance-flow-main { grid-template-columns:1fr; } .attendance-primary-actions { grid-template-columns:1fr; } .attendance-workmode-list { grid-template-columns:1fr; } }
.attendance-stat { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; padding: 10px; min-height: 88px; }
.attendance-stat-label { color: #64748b; font-size: 13px; }
.attendance-stat-value { margin-top: 4px; font-weight: 700; font-size: 18px; color: #0f172a; }
.attendance-stat-note { margin-top: 3px; color: #475569; font-size: 13px; }
.attendance-stat-link { margin-top: 4px; font-size: 12px; }
.attendance-duty-line { margin-top: 4px; font-size: 13px; color: #0f172a; }
.attendance-duty-line span { color: #64748b; margin-right: 6px; font-weight: 600; }
.attendance-remote-note { margin: 0; padding: 12px 14px; background:linear-gradient(180deg, #f3f8ff 0%, #eef5ff 100%); border:1px solid #cfe0ff; color:#1e3a8a; border-radius:16px; line-height:1.6; }
.attendance-remote-fields { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:12px; margin-bottom:14px; }
.attendance-remote-group { border:1px solid #dbe2ea; border-radius:12px; padding:12px; background:#f8fafc; display:grid; gap:10px; }
.attendance-remote-title { font-weight:700; color:#0f172a; }
.attendance-workmode-list { display:grid; grid-template-columns:1fr; gap:10px; margin-top:6px; }
.attendance-workmode-option { display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100%; min-height:56px; padding:0 16px; border:1px solid #d9e3ef; border-radius:14px; background:#ffffff; box-shadow:0 3px 10px rgba(15, 23, 42, 0.04); font-size:15px; font-weight:700; color:#0f172a; white-space:nowrap; text-align:left; transition:border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.attendance-flow-mode { gap:12px; padding:0; border:none; background:transparent; box-shadow:none; }
.attendance-workmode-option:hover { border-color:#bfd0e2; box-shadow:0 6px 14px rgba(15, 23, 42, 0.06); background:#fcfdff; }
.attendance-workmode-option input { accent-color:#2563eb; margin:0; flex:0 0 auto; }
.attendance-workmode-option:has(input:checked) { border-color:#2563eb; background:linear-gradient(180deg, #f3f8ff 0%, #eaf2ff 100%); box-shadow:0 8px 18px rgba(37, 99, 235, 0.10); }
.attendance-remote-help { font-size:12px; color:#64748b; }
.attendance-face-warning { padding:10px 12px; background:#fff7ed; border:1px solid #fdba74; color:#c2410c; border-radius:12px; }
.attendance-selfie-label { display:grid; gap:6px; font-size:13px; color:#0f172a; }
.attendance-late-box { margin-top: 12px; border-top: 1px solid #e2e8f0; padding-top: 10px; }
.attendance-late-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.attendance-late-progress { height: 10px; background: #f1f5f9; border-radius: 999px; overflow: hidden; margin-top: 6px; }
.attendance-late-progress-value { height: 100%; border-radius: 999px; }
.attendance-late-help { color: #64748b; font-size: 12px; margin-top: 4px; }
.attendance-table-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.attendance-table-title { font-weight: 700; color: #0f172a; }
.attendance-month-form {
    display: grid;
    grid-template-columns: auto minmax(180px, 220px) auto auto;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.attendance-month-form label {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.attendance-month-form input[type="month"] {
    width: 100%;
    min-width: 0;
}
.attendance-month-form button,
.attendance-month-form .attendance-today-filter-btn {
    min-width: 96px;
    white-space: nowrap;
}
.attendance-summary-list {
    display: grid;
    gap: 12px;
}
.attendance-summary-card {
    --attendance-card-border: #dbe2ea;
    --attendance-card-bg: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    --attendance-card-metric-bg: #f8fafc;
    --attendance-card-metric-border: #e2e8f0;
    --attendance-card-note-bg: #fcfdff;
    --attendance-card-accent: #2563eb;
    border: 1px solid var(--attendance-card-border);
    border-left: 5px solid var(--attendance-card-accent);
    border-radius: 18px;
    background: var(--attendance-card-bg);
    padding: 16px;
    display: grid;
    gap: 14px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    scroll-margin-top: 92px;
}
.attendance-summary-card:target {
    animation: attendance-target-pulse 1.25s ease;
}
@keyframes attendance-target-pulse {
    0% { transform: translateY(-4px); }
    45% { transform: translateY(0); }
    100% { transform: translateY(0); }
}
.attendance-summary-card-normal {
    --attendance-card-border: #d7e4fb;
    --attendance-card-bg: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    --attendance-card-metric-bg: #f7faff;
    --attendance-card-metric-border: #d7e4fb;
    --attendance-card-note-bg: #fcfdff;
    --attendance-card-accent: #3b82f6;
}
.attendance-summary-card-holiday {
    --attendance-card-border: #fecaca;
    --attendance-card-bg: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
    --attendance-card-metric-bg: #fffafa;
    --attendance-card-metric-border: #fecaca;
    --attendance-card-note-bg: #fffafa;
    --attendance-card-accent: #dc2626;
}
.attendance-summary-card-weekend {
    --attendance-card-border: #fecaca;
    --attendance-card-bg: linear-gradient(180deg, #fff7f7 0%, #ffffff 100%);
    --attendance-card-metric-bg: #fffafa;
    --attendance-card-metric-border: #fecaca;
    --attendance-card-note-bg: #fffdfd;
    --attendance-card-accent: #dc2626;
}
.attendance-summary-card-duty {
    --attendance-card-border: #f1dfab;
    --attendance-card-bg: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
    --attendance-card-metric-bg: #fffcf4;
    --attendance-card-metric-border: #f1dfab;
    --attendance-card-note-bg: #fffdf7;
    --attendance-card-accent: #e2b74a;
}
.attendance-summary-card-today {
    --attendance-card-border: #22c55e;
    --attendance-card-bg: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
    --attendance-card-metric-bg: #f7fef9;
    --attendance-card-metric-border: #bbf7d0;
    --attendance-card-note-bg: #fbfffc;
    --attendance-card-accent: #16a34a;
    border-width: 2px;
    border-left-width: 7px;
    box-shadow: 0 18px 34px rgba(22, 163, 74, 0.18), 0 0 0 3px rgba(34, 197, 94, 0.12);
}
.attendance-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-soft);
    background: var(--surface);
    border: 1px solid var(--border-soft);
}
.attendance-summary-icon-in { background: var(--surface); color: var(--text-soft); }
.attendance-summary-icon-out { background: var(--surface); color: var(--text-soft); }
.attendance-summary-icon-total { background: var(--surface); color: var(--text-soft); }
.attendance-summary-icon-late { background: var(--surface); color: var(--text-soft); }
.attendance-summary-note-grid {
    display: grid;
    gap: 8px;
}

.attendance-summary-note-empty {
    color: #94a3b8;
    font-size: 13px;
}
.attendance-summary-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 2px;
}
.attendance-summary-date {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.attendance-summary-card-today .attendance-summary-date {
    color: #14532d;
}
.attendance-summary-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.attendance-today-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 8px 16px rgba(22, 163, 74, 0.22);
}
.attendance-summary-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.attendance-summary-metric {
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    background: #ffffff;
    padding: 10px 10px;
    display: grid;
    gap: 6px;
    justify-items: center;
}
.attendance-summary-metric-small {
    background: #ffffff;
    border-color: #dbe2ea;
}
.attendance-summary-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.attendance-summary-note-card {
    border: 1px solid var(--attendance-card-metric-border);
    border-radius: 14px;
    background: var(--attendance-card-note-bg);
    padding: 14px 16px;
    display: grid;
    gap: 8px;
}
.attendance-date-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    font-weight: 700;
    line-height: 1.4;
}
.attendance-time-pill,
.attendance-total-pill,
.attendance-late-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    min-width: 88px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid #dbe2ea;
    background: #ffffff;
    color: #0f172a;
    font-weight: 700;
}
.attendance-total-pill {
    min-width: 116px;
}
.attendance-late-pill {
    min-width: 56px;
}
.attendance-late-pill-alert {
    border-color: #dbe2ea;
    background: #ffffff;
    color: #0f172a;
}
.attendance-duty-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid #dbeafe;
}
.attendance-duty-chip-muted {
    background: #eef2ff;
    color: #4338ca;
    border-color: #ddd6fe;
}
.attendance-holiday-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
}
.attendance-weekend-chip {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.attendance-note-stack {
    display: grid;
    gap: 8px;
}
.attendance-note-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.attendance-note-text {
    color: #0f172a;
    line-height: 1.5;
}
.attendance-meta-line {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 4px 0;
}
.attendance-meta-label {
    color: #64748b;
    font-weight: 700;
    font-size: 12px;
    padding-top: 2px;
}
.attendance-meta-value {
    color: #334155;
    line-height: 1.55;
    font-size: 13px;
    min-width: 0;
}
.attendance-meta-line-attachment {
    align-items: center;
}
.attendance-meta-line-attachment .attendance-meta-value {
    display: flex;
    align-items: center;
}
.attendance-meta-line-action .attendance-meta-value {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.attendance-location-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid #c7d2fe;
    background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
    color: #1d4ed8 !important;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.attendance-location-btn:hover,
.attendance-location-btn:focus {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
    color: #1e40af !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}
.attendance-location-btn::before {
    content: "📍";
    font-size: 12px;
    line-height: 1;
}
.attendance-meta-value > span {
    min-width: 0;
}
.attendance-attachment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.14);
    width: auto;
}
.attendance-attachment-btn:hover {
    background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%);
    color: #fff;
}
.attendance-flow-shell {
    gap: 18px;
    margin: 16px 0 14px;
    padding: 22px;
    border: 1px solid #d9e3ef;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}
.attendance-flow-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.attendance-flow-mode,
.attendance-flow-camera {
    border: 1px solid #dbe5f0;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    padding: 18px;
    display: grid;
    gap: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.attendance-flow-mode {
    gap: 14px;
}
.attendance-flow-label {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}
.attendance-flow-mode-help,
.attendance-flow-hint {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
}
.attendance-workmode-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 2px;
}
.attendance-workmode-option {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid #d9e3ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    font-size: 15px;
    color: #0f172a;
    text-align: left;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}
.attendance-workmode-option:hover {
    border-color: #bfd0e2;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}
.attendance-workmode-option input {
    accent-color: #2563eb;
    margin: 4px 0 0;
}
.attendance-workmode-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.attendance-workmode-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.attendance-workmode-title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.4;
}
.attendance-workmode-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.attendance-workmode-description {
    font-size: 12px;
    color: #64748b;
    line-height: 1.6;
}
.attendance-workmode-option:has(input:checked) {
    border-color: #2563eb;
    background: linear-gradient(180deg, #f4f8ff 0%, #eaf2ff 100%);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14);
}
.attendance-workmode-option:has(input:checked) .attendance-workmode-code {
    background: #2563eb;
    color: #ffffff;
}
.attendance-face-warning {
    padding: 12px 14px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #c2410c;
    border-radius: 14px;
    line-height: 1.6;
}
.attendance-scan-status {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #dbe5f0;
    background: linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
}
.attendance-scan-status-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.attendance-scan-status-dot {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
    flex: 0 0 auto;
}
.attendance-scan-status-label {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}
.attendance-scan-status-detail {
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
}
.attendance-scan-status.is-detecting {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffbeb 0%, #fff7ed 100%);
}
.attendance-scan-status.is-detecting .attendance-scan-status-dot {
    background: #f59e0b;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18);
}
.attendance-scan-status.is-success {
    border-color: var(--color-success-border);
    background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
}
.attendance-scan-status.is-success .attendance-scan-status-dot {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16);
}
.attendance-scan-status.is-error {
    border-color: var(--color-danger-border);
    background: linear-gradient(180deg, #fef2f2 0%, #fff1f2 100%);
}
.attendance-scan-status.is-error .attendance-scan-status-dot {
    background: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14);
}
.attendance-face-score-card {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #dbe5f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.attendance-face-score-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: .02em;
}
.attendance-face-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.attendance-face-score-value {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}
.attendance-face-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #dbe5f0;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}
.attendance-face-score-card.is-success {
    border-color: var(--color-success-border);
    background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
}
.attendance-face-score-card.is-success .attendance-face-score-value {
    color: #15803d;
}
.attendance-face-score-card.is-success .attendance-face-score-badge {
    border-color: var(--color-success-border);
    background: #dcfce7;
    color: #166534;
}
.attendance-face-score-card.is-error {
    border-color: var(--color-danger-border);
    background: linear-gradient(180deg, #fef2f2 0%, #fff1f2 100%);
}
.attendance-face-score-card.is-error .attendance-face-score-value {
    color: #b91c1c;
}
.attendance-face-score-card.is-error .attendance-face-score-badge {
    border-color: var(--color-danger-border);
    background: #fee2e2;
    color: #b91c1c;
}
.attendance-face-video-wrap {
    display: grid;
    gap: 10px;
}
.attendance-face-video {
    width: 100%;
    min-height: 280px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 18px;
    background: #0f172a;
}
.attendance-face-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.attendance-normal-layout.attendance-action-surface {
    margin-top: 4px;
    padding-top: 8px;
}
@media (max-width: 720px) {
    .attendance-flow-shell {
        padding: 18px;
        border-radius: 20px;
    }
    .attendance-flow-title {
        font-size: 22px;
    }
    .attendance-workmode-option {
        padding: 15px 16px;
    }
    .attendance-workmode-title-row {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .attendance-face-video {
        min-height: 220px;
    }
}
@media (max-width: 640px) {
    .attendance-flow-shell,
    .attendance-flow-mode,
    .attendance-flow-camera {
        min-width: 0;
        width: 100%;
    }
    .attendance-workmode-list {
        gap: 10px;
    }
    .attendance-workmode-option {
        grid-template-columns: 18px minmax(0, 1fr) !important;
        align-items: start !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 14px 14px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        overflow: hidden;
    }
    .attendance-workmode-option input {
        margin-top: 3px;
    }
    .attendance-workmode-body {
        min-width: 0 !important;
        width: 100%;
    }
    .attendance-workmode-title-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
        min-width: 0 !important;
        width: 100%;
    }
    .attendance-workmode-title,
    .attendance-workmode-description {
        min-width: 0;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .attendance-workmode-title {
        font-size: 14px;
        line-height: 1.45;
    }
    .attendance-workmode-description {
        font-size: 11px;
        line-height: 1.55;
    }
    .attendance-workmode-code {
        justify-self: start;
        white-space: nowrap !important;
        max-width: 100%;
    }
}
@media (max-width: 640px) {
    .attendance-table-head {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start;
        gap: 10px;
    }
    .attendance-table-title {
        min-width: 0;
        font-size: 18px;
        line-height: 1.35;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
    .attendance-month-form {
        grid-template-columns: 1fr auto !important;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin-left: 0;
    }
    .attendance-month-form label {
        grid-column: 1 / -1;
        white-space: normal !important;
    }
    .attendance-month-form input[type="month"] {
        min-width: 0;
        width: 100%;
    }
    .attendance-month-form button,
    .attendance-month-form .attendance-today-filter-btn {
        min-width: 84px;
    }
}
@media (max-width: 640px) {
    .attendance-summary-card {
        padding: 14px;
        gap: 12px;
        border-radius: 16px;
    }
    .attendance-summary-card-head {
        align-items: flex-start;
        gap: 10px;
    }
    .attendance-summary-date {
        font-size: 16px;
        line-height: 1.35;
    }
    .attendance-summary-badges {
        gap: 6px;
    }
    .attendance-duty-chip,
    .attendance-holiday-chip {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        line-height: 1.35;
    }
    .attendance-summary-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px;
    }
    .attendance-summary-metric {
        min-width: 0;
        padding: 10px 8px;
        gap: 6px;
    }
    .attendance-summary-label {
        width: 100%;
        min-width: 0;
        justify-content: center;
        text-align: center;
        line-height: 1.4;
        flex-wrap: wrap;
        white-space: normal;
    }
    .attendance-time-pill,
    .attendance-total-pill,
    .attendance-late-pill {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .attendance-summary-note-card {
        padding: 10px;
    }
    .attendance-meta-line {
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 5px 0;
    }
    .attendance-meta-label {
        padding-top: 1px;
        font-size: 11px;
    }
    .attendance-meta-value {
        color: #334155;
        line-height: 1.55;
        font-size: 12px;
        min-width: 0;
        word-break: break-word;
    }
}

.attendance-page-title { display: none; }

  .attendance-card {
      margin-bottom: 18px;
      border-radius: 24px;
      border-color: #d9e5f2;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
  }
  .attendance-top-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      align-items: start;
      margin-bottom: 0;
  }
  .attendance-head-card {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
      gap: 18px;
      padding: 22px 22px 20px;
      border: 0;
      border-radius: 24px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
  }
  .attendance-head {
      gap: 8px;
      align-self: start;
  }
  .attendance-head-title {
      font-size: 28px;
      line-height: 1.05;
      color: #0f172a;
      letter-spacing: -0.04em;
  }
  .attendance-head-subtitle {
      color: #64748b;
      font-size: 13px;
      line-height: 1.7;
      max-width: 100%;
  }
  .attendance-head-stats {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      align-self: end;
  }
  .attendance-head-chip {
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid #dbe5f0;
      background: #ffffff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .attendance-head-chip-accent { background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%); border-color: #d6e6ff; }
  .attendance-head-chip strong { font-size: 15px; color: #0f172a; line-height: 1.3; }
  .attendance-head-chip-label {
      font-size: 12px;
      color: #64748b;
      line-height: 1.4;
  }
  .attendance-head-chip-value {
      font-size: 20px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.15;
  }
  .attendance-head-chip-note {
      font-size: 12px;
      color: #64748b;
      line-height: 1.5;
  }

  .attendance-form-normal {
      padding: 20px;
      border-radius: 24px;
      border: 1px solid #dce8f4;
      background: #ffffff;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
  }
  .attendance-flow-shell {
      display: grid;
      gap: 16px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
  }
  .attendance-flow-main {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      align-items: start;
  }
  .attendance-flow-mode,
  .attendance-flow-camera {
      padding: 18px;
      border-radius: 20px;
      border: 1px solid #e5edf6;
      background: #ffffff;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  }
  .attendance-flow-label {
      font-size: 14px;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: #475569;
  }
  .attendance-flow-mode-help,
  .attendance-flow-hint {
      font-size: 12px;
      color: #7b8ba0;
  }
  .attendance-workmode-list { gap: 10px; }
  .attendance-workmode-option {
      border-radius: 18px;
      border: 1px solid #dde7f2;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
      box-shadow: none;
  }
  .attendance-workmode-option:hover {
      transform: none;
      border-color: #c7d5e6;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
  }
  .attendance-workmode-option.is-selected {
      border-color: #2563eb;
      background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
      box-shadow: 0 12px 24px rgba(37, 99, 235, 0.10);
  }
  .attendance-mode-badge {
      border-radius: 999px;
      background: #e8f0ff;
      color: #315efb;
      font-weight: 800;
  }

  .attendance-face-video-shell {
      border-radius: 22px;
      background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
      border: 1px solid #d9e5f1;
      padding: 14px;
      display: grid;
      justify-items: center;
      gap: 12px;
  }
  .attendance-face-video {
      width: 100%;
      max-width: 320px;
      border-radius: 20px;
      min-height: 300px;
      object-fit: cover;
      background: #0f172a;
      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
  }
  .attendance-face-score {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 18px;
      background: #ffffff;
      border: 1px solid #dfe8f3;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
  }
  .attendance-face-score-label {
      font-size: 13px;
      color: #64748b;
  }
  .attendance-face-score-value {
      font-size: 30px;
      font-weight: 900;
      color: #0f172a;
      line-height: 1;
  }
  .attendance-face-score-chip {
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid #dbe3ef;
      background: #f8fafc;
      color: #475569;
      font-weight: 700;
      font-size: 12px;
  }

  .attendance-normal-layout.attendance-action-surface {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: stretch;
      margin-top: 2px;
  }
  .attendance-action-block {
      display: grid;
      gap: 10px;
      min-width: 0;
  }
  .attendance-action-label {
      font-size: 13px;
      font-weight: 800;
      color: #475569;
      text-transform: uppercase;
      letter-spacing: 0.04em;
  }
  .attendance-primary-actions {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
  }
  .attendance-primary-actions .btn {
      width: 100%;
      min-height: 56px;
      border-radius: 18px;
      font-size: 18px;
      letter-spacing: -0.02em;
      box-shadow: 0 16px 30px rgba(15, 23, 42, 0.09);
      border: none;
  }
  .attendance-duty-link-btn {
      width: 100%;
      min-width: 0;
      min-height: 48px;
      border-radius: 16px;
      text-align: center;
      border: 1px solid #d6e0eb;
      background: #f8fafc;
      color: #0f172a;
      font-weight: 700;
  }
  .attendance-action-divider { display: none; }

  .attendance-late-box {
      margin-top: 14px;
      padding: 14px 16px;
      border: 1px solid #e3edf7;
      border-radius: 20px;
      background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  }
  .attendance-late-head { font-size: 14px; }
  .attendance-late-help {
      font-size: 11px;
      color: #7b8ba0;
  }

  .attendance-summary-card {
      padding: 18px 20px;
      border-radius: 24px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid #dce8f4;
      box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
  }
  .attendance-summary-card-today {
      background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
      border: 2px solid #22c55e;
      border-left: 7px solid #16a34a;
      box-shadow: 0 18px 34px rgba(22, 163, 74, 0.18), 0 0 0 3px rgba(34, 197, 94, 0.12);
  }
  .attendance-table-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      margin-bottom: 16px;
  }
  .attendance-table-title {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #0f172a;
  }
  .attendance-table-controls {
      display: flex;
      justify-content: flex-end;
  }
  .attendance-summary-list { gap: 14px; }
  .attendance-summary-item {
      padding: 16px 18px;
      border-radius: 22px;
      border: 1px solid #dfebf6;
      background: #ffffff;
      box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
  }
  .attendance-summary-item-header { margin-bottom: 12px; }
  .attendance-summary-item-date {
      font-size: 17px;
      font-weight: 800;
  }
  .attendance-summary-item-badge { border-radius: 999px; }

  @media (max-width: 1100px) {
      .attendance-head-card { grid-template-columns: 1fr; }
      .attendance-head-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 720px) {
      .attendance-head-card,
      .attendance-form-normal,
      .attendance-late-box,
      .attendance-summary-card { padding: 16px; }
      .attendance-head-title { font-size: 24px; }
      .attendance-head-card,
      .attendance-head-stats,
      .attendance-primary-actions,
      .attendance-table-head { grid-template-columns: 1fr; }
      .attendance-face-video { min-height: 260px; }
      .attendance-table-controls { justify-content: flex-start; }
  }

.attendance-card,
.attendance-head-card,
.attendance-form-normal,
.attendance-flow-mode,
.attendance-flow-camera,
.attendance-late-box,
.attendance-summary-card {
    box-sizing: border-box;
    min-width: 0;
}
.attendance-card {
    padding: 20px;
    border: 1px solid #d8e4f0;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}
.attendance-top-grid {
    gap: 16px;
}
.attendance-head-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid #dbe7f3;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #eef8f6 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}
.attendance-head-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: #0f766e;
}
.attendance-head-title {
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: 0;
    color: #06152f;
}
.attendance-head-subtitle {
    color: #5b6f88;
}
.attendance-head-chip {
    min-height: 86px;
    border-radius: 18px;
    border-color: #d8e4f0;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}
.attendance-head-chip-label {
    color: #64748b;
}
.attendance-head-chip strong {
    font-size: 22px;
    color: #06152f;
}
.attendance-form-normal {
    padding: 22px;
    border: 1px solid #d8e4f0;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}
.attendance-form-title {
    font-size: 20px;
    font-weight: 800;
    color: #06152f;
}
.attendance-form-help {
    line-height: 1.7;
}
.attendance-absent-cutoff-notice,
.attendance-leave-lock-notice,
.attendance-holiday-notice,
.attendance-remote-note,
.attendance-flow-status {
    border-radius: 16px;
}
.attendance-flow-shell {
    margin: 18px 0 16px;
}
.attendance-flow-head {
    padding-bottom: 14px;
    border-bottom: 1px solid #e6edf5;
}
.attendance-flow-title {
    font-size: 22px;
    letter-spacing: 0;
}
.attendance-flow-main {
    gap: 14px;
}
.attendance-flow-mode,
.attendance-flow-camera {
    border-color: #d8e4f0;
    border-radius: 18px;
    background: #fbfdff;
    box-shadow: none;
}
.attendance-workmode-option {
    min-height: 68px;
    border-radius: 16px;
    border-color: #d8e4f0;
}
.attendance-workmode-option:has(input:checked) {
    border-color: #0f766e;
    background: linear-gradient(180deg, #eefbf8 0%, #ffffff 100%);
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.10);
}
.attendance-workmode-code {
    border-radius: 999px;
    background: #eef2ff;
    color: #1d4ed8;
}
.attendance-primary-actions .btn,
.attendance-duty-link-btn,
.attendance-month-form button,
.attendance-month-form .attendance-today-filter-btn {
    border-radius: 999px;
    font-weight: 800;
}
.attendance-primary-actions .btn {
    min-height: 58px;
}
.attendance-duty-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.attendance-late-box {
    border-color: #d8e4f0;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}
.attendance-late-progress {
    height: 9px;
}
.attendance-table-head {
    padding-bottom: 14px;
    border-bottom: 1px solid #e6edf5;
}
.attendance-table-title {
    font-size: 22px;
    color: #06152f;
}
.attendance-month-form input[type="month"] {
    height: 44px;
    border: 1px solid #cfdceb;
    border-radius: 14px;
    padding: 0 12px;
}
.attendance-summary-list {
    gap: 14px;
}
.attendance-summary-card {
    border-radius: 20px;
    border-color: var(--attendance-card-border);
    background: var(--attendance-card-bg);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}
.attendance-summary-card-today {
    box-shadow: 0 18px 34px rgba(22, 163, 74, 0.16), 0 0 0 3px rgba(34, 197, 94, 0.10);
}
.attendance-summary-metric,
.attendance-summary-note-card {
    border-color: var(--attendance-card-metric-border);
    border-radius: 16px;
    background: var(--attendance-card-metric-bg);
}
.attendance-summary-note-card {
    background: var(--attendance-card-note-bg);
}
.attendance-time-pill,
.attendance-total-pill,
.attendance-late-pill,
.attendance-duty-chip,
.attendance-holiday-chip,
.attendance-today-chip {
    border-radius: 999px;
}
.attendance-face-video,
.attendance-face-preview {
    border-radius: 18px;
}

.attendance-top-grid {
    grid-template-columns: 1fr !important;
}
.attendance-head-card {
    position: relative !important;
    top: auto !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
}
.attendance-head-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 860px) {
    .attendance-card,
    .attendance-head-card,
    .attendance-form-normal {
        padding: 16px;
        border-radius: 18px;
    }
    .attendance-head-stats,
    .attendance-summary-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .attendance-table-head,
    .attendance-month-form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .attendance-month-form {
        margin-left: 0;
    }
    .attendance-month-form button,
    .attendance-month-form .attendance-today-filter-btn,
    .attendance-month-form input[type="month"] {
        width: 100%;
    }
}
@media (max-width: 980px) {
    .attendance-head-card {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .attendance-card {
        padding: 14px;
    }
    .attendance-head-stats,
    .attendance-summary-metrics,
    .attendance-primary-actions {
        grid-template-columns: 1fr;
    }
    .attendance-head-chip {
        min-height: auto;
    }
    .attendance-form-title,
    .attendance-flow-title,
    .attendance-table-title {
        font-size: 19px;
    }
    .attendance-flow-mode,
    .attendance-flow-camera,
    .attendance-summary-card {
        padding: 14px;
        border-radius: 16px;
    }
    .attendance-summary-card-head {
        align-items: flex-start;
    }
    .attendance-meta-line {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

.attendance-status-text.is-status-green {
    color: #16a34a;
}
.attendance-status-text.is-status-yellow {
    color: #f59e0b;
}
.attendance-status-text.is-status-red {
    color: #dc2626;
}
.attendance-status-text.is-status-neutral {
    color: #6b7280;
}
.attendance-late-progress-value.is-status-green {
    background: #16a34a;
}
.attendance-late-progress-value.is-status-yellow {
    background: #f59e0b;
}
.attendance-late-progress-value.is-status-red {
    background: #dc2626;
}
.attendance-late-progress-value.is-status-neutral {
    background: #6b7280;
}
.attendance-progress-width-0 { width: 0%; }
.attendance-progress-width-1 { width: 1%; }
.attendance-progress-width-2 { width: 2%; }
.attendance-progress-width-3 { width: 3%; }
.attendance-progress-width-4 { width: 4%; }
.attendance-progress-width-5 { width: 5%; }
.attendance-progress-width-6 { width: 6%; }
.attendance-progress-width-7 { width: 7%; }
.attendance-progress-width-8 { width: 8%; }
.attendance-progress-width-9 { width: 9%; }
.attendance-progress-width-10 { width: 10%; }
.attendance-progress-width-11 { width: 11%; }
.attendance-progress-width-12 { width: 12%; }
.attendance-progress-width-13 { width: 13%; }
.attendance-progress-width-14 { width: 14%; }
.attendance-progress-width-15 { width: 15%; }
.attendance-progress-width-16 { width: 16%; }
.attendance-progress-width-17 { width: 17%; }
.attendance-progress-width-18 { width: 18%; }
.attendance-progress-width-19 { width: 19%; }
.attendance-progress-width-20 { width: 20%; }
.attendance-progress-width-21 { width: 21%; }
.attendance-progress-width-22 { width: 22%; }
.attendance-progress-width-23 { width: 23%; }
.attendance-progress-width-24 { width: 24%; }
.attendance-progress-width-25 { width: 25%; }
.attendance-progress-width-26 { width: 26%; }
.attendance-progress-width-27 { width: 27%; }
.attendance-progress-width-28 { width: 28%; }
.attendance-progress-width-29 { width: 29%; }
.attendance-progress-width-30 { width: 30%; }
.attendance-progress-width-31 { width: 31%; }
.attendance-progress-width-32 { width: 32%; }
.attendance-progress-width-33 { width: 33%; }
.attendance-progress-width-34 { width: 34%; }
.attendance-progress-width-35 { width: 35%; }
.attendance-progress-width-36 { width: 36%; }
.attendance-progress-width-37 { width: 37%; }
.attendance-progress-width-38 { width: 38%; }
.attendance-progress-width-39 { width: 39%; }
.attendance-progress-width-40 { width: 40%; }
.attendance-progress-width-41 { width: 41%; }
.attendance-progress-width-42 { width: 42%; }
.attendance-progress-width-43 { width: 43%; }
.attendance-progress-width-44 { width: 44%; }
.attendance-progress-width-45 { width: 45%; }
.attendance-progress-width-46 { width: 46%; }
.attendance-progress-width-47 { width: 47%; }
.attendance-progress-width-48 { width: 48%; }
.attendance-progress-width-49 { width: 49%; }
.attendance-progress-width-50 { width: 50%; }
.attendance-progress-width-51 { width: 51%; }
.attendance-progress-width-52 { width: 52%; }
.attendance-progress-width-53 { width: 53%; }
.attendance-progress-width-54 { width: 54%; }
.attendance-progress-width-55 { width: 55%; }
.attendance-progress-width-56 { width: 56%; }
.attendance-progress-width-57 { width: 57%; }
.attendance-progress-width-58 { width: 58%; }
.attendance-progress-width-59 { width: 59%; }
.attendance-progress-width-60 { width: 60%; }
.attendance-progress-width-61 { width: 61%; }
.attendance-progress-width-62 { width: 62%; }
.attendance-progress-width-63 { width: 63%; }
.attendance-progress-width-64 { width: 64%; }
.attendance-progress-width-65 { width: 65%; }
.attendance-progress-width-66 { width: 66%; }
.attendance-progress-width-67 { width: 67%; }
.attendance-progress-width-68 { width: 68%; }
.attendance-progress-width-69 { width: 69%; }
.attendance-progress-width-70 { width: 70%; }
.attendance-progress-width-71 { width: 71%; }
.attendance-progress-width-72 { width: 72%; }
.attendance-progress-width-73 { width: 73%; }
.attendance-progress-width-74 { width: 74%; }
.attendance-progress-width-75 { width: 75%; }
.attendance-progress-width-76 { width: 76%; }
.attendance-progress-width-77 { width: 77%; }
.attendance-progress-width-78 { width: 78%; }
.attendance-progress-width-79 { width: 79%; }
.attendance-progress-width-80 { width: 80%; }
.attendance-progress-width-81 { width: 81%; }
.attendance-progress-width-82 { width: 82%; }
.attendance-progress-width-83 { width: 83%; }
.attendance-progress-width-84 { width: 84%; }
.attendance-progress-width-85 { width: 85%; }
.attendance-progress-width-86 { width: 86%; }
.attendance-progress-width-87 { width: 87%; }
.attendance-progress-width-88 { width: 88%; }
.attendance-progress-width-89 { width: 89%; }
.attendance-progress-width-90 { width: 90%; }
.attendance-progress-width-91 { width: 91%; }
.attendance-progress-width-92 { width: 92%; }
.attendance-progress-width-93 { width: 93%; }
.attendance-progress-width-94 { width: 94%; }
.attendance-progress-width-95 { width: 95%; }
.attendance-progress-width-96 { width: 96%; }
.attendance-progress-width-97 { width: 97%; }
.attendance-progress-width-98 { width: 98%; }
.attendance-progress-width-99 { width: 99%; }
.attendance-progress-width-100 { width: 100%; }



/* Attendance workline calendar components. Centralized from app/Modules/Attendance/Views/workline_calendar.php. */

.workline-calendar-page .duty-calendar-card {
    border-radius: 14px;
    border: 1px solid #dbe2ea;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}
.workline-calendar-page .duty-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
}
.workline-calendar-page .duty-page-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.workline-calendar-page .duty-filter-grid label {
    display: block;
    margin-bottom: 4px;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}
.workline-calendar-page .duty-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    grid-column: 1 / -1;
}
.workline-calendar-page .duty-summary-line {
    margin-bottom: 0;
    color: #334155;
    font-weight: 600;
}
.workline-calendar-page .duty-calendar-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.workline-calendar-page .duty-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    gap: 8px;
}
.workline-calendar-page .cal-weekday {
    text-align: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px;
    font-weight: 700;
    color: #334155;
}
.workline-calendar-page .cal-day {
    min-height: 120px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    padding: 6px;
}
.workline-calendar-page .cal-day-holiday {
    background: linear-gradient(180deg, #fff7f7 0%, #fff 100%);
    border-color: var(--color-danger-border);
}
.workline-calendar-page .cal-empty { background: transparent; border-style: dashed; min-height: 120px; }
.workline-calendar-page .cal-day-no {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}
.workline-calendar-page .cal-no-event {
    color: #94a3b8;
    text-align: center;
    margin-top: 24px;
}
.workline-calendar-page .cal-holiday {
    display: grid;
    gap: 3px;
    margin-bottom: 6px;
    padding: 4px 6px;
    border: 1px solid #fecaca;
    background: #fff1f2;
    border-radius: 8px;
}
.workline-calendar-page .cal-holiday-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}
.workline-calendar-page .cal-holiday-name {
    font-size: 11px;
    line-height: 1.35;
    color: #991b1b;
    font-weight: 600;
}
.workline-calendar-page .cal-event-line {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px;
    font-size: 11px;
    border: 1px solid #dbeafe;
    background: #eff6ff;
    color: #1e3a8a;
    border-radius: 8px;
    padding: 2px 6px;
    margin-bottom: 4px;
}
.workline-calendar-page .cal-event-type { font-weight: 700; }
.workline-calendar-page .cal-event-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.workline-calendar-page .cal-more {
    font-size: 11px;
    color: #475569;
    margin-top: 2px;
}
.workline-calendar-page .duty-table th,
.workline-calendar-page .duty-table td { text-align: center; vertical-align: top; }
.workline-calendar-page .duty-table td:nth-child(5),
.workline-calendar-page .duty-table td:nth-child(6),
.workline-calendar-page .duty-table td:nth-child(7) { text-align: left; }
.workline-calendar-page .duty-type-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
    font-size: 12px;
}
.workline-calendar-page .duty-type-holiday {
    background: #fff1f2;
    color: #b91c1c;
}
.workline-calendar-page .holiday-row td {
    background: #fff8f8;
}
.workline-calendar-page .duty-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, .35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.workline-calendar-page .duty-modal-card {
    width: min(560px, 94vw);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-radius: 14px;
    border: 1px solid #dbe2ea;
    padding: 14px;
}
.workline-calendar-page .duty-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.workline-calendar-page .duty-modal-title { font-size: 18px; font-weight: 700; color: #0f172a; }
.workline-calendar-page .duty-modal-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.workline-calendar-page .duty-modal-form { display: grid; gap: 10px; }
.workline-calendar-page .duty-modal-form label { display: grid; gap: 4px; color: #334155; font-weight: 600; font-size: 13px; }
.workline-calendar-page .duty-modal-date-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.workline-calendar-page .duty-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
@media (max-width: 1100px) {
.workline-calendar-page .duty-calendar-grid {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
    }
}
@media (max-width: 760px) {
.workline-calendar-page .duty-calendar-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
.workline-calendar-page .duty-modal-date-grid {
        grid-template-columns: 1fr;
    }
}
.workline-calendar-page .duty-calendar-card-offset-sm {
    margin-top: 10px;
}
.workline-calendar-page .duty-calendar-card-offset-md {
    margin-top: 12px;
}
.workline-calendar-page .duty-table-scroll {
    overflow: auto;
}
.workline-calendar-page .duty-table-empty {
    text-align: center;
    color: #64748b;
}



/* Leave approval history components. Centralized from app/Modules/Leave/Views/approval_history.php. */
.leave-approval-history .lah-modal-title {
    margin: 0;
}
.leave-approval-history .lah-modal-field-full {
    grid-column: 1 / -1;
}
.leave-approval-history .lah-modal-prewrap {
    white-space: pre-wrap;
}
.leave-approval-history .lah-report {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    min-width: 0;
}
.leave-approval-history .lah-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}
.leave-approval-history .lah-report-head h2,
.leave-approval-history .lah-report-group h3 {
    margin: 0;
    color: var(--text-strong);
}
.leave-approval-history .lah-report-head p {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    line-height: 1.65;
}
.leave-approval-history .lah-report-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}
.leave-approval-history .lah-report-meta span,
.leave-approval-history .lah-report-group-stats {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    padding: var(--space-3);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}
.leave-approval-history .lah-report-groups {
    display: grid;
    gap: var(--space-3);
}
.leave-approval-history .lah-report-group {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    min-width: 0;
}
.leave-approval-history .lah-report-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.leave-approval-history .lah-report-group-head span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}
.leave-approval-history .lah-report-group-stats {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: var(--space-1) var(--space-2);
    align-items: baseline;
}
.leave-approval-history .lah-report-group-stats strong {
    color: var(--text-strong);
    font-size: 20px;
    line-height: 1;
}
.leave-approval-history .lah-report-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
}
.leave-approval-history .lah-report-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 13px;
}
.leave-approval-history .lah-report-table th,
.leave-approval-history .lah-report-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    vertical-align: top;
    color: var(--text-strong);
}
.leave-approval-history .lah-report-table th {
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}
.leave-approval-history .lah-report-table tbody tr:last-child td {
    border-bottom: 0;
}
@media (max-width: 1200px) {
    .leave-approval-history .lah-report-meta {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .leave-approval-history .lah-report {
        padding: var(--space-4);
    }
    .leave-approval-history .lah-report-head,
    .leave-approval-history .lah-report-group-head {
        flex-direction: column;
        align-items: stretch;
    }
    .leave-approval-history .lah-report-group-stats {
        grid-template-columns: auto minmax(0, 1fr);
    }
}
@media print {
    body {
        background: #ffffff !important;
    }
    .no-print,
    .leave-approval-history.is-report .lah-hero,
    .leave-approval-history.is-report .lah-filter-card,
    .leave-approval-history.is-report .lah-result-head,
    .leave-approval-history.is-report .lah-list,
    .leave-approval-history.is-report .lah-modal {
        display: none !important;
    }
    .leave-approval-history.is-report,
    .leave-approval-history.is-report .lah-report {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #ffffff;
    }
    .leave-approval-history .lah-report-head,
    .leave-approval-history .lah-report-group-head {
        break-inside: avoid;
    }
    .leave-approval-history .lah-report-meta,
    .leave-approval-history .lah-report-groups {
        display: grid;
        gap: var(--space-2);
    }
    .leave-approval-history .lah-report-group {
        break-inside: avoid;
        margin-top: var(--space-3);
        padding: var(--space-2) 0 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        box-shadow: none;
    }
    .leave-approval-history .lah-report-table-wrap {
        overflow: visible;
        border-radius: 0;
    }
    .leave-approval-history .lah-report-table {
        min-width: 0;
        font-size: 10.5px;
    }
    .leave-approval-history .lah-report-table th,
    .leave-approval-history .lah-report-table td {
        padding: 6px;
    }
}


.leave-approval-history {
  gap: var(--space-4);
}

.leave-approval-history .lah-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-color: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.leave-approval-history .lah-hero-copy.page-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.leave-approval-history .lah-hero-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.leave-approval-history .lah-hero-icon.page-hero-icon {
  margin: 0;
}

.leave-approval-history .page-hero-aside {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  box-shadow: none;
}

.leave-approval-history .page-hero-aside .metric-value {
  font-size: 17px;
  line-height: 1.45;
  white-space: normal;
}

.leave-approval-history .lah-stats.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.leave-approval-history #leaveApprovalHistoryWorklineFilters .lah-stats.metric-grid {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.leave-approval-history .lah-stat.metric-card {
  min-height: 128px;
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.leave-approval-history .lah-stat.metric-card:hover,
.leave-approval-history .lah-stat.metric-card:focus-visible {
  border-color: var(--color-primary-border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.leave-approval-history .lah-stat.metric-card.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--accent-ghost), var(--shadow-card);
}

.leave-approval-history .lah-stat .metric-head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.leave-approval-history .lah-stat .metric-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  font-size: 16px;
}

.leave-approval-history .lah-stat .metric-value {
  color: var(--text-strong);
  font-size: 30px;
  line-height: 1;
}

.leave-approval-history .lah-stat .metric-sub {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.leave-approval-history .section-card,
.leave-approval-history .lah-filter-card.section-card,
.leave-approval-history .lah-export-card.section-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.leave-approval-history .section-head,
.leave-approval-history .lah-filter-head.section-head,
.leave-approval-history .lah-result-head.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  background: transparent;
}

.leave-approval-history .lah-workline-filter-grid.leave-approve-workline-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-3);
}

.leave-approval-history .leave-approve-workline-filter-card.action-card {
  min-height: 0;
  gap: var(--space-2);
  padding: var(--space-3);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
  transform: none;
}

.leave-approval-history .leave-approve-workline-filter-card.action-card:hover,
.leave-approval-history .leave-approve-workline-filter-card.action-card:focus-visible {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-sm);
  transform: none;
}

.leave-approval-history .leave-approve-workline-filter-card.action-card.is-active {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary), 0 0 0 3px var(--accent-ghost);
  transform: none;
}

.leave-approval-history .leave-approve-workline-filter-card .action-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.leave-approval-history .leave-approve-workline-filter-card .action-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  font-size: 14px;
}

.leave-approval-history .leave-approve-filter-latest,
.leave-approval-history .leave-approve-workline-filter-card .action-sub {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.leave-approval-history .lah-filter-card.section-card {
  padding: var(--space-4);
}

.leave-approval-history .lah-filter-head-actions {
  align-items: center;
}

.leave-approval-history .lah-filter-head .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  min-width: 132px;
  border-radius: var(--btn-radius);
  box-shadow: none;
}

.leave-approval-history .filter-grid {
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(145px, 1fr));
  gap: var(--space-3);
}

.leave-approval-history .lah-simple-filter-grid {
  grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(150px, 1fr));
  align-items: end;
}

.leave-approval-history .lah-simple-filter-grid.filter-panel {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.leave-approval-history .filter-grid .form-field,
.leave-approval-history .filter-grid > div {
  min-width: 0;
}

.leave-approval-history .filter-grid input,
.leave-approval-history .filter-grid select,
.leave-approval-history .lah-fixed-workline {
  width: 100%;
  min-height: var(--btn-height);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.leave-approval-history .lah-advanced-filter {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-3);
}

.leave-approval-history .lah-advanced-filter summary {
  cursor: pointer;
  color: var(--text-strong);
  font-weight: 700;
  line-height: 1.4;
}

.leave-approval-history .lah-advanced-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.leave-approval-history .lah-advanced-filter-grid .form-field {
  align-self: start;
}

.leave-approval-history .lah-advanced-filter-note {
  grid-column: 1 / -1;
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.leave-approval-history .lah-filter-actions.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  position: static;
  z-index: auto;
  grid-column: 1 / -1;
  justify-self: end;
  width: auto;
  margin: var(--space-1) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  background: transparent;
  box-shadow: none;
}

.leave-approval-history .lah-filter-actions .btn-primary,
.leave-approval-history .lah-filter-actions .btn-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: auto;
  min-width: 120px;
  min-height: var(--btn-height);
  border-color: var(--border-soft);
  border-radius: var(--btn-radius);
  background: var(--surface);
  color: var(--text-strong);
}

.leave-approval-history .lah-filter-actions .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.leave-approval-history .lah-export-card.section-card {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--space-4);
}

.leave-approval-history .lah-export-actions.export-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.leave-approval-history .lah-export-actions .btn.btn-export {
  width: auto;
  min-width: 132px;
}

.leave-approval-history .lah-workline-list {
  gap: var(--space-4);
}

.leave-approval-history .leave-approve-workline-group.lah-workline-group {
  gap: var(--space-3);
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.leave-approval-history .leave-approve-workline-head {
  align-items: center;
  padding: var(--space-3);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.leave-approval-history .leave-approve-workline-head h3 {
  margin: 0;
  font-size: 19px;
}

.leave-approval-history .leave-approve-workline-meta span,
.leave-approval-history .leave-approve-workline-meta em {
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--text-muted);
}

.leave-approval-history .lah-section-list {
  gap: var(--space-3);
}

.leave-approval-history .lah-workline-timeline {
  display: grid;
  gap: var(--space-3);
}

.leave-approval-history .lah-status-section {
  gap: var(--space-3);
  padding: var(--space-3);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.leave-approval-history .lah-status-section.is-approved,
.leave-approval-history .lah-status-section.is-pending,
.leave-approval-history .lah-status-section.is-rejected {
  border-color: var(--border-soft);
}

.leave-approval-history .lah-status-section-head,
.leave-approval-history .lah-status-section.is-approved .lah-status-section-head,
.leave-approval-history .lah-status-section.is-pending .lah-status-section-head,
.leave-approval-history .lah-status-section.is-rejected .lah-status-section-head {
  align-items: center;
  padding: var(--space-3);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.leave-approval-history .lah-status-section-head h2 {
  color: var(--text-strong);
  font-size: 16px;
}

.leave-approval-history .lah-status-section-head p {
  color: var(--text-muted);
}

.leave-approval-history .lah-status-section-head strong {
  border-color: var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-strong);
}

.leave-approval-history .lah-item.record-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head head"
    "flow flow"
    "remark actions";
  gap: var(--space-3);
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.leave-approval-history .lah-item.record-card::before {
  content: "";
  position: absolute;
  inset: var(--space-3) auto var(--space-3) 0;
  width: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-warning);
}

.leave-approval-history .lah-item.record-card.is-approved::before {
  background: var(--color-success);
}

.leave-approval-history .lah-item.record-card.is-rejected::before {
  background: var(--color-danger);
}

.leave-approval-history .lah-item-top {
  grid-area: head;
  align-items: start;
}

.leave-approval-history .lah-item > .leave-approval-flow {
  grid-area: flow;
}

.leave-approval-history .lah-remark.content-box {
  grid-area: remark;
  padding: var(--space-3);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  box-shadow: none;
}

.leave-approval-history .lah-actions {
  grid-area: actions;
  align-self: end;
  justify-content: flex-end;
  justify-self: end;
  padding: 0;
  border: 0;
}

.leave-approval-history .lah-item-title {
  color: var(--text-strong);
  font-size: 18px;
  line-height: 1.35;
}

.leave-approval-history .lah-item-subtitle,
.leave-approval-history .lah-time {
  color: var(--text-muted);
}

.leave-approval-history .lah-item-subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-3);
}

.leave-approval-history .lah-item-subtitle span,
.leave-approval-history .lah-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.leave-approval-history .lah-item-subtitle strong,
.leave-approval-history .lah-time strong {
  color: var(--text-strong);
  font-weight: 900;
  white-space: nowrap;
}

.leave-approval-history .lah-remark-title {
  color: var(--text-muted);
  font-weight: 900;
}

.leave-approval-history .btn-detail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  border-radius: var(--btn-radius);
}

.leave-approval-history .lah-modal-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.leave-approval-history .lah-modal-field {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.leave-approval-history .lah-modal-label {
  color: var(--text-muted);
  font-weight: 900;
}

.leave-approval-history .lah-modal-value {
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.leave-approval-history .lah-modal-close {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--btn-radius);
}

@media (max-width: 1180px) {
  .leave-approval-history .lah-hero.page-hero,
  .leave-approval-history .lah-export-card.section-card {
    grid-template-columns: 1fr;
  }

  .leave-approval-history .lah-stats.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leave-approval-history .filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leave-approval-history .lah-simple-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .leave-approval-history .lah-export-actions.export-toolbar {
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .leave-approval-history .leave-approve-workline-head,
  .leave-approval-history .section-head,
  .leave-approval-history .lah-filter-head.section-head,
  .leave-approval-history .lah-result-head.section-head {
    display: grid;
  }

  .leave-approval-history .lah-filter-head-actions,
  .leave-approval-history .lah-export-actions.export-toolbar {
    justify-content: stretch;
    width: 100%;
  }

  .leave-approval-history .lah-filter-head .btn,
  .leave-approval-history .lah-export-actions .btn.btn-export {
    width: 100%;
  }

  .leave-approval-history .lah-simple-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leave-approval-history .lah-advanced-filter-grid {
    grid-template-columns: 1fr;
  }

  .leave-approval-history .lah-item.record-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "flow"
      "remark"
      "actions";
  }
}

@media (max-width: 640px) {
  .leave-approval-history .lah-hero.page-hero,
  .leave-approval-history .lah-filter-card.section-card,
  .leave-approval-history .lah-export-card.section-card,
  .leave-approval-history .leave-approve-workline-group.lah-workline-group,
  .leave-approval-history .lah-status-section,
  .leave-approval-history .lah-item.record-card,
  .leave-approval-history .lah-modal-card {
    padding: var(--space-3);
  }

  .leave-approval-history .lah-hero-copy.page-hero-main,
  .leave-approval-history .lah-stats.metric-grid,
  .leave-approval-history .filter-grid,
  .leave-approval-history .lah-modal-grid {
    grid-template-columns: 1fr;
  }

  .leave-approval-history .lah-simple-filter-grid {
    grid-template-columns: 1fr;
  }

  .leave-approval-history .lah-filter-actions.form-actions,
  .leave-approval-history .lah-filter-actions .btn-primary,
  .leave-approval-history .lah-filter-actions .btn-clear,
  .leave-approval-history .btn-detail,
  .leave-approval-history .lah-modal-close {
    width: 100%;
    justify-content: center;
  }

  .leave-approval-history .lah-item-top {
    grid-template-columns: 1fr;
  }

  .leave-approval-history .lah-item-meta,
  .leave-approval-history .lah-actions {
    justify-items: start;
    justify-content: stretch;
    justify-self: stretch;
  }

  .leave-approval-history .lah-item-subtitle,
  .leave-approval-history .lah-item-subtitle span,
  .leave-approval-history .lah-time {
    display: grid;
    gap: 2px;
  }
}



/* Leave approval setup refreshed layout. */
.leave-approval-page {
  gap: var(--space-4);
  color: var(--text-strong);
}

.leave-approval-page .leave-approval-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-5);
  border-color: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.leave-approval-page .leave-approval-hero-copy.page-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.leave-approval-page .leave-approval-kicker.page-kicker {
  color: var(--color-primary-ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.leave-approval-page .leave-approval-stats.metric-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.leave-approval-page .leave-approval-stat.metric-card {
  display: grid;
  gap: var(--space-3);
  align-content: center;
  justify-items: center;
  min-width: 0;
  min-height: 132px;
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
  text-align: center;
}

.leave-approval-page .leave-approval-stat .metric-head {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
}

.leave-approval-page .leave-approval-stat .metric-icon {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 44px;
  height: 44px;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.leave-approval-page .leave-approval-stat .metric-head span:not(.ui-icon) {
  display: block;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.leave-approval-page .leave-approval-stat .metric-value {
  color: var(--text-strong);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
  text-align: center;
}

.leave-approval-page .leave-approval-toolbar.filter-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.leave-approval-page .leave-approval-toolbar-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.leave-approval-page .leave-approval-toolbar-icon.action-icon {
  width: 38px;
  height: 38px;
}

.leave-approval-page .leave-approval-toolbar h2 {
  margin: 0 0 var(--space-1);
  color: var(--text-strong);
  font-size: 20px;
  line-height: 1.3;
}

.leave-approval-page .leave-approval-toolbar p,
.leave-approval-page .leave-approval-picker-body p {
  color: var(--text-muted);
  line-height: 1.5;
}

.leave-approval-page .leave-approval-search-wrap.form-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.leave-approval-page .leave-approval-search-wrap span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

.leave-approval-page .leave-approval-search-wrap input,
.leave-approval-page .leave-approval-user-input {
  width: 100%;
  min-height: var(--btn-height);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.leave-approval-page .leave-approval-search-wrap input:focus,
.leave-approval-page .leave-approval-user-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--accent-ghost);
}

.leave-approval-page .leave-approval-grid {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.leave-approval-page .leave-approval-card.record-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "head"
    "progress"
    "fields"
    "bypass"
    "actions";
  gap: var(--space-4);
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.leave-approval-page .leave-approval-card.is-ready {
  border-left: 5px solid var(--color-success);
}

.leave-approval-page .leave-approval-card.is-partial {
  border-left: 5px solid var(--color-primary);
}

.leave-approval-page .leave-approval-card.is-empty {
  border-left: 5px solid var(--border-muted);
}

.leave-approval-page .leave-approval-card-head {
  grid-area: head;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
}

.leave-approval-page .leave-approval-card-title {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.leave-approval-page .leave-approval-card h3 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-strong);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.leave-approval-page .leave-approval-card-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--color-primary-ink);
  box-shadow: var(--shadow-sm);
}

.leave-approval-page .leave-approval-card-eyebrow.badge-soft {
  width: max-content;
  max-width: 100%;
  color: var(--color-primary-ink);
  background: var(--surface);
  border-color: var(--nav-active-border);
}

.leave-approval-page .leave-approval-progress.badge-soft {
  width: max-content;
  min-width: 88px;
  padding: var(--space-2) var(--space-3);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  text-align: left;
}

.leave-approval-page .leave-approval-progress strong,
.leave-approval-page .leave-approval-progress span {
  display: block;
}

.leave-approval-page .leave-approval-progress strong {
  color: var(--text-strong);
  font-size: 18px;
  line-height: 1;
}

.leave-approval-page .leave-approval-progress span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
}

.leave-approval-page .leave-approval-progressbar {
  grid-area: progress;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--border-soft);
}

.leave-approval-page .leave-approval-progressbar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
}

.leave-approval-page .leave-approval-fields {
  grid-area: fields;
  display: grid;
  gap: var(--space-3);
}

.leave-approval-page .leave-approval-field.content-box {
  display: grid;
  grid-template-columns: 64px minmax(220px, .82fr) minmax(0, 1.48fr);
  gap: var(--space-4);
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: var(--space-3);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  box-shadow: none;
}

.leave-approval-page .leave-approval-step-badge.badge-soft {
  display: grid;
  place-items: center;
  width: 56px;
  height: 40px;
  padding: 0 var(--space-2);
  border-color: var(--nav-active-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--color-primary-ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.leave-approval-page .leave-approval-picker-body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.leave-approval-page .leave-approval-picker-label-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.leave-approval-page .leave-approval-picker-label-row label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.leave-approval-page .leave-approval-assignee-status.badge-soft {
  flex: 0 0 auto;
  max-width: 100%;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 900;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

.leave-approval-page .leave-approval-picker-body p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.leave-approval-page .leave-approval-step-input {
  display: grid;
  min-width: 0;
}

.leave-approval-page .leave-approval-field.is-invalid {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
}

.leave-approval-page .leave-approval-field.is-invalid .leave-approval-user-input {
  border-color: var(--color-danger);
}

.leave-approval-page .leave-approval-bypass.content-box {
  grid-area: bypass;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  box-shadow: none;
}

.leave-approval-page .leave-approval-bypass.is-enabled {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
}

.leave-approval-page .leave-approval-bypass-head,
.leave-approval-page .leave-approval-bypass-title,
.leave-approval-page .leave-approval-bypass-control,
.leave-approval-page .leave-approval-bypass-toggle {
  display: flex;
  align-items: center;
}

.leave-approval-page .leave-approval-bypass-head {
  justify-content: space-between;
  gap: var(--space-4);
}

.leave-approval-page .leave-approval-bypass-title {
  min-width: 0;
  gap: var(--space-3);
}

.leave-approval-page .leave-approval-bypass-title h4 {
  margin: 0 0 var(--space-1);
  color: var(--text-strong);
  font-size: 16px;
}

.leave-approval-page .leave-approval-bypass-title p,
.leave-approval-page .leave-approval-bypass-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.leave-approval-page .leave-approval-bypass-control,
.leave-approval-page .leave-approval-bypass-toggle {
  flex: 0 0 auto;
  gap: var(--space-2);
}

.leave-approval-page .leave-approval-bypass-toggle {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 900;
}

.leave-approval-page .leave-approval-bypass-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.leave-approval-page .leave-approval-current-leader {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-main);
}

.leave-approval-page .leave-approval-current-leader > div {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.leave-approval-page .leave-approval-current-leader span,
.leave-approval-page .leave-approval-current-leader small {
  color: var(--text-muted);
  font-size: 12px;
}

.leave-approval-page .leave-approval-current-leader strong {
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.leave-approval-page .leave-approval-bypass-grid .form-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.leave-approval-page .leave-approval-bypass-grid input {
  width: 100%;
  min-height: var(--btn-height);
}

.leave-approval-page .leave-approval-bypass:not(.is-enabled) .leave-approval-bypass-grid {
  opacity: .58;
}

.leave-approval-page .leave-approval-actions.form-actions {
  grid-area: actions;
  position: static;
  z-index: auto;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.leave-approval-page .leave-approval-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 150px;
  min-height: var(--btn-height);
  border-radius: var(--btn-radius);
  box-shadow: none;
  white-space: nowrap;
}

.leave-approval-page .leave-approval-empty.empty-state {
  border-color: var(--border-muted);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  color: var(--text-muted);
}

@media (max-width: 1180px) {
  .leave-approval-page .leave-approval-hero.page-hero,
  .leave-approval-page .leave-approval-toolbar.filter-panel {
    grid-template-columns: 1fr;
  }

  .leave-approval-page .leave-approval-field.content-box {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
  }

  .leave-approval-page .leave-approval-step-input {
    grid-column: 2;
  }

  .leave-approval-page .leave-approval-actions.form-actions {
    justify-content: flex-end;
  }

  .leave-approval-page .leave-approval-bypass-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .leave-approval-page .leave-approval-stats.metric-grid {
    grid-template-columns: 1fr;
  }

  .leave-approval-page .leave-approval-card-head,
  .leave-approval-page .leave-approval-field.content-box {
    grid-template-columns: 1fr;
  }

  .leave-approval-page .leave-approval-step-badge.badge-soft {
    width: max-content;
    min-width: 56px;
  }

  .leave-approval-page .leave-approval-step-input {
    grid-column: auto;
  }

  .leave-approval-page .leave-approval-bypass-head,
  .leave-approval-page .leave-approval-bypass-control {
    align-items: flex-start;
    flex-direction: column;
  }

  .leave-approval-page .leave-approval-bypass-grid {
    grid-template-columns: 1fr;
  }

  .leave-approval-page .leave-approval-bypass-grid .is-wide {
    grid-column: auto;
  }

  .leave-approval-page .leave-approval-actions.form-actions {
    justify-content: stretch;
  }
}

@media (max-width: 560px) {
  .leave-approval-page .leave-approval-hero.page-hero,
  .leave-approval-page .leave-approval-toolbar.filter-panel,
  .leave-approval-page .leave-approval-card.record-card {
    padding: var(--space-3);
  }

  .leave-approval-page .leave-approval-hero-copy.page-hero-main,
  .leave-approval-page .leave-approval-toolbar-copy {
    grid-template-columns: 1fr;
  }

  .leave-approval-page .leave-approval-progress.badge-soft,
  .leave-approval-page .leave-approval-actions.form-actions,
  .leave-approval-page .leave-approval-submit {
    width: 100%;
  }

  .leave-approval-page .leave-approval-submit {
    justify-content: center;
  }
}




/* Leave approve components. Centralized from app/Modules/Leave/Views/approve.php. */
.leave-approve-card-shell {
    padding: 12px;
}
.leave-approve-card-shell.has-top-gap {
    margin-top: 14px;
}
.leave-approve-section-title {
    margin-top: 0;
}
.leave-approve-empty {
    text-align: center;
    color: #6b7280;
    padding: 10px 0;
}
.leave-approve-metric-link,
.leave-approve-workline-filter-card {
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.leave-approve-metric-link:hover,
.leave-approve-workline-filter-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}
.leave-approve-metric-link.is-active,
.leave-approve-workline-filter-card.is-active {
    box-shadow: inset 0 0 0 1px var(--color-primary), var(--shadow-card);
}
.leave-approve-workline-filter-grid {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.leave-approve-workline-filter-card {
    display: grid;
    align-content: start;
    gap: 5px;
    min-height: 104px;
    padding: 10px 12px;
}
.leave-approve-workline-filter-card .action-title {
    font-size: 13px;
    line-height: 1.3;
}
.leave-approve-workline-filter-card .action-sub {
    font-size: 12px;
    line-height: 1.35;
}
.leave-approve-filter-latest {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
}
.leave-approve-workline-list {
    display: grid;
    gap: var(--space-4);
}
.leave-approve-workline-group {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.leave-approve-workline-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}
.leave-approve-workline-head h3 {
    margin: 4px 0 0;
    color: var(--text-strong);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0;
}
.leave-approve-workline-head p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}
.leave-approve-workline-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.leave-approve-workline-meta span,
.leave-approve-workline-meta em {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}
.leave-approve-workline-meta strong {
    color: var(--text-strong);
    font-weight: 900;
}

.employee-approval-list {
    display: grid;
    gap: 16px;
}
.employee-approval-card {
    border: 1px solid #d7e3f0;
    border-radius: 18px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    display: grid;
    gap: 16px;
}
.employee-approval-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 14px;
    border-bottom: 1px solid #e8eef6;
}
.employee-title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.employee-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    flex: 0 0 auto;
    overflow: hidden;
}
.employee-avatar.has-photo {
    border-color: #d7e3f0;
    background: #f8fafc;
}
.employee-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.employee-name {
    color: #0f172a;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.25;
}
.employee-note {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}
.employee-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.employee-approval-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
.employee-stats-panel,
.employee-requests-panel {
    display: grid;
    gap: 12px;
    min-width: 0;
}
.employee-stats-panel {
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}
.employee-requests-panel {
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
}
.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.panel-title {
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}
.panel-subtitle {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}
.employee-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.employee-stat-card {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;
    background: #ffffff;
    display: grid;
    gap: 5px;
    min-height: 92px;
}
.employee-stat-card .stat-type {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}
.employee-stat-card .stat-used {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
}
.employee-stat-card .stat-used.is-danger,
.employee-stat-card .stat-remain.is-danger {
    color: #b91c1c;
}
.employee-stat-card .stat-remain {
    font-size: 12px;
    font-weight: 800;
}
.employee-stat-card .stat-remain.is-ok {
    color: #15803d;
}
.employee-stat-card .stat-remain.is-warning {
    color: #b45309;
}
.employee-requests-panel .leave-request-grid {
    grid-template-columns: 1fr;
    gap: 14px;
}
.leave-request-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 12px;
}
.leave-request-card {
    --leave-accent: #FFD65A;
    --leave-border: #FFECA0;
    --leave-soft: #FFF9DB;
    position: relative;
    overflow: hidden;
    border: 1px solid #dbe6f2;
    border-radius: 16px;
    padding: 16px 16px 16px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
    display: grid;
    gap: 14px;
    min-width: 0;
}
.leave-request-card::before {
    content: "";
    position: absolute;
    top: 16px;
    bottom: 16px;
    left: 0;
    width: 5px;
    border-radius: 0 999px 999px 0;
    background: var(--leave-accent);
}
.leave-request-card.leave-bucket-sick {
    --leave-accent: #5B7E3C;
    --leave-border: #B8C8A5;
    --leave-soft: #F4F7EF;
}
.leave-request-card.leave-bucket-personal,
.leave-request-card.leave-bucket-personal_affair {
    --leave-accent: #EA5252;
    --leave-border: #F6B5B5;
    --leave-soft: #FFF1F1;
}
.leave-request-card.leave-bucket-vacation {
    --leave-accent: #FF9D23;
    --leave-border: #FFD59A;
    --leave-soft: #FFF5E6;
}
.leave-request-card.leave-bucket-other {
    --leave-accent: #FFD65A;
    --leave-border: #FFECA0;
    --leave-soft: #FFF9DB;
}
.leave-request-card.cancel-card {
    background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
    border-color: var(--color-danger-border);
}
.leave-request-card.cancel-card::before {
    background: #ef4444;
}
.lr-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8eef6;
}
.lr-name {
    font-size: 19px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.3;
}
.lr-code {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}
.lr-submitted-at {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    border: 1px solid #dbeafe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    padding: 5px 9px;
    font-size: 12px;
    line-height: 1.25;
}
.lr-submitted-at span {
    color: #64748b;
    font-weight: 800;
}
.lr-submitted-at strong {
    min-width: 0;
    color: #1e3a8a;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.lr-meta {
    display: grid;
    gap: 8px;
}
.lr-section {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    min-width: 0;
}
.lr-section-title {
    color: #334155;
    font-size: 12px;
    font-weight: 900;
}
.lr-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.lr-section-subtitle {
    margin-top: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}
.document-comment-section {
    border-color: #d7e3f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    gap: 12px;
}
.lr-info-grid,
.lr-doc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.lr-doc-grid.is-single {
    grid-template-columns: minmax(0, 1fr);
}
.lr-info-item,
.lr-doc-item,
.lr-meta div,
.lr-reason,
.lr-attach {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    padding: 9px 10px;
    font-size: 13px;
    color: #334155;
}
.lr-info-item,
.lr-doc-item {
    display: grid;
    gap: 3px;
}
.document-comment-section .lr-doc-item {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 74px;
    border-color: #dbe7f3;
    background: #ffffff;
}
.lr-doc-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .02em;
}
.lr-doc-copy {
    min-width: 0;
    display: grid;
    gap: 6px;
}
.lr-info-item span,
.lr-doc-item span,
.lr-meta span,
.lr-reason span,
.lr-attach span:first-child {
    color: #64748b;
    font-weight: 600;
}
.lr-info-item strong,
.lr-doc-item strong {
    color: #0f172a;
    font-weight: 900;
}
.doc-empty {
    color: #94a3b8 !important;
}
.remark-field {
    display: grid;
    gap: 7px;
}
.remark-field > span {
    color: #475569;
    font-size: 12px;
    font-weight: 900;
}
.remark-field textarea {
    min-height: 88px;
    border-color: #cbd5e1;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}
.remark-field textarea:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: var(--leave-soft);
    font-size: 12px;
    font-weight: 800;
    color: var(--leave-accent);
}
.attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 92px;
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 10px;
    text-decoration: none;
    border: 1px solid #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
}
.leave-approve-actions {
    display: grid;
    gap: 12px;
    justify-items: stretch;
}
.leave-approve-actions textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 10px;
    resize: vertical;
    min-height: 64px;
    font-size: 13px;
}
.leave-approve-actions .remark-field textarea {
    min-height: 88px;
    border-radius: 14px;
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}
.leave-approve-actions .remark-field textarea:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.leave-approve-actions .action-section {
    background: #f8fafc;
}
.leave-approve-actions .action-row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.leave-approve-actions button {
    min-width: 124px;
    text-align: center;
}
.leave-approve-actions .btn-approve {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.leave-approve-actions .btn-reject {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}
.approve-file-drop {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 68px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    padding: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.approve-file-drop:hover,
.approve-file-drop:focus-within {
    border-color: #93c5fd;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}
.approve-file-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.approve-file-icon {
    width: 40px;
    height: 40px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #ffffff;
    color: #0f766e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
}
.approve-file-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.approve-file-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.approve-file-sub {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}
@media (max-width: 980px) {
    .leave-approve-workline-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .leave-approve-workline-filter-grid {
        grid-template-columns: 1fr;
    }
    .leave-approve-workline-group,
    .employee-approval-card {
        padding: 12px;
        border-radius: 14px;
    }
    .leave-approve-workline-head {
        display: grid;
    }
    .leave-approve-workline-meta {
        justify-content: flex-start;
    }
    .leave-approve-workline-meta span,
    .leave-approve-workline-meta em {
        width: 100%;
        justify-content: space-between;
    }
    .employee-approval-head {
        display: grid;
        grid-template-columns: 1fr;
    }
    .employee-title-wrap {
        align-items: flex-start;
    }
    .employee-avatar {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 18px;
    }
    .employee-count {
        width: fit-content;
    }
    .employee-approval-body {
        grid-template-columns: 1fr;
    }
    .employee-stats-panel,
    .employee-requests-panel {
        padding: 12px;
        border-radius: 14px;
    }
    .employee-stat-grid,
    .lr-info-grid,
    .lr-doc-grid {
        grid-template-columns: 1fr;
    }
    .leave-request-card {
        padding: 12px 12px 12px 16px;
        border-radius: 14px;
    }
    .lr-head {
        display: grid;
        grid-template-columns: 1fr;
    }
    .lr-submitted-at {
        width: 100%;
        display: grid;
        gap: 2px;
        border-radius: 12px;
    }
    .type-pill {
        width: fit-content;
    }
    .leave-approve-actions .action-row {
        display: grid;
        grid-template-columns: 1fr;
    }
    .leave-approve-actions button {
        width: 100%;
    }
    .approve-file-drop {
        grid-template-columns: 34px minmax(0, 1fr);
        min-height: 62px;
        padding: 10px;
    }
    .approve-file-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
}



/* Leave create components. Centralized from app/Modules/Leave/Views/create.php. */
.leave-create-alert {
    margin: 8px 0;
    font-weight: 700;
}
.leave-create-alert.is-error {
    color: var(--color-danger-ink);
}
.leave-create-alert.is-success {
    color: var(--color-success-ink);
}
.leave-time-card.is-active {
    display: flex;
}
.leave-custom-time-row.is-active {
    display: grid;
}
.leave-attachment-hint.is-hidden {
    display: none;
}

.leave-create-page {
    display: grid;
    gap: 14px;
}
.leave-create-page .leave-create-hero.page-hero {
    align-items: center;
}
.leave-create-page .leave-create-hero .page-hero-main {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon kicker"
        "icon title"
        "icon subtitle";
    align-items: center;
    align-content: center;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
}
.leave-create-page .leave-create-hero .page-hero-icon {
    grid-area: icon;
    margin-bottom: 0;
    align-self: center;
}
.leave-create-page .leave-create-hero .page-kicker {
    grid-area: kicker;
}
.leave-create-page .leave-create-hero .page-title {
    grid-area: title;
}
.leave-create-page .leave-create-hero .page-subtitle {
    grid-area: subtitle;
}
.leave-entitlement-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}
.leave-entitlement-card {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    min-height: 176px;
}
.leave-entitlement-head {
    align-items: flex-start;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 42px minmax(0, 1fr);
}
.leave-entitlement-head .metric-icon {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    color: var(--text-strong);
}
.leave-entitlement-head .metric-head {
    align-items: flex-start;
    display: flex;
    margin: 0;
}
.leave-entitlement-meta {
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: 12px;
    font-weight: 750;
}
.leave-entitlement-meta strong {
    color: var(--text-strong);
    font-weight: 900;
}
.leave-entitlement-progress {
    background: var(--surface-muted);
    border-radius: var(--radius-pill);
    height: 8px;
    overflow: hidden;
}
.leave-entitlement-progress-value {
    background: var(--color-primary);
    border-radius: inherit;
    height: 100%;
    max-width: 100%;
}
.leave-entitlement-card.is-danger .leave-entitlement-progress-value {
    background: var(--color-danger);
}
.leave-entitlement-card.is-warning .leave-entitlement-progress-value {
    background: var(--color-warning);
}
.leave-entitlement-card.is-neutral .leave-entitlement-progress-value {
    background: var(--text-muted);
}
.leave-entitlement-progress.is-empty .leave-entitlement-progress-value {
    width: 0%;
}
.leave-entitlement-foot {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: 12px;
    font-weight: 800;
    gap: var(--space-2);
    justify-content: space-between;
}
.leave-entitlement-foot strong {
    color: var(--text-strong);
    font-weight: 900;
}
.leave-entitlement-foot.is-danger strong {
    color: var(--color-danger-ink);
}
.leave-entitlement-foot.is-warn strong {
    color: var(--color-warning-ink);
}
.leave-entitlement-foot.is-ok strong {
    color: var(--color-success-ink);
}
.leave-latest-card.is-hidden,
.leave-latest-item.is-hidden {
    display: none;
}
.leave-latest-grid {
    display: grid;
    gap: var(--space-3);
}
.leave-latest-item {
    display: grid;
    gap: var(--space-3);
}
.leave-latest-item .record-head {
    margin-bottom: 0;
}
.leave-latest-reason {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    margin: 0;
    overflow-wrap: anywhere;
}
.leave-latest-empty {
    align-items: flex-start;
    display: grid;
    gap: var(--space-1);
    margin: 0;
    min-height: auto;
    padding: var(--space-4);
    text-align: left;
}
.leave-create-form {
    display: grid;
    gap: var(--space-4);
    padding: 0;
}
.leave-admin-card {
    display: grid;
    gap: 8px;
}
.leave-admin-selected {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
}
.leave-form-grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}
.leave-form-grid.filter-grid,
.leave-contact-grid.filter-grid {
    align-items: stretch;
}
.leave-contact-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
}
.leave-form-section {
    display: grid;
    gap: var(--space-4);
}
.leave-choice-picker {
    width: 100%;
}
.leave-choice-picker .app-choice-trigger {
    min-height: 44px;
}
.leave-choice-picker .app-choice-menu {
    max-height: 280px;
    overflow: auto;
}
.leave-choice-picker .app-choice-option span {
    line-height: 1.45;
}
.leave-time-card {
    display: none;
    gap: var(--space-3);
    flex-direction: column;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    padding: var(--space-4);
}
.leave-custom-time-row {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    align-items: center;
}
.leave-create-page .leave-form-grid.filter-panel,
.leave-create-page .leave-custom-time-row.filter-panel,
.leave-create-page .leave-contact-grid.filter-panel {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.leave-create-page .leave-custom-time-row.is-active {
    display: grid;
}
.leave-emergency-option {
    align-items: center;
    background: var(--color-warning-soft);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 22px minmax(0, 1fr);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.leave-emergency-option:hover,
.leave-emergency-option:focus-within {
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warning) 16%, transparent);
}
.leave-emergency-option.is-hidden {
    display: none;
}
.leave-create-form .leave-emergency-option input[type="checkbox"],
.leave-manage-edit-form .leave-emergency-option input[type="checkbox"] {
    height: 1px;
    margin: 0;
    min-height: 0;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}
.leave-emergency-check {
    align-items: center;
    align-self: start;
    background: var(--surface);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-xs);
    color: var(--surface);
    display: inline-flex;
    height: 20px;
    justify-content: center;
    margin-top: 1px;
    width: 20px;
}
.leave-emergency-check::after {
    content: '';
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    height: 10px;
    transform: rotate(45deg) translateY(-1px);
    width: 6px;
}
.leave-emergency-option input[type="checkbox"]:checked + .leave-emergency-check {
    background: var(--color-warning);
    color: var(--surface);
}
.leave-emergency-option > span:not(.leave-emergency-check) {
    display: grid;
    gap: var(--space-1);
}
.leave-emergency-option small {
    color: var(--color-warning-ink);
    font-weight: 600;
    line-height: 1.45;
}
.leave-emergency-badge {
    background: var(--color-warning-soft);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-pill);
    color: var(--color-warning-ink);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: var(--space-2) var(--space-3);
}
.leave-emergency-detail.content-box {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-2);
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}
.leave-emergency-detail strong {
    color: var(--color-warning-ink);
    font-size: 13px;
    font-weight: 900;
}
.leave-emergency-detail span {
    color: var(--color-warning-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}
.leave-help-text {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.leave-form-actions.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-1);
    padding-top: var(--space-3);
    position: static;
    bottom: auto;
    z-index: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.leave-form-actions.form-actions button {
    min-height: 42px;
    min-width: 150px;
}
.leave-rules-card {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    box-shadow: none;
}
.leave-rules-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--color-warning-ink);
    line-height: 1.6;
}
.leave-attachment-field {
    display: grid;
    gap: var(--space-2);
}
.leave-attachment-label {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 700;
}
.leave-file-drop {
    width: 100%;
}
.leave-file-copy {
    width: min(100%, 560px);
}
.leave-file-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leave-attachment-hint {
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-sm);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
}
.leave-policy-open {
    overflow: hidden;
}
.leave-policy-modal {
    align-items: center;
    background: color-mix(in srgb, var(--text-strong) 48%, transparent);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: var(--space-5);
    position: fixed;
    z-index: 1100;
}
.leave-policy-modal.is-dismissed {
    display: none;
}
.leave-policy-dialog {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    max-height: calc(100vh - 48px);
    max-width: 720px;
    overflow: auto;
    padding: var(--space-6);
    width: min(100%, 720px);
}
.leave-policy-head {
    align-items: flex-start;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding-bottom: var(--space-4);
}
.leave-policy-kicker {
    color: var(--color-danger-ink);
    font-size: 12px;
    font-weight: 850;
    margin-bottom: var(--space-2);
}
.leave-policy-head h2 {
    color: var(--text-strong);
    font-size: 24px;
    line-height: 1.25;
    margin: 0;
}
.leave-policy-lead {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}
.leave-policy-lead strong {
    color: var(--color-danger-ink);
    font-size: 15px;
    font-weight: 900;
}
.leave-policy-lead span {
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.7;
}
.leave-policy-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr));
}
.leave-policy-item {
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
}
.leave-policy-item strong {
    color: var(--text-strong);
    font-size: 14px;
    line-height: 1.35;
}
.leave-policy-item span {
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
}
.leave-policy-item .leave-policy-text-highlight {
    color: var(--color-danger-ink);
    display: inline;
    font-size: inherit;
    font-weight: 900;
}
.leave-policy-note {
    background: var(--color-warning-soft);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    color: var(--color-warning-ink);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.6;
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
}
.leave-policy-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
}
.leave-rule-error-dialog {
    max-width: 620px;
}
.leave-rule-error-head {
    margin-bottom: var(--space-4);
}
.leave-rule-error-modal .alert-box {
    align-items: flex-start;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
}
.leave-rule-error-modal .alert-box p {
    margin: var(--space-1) 0 0;
}
.leave-rule-error-actions {
    margin-top: var(--space-4);
}
@media (max-width: 920px) {
    .leave-entitlement-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .leave-form-grid,
    .leave-contact-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .leave-entitlement-grid {
        grid-template-columns: 1fr;
    }
    .leave-entitlement-card {
        min-height: 0;
    }
    .leave-form-grid,
    .leave-custom-time-row,
    .leave-contact-grid {
        grid-template-columns: 1fr;
    }
    .leave-form-actions button {
        width: 100%;
    }
    .leave-choice-picker .app-choice-menu {
        max-height: 240px;
    }
    .leave-policy-modal {
        align-items: flex-start;
        padding: var(--space-3);
    }
    .leave-policy-dialog {
        max-height: calc(100vh - 24px);
        padding: var(--space-4);
    }
    .leave-policy-head h2 {
        font-size: 20px;
    }
    .leave-policy-grid {
        grid-template-columns: 1fr;
    }
    .leave-policy-actions button {
        width: 100%;
    }
}



/* Leave entitlements responsive workspace refresh. */
.leave-entitlements-page {
    max-width: min(100%, 1440px);
    margin-inline: auto;
    gap: var(--space-5);
    color: var(--text-strong);
}
.ent-hero.page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    align-items: stretch;
    gap: var(--space-5);
    padding: var(--space-6);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-panel);
}
.ent-hero-copy {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    align-content: start;
}
.ent-hero-copy > div {
    gap: var(--space-1);
}
.ent-kicker {
    color: var(--color-primary-ink);
    font-weight: 900;
}
.ent-hero h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.24;
    color: var(--text-strong);
}
.ent-hero p {
    max-width: 72ch;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.75;
}
.ent-note.badge-soft {
    grid-column: 1 / -1;
    display: block;
    padding: var(--space-3) var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-muted);
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.ent-hero-stats.metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    align-content: stretch;
}
.ent-stat.metric-card {
    min-width: 0;
    min-height: 132px;
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
    align-content: center;
    justify-items: center;
    gap: var(--space-3);
    text-align: center;
}
.ent-stat .metric-head {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.45;
    text-align: center;
}
.ent-stat .metric-head span:not(.ui-icon) {
    display: block;
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.ent-stat .metric-value {
    color: var(--text-strong);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    overflow-wrap: anywhere;
    text-align: center;
}
.ent-toolbar.filter-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: var(--space-4);
    align-items: stretch;
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.ent-filter-form.filter-grid {
    grid-template-columns: minmax(140px, 180px) minmax(240px, 1fr);
    gap: var(--space-3) var(--space-4);
    align-items: end;
}
.ent-filter-form label {
    gap: var(--space-2);
    color: var(--text-muted);
    font-weight: 900;
}
.ent-filter-form input,
.ent-input {
    min-height: 44px;
    border-color: var(--border-muted);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-strong);
}
.ent-filter-form input:focus,
.ent-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
    background: var(--surface);
}
.ent-filter-actions {
    justify-content: flex-end;
    gap: var(--space-2);
}
.leave-entitlements-page .btn {
    gap: var(--space-2);
    min-height: 44px;
    border-radius: var(--radius-md);
    font-weight: 900;
}
.ent-overview.metric-card {
    gap: var(--space-3);
    padding: var(--space-4);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    box-shadow: none;
}
.ent-overview-head span,
.ent-overview-foot,
.ent-stat span {
    color: var(--text-muted);
}
.ent-overview-head strong {
    color: var(--text-strong);
    font-size: 24px;
    font-weight: 900;
}
.ent-progress,
.used-row-bar {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: 8px;
    overflow: hidden;
    background: var(--border-soft);
    border-radius: var(--radius-pill);
}
.ent-progress span,
.used-row-bar span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: var(--progress-rainbow);
}
.ent-empty.empty-state {
    border-color: var(--border-muted);
    border-radius: var(--radius-lg);
    background: var(--surface-muted);
    color: var(--text-muted);
}
.ent-dept-section.section-card {
    gap: 0;
    padding: 0;
    overflow: hidden;
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.ent-dept-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-muted);
}
.ent-dept-head h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: 22px;
    line-height: 1.35;
}
.ent-dept-head strong.badge-soft {
    color: var(--color-primary-ink);
    background: var(--surface);
    border-color: var(--nav-active-border);
}
.ent-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 540px), 1fr));
    gap: var(--space-4);
    padding: var(--space-4);
}
.ent-user-card.record-card {
    display: grid;
    overflow: hidden;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.ent-user-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface);
}
.ent-user-no.badge-soft {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--color-primary-ink);
    border-color: var(--nav-active-border);
    font-weight: 900;
}
.ent-user-name {
    color: var(--text-strong);
    font-size: 16px;
    font-weight: 900;
}
.ent-user-pos {
    color: var(--text-muted);
}
.ent-cycle.badge-soft {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-width: 0 0 1px;
    border-color: var(--border-soft);
    border-radius: 0;
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-weight: 800;
}
.ent-user-card form {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
    grid-template-areas:
        "limits usage"
        "actions actions";
    gap: var(--space-4);
    padding: var(--space-4);
    align-items: start;
}
.ent-limits-grid {
    grid-area: limits;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.ent-limit-field.form-field {
    min-width: 0;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}
.ent-limit-field > span,
.used-row-top span,
.ent-used-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.ent-limit-field > span,
.used-row-top span {
    color: var(--text-muted);
    font-weight: 900;
}
.ent-limit-icon,
.ent-used-icon,
.ent-section-icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--theme-icon-border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--theme-icon-ink);
    box-shadow: var(--shadow-sm);
    line-height: 1;
    font-size: 15px;
}
.ent-used-box {
    grid-area: usage;
    gap: var(--space-3);
    min-height: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}
.ent-used-title {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 900;
}
.used-row {
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.used-row-top {
    gap: var(--space-3);
}
.used-row-top strong {
    color: var(--text-strong);
    font-weight: 900;
    white-space: nowrap;
}
.used-row-top strong.is-danger {
    color: var(--color-danger-ink);
}
.used-row-top strong.is-warning {
    color: var(--color-warning-ink);
}
.used-row-top strong.is-ok {
    color: var(--color-success-ink);
}
.ent-bucket-sick .ent-limit-icon,
.ent-bucket-sick .ent-used-icon {
    color: var(--color-success-ink);
}
.ent-bucket-personal .ent-limit-icon,
.ent-bucket-personal .ent-used-icon {
    color: var(--color-danger-ink);
}
.ent-bucket-vacation .ent-limit-icon,
.ent-bucket-vacation .ent-used-icon {
    color: var(--color-warning-ink);
}
.ent-bucket-other .ent-limit-icon,
.ent-bucket-other .ent-used-icon {
    color: var(--color-info-ink);
}
.ent-bucket-sick .used-row-bar span {
    background: var(--color-success);
}
.ent-bucket-personal .used-row-bar span {
    background: var(--color-danger);
}
.ent-bucket-vacation .used-row-bar span {
    background: var(--color-warning);
}
.ent-bucket-other .used-row-bar span {
    background: var(--color-info);
}
.ent-save-wrap {
    grid-area: actions;
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
}
@media (max-width: 1180px) {
    .ent-hero.page-hero,
    .ent-toolbar.filter-panel {
        grid-template-columns: 1fr;
    }
    .ent-hero-stats.metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 920px) {
    .ent-user-card form {
        grid-template-columns: 1fr;
        grid-template-areas:
            "limits"
            "usage"
            "actions";
    }
}
@media (max-width: 760px) {
    .leave-entitlements-page {
        gap: var(--space-4);
    }
    .ent-hero.page-hero,
    .ent-toolbar.filter-panel,
    .ent-dept-head,
    .ent-card-grid,
    .ent-user-head,
    .ent-user-card form {
        padding: var(--space-4);
    }
    .ent-hero-copy {
        grid-template-columns: 1fr;
    }
    .ent-hero h1 {
        font-size: 25px;
    }
    .ent-hero-stats.metric-grid,
    .ent-filter-form.filter-grid {
        grid-template-columns: 1fr;
    }
    .ent-dept-head {
        display: grid;
        align-items: start;
    }
    .ent-dept-head strong.badge-soft,
    .ent-filter-actions .btn,
    .ent-save-wrap .btn {
        width: 100%;
    }
    .ent-filter-actions,
    .ent-save-wrap {
        justify-content: stretch;
    }
    .ent-card-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 520px) {
    .ent-limits-grid {
        grid-template-columns: 1fr;
    }
    .used-row-top {
        display: grid;
        align-items: start;
    }
    .used-row-top strong {
        white-space: normal;
    }
}

/* Leave entitlement staff rows, rebuilt for fast scanning. */
.ent-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-4);
}
.ent-user-card.record-card {
    display: grid;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.ent-user-card .ent-user-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "person action"
        "limits limits"
        "usage usage";
    gap: var(--space-4);
    align-items: stretch;
    min-width: 0;
    height: 100%;
    padding: var(--space-4);
}
.ent-user-form .ent-user-head {
    grid-area: person;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}
.ent-user-form .ent-user-no.badge-soft {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--color-primary-ink);
    border-color: var(--nav-active-border);
    font-size: 12px;
    font-weight: 900;
}
.ent-user-form .ent-user-name {
    min-width: 0;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.ent-user-form .ent-user-pos {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}
.ent-user-form .ent-cycle.badge-soft {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--space-2);
    padding: 4px 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 800;
}
.ent-user-form .ent-limits-grid {
    grid-area: limits;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}
.ent-user-form .ent-limits-title,
.ent-user-form .ent-used-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    grid-column: 1 / -1;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}
.ent-user-form .ent-limit-field.form-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    min-width: 0;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.ent-user-form .ent-limit-field > span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    min-width: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 900;
}
.ent-user-form .ent-limit-icon,
.ent-user-form .ent-used-icon,
.ent-user-form .ent-section-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 13px;
}
.ent-user-form .ent-input {
    width: 100%;
    min-height: 38px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 13px;
    font-weight: 900;
}
.ent-user-form .ent-used-box {
    grid-area: usage;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: var(--space-3);
    min-height: 100%;
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}
.ent-user-form .ent-used-title {
    display: inline-flex;
}
.ent-user-form .used-row {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.ent-user-form .used-row-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
}
.ent-user-form .used-row-top span {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    min-width: 0;
    color: var(--text-muted);
    font-weight: 900;
}
.ent-user-form .used-row-top strong {
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}
.ent-user-form .used-row-bar {
    height: 7px;
}
.ent-user-form .ent-save-wrap {
    grid-area: action;
    display: flex;
    justify-content: flex-end;
    align-self: start;
    align-items: flex-start;
    position: static;
    z-index: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.ent-user-form .ent-save-wrap .btn {
    width: auto;
    min-width: 128px;
    min-height: var(--btn-height);
    padding-inline: var(--space-3);
    box-shadow: none;
    white-space: nowrap;
}
.ent-user-form .ent-save-wrap .btn:hover,
.ent-user-form .ent-save-wrap .btn:focus-visible {
    box-shadow: none;
}
@media (max-width: 1180px) {
    .ent-card-grid {
        grid-template-columns: 1fr;
    }
    .ent-user-card .ent-user-form {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "person action"
            "limits limits"
            "usage usage";
    }
}
@media (max-width: 820px) {
    .ent-user-card .ent-user-form {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "person action"
            "usage usage"
            "limits limits";
        padding: var(--space-3);
    }
    .ent-user-form .ent-limits-grid,
    .ent-user-form .ent-used-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .ent-user-card .ent-user-form {
        grid-template-columns: 1fr;
        grid-template-areas:
            "person"
            "action"
            "usage"
            "limits";
    }
    .ent-user-form .ent-limits-grid,
    .ent-user-form .ent-used-box {
        grid-template-columns: 1fr;
    }
    .ent-user-form .ent-save-wrap {
        justify-content: flex-end;
        width: 100%;
    }
    .ent-user-form .ent-save-wrap .btn {
        width: auto;
    }
    .ent-user-form .used-row-top {
        grid-template-columns: 1fr;
    }
    .ent-user-form .used-row-top strong {
        white-space: normal;
    }
}



/* Leave list components. Centralized from app/Modules/Leave/Views/list.php. */
.leave-stat-remain-value.is-danger {
    color: #b91c1c;
}
.leave-stat-remain-value.is-normal {
    color: #0f172a;
}
.leave-calendar-legend .legend-sick {
    color: #5B7E3C;
}
.leave-calendar-legend .legend-personal {
    color: #EA5252;
}
.leave-calendar-legend .legend-vacation {
    color: #FF9D23;
}
.leave-calendar-legend .legend-other {
    color: #FFD65A;
}
.leave-calendar-legend .legend-canceled {
    color: #b91c1c;
}
.leave-calendar-legend .legend-holiday {
    color: #dc2626;
}
.leave-calendar-legend .legend-today {
    color: #2563eb;
}
.leave-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 0;
}
.leave-print-link {
    padding: 6px 10px;
    text-decoration: none;
}
.leave-inline-form {
    display: inline;
}
.modal-backdrop.is-hidden,
.leave-doc-link.is-hidden,
.doc-manager-delete.is-hidden,
.doc-manager-actions .btn.is-hidden,
.doc-manager-empty.is-hidden {
    display: none;
}
.modal-backdrop.is-open {
    display: flex;
}
.doc-manager-delete {
    margin-top: 2px;
}
.cancel-modal-title {
    font-weight: 600;
    margin-bottom: 8px;
}
.cancel-modal-textarea {
    width: 100%;
    margin-top: 6px;
}
.cancel-modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.cancel-modal-submit {
    background: #16a34a;
    color: #fff;
}

.leave-page {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 1040px);
    margin: 0 auto;
    align-items: start;
}
.leave-page > .leave-hero,
.leave-page > .leave-section-card {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}
.leave-hero {
    border: 1px solid #dbe6f2;
    border-radius: 20px;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}
.leave-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.leave-hero-copy h1 {
    margin: 0;
    color: #0f172a;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0;
}
.leave-hero-copy p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}
.leave-hero-period {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe6f2;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}
.leave-hero-metrics {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr 1fr;
    gap: 12px;
    margin-top: 16px;
}
.leave-hero-metric {
    position: relative;
    overflow: hidden;
    border: 1px solid #dbe6f2;
    border-radius: 16px;
    background: #ffffff;
    padding: 16px;
    box-shadow: none;
    display: grid;
    gap: 10px;
    min-height: 132px;
}
.leave-hero-metric::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #0f766e;
}
.leave-hero-metric-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    margin: 0;
}
.leave-hero-metric-value {
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
    color: #0f172a;
}
.leave-hero-metric-note {
    margin-top: 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 600;
}
.leave-hero-metric-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.leave-hero-metric-mini {
    border: 1px solid #dbe6f2;
    border-radius: 12px;
    padding: 10px 12px;
    background: #f8fafc;
}
.leave-hero-metric-mini strong {
    display: block;
    font-size: 18px;
    line-height: 1;
    color: #0f172a;
    margin-top: 4px;
}
.leave-hero-metric-mini span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
}
.leave-flash {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-weight: 600;
}
.leave-flash.success {
    background: #ecfdf3;
    color: #15803d;
    border-color: var(--color-success-border);
}
.leave-flash.error {
    background: #fef2f2;
    color: #b91c1c;
    border-color: var(--color-danger-border);
}
.leave-section-card {
    border: 1px solid #dbe6f2;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
    padding: 18px;
}
.leave-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.leave-section-title {
    margin: 0;
    font-size: 21px;
    line-height: 1.2;
    color: #0f172a;
    font-weight: 900;
}
.leave-section-desc {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
}
.leave-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.leave-stat-card {
    --leave-accent: #FFD65A;
    --leave-border: #FFECA0;
    --leave-soft: #FFF9DB;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--leave-border);
    border-radius: 12px;
    background: #ffffff;
    padding: 10px 12px 10px 16px;
    display: grid;
    gap: 7px;
    min-width: 0;
    box-shadow: none;
}
.leave-stat-card::before,
.leave-history-card::before {
    content: '';
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: var(--leave-accent);
}
.leave-bucket-sick {
    --leave-accent: #5B7E3C;
    --leave-accent-text: #496A31;
    --leave-border: #CCD8BF;
    --leave-soft: #F4F7EF;
}
.leave-bucket-personal,
.leave-bucket-personal_affair {
    --leave-accent: #EA5252;
    --leave-accent-text: #C63F3F;
    --leave-border: #F7CACA;
    --leave-soft: #FFF1F1;
}
.leave-bucket-vacation {
    --leave-accent: #FF9D23;
    --leave-accent-text: #B96200;
    --leave-border: #FFE0B3;
    --leave-soft: #FFF5E6;
}
.leave-bucket-other {
    --leave-accent: #FFD65A;
    --leave-accent-text: #8A6500;
    --leave-border: #FFF0B8;
    --leave-soft: #FFF9DB;
}
.leave-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.leave-stat-type {
    font-size: 14px;
    font-weight: 800;
    color: var(--leave-accent-text, var(--leave-accent));
    line-height: 1.2;
}
.leave-stat-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.leave-stat-remain {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}
.leave-stat-remain-value {
    font-size: 19px;
    line-height: 1;
    font-weight: 900;
    color: #0f172a;
}
.leave-stat-remain-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
}
.leave-stat-used-line {
    color: #475569;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}
.leave-stat-progress {
    height: 5px;
    border-radius: 999px;
    background: #e9edf2;
    overflow: hidden;
}
.leave-stat-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--leave-accent);
}
.leave-stat-progress span:not([class*="leave-used-percent-"]) {
    width: 0%;
}
.leave-calendar-shell {
    display: grid;
    gap: 14px;
}
.leave-calendar-frame {
    border: 1px solid #dbe6f2;
    border-radius: 16px;
    padding: 10px;
    background: #ffffff;
    overflow-x: auto;
}
.leave-calendar-month {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #dbe6f2;
    border-radius: 12px;
    background: #fff;
}
.leave-calendar-month label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}
.leave-calendar-month input {
    width: 170px;
}
.leave-calendar-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}
.leave-calendar-legend span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
}
.leave-calendar-legend span::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 999px;
    vertical-align: middle;
    background: currentColor;
}
#leaveCalendar {
    gap: 6px !important;
}
.leave-cal-weekday {
    min-height: 30px;
    display: grid;
    place-items: center;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 900;
}
.leave-cal-day {
    min-height: 92px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    padding: 8px;
    display: grid;
    align-content: start;
    gap: 6px;
}
.leave-cal-day.is-empty {
    background: #f8fafc;
    border-style: dashed;
}
.leave-cal-day.has-leave {
    border-color: #bfdbfe;
    background: #f8fbff;
}
.leave-cal-day.is-holiday {
    border-color: var(--color-danger-border);
    background: #fff7f7;
}
.leave-cal-day.is-today {
    border-color: #2563eb;
    box-shadow: inset 0 0 0 1px #2563eb, 0 10px 24px rgba(37, 99, 235, 0.10);
}
.leave-cal-day.is-today .leave-cal-date {
    background: #eff6ff;
    color: #1d4ed8;
}
.leave-cal-day-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
}
.leave-cal-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 900;
}
.leave-cal-day.has-leave .leave-cal-date {
    background: #f8fafc;
    color: #334155;
}
.leave-cal-day.is-holiday .leave-cal-date {
    background: #fef2f2;
    color: #dc2626;
}
.leave-today-badge {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 10.5px;
    font-weight: 900;
    white-space: nowrap;
}
.leave-cal-events {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.leave-cal-event {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    min-width: 0;
}
.leave-cal-event::before {
    content: '';
    width: 7px;
    height: 7px;
    margin-top: 4px;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 7px;
}
.leave-cal-event span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leave-cal-event.is-approved {
    color: #059669;
}
.leave-cal-event.is-pending {
    color: #f59e0b;
}
.leave-cal-event.is-rejected {
    color: #64748b;
}
.leave-cal-event.is-holiday {
    color: #dc2626;
}
.leave-cal-event.leave-bucket-sick {
    color: #5B7E3C;
}
.leave-cal-event.leave-bucket-personal,
.leave-cal-event.leave-bucket-personal_affair {
    color: #EA5252;
}
.leave-cal-event.leave-bucket-vacation {
    color: #FF9D23;
}
.leave-cal-event.leave-bucket-other {
    color: #FFD65A;
}
.leave-cal-event.is-emergency {
    color: var(--color-warning-ink);
}
.leave-cal-event.is-canceled {
    color: #b91c1c;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.leave-cal-event.is-canceled::before {
    background: #ef4444;
}
.leave-action-cell {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
    width: 100%;
}
.leave-action-main {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
}
.leave-action-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}
.leave-action-cell .btn,
.leave-action-cell a.btn,
.leave-action-cell form .btn {
    min-width: 112px;
    height: 32px;
    border-radius: 9px;
    font-weight: 800;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.leave-action-cell .btn-print {
    background: #0f766e;
    border-color: #0f766e;
    color: #fff !important;
}
.leave-action-cell .btn-attach {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #334155 !important;
}
.leave-action-cell .btn-cancel-request {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff !important;
}
.leave-action-cell form {
    margin: 0;
}
.doc-manager-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}
.doc-manager-card {
    width: min(760px, calc(100vw - 28px));
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
}
.doc-manager-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #e8eef6;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.doc-manager-title {
    margin: 0;
    color: #0f172a;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.25;
}
.doc-manager-subtitle {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}
.doc-manager-body {
    display: grid;
    gap: 14px;
    padding: 16px 18px 18px;
}
.doc-manager-box {
    border: 1px solid #dbe6f2;
    border-radius: 14px;
    padding: 14px;
    background: #ffffff;
    display: grid;
    gap: 12px;
    align-content: start;
    overflow: hidden;
}
.doc-manager-box h4 {
    margin: 0;
    font-size: 14px;
    color: #0f172a;
    font-weight: 800;
}
.doc-manager-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 9px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}
.doc-manager-current-label {
    color: #64748b;
}
.doc-manager-empty {
    color: #94a3b8;
    font-weight: 800;
}
.doc-manager-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.doc-manager-actions .btn {
    min-width: 0;
    width: 100%;
    height: 38px;
    border-radius: 10px;
    font-weight: 800;
}
.doc-manager-delete .btn {
    min-width: 0;
    width: 100%;
    height: 36px;
}
.doc-manager-delete {
    margin: 0 !important;
}
.doc-manager-file-drop {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 68px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    padding: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.doc-manager-file-drop:hover,
.doc-manager-file-drop:focus-within {
    border-color: #93c5fd;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}
.doc-manager-file-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.doc-manager-file-icon {
    width: 40px;
    height: 40px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #ffffff;
    color: #0f766e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
}
.doc-manager-file-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.doc-manager-file-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-manager-file-sub {
    color: #64748b;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}
.doc-manager-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}
.doc-manager-close-btn {
    min-width: 110px;
    height: 38px;
    border-radius: 10px;
}
.leave-history-cards {
    display: grid;
    gap: 8px;
}
.leave-history-card {
    --leave-accent: #FFD65A;
    --leave-border: #FFECA0;
    --leave-soft: #FFF9DB;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--leave-border);
    border-radius: 12px;
    background: #ffffff;
    padding: 12px 12px 12px 16px;
    box-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.leave-history-card.leave-bucket-sick {
    --leave-accent: #5B7E3C;
    --leave-border: #B8C8A5;
    --leave-soft: #F4F7EF;
}
.leave-history-card.leave-bucket-personal,
.leave-history-card.leave-bucket-personal_affair {
    --leave-accent: #EA5252;
    --leave-border: #F6B5B5;
    --leave-soft: #FFF1F1;
}
.leave-history-card.leave-bucket-vacation {
    --leave-accent: #FF9D23;
    --leave-border: #FFD59A;
    --leave-soft: #FFF5E6;
}
.leave-history-card.leave-bucket-other {
    --leave-accent: #FFD65A;
    --leave-border: #FFECA0;
    --leave-soft: #FFF9DB;
}
.leave-history-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.leave-history-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.leave-history-title-wrap {
    display: grid;
    gap: 6px;
}
.leave-history-type {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    color: var(--leave-accent);
}
.leave-history-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 700;
}
.leave-range-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #475569;
}
.leave-history-side {
    display: grid;
    gap: 6px;
    justify-items: end;
}
.leave-order-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--leave-accent);
    background: #ffffff;
    border: 1px solid var(--leave-border);
    border-radius: 999px;
    padding: 3px 8px;
}
.leave-history-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    font-size: 12px;
}
.leave-history-item {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    min-width: 0;
}
.leave-history-grid .label {
    display: block;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
    margin: 0 0 4px;
}
.leave-history-value {
    color: #0f172a;
    font-weight: 700;
    line-height: 1.45;
    word-break: break-word;
}
.leave-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}
.leave-actions-panel {
    grid-column: 1 / -1;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    padding: 8px;
    background: #f8fafc;
}
.leave-reason-card {
    grid-column: 1 / -1;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 10px;
    padding: 10px 12px;
    background: #f8fafc;
}
.leave-reason-card .label {
    display: block;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    margin: 0 0 6px;
}
.leave-reason-text {
    margin: 0;
    color: #0f172a;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-line;
}
@media (max-width: 640px) {
    .leave-page { gap: 12px; }
    .doc-manager-grid { grid-template-columns: 1fr; }
    .doc-manager-actions { grid-template-columns: 1fr; }
    .doc-manager-card {
        width: min(100%, calc(100vw - 20px));
        max-height: 92vh;
        overflow: auto;
    }
    .doc-manager-head {
        display: grid;
        grid-template-columns: 1fr;
        padding: 16px;
    }
    .doc-manager-body {
        padding: 14px 16px 16px;
    }
    .doc-manager-title {
        font-size: 17px;
    }
    .doc-manager-close-btn {
        width: 100%;
    }
    .doc-manager-current {
        align-items: flex-start;
        flex-direction: column;
    }
    .leave-history-grid { grid-template-columns: 1fr; }
    .leave-action-cell {
        display: grid;
        grid-template-columns: 1fr;
    }
    .leave-action-main {
        display: grid;
        grid-template-columns: 1fr;
    }
    .leave-action-right {
        justify-content: stretch;
        width: 100%;
    }
    .leave-action-cell .btn,
    .leave-action-cell a.btn,
    .leave-action-cell form,
    .leave-action-cell form .btn {
        width: 100%;
        min-width: 0;
    }
    .leave-hero,
    .leave-section-card { padding: 16px; }
    .leave-hero {
        border-radius: 18px;
    }
    .leave-hero-copy h1 {
        font-size: 23px;
    }
    .leave-hero-top {
        gap: 12px;
    }
    .leave-hero-period {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        border-radius: 14px;
    }
    .leave-hero-metrics {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .leave-hero-metric {
        min-height: 0;
        padding: 14px 14px 14px 18px;
    }
    .leave-section-head {
        align-items: stretch;
    }
    .leave-section-title {
        font-size: 19px;
    }
    .leave-stat-grid {
        grid-template-columns: 1fr;
    }
    .leave-stat-card,
    .leave-history-card {
        border-radius: 12px;
        padding: 12px 12px 12px 16px;
    }
    .leave-history-head {
        display: grid;
        grid-template-columns: 1fr;
    }
    .leave-history-side {
        justify-items: start;
        align-items: start;
    }
    .leave-history-type {
        font-size: 18px;
    }
    .leave-hero-metric-split { grid-template-columns: 1fr; }
    .leave-calendar-month {
        width: 100%;
        justify-content: space-between;
    }
    .leave-calendar-month input {
        width: min(180px, 58vw);
    }
    #leaveCalendar {
        min-width: 0;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }
    .leave-calendar-frame {
        padding: 8px;
        overflow-x: visible;
    }
    .leave-cal-weekday {
        min-height: 24px;
        font-size: 10.5px;
    }
    .leave-cal-day {
        aspect-ratio: 1 / 1;
        min-height: 0;
        border-radius: 9px;
        padding: 4px;
        gap: 3px;
        align-content: start;
        justify-items: center;
    }
    .leave-cal-day.is-empty {
        background: #fbfdff;
    }
    .leave-cal-date {
        width: 20px;
        height: 20px;
        font-size: 10.5px;
    }
    .leave-cal-events {
        display: flex;
        justify-content: center;
        gap: 2px;
        width: 100%;
        overflow: hidden;
    }
    .leave-cal-event {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: currentColor;
        flex: 0 0 6px;
        overflow: hidden;
    }
    .leave-cal-event::before,
    .leave-cal-event span {
        display: none;
    }
    .leave-cal-day.is-holiday.has-leave .leave-cal-events {
        flex-wrap: wrap;
        max-height: 14px;
    }
}
@media (max-width: 1024px) {
    .leave-hero-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .leave-hero-metric:last-child {
        grid-column: 1 / -1;
    }
    .leave-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .leave-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 860px) {
    .leave-hero-metrics,
    .leave-stat-grid {
        grid-template-columns: 1fr;
    }
    .leave-hero-metric:last-child {
        grid-column: auto;
    }
    .leave-history-grid {
        grid-template-columns: 1fr;
    }
}

.leave-history-section {
    padding: 20px;
    background: #ffffff;
}
.leave-history-section .leave-section-head {
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e8eef6;
}
.leave-history-section .leave-section-title {
    font-size: 22px;
    letter-spacing: 0;
}
.leave-history-section .leave-section-desc {
    max-width: 72ch;
    line-height: 1.65;
}
.leave-history-section .leave-history-cards {
    gap: 14px;
}
.leave-history-section .leave-history-card {
    border-color: #dbe6f2;
    border-radius: 16px;
    padding: 16px 16px 16px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}
.leave-history-section .leave-history-card::before {
    top: 16px;
    bottom: 16px;
    width: 5px;
}
.leave-history-section .leave-history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}
.leave-history-section .leave-history-card.is-canceled {
    border-color: var(--color-danger-border);
    background: linear-gradient(180deg, #ffffff 0%, #fff7f7 100%);
}
.leave-history-section .leave-history-card.is-canceled::before {
    background: #ef4444;
}
.leave-history-section .leave-history-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding-left: 4px;
    margin-bottom: 14px;
}
.leave-history-section .leave-history-title-wrap {
    gap: 8px;
    min-width: 0;
}
.leave-history-section .leave-order-badge {
    width: fit-content;
    border-radius: 10px;
    background: var(--leave-soft);
    color: var(--leave-accent-text, var(--leave-accent));
}
.leave-history-section .leave-history-type {
    font-size: 21px;
    font-weight: 900;
    color: var(--leave-accent-text, var(--leave-accent));
}
.leave-history-section .leave-history-sub {
    gap: 8px;
    font-size: 12px;
}
.leave-history-section .leave-range-chip {
    border-radius: 10px;
    background: #f8fafc;
    border-color: #e2e8f0;
}
.leave-history-section .leave-history-side {
    gap: 8px;
    justify-items: end;
}
.leave-history-section .status-badge {
    padding: 5px 11px;
    font-weight: 800;
}
.leave-history-section .leave-canceled-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.leave-history-section .leave-canceled-notice {
    display: grid;
    gap: 3px;
    margin: -2px 0 12px 4px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 12px;
    line-height: 1.45;
}
.leave-history-section .leave-canceled-notice strong {
    font-size: 13px;
    font-weight: 900;
}
.leave-history-section .leave-approval-flow {
    margin: 0 0 14px 4px;
    padding: 12px;
    border: 1px solid #e8eef6;
    border-radius: 14px;
    background: #ffffff;
}
.leave-history-section .laf-summary {
    margin-bottom: 2px;
}
.leave-history-section .laf-steps {
    gap: 10px;
}
.leave-history-section .laf-step {
    border-radius: 12px;
    padding: 10px;
    background: #fbfdff;
}
.leave-history-section .leave-history-grid {
    grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 10px;
    padding-left: 4px;
}
.leave-history-section .leave-history-info-row {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) minmax(0, 1.35fr);
    gap: 10px;
    grid-column: 1 / -1;
}
.leave-history-section .leave-history-doc-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    grid-column: 1 / -1;
}
.leave-history-section .leave-history-group {
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    padding: 12px;
    border: 1px solid #e8eef6;
    border-radius: 14px;
    background: #fbfdff;
}
.leave-history-section .leave-history-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.3;
}
.leave-history-section .leave-history-group-title::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--leave-accent);
    flex: 0 0 auto;
}
.leave-history-section .leave-history-item,
.leave-history-section .leave-reason-card,
.leave-history-section .leave-actions-panel {
    border-color: #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}
.leave-history-section .leave-history-item {
    padding: 12px;
}
.leave-history-section .leave-history-group .leave-history-item,
.leave-history-section .leave-history-group .leave-reason-card,
.leave-history-section .leave-history-group .leave-actions-panel {
    background: #ffffff;
}
.leave-history-section .leave-history-grid .label,
.leave-history-section .leave-reason-card .label {
    color: #64748b;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}
.leave-history-section .leave-history-value {
    font-size: 13.5px;
    font-weight: 800;
}
.leave-history-section .leave-doc-link {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
}
.leave-history-section .leave-reason-card {
    padding: 12px 14px;
}
.leave-history-section .leave-reason-text {
    font-size: 13px;
}
.leave-history-section .leave-actions-panel {
    padding: 12px;
    background: #f8fafc;
}
.leave-history-section .leave-action-cell {
    align-items: center;
}
.leave-history-section .leave-action-main {
    gap: 8px;
}
.leave-history-section .leave-action-right {
    gap: 8px;
}
.leave-history-section .leave-action-cell .btn,
.leave-history-section .leave-action-cell a.btn,
.leave-history-section .leave-action-cell form .btn {
    min-width: 126px;
    height: 38px;
    border-radius: 10px;
}
.leave-history-section .btn-attach {
    background: #ffffff;
}
.leave-history-section .leave-cancel-state {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}
.leave-history-section .leave-cancel-state.is-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}
.leave-history-section .leave-cancel-state.is-closed {
    border-color: var(--color-danger-border);
    background: #fef2f2;
    color: #991b1b;
}
.leave-history-section .leave-cancel-state.is-done {
    border-color: var(--color-success-border);
    background: #f0fdf4;
    color: #166534;
}
.leave-history-empty {
    text-align: center;
    color: #64748b;
    padding: 28px 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
}

@media (max-width: 920px) {
    .leave-history-section .leave-history-head {
        grid-template-columns: 1fr;
    }
    .leave-history-section .leave-history-side {
        justify-items: start;
    }
    .leave-history-section .leave-history-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .leave-history-section .leave-history-info-row,
    .leave-history-section .leave-history-doc-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .leave-history-section {
        padding: 14px;
    }
    .leave-history-section .leave-section-head {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
    .leave-history-section .leave-section-title {
        font-size: 20px;
    }
    .leave-history-section .leave-history-cards {
        gap: 12px;
    }
    .leave-history-section .leave-history-card {
        border-radius: 14px;
        padding: 14px;
    }
    .leave-history-section .leave-history-card::before {
        top: 14px;
        bottom: 14px;
    }
    .leave-history-section .leave-history-head {
        padding-left: 8px;
        gap: 12px;
    }
    .leave-history-section .leave-history-type {
        font-size: 19px;
    }
    .leave-history-section .leave-history-sub,
    .leave-history-section .leave-history-side {
        align-items: stretch;
        justify-items: stretch;
    }
    .leave-history-section .leave-range-chip,
    .leave-history-section .status-badge {
        width: fit-content;
        max-width: 100%;
    }
    .leave-history-section .leave-approval-flow {
        margin-left: 8px;
        padding: 10px;
    }
    .leave-history-section .leave-history-grid {
        grid-template-columns: 1fr;
        padding-left: 8px;
    }
    .leave-history-section .leave-history-group {
        padding: 10px;
        border-radius: 12px;
    }
    .leave-history-section .leave-action-cell,
    .leave-history-section .leave-action-main {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }
    .leave-history-section .leave-action-right {
        width: 100%;
        justify-content: stretch;
    }
    .leave-history-section .leave-action-cell .btn,
    .leave-history-section .leave-action-cell a.btn,
    .leave-history-section .leave-action-cell form,
    .leave-history-section .leave-action-cell form .btn {
        width: 100%;
        min-width: 0;
    }
}

.leave-used-percent-0 { width: 0%; }
.leave-used-percent-1 { width: 1%; }
.leave-used-percent-2 { width: 2%; }
.leave-used-percent-3 { width: 3%; }
.leave-used-percent-4 { width: 4%; }
.leave-used-percent-5 { width: 5%; }
.leave-used-percent-6 { width: 6%; }
.leave-used-percent-7 { width: 7%; }
.leave-used-percent-8 { width: 8%; }
.leave-used-percent-9 { width: 9%; }
.leave-used-percent-10 { width: 10%; }
.leave-used-percent-11 { width: 11%; }
.leave-used-percent-12 { width: 12%; }
.leave-used-percent-13 { width: 13%; }
.leave-used-percent-14 { width: 14%; }
.leave-used-percent-15 { width: 15%; }
.leave-used-percent-16 { width: 16%; }
.leave-used-percent-17 { width: 17%; }
.leave-used-percent-18 { width: 18%; }
.leave-used-percent-19 { width: 19%; }
.leave-used-percent-20 { width: 20%; }
.leave-used-percent-21 { width: 21%; }
.leave-used-percent-22 { width: 22%; }
.leave-used-percent-23 { width: 23%; }
.leave-used-percent-24 { width: 24%; }
.leave-used-percent-25 { width: 25%; }
.leave-used-percent-26 { width: 26%; }
.leave-used-percent-27 { width: 27%; }
.leave-used-percent-28 { width: 28%; }
.leave-used-percent-29 { width: 29%; }
.leave-used-percent-30 { width: 30%; }
.leave-used-percent-31 { width: 31%; }
.leave-used-percent-32 { width: 32%; }
.leave-used-percent-33 { width: 33%; }
.leave-used-percent-34 { width: 34%; }
.leave-used-percent-35 { width: 35%; }
.leave-used-percent-36 { width: 36%; }
.leave-used-percent-37 { width: 37%; }
.leave-used-percent-38 { width: 38%; }
.leave-used-percent-39 { width: 39%; }
.leave-used-percent-40 { width: 40%; }
.leave-used-percent-41 { width: 41%; }
.leave-used-percent-42 { width: 42%; }
.leave-used-percent-43 { width: 43%; }
.leave-used-percent-44 { width: 44%; }
.leave-used-percent-45 { width: 45%; }
.leave-used-percent-46 { width: 46%; }
.leave-used-percent-47 { width: 47%; }
.leave-used-percent-48 { width: 48%; }
.leave-used-percent-49 { width: 49%; }
.leave-used-percent-50 { width: 50%; }
.leave-used-percent-51 { width: 51%; }
.leave-used-percent-52 { width: 52%; }
.leave-used-percent-53 { width: 53%; }
.leave-used-percent-54 { width: 54%; }
.leave-used-percent-55 { width: 55%; }
.leave-used-percent-56 { width: 56%; }
.leave-used-percent-57 { width: 57%; }
.leave-used-percent-58 { width: 58%; }
.leave-used-percent-59 { width: 59%; }
.leave-used-percent-60 { width: 60%; }
.leave-used-percent-61 { width: 61%; }
.leave-used-percent-62 { width: 62%; }
.leave-used-percent-63 { width: 63%; }
.leave-used-percent-64 { width: 64%; }
.leave-used-percent-65 { width: 65%; }
.leave-used-percent-66 { width: 66%; }
.leave-used-percent-67 { width: 67%; }
.leave-used-percent-68 { width: 68%; }
.leave-used-percent-69 { width: 69%; }
.leave-used-percent-70 { width: 70%; }
.leave-used-percent-71 { width: 71%; }
.leave-used-percent-72 { width: 72%; }
.leave-used-percent-73 { width: 73%; }
.leave-used-percent-74 { width: 74%; }
.leave-used-percent-75 { width: 75%; }
.leave-used-percent-76 { width: 76%; }
.leave-used-percent-77 { width: 77%; }
.leave-used-percent-78 { width: 78%; }
.leave-used-percent-79 { width: 79%; }
.leave-used-percent-80 { width: 80%; }
.leave-used-percent-81 { width: 81%; }
.leave-used-percent-82 { width: 82%; }
.leave-used-percent-83 { width: 83%; }
.leave-used-percent-84 { width: 84%; }
.leave-used-percent-85 { width: 85%; }
.leave-used-percent-86 { width: 86%; }
.leave-used-percent-87 { width: 87%; }
.leave-used-percent-88 { width: 88%; }
.leave-used-percent-89 { width: 89%; }
.leave-used-percent-90 { width: 90%; }
.leave-used-percent-91 { width: 91%; }
.leave-used-percent-92 { width: 92%; }
.leave-used-percent-93 { width: 93%; }
.leave-used-percent-94 { width: 94%; }
.leave-used-percent-95 { width: 95%; }
.leave-used-percent-96 { width: 96%; }
.leave-used-percent-97 { width: 97%; }
.leave-used-percent-98 { width: 98%; }
.leave-used-percent-99 { width: 99%; }
.leave-used-percent-100 { width: 100%; }



/* Leave manage components. Centralized from app/Modules/Leave/Views/manage.php. */
.leave-manage-page {
    display: grid;
    gap: 16px;
    color: var(--text-strong);
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}
.leave-manage-page .card,
.leave-manage-hero,
.leave-manage-toolbar,
.leave-manage-records,
.leave-record {
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}
.leave-manage-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    padding: 20px;
    background: var(--surface);
}
.leave-manage-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--color-primary);
}
.leave-manage-hero > * {
    position: relative;
}
.leave-manage-hero-copy {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
}
.leave-manage-kicker {
    width: fit-content;
    border: 1px solid var(--color-primary-border);
    border-radius: 999px;
    background: var(--accent-ghost);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 900;
    padding: 6px 10px;
    text-transform: uppercase;
}
.leave-manage-hero h1,
.leave-manage-toolbar h2,
.leave-manage-records h2 {
    margin: 0;
    color: var(--text-strong);
    font-weight: 900;
    letter-spacing: 0;
}
.leave-manage-hero h1 {
    font-size: 29px;
    line-height: 1.2;
}
.leave-manage-hero p,
.leave-manage-toolbar p,
.leave-manage-records p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}
.leave-manage-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 10px;
}
.leave-manage-overview > div {
    min-width: 0;
}
.leave-manage-overview-card {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 88px;
    height: 100%;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    padding: 12px;
    text-decoration: none;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.leave-manage-overview-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--text-muted);
    opacity: .8;
}
.leave-manage-overview-card.is-approved::before { background: var(--color-success); }
.leave-manage-overview-card.is-rejected::before { background: var(--color-danger); }
.leave-manage-overview-card.is-canceled::before { background: var(--text-muted); }
.leave-manage-overview-card.is-pending::before { background: var(--color-warning); }
.leave-manage-overview-card.is-total::before { background: var(--color-primary); }
.leave-manage-overview-card:hover {
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.leave-manage-overview-card.is-active,
.leave-manage-overview-card.bg-primary-subtle {
    border-color: var(--color-primary-border);
    background: var(--accent-ghost);
}
.leave-manage-overview-card span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}
.leave-manage-overview-card strong {
    color: var(--text-strong);
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}
.leave-manage-alert {
    border-radius: 8px;
    padding: 11px 12px;
    font-weight: 800;
}
.leave-manage-alert.is-error { border: 1px solid var(--color-danger-border); background: var(--color-danger-soft); color: var(--color-danger-ink); }
.leave-manage-alert.is-success { border: 1px solid var(--color-success-border); background: var(--color-success-soft); color: var(--color-success-ink); }
.leave-manage-toolbar,
.leave-manage-records {
    display: grid;
    gap: 14px;
    padding: 18px;
    min-width: 0;
    container-type: inline-size;
    container-name: leave-records;
}
.leave-manage-workline-filter {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}
.leave-manage-workline-filter-grid.leave-approve-workline-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-3);
}
.leave-manage-workline-filter-card.action-card {
    min-height: 0;
    gap: var(--space-2);
    padding: var(--space-3);
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}
.leave-manage-workline-filter-card.action-card:hover,
.leave-manage-workline-filter-card.action-card:focus-visible {
    border-color: var(--color-primary-border);
    box-shadow: var(--shadow-sm);
}
.leave-manage-workline-filter-card.action-card.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--accent-ghost);
}
.leave-manage-workline-filter-card .action-title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}
.leave-manage-workline-filter-card .action-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    font-size: 14px;
}
.leave-manage-workline-filter-card .action-sub,
.leave-manage-workline-filter-card .leave-approve-filter-latest {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.leave-manage-toolbar-head,
.leave-manage-records-head,
.leave-workline-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.leave-manage-toolbar h2,
.leave-manage-records h2 {
    font-size: 18px;
}
.leave-manage-clear-top,
.leave-manage-records-head > span,
.leave-record-person-top span {
    flex: 0 0 auto;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    padding: 7px 10px;
    text-decoration: none;
}
.leave-manage-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(120px, .75fr) minmax(145px, .85fr) repeat(2, minmax(120px, .7fr));
    gap: 10px 12px;
    align-items: end;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-muted);
    max-width: 100%;
    overflow: hidden;
}
.leave-manage-filter label,
.leave-manage-edit-form label {
    display: grid;
    gap: 6px;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    min-width: 0;
}
.leave-manage-filter input,
.leave-manage-filter select,
.leave-manage-edit-form input,
.leave-manage-edit-form select,
.leave-manage-edit-form textarea {
    width: 100%;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-strong);
    font-size: 14px;
    padding: 0 11px;
}
.leave-manage-filter input,
.leave-manage-filter select,
.leave-manage-edit-form input,
.leave-manage-edit-form select {
    min-height: 40px;
}
.leave-manage-edit-form textarea {
    min-height: 86px;
    padding-top: 10px;
    resize: vertical;
}
.leave-manage-filter input:focus,
.leave-manage-filter select:focus,
.leave-manage-edit-form input:focus,
.leave-manage-edit-form select:focus,
.leave-manage-edit-form textarea:focus {
    outline: none;
    border-color: var(--color-primary-border);
    box-shadow: 0 0 0 3px var(--accent-ghost);
}
.leave-manage-filter-actions,
.leave-manage-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    background: transparent;
    border: 0;
    padding: 0;
}
.leave-manage-filter-actions {
    grid-column: 1 / -1;
    justify-self: end;
}
.leave-manage-filter-actions button,
.leave-manage-actions button,
.leave-record-edit > summary,
.leave-record-delete-form button,
.leave-manage-filter-actions a,
.leave-manage-actions a {
    min-height: 40px;
    border-radius: 8px;
    font-weight: 900;
    text-decoration: none;
    gap: var(--space-2);
}
.leave-record-delete-form .leave-delete-btn,
.leave-manage-actions .leave-delete-btn {
    border: 1px solid var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
    box-shadow: none;
}
.leave-record-table-head {
    display: grid;
    grid-template-columns: minmax(220px, 1.05fr) minmax(320px, 1.45fr) minmax(150px, .72fr) minmax(132px, auto);
    gap: 12px;
    align-items: center;
    min-width: 0;
}
.leave-record-table-head {
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}
.leave-workline-groups {
    display: grid;
    gap: 16px;
}
.leave-workline-group {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.leave-workline-head {
    border: 0;
    border-radius: 8px;
    background: var(--surface-muted);
    padding: 9px 12px;
}
.leave-workline-head > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.leave-workline-head > div:first-child > span {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: 0;
}
.leave-workline-head > div:first-child > span::after {
    content: ":";
}
.leave-workline-head span {
    display: block;
    color: #64748b;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}
.leave-workline-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: 0;
}
.leave-workline-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px 6px;
    text-align: right;
}
.leave-workline-meta strong {
    color: #0f766e;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 900;
}
.leave-workline-meta span {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}
.leave-workline-meta em {
    color: #64748b;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.45;
}
.leave-workline-meta em::before {
    content: "· ";
    color: #94a3b8;
}
.leave-record-list {
    display: grid;
    gap: 14px;
}
.leave-record {
    position: relative;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
    background: #ffffff;
}
.leave-record:hover {
    border-color: #cfe0ee;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .07);
    transform: translateY(-1px);
}
.leave-record::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: #f59e0b;
}
.leave-record.is-approved::before { background: #22c55e; }
.leave-record.is-rejected::before { background: #ef4444; }
.leave-record.is-canceled::before { background: #94a3b8; }
.leave-record-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px 16px 16px 20px;
}
.leave-record-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    min-width: 0;
}
.leave-record-person {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    min-width: 0;
}
.leave-record-avatar {
    width: 42px;
    height: 42px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    overflow: hidden;
}
.leave-record-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.leave-record-person-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    min-width: 0;
}
.leave-record-person strong,
.leave-record-cell strong,
.leave-record-approval strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 900;
    min-width: 0;
    overflow-wrap: anywhere;
}
.leave-record-person em,
.leave-record-cell span,
.leave-record-approval span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.6;
}
.leave-record-person em {
    margin-top: 3px;
}
.leave-record-detail-grid {
    display: grid;
    grid-template-columns: minmax(140px, .85fr) minmax(240px, 1.5fr) minmax(118px, .65fr);
    gap: 10px;
    min-width: 0;
}
.leave-record-detail-grid > .row {
    display: contents;
}
.leave-record-cell {
    min-width: 0;
    border: 0;
    border-radius: 8px;
    background: #f8fafc;
    padding: 10px 12px;
}
.leave-record-cell > div {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}
.leave-record-cell.is-days strong {
    color: #0f766e;
    font-size: 18px;
}
.leave-record-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    min-width: 0;
}
.leave-record-status .status-badge,
.leave-record-status .badge {
    width: fit-content;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    font-weight: 900;
}
.leave-manage-cancel-panel {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}
.leave-manage-cancel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.leave-manage-cancel-head > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}
.leave-manage-cancel-head strong {
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 900;
}
.leave-manage-cancel-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}
.leave-manage-cancel-flow {
    display: grid;
    gap: var(--space-2);
}
.leave-manage-cancel-flow .laf-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.leave-record-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    border-top: 1px solid #eef2f7;
    padding-top: 12px;
}
.leave-record-approval {
    min-width: 0;
}
.leave-record-approval strong {
    margin-top: 2px;
    font-size: 13px;
}
.leave-record-actions {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    align-items: center;
    gap: 8px;
    justify-self: end;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
}
.leave-record-delete-form {
    margin: 0;
}
.leave-record-edit,
.leave-record-delete-form {
    min-width: 0;
}
.leave-record-edit > summary {
    list-style: none;
    width: auto;
    min-width: 0;
    min-height: 38px;
    cursor: pointer;
}
.leave-record-edit > summary::-webkit-details-marker {
    display: none;
}
.leave-record-edit[open],
.leave-record-actions:has(.leave-record-edit[open]) {
    grid-column: 1 / -1;
    justify-self: stretch;
}
.leave-record-actions:has(.leave-record-edit[open]) {
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr);
}
.leave-record-actions:has(.leave-record-edit[open]) .leave-record-delete-form.is-collapsed-action {
    display: none;
}
.leave-record-footer:has(.leave-record-edit[open]) {
    grid-template-columns: minmax(0, 1fr);
}
.leave-record-edit[open] > summary {
    margin-bottom: 12px;
}
.leave-manage-edit-form {
    display: grid;
    gap: var(--space-3);
    border-top: 1px solid var(--border-soft);
    padding: var(--space-3);
    background: var(--surface-muted);
    border-radius: var(--radius-md);
}
.edit-section {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.edit-section-title,
.fw-bold {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 900;
}
.leave-manage-form-grid,
.leave-manage-doc-grid,
.leave-manage-time-grid,
.leave-manage-support-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.leave-manage-form-grid.is-request-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.leave-manage-time-grid {
    grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr);
}
.leave-manage-doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.leave-manage-support-grid {
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
    align-items: start;
}
.leave-manage-support-grid > label {
    align-content: start;
    align-self: start;
}
.leave-manage-form-grid > label,
.leave-manage-time-grid > label,
.leave-manage-support-grid > label,
.leave-manage-custom-time > label,
.leave-manage-doc-grid > .manage-doc-card {
    width: auto;
    max-width: none;
}
.manage-doc-surface {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: var(--space-3);
}
.manage-doc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
}
.manage-doc-head span,
.manage-doc-head strong {
    display: block;
}
.manage-doc-head span {
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 900;
}
.manage-doc-head strong {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}
.manage-doc-head a {
    flex: 0 0 auto;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-primary-border);
    border-radius: 999px;
    background: var(--accent-ghost);
    padding: 0 10px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}
.leave-manage-page .manage-file-drop {
    display: flex;
    gap: var(--space-3);
    min-height: 74px;
}
.manage-file-title {
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 900;
}
.manage-file-sub {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}
.leave-manage-time-card {
    display: none;
}
.leave-manage-time-card.is-visible {
    display: grid;
}
.leave-manage-custom-time {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.leave-manage-custom-time.is-visible {
    display: grid;
}
.leave-manage-actions {
    border-top: 1px solid var(--border-soft);
    padding-top: var(--space-3);
}
.leave-manage-open-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) 0;
    border-top: 1px solid var(--border-soft);
}
.leave-manage-open-actions .btn {
    min-width: min(150px, 100%);
}
.leave-manage-open-actions .leave-record-delete-form {
    margin-left: auto;
}
.leave-manage-empty {
    font-weight: 800;
}
@media (max-width: 1180px) {
    .leave-manage-hero,
    .leave-manage-filter {
        grid-template-columns: 1fr;
    }
    .leave-manage-overview {
        grid-template-columns: repeat(5, minmax(120px, 1fr));
        overflow-x: auto;
        padding-bottom: 2px;
    }
    .leave-record-table-head {
        display: none;
    }
}
@container leave-records (max-width: 880px) {
    .leave-record-table-head {
        display: none;
    }
    .leave-record-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .leave-record-head,
    .leave-record-footer {
        grid-template-columns: minmax(0, 1fr);
    }
    .leave-record-detail-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    }
    .leave-manage-cancel-grid,
    .leave-manage-cancel-flow .laf-steps {
        grid-template-columns: minmax(0, 1fr);
    }
    .leave-record-cell.is-days {
        grid-column: 1 / -1;
    }
    .leave-record-status {
        justify-content: flex-start;
    }
    .leave-record-actions {
        justify-self: stretch;
        width: 100%;
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .leave-manage-form-grid.is-request-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .leave-manage-open-actions {
        justify-content: stretch;
    }
    .leave-manage-open-actions .btn,
    .leave-manage-open-actions .leave-record-delete-form {
        flex: 1 1 180px;
        margin-left: 0;
    }
    .leave-manage-open-actions .leave-record-delete-form .btn {
        width: 100%;
    }
}
@container leave-records (max-width: 560px) {
    .leave-record-detail-grid {
        grid-template-columns: 1fr;
    }
    .leave-record-person {
        align-items: start;
    }
    .leave-record-person-top {
        display: grid;
        gap: 5px;
    }
    .leave-record-person-top span {
        width: fit-content;
    }
    .leave-record-actions {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 1360px) {
    .leave-manage-filter {
        grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, .75fr)) repeat(2, minmax(130px, .7fr));
    }
    .leave-manage-filter-actions {
        grid-column: 1 / -1;
        justify-self: end;
        min-width: 150px;
    }
}
@media (max-width: 820px) {
    .leave-manage-page {
        gap: 12px;
    }
    .leave-manage-hero,
    .leave-manage-toolbar,
    .leave-manage-records {
        padding: 14px;
    }
    .leave-manage-hero h1 {
        font-size: 23px;
    }
    .leave-manage-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }
    .leave-manage-overview-card.is-total {
        grid-column: 1 / -1;
    }
    .leave-manage-toolbar-head,
    .leave-manage-records-head,
    .leave-workline-head {
        display: grid;
        gap: 10px;
    }
    .leave-workline-meta {
        justify-content: flex-start;
        text-align: left;
    }
    .leave-record-main {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .leave-record-head,
    .leave-record-footer {
        grid-template-columns: 1fr;
    }
    .leave-record-status {
        justify-items: start;
        justify-content: flex-start;
    }
    .leave-record-edit,
    .leave-record-edit > summary {
        width: 100%;
    }
    .leave-manage-form-grid,
    .leave-manage-form-grid.is-request-grid,
    .leave-manage-doc-grid,
    .leave-manage-time-grid,
    .leave-manage-support-grid,
    .leave-manage-custom-time {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 520px) {
    .leave-manage-hero,
    .leave-manage-toolbar,
    .leave-manage-records,
    .leave-record {
        border-radius: 8px;
    }
    .leave-manage-overview {
        grid-template-columns: 1fr;
    }
    .leave-manage-filter-actions,
    .leave-manage-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .leave-manage-filter-actions button,
    .leave-manage-filter-actions a,
    .leave-manage-actions button,
    .leave-manage-actions a {
        width: 100%;
        justify-content: center;
    }
    .leave-record-person {
        grid-template-columns: 36px minmax(0, 1fr);
    }
    .leave-record-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    .leave-record-actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        width: 100%;
        max-width: none;
    }
    .leave-record-edit > summary,
    .leave-record-delete-form .leave-delete-btn {
        width: 100%;
        min-width: 0;
    }
    .leave-manage-open-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
    .leave-manage-open-actions .btn,
    .leave-manage-open-actions .leave-record-delete-form {
        width: 100%;
        min-width: 0;
    }
}



/* Meeting booking components. Centralized from app/Modules/Meeting/Views/book.php. */
.room-policy.is-hidden {
    display: none;
}
.modal-backdrop.is-hidden {
    display: none;
}
.modal-backdrop.is-open {
    display: flex;
}
.calendar-view-btn.is-active {
    background: #111827;
    color: #fff;
    border-color: #111827;
}
.cal-list-item.is-holiday {
    border-color: var(--color-danger-border);
    background: #fff1f2;
}
.cal-list-holiday-title {
    font-weight: 700;
    color: #b91c1c;
}
.cal-list-item-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cal-grid-spaced {
    margin-top: 6px;
}
.cal-inline-empty {
    color: #9ca3af;
    font-size: 0.8rem;
}
.cal-inline-more {
    color: #6b7280;
    font-size: 0.8rem;
}
.room-dot-color-0 { background: #2563eb; }
.room-dot-color-1 { background: #16a34a; }
.room-dot-color-2 { background: #f97316; }
.room-dot-color-3 { background: #7c3aed; }
.room-dot-color-4 { background: #0ea5e9; }
.room-dot-color-5 { background: #db2777; }
.room-dot-color-6 { background: #059669; }
.room-dot-color-7 { background: #d97706; }
.room-dot-color-8 { background: #4f46e5; }
.room-dot-color-9 { background: #0f766e; }

.meeting-shell {
        display: grid;
        gap: 16px;
        margin-top: 12px;
        width: 100%;
    }
    .meeting-page-hero {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
        padding: 24px 26px;
        background: #ffffff;
        border: 0;
        border-radius: 18px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
    }
    .meeting-page-hero__copy {
        max-width: 720px;
        display: grid;
        gap: 8px;
    }
    .meeting-page-hero__copy h1 {
        margin: 0;
        font-size: clamp(1.9rem, 2vw, 2.4rem);
    }
    .meeting-page-hero__copy p {
        margin: 0;
        color: #475569;
        line-height: 1.7;
    }
    .meeting-page-hero__eyebrow {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        padding: 6px 12px;
        border-radius: 999px;
        background: #f0fdfa;
        color: #0f766e;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .meeting-page-hero__meta {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .meeting-page-chip,
    .meeting-form-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 8px 14px;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        color: #0f172a;
        font-size: 0.86rem;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
    }
    .meeting-main-grid {
        display: grid;
        gap: 18px;
        grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
        align-items: start;
    }
    .meeting-main-grid--booking-only {
        grid-template-columns: minmax(0, 1fr);
    }
    .meeting-side-stack {
        display: grid;
        gap: 18px;
        grid-template-columns: 1fr;
    }
    .meeting-calendar-card,
    .meeting-room-card,
    .meeting-form-card,
    .meeting-history-card {
        padding: 20px 22px;
        border: 0;
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
        min-width: 0;
    }
    .meeting-section-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 14px;
    }
    .meeting-section-head h3 {
        margin: 0;
        font-size: 1.18rem;
    }
    .meeting-section-subtitle {
        margin-top: 4px;
        color: #64748b;
        font-size: 0.92rem;
        line-height: 1.55;
    }
    .meeting-section-context {
        margin-top: 6px;
        color: #0f172a;
        font-weight: 700;
    }
    .meeting-calendar-title {
        min-width: 155px;
        text-align: center;
        font-weight: 700;
        color: #0f172a;
    }
    .meeting-calendar-root {
        margin-top: 10px;
    }
    .calendar-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .calendar-view-btn,
    .calendar-toolbar > .btn {
        border-color: #d7dee7;
        background: #ffffff;
        color: #334155;
        box-shadow: none;
    }
    .calendar-view-btn.is-active {
        background: #0f766e;
        border-color: #0f766e;
        color: #ffffff;
        box-shadow: none;
        font-weight: 800;
    }
    .meeting-room-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .room-details {
        align-items: start;
        margin-top: 0;
        display: grid;
        gap: 14px;
        grid-template-columns: 180px minmax(0, 1fr);
    }
    .room-photo {
        width: 180px;
        height: 148px;
        border-radius: 18px;
        overflow: hidden;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .room-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .room-photo-placeholder { color: #94a3b8; font-size: 0.92rem; }
    .room-name { font-size: 1.22rem; font-weight: 800; }
    .room-meta { color: #64748b; margin-top: 6px; line-height: 1.55; }
    .room-tags, .room-amenities { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
    .room-tag {
        background: #f0fdfa;
        color: #0f766e;
        border-radius: 999px;
        padding: 5px 11px;
        font-size: 0.75rem;
        font-weight: 700;
    }
    .amenity {
        background: #f8fafc;
        color: #334155;
        padding: 5px 11px;
        border-radius: 999px;
        font-size: 0.76rem;
        border: 1px solid #e2e8f0;
    }
    .room-policy {
        margin-top: 12px;
        color: #475569;
        font-size: 0.92rem;
        line-height: 1.6;
        padding: 12px 14px;
        background: #f8fafc;
        border-radius: 14px;
        border: 1px dashed #cbd5e1;
    }
    .status-pill {
        background: #f8fafc;
        color: #334155;
        padding: 7px 12px;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 700;
        border: 1px solid #e2e8f0;
    }
    .meeting-form-card {
        display: grid;
        gap: 12px;
    }
    .meeting-form-card label {
        display: grid;
        gap: 6px;
        color: #0f172a;
        font-weight: 700;
    }
    .meeting-form-card input,
    .meeting-form-card select,
    .meeting-form-card textarea {
        width: 100%;
        box-sizing: border-box;
        min-width: 0;
        border: 1px solid #cfd9e6;
        border-radius: 12px;
        min-height: 42px;
        transition: border-color .16s ease, box-shadow .16s ease;
    }
    .meeting-form-card textarea {
        min-height: 92px;
        resize: vertical;
    }
    .meeting-form-card input:focus,
    .meeting-form-card select:focus,
    .meeting-form-card textarea:focus {
        outline: none;
        border-color: #0f766e;
        box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
    }
    .meeting-form-head {
        padding-bottom: 14px;
        border-bottom: 1px solid #e2e8f0;
        margin-bottom: 2px;
    }
    .meeting-time-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 12px;
    }
    .meeting-time-field { display: flex; flex-direction: column; gap: 6px; }
    .meeting-time-label { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
    .meeting-time-note { color: #64748b; font-size: 12px; font-weight: 500; }
    .meeting-time-caption {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
        margin-top: -2px;
    }
    .meeting-form-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
        padding-top: 4px;
    }
    .meeting-form-actions button[type="submit"] {
        min-height: 44px;
        border: 0;
        border-radius: 12px;
        background: #0f766e;
        color: #ffffff;
        font-weight: 800;
        padding-inline: 18px;
    }
    .meeting-empty-copy {
        margin: 0;
        color: #64748b;
        line-height: 1.6;
    }
    .meeting-history-table-wrap {
        overflow-x: auto;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
    }
    .meeting-history-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    .meeting-history-table thead th {
        background: #f8fafc;
        color: #334155;
        font-size: 0.82rem;
        font-weight: 800;
        padding: 13px 14px;
        text-align: left;
        border-bottom: 1px solid #e2e8f0;
    }
    .meeting-history-table tbody td {
        padding: 14px;
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle;
    }
    .meeting-history-table tbody tr:last-child td { border-bottom: 0; }
    .meeting-history-row--selected td { background: #fef9c3; }
    .meeting-history-cell--room,
    .meeting-history-cell--title {
        font-weight: 700;
        color: #0f172a;
    }
    .meeting-history-cell--time {
        color: #475569;
        font-size: 0.92rem;
        line-height: 1.55;
    }
    .meeting-history-cell--actions {
        min-width: 180px;
    }
    .booking-actions {
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .booking-actions .btn { white-space: nowrap; }
    .booking-btn-cancel { background: #fee2e2 !important; color: #b91c1c !important; border-color: #fecaca !important; }
    .meeting-cancel-form {
        margin: 0;
    }
    .meeting-notify-card {
        max-width: 420px;
    }
    .meeting-notify-title {
        margin-bottom: 6px;
        color: #0f172a;
        font-weight: 800;
    }
    .meeting-notify-message {
        line-height: 1.55;
    }
    .meeting-notify-message.is-success { color: #0f5132; }
    .meeting-notify-message.is-error { color: #b91c1c; }
    .meeting-notify-actions {
        margin-top: 12px;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }
    .meeting-edit-modal {
        display: none;
    }
    .meeting-edit-card {
        width: min(720px, 96vw);
        max-width: 720px;
        border-radius: 18px;
    }
    .meeting-edit-title {
        margin-top: 0;
    }
    .meeting-edit-form {
        display: grid;
        gap: 10px;
    }
    .meeting-edit-form label {
        display: grid;
        gap: 6px;
        color: #0f172a;
        font-weight: 700;
    }
    .meeting-edit-form input,
    .meeting-edit-form select,
    .meeting-edit-form textarea {
        width: 100%;
        min-height: 42px;
        border: 1px solid #cfd9e6;
        border-radius: 12px;
        box-sizing: border-box;
    }
    .meeting-edit-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 4px;
    }
    .meeting-edit-save {
        background: #0f766e !important;
        color: #fff !important;
    }
    @media (max-width: 1180px) {
        .meeting-main-grid {
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 720px) {
        .meeting-shell {
            gap: 12px;
        }
        .meeting-page-hero {
            align-items: flex-start;
        }
        .meeting-page-hero__copy h1 {
            font-size: 1.55rem;
        }
        .meeting-page-hero__meta,
        .meeting-page-chip {
            width: 100%;
        }
        .meeting-page-hero,
        .meeting-calendar-card,
        .meeting-room-card,
        .meeting-form-card,
        .meeting-history-card {
            padding: 16px;
        }
        .calendar-toolbar,
        .meeting-room-actions,
        .meeting-form-actions {
            width: 100%;
            justify-content: stretch;
        }
        .calendar-toolbar .btn,
        .meeting-room-actions .btn,
        .meeting-form-actions .btn,
        .meeting-form-actions a.btn {
            flex: 1 1 140px;
            justify-content: center;
        }
        .calendar-view-btn {
            flex: 1 1 0;
        }
        .meeting-calendar-title {
            width: 100%;
            order: -1;
            text-align: left;
            padding: 8px 0;
        }
        .room-details {
            grid-template-columns: 1fr;
        }
        .room-photo {
            width: 100%;
            height: 190px;
        }
        .meeting-time-label {
            white-space: normal;
        }
        .meeting-history-table-wrap {
            border: 0;
            overflow: visible;
            width: 100%;
            max-width: 100%;
        }
        .meeting-history-table,
        .meeting-history-table tbody,
        .meeting-history-table tr,
        .meeting-history-table td {
            display: block;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        .meeting-history-table thead {
            display: none;
        }
        .meeting-history-table tbody {
            display: grid;
            gap: 10px;
        }
        .meeting-history-table tbody tr {
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #ffffff;
            padding: 12px;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
            overflow: hidden;
        }
        .meeting-history-table tbody td {
            border: 0;
            padding: 4px 0;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        .meeting-history-cell--actions {
            min-width: 0;
            padding-top: 8px !important;
        }
        .booking-actions,
        .booking-actions .btn,
        .meeting-cancel-form,
        .meeting-cancel-form button {
            width: 100%;
        }
        .booking-actions {
            display: grid;
            grid-template-columns: 1fr;
        }
        .meeting-edit-actions {
            display: grid;
            grid-template-columns: 1fr;
        }
    }
    .room-details { align-items:start; }
    .room-photo { width:180px; height:140px; border-radius:14px; overflow:hidden; background:#f3f4f6; display:flex; align-items:center; justify-content:center; }
    .room-photo img { width:100%; height:100%; object-fit:cover; display:block; }
    .room-photo-placeholder { color:#9ca3af; font-size:0.9rem; }
    .room-name { font-size:1.2rem; font-weight:700; }
    .room-meta { color:#6b7280; margin-top:4px; }
    .room-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
    .room-tag { background:#eef2ff; color:#4338ca; border-radius:999px; padding:2px 10px; font-size:0.75rem; }
    .room-amenities { margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
    .amenity { background:#f3f4f6; color:#374151; padding:4px 10px; border-radius:999px; font-size:0.75rem; }
    .room-policy { margin-top:10px; color:#6b7280; font-size:0.9rem; }
    .status-pill { background:#f3f4f6; color:#374151; padding:6px 10px; border-radius:999px; font-size:0.8rem; }
    .booking-actions { display:inline-flex; justify-content:center; align-items:center; gap:8px; flex-wrap:nowrap; white-space:nowrap; }
    .booking-actions .btn { white-space:nowrap; }
    .booking-btn-cancel { background:#fee2e2 !important; color:#b91c1c !important; border-color:#fecaca !important; }
    .meeting-time-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:10px; }
    .meeting-time-field { display:flex; flex-direction:column; gap:6px; }
    .meeting-time-label { display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap; }
    .meeting-time-help { color:#64748b; font-size:12px; line-height:1.2; }
    .meeting-time-note { color:#64748b; font-size:12px; font-weight:400; }

    .cal-empty { color:#6b7280; text-align:center; padding:18px; }
    #meetingEditModal .modal-card { max-height:90vh; overflow:auto; }
    .room-photo {
        border: 1px solid #e2e8f0;
        background: #f8fafc;
    }
    .room-tag {
        background: #f0fdfa;
        color: #0f766e;
    }
    .booking-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        white-space: normal;
    }
    @media (max-width: 720px) {
        .booking-actions {
            display: grid;
            grid-template-columns: 1fr;
            width: 100%;
        }
        .meeting-time-label {
            white-space: normal;
        }
    }
    @media (max-width: 900px) {
        .cal-months { grid-template-columns:repeat(2, minmax(0, 1fr)); }
        .room-details { grid-template-columns: 1fr; }
        .room-photo { width:100%; height:180px; }
    }

    .meeting-shell {
        gap: 14px;
    }
    .meeting-page-hero {
        padding: 18px 20px;
        align-items: center;
    }
    .meeting-page-hero__copy {
        gap: 5px;
    }
    .meeting-page-hero__copy h1 {
        font-size: clamp(1.55rem, 2vw, 2rem);
    }
    .meeting-page-hero__copy p {
        max-width: 780px;
        font-size: 0.94rem;
        line-height: 1.55;
    }
    .meeting-page-hero__eyebrow {
        padding: 4px 10px;
        font-size: 0.72rem;
        letter-spacing: 0.03em;
    }
    .meeting-main-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .meeting-side-stack {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
    .meeting-calendar-card,
    .meeting-room-card,
    .meeting-form-card,
    .meeting-history-card {
        border-radius: 16px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }
    .meeting-form-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .meeting-form-card > .meeting-form-head,
    .meeting-form-card > label:nth-of-type(1),
    .meeting-form-card > label:nth-of-type(2),
    .meeting-form-card > label:nth-of-type(3),
    .meeting-form-card > .meeting-extra-rooms,
    .meeting-form-card > .meeting-time-grid,
    .meeting-form-card > .meeting-time-caption,
    .meeting-form-card > .meeting-form-actions {
        grid-column: 1 / -1;
    }
    .meeting-section-head {
        margin-bottom: 12px;
    }
    .meeting-section-head h3 {
        font-size: 1.08rem;
    }
    .meeting-section-subtitle {
        font-size: 0.86rem;
    }
    .meeting-room-actions .btn,
    .calendar-toolbar .btn {
        min-height: 38px;
        border-radius: 11px;
        font-weight: 800;
    }
    .meeting-history-table-wrap {
        border: 0;
    }
    .meeting-history-table {
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        overflow: hidden;
    }
    @media (max-width: 1180px) {
        .meeting-main-grid {
            grid-template-columns: 1fr;
        }
        .meeting-form-card {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 720px) {
        .meeting-page-hero {
            padding: 16px;
        }
        .meeting-page-hero__copy p {
            font-size: 0.88rem;
        }
        .meeting-main-grid {
            display: grid;
        }
        .meeting-side-stack {
            order: 1;
        }
        .meeting-calendar-card {
            order: 2;
        }
        .meeting-form-card {
            grid-template-columns: 1fr;
        }
        .meeting-form-card > .meeting-form-head,
        .meeting-form-card > label,
        .meeting-form-card > .meeting-extra-rooms,
        .meeting-form-card > .meeting-time-grid,
        .meeting-form-card > .meeting-time-caption,
        .meeting-form-card > .meeting-form-actions {
            grid-column: 1;
        }
        .meeting-form-head {
            display: grid;
        }
        .meeting-form-chip {
            width: 100%;
        }
        .calendar-toolbar {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .calendar-toolbar #cal-prev,
        .calendar-toolbar #cal-next {
            grid-column: span 1;
        }
        .meeting-calendar-title {
            grid-column: 1 / -1;
        }
        .meeting-history-table tbody td::before {
            content: attr(data-label);
            display: block;
            margin-bottom: 2px;
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 800;
        }
        #myBookingsTable {
            table-layout: fixed;
        }
        .meeting-history-cell--room,
        .meeting-history-cell--title {
            font-size: 0.95rem;
        }
        .meeting-history-cell--time {
            font-size: 0.84rem;
        }
    }

    .meeting-room-card,
    .meeting-form-card {
        padding: 22px;
    }
    .meeting-room-card .meeting-section-head,
    .meeting-form-card .meeting-form-head {
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 14px;
    }
    .meeting-room-card .meeting-section-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
    .meeting-room-actions {
        justify-content: flex-end;
    }
    .room-details {
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
        gap: 22px;
        align-items: stretch;
    }
    .room-photo {
        width: 100%;
        height: 260px;
        border-radius: 18px;
        box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.03);
    }
    .room-info {
        display: grid;
        align-content: start;
        gap: 10px;
        min-width: 0;
    }
    .room-name {
        color: #061a36;
        font-size: clamp(1.3rem, 2vw, 1.65rem);
        line-height: 1.25;
    }
    .room-meta {
        margin-top: 0;
        max-width: 760px;
    }
    .room-tags,
    .room-amenities {
        margin-top: 0;
        gap: 8px;
    }
    .room-tag,
    .amenity {
        min-height: 28px;
        display: inline-flex;
        align-items: center;
        font-size: 0.76rem;
        font-weight: 800;
    }
    .room-policy {
        margin-top: 2px;
        border-style: solid;
        border-color: #e2e8f0;
        background: #ffffff;
    }
    .meeting-form-card {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 14px;
    }
    .meeting-form-card > .meeting-form-head,
    .meeting-form-card > label:nth-of-type(1),
    .meeting-form-card > label:nth-of-type(2),
    .meeting-form-card > label:nth-of-type(3),
    .meeting-form-card > .meeting-time-grid,
    .meeting-form-card > .meeting-time-caption,
    .meeting-form-card > .meeting-form-actions {
        grid-column: 1 / -1;
    }
    .meeting-form-card > label:nth-of-type(4),
    .meeting-form-card > label:nth-of-type(5),
    .meeting-form-card > label:nth-of-type(6),
    .meeting-form-card > label:nth-of-type(7) {
        grid-column: span 2;
    }
    .meeting-form-card label {
        color: #334155;
        font-size: 0.9rem;
    }
    .meeting-extra-rooms {
        display: grid;
        gap: 10px;
        padding: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: #f8fafc;
    }
    .meeting-extra-rooms__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }
    .meeting-extra-rooms__title {
        color: #0f172a;
        font-size: 0.92rem;
        font-weight: 800;
    }
    .meeting-extra-rooms__note {
        margin-top: 3px;
        color: #64748b;
        font-size: 0.8rem;
        line-height: 1.45;
    }
    .meeting-extra-rooms__count {
        flex: 0 0 auto;
        padding: 5px 10px;
        border-radius: 999px;
        background: #ffffff;
        border: 1px solid #dbe2ea;
        color: #0f766e;
        font-size: 0.78rem;
        font-weight: 800;
    }
    .meeting-extra-rooms__actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .meeting-extra-rooms__toggle {
        min-height: 34px;
        border: 0;
        border-radius: 999px;
        background: #0f766e;
        color: #ffffff;
        font-size: 0.8rem;
        font-weight: 800;
        padding: 0 12px;
        cursor: pointer;
    }
    .meeting-extra-rooms__toggle.is-open {
        background: #334155;
    }
    .meeting-extra-rooms__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 8px;
    }
    .meeting-extra-rooms__grid[hidden] {
        display: none !important;
    }
    .meeting-form-card .meeting-extra-room-option {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 8px;
        padding: 10px;
        border: 1px solid #dbe2ea;
        border-radius: 12px;
        background: #ffffff;
        cursor: pointer;
    }
    .meeting-extra-room-option.is-primary {
        opacity: 0.55;
        cursor: not-allowed;
    }
    .meeting-extra-room-option input {
        width: 16px;
        min-height: 16px;
        margin-top: 2px;
    }
    .meeting-extra-room-option strong {
        display: block;
        color: #0f172a;
        font-size: 0.86rem;
        line-height: 1.35;
    }
    .meeting-extra-room-option small {
        display: block;
        margin-top: 2px;
        color: #64748b;
        font-size: 0.75rem;
        line-height: 1.35;
    }
    .meeting-form-card input,
    .meeting-form-card select,
    .meeting-form-card textarea {
        background: #ffffff;
    }
    .meeting-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .meeting-form-actions {
        justify-content: flex-end;
        border-top: 1px solid #eef2f7;
        padding-top: 14px;
    }
    .meeting-form-actions button[type="submit"] {
        min-width: 150px;
    }
    @media (max-width: 900px) {
        .meeting-room-card .meeting-section-head {
            grid-template-columns: 1fr;
        }
        .room-details {
            grid-template-columns: 1fr;
        }
        .room-photo {
            height: 220px;
        }
        .meeting-form-card {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 720px) {
        .meeting-room-card,
        .meeting-form-card {
            padding: 16px;
        }
        .room-photo {
            height: 190px;
        }
        .meeting-form-card,
        .meeting-time-grid {
            grid-template-columns: 1fr;
        }
        .meeting-form-card > label:nth-of-type(4),
        .meeting-form-card > label:nth-of-type(5),
        .meeting-form-card > label:nth-of-type(6),
        .meeting-form-card > label:nth-of-type(7) {
            grid-column: 1;
        }
        .meeting-form-actions button[type="submit"] {
            width: 100%;
        }
        .meeting-extra-rooms__head {
            display: grid;
        }
        .meeting-extra-rooms__actions {
            justify-content: flex-start;
        }
        .meeting-extra-rooms__count {
            width: fit-content;
        }
        .meeting-extra-rooms__grid {
            grid-template-columns: 1fr;
        }
    }

    /* Booking section refresh */
    .meeting-side-stack {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        min-width: 0;
    }
    .meeting-room-card,
    .meeting-form-card {
        overflow: hidden;
        border: 1px solid #dbe6f0;
        border-radius: 22px;
        background: #ffffff;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
    }
    .meeting-room-card .meeting-section-head,
    .meeting-form-card .meeting-form-head {
        margin: 0 0 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #edf2f7;
    }
    .meeting-room-card .meeting-section-head h3,
    .meeting-form-card .meeting-form-head h3 {
        margin: 0;
        color: #061a36;
        font-size: 1.22rem;
        line-height: 1.3;
    }
    .meeting-section-subtitle {
        color: #64748b;
        line-height: 1.5;
    }
    .meeting-room-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
    }
    .meeting-room-actions .btn,
    .meeting-form-chip,
    .status-pill {
        min-height: 36px;
        border-radius: 999px;
        white-space: nowrap;
    }
    .room-details {
        display: grid;
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
        gap: 18px;
        align-items: stretch;
        min-width: 0;
        padding: 12px;
        border: 1px solid #edf2f7;
        border-radius: 18px;
        background: #f8fafc;
    }
    .room-photo {
        width: 100%;
        height: 235px;
        border-radius: 16px;
        background: #eef3f8;
        box-shadow: none;
    }
    .room-info {
        min-width: 0;
        padding: 4px 2px;
        display: grid;
        align-content: start;
        gap: 10px;
    }
    .room-name {
        color: #061a36;
        font-size: clamp(1.2rem, 1.8vw, 1.55rem);
        line-height: 1.28;
        overflow-wrap: anywhere;
    }
    .room-meta {
        color: #475569;
        line-height: 1.5;
    }
    .room-tags,
    .room-amenities {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }
    .room-tag,
    .amenity {
        border: 1px solid #dbe6f0;
        border-radius: 999px;
        background: #ffffff;
        color: #334155;
        font-size: 0.75rem;
        font-weight: 800;
        line-height: 1.2;
        padding: 6px 9px;
    }
    .room-policy {
        margin: 0;
        padding: 10px 12px;
        border: 1px solid #dbe6f0;
        border-radius: 14px;
        background: #ffffff;
        color: #475569;
        line-height: 1.45;
    }
    .meeting-form-card {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 14px 12px;
    }
    .meeting-form-card > .meeting-form-head,
    .meeting-form-card > label:nth-of-type(1),
    .meeting-form-card > .meeting-extra-rooms,
    .meeting-form-card > label:nth-of-type(2),
    .meeting-form-card > label:nth-of-type(3),
    .meeting-form-card > .meeting-time-grid,
    .meeting-form-card > .meeting-time-caption,
    .meeting-form-card > .meeting-form-actions {
        grid-column: 1 / -1;
    }
    .meeting-form-card > label:nth-of-type(4),
    .meeting-form-card > label:nth-of-type(5),
    .meeting-form-card > label:nth-of-type(6),
    .meeting-form-card > label:nth-of-type(7) {
        grid-column: span 6;
    }
    .meeting-form-card label {
        min-width: 0;
        color: #334155;
        font-size: 0.86rem;
        font-weight: 800;
        gap: 7px;
    }
    .meeting-form-card input,
    .meeting-form-card select,
    .meeting-form-card textarea {
        width: 100%;
        min-height: 45px;
        border: 1px solid #d4e0ea;
        border-radius: 13px;
        background: #ffffff;
        color: #061a36;
        font-size: 0.94rem;
        padding: 9px 12px;
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
    }
    .meeting-form-card textarea {
        min-height: 108px;
        resize: vertical;
    }
    .meeting-form-card input:focus,
    .meeting-form-card select:focus,
    .meeting-form-card textarea:focus {
        border-color: #0f766e;
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
        outline: none;
    }
    .meeting-extra-rooms {
        padding: 13px;
        border: 1px solid #dbe6f0;
        border-radius: 16px;
        background: #f8fafc;
    }
    .meeting-extra-rooms__grid {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
    .meeting-form-card .meeting-extra-room-option {
        border-color: #dbe6f0;
        border-radius: 14px;
        transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }
    .meeting-form-card .meeting-extra-room-option:has(input:checked) {
        border-color: #0f766e;
        background: #ecfdf5;
    }
    .meeting-time-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        min-width: 0;
    }
    .meeting-time-caption {
        margin-top: -2px;
        color: #64748b;
        font-size: 0.82rem;
        line-height: 1.45;
    }
    .meeting-form-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        margin-top: 2px;
        padding-top: 16px;
        border-top: 1px solid #edf2f7;
    }
    .meeting-form-actions button[type="submit"] {
        min-width: 170px;
        min-height: 46px;
        border-radius: 13px;
        box-shadow: 0 10px 20px rgba(15, 118, 110, 0.18);
    }
    @media (min-width: 1180px) {
        .meeting-room-card,
        .meeting-form-card {
            padding: 24px;
        }
    }
    @media (max-width: 900px) {
        .room-details {
            grid-template-columns: 1fr;
        }
        .room-photo {
            height: 220px;
        }
        .meeting-room-actions {
            justify-content: flex-start;
        }
        .meeting-form-card {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .meeting-form-card > .meeting-form-head,
        .meeting-form-card > label:nth-of-type(1),
        .meeting-form-card > .meeting-extra-rooms,
        .meeting-form-card > label:nth-of-type(2),
        .meeting-form-card > label:nth-of-type(3),
        .meeting-form-card > .meeting-time-grid,
        .meeting-form-card > .meeting-time-caption,
        .meeting-form-card > .meeting-form-actions {
            grid-column: 1 / -1;
        }
    }
    @media (max-width: 720px) {
        .meeting-side-stack {
            gap: 14px;
        }
        .meeting-room-card,
        .meeting-form-card {
            padding: 15px;
            border-radius: 18px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        }
        .meeting-room-card .meeting-section-head,
        .meeting-form-card .meeting-form-head {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            padding-bottom: 13px;
        }
        .meeting-room-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            width: 100%;
        }
        .meeting-room-actions .btn,
        .status-pill {
            width: 100%;
            justify-content: center;
            min-width: 0;
            padding-inline: 10px;
        }
        .status-pill {
            grid-column: 1 / -1;
        }
        .room-details {
            padding: 10px;
            border-radius: 16px;
        }
        .room-photo {
            height: 185px;
            border-radius: 14px;
        }
        .room-name {
            font-size: 1.15rem;
        }
        .meeting-form-card {
            grid-template-columns: 1fr;
            gap: 12px;
        }
        .meeting-form-card > .meeting-form-head,
        .meeting-form-card > label,
        .meeting-form-card > .meeting-extra-rooms,
        .meeting-form-card > .meeting-time-grid,
        .meeting-form-card > .meeting-time-caption,
        .meeting-form-card > .meeting-form-actions {
            grid-column: 1 / -1 !important;
        }
        .meeting-extra-rooms__head,
        .meeting-extra-rooms__actions {
            display: grid;
            grid-template-columns: 1fr;
            justify-items: stretch;
        }
        .meeting-extra-rooms__count,
        .meeting-extra-rooms__toggle {
            width: 100%;
            text-align: center;
            justify-content: center;
        }
        .meeting-extra-rooms__grid,
        .meeting-time-grid {
            grid-template-columns: 1fr;
        }
        .meeting-form-actions {
            justify-content: stretch;
        }
        .meeting-form-actions button[type="submit"],
        .meeting-form-actions .btn {
            width: 100%;
        }
    }

    .meeting-history-card {
        overflow: hidden;
        border: 1px solid #dbe6f0;
        border-radius: 22px;
        background: #ffffff;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
    }
    .meeting-history-card .meeting-section-head {
        margin-bottom: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid #edf2f7;
    }
    .meeting-history-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        border-color: #dbe6f0;
        border-radius: 16px;
    }
    .meeting-history-table {
        min-width: 720px;
    }
    .meeting-history-table thead th {
        background: #f8fafc;
        color: #475569;
    }
    .meeting-history-table tbody td {
        color: #334155;
    }
    .meeting-history-cell--room,
    .meeting-history-cell--title {
        color: #061a36;
        overflow-wrap: anywhere;
    }
    .meeting-history-cell--time {
        color: #64748b;
    }
    .booking-actions {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
        white-space: normal;
    }
    .booking-actions .btn,
    .meeting-cancel-form button {
        border-radius: 999px;
    }
    @media (max-width: 720px) {
        .meeting-history-card {
            padding: 15px;
            border-radius: 18px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
        }
        .meeting-history-card .meeting-section-head {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .meeting-history-card .meeting-form-chip {
            width: 100%;
            justify-content: center;
        }
        .meeting-history-table-wrap {
            overflow: visible;
            border: 0;
            border-radius: 0;
        }
        .meeting-history-table {
            min-width: 0;
            width: 100%;
        }
        .meeting-history-table,
        .meeting-history-table tbody,
        .meeting-history-table tr,
        .meeting-history-table td {
            display: block;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        .meeting-history-table thead {
            display: none;
        }
        .meeting-history-table tbody {
            display: grid;
            gap: 10px;
        }
        .meeting-history-table tbody tr {
            padding: 12px;
            border: 1px solid #dbe6f0;
            border-radius: 16px;
            background: #ffffff;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
            overflow: hidden;
        }
        .meeting-history-table tbody td {
            border: 0;
            padding: 5px 0;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .meeting-history-table tbody td::before {
            display: block;
            margin-bottom: 2px;
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 800;
            line-height: 1.35;
        }
        .meeting-history-cell--actions {
            padding-top: 10px !important;
        }
        .booking-actions,
        .booking-actions .btn,
        .meeting-cancel-form,
        .meeting-cancel-form button {
            width: 100%;
        }
        .booking-actions {
            display: grid;
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 900px) {
        .meeting-history-card,
        .meeting-history-card * {
            max-width: 100%;
            box-sizing: border-box;
        }
        .meeting-history-table-wrap {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden !important;
            border: 0;
            border-radius: 0;
        }
        #myBookingsTable.meeting-history-table {
            display: block;
            width: 100%;
            min-width: 0 !important;
            table-layout: fixed;
        }
        #myBookingsTable thead {
            display: none;
        }
        #myBookingsTable tbody {
            display: grid;
            width: 100%;
            gap: 10px;
        }
        #myBookingsTable tr,
        #myBookingsTable td {
            display: block;
            width: 100%;
            min-width: 0 !important;
            max-width: 100%;
        }
        #myBookingsTable tr {
            padding: 12px;
            border: 1px solid #dbe6f0;
            border-radius: 16px;
            background: #ffffff;
            overflow: hidden;
        }
        #myBookingsTable td {
            border: 0;
            padding: 5px 0;
            overflow-wrap: anywhere;
            word-break: break-word;
            white-space: normal;
        }
        .meeting-history-cell--actions,
        .booking-actions,
        .booking-actions .btn,
        .meeting-cancel-form,
        .meeting-cancel-form button {
            width: 100%;
            min-width: 0 !important;
        }
    }

.meeting-calendar-meta { display: grid; gap: 12px; }
    .calendar-summary-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .calendar-summary-card { padding: 14px 16px; border-radius: 18px; border: 1px solid #dbeafe; background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%); display: grid; gap: 4px; min-width: 0; }
    .calendar-summary-card__label { color: #475569; font-size: 0.82rem; font-weight: 700; }
    .calendar-summary-card__value { color: #0f172a; font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
    .calendar-summary-card__meta { color: #64748b; font-size: 0.82rem; line-height: 1.45; }
    .calendar-legend { display: flex; gap: 10px; flex-wrap: wrap; }
    .calendar-legend__item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; font-size: 0.82rem; font-weight: 700; }
    .calendar-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; flex: 0 0 auto; }
    .calendar-dot--approved { background: #16a34a; }
    .calendar-dot--pending { background: #f59e0b; }
    .calendar-dot--holiday { background: #ef4444; }
    .calendar-dot--today { background: #2563eb; }
    .calendar-shell { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
    .calendar-shell--single { grid-template-columns: minmax(0, 1fr); }
    .calendar-shell--month { grid-template-columns: minmax(0, 1fr); }
    .calendar-hint { margin-bottom: 10px; color: #64748b; font-size: 0.88rem; line-height: 1.5; }
    .calendar-side-panel { position: static; top: 12px; width: 100%; max-width: none; padding: 18px; border-radius: 20px; background: #ffffff; border: 1px solid #dbe6f0; display: grid; gap: 14px; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05); }
    .calendar-side-panel--collapsible { padding: 0; overflow: hidden; }
    .calendar-side-panel--collapsible[open] { padding-bottom: 18px; }
    .calendar-side-panel__summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px; cursor: pointer; list-style: none; border-bottom: 1px solid transparent; }
    .calendar-side-panel__summary::-webkit-details-marker { display: none; }
    .calendar-side-panel--collapsible[open] .calendar-side-panel__summary { border-bottom-color: #eef2f7; }
    .calendar-side-panel__summary-main { min-width: 0; display: grid; gap: 5px; }
    .calendar-side-panel__summary-action { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 7px 13px; border-radius: 999px; background: #0f766e; color: #ffffff; font-size: 0.82rem; font-weight: 900; white-space: nowrap; }
    .calendar-side-panel__summary-action::before { content: attr(data-closed); }
    .calendar-side-panel--collapsible[open] .calendar-side-panel__summary-action::before { content: attr(data-open); }
    .calendar-side-panel__count { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 999px; background: #e6fffb; color: #0f766e; font-size: 0.78rem; font-weight: 900; overflow-wrap: anywhere; }
    .calendar-side-panel--collapsible > .calendar-side-panel__list,
    .calendar-side-panel--collapsible > .calendar-side-panel__empty { margin: 0 18px; }
    .calendar-side-panel__title { margin: 0; color: #061a36; font-size: 1.08rem; font-weight: 900; line-height: 1.25; }
    .calendar-side-panel__meta { color: #64748b; font-size: 0.86rem; line-height: 1.5; }
    .calendar-side-panel__empty { padding: 18px; border-radius: 16px; background: #f8fafc; border: 1px dashed #cbd5e1; color: #64748b; line-height: 1.6; text-align: center; }
    .calendar-side-panel__empty strong { display: block; margin-bottom: 4px; color: #0f172a; font-size: 0.98rem; }
    .calendar-side-panel__list { display: grid; gap: 14px; }
    .calendar-room-group { display: grid; gap: 10px; min-width: 0; }
    .calendar-room-group__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; }
    .calendar-room-group__title { min-width: 0; display: inline-flex; align-items: center; gap: 8px; color: #061a36; font-size: 0.95rem; font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; }
    .calendar-room-group__count { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; background: #ffffff; border: 1px solid #dbe6f0; color: #0f766e; font-size: 0.76rem; font-weight: 900; white-space: nowrap; }
    .calendar-room-group__body { position: relative; display: grid; gap: 12px; }
    .calendar-room-group__body::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 61px; width: 2px; border-radius: 999px; background: #e2e8f0; }
    .calendar-detail-card { position: relative; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 18px; border: 1px solid #e2e8f0; background: #ffffff; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045); }
    .calendar-detail-card::before { content: ""; position: absolute; top: 27px; left: 56px; width: 12px; height: 12px; border-radius: 999px; background: #0f766e; box-shadow: 0 0 0 5px #ecfdf5; }
    .calendar-detail-card--holiday { background: #fffafa; border-color: #fecaca; }
    .calendar-detail-card--holiday::before { background: #ef4444; box-shadow: 0 0 0 5px #fee2e2; }
    .calendar-detail-card__time { display: grid; align-content: start; gap: 4px; padding: 8px 4px 8px 0; text-align: right; }
    .calendar-detail-card__time-main { color: #061a36; font-size: 1.06rem; font-weight: 900; line-height: 1; }
    .calendar-detail-card__time-end { color: #64748b; font-size: 0.76rem; font-weight: 800; line-height: 1.35; }
    .calendar-detail-card__body { min-width: 0; display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: #f8fafc; border: 1px solid #edf2f7; }
    .calendar-detail-card__header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; min-width: 0; }
    .calendar-detail-card__heading { min-width: 0; display: flex; align-items: flex-start; gap: 8px; }
    .calendar-detail-card__index { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 24px; padding: 0 8px; border-radius: 999px; background: #e6fffb; color: #0f766e; font-size: 0.72rem; font-weight: 900; }
    .calendar-detail-card__title { margin: 0; color: #0f172a; font-size: 1rem; font-weight: 900; line-height: 1.4; overflow-wrap: anywhere; }
    .calendar-detail-card__meta { color: #64748b; font-size: 0.84rem; line-height: 1.5; }
    .calendar-detail-card__room { display: inline-flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; min-height: 30px; padding: 5px 10px; border-radius: 999px; background: #ffffff; border: 1px solid #e2e8f0; color: #334155; font-size: 0.82rem; font-weight: 800; }
    .calendar-detail-card__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .calendar-detail-card__details > div { min-width: 0; padding: 9px 10px; border-radius: 12px; background: #ffffff; border: 1px solid #edf2f7; }
    .calendar-detail-card__label { color: #64748b; font-size: 0.74rem; font-weight: 800; }
    .calendar-detail-card__value { color: #0f172a; font-size: 0.9rem; line-height: 1.55; word-break: break-word; }
    .calendar-status-pill { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 800; white-space: nowrap; }
    .calendar-status-pill--approved { background: #dcfce7; color: #166534; }
    .calendar-status-pill--pending { background: #fef3c7; color: #92400e; }
    .calendar-status-pill--rejected, .calendar-status-pill--canceled, .calendar-status-pill--cancel_pending { background: #fee2e2; color: #b91c1c; }
    .calendar-month-board-wrap { width: 100%; overflow: visible; padding-bottom: 0; }
    .calendar-month-board { width: 100%; min-width: 0; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
    .cal-grid--weekdays { margin-bottom: 10px; }
    .cal-grid--days { align-items: stretch; }
    .cal-dow { min-width: 0; padding: 0 2px; color: #64748b; font-size: 0.76rem; font-weight: 800; text-align: center; }
    .cal-day {
        appearance: none;
        -webkit-appearance: none;
        width: 100%;
        min-width: 0;
        min-height: 136px;
        height: auto;
        padding: 8px;
        border: 1px solid #dbe3ef;
        border-radius: 16px;
        background: #ffffff;
        color: #0f172a;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;
        text-align: left;
        line-height: 1.25;
        box-shadow: none;
        cursor: pointer;
        overflow: hidden;
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }
    .cal-day:hover { transform: translateY(-1px); box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06); border-color: #93c5fd; }
    .cal-day.is-selected { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
    .cal-day.is-today { box-shadow: inset 0 0 0 1px #2563eb; }
    .cal-day.muted { cursor: default; pointer-events: none; }
    .cal-day--empty { background: #f8fafc; border-style: dashed; border-color: #e2e8f0; }
    .cal-day__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
    .cal-date { font-size: 0.88rem; font-weight: 800; line-height: 1; }
    .cal-badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
    .cal-badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 999px; font-size: 0.64rem; font-weight: 800; }
    .cal-badge--today { background: #dbeafe; color: #1d4ed8; }
    .cal-badge--holiday { background: #fee2e2; color: #b91c1c; }
    .cal-items { display: grid; gap: 4px; align-content: start; min-height: 0; }
    .cal-empty-state { color: #64748b; font-size: 0.7rem; line-height: 1.35; font-weight: 700; }
    .cal-holiday-note { color: #b91c1c; font-size: 0.68rem; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .cal-item { border-left: 3px solid #cbd5e1; border-radius: 10px; padding: 5px 6px; background: #f8fafc; display: grid; gap: 3px; white-space: normal; }
    .cal-item.pending { border-left-color: #f59e0b; }
    .cal-item.approved { border-left-color: #16a34a; }
    .cal-item__top { display: flex; align-items: center; gap: 6px; min-width: 0; }
    .cal-item__time { color: #475569; font-size: 0.66rem; font-weight: 800; }
    .cal-item__title { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.68rem; font-weight: 700; color: #0f172a; }
    .cal-item__room { color: #64748b; font-size: 0.66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cal-count-more { color: #64748b; font-size: 0.72rem; font-weight: 700; }
    .calendar-year-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .calendar-year-card { padding: 16px; border: 1px solid #dbe3ef; border-radius: 18px; background: #ffffff; display: grid; gap: 12px; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
    .calendar-year-card:hover { transform: translateY(-1px); box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06); border-color: #93c5fd; }
    .calendar-year-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .calendar-year-card__header h4 { margin: 0; color: #0f172a; font-size: 1rem; }
    .calendar-year-card__count { color: #2563eb; font-size: 1.25rem; font-weight: 800; line-height: 1; }
    .calendar-year-card__stats { display: flex; gap: 8px; flex-wrap: wrap; }
    .calendar-year-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; font-size: 0.76rem; font-weight: 700; }
    .calendar-year-card__list { display: grid; gap: 8px; }
    .calendar-year-item { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; background: #f8fafc; }
    .calendar-year-item__title { color: #0f172a; font-size: 0.88rem; font-weight: 700; line-height: 1.45; }
    .calendar-year-item__meta { color: #64748b; font-size: 0.78rem; line-height: 1.4; }
    .cal-empty { padding: 24px 18px; border-radius: 16px; border: 1px dashed #cbd5e1; background: #f8fafc; }
    @media (max-width: 1180px) {
        .calendar-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .calendar-year-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 720px) {
        .calendar-summary-grid, .calendar-year-grid { grid-template-columns: 1fr; }
        .cal-grid { gap: 6px; }
        .cal-dow { font-size: 0.7rem; }
        .cal-day { min-height: 122px; border-radius: 14px; padding: 7px; }
    }
    @media (max-width: 720px) {
        .meeting-calendar-card {
            padding: 16px 14px;
            border-radius: 18px;
        }
        .meeting-calendar-card .meeting-section-head {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            width: 100%;
            gap: 12px;
            justify-content: stretch;
            align-items: stretch;
        }
        .meeting-calendar-card .meeting-section-head > * {
            width: 100%;
            min-width: 0;
        }
        .meeting-calendar-card .meeting-section-head h3 {
            font-size: 1.18rem;
            text-align: center;
        }
        .meeting-calendar-card .meeting-section-subtitle,
        .meeting-section-context {
            text-align: center;
        }
        .calendar-toolbar {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            width: 100%;
            max-width: none;
            box-sizing: border-box;
            justify-self: stretch;
            padding: 10px;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #f8fafc;
        }
        .meeting-calendar-title {
            grid-column: 1 / -1;
            order: -2;
            width: 100%;
            min-width: 0;
            padding: 2px 0 6px;
            color: #0f172a;
            font-size: 1.15rem;
            font-weight: 900;
            text-align: center;
        }
        .calendar-view-btn {
            min-height: 34px;
            padding: 0 8px;
            border-radius: 999px;
            font-size: 0.78rem;
            width: 100%;
            min-width: 0;
        }
        .calendar-toolbar #cal-prev,
        .calendar-toolbar #cal-next {
            grid-column: span 1;
            min-height: 40px;
            border-radius: 12px;
            width: 100%;
            min-width: 0;
        }
        .calendar-toolbar #cal-prev {
            grid-column: 1 / 2;
        }
        .calendar-toolbar #cal-next {
            grid-column: 3 / 4;
        }
        .meeting-calendar-meta {
            gap: 10px;
        }
        .calendar-summary-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .calendar-summary-card {
            padding: 10px 12px;
            border-color: #e2e8f0;
            border-radius: 14px;
            background: #ffffff;
        }
        .calendar-summary-card__label,
        .calendar-summary-card__meta {
            font-size: 0.72rem;
        }
        .calendar-summary-card__value {
            font-size: 1.08rem;
        }
        .calendar-legend {
            gap: 7px;
            justify-content: center;
        }
        .calendar-legend__item {
            min-height: 30px;
            padding: 0 10px;
            font-size: 0.74rem;
            background: #ffffff;
        }
        .calendar-hint {
            margin: 0;
            padding: 9px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            background: #f8fafc;
            text-align: center;
            font-size: 0.78rem;
        }
        .calendar-month-board-wrap {
            overflow: visible;
        }
        .cal-grid--weekdays {
            display: none;
        }
        .cal-grid--days {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
        }
        .cal-day--empty {
            display: none;
        }
        .cal-day {
            min-height: 82px;
            padding: 12px;
            border-radius: 16px;
            border-color: #e2e8f0;
            background: #ffffff;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.045);
        }
        .cal-day.holiday,
        .cal-day.is-holiday {
            background: linear-gradient(180deg, #fff7f7 0%, #ffffff 72%);
            border-color: var(--color-danger-border);
        }
        .cal-day.is-today {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
        }
        .cal-day__header {
            align-items: center;
        }
        .cal-date {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 30px;
            height: 30px;
            border-radius: 999px;
            background: #f1f5f9;
            font-size: 0.9rem;
        }
        .cal-badge {
            min-height: 22px;
            padding: 0 8px;
            font-size: 0.68rem;
        }
        .cal-items {
            gap: 6px;
        }
        .cal-item {
            padding: 8px 10px;
            border-radius: 12px;
            background: #f8fafc;
        }
        .cal-item__top {
            align-items: flex-start;
        }
        .cal-item__time,
        .cal-item__room,
        .cal-count-more {
            font-size: 0.72rem;
        }
        .cal-item__title {
            white-space: normal;
            font-size: 0.78rem;
            line-height: 1.35;
        }
        .calendar-side-panel {
            padding: 14px;
            border-radius: 16px;
            border-color: #e2e8f0;
            background: #ffffff;
        }
        .calendar-side-panel--collapsible {
            padding: 0;
        }
        .calendar-side-panel--collapsible[open] {
            padding-bottom: 14px;
        }
        .calendar-side-panel--collapsible > .calendar-side-panel__list,
        .calendar-side-panel--collapsible > .calendar-side-panel__empty {
            margin: 0 14px;
        }
        .calendar-side-panel__summary {
            display: grid;
            padding: 14px;
        }
        .calendar-side-panel__summary-action {
            width: 100%;
        }
        .calendar-room-group__head {
            display: grid;
        }
        .calendar-room-group__body::before {
            left: 22px;
        }
        .calendar-detail-card {
            grid-template-columns: minmax(0, 1fr);
            gap: 8px;
            padding: 12px;
            border-radius: 14px;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
        }
        .calendar-detail-card::before {
            top: 24px;
            left: 17px;
        }
        .calendar-detail-card__time {
            display: flex;
            align-items: baseline;
            gap: 6px;
            padding: 0 0 0 24px;
            text-align: left;
        }
        .calendar-detail-card__body {
            padding: 11px;
        }
        .calendar-detail-card__header {
            display: grid;
        }
        .calendar-detail-card__details {
            grid-template-columns: 1fr;
        }
        .calendar-year-grid {
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .calendar-year-card {
            border-radius: 16px;
        }
    }



/* Meeting my bookings shared-system alignment. */
.my-bookings-page.page-stack {
    gap: var(--space-4);
}

.my-bookings-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.my-bookings-header.page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
}

.my-bookings-title.page-hero-main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.my-bookings-hero-copy {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.my-bookings-title .page-title,
.my-bookings-control-head .section-title,
.my-bookings-group-head h2,
.my-booking-title-row .record-title {
    margin: 0;
    overflow-wrap: anywhere;
}

.my-bookings-headline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.my-bookings-header-actions.page-hero-aside {
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.my-bookings-header-actions .btn {
    min-width: 136px;
    min-height: var(--btn-height);
    white-space: nowrap;
}

.my-bookings-overview.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.my-bookings-overview .my-bookings-stat.metric-card {
    display: grid;
    align-content: center;
    gap: var(--space-1);
    min-height: 92px;
    text-decoration: none;
    color: var(--text-strong);
}

.my-bookings-overview .my-bookings-stat.is-active {
    border-color: var(--color-primary);
}

.my-bookings-overview .my-bookings-stat .metric-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    color: var(--text-soft);
    font-size: var(--font-size-sm);
    font-weight: 800;
    line-height: 1.25;
}

.my-bookings-overview .my-bookings-stat .metric-head > span {
    min-width: 0;
    color: inherit;
    overflow-wrap: anywhere;
}

.my-bookings-overview .my-bookings-stat .metric-icon {
    flex: 0 0 auto;
}

.my-bookings-controlbar.section-card,
.my-bookings-content.section-card,
.my-bookings-group.section-card {
    display: grid;
    gap: var(--space-4);
}

.my-bookings-control-head.section-head,
.my-bookings-group-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}

.my-bookings-query.badge-soft,
.my-bookings-group-head > .badge-soft {
    flex: 0 0 auto;
}

.my-bookings-tabs {
    display: grid;
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: 2px;
}

.my-bookings-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 42px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-strong);
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    line-height: 1.25;
}

.my-bookings-tabs a span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.my-bookings-tabs a b {
    flex: 0 0 auto;
    color: inherit;
    font-weight: 900;
}

.my-bookings-tabs a.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--surface);
}

.my-bookings-search.filter-panel {
    padding: var(--space-3);
}

.my-bookings-search-grid.filter-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-3);
}

.my-bookings-search .form-field,
.my-bookings-search .form-actions {
    margin: 0;
}

.my-bookings-search input[name="q"] {
    width: 100%;
    min-height: var(--control-height);
}

.my-bookings-search-actions.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.my-bookings-search-actions .btn {
    min-width: calc(var(--btn-height) * 3);
    min-height: var(--btn-height);
    white-space: nowrap;
}

.my-bookings-list,
.my-bookings-groups {
    display: grid;
    gap: var(--space-3);
}

.my-booking-item.record-card {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
    border-left-width: 4px;
    overflow: hidden;
}

.my-booking-item.record-card.is-approved {
    border-left-color: var(--color-success);
}

.my-booking-item.record-card.is-pending,
.my-booking-item.record-card.is-canceling {
    border-left-color: var(--color-warning);
}

.my-booking-item.record-card.is-rejected,
.my-booking-item.record-card.is-canceled {
    border-left-color: var(--color-danger);
}

.my-booking-record-head.record-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
}

.my-booking-main.record-main {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.my-booking-title-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.my-booking-title-row .record-title {
    flex: 1 1 240px;
    min-width: 0;
    line-height: 1.35;
}

.my-booking-room.record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--text-soft);
    overflow-wrap: anywhere;
}

.my-booking-status.badge-soft {
    width: fit-content;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.my-booking-details.record-detail-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}

.my-booking-details .content-box,
.my-booking-purpose.content-box,
.my-booking-sync.content-box {
    min-width: 0;
    overflow-wrap: anywhere;
}

.my-booking-purpose.content-box {
    display: grid;
    gap: var(--space-1);
}

.my-booking-purpose .content-title {
    color: var(--text-soft);
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.my-booking-purpose .content-text {
    color: var(--text-strong);
}

.my-booking-sync.content-box {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}

.my-booking-actions.record-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    min-width: 0;
}

.my-booking-actions form {
    display: contents;
}

.my-booking-actions .btn,
.my-booking-actions button {
    min-width: 112px;
    min-height: var(--btn-height);
    white-space: nowrap;
}

.my-booking-action-note {
    display: inline-flex;
    align-items: center;
    min-height: var(--btn-height);
    color: var(--text-soft);
    font-weight: 800;
}

.my-bookings-empty.empty-state .btn {
    margin-top: var(--space-2);
}

@media (max-width: 1180px) {
    .my-bookings-overview.metric-grid,
    .my-booking-details.record-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .my-bookings-header.page-hero,
    .my-bookings-control-head.section-head,
    .my-bookings-group-head,
    .my-booking-record-head.record-head,
    .my-bookings-search-grid.filter-grid {
        grid-template-columns: 1fr;
    }

    .my-bookings-title.page-hero-main {
        align-items: flex-start;
    }

    .my-bookings-header-actions.page-hero-aside,
    .my-bookings-header-actions .btn,
    .my-bookings-search-actions.form-actions,
    .my-bookings-search-actions .btn,
    .my-booking-actions.record-actions,
    .my-booking-actions .btn,
    .my-booking-actions button {
        width: 100%;
    }

    .my-bookings-header-actions.page-hero-aside,
    .my-bookings-search-actions.form-actions,
    .my-booking-actions.record-actions {
        justify-content: stretch;
    }
}

@media (max-width: 520px) {
    .my-bookings-overview.metric-grid,
    .my-bookings-tabs,
    .my-booking-details.record-detail-grid {
        grid-template-columns: 1fr;
    }

    .my-bookings-title.page-hero-main {
        display: grid;
    }

    .my-bookings-controlbar.section-card,
    .my-bookings-content.section-card,
    .my-bookings-group.section-card,
    .my-booking-item.record-card {
        padding: var(--space-3);
    }
}

/* Meeting report components. Centralized from app/Modules/Meeting/Views/report.php. */
.meeting-report-section-title.is-compact {
    font-size: 16px;
}
.meeting-report-empty.is-room-empty {
    padding: 24px 12px;
}

.meeting-report-page,
.meeting-report-page * {
    box-sizing: border-box;
}
.meeting-report-page {
    display: grid;
    gap: 18px;
    max-width: 1220px;
    margin: 0 auto;
    padding-bottom: 28px;
    color: #0f172a;
}
.meeting-report-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    padding: 24px;
    border: 1px solid #d8e4f0;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #eef8f6 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}
.meeting-report-kicker {
    width: fit-content;
    margin-bottom: 9px;
    padding: 5px 11px;
    border: 1px solid #bfe4dc;
    border-radius: 999px;
    background: #eefbf8;
    color: #0f766e;
    font-size: 12px;
    font-weight: 800;
}
.meeting-report-title {
    margin: 0;
    color: #06152f;
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.18;
    letter-spacing: 0;
}
.meeting-report-subtitle {
    max-width: 780px;
    margin: 8px 0 0;
    color: #5b6f88;
    font-size: 14px;
    line-height: 1.7;
}
.meeting-report-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.meeting-report-button {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #cfdceb;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #ffffff;
    color: #0f172a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
}
.meeting-report-button.primary {
    border-color: #0f766e;
    background: #0f766e;
    color: #ffffff;
}
.meeting-report-button:hover,
.meeting-report-button:focus {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}
.meeting-report-panel {
    border: 1px solid #d8e4f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.055);
}
.meeting-report-filter {
    padding: 18px;
    display: grid;
    gap: 16px;
}
.meeting-report-status-card {
    padding: 18px;
    display: grid;
    gap: 16px;
}
.meeting-report-export-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid #ccfbf1;
    border-radius: 18px;
    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
    box-shadow: 0 12px 26px rgba(15, 118, 110, 0.08);
    min-width: 0;
}
.meeting-report-export-card .meeting-report-section-copy {
    max-width: 720px;
}
.meeting-report-export-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(136px, 1fr));
    gap: 8px;
    min-width: 0;
}
.meeting-report-export-actions .meeting-report-button {
    width: 100%;
    min-height: 44px;
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(15, 118, 110, 0.18);
    white-space: nowrap;
}
.meeting-report-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e6edf5;
}
.meeting-report-section-title {
    margin: 0;
    color: #06152f;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 900;
}
.meeting-report-section-copy {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}
.meeting-report-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}
.meeting-report-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}
.meeting-report-label {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}
.meeting-report-field input,
.meeting-report-field select {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 1px solid #cfdceb;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    padding: 0 11px;
}
.meeting-report-field input:focus,
.meeting-report-field select:focus {
    border-color: #0f766e;
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.meeting-report-filter-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    grid-column: 1 / -1;
}
.meeting-report-status-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.meeting-report-tab {
    min-width: 0;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid #d8e4f0;
    border-radius: 14px;
    display: grid;
    gap: 3px;
    background: #fbfdff;
    color: #334155;
    text-decoration: none;
}
.meeting-report-tab.is-active {
    border-color: #0f766e;
    background: #eefbf8;
    color: #0f766e;
}
.meeting-report-tab-label {
    font-size: 12px;
    font-weight: 800;
}
.meeting-report-tab-value {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}
.meeting-report-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.meeting-report-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.meeting-report-summary-card {
    position: relative;
    min-width: 0;
    min-height: 122px;
    padding: 16px 16px 15px;
    border: 1px solid #d8e4f0;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
}
.meeting-report-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: #0f766e;
}
.meeting-report-summary-card:nth-child(2)::before { background: #2563eb; }
.meeting-report-summary-card:nth-child(3)::before { background: #d97706; }
.meeting-report-summary-card:nth-child(4)::before { background: #7c3aed; }
.meeting-report-summary-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.meeting-report-summary-value {
    margin-top: 8px;
    color: #06152f;
    font-size: 27px;
    line-height: 1;
    font-weight: 900;
}
.meeting-report-summary-copy {
    margin-top: 8px;
    color: #5b6f88;
    font-size: 13px;
    line-height: 1.55;
}
.meeting-report-insight {
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
    gap: 16px;
    align-items: start;
    order: 1;
}
.meeting-report-insight > div:first-child {
    align-self: center;
}
.meeting-report-insight > div:last-child {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
}
.meeting-report-context {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.meeting-report-context-row {
    display: grid;
    gap: 3px;
    padding: 11px 12px;
    border: 1px solid #e2eaf3;
    border-radius: 14px;
    background: #fbfdff;
}
.meeting-report-context-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.meeting-report-context-value {
    color: #0f172a;
    font-size: 14px;
    font-weight: 850;
    overflow-wrap: anywhere;
}
.meeting-report-room-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}
.meeting-report-room-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid #e2eaf3;
    border-radius: 14px;
    background: #fbfdff;
}
.meeting-report-room-row:last-child {
    border-bottom: 1px solid #e2eaf3;
}
.meeting-report-room-name {
    color: #0f172a;
    font-size: 13px;
    font-weight: 850;
    overflow-wrap: anywhere;
}
.meeting-report-room-meta {
    color: #64748b;
    font-size: 12px;
}
.meeting-report-room-count {
    min-width: 44px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eefbf8;
    color: #0f766e;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
}
.meeting-report-results {
    padding: 18px;
    display: grid;
    gap: 14px;
    order: 2;
}
.meeting-report-day-group {
    display: grid;
    gap: 10px;
}
.meeting-report-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #d8e4f0;
    border-radius: 14px;
    background: #f8fbff;
}
.meeting-report-day-title {
    color: #06152f;
    font-size: 15px;
    font-weight: 900;
}
.meeting-report-day-count {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.meeting-report-booking {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid #d8e4f0;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
}
.meeting-report-booking::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: #0f766e;
}
.meeting-report-booking-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}
.meeting-report-booking-main {
    min-width: 0;
    display: grid;
    gap: 7px;
}
.meeting-report-room-chip {
    width: fit-content;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid #bfe4dc;
    border-radius: 999px;
    background: #eefbf8;
    color: #0f766e;
    font-size: 12px;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.meeting-report-booking-title {
    color: #06152f;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.meeting-report-booking-person {
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.meeting-report-status {
    min-width: 104px;
    padding: 6px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
}
.meeting-report-status.is-approved {
    border-color: #86efac;
    background: #dcfce7;
    color: #166534;
}
.meeting-report-status.is-pending {
    border-color: #fcd34d;
    background: #fef3c7;
    color: #92400e;
}
.meeting-report-status.is-rejected,
.meeting-report-status.is-canceled {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #991b1b;
}
.meeting-report-booking-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.meeting-report-stat {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #e2eaf3;
    border-radius: 13px;
    background: #fbfdff;
}
.meeting-report-stat-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.meeting-report-stat-value {
    margin-top: 4px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.meeting-report-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-top: 12px;
    border-top: 1px dashed #d8e4f0;
}
.meeting-report-detail {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #e2eaf3;
    border-radius: 13px;
    background: #ffffff;
}
.meeting-report-detail-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
}
.meeting-report-detail-text {
    margin-top: 5px;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.meeting-report-booking-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.meeting-report-booking-foot-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px dashed #d8e4f0;
}
.meeting-report-button.compact {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
}
.meeting-report-button.danger {
    border-color: var(--color-danger-border);
    background: #fff1f2;
    color: #b91c1c;
}
.meeting-report-button.danger:hover,
.meeting-report-button.danger:focus {
    border-color: #fca5a5;
    background: #fee2e2;
}
.meeting-report-flash {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
    font-weight: 800;
    line-height: 1.5;
}
.meeting-report-flash.is-error {
    border-color: var(--color-danger-border);
    background: #fff1f2;
    color: #b91c1c;
}
.meeting-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.45);
}
.meeting-admin-modal.is-open {
    display: flex;
}
.meeting-admin-modal-card {
    width: min(760px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}
.meeting-admin-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.meeting-admin-modal-head h2 {
    margin: 0;
    color: #06152f;
    font-size: 20px;
}
.meeting-admin-modal-head p {
    margin: 4px 0 0;
    color: #64748b;
    line-height: 1.5;
}
.meeting-admin-modal-close {
    width: 36px;
    height: 36px;
    border: 1px solid #dbe6f0;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}
.meeting-admin-form {
    display: grid;
    gap: 12px;
    padding: 18px 20px 20px;
}
.meeting-admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.meeting-admin-field {
    display: grid;
    gap: 6px;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
}
.meeting-admin-field.is-full {
    grid-column: 1 / -1;
}
.meeting-admin-field input,
.meeting-admin-field select,
.meeting-admin-field textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d4e0ea;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    padding: 9px 11px;
    font-size: 14px;
    box-sizing: border-box;
}
.meeting-admin-field textarea {
    min-height: 86px;
    resize: vertical;
}
.meeting-admin-note {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    line-height: 1.5;
    font-size: 13px;
}
.meeting-admin-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.meeting-report-empty {
    padding: 42px 18px;
    border: 1px dashed #bfd3e8;
    border-radius: 16px;
    background: #fbfdff;
    color: #64748b;
    text-align: center;
    font-weight: 750;
}
@media (max-width: 1180px) {
    .meeting-report-export-card {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .meeting-report-filter-grid,
    .meeting-report-summary-grid,
    .meeting-report-booking-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .meeting-report-status-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .meeting-report-main-grid {
        grid-template-columns: 1fr;
    }
    .meeting-report-insight {
        grid-template-columns: 1fr;
    }
    .meeting-report-room-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .meeting-report-page {
        gap: 14px;
        padding-bottom: 22px;
    }
    .meeting-report-hero,
    .meeting-report-section-head,
    .meeting-report-booking-head,
    .meeting-report-day-head {
        grid-template-columns: 1fr;
        display: grid;
        align-items: start;
    }
    .meeting-report-hero,
    .meeting-report-filter,
    .meeting-report-status-card,
    .meeting-report-export-card,
    .meeting-report-results,
    .meeting-report-insight {
        padding: 16px;
        border-radius: 16px;
    }
    .meeting-report-actions,
    .meeting-report-filter-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        justify-content: stretch;
    }
    .meeting-report-button {
        width: 100%;
    }
    .meeting-report-filter-grid,
    .meeting-report-status-tabs,
    .meeting-report-summary-grid,
    .meeting-report-context,
    .meeting-report-room-list,
    .meeting-report-booking-stats,
    .meeting-report-detail-grid,
    .meeting-admin-form-grid {
        grid-template-columns: 1fr;
    }
    .meeting-report-booking {
        padding: 14px;
        border-radius: 15px;
    }
    .meeting-report-status {
        width: fit-content;
        max-width: 100%;
    }
}
@media (max-width: 420px) {
    .meeting-report-title {
        font-size: 24px;
    }
    .meeting-report-summary-value {
        font-size: 24px;
    }
    .meeting-report-booking-title {
        font-size: 16px;
    }
}



/* Meeting rooms components. Centralized from app/Modules/Meeting/Views/rooms.php. */
.meeting-rooms-page {
    display: grid;
    gap: 16px;
}
.meeting-room-filter-card {
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.meeting-room-filter-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}
#roomAddPanel {
    display: none;
}
#roomAddPanel.is-open {
    display: block;
}
.room-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.room-form .is-full {
    grid-column: 1 / -1;
}
.form-section {
    min-width: 0;
    border: 1px solid #dbe7f5;
    border-radius: 16px;
    background: #fbfdff;
    padding: 16px;
}
.form-section-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.form-section-title > span {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef5ff;
    color: #2563eb;
    font-weight: 900;
    flex: 0 0 auto;
}
.form-section-title h3 {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}
.form-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.form-grid.is-single {
    grid-template-columns: 1fr;
}
.form-field {
    min-width: 0;
    display: grid;
    gap: 7px;
    color: #475569;
    font-size: 13px;
    font-weight: 900;
}
.form-field input:not([data-app-choice-option]),
.form-field select,
.form-field textarea {
    min-width: 0;
    width: 100%;
    border: 1px solid #cbd9ea;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 12px;
    outline: none;
}
.form-field textarea {
    min-height: 96px;
    resize: vertical;
}
.form-field input:not([data-app-choice-option]):focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.upload-dropzone {
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    border: 1px dashed #b8cbe3;
    border-radius: 14px;
    background: #f8fbff;
    padding: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.upload-dropzone:hover,
.upload-dropzone:focus-within {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .08);
}
.upload-dropzone.has-file {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
}
.upload-dropzone.has-file .upload-icon {
    border-color: var(--color-success-border);
    color: var(--color-success-ink);
}
.upload-dropzone.has-file .upload-copy strong,
.upload-dropzone.has-file .upload-copy small {
    color: var(--color-success-ink);
}
.upload-dropzone input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0;
    pointer-events: none;
}
.upload-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd9ea;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    font-size: 22px;
    font-weight: 900;
    flex: 0 0 auto;
}
.upload-copy {
    min-width: 0;
    max-width: 100%;
    display: grid;
    gap: 3px;
}
.upload-copy strong {
    display: block;
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upload-copy small {
    display: block;
    min-width: 0;
    max-width: 100%;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-file-title,
.item-file-sub,
.user-file-title,
.user-file-sub,
.settings-file-title,
.settings-file-meta,
.edoc-file-title,
.edoc-file-meta,
.duty-file-title,
.duty-file-sub,
.approve-file-title,
.approve-file-sub,
.leave-file-title,
.leave-file-sub,
.doc-manager-file-title,
.doc-manager-file-sub,
.manage-file-title,
.training-file-title,
.training-file-sub,
.profile-file-title,
.profile-file-sub {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-file-drop.has-file,
.user-file-drop.has-file,
.settings-file-wrap.has-file,
.edoc-file-wrap.has-file,
.duty-file-drop.has-file,
.approve-file-drop.has-file,
.leave-file-drop.has-file,
.doc-manager-file-drop.has-file,
.manage-file-drop.has-file,
.training-file-drop.has-file,
.profile-file-drop.has-file {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
}

.user-file-drop.has-file .user-file-icon,
.settings-file-wrap.has-file .settings-file-icon,
.edoc-file-wrap.has-file .edoc-file-icon,
.duty-file-drop.has-file .duty-file-icon,
.approve-file-drop.has-file .approve-file-icon,
.leave-file-drop.has-file .leave-file-icon,
.doc-manager-file-drop.has-file .doc-manager-file-icon,
.training-file-drop.has-file .training-file-icon,
.profile-file-drop.has-file .profile-file-icon {
    border-color: var(--color-success-border);
    color: var(--color-success-ink);
}

.item-file-drop.has-file .item-file-title,
.item-file-drop.has-file .item-file-sub,
.user-file-drop.has-file .user-file-title,
.user-file-drop.has-file .user-file-sub,
.settings-file-wrap.has-file .settings-file-title,
.settings-file-wrap.has-file .settings-file-meta,
.edoc-file-wrap.has-file .edoc-file-title,
.edoc-file-wrap.has-file .edoc-file-meta,
.duty-file-drop.has-file .duty-file-title,
.duty-file-drop.has-file .duty-file-sub,
.approve-file-drop.has-file .approve-file-title,
.approve-file-drop.has-file .approve-file-sub,
.leave-file-drop.has-file .leave-file-title,
.leave-file-drop.has-file .leave-file-sub,
.doc-manager-file-drop.has-file .doc-manager-file-title,
.doc-manager-file-drop.has-file .doc-manager-file-sub,
.manage-file-drop.has-file .manage-file-title,
.training-file-drop.has-file .training-file-title,
.training-file-drop.has-file .training-file-sub,
.profile-file-drop.has-file .profile-file-title,
.profile-file-drop.has-file .profile-file-sub {
    color: var(--color-success-ink);
}
.check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.check-grid.is-compact {
    grid-template-columns: 1fr;
}
.check-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    border: 1px solid #dbe7f5;
    border-radius: 12px;
    background: #ffffff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 12px;
}
.check-grid input {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
}
.room-access-field {
    grid-column: 1 / -1;
}
.room-access-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.room-access-option {
    position: relative;
    min-width: 0;
}
.room-access-option input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}
.room-access-option__body {
    display: grid;
    gap: 5px;
    min-height: 86px;
    border: 1px solid #dbe7f5;
    border-radius: 14px;
    background: #ffffff;
    padding: 13px 14px 13px 44px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.room-access-option__body::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 18px;
    width: 18px;
    height: 18px;
    border: 2px solid #b8cbe3;
    border-radius: 999px;
    background: #ffffff;
    box-sizing: border-box;
}
.room-access-option__body::after {
    content: "";
    position: absolute;
    left: 19px;
    top: 23px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: transparent;
}
.room-access-option input:checked + .room-access-option__body {
    border-color: #2563eb;
    background: #f5f9ff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .12);
}
.room-access-option input:checked + .room-access-option__body::before {
    border-color: #2563eb;
}
.room-access-option input:checked + .room-access-option__body::after {
    background: #2563eb;
}
.room-access-option input:focus-visible + .room-access-option__body {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.room-access-option:hover .room-access-option__body {
    transform: translateY(-1px);
    border-color: #b7c7d9;
}
.room-access-option__body strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.room-access-option__body small {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}
.btn-primary,
.btn-secondary,
.modal-close {
    border: 0;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
}
.btn-primary {
    min-height: 42px;
    padding: 10px 18px;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}
.btn-secondary,
.modal-close {
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid #cbd9ea;
    background: #ffffff;
    color: #0f172a;
}
.empty-state {
    border: 1px dashed #cbd9ea;
    border-radius: 16px;
    background: #f8fbff;
    color: #64748b;
    font-weight: 800;
    text-align: center;
    padding: 32px 16px;
}
.room-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 16px;
}
.room-item-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 14px;
    border: 1px solid #dbe7f5;
    border-radius: 18px;
    background: #ffffff;
    padding: 14px;
}
.room-item-media {
    position: relative;
    min-width: 0;
}
.room-item-media img,
.room-item-placeholder {
    width: 100%;
    height: 190px;
    border-radius: 14px;
    object-fit: cover;
    background: linear-gradient(135deg, #eef2f7, #e2e8f0);
}
.room-item-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 13px;
    font-weight: 900;
}
.room-item-body {
    min-width: 0;
    display: grid;
    gap: 12px;
}
.room-code {
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
}
.room-item-head h3 {
    margin: 3px 0 0;
    color: #0f172a;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.25;
}
.room-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.room-item-head > div {
    min-width: 0;
}
.room-status-stack {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 210px;
}
.room-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.room-info-grid span {
    min-width: 0;
    display: grid;
    gap: 3px;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    background: #fbfdff;
    padding: 10px;
}
.room-info-grid small {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}
.room-info-grid strong {
    color: #0f172a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.equip-wrap {
    display: grid;
    gap: 8px;
    border: 1px solid #e6edf5;
    border-radius: 14px;
    background: #f8fbff;
    padding: 10px;
}
.equip-group {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}
.equip-title {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.8;
}
.equip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    background: #eaf2ff;
    color: #1e3a8a;
    font-size: 12px;
    font-weight: 900;
    padding: 4px 10px;
}
.room-policy-note {
    border: 1px dashed #cbd9ea;
    border-radius: 12px;
    background: #fbfdff;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.65;
    padding: 10px 12px;
}
.room-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
}
.room-item-actions form {
    margin: 0;
}
.modal-backdrop.hidden {
    display: none;
}
.modal-room {
    width: min(960px, 94vw);
    max-height: 88vh;
    overflow: auto;
    border-radius: 22px;
    padding: 22px;
}
.room-modal-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .room-card-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .room-form,
    .form-grid,
    .room-modal-form,
    .room-access-options,
    .check-grid,
    .room-info-grid {
        grid-template-columns: 1fr;
    }
    .room-item-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    .room-item-media img,
    .room-item-placeholder {
        height: 210px;
    }
    .equip-group {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .form-actions,
    .room-item-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .modal-room {
        width: 94vw;
        padding: 16px;
        border-radius: 18px;
    }
}



/* Meeting public rooms components. Centralized from app/Modules/Meeting/Views/rooms_public.php. */
.rooms-public-page.page-stack {
    gap: var(--space-4);
}

.rooms-public-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.rooms-public-page .page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    align-items: center;
    gap: var(--space-4);
}

.rooms-public-hero-main.page-hero-main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.rooms-public-hero-copy {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.rooms-public-summary.metric-card {
    width: 100%;
    min-width: 0;
    padding: var(--space-4);
}

.rooms-public-summary .metric-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.rooms-public-summary .metric-head > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rooms-public-list.section-card {
    display: grid;
    gap: var(--space-4);
}

.rooms-public-list-head.section-head {
    align-items: flex-start;
}

.rooms-public-list-head .pill-soft {
    flex: 0 0 auto;
}

.room-grid.record-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}

.room-card.record-card {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--space-3);
    min-width: 0;
    overflow: hidden;
}

.room-photo.content-box {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    min-height: 180px;
    padding: 0;
    overflow: hidden;
    background: var(--surface-muted);
}

.room-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.room-photo-placeholder {
    color: var(--text-soft);
    font-weight: 800;
}

.room-body {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
}

.room-record-head.record-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
}

.room-name.record-title {
    margin: 0;
}

.room-tags,
.room-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.room-tag.badge-soft,
.amenity.badge-soft {
    width: fit-content;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.room-facts.record-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding-top: 0;
    border-top: 0;
}

.room-facts .content-box,
.room-policy.content-box {
    min-width: 0;
    overflow-wrap: anywhere;
}

.room-policy.content-box {
    gap: var(--space-1);
}

.room-actions.record-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.room-actions .btn {
    min-width: 132px;
    min-height: var(--btn-height);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .rooms-public-page .page-hero,
    .room-record-head.record-head {
        grid-template-columns: 1fr;
    }

    .rooms-public-summary.metric-card {
        justify-self: stretch;
    }

    .room-actions.record-actions,
    .room-actions .btn {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .rooms-public-hero-main.page-hero-main {
        display: grid;
        align-items: start;
    }

    .room-grid.record-list,
    .room-facts.record-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Profile components. Centralized from app/Modules/Profile/Views/profile.php. */
.profile-page {
    width: min(1120px, 100%);
    display: grid;
    gap: 14px;
    color: #0f172a;
}
.profile-page-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid #dbe7f1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}
.profile-page-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 900;
}
.profile-page-subtitle {
    margin-top: 6px;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.profile-page-status {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.profile-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.profile-status-pill.is-active {
    color: #047857;
    background: #ecfdf5;
    border-color: var(--color-success-border);
}
.profile-status-pill.is-inactive {
    color: #b91c1c;
    background: #fef2f2;
    border-color: var(--color-danger-border);
}
.profile-status-pill.is-muted {
    color: #475569;
    background: #f8fafc;
    border-color: #e2e8f0;
}
.profile-shell {
    width: 100%;
    max-width: none;
    display: grid;
    gap: 14px;
}
.profile-card {
    padding: 18px;
    border-radius: 8px;
    border: 1px solid #dbe7f1;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
}
.profile-alert {
    max-width: none;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
}
.profile-alert-error {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
}
.profile-alert-success {
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.profile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.profile-section-head-wrap {
    flex-wrap: wrap;
}
.profile-section-title {
    font-weight: 900;
    font-size: 16px;
    color: #0f172a;
}
.profile-section-subtitle {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}
.profile-personal-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.profile-edit-main-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.16);
}
.profile-main-grid {
    margin-top: 16px;
    display: grid;
    gap: 18px;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
}
.profile-personal-card {
    padding: 20px;
}
.profile-photo-block {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: 24px 18px;
    border: 1px solid #e5edf5;
    border-radius: 8px;
    background: #f8fafc;
    min-width: 0;
}
.profile-avatar,
.profile-avatar-placeholder {
    width: 128px;
    height: 128px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10);
}
.profile-avatar-placeholder {
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 100%);
}
.profile-identity-copy {
    display: grid;
    gap: 6px;
    justify-items: center;
    text-align: center;
    width: 100%;
}
.profile-identity-name {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.5;
    width: 100%;
    max-width: 100%;
    text-wrap: pretty;
    word-break: keep-all;
    overflow-wrap: normal;
}
.profile-identity-role {
    font-size: 13px;
    font-weight: 700;
    color: #1e3a8a;
    line-height: 1.5;
}
.profile-identity-department {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
}
.profile-identity-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.profile-identity-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.09);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
    border: 0;
}
.profile-identity-chip-muted {
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
}
.profile-info-grid,
.training-meta-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.profile-info-panel {
    border: 1px solid #e5edf5;
    border-radius: 8px;
    background: #fbfdff;
    padding: 14px;
}
.profile-info-groups {
    display: grid;
    gap: 14px;
}
.profile-info-group {
    display: grid;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5edf5;
}
.profile-info-group:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}
.profile-info-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.profile-info-group-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #eff6ff 0%, #e8f1ff 100%);
    color: #2563eb;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.10);
    flex: 0 0 auto;
}
.profile-info-group-icon svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: currentColor;
}
.profile-info-group-title {
    font-size: 12px;
    font-weight: 800;
    color: #1e3a8a;
    letter-spacing: 0;
}
.profile-info-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}
.profile-info-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}
.profile-info-row.is-full {
    grid-template-columns: 1fr;
}
.profile-info-item {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px 16px 15px;
    border: 1px solid #e5edf6;
    border-radius: 8px;
    background: #ffffff;
    align-content: start;
    min-height: 82px;
}
.profile-info-label {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.profile-info-value {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.7;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}
.profile-info-value.is-empty {
    color: #94a3b8;
    font-weight: 500;
}
.profile-empty-box {
    margin-top: 12px;
    padding: 16px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #64748b;
    background: #f8fafc;
}
.profile-training-card {
    overflow: hidden;
}
.profile-training-head {
    padding-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
}
.training-add-btn,
.training-save-btn {
    min-height: 40px;
    border-radius: 12px;
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(22, 163, 74, 0.18);
}
.training-list {
    margin-top: 16px;
    display: grid;
    gap: 14px;
}
.training-card {
    position: relative;
    border: 1px solid #dbe7f1;
    border-radius: 8px;
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}
.training-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: #2563eb;
}
.training-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: flex-start;
    padding-left: 10px;
}
.training-head-main {
    min-width: 0;
}
.training-card-actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.training-card-actions form {
    margin: 0;
}
.training-action-btn {
    min-width: 86px;
    min-height: 36px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 13px;
}
.training-action-edit {
    background: #f59e0b !important;
    border-color: #d97706 !important;
    color: #fff !important;
}
.training-action-delete {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}
.training-title {
    font-size: 17px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.training-badge-row {
    margin-bottom: 8px;
}
.training-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid transparent;
    white-space: nowrap;
}
.training-badge-success {
    background: #ecfdf5;
    color: #15803d;
    border-color: var(--color-success-border);
}
.training-badge-muted {
    background: #f8fafc;
    color: #64748b;
    border-color: #cbd5e1;
}
.training-date {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-top: 8px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}
.training-meta-grid {
    margin-top: 14px;
    padding-left: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.training-meta-item {
    min-width: 0;
    display: grid;
    gap: 4px;
    min-height: 66px;
    padding: 12px;
    border: 1px solid #edf2f7;
    border-radius: 8px;
    background: #f8fafc;
}
.training-meta-item span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}
.training-meta-item strong {
    min-width: 0;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.training-meta-item.full {
    grid-column: 1 / -1;
}
.training-cert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.training-card-foot {
    margin-top: 14px;
    margin-left: 10px;
    padding: 12px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: #eff6ff;
}
.training-cert-row > strong {
    color: #1e3a8a;
    font-size: 13px;
    font-weight: 900;
}
.training-cert-empty {
    color: #64748b;
    font-weight: 800;
}
.training-cert-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    border: 1px solid #1d4ed8;
}
.training-cert-btn:hover {
    background: #1d4ed8;
    color: #fff;
    text-decoration: none;
}
.training-modal-card {
    width: min(920px, 94vw);
    padding: 18px;
    border-radius: 8px;
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
}
.training-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
}
.training-modal-title {
    color: #0f172a;
    font-size: 18px;
    font-weight: 900;
}
.training-modal-subtitle {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}
.training-modal-close,
.training-cancel-btn {
    min-height: 38px;
    border-radius: 8px;
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
    font-weight: 800;
}
.training-form {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}
.training-form-section {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e5edf5;
    border-radius: 8px;
    background: #fbfdff;
}
.training-form-section-title {
    color: #1e3a8a;
    font-size: 13px;
    font-weight: 900;
}
.training-form-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.training-form-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}
.training-form-field input,
.training-form-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #dbe5f0;
    background: #fff;
    color: #0f172a;
    font-size: 14px;
    box-sizing: border-box;
}
.training-form-field textarea {
    min-height: 100px;
    resize: vertical;
}
.training-form-field-full {
    grid-column: 1 / -1;
}
.training-file-drop {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 76px;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    padding: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.training-file-drop:hover,
.training-file-drop:focus-within {
    border-color: #0f766e;
    background: #f8fffd;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .10);
}
.training-file-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.training-file-icon {
    width: 42px;
    height: 42px;
    border: 1px solid #dbeafe;
    border-radius: 8px;
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
}
.training-file-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.training-file-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.training-file-sub {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}
.training-modal-actions {
    padding-top: 4px;
}
.profile-consent-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.profile-consent-card {
    display: grid;
    gap: 14px;
}
.profile-consent-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.profile-consent-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.profile-consent-pill.is-ok {
    color: #047857;
    background: #ecfdf5;
    border-color: var(--color-success-border);
}
.profile-consent-pill.is-pending {
    color: #c2410c;
    background: #fff7ed;
    border-color: #fed7aa;
}
.profile-consent-action {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #edf2f7;
}
.profile-consent-action button {
    min-height: 38px;
    border-radius: 8px;
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    font-weight: 900;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 88px 16px 24px;
    overflow-y: auto;
    z-index: 4000;
    box-sizing: border-box;
}
.modal-card {
    background: #fff;
    border-radius: 14px;
    width: min(900px, 92vw);
    padding: 16px;
    box-shadow: 0 24px 60px rgba(15,23,42,0.2);
}
.profile-edit-modal {
    width: min(980px, 94vw);
    max-height: calc(100dvh - 112px);
    padding: 18px;
    border-radius: 20px;
    border: 1px solid #e5edf6;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.profile-edit-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf2f7;
}
.profile-edit-modal-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}
.profile-edit-modal-subtitle {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
}
.profile-edit-close-btn {
    min-width: 68px;
    min-height: 42px;
    border-radius: 14px;
    background: #2563eb;
    border: 1px solid #2563eb;
    color: #fff;
    font-weight: 800;
}
.profile-edit-form {
    display: grid;
    gap: 14px;
    grid-template-rows: minmax(0, 1fr) auto;
    margin-top: 14px;
    min-height: 0;
}
.profile-edit-sections {
    display: grid;
    gap: 14px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}
.profile-edit-section {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e7eef6;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}
.profile-edit-section-title {
    font-size: 13px;
    font-weight: 800;
    color: #1e3a8a;
}
.profile-edit-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.profile-edit-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
}
.profile-edit-field input,
.profile-edit-field select,
.profile-edit-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #dbe5f0;
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    box-sizing: border-box;
}
.profile-edit-field textarea {
    min-height: 96px;
    resize: vertical;
}
.profile-edit-field input[type="file"] {
    padding: 9px 10px;
}
.profile-edit-field-full {
    grid-column: 1 / -1;
}
.profile-upload-field {
    display: grid;
    gap: 8px;
}
.profile-upload-label {
    color: #1e293b;
    font-size: 13px;
    font-weight: 800;
}
.profile-file-drop {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 72px;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.profile-file-drop:hover,
.profile-file-drop:focus-within {
    border-color: #93c5fd;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}
.profile-file-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.profile-file-icon {
    width: 40px;
    height: 40px;
    border: 1px solid #dbe2ea;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
}
.profile-file-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.profile-file-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.profile-file-sub {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}
.profile-edit-actions {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #edf2f7;
    background: linear-gradient(180deg, rgba(251,253,255,0.72) 0%, #fbfdff 100%);
}
.profile-edit-remove-btn {
    background: #f97316 !important;
    border-color: #f97316 !important;
    color: #fff !important;
}
.profile-edit-save-btn {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}
.profile-edit-cancel-btn {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}
.modal-actions button[type="submit"] {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.modal-actions button[type="button"] {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.modal-actions-left,
.modal-actions-right {
    display: flex;
    gap: 8px;
    align-items: center;
}
.hidden { display: none; }
.face-enrollment-card { background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%); }
.face-enrollment-head { margin-bottom:6px; }
.face-enrollment-summary { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-top:14px; }
.face-summary-item { padding:14px 16px; border:1px solid #dbe3f0; border-radius:16px; background:#ffffff; box-shadow:0 10px 24px rgba(15,23,42,.04); }
.face-summary-label { font-size:12px; font-weight:700; color:#64748b; margin-bottom:6px; }
.face-summary-value { font-size:15px; font-weight:700; color:#0f172a; line-height:1.5; }
.face-summary-value.is-ready { color:#047857; }
.face-summary-value.is-pending { color:#c2410c; }
.face-enrollment-note { margin-top:12px; padding:12px 14px; border:1px solid #bfdbfe; border-radius:14px; background:#eff6ff; color:#1d4ed8; }
.face-enrollment-card {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border: 1px solid #dbe7f3;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}
.face-enrollment-head {
    margin-bottom: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid #e5edf6;
}
.face-enrollment-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}
.face-summary-item {
    padding: 16px 18px;
    border: 1px solid #dbe3f0;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 12px 28px rgba(15,23,42,.04);
}
.face-summary-label {
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 8px;
    letter-spacing: .01em;
}
.face-summary-value {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.5;
}
.face-summary-value.is-ready { color: #047857; }
.face-summary-value.is-pending { color: #c2410c; }
.face-enrollment-note {
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #2563eb;
    border-radius: 16px;
    background: linear-gradient(180deg, #eff6ff 0%, #f8fbff 100%);
    color: #1d4ed8;
    line-height: 1.7;
}
.face-saved-card {
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid #dbe3f0;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 12px 28px rgba(15,23,42,.04);
    display: grid;
    gap: 14px;
}
.face-template-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.face-template-meta-item,
.face-progress-item {
    padding: 14px 16px;
    border: 1px solid #dbe3f0;
    border-radius: 16px;
    background: #ffffff;
}
.face-template-meta-label,
.face-progress-label {
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 6px;
}
.face-template-meta-value,
.face-progress-value {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.5;
}
.face-saved-gallery-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.face-saved-gallery-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
}
.face-saved-gallery-date {
    font-size: 13px;
    color: #64748b;
}
.face-saved-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.face-saved-thumb-card {
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fbfdff;
    overflow: hidden;
    display: grid;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.03);
}
.face-saved-thumb-frame {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    aspect-ratio: 4/5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.face-saved-thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.face-saved-thumb-empty {
    color: #cbd5e1;
    font-size: 13px;
    padding: 20px;
    text-align: center;
}
.face-saved-thumb-foot {
    padding: 12px 14px;
    display: grid;
    gap: 4px;
    background: #ffffff;
}
.face-saved-thumb-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}
.face-saved-thumb-date {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}
.face-enrollment-form {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}
.face-minimal-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: stretch;
}
.face-minimal-status {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 84px;
    padding: 16px 18px 16px 20px;
    border-radius: 20px;
    border: 1px solid #dbe7f3;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}
.face-minimal-status-copy {
    display: grid;
    gap: 4px;
}
.face-minimal-status::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-right: 12px;
    flex: 0 0 auto;
}
.face-minimal-status.is-ready {
    border-color: var(--color-success-border);
    background: linear-gradient(180deg, #f3fff7 0%, #ecfdf5 100%);
}
.face-minimal-status.is-pending {
    border-color: #fed7aa;
    background: linear-gradient(180deg, #fffaf3 0%, #fff7ed 100%);
}
.face-minimal-status.is-ready::before {
    background: #16a34a;
    box-shadow: 0 0 0 6px rgba(22, 163, 74, 0.12);
}
.face-minimal-status.is-pending::before {
    background: #f59e0b;
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.12);
}
.face-minimal-status-label {
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: .02em;
}
.face-minimal-status-value {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}
.face-minimal-status-date {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}
.face-minimal-start {
    min-width: 148px;
    padding-inline: 20px;
    align-self: center;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}
.face-enrollment-actions {
    display: flex;
    justify-content: flex-end;
}
.face-panel-title {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 10px;
}
.face-camera-panel,
.face-guidance-card,
.face-action-card,
.face-preview-section {
    border: 1px solid #dbe3f0;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 12px 28px rgba(15,23,42,.04);
}
.face-camera-panel {
    padding: 16px;
    display: grid;
    gap: 12px;
}
.face-camera-panel-minimal {
    margin-top: 4px;
}
.face-camera-frame {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, #dbeafe, #eff6ff);
    min-height: 320px;
    border: 1px solid #dbe3f0;
}
.face-camera {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block;
    background: #0f172a;
}
.face-camera-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #475569;
    text-align: center;
    background: rgba(255,255,255,.78);
}
.face-guidance-card,
.face-action-card,
.face-preview-section {
    padding: 16px 18px;
}
.face-btn {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 11px 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}
.face-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(15,23,42,.08);
}
.face-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.face-status-box {
    padding: 12px 13px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
    line-height: 1.65;
}
.face-progress-card {
    display: grid;
    gap: 10px;
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}
.face-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.face-progress-title,
.face-standard-title {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
}
.face-progress-caption,
.face-progress-quality {
    font-size: 12px;
    color: #64748b;
    line-height: 1.6;
}
.face-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.face-progress-count {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}
.face-progress-bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #eaf2ff;
    overflow: hidden;
}
.face-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
    transition: width .2s ease;
}
.face-enrollment-card,
.face-summary-item,
.face-saved-card,
.face-template-meta-item,
.face-progress-item,
.face-saved-thumb-card,
.face-camera-panel,
.face-guidance-card,
.face-action-card,
.face-preview-section,
.face-camera-frame,
.face-status-box,
.face-progress-card,
.face-minimal-status {
    border-radius: 8px;
}
@media (max-width: 700px) {
    .profile-page {
        gap: 12px;
    }
    .profile-page-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
        padding: 16px;
    }
    .profile-page-hero h1 {
        font-size: 21px;
    }
    .profile-page-status {
        justify-content: flex-start;
    }
    .profile-status-pill {
        flex: 1 1 auto;
    }
    .modal-backdrop {
        padding: 12px 10px;
    }
    .profile-edit-modal {
        width: 100%;
        max-height: calc(100dvh - 20px);
        padding: 14px;
        border-radius: 16px;
    }
    .profile-edit-modal-head {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }
    .profile-edit-close-btn {
        width: 100%;
    }
    .profile-edit-grid {
        grid-template-columns: 1fr;
    }
    .profile-edit-actions {
        align-items: stretch;
    }
    .modal-actions-left,
    .modal-actions-right {
        width: 100%;
        align-items: stretch;
        justify-content: stretch;
    }
    .modal-actions-right {
        flex-direction: column;
    }
    .modal-actions-left button,
    .modal-actions-right button {
        width: 100%;
    }
    .profile-personal-card {
        padding: 16px;
    }
    .profile-personal-top {
        align-items: stretch;
    }
    .profile-edit-main-btn {
        width: 100%;
    }
    .profile-main-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .profile-photo-block {
        justify-items: center;
        padding: 18px 16px;
    }
    .profile-avatar,
    .profile-avatar-placeholder {
        width: 104px;
        height: 104px;
        border-radius: 24px;
    }
    .profile-identity-name {
        font-size: 19px;
        max-width: none;
        word-break: normal;
    }
    .profile-identity-role {
        font-size: 13px;
    }
    .profile-identity-department {
        font-size: 12px;
    }
    .profile-info-grid {
        gap: 10px;
        grid-template-columns: 1fr;
    }
    .profile-info-panel {
        padding: 12px;
    }
    .profile-info-groups {
        gap: 14px;
    }
    .profile-info-group-head {
        gap: 8px;
    }
    .profile-info-group-icon {
        width: 26px;
        height: 26px;
        border-radius: 9px;
    }
    .profile-info-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .profile-info-item {
        min-height: 0;
        padding: 13px 14px 14px;
    }
    .profile-training-head {
        align-items: stretch;
    }
    .training-add-btn {
        width: 100%;
    }
    .training-card {
        padding: 14px;
    }
    .training-card::before {
        top: 14px;
        bottom: 14px;
    }
    .training-card-head {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-left: 8px;
    }
    .training-head-main {
        flex: 1 1 auto;
        min-width: 0;
    }
    .training-card-actions {
        justify-content: stretch;
    }
    .training-card-actions,
    .training-card-actions form,
    .training-action-btn {
        width: 100%;
    }
    .training-title {
        font-size: 16px;
    }
    .training-meta-grid {
        grid-template-columns: 1fr;
        padding-left: 8px;
    }
    .training-card-foot {
        margin-left: 8px;
    }
    .training-cert-row {
        align-items: stretch;
        flex-direction: column;
    }
    .training-cert-btn {
        width: 100%;
    }
    .training-modal-card {
        width: 100%;
        max-height: calc(100dvh - 20px);
        padding: 14px;
        border-radius: 8px;
    }
    .training-modal-head {
        align-items: stretch;
        flex-direction: column;
    }
    .training-modal-close {
        width: 100%;
    }
    .training-form-grid {
        grid-template-columns: 1fr;
    }
    .training-form-section {
        padding: 12px;
    }
    .training-file-drop {
        grid-template-columns: 40px minmax(0, 1fr);
    }
    .training-modal-actions {
        align-items: stretch;
    }
    .profile-consent-grid {
        grid-template-columns: 1fr;
    }
    .profile-consent-head {
        align-items: stretch;
        flex-direction: column;
    }
    .profile-consent-pill,
    .profile-consent-action button {
        width: 100%;
    }
    .face-enrollment-summary {
        grid-template-columns: 1fr;
    }
    .face-minimal-bar {
        grid-template-columns: 1fr;
    }
    .face-enrollment-actions {
        justify-content: stretch;
    }
    .face-btn {
        width: 100%;
        justify-content: center;
    }
}

.face-progress-width-0 { width: 0%; }
.face-progress-width-1 { width: 1%; }
.face-progress-width-2 { width: 2%; }
.face-progress-width-3 { width: 3%; }
.face-progress-width-4 { width: 4%; }
.face-progress-width-5 { width: 5%; }
.face-progress-width-6 { width: 6%; }
.face-progress-width-7 { width: 7%; }
.face-progress-width-8 { width: 8%; }
.face-progress-width-9 { width: 9%; }
.face-progress-width-10 { width: 10%; }
.face-progress-width-11 { width: 11%; }
.face-progress-width-12 { width: 12%; }
.face-progress-width-13 { width: 13%; }
.face-progress-width-14 { width: 14%; }
.face-progress-width-15 { width: 15%; }
.face-progress-width-16 { width: 16%; }
.face-progress-width-17 { width: 17%; }
.face-progress-width-18 { width: 18%; }
.face-progress-width-19 { width: 19%; }
.face-progress-width-20 { width: 20%; }
.face-progress-width-21 { width: 21%; }
.face-progress-width-22 { width: 22%; }
.face-progress-width-23 { width: 23%; }
.face-progress-width-24 { width: 24%; }
.face-progress-width-25 { width: 25%; }
.face-progress-width-26 { width: 26%; }
.face-progress-width-27 { width: 27%; }
.face-progress-width-28 { width: 28%; }
.face-progress-width-29 { width: 29%; }
.face-progress-width-30 { width: 30%; }
.face-progress-width-31 { width: 31%; }
.face-progress-width-32 { width: 32%; }
.face-progress-width-33 { width: 33%; }
.face-progress-width-34 { width: 34%; }
.face-progress-width-35 { width: 35%; }
.face-progress-width-36 { width: 36%; }
.face-progress-width-37 { width: 37%; }
.face-progress-width-38 { width: 38%; }
.face-progress-width-39 { width: 39%; }
.face-progress-width-40 { width: 40%; }
.face-progress-width-41 { width: 41%; }
.face-progress-width-42 { width: 42%; }
.face-progress-width-43 { width: 43%; }
.face-progress-width-44 { width: 44%; }
.face-progress-width-45 { width: 45%; }
.face-progress-width-46 { width: 46%; }
.face-progress-width-47 { width: 47%; }
.face-progress-width-48 { width: 48%; }
.face-progress-width-49 { width: 49%; }
.face-progress-width-50 { width: 50%; }
.face-progress-width-51 { width: 51%; }
.face-progress-width-52 { width: 52%; }
.face-progress-width-53 { width: 53%; }
.face-progress-width-54 { width: 54%; }
.face-progress-width-55 { width: 55%; }
.face-progress-width-56 { width: 56%; }
.face-progress-width-57 { width: 57%; }
.face-progress-width-58 { width: 58%; }
.face-progress-width-59 { width: 59%; }
.face-progress-width-60 { width: 60%; }
.face-progress-width-61 { width: 61%; }
.face-progress-width-62 { width: 62%; }
.face-progress-width-63 { width: 63%; }
.face-progress-width-64 { width: 64%; }
.face-progress-width-65 { width: 65%; }
.face-progress-width-66 { width: 66%; }
.face-progress-width-67 { width: 67%; }
.face-progress-width-68 { width: 68%; }
.face-progress-width-69 { width: 69%; }
.face-progress-width-70 { width: 70%; }
.face-progress-width-71 { width: 71%; }
.face-progress-width-72 { width: 72%; }
.face-progress-width-73 { width: 73%; }
.face-progress-width-74 { width: 74%; }
.face-progress-width-75 { width: 75%; }
.face-progress-width-76 { width: 76%; }
.face-progress-width-77 { width: 77%; }
.face-progress-width-78 { width: 78%; }
.face-progress-width-79 { width: 79%; }
.face-progress-width-80 { width: 80%; }
.face-progress-width-81 { width: 81%; }
.face-progress-width-82 { width: 82%; }
.face-progress-width-83 { width: 83%; }
.face-progress-width-84 { width: 84%; }
.face-progress-width-85 { width: 85%; }
.face-progress-width-86 { width: 86%; }
.face-progress-width-87 { width: 87%; }
.face-progress-width-88 { width: 88%; }
.face-progress-width-89 { width: 89%; }
.face-progress-width-90 { width: 90%; }
.face-progress-width-91 { width: 91%; }
.face-progress-width-92 { width: 92%; }
.face-progress-width-93 { width: 93%; }
.face-progress-width-94 { width: 94%; }
.face-progress-width-95 { width: 95%; }
.face-progress-width-96 { width: 96%; }
.face-progress-width-97 { width: 97%; }
.face-progress-width-98 { width: 98%; }
.face-progress-width-99 { width: 99%; }
.face-progress-width-100 { width: 100%; }



/* Project activity detail components. Centralized from app/Modules/Project/Views/activity_detail.php. */
.project-muted-text {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
}
.project-section-title {
    margin-top: 0;
}
.project-field-line {
    margin-bottom: 6px;
}
.project-card-gap {
    margin-top: var(--space-3);
}
.project-empty-row {
    text-align: center;
    color: var(--text-muted);
}
.project-approval-form {
    margin-top: var(--space-3);
    display: grid;
    gap: var(--space-2);
}
.project-document-upload-form {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-3);
}
.project-document-help {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: -6px;
    margin-bottom: var(--space-3);
}
.project-resubmit-form,
.project-resubmit-lines {
    display: grid;
    gap: var(--space-2);
}
.project-activity-detail-page .line { display:grid; grid-template-columns: 1fr 200px; gap:var(--space-2); }



/* Project approvals components. Centralized from app/Modules/Project/Views/approvals.php. */
.project-approvals-page {
    min-width: 0;
}

.project-approvals-hero .page-hero-main {
    min-width: 0;
}

.project-approvals-scope {
    min-width: 250px;
}

.project-approvals-summary,
.project-approvals-filter-section,
.project-approvals-queue {
    gap: var(--space-3);
}

.project-approvals-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-approvals-metrics .metric-card {
    border-left-width: 4px;
}

.project-approvals-metrics .metric-card.is-primary {
    border-left-color: var(--color-primary);
}

.project-approvals-metrics .metric-card.is-success {
    border-left-color: var(--color-success);
}

.project-approvals-metrics .metric-card.is-warning {
    border-left-color: var(--color-warning);
}

.project-approvals-metrics .metric-card.is-info {
    border-left-color: var(--color-info);
}

.project-approvals-metrics .metric-value.is-money {
    font-size: 20px;
    overflow-wrap: anywhere;
}

.project-approvals-filter {
    margin: 0;
}

.project-approvals-filter-grid {
    grid-template-columns: minmax(280px, 1fr) auto;
}

.project-approvals-filter-grid .is-wide {
    grid-column: auto;
}

.project-approvals-filter-actions {
    min-width: 276px;
}

.project-approvals-filter-actions .btn {
    min-width: 132px;
}

.project-approvals-stage-list,
.project-approvals-stage-group {
    display: grid;
    gap: var(--space-3);
}

.project-approvals-stage-group + .project-approvals-stage-group {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
}

.project-approvals-stage-head,
.project-approvals-stage-identity,
.project-approval-record-kicker,
.project-approval-record-footer,
.project-approval-stage-note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.project-approvals-stage-head,
.project-approval-record-footer {
    justify-content: space-between;
}

.project-approvals-stage-identity {
    min-width: 0;
}

.project-approvals-stage-identity .action-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.project-approvals-stage-identity h3 {
    margin: 2px 0 0;
    color: var(--text-strong);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.project-approvals-record-list {
    gap: var(--space-3);
}

.project-approval-record {
    gap: var(--space-3);
}

.project-approval-record-head {
    align-items: start;
}

.project-approval-record-kicker {
    flex-wrap: wrap;
}

.project-approval-record .record-title {
    margin: 2px 0 0;
    font-size: 17px;
}

.project-approval-record .record-meta {
    margin: 0;
    font-size: 13px;
}

.project-approval-facts {
    display: grid;
    grid-template-columns: minmax(135px, 0.8fr) minmax(150px, 0.9fr) minmax(220px, 1.3fr) minmax(145px, 0.8fr) minmax(175px, 1fr);
    gap: var(--space-2);
}

.project-approval-fact {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    padding: var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--surface-muted);
}

.project-approval-fact span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.project-approval-fact strong {
    color: var(--text-strong);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.project-approval-record-footer {
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-soft);
}

.project-approval-stage-note {
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.project-approval-record-footer .btn {
    min-width: 132px;
}

.project-approvals-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
}

.project-approvals-empty strong {
    color: var(--text-strong);
    font-size: 16px;
}

.project-approvals-empty span:last-child {
    font-size: 12px;
    font-weight: 600;
}

.project-approvals-empty-icon {
    font-size: 22px;
}

@media (max-width: 1120px) {
    .project-approvals-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-approval-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-approval-fact.is-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .project-approvals-hero,
    .project-approvals-summary,
    .project-approvals-filter-section,
    .project-approvals-queue,
    .project-approval-record {
        padding: var(--space-3);
    }

    .project-approvals-scope {
        min-width: 0;
    }

    .project-approvals-filter-grid,
    .project-approvals-metrics,
    .project-approval-facts {
        grid-template-columns: 1fr;
    }

    .project-approvals-filter-actions {
        display: grid;
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .project-approvals-filter-actions .btn,
    .project-approval-record-footer .btn {
        width: 100%;
        min-width: 0;
    }

    .project-approvals-stage-head,
    .project-approval-record-head,
    .project-approval-record-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .project-approvals-stage-head > .badge-soft,
    .project-approval-record-head > .badge-soft {
        justify-self: start;
    }

    .project-approval-fact.is-wide {
        grid-column: auto;
    }
}

.project-approval-project-card {
    margin-bottom: var(--space-3);
    text-align: center;
}
.project-approval-project-status {
    font-size: 12px;
    color: var(--text-muted);
}
.project-stage-col {
    width: 90px;
}
.project-role-col {
    width: 180px;
}
/* Project create components. Centralized from app/Modules/Project/Views/create.php. */
.project-create-page {
    display: grid;
    gap: var(--space-4);
    max-width: 1060px;
}
.project-create-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.project-create-hero.page-hero {
    padding: var(--space-5);
}
.project-create-back {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none !important;
}
.project-create-card {
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.project-form-main {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-3);
}
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: 1 / -1; }
.project-code-panel {
    border: 1px solid var(--color-primary-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft);
    padding: var(--space-3);
    align-content: center;
}
.project-code-panel input {
    border-radius: var(--radius-md);
    color: var(--color-primary-ink);
    font-weight: 900;
}
.project-form-actions {
    justify-content: flex-end;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
}
.project-form-actions .btn,
.project-form-actions button {
    min-width: 140px;
    min-height: 42px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none !important;
}
@media (max-width: 860px) {
    .project-create-page {
        max-width: none;
    }
    .project-create-hero {
        align-items: stretch;
        flex-direction: column;
        padding: var(--space-4);
    }
    .project-create-back {
        justify-content: center;
        width: 100%;
    }
    .project-create-card {
        padding: var(--space-4);
    }
    .project-form-main {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .span-4,
    .span-6,
    .span-12 {
        grid-column: 1 / -1;
    }
    .project-code-panel {
        padding: var(--space-3);
    }
    .project-form-actions .btn,
    .project-form-actions button {
        width: 100%;
        min-width: 0;
    }
}

/* Project create activity components. Centralized from app/Modules/Project/Views/create_activity.php. */
.project-create-activity-meta {
    margin: var(--space-2) 0 0;
    color: var(--text-muted);
}
.project-create-activity-full {
    grid-column: 1 / -1;
}
.project-create-activity-section-title {
    margin: var(--space-4) 0 var(--space-2);
}
.project-create-activity-actions {
    margin-top: var(--space-3);
}
.project-create-activity-list {
    margin-top: var(--space-4);
}
.project-create-activity-list-title {
    margin-top: 0;
}
.project-create-activity-empty {
    text-align: center;
    color: var(--text-muted);
}
.project-create-activity-page .grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--space-3); }
.project-create-activity-page .line-head { display:grid; grid-template-columns: 70px 1fr 220px 100px; gap:var(--space-2); margin-bottom:6px; color:var(--text-muted); font-size:12px; font-weight:600; text-align:center; }
.project-create-activity-page .line { display:grid; grid-template-columns: 70px 1fr 220px 100px; gap:var(--space-2); margin-bottom:8px; align-items:center; }
.project-create-activity-page .line-no { text-align:center; font-weight:700; color:var(--text-soft); }
.project-create-activity-page .line-remove { text-decoration: none !important; }

/* Project dashboard workspace. */
.project-dashboard-page .section-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.project-dashboard-scope {
    min-width: min(100%, 270px);
}

.project-dashboard-filter {
    display: grid;
    grid-template-columns: minmax(220px, 320px) auto;
    align-items: end;
    justify-content: start;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.project-dashboard-filter-actions,
.project-dashboard-section-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.project-dashboard-filter-actions .btn {
    min-width: 118px;
}

.project-dashboard-shortcut-bar {
    display: grid;
    grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1.45fr);
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-soft);
}

.project-dashboard-shortcut-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.project-dashboard-shortcut-copy strong {
    color: var(--text-strong);
    font-size: 15px;
    line-height: 1.4;
}

.project-dashboard-shortcut-copy > span:last-child {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.project-dashboard-shortcuts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.project-dashboard-shortcuts .btn {
    width: auto;
    min-width: 145px;
    min-height: 44px;
}

.project-dashboard-page .project-dashboard-overview-section {
    gap: 0;
}

.project-dashboard-role-block {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--border-soft);
}

.project-dashboard-overview-section .section-head + .project-dashboard-role-block {
    padding-top: 0;
    border-top: 0;
}

.project-dashboard-role-block:last-child {
    padding-bottom: 0;
}

.project-dashboard-role-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.project-dashboard-role-head > div {
    min-width: 0;
}

.project-dashboard-role-head h3 {
    margin: 2px 0 0;
    color: var(--text-strong);
    font-size: 18px;
    line-height: 1.35;
}

.project-dashboard-role-head p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.project-dashboard-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-dashboard-metric-grid.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-dashboard-metric-grid .metric-card {
    min-width: 0;
    border-left-width: 4px;
}

.project-dashboard-metric-grid .metric-card.is-primary { border-left-color: var(--color-primary); }
.project-dashboard-metric-grid .metric-card.is-info { border-left-color: var(--color-info); }
.project-dashboard-metric-grid .metric-card.is-warning { border-left-color: var(--color-warning); }
.project-dashboard-metric-grid .metric-card.is-success { border-left-color: var(--color-success); }
.project-dashboard-metric-grid .metric-card.is-danger { border-left-color: var(--color-danger); }

.project-dashboard-metric-grid .metric-value.is-money {
    font-size: 20px;
    overflow-wrap: anywhere;
}

.project-dashboard-budget-health {
    display: grid;
    grid-template-columns: minmax(280px, 1.5fr) repeat(2, minmax(170px, 0.75fr));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    overflow: hidden;
}

.project-dashboard-budget-progress,
.project-dashboard-budget-stat {
    min-width: 0;
    padding: var(--space-3);
}

.project-dashboard-budget-stat {
    display: grid;
    align-content: center;
    gap: 5px;
    border-left: 1px solid var(--border-soft);
}

.project-dashboard-budget-stat span,
.project-dashboard-progress-row > span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.project-dashboard-budget-stat strong {
    color: var(--text-strong);
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.project-dashboard-budget-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.project-dashboard-budget-head strong {
    display: block;
    margin-top: 3px;
    color: var(--text-strong);
    font-size: 15px;
}

.project-dashboard-progress {
    width: 100%;
    height: 9px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    appearance: none;
}

.project-dashboard-progress::-webkit-progress-bar {
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
}

.project-dashboard-progress::-webkit-progress-value {
    border-radius: var(--radius-pill);
    background: var(--progress-rainbow);
}

.project-dashboard-progress::-moz-progress-bar {
    border-radius: var(--radius-pill);
    background: var(--progress-rainbow);
}

.project-dashboard-funding-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.project-dashboard-project-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.project-dashboard-funding-record,
.project-dashboard-project-record {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
}

.project-dashboard-project-record {
    border-left-width: 4px;
}

.project-dashboard-record-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 0;
}

.project-dashboard-record-head > div {
    min-width: 0;
}

.project-dashboard-record-head h3,
.project-dashboard-project-identity h3 {
    margin: 3px 0 0;
    color: var(--text-strong);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.project-dashboard-project-identity p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.project-dashboard-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.project-dashboard-detail-grid > div {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--surface-muted);
}

.project-dashboard-detail-grid span,
.project-dashboard-work-plan span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.project-dashboard-detail-grid strong {
    color: var(--text-strong);
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.project-dashboard-progress-row {
    display: grid;
    grid-template-columns: minmax(135px, auto) minmax(160px, 1fr);
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.project-dashboard-work-plan {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
}

.project-dashboard-work-plan > div {
    min-width: 0;
}

.project-dashboard-work-plan p {
    margin: 5px 0 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

@media (max-width: 1120px) {
    .project-dashboard-funding-list {
        grid-template-columns: 1fr;
    }

    .project-dashboard-metric-grid,
    .project-dashboard-metric-grid.is-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-dashboard-budget-health {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .project-dashboard-budget-progress {
        grid-column: 1 / -1;
    }

    .project-dashboard-budget-stat:first-of-type {
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .project-dashboard-page .section-card {
        padding: var(--space-4);
    }

    .project-dashboard-filter,
    .project-dashboard-shortcut-bar,
    .project-dashboard-metric-grid,
    .project-dashboard-metric-grid.is-three,
    .project-dashboard-budget-health,
    .project-dashboard-detail-grid,
    .project-dashboard-work-plan,
    .project-dashboard-progress-row {
        grid-template-columns: 1fr;
    }

    .project-dashboard-shortcuts {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .project-dashboard-filter-actions,
    .project-dashboard-section-actions {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .project-dashboard-filter-actions .btn,
    .project-dashboard-shortcuts .btn,
    .project-dashboard-section-actions .btn,
    .project-dashboard-role-head .btn {
        width: 100%;
        min-width: 0;
    }

    .project-dashboard-role-head {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .project-dashboard-role-head .btn {
        grid-column: 1 / -1;
    }

    .project-dashboard-budget-stat {
        border-top: 1px solid var(--border-soft);
        border-left: 0;
    }

    .project-dashboard-budget-progress {
        grid-column: auto;
    }

    .project-dashboard-record-head,
    .project-dashboard-budget-head {
        display: grid;
    }

    .project-dashboard-record-head .pill-soft,
    .project-dashboard-budget-head .pill-soft {
        justify-self: start;
    }
}
/* Project list components. Centralized from app/Modules/Project/Views/list.php. */
.project-list-inline-form {
  display: inline-flex;
}

.project-list-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.project-list-page .section-card {
  display: grid;
  gap: var(--space-4);
}

.project-list-full {
  grid-column: 1 / -1;
}

.project-list-modal-actions {
  justify-content: flex-end;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.project-list-page .project-list-summary-section,
.project-list-page .project-list-control-section,
.project-list-page .project-list-record-section {
  padding: var(--space-5);
}

.project-list-scope {
  min-width: min(100%, 260px);
}

.project-list-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.project-list-status-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-list-status-grid .metric-card {
  min-width: 0;
}

.project-list-financial-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.project-list-financial-strip > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.project-list-financial-strip span,
.project-list-fact span,
.project-budget-grid span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-list-financial-strip strong,
.project-list-fact strong,
.project-budget-grid strong {
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.project-list-page .project-filter-bar {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.project-list-filter-grid {
  grid-template-columns: minmax(260px, 2fr) minmax(150px, 0.7fr) minmax(180px, 0.8fr);
}

.project-list-filter-grid .is-wide {
  grid-column: auto;
}

.project-list-page .project-filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
  align-self: end;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.project-list-page .project-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.project-list-page .project-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.project-list-page .project-card-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

.project-list-page .project-card-identity > div {
  min-width: 0;
}

.project-list-page .project-card-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 6px;
}

.project-list-page .project-name {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-list-page .project-description {
  display: -webkit-box;
  max-width: 88ch;
  margin: 5px 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.project-list-overview {
  display: grid;
  gap: var(--space-3);
}

.project-list-fact-group {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.project-list-fact-group + .project-list-fact-group {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.project-list-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.project-list-group-head > div {
  min-width: 0;
}

.project-list-group-head h4 {
  margin: 0;
  color: var(--text-strong);
  font-size: 15px;
  line-height: 1.4;
}

.project-list-group-head p {
  margin: 2px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}

.project-list-group-grid {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.project-list-group-grid.is-timeline {
  grid-template-columns: minmax(110px, 0.55fr) minmax(260px, 1.45fr) minmax(190px, 1fr);
}

.project-list-group-grid.is-owners {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-list-fact {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  min-height: 68px;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.project-budget-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.project-budget-head,
.project-card-footer,
.project-primary-actions,
.project-management-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.project-budget-head,
.project-card-footer {
  justify-content: space-between;
}

.project-budget-head > div {
  display: grid;
  gap: 3px;
}

.project-list-budget-progress {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--surface-muted);
}

.project-list-budget-progress::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--surface-muted);
}

.project-list-budget-progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--color-primary);
}

.project-list-budget-progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--color-primary);
}

.project-budget-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.project-budget-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-budget-grid strong {
  font-variant-numeric: tabular-nums;
}

.project-card-footer {
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.project-primary-actions,
.project-management-actions {
  flex-wrap: wrap;
}

.project-management-actions {
  justify-content: flex-end;
  margin-left: auto;
}

.project-list-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  text-align: center;
}

.project-list-empty strong {
  color: var(--text-strong);
  font-size: 17px;
}

.project-list-empty > span:not(.empty-state-icon) {
  color: var(--text-muted);
}

.project-edit-modal {
  display: grid;
  gap: var(--space-4);
  width: min(940px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.project-edit-form {
  display: grid;
  gap: var(--space-4);
}

.project-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 1024px) {
  .project-list-status-grid,
  .project-budget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-list-group-grid.is-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-list-group-grid.is-timeline .is-funding {
    grid-column: 1 / -1;
  }

  .project-list-filter-grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 768px) {
  .project-list-page .project-list-summary-section,
  .project-list-page .project-list-control-section,
  .project-list-page .project-list-record-section,
  .project-list-page .project-card,
  .project-budget-panel {
    padding: var(--space-3);
  }

  .project-list-head-actions,
  .project-list-page .project-filter-actions,
  .project-primary-actions,
  .project-management-actions,
  .project-list-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .project-list-head-actions .btn,
  .project-list-page .project-filter-actions .btn,
  .project-primary-actions .btn,
  .project-management-actions .btn,
  .project-management-actions form,
  .project-management-actions form .btn,
  .project-list-modal-actions .btn {
    width: 100%;
  }

  .project-list-status-grid,
  .project-list-financial-strip,
  .project-list-filter-grid,
  .project-list-group-grid.is-timeline,
  .project-list-group-grid.is-owners,
  .project-budget-grid,
  .project-edit-grid {
    grid-template-columns: 1fr;
  }

  .project-list-group-grid.is-timeline .is-funding,
  .project-list-full {
    grid-column: auto;
  }

  .project-list-page .project-card-identity {
    grid-template-columns: 1fr;
  }

  .project-list-page .project-card-identity .action-icon {
    display: none;
  }

  .project-budget-head,
  .project-card-footer,
  .project-list-modal-head {
    align-items: stretch;
    flex-direction: column;
  }

  .project-management-actions {
    margin-left: 0;
  }

  .project-edit-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
}

/* Project weekly components. Centralized from app/Modules/Project/Views/weekly.php. */
.project-weekly-filter {
    margin-bottom: var(--space-3);
}
.project-weekly-filter-actions {
    justify-content: flex-start;
}
.project-weekly-actions {
    margin-bottom: var(--space-3);
}
.project-weekly-project-name {
    font-size: 12px;
    color: var(--text-muted);
}
@media print {
    .project-weekly-page .btn { display:none !important; }
}

/* Meeting approval components. Centralized from app/Modules/Meeting/Views/approve.php. */
.meeting-approval-actions {
    display: flex;
    gap: 6px;
}
.meeting-approval-danger {
    background: #b91c1c;
}
.meeting-approval-success {
    background: #16a34a;
}
.meeting-approval-empty {
    color: #64748b;
}
.meeting-approval-section-title {
    margin-top: 16px;
}

/* Service permissions components. Centralized from app/Modules/Service/Views/permissions.php. */
.service-permissions-card {
    padding: 12px;
}
.service-permissions-check-col {
    width: 70px;
}
.service-permissions-role-col {
    width: 150px;
}
.service-permissions-empty {
    text-align: center;
    color: #64748b;
}
.service-permissions-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.service-permissions-save {
    background: #16a34a;
}

/* Inventory item categories shared component alignment. */
.inventory-item-categories-page {
    min-width: 0;
    width: 100%;
    max-width: 1180px;
}

.inventory-category-hero {
    align-items: center;
}

.inventory-category-back.btn {
    flex: 0 0 auto;
}

.inventory-category-stats.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inventory-category-stats .metric-card {
    gap: var(--space-2);
}

.inventory-category-stats .metric-card span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
}

.inventory-category-stats .metric-card strong {
    color: var(--text-strong);
    font-size: 26px;
    line-height: 1;
}

.inventory-category-panel.section-card {
    gap: var(--space-4);
}

.inventory-category-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}

.inventory-category-panel-head .section-title {
    margin: 0;
}

.inventory-category-panel-head .section-subtitle {
    margin: var(--space-1) 0 0;
}

.inventory-category-add-form.filter-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.inventory-category-add-actions,
.inventory-category-row-actions {
    align-self: end;
    justify-content: flex-end;
}

.inventory-category-list {
    display: grid;
    gap: var(--space-3);
}

.inventory-category-card.record-card {
    gap: var(--space-3);
}

.inventory-category-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.inventory-category-card-top span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
}

.inventory-category-card-top .badge-soft {
    flex: 0 0 auto;
}

.inventory-category-row-form {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: end;
}

@media (max-width: 760px) {
    .inventory-category-stats.metric-grid,
    .inventory-category-add-form.filter-grid,
    .inventory-category-row-form {
        grid-template-columns: 1fr;
    }

    .inventory-category-panel-head,
    .inventory-category-card-top {
        display: grid;
    }

    .inventory-category-back.btn,
    .inventory-category-add-actions .btn,
    .inventory-category-row-actions .btn {
        width: 100%;
    }

    .inventory-category-add-actions,
    .inventory-category-row-actions {
        justify-content: stretch;
    }

    .inventory-category-card-top .badge-soft {
        width: max-content;
        max-width: 100%;
    }
}

/* Inventory item history shared component alignment. */
.inventory-item-history-page {
    width: 100%;
    max-width: 1180px;
}

.inventory-history-hero {
    align-items: center;
}

.inventory-history-title,
.inventory-history-item-main > div:first-child,
.inventory-history-card-body,
.inventory-history-person {
    min-width: 0;
}

.inventory-history-actions {
    align-items: flex-end;
}

.inventory-history-back.btn {
    flex: 0 0 auto;
}

.inventory-history-item-card.section-card,
.inventory-history-panel.section-card {
    gap: var(--space-4);
}

.inventory-history-item-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}

.inventory-history-item-main .section-title,
.inventory-history-item-main .section-subtitle,
.inventory-history-person strong,
.inventory-history-change-field,
.inventory-history-change-values strong,
.inventory-history-facts strong,
.inventory-history-summary .quick-stat strong {
    overflow-wrap: anywhere;
}

.inventory-history-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.inventory-history-facts span,
.inventory-history-summary .quick-stat span,
.inventory-history-change-values span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.inventory-history-facts strong {
    color: var(--text-strong);
    font-size: 15px;
}

.inventory-history-summary.metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inventory-history-summary .quick-stat {
    pointer-events: none;
}

.inventory-history-list {
    display: grid;
    gap: var(--space-4);
}

.inventory-history-card.record-card {
    position: relative;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: var(--space-3);
}

.inventory-history-card::before {
    content: "";
    position: absolute;
    left: 32px;
    top: 54px;
    bottom: calc(var(--space-4) * -1);
    width: 2px;
    background: var(--border-soft);
}

.inventory-history-card:last-child::before {
    display: none;
}

.inventory-history-marker {
    z-index: 1;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-sm);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
    font-size: 12px;
    font-weight: 900;
}

.inventory-history-card-body {
    display: grid;
    gap: var(--space-3);
}

.inventory-history-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.inventory-history-person {
    display: grid;
    gap: var(--space-1);
}

.inventory-history-time {
    color: var(--text-muted);
    font-size: 12px;
}

.inventory-history-action.badge-soft {
    flex: 0 0 auto;
}

.inventory-history-action.badge-soft.is-positive {
    border-color: var(--color-success-border);
    background: var(--color-success-soft);
    color: var(--color-success-ink);
}

.inventory-history-action.badge-soft.is-muted {
    border-color: var(--border-muted);
    background: var(--surface-muted);
    color: var(--text-soft);
}

.inventory-history-action.badge-soft.is-update {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}

.inventory-history-action.badge-soft.is-other {
    border-color: var(--color-info-border);
    background: var(--color-info-soft);
    color: var(--color-info-ink);
}

.inventory-history-note.empty-state {
    margin: 0;
    padding: var(--space-3);
}

.inventory-history-change-list {
    display: grid;
    gap: var(--space-3);
}

.inventory-history-change.content-box {
    gap: var(--space-3);
}

.inventory-history-change-field {
    color: var(--text-strong);
    font-weight: 900;
}

.inventory-history-change-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.inventory-history-change-values strong {
    color: var(--text-strong);
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .inventory-history-item-main {
        display: grid;
    }

    .inventory-history-actions,
    .inventory-history-actions .inventory-history-back {
        width: 100%;
    }

    .inventory-history-actions .inventory-history-back {
        justify-content: center;
    }

    .inventory-history-facts,
    .inventory-history-summary.metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .inventory-history-facts,
    .inventory-history-summary.metric-grid,
    .inventory-history-change-values {
        grid-template-columns: 1fr;
    }

    .inventory-history-card.record-card {
        grid-template-columns: 1fr;
    }

    .inventory-history-card::before {
        display: none;
    }

    .inventory-history-head {
        display: grid;
    }

    .inventory-history-action.badge-soft {
        width: max-content;
        max-width: 100%;
    }
}

/* Inventory executive request view shared component alignment. */
.inventory-executive-view-page {
    width: 100%;
    max-width: 1180px;
}

.inventory-executive-view-hero {
    align-items: center;
}

.inventory-executive-view-actions {
    align-items: flex-end;
}

.inventory-executive-request-card.section-card,
.inventory-executive-items-card.section-card {
    gap: var(--space-4);
}

.inventory-executive-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.inventory-executive-detail-grid .content-box {
    min-width: 0;
}

.inventory-executive-detail-grid .content-box.is-wide {
    grid-column: span 3;
}

.inventory-executive-detail-grid .content-box span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
}

.inventory-executive-detail-grid .content-box strong {
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.inventory-executive-items-title.section-title {
    margin: 0;
}

.inventory-executive-items-table.nice-table {
    min-width: 640px;
}

.inventory-executive-items-table .empty-state {
    border: 0;
    border-radius: 0;
}

@media (max-width: 900px) {
    .inventory-executive-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-executive-detail-grid .content-box.is-wide {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .inventory-executive-view-actions,
    .inventory-executive-view-actions .btn {
        width: 100%;
    }

    .inventory-executive-detail-grid,
    .inventory-executive-detail-grid .content-box.is-wide {
        grid-template-columns: 1fr;
        grid-column: auto;
    }
}

/* Rental shared components. Centralized from app/Modules/Rental/Views/*.php. */
.rental-flash {
    margin-top: 12px;
}
.rental-flash.is-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}
.rental-flash.is-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}
.rental-section-title {
    margin-top: 0;
}
.rental-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
}
.rental-form-grid-sm {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.rental-stack-form {
    display: grid;
    gap: 10px;
}
.rental-filter-form {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 8px;
}
.rental-gap-sm {
    gap: 6px;
}
.rental-gap-md {
    gap: 10px;
}
.rental-subtitle {
    color: #64748b;
    margin-top: 4px;
}
.rental-field-min-sm {
    min-width: 170px;
}
.rental-field-min {
    min-width: 190px;
}
.rental-filter-field.is-month {
    min-width: 190px;
}
.rental-filter-field.is-history {
    min-width: 170px;
}
.rental-field-full {
    grid-column: 1 / -1;
}
.rental-table-wrap {
    overflow: auto;
}
.rental-empty-cell {
    text-align: center;
    color: #64748b;
}
.rental-muted {
    color: #64748b;
}
.rental-list-grid {
    display: grid;
    gap: 10px;
}
.rental-list-grid.is-compact {
    gap: 8px;
}
.rental-info-card {
    margin: 0;
    border-color: #dbeafe;
    background: #f8fbff;
}
.rental-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.rental-title-md {
    font-size: 16px;
    font-weight: 700;
}
.rental-body-text {
    margin-top: 6px;
    color: #334155;
}
.rental-meta {
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
}
.rental-body-text.is-compact {
    margin-top: 4px;
}
.rental-meta.is-compact {
    margin-top: 6px;
}
.rental-inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rental-action-form {
    display: grid;
    gap: 6px;
    min-width: 180px;
}
.rental-action-form-wide {
    min-width: 220px;
}
.rental-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rental-checkbox {
    width: 16px;
    height: 16px;
}
.rental-input-sm {
    max-width: 130px;
}
.rental-input-md {
    max-width: 170px;
}
.rental-select-sm {
    max-width: 140px;
}
.rental-button-success {
    background: #16a34a;
}
.rental-button-danger {
    background: #dc2626;
}
.rental-stat-value {
    font-size: 22px;
    font-weight: 700;
}
.rental-stat-value.is-compact {
    font-size: 22px;
}
.rental-stat-value.is-small {
    font-size: 20px;
}
.rental-stat-value.is-success,
.rental-trend.is-success {
    color: #166534;
}
.rental-stat-value.is-warning {
    color: #b45309;
}
.rental-stat-value.is-danger,
.rental-trend.is-danger {
    color: #991b1b;
}
.rental-trend {
    font-weight: 700;
}
.rental-trend.is-neutral {
    color: #1e293b;
}
.rental-state-ok {
    color: #16a34a;
}
.rental-chart-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
}
.rental-chart-title {
    margin-bottom: 6px;
    font-weight: 700;
}
.rental-chart-lines {
    display: grid;
    gap: 6px;
}
.rental-chart-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rental-chart-label {
    min-width: 95px;
    color: #334155;
}
.rental-chart-bar {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
}
.rental-chart-bar::-webkit-progress-bar {
    background: #e2e8f0;
    border-radius: 999px;
}
.rental-chart-bar::-webkit-progress-value {
    border-radius: 999px;
}
.rental-chart-bar::-moz-progress-bar {
    border-radius: 999px;
}
.rental-chart-bar.is-billed::-webkit-progress-value {
    background: #2563eb;
}
.rental-chart-bar.is-billed::-moz-progress-bar {
    background: #2563eb;
}
.rental-chart-bar.is-paid::-webkit-progress-value {
    background: #16a34a;
}
.rental-chart-bar.is-paid::-moz-progress-bar {
    background: #16a34a;
}
.rental-chart-value {
    min-width: 90px;
    text-align: right;
}
.rental-alert-card {
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-weight: 700;
    overflow-wrap: anywhere;
}
.rental-alert-card.is-danger {
    border: 1px solid var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
}
.rental-timeline-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
}
.rental-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.rental-timeline-bar {
    width: 100%;
    height: 12px;
    margin-top: 6px;
    overflow: hidden;
    appearance: none;
    border: 0;
    border-radius: 999px;
    background: #e2e8f0;
}
.rental-timeline-bar::-webkit-progress-bar {
    background: #e2e8f0;
    border-radius: 999px;
}
.rental-timeline-bar::-webkit-progress-value {
    background: #2563eb;
    border-radius: 999px;
}
.rental-timeline-bar::-moz-progress-bar {
    background: #2563eb;
    border-radius: 999px;
}

/* Meeting index page components. Centralized from app/Modules/Meeting/Views/index.php. */
.meeting-index-card {
    margin: 12px 0;
}
.meeting-index-section-title {
    margin-top: 0;
}

/* Inventory dashboard shared component alignment. */
.inventory-dashboard-page {
    max-width: 1180px;
}
.inventory-dashboard-hero.page-hero {
    grid-template-columns: minmax(0, 1fr);
}
.inventory-dashboard-title,
.inventory-dashboard-subtitle,
.inventory-dashboard-card-title,
.inventory-dashboard-section-title {
    margin: 0;
}
.inventory-dashboard-summary.section-card,
.inventory-dashboard-panel.section-card {
    gap: var(--space-4);
}
.inventory-dashboard-summary .stat-grid.metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.inventory-dashboard-summary .stat-card.metric-card {
    min-height: 118px;
    box-shadow: none;
}
.inventory-dashboard-summary .stat-grid > .stat-card.metric-card {
    background: var(--surface);
}
.inventory-dashboard-summary .stat-grid > .stat-card.metric-card.is-info {
    border-color: var(--color-info-border);
    background: var(--color-info-soft);
    color: var(--color-info-ink);
}
.inventory-dashboard-summary .stat-grid > .stat-card.metric-card.is-neutral {
    border-color: var(--border-muted);
    background: var(--surface-muted);
    color: var(--text-soft);
}
.inventory-dashboard-summary .stat-grid > .stat-card.metric-card.is-warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-soft);
    color: var(--color-warning-ink);
}
.inventory-dashboard-summary .stat-grid > .stat-card.metric-card.is-danger {
    border-color: var(--color-danger-border);
    background: var(--color-danger-soft);
    color: var(--color-danger-ink);
}
.inventory-dashboard-stat-label.metric-head {
    color: var(--text-soft);
    font-size: 12px;
}
.inventory-dashboard-stat-value.metric-value {
    margin: 0;
    font-size: 28px;
}
.inventory-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
    gap: var(--space-4);
}
.inventory-dashboard-grid .quick-links.action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.inventory-dashboard-grid .quick-link.action-card {
    min-height: 64px;
    color: var(--text-strong);
    text-decoration: none;
}
.inventory-dashboard-grid .quick-link.action-card.is-primary {
    color: var(--color-primary-ink);
}
.inventory-dashboard-note-list.content-list {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.8;
}

@media (max-width: 980px) {
    .inventory-dashboard-summary .stat-grid.metric-grid,
    .inventory-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .inventory-dashboard-summary .stat-grid.metric-grid,
    .inventory-dashboard-grid,
    .inventory-dashboard-grid .quick-links.action-grid {
        grid-template-columns: 1fr;
    }
}

/* Main layout shared components. Centralized from app/Layouts/main.php inline attributes. */
.layout-brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: cover;
}
.layout-notif-badge {
    background: var(--accent-ghost);
    color: var(--accent);
}
.layout-notif-badge.is-hidden {
    display: none;
}
.layout-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    object-fit: cover;
}
.layout-user-roles {
    color: var(--muted);
}
.layout-inline-form {
    margin: 0;
}
.layout-logout-btn {
    width: 100%;
    border: 0;
    background: none;
    color: #b91c1c;
    text-align: left;
    cursor: pointer;
}
.layout-error-card {
    margin-bottom: 12px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}
.layout-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px 0;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}
.layout-pdpa-title {
    margin-bottom: 8px;
    font-weight: 600;
}
.layout-pdpa-body {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}
.layout-pdpa-desc {
    margin: 0 0 8px;
}
.layout-pdpa-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}
.layout-dark-btn {
    background: #0f172a;
}
.layout-consent-form {
    margin-top: 12px;
}
.layout-cookie-banner {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    background: #0f172a;
    color: #fff;
}
.layout-cookie-text {
    font-size: 14px;
    line-height: 1.5;
}
.layout-cookie-link {
    color: #93c5fd;
    text-decoration: underline;
}
.layout-cookie-accept {
    background: #fff;
    color: #0f172a;
}


/* Main layout shell, topbar, sidebar, and toast components. Centralized from app/Layouts/main.php style block. */
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Noto Sans Thai", system-ui, sans-serif; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; z-index: 999; }
.modal-card { background: #fff; border-radius: 14px; width: min(640px, 90vw); padding: 16px; box-shadow: 0 24px 60px rgba(15,23,42,0.2); }
.topbar-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    white-space: normal !important;
}
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f8fafc;
    border: 1px solid #dbe3f0;
    border-radius: 999px;
    padding: 4px;
}
.lang-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 6px 10px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
}
.lang-switch a.active {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}
.brand-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}
.brand-subtitle {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.35;
}
.menu-popover {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    position: relative !important;
}
.topbar-notif-popover,
.topbar-user-popover {
    min-width: 0;
}
.dropdown button.menu-link {
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    font-family: var(--font-ui) !important;
    justify-content: flex-start !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.dropdown button.menu-link:hover {
    background: #f2f2f4 !important;
}
.toast-stack {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 3000;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 24px));
}
.toast-item {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 30px rgba(2, 6, 23, .18);
    padding: 10px 12px;
    display: grid;
    gap: 8px;
    border-left: 5px solid #2563eb;
}
.toast-item.toast-approval { border-left-color: #f59e0b; }
.toast-item.toast-leave { border-left-color: #16a34a; }
.toast-item.toast-room { border-left-color: #2563eb; }
.toast-item.toast-inventory { border-left-color: #9333ea; }
.toast-item.toast-rental { border-left-color: #0ea5e9; }
.toast-item.toast-service { border-left-color: var(--color-teal); }
.toast-item.toast-edoc { border-left-color: var(--color-info); }
.toast-item.toast-project { border-left-color: var(--color-purple); }
.toast-item.toast-attendance { border-left-color: var(--color-primary); }
.toast-title {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.toast-msg {
    font-size: 13px;
    color: #334155;
    line-height: 1.45;
}
.toast-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.toast-btn {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #0f172a;
    padding: 4px 8px;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}
.toast-btn.toast-primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
.nav-group-title {
    margin: 12px 0 6px;
    padding: 0 8px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.sidebar-role-switch {
    margin-bottom: 10px;
    border: 1px solid #dbe3f0;
    border-radius: 12px;
    background: #f8fbff;
    padding: 10px;
    display: grid;
    gap: 6px;
}
.sidebar-role-switch label {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.sidebar-role-switch select {
    width: 100%;
    font-size: 13px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    padding: 7px 10px;
}
.sidebar-role-panel {
    display: none;
}
.sidebar-role-panel.is-active {
    display: block;
}
.mobile-sidebar-close,
.mobile-sidebar-backdrop,
.mobile-sidebar-toggle {
    display: none;
}
.sidebar-scroll {
    display: block;
}
@media (max-width: 960px) {
    .topbar {
        position: sticky;
        top: 0;
        width: 100%;
        background: rgba(245, 247, 251, 0.88);
        border-bottom: 1px solid rgba(203, 213, 225, 0.75);
        backdrop-filter: blur(16px);
    }
    .topbar-inner {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .topbar-actions {
        justify-content: flex-start !important;
        width: 100%;
    }
    .menu-popover .dropdown {
        max-width: 94vw;
    }
    html.sidebar-open,
    body.sidebar-open {
        overflow: hidden;
    }
    .mobile-sidebar-toggle {
        display: inline-flex !important;
        width: 42px;
        height: 42px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        border: 1px solid #dbe3f0;
        background: #fff;
        color: #0f172a;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
        flex: 0 0 auto;
    }
    .mobile-sidebar-close {
        display: inline-flex;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        background: #ffffff;
        color: #1f2937;
        font-size: 24px;
        line-height: 1;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
        z-index: 2710;
    }
    .mobile-sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.42);
        backdrop-filter: blur(2px);
        z-index: 2600;
    }
    body.sidebar-open .mobile-sidebar-backdrop {
        display: block;
    }
    .app-layout {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: fixed !important;
        top: max(10px, env(safe-area-inset-top)) !important;
        left: max(10px, env(safe-area-inset-left)) !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        width: min(318px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right))) !important;
        max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
        height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        z-index: 2700 !important;
        transform: translate3d(calc(-100% - 16px), 0, 0) !important;
        transition: transform .22s ease, opacity .22s ease !important;
        opacity: 0 !important;
        pointer-events: none !important;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18) !important;
        padding-top: 12px !important;
    }
    body.sidebar-open .sidebar {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .sidebar-scroll {
        display: block !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        padding-top: 40px !important;
        padding-right: 4px !important;
        padding-bottom: 18px !important;
    }
}
@media (max-width: 560px) {
    .topbar {
        position: relative !important;
        top: auto !important;
        z-index: 2500 !important;
        background: transparent;
        border-bottom: 0;
        backdrop-filter: none;
    }
    .topbar-inner {
        display: grid !important;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.88);
        border: 1px solid rgba(203, 213, 225, 0.75);
        border-radius: 0 0 18px 18px;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(16px);
    }
    .brand {
        width: 100%;
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        min-width: 0;
    }
    .brand-copy {
        min-width: 0;
    }
    .brand-title {
        line-height: 1.2;
    }
    .brand-subtitle {
        font-size: 11px;
    }
    .topbar-actions {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center !important;
        justify-content: stretch !important;
        gap: 8px !important;
        width: 100%;
    }
    .topbar-btn {
        min-height: 38px !important;
        border-radius: 12px !important;
    }
    .lang-switch {
        justify-self: start;
        min-height: 38px;
    }
    .topbar-notif-popover {
        width: 100%;
        min-width: 0;
    }
    .topbar-notif-popover .notif-btn {
        width: 100%;
        justify-content: space-between !important;
        padding: 8px 12px !important;
    }
    .topbar-notif-popover .notif-btn > span:nth-child(2) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar-user-popover {
        grid-column: 1 / -1;
        width: 100%;
    }
    .topbar-user-popover .profile-btn {
        width: 100%;
        justify-content: flex-start !important;
        min-height: 42px !important;
        padding: 8px 10px !important;
    }
    .user-chip-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .user-chip-role {
        margin-left: auto;
    }
    .mobile-sidebar-toggle {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
}
@media (max-width: 420px) {
    .topbar-actions {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .lang-switch,
    .topbar-notif-popover,
    .topbar-user-popover {
        width: 100%;
    }
    .lang-switch {
        grid-column: 1;
        justify-self: start;
        justify-content: center;
        width: auto;
    }
    .topbar-notif-popover {
        grid-column: 2;
    }
    .topbar-user-popover {
        grid-column: 1 / -1;
    }
}
@media (min-width: 961px) {
    html.sidebar-open,
    body.sidebar-open {
        overflow: auto !important;
    }
    .mobile-sidebar-toggle,
    .mobile-sidebar-close,
    .mobile-sidebar-backdrop {
        display: none !important;
    }
    .app-layout {
        grid-template-columns: 240px 1fr !important;
        align-items: start !important;
    }
    .sidebar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        height: fit-content !important;
        max-height: none !important;
        margin: 0 !important;
        display: block !important;
        overflow: visible !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        align-self: start !important;
        box-shadow: var(--shadow) !important;
        padding-top: 16px !important;
    }
    .sidebar-scroll {
        display: block !important;
        flex: none !important;
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 0 !important;
        padding-right: 0 !important;
    }
}

.meeting-required-label,
.meeting-time-label {
    align-items: baseline;
    display: inline-flex;
    gap: var(--space-1);
}

.meeting-required-mark {
    color: var(--color-danger);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.meeting-form-card input::placeholder,
.meeting-form-card textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.78;
}

.request-form > .request-details-plain .request-info-grid,
.request-form > .request-details-plain .request-details-grid {
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Leave list refreshed layout */
.leave-page {
    gap: var(--space-5);
    max-width: 1180px;
    margin: 0 auto;
}

.leave-page .leave-hero,
.leave-page .leave-section-card {
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.leave-page .leave-hero {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.leave-page .leave-hero-top {
    align-items: center;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-soft);
}

.leave-page .leave-hero-copy {
    max-width: 760px;
}

.leave-page .leave-hero-copy h1 {
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.16;
}

.leave-page .leave-hero-copy p {
    max-width: 720px;
    margin-top: var(--space-2);
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.65;
}

.leave-page .leave-hero-period {
    min-height: 40px;
    border-color: var(--border-soft);
    background: var(--surface-muted);
    color: var(--text);
}

.leave-page .leave-hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: 0;
}

.leave-page .leave-hero-metric {
    min-height: 0;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--surface-subtle);
}

.leave-page .leave-hero-metric::before {
    top: var(--space-3);
    bottom: var(--space-3);
    inset-inline-start: 0;
    width: 4px;
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    background: var(--color-primary);
}

.leave-page .leave-hero-metric-value {
    font-size: 32px;
}

.leave-page .leave-section-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
}

.leave-page .leave-section-head {
    align-items: center;
    margin-bottom: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}

.leave-page .leave-section-title {
    font-size: 22px;
}

.leave-page .leave-section-desc {
    max-width: 740px;
    color: var(--text-soft);
    line-height: 1.6;
}

.leave-page .leave-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-3);
}

.leave-page .leave-stat-card {
    min-height: 136px;
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: linear-gradient(180deg, var(--surface) 0%, var(--leave-soft) 100%);
}

.leave-page .leave-stat-card::before,
.leave-page .leave-history-card::before {
    top: var(--space-3);
    bottom: var(--space-3);
}

.leave-page .leave-stat-summary {
    display: grid;
    gap: var(--space-2);
}

.leave-page .leave-stat-remain {
    display: grid;
    gap: var(--space-1);
}

.leave-page .leave-stat-remain-value {
    font-size: 28px;
}

.leave-page .leave-stat-used-line {
    white-space: normal;
}

.leave-page .leave-stat-progress {
    height: 8px;
    background: color-mix(in srgb, var(--leave-accent) 12%, var(--surface-muted));
}

.leave-page .leave-calendar-frame {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.leave-page .leave-calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.leave-page .leave-cal-day {
    min-width: 0;
    border-radius: var(--radius-sm);
}

.leave-history-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.leave-history-summary-card {
    position: relative;
    display: grid;
    gap: var(--space-1);
    min-height: 82px;
    padding: var(--space-3) var(--space-4);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.leave-history-summary-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--text-muted);
}

.leave-history-summary-card.is-total::before { background: var(--color-primary); }
.leave-history-summary-card.is-pending::before { background: var(--color-warning); }
.leave-history-summary-card.is-approved::before { background: var(--color-success); }
.leave-history-summary-card.is-rejected::before { background: var(--color-danger); }

.leave-history-summary-card span {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.35;
}

.leave-history-summary-card strong {
    color: var(--text);
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.leave-history-cards {
    gap: var(--space-4);
}

.leave-page .leave-history-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-subtle) 100%);
    box-shadow: var(--shadow-sm);
}

.leave-page .leave-history-card:hover {
    box-shadow: var(--shadow-sm);
}

.leave-page .leave-history-head {
    margin-bottom: 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-soft);
}

.leave-page .leave-history-title-wrap {
    gap: var(--space-2);
    min-width: 0;
}

.leave-page .leave-order-badge {
    width: fit-content;
    background: var(--leave-soft);
}

.leave-page .leave-history-type {
    color: var(--text);
    font-size: 20px;
    font-weight: 900;
}

.leave-page .leave-history-sub {
    gap: var(--space-2);
    font-size: 12px;
}

.leave-page .leave-history-side {
    justify-items: end;
    min-width: min(260px, 100%);
}

.leave-page .leave-range-chip,
.leave-page .leave-emergency-badge,
.leave-page .leave-canceled-marker,
.leave-page .leave-cancel-state {
    border-radius: var(--radius-pill);
    white-space: normal;
}

.leave-page .leave-approval-flow {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--surface-muted);
}

.leave-page .leave-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.leave-page .leave-history-group {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--surface);
}

.leave-page .leave-history-group-title {
    color: var(--text);
    font-size: 13px;
    font-weight: 900;
}

.leave-page .leave-history-info-row,
.leave-page .leave-history-doc-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.leave-page .leave-history-item,
.leave-page .leave-reason-card,
.leave-page .leave-actions-panel {
    border-color: var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
}

.leave-page .leave-reason-card,
.leave-page .leave-actions-panel {
    grid-column: auto;
}

.leave-page .leave-reason-text {
    color: var(--text);
}

.leave-page .leave-action-cell {
    align-items: center;
}

.leave-page .leave-action-cell .btn,
.leave-page .leave-action-cell a.btn,
.leave-page .leave-action-cell form .btn {
    min-height: 38px;
    height: auto;
    border-radius: var(--radius-sm);
}

@media (max-width: 980px) {
    .leave-page {
        gap: var(--space-4);
    }

    .leave-page .leave-hero-metrics,
    .leave-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .leave-page .leave-history-grid {
        grid-template-columns: 1fr;
    }

    .leave-page .leave-history-side {
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .leave-page {
        max-width: 100%;
        gap: var(--space-3);
    }

    .leave-page .leave-hero,
    .leave-page .leave-section-card,
    .leave-page .leave-history-card {
        border-radius: var(--radius-md);
        padding: var(--space-3);
    }

    .leave-page .leave-hero-top,
    .leave-page .leave-section-head,
    .leave-page .leave-history-head {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .leave-page .leave-hero-period {
        display: grid;
        justify-items: start;
        width: 100%;
    }

    .leave-page .leave-hero-period span:nth-child(2) {
        display: none;
    }

    .leave-page .leave-hero-metrics,
    .leave-history-summary,
    .leave-page .leave-stat-grid,
    .leave-page .leave-history-info-row,
    .leave-page .leave-history-doc-row {
        grid-template-columns: 1fr;
    }

    .leave-page .leave-calendar-month,
    .leave-page .leave-calendar-month input {
        width: 100%;
    }

    .leave-page .leave-calendar-month {
        display: grid;
        gap: var(--space-2);
    }

    .leave-page .leave-calendar-frame {
        padding: var(--space-2);
    }

    .leave-page .leave-cal-weekday {
        min-height: 24px;
        font-size: 10px;
    }

    .leave-page .leave-cal-day {
        min-height: 72px;
        padding: var(--space-1);
        gap: var(--space-1);
    }

    .leave-page .leave-cal-date {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .leave-page .leave-today-badge {
        display: none;
    }

    .leave-page .leave-cal-event {
        font-size: 10px;
    }

    .leave-page .leave-history-side {
        justify-items: start;
        width: 100%;
    }

    .leave-page .leave-approval-flow {
        padding: var(--space-2);
    }

    .leave-page .leave-action-cell,
    .leave-page .leave-action-main,
    .leave-page .leave-action-right {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        justify-items: stretch;
    }
}

/* Leave list compact repair: keep central components, prevent stacked legacy rules. */
.leave-page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: none;
    align-items: start;
}

.leave-page > * {
    grid-column: 1 / -1;
    grid-area: auto;
}

.leave-page > .leave-section-card,
.leave-page > .leave-history-section {
    grid-area: auto;
}

.leave-page .leave-history-section {
    order: 3;
}

.leave-page .leave-history-cards {
    display: grid;
    gap: var(--space-3);
}

.leave-page .leave-history-card {
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    min-height: 0;
}

.leave-page .leave-history-head {
    grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
    gap: var(--space-3);
    align-items: start;
    padding: 0 0 var(--space-3);
    margin: 0;
}

.leave-page .leave-history-side {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

.leave-page .leave-history-type {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    color: var(--leave-accent-text, var(--text-strong));
}

.leave-page .leave-history-sub {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.leave-page .leave-history-card .leave-approval-flow {
    margin: 0;
    padding: var(--space-2);
}

.leave-page .leave-history-card .laf-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin: 0 0 var(--space-2);
}

.leave-page .leave-history-card .laf-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.leave-page .leave-history-card .laf-step {
    min-height: 0;
    padding: var(--space-2);
}

.leave-page .leave-cancellation-flow-panel {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0;
    padding: var(--space-2);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.leave-page .leave-cancellation-flow .laf-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.leave-page .leave-history-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
    padding: 0;
}

.leave-page .leave-history-group {
    display: grid;
    gap: var(--space-2);
    grid-column: auto;
    padding: var(--space-2);
    min-height: 0;
}

.leave-page .leave-history-group.is-reason,
.leave-page .leave-history-group.is-actions {
    grid-column: 1 / -1;
}

.leave-page .leave-history-info-row,
.leave-page .leave-history-doc-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.leave-page .leave-history-item,
.leave-page .leave-reason-card,
.leave-page .leave-actions-panel {
    padding: var(--space-2);
    min-height: 0;
}

.leave-page .leave-history-grid .label,
.leave-page .leave-reason-card .label {
    margin-bottom: 3px;
    font-size: 11px;
    line-height: 1.25;
}

.leave-page .leave-history-value {
    font-size: 13px;
    line-height: 1.45;
}

.leave-page .leave-reason-text {
    display: -webkit-box;
    max-height: 4.8em;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.leave-page .leave-action-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.leave-page .leave-action-main {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.leave-page .leave-action-right {
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.leave-page .leave-action-cell .btn,
.leave-page .leave-action-cell a.btn,
.leave-page .leave-action-cell form .btn,
.leave-page .leave-cancel-state {
    min-height: 34px;
    height: auto;
}

.leave-page .leave-history-card,
.leave-page .leave-history-card * {
    min-width: 0;
}

.leave-page .leave-history-card {
    align-content: start;
    grid-auto-rows: auto;
}

.leave-page .leave-history-group {
    align-content: start;
}

.leave-page .leave-history-item {
    display: grid;
    align-content: start;
    gap: 3px;
}

.leave-page .leave-history-value,
.leave-page .leave-doc-link,
.leave-page .leave-reason-text,
.leave-page .laf-step-title,
.leave-page .laf-step-meta,
.leave-page .laf-step-state {
    overflow-wrap: anywhere;
    word-break: normal;
}

.leave-page .leave-reason-card {
    display: grid;
    gap: 4px;
}

.leave-page .leave-reason-text {
    margin: 0;
    white-space: normal;
    line-height: 1.55;
}

.leave-page .leave-history-card .laf-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
}

.leave-page .leave-history-card .laf-step-body {
    min-width: 0;
}

.leave-page .leave-history-card .laf-step-title,
.leave-page .leave-history-card .laf-step-meta,
.leave-page .leave-history-card .laf-step-state {
    line-height: 1.35;
}

.leave-page .leave-history-card .laf-step-meta {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.leave-page .leave-history-card .laf-step-state {
    display: block;
}

.leave-page .leave-history-info-row,
.leave-page .leave-history-doc-row {
    align-items: stretch;
}

.leave-page .leave-actions-panel {
    align-self: start;
}

@media (max-width: 760px) {
    .leave-page .leave-history-head,
    .leave-page .leave-history-grid,
    .leave-page .leave-history-info-row,
    .leave-page .leave-history-doc-row,
    .leave-page .leave-history-card .laf-steps {
        grid-template-columns: 1fr;
    }

    .leave-page .leave-history-side,
    .leave-page .leave-action-right {
        justify-content: flex-start;
        width: 100%;
    }

    .leave-page .leave-action-cell,
    .leave-page .leave-action-main,
    .leave-page .leave-action-right {
        display: grid;
        grid-template-columns: 1fr;
    }

    .leave-page .leave-history-card {
        padding: var(--space-3);
    }

    .leave-page .leave-history-card::before {
        top: var(--space-3);
        bottom: var(--space-3);
    }

    .leave-page .leave-history-sub,
    .leave-page .leave-history-side {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .leave-page .leave-range-chip,
    .leave-page .leave-emergency-badge,
    .leave-page .leave-canceled-marker,
    .leave-page .leave-cancel-state,
    .leave-page .status-badge {
        width: fit-content;
        max-width: 100%;
    }

    .leave-page .leave-history-card .laf-summary {
        display: grid;
        grid-template-columns: 1fr;
    }

    .leave-page .leave-action-cell .btn,
    .leave-page .leave-action-cell a.btn,
    .leave-page .leave-action-cell form,
    .leave-page .leave-action-cell form .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .leave-page .leave-history-summary {
        grid-template-columns: 1fr;
    }

    .leave-page .leave-calendar-frame {
        overflow-x: auto;
    }

    .leave-page .leave-calendar-grid {
        min-width: 520px;
    }

    .leave-page .leave-history-card .laf-step {
        grid-template-columns: 1fr;
    }
}

/* Leave history single-column final layout */
.leave-page .leave-history-section .leave-history-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: start;
}

.leave-page .leave-history-section .leave-history-head,
.leave-page .leave-history-section .leave-history-grid,
.leave-page .leave-history-section .leave-history-group,
.leave-page .leave-history-section .leave-approval-flow,
.leave-page .leave-history-section .leave-canceled-notice {
    width: 100%;
    max-width: 100%;
}

.leave-page .leave-history-section .leave-history-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: var(--space-2);
    padding: 0 !important;
}

.leave-page .leave-history-section .leave-history-group {
    grid-column: 1 / -1 !important;
}

.leave-page .leave-history-section .leave-history-info-row,
.leave-page .leave-history-section .leave-history-doc-row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.leave-page .leave-history-section .leave-reason-card {
    width: 100%;
}

.leave-page .leave-history-section .leave-reason-text {
    display: block;
    max-height: none;
    overflow: visible;
    -webkit-line-clamp: unset;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: anywhere;
}

.leave-page .leave-history-section .leave-history-card .laf-steps {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.leave-page .leave-history-section .leave-history-head {
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

.leave-page .leave-history-section .leave-history-side {
    justify-content: flex-start;
}

.leave-page .leave-history-section .leave-history-sub,
.leave-page .leave-history-section .leave-history-side {
    max-width: 100%;
}

.leave-page .leave-history-section .leave-range-chip,
.leave-page .leave-history-section .leave-emergency-badge,
.leave-page .leave-history-section .leave-canceled-marker,
.leave-page .leave-history-section .status-badge,
.leave-page .leave-history-section .leave-cancel-state {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.leave-page .leave-history-section .leave-actions-panel {
    overflow: hidden;
}

.leave-page .leave-history-section .leave-action-cell {
    justify-content: space-between;
}

.leave-page .leave-history-section .leave-action-main,
.leave-page .leave-history-section .leave-action-right {
    min-width: 0;
}

.leave-page .leave-history-section .leave-action-cell .btn,
.leave-page .leave-history-section .leave-action-cell a.btn,
.leave-page .leave-history-section .leave-action-cell form .btn {
    white-space: normal;
}

@media (max-width: 640px) {
    .leave-page .leave-history-section .leave-history-info-row,
    .leave-page .leave-history-section .leave-history-doc-row,
    .leave-page .leave-history-section .leave-history-card .laf-steps {
        grid-template-columns: 1fr;
    }
}

.leave-page .staff-leave-entitlement-card.section-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.leave-page .staff-leave-entitlement-card .recent-card-head.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-4);
}

.leave-page .staff-leave-entitlement-card .recent-card-head .badge-soft {
    align-self: start;
    white-space: nowrap;
}

.leave-page .staff-leave-breakdown-head h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
}

.leave-page .staff-leave-type-grid.staff-mini-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.leave-page .staff-leave-type-grid .staff-mini-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-3);
    min-height: 220px;
    padding: var(--space-4);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: none;
}

.leave-page .staff-leave-type-grid .staff-mini-card::before {
    content: "";
    position: absolute;
    inset: var(--space-4) auto var(--space-4) 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
}

.leave-page .staff-leave-type-grid .staff-mini-card.leave-bucket-personal::before {
    background: var(--color-danger);
}

.leave-page .staff-leave-type-grid .staff-mini-card.leave-bucket-vacation::before {
    background: var(--color-warning);
}

.leave-page .staff-leave-type-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.leave-page .staff-leave-type-icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-size: 16px;
}

.leave-page .staff-leave-type-grid .staff-mini-label {
    margin: 0;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.leave-page .staff-leave-balance {
    display: grid;
    gap: var(--space-1);
}

.leave-page .staff-leave-balance span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
}

.leave-page .staff-leave-balance strong {
    color: var(--text-strong);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.leave-page .staff-leave-balance strong.is-danger {
    color: var(--color-danger-ink);
}

.leave-page .staff-leave-type-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.leave-page .staff-leave-type-detail span {
    min-width: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.leave-page .staff-leave-type-detail strong {
    color: var(--text-strong);
}

.leave-page .staff-leave-type-grid .staff-mini-progress {
    height: 8px;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
}

.leave-page .staff-leave-type-grid .staff-mini-progress-value {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.leave-page .staff-leave-type-grid .leave-bucket-personal .staff-mini-progress-value {
    background: var(--color-danger);
}

.leave-page .staff-leave-type-grid .leave-bucket-vacation .staff-mini-progress-value {
    background: var(--color-warning);
}

.leave-page .staff-leave-type-grid .staff-mini-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin: calc(var(--space-2) * -1) 0 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.leave-page .staff-leave-type-grid .staff-mini-progress-meta strong {
    color: var(--text-strong);
}

@media (max-width: 1040px) {
    .leave-page .staff-leave-type-grid.staff-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .leave-page .staff-leave-entitlement-card.section-card {
        padding: var(--space-4);
    }

    .leave-page .staff-leave-type-grid.staff-mini-grid,
    .leave-page .staff-leave-entitlement-card .recent-card-head.section-head {
        grid-template-columns: 1fr;
    }

    .leave-page .staff-leave-entitlement-card .recent-card-head .badge-soft {
        justify-self: start;
    }

    .leave-page .staff-leave-type-grid .staff-mini-card {
        min-height: 0;
    }
}

/* Shared calendar surface. Keeps all calendar pages visually aligned while preserving module-specific colors. */
:root {
    --app-calendar-gap: 8px;
    --app-calendar-day-radius: var(--radius-md);
    --app-calendar-border: var(--border-soft);
    --app-calendar-muted-border: var(--border-muted);
    --app-calendar-weekday-bg: var(--surface-muted);
    --app-calendar-day-bg: var(--surface);
    --app-calendar-empty-bg: var(--surface-muted);
    --app-calendar-text: var(--text-strong);
    --app-calendar-muted-text: var(--text-muted);
}

.meeting-calendar-weekdays,
.meeting-calendar-days,
.calendar-month-board .cal-grid,
.dept-cal-grid,
.workline-calendar-page .duty-calendar-grid,
.leave-page .leave-calendar-grid {
    gap: var(--app-calendar-gap);
}

.meeting-calendar-weekday,
.calendar-month-board .cal-dow,
.dept-cal-weekday,
.workline-calendar-page .cal-weekday,
.leave-page .leave-cal-weekday {
    min-width: 0;
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    background: var(--app-calendar-weekday-bg);
    color: var(--app-calendar-muted-text);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.meeting-calendar-day,
.calendar-month-board .cal-day,
.dept-cal-day,
.workline-calendar-page .cal-day,
.leave-page .leave-cal-day {
    border-radius: var(--app-calendar-day-radius);
    border-color: var(--app-calendar-border);
    background: var(--app-calendar-day-bg);
    color: var(--app-calendar-text);
}

.meeting-calendar-day.is-empty,
.calendar-month-board .cal-day--empty,
.calendar-month-board .cal-day.muted,
.dept-cal-day-empty,
.workline-calendar-page .cal-empty,
.leave-page .leave-cal-day.is-empty {
    border-color: var(--app-calendar-muted-border);
    background: var(--app-calendar-empty-bg);
}

.meeting-calendar-item,
.calendar-month-board .cal-item,
.dept-cal-event,
.workline-calendar-page .cal-event-line,
.leave-page .leave-cal-event {
    border-radius: var(--radius-sm);
}

/* Leave list final alignment: resolve mixed page-hero grid and keep summaries tidy. */
.leave-page .leave-hero.page-hero {
    grid-template-columns: 1fr !important;
    align-items: start;
}

.leave-page .leave-hero > .leave-hero-top,
.leave-page .leave-hero > .leave-hero-metrics,
.leave-page .leave-hero > .leave-flash {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.leave-page .leave-hero > .leave-hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.leave-page .leave-hero > .leave-hero-metrics > .leave-hero-metric {
    grid-column: auto !important;
    min-width: 0;
}

.leave-page .leave-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.leave-page .leave-stat-card {
    min-width: 0;
}

@media (max-width: 760px) {
    .leave-page .leave-hero > .leave-hero-metrics,
    .leave-page .leave-stat-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Shared calendar visual contract. */
:root {
    --app-calendar-gap: 8px;
    --app-calendar-weekday-height: 32px;
    --app-calendar-day-min-height: 138px;
    --app-calendar-day-padding: 9px;
    --app-calendar-day-radius: var(--radius-md);
    --app-calendar-border: var(--border-soft);
    --app-calendar-muted-border: var(--border-muted);
    --app-calendar-weekday-bg: var(--surface-muted);
    --app-calendar-day-bg: var(--surface);
    --app-calendar-empty-bg: var(--surface-muted);
    --app-calendar-today: var(--color-info);
    --app-calendar-today-bg: var(--color-info-soft);
    --app-calendar-weekend: var(--color-danger);
    --app-calendar-weekend-bg: var(--color-danger-soft);
    --app-calendar-holiday: var(--color-danger);
    --app-calendar-holiday-bg: var(--color-danger-soft);
    --app-calendar-text: var(--text-strong);
    --app-calendar-muted-text: var(--text-muted);
    --app-calendar-event-bg: var(--surface-muted);
}

.meeting-calendar-weekdays,
.app-calendar-weekdays,
.meeting-calendar-days,
.app-calendar-days,
.calendar-month-board .cal-grid,
#calendar-root > .cal-grid,
.dept-cal-grid,
.workline-calendar-page .duty-calendar-grid,
.leave-page .leave-calendar-grid {
    gap: var(--app-calendar-gap) !important;
}

.meeting-calendar-weekday,
.app-calendar-weekday,
.calendar-month-board .cal-dow,
#calendar-root > .cal-grid > .cal-dow,
.dept-cal-weekday,
.workline-calendar-page .cal-weekday,
.leave-page .leave-cal-weekday {
    min-width: 0 !important;
    min-height: var(--app-calendar-weekday-height) !important;
    padding: 8px 6px !important;
    border: 1px solid var(--app-calendar-border) !important;
    border-radius: 10px !important;
    background: var(--app-calendar-weekday-bg) !important;
    color: var(--app-calendar-muted-text) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    display: grid !important;
    place-items: center !important;
}

.meeting-calendar-day,
.app-calendar-day,
.calendar-month-board .cal-day,
#calendar-root > .cal-grid > .cal-day,
.dept-cal-day,
.workline-calendar-page .cal-day,
.leave-page .leave-cal-day {
    min-height: var(--app-calendar-day-min-height) !important;
    padding: var(--app-calendar-day-padding) !important;
    border: 1px solid var(--app-calendar-border) !important;
    border-radius: var(--app-calendar-day-radius) !important;
    background: var(--app-calendar-day-bg) !important;
    color: var(--app-calendar-text) !important;
    box-shadow: none !important;
    align-content: start !important;
    overflow: hidden !important;
}

.meeting-calendar-day.is-empty,
.app-calendar-day.is-empty,
.calendar-month-board .cal-day--empty,
.calendar-month-board .cal-day.muted,
#calendar-root > .cal-grid > .cal-day.muted,
.dept-cal-day-empty,
.workline-calendar-page .cal-empty,
.leave-page .leave-cal-day.is-empty {
    border-color: var(--app-calendar-muted-border) !important;
    border-style: dashed !important;
    background: var(--app-calendar-empty-bg) !important;
}

.meeting-calendar-day:hover,
.meeting-calendar-day.is-selected,
.app-calendar-day:hover,
.app-calendar-day.is-selected,
.calendar-month-board .cal-day.is-selected,
#calendar-root > .cal-grid > .cal-day:hover,
#calendar-root > .cal-grid > .cal-day.is-selected {
    border-color: var(--app-calendar-today) !important;
    box-shadow: inset 0 0 0 1px var(--app-calendar-today) !important;
    transform: none !important;
}

.meeting-calendar-day.is-today,
.app-calendar-day.is-today,
.calendar-month-board .cal-day.is-today,
#calendar-root > .cal-grid > .cal-day.is-today,
.dept-cal-day-today,
.leave-page .leave-cal-day.is-today {
    border-color: var(--app-calendar-today) !important;
    box-shadow: inset 0 0 0 1px var(--app-calendar-today) !important;
}

.meeting-calendar-date,
.app-calendar-day-header,
.calendar-month-board .cal-day__header,
#calendar-root > .cal-grid > .cal-day .cal-day__header,
.dept-cal-day-top,
.leave-page .leave-cal-day-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 0 6px !important;
}

.meeting-calendar-date-number,
.app-calendar-day-number,
.calendar-month-board .cal-date,
#calendar-root > .cal-grid > .cal-day .cal-date,
.dept-cal-dayno,
.workline-calendar-page .cal-day-no,
.leave-page .leave-cal-date {
    width: 24px !important;
    height: 24px !important;
    border-radius: 999px !important;
    color: var(--app-calendar-text) !important;
    background: transparent !important;
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.meeting-calendar-day.is-today .meeting-calendar-date-number,
.app-calendar-day.is-today .app-calendar-day-number,
.calendar-month-board .cal-day.is-today .cal-date,
#calendar-root > .cal-grid > .cal-day.is-today .cal-date,
.dept-cal-day-today .dept-cal-dayno,
.leave-page .leave-cal-day.is-today .leave-cal-date {
    background: var(--app-calendar-today-bg) !important;
    color: var(--app-calendar-today) !important;
}

.meeting-calendar-badge,
.app-calendar-badge,
.calendar-month-board .cal-badge,
#calendar-root > .cal-grid > .cal-day .cal-badge,
.dept-cal-holiday-badge,
.leave-page .leave-today-badge {
    min-height: 20px !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.meeting-calendar-badge.is-holiday,
.app-calendar-badge.is-danger,
.calendar-month-board .cal-badge--holiday,
#calendar-root > .cal-grid > .cal-day .cal-badge--holiday {
    background: var(--app-calendar-holiday-bg) !important;
    color: var(--app-calendar-holiday) !important;
}

.meeting-calendar-item,
.app-calendar-item,
.calendar-month-board .cal-item,
#calendar-root > .cal-grid > .cal-day .cal-item,
.dept-cal-event,
.workline-calendar-page .cal-event-line,
.leave-page .leave-cal-event {
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 7px !important;
    border-radius: 8px !important;
    background: var(--app-calendar-event-bg) !important;
    box-shadow: var(--shadow-sm) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
}

.leave-page .leave-cal-event {
    border-left: 3px solid currentColor !important;
}

.leave-page .leave-cal-event::before {
    display: none !important;
}

.leave-page .leave-calendar-frame {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.app-calendar-day-badges {
    min-width: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1);
}

.app-calendar-holiday {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    color: var(--color-danger-ink);
    font-size: var(--font-size-xs);
    font-weight: 800;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-calendar-items {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: var(--space-1);
    overflow: hidden;
}

.app-calendar-empty {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.app-calendar-more {
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 800;
}

.meeting-calendar-weekday:first-child,
.meeting-calendar-weekday:last-child,
.app-calendar-weekday:first-child,
.app-calendar-weekday:last-child,
.calendar-month-board .cal-dow:first-child,
.calendar-month-board .cal-dow:last-child,
#calendar-root > .cal-grid > .cal-dow:first-child,
#calendar-root > .cal-grid > .cal-dow:last-child,
.dept-cal-weekday:first-child,
.dept-cal-weekday:nth-child(7),
.workline-calendar-page .cal-weekday:first-child,
.workline-calendar-page .cal-weekday:last-child,
.leave-page .leave-cal-weekday:first-child,
.leave-page .leave-cal-weekday:nth-child(7) {
    border-color: var(--app-calendar-weekend) !important;
    color: var(--app-calendar-weekend) !important;
}

.meeting-calendar-days > .meeting-calendar-day:nth-child(7n+1):not(.is-empty),
.meeting-calendar-days > .meeting-calendar-day:nth-child(7n):not(.is-empty),
.app-calendar-days > .app-calendar-day:nth-child(7n+1):not(.is-empty),
.app-calendar-days > .app-calendar-day:nth-child(7n):not(.is-empty),
.calendar-month-board .cal-grid--days > .cal-day:nth-child(7n+1):not(.cal-day--empty):not(.muted),
.calendar-month-board .cal-grid--days > .cal-day:nth-child(7n):not(.cal-day--empty):not(.muted),
#calendar-root > .cal-grid-spaced > .cal-day:nth-child(7n+1):not(.muted),
#calendar-root > .cal-grid-spaced > .cal-day:nth-child(7n):not(.muted),
.dept-cal-grid > .dept-cal-day:nth-child(7n+1):not(.dept-cal-day-empty),
.dept-cal-grid > .dept-cal-day:nth-child(7n):not(.dept-cal-day-empty),
.workline-calendar-page .duty-calendar-grid > .cal-day:nth-child(7n+1):not(.cal-empty),
.workline-calendar-page .duty-calendar-grid > .cal-day:nth-child(7n):not(.cal-empty),
.leave-page .leave-calendar-grid > .leave-cal-day:nth-child(7n+1):not(.is-empty),
.leave-page .leave-calendar-grid > .leave-cal-day:nth-child(7n):not(.is-empty) {
    border-color: var(--app-calendar-weekend) !important;
    background: var(--app-calendar-weekend-bg) !important;
}

@media (max-width: 760px) {
    :root {
        --app-calendar-gap: 6px;
        --app-calendar-day-min-height: 122px;
        --app-calendar-day-padding: 7px;
    }
}



/* Meeting book shared component alignment. */
.meeting-page-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--space-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.meeting-page-hero .page-hero-main {
  max-width: 760px;
}

.meeting-page-hero .page-title,
.meeting-page-hero .page-subtitle {
  margin: 0;
}

.meeting-page-hero .meeting-page-hero__meta.page-hero-aside {
  display: flex;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.meeting-page-hero .meeting-page-chip.badge-soft,
.meeting-page-hero .meeting-page-chip.pill-soft {
  min-height: 34px;
  box-shadow: none;
  text-decoration: none;
}

@media (max-width: 760px) {
  .meeting-page-hero.page-hero {
    grid-template-columns: 1fr;
    padding: var(--space-4);
  }

  .meeting-page-hero .meeting-page-hero__meta.page-hero-aside,
  .meeting-page-hero .meeting-page-chip.badge-soft,
  .meeting-page-hero .meeting-page-chip.pill-soft {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .dept-cal-controlbar.section-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .dept-cal-viewtabs.action-row,
  .dept-cal-control-nav.action-row {
    width: 100%;
    justify-content: space-between;
  }

  .dept-cal-viewtabs .btn,
  .dept-cal-control-nav .btn {
    flex: 1 1 0;
  }

  .dept-cal-control-title {
    flex: 0 0 auto;
  }
}

@media (max-width: 560px) {
  .dept-cal-viewtabs.action-row,
  .dept-cal-control-nav.action-row {
    flex-wrap: wrap;
  }

  .dept-cal-control-title {
    order: -1;
    flex-basis: 100%;
    width: 100%;
    padding: 0;
    text-align: left;
  }
}
/* Meeting calendar shared component alignment. */
.meeting-calendar-page.page-stack {
  gap: var(--space-4);
}

.meeting-calendar-hero.page-hero,
.meeting-calendar-controlbar.section-card,
.meeting-calendar-board.section-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.meeting-calendar-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--space-6);
}

.meeting-calendar-hero .page-hero-main {
  max-width: 760px;
}

.meeting-calendar-hero .page-title,
.meeting-calendar-hero .page-subtitle {
  margin: 0;
}

.meeting-calendar-hero .meeting-calendar-actions.page-hero-aside {
  display: flex;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.meeting-calendar-btn.btn,
.meeting-calendar-controlbar .btn {
  min-height: var(--btn-height);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
}

.meeting-calendar-controlbar.section-card {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: end;
  gap: var(--space-4);
  padding: var(--space-4);
}

.meeting-calendar-controlbar .form-field {
  margin: 0;
}

.meeting-calendar-controlbar select {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
}

.meeting-calendar-controlbar button.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.dept-cal-controlbar.section-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(280px, auto);
  align-items: end;
  gap: var(--space-4);
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.dept-cal-control-form,
.dept-cal-controlbar .form-field {
  margin: 0;
  min-width: 0;
}

.dept-cal-control-scope select {
  min-height: var(--control-height);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
}

.dept-cal-viewtabs.action-row,
.dept-cal-control-nav.action-row {
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-2);
}

.dept-cal-viewtabs .btn,
.dept-cal-control-nav .btn {
  min-height: var(--btn-height);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  white-space: nowrap;
}

.dept-cal-viewtabs .btn[disabled] {
  opacity: 1;
  cursor: not-allowed;
}

.dept-cal-control-title {
  min-width: 112px;
  padding: 0 var(--space-3);
  color: var(--text-strong);
  font-size: var(--font-size-lg);
  font-weight: 900;
  line-height: var(--btn-height);
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .dept-cal-controlbar.section-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .dept-cal-viewtabs.action-row,
  .dept-cal-control-nav.action-row {
    width: 100%;
    justify-content: space-between;
  }

  .dept-cal-viewtabs .btn,
  .dept-cal-control-nav .btn {
    flex: 1 1 0;
  }

  .dept-cal-control-title {
    flex: 0 0 auto;
  }
}

@media (max-width: 560px) {
  .dept-cal-viewtabs.action-row,
  .dept-cal-control-nav.action-row {
    flex-wrap: wrap;
  }

  .dept-cal-control-title {
    order: -1;
    flex-basis: 100%;
    width: 100%;
    padding: 0;
    text-align: left;
  }
}

.meeting-calendar-board.is-hidden,
.meeting-day-modal[hidden] {
  display: none;
}

.meeting-room-tone-0 { --meeting-room-color: var(--color-primary); }
.meeting-room-tone-1 { --meeting-room-color: var(--color-info); }
.meeting-room-tone-2 { --meeting-room-color: var(--color-purple); }
.meeting-room-tone-3 { --meeting-room-color: var(--color-warning); }
.meeting-room-tone-4 { --meeting-room-color: var(--color-danger); }
.meeting-room-tone-5 { --meeting-room-color: var(--color-success); }
.meeting-room-tone-6 { --meeting-room-color: var(--color-teal); }
.meeting-room-tone-7 { --meeting-room-color: var(--color-warning-ink); }
.meeting-room-tone-8 { --meeting-room-color: var(--color-primary-ink); }

.meeting-calendar-summary.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.meeting-calendar-stat.metric-card {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.meeting-calendar-stat span,
.meeting-calendar-stat small,
.meeting-calendar-detail-sub,
.meeting-calendar-empty,
.meeting-calendar-more,
.meeting-day-booking-time,
.meeting-day-booking-meta strong,
.meeting-day-room-head > span {
  color: var(--text-muted);
}

.meeting-calendar-stat strong {
  color: var(--text-strong);
  font-size: var(--font-size-xl);
  line-height: 1.1;
}

.meeting-calendar-workspace {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.meeting-calendar-board.section-card {
  padding: var(--space-4);
  min-width: 0;
}

.meeting-calendar-weekdays,
.meeting-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
}

.meeting-calendar-weekdays {
  margin-bottom: var(--space-3);
}

.meeting-calendar-weekday {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-align: center;
}

.meeting-calendar-day {
  min-width: 0;
  min-height: var(--app-calendar-day-min-height, 138px);
  height: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--space-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.meeting-calendar-day:hover,
.meeting-calendar-day.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.meeting-calendar-day.is-today {
  border-color: var(--color-info);
}

.meeting-calendar-day.is-empty {
  background: var(--surface-muted);
  border-style: dashed;
  cursor: default;
}

.meeting-calendar-date {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
  font-weight: 800;
}

.meeting-calendar-date-number {
  color: var(--text-strong);
  font-weight: 800;
  line-height: 1;
}

.meeting-calendar-badges {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.meeting-calendar-badge.badge-soft {
  min-height: 20px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  white-space: nowrap;
}

.meeting-calendar-holiday {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  color: var(--color-danger-ink);
  font-size: var(--font-size-xs);
  font-weight: 800;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meeting-calendar-items {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-1);
  overflow: hidden;
}

.meeting-calendar-item {
  min-width: 0;
  min-height: 38px;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border-left: 3px solid var(--meeting-room-color, var(--color-primary));
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-strong);
  font-size: var(--font-size-xs);
  line-height: 1.25;
  overflow: hidden;
}

.meeting-calendar-item.is-pending {
  border-left-color: var(--color-warning);
}

.meeting-calendar-item__top {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.meeting-calendar-item__time {
  color: var(--meeting-room-color, var(--color-primary));
  font-weight: 800;
  white-space: nowrap;
}

.meeting-calendar-item__title,
.meeting-calendar-item__room {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meeting-calendar-item__room {
  color: var(--text-muted);
  font-weight: 800;
}

.meeting-calendar-year-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.meeting-calendar-month-card.action-card {
  align-items: start;
  text-align: left;
}

.meeting-calendar-month-card h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--font-size-md);
}

.meeting-calendar-month-card strong {
  color: var(--color-primary);
  font-size: var(--font-size-xl);
  line-height: 1.1;
}

.meeting-calendar-dot {
  width: var(--space-3);
  height: var(--space-3);
  display: inline-block;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--meeting-room-color, var(--color-primary));
}

.meeting-day-modal.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.meeting-day-modal.modal-shell.is-open {
  display: flex;
}

.meeting-day-modal .meeting-day-modal-backdrop.modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0;
}

.meeting-day-modal-card.modal-card {
  position: relative;
  z-index: 1;
  width: min(780px, 100%);
  max-height: min(760px, 92vh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.meeting-day-modal-head.modal-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.meeting-day-modal-head span {
  display: block;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.meeting-day-modal-head h2 {
  margin: var(--space-1) 0 0;
  color: var(--text-strong);
  font-size: var(--font-size-xl);
  line-height: 1.25;
}

.meeting-day-modal-body {
  min-height: 0;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  overflow: auto;
}

.meeting-day-holiday.content-box,
.meeting-day-empty.empty-state {
  margin: 0;
}

.meeting-day-room-group,
.meeting-day-booking-list.record-list {
  display: grid;
  gap: var(--space-3);
}

.meeting-day-room-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}

.meeting-day-room-head div {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-strong);
  font-weight: 800;
}

.meeting-day-booking.record-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  border-left: 4px solid var(--color-primary);
  box-shadow: none;
}

.meeting-day-booking.record-card.is-pending {
  border-left-color: var(--color-warning);
}

.meeting-day-booking-time {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.meeting-day-booking-time strong {
  color: var(--text-strong);
  font-size: var(--font-size-md);
  line-height: 1;
}

.meeting-day-booking-info {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.meeting-day-booking-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.meeting-day-booking-top h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: var(--font-size-md);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.meeting-day-booking-title {
  color: var(--text-strong);
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.meeting-day-booking-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.meeting-day-booking-meta span {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-strong);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .meeting-calendar-hero.page-hero,
  .meeting-calendar-controlbar.section-card {
    grid-template-columns: 1fr;
  }

  .meeting-calendar-hero .meeting-calendar-actions.page-hero-aside,
  .meeting-calendar-actions .meeting-calendar-btn,
  .meeting-calendar-viewtabs,
  .meeting-calendar-viewtabs .btn,
  .meeting-calendar-nav,
  .meeting-calendar-nav .btn {
    width: 100%;
    justify-content: flex-start;
  }

  .meeting-calendar-summary.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .meeting-day-booking-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .meeting-calendar-hero.page-hero {
    padding: var(--space-4);
  }

  .meeting-calendar-weekdays {
    display: none;
  }

  .meeting-calendar-days,
  .meeting-calendar-year-grid {
    grid-template-columns: 1fr;
  }

  .meeting-calendar-day {
    min-height: 92px;
  }

  .meeting-calendar-day.is-empty {
    display: none;
  }

  .meeting-calendar-viewtabs,
  .meeting-calendar-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .meeting-calendar-title {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
  }

  .meeting-day-modal.modal-shell {
    align-items: stretch;
    padding: var(--space-2);
  }

  .meeting-day-modal-head.modal-head,
  .meeting-day-booking-top {
    display: grid;
  }

  .meeting-day-modal-close.btn,
  .meeting-calendar-actions .meeting-calendar-btn,
  .meeting-calendar-viewtabs .btn,
  .meeting-calendar-nav .btn {
    width: 100%;
  }

  .meeting-day-booking.record-card,
  .meeting-day-booking-meta {
    grid-template-columns: 1fr;
  }
}
/* Meeting report shared component alignment. */
.meeting-report-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.meeting-report-hero.page-hero,
.meeting-report-filter.section-card,
.meeting-report-status-card.section-card,
.meeting-report-export-card.section-card,
.meeting-report-results.section-card,
.meeting-report-insight.section-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.meeting-report-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--space-6);
}

.meeting-report-hero .page-hero-main {
  max-width: 780px;
}

.meeting-report-hero .page-title,
.meeting-report-hero .page-subtitle {
  margin: 0;
}

.meeting-report-kicker.page-kicker {
  width: fit-content;
  margin-bottom: var(--space-2);
}

.meeting-report-actions.page-hero-aside,
.meeting-report-filter-actions.action-row,
.meeting-report-export-actions.action-row {
  display: flex;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.meeting-report-button.btn {
  min-height: var(--btn-height);
  padding-inline: var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  box-shadow: none;
}

.meeting-report-button.btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.meeting-report-button.btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.meeting-report-button.danger.btn {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.meeting-report-filter-grid.filter-grid {
  gap: var(--space-3);
}

.meeting-report-field.form-field {
  gap: var(--space-2);
  margin: 0;
}

.meeting-report-field.form-field input,
.meeting-report-field.form-field select {
  border-color: var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.meeting-report-field.form-field input:focus,
.meeting-report-field.form-field select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.meeting-report-summary-grid.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.meeting-report-summary-card.metric-card {
  min-height: 122px;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.meeting-report-status.badge-soft {
  min-width: 104px;
  justify-content: center;
  text-align: center;
}

.meeting-report-status.badge-soft.is-approved {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.meeting-report-status.badge-soft.is-pending {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.meeting-report-status.badge-soft.is-rejected,
.meeting-report-status.badge-soft.is-canceled {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.meeting-report-empty.empty-state {
  border-color: var(--border-muted);
  background: var(--surface-subtle);
  color: var(--text-muted);
}

.meeting-admin-modal-card {
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.meeting-admin-modal-head,
.meeting-report-section-head,
.meeting-report-booking-foot-actions,
.meeting-report-detail-grid {
  border-color: var(--border-soft);
}

@media (max-width: 900px) {
  .meeting-report-hero.page-hero,
  .meeting-report-export-card.section-card,
  .meeting-report-insight.section-card {
    grid-template-columns: 1fr;
  }

  .meeting-report-actions.page-hero-aside,
  .meeting-report-actions .meeting-report-button,
  .meeting-report-filter-actions.action-row,
  .meeting-report-filter-actions .meeting-report-button,
  .meeting-report-export-actions.action-row,
  .meeting-report-export-actions .meeting-report-button {
    width: 100%;
    justify-content: flex-start;
  }

  .meeting-report-summary-grid.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .meeting-report-summary-grid.metric-grid {
    grid-template-columns: 1fr;
  }
}
/* Attendance staff dashboard shared component alignment. */
.attendance-staff-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.attendance-staff-hero.page-hero,
.attendance-staff-page .attendance-card.section-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.attendance-staff-page .attendance-head-card,
.attendance-staff-page .attendance-form-normal,
.attendance-staff-page .attendance-flow-shell,
.attendance-staff-page .attendance-flow-mode,
.attendance-staff-page .attendance-flow-camera,
.attendance-staff-page .attendance-late-box,
.attendance-staff-page .attendance-summary-metric,
.attendance-staff-page .attendance-summary-note-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: none;
}

.attendance-staff-page .attendance-head-card::before {
  background: var(--color-primary);
}

.attendance-staff-page .attendance-head-title,
.attendance-staff-page .attendance-form-title,
.attendance-staff-page .attendance-flow-title,
.attendance-staff-page .attendance-table-title,
.attendance-staff-page .attendance-flow-label {
  color: var(--text-strong);
  letter-spacing: 0;
}

.attendance-staff-page .attendance-head-subtitle,
.attendance-staff-page .attendance-form-help,
.attendance-staff-page .attendance-flow-subtitle,
.attendance-staff-page .attendance-flow-mode-help,
.attendance-staff-page .attendance-flow-hint,
.attendance-staff-page .attendance-face-empty {
  color: var(--text-muted);
}

.attendance-staff-page .attendance-head-chip {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  box-shadow: none;
}

.attendance-staff-page .attendance-head-chip-label {
  color: var(--text-muted);
}

.attendance-staff-page .attendance-head-chip strong {
  color: var(--text-strong);
}

.attendance-staff-page .attendance-flow-head,
.attendance-staff-page .attendance-table-head {
  border-bottom-color: var(--border-soft);
}

.attendance-staff-page .attendance-workmode-option {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: none;
}

.attendance-staff-page .attendance-workmode-option:has(input:checked) {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  box-shadow: none;
}

.attendance-staff-page .attendance-workmode-code {
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-muted);
}

.attendance-staff-page .attendance-absent-cutoff-notice,
.attendance-staff-page .attendance-remote-note {
  border-color: var(--color-info-border);
  border-radius: var(--radius-md);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.attendance-staff-page .attendance-leave-lock-notice,
.attendance-staff-page .attendance-holiday-notice,
.attendance-staff-page .attendance-face-warning {
  border-color: var(--color-danger-border);
  border-radius: var(--radius-md);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.attendance-staff-page .attendance-flow-status.is-ready {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.attendance-staff-page .attendance-flow-status.is-waiting {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.attendance-staff-page .attendance-flow-status.is-error {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.attendance-staff-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding: var(--space-6);
}

.attendance-staff-hero .page-hero-main {
  max-width: 760px;
}

.attendance-staff-hero .page-title,
.attendance-staff-hero .page-subtitle {
  margin: 0;
}

.attendance-staff-hero-stats.page-hero-aside {
  display: flex;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.attendance-staff-hero-stats .badge-soft {
  min-height: 34px;
  box-shadow: none;
}

.attendance-staff-hero-stats .badge-soft.is-status-green {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.attendance-staff-hero-stats .badge-soft.is-status-yellow {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.attendance-staff-hero-stats .badge-soft.is-status-red {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.attendance-staff-hero-stats .badge-soft.is-status-neutral {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.attendance-staff-page .attendance-flash.alert-box {
  margin: 0;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.attendance-staff-page #attendance-daily-summary .attendance-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 680px);
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.attendance-staff-page #attendance-daily-summary .attendance-table-copy {
  min-width: 0;
}

.attendance-staff-page #attendance-daily-summary .attendance-table-title {
  font-size: var(--font-size-xl);
  line-height: 1.25;
}

.attendance-staff-page .attendance-month-form.filter-panel {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.attendance-staff-page .attendance-month-grid.filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: var(--space-3);
}

.attendance-staff-page .attendance-month-form .form-field {
  margin: 0;
}

.attendance-staff-page .attendance-month-actions.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin: 0;
}

.attendance-staff-page .attendance-month-actions .btn {
  min-height: var(--btn-height);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  white-space: nowrap;
}

.attendance-staff-page .attendance-month-actions .btn-primary {
  min-width: calc(var(--btn-height) * 4);
}

.attendance-staff-page .attendance-monthly-summary {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.attendance-staff-page .attendance-monthly-summary-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.attendance-staff-page .attendance-monthly-summary-head > div {
  min-width: 0;
}

.attendance-staff-page .attendance-monthly-summary-head .pill-soft {
  flex: 0 0 auto;
  white-space: nowrap;
}

.attendance-staff-page .attendance-monthly-metrics.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.attendance-staff-page .attendance-monthly-metric.metric-card {
  min-height: 128px;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-4);
  box-shadow: none;
}

.attendance-staff-page .attendance-monthly-metric .metric-head {
  min-height: 24px;
  align-items: flex-start;
  line-height: 1.45;
}

.attendance-staff-page .attendance-monthly-metric .metric-icon {
  flex: 0 0 auto;
}

.attendance-staff-page .attendance-monthly-metric .metric-value {
  font-size: 28px;
}

.attendance-staff-page .attendance-monthly-metric .metric-sub {
  overflow-wrap: anywhere;
}

.attendance-staff-page .attendance-primary-actions .btn,
.attendance-staff-page .attendance-duty-link-btn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: calc(var(--btn-height) + var(--space-2));
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  box-shadow: none;
}

.attendance-staff-page .attendance-btn-checkin.btn-primary {
  border-color: var(--color-success-border);
  background: var(--color-success);
  color: var(--surface);
}

.attendance-staff-page .attendance-btn-checkout.btn-secondary {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.attendance-staff-page .attendance-duty-link-btn.btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.attendance-staff-page .attendance-summary-label .attendance-summary-icon {
  flex: 0 0 auto;
  color: var(--theme-icon-ink);
}

.attendance-staff-page .attendance-summary-card.record-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.attendance-staff-page .attendance-summary-badges .badge-soft {
  min-height: 28px;
  box-shadow: none;
}

.attendance-staff-page .attendance-empty-row.empty-state {
  border-color: var(--border-muted);
  background: var(--surface-subtle);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .attendance-staff-hero.page-hero,
  .attendance-staff-page #attendance-daily-summary .attendance-table-head,
  .attendance-staff-page .attendance-month-grid.filter-grid {
    grid-template-columns: 1fr;
  }

  .attendance-staff-hero-stats.page-hero-aside,
  .attendance-staff-hero-stats .badge-soft,
  .attendance-staff-page .attendance-month-actions.form-actions,
  .attendance-staff-page .attendance-month-actions .btn {
    width: 100%;
    justify-content: flex-start;
  }

  .attendance-staff-page .attendance-monthly-metrics.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .attendance-staff-page .attendance-monthly-summary-head {
    align-items: stretch;
    flex-direction: column;
  }

  .attendance-staff-page .attendance-monthly-summary-head .pill-soft {
    width: fit-content;
    white-space: normal;
  }

  .attendance-staff-page .attendance-monthly-metrics.metric-grid {
    grid-template-columns: 1fr;
  }

  .attendance-staff-page .attendance-monthly-metric.metric-card {
    min-height: 0;
  }
}
/* Attendance admin dashboard shared component alignment. */
.att-admin-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.att-admin-page .att-card.section-card,
.att-admin-page .att-hero.page-hero,
.att-admin-page .att-day-card.section-card,
.att-admin-page .att-entry-card.record-card,
.att-admin-page .att-log-card.record-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.att-admin-page .att-hero.page-hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--space-4);
  padding: var(--space-6);
}

.att-admin-page .att-hero-head.page-hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 250px);
  align-items: start;
  gap: var(--space-4);
  max-width: none;
}

.att-admin-page .att-title.page-title,
.att-admin-page .att-sub.page-subtitle {
  margin: 0;
}

.att-admin-page .att-sub.page-subtitle {
  margin-top: var(--space-2);
}

.att-admin-page .att-range-card.page-hero-aside {
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  box-shadow: none;
}

.att-admin-page .att-stat-grid.metric-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.att-admin-page .att-stat-card.metric-card {
  min-height: 148px;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.att-admin-page .att-flash.alert-box {
  margin: 0;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.att-admin-page .att-filter-toolbar.filter-panel {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.att-admin-page .att-filter-head.section-head {
  align-items: flex-start;
  gap: var(--space-3);
}

.att-admin-page .att-filter-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: max-content;
}

.att-admin-page .att-filter-grid.filter-grid,
.att-admin-page .att-filter-row-secondary {
  gap: var(--space-3);
}

.att-admin-page .att-filter-field.form-field,
.att-admin-page .att-filter-row-secondary .form-field {
  margin: 0;
  gap: var(--space-2);
}

.att-admin-page .att-filter-field.form-field input,
.att-admin-page .att-filter-field.form-field select,
.att-admin-page .att-filter-row-secondary .form-field input,
.att-admin-page .att-filter-row-secondary .form-field select {
  border-color: var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.att-admin-page .att-filter-actions-left.action-row,
.att-admin-page .att-export-actions.action-row,
.att-admin-page .att-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.att-admin-page .att-btn.btn {
  min-height: var(--btn-height);
  padding-inline: var(--btn-padding-x);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  box-shadow: none;
}

.att-admin-page .att-btn.btn-primary,
.att-admin-page .att-btn.report.btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.att-admin-page .att-btn.btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.att-admin-page .att-btn.danger.btn {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.att-admin-page .att-simple-table.table-wrap {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.att-admin-page .att-simple-table .nice-table thead th {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.att-admin-page .att-chip.badge-soft,
.att-admin-page .att-day-count.badge-soft,
.att-admin-page .att-badge.badge-soft,
.att-admin-page .att-status-pill.badge-soft {
  box-shadow: none;
}

.att-admin-page .att-status-pill.status-active,
.att-admin-page .att-badge.mode-office {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.att-admin-page .att-status-pill.status-done,
.att-admin-page .att-badge.mode-wfh,
.att-admin-page .att-badge.tone-success {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.att-admin-page .att-status-pill.status-warn,
.att-admin-page .att-badge.mode-wfa,
.att-admin-page .att-badge.holiday-work,
.att-admin-page .att-badge.auto,
.att-admin-page .att-badge.source-auto {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.att-admin-page .att-badge.holiday,
.att-admin-page .att-badge.tone-danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.att-admin-page .att-badge.tone-neutral {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.att-admin-page .att-badge.source-self {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.att-admin-page .att-badge.source-import {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

.att-admin-page .att-badge.source-manual {
  border-color: var(--color-purple-border);
  background: var(--color-purple-soft);
  color: var(--color-purple-ink);
}

.att-admin-page .att-badge.source-legacy {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.att-admin-page .att-inline-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.att-admin-page .att-entry-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.att-admin-page .att-entry-select-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.att-admin-page .att-entry-select-row .selection-chip {
  width: max-content;
  max-width: 100%;
}

.att-admin-page .att-entry-badges {
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.att-admin-page .att-entry-person {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.att-admin-page .att-empty.empty-state,
.att-admin-page .att-proof-empty.empty-state {
  border-color: var(--border-muted);
  background: var(--surface-subtle);
  color: var(--text-muted);
}

.att-admin-page .att-log-card.record-card {
  padding: var(--space-4);
}

@media (max-width: 1180px) {
  .att-admin-page .att-stat-grid.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .att-admin-page .att-hero-head.page-hero-main,
  .att-admin-page .att-filter-grid.filter-grid,
  .att-admin-page .att-filter-row-secondary,
  .att-admin-page .att-export-card.section-card {
    grid-template-columns: 1fr;
  }

  .att-admin-page .att-range-card.page-hero-aside,
  .att-admin-page .att-filter-actions-left.action-row,
  .att-admin-page .att-filter-actions-left .att-btn,
  .att-admin-page .att-export-actions.action-row,
  .att-admin-page .att-export-actions .att-btn {
    width: 100%;
    justify-content: flex-start;
  }

  .att-admin-page .att-filter-head.section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .att-admin-page .att-filter-head-actions,
  .att-admin-page .att-filter-head-actions .att-btn {
    width: 100%;
    justify-content: flex-start;
  }

  .att-admin-page .att-entry-select-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .att-admin-page .att-entry-badges {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .att-admin-page .att-stat-grid.metric-grid {
    grid-template-columns: 1fr;
  }
}

.att-admin-page .att-section-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-strong);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
}

.att-admin-page .att-section-sub,
.att-admin-page .att-results-head p,
.att-admin-page .att-block-sub,
.att-admin-page .att-evidence-sub,
.att-admin-page .att-entry-dept,
.att-admin-page .att-log-meta,
.att-admin-page .att-log-footer,
.att-admin-page .att-muted-cell {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.att-admin-page .att-icon-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.att-admin-page .att-icon-title {
  width: 42px;
  height: 42px;
  margin-right: var(--space-2);
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--color-primary);
}

.att-admin-page .att-icon-metric,
.att-admin-page .att-icon-inline {
  width: 28px;
  height: 28px;
  margin-right: var(--space-2);
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.att-admin-page .att-stat-card.metric-card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-4);
}

.att-admin-page .att-stat-card.metric-card small {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

.att-admin-page .att-stat-card.metric-card strong {
  color: var(--text-strong);
  font-size: 30px;
  line-height: 1;
}

.att-admin-page .att-stat-card.metric-card span,
.att-admin-page .att-range-card span {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.att-admin-page .att-range-card small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
}

.att-admin-page .att-range-card strong {
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1.2;
}

.att-admin-page .att-overview-card.section-card,
.att-admin-page .att-filter-card.section-card,
.att-admin-page .att-results-card.section-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.att-admin-page .att-export-card.section-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
}

.att-admin-page .att-export-actions.export-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.att-admin-page .att-simple-table.table-wrap {
  overflow: auto;
}

.att-admin-page .att-filter-grid.filter-grid {
  grid-template-columns: minmax(150px, 0.75fr) minmax(150px, 0.75fr) minmax(220px, 1.15fr) minmax(220px, 1.15fr);
}

.att-admin-page .att-filter-row-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
}

.att-admin-page .att-filter-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.att-admin-page .att-results-head,
.att-admin-page .att-day-head,
.att-admin-page .att-log-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.att-admin-page .att-report-groups,
.att-admin-page .att-log-list {
  display: grid;
  gap: var(--space-4);
}

.att-admin-page .att-day-card.section-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.att-admin-page .att-day-head {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.att-admin-page .att-day-title,
.att-admin-page .att-entry-name,
.att-admin-page .att-log-name {
  margin: 0;
  color: var(--text-strong);
  font-weight: 900;
  line-height: 1.25;
}

.att-admin-page .att-day-title {
  font-size: 20px;
}

.att-admin-page .att-entry-name {
  font-size: 20px;
  overflow-wrap: anywhere;
}

.att-admin-page .att-entry-card.record-card {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.att-admin-page .att-entry-card.record-card + .att-entry-card.record-card {
  margin-top: var(--space-3);
}

.att-admin-page .att-entry-head {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.att-admin-page .att-entry-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
  gap: var(--space-4);
  padding: var(--space-4);
}

.att-admin-page .att-time-panel,
.att-admin-page .att-detail-stack,
.att-admin-page .att-evidence-panel,
.att-admin-page .att-evidence-section {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.att-admin-page .att-block-head,
.att-admin-page .att-evidence-head {
  display: grid;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}

.att-admin-page .att-panel-title {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--text-strong);
  font-size: 14px;
  font-weight: 900;
}

.att-admin-page .att-metric-grid,
.att-admin-page .att-verify-grid,
.att-admin-page .att-log-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.att-admin-page .att-log-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.att-admin-page .att-metric-card,
.att-admin-page .att-verify-card,
.att-admin-page .att-log-item {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.att-admin-page .att-metric-card small,
.att-admin-page .att-verify-title,
.att-admin-page .att-subgroup-title,
.att-admin-page .att-log-item label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
}

.att-admin-page .att-metric-card strong,
.att-admin-page .att-verify-score,
.att-admin-page .att-log-item div {
  color: var(--text-strong);
  font-weight: 900;
  line-height: 1.35;
}

.att-admin-page .att-verify-head,
.att-admin-page .att-verify-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.att-admin-page .att-evidence-panel {
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
}

.att-admin-page .att-evidence-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.att-admin-page .att-evidence-links .att-btn {
  min-height: 36px;
}

.att-admin-page .att-entry-meta {
  margin: 0 var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--border-soft);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.att-admin-page .att-entry-actions {
  justify-content: flex-end;
  margin: 0 var(--space-4) var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.att-modal-backdrop.modal-backdrop {
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.att-modal-card.modal-card {
  width: min(620px, 100%);
  max-height: min(86vh, 760px);
  overflow: auto;
  border-color: var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.att-modal-card .att-modal-head.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.att-modal-title {
  color: var(--text-strong);
  font-weight: 900;
}

.att-modal-meta {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: 13px;
}

.att-modal-form.filter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.att-modal-field-full,
.att-modal-actions.form-actions {
  grid-column: 1 / -1;
}

.att-modal-actions.form-actions {
  justify-content: flex-end;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

@media (max-width: 900px) {
  .att-admin-page .att-entry-layout,
  .att-admin-page .att-log-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .att-admin-page .att-overview-card.section-card,
  .att-admin-page .att-filter-card.section-card,
  .att-admin-page .att-results-card.section-card,
  .att-admin-page .att-day-card.section-card,
  .att-admin-page .att-entry-head,
  .att-admin-page .att-entry-layout,
  .att-modal-card .att-modal-head.modal-head,
  .att-modal-form.filter-grid {
    padding: var(--space-3);
  }

  .att-admin-page .att-metric-grid,
  .att-admin-page .att-verify-grid,
  .att-modal-form.filter-grid {
    grid-template-columns: 1fr;
  }

  .att-admin-page .att-results-head,
  .att-admin-page .att-day-head,
  .att-admin-page .att-log-head,
  .att-admin-page .att-entry-actions,
  .att-modal-actions.form-actions {
    display: grid;
  }

  .att-admin-page .att-entry-actions .btn,
  .att-modal-actions.form-actions .btn {
    width: 100%;
  }
}
/* Attendance department calendar shared component alignment. */
.dept-cal-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.dept-cal-page .dept-cal-page-hero.page-hero,
.dept-cal-page .dept-cal-card.section-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.dept-cal-page .dept-cal-page-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-6);
}

.dept-cal-page .page-title,
.dept-cal-page .page-subtitle {
  margin: 0;
}

.dept-cal-page .dept-cal-toolbar.page-hero-aside {
  display: flex;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dept-cal-page .dept-cal-alert.alert-box {
  margin: 0;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.dept-cal-page .dept-cal-filter.filter-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dept-cal-page .dept-cal-field.form-field {
  gap: var(--space-2);
  margin: 0;
}

.dept-cal-page .dept-cal-field.form-field input,
.dept-cal-page .dept-cal-field.form-field select {
  border-color: var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.dept-cal-page .dept-cal-filter-actions.action-row,
.dept-cal-page .dept-cal-nav.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dept-cal-page .btn,
.duty-modal-card.modal-card .btn,
.dept-cal-modal-dialog.modal-card .btn {
  min-height: var(--btn-height);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  box-shadow: none;
}

.dept-cal-page .btn-primary,
.duty-modal-card.modal-card .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.dept-cal-page .btn-secondary,
.duty-modal-card.modal-card .btn-secondary,
.dept-cal-modal-dialog.modal-card .btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.dept-cal-page .dept-cal-count.badge-soft,
.dept-cal-page .dept-cal-filter-pill.badge-soft,
.dept-cal-page .dept-cal-today-badge.badge-soft,
.dept-cal-page .dept-cal-type.badge-soft {
  box-shadow: none;
}

.dept-cal-page .dept-cal-calendar-card.section-card {
  padding: var(--space-4);
}

.dept-cal-page .dept-cal-grid {
  min-width: 0;
}

.dept-cal-page .dept-cal-more-btn.btn {
  width: 100%;
  justify-content: center;
}

.duty-modal-card.modal-card,
.dept-cal-modal-dialog.modal-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.duty-modal-card.modal-card .duty-modal-head,
.dept-cal-modal-dialog.modal-card .dept-cal-modal-head,
.dept-cal-modal-dialog.modal-card .dept-cal-modal-foot {
  border-color: var(--border-soft);
}

.dept-cal-modal-dialog.modal-card .dept-cal-info-grid.context-grid {
  gap: var(--space-3);
}

@media (max-width: 900px) {
  .dept-cal-page .dept-cal-page-hero.page-hero {
    grid-template-columns: 1fr;
  }

  .dept-cal-page .dept-cal-toolbar.page-hero-aside,
  .dept-cal-page .dept-cal-toolbar .btn,
  .dept-cal-page .dept-cal-filter-actions.action-row,
  .dept-cal-page .dept-cal-filter-actions .btn,
  .dept-cal-page .dept-cal-nav.action-row,
  .dept-cal-page .dept-cal-nav .btn {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Attendance department calendar redesign: single-column work flow for page, details, and edit dialogs. */
.dept-cal-page.page-stack {
  max-width: 1180px;
  margin-inline: auto;
  gap: var(--space-5);
}

.dept-cal-page .dept-cal-page-hero.page-hero {
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding: var(--space-5);
}

.dept-cal-hero-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.dept-cal-hero-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dept-cal-page .page-title {
  font-size: 30px;
  line-height: 1.18;
  font-weight: 900;
}

.dept-cal-page .page-subtitle {
  max-width: none;
  font-size: 14.5px;
  line-height: 1.65;
}

.dept-cal-hero-panel {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.dept-cal-hero-metrics.metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dept-cal-hero-metrics .metric-card {
  gap: var(--space-2);
  padding: var(--space-4);
}

.dept-cal-hero-metrics .metric-head {
  font-size: 13.5px;
  line-height: 1.35;
}

.dept-cal-hero-metrics .metric-value {
  font-size: 22px;
}

.dept-cal-page .dept-cal-toolbar.action-row {
  justify-content: flex-start;
}

.dept-cal-section-head {
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.dept-cal-section-titlebar,
.dept-cal-modal-titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.dept-cal-section-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--color-primary);
  line-height: 1;
}

.dept-cal-page .section-title,
.dept-cal-edit-section .section-title {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 900;
}

.dept-cal-page .section-kicker,
.dept-cal-edit-section-kicker,
.dept-cal-edit-kicker {
  font-size: 11.5px;
  line-height: 1.35;
  font-weight: 900;
}

.dept-cal-page .dept-cal-filter.filter-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.dept-cal-page .dept-cal-field.form-field {
  max-width: none;
  gap: 8px;
}

.dept-cal-page .dept-cal-field.form-field .field-label,
.dept-cal-page .dept-cal-field-head {
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 900;
  line-height: 1.35;
}

.dept-cal-page .dept-cal-field.form-field input,
.dept-cal-page .dept-cal-field.form-field select,
.dept-cal-page .dept-cal-field.form-field summary {
  min-height: 46px;
  font-size: 14.5px;
  font-weight: 700;
}

.dept-cal-page .dept-cal-filter-actions.action-row {
  justify-content: flex-start;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.dept-cal-page .dept-cal-filter-actions .btn,
.dept-cal-page .dept-cal-toolbar .btn {
  min-width: 156px;
}

.dept-cal-page .dept-cal-head.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
}

.dept-cal-page .dept-cal-nav.action-row {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: flex-start;
  padding-top: 0;
}

.dept-cal-page .dept-cal-count.badge-soft {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: fit-content;
  min-height: 32px;
  padding-inline: 12px;
  font-size: 12.5px;
  white-space: nowrap;
}

.dept-cal-page .dept-cal-legend {
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.dept-cal-page .dept-cal-legend-item {
  min-height: 34px;
  font-size: 12.5px;
  line-height: 1.35;
}

.dept-cal-page .dept-cal-grid {
  gap: 10px !important;
}

.dept-cal-page .dept-cal-weekday {
  min-height: 36px !important;
  font-size: 13px !important;
}

.dept-cal-page .dept-cal-day {
  min-height: 156px !important;
  padding: 10px !important;
}

.dept-cal-page .dept-cal-day-top {
  margin-bottom: 8px !important;
}

.dept-cal-page .dept-cal-dayno {
  font-size: 15px !important;
}

.dept-cal-page .dept-cal-event {
  gap: 5px !important;
  min-height: 38px !important;
  padding: 8px 9px !important;
}

.dept-cal-page .dept-cal-name {
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 900;
  max-height: none;
}

.dept-cal-page .dept-cal-event-workline {
  font-size: 11px;
  line-height: 1.25;
  font-weight: 800;
}

.dept-cal-modal-dialog.modal-card {
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.dept-cal-modal-dialog.modal-card .dept-cal-modal-head {
  padding: var(--space-4);
  background: var(--surface);
}

.dept-cal-modal-dialog.modal-card .dept-cal-modal-head h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3;
}

.dept-cal-modal-dialog.modal-card .dept-cal-modal-close {
  flex: 0 0 auto;
  width: 42px;
  min-width: 42px;
  padding-inline: 0;
}

.dept-cal-modal-dialog.modal-card .dept-cal-modal-body {
  min-height: 0;
  overflow: auto;
  padding: var(--space-4);
}

.dept-cal-info-list.context-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.dept-cal-info-row {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.dept-cal-info-row.is-title {
  background: var(--surface);
  border-color: var(--color-primary-border);
}

.dept-cal-info-row .k {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 900;
  line-height: 1.4;
}

.dept-cal-info-row .v {
  min-width: 0;
  color: var(--text-strong);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dept-cal-info-row.is-title .v {
  font-size: 17px;
  font-weight: 900;
}

.dept-cal-modal-dialog.modal-card .dept-cal-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
}

.dept-cal-day-title {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--text-strong);
  font-size: 15px;
  line-height: 1.5;
}

.dept-cal-day-list {
  max-height: none;
}

.dept-cal-day-row {
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-2);
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.dept-cal-day-main .name {
  font-size: 15px;
  font-weight: 900;
  line-height: 1.45;
}

.dept-cal-day-main .meta {
  font-size: 12.5px;
  line-height: 1.55;
}

.dept-cal-day-row .js-inline-detail {
  justify-self: start;
}

.duty-modal-backdrop.modal-backdrop {
  z-index: 5000;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  overflow: hidden;
}

.duty-modal-card.modal-card.dept-cal-duty-card,
.duty-modal-card.modal-card.dept-cal-edit-card {
  width: min(900px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.dept-cal-duty-head,
.dept-cal-edit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.dept-cal-edit-titlebar,
.dept-cal-edit-section-titlebar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.dept-cal-edit-hero-icon,
.dept-cal-edit-section-icon,
.dept-cal-edit-file-icon,
.duty-file-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--color-primary);
}

.dept-cal-edit-close {
  flex: 0 0 auto;
}

.dept-cal-duty-form,
.dept-cal-edit-form {
  min-height: 0;
  overflow: auto;
  padding: 0;
  background: var(--surface-subtle);
  scrollbar-gutter: stable;
  scroll-padding-bottom: 96px;
}

.dept-cal-duty-form {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.dept-cal-duty-form .duty-form-section,
.dept-cal-edit-section {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.dept-cal-duty-form .duty-section-head,
.dept-cal-edit-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.dept-cal-duty-form .duty-modal-date-grid,
.dept-cal-duty-form .duty-detail-grid,
.dept-cal-edit-grid,
.dept-cal-edit-grid-time {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.dept-cal-duty-form .duty-type-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.dept-cal-edit-body {
  grid-template-areas:
    "time"
    "detail"
    "people"
    "file";
  gap: var(--space-4);
  padding: var(--space-4);
}

.dept-cal-edit-title,
.duty-modal-card.modal-card .duty-modal-title {
  font-size: 21px;
  line-height: 1.28;
  font-weight: 900;
}

.dept-cal-duty-form .duty-section-head {
  justify-content: flex-start;
}

.dept-cal-duty-form .duty-section-step {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 900;
}

.duty-modal-card.modal-card .duty-modal-sub {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
}

.dept-cal-duty-form .duty-section-title,
.dept-cal-edit-section .section-title {
  font-size: 17px;
  line-height: 1.35;
}

.dept-cal-duty-form .duty-type-card-wrap,
.dept-cal-duty-form .duty-user-picker,
.dept-cal-edit-picker,
.dept-cal-edit-upload {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.dept-cal-duty-form .duty-type-card-head,
.dept-cal-duty-form .duty-file-label {
  color: var(--text-strong);
  font-size: 13.5px;
  font-weight: 900;
}

.dept-cal-duty-form .duty-mode-card,
.dept-cal-edit-link-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  cursor: pointer;
}

.dept-cal-duty-form .duty-mode-card .mode-title,
.dept-cal-edit-link-copy > span {
  color: var(--text-strong);
  font-weight: 900;
}

.dept-cal-duty-form .duty-mode-card .mode-sub,
.dept-cal-duty-form .duty-type-hint {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.dept-cal-duty-form .duty-mode-card .mode-switch {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.dept-cal-duty-form .duty-mode-card .mode-switch input,
.dept-cal-edit-link-card > input {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-pill);
  background: var(--surface);
  cursor: pointer;
}

.dept-cal-duty-form .duty-mode-card .mode-switch input::after,
.dept-cal-edit-link-card > input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  transition: transform 160ms ease, background 160ms ease;
}

.dept-cal-duty-form .duty-mode-card .mode-switch input:checked,
.dept-cal-edit-link-card > input:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.dept-cal-duty-form .duty-mode-card .mode-switch input:checked::after,
.dept-cal-edit-link-card > input:checked::after {
  transform: translateX(20px);
  background: var(--surface);
}

.dept-cal-edit-link-card {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.dept-cal-edit-link-mark {
  display: inline-grid;
  place-items: center;
  color: var(--color-primary);
}

.dept-cal-edit-link-copy {
  display: grid;
  gap: var(--space-1);
}

.dept-cal-duty-form .duty-type-card {
  position: relative;
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  min-height: 92px;
  padding: var(--space-3);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
}

.dept-cal-duty-form .duty-type-card input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}

.dept-cal-duty-form .duty-type-card .title {
  color: var(--text-strong);
  font-weight: 900;
}

.dept-cal-duty-form .duty-type-card .desc {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.dept-cal-duty-form .duty-type-card:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.dept-cal-duty-form .duty-type-card.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dept-cal-duty-form label,
.dept-cal-edit-field,
.dept-cal-edit-link-copy,
.dept-cal-edit-picker .duty-user-picker-head label,
.dept-cal-duty-form .duty-user-picker-head label {
  font-size: 13.5px;
  line-height: 1.4;
}

.dept-cal-duty-form input,
.dept-cal-duty-form select,
.dept-cal-edit-field > input,
.dept-cal-edit-field > select,
.dept-cal-edit-field > textarea,
.dept-cal-duty-form .duty-user-inputbox input,
.dept-cal-edit-form .duty-user-inputbox input {
  min-height: 46px;
  font-size: 14.5px;
  font-weight: 700;
}

.dept-cal-edit-link-card {
  padding: var(--space-3) var(--space-4);
}

.dept-cal-edit-link-copy small,
.duty-user-help,
.duty-file-sub {
  font-size: 12.5px;
  line-height: 1.5;
}

.dept-cal-duty-form .duty-file-drop,
.dept-cal-edit-upload .duty-file-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: 1px dashed var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  cursor: pointer;
}

.dept-cal-duty-form .duty-file-copy,
.dept-cal-edit-upload .duty-file-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.dept-cal-duty-form .duty-file-title,
.dept-cal-edit-upload .duty-file-title {
  color: var(--text-strong);
  font-weight: 900;
}

.dept-cal-duty-form .duty-file-drop input[type="file"],
.dept-cal-edit-upload .duty-file-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}

.dept-cal-duty-form .duty-user-picker-head,
.dept-cal-edit-picker .duty-user-picker-head,
.dept-cal-duty-form .duty-user-picker-tools,
.dept-cal-edit-picker .duty-user-picker-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.dept-cal-duty-form .duty-user-clear,
.dept-cal-edit-picker .duty-user-clear {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-muted);
  border-radius: var(--btn-radius);
  background: var(--surface);
  color: var(--text-strong);
  font-weight: 800;
  cursor: pointer;
}

.dept-cal-duty-form .duty-user-inputbox,
.dept-cal-edit-picker .duty-user-inputbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.dept-cal-duty-form .duty-user-inputbox:focus-within,
.dept-cal-edit-picker .duty-user-inputbox:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--ui-focus-ring);
}

.dept-cal-duty-form .duty-user-inputbox input,
.dept-cal-edit-picker .duty-user-inputbox input {
  flex: 1 1 220px;
  min-width: 160px;
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.dept-cal-duty-form .duty-selected-users-inline,
.dept-cal-edit-picker .duty-selected-users-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dept-cal-duty-form .duty-selected-chip,
.dept-cal-edit-picker .duty-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 800;
}

.dept-cal-duty-form .duty-selected-chip button,
.dept-cal-edit-picker .duty-selected-chip button {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.dept-cal-duty-form .duty-user-results,
.dept-cal-edit-picker .duty-user-results {
  display: none;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.dept-cal-duty-form .duty-user-results.open,
.dept-cal-edit-picker .duty-user-results.open {
  display: grid;
}

.dept-cal-duty-form .duty-user-group + .duty-user-group,
.dept-cal-edit-picker .duty-user-group + .duty-user-group {
  border-top: 1px solid var(--border-soft);
}

.dept-cal-duty-form .duty-user-group-title,
.dept-cal-edit-picker .duty-user-group-title {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

.dept-cal-duty-form .duty-user-row,
.dept-cal-edit-picker .duty-user-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-strong);
  text-align: left;
  cursor: pointer;
}

.dept-cal-duty-form .duty-user-row:hover,
.dept-cal-edit-picker .duty-user-row:hover {
  background: var(--color-primary-soft);
}

.dept-cal-duty-form .duty-user-main,
.dept-cal-edit-picker .duty-user-main {
  min-width: 0;
}

.dept-cal-duty-form .duty-user-name,
.dept-cal-edit-picker .duty-user-name {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.dept-cal-duty-form .duty-user-workline,
.dept-cal-edit-picker .duty-user-workline,
.dept-cal-duty-form .duty-user-group-count,
.dept-cal-edit-picker .duty-user-group-count {
  color: var(--text-muted);
  font-size: 12px;
}

.dept-cal-duty-form .duty-user-empty,
.dept-cal-edit-picker .duty-user-empty {
  padding: var(--space-4);
  color: var(--text-muted);
  text-align: center;
}

.dept-cal-duty-form .duty-modal-actions,
.dept-cal-edit-actions.sticky-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 6;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: 14px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.dept-cal-edit-actions .sticky-action-title {
  font-size: 15px;
  line-height: 1.35;
}

.dept-cal-edit-actions .sticky-action-subtitle {
  font-size: 12.5px;
  line-height: 1.5;
}

.dept-cal-duty-form .duty-modal-actions .btn,
.dept-cal-edit-action-buttons .btn {
  width: auto;
  min-width: 144px;
}

.dept-cal-edit-action-buttons {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 760px) {
  .duty-modal-backdrop.modal-backdrop {
    padding: var(--space-2);
  }

  .dept-cal-page {
    gap: var(--space-3);
  }

  .dept-cal-duty-head,
  .dept-cal-edit-head {
    padding: var(--space-3);
  }

  .dept-cal-duty-form {
    padding: var(--space-3);
  }

  .dept-cal-duty-form .duty-modal-date-grid,
  .dept-cal-duty-form .duty-detail-grid,
  .dept-cal-duty-form .duty-type-cards,
  .dept-cal-edit-grid,
  .dept-cal-edit-grid-time {
    grid-template-columns: 1fr;
  }

  .dept-cal-duty-form .duty-mode-card,
  .dept-cal-edit-link-card {
    grid-template-columns: 1fr;
  }

  .dept-cal-duty-form .duty-mode-card .mode-switch {
    grid-column: 1;
    grid-row: auto;
  }

  .dept-cal-edit-link-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .dept-cal-edit-link-card > input {
    grid-row: 1 / span 2;
  }

  .dept-cal-edit-link-mark {
    display: none;
  }

  .dept-cal-duty-form .duty-modal-actions,
  .dept-cal-edit-actions.sticky-action-bar,
  .dept-cal-edit-action-buttons {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .dept-cal-duty-form .duty-modal-actions .btn,
  .dept-cal-edit-action-buttons .btn {
    width: 100%;
    min-width: 0;
  }

  .dept-cal-page .dept-cal-page-hero.page-hero,
  .dept-cal-page .dept-cal-card.section-card {
    padding: var(--space-4);
  }

  .dept-cal-hero-main {
    display: grid;
    gap: var(--space-3);
  }

  .dept-cal-page .page-title {
    font-size: 24px;
  }

  .dept-cal-hero-metrics.metric-grid {
    grid-template-columns: 1fr;
  }

  .dept-cal-page .dept-cal-toolbar.action-row,
  .dept-cal-page .dept-cal-filter-actions.action-row,
  .dept-cal-page .dept-cal-nav.action-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .dept-cal-page .dept-cal-toolbar .btn,
  .dept-cal-page .dept-cal-filter-actions .btn,
  .dept-cal-page .dept-cal-nav .btn {
    width: 100%;
    justify-content: center;
  }

  .dept-cal-grid {
    grid-template-columns: 1fr !important;
  }

  .dept-cal-weekday,
  .dept-cal-day-empty {
    display: none !important;
  }

  .dept-cal-day {
    min-height: 0 !important;
  }

  .dept-cal-modal-dialog.modal-card,
  .duty-modal-card.modal-card.dept-cal-duty-card,
  .duty-modal-card.modal-card.dept-cal-edit-card {
    width: 100%;
    max-height: calc(100dvh - 16px);
    margin: 0;
    border-radius: var(--radius-md);
  }

  .dept-cal-modal-dialog.modal-card .dept-cal-modal-head,
  .dept-cal-edit-head,
  .dept-cal-duty-head {
    padding: var(--space-3);
  }

  .dept-cal-modal-dialog.modal-card .dept-cal-modal-body,
  .dept-cal-duty-form,
  .dept-cal-edit-body {
    padding: var(--space-4);
  }

  .dept-cal-modal-dialog.modal-card .dept-cal-modal-foot {
    display: grid;
    grid-template-columns: 1fr;
    padding: var(--space-3);
  }

  .dept-cal-modal-dialog.modal-card .dept-cal-modal-foot .btn {
    width: 100%;
  }

  .dept-cal-edit-close span:not(.btn-icon) {
    display: none;
  }
}

/* Attendance workline calendar shared component alignment. */
.workline-calendar-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.workline-calendar-page .workline-cal-hero.page-hero,
.workline-calendar-page .duty-calendar-card.section-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.workline-calendar-page .workline-cal-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-6);
}

.workline-calendar-page .page-title {
  margin: 0;
}

.workline-calendar-page .workline-cal-actions.page-hero-aside {
  display: flex;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workline-calendar-page .duty-calendar-card.section-card {
  padding: var(--space-4);
}

.workline-calendar-page .duty-filter-grid.filter-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.workline-calendar-page .form-field {
  gap: var(--space-2);
  margin: 0;
}

.workline-calendar-page .form-field input,
.workline-calendar-page .form-field select,
.workline-calendar-page .duty-modal-form input,
.workline-calendar-page .duty-modal-form select {
  border-color: var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.workline-calendar-page .duty-filter-actions.action-row,
.workline-calendar-page .duty-modal-actions.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.workline-calendar-page .btn,
.workline-calendar-page .duty-modal-card.modal-card .btn {
  min-height: var(--btn-height);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  box-shadow: none;
}

.workline-calendar-page .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.workline-calendar-page .btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.workline-calendar-page .duty-calendar-head.section-head {
  align-items: flex-start;
  margin-bottom: var(--space-3);
  border-bottom-color: var(--border-soft);
}

.workline-calendar-page .duty-summary-line {
  color: var(--text-soft);
}

.workline-calendar-page .duty-calendar-grid {
  min-width: 0;
}

.workline-calendar-page .cal-weekday {
  border-color: var(--border-soft);
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.workline-calendar-page .cal-day {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.workline-calendar-page .cal-day-holiday {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
}

.workline-calendar-page .cal-empty {
  background: var(--surface-subtle);
}

.workline-calendar-page .cal-day-no {
  color: var(--text-strong);
}

.workline-calendar-page .cal-no-event,
.workline-calendar-page .cal-more.badge-soft {
  color: var(--text-muted);
}

.workline-calendar-page .cal-holiday {
  border-color: var(--color-danger-border);
  border-radius: var(--radius-xs);
  background: var(--surface);
}

.workline-calendar-page .cal-holiday-badge.badge-soft,
.workline-calendar-page .duty-type-holiday.badge-soft {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.workline-calendar-page .cal-holiday-name {
  color: var(--color-danger-ink);
}

.workline-calendar-page .cal-event-line {
  border-color: var(--color-info-border);
  border-radius: var(--radius-xs);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.workline-calendar-page .duty-type-pill.badge-soft {
  box-shadow: none;
}

.workline-calendar-page .duty-type-pill.badge-soft.is-info {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.workline-calendar-page .holiday-row td {
  background: var(--color-danger-soft);
}

.workline-calendar-page .duty-table-scroll.table-wrapper {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.workline-calendar-page .duty-table-empty.empty-state {
  color: var(--text-muted);
}

.workline-calendar-page .duty-modal-card.modal-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.workline-calendar-page .duty-modal-head {
  border-bottom-color: var(--border-soft);
}

.workline-calendar-page .duty-modal-title.modal-title {
  color: var(--text-strong);
}

.workline-calendar-page .duty-modal-sub.modal-subtitle,
.workline-calendar-page .duty-modal-form label {
  color: var(--text-soft);
}

@media (max-width: 900px) {
  .workline-calendar-page .workline-cal-hero.page-hero {
    grid-template-columns: 1fr;
  }

  .workline-calendar-page .workline-cal-actions.page-hero-aside,
  .workline-calendar-page .workline-cal-actions .btn,
  .workline-calendar-page .duty-filter-actions.action-row,
  .workline-calendar-page .duty-filter-actions .btn,
  .workline-calendar-page .duty-modal-actions.action-row,
  .workline-calendar-page .duty-modal-actions .btn {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Profile shared component alignment. */
.profile-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.profile-page .profile-page-hero.page-hero,
.profile-page .profile-card.section-card,
.profile-page .training-card.record-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.profile-page .profile-page-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-6);
}

.profile-page .page-title,
.profile-page .page-subtitle,
.profile-page .section-title,
.profile-page .section-subtitle {
  margin: 0;
}

.profile-page .profile-page-status.page-hero-aside {
  display: flex;
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-start;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profile-page .profile-alert.alert-box {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.profile-page .profile-personal-top.section-head,
.profile-page .profile-section-head.section-head,
.profile-page .profile-consent-head.section-head {
  align-items: flex-start;
  border-bottom-color: var(--border-soft);
}

.profile-page .profile-info-group.content-box {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.profile-page .profile-info-item,
.profile-page .training-meta-item,
.profile-page .face-minimal-status,
.profile-page .face-camera-panel,
.profile-page .face-progress-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.profile-page .profile-photo-block,
.profile-page .profile-info-panel,
.profile-page .training-form-section {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.profile-page .badge-soft,
.profile-page .training-badge.badge-soft,
.profile-page .profile-status-pill.badge-soft,
.profile-page .profile-consent-pill.badge-soft {
  box-shadow: none;
}

.profile-page .btn,
.profile-page .face-btn.btn,
.profile-page .training-action-btn.btn,
.profile-page .training-cert-btn.btn,
.profile-page .profile-consent-action .btn,
.profile-page .modal-actions .btn,
.profile-edit-modal .btn,
.training-modal-card .btn {
  min-height: var(--btn-height);
  border-radius: var(--btn-radius);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  box-shadow: none;
}

.profile-page .btn-primary,
.profile-edit-modal .btn-primary,
.training-modal-card .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.profile-page .btn-secondary,
.profile-edit-modal .btn-secondary,
.training-modal-card .btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.profile-page .profile-empty-box.empty-state {
  border-color: var(--border-soft);
  background: var(--surface-muted);
  color: var(--text-muted);
}

.profile-page .training-card.record-card {
  padding: var(--space-4);
}

.profile-page .training-card-foot {
  border-color: var(--color-primary-border);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}

.profile-edit-modal.modal-card,
.training-modal-card.modal-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.profile-edit-modal .profile-edit-modal-head,
.training-modal-card .training-modal-head,
.profile-edit-modal .profile-edit-actions {
  border-color: var(--border-soft);
}

.profile-edit-modal .modal-title,
.training-modal-card .modal-title {
  color: var(--text-strong);
}

.profile-edit-modal .modal-subtitle,
.training-modal-card .modal-subtitle,
.profile-edit-modal .profile-edit-field,
.training-modal-card .training-form-field {
  color: var(--text-soft);
}

.profile-edit-modal input,
.profile-edit-modal select,
.profile-edit-modal textarea,
.training-modal-card input,
.training-modal-card select,
.training-modal-card textarea {
  border-color: var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.profile-edit-modal .profile-edit-section,
.training-modal-card .training-form-section {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

@media (max-width: 900px) {
  .profile-page .profile-page-hero.page-hero {
    grid-template-columns: 1fr;
  }

  .profile-page .profile-page-status.page-hero-aside,
  .profile-page .profile-page-status .badge-soft,
  .profile-page .profile-personal-top .btn,
  .profile-page .profile-section-head .btn,
  .profile-page .profile-consent-action .btn {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Worklog dashboard workspace. */
.wlog-dashboard-page.page-stack {
  gap: var(--space-5);
  color: var(--text-strong);
}

.wlog-dashboard-page .wlog-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
}

.wlog-dashboard-page .wlog-hero-main {
  min-width: 0;
}

.wlog-dashboard-page .wlog-kicker,
.wlog-dashboard-page .section-kicker {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-primary-ink);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.wlog-dashboard-page .page-title,
.wlog-dashboard-page .page-subtitle,
.wlog-dashboard-page .section-head h2,
.wlog-dashboard-page .section-head h3,
.wlog-dashboard-page .section-head p,
.wlog-dashboard-page .wlog-month-heading h3,
.wlog-dashboard-page .wlog-month-heading p {
  margin: 0;
}

.wlog-dashboard-page .wlog-hero-status.page-hero-aside {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  background: var(--surface-subtle);
  box-shadow: none;
}

.wlog-dashboard-page .wlog-hero-status > span:first-child,
.wlog-dashboard-page .wlog-hero-status small {
  color: var(--text-muted);
}

.wlog-dashboard-page .wlog-hero-status > strong {
  color: var(--text-strong);
  font-size: var(--font-size-xl);
}

.wlog-dashboard-page .wlog-hero-status .badge-soft {
  justify-self: start;
}

.wlog-dashboard-page .wlog-control-card,
.wlog-dashboard-page .wlog-overview-card,
.wlog-dashboard-page .wlog-entry-card {
  display: grid;
  gap: var(--space-4);
}

.wlog-dashboard-page .wlog-control-card {
  grid-template-columns: minmax(0, 1fr) minmax(460px, 0.9fr);
  align-items: end;
}

.wlog-dashboard-page .section-head,
.wlog-dashboard-page .wlog-card-head,
.wlog-dashboard-page .wlog-month-heading,
.wlog-dashboard-page .wlog-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.wlog-dashboard-page .wlog-control-head {
  align-items: center;
}

.wlog-dashboard-page .wlog-page-tabs,
.wlog-dashboard-page .wlog-entry-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.wlog-dashboard-page .wlog-page-tabs a,
.wlog-dashboard-page .wlog-entry-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-muted);
  border-radius: var(--btn-radius);
  background: var(--surface);
  color: var(--text-strong);
  font-weight: var(--btn-font-weight);
  text-decoration: none;
}

.wlog-dashboard-page .wlog-page-tabs a:hover,
.wlog-dashboard-page .wlog-entry-tabs a:hover {
  border-color: var(--color-primary-border);
  background: var(--surface-subtle);
}

.wlog-dashboard-page .wlog-page-tabs a.is-active,
.wlog-dashboard-page .wlog-entry-tabs a.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.wlog-dashboard-page .wlog-entry-tabs a span {
  min-width: 0;
}

.wlog-dashboard-page .wlog-entry-tabs .wlog-tab-count {
  display: inline-grid;
  min-width: 22px;
  min-height: 22px;
  padding-inline: 6px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: var(--font-size-xs);
  line-height: 1;
}

.wlog-dashboard-page .wlog-entry-tabs a.active .wlog-tab-count {
  background: var(--surface);
  color: var(--color-primary-ink);
}

.wlog-dashboard-page .wlog-date-filter.filter-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: var(--space-3);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.wlog-dashboard-page .wlog-date-filter .form-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.wlog-dashboard-page .form-actions,
.wlog-dashboard-page .wlog-entry-tools,
.wlog-dashboard-page .wlog-item-tools,
.wlog-dashboard-page .wlog-draft-actions,
.wlog-dashboard-page .wlog-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.wlog-dashboard-page .wlog-overview-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.wlog-dashboard-page .wlog-overview-grid.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wlog-dashboard-page .wlog-metric.metric-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  border-color: var(--border-soft);
  background: var(--surface);
  box-shadow: none;
}

.wlog-dashboard-page .wlog-metric .metric-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  color: var(--text-muted);
  font-weight: 700;
}

.wlog-dashboard-page .wlog-metric .metric-value {
  overflow-wrap: anywhere;
  font-size: var(--font-size-xl);
}

.wlog-dashboard-page .wlog-metric .metric-sub {
  line-height: 1.55;
}

.wlog-dashboard-page .wlog-month-panel {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

.wlog-dashboard-page .wlog-month-rate {
  color: var(--color-primary-ink);
  font-size: var(--font-size-xl);
}

.wlog-dashboard-page .wlog-progress {
  grid-column: 1;
  width: 100%;
  height: var(--space-2);
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  accent-color: var(--color-primary);
}

.wlog-dashboard-page .wlog-progress::-webkit-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
}

.wlog-dashboard-page .wlog-progress::-webkit-progress-value {
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.wlog-dashboard-page .wlog-progress::-moz-progress-bar {
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.wlog-dashboard-page .wlog-month-list {
  display: grid;
  grid-column: 2;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.wlog-dashboard-page .wlog-month-note {
  grid-column: 1 / -1;
}

.wlog-dashboard-page .wlog-month-list > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-1) 0;
}

.wlog-dashboard-page .wlog-month-list > div + div {
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-soft);
}

.wlog-dashboard-page .wlog-month-list span,
.wlog-dashboard-page .wlog-month-note,
.wlog-dashboard-page .wlog-form-intro-text,
.wlog-dashboard-page .wlog-item-sub,
.wlog-dashboard-page .wlog-draft-meta,
.wlog-dashboard-page .wlog-draft-main p {
  color: var(--text-muted);
}

.wlog-dashboard-page .wlog-badge {
  white-space: nowrap;
}

.wlog-dashboard-page .wlog-badge.draft {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.wlog-dashboard-page .wlog-badge.submitted,
.wlog-dashboard-page .wlog-badge.lock {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.wlog-dashboard-page .wlog-badge.reviewed {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.wlog-dashboard-page .wlog-badge.returned {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.wlog-dashboard-page .wlog-badge.count {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-muted);
}

.wlog-dashboard-page .wlog-form-intro.content-box,
.wlog-dashboard-page .wlog-draft-intro.content-box {
  padding: var(--space-4);
  border-color: var(--border-soft);
  background: var(--surface-subtle);
  box-shadow: none;
}

.wlog-dashboard-page .wlog-entry-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  min-width: 0;
  padding-block: var(--space-3) var(--space-5);
}

.wlog-dashboard-page .wlog-entry-group + .wlog-entry-group {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
}

.wlog-dashboard-page .wlog-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.wlog-dashboard-page .wlog-group-head > .action-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.wlog-dashboard-page .wlog-group-head > div {
  min-width: 0;
}

.wlog-dashboard-page .wlog-group-head h3,
.wlog-dashboard-page .wlog-group-head p {
  margin: 0;
}

.wlog-dashboard-page .wlog-group-head h3 {
  color: var(--text-strong);
  font-size: var(--font-size-lg);
  line-height: 1.3;
}

.wlog-dashboard-page .wlog-group-head-with-actions {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.wlog-dashboard-page .wlog-group-head-with-actions .wlog-items-toolbar {
  grid-column: auto;
  justify-content: flex-end;
}

.wlog-dashboard-page .wlog-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.wlog-dashboard-page .wlog-item-primary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.wlog-dashboard-page .wlog-item-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.wlog-dashboard-page .wlog-item-tools .js-remove-row {
  min-width: 104px;
}

.wlog-dashboard-page .wlog-items-content {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.wlog-dashboard-page .wlog-group-head p {
  color: var(--text-muted);
  line-height: 1.55;
}

.wlog-dashboard-page .wlog-entry-group > .wlog-field,
.wlog-dashboard-page .wlog-entry-group > .wlog-summary-grid,
.wlog-dashboard-page .wlog-entry-group > .wlog-followup-grid,
.wlog-dashboard-page .wlog-entry-group > .wlog-items-content {
  padding-left: 48px;
}

.wlog-dashboard-page .wlog-summary-grid,
.wlog-dashboard-page .wlog-followup-grid,
.wlog-dashboard-page .wlog-item-grid,
.wlog-dashboard-page .wlog-item-meta,
.wlog-dashboard-page .wlog-items,
.wlog-dashboard-page .wlog-draft-list {
  display: grid;
  gap: var(--space-3);
}

.wlog-dashboard-page .wlog-summary-grid,
.wlog-dashboard-page .wlog-item-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wlog-dashboard-page .wlog-followup-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wlog-dashboard-page .wlog-item-meta {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
}

.wlog-dashboard-page .wlog-summary-grid .span-2,
.wlog-dashboard-page .wlog-item-grid .span-2,
.wlog-dashboard-page .wlog-item-meta .span-2 {
  grid-column: span 2;
}

.wlog-dashboard-page .wlog-field.form-field,
.wlog-dashboard-page .wlog-item-grid label,
.wlog-dashboard-page .wlog-item-meta label {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.wlog-dashboard-page .wlog-item-type {
  display: grid;
  grid-template-columns: auto minmax(180px, 240px);
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.wlog-dashboard-page .wlog-item-no,
.wlog-dashboard-page .wlog-item-type > span {
  white-space: nowrap;
}

.wlog-dashboard-page .wlog-item-type > select {
  width: 100%;
  min-width: 0;
}

.wlog-dashboard-page .wlog-field.form-field {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.wlog-dashboard-page .wlog-items-toolbar,
.wlog-dashboard-page .wlog-submit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.wlog-dashboard-page .wlog-item-card.record-card,
.wlog-dashboard-page .wlog-draft-row.record-card {
  border-color: var(--border-soft);
  background: var(--surface);
  box-shadow: none;
}

.wlog-dashboard-page .wlog-item-card.record-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
}

.wlog-dashboard-page .wlog-draft-row.record-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
}

.wlog-dashboard-page .wlog-draft-main {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.wlog-dashboard-page .wlog-draft-head,
.wlog-dashboard-page .wlog-draft-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.wlog-dashboard-page .wlog-draft-main p {
  margin: 0;
  overflow-wrap: anywhere;
}

.wlog-dashboard-page .wlog-note.alert-box,
.wlog-dashboard-page .wlog-flash.alert-box {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.wlog-dashboard-page .wlog-divider {
  height: 1px;
  background: var(--border-soft);
}

.wlog-dashboard-page .wlog-hidden-form {
  display: none;
}

.wlog-dashboard-page .wlog-submit-row.sticky-action-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  box-shadow: none;
}

.wlog-dashboard-page .wlog-submit-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.wlog-dashboard-page .wlog-submit-summary small {
  color: var(--text-muted);
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .wlog-dashboard-page .wlog-control-card {
    grid-template-columns: 1fr;
  }

  .wlog-dashboard-page .wlog-month-panel {
    grid-template-columns: minmax(200px, .7fr) minmax(0, 1.3fr);
  }

  .wlog-dashboard-page .wlog-overview-grid.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wlog-dashboard-page .wlog-item-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .wlog-dashboard-page .wlog-hero.page-hero,
  .wlog-dashboard-page .wlog-date-filter.filter-panel,
  .wlog-dashboard-page .wlog-entry-group,
  .wlog-dashboard-page .wlog-summary-grid,
  .wlog-dashboard-page .wlog-followup-grid,
  .wlog-dashboard-page .wlog-item-grid,
  .wlog-dashboard-page .wlog-item-meta {
    grid-template-columns: 1fr;
  }

  .wlog-dashboard-page .wlog-control-head,
  .wlog-dashboard-page .wlog-card-head,
  .wlog-dashboard-page .wlog-month-heading,
  .wlog-dashboard-page .wlog-draft-row.record-card {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wlog-dashboard-page .wlog-item-head {
    display: flex;
  }

  .wlog-dashboard-page .wlog-summary-grid .span-2,
  .wlog-dashboard-page .wlog-item-grid .span-2,
  .wlog-dashboard-page .wlog-item-meta .span-2 {
    grid-column: auto;
  }

  .wlog-dashboard-page .wlog-entry-group {
    padding-bottom: var(--space-4);
  }

  .wlog-dashboard-page .wlog-group-head-with-actions {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wlog-dashboard-page .wlog-group-head-with-actions .wlog-items-toolbar {
    grid-column: 1 / -1;
    padding-left: 48px;
    justify-content: flex-start;
  }

  .wlog-dashboard-page .wlog-item-tools {
    display: flex;
    width: auto;
  }

  .wlog-dashboard-page .wlog-page-tabs,
  .wlog-dashboard-page .wlog-entry-tabs,
  .wlog-dashboard-page .wlog-entry-tools,
  .wlog-dashboard-page .wlog-items-toolbar,
  .wlog-dashboard-page .wlog-item-tools,
  .wlog-dashboard-page .wlog-draft-actions {
    justify-content: flex-start;
  }

  .wlog-dashboard-page .wlog-month-panel {
    grid-template-columns: 1fr;
  }

  .wlog-dashboard-page .wlog-month-list {
    grid-column: 1;
    grid-row: auto;
  }

  .wlog-dashboard-page .wlog-submit-row.sticky-action-bar {
    grid-template-columns: 1fr;
  }

  .wlog-dashboard-page .wlog-submit-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .wlog-dashboard-page.page-stack {
    gap: var(--space-4);
  }

  .wlog-dashboard-page .wlog-hero.page-hero {
    padding: var(--space-4);
  }

  .wlog-dashboard-page .wlog-group-head {
    gap: var(--space-2);
  }

  .wlog-dashboard-page .wlog-entry-group > .wlog-field,
  .wlog-dashboard-page .wlog-entry-group > .wlog-summary-grid,
  .wlog-dashboard-page .wlog-entry-group > .wlog-followup-grid,
  .wlog-dashboard-page .wlog-entry-group > .wlog-items-content,
  .wlog-dashboard-page .wlog-group-head-with-actions .wlog-items-toolbar {
    padding-left: 0;
  }

  .wlog-dashboard-page .wlog-group-head-with-actions .wlog-items-toolbar {
    justify-content: flex-end;
  }

  .wlog-dashboard-page .wlog-overview-grid.metric-grid,
  .wlog-dashboard-page .wlog-month-list {
    grid-template-columns: 1fr;
  }

  .wlog-dashboard-page .wlog-month-list > div + div {
    padding-top: var(--space-2);
    padding-left: 0;
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }

  .wlog-dashboard-page .wlog-page-tabs,
  .wlog-dashboard-page .wlog-entry-tabs,
  .wlog-dashboard-page .form-actions,
  .wlog-dashboard-page .wlog-draft-actions,
  .wlog-dashboard-page .wlog-submit-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    width: 100%;
  }

  .wlog-dashboard-page .wlog-entry-tools,
  .wlog-dashboard-page .wlog-item-tools {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .wlog-dashboard-page .wlog-item-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wlog-dashboard-page .wlog-item-tools .js-remove-row {
    width: 100%;
  }

  .wlog-dashboard-page .wlog-item-primary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wlog-dashboard-page .wlog-item-type {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wlog-dashboard-page .wlog-items-toolbar {
    width: 100%;
    justify-content: space-between;
  }

  .wlog-dashboard-page .wlog-submit-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .wlog-dashboard-page .wlog-page-tabs a,
  .wlog-dashboard-page .wlog-entry-tabs a,
  .wlog-dashboard-page .form-actions .btn,
  .wlog-dashboard-page .wlog-entry-tools .btn,
  .wlog-dashboard-page .wlog-item-tools .btn,
  .wlog-dashboard-page .wlog-draft-actions .btn,
  .wlog-dashboard-page .wlog-submit-actions .btn {
    width: 100%;
  }

  .wlog-dashboard-page .wlog-items-toolbar .btn {
    width: auto;
  }
}

@media (max-width: 420px) {
  .wlog-dashboard-page .wlog-submit-actions {
    grid-template-columns: 1fr;
  }
}

/* Worklog history page. Single scoped implementation for desktop and mobile. */
.worklog-history-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.worklog-history-page .wlh-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

.worklog-history-page .wlh-tabs .btn {
  min-width: 0;
  box-shadow: none;
}

.worklog-history-page .wlh-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, auto);
  align-items: stretch;
  gap: var(--space-5);
  padding: var(--space-6);
}

.worklog-history-page .wlh-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: start;
  gap: var(--space-4);
  min-width: 0;
}

.worklog-history-page .wlh-hero-main .page-hero-icon {
  margin: 0;
}

.worklog-history-page .wlh-hero-copy,
.worklog-history-page .wlh-range-summary {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.worklog-history-page .page-title,
.worklog-history-page .page-subtitle,
.worklog-history-page .section-title,
.worklog-history-page .section-subtitle {
  margin: 0;
}

.worklog-history-page .wlh-hero-aside {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-3);
  min-width: 240px;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.worklog-history-page .wlh-aside-label {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.worklog-history-page .wlh-section-head,
.worklog-history-page .wlh-records-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.worklog-history-page .wlh-section-head {
  justify-content: flex-start;
}

.worklog-history-page .wlh-section-head > div,
.worklog-history-page .wlh-records-head > div {
  min-width: 0;
}

.worklog-history-page .wlh-filter-card,
.worklog-history-page .wlh-summary-section,
.worklog-history-page .wlh-records-section {
  padding: var(--space-5);
}

.worklog-history-page .wlh-filter-panel {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.worklog-history-page .wlh-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.worklog-history-page .wlh-filter-grid .form-field {
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
}

.worklog-history-page .wlh-filter-grid input,
.worklog-history-page .wlh-filter-grid select {
  width: 100%;
  min-width: 0;
}

.worklog-history-page .wlh-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.worklog-history-page .wlh-filter-actions .btn {
  min-width: 132px;
}

.worklog-history-page .wlh-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.worklog-history-page .wlh-metric-grid .metric-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  min-height: 132px;
  box-shadow: none;
}

.worklog-history-page .wlh-metric-grid .metric-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.worklog-history-page .wlh-metric-grid .metric-label {
  min-width: 0;
  color: var(--text-soft);
  font-weight: 700;
}

.worklog-history-page .wlh-metric-grid .metric-value {
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1;
}

.worklog-history-page .wlh-records-head {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.worklog-history-page .wlh-records-head .badge-soft {
  flex: 0 0 auto;
}

.worklog-history-page .wlh-table-wrapper {
  margin-top: var(--space-3);
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.worklog-history-page .wlh-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.worklog-history-page .wlh-table th,
.worklog-history-page .wlh-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
}

.worklog-history-page .wlh-table th {
  background: var(--surface-muted);
  color: var(--text-soft);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.worklog-history-page .wlh-table tbody tr:last-child td {
  border-bottom: 0;
}

.worklog-history-page .wlh-time-pair {
  display: grid;
  gap: var(--space-1);
  white-space: nowrap;
}

.worklog-history-page .wlh-summary-cell {
  min-width: 220px;
  max-width: 420px;
  overflow-wrap: anywhere;
}

.worklog-history-page .wlh-action-cell {
  text-align: right;
  white-space: nowrap;
}

.worklog-history-page .wlh-status {
  white-space: nowrap;
  box-shadow: none;
}

.worklog-history-page .wlh-empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-7) var(--space-4);
  border: 1px dashed var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-muted);
  text-align: center;
  box-shadow: none;
}

@media (max-width: 1000px) {
  .worklog-history-page .wlh-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .worklog-history-page .wlh-hero {
    grid-template-columns: 1fr;
    padding: var(--space-5);
  }

  .worklog-history-page .wlh-hero-aside {
    min-width: 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--border-soft);
    border-left: 0;
  }

  .worklog-history-page .wlh-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .worklog-history-page .wlh-filter-grid .form-field:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .worklog-history-page .wlh-table-wrapper {
    overflow: visible;
  }

  .worklog-history-page .wlh-table,
  .worklog-history-page .wlh-table tbody,
  .worklog-history-page .wlh-table tr,
  .worklog-history-page .wlh-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .worklog-history-page .wlh-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .worklog-history-page .wlh-table tbody {
    display: grid;
    gap: var(--space-3);
  }

  .worklog-history-page .wlh-table tr {
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface);
  }

  .worklog-history-page .wlh-table td {
    display: grid;
    grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    white-space: normal;
  }

  .worklog-history-page .wlh-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: 700;
  }

  .worklog-history-page .wlh-table td:last-child {
    padding-top: var(--space-3);
    border-bottom: 0;
  }

  .worklog-history-page .wlh-action-cell .btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .worklog-history-page .wlh-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .worklog-history-page .wlh-tabs .btn {
    width: 100%;
  }

  .worklog-history-page .wlh-tabs .btn:nth-child(3) {
    grid-column: 1 / -1;
  }

  .worklog-history-page .wlh-hero-main {
    grid-template-columns: 1fr;
  }

  .worklog-history-page .wlh-filter-card,
  .worklog-history-page .wlh-summary-section,
  .worklog-history-page .wlh-records-section {
    padding: var(--space-4);
  }

  .worklog-history-page .wlh-filter-grid,
  .worklog-history-page .wlh-metric-grid {
    grid-template-columns: 1fr;
  }

  .worklog-history-page .wlh-filter-grid .form-field:last-child {
    grid-column: auto;
  }

  .worklog-history-page .wlh-filter-actions,
  .worklog-history-page .wlh-records-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .worklog-history-page .wlh-filter-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .worklog-history-page .wlh-records-head .badge-soft {
    justify-self: start;
  }

  .worklog-history-page .wlh-table td {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

@media not all {
/* Legacy Worklog team shared alignment retained inactive for migration reference. */
.worklog-team-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.worklog-team-page .page-head.page-hero,
.worklog-team-page .filter-bar.section-card,
.worklog-team-page .print-report-head.section-card,
.worklog-team-page .table-wrap.section-card,
.worklog-team-page .detail-card.section-card,
.worklog-team-page .stat-card.metric-card,
.worklog-team-page .detail-box.content-box,
.worklog-team-page .item-card.record-card,
.worklog-team-page .review-form.content-box {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.worklog-team-page .page-head.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
}

.worklog-team-page .page-title,
.worklog-team-page .page-subtitle,
.worklog-team-page .print-report-head h1,
.worklog-team-page .print-report-head p,
.worklog-team-page .filter-intro h2,
.worklog-team-page .filter-intro p {
  margin: 0;
}

.worklog-team-page .muted {
  color: var(--text-muted);
}

.worklog-team-page .worklog-tabs.action-row,
.worklog-team-page .page-actions.page-hero-aside,
.worklog-team-page .filter-actions.action-row,
.worklog-team-page .print-meta.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.worklog-team-page .page-actions.page-hero-aside {
  justify-content: flex-end;
}

.worklog-team-page .worklog-tabs a {
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--text-soft);
}

.worklog-team-page .worklog-tabs a.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.worklog-team-page .filter-bar.filter-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.worklog-team-page .filter-intro,
.worklog-team-page .filter-bar .search-wide,
.worklog-team-page .filter-actions.form-actions {
  grid-column: 1 / -1;
}

.worklog-team-page .filter-bar .form-field,
.worklog-team-page .review-form .form-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--text-soft);
  font-weight: 700;
}

.worklog-team-page .filter-bar input,
.worklog-team-page .filter-bar select,
.worklog-team-page .review-form textarea {
  width: 100%;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.worklog-team-page .filter-bar input:focus,
.worklog-team-page .filter-bar select:focus,
.worklog-team-page .review-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.worklog-team-page .flash.alert-box {
  border-radius: var(--radius-md);
}

.worklog-team-page .stat-grid.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.worklog-team-page .stat-card.metric-card {
  min-height: 92px;
  padding: var(--space-4);
  background: var(--surface-subtle);
}

.worklog-team-page .stat-card.metric-card.warn,
.worklog-team-page .stat-card.metric-card.is-warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.worklog-team-page .stat-card.metric-card strong {
  color: var(--text-strong);
  font-size: 1.5rem;
  line-height: 1.1;
}

.worklog-team-page .team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.95fr);
  gap: var(--space-4);
  align-items: start;
}

.worklog-team-page .team-grid.print-layout {
  grid-template-columns: 1fr;
}

.worklog-team-page .table-wrap.table-wrapper {
  overflow: auto;
}

.worklog-team-page .table th {
  background: var(--surface-muted);
  color: var(--text-soft);
}

.worklog-team-page .table th,
.worklog-team-page .table td {
  border-bottom-color: var(--border-soft);
  vertical-align: top;
}

.worklog-team-page .status.badge-soft {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.worklog-team-page .status.badge-soft.submitted {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.worklog-team-page .status.badge-soft.reviewed {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.worklog-team-page .status.badge-soft.returned {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.worklog-team-page .status.badge-soft.draft {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.worklog-team-page .status.badge-soft.missing {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.worklog-team-page .detail-card.section-card {
  display: grid;
  gap: var(--space-3);
}

.worklog-team-page .detail-card h2 {
  margin: 0;
  color: var(--text-strong);
}

.worklog-team-page .detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.worklog-team-page .detail-meta > div,
.worklog-team-page .detail-box.content-box,
.worklog-team-page .item-card.record-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.worklog-team-page .detail-meta > div {
  padding: var(--space-3);
}

.worklog-team-page .detail-box.content-box,
.worklog-team-page .review-form.content-box {
  padding: var(--space-4);
}

.worklog-team-page .detail-box.content-box p {
  margin: var(--space-2) 0 0;
}

.worklog-team-page .item-card.record-card {
  padding: var(--space-3);
  box-shadow: none;
}

.worklog-team-page .review-form.content-box {
  display: grid;
  gap: var(--space-3);
  background: var(--surface-subtle);
}

.worklog-team-page .empty.empty-state,
.worklog-team-page .table td.empty.empty-state {
  color: var(--text-muted);
  text-align: center;
}

.worklog-team-page .btn,
.worklog-team-page a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

.worklog-team-page .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.worklog-team-page .btn-secondary,
.worklog-team-page a.btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.worklog-team-page .btn-success {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--surface);
}

.worklog-team-page .btn-danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--surface);
}

@media (max-width: 980px) {
  .worklog-team-page .page-head.page-hero,
  .worklog-team-page .team-grid,
  .worklog-team-page .stat-grid.metric-grid,
  .worklog-team-page .detail-meta {
    grid-template-columns: 1fr;
  }

  .worklog-team-page .filter-bar.filter-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .worklog-team-page .page-actions.page-hero-aside,
  .worklog-team-page .page-actions .btn,
  .worklog-team-page .filter-actions.action-row,
  .worklog-team-page .filter-actions .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .worklog-team-page.page-stack {
    gap: var(--space-3);
  }

  .worklog-team-page .filter-bar.filter-panel {
    grid-template-columns: 1fr;
  }

  .worklog-team-page .page-head.page-hero,
  .worklog-team-page .filter-bar.section-card,
  .worklog-team-page .detail-card.section-card {
    padding: var(--space-4);
  }
}

@media print {
  .worklog-team-page .card,
  .worklog-team-page .stat-card.metric-card,
  .worklog-team-page .detail-box.content-box,
  .worklog-team-page .item-card.record-card {
    border-color: var(--border-muted);
    box-shadow: none;
  }

  .worklog-team-page .table-wrap.table-wrapper {
    overflow: visible;
  }
}
}

/* Worklog team page: centralized responsive layout. */
.worklog-team-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.worklog-team-page .wlt-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: start;
  gap: var(--space-2);
  padding: var(--space-2);
}

.worklog-team-page .wlt-tabs .btn {
  min-width: 132px;
}

.worklog-team-page .wlt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, auto);
  align-items: center;
  gap: var(--space-5);
}

.worklog-team-page .wlt-hero-main {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.worklog-team-page .wlt-hero-copy,
.worklog-team-page .wlt-section-head > div,
.worklog-team-page .wlt-subsection-head > div {
  min-width: 0;
}

.worklog-team-page .wlt-hero-aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  min-width: 0;
}

.worklog-team-page .wlt-scope-summary {
  display: grid;
  gap: var(--space-1);
  min-width: 210px;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.worklog-team-page .wlt-scope-summary span,
.worklog-team-page .wlt-aside-label {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.worklog-team-page .wlt-filter-card,
.worklog-team-page .wlt-summary-section,
.worklog-team-page .wlt-records-section,
.worklog-team-page .wlt-detail-panel {
  display: grid;
  gap: var(--space-4);
}

.worklog-team-page .wlt-section-head,
.worklog-team-page .wlt-records-head,
.worklog-team-page .wlt-detail-head,
.worklog-team-page .wlt-subsection-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.worklog-team-page .wlt-section-head {
  justify-content: flex-start;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.worklog-team-page .wlt-section-head .action-icon {
  flex: 0 0 auto;
}

.worklog-team-page .wlt-filter-panel {
  display: grid;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.worklog-team-page .wlt-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.worklog-team-page .wlt-filter-grid .form-field {
  min-width: 0;
}

.worklog-team-page .wlt-user-field,
.worklog-team-page .wlt-search-field {
  grid-column: span 2;
}

.worklog-team-page .wlt-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.worklog-team-page .wlt-filter-actions .btn {
  min-width: 132px;
}

.worklog-team-page .wlt-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.worklog-team-page .wlt-metric-grid .metric-card {
  min-width: 0;
  min-height: 132px;
}

.worklog-team-page .wlt-metric-grid .metric-sub {
  overflow-wrap: anywhere;
}

.worklog-team-page .wlt-records-head {
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.worklog-team-page .wlt-team-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.worklog-team-page .wlt-team-layout.has-detail {
  grid-template-columns: minmax(0, 1.45fr) minmax(360px, .95fr);
}

.worklog-team-page .wlt-table-wrapper {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.worklog-team-page .wlt-table {
  min-width: 860px;
  margin: 0;
}

.worklog-team-page .wlt-table th,
.worklog-team-page .wlt-table td {
  vertical-align: top;
}

.worklog-team-page .wlt-table th {
  white-space: nowrap;
}

.worklog-team-page .wlt-employee-meta,
.worklog-team-page .wlt-mode-time,
.worklog-team-page .wlt-item-meta {
  display: grid;
  gap: var(--space-1);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.worklog-team-page .wlt-mode-time strong {
  color: var(--text-strong);
}

.worklog-team-page .wlt-summary-cell {
  max-width: 340px;
  overflow-wrap: anywhere;
}

.worklog-team-page .wlt-action-cell {
  white-space: nowrap;
}

.worklog-team-page .wlt-action-cell .btn {
  min-width: 118px;
}

.worklog-team-page .wlt-detail-panel {
  position: sticky;
  top: var(--space-4);
  min-width: 0;
  padding: var(--space-4);
}

.worklog-team-page .wlt-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.worklog-team-page .wlt-detail-meta > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.worklog-team-page .wlt-detail-meta span {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.worklog-team-page .wlt-detail-meta strong {
  overflow-wrap: anywhere;
}

.worklog-team-page .wlt-detail-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.worklog-team-page .wlt-detail-block,
.worklog-team-page .wlt-review-form {
  padding: var(--space-3);
  border-color: var(--border-soft);
  background: var(--surface-subtle);
  box-shadow: none;
}

.worklog-team-page .wlt-detail-block.is-wide {
  grid-column: 1 / -1;
}

.worklog-team-page .wlt-detail-block p,
.worklog-team-page .wlt-item-card p,
.worklog-team-page .wlt-subsection-head p {
  margin: var(--space-2) 0 0;
  overflow-wrap: anywhere;
}

.worklog-team-page .wlt-items-section,
.worklog-team-page .wlt-review-form {
  display: grid;
  gap: var(--space-3);
}

.worklog-team-page .wlt-subsection-head {
  align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}

.worklog-team-page .wlt-subsection-head h3 {
  margin: 0;
  font-size: var(--font-size-lg);
}

.worklog-team-page .wlt-item-list {
  gap: var(--space-2);
}

.worklog-team-page .wlt-item-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-color: var(--border-soft);
  box-shadow: none;
}

.worklog-team-page .wlt-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.worklog-team-page .wlt-empty-state {
  min-height: 180px;
}

@media (max-width: 1100px) {
  .worklog-team-page .wlt-team-layout.has-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .worklog-team-page .wlt-detail-panel {
    position: static;
  }
}

@media (max-width: 900px) {
  .worklog-team-page .wlt-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .worklog-team-page .wlt-hero-aside {
    justify-content: flex-start;
  }

  .worklog-team-page .wlt-filter-grid,
  .worklog-team-page .wlt-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .worklog-team-page .wlt-user-field,
  .worklog-team-page .wlt-search-field {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .worklog-team-page .wlt-table-wrapper {
    overflow: visible;
    border: 0;
  }

  .worklog-team-page .wlt-table,
  .worklog-team-page .wlt-table tbody,
  .worklog-team-page .wlt-table tr,
  .worklog-team-page .wlt-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .worklog-team-page .wlt-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .worklog-team-page .wlt-table tbody {
    display: grid;
    gap: var(--space-3);
  }

  .worklog-team-page .wlt-table tr {
    padding: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .worklog-team-page .wlt-table td {
    display: grid;
    grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    overflow-wrap: anywhere;
  }

  .worklog-team-page .wlt-table td:last-child {
    border-bottom: 0;
  }

  .worklog-team-page .wlt-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: 700;
  }

  .worklog-team-page .wlt-summary-cell {
    max-width: none;
  }

  .worklog-team-page .wlt-action-cell .btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .worklog-team-page.page-stack {
    gap: var(--space-3);
  }

  .worklog-team-page .wlt-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .worklog-team-page .wlt-tabs .btn {
    min-width: 0;
    width: 100%;
  }

  .worklog-team-page .wlt-tabs .btn:last-child {
    grid-column: 1 / -1;
  }

  .worklog-team-page .wlt-hero,
  .worklog-team-page .wlt-filter-card,
  .worklog-team-page .wlt-summary-section,
  .worklog-team-page .wlt-records-section,
  .worklog-team-page .wlt-detail-panel {
    padding: var(--space-4);
  }

  .worklog-team-page .wlt-hero-main,
  .worklog-team-page .wlt-hero-aside,
  .worklog-team-page .wlt-section-head,
  .worklog-team-page .wlt-records-head,
  .worklog-team-page .wlt-detail-head {
    align-items: flex-start;
  }

  .worklog-team-page .wlt-hero-main {
    gap: var(--space-3);
  }

  .worklog-team-page .wlt-hero-aside,
  .worklog-team-page .wlt-section-head,
  .worklog-team-page .wlt-records-head,
  .worklog-team-page .wlt-detail-head {
    flex-direction: column;
  }

  .worklog-team-page .wlt-scope-summary,
  .worklog-team-page .wlt-hero-aside .btn,
  .worklog-team-page .wlt-detail-head .btn {
    width: 100%;
  }

  .worklog-team-page .wlt-filter-grid,
  .worklog-team-page .wlt-metric-grid,
  .worklog-team-page .wlt-detail-meta,
  .worklog-team-page .wlt-detail-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .worklog-team-page .wlt-detail-block.is-wide {
    grid-column: auto;
  }

  .worklog-team-page .wlt-filter-actions,
  .worklog-team-page .wlt-review-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .worklog-team-page .wlt-filter-actions .btn,
  .worklog-team-page .wlt-review-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .worklog-team-page .wlt-table td {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

@media print {
  .worklog-team-page.page-stack {
    gap: var(--space-3);
  }

  .worklog-team-page .wlt-records-section {
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .worklog-team-page .wlt-table-wrapper {
    overflow: visible;
    border: 0;
  }

  .worklog-team-page .wlt-table {
    min-width: 0;
  }
}

/* E-Doc list shared component alignment. */
.edoc-list-wrap.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.edoc-list-wrap .edoc-list-hero.page-hero,
.edoc-list-wrap .edoc-filter-card.section-card,
.edoc-list-wrap .edoc-list-panel.section-card,
.edoc-list-wrap .edoc-item-card.record-card,
.edoc-list-wrap .edoc-list-modal-card.modal-card,
.edoc-list-wrap .edoc-list-detail-grid.content-box {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.edoc-list-wrap .edoc-list-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.edoc-list-wrap .page-title,
.edoc-list-wrap .edoc-list-modal-title.modal-title {
  margin: 0;
  color: var(--text-strong);
}

.edoc-list-wrap .flash.alert-box {
  border-radius: var(--radius-md);
}

.edoc-list-wrap .edoc-filter-card.filter-panel {
  padding: var(--space-4);
}

.edoc-list-wrap .edoc-filter-grid.filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.edoc-list-wrap .edoc-filter-grid .field.form-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.edoc-list-wrap .edoc-filter-grid .field.project,
.edoc-list-wrap .edoc-filter-grid .filter-actions.form-actions {
  grid-column: 1 / -1;
}

.edoc-list-wrap .edoc-filter-grid label,
.edoc-list-wrap .edoc-list-edit-form .form-field {
  color: var(--text-soft);
  font-weight: 800;
}

.edoc-list-wrap .edoc-filter-grid input,
.edoc-list-wrap .edoc-filter-grid select,
.edoc-list-wrap .edoc-list-edit-form input,
.edoc-list-wrap .edoc-list-edit-form select,
.edoc-list-wrap .edoc-list-edit-form textarea {
  width: 100%;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.edoc-list-wrap .edoc-filter-grid input:focus,
.edoc-list-wrap .edoc-filter-grid select:focus,
.edoc-list-wrap .edoc-list-edit-form input:focus,
.edoc-list-wrap .edoc-list-edit-form select:focus,
.edoc-list-wrap .edoc-list-edit-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.edoc-list-wrap .edoc-list-toolbar.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.edoc-list-wrap .edoc-list-actions.action-row,
.edoc-list-wrap .edoc-view-switch.action-row,
.edoc-list-wrap .filter-actions.action-row,
.edoc-list-wrap .edoc-row-actions.action-row,
.edoc-list-wrap .edoc-item-actions.action-row,
.edoc-list-wrap .edoc-list-edit-actions.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.edoc-list-wrap .edoc-list-count.badge-soft {
  width: fit-content;
}

.edoc-list-wrap .table-wrap.table-wrapper {
  overflow: auto;
}

.edoc-list-wrap .nice-table th {
  background: var(--surface-muted);
  color: var(--text-soft);
}

.edoc-list-wrap .nice-table th,
.edoc-list-wrap .nice-table td {
  border-bottom-color: var(--border-soft);
  vertical-align: top;
}

.edoc-list-wrap .edoc-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.edoc-list-wrap .edoc-item-card.record-card {
  border-left: var(--space-1) solid var(--border-muted);
  background: var(--surface);
}

.edoc-list-wrap .edoc-item-card.record-card.priority-normal {
  border-left-color: var(--color-success);
}

.edoc-list-wrap .edoc-item-card.record-card.priority-urgent {
  border-left-color: var(--color-warning);
}

.edoc-list-wrap .edoc-item-card.record-card.priority-very-urgent {
  border-left-color: var(--color-info);
}

.edoc-list-wrap .edoc-item-card.record-card.priority-most-urgent {
  border-left-color: var(--color-danger);
}

.edoc-list-wrap .edoc-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.edoc-list-wrap .edoc-item-receive,
.edoc-list-wrap .edoc-item-subject {
  color: var(--text-strong);
  font-weight: 900;
}

.edoc-list-wrap .edoc-item-date,
.edoc-list-wrap .edoc-item-meta {
  color: var(--text-muted);
}

.edoc-list-wrap .edoc-item-meta {
  display: grid;
  gap: var(--space-2);
}

.edoc-list-wrap .status-badge.badge-soft {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.edoc-list-wrap .status-badge.badge-soft.status-approved {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.edoc-list-wrap .status-badge.badge-soft.status-pending {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.edoc-list-wrap .status-badge.badge-soft.status-danger,
.edoc-list-wrap .status-badge.badge-soft.status-rejected {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.edoc-list-wrap .edoc-table-empty.empty-state,
.edoc-list-wrap .edoc-list-empty.empty-state {
  color: var(--text-muted);
  text-align: center;
}

.edoc-list-wrap .edoc-list-modal.modal-backdrop {
  background: color-mix(in srgb, var(--text-strong) 48%, transparent);
}

.edoc-list-wrap .edoc-list-modal-card.modal-card {
  width: min(760px, 94vw);
  max-height: 88vh;
  overflow: auto;
}

.edoc-list-wrap .edoc-list-modal-card.modal-card.is-wide {
  width: min(980px, 94vw);
}

.edoc-list-wrap .edoc-list-modal-head.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.edoc-list-wrap .edoc-list-detail-grid.content-box {
  display: grid;
  grid-template-columns: minmax(130px, 0.36fr) minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4);
  background: var(--surface-subtle);
  box-shadow: none;
}

.edoc-list-wrap .edoc-list-prewrap {
  white-space: pre-wrap;
}

.edoc-list-wrap .edoc-list-edit-form.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.edoc-list-wrap .edoc-list-edit-form .form-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.edoc-list-wrap .edoc-list-form-full.form-field,
.edoc-list-wrap .edoc-list-edit-actions.form-actions {
  grid-column: 1 / -1;
}

.edoc-list-wrap .btn,
.edoc-list-wrap a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

.edoc-list-wrap .btn-primary,
.edoc-list-wrap .edoc-view-switch .btn.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.edoc-list-wrap .btn-secondary,
.edoc-list-wrap a.btn-secondary,
.edoc-list-wrap .btn-danger-soft {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.edoc-list-wrap .btn-success {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--surface);
}

.edoc-list-wrap .btn-warning {
  border-color: var(--color-warning);
  background: var(--color-warning);
  color: var(--surface);
}

.edoc-list-wrap .btn-danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--surface);
}

@media (max-width: 980px) {
  .edoc-list-wrap .edoc-filter-grid.filter-grid,
  .edoc-list-wrap .edoc-list-grid,
  .edoc-list-wrap .edoc-list-edit-form.filter-grid {
    grid-template-columns: 1fr;
  }

  .edoc-list-wrap .edoc-list-toolbar.section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .edoc-list-wrap .edoc-list-actions.action-row,
  .edoc-list-wrap .edoc-list-actions .btn,
  .edoc-list-wrap .filter-actions.action-row,
  .edoc-list-wrap .filter-actions .btn,
  .edoc-list-wrap .edoc-row-actions.action-row,
  .edoc-list-wrap .edoc-row-actions .btn,
  .edoc-list-wrap .edoc-item-actions.action-row,
  .edoc-list-wrap .edoc-item-actions .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .edoc-list-wrap.page-stack {
    gap: var(--space-3);
  }

  .edoc-list-wrap .edoc-list-hero.page-hero,
  .edoc-list-wrap .edoc-filter-card.section-card,
  .edoc-list-wrap .edoc-list-panel.section-card,
  .edoc-list-wrap .edoc-list-modal-card.modal-card {
    padding: var(--space-4);
  }

  .edoc-list-wrap .edoc-list-detail-grid.content-box {
    grid-template-columns: 1fr;
  }
}
/* E-Doc dashboard shared component alignment. */
.edoc-dash.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.edoc-dash .edoc-head.page-hero,
.edoc-dash .edoc-card.section-card,
.edoc-dash .edoc-kpi.metric-card,
.edoc-dash .edoc-pcard.metric-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.edoc-dash .edoc-head.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
}

.edoc-dash .page-title,
.edoc-dash .page-subtitle,
.edoc-dash .edoc-card h3,
.edoc-dash .edoc-pcard h4 {
  margin: 0;
}

.edoc-dash .page-subtitle,
.edoc-dash .edoc-muted {
  color: var(--text-muted);
}

.edoc-dash .edoc-actions-top.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.edoc-dash .edoc-kpis.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.edoc-dash .edoc-kpi.metric-card,
.edoc-dash .edoc-pcard.metric-card {
  min-height: 104px;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.edoc-dash .edoc-kpi.metric-card {
  background: var(--surface-subtle);
}

.edoc-dash .edoc-kpi.metric-card.is-warning,
.edoc-dash .edoc-pcard.metric-card.is-warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.edoc-dash .edoc-kpi.metric-card.is-info,
.edoc-dash .edoc-pcard.metric-card.is-info {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.edoc-dash .edoc-pcard.metric-card.is-success {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.edoc-dash .edoc-pcard.metric-card.is-danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.edoc-dash .edoc-kpi-label,
.edoc-dash .edoc-pcard h4 {
  color: var(--text-soft);
  font-weight: 800;
}

.edoc-dash .edoc-kpi-value,
.edoc-dash .edoc-pcard .count {
  color: var(--text-strong);
  font-size: 1.6rem;
  line-height: 1.1;
  font-weight: 900;
}

.edoc-dash .edoc-priority-cards.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.edoc-dash .edoc-card.section-card {
  padding: var(--space-4);
}

.edoc-dash .edoc-grid-2.section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.edoc-dash .table-wrap.table-wrapper {
  overflow: auto;
  margin-top: var(--space-3);
}

.edoc-dash .nice-table th {
  background: var(--surface-muted);
  color: var(--text-soft);
}

.edoc-dash .nice-table th,
.edoc-dash .nice-table td {
  border-bottom-color: var(--border-soft);
  vertical-align: top;
}

.edoc-dash .edoc-pill.badge-soft {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.edoc-dash .edoc-pill.badge-soft.priority-normal,
.edoc-dash .edoc-pill.badge-soft.status-done {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.edoc-dash .edoc-pill.badge-soft.priority-urgent,
.edoc-dash .edoc-pill.badge-soft.status-pending {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.edoc-dash .edoc-pill.badge-soft.priority-very_urgent,
.edoc-dash .edoc-pill.badge-soft.status-in_progress {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.edoc-dash .edoc-pill.badge-soft.priority-most_urgent {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.edoc-dash .edoc-muted.badge-soft,
.edoc-dash .empty-state {
  color: var(--text-muted);
}

.edoc-dash .empty-state {
  text-align: center;
}

.edoc-dash .edoc-follow-form.action-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(180px, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
}

.edoc-dash .edoc-follow-form select,
.edoc-dash .edoc-follow-form input {
  width: 100%;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.edoc-dash .edoc-follow-form select:focus,
.edoc-dash .edoc-follow-form input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.edoc-dash .btn,
.edoc-dash a.btn,
.edoc-dash .edoc-pcard a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

.edoc-dash .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.edoc-dash .btn-secondary,
.edoc-dash a.btn-secondary,
.edoc-dash .edoc-pcard a {
  border: 1px solid var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

@media (max-width: 1100px) {
  .edoc-dash .edoc-priority-cards.metric-grid,
  .edoc-dash .edoc-grid-2.section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .edoc-dash .edoc-follow-form.action-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .edoc-dash.page-stack {
    gap: var(--space-3);
  }

  .edoc-dash .edoc-head.page-hero,
  .edoc-dash .edoc-kpis.metric-grid,
  .edoc-dash .edoc-priority-cards.metric-grid,
  .edoc-dash .edoc-grid-2.section-grid {
    grid-template-columns: 1fr;
  }

  .edoc-dash .edoc-actions-top.action-row,
  .edoc-dash .edoc-actions-top .btn,
  .edoc-dash .edoc-follow-form .btn,
  .edoc-dash .edoc-action-btn.btn {
    width: 100%;
  }

  .edoc-dash .edoc-head.page-hero,
  .edoc-dash .edoc-card.section-card {
    padding: var(--space-4);
  }
}
/* E-Doc create shared component alignment. */
.edoc-create-wrap.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.edoc-create-wrap .edoc-create-card.section-card,
.edoc-create-wrap .edoc-head.page-hero,
.edoc-create-wrap .edoc-section.section-card,
.edoc-create-wrap .edoc-project-picker.content-box,
.edoc-create-wrap .edoc-forward-picker.content-box,
.edoc-create-wrap .edoc-file-wrap.content-box,
.edoc-create-wrap .edoc-project-list.content-box,
.edoc-create-wrap .edoc-forward-list.content-box {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.edoc-create-wrap .edoc-create-card.section-card {
  padding: var(--space-4);
}

.edoc-create-wrap .edoc-form {
  display: grid;
  gap: var(--space-4);
}

.edoc-create-wrap .edoc-head.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-4);
}

.edoc-create-wrap .page-title,
.edoc-create-wrap .page-subtitle,
.edoc-create-wrap .edoc-section-title.section-title,
.edoc-create-wrap .edoc-section-note.page-subtitle {
  margin: 0;
}

.edoc-create-wrap .page-subtitle,
.edoc-create-wrap .edoc-section-note.page-subtitle {
  color: var(--text-muted);
}

.edoc-create-wrap .edoc-required.badge-soft {
  align-self: start;
  white-space: nowrap;
}

.edoc-create-wrap .edoc-section.section-card {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.edoc-create-wrap .edoc-section-head.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.edoc-create-wrap .edoc-section-num.badge-soft {
  min-width: 32px;
  justify-content: center;
}

.edoc-create-wrap .edoc-grid-3.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.edoc-create-wrap .edoc-span-2.form-field {
  grid-column: span 2;
}

.edoc-create-wrap .edoc-span-3.form-field {
  grid-column: 1 / -1;
}

.edoc-create-wrap .form-field,
.edoc-create-wrap .edoc-form label {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--text-soft);
  font-weight: 800;
}

.edoc-create-wrap .edoc-form input,
.edoc-create-wrap .edoc-form select,
.edoc-create-wrap .edoc-form textarea {
  width: 100%;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.edoc-create-wrap .edoc-form input:focus,
.edoc-create-wrap .edoc-form select:focus,
.edoc-create-wrap .edoc-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.edoc-create-wrap .edoc-form input[readonly] {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.edoc-create-wrap .edoc-project-picker.content-box,
.edoc-create-wrap .edoc-forward-picker.content-box,
.edoc-create-wrap .edoc-file-wrap.content-box {
  padding: var(--space-3);
  background: var(--surface-subtle);
  box-shadow: none;
}

.edoc-create-wrap .edoc-project-input-row.action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.edoc-create-wrap .edoc-project-list.content-box,
.edoc-create-wrap .edoc-forward-list.content-box {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

.edoc-create-wrap .edoc-project-item,
.edoc-create-wrap .edoc-project-empty,
.edoc-create-wrap .edoc-forward-item,
.edoc-create-wrap .edoc-forward-empty {
  color: var(--text-strong);
}

.edoc-create-wrap .edoc-project-item small,
.edoc-create-wrap .edoc-file-meta {
  color: var(--text-muted);
}

.edoc-create-wrap .edoc-file-wrap.content-box {
  cursor: pointer;
}

.edoc-create-wrap .edoc-file-icon {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

.edoc-create-wrap .edoc-file-title {
  color: var(--text-strong);
}

.edoc-create-wrap .edoc-actions.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.edoc-create-wrap .btn,
.edoc-create-wrap a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

.edoc-create-wrap .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.edoc-create-wrap .btn-secondary,
.edoc-create-wrap a.btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.edoc-create-wrap .flash.alert-box {
  border-radius: var(--radius-md);
}

@media (max-width: 980px) {
  .edoc-create-wrap .edoc-head.page-hero,
  .edoc-create-wrap .edoc-grid-3.filter-grid {
    grid-template-columns: 1fr;
  }

  .edoc-create-wrap .edoc-span-2.form-field,
  .edoc-create-wrap .edoc-span-3.form-field {
    grid-column: auto;
  }

  .edoc-create-wrap .edoc-required.badge-soft {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .edoc-create-wrap.page-stack {
    gap: var(--space-3);
  }

  .edoc-create-wrap .edoc-create-card.section-card,
  .edoc-create-wrap .edoc-head.page-hero,
  .edoc-create-wrap .edoc-section.section-card {
    padding: var(--space-4);
  }

  .edoc-create-wrap .edoc-project-input-row.action-row,
  .edoc-create-wrap .edoc-actions.action-row,
  .edoc-create-wrap .edoc-actions .btn {
    width: 100%;
    grid-template-columns: 1fr;
  }
}
/* E-Doc logs shared component alignment. */
.edoc-logs-shell.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.edoc-logs-shell .edoc-logs-page-head.page-hero,
.edoc-logs-shell .edoc-logs-filter-card.section-card,
.edoc-logs-shell .edoc-logs-list-card.section-card,
.edoc-logs-shell .edoc-logs-summary-card.metric-card,
.edoc-logs-shell .edoc-log-entry.record-card,
.edoc-logs-shell .edoc-log-detail-card.content-box {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.edoc-logs-shell .edoc-logs-page-head.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.edoc-logs-shell .page-title,
.edoc-logs-shell .page-subtitle,
.edoc-logs-shell .edoc-logs-list-title.section-title,
.edoc-logs-shell .edoc-logs-list-subtitle.page-subtitle {
  margin: 0;
}

.edoc-logs-shell .page-subtitle,
.edoc-logs-shell .edoc-logs-list-subtitle.page-subtitle,
.edoc-logs-shell .edoc-log-request-meta,
.edoc-logs-shell .edoc-logs-summary-copy {
  color: var(--text-muted);
}

.edoc-logs-shell .edoc-logs-filter-card.filter-panel {
  padding: var(--space-4);
}

.edoc-logs-shell .edoc-logs-filter-grid.filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr) auto auto;
  gap: var(--space-3);
  align-items: end;
}

.edoc-logs-shell .edoc-logs-field.form-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.edoc-logs-shell .edoc-logs-label {
  color: var(--text-soft);
  font-weight: 800;
}

.edoc-logs-shell .edoc-logs-field input,
.edoc-logs-shell .edoc-logs-field select {
  width: 100%;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.edoc-logs-shell .edoc-logs-field input:focus,
.edoc-logs-shell .edoc-logs-field select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.edoc-logs-shell .edoc-logs-action-pills.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.edoc-logs-shell .edoc-logs-action-pill.badge-soft {
  text-decoration: none;
}

.edoc-logs-shell .edoc-logs-action-pill.badge-soft.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

.edoc-logs-shell .edoc-logs-action-pill-count.badge-soft {
  min-width: 28px;
  justify-content: center;
}

.edoc-logs-shell .edoc-logs-summary-grid.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.edoc-logs-shell .edoc-logs-summary-card.metric-card {
  min-height: 110px;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  background: var(--surface-subtle);
}

.edoc-logs-shell .edoc-logs-summary-label {
  color: var(--text-soft);
  font-weight: 800;
}

.edoc-logs-shell .edoc-logs-summary-value {
  color: var(--text-strong);
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 900;
}

.edoc-logs-shell .edoc-logs-summary-value-compact {
  font-size: 1.05rem;
  line-height: 1.35;
}

.edoc-logs-shell .edoc-logs-list-card.section-card {
  padding: var(--space-4);
}

.edoc-logs-shell .edoc-logs-list-head.section-head,
.edoc-logs-shell .edoc-log-entry-head.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.edoc-logs-shell .edoc-logs-list-head.section-head {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.edoc-logs-shell .edoc-logs-list-meta.badge-soft {
  flex: 0 0 auto;
}

.edoc-logs-shell .edoc-logs-timeline {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.edoc-logs-shell .edoc-log-entry.record-card {
  padding: var(--space-4);
}

.edoc-logs-shell .edoc-log-request {
  min-width: 0;
}

.edoc-logs-shell .edoc-log-request-no {
  color: var(--text-soft);
  font-weight: 800;
}

.edoc-logs-shell .edoc-log-request-subject {
  color: var(--text-strong);
  font-weight: 900;
}

.edoc-logs-shell .edoc-log-meta.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.edoc-logs-shell .edoc-log-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.edoc-logs-shell .edoc-log-detail-card.content-box {
  padding: var(--space-3);
  background: var(--surface-subtle);
  box-shadow: none;
}

.edoc-logs-shell .edoc-log-detail-label {
  color: var(--text-soft);
  font-weight: 800;
}

.edoc-logs-shell .edoc-log-detail-text {
  color: var(--text-strong);
}

.edoc-logs-shell .edoc-log-badge.badge-soft {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.edoc-logs-shell .edoc-log-badge.badge-soft.edoc-logs-badge-create {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

.edoc-logs-shell .edoc-log-badge.badge-soft.edoc-logs-badge-update,
.edoc-logs-shell .edoc-log-badge.badge-soft.edoc-logs-badge-progress {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.edoc-logs-shell .edoc-log-badge.badge-soft.edoc-logs-badge-pending {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.edoc-logs-shell .edoc-log-badge.badge-soft.edoc-logs-badge-done {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.edoc-logs-shell .edoc-logs-empty.empty-state {
  color: var(--text-muted);
  text-align: center;
}

.edoc-logs-shell .btn,
.edoc-logs-shell a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

.edoc-logs-shell .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.edoc-logs-shell .btn-secondary,
.edoc-logs-shell a.btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

@media (max-width: 1080px) {
  .edoc-logs-shell .edoc-logs-filter-grid.filter-grid,
  .edoc-logs-shell .edoc-logs-summary-grid.metric-grid,
  .edoc-logs-shell .edoc-log-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .edoc-logs-shell.page-stack {
    gap: var(--space-3);
  }

  .edoc-logs-shell .edoc-logs-filter-grid.filter-grid,
  .edoc-logs-shell .edoc-logs-summary-grid.metric-grid,
  .edoc-logs-shell .edoc-log-detail-grid {
    grid-template-columns: 1fr;
  }

  .edoc-logs-shell .edoc-logs-list-head.section-head,
  .edoc-logs-shell .edoc-log-entry-head.section-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .edoc-logs-shell .edoc-log-meta.action-row,
  .edoc-logs-shell .edoc-logs-filter-grid .btn,
  .edoc-logs-shell .edoc-logs-list-meta.badge-soft {
    width: 100%;
  }

  .edoc-logs-shell .edoc-logs-page-head.page-hero,
  .edoc-logs-shell .edoc-logs-filter-card.section-card,
  .edoc-logs-shell .edoc-logs-list-card.section-card,
  .edoc-logs-shell .edoc-log-entry.record-card {
    padding: var(--space-4);
  }
}
/* E-Doc edit/delete logs shared component alignment. */
.edoc-editlogs-shell.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.edoc-editlogs-shell .edoc-editlogs-page-head.page-hero,
.edoc-editlogs-shell .edoc-editlogs-filter-card.section-card,
.edoc-editlogs-shell .edoc-editlogs-list-card.section-card,
.edoc-editlogs-shell .edoc-editlogs-summary-card.metric-card,
.edoc-editlogs-shell .edoc-editlog-entry.record-card,
.edoc-editlogs-shell .edoc-editlog-detail-card.content-box {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.edoc-editlogs-shell .edoc-editlogs-page-head.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.edoc-editlogs-shell .page-title,
.edoc-editlogs-shell .page-subtitle,
.edoc-editlogs-shell .edoc-editlogs-list-title.section-title,
.edoc-editlogs-shell .edoc-editlogs-list-subtitle.page-subtitle {
  margin: 0;
}

.edoc-editlogs-shell .page-subtitle,
.edoc-editlogs-shell .edoc-editlogs-list-subtitle.page-subtitle,
.edoc-editlogs-shell .edoc-editlog-request-meta,
.edoc-editlogs-shell .edoc-editlogs-summary-copy {
  color: var(--text-muted);
}

.edoc-editlogs-shell .edoc-editlogs-filter-card.filter-panel {
  padding: var(--space-4);
}

.edoc-editlogs-shell .edoc-editlogs-filter-grid.filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr) auto auto auto;
  gap: var(--space-3);
  align-items: end;
}

.edoc-editlogs-shell .edoc-editlogs-field.form-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.edoc-editlogs-shell .edoc-editlogs-label {
  color: var(--text-soft);
  font-weight: 800;
}

.edoc-editlogs-shell .edoc-editlogs-field input,
.edoc-editlogs-shell .edoc-editlogs-field select {
  width: 100%;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.edoc-editlogs-shell .edoc-editlogs-field input:focus,
.edoc-editlogs-shell .edoc-editlogs-field select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.edoc-editlogs-shell .edoc-editlogs-action-pills.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.edoc-editlogs-shell .edoc-editlogs-action-pill.badge-soft {
  text-decoration: none;
}

.edoc-editlogs-shell .edoc-editlogs-action-pill.badge-soft.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

.edoc-editlogs-shell .edoc-editlogs-action-pill.badge-soft.is-delete.is-active {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.edoc-editlogs-shell .edoc-editlogs-action-pill-count.badge-soft {
  min-width: 28px;
  justify-content: center;
}

.edoc-editlogs-shell .edoc-editlogs-summary-grid.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.edoc-editlogs-shell .edoc-editlogs-summary-card.metric-card {
  min-height: 110px;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
  background: var(--surface-subtle);
}

.edoc-editlogs-shell .edoc-editlogs-summary-card.metric-card.is-danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.edoc-editlogs-shell .edoc-editlogs-summary-label {
  color: var(--text-soft);
  font-weight: 800;
}

.edoc-editlogs-shell .edoc-editlogs-summary-value {
  color: var(--text-strong);
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 900;
}

.edoc-editlogs-shell .edoc-editlogs-summary-value-compact {
  font-size: 1.05rem;
  line-height: 1.35;
}

.edoc-editlogs-shell .edoc-editlogs-list-card.section-card {
  padding: var(--space-4);
}

.edoc-editlogs-shell .edoc-editlogs-list-head.section-head,
.edoc-editlogs-shell .edoc-editlog-entry-head.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.edoc-editlogs-shell .edoc-editlogs-list-head.section-head {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.edoc-editlogs-shell .edoc-editlogs-list-meta.badge-soft {
  flex: 0 0 auto;
}

.edoc-editlogs-shell .edoc-editlogs-timeline {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.edoc-editlogs-shell .edoc-editlog-entry.record-card {
  padding: var(--space-4);
}

.edoc-editlogs-shell .edoc-editlog-entry.record-card.is-delete {
  border-color: var(--color-danger-border);
}

.edoc-editlogs-shell .edoc-editlog-request {
  min-width: 0;
}

.edoc-editlogs-shell .edoc-editlog-request-no {
  color: var(--text-soft);
  font-weight: 800;
}

.edoc-editlogs-shell .edoc-editlog-request-subject {
  color: var(--text-strong);
  font-weight: 900;
}

.edoc-editlogs-shell .edoc-editlog-meta.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.edoc-editlogs-shell .edoc-editlog-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.edoc-editlogs-shell .edoc-editlog-detail-card.content-box {
  padding: var(--space-3);
  background: var(--surface-subtle);
  box-shadow: none;
}

.edoc-editlogs-shell .edoc-editlog-detail-card.content-box.is-danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
}

.edoc-editlogs-shell .edoc-editlog-detail-label {
  color: var(--text-soft);
  font-weight: 800;
}

.edoc-editlogs-shell .edoc-editlog-detail-text {
  color: var(--text-strong);
}

.edoc-editlogs-shell .edoc-editlog-badge.badge-soft {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.edoc-editlogs-shell .edoc-editlog-badge.badge-soft.edoc-editlogs-badge-update {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.edoc-editlogs-shell .edoc-editlog-badge.badge-soft.edoc-editlogs-badge-delete {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.edoc-editlogs-shell .edoc-editlogs-empty.empty-state {
  color: var(--text-muted);
  text-align: center;
}

.edoc-editlogs-shell .btn,
.edoc-editlogs-shell a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

.edoc-editlogs-shell .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.edoc-editlogs-shell .btn-secondary,
.edoc-editlogs-shell a.btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.edoc-editlogs-shell .edoc-editlogs-btn-export.btn-secondary {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

@media (max-width: 1180px) {
  .edoc-editlogs-shell .edoc-editlogs-filter-grid.filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .edoc-editlogs-shell .edoc-editlogs-summary-grid.metric-grid,
  .edoc-editlogs-shell .edoc-editlog-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .edoc-editlogs-shell.page-stack {
    gap: var(--space-3);
  }

  .edoc-editlogs-shell .edoc-editlogs-filter-grid.filter-grid,
  .edoc-editlogs-shell .edoc-editlogs-summary-grid.metric-grid,
  .edoc-editlogs-shell .edoc-editlog-detail-grid {
    grid-template-columns: 1fr;
  }

  .edoc-editlogs-shell .edoc-editlogs-list-head.section-head,
  .edoc-editlogs-shell .edoc-editlog-entry-head.section-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .edoc-editlogs-shell .edoc-editlog-meta.action-row,
  .edoc-editlogs-shell .edoc-editlogs-filter-grid .btn,
  .edoc-editlogs-shell .edoc-editlogs-list-meta.badge-soft {
    width: 100%;
  }

  .edoc-editlogs-shell .edoc-editlogs-page-head.page-hero,
  .edoc-editlogs-shell .edoc-editlogs-filter-card.section-card,
  .edoc-editlogs-shell .edoc-editlogs-list-card.section-card,
  .edoc-editlogs-shell .edoc-editlog-entry.record-card {
    padding: var(--space-4);
  }
}
/* E-Doc forward departments shared component alignment. */
.edoc-forward-departments-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.edoc-forward-departments-page .page-hero,
.edoc-forward-departments-page .section-card,
.edoc-forward-departments-page .record-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.edoc-forward-departments-page .page-title,
.edoc-forward-departments-page .page-subtitle,
.edoc-forward-departments-page .edoc-fd-title {
  margin: 0;
}

.edoc-forward-departments-page .page-subtitle,
.edoc-forward-departments-page .edoc-fd-meta {
  color: var(--text-muted);
}

.edoc-forward-departments-page .edoc-fd-hero-stats.page-hero-aside,
.edoc-forward-departments-page .edoc-fd-actions.action-row,
.edoc-forward-departments-page .form-actions.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.edoc-forward-departments-page .edoc-fd-hero-stats.page-hero-aside {
  justify-content: flex-end;
}

.edoc-forward-departments-page .edoc-fd-card.section-card {
  padding: var(--space-4);
  margin-bottom: 0;
}

.edoc-forward-departments-page .section-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.edoc-forward-departments-page .edoc-fd-add-form.filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(220px, 1.1fr) minmax(120px, 0.5fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.edoc-forward-departments-page .edoc-fd-filter.filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(180px, 0.7fr) minmax(220px, 1fr);
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-3);
}

.edoc-forward-departments-page .form-field,
.edoc-forward-departments-page .edoc-fd-item .form-field,
.edoc-forward-departments-page .edoc-fd-add-form .form-field,
.edoc-forward-departments-page .edoc-fd-filter .form-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--text-soft);
  font-size: 0.88rem;
  font-weight: 800;
}

.edoc-forward-departments-page input[type="text"],
.edoc-forward-departments-page input[type="number"],
.edoc-forward-departments-page .app-choice-trigger {
  width: 100%;
  min-height: var(--btn-height);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.edoc-forward-departments-page input:focus,
.edoc-forward-departments-page .app-choice-trigger:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.edoc-forward-departments-page input[readonly] {
  background: var(--surface-muted);
  color: var(--text-muted);
}

.edoc-forward-departments-page .edoc-fd-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  font-weight: 700;
}

.edoc-forward-departments-page .edoc-fd-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.edoc-forward-departments-page .edoc-fd-group.section-card {
  overflow: hidden;
  padding: 0;
}

.edoc-forward-departments-page .edoc-fd-group > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-subtle);
  color: var(--text-strong);
  font-weight: 900;
}

.edoc-forward-departments-page .edoc-fd-group-summary-right {
  color: var(--text-muted);
}

.edoc-forward-departments-page .edoc-fd-group-count.badge-soft {
  min-width: 32px;
  justify-content: center;
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

.edoc-forward-departments-page .edoc-fd-group-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-muted);
}

.edoc-forward-departments-page .edoc-fd-item.record-card {
  padding: var(--space-3);
}

.edoc-forward-departments-page .edoc-fd-item-grid.filter-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(180px, 1.1fr) minmax(96px, 0.45fr) minmax(120px, 0.55fr) minmax(170px, 0.9fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.edoc-forward-departments-page .status-badge.badge-soft {
  min-height: var(--btn-height);
  justify-content: center;
  border-radius: var(--radius-md);
}

.edoc-forward-departments-page .status-badge.badge-soft.is-success {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.edoc-forward-departments-page .status-badge.badge-soft.is-danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.edoc-forward-departments-page .edoc-fd-actions.action-row {
  justify-content: flex-end;
}

.edoc-forward-departments-page .edoc-fd-actions .btn,
.edoc-forward-departments-page .form-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  border-radius: var(--radius-md);
  font-weight: 800;
  text-decoration: none;
}

.edoc-forward-departments-page .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.edoc-forward-departments-page .btn-danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--surface);
}

.edoc-forward-departments-page .edoc-fd-empty.empty-state {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-muted);
}

@media (max-width: 1180px) {
  .edoc-forward-departments-page .edoc-fd-add-form.filter-grid,
  .edoc-forward-departments-page .edoc-fd-filter.filter-grid,
  .edoc-forward-departments-page .edoc-fd-item-grid.filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .edoc-forward-departments-page .edoc-fd-actions.action-row,
  .edoc-forward-departments-page .form-actions.action-row {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .edoc-forward-departments-page .page-hero,
  .edoc-forward-departments-page .edoc-fd-add-form.filter-grid,
  .edoc-forward-departments-page .edoc-fd-filter.filter-grid,
  .edoc-forward-departments-page .edoc-fd-item-grid.filter-grid,
  .edoc-forward-departments-page .edoc-fd-meta,
  .edoc-forward-departments-page .edoc-fd-group > summary {
    grid-template-columns: 1fr;
  }

  .edoc-forward-departments-page .edoc-fd-meta,
  .edoc-forward-departments-page .edoc-fd-group > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .edoc-forward-departments-page .edoc-fd-hero-stats.page-hero-aside,
  .edoc-forward-departments-page .edoc-fd-actions.action-row,
  .edoc-forward-departments-page .form-actions.action-row,
  .edoc-forward-departments-page .edoc-fd-actions .btn,
  .edoc-forward-departments-page .form-actions .btn {
    width: 100%;
    justify-content: stretch;
  }

  .edoc-forward-departments-page .edoc-fd-actions .btn,
  .edoc-forward-departments-page .form-actions .btn {
    justify-content: center;
  }
}
/* Service dashboard shared component alignment. */
.service-dashboard-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.service-dashboard-page .page-hero,
.service-dashboard-page .section-card,
.service-dashboard-page .metric-card,
.service-dashboard-page .record-card,
.service-dashboard-page .content-box {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.service-dashboard-page .page-title,
.service-dashboard-page .service-section-title.section-title,
.service-dashboard-page .page-subtitle,
.service-dashboard-page .service-section-subtitle.section-subtitle {
  margin: 0;
}

.service-dashboard-page .page-hero-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.service-dashboard-page .page-hero-icon {
  flex: 0 0 auto;
}

.service-dashboard-page .service-dashboard-hero-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.service-dashboard-page .page-subtitle,
.service-dashboard-page .service-section-subtitle.section-subtitle {
  color: var(--text-muted);
}

.service-dashboard-page .service-dashboard-hero-actions.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.service-dashboard-page .service-dashboard-card.section-card {
  padding: var(--space-4);
  margin-bottom: 0;
}

.service-dashboard-page .service-kpi-grid.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.service-dashboard-page .kpi.metric-card {
  min-height: 112px;
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-4);
  background: var(--surface);
  box-shadow: none;
}

.service-dashboard-page .kpi.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--border-muted);
}

.service-dashboard-page .kpi.metric-card .metric-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-soft);
  font-weight: 800;
  min-width: 0;
}

.service-dashboard-page .kpi.metric-card .metric-head span {
  min-width: 0;
}

.service-dashboard-page .kpi.metric-card .metric-value {
  color: var(--text-strong);
  font-size: 1.65rem;
  line-height: 1.1;
  font-weight: 900;
}

.service-dashboard-page .kpi.metric-card .metric-sub {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1.45;
}

.service-dashboard-page .kpi.metric-card .metric-icon {
  flex: 0 0 auto;
}

.service-dashboard-page .kpi.metric-card.is-primary::before,
.service-dashboard-page .kpi.metric-card.is-info::before {
  background: var(--color-primary);
}

.service-dashboard-page .kpi.metric-card.is-success {
  border-color: var(--color-success-border);
}

.service-dashboard-page .kpi.metric-card.is-success::before {
  background: var(--color-success);
}

.service-dashboard-page .kpi.metric-card.is-warning {
  border-color: var(--color-warning-border);
}

.service-dashboard-page .kpi.metric-card.is-warning::before {
  background: var(--color-warning);
}

.service-dashboard-page .kpi.metric-card.is-danger {
  border-color: var(--color-danger-border);
}

.service-dashboard-page .kpi.metric-card.is-danger::before {
  background: var(--color-danger);
}

.service-dashboard-page .section-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.service-dashboard-page .service-latest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.service-dashboard-page .service-latest-item.record-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.service-dashboard-page .service-latest-head.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.service-dashboard-page .service-latest-no {
  color: var(--text-soft);
  font-weight: 900;
}

.service-dashboard-page .service-latest-subject {
  color: var(--text-strong);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 900;
}

.service-dashboard-page .service-latest-meta.context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  color: var(--text-soft);
}

.service-dashboard-page .service-latest-meta b {
  color: var(--text-strong);
}

.service-dashboard-page .service-latest-image.content-box,
.service-dashboard-page .service-progress-wrap.content-box {
  padding: var(--space-3);
  background: var(--surface-subtle);
  box-shadow: none;
}

.service-dashboard-page .service-latest-image a {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.service-dashboard-page .service-latest-image img {
  width: 100%;
  max-height: 220px;
  display: block;
  object-fit: cover;
  background: var(--surface-muted);
}

.service-dashboard-page .service-latest-image-count.badge-soft {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.service-dashboard-page .service-progress-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--text-soft);
  font-weight: 800;
}

.service-dashboard-page .service-progress-bar {
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--border-soft);
}

.service-dashboard-page .service-progress-bar span {
  display: block;
  height: 100%;
  background: var(--color-primary);
}

.service-dashboard-page .sla-badge.badge-soft.none,
.service-dashboard-page .sla-badge.badge-soft.normal {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.service-dashboard-page .sla-badge.badge-soft.near {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.service-dashboard-page .sla-badge.badge-soft.over,
.service-dashboard-page .sla-badge.badge-soft.overdue {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.service-dashboard-page .service-empty.empty-state {
  margin-top: var(--space-3);
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-muted);
}

.service-dashboard-page .btn,
.service-dashboard-page a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

.service-dashboard-page .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.service-dashboard-page .btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

@media (max-width: 1180px) {
  .service-dashboard-page .service-kpi-grid.metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .service-dashboard-page .service-kpi-grid.metric-grid,
  .service-dashboard-page .service-latest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .service-dashboard-page .page-hero,
  .service-dashboard-page .service-kpi-grid.metric-grid,
  .service-dashboard-page .service-latest-grid,
  .service-dashboard-page .service-latest-meta.context-grid {
    grid-template-columns: 1fr;
  }

  .service-dashboard-page .service-dashboard-hero-actions.action-row,
  .service-dashboard-page .service-dashboard-hero-actions .btn {
    width: 100%;
    justify-content: stretch;
  }

  .service-dashboard-page .service-dashboard-hero-actions .btn {
    justify-content: center;
  }

  .service-dashboard-page .section-card-head,
  .service-dashboard-page .service-latest-head.section-head {
    flex-direction: column;
    align-items: stretch;
  }
}
/* Service list shared component alignment. */
.service-list-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.service-list-page .page-hero,
.service-list-page .section-card,
.service-list-page .record-card,
.service-list-page .content-box,
.service-list-page .empty-state {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.service-list-page .page-title,
.service-list-page .section-title,
.service-list-page .page-subtitle {
  margin: 0;
}

.service-list-page .page-subtitle,
.service-list-page .service-time,
.service-list-page .service-section-title.section-subtitle {
  color: var(--text-muted);
}

.service-list-page .service-list-hero-stats.action-row,
.service-list-page .service-export-actions.action-row,
.service-list-page .service-list-actions.action-row,
.service-list-page .service-tags.action-row,
.service-list-page .service-item-actions.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.service-list-page .service-list-hero-stats.action-row,
.service-list-page .service-list-actions.action-row,
.service-list-page .service-item-actions.action-row {
  justify-content: flex-end;
}

.service-list-page .service-filter-card.section-card,
.service-list-page .service-export-card.section-card {
  padding: var(--space-4);
}

.service-list-page .service-filter-head,
.service-list-page .service-export-card.action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
}

.service-list-page .service-filter-head-copy,
.service-list-page .service-export-copy {
  display: grid;
  gap: var(--space-1);
}

.service-list-page .service-filter-fields.filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(160px, .75fr) minmax(180px, .9fr) minmax(190px, 1fr);
  gap: var(--space-3);
  align-items: end;
}

.service-list-page .service-filter-field.form-field,
.service-list-page .service-field.form-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--text-soft);
  font-size: 0.88rem;
  font-weight: 800;
}

.service-list-page .service-filter-field input:not([data-app-choice-option]),
.service-list-page .service-field input:not([data-app-choice-option]),
.service-list-page .service-action-card input:not([data-app-choice-option]),
.service-list-page .app-choice-trigger {
  width: 100%;
  min-height: var(--btn-height);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.service-list-page .service-filter-field input:not([data-app-choice-option]):focus,
.service-list-page .service-field input:not([data-app-choice-option]):focus,
.service-list-page .service-action-card input:not([data-app-choice-option]):focus,
.service-list-page .app-choice-trigger:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.service-list-page .service-action-card .app-choice-option input[data-app-choice-option] {
  flex: 0 0 auto;
}

.service-list-page .service-filter-actions.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
}

.service-list-page .service-export-actions.action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.service-list-page .service-record-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-3);
}

.service-list-page .service-empty-state.empty-state {
  grid-column: 1 / -1;
  padding: var(--space-5);
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-muted);
  text-align: center;
}

.service-list-page .service-item.record-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-4);
  border-left: var(--space-1) solid var(--border-muted);
}

.service-list-page .service-item.record-card.warn {
  border-left-color: var(--color-warning);
}

.service-list-page .service-item.record-card.danger {
  border-left-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.service-list-page .service-item.record-card.ok,
.service-list-page .service-item.record-card.done {
  border-left-color: var(--color-success);
}

.service-list-page .service-head.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.service-list-page .service-head-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.service-list-page .service-no {
  color: var(--text-soft);
  font-weight: 900;
}

.service-list-page .service-subject {
  color: var(--text-strong);
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 900;
}

.service-list-page .service-meta.context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  color: var(--text-soft);
}

.service-list-page .service-meta b {
  color: var(--text-strong);
}

.service-list-page .service-section-title.section-subtitle {
  margin-top: var(--space-1);
  font-weight: 900;
}

.service-list-page .service-attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
}

.service-list-page .service-attachment-card.content-box {
  padding: var(--space-3);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.service-list-page .service-attachment-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.service-list-page .service-attachment-card span {
  color: var(--text-soft);
  font-weight: 800;
}

.service-list-page .service-progress-wrap.content-box,
.service-list-page .service-timeline.content-box,
.service-list-page .service-action-card.content-box,
.service-list-page .service-comments.content-box {
  padding: var(--space-3);
  background: var(--surface-subtle);
  box-shadow: none;
}

.service-list-page .service-details-modal .service-timeline.content-box {
  display: grid;
  gap: var(--space-2);
  max-height: none;
  overflow: visible;
  border-color: var(--border-soft);
}

.service-list-page .service-progress-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--text-soft);
  font-weight: 800;
}

.service-list-page .service-progress-bar {
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--border-soft);
}

.service-list-page .service-progress-bar span {
  display: block;
  height: 100%;
  background: var(--color-primary);
}

.service-list-page .service-tag.badge-soft,
.service-list-page .status-badge.badge-soft,
.service-list-page .sla-badge.badge-soft {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.service-list-page .status-badge.badge-soft.is-warning,
.service-list-page .sla-badge.badge-soft.warn {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.service-list-page .status-badge.badge-soft.is-danger,
.service-list-page .sla-badge.badge-soft.danger,
.service-list-page .sla-badge.badge-soft.over,
.service-list-page .sla-badge.badge-soft.overdue {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.service-list-page .sla-badge.badge-soft.ok,
.service-list-page .sla-badge.badge-soft.done {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.service-list-page .service-update-form.filter-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(120px, 0.45fr) minmax(220px, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.service-list-page .service-more-info-form.filter-grid,
.service-list-page .service-comment-form.filter-grid {
  display: grid;
  gap: var(--space-3);
  align-items: end;
}

.service-list-page .service-more-info-form.filter-grid {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.service-list-page .service-comment-form.filter-grid {
  grid-template-columns: minmax(170px, 0.45fr) minmax(220px, 1fr) auto;
}

.service-list-page .service-log-row,
.service-list-page .service-comment-row {
  color: var(--text-soft);
}

.service-list-page .service-comment-row.internal {
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft);
}

.service-list-page .service-comment-row.external {
  border-left-color: var(--border-muted);
  background: var(--surface-muted);
}

.service-list-page .service-escalation {
  color: var(--color-danger-ink);
  font-weight: 900;
}

.service-list-page .btn,
.service-list-page a.btn,
.service-list-page button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

.service-list-page .btn-primary,
.service-list-page .btn-report.btn-primary,
.service-list-page .btn-teal.btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.service-list-page .btn-secondary,
.service-list-page .btn-clear.btn-secondary,
.service-list-page .btn-slate.btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.service-list-page .btn-warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.service-preview-modal {
  z-index: 1320;
}

.service-preview-modal .service-preview-backdrop.modal-backdrop {
  background: var(--text-strong);
  opacity: .72;
}

.service-preview-modal .service-preview-dialog.modal-card {
  width: min(92vw, 840px);
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.service-preview-modal .service-preview-close {
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-strong);
}

.service-preview-modal .service-preview-title.modal-title {
  color: var(--text-strong);
  font-weight: 900;
}

.service-preview-modal .service-preview-body img {
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

@media (max-width: 1100px) {
  .service-list-page .service-filter-head,
  .service-list-page .service-export-card.action-card,
  .service-list-page .service-filter-fields.filter-grid,
  .service-list-page .service-update-form.filter-grid,
  .service-list-page .service-comment-form.filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-list-page .service-filter-field-wide,
  .service-list-page .service-update-form .btn,
  .service-list-page .service-comment-form .btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .service-list-page .page-hero,
  .service-list-page .service-filter-head,
  .service-list-page .service-export-card.action-card,
  .service-list-page .service-filter-fields.filter-grid,
  .service-list-page .service-export-actions.action-row,
  .service-list-page .service-meta.context-grid,
  .service-list-page .service-update-form.filter-grid,
  .service-list-page .service-more-info-form.filter-grid,
  .service-list-page .service-comment-form.filter-grid,
  .service-list-page .service-comment-row,
  .service-list-page .service-log-row {
    grid-template-columns: 1fr;
  }

  .service-list-page .service-filter-field-wide,
  .service-list-page .service-update-form .btn,
  .service-list-page .service-comment-form .btn {
    grid-column: auto;
  }

  .service-list-page .service-filter-head-actions,
  .service-list-page .service-filter-head .btn,
  .service-list-page .service-filter-actions.form-actions,
  .service-list-page .service-list-actions.action-row,
  .service-list-page .service-list-actions .btn,
  .service-list-page .service-list-hero-stats.action-row,
  .service-list-page .service-export-actions .btn,
  .service-list-page .service-item-actions.action-row,
  .service-list-page .service-item-actions .btn {
    width: 100%;
    justify-content: stretch;
  }

  .service-list-page .service-filter-head .btn,
  .service-list-page .service-list-actions .btn,
  .service-list-page .service-export-actions .btn,
  .service-list-page .service-item-actions .btn {
    justify-content: center;
  }

  .service-list-page .service-head.section-head {
    flex-direction: column;
  }

  .service-list-page .service-head-badges {
    justify-content: flex-start;
  }
}

/* Service list 2026 OIL case workspace refresh. */
.service-list-page .page-hero-icon .ui-icon,
.service-list-page .metric-icon .ui-icon,
.service-list-page .service-panel-title .ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.service-list-page .service-list-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
}

.service-list-page .service-list-hero-aside {
  display: grid;
  justify-items: end;
  align-content: center;
  gap: var(--space-2);
  width: min(420px, 100%);
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
}

.service-list-page .service-list-hero-stats.action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.service-list-page .service-list-hero-stats .badge-soft {
  width: 100%;
  min-height: 36px;
}

.service-list-page .service-hero-actions.action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: stretch;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.service-list-page .service-hero-actions .btn {
  width: 100%;
  min-height: 42px;
}

.service-list-page .service-list-summary.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.service-list-page .service-list-summary .metric-card {
  min-width: 0;
}

.service-list-page .service-workbench {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: stretch;
}

.service-list-page .service-workbench .section-card {
  min-width: 0;
}

.service-list-page .service-record-heading.section-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
}

.service-list-page .service-record-heading .section-title,
.service-list-page .service-record-heading .page-subtitle {
  margin: 0;
}

.service-list-page .service-filter-card.section-card {
  padding: var(--space-4);
}

.service-list-page .service-filter-card-inner {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.service-list-page .service-export-card.action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
}

.service-list-page .service-export-actions.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.service-list-page .service-filter-actions.form-actions {
  gap: var(--space-2);
  display: flex;
  justify-content: flex-end;
}

.service-list-page .service-filter-actions.form-actions .btn {
  width: auto;
}

.service-list-page .service-target-filter-card.content-box {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: none;
}

.service-list-page .service-target-filter-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}

.service-list-page .service-target-filter-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.service-list-page .service-target-filter-icon,
.service-list-page .service-target-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--theme-icon-border);
  background: var(--surface);
  color: var(--color-primary);
  flex: 0 0 auto;
}

.service-list-page .service-target-filter-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
}

.service-list-page .service-target-filter-head h3,
.service-list-page .service-target-filter-head p {
  margin: 0;
}

.service-list-page .service-target-filter-head h3 {
  color: var(--text-strong);
  font-size: .98rem;
  font-weight: 900;
}

.service-list-page .service-target-filter-head p {
  color: var(--text-muted);
  line-height: 1.55;
}

.service-list-page .service-target-filter-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.service-list-page .service-target-filter-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.service-list-page .service-target-filter-chip.badge-soft {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-self: stretch;
  gap: var(--space-3);
  width: 100%;
  min-height: 72px;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border-color: var(--border-soft);
  background: var(--surface-subtle);
  color: var(--text-strong);
  text-decoration: none;
  box-shadow: none;
  white-space: normal;
  transition: border-color .15s ease, background .15s ease;
}

.service-list-page a.service-target-filter-chip:hover,
.service-list-page a.service-target-filter-chip:focus {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  outline: 0;
}

.service-list-page .service-target-filter-chip.is-primary {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.service-list-page .service-target-chip-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
}

.service-list-page .service-target-chip-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.service-list-page .service-target-chip-copy span {
  min-width: 0;
  color: var(--text-strong);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.service-list-page .service-target-chip-copy small {
  color: var(--text-muted);
  font-weight: 800;
}

.service-list-page .service-target-filter-chip strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 30px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--color-primary);
}

.service-list-page .service-card-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.service-list-page .service-card-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: stretch;
  align-content: start;
}

.service-list-page .service-route-card.content-box {
  display: grid;
  align-content: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.service-list-page .service-route-card span,
.service-list-page .service-route-card small {
  color: var(--text-muted);
  font-weight: 800;
}

.service-list-page .service-route-card strong {
  color: var(--text-strong);
  font-size: 1.02rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.service-list-page .service-compact-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.service-list-page .service-compact-facts .service-intro-wide {
  grid-column: auto;
}

.service-list-page .service-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.3fr) minmax(160px, .55fr);
  gap: var(--space-2);
  align-items: stretch;
}

.service-list-page .service-intro-item {
  display: grid;
  grid-template-columns: minmax(104px, .42fr) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  min-width: 0;
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 1px dashed var(--border-soft);
  border-radius: 0;
  background: transparent;
}

.service-list-page .service-intro-item:last-child {
  border-bottom: 0;
}

.service-list-page .service-intro-item span {
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 0;
}

.service-list-page .service-intro-item strong {
  min-width: 0;
  color: var(--text-strong);
  font-size: .93rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.service-list-page .service-intro-progress.content-box {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: none;
}

.service-list-page .service-compact-progress.content-box {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.service-list-page .service-card-quick-actions.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.service-list-page .service-details-button.btn {
  width: auto;
  justify-content: center;
}

.service-list-page .service-details-modal {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(15, 23, 42, .52);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.service-list-page .service-details-modal.is-open,
.service-list-page .service-details-modal.is-closing {
  display: flex;
}

.service-list-page .service-details-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.service-list-page .service-details-dialog.modal-card {
  width: min(1120px, 100%);
  max-height: min(88vh, 920px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  opacity: 0;
  transform: translateY(var(--space-2));
  transition: opacity .2s ease, transform .2s ease;
}

.service-list-page .service-details-modal.is-visible .service-details-dialog.modal-card {
  opacity: 1;
  transform: translateY(0);
}

.service-list-page .service-details-modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.service-list-page .service-details-modal-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
}

.service-list-page .service-details-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--color-primary);
}

.service-list-page .service-details-modal-title h2,
.service-list-page .service-details-modal-title p {
  margin: 0;
}

.service-list-page .service-details-modal-title h2 {
  color: var(--text-strong);
  font-size: 1.15rem;
  line-height: 1.35;
}

.service-list-page .service-details-modal-title p:not(.page-kicker) {
  color: var(--text-muted);
  line-height: 1.55;
}

.service-list-page .service-details-modal-close.btn {
  white-space: nowrap;
}

.service-list-page .service-details-modal-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.service-list-page .service-details-modal-body {
  display: grid;
  gap: var(--space-3);
  min-height: 0;
  overflow: auto;
  padding-right: var(--space-1);
}

.service-list-page .service-details.details-group {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-2);
}

.service-list-page .service-details-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}

.service-list-page .service-details-toggle::-webkit-details-marker {
  display: none;
}

.service-list-page .service-details-toggle::after {
  content: '+';
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--color-primary);
  font-weight: 900;
}

.service-list-page .service-details[open] .service-details-toggle::after {
  content: '-';
}

.service-list-page .service-details-toggle span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-weight: 900;
}

.service-list-page .service-details-toggle .ui-icon {
  width: 26px;
  height: 26px;
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.service-list-page .service-details-toggle small {
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.45;
  text-align: right;
}

.service-list-page .service-details[open] .service-details-toggle {
  margin-bottom: var(--space-3);
}

.service-list-page .service-action-workspace.content-box {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-primary-border);
  border-left: var(--space-1) solid var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: none;
}

.service-list-page .service-action-workspace-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  min-width: 0;
}

.service-list-page .service-action-workspace-head h3,
.service-list-page .service-action-workspace-head p {
  margin: 0;
}

.service-list-page .service-action-workspace-head h3 {
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 900;
}

.service-list-page .service-action-workspace-head p {
  color: var(--text-muted);
  line-height: 1.6;
}

.service-list-page .service-action-stack {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.service-list-page .service-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .32fr);
  gap: var(--space-3);
  align-items: start;
}

.service-list-page .service-card-main {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.service-list-page .service-card-side {
  position: sticky;
  top: var(--space-4);
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.service-list-page .service-info-panel.content-box,
.service-list-page .service-side-facts.content-box,
.service-list-page .service-related-tags.content-box {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--border-soft);
  background: var(--surface-subtle);
  box-shadow: none;
}

.service-list-page .service-related-tags.content-box {
  gap: var(--space-2);
  padding: var(--space-3);
}

.service-list-page .service-related-tags > b {
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 900;
}

.service-list-page .service-panel-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-strong);
  font-weight: 900;
}

.service-list-page .service-panel-title .ui-icon {
  width: 28px;
  height: 28px;
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.service-list-page .service-meta.context-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.service-list-page .service-meta.context-grid > div,
.service-list-page .service-side-facts > div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.service-list-page .service-meta.context-grid > div b,
.service-list-page .service-side-facts > div b {
  color: var(--text-muted);
  font-size: .78rem;
  letter-spacing: 0;
}

.service-list-page .service-meta.context-grid > div span,
.service-list-page .service-side-facts > div span {
  min-width: 0;
  color: var(--text-strong);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.service-list-page .service-meta-wide {
  grid-column: 1 / -1;
}

.service-list-page .service-client-panel {
  border-left: var(--space-1) solid var(--color-info);
}

.service-list-page .service-side-facts.content-box {
  padding: var(--space-3);
}

.service-list-page .service-head-badges .badge-soft {
  white-space: normal;
  text-align: center;
}

.service-list-page .status-badge.badge-soft.is-info {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.service-list-page .service-section-title.section-subtitle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
  color: var(--text-strong);
  font-size: .9rem;
}

.service-list-page .service-section-title .ui-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.service-list-page .service-log-row,
.service-list-page .service-comment-row {
  display: grid;
  grid-template-columns: minmax(120px, .22fr) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  min-width: 0;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}

.service-list-page .service-log-row {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.service-list-page .service-log-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.service-list-page .service-comment-row {
  grid-template-columns: minmax(120px, .22fr) minmax(0, 1fr) minmax(120px, .22fr);
  padding: var(--space-2);
  border-bottom: 0;
  border-left: var(--space-1) solid var(--border-muted);
  border-radius: var(--radius-md);
}

.service-list-page .service-log-row:last-child {
  border-bottom: 0;
}

@media (max-width: 1180px) {
  .service-list-page .service-list-summary.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-list-page .service-workbench {
    grid-template-columns: 1fr;
  }

  .service-list-page .service-export-card.action-card,
  .service-list-page .service-card-body,
  .service-list-page .service-card-compact {
    grid-template-columns: 1fr;
  }

  .service-list-page .service-intro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-list-page .service-compact-facts {
    grid-template-columns: 1fr;
  }

  .service-list-page .service-target-filter-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-list-page .service-card-side {
    position: static;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .service-list-page .service-list-hero.page-hero,
  .service-list-page .service-list-summary.metric-grid,
  .service-list-page .service-record-heading.section-card,
  .service-list-page .service-card-top,
  .service-list-page .service-target-filter-head,
  .service-list-page .service-card-side,
  .service-list-page .service-list-hero-aside,
  .service-list-page .service-action-workspace-head,
  .service-list-page .service-intro-grid,
  .service-list-page .service-compact-facts,
  .service-list-page .service-details-toggle,
  .service-list-page .service-meta.context-grid,
  .service-list-page .service-log-row,
  .service-list-page .service-comment-row {
    grid-template-columns: 1fr;
  }

  .service-list-page .service-export-card.action-card,
  .service-list-page .service-item.record-card {
    padding: var(--space-3);
  }

  .service-list-page .service-head-badges {
    justify-content: flex-start;
  }

  .service-list-page .service-record-heading.section-card {
    align-items: stretch;
  }

  .service-list-page .service-list-hero-aside {
    justify-items: stretch;
  }

  .service-list-page .service-list-hero-stats.action-row {
    grid-template-columns: 1fr;
  }

  .service-list-page .service-target-filter-title {
    grid-template-columns: 1fr;
  }

  .service-list-page .service-target-filter-tools {
    justify-content: stretch;
  }

  .service-list-page .service-target-filter-tools .badge-soft,
  .service-list-page .service-target-filter-tools .btn {
    width: 100%;
  }

  .service-list-page .service-target-filter-list {
    grid-template-columns: 1fr;
  }

  .service-list-page .service-record-list {
    grid-template-columns: 1fr;
  }

  .service-list-page .service-details-modal {
    padding: var(--space-2);
  }

  .service-list-page .service-details-dialog.modal-card {
    max-height: 94vh;
    padding: var(--space-3);
  }

  .service-list-page .service-details-modal-head,
  .service-list-page .service-details-modal-title {
    grid-template-columns: 1fr;
  }

  .service-list-page .service-details-modal-close.btn {
    width: 100%;
  }

  .service-list-page .service-intro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-list-page .service-compact-facts {
    grid-template-columns: 1fr;
  }

  .service-list-page .service-intro-wide {
    grid-column: 1 / -1;
  }

  .service-list-page .service-intro-item,
  .service-list-page .service-intro-progress.content-box,
  .service-list-page .service-details-toggle {
    padding: var(--space-2);
  }

  .service-list-page .service-card-compact .service-intro-item {
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding: var(--space-2) 0;
  }

  .service-list-page .service-details-toggle {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .service-list-page .service-details-toggle small {
    display: none;
  }

  .service-list-page .service-export-actions.action-row,
  .service-list-page .service-hero-actions.action-row,
  .service-list-page .service-card-quick-actions.action-row,
  .service-list-page .service-filter-actions.form-actions {
    grid-template-columns: 1fr;
    display: grid;
  }

  .service-list-page .service-export-actions .btn,
  .service-list-page .service-hero-actions .btn,
  .service-list-page .service-card-quick-actions .btn,
  .service-list-page .service-action-workspace-head .btn,
  .service-list-page .service-filter-actions .btn {
    width: 100%;
  }
}
/* Service create shared component alignment. */
.service-create-page.page-stack,
.service-create-page .service-create-shell.page-stack,
.service-create-page .service-create-form.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.service-create-page .page-hero,
.service-create-page .section-card,
.service-create-page .content-box {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.service-create-page .service-create-shell.page-stack {
  width: 100%;
  max-width: none;
}

.service-create-page .service-create-hero.page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.service-create-page .service-create-copy.page-hero-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.service-create-page .page-hero-icon {
  flex: 0 0 auto;
}

.service-create-page .service-create-hero-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.service-create-page .service-create-kicker.page-kicker {
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-soft);
}

.service-create-page .page-title,
.service-create-page .page-subtitle,
.service-create-page .section-card-head h2,
.service-create-page .section-card-head p,
.service-create-page .service-assignment-card-head h3,
.service-create-page .service-assignment-card-head p {
  margin: 0;
}

.service-create-page .page-subtitle,
.service-create-page .section-card-head p,
.service-create-page .service-assignment-card-head p,
.service-create-page .duty-user-help,
.service-create-page .item-file-sub {
  color: var(--text-muted);
}

.service-create-page .service-create-back.btn,
.service-create-page .form-actions.action-row .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

.service-create-page .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.service-create-page .btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

.service-create-page .form-section.section-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  margin: 0;
}

.service-create-page .section-head.section-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.service-create-page .form-grid.filter-grid.three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.service-create-page .field-wide {
  grid-column: 1 / -1;
}

.service-create-page .field.form-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--text-soft);
  font-size: 0.88rem;
  font-weight: 800;
}

.service-create-page .field.form-field input:not([data-app-choice-option]),
.service-create-page .field.form-field textarea,
.service-create-page .app-choice-trigger,
.service-create-page .duty-user-inputbox {
  width: 100%;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.service-create-page .field.form-field input:not([data-app-choice-option]),
.service-create-page .app-choice-trigger,
.service-create-page .duty-user-inputbox {
  min-height: var(--btn-height);
}

.service-create-page .field.form-field textarea {
  min-height: 128px;
  resize: vertical;
}

.service-create-page .field.form-field input:not([data-app-choice-option]):focus,
.service-create-page .field.form-field textarea:focus,
.service-create-page .app-choice-trigger:focus,
.service-create-page .duty-user-inputbox:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.service-create-page .required-mark {
  color: var(--color-danger);
}

.service-create-page .service-assignment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.service-create-page .service-assignment-card.content-box {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-subtle);
  box-shadow: none;
}

.service-create-page .service-assignment-card-wide {
  grid-column: 1 / -1;
}

.service-create-page .service-assignment-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.service-create-page .service-assignment-step.badge-soft {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
  font-weight: 900;
}

.service-create-page .service-related-user-picker,
.service-create-page .service-workline-picker,
.service-create-page .service-owner-picker {
  min-width: 0;
}

.service-create-page .duty-user-picker-head,
.service-create-page .duty-user-picker-tools,
.service-create-page .app-choice-selected,
.service-create-page .duty-selected-users-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.service-create-page .duty-user-picker-head {
  justify-content: space-between;
}

.service-create-page .duty-selected-count,
.service-create-page .app-choice-chip,
.service-create-page .duty-selected-chip {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.service-create-page .duty-user-results {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.service-create-page .service-upload-field.content-box {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-subtle);
  box-shadow: none;
}

.service-create-page .item-upload-label {
  color: var(--text-soft);
  font-weight: 900;
}

.service-create-page .item-file-drop.content-box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-style: dashed;
  background: var(--surface);
  box-shadow: none;
  cursor: pointer;
}

.service-create-page .item-file-icon.upload-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--theme-icon-border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--theme-icon-ink);
  font-weight: 900;
}

.service-create-page .item-file-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.service-create-page .item-file-title {
  color: var(--text-strong);
  font-weight: 900;
}

.service-create-page .item-file-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.service-create-page .form-actions.action-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

@media (max-width: 980px) {
  .service-create-page .form-grid.filter-grid.three-col,
  .service-create-page .service-assignment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .service-create-page .service-create-hero.page-hero,
  .service-create-page .form-grid.filter-grid.three-col,
  .service-create-page .service-assignment-grid {
    grid-template-columns: 1fr;
  }

  .service-create-page .service-create-hero.page-hero,
  .service-create-page .section-head.section-card-head,
  .service-create-page .form-actions.action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .service-create-page .field-wide,
  .service-create-page .service-assignment-card-wide {
    grid-column: auto;
  }

  .service-create-page .service-create-back.btn,
  .service-create-page .form-actions.action-row .btn {
    width: 100%;
  }

  .service-create-page .item-file-drop.content-box {
    align-items: flex-start;
  }
}
/* Service edit shared component alignment. */
.service-edit-page.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.service-edit-page .page-hero,
.service-edit-page .section-card,
.service-edit-page .content-box {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.service-edit-page .page-hero.service-edit-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  overflow: hidden;
}

.service-edit-page .page-hero-main {
  min-width: 0;
}

.service-edit-page .page-hero-icon,
.service-edit-page .section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  color: var(--color-primary);
}

.service-edit-page .page-hero-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3);
}

.service-edit-page .section-icon {
  width: 40px;
  height: 40px;
}

.service-edit-page .page-hero-icon .ui-icon,
.service-edit-page .section-icon .ui-icon,
.service-edit-page .btn-icon.ui-icon {
  flex: 0 0 auto;
}

.service-edit-page .page-title {
  margin: 0;
}

.service-edit-page .page-subtitle,
.service-edit-page .section-card-head p {
  margin: var(--space-1) 0 0;
  color: var(--text-soft);
}

.service-edit-page .page-hero-aside,
.service-edit-page .service-form-actions.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  align-items: center;
}

.service-edit-page .service-edit-form.page-stack {
  gap: var(--space-4);
}

.service-edit-page .form-section.section-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.service-edit-page .section-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.service-edit-page .section-card-head h2 {
  margin: 0;
  color: var(--text-strong);
  font-size: 1rem;
  line-height: 1.35;
}

.service-edit-page .form-grid.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.service-edit-page .field-wide {
  grid-column: 1 / -1;
}

.service-edit-page .field.form-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--text-soft);
  font-size: 0.88rem;
  font-weight: 800;
}

.service-edit-page .field.form-field input:not([data-app-choice-option]),
.service-edit-page .field.form-field textarea,
.service-edit-page .app-choice-trigger {
  width: 100%;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.service-edit-page .field.form-field input:not([data-app-choice-option]),
.service-edit-page .app-choice-trigger {
  min-height: var(--btn-height);
}

.service-edit-page .field.form-field textarea {
  min-height: 128px;
  resize: vertical;
}

.service-edit-page .field.form-field input:not([data-app-choice-option]):focus,
.service-edit-page .field.form-field textarea:focus,
.service-edit-page .app-choice-trigger:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.service-edit-page .required-mark {
  color: var(--color-danger);
}

.service-edit-page .service-edit-attachments-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.service-edit-page .service-edit-upload-card.content-box,
.service-edit-page .service-existing-images.content-box {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-subtle);
  box-shadow: none;
}

.service-edit-page .item-upload-label,
.service-edit-page .service-existing-title {
  margin: 0;
  color: var(--text-strong);
  font-weight: 900;
}

.service-edit-page .item-file-drop.content-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-style: dashed;
  background: var(--surface);
  box-shadow: none;
  cursor: pointer;
}

.service-edit-page .item-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.service-edit-page .item-file-copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.service-edit-page .item-file-title {
  color: var(--text-strong);
  font-weight: 900;
}

.service-edit-page .item-file-sub,
.service-edit-page .service-existing-remove,
.service-edit-page .service-existing-legacy {
  color: var(--text-muted);
}

.service-edit-page .item-file-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.service-edit-page .service-existing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
}

.service-edit-page .service-existing-item.content-box {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-subtle);
  box-shadow: none;
  cursor: pointer;
}

.service-edit-page .service-existing-thumb-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.service-edit-page .service-existing-thumb-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.service-edit-page .service-existing-name {
  color: var(--text-soft);
  font-weight: 800;
  word-break: break-word;
}

.service-edit-page .service-existing-remove {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 800;
}

.service-edit-page .service-existing-remove input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  padding: 0;
  accent-color: var(--color-danger);
}

.service-edit-page .service-existing-legacy {
  display: inline-flex;
  width: fit-content;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2);
  background: var(--surface);
  font-weight: 800;
}

.service-edit-page .app-choice-option input[data-app-choice-option] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
}

.service-edit-page .btn,
.service-edit-page a.btn,
.service-edit-page button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

.service-edit-page .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.service-edit-page .btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

@media (max-width: 980px) {
  .service-edit-page .form-grid.filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-edit-page .service-edit-attachments-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .service-edit-page .page-hero.service-edit-hero,
  .service-edit-page .section-card-head,
  .service-edit-page .form-grid.filter-grid {
    grid-template-columns: 1fr;
  }

  .service-edit-page .page-hero.service-edit-hero,
  .service-edit-page .service-form-actions.action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .service-edit-page .field-wide {
    grid-column: auto;
  }

  .service-edit-page .page-hero-aside,
  .service-edit-page .page-hero-aside .btn,
  .service-edit-page .badge-soft,
  .service-edit-page .service-form-actions.action-row,
  .service-edit-page .service-form-actions .btn {
    width: 100%;
  }

  .service-edit-page .section-card-head {
    align-items: start;
  }

  .service-edit-page .item-file-drop.content-box {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
}

/* Service logs shared component alignment. */
.service-logs-shell.page-stack {
  gap: var(--space-4);
  color: var(--text-strong);
}

.service-logs-shell .page-hero,
.service-logs-shell .section-card,
.service-logs-shell .metric-card,
.service-logs-shell .record-card,
.service-logs-shell .content-box,
.service-logs-shell .empty-state {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.service-logs-shell .page-title,
.service-logs-shell .page-subtitle,
.service-logs-shell .section-title {
  margin: 0;
}

.service-logs-shell .page-subtitle,
.service-logs-shell .service-log-request-meta,
.service-logs-shell .service-logs-summary-copy,
.service-logs-shell .service-log-detail-label {
  color: var(--text-muted);
}

.service-logs-shell .page-hero-aside.action-row,
.service-logs-shell .service-log-meta.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  align-items: center;
}

.service-logs-shell .service-logs-filter-card.filter-panel,
.service-logs-shell .service-logs-list-card.section-card {
  padding: var(--space-4);
}

.service-logs-shell .service-logs-filter-grid.filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 0.8fr) auto auto;
  gap: var(--space-3);
  align-items: end;
}

.service-logs-shell .service-logs-filter-field.form-field {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--text-soft);
  font-size: 0.88rem;
  font-weight: 800;
}

.service-logs-shell .service-logs-filter-field input,
.service-logs-shell .app-choice-trigger {
  width: 100%;
  min-height: var(--btn-height);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
}

.service-logs-shell .service-logs-filter-field input:focus,
.service-logs-shell .app-choice-trigger:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: 0;
}

.service-logs-shell .service-logs-summary-grid.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.service-logs-shell .service-logs-summary-card.metric-card {
  display: grid;
  gap: var(--space-2);
  min-height: 116px;
  padding: var(--space-4);
  background: var(--surface-subtle);
}

.service-logs-shell .service-logs-summary-label {
  color: var(--text-soft);
  font-weight: 800;
}

.service-logs-shell .service-logs-summary-value {
  color: var(--text-strong);
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 900;
}

.service-logs-shell .service-logs-summary-value-compact {
  font-size: 1.05rem;
  line-height: 1.35;
}

.service-logs-shell .service-logs-list-head.section-card-head,
.service-logs-shell .service-log-entry-head.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.service-logs-shell .service-logs-list-head.section-card-head {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.service-logs-shell .service-logs-timeline {
  display: grid;
  gap: var(--space-3);
}

.service-logs-shell .service-log-entry.record-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}

.service-logs-shell .service-log-request-no {
  color: var(--color-primary-ink);
  font-weight: 900;
}

.service-logs-shell .service-log-request-subject {
  color: var(--text-strong);
  font-weight: 900;
}

.service-logs-shell .service-log-detail.content-box {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface-subtle);
  box-shadow: none;
}

.service-logs-shell .service-log-detail-text {
  color: var(--text-strong);
}

.service-logs-shell .service-log-badge.badge-soft,
.service-logs-shell .service-log-date.badge-soft {
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-soft);
}

.service-logs-shell .service-log-badge.badge-soft.logs-badge-created,
.service-logs-shell .service-log-badge.badge-soft.logs-badge-status {
  border-color: var(--color-info-border);
  background: var(--color-info-soft);
  color: var(--color-info-ink);
}

.service-logs-shell .service-log-badge.badge-soft.logs-badge-forwarded {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

.service-logs-shell .service-log-badge.badge-soft.logs-badge-closed {
  border-color: var(--color-success-border);
  background: var(--color-success-soft);
  color: var(--color-success-ink);
}

.service-logs-shell .service-log-badge.badge-soft.logs-badge-warning {
  border-color: var(--color-warning-border);
  background: var(--color-warning-soft);
  color: var(--color-warning-ink);
}

.service-logs-shell .service-log-badge.badge-soft.logs-badge-danger {
  border-color: var(--color-danger-border);
  background: var(--color-danger-soft);
  color: var(--color-danger-ink);
}

.service-logs-shell .service-logs-empty.empty-state {
  padding: var(--space-5);
  border-color: var(--border-muted);
  background: var(--surface-muted);
  color: var(--text-muted);
  text-align: center;
}

.service-logs-shell .btn,
.service-logs-shell a.btn,
.service-logs-shell button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

.service-logs-shell .btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
}

.service-logs-shell .btn-secondary,
.service-logs-shell .service-logs-btn-reset.btn-secondary {
  border-color: var(--border-muted);
  background: var(--surface);
  color: var(--text-strong);
}

@media (max-width: 980px) {
  .service-logs-shell .service-logs-filter-grid.filter-grid,
  .service-logs-shell .service-logs-summary-grid.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .service-logs-shell .page-hero,
  .service-logs-shell .service-logs-filter-grid.filter-grid,
  .service-logs-shell .service-logs-summary-grid.metric-grid,
  .service-logs-shell .service-log-detail.content-box {
    grid-template-columns: 1fr;
  }

  .service-logs-shell .service-logs-list-head.section-card-head,
  .service-logs-shell .service-log-entry-head.section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .service-logs-shell .page-hero-aside.action-row,
  .service-logs-shell .service-log-meta.action-row {
    justify-content: flex-start;
  }

  .service-logs-shell .service-logs-filter-grid .btn,
  .service-logs-shell .page-hero-aside.action-row,
  .service-logs-shell .page-hero-aside .badge-soft {
    width: 100%;
  }
}

/* Phase 7: visual theme layer shared across the existing PHP views. */
.topbar {
  background: var(--theme-shell-strong);
  border-bottom-color: var(--border-soft);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.topbar-inner,
.app-layout {
  max-width: 1440px;
}

.app-layout {
  grid-template-columns: 252px minmax(0, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.brand-dot,
.mobile-sidebar-toggle {
  background: var(--theme-icon-bg);
  color: var(--theme-icon-ink);
  border-color: var(--theme-icon-border);
  box-shadow: var(--shadow-sm);
}

.layout-brand-logo,
.layout-user-avatar,
.user-chip-icon {
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}

.brand-title,
.page-title,
.section-title,
.section-card-title,
.modal-title {
  color: var(--ink);
}

.sidebar,
.main,
.dropdown,
.notif-dropdown {
  background: var(--theme-shell);
  border-color: var(--border-soft);
  box-shadow: var(--shadow-panel);
}

.sidebar {
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}

.main {
  border-radius: 24px;
}

.sidebar-role-switch {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-muted) 100%);
  padding: var(--space-3);
}

.sidebar-role-switch label,
.nav-group-title,
.page-kicker,
.section-kicker,
.metric-head {
  color: var(--text-muted);
  letter-spacing: 0;
}

.sidebar-role-switch select,
.topbar-search input,
.filter-panel input,
.filter-panel select,
.filter-panel textarea,
.form-field input:not([data-app-choice-option]),
.form-field select,
.form-field textarea {
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--text-strong);
}

.sidebar-role-switch select:focus,
.topbar-search input:focus,
.filter-panel input:focus,
.filter-panel select:focus,
.filter-panel textarea:focus,
.form-field input:not([data-app-choice-option]):focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--accent-ghost);
  outline: 0;
}

.menu-link {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  color: var(--text-soft);
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.menu-link:hover {
  background: var(--nav-active-bg);
  color: var(--nav-active-ink);
  transform: translateY(-1px);
}

.menu-link .icon,
.topbar-btn .icon,
.user-chip-icon {
  width: 30px;
  height: 30px;
  display: inline-grid;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--theme-icon-border);
  background: var(--surface);
  color: var(--color-primary-ink);
  font-size: 15px;
  line-height: 1;
}

.menu-link.active {
  background: var(--nav-active-bg);
  color: var(--nav-active-ink);
  border: 1px solid var(--nav-active-border);
  box-shadow: var(--nav-active-shadow);
  font-weight: 800;
}

.menu-link.active .icon {
  background: var(--surface);
  color: var(--nav-active-ink);
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.12);
}

.topbar-btn,
.user-chip,
.lang-switch,
.notif-dropdown,
.dropdown {
  border-color: var(--border-soft);
}

.topbar-btn,
.user-chip,
.lang-switch {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.lang-switch a.active {
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
}

@media (min-width: 561px) {
  .topbar-actions {
    align-items: stretch !important;
    gap: var(--space-2) !important;
  }

  .topbar-actions .lang-switch,
  .topbar-actions .topbar-btn {
    box-sizing: border-box;
    height: 46px;
    min-height: 46px;
    border-radius: var(--radius-lg);
  }

  .topbar-actions .lang-switch {
    padding: 4px;
  }

  .topbar-actions .lang-switch a {
    height: 36px;
    min-height: 36px;
    padding-block: 0;
    padding-inline: var(--space-3);
  }

  .topbar-actions .topbar-btn {
    align-items: center;
    padding-block: 7px;
  }

  .topbar-actions .notif-btn {
    min-width: 166px;
  }

  .topbar-actions .notif-btn .layout-notif-badge {
    margin-left: auto;
  }

  .topbar-actions .profile-btn {
    max-width: min(340px, 42vw);
  }

  .topbar-actions .user-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions .user-chip-role {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.page-stack {
  gap: var(--space-5);
}

.page-hero,
.section-card,
.metric-card,
.record-card,
.action-card,
.filter-panel,
.content-box,
.empty-state,
.table-wrap,
.modal-card {
  border-color: var(--border-soft);
  box-shadow: var(--shadow-card);
}

.page-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--surface);
}

.page-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 4px;
  background: var(--border-soft);
  pointer-events: none;
}

.page-hero-main,
.page-hero-aside {
  position: relative;
  z-index: 1;
}

.page-hero-icon,
.metric-icon,
.action-icon,
.empty-state-icon,
.alert-icon {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--theme-icon-border);
  border-radius: 14px;
  background: var(--theme-icon-bg);
  color: var(--theme-icon-ink);
  box-shadow: var(--shadow-sm);
  line-height: 1;
}

.page-hero-icon {
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-2);
  font-size: 22px;
}

.metric-icon,
.action-icon,
.empty-state-icon,
.alert-icon {
  width: 36px;
  height: 36px;
  font-size: 17px;
}

.page-hero-aside,
.metric-card,
.section-card,
.record-card,
.action-card,
.filter-panel,
.content-box,
.empty-state,
.modal-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
}

.leadership-filter-card .leadership-filter-panel.filter-panel {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.metric-grid {
  gap: var(--space-4);
}

.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  padding: var(--space-4);
}

.metric-filter-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.metric-filter-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-panel);
}

.metric-filter-card:focus-visible {
  outline: 3px solid var(--color-primary-border);
  outline-offset: 3px;
}

.metric-filter-card.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--accent-ghost), var(--shadow-card);
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--color-primary);
}

.metric-card.is-info::before { background: var(--color-info); }
.metric-card.is-success::before { background: var(--color-success); }
.metric-card.is-warning::before { background: var(--color-warning); }
.metric-card.is-danger::before { background: var(--color-danger); }
.metric-card.is-purple::before { background: var(--color-purple); }
.metric-card.is-teal::before { background: var(--color-teal); }
.metric-card.is-neutral::before { background: var(--border-muted); }

.metric-card.is-primary .metric-icon { background: var(--surface); color: var(--color-primary-ink); }
.metric-card.is-info .metric-icon { background: var(--surface); color: var(--color-info-ink); }
.metric-card.is-warning .metric-icon { background: var(--surface); color: var(--color-warning-ink); }
.metric-card.is-danger .metric-icon { background: var(--surface); color: var(--color-danger-ink); }
.metric-card.is-purple .metric-icon { background: var(--surface); color: var(--color-purple-ink); }
.metric-card.is-teal .metric-icon { background: var(--surface); color: var(--color-teal-ink); }
.metric-card.is-success .metric-icon { background: var(--surface); color: var(--color-success-ink); }

.metric-value {
  color: var(--ink);
  letter-spacing: 0;
}

.metric-sub,
.text-muted,
.page-subtitle {
  color: var(--text-muted);
}

.btn-primary,
a.btn-primary,
button.btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--surface);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background: var(--color-primary-ink);
  border-color: var(--color-primary-ink);
}

.btn-secondary,
.btn-outline,
a.btn-secondary,
a.btn-outline,
button.btn-secondary,
button.btn-outline {
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--text-strong);
}

.btn-success,
a.btn-success,
button.btn-success {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--surface);
  box-shadow: 0 10px 20px rgba(22, 163, 74, 0.18);
}

.btn-warning,
a.btn-warning,
button.btn-warning {
  border-color: var(--color-warning);
  background: var(--color-warning);
}

.btn-danger,
a.btn-danger,
button.btn-danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--surface);
  box-shadow: 0 10px 20px rgba(220, 38, 38, 0.18);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
a.btn-danger:hover,
a.btn-danger:focus,
a.btn-danger:active,
button.btn-danger:hover,
button.btn-danger:focus,
button.btn-danger:active {
  border-color: var(--color-danger-ink);
  background: var(--color-danger-ink);
  color: var(--surface);
}

.export-toolbar,
.action-row.export-toolbar,
.export-actions.export-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  width: 100%;
}

.export-card,
.section-card.export-card,
.action-card.export-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.export-card > .section-head {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.export-card .export-copy,
.export-card > .section-head .export-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-strong);
}

.export-card .section-kicker,
.export-card .section-title,
.export-card .section-subtitle,
.export-card h2,
.export-card p {
  margin: 0;
}

.export-card .section-subtitle,
.export-card p {
  color: var(--text-muted);
  line-height: 1.6;
}

.export-card .export-toolbar {
  width: auto;
  justify-content: flex-end;
}

.btn-export,
a.btn-export,
button.btn-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  min-width: 132px;
  padding-inline: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-sm);
  font-weight: 800;
  white-space: nowrap;
}

.btn-export:hover,
a.btn-export:hover,
button.btn-export:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.btn-export-excel,
a.btn-export-excel,
button.btn-export-excel {
  border-color: var(--color-success-border);
  color: var(--color-success-ink);
}

.btn-export-pdf,
a.btn-export-pdf,
button.btn-export-pdf {
  border-color: var(--color-danger-border);
  color: var(--color-danger-ink);
}

.btn-export .btn-icon {
  background: var(--surface);
  color: inherit;
}

.export-toolbar .btn.btn-export,
.export-toolbar a.btn.btn-export,
.export-toolbar button.btn.btn-export,
.action-row.export-toolbar .btn.btn-export,
.action-row.export-toolbar a.btn.btn-export,
.export-actions.export-toolbar .btn.btn-export,
.export-actions.export-toolbar a.btn.btn-export {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-width: 132px;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.export-toolbar .btn.btn-export-excel,
.export-toolbar a.btn.btn-export-excel,
.action-row.export-toolbar .btn.btn-export-excel,
.export-actions.export-toolbar .btn.btn-export-excel {
  border-color: var(--color-success-border);
  color: var(--color-success-ink);
}

.export-toolbar .btn.btn-export-pdf,
.export-toolbar a.btn.btn-export-pdf,
.action-row.export-toolbar .btn.btn-export-pdf,
.export-actions.export-toolbar .btn.btn-export-pdf {
  border-color: var(--color-danger-border);
  color: var(--color-danger-ink);
}

.export-toolbar .btn.btn-export:hover,
.export-toolbar a.btn.btn-export:hover,
.action-row.export-toolbar .btn.btn-export:hover,
.export-actions.export-toolbar .btn.btn-export:hover {
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.btn.btn-export,
a.btn.btn-export,
button.btn.btn-export,
.btn.btn-export.btn-primary,
a.btn.btn-export.btn-primary,
.btn.btn-export.btn-secondary,
a.btn.btn-export.btn-secondary,
.btn.btn-export.btn-report,
a.btn.btn-export.btn-report {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-strong);
}

.btn.btn-export.btn-export-excel,
a.btn.btn-export.btn-export-excel,
button.btn.btn-export.btn-export-excel {
  border-color: var(--color-success-border);
  color: var(--color-success-ink);
}

.btn.btn-export.btn-export-pdf,
a.btn.btn-export.btn-export-pdf,
button.btn.btn-export.btn-export-pdf {
  border-color: var(--color-danger-border);
  color: var(--color-danger-ink);
}

.btn.btn-export:hover,
a.btn.btn-export:hover,
button.btn.btn-export:hover {
  background: var(--surface);
}

.inventory-admin-dashboard-page .inventory-ranking-head {
  align-items: center;
  gap: var(--space-4);
}

.inventory-admin-dashboard-page .page-hero .page-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
}

.inventory-admin-dashboard-page .page-hero .page-hero-icon {
  grid-row: 1 / span 3;
  margin: 0;
}

.inventory-admin-dashboard-page .page-hero .page-kicker,
.inventory-admin-dashboard-page .page-hero .page-title,
.inventory-admin-dashboard-page .page-hero .page-subtitle {
  grid-column: 2;
}

.inventory-admin-dashboard-page .inventory-month-filter,
.inventory-admin-dashboard-page form.inventory-month-filter {
  width: min(100%, 460px);
  max-width: 100%;
  margin: 0;
}

.inventory-admin-dashboard-page .inventory-month-filter .filter-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.inventory-admin-dashboard-page .inventory-month-filter input[type="month"] {
  width: 100%;
}

.inventory-admin-dashboard-page .inventory-month-filter .form-actions {
  align-self: end;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  border: 0;
}

.inventory-admin-dashboard-page .inventory-month-filter .btn {
  white-space: nowrap;
}

.inventory-admin-dashboard-page .inventory-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-3);
}

.inventory-admin-dashboard-page .inventory-rank-card {
  --rank-accent: var(--color-primary);
  --rank-border: var(--color-primary-border);
  position: relative;
  display: grid;
  gap: var(--space-2);
  min-height: 116px;
  padding: var(--space-4);
  overflow: hidden;
  border-color: var(--rank-border);
  background: var(--surface);
}

.inventory-admin-dashboard-page .inventory-rank-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--rank-accent);
}

.inventory-admin-dashboard-page .inventory-rank-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.inventory-admin-dashboard-page .inventory-rank-icon,
.inventory-admin-dashboard-page .inventory-rank-card .metric-icon {
  background: var(--surface);
  color: var(--rank-accent);
  border-color: var(--rank-border);
}

.inventory-admin-dashboard-page .inventory-rank-name {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.inventory-admin-dashboard-page .inventory-rank-card.is-rank-1 {
  --rank-accent: var(--color-warning);
  --rank-border: var(--color-warning-border);
}

.inventory-admin-dashboard-page .inventory-rank-card.is-rank-2 {
  --rank-accent: var(--color-info);
  --rank-border: var(--color-info-border);
}

.inventory-admin-dashboard-page .inventory-rank-card.is-rank-3 {
  --rank-accent: var(--color-purple);
  --rank-border: var(--color-purple-border);
}

.inventory-admin-dashboard-page .inventory-admin-pdpa-section {
  gap: var(--space-4);
}

.inventory-admin-dashboard-page .inventory-admin-pdpa-grid.metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inventory-admin-dashboard-page .inventory-admin-pdpa-actions.action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inventory-admin-dashboard-page .inventory-admin-pdpa-actions .action-card {
  min-height: 118px;
}

@media (max-width: 1180px) {
  .inventory-admin-dashboard-page .inventory-admin-pdpa-grid.metric-grid,
  .inventory-admin-dashboard-page .inventory-admin-pdpa-actions.action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .inventory-admin-dashboard-page .inventory-ranking-head {
    align-items: stretch;
  }

  .inventory-admin-dashboard-page .inventory-month-filter,
  .inventory-admin-dashboard-page form.inventory-month-filter {
    width: 100%;
  }

  .inventory-admin-dashboard-page .inventory-month-filter .filter-grid {
    grid-template-columns: 1fr;
  }

  .export-toolbar,
  .action-row.export-toolbar,
  .export-actions.export-toolbar {
    justify-content: stretch;
  }

  .export-card,
  .section-card.export-card,
  .action-card.export-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .export-card .export-toolbar {
    width: 100%;
    justify-content: stretch;
  }

  .export-toolbar .btn,
  .export-toolbar .btn-export {
    width: 100%;
  }

  .inventory-admin-dashboard-page .inventory-rank-grid {
    grid-template-columns: 1fr;
  }

  .inventory-admin-dashboard-page .inventory-admin-pdpa-section .section-head {
    align-items: stretch;
  }

  .inventory-admin-dashboard-page .inventory-admin-pdpa-section .section-head .btn {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .inventory-admin-dashboard-page .page-hero .page-hero-main {
    grid-template-columns: 1fr;
  }

  .inventory-admin-dashboard-page .page-hero .page-hero-icon,
  .inventory-admin-dashboard-page .page-hero .page-kicker,
  .inventory-admin-dashboard-page .page-hero .page-title,
  .inventory-admin-dashboard-page .page-hero .page-subtitle {
    grid-column: 1;
  }

  .inventory-admin-dashboard-page .page-hero .page-hero-icon {
    grid-row: auto;
  }

  .inventory-admin-dashboard-page .inventory-admin-pdpa-grid.metric-grid,
  .inventory-admin-dashboard-page .inventory-admin-pdpa-actions.action-grid {
    grid-template-columns: 1fr;
  }
}

.badge-soft,
.pill-soft,
.status-badge {
  border-radius: var(--radius-pill);
  font-weight: 800;
}

.badge-soft.is-purple,
.pill-soft.is-purple {
  border-color: var(--color-purple-border);
  background: var(--color-purple-soft);
  color: var(--color-purple-ink);
}

.badge-soft.is-teal,
.pill-soft.is-teal {
  border-color: var(--color-teal-border);
  background: var(--color-teal-soft);
  color: var(--color-teal-ink);
}

.alert-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.table-wrap,
.table-scroll {
  background: var(--surface);
}

.nice-table {
  background: var(--surface);
  border-color: var(--border-soft);
}

.nice-table thead th {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-muted) 100%);
  color: var(--text-strong);
}

.nice-table th,
.nice-table td {
  border-bottom-color: var(--border-soft);
}

.nice-table tbody tr:hover {
  background: var(--surface-muted);
}

.modal-backdrop {
  background: rgba(15, 33, 27, 0.46);
  backdrop-filter: blur(10px);
}

.modal-card {
  border: 1px solid var(--border-soft);
}

.modal-head {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.calendar-surface,
.calendar-card,
.calendar-shell,
.fc,
.chart-card,
.chart-panel {
  border-color: var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.fc .fc-button-primary,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.fc .fc-daygrid-day.fc-day-today {
  background: var(--color-primary-soft);
}

/* Icon/emoji white-surface convergence.
   Keep semantic tone through text color, border, and accent rails instead of colored icon/card fills. */
body {
  background: var(--surface);
}

body .page-hero.page-hero.page-hero,
body .metric-card.metric-card.metric-card,
body .action-card.action-card.action-card {
  background: var(--surface);
}

body .metric-card.metric-card.metric-card.is-primary,
body .metric-card.metric-card.metric-card.is-info,
body .metric-card.metric-card.metric-card.is-warning,
body .metric-card.metric-card.metric-card.is-success,
body .metric-card.metric-card.metric-card.is-danger,
body .metric-card.metric-card.metric-card.is-purple,
body .metric-card.metric-card.metric-card.is-teal,
body .metric-card.metric-card.metric-card.is-neutral,
body .action-card.action-card.action-card.is-primary,
body .action-card.action-card.action-card.is-info,
body .action-card.action-card.action-card.is-warning,
body .action-card.action-card.action-card.is-success,
body .action-card.action-card.action-card.is-danger,
body .action-card.action-card.action-card.is-purple,
body .action-card.action-card.action-card.is-teal,
body .action-card.action-card.action-card.is-neutral {
  background: var(--surface);
}

body .page-hero.page-hero.page-hero::after {
  background: var(--border-soft);
}

body .page-hero-icon.page-hero-icon.page-hero-icon,
body .metric-icon.metric-icon.metric-icon,
body .action-icon.action-icon.action-icon,
body .empty-state-icon.empty-state-icon.empty-state-icon,
body .alert-icon.alert-icon.alert-icon,
body .menu-link .icon.icon,
body .topbar-btn .icon.icon,
body .user-chip-icon.user-chip-icon,
body .attendance-summary-icon.attendance-summary-icon,
body .attendance-summary-icon-in.attendance-summary-icon-in,
body .attendance-summary-icon-out.attendance-summary-icon-out,
body .attendance-summary-icon-total.attendance-summary-icon-total,
body .attendance-summary-icon-late.attendance-summary-icon-late {
  border: 1px solid var(--theme-icon-border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

body .page-hero-icon.page-hero-icon.page-hero-icon,
body .action-icon.action-icon.action-icon,
body .empty-state-icon.empty-state-icon.empty-state-icon,
body .alert-icon.alert-icon.alert-icon,
body .menu-link .icon.icon,
body .topbar-btn .icon.icon,
body .user-chip-icon.user-chip-icon {
  color: var(--theme-icon-ink);
}

body .metric-card.metric-card.is-primary .metric-icon { color: var(--color-primary-ink); }
body .metric-card.metric-card.is-info .metric-icon { color: var(--color-info-ink); }
body .metric-card.metric-card.is-warning .metric-icon { color: var(--color-warning-ink); }
body .metric-card.metric-card.is-success .metric-icon { color: var(--color-success-ink); }
body .metric-card.metric-card.is-danger .metric-icon { color: var(--color-danger-ink); }
body .metric-card.metric-card.is-purple .metric-icon { color: var(--color-purple-ink); }
body .metric-card.metric-card.is-teal .metric-icon { color: var(--color-teal-ink); }
body .metric-card.metric-card.is-neutral .metric-icon { color: var(--text-soft); }

/* Central colorful icon and progress accents. */
body .page-hero-icon.page-hero-icon.page-hero-icon,
body .metric-icon.metric-icon.metric-icon,
body .action-icon.action-icon.action-icon,
body .upload-icon.upload-icon.upload-icon,
body .filter-icon.filter-icon.filter-icon,
body .export-icon.export-icon.export-icon,
body .empty-state-icon.empty-state-icon.empty-state-icon,
body .alert-icon.alert-icon.alert-icon {
  color: var(--ui-icon-accent, var(--theme-icon-ink));
}

body .page-hero-icon.page-hero-icon.page-hero-icon {
  --ui-icon-accent: var(--color-primary-ink);
}

.metric-grid > .metric-card:nth-child(6n + 1),
.action-grid > .action-card:nth-child(6n + 1),
.export-toolbar > .export-card:nth-child(6n + 1),
.record-list > .record-card:nth-child(6n + 1) {
  --ui-icon-accent: var(--color-primary-ink);
}

.metric-grid > .metric-card:nth-child(6n + 2),
.action-grid > .action-card:nth-child(6n + 2),
.export-toolbar > .export-card:nth-child(6n + 2),
.record-list > .record-card:nth-child(6n + 2) {
  --ui-icon-accent: var(--color-success-ink);
}

.metric-grid > .metric-card:nth-child(6n + 3),
.action-grid > .action-card:nth-child(6n + 3),
.export-toolbar > .export-card:nth-child(6n + 3),
.record-list > .record-card:nth-child(6n + 3) {
  --ui-icon-accent: var(--color-info-ink);
}

.metric-grid > .metric-card:nth-child(6n + 4),
.action-grid > .action-card:nth-child(6n + 4),
.export-toolbar > .export-card:nth-child(6n + 4),
.record-list > .record-card:nth-child(6n + 4) {
  --ui-icon-accent: var(--color-warning-ink);
}

.metric-grid > .metric-card:nth-child(6n + 5),
.action-grid > .action-card:nth-child(6n + 5),
.export-toolbar > .export-card:nth-child(6n + 5),
.record-list > .record-card:nth-child(6n + 5) {
  --ui-icon-accent: var(--color-danger-ink);
}

.metric-grid > .metric-card:nth-child(6n),
.action-grid > .action-card:nth-child(6n),
.export-toolbar > .export-card:nth-child(6n),
.record-list > .record-card:nth-child(6n) {
  --ui-icon-accent: var(--color-purple-ink);
}

body .metric-card.metric-card.is-primary,
body .action-card.action-card.is-primary,
body .record-card.record-card.is-primary { --ui-icon-accent: var(--color-primary-ink); }
body .metric-card.metric-card.is-info,
body .action-card.action-card.is-info,
body .record-card.record-card.is-info { --ui-icon-accent: var(--color-info-ink); }
body .metric-card.metric-card.is-warning,
body .action-card.action-card.is-warning,
body .record-card.record-card.is-warning { --ui-icon-accent: var(--color-warning-ink); }
body .metric-card.metric-card.is-success,
body .action-card.action-card.is-success,
body .record-card.record-card.is-success { --ui-icon-accent: var(--color-success-ink); }
body .metric-card.metric-card.is-danger,
body .action-card.action-card.is-danger,
body .record-card.record-card.is-danger { --ui-icon-accent: var(--color-danger-ink); }
body .metric-card.metric-card.is-purple,
body .action-card.action-card.is-purple,
body .record-card.record-card.is-purple { --ui-icon-accent: var(--color-purple-ink); }
body .metric-card.metric-card.is-teal,
body .action-card.action-card.is-teal,
body .record-card.record-card.is-teal { --ui-icon-accent: var(--color-teal-ink); }

body .btn.btn-primary .btn-icon,
body .btn.btn-success .btn-icon,
body .btn.btn-danger .btn-icon,
body .btn.btn-warning .btn-icon {
  color: currentColor;
}

.progressbar span,
.progress-bar span,
.progress-track span,
.progress-fill,
.progress-bar-fill,
.service-progress-bar span,
.wlog-progress span,
.leave-approval-progressbar span,
.face-progress-fill {
  background: var(--progress-rainbow);
}

/* Topbar control polish: language, notifications, and account controls. */
.topbar-actions {
  align-items: center !important;
  gap: 8px !important;
}

.topbar-actions .lang-switch,
.topbar-actions .topbar-btn {
  height: 42px;
  min-height: 42px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.topbar-actions .lang-switch {
  padding: 4px;
  gap: 2px;
}

.topbar-actions .lang-switch a {
  height: 32px;
  min-height: 32px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: 14px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.topbar-actions .lang-switch a.active {
  background: var(--color-primary-soft);
  color: var(--color-primary-ink);
  box-shadow: none;
}

.topbar-actions .topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 12px;
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.topbar-actions .topbar-btn:hover,
.topbar-actions .topbar-btn:focus-visible {
  border-color: var(--color-primary-border);
  background: var(--surface-muted);
  box-shadow: var(--shadow-card);
  transform: none;
}

.topbar-actions .topbar-btn .icon,
.topbar-actions .user-chip-icon,
.topbar-actions .layout-user-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 12px;
}

.topbar-actions .layout-user-avatar {
  border: 1px solid var(--theme-icon-border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.topbar-actions .notif-btn {
  min-width: 148px;
}

.topbar-actions .layout-notif-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.topbar-actions .profile-btn {
  max-width: min(320px, 36vw);
  padding-right: 8px;
}

.topbar-actions .user-chip-name {
  min-width: 0;
  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
}

.topbar-actions .user-chip-role {
  flex: 0 0 auto;
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--text-soft);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
}

@media (max-width: 720px) {
  .topbar-actions .notif-btn {
    min-width: 0;
  }

  .topbar-actions .profile-btn {
    max-width: 100%;
  }

  .topbar-actions .user-chip-name {
    max-width: none;
  }
}

@media (max-width: 420px) {
  .topbar-actions .topbar-btn {
    padding-inline: 10px;
  }

  .topbar-actions .notif-btn > span:nth-child(2) {
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-actions .user-chip-role {
    max-width: 96px;
  }
}

@media (max-width: 1200px) {
  .app-layout {
    max-width: 100%;
  }
}

@media (max-width: 960px) {
  .app-layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .main {
    border-radius: var(--radius-xl);
  }
}

@media (max-width: 720px) {
  .topbar-inner {
    padding-inline: var(--space-3);
  }

  .app-layout {
    padding-inline: var(--space-3);
    margin-top: var(--space-3);
  }

  .page-hero,
  .main {
    border-radius: var(--radius-lg);
  }

  .metric-card {
    min-height: 96px;
  }
}

/* Staff dashboard layout hardening.
   This page had several legacy dashboard grids in the cascade; keep the page flow
   vertical and let only the inner dashboard sections create columns. */
.staff-dashboard-page.page-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row;
  align-items: stretch;
  width: min(100%, 1180px);
  max-width: 1180px;
  margin-inline: auto;
  gap: var(--space-5);
  overflow: visible;
}

.staff-dashboard-page.page-stack > .section-card,
.staff-dashboard-page.page-stack > .page-hero,
.staff-dashboard-page.page-stack > .card {
  grid-area: auto !important;
  grid-column: 1 / -1 !important;
  width: 100%;
  min-width: 0;
}

.staff-dashboard-page .staff-dashboard-hero.page-hero { order: 1; }
.staff-dashboard-page .staff-overview-section.section-card { order: 2; }
.staff-dashboard-page .attendance-dashboard-panel.section-card { order: 3; }
.staff-dashboard-page .staff-leave-entitlement-card.section-card { order: 4; }
.staff-dashboard-page .staff-quick-actions-card.section-card { order: 5; }

.staff-dashboard-page .staff-dashboard-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  align-items: stretch;
  gap: var(--space-4);
}

.staff-dashboard-page .staff-dashboard-hero .page-hero-main {
  min-width: 0;
}

.staff-dashboard-page .staff-dashboard-hero .page-hero-aside {
  align-content: center;
}

.staff-dashboard-page .staff-overview-section.section-card,
.staff-dashboard-page .attendance-dashboard-panel.section-card,
.staff-dashboard-page .staff-quick-actions-card.section-card,
.staff-dashboard-page .staff-dashboard-summary-card.section-card,
.staff-dashboard-page .staff-leave-entitlement-card.section-card {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  align-content: start;
}

.staff-dashboard-page .staff-overview-section.section-card,
.staff-dashboard-page .attendance-dashboard-panel.section-card,
.staff-dashboard-page .staff-leave-entitlement-card.section-card,
.staff-dashboard-page .staff-quick-actions-card.section-card {
  padding: var(--space-5);
}

.staff-dashboard-page .staff-leave-entitlement-card .recent-card-head.section-head,
.staff-dashboard-page .staff-quick-actions-card .recent-card-head.section-head,
.staff-dashboard-page .staff-overview-section .recent-card-head.section-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding-bottom: var(--space-3);
}

.staff-dashboard-page .staff-overview-grid.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.staff-dashboard-page .attendance-stats-head.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, auto);
  align-items: end;
}

.staff-dashboard-page .staff-action-grid.action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.staff-dashboard-page .staff-dashboard-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-dashboard-page .staff-summary-panel.record-card {
  min-height: 0;
}

.staff-dashboard-page .staff-summary-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-dashboard-page .staff-leave-type-grid.staff-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.staff-dashboard-page .staff-leave-type-grid .staff-mini-card {
  min-width: 0;
  min-height: 0;
}

.staff-dashboard-page .attendance-snapshot.content-box {
  min-height: 0;
}

.staff-dashboard-page .attendance-insight-grid.attendance-kpi-grid {
  grid-template-columns: minmax(240px, 0.9fr) minmax(320px, 1.2fr) minmax(240px, 0.9fr);
}

@media (max-width: 1100px) {
  .staff-dashboard-page .staff-overview-grid.metric-grid,
  .staff-dashboard-page .staff-action-grid.action-grid,
  .staff-dashboard-page .staff-dashboard-summary-grid,
  .staff-dashboard-page .staff-leave-type-grid.staff-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-dashboard-page .attendance-stats-head.section-head,
  .staff-dashboard-page .attendance-snapshot.content-box,
  .staff-dashboard-page .attendance-insight-grid.attendance-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-dashboard-page .attendance-stats-filter.filter-panel {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .staff-dashboard-page.page-stack {
    gap: var(--space-4);
  }

  .staff-dashboard-page .staff-dashboard-hero.page-hero,
  .staff-dashboard-page .staff-overview-grid.metric-grid,
  .staff-dashboard-page .staff-action-grid.action-grid,
  .staff-dashboard-page .staff-dashboard-summary-grid,
  .staff-dashboard-page .staff-leave-type-grid.staff-mini-grid,
  .staff-dashboard-page .staff-summary-stat-grid,
  .staff-dashboard-page .staff-dashboard-detail-callout.content-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-dashboard-page .attendance-stats-filter-grid.filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .staff-dashboard-page .staff-dashboard-detail-callout .btn,
  .staff-dashboard-page .staff-summary-link.btn,
  .staff-dashboard-page .attendance-submit-btn.btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* Attendance department calendar compact filter refinement. */
.dept-cal-page .dept-cal-filter-card.section-card {
  padding: var(--space-4);
}

.dept-cal-page .dept-cal-filter-card .dept-cal-section-head.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.dept-cal-page .dept-cal-active-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  min-width: 0;
}

.dept-cal-page .dept-cal-active-filters .badge-soft {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dept-cal-page .dept-cal-filter.filter-panel {
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 0;
}

.dept-cal-page .dept-cal-filter-main {
  display: grid;
  grid-template-columns: minmax(150px, .75fr) minmax(150px, .75fr) minmax(150px, .8fr) minmax(240px, 1.45fr) auto;
  align-items: end;
  gap: var(--space-3);
}

.dept-cal-page .dept-cal-filter-main .dept-cal-field.form-field {
  gap: 6px;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-field.form-field input,
.dept-cal-page .dept-cal-filter-main .dept-cal-field.form-field select {
  min-height: 42px;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
  flex-wrap: nowrap;
  align-self: end;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: 0;
  border-top: 0;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .btn {
  min-width: 112px;
  white-space: nowrap;
}

.dept-cal-page .field-worklines.form-field {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.dept-cal-page .field-worklines.form-field .dept-cal-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  cursor: pointer;
}

.dept-cal-page .field-worklines.form-field .dept-cal-field-head::-webkit-details-marker {
  display: none;
}

.dept-cal-page .field-worklines.form-field .dept-cal-field-head::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.dept-cal-page .field-worklines.form-field[open] .dept-cal-field-head::after {
  content: "-";
}

.dept-cal-page .dept-cal-filter-pill.badge-soft {
  min-width: 0;
  max-width: min(420px, 52vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dept-cal-page .dept-cal-workline-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) 0 0;
}

.dept-cal-page .dept-cal-workline-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-strong);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
}

.dept-cal-page .dept-cal-workline-item input {
  width: 14px;
  height: 14px;
  accent-color: var(--color-primary);
}

@media (max-width: 1100px) {
  .dept-cal-page .dept-cal-filter-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dept-cal-page .dept-cal-filter-main .field-search,
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    grid-column: 1 / -1;
  }

  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .dept-cal-page .dept-cal-filter-card .dept-cal-section-head.section-head,
  .dept-cal-page .dept-cal-filter-main {
    grid-template-columns: 1fr;
  }

  .dept-cal-page .dept-cal-active-filters,
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    justify-content: flex-start;
  }

  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .btn,
  .dept-cal-page .dept-cal-filter-pill.badge-soft {
    width: 100%;
    max-width: 100%;
  }
}

/* Attendance department calendar: make filters read as a compact toolbar, not a form stack. */
.dept-cal-page .dept-cal-filter-card.section-card {
  padding: 14px 16px;
}

.dept-cal-page .dept-cal-filter-card .dept-cal-section-head.section-head {
  min-height: 0;
  padding-bottom: 10px;
}

.dept-cal-page .dept-cal-filter-card .dept-cal-section-titlebar {
  align-items: center;
}

.dept-cal-page .dept-cal-filter-card .dept-cal-section-icon {
  width: 32px;
  height: 32px;
}

.dept-cal-page .dept-cal-filter-card .section-kicker {
  display: none;
}

.dept-cal-page .dept-cal-filter-card .section-title {
  font-size: 18px;
  line-height: 1.2;
}

.dept-cal-page .dept-cal-filter.filter-panel {
  display: block;
  padding-top: 12px;
}

.dept-cal-page .dept-cal-filter-main {
  align-items: end;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-field.form-field {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-field.form-field .field-label {
  margin: 0 0 5px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 900;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-field.form-field input,
.dept-cal-page .dept-cal-filter-main .dept-cal-field.form-field select {
  width: 100%;
  min-height: 40px;
  padding-block: 8px;
  font-size: 13.5px;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
  margin: 0;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .btn {
  min-width: 98px;
  min-height: 40px;
  padding-inline: 14px;
}

.dept-cal-page .field-worklines.form-field {
  margin-top: 10px;
}

.dept-cal-page .field-worklines.form-field .dept-cal-field-head {
  min-height: 38px;
  padding: 8px 11px;
  font-size: 12.5px;
}

@media (min-width: 901px) {
  .dept-cal-page .dept-cal-filter-main {
    grid-template-columns: 180px 170px 170px minmax(220px, 1fr) auto;
  }

  .dept-cal-page .dept-cal-filter-main .field-search,
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    grid-column: auto;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .dept-cal-page .dept-cal-filter-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dept-cal-page .dept-cal-filter-main .field-search,
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    grid-column: 1 / -1;
  }
}

/* Attendance department calendar: standard filter form layout. */
.dept-cal-page .dept-cal-filter-card.section-card {
  padding: var(--space-4);
}

.dept-cal-page .dept-cal-filter-card .dept-cal-section-head.section-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.dept-cal-page .dept-cal-filter-card .section-kicker {
  display: none;
}

.dept-cal-page .dept-cal-filter.filter-panel {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 0;
}

.dept-cal-page .dept-cal-filter-main {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3);
}

.dept-cal-page .dept-cal-filter-main .dept-cal-field.form-field {
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-field.form-field .field-label {
  display: block;
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 900;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-field.form-field input,
.dept-cal-page .dept-cal-filter-main .dept-cal-field.form-field select {
  width: 100%;
  min-height: 42px;
  font-size: 14px;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  gap: var(--space-2);
  margin-top: 2px;
  padding-top: 0;
  border-top: 0;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .btn {
  min-width: 120px;
  min-height: var(--btn-height);
}

.dept-cal-page .field-worklines.form-field {
  margin-top: 0;
}

.dept-cal-page .field-worklines.form-field .dept-cal-field-head {
  min-height: 40px;
  padding: 8px 11px;
  border-color: var(--border-soft);
  background: var(--surface-subtle);
  font-size: 12.5px;
}

@media (max-width: 1024px) {
  .dept-cal-page .dept-cal-filter-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dept-cal-page .dept-cal-filter-main {
    grid-template-columns: 1fr;
  }

  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Attendance department calendar: neutralize old span rules inside the standard filter grid. */
.dept-cal-page .dept-cal-filter-main .dept-cal-field.field-month,
.dept-cal-page .dept-cal-filter-main .dept-cal-field.field-scope,
.dept-cal-page .dept-cal-filter-main .dept-cal-field.field-type,
.dept-cal-page .dept-cal-filter-main .dept-cal-field.field-search {
  grid-column: auto;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

@media (max-width: 1024px) {
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .dept-cal-page .dept-cal-filter-main .dept-cal-field.field-month,
  .dept-cal-page .dept-cal-filter-main .dept-cal-field.field-scope,
  .dept-cal-page .dept-cal-filter-main .dept-cal-field.field-type,
  .dept-cal-page .dept-cal-filter-main .dept-cal-field.field-search,
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    grid-column: 1 / -1;
  }
}

/* Attendance department calendar: tighten standard filter spacing and inline workline control. */
.dept-cal-page .dept-cal-filter-card.section-card {
  padding: 14px 16px 16px;
}

.dept-cal-page .dept-cal-filter-card .dept-cal-section-head.section-head {
  padding-bottom: 10px;
}

.dept-cal-page .dept-cal-filter.filter-panel {
  padding-top: 12px;
}

.dept-cal-page .dept-cal-filter-main {
  row-gap: 12px;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto auto;
  align-items: start;
  justify-content: stretch;
  gap: var(--space-2);
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .field-worklines.form-field {
  width: min(100%, 520px);
  margin: 0;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .btn {
  align-self: start;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .dept-cal-workline-checks {
  position: absolute;
  z-index: 30;
  width: min(520px, calc(100vw - 48px));
  margin-top: 6px;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

@media (max-width: 900px) {
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    grid-template-columns: 1fr auto auto;
  }
}

@media (max-width: 640px) {
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    grid-template-columns: 1fr;
  }

  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .field-worklines.form-field,
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .btn {
    width: 100%;
  }

  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .dept-cal-workline-checks {
    position: static;
    width: 100%;
  }
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .dept-cal-view-btn {
  min-width: 118px;
  min-height: 38px;
  padding-block: 8px;
}

/* Attendance department calendar: keep action controls from stretching. */
.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .field-worklines.form-field {
  flex: 0 1 calc(50% - var(--space-2));
  width: auto;
  max-width: 520px;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .dept-cal-view-btn,
.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .dept-cal-clear-btn {
  flex: 0 0 auto;
  width: auto;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .dept-cal-view-btn {
  min-width: 118px;
  min-height: 38px;
}

@media (max-width: 640px) {
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .field-worklines.form-field,
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .dept-cal-view-btn,
  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .dept-cal-clear-btn {
    flex-basis: 100%;
    width: 100%;
  }
}

/* Attendance department calendar: final filter and primary-action alignment. */
.dept-cal-page .dept-cal-page-hero.page-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-4);
}

.dept-cal-page .dept-cal-page-hero .dept-cal-hero-main {
  grid-column: 1;
  align-items: center;
}

.dept-cal-page .dept-cal-page-hero .dept-cal-toolbar.action-row {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  justify-content: flex-end;
}

.dept-cal-page .dept-cal-hero-panel {
  grid-column: 1 / -1;
  align-content: start;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.dept-cal-page .dept-cal-hero-metrics .metric-card {
  min-height: 86px;
  padding: var(--space-3);
}

.dept-cal-page .dept-cal-hero-metrics .metric-icon {
  width: 34px;
  height: 34px;
}

.dept-cal-page .dept-cal-toolbar.action-row {
  justify-content: flex-end;
  align-items: center;
}

.dept-cal-page .dept-cal-toolbar .btn {
  min-width: 0;
}

.dept-cal-page .dept-cal-filter-card.section-card {
  padding: var(--space-4);
}

.dept-cal-page .dept-cal-filter-main {
  display: grid;
  grid-template-columns: minmax(180px, .9fr) minmax(280px, 1.5fr) minmax(240px, 1.1fr) auto;
  align-items: end;
  gap: var(--space-3);
}

.dept-cal-page .dept-cal-filter-main .field-type,
.dept-cal-page .dept-cal-filter-main .field-search,
.dept-cal-page .dept-cal-filter-main .field-worklines,
.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
  grid-column: auto;
}

.dept-cal-page .dept-cal-filter-main .field-worklines.form-field {
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: end;
}

.dept-cal-page .dept-cal-filter-main .field-worklines.form-field .dept-cal-field-head {
  min-height: 42px;
}

.dept-cal-page .dept-cal-filter-main .field-worklines.form-field .dept-cal-workline-checks {
  position: absolute;
  z-index: 30;
  width: min(420px, calc(100vw - 48px));
  margin-top: 6px;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-self: end;
  gap: var(--space-2);
  padding-top: 0;
  border-top: 0;
}

.dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 118px;
  min-height: 42px;
}

@media (max-width: 1180px) {
  .dept-cal-page .dept-cal-filter-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .dept-cal-page .dept-cal-page-hero.page-hero {
    grid-template-columns: 1fr;
  }

  .dept-cal-page .dept-cal-page-hero .dept-cal-toolbar.action-row {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
  }

  .dept-cal-page .dept-cal-toolbar.action-row,
  .dept-cal-page .dept-cal-toolbar .btn {
    width: 100%;
    justify-content: center;
  }

  .dept-cal-page .dept-cal-filter-main {
    grid-template-columns: 1fr;
  }

  .dept-cal-page .dept-cal-filter-main .field-worklines.form-field .dept-cal-workline-checks {
    position: static;
    width: 100%;
  }

  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions.action-row {
    flex-wrap: wrap;
  }

  .dept-cal-page .dept-cal-filter-main .dept-cal-filter-actions .btn {
    width: 100%;
  }
}

/* Attendance department calendar: place count summary at calendar card top-right. */
.dept-cal-page .dept-cal-calendar-card .dept-cal-head.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.dept-cal-page .dept-cal-calendar-card .dept-cal-count.badge-soft {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}

.dept-cal-page .dept-cal-calendar-card .dept-cal-nav.action-row {
  grid-column: 1 / -1;
  grid-row: 2;
}

.dept-cal-page .dept-cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-3);
  padding: 0;
  border-top: 0;
  border-bottom: 0;
}

.dept-cal-page .dept-cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
  line-height: 1.25;
}

.dept-cal-page .dept-cal-legend-swatch {
  width: 18px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
}

.dept-cal-page .dept-cal-legend-swatch.holiday {
  background: var(--color-danger);
}

@media (max-width: 720px) {
  .dept-cal-page .dept-cal-calendar-card .dept-cal-head.section-head {
    grid-template-columns: 1fr;
  }

  .dept-cal-page .dept-cal-calendar-card .dept-cal-count.badge-soft,
  .dept-cal-page .dept-cal-calendar-card .dept-cal-nav.action-row {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* Attendance department calendar: align month-grid behavior with Meeting calendar. */
.dept-cal-page .dept-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
}

.dept-cal-page .dept-cal-weekday {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.dept-cal-page .dept-cal-day {
  min-width: 0;
  min-height: 138px !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
}

.dept-cal-page .dept-cal-day:hover,
.dept-cal-page .dept-cal-day.dept-cal-day-today {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.dept-cal-page .dept-cal-day-empty {
  border-color: var(--app-calendar-muted-border);
  background: var(--surface-muted);
  cursor: default;
}

.dept-cal-page .dept-cal-day-top {
  margin-bottom: 0;
}

.dept-cal-page .dept-cal-day-items {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.dept-cal-page .dept-cal-day-items:empty {
  display: none;
}

.dept-cal-page .dept-cal-day-badges {
  min-width: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.dept-cal-page .dept-cal-dayno {
  min-width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: var(--text-strong);
  line-height: 1;
}

.dept-cal-page .dept-cal-day-today .dept-cal-dayno {
  background: transparent;
  color: var(--text-strong);
  box-shadow: none;
}

.dept-cal-page .dept-cal-event {
  margin-bottom: 0;
  border-color: var(--dept-cal-tone-border, var(--border-soft));
  border-left-color: var(--dept-cal-tone-rail, var(--color-primary));
  border-radius: var(--radius-sm);
  background: var(--dept-cal-tone-bg, var(--surface-muted));
  color: var(--dept-cal-tone-text, var(--text-strong));
  box-shadow: none;
}

.dept-cal-page .dept-cal-event:hover,
.dept-cal-page .dept-cal-event:focus-visible {
  border-color: var(--dept-cal-tone-rail, var(--color-primary));
  background: var(--dept-cal-tone-bg, var(--surface-muted));
}

.dept-cal-page .dept-cal-event .dept-cal-type {
  color: var(--dept-cal-tone-ink, var(--color-primary-ink));
}

.dept-cal-page .dept-cal-event .dept-cal-name {
  color: var(--dept-cal-tone-text, var(--text-strong));
}

.dept-cal-page .dept-cal-event .dept-cal-event-workline {
  border-color: var(--dept-cal-tone-border, var(--border-soft));
  background: var(--surface);
  color: var(--dept-cal-tone-ink, var(--text-muted));
}

.dept-cal-page .dept-cal-holiday-note {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-danger-ink);
  cursor: pointer;
  text-align: left;
}

.dept-cal-page .dept-cal-holiday-badge {
  justify-self: start;
}

.dept-cal-page .dept-cal-holiday-name {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: block;
  overflow: hidden;
  color: var(--color-danger-ink);
  font-size: var(--font-size-xs);
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dept-cal-page .dept-cal-name {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

.dept-cal-page .dept-cal-day-row-holiday {
  border-color: var(--color-danger-border);
  background: var(--surface);
}

.dept-cal-page .dept-cal-day-row-holiday .dept-cal-day-type {
  color: var(--color-danger-ink);
}

@media (max-width: 760px) {
  .dept-cal-page .dept-cal-calendar-card {
    overflow-x: auto;
  }

  .dept-cal-page .dept-cal-grid {
    min-width: 760px;
  }
}

/* Shared calendar modal contract for meeting, attendance, and future calendar pages. */
.app-calendar-modal[hidden] {
  display: none !important;
}

.app-calendar-modal {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.app-calendar-modal-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--modal-backdrop-bg);
  backdrop-filter: blur(8px);
}

.app-calendar-modal-card.modal-card {
  position: relative;
  z-index: 1;
  width: min(780px, calc(100vw - var(--space-6)));
  max-height: min(760px, 92vh);
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

.app-calendar-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-soft);
}

.app-calendar-modal-kicker {
  display: block;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 800;
  line-height: 1.2;
}

.app-calendar-modal-title {
  margin: var(--space-1) 0 0;
  color: var(--text-strong);
  font-size: var(--font-size-xl);
  font-weight: 900;
  line-height: 1.25;
}

.app-calendar-modal-close.btn {
  flex: 0 0 auto;
}

.app-calendar-modal-body {
  min-height: 0;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  overflow: auto;
}

.app-calendar-modal-list {
  max-height: none;
  display: grid;
  gap: var(--space-3);
  overflow: visible;
}

.app-calendar-modal-item {
  margin: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-3);
  box-shadow: none;
}

.app-calendar-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}

.dept-cal-modal.app-calendar-modal .dept-cal-modal-titlebar {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.dept-cal-modal.app-calendar-modal .dept-cal-day-row {
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: start;
}

.dept-cal-modal.app-calendar-modal .dept-cal-day-main {
  min-width: 0;
  display: grid;
  gap: var(--space-2);
}

.dept-cal-modal.app-calendar-modal .dept-cal-day-detail-groups {
  display: grid;
  gap: var(--space-2);
}

.dept-cal-modal.app-calendar-modal .dept-cal-day-detail-group {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.dept-cal-modal.app-calendar-modal .dept-cal-day-detail-heading {
  color: var(--color-primary-ink);
  font-size: var(--font-size-xs);
  font-weight: 900;
  line-height: 1.35;
}

.dept-cal-modal.app-calendar-modal .dept-cal-day-detail-line {
  display: grid;
  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.dept-cal-modal.app-calendar-modal .dept-cal-day-detail-line span {
  min-width: 0;
  color: var(--text-muted);
}

.dept-cal-modal.app-calendar-modal .dept-cal-day-detail-line strong {
  min-width: 0;
  color: var(--text-strong);
  font-weight: 800;
}

.dept-cal-modal.app-calendar-modal .dept-cal-day-detail-line-wide {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 640px) {
  .app-calendar-modal {
    align-items: flex-end;
    padding: var(--space-2);
  }

  .app-calendar-modal-card.modal-card {
    width: 100%;
    max-height: 88vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .app-calendar-modal-head {
    gap: var(--space-3);
  }

  .app-calendar-modal-title {
    font-size: var(--font-size-lg);
  }

  .dept-cal-modal.app-calendar-modal .dept-cal-day-row {
    grid-template-columns: 1fr;
  }

  .dept-cal-modal.app-calendar-modal .dept-cal-day-detail-line {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .dept-cal-modal.app-calendar-modal .dept-cal-day-row .btn {
    width: 100%;
  }
}

/* Leave list: keep summary metrics in one clear desktop row. */
.leave-page .leave-hero > .leave-hero-metrics.leave-history-summary.metric-grid,
.leave-history-section .leave-history-summary.metric-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch;
}

.leave-page .leave-hero > .leave-hero-metrics .leave-history-summary-card.metric-card,
.leave-history-section .leave-history-summary-card.metric-card {
  min-width: 0;
}

.leave-page .leave-hero > .leave-hero-metrics .leave-history-summary-card .metric-sub,
.leave-history-section .leave-history-summary-card .metric-sub {
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .leave-page .leave-hero > .leave-hero-metrics.leave-history-summary.metric-grid,
  .leave-history-section .leave-history-summary.metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .leave-page .leave-hero > .leave-hero-metrics.leave-history-summary.metric-grid,
  .leave-history-section .leave-history-summary.metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .leave-page .leave-hero > .leave-hero-metrics.leave-history-summary.metric-grid,
  .leave-history-section .leave-history-summary.metric-grid {
    grid-template-columns: 1fr !important;
  }
}

html.app-modal-scroll-lock,
body.app-modal-scroll-lock {
  overflow: hidden;
}

/* Rental units: keep create/manage popups to one visible scroll area. */
.rental-unit-modal {
  z-index: 5000;
}

.rental-unit-modal-dialog.modal-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: min(1040px, calc(100vw - var(--space-6)));
  max-height: min(92dvh, 920px);
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.rental-unit-create-dialog.modal-card {
  width: min(1000px, calc(100vw - var(--space-6)));
}

.rental-unit-modal-head {
  flex: 0 0 auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.rental-unit-modal-title {
  align-items: start;
  gap: var(--space-3);
}

.rental-unit-modal-title h2 {
  font-size: 22px;
  line-height: 1.2;
}

.rental-unit-modal-title .page-kicker {
  margin-bottom: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  text-transform: none;
  width: max-content;
  max-width: 100%;
}

.rental-unit-modal-title p:not(.page-kicker) {
  margin-top: var(--space-1);
  max-width: 680px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.55;
}

.rental-unit-modal-form {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  gap: 0;
  min-height: 0;
  max-height: calc(min(92dvh, 920px) - 96px);
  overflow: hidden;
}

.rental-unit-modal-summary {
  flex: 0 0 auto;
  margin: var(--space-4) var(--space-5) 0;
}

.rental-unit-modal-body {
  flex: 0 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-4) var(--space-5);
}

.rental-unit-create-form .rental-unit-modal-body {
  padding-top: var(--space-4);
}

.rental-unit-modal-body .rental-unit-form-section:first-child {
  margin-top: var(--space-1);
}

.rental-units-page .rental-unit-modal-actions.form-actions {
  flex: 0 0 auto;
  margin: 0;
  align-items: center;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--surface);
}

.rental-unit-modal-actions .btn {
  width: auto;
  min-width: 136px;
}

@media (max-width: 680px) {
  .rental-unit-modal-dialog.modal-card {
    width: min(100%, calc(100vw - var(--space-4)));
    max-height: 96dvh;
  }

  .rental-unit-modal-head,
  .rental-unit-modal-body,
  .rental-unit-modal-actions {
    padding-inline: var(--space-3);
  }

  .rental-unit-modal-head {
    align-items: start;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .rental-unit-modal-title {
    gap: var(--space-2);
  }

  .rental-unit-modal-summary {
    margin: var(--space-3) var(--space-3) 0;
  }

  .rental-unit-modal-title h2 {
    font-size: 22px;
  }

  .rental-unit-modal-title p:not(.page-kicker) {
    font-size: 13px;
  }

  .rental-unit-create-form .rental-unit-modal-body {
    padding-top: var(--space-4);
  }

  .rental-units-page .rental-unit-modal-actions.form-actions {
    gap: var(--space-2);
    padding-block: var(--space-3);
  }
}

/* Inventory admin users: align directory filters with shared components. */
.users-page .users-directory-board.section-card {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.users-page .users-toolbar.section-head {
  margin: 0;
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.users-page .users-toolbar .section-title,
.users-page .users-toolbar .section-subtitle {
  margin: 0;
}

.users-page .users-search.filter-panel {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  box-shadow: none;
}

.users-page .users-search-grid.filter-grid {
  grid-template-columns: minmax(260px, 1.4fr) minmax(210px, .8fr) minmax(240px, .9fr);
  gap: var(--space-3);
}

.users-page .users-search-grid.filter-grid .is-wide {
  grid-column: auto;
}

.users-page .users-search .form-field {
  gap: var(--space-2);
}

.users-page .users-search input[type="text"],
.users-page .users-search select {
  width: 100%;
  min-height: var(--btn-height);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: none;
}

.users-page .users-search-actions.form-actions {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  justify-self: end;
  width: min(100%, 340px);
  margin: 0;
  padding: 0;
  background: transparent;
}

.users-page .users-search-actions.form-actions .btn {
  width: 100%;
  min-height: var(--btn-height);
}

.users-page .users-search-actions.form-actions.is-single {
  grid-template-columns: minmax(150px, 1fr);
  width: min(100%, 170px);
}

.users-page .user-directory-sections {
  margin-top: 0;
}

.users-page .users-hero.page-hero {
  background: var(--surface);
}

.users-page .users-hero .page-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
}

.users-page .users-hero .page-hero-icon {
  grid-row: 1 / span 3;
  margin: 0;
}

.users-page .users-hero .page-kicker,
.users-page .users-hero .page-title,
.users-page .users-hero .page-subtitle {
  grid-column: 2;
}

.users-page .users-hero-stats.page-hero-aside {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: min(100%, 320px);
  padding: var(--space-3);
  gap: var(--space-2);
}

.users-page .users-stat.metric-card {
  min-height: 84px;
  padding: var(--space-3);
  color: var(--text-strong);
  text-decoration: none;
}

.users-page .users-stat.metric-card span {
  color: var(--text-muted);
  font-weight: 800;
}

.users-page .users-stat.metric-card strong {
  color: var(--text-strong);
}

.users-page .user-add-card.section-card,
.users-page .workline-manager-card.section-card,
.users-page .users-directory-board.section-card {
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.users-page .panel-toggle-btn.btn,
.users-page .user-add-toggle.btn,
.users-page .workline-actions .btn,
.users-page .user-add-actions .btn,
.users-page .user-item-actions .btn,
.users-page .user-edit-close-btn.btn,
.users-page .user-edit-cancel-btn.btn,
.users-page .user-edit-save-btn.btn,
.users-page .photo-crop-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-height);
  border-radius: var(--radius-md);
  font-weight: 800;
}

.users-page .photo-crop-reset {
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-strong);
}

.users-page .user-file-icon.upload-icon {
  flex: 0 0 auto;
}

.users-page .user-add-field.form-field,
.users-page .user-edit-fields .form-field,
.users-page .user-edit-permission-selects .form-field {
  gap: var(--space-2);
}

.users-page .user-edit-actions {
  gap: var(--space-2);
}

@media (max-width: 960px) {
  .users-page .users-search-grid.filter-grid {
    grid-template-columns: 1fr;
  }

  .users-page .users-search-actions.form-actions {
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .users-page .users-directory-board.section-card,
  .users-page .users-search.filter-panel {
    padding: var(--space-3);
  }

  .users-page .users-hero .page-hero-main {
    grid-template-columns: 1fr;
  }

  .users-page .users-hero .page-hero-icon,
  .users-page .users-hero .page-kicker,
  .users-page .users-hero .page-title,
  .users-page .users-hero .page-subtitle {
    grid-column: 1;
  }

  .users-page .users-hero .page-hero-icon {
    grid-row: auto;
  }

  .users-page .users-search-actions.form-actions {
    grid-template-columns: 1fr;
  }
}

/* Meeting book: central design-system alignment. */
.meeting-shell[data-meeting-book-page] {
  width: min(100%, var(--content-max-wide));
  margin-inline: auto;
  gap: var(--space-4);
}

.meeting-shell[data-meeting-book-page] .meeting-page-hero.page-hero,
.meeting-shell[data-meeting-book-page] .meeting-room-card.section-card,
.meeting-shell[data-meeting-book-page] .meeting-form-card.section-card {
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.meeting-shell[data-meeting-book-page] .meeting-page-hero .page-hero-main {
  min-width: min(100%, 520px);
}

.meeting-shell[data-meeting-book-page] .meeting-page-hero__meta.page-hero-aside {
  align-items: stretch;
  gap: var(--space-2);
}

.meeting-shell[data-meeting-book-page] .meeting-page-chip.badge-soft,
.meeting-shell[data-meeting-book-page] .meeting-page-chip.pill-soft,
.meeting-shell[data-meeting-book-page] .meeting-form-chip.pill-soft,
.meeting-shell[data-meeting-book-page] #roomStatus.badge-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-sm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  box-shadow: none;
  text-decoration: none;
}

.meeting-shell[data-meeting-book-page] .meeting-room-card.section-card,
.meeting-shell[data-meeting-book-page] .meeting-form-card.section-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
}

.meeting-shell[data-meeting-book-page] .meeting-section-head,
.meeting-shell[data-meeting-book-page] .meeting-form-head {
  gap: var(--space-3);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.meeting-shell[data-meeting-book-page] .meeting-section-head h3,
.meeting-shell[data-meeting-book-page] .meeting-form-head h3,
.meeting-shell[data-meeting-book-page] .meeting-section-subtitle {
  margin: 0;
}

.meeting-shell[data-meeting-book-page] .room-details {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}

.meeting-shell[data-meeting-book-page] .room-photo,
.meeting-shell[data-meeting-book-page] .room-photo-placeholder {
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.meeting-shell[data-meeting-book-page] .room-tags,
.meeting-shell[data-meeting-book-page] .room-amenities {
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.meeting-shell[data-meeting-book-page] .room-tag.badge-soft,
.meeting-shell[data-meeting-book-page] .amenity.badge-soft {
  margin: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
}

.meeting-shell[data-meeting-book-page] .meeting-form-card .form-field {
  gap: var(--space-2);
  margin: 0;
}

.meeting-shell[data-meeting-book-page] .meeting-form-card input,
.meeting-shell[data-meeting-book-page] .meeting-form-card select,
.meeting-shell[data-meeting-book-page] .meeting-form-card textarea {
  min-height: var(--input-height);
  border-color: var(--border-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: none;
}

.meeting-shell[data-meeting-book-page] .meeting-time-grid {
  gap: var(--space-3);
  margin: 0;
}

.meeting-shell[data-meeting-book-page] .meeting-extra-rooms {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  box-shadow: none;
}

.meeting-shell[data-meeting-book-page] .meeting-extra-rooms__head,
.meeting-shell[data-meeting-book-page] .meeting-extra-rooms__actions {
  gap: var(--space-3);
}

.meeting-shell[data-meeting-book-page] .meeting-extra-rooms__toggle.btn {
  min-height: var(--btn-height);
  gap: var(--space-2);
}

.meeting-shell[data-meeting-book-page] .meeting-extra-rooms__grid {
  gap: var(--space-3);
}

.meeting-shell[data-meeting-book-page] .meeting-extra-room-option.record-card {
  margin: 0;
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
}

.meeting-shell[data-meeting-book-page] .meeting-extra-room-option.is-primary {
  opacity: .65;
}

.meeting-shell[data-meeting-book-page] .meeting-time-caption {
  margin: 0;
  border-color: var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--text-muted);
}

.meeting-shell[data-meeting-book-page] .meeting-form-actions.form-actions {
  justify-content: flex-end;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) 0 0;
  position: static;
  bottom: auto;
  z-index: auto;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.meeting-shell[data-meeting-book-page] .meeting-form-actions.form-actions .btn {
  min-height: var(--btn-height);
}

@media (max-width: 720px) {
  .meeting-shell[data-meeting-book-page] .meeting-extra-rooms__head,
  .meeting-shell[data-meeting-book-page] .meeting-extra-rooms__actions,
  .meeting-shell[data-meeting-book-page] .meeting-form-actions.form-actions {
    align-items: stretch;
  }

  .meeting-shell[data-meeting-book-page] .meeting-extra-rooms__toggle.btn,
  .meeting-shell[data-meeting-book-page] .meeting-form-actions.form-actions .btn {
    width: 100%;
  }
}

/* Inventory items manage: the edit modal actions must stay in normal form flow. */
.modal-card.item-edit-modal .item-edit-head.modal-head {
  position: static;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  transform: none;
}

.modal-card.item-edit-modal .item-edit-actions.form-actions {
  position: static;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  transform: none;
  flex: 0 0 auto;
  margin: var(--space-1) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--border-soft);
  background: transparent;
  box-shadow: none;
}

/* Inventory catalog: detail dialog should use a full-screen centered overlay. */
.catalog-detail-modal.detail-modal {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  z-index: var(--z-modal, 1200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--modal-backdrop-bg);
}

.catalog-detail-modal.detail-modal.hidden {
  display: none;
}

.catalog-detail-modal .detail-head,
.catalog-detail-modal .detail-card.modal-card.section-card {
  position: static;
  inset: auto;
  transform: none;
}

/* Leave submission logs: clean audit dashboard layout. */
.leave-audit-page {
  width: min(100%, var(--content-max-wide));
  margin-inline: auto;
  gap: var(--space-4);
}

.leave-audit-hero.page-hero {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.68fr);
  align-items: stretch;
  gap: var(--space-4);
  padding: var(--space-5);
}

.leave-audit-hero-main.page-hero-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
  min-width: 0;
}

.leave-audit-hero-copy {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  max-width: 440px;
}

.leave-audit-hero-copy .page-title {
  max-width: 12em;
  text-wrap: balance;
}

.leave-audit-hero-aside.page-hero-aside {
  display: grid;
  align-content: center;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
}

.leave-audit-metrics.metric-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: var(--space-3);
}

.leave-audit-metric.metric-card {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-height: 126px;
  padding: var(--space-4);
}

.leave-audit-metric .metric-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  line-height: 1.35;
}

.leave-audit-metric-label,
.leave-audit-metric .metric-sub {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.leave-audit-metric .metric-value {
  line-height: 1;
}

.leave-audit-metric .metric-sub {
  line-height: 1.45;
}

.leave-audit-workspace {
  display: grid;
  gap: var(--space-4);
}

.leave-audit-filter.filter-panel,
.leave-audit-export-card.export-card,
.leave-audit-list-card.section-card {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.leave-audit-filter .section-head,
.leave-audit-list-head.section-head {
  align-items: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.leave-audit-filter-row.filter-grid {
  gap: var(--space-3);
  align-items: end;
}

.leave-audit-filter-main.filter-grid {
  grid-template-columns: minmax(360px, 1.6fr) minmax(220px, 1fr) minmax(220px, 1fr);
}

.leave-audit-filter-extra.filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.leave-audit-filter .form-field {
  min-width: 0;
}

.leave-audit-search-field.form-field {
  grid-column: auto;
}

.leave-audit-filter .app-choice-picker {
  width: 100%;
  min-width: 0;
}

.leave-audit-filter-actions.form-actions {
  justify-content: flex-end;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  background: transparent;
  box-shadow: none;
}

.leave-audit-filter-actions .btn {
  min-width: 150px;
}

.leave-audit-export-card.export-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.leave-audit-export-actions.export-toolbar {
  justify-content: flex-end;
  padding: 0;
  border-top: 0;
}

.leave-audit-export-actions .btn {
  width: auto;
  min-width: 150px;
}

.leave-audit-list-head.section-head {
  align-items: center;
  justify-content: space-between;
}

.leave-audit-record-list.record-list {
  gap: var(--space-3);
}

.leave-audit-record.record-card {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.leave-audit-record.record-card:hover,
.leave-audit-record.record-card:focus-visible,
.leave-audit-record.record-card.is-open {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-panel);
  outline: none;
}

.leave-audit-record.record-card:hover,
.leave-audit-record.record-card:focus-visible {
  transform: translateY(-1px);
}

.leave-audit-record-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
}

.leave-audit-record-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  min-width: 0;
}

.leave-audit-record-icon {
  width: 42px;
  height: 42px;
}

.leave-audit-record-identity h3,
.leave-audit-record-identity p {
  margin: 0;
}

.leave-audit-record-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.leave-audit-record-grid,
.leave-audit-detail-grid {
  display: grid;
  gap: var(--space-2);
}

.leave-audit-record-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.leave-audit-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.leave-audit-record .content-box,
.leave-audit-detail-section {
  min-width: 0;
  margin: 0;
}

.leave-audit-record .content-box strong,
.leave-audit-record .content-box small,
.leave-audit-detail-section strong,
.leave-audit-detail-section small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.leave-audit-record-details {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.leave-audit-record-details[hidden] {
  display: none;
}

.leave-audit-detail-section {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.leave-audit-toggle-hint {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  color: var(--text-muted);
  font-weight: 800;
}

.leave-audit-record.is-open .leave-audit-toggle-hint {
  color: var(--color-primary-ink);
}

/* Leave approval history: shared modal presentation and responsive detail layout. */
.leave-approval-history .lah-modal.modal-backdrop {
  z-index: 5000;
  align-items: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.leave-approval-history .lah-modal.modal-backdrop.is-open,
.leave-approval-history .lah-modal.modal-backdrop.is-closing {
  visibility: visible;
}

.leave-approval-history .lah-modal.modal-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.leave-approval-history .lah-modal-card.modal-card {
  width: min(920px, calc(100vw - var(--space-6)));
  max-height: min(820px, calc(100dvh - var(--space-6)));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(var(--space-2)) scale(.985);
  transition: opacity 180ms ease, transform 180ms ease;
}

.leave-approval-history .lah-modal.is-visible .lah-modal-card.modal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.leave-approval-history .lah-modal-head.modal-head {
  align-items: center;
  padding: var(--space-4) var(--space-5);
}

.leave-approval-history .lah-modal-heading {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.leave-approval-history .lah-modal-title {
  color: var(--text-strong);
  font-size: 22px;
  line-height: 1.3;
}

.leave-approval-history .lah-modal-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.leave-approval-history .lah-modal-body {
  min-height: 0;
  overflow: auto;
  padding: var(--space-4) var(--space-5) var(--space-5);
  overscroll-behavior: contain;
}

.leave-approval-history .lah-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.leave-approval-history .lah-modal-field {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
}

.leave-approval-history .lah-modal-prewrap {
  color: var(--text-strong);
  line-height: 1.65;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .leave-approval-history .lah-modal.modal-backdrop {
    align-items: flex-end;
    padding: var(--space-2);
  }

  .leave-approval-history .lah-modal-card.modal-card {
    width: 100%;
    max-height: 92dvh;
  }

  .leave-approval-history .lah-modal-head.modal-head,
  .leave-approval-history .lah-modal-body {
    padding: var(--space-3);
  }

  .leave-approval-history .lah-modal-close {
    width: auto;
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leave-approval-history .lah-modal.modal-backdrop,
  .leave-approval-history .lah-modal-card.modal-card {
    transition: none;
  }
}

@media (max-width: 1180px) {
  .leave-audit-hero.page-hero {
    grid-template-columns: 1fr;
  }

  .leave-audit-metrics.metric-grid,
  .leave-audit-filter-main.filter-grid,
  .leave-audit-filter-extra.filter-grid,
  .leave-audit-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .leave-audit-export-card.export-card {
    grid-template-columns: 1fr;
  }

  .leave-audit-export-actions.export-toolbar {
    justify-content: flex-start;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-soft);
  }
}

@media (max-width: 720px) {
  .leave-audit-page {
    gap: var(--space-3);
  }

  .leave-audit-hero.page-hero,
  .leave-audit-filter.filter-panel,
  .leave-audit-export-card.export-card,
  .leave-audit-list-card.section-card,
  .leave-audit-record.record-card {
    padding: var(--space-3);
  }

  .leave-audit-hero-main.page-hero-main,
  .leave-audit-metrics.metric-grid,
  .leave-audit-filter-main.filter-grid,
  .leave-audit-filter-extra.filter-grid,
  .leave-audit-record-summary,
  .leave-audit-record-grid,
  .leave-audit-detail-grid {
    grid-template-columns: 1fr;
  }

  .leave-audit-filter-actions.form-actions,
  .leave-audit-export-actions.export-toolbar,
  .leave-audit-list-head.section-head,
  .leave-audit-record-badges {
    width: 100%;
    justify-content: stretch;
  }

  .leave-audit-filter-actions .btn,
  .leave-audit-export-actions .btn,
  .leave-audit-record-badges .badge-soft,
  .leave-audit-toggle-hint {
    width: 100%;
    justify-content: center;
  }
}