:root {
  --ink: #08232a;
  --muted: #607780;
  --line: #d1e1e2;
  --teal: #0d9488;
  --teal-dark: #0a5e5b;
  --mint: #e7f8f5;
  --ice: #eef7fb;
  --paper: #ffffff;
  --danger: #b83c4c;
  --warning: #8a5a10;
  --shadow: 0 18px 45px rgba(15, 54, 60, .12);
}

* { box-sizing: border-box; }
body.schedule-import-page {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(145deg, #f5fbfa 0%, #eef7f8 48%, #f8fbfd 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.import-shell { width: min(1540px, calc(100% - 40px)); margin: 32px auto 70px; }
.import-hero, .upload-workspace, .review-workspace {
  border: 1px solid var(--line);
  border-top: 4px solid #15aa98;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
}
.import-hero {
  min-height: 180px;
  padding: 34px 38px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(118deg, #e6faf6, #eef7fb 66%, #fff);
}
.eyebrow { margin: 0 0 8px; color: #078f80; font-size: .76rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.import-hero h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: .98; letter-spacing: -.055em; }
.import-hero p:last-child { max-width: 760px; margin: 16px 0 0; color: var(--muted); font-size: 1.05rem; }

.upload-workspace {
  margin-top: 18px;
  padding: 24px 28px;
  border-top-width: 1px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.upload-copy { display: flex; align-items: center; gap: 18px; }
.step-number { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #05766c; background: var(--mint); border: 1px solid #9fded6; font-weight: 900; }
.upload-workspace h2, .review-head h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.025em; }
.upload-workspace p:last-child, .review-head p { margin: 5px 0 0; color: var(--muted); }
.upload-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.file-count { padding: 8px 11px; border: 1px solid #b7ddd7; border-radius: 999px; color: #087268; background: #ebf9f6; font-size: .73rem; font-weight: 850; }

.primary-btn, .secondary-btn, .icon-btn {
  min-height: 44px;
  border-radius: 11px;
  border: 1px solid transparent;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 850;
  cursor: pointer;
}
.primary-btn { color: white; background: linear-gradient(135deg, #15a996, #078878); box-shadow: 0 8px 18px rgba(13,148,136,.18); }
.primary-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.secondary-btn { color: var(--ink); background: #fff; border-color: #bfcfd1; }
.icon-btn { width: 44px; padding: 0; color: var(--ink); background: #f5fbfb; border-color: var(--line); font-size: 1.55rem; }

.review-workspace { margin-top: 18px; border-radius: 20px; overflow: hidden; }
.review-head { padding: 25px 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; background: linear-gradient(112deg, #effbf8, #f2f9fc); border-bottom: 1px solid var(--line); }
.week-field { min-width: 270px; }
.week-field label, .search-field span, .modal-search span { display: block; margin-bottom: 6px; color: #36555c; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.week-field input, .search-field input, .modal-search input { width: 100%; height: 45px; border: 1px solid #c7d9da; border-radius: 10px; padding: 0 13px; color: var(--ink); background: #fff; outline: none; }
.week-field input:focus, .search-field input:focus, .modal-search input:focus { border-color: #16a797; box-shadow: 0 0 0 3px rgba(22,167,151,.12); }
.week-field small { display: block; margin-top: 5px; color: var(--muted); }
.muted { color: var(--muted); }

.summary-grid { padding: 18px 28px; display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 10px; border-bottom: 1px solid var(--line); }
.summary-grid article { min-height: 78px; padding: 13px 15px; border: 1px solid #d7e3e4; border-radius: 13px; background: #f9fcfc; }
.summary-grid span { display: block; color: #577178; font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.summary-grid strong { display: block; margin-top: 4px; font-size: 1.7rem; line-height: 1; }
.summary-grid .is-good { background: #eaf8f3; border-color: #bce7d7; }
.summary-grid .is-alert { background: #fff8e9; border-color: #efd89f; }

.import-warning { margin: 0 28px 16px; padding: 13px 15px; border: 1px solid #eacb83; border-radius: 11px; color: #754a08; background: #fff8e5; font-weight: 750; }
.import-warning.is-error { color: #902b3b; border-color: #efb7bf; background: #fff0f2; }
.consecutive-review { margin: 0 28px 20px; overflow: hidden; border: 1px solid #e5bf68; border-radius: 16px; background: #fffdf7; box-shadow: 0 10px 24px rgba(123, 82, 9, .08); }
.consecutive-review[hidden] { display: none; }
.consecutive-review > header { padding: 17px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #efdba9; background: linear-gradient(115deg, #fff7dd, #fffdf7); }
.consecutive-review h3 { margin: 0; font-size: 1.18rem; letter-spacing: -.015em; }
.consecutive-review header p:last-child { margin: 4px 0 0; color: #755a24; font-size: .88rem; }
.review-count { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #dfb858; border-radius: 999px; color: #714806; background: #fff4d2; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.consecutive-review-list { padding: 12px; display: grid; gap: 10px; }
.consecutive-alert-card { padding: 15px; border: 1px solid #ead7a8; border-left: 4px solid #d89b1d; border-radius: 12px; background: #fff; }
.consecutive-alert-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.consecutive-alert-head strong, .consecutive-alert-head small { display: block; }
.consecutive-alert-head strong { font-size: 1rem; }
.consecutive-alert-head small { margin-top: 3px; color: #79612f; }
.consecutive-alert-head span { color: #8b5507; font-size: .74rem; font-weight: 900; white-space: nowrap; }
.review-day-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(7, minmax(105px, 1fr)); gap: 7px; }
.review-day-btn { min-height: 57px; padding: 8px; border: 1px solid #d4dedf; border-radius: 9px; color: var(--ink); background: #f8fbfb; cursor: pointer; text-align: left; }
.review-day-btn span, .review-day-btn small { display: block; }
.review-day-btn span { font-size: .78rem; font-weight: 900; }
.review-day-btn small { margin-top: 3px; color: #9b3a45; font-size: .66rem; font-weight: 800; }
.review-day-btn:hover { border-color: #d65b68; background: #fff1f3; }
.review-day-btn.is-current-week { border-color: #e0b64e; background: #fff8e6; }
.review-day-btn:disabled { opacity: .55; cursor: wait; }
.list-toolbar { padding: 16px 28px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-top: 1px solid #edf2f2; }
.view-toggle { display: flex; padding: 4px; border: 1px solid #c9dada; border-radius: 12px; background: #eff6f6; }
.view-toggle button { min-height: 37px; border: 0; border-radius: 8px; padding: 0 14px; color: #45626a; background: transparent; font-weight: 800; cursor: pointer; }
.view-toggle button.is-active { color: #075f58; background: white; box-shadow: 0 3px 10px rgba(12,55,62,.1); }
.search-field { width: min(330px, 100%); }

.match-table { margin: 0 28px 24px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.match-table-head, .match-row { display: grid; grid-template-columns: 1.2fr 1.25fr .65fr 120px; align-items: center; gap: 18px; }
.match-table-head { min-height: 42px; padding: 0 16px; color: #3a5a61; background: #eaf5f4; font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.match-row { min-height: 76px; padding: 11px 16px; border-top: 1px solid #e0e9e9; background: white; }
.match-row.is-unmatched { box-shadow: inset 4px 0 #e5a62b; }
.match-row.is-collision { box-shadow: inset 4px 0 #d65262; background: #fffafb; }
.person-main strong, .database-match strong { display: block; font-size: .98rem; }
.person-main small, .database-match small, .role-cell small { display: block; margin-top: 3px; color: var(--muted); }
.status-pill { display: inline-flex; margin-top: 5px; padding: 4px 8px; border-radius: 999px; color: #087065; background: #e5f7f3; border: 1px solid #b4e3da; font-size: .65rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.status-pill.is-warning { color: #845207; background: #fff5dc; border-color: #ebd18f; }
.pencil-btn { width: 42px; height: 42px; border: 1px solid #bcd1d2; border-radius: 11px; color: #075f58; background: #effaf8; font-size: 1.05rem; cursor: pointer; }
.empty-state { padding: 46px 20px; text-align: center; color: var(--muted); background: white; }

.import-footer { padding: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #f4f9f9; border-top: 1px solid var(--line); }
.import-footer small { display: block; margin-top: 4px; color: var(--muted); }
.page-notice { position: fixed; z-index: 1300; top: 80px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 30px)); padding: 14px 18px; border-radius: 12px; color: #075b53; background: #e4f8f3; border: 1px solid #94dacd; box-shadow: var(--shadow); font-weight: 800; text-align: center; }
.page-notice.is-error { color: #8d2837; background: #fff0f2; border-color: #edaab4; }
.page-notice.is-warning { color: #744b08; background: #fff7df; border-color: #e5c16d; }

.match-modal { position: fixed; z-index: 1400; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(4,28,34,.62); backdrop-filter: blur(8px); }
.match-modal[hidden] { display: none; }
.match-modal-card { width: min(720px, 100%); max-height: min(820px, calc(100vh - 36px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #b8d0d1; border-radius: 20px; background: #fdfefe; box-shadow: 0 28px 80px rgba(0,20,25,.32); }
.match-modal-card > header { padding: 22px 24px; display: flex; justify-content: space-between; gap: 18px; background: linear-gradient(120deg, #e5faf5, #eef7fb); border-bottom: 1px solid var(--line); }
.match-modal-card h2 { margin: 0; font-size: 1.75rem; }
.match-modal-card header p:last-child { margin: 5px 0 0; color: var(--muted); }
.modal-search { padding: 18px 24px 12px; }
.employee-match-list { min-height: 260px; overflow: auto; padding: 0 24px 18px; }
.employee-option { width: 100%; min-height: 63px; margin-top: 8px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; border: 1px solid #d4e1e2; border-radius: 11px; color: var(--ink); background: #fff; cursor: pointer; }
.employee-option:hover, .employee-option.is-selected { border-color: #25ae9f; background: #eaf9f6; }
.employee-option strong, .employee-option small { display: block; }
.employee-option small { margin-top: 3px; color: var(--muted); }
.employee-option .used-label { color: #a43647; font-size: .67rem; font-weight: 900; text-transform: uppercase; }
.employee-option:disabled { cursor: not-allowed; opacity: .56; }
.create-profile-panel { margin: 0 24px 18px; padding: 15px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px dashed #7dcfc3; border-radius: 13px; background: linear-gradient(120deg, #eafaf6, #f5fbfc); }
.create-profile-panel[hidden] { display: none; }
.create-profile-panel span, .create-profile-panel strong, .create-profile-panel small { display: block; }
.create-profile-panel span { color: #087b70; font-size: .68rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.create-profile-panel strong { margin-top: 3px; font-size: 1rem; }
.create-profile-panel small { margin-top: 3px; color: var(--muted); }
.create-profile-panel .secondary-btn { flex: 0 0 auto; }
.match-confirm { padding: 17px 24px; border-top: 1px solid var(--line); background: #f2f8f8; }
.match-confirm p { margin: 0 0 13px; color: #35545b; line-height: 1.5; }
.match-confirm > div { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 900px) {
  .import-shell { width: min(100% - 20px, 760px); margin-top: 16px; }
  .import-hero, .upload-workspace, .review-head, .import-footer { align-items: stretch; flex-direction: column; }
  .import-hero { padding: 27px 23px; }
  .upload-workspace { padding: 20px; }
  .upload-actions { justify-content: stretch; }
  .upload-actions .primary-btn, .upload-actions .secondary-btn { flex: 1 1 180px; }
  .file-count { flex: 1 0 100%; text-align: center; }
  .summary-grid { grid-template-columns: repeat(3, 1fr); padding: 14px 18px; }
  .review-head { padding: 21px 18px; }
  .week-field { min-width: 0; }
  .list-toolbar { padding: 14px 18px; align-items: stretch; flex-direction: column; }
  .search-field { width: 100%; }
  .match-table { margin: 0 18px 18px; border: 0; overflow: visible; }
  .match-table-head { display: none; }
  .match-row { grid-template-columns: 1fr auto; gap: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 13px; }
  .database-match, .role-cell { grid-column: 1; }
  .pencil-btn { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .import-footer { padding: 18px; }
  .import-footer .primary-btn { width: 100%; }
  .consecutive-review { margin: 0 18px 18px; }
  .consecutive-review > header { align-items: flex-start; flex-direction: column; }
  .review-day-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 540px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .upload-copy { align-items: flex-start; }
  .step-number { flex: 0 0 auto; }
  .view-toggle button { flex: 1; padding: 0 8px; }
  .match-confirm > div { flex-direction: column-reverse; }
  .create-profile-panel { align-items: stretch; flex-direction: column; }
  .create-profile-panel .secondary-btn { width: 100%; }
  .review-day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
