:root {
  color-scheme: light;
  --navy-950: #0a1930;
  --navy-900: #102542;
  --navy-700: #254b71;
  --teal-600: #087f8c;
  --teal-100: #dff5f3;
  --orange-500: #e97823;
  --slate-700: #34445a;
  --slate-500: #64748b;
  --slate-300: #cbd5e1;
  --slate-100: #eef2f6;
  --white: #ffffff;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --success: #087443;
  --success-bg: #ecfdf3;
  --warning: #9a5200;
  --warning-bg: #fff7e8;
  --shadow: 0 12px 32px rgba(10, 25, 48, 0.09);
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: var(--navy-950);
  background: #f4f7fa;
  line-height: 1.55;
}

a { color: var(--navy-700); text-underline-offset: 0.18em; }
a:hover { color: var(--teal-600); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--navy-950);
  color: var(--white);
  box-shadow: 0 2px 12px rgba(10, 25, 48, 0.28);
}

.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  min-height: 64px;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand { color: var(--white); text-decoration: none; font-weight: 800; letter-spacing: 0.02em; }
.brand-mark { color: #55d6c2; margin-right: 0.45rem; }
.nav { display: flex; align-items: center; gap: 0.35rem; flex: 1; }
.nav { scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: #dce7f3; text-decoration: none; padding: 0.48rem 0.7rem; border-radius: 0.45rem; font-size: 0.94rem; white-space: nowrap; }
.nav a:hover { color: var(--white); background: rgba(255, 255, 255, 0.1); }
.nav a[aria-current="page"] { color: var(--white); background: rgba(255, 255, 255, 0.14); }
.user-menu { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; }
.logout-form { margin: 0; }

.container { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
h1, h2, h3 { line-height: 1.25; margin-top: 0; }
h1 { font-size: clamp(1.55rem, 3vw, 2.15rem); margin-bottom: 0.35rem; }
h2 { font-size: 1.22rem; }
.eyebrow { margin: 0 0 0.25rem; color: var(--teal-600); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.muted { color: var(--slate-500); }
.small { font-size: 0.84rem; }

.button, button {
  min-height: 44px;
  border: 0;
  border-radius: 0.55rem;
  padding: 0.68rem 1rem;
  background: var(--navy-900);
  color: var(--white);
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.button:hover, button:hover { background: var(--navy-700); color: var(--white); }
.button.primary { background: var(--teal-600); }
.button.primary:hover { background: #056b76; }
.button.secondary { background: var(--white); color: var(--navy-900); border: 1px solid var(--slate-300); }
.button.danger { background: var(--danger-bg); color: var(--danger); border: 1px solid #f4b9b3; }
.button.compact { min-height: 36px; padding: 0.4rem 0.68rem; font-size: 0.87rem; }

.card {
  background: var(--white);
  border: 1px solid #dbe3eb;
  border-radius: 0.85rem;
  box-shadow: var(--shadow);
  padding: 1.2rem;
}
.card + .card { margin-top: 1rem; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat { border-left: 4px solid var(--teal-600); }
.stat-number { font-size: 2rem; font-weight: 850; line-height: 1; margin: 0.2rem 0; }

.alert { border-radius: 0.6rem; padding: 0.85rem 1rem; margin: 0 0 1rem; border: 1px solid; }
.alert.success { color: var(--success); background: var(--success-bg); border-color: #a5e7c4; }
.alert.error { color: var(--danger); background: var(--danger-bg); border-color: #f4b9b3; }
.alert.warning { color: var(--warning); background: var(--warning-bg); border-color: #f0cf93; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; color: var(--slate-700); font-weight: 750; font-size: 0.9rem; margin-bottom: 0.35rem; }
input, select, textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #b8c5d3;
  border-radius: 0.52rem;
  background: var(--white);
  color: var(--navy-950);
  font: inherit;
  padding: 0.65rem 0.75rem;
}
textarea { min-height: 108px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(8, 127, 140, 0.18); border-color: var(--teal-600); }
.field-note { color: var(--slate-500); font-size: 0.8rem; margin-top: 0.28rem; }
.form-actions { display: flex; gap: 0.65rem; align-items: center; margin-top: 1.2rem; }

.event-entry-head { align-items: end; }
.event-entry-head .muted { max-width: 48rem; margin: 0; }
.event-entry-form { padding: 0; overflow: hidden; }
.event-form-section { padding: 1.25rem; }
.event-form-section + .event-form-section { border-top: 1px solid #e5ebf1; }
.event-section-heading { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.event-section-heading > span { flex: 0 0 2rem; height: 2rem; display: grid; place-items: center; color: var(--white); background: var(--navy-900); border-radius: 50%; font-weight: 850; font-variant-numeric: tabular-nums; }
.event-section-heading h2 { margin: 0; font-size: 1.1rem; }
.event-section-heading p { margin: 0.15rem 0 0; color: var(--slate-500); font-size: 0.84rem; }
.event-auto-meta { min-height: 46px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem; align-content: center; padding: 0.7rem 0.8rem; background: var(--slate-100); border: 1px solid #dbe3eb; border-radius: 0.55rem; }
.event-auto-meta > div { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.event-auto-meta span { color: var(--slate-500); font-size: 0.8rem; }
.event-auto-meta strong { color: var(--navy-900); font-size: 0.92rem; overflow-wrap: anywhere; }
.event-auto-meta small { grid-column: 1 / -1; color: var(--slate-500); font-size: 0.75rem; }
.event-entry-form .form-actions { margin: 0; padding: 1rem 1.25rem; background: var(--slate-100); border-top: 1px solid #dbe3eb; }
.event-assessment-field select { max-width: 22rem; }

.filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; align-items: end; }
.filters .search { grid-column: span 2; }
.filters .actions { display: flex; gap: 0.5rem; }

.table-wrap { overflow-x: auto; border-radius: 0.72rem; border: 1px solid #dbe3eb; }
table { width: 100%; border-collapse: collapse; background: var(--white); }
th, td { padding: 0.82rem 0.75rem; border-bottom: 1px solid #e5ebf1; text-align: left; vertical-align: top; }
th { background: var(--slate-100); color: var(--slate-700); font-size: 0.8rem; letter-spacing: 0.02em; white-space: nowrap; }
td { font-size: 0.92rem; }
tr:last-child td { border-bottom: 0; }
.row-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.row-actions form { margin: 0; }

.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.22rem 0.62rem; font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
.badge.positive, .badge.active { color: var(--success); background: var(--success-bg); }
.badge.improve, .badge.inactive { color: var(--danger); background: var(--danger-bg); }
.badge.neutral { color: var(--navy-700); background: #e7f0f8; }
.badge.pending { color: var(--warning); background: var(--warning-bg); }

.timeline { position: relative; margin-left: 0.55rem; padding-left: 1.35rem; border-left: 2px solid #b9cedc; }
.timeline-item { position: relative; margin: 0 0 1rem; }
.timeline-item::before { content: ""; position: absolute; left: -1.78rem; top: 1.05rem; width: 0.72rem; height: 0.72rem; background: var(--teal-600); border: 3px solid #e7f8f6; border-radius: 50%; }
.timeline-meta { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.55rem; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.detail-item { padding: 0.9rem; border-bottom: 1px solid #e5ebf1; }
.detail-item:nth-child(odd) { border-right: 1px solid #e5ebf1; }
.detail-item.full { grid-column: 1 / -1; border-right: 0; }
.detail-label { display: block; color: var(--slate-500); font-size: 0.8rem; font-weight: 750; margin-bottom: 0.25rem; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(145deg, var(--navy-950), #123b59 58%, #0d6971); }
.login-card { width: min(430px, 100%); background: var(--white); border-radius: 1rem; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26); padding: 2rem; }
.login-card .brand-block { color: var(--teal-600); font-weight: 850; letter-spacing: 0.08em; margin-bottom: 1.6rem; }
.empty { text-align: center; padding: 2.4rem 1rem; color: var(--slate-500); }
.review-filters { grid-template-columns: repeat(2, minmax(0, 15rem)) auto; margin-bottom: 1rem; }
.review-cards .stat-number.period { font-size: 1.05rem; line-height: 1.45; }
.review-cards .stat-number.label { font-size: 1.35rem; }
.category-summary { display: grid; gap: 0.3rem; min-width: 15rem; }
.category-summary span { display: block; }

/* 主管人力 Dashboard */
.dashboard-head { align-items: center; }
.dashboard-filters { display: grid; grid-template-columns: 12rem 1fr 1fr auto; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.dashboard-filters fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.dashboard-filters legend { color: var(--slate-700); font-weight: 750; font-size: 0.9rem; margin-bottom: 0.35rem; }
.segmented { display: flex; padding: 0.2rem; gap: 0.2rem; background: var(--slate-100); border-radius: 0.6rem; }
.segmented label { flex: 1; margin: 0; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 0.5rem 0.65rem; border-radius: 0.45rem; text-align: center; white-space: nowrap; }
.segmented input:checked + span { color: var(--white); background: var(--navy-900); }
.segmented input:focus-visible + span { outline: 3px solid rgba(8, 127, 140, 0.3); }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.kpi { min-width: 0; padding: 0.85rem 0.95rem; background: var(--white); border: 1px solid #dbe3eb; border-top: 3px solid var(--navy-700); border-radius: 0.72rem; box-shadow: 0 5px 16px rgba(10,25,48,0.06); }
.kpi span { display: block; color: var(--slate-500); font-size: 0.78rem; white-space: nowrap; }
.kpi strong { display: block; margin-top: 0.15rem; font-size: 1.7rem; line-height: 1.1; }
.kpi strong small, .stat-number small { font-size: 0.82rem; font-weight: 750; color: var(--slate-500); }
.kpi.danger { border-top-color: #c5221f; }
.kpi.warning { border-top-color: #c07b00; }
.kpi.danger strong { color: var(--danger); }
.kpi.warning strong { color: var(--warning); }
.executive-callout { display: flex; align-items: center; gap: 2rem; border-left: 5px solid var(--orange-500); margin-bottom: 1rem; }
.executive-callout > div { flex: 0 0 auto; }
.executive-callout span { display: block; font-size: 0.86rem; }
.executive-callout strong { display: block; font-size: 2rem; }
.executive-callout p { margin: 0; color: var(--slate-700); }

.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.section-head h2, .section-head p { margin-bottom: 0; }
.status-legend { display: flex; flex-wrap: wrap; gap: 0.45rem 0.9rem; color: var(--slate-700); font-size: 0.8rem; }
.status-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-dot { width: 0.7rem; height: 0.7rem; display: inline-block; border-radius: 50%; border: 1px solid rgba(10,25,48,0.18); }
.green { --status-color: #0d8a52; --status-bg: rgba(219, 248, 230, 0.94); }
.yellow { --status-color: #b36b00; --status-bg: rgba(255, 239, 181, 0.95); }
.red { --status-color: #c5221f; --status-bg: rgba(255, 221, 218, 0.95); }
.gray { --status-color: #657386; --status-bg: rgba(230, 234, 239, 0.95); }
.pending { --status-color: #667085; --status-bg: rgba(247, 248, 250, 0.96); }
.legend-dot.green, .legend-dot.yellow, .legend-dot.red, .legend-dot.gray, .legend-dot.pending { background: var(--status-color); }

.layout-stack { display: grid; gap: 1.25rem; }
.layout-floor-panel + .layout-floor-panel { padding-top: 1.15rem; border-top: 1px solid #dbe3eb; }
.layout-floor-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.layout-floor-head h3 { margin: 0; }
.layout-floor-head span { color: var(--slate-500); font-size: 0.8rem; }
.floor-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem 0.75rem; max-width: 68%; }
.floor-summary strong, .floor-summary span { color: var(--navy-900); font-size: 0.8rem; }
.layout-canvas { width: 100%; min-height: 26rem; overflow: auto; border: 1px solid #cbd5e1; border-radius: 0.72rem; background: #eef2f6; }
.layout-stage { position: relative; width: max(100%, 1500px); }
.layout-stage > img { display: block; width: 100%; height: auto; object-fit: contain; }
.line-block { position: absolute; display: flex; flex-direction: column; justify-content: center; min-width: 7.8rem; min-height: 5rem; overflow: hidden; padding: 0.4rem; color: #111827; background: var(--status-bg); border: 3px solid var(--status-color); border-radius: 0.45rem; box-shadow: 0 4px 12px rgba(10,25,48,0.2); text-decoration: none; line-height: 1.25; z-index: 2; }
.line-block:hover, .line-block:focus-visible { color: #111827; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(10,25,48,0.28); z-index: 20; }
.line-block strong { font-size: clamp(0.85rem, 1.4vw, 1.15rem); }
.line-block span { font-size: clamp(0.62rem, 0.85vw, 0.78rem); }
.line-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.35rem; }
.line-block-head b { color: var(--status-color); font-size: 0.68rem; white-space: nowrap; }
.line-block.compact { min-width: 2.8rem; min-height: 2rem; padding: 0.2rem 0.3rem; border-width: 2px; overflow: visible; }
.line-block.compact > span:not(.line-block-head), .line-block.compact .line-block-head b { display: none; }
.line-block.compact:hover, .line-block.compact:focus-visible { width: 8.5rem !important; height: auto !important; min-height: 4.6rem; padding: 0.45rem; }
.line-block.compact:hover > span, .line-block.compact:focus-visible > span, .line-block.compact:hover .line-block-head b, .line-block.compact:focus-visible .line-block-head b { display: flex; }
.people-icons { display: flex; flex-wrap: wrap; gap: 0.18rem; margin-top: 0.25rem; color: var(--status-color); }
.people-icons b { font-size: 0.76rem; }
.people-icons .missing { color: var(--danger); font-size: 1rem; line-height: 0.8; }
.layout-empty { padding: 1rem; background: var(--slate-100); border-radius: 0.6rem; margin-bottom: 1rem; }
.line-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.line-summary-card { display: block; color: var(--navy-950); background: var(--status-bg); border: 2px solid var(--status-color); border-radius: 0.65rem; padding: 0.8rem; text-decoration: none; }
.line-summary-card:hover { color: var(--navy-950); box-shadow: var(--shadow); }
.line-summary-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.line-summary-card > div:first-child strong { font-size: 1.15rem; }
.line-status { color: var(--status-color); font-weight: 800; font-size: 0.75rem; }
.line-summary-card dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0.7rem 0 0; }
.line-load { margin: 0.45rem 0 0; color: var(--slate-700); font-size: 0.8rem; }
.line-summary-card dl div { border-right: 1px solid rgba(10,25,48,0.14); text-align: center; }
.line-summary-card dl div:last-child { border-right: 0; }
.line-summary-card dt { color: var(--slate-500); font-size: 0.72rem; }
.line-summary-card dd { margin: 0; font-size: 1.25rem; font-weight: 850; }

.dashboard-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.completeness-alert summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; cursor: pointer; }
.completeness-alert summary span { font-size: 0.82rem; }
.completeness-alert p { margin: 0.7rem 0 0; }
.completeness-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.75rem; }
.completeness-lines span { padding: 0.45rem 0.55rem; background: rgba(255,255,255,0.55); border-radius: 0.4rem; font-size: 0.78rem; }
.waterfall-list { display: grid; gap: 0.62rem; }
.waterfall-row { display: grid; grid-template-columns: minmax(7.5rem, 1fr) 2fr 3.5rem; gap: 0.6rem; align-items: center; font-size: 0.86rem; }
.waterfall-row strong { text-align: right; }
.waterfall-track { height: 0.8rem; background: var(--slate-100); border-radius: 999px; overflow: hidden; }
.waterfall-track i { display: block; height: 100%; border-radius: inherit; background: var(--navy-700); }
.waterfall-row.loss .waterfall-track i { background: #e37a31; }
.waterfall-row.subtotal .waterfall-track i { background: var(--teal-600); }
.waterfall-row.demand .waterfall-track i { background: #58677b; }
.waterfall-row.gap .waterfall-track i { background: var(--danger); }
.demand-context { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #dbe3eb; }
.demand-context h3 { margin-bottom: 0.15rem; }
.demand-context-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.7rem; }
.demand-context-grid span { padding: 0.55rem; color: var(--slate-500); background: var(--slate-100); border-radius: 0.45rem; font-size: 0.72rem; }
.demand-context-grid strong { display: block; margin-top: 0.15rem; color: var(--navy-950); font-size: 0.92rem; }
.risk-list { display: grid; gap: 0.5rem; }
.risk-row { display: grid; grid-template-columns: 0.35rem 1fr auto; gap: 0.7rem; align-items: stretch; padding: 0.65rem; color: var(--navy-950); border: 1px solid #e0e6ed; border-radius: 0.55rem; text-decoration: none; }
.risk-row:hover { color: var(--navy-950); background: #f8fafc; }
.risk-row small { display: block; color: var(--slate-500); margin-top: 0.15rem; }
.risk-row > b { align-self: center; color: var(--slate-700); font-size: 0.8rem; }
.status-bar { width: 100%; background: var(--status-color); border-radius: 999px; }

.line-detail-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.status-card { border-left-color: var(--status-color); background: var(--status-bg); }
.stat-number.label { font-size: 1.35rem; color: var(--status-color); }
.equipment-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; }
.equipment-kpis > div { padding: 0.75rem; background: var(--slate-100); border-radius: 0.5rem; }
.equipment-kpis span, .equipment-kpis strong { display: block; }
.equipment-kpis span { color: var(--slate-500); font-size: 0.76rem; }
.equipment-kpis strong { margin-top: 0.15rem; font-size: 1.35rem; }
.segment-equipment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 1rem; }
.segment-equipment-grid article { padding: 0.8rem; border: 1px solid #dbe3eb; border-radius: 0.55rem; }
.segment-equipment-grid h3 { margin-bottom: 0.5rem; }
.equipment-list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.equipment-list li { display: flex; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid #e6ebf0; font-size: 0.8rem; }
.equipment-list li:last-child { border-bottom: 0; }
.equipment-list span { color: var(--slate-500); text-align: right; }
.equipment-load-note { margin: 1rem 0 0; padding: 0.7rem; background: var(--teal-100); border-radius: 0.5rem; }
.equipment-load-note span { display: block; margin-top: 0.2rem; color: var(--slate-500); font-size: 0.76rem; }
.compact-list { margin: 0; padding-left: 1.2rem; }
.people-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.person-card { display: flex; gap: 0.8rem; min-width: 0; padding: 0.9rem; border: 1px solid #dbe3eb; border-radius: 0.65rem; background: #fbfcfd; }
.person-card.unavailable { background: var(--danger-bg); }
.person-avatar { flex: 0 0 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--navy-700); font-weight: 850; }
.person-main { min-width: 0; flex: 1; }
.person-title { display: flex; justify-content: space-between; gap: 0.5rem; }
.readiness { padding: 0.12rem 0.45rem; border-radius: 999px; background: #e8eef5; color: var(--navy-700); font-size: 0.74rem; font-weight: 850; }
.readiness-Aplus, .readiness-A { color: #0b6a3e; background: #dff5e8; }
.person-card dl { margin: 0.65rem 0 0; }
.person-card dl div { display: grid; grid-template-columns: 6rem 1fr; gap: 0.35rem; font-size: 0.82rem; }
.person-card dt { color: var(--slate-500); }
.person-card dd { margin: 0; overflow-wrap: anywhere; }
.person-warning { margin-top: 0.6rem; padding: 0.45rem; color: var(--danger); background: #fff; border-radius: 0.4rem; font-size: 0.78rem; }

.admin-data-grid { display: grid; gap: 0.8rem; margin-bottom: 1rem; }
.admin-mode-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.admin-mode-picker a { display: grid; gap: .15rem; min-height: 4.4rem; padding: .8rem .9rem; color: var(--navy-700); background: #fff; border: 1px solid #dbe3eb; border-radius: .75rem; text-decoration: none; box-shadow: 0 4px 14px rgba(10, 25, 48, .04); }
.admin-mode-picker a:hover { border-color: var(--teal-600); }
.admin-mode-picker a.active { color: #fff; background: var(--teal-600); border-color: var(--teal-600); }
.admin-mode-picker span { font-size: .78rem; opacity: .78; }
.admin-simple-guide { display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; align-items: center; margin-bottom: 1rem; padding: .85rem 1rem; color: var(--navy-900); background: var(--teal-100); border-radius: .7rem; }
.simple-admin-card summary { display: flex; align-items: baseline; gap: .65rem; }
.simple-admin-card summary small { color: var(--slate-500); font-weight: 600; }
.admin-save-note { margin: 0; color: var(--slate-500); font-size: .82rem; }
.equipment-prototype summary { display: flex; align-items: baseline; gap: .65rem; }
.equipment-prototype summary small { color: var(--slate-500); font-weight: 600; }
.equipment-prototype-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); gap: 1rem; padding: 1.2rem; }
.prototype-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.prototype-form > div { display: grid; gap: .35rem; }
.prototype-form label { font-weight: 750; }
.prototype-form input, .prototype-form select { width: 100%; }
.prototype-form .full { grid-column: 1 / -1; }
.prototype-preview { padding: 1rem; color: var(--navy-950); background: #f8fafc; border: 1px solid #dbe3eb; border-radius: .75rem; }
.prototype-preview h3 { margin: .7rem 0 .1rem; font-size: 1.3rem; }
.prototype-preview > p { margin: 0; color: var(--slate-500); font-size: .85rem; }
.prototype-badge { display: inline-flex; padding: .25rem .55rem; color: var(--teal-600); background: var(--teal-100); border-radius: 999px; font-size: .75rem; font-weight: 800; }
.prototype-preview dl { display: grid; gap: .55rem; margin: 1rem 0; }
.prototype-preview dl div { display: flex; justify-content: space-between; gap: .75rem; padding-bottom: .45rem; border-bottom: 1px solid #dbe3eb; }
.prototype-preview dt { color: var(--slate-500); }
.prototype-preview dd { margin: 0; font-weight: 750; text-align: right; }
.prototype-preview > strong { display: block; margin: .7rem 0; color: var(--danger); }
.prototype-preview button { width: 100%; margin-top: .6rem; }
.equipment-live-panel { padding: 1.2rem; }
.equipment-line-picker { display: grid; grid-template-columns: auto minmax(240px, 1fr) auto; gap: .75rem; align-items: center; margin-bottom: 1rem; padding: .85rem; background: var(--teal-100); border-radius: .75rem; }
.equipment-line-picker label { font-weight: 850; }
.equipment-line-picker select { width: 100%; }
.equipment-live-form { padding-bottom: 1rem; border-bottom: 1px solid #dbe3eb; }
.equipment-current-list { margin-top: 1rem; }
.equipment-current-list h3 { margin: 0 0 .75rem; }
.equipment-current-list td small { display: block; margin-top: .2rem; color: var(--slate-500); }
.equipment-current-list .prototype-badge { margin-left: .35rem; }
.equipment-actions { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.equipment-actions form { margin: 0; }
.link-danger { padding: 0; color: var(--danger); background: transparent; border: 0; box-shadow: none; }
.link-danger:hover { background: transparent; text-decoration: underline; }
.layout-editor-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.layout-editor-toolbar form { display: grid; gap: .35rem; min-width: 260px; }
.layout-editor-toolbar p { margin: 0; color: var(--slate-500); }
.layout-editor-steps { display: flex; flex-wrap: wrap; gap: .5rem; }
.layout-editor-steps span { padding: .45rem .7rem; color: var(--navy-700); background: var(--slate-100); border-radius: 999px; font-size: .85rem; font-weight: 700; }
.layout-editor-add-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); gap: 1rem; align-items: end; margin-bottom: 1rem; padding: 1rem 1.1rem; }
.layout-editor-add-line h2, .layout-editor-add-line p { margin: 0; }
.layout-editor-add-line h2 { margin-top: .2rem; font-size: 1.05rem; }
.layout-editor-kicker { display: block; color: var(--teal-600); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.layout-editor-add-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .6rem; align-items: end; }
.layout-editor-add-action label { grid-column: 1 / -1; color: var(--slate-500); font-size: .8rem; font-weight: 750; }
.layout-editor-add-action select { width: 100%; }
.layout-editor-all-positioned { display: grid; gap: .15rem; padding: .8rem 1rem; color: var(--teal-700); background: var(--teal-100); border-radius: .65rem; }
.layout-editor-all-positioned span { color: var(--slate-500); font-size: .82rem; }
.layout-editor-controls { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 2fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.layout-editor-controls h2, .layout-editor-controls p { margin: 0; }
.layout-editor-controls p { margin-top: .3rem; }
.layout-editor-simple-form { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(170px, .8fr) auto; gap: .75rem; align-items: end; }
.layout-editor-simple-form > label { display: grid; gap: .35rem; font-weight: 700; }
.layout-editor-selected-line { display: grid; align-content: center; min-height: 44px; padding: .45rem .7rem; color: var(--slate-500); background: var(--slate-100); border-radius: .5rem; }
.layout-editor-selected-line span { font-size: .72rem; font-weight: 700; }
.layout-editor-selected-line strong { overflow: hidden; color: var(--navy-950); font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.layout-editor-actions { display: flex; gap: .5rem; }
.layout-editor-actions .button { min-width: 150px; }
.layout-editor-advanced, .layout-editor-simple-form > small { grid-column: 1 / -1; }
.layout-editor-advanced { padding-top: .2rem; }
.layout-editor-advanced summary { color: var(--slate-500); cursor: pointer; font-weight: 700; }
.layout-editor-advanced .form-grid { margin-top: .65rem; }
.layout-editor-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(300px, .9fr); gap: 1rem; align-items: start; }
.layout-editor-canvas-card { padding: .75rem; overflow: auto; }
.layout-editor-stage { position: relative; width: max(100%, 900px); touch-action: none; user-select: none; }
.layout-editor-stage > img { display: block; width: 100%; height: auto; opacity: .55; filter: saturate(.45); pointer-events: none; }
.layout-edit-box { position: absolute; min-width: 38px; min-height: 24px; padding: 4px 7px; overflow: visible; color: #334155; background: rgba(248,250,252,.92); border: 2px solid #64748b; border-radius: 7px; box-shadow: 0 2px 7px rgba(15,23,42,.18); cursor: move; text-align: left; font-weight: 700; touch-action: none; }
.layout-edit-box:hover { color: #1e293b; background: rgba(241,245,249,.96); border-color: #475569; }
.layout-edit-box.selected { color: #075985; background: rgba(240,249,255,.96); border-color: #0284c7; outline: 3px solid rgba(14,165,233,.3); z-index: 5; }
.layout-edit-box.selected:hover { color: #075985; background: rgba(240,249,255,.96); border-color: #0284c7; }
.layout-edit-box span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.layout-edit-box i { position: absolute; right: -7px; bottom: -7px; width: 15px; height: 15px; opacity: 0; pointer-events: none; background: #0284c7; border: 2px solid #fff; border-radius: 4px; cursor: nwse-resize; }
.layout-edit-box.selected i { opacity: 1; pointer-events: auto; }
.layout-editor-form-card { position: sticky; top: 1rem; }
.layout-editor-form-card h2 { margin-top: 0; }
.layout-editor-form-card input[readonly] { color: var(--slate-500); background: #f8fafc; }
.admin-form-card { padding: 0; overflow: hidden; }
.admin-form-card + .admin-form-card { margin-top: 0; }
.admin-form-card summary { padding: 1rem 1.2rem; cursor: pointer; font-weight: 850; background: #f8fafc; }
.admin-form-card[open] summary { border-bottom: 1px solid #dbe3eb; }
.compact-form { padding: 1.2rem; }
.add-line-form { grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) minmax(260px, .8fr); }
.add-line-result { display: grid; gap: .15rem; align-content: center; min-height: 44px; padding: .55rem .7rem; color: var(--slate-500); background: var(--slate-100); border-radius: .5rem; font-size: .8rem; }
.add-line-result strong { color: var(--navy-900); }
.hc-bulk-tools { display: grid; gap: .8rem; padding: 1.2rem; background: #f7fbff; border-bottom: 1px solid #dbe3eb; }
.hc-bulk-tools h3, .hc-bulk-tools p { margin: 0; }
.hc-bulk-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.hc-bulk-actions form { display: flex; flex: 1; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 0; }
.hc-bulk-actions .file-button { display: flex; flex: 1; min-width: 260px; align-items: center; gap: .65rem; padding: .65rem .8rem; background: #fff; border: 1px solid var(--slate-300); border-radius: .5rem; font-weight: 700; }
.hc-bulk-actions .file-button input { min-width: 160px; padding: 0; border: 0; }
.coverage-manager { padding: 1.2rem; border-top: 1px solid #dbe3eb; }
.coverage-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.coverage-head h3, .coverage-head p { margin: 0; }
.coverage-head p { margin-top: .2rem; }
.coverage-head label { display: grid; gap: .3rem; min-width: 190px; font-weight: 750; }
.coverage-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: .9rem; }
.coverage-summary span { padding: .75rem; color: var(--slate-500); background: var(--slate-100); border-radius: .55rem; }
.coverage-summary strong { display: block; margin-top: .15rem; color: var(--navy-950); font-size: 1.25rem; }
.coverage-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: 1rem; background: var(--teal-100); border-radius: .75rem; }
.coverage-form > div { display: grid; gap: .35rem; }
.coverage-form > div > label { font-weight: 750; }
.coverage-form .full, .coverage-form .coverage-lines, .coverage-form .coverage-form-actions { grid-column: 1 / -1; }
.coverage-lines { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; margin: 0; padding: .75rem; background: #fff; border: 1px solid #dbe3eb; border-radius: .55rem; }
.coverage-lines legend { padding: 0 .3rem; font-weight: 750; }
.coverage-lines label { display: flex; align-items: center; gap: .35rem; min-height: 34px; }
.coverage-lines input { width: 1rem; min-height: 1rem; }
.coverage-form-actions { display: flex !important; flex-direction: row; gap: .6rem !important; }
.coverage-list { display: grid; gap: .55rem; margin-top: .9rem; }
.coverage-list article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .7rem .8rem; border: 1px solid #dbe3eb; border-radius: .6rem; }
.coverage-list article strong, .coverage-list article span { display: block; }
.coverage-list article span { margin-top: .15rem; color: var(--slate-500); font-size: .82rem; }
.coverage-person-icon { display: grid; place-items: center; width: 38px; height: 38px; background: var(--teal-100); border-radius: 50%; }
.coverage-row-actions { display: flex; align-items: center; gap: .65rem; }
.coverage-row-actions form { margin: 0; }
.confirm-check { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--navy-900); padding: 0.7rem; background: var(--teal-100); border-radius: 0.5rem; }
.confirm-check input { width: 1.1rem; min-height: 1.1rem; margin-top: 0.12rem; }
.record-count-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.7rem; }
.record-count-grid div { padding: 0.7rem; text-align: center; background: var(--slate-100); border-radius: 0.5rem; }
.record-count-grid strong, .record-count-grid span { display: block; }
.record-count-grid strong { font-size: 1.4rem; }
.record-count-grid span { color: var(--slate-500); font-size: 0.78rem; }
.admin-record-summary { padding: 0; overflow: hidden; }
.admin-record-summary > summary { padding: 1rem 1.2rem; cursor: pointer; font-weight: 800; }
.admin-record-summary .record-count-grid { padding: 0 1.2rem 1.2rem; }

@media (max-width: 900px) {
  .admin-mode-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .equipment-prototype-grid { grid-template-columns: 1fr; }
  .equipment-line-picker { grid-template-columns: 1fr; }
  .add-line-form { grid-template-columns: 1fr 1fr; }
  .add-line-result { grid-column: 1 / -1; }
  .layout-editor-toolbar, .layout-editor-add-line, .layout-editor-controls { display: grid; grid-template-columns: 1fr; }
  .layout-editor-simple-form { grid-template-columns: 1fr 1fr; }
  .layout-editor-actions { grid-column: 1 / -1; }
  .layout-editor-actions .button { flex: 1; }
  .layout-editor-grid { grid-template-columns: 1fr; }
  .layout-editor-form-card { position: static; }
  .topbar-inner { align-items: flex-start; flex-wrap: wrap; }
  .nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 0.1rem; }
  .cards { grid-template-columns: 1fr 1fr; }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-filters { grid-template-columns: 1fr 1fr; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demand-context-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .segment-equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-count-grid { grid-template-columns: repeat(3, 1fr); }
  .coverage-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .hc-bulk-actions, .hc-bulk-actions form { display: grid; grid-template-columns: 1fr; }
  .hc-bulk-actions .file-button { min-width: 0; }
  .hc-bulk-actions .button, .hc-bulk-actions button { width: 100%; }
}

@media (max-width: 640px) {
  .admin-mode-picker { grid-template-columns: 1fr 1fr; }
  .layout-editor-simple-form { grid-template-columns: 1fr; }
  .layout-editor-actions { grid-column: 1; }
  .layout-editor-add-action { grid-template-columns: 1fr; }
  .layout-editor-add-action label { grid-column: 1; }
  .add-line-form { grid-template-columns: 1fr; }
  .container { padding: 1rem 0.8rem 2.5rem; }
  .topbar-inner { padding: 0.7rem 0.8rem; gap: 0.7rem; }
  .brand { width: calc(100% - 8rem); }
  .user-menu { margin-left: auto; }
  .user-name { display: none; }
  .nav { gap: 0.18rem; }
  .nav a { padding: 0.55rem 0.62rem; }
  .event-entry-page .topbar-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .event-entry-page .brand { width: auto; }
  .event-entry-page .user-menu { grid-column: 2; grid-row: 1; }
  .event-entry-page .nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .event-entry-page .nav a { display: none; text-align: center; }
  .event-entry-page .nav .nav-event { display: block; }
  .page-head { align-items: stretch; flex-direction: column; }
  .page-head .button { width: 100%; }
  .cards, .form-grid, .filters, .detail-grid, .review-filters { grid-template-columns: 1fr; }
  .form-grid .full, .filters .search, .detail-item.full { grid-column: auto; }
  .detail-item:nth-child(odd) { border-right: 0; }
  .filters .actions { grid-column: 1; }
  .filters .actions .button { flex: 1; }
  .form-actions { position: sticky; bottom: 0; padding: 0.7rem; margin: 1.2rem -0.7rem -0.7rem; background: rgba(255,255,255,0.96); border-top: 1px solid #dbe3eb; }
  .form-actions .button, .form-actions button { flex: 1; }
  .event-entry-head { align-items: stretch; }
  .event-form-section { padding: 1rem; }
  .event-entry-form .form-actions { margin: 0; padding: 0.8rem 1rem; }
  .event-assessment-field select { max-width: none; }
  .event-auto-meta { grid-template-columns: 1fr; }
  .event-auto-meta small { grid-column: auto; }
  .coverage-head { align-items: stretch; flex-direction: column; }
  .coverage-form, .coverage-summary { grid-template-columns: 1fr; }
  .coverage-form .full, .coverage-form .coverage-lines, .coverage-form .coverage-form-actions { grid-column: 1; }
  .coverage-lines { grid-template-columns: 1fr 1fr; }
  .coverage-list article { grid-template-columns: 38px minmax(0, 1fr); }
  .coverage-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .login-card { padding: 1.4rem; }
  .dashboard-filters, .dashboard-two-column, .kpi-grid, .line-detail-kpis, .people-card-grid, .line-grid, .record-count-grid, .equipment-kpis, .segment-equipment-grid, .completeness-lines { grid-template-columns: 1fr; }
  .demand-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-floor-head { align-items: flex-start; flex-direction: column; }
  .floor-summary { justify-content: flex-start; max-width: none; }
  .executive-callout { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
  .status-legend { justify-content: flex-start; }
  .layout-canvas { min-height: 20rem; }
  .layout-stage { width: 1200px; }
  .line-block.compact { min-width: 2.8rem; min-height: 2rem; }
  .line-block { min-width: 5.5rem; min-height: 4.5rem; padding: 0.3rem; }
  .waterfall-row { grid-template-columns: 7.5rem 1fr 2.5rem; }
}