/* Scoped visual system for the site progress workspace. */
:root {
  --progress-font-family: Pretendard, "Malgun Gothic", sans-serif;
}

.site-progress-workspace-page {
  --line: #e6e7ed;
  font-family: var(--progress-font-family);
  color: #30333f;
  background: #f5f6f8;
  padding: 18px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5;
}
.site-progress-workspace-page :is(input, select, textarea, button) { font: inherit; }
.site-progress-workspace-page .muted { color: #747986; }
.site-progress-workspace-page .eyebrow { color: #7762c6; font-size: 10px; letter-spacing: .09em; }
.site-progress-workspace-page .site-progress-workspace-header { padding: 4px 0 18px; border-bottom: 0; gap: 18px; }
.site-progress-workspace-page .site-progress-workspace-title h2 { font-size: clamp(19px, 1.5vw, 25px); font-weight: 700; letter-spacing: -.035em; }
.site-progress-workspace-page .site-office-address-card { min-width: 260px; background: #fff; border-color: var(--line); box-shadow: 0 2px 8px #22223304; }
.site-progress-workspace-page .site-progress-workspace-tabs { display: flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.site-progress-workspace-page .site-progress-workspace-tabs .tab-button { border: 0; border-radius: 6px; padding: 8px 14px; color: #626775; background: transparent; }
.site-progress-workspace-page .site-progress-workspace-tabs .tab-button.active { background: #353442; color: #fff; font-weight: 600; }
.site-progress-workspace-page .site-progress-workspace-content { padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.site-progress-workspace-page button { border-radius: 7px; cursor: pointer; }
.site-progress-workspace-page button.secondary { border: 1px solid #e1e3ea; background: #fff; color: #525766; box-shadow: 0 1px 3px #22223306; }
.site-progress-workspace-page button.danger { background: #fff5f5; color: #c04f59; border-color: #f2dadd; }
.site-progress-workspace-page button:disabled { opacity: .45; cursor: not-allowed; }
.site-progress-workspace-page :is(button, input, select, textarea):focus-visible { outline: 2px solid #9274e1; outline-offset: 2px; }
.site-progress-workspace-page input[type="checkbox"] { appearance: auto; accent-color: #8060cf; width: 16px !important; min-width: 16px !important; height: 16px; vertical-align: middle; cursor: pointer; }
.site-progress-workspace-page input[type="radio"] { accent-color: #8060cf; }
.site-progress-workspace-page :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border: 1px solid #e7e8ee; border-radius: 6px; background: #fff; color: #363b49; }
.site-progress-workspace-page td :is(input:not([type="checkbox"]):not([type="radio"]), select) { background: #fafbfc; border-color: #eceef2; padding: 8px; }
.site-progress-workspace-page td input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.site-progress-workspace-page td input:focus { background: #fff; border-color: #a58bdf; }
.site-progress-workspace-page table { font-size: 13px; font-variant-numeric: tabular-nums; }
.site-progress-workspace-page th { color: #777b87; font-size: 12px; font-weight: 600; background: #f8f9fb; }
.site-progress-workspace-page td { border-bottom: 1px solid #eef0f4; padding-top: 10px; padding-bottom: 10px; }
.site-progress-workspace-page tbody tr:nth-child(even) > td { background-color: #fcfcfe; }
.site-progress-workspace-page tbody tr:hover > td { background-color: #f7f5fc; }
.site-progress-workspace-page tbody tr:has(input[type="checkbox"]:checked) > td { background-color: #f0eafa; }
.site-progress-workspace-page .badge { display: inline-flex; align-items: center; padding: 3px 9px; border: 1px solid #e2e4e9; border-radius: 999px; background: #f6f7f9; color: #6b7080; font-size: 11px; font-weight: 600; white-space: nowrap; }
.site-progress-workspace-page .badge.success { color: #357761; background: #eaf5ef; border-color: #d8eade; }
.site-progress-workspace-page .badge.warning { color: #977127; background: #fff6df; border-color: #f2e6be; }
.site-progress-workspace-page .site-water-summary-card { border-color: #e8e8ee; border-radius: 10px; padding: 16px; box-shadow: 0 3px 12px #22223304; }
.site-progress-workspace-page .site-water-summary-card strong { font-size: 23px; letter-spacing: -.035em; }
.site-progress-workspace-page .site-water-subtabs .tab-button.active { background: #eee8fa; color: #7651b5; }
.site-progress-overview { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; color: #787c89; font-size: 12px; }
.site-progress-overview span { padding: 4px 10px; border: 1px solid #e5e6ec; border-radius: 6px; background: #fff; }
.site-progress-overview [data-progress-edit-status] { margin-left: auto; }
.site-progress-overview [data-progress-edit-status].pending { color: #9b7120; border-color: #ead7a7; background: #fff9e9; }
/* Assignment dialogs share the progress palette without affecting other master forms. */
.modal:has(> #site-assignment-form),
.modal:has(> #site-assignment-edit-form) {
  --line: #e6e7ed;
  font-family: var(--progress-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: #30333f;
  background: #f5f6f8;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-sizing: border-box;
}
.modal:has(> :is(#site-assignment-form, #site-assignment-edit-form)) > h3 { margin: 2px 40px 6px 0; font-size: 21px; letter-spacing: -.035em; }
.modal:has(> :is(#site-assignment-form, #site-assignment-edit-form)) > .eyebrow { color: #7762c6; font-size: 10px; letter-spacing: .09em; }
.modal:has(> :is(#site-assignment-form, #site-assignment-edit-form)) .muted { color: #747986; font-size: 12px; }
.modal:has(> :is(#site-assignment-form, #site-assignment-edit-form)) > p { margin: 0 0 12px; }
:is(#site-assignment-form, #site-assignment-edit-form) { display: grid; gap: 12px; }
:is(#site-assignment-form, #site-assignment-edit-form) .section-heading { margin: 0; }
:is(#site-assignment-form, #site-assignment-edit-form) h4 { font-size: 16px; margin: 0 0 4px; letter-spacing: -.02em; }
:is(#site-assignment-form, #site-assignment-edit-form) p { margin: 4px 0; }
#site-assignment-form > div:has(> h5) { margin-bottom: 0 !important; padding: 12px; background: #fff; border: 1px solid #e6e7ed; border-radius: 10px; }
#site-assignment-form .empty-state { padding: 12px !important; background: #fafbfc !important; border-color: #e6e7ed !important; color: #747986 !important; }
:is(#site-assignment-form, #site-assignment-edit-form) .form-grid { align-items: start; gap: 12px 16px; padding: 14px; background: #fff; border: 1px solid #e6e7ed; border-radius: 10px; }
:is(#site-assignment-form, #site-assignment-edit-form) .field { min-width: 0; gap: 5px; }
:is(#site-assignment-form, #site-assignment-edit-form) .field > span { color: #626775; font-size: 12px; font-weight: 600; }
:is(#site-assignment-form, #site-assignment-edit-form) :is(input, select, button) { font: inherit; }
:is(#site-assignment-form, #site-assignment-edit-form) :is(input:not([type="hidden"]), select) { width: 100%; min-width: 0; height: 36px; min-height: 36px; box-sizing: border-box; padding: 6px 9px; border: 1px solid #e7e8ee; border-radius: 6px; color: #363b49; background: #fafbfc; }
:is(#site-assignment-form, #site-assignment-edit-form) input:disabled { color: #747986; background: #f0f1f5; }
:is(#site-assignment-form, #site-assignment-edit-form) :is(input, select, button):focus-visible { outline: 2px solid #9274e1; outline-offset: 2px; }
:is(#site-assignment-form, #site-assignment-edit-form) :is(input, select):focus { background: #fff; border-color: #a58bdf; }
:is(#site-assignment-form, #site-assignment-edit-form) button { border-radius: 7px; padding: 7px 12px; cursor: pointer; }
:is(#site-assignment-form, #site-assignment-edit-form) button.primary { background: #353442; border: 1px solid #353442; color: #fff; }
:is(#site-assignment-form, #site-assignment-edit-form) button.secondary { background: #fff; border: 1px solid #e1e3ea; color: #525766; }
:is(#site-assignment-form, #site-assignment-edit-form) button.danger { background: #fff5f5; border: 1px solid #f2dadd; color: #c04f59; }
:is(#site-assignment-form, #site-assignment-edit-form) .form-actions { margin-top: 0; gap: 8px; }
#site-assignment-form table { font-size: 13px; font-variant-numeric: tabular-nums; }
#site-assignment-form th { padding: 7px 8px; background: #f8f9fb; color: #777b87; font-size: 12px; }
#site-assignment-form td { padding: 7px 8px; border-bottom: 1px solid #eef0f4; }
#site-assignment-form tbody tr:nth-child(even) { background: #fcfcfe; }
#site-assignment-form tbody tr:hover { background: #f7f5fc; }
#site-assignment-form .table-actions { white-space: nowrap; }
#site-assignment-form .table-actions button { padding: 4px 8px; font-size: 12px; }
@media (max-width: 560px) {
  .modal:has(> :is(#site-assignment-form, #site-assignment-edit-form)) { padding: 14px; }
  :is(#site-assignment-form, #site-assignment-edit-form) .form-grid.two { grid-template-columns: minmax(0, 1fr); padding: 10px; }
}
/* Compact editing surfaces; evaluation and chart layouts remain unchanged. */
.site-progress-workspace-page [data-progress-tab="weekly"],
.site-progress-workspace-page [data-progress-tab="work"],
.site-progress-workspace-page [data-progress-tab="water"] { padding: 10px; }
.site-input-summary > div { display: flex !important; flex-wrap: wrap; gap: 6px 18px !important; margin-bottom: 6px !important; padding: 6px 10px; background: #f8f9fb; border-radius: 6px; }
.site-input-summary > div > div { display: flex; align-items: baseline; gap: 8px; padding: 0 !important; border: 0 !important; background: transparent !important; }
.site-input-summary strong { display: inline !important; margin: 0 !important; font-size: 16px !important; }
.site-input-summary small:last-child { display: none; }
.site-input-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-input-toolbar .site-week-window-controls { flex: 1; margin: 0; padding: 4px 0; border: 0; gap: 6px; }
.site-input-toolbar > button { flex: none; }
.site-input-help { margin: 3px 0 7px; color: #747986; font-size: 12px; }
.site-input-help summary { cursor: pointer; width: fit-content; }
.site-input-help p { margin: 5px 0; }
.site-progress-workspace-page :is([data-progress-tab="work"], [data-progress-tab="weekly"], [data-progress-tab="water"]) td { padding-top: 4px; padding-bottom: 4px; }
.site-progress-workspace-page :is([data-progress-tab="work"], [data-progress-tab="weekly"], [data-progress-tab="water"]) td :is(input:not([type="checkbox"]):not([type="radio"]), select) { height: 32px; min-height: 32px; box-sizing: border-box; padding: 4px 6px; }
.site-progress-workspace-page #site-weekly-grid .site-week-heading { min-width: 96px; width: 96px; padding-left: 4px; padding-right: 4px; }
.site-progress-workspace-page #site-weekly-grid .site-week-cell { padding-left: 4px; padding-right: 4px; }
.site-progress-workspace-page #site-weekly-grid .site-week-cell input { width: 88px; min-width: 88px; }
.site-progress-workspace-page :is(#site-work-plan-grid, #site-water-area-grid, #site-water-area-target-grid) :is(th, td):has(> input[type="checkbox"]) { width: 36px; min-width: 36px; max-width: 36px; padding: 4px; box-sizing: border-box; text-align: center; }
.site-progress-workspace-page input[type="checkbox"] { margin: 0; }
.site-progress-workspace-page .site-water-goal-mode { flex-direction: row; flex-wrap: wrap; gap: 6px 12px; padding: 6px 8px; border-radius: 6px; }
.site-progress-workspace-page .site-water-goal-mode label { min-height: 30px; padding: 0 4px; border: 0; border-radius: 4px; background: transparent; }
.site-progress-workspace-page .site-water-goal-mode label.active { background: transparent; color: #7651b5; }
.site-progress-workspace-page .site-water-goal-mode input[type="radio"] { width: 16px; height: 16px; margin: 0; }
.site-progress-workspace-page [data-progress-tab="water"] .site-water-summary { gap: 6px; margin-bottom: 6px; }
.site-progress-workspace-page [data-progress-tab="water"] .site-water-summary-card { padding: 7px 10px; box-shadow: none; }
.site-progress-workspace-page [data-progress-tab="water"] .site-water-summary-card strong { font-size: 18px; }
@media (max-width: 900px) {
  .site-progress-workspace-page { padding: 10px; }
  .site-progress-workspace-page .site-progress-workspace-content { padding: 10px; }
  .site-progress-workspace-page .site-office-address-card { min-width: 0; width: 100%; max-width: none; }
  .site-progress-overview [data-progress-edit-status] { margin-left: 0; }
}

/* Weekly progress Excel import dialog */
.site-week-excel-dialog {
  --excel-primary: #2563eb;
  --excel-primary-soft: #eff6ff;
  --excel-line: #dbe4f0;
  --excel-text: #152238;
  --excel-muted: #64748b;
  width: min(800px, calc(100vw - 32px));
  max-width: 800px;
  max-height: min(900px, calc(100vh - 32px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--excel-text);
  background: #fff;
  border: 1px solid #d7e0eb;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, .28);
  font-family: var(--progress-font-family, Pretendard, "Noto Sans KR", sans-serif);
  font-size: 14px;
  line-height: 1.45;
}
.site-week-excel-dialog::backdrop { background: rgba(8, 17, 31, .62); backdrop-filter: blur(2px); }
.site-week-excel-dialog * { box-sizing: border-box; }
.site-week-excel-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: min(900px, calc(100vh - 32px)); }
.site-week-excel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 28px 18px; }
.site-week-excel-eyebrow { display: block; margin-bottom: 4px; color: var(--excel-primary); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.site-week-excel-header h3 { margin: 0; color: #0f172a; font-size: 24px; line-height: 1.3; letter-spacing: -.035em; }
.site-week-excel-header p { margin: 7px 0 0; color: var(--excel-muted); font-size: 14px; }
.site-week-excel-close { display: grid; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; place-items: center; color: #64748b; background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 25px; font-weight: 300; line-height: 1; }
.site-week-excel-close:hover { color: #0f172a; background: #f1f5f9; }
.site-week-excel-close:focus-visible,
.site-week-excel-dialog :is(button, input, label[for]):focus-visible { outline: 2px solid var(--excel-primary); outline-offset: 2px; }

.site-week-excel-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0 52px 20px; list-style: none; }
.site-week-excel-steps li { position: relative; display: grid; justify-items: center; gap: 7px; color: #94a3b8; font-size: 12px; text-align: center; }
.site-week-excel-steps li:not(:last-child)::after { position: absolute; z-index: 0; top: 14px; left: calc(50% + 19px); width: calc(100% - 38px); height: 2px; background: #e2e8f0; content: ""; }
.site-week-excel-steps li.is-complete:not(:last-child)::after { background: #93c5fd; }
.site-week-excel-steps li > span { position: relative; z-index: 1; display: grid; width: 28px; height: 28px; place-items: center; color: #64748b; background: #f1f5f9; border: 1px solid #dbe4f0; border-radius: 50%; font-size: 12px; font-weight: 800; }
.site-week-excel-steps li.is-current,
.site-week-excel-steps li.is-complete { color: #1d4ed8; }
.site-week-excel-steps li.is-current > span,
.site-week-excel-steps li.is-complete > span { color: #fff; background: var(--excel-primary); border-color: var(--excel-primary); }
.site-week-excel-steps li.is-complete > span { font-size: 0; }
.site-week-excel-steps li.is-complete > span::before { content: "✓"; font-size: 13px; }

.site-week-excel-body { overflow-y: auto; padding: 2px 28px 24px; scrollbar-gutter: stable; }
.site-week-excel-section + .site-week-excel-section { margin-top: 20px; }
.site-week-excel-section h4 { margin: 0 0 9px; color: #1e293b; font-size: 14px; font-weight: 800; }
.site-week-excel-dropzone { display: grid; min-height: 112px; padding: 18px; place-items: center; align-content: center; gap: 5px; color: #334155; background: #fbfdff; border: 1px dashed #b8c7da; border-radius: 10px; cursor: pointer; text-align: center; transition: border-color .15s ease, background .15s ease; }
.site-week-excel-dropzone:hover,
.site-week-excel-dropzone.is-dragging { background: var(--excel-primary-soft); border-color: var(--excel-primary); }
.site-week-excel-dropzone.has-file { min-height: 86px; }
.site-week-excel-dropzone small { color: var(--excel-muted); font-size: 12px; }
.site-week-excel-file-icon { display: grid; width: 32px; height: 36px; margin-bottom: 3px; place-items: center; color: #fff; background: #16a36a; border-radius: 5px; font-size: 14px; font-style: normal; font-weight: 900; box-shadow: inset -5px 0 rgba(0, 0, 0, .08); }
.site-week-excel-file-icon.small { flex: 0 0 28px; width: 28px; height: 32px; margin: 0; font-size: 12px; }
.site-week-excel-file-input { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 !important; }
.site-week-excel-selected-file { display: flex; align-items: center; gap: 11px; margin-top: 9px; padding: 10px 12px; background: #f8fafc; border: 1px solid var(--excel-line); border-radius: 9px; }
.site-week-excel-selected-file[hidden] { display: none; }
.site-week-excel-file-details { display: grid; min-width: 0; flex: 1; }
.site-week-excel-file-details strong { overflow: hidden; color: #24324a; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.site-week-excel-file-details small { color: var(--excel-muted); font-size: 11px; }
.site-week-excel-reselect { flex: 0 0 auto; padding: 7px 10px; color: #334155; background: #fff; border: 1px solid var(--excel-line); border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 700; }
.site-week-excel-reselect:hover { color: var(--excel-primary); border-color: #93b4ee; }

.site-week-excel-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.site-week-excel-choice { display: flex; min-height: 66px; align-items: flex-start; gap: 10px; padding: 12px 14px; background: #fff; border: 1px solid var(--excel-line); border-radius: 9px; cursor: pointer; }
.site-week-excel-choice:hover { border-color: #9ab9ed; }
.site-week-excel-choice:has(input:checked) { background: var(--excel-primary-soft); border-color: #60a5fa; box-shadow: 0 0 0 1px rgba(37, 99, 235, .06); }
.site-week-excel-choice input[type="checkbox"],
.site-week-excel-choice input[type="radio"] { appearance: auto; flex: 0 0 17px; width: 17px !important; min-width: 17px !important; height: 17px !important; min-height: 17px !important; margin: 2px 0 0 !important; padding: 0 !important; accent-color: var(--excel-primary); border: initial; box-shadow: none; cursor: pointer; }
.site-week-excel-choice > span { display: grid; min-width: 0; gap: 3px; }
.site-week-excel-choice strong { color: #1e293b; font-size: 14px; }
.site-week-excel-choice small { color: var(--excel-muted); font-size: 12px; }
.site-week-excel-choice em { display: inline-flex; margin-left: 4px; padding: 1px 6px; color: #1d4ed8; background: #dbeafe; border-radius: 999px; font-size: 10px; font-style: normal; vertical-align: 1px; }

.site-week-excel-preview-section { padding-top: 2px; }
.site-week-excel-preview-panel { display: grid; gap: 10px; }
.site-week-excel-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.site-week-excel-stat { padding: 10px 12px; background: #f8fafc; border: 1px solid var(--excel-line); border-radius: 8px; }
.site-week-excel-stat small { display: block; color: var(--excel-muted); font-size: 11px; }
.site-week-excel-stat strong { display: block; margin-top: 3px; color: #334155; font-size: 18px; line-height: 1.25; }
.site-week-excel-stat.is-plan strong { color: #1d4ed8; }
.site-week-excel-stat.is-actual strong { color: #078258; }
.site-week-excel-stat.is-clear strong { color: #c2410c; }
.site-week-excel-stat.is-week strong { color: #6d28d9; }
.site-week-excel-result { display: flex; min-height: 64px; align-items: flex-start; gap: 11px; padding: 13px 14px; color: #334155; background: #f8fafc; border: 1px solid var(--excel-line); border-radius: 9px; }
.site-week-excel-result > span { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; color: #fff; background: #64748b; border-radius: 50%; font-size: 13px; font-weight: 900; }
.site-week-excel-result strong { display: block; margin-top: 1px; color: #1e293b; font-size: 13px; }
.site-week-excel-result p { margin: 3px 0 0; color: #64748b; font-size: 12px; }
.site-week-excel-result.is-empty { background: #fffaf0; border-color: #f2cc82; }
.site-week-excel-result.is-empty > span { background: #e9a514; }
.site-week-excel-result.is-success { background: #f0fdf7; border-color: #9de4c3; }
.site-week-excel-result.is-success > span { background: #059669; }
.site-week-excel-result.is-error { background: #fff5f5; border-color: #fecaca; }
.site-week-excel-result.is-error > span { background: #dc2626; }
.site-week-excel-error-table { max-height: 210px; overflow: auto; border: 1px solid #fecaca; border-radius: 8px; }
.site-week-excel-error-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.site-week-excel-error-table th,
.site-week-excel-error-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #fee2e2; }
.site-week-excel-error-table th { position: sticky; top: 0; color: #991b1b; background: #fff1f2; }
.site-week-excel-error-more { margin: 0; color: #991b1b; font-size: 12px; }

.site-week-excel-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; background: #fff; border-top: 1px solid #e5eaf1; }
.site-week-excel-footer > p { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--excel-muted); font-size: 11px; }
.site-week-excel-footer > p span { display: grid; width: 16px; height: 16px; place-items: center; color: #fff; background: #64748b; border-radius: 50%; font-size: 10px; font-weight: 800; }
.site-week-excel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.site-week-excel-actions button { min-height: 40px; padding: 0 15px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 750; }
.site-week-excel-actions button.secondary { color: #334155; background: #fff; border: 1px solid #d6dfeb; }
.site-week-excel-actions button.secondary:hover { color: #1d4ed8; background: #f8fbff; border-color: #9ab9ed; }
.site-week-excel-actions button.primary { color: #fff; background: var(--excel-primary); border: 1px solid var(--excel-primary); box-shadow: 0 4px 10px rgba(37, 99, 235, .18); }
.site-week-excel-actions button:disabled { color: #94a3b8 !important; background: #e5e7eb !important; border-color: #d8dee7 !important; box-shadow: none !important; cursor: not-allowed; opacity: 1; }

@media (max-width: 680px) {
  .site-week-excel-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .site-week-excel-shell { max-height: calc(100vh - 16px); }
  .site-week-excel-header { padding: 18px 18px 14px; }
  .site-week-excel-header h3 { font-size: 21px; }
  .site-week-excel-steps { padding: 0 18px 16px; }
  .site-week-excel-body { padding: 2px 18px 20px; }
  .site-week-excel-choice-grid { grid-template-columns: 1fr; }
  .site-week-excel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-week-excel-footer { align-items: stretch; flex-direction: column; padding: 12px 18px; }
  .site-week-excel-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .site-week-excel-actions #site-week-excel-apply-button { grid-column: 1 / -1; }
}

/* Employee self-service profile and records dialogs */
.self-service-popup {
  --line: #e6e7ed;
  --self-text: #30333f;
  --self-muted: #747986;
  --self-soft: #f8f9fb;
  font-family: var(--progress-font-family);
  width: min(1400px, calc(100vw - 40px));
  height: min(900px, calc(100vh - 40px));
  box-sizing: border-box;
  color: var(--self-text);
  background: #f5f6f8;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(31, 34, 48, 0.24);
}

.self-service-popup :is(input, select, textarea, button) {
  font: inherit;
}

.self-service-popup-header {
  min-height: 70px;
  padding: 13px 16px 13px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.self-service-popup-header .eyebrow {
  color: #7762c6;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.self-service-popup-header h2 {
  gap: 7px;
  margin: 3px 0 0;
  color: #2f3240;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.self-service-popup-header h2 i {
  color: #7762c6;
  font-size: 19px;
}

.self-service-popup-close {
  width: 36px;
  height: 36px;
  border: 1px solid #e1e3ea;
  border-radius: 7px;
  color: #626775;
  background: #fff;
  box-shadow: 0 1px 3px rgba(34, 34, 51, 0.04);
}

.self-service-popup-close:hover {
  border-color: #d5d7df;
  color: #353442;
  background: #f7f7fa;
}

.self-service-popup-close:focus-visible {
  outline: 2px solid #9274e1;
  outline-offset: 2px;
}

.self-service-popup-body {
  padding: 16px;
  background: #f5f6f8;
  scrollbar-width: thin;
  scrollbar-color: #b7bac4 transparent;
}

.self-service-popup-body::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.self-service-popup-body::-webkit-scrollbar-track {
  background: transparent;
}

.self-service-popup-body::-webkit-scrollbar-thumb {
  border: 2px solid #f5f6f8;
  border-radius: 999px;
  background: #b7bac4;
}

.self-service-popup .self-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(34, 34, 51, 0.025);
}

.self-service-popup .self-section + .self-section {
  margin-top: 12px;
}

.self-service-popup .section-heading {
  min-height: 66px;
  box-sizing: border-box;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.self-service-popup .section-heading h3 {
  margin: 0 0 3px;
  color: #30333f;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.self-service-popup .section-heading .muted,
.self-service-popup .profile-photo-form > .muted {
  margin: 0;
  color: var(--self-muted);
  font-size: 12px;
  line-height: 1.5;
}

.self-service-popup .badge {
  padding: 3px 9px;
  border: 1px solid #e2e4e9;
  border-radius: 999px;
  background: #f6f7f9;
  color: #6b7080;
  font-size: 11px;
  font-weight: 600;
}

.self-service-popup .self-form {
  padding: 14px 18px 16px;
}

.self-service-popup .compact-form {
  border-bottom: 1px solid #eef0f4;
  background: #fcfcfe;
}

.self-service-popup .form-grid {
  gap: 12px 16px;
}

.self-service-popup .field {
  min-width: 0;
  gap: 5px;
}

.self-service-popup .field > span {
  color: #626775;
  font-size: 12px;
  font-weight: 600;
}

.self-service-popup :is(input:not([type="file"]):not([type="hidden"]), select, textarea) {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e7e8ee;
  border-radius: 6px;
  color: #363b49;
  background: #fafbfc;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.self-service-popup :is(input:not([type="file"]):not([type="hidden"]), select) {
  height: 36px;
  min-height: 36px;
  padding: 6px 9px;
}

.self-service-popup textarea {
  min-height: 96px;
  padding: 8px 9px;
}

.self-service-popup :is(input[readonly], input:disabled, select:disabled, textarea:disabled) {
  color: #6f7480;
  background: #f1f2f5;
}

.self-service-popup :is(input:not([type="file"]), select, textarea):focus {
  border-color: #a58bdf;
  background: #fff;
  box-shadow: none;
}

.self-service-popup :is(input, select, textarea, button):focus-visible {
  outline: 2px solid #9274e1;
  outline-offset: 2px;
}

.self-service-popup input[type="file"] {
  box-sizing: border-box;
  min-height: 38px;
  padding: 5px;
  border: 1px solid #e7e8ee;
  border-radius: 6px;
  color: #525766;
  background: #fafbfc;
}

.self-service-popup input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 6px 10px;
  border: 1px solid #e1e3ea;
  border-radius: 5px;
  color: #525766;
  background: #fff;
  cursor: pointer;
}

.self-service-popup .form-actions {
  gap: 8px;
  margin-top: 14px;
}

.self-service-popup :is(button.primary, button.secondary, button.danger) {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.self-service-popup button.primary {
  border: 1px solid #353442;
  color: #fff;
  background: #353442;
}

.self-service-popup button.primary:hover {
  border-color: #464452;
  background: #464452;
}

.self-service-popup button.secondary {
  border: 1px solid #e1e3ea;
  color: #525766;
  background: #fff;
}

.self-service-popup button.secondary:hover {
  border-color: #d6d8e0;
  color: #353842;
  background: #f7f7fa;
}

.self-service-popup button.danger {
  border: 1px solid #f2dadd;
  color: #c04f59;
  background: #fff5f5;
}

.self-service-popup button.danger:hover {
  border-color: #ebc7cc;
  background: #fcecef;
}

.self-service-popup button.compact {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 11px;
}

.self-service-popup .address-search-button {
  width: 100%;
}

.self-service-popup .readonly-grid div {
  min-height: 70px;
  box-sizing: border-box;
  padding: 13px 18px;
  border-top: 1px solid #eef0f4;
}

.self-service-popup .readonly-grid dt {
  color: #777b87;
  font-size: 11px;
  font-weight: 500;
}

.self-service-popup .readonly-grid dd {
  margin-top: 5px;
  color: #30333f;
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.self-service-popup .profile-photo-editor {
  gap: 18px;
  padding: 16px 18px 18px;
  grid-template-columns: 132px minmax(0, 1fr);
}

.self-service-popup .profile-photo-preview {
  width: 132px;
  border: 1px solid #e1e3ea;
  border-radius: 8px;
  background: #f8f9fb;
  box-shadow: 0 2px 8px rgba(34, 34, 51, 0.04);
}

.self-service-popup .profile-photo-form {
  padding: 1px 0 0;
}

.self-service-popup .profile-photo-form .form-actions {
  justify-content: flex-start;
}

.self-service-popup .table-wrap {
  max-height: 320px;
  border-top: 0;
  scrollbar-width: thin;
  scrollbar-color: #c2c5ce transparent;
}

.self-service-popup table {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.self-service-popup th {
  padding: 8px 10px;
  color: #777b87;
  background: #f8f9fb;
  font-size: 11px;
  font-weight: 600;
  box-shadow: inset 0 -1px 0 #e8e9ee;
}

.self-service-popup th:last-child {
  border-left: 1px solid #eceef2;
  background: #f8f9fb;
}

.self-service-popup td {
  padding: 8px 10px;
  border-top: 0;
  border-bottom: 1px solid #eef0f4;
  color: #3d414d;
}

.self-service-popup tbody tr:nth-child(even) > td {
  background: #fcfcfe;
}

.self-service-popup tbody tr:hover > td {
  background: #f7f5fc;
}

.self-service-popup td strong {
  color: #30333f;
  font-weight: 600;
}

.self-service-popup .row-actions {
  text-align: right;
  white-space: nowrap;
}

.self-service-popup .row-actions > button + button {
  margin-left: 4px;
}

.self-service-popup .empty {
  color: var(--self-muted);
  background: #fcfcfe;
  font-size: 12px;
}

.self-service-popup .compact-empty {
  padding: 18px;
}

.self-service-popup .form-error {
  margin: 8px 0 0;
  color: #c04f59;
  font-size: 12px;
}

@media (max-width: 900px) {
  .self-service-popup-body {
    padding: 10px;
  }

  .self-service-popup .self-section + .self-section {
    margin-top: 10px;
  }
}

@media (max-width: 560px) {
  .self-service-popup-header {
    min-height: 62px;
    padding: 10px 12px 10px 14px;
  }

  .self-service-popup-header h2 {
    font-size: 18px;
  }

  .self-service-popup .section-heading,
  .self-service-popup .self-form {
    padding-right: 12px;
    padding-left: 12px;
  }

  .self-service-popup .profile-photo-editor {
    padding: 14px 12px 16px;
    grid-template-columns: 1fr;
  }

  .self-service-popup .profile-photo-preview {
    width: 120px;
  }

  .self-service-popup .form-actions {
    flex-wrap: wrap;
  }
}
