
:root{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#1e2a36;background:#f5f7fa
}
*{box-sizing:border-box}
body{margin:0}
button,input,select,textarea{font:inherit}
.customer-auth-body,.customer-app-body{min-height:100vh;background:#f5f7fa;color:#1e2a36}
.customer-auth-shell{width:min(460px,calc(100% - 28px));margin:0 auto;padding:48px 0 32px}
.customer-auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.customer-auth-brand>div:last-child{display:grid;gap:2px}
.customer-auth-brand strong{font-size:19px}
.customer-auth-brand span{font-size:12px;color:#71808e}
.customer-logo{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#1f587f;color:#fff;font-weight:900;letter-spacing:.04em}
.customer-logo.small{width:38px;height:38px;border-radius:11px;font-size:13px}
.customer-auth-card,.customer-card{border:1px solid #dfe5eb;border-radius:16px;background:#fff;box-shadow:0 8px 28px rgba(34,54,74,.06)}
.customer-auth-card{padding:22px}
.customer-auth-heading h1,.customer-page-head h1{margin:0;font-size:24px}
.customer-auth-heading p,.customer-page-head p{margin:6px 0 0;color:#72808d;line-height:1.45}
.customer-auth-form{display:grid;gap:14px;margin-top:20px}
.customer-auth-form label{display:grid;gap:6px}
.customer-auth-form label>span{font-size:12px;font-weight:800}
.customer-auth-form input{width:100%;padding:12px 13px;border:1px solid #ccd6df;border-radius:10px;background:#fff;color:#1e2a36;outline:none}
.customer-auth-form input:focus{border-color:#6d9dc1;box-shadow:0 0 0 3px rgba(84,142,185,.12)}
.customer-auth-form small{font-size:10px;color:#7c8995}
.customer-primary-button,.customer-ghost-button{border:0;border-radius:10px;cursor:pointer}
.customer-primary-button{padding:12px 15px;background:#1f587f;color:#fff;font-weight:800}
.customer-ghost-button{padding:8px 11px;background:transparent;color:inherit;border:1px solid currentColor;opacity:.75}
.customer-alert{margin-bottom:14px;padding:10px 12px;border-radius:10px;font-size:12px}
.customer-alert.error{background:#fff0ee;color:#9b4338;border:1px solid #f0c6c1}
.customer-alert.success{background:#eaf7ee;color:#39754d;border:1px solid #c9e8d3}
.customer-app-shell{width:min(980px,100%);margin:0 auto;min-height:100vh}
.customer-app-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 12px}
.customer-header-brand{display:flex;align-items:center;gap:10px}
.customer-header-brand>div:last-child{display:grid;gap:2px}
.customer-header-brand strong{font-size:15px}
.customer-header-brand span{font-size:10px;color:#74828e}
.customer-app-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 18px 14px}
.customer-app-nav a{padding:10px 8px;border-radius:10px;text-align:center;text-decoration:none;color:#667684;font-size:11px;font-weight:800;background:#eef2f5}
.customer-app-nav a.active{background:#dcecf7;color:#1f587f}
.customer-app-content{padding:0 18px 40px}
.customer-page-head{margin:6px 0 14px}
.customer-page-head h1{font-size:22px}
.customer-page-head p{font-size:12px}
.customer-card{padding:16px;margin-bottom:12px}
.customer-profile-row{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(0,1.35fr);gap:12px;padding:12px 0;border-bottom:1px solid #edf0f3}
.customer-profile-row:first-child{padding-top:0}
.customer-profile-row:last-child{border-bottom:0;padding-bottom:0}
.customer-profile-row span,.customer-note-card>span{font-size:10px;font-weight:800;text-transform:uppercase;color:#7b8894}
.customer-profile-row strong{font-size:13px;overflow-wrap:anywhere}
.customer-note-card p{margin:8px 0 0;font-size:13px;line-height:1.5}
.customer-empty-card{text-align:center;padding:34px 18px}
.customer-empty-icon{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 12px;border-radius:16px;background:#e7f1f8;color:#2b638a;font-weight:900;font-size:18px}
.customer-empty-card h2{margin:0;font-size:16px}
.customer-empty-card p{max-width:560px;margin:8px auto 0;color:#74818d;font-size:12px;line-height:1.5}
.customer-settings-form{display:grid;gap:18px}
.customer-settings-form fieldset{display:grid;gap:8px;padding:0;border:0;margin:0}
.customer-settings-form legend{margin-bottom:8px;font-size:12px;font-weight:900}
.customer-choice{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #dce3e9;border-radius:11px;cursor:pointer}
.customer-choice input{width:18px;height:18px}
.customer-choice span{display:grid;gap:2px}
.customer-choice strong{font-size:12px}
.customer-choice small{font-size:10px;color:#7b8793}
.customer-template-row{padding:10px 0;border-bottom:1px solid #edf0f3}
.customer-template-row:last-child{border-bottom:0}

/* font sizes */
.font-large{font-size:18px}
.font-xlarge{font-size:21px}
.font-large .customer-app-nav a,.font-xlarge .customer-app-nav a{font-size:.78em}
.font-large .customer-profile-row strong,.font-xlarge .customer-profile-row strong{font-size:.9em}

/* dark */
.scheme-dark{background:#151a20;color:#e8edf2}
.scheme-dark .customer-app-body{background:#151a20;color:#e8edf2}
.scheme-dark .customer-card{background:#1c232b;border-color:#2e3943;box-shadow:none}
.scheme-dark .customer-header-brand span,.scheme-dark .customer-page-head p,.scheme-dark .customer-empty-card p,.scheme-dark .customer-choice small{color:#94a2ae}
.scheme-dark .customer-app-nav a{background:#222b34;color:#aeb9c2}
.scheme-dark .customer-app-nav a.active{background:#28465b;color:#dff1ff}
.scheme-dark .customer-profile-row,.scheme-dark .customer-template-row{border-color:#303943}
.scheme-dark .customer-choice{border-color:#35414c}
.scheme-dark .customer-empty-icon{background:#253846;color:#cae8ff}

@media(max-width:620px){
  .customer-auth-shell{padding-top:28px}
  .customer-app-nav{position:sticky;top:0;z-index:5;background:inherit;padding-top:8px}
  .customer-app-nav a{font-size:9px;padding:9px 4px}
  .customer-profile-row{grid-template-columns:1fr;gap:4px}
}

/* Customer schedule calendar */
.customer-schedule-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.customer-outline-link,.customer-primary-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:10px;font-weight:800}
.customer-outline-link{padding:9px 11px;border:1px solid #cbd7e1;color:#315f80;background:#fff;font-size:11px}
.customer-primary-link{padding:9px 12px;background:#1f587f;color:#fff;font-size:11px}
.customer-template-summary,.customer-template-missing,.customer-template-current{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:12px;padding:12px 14px;border-radius:13px
}
.customer-template-summary{background:#edf6fc;border:1px solid #cbdfea}
.customer-template-summary>div,.customer-template-missing>div,.customer-template-current{display:grid;gap:3px}
.customer-template-summary span,.customer-template-current>span{font-size:9px;font-weight:900;text-transform:uppercase;color:#668096}
.customer-template-summary strong,.customer-template-current strong{font-size:13px}
.customer-template-summary small,.customer-template-current small{font-size:10px;color:#748492}
.customer-template-summary>a{font-size:10px;font-weight:800;color:#2e668e}
.customer-template-missing{background:#fff7df;border:1px solid #ead392}
.customer-template-missing strong{font-size:12px;color:#70591a}
.customer-template-missing span{font-size:10px;color:#856f37}
.customer-calendar-card{padding:14px;border:1px solid #dfe5eb;border-radius:16px;background:#fff;box-shadow:0 8px 28px rgba(34,54,74,.06)}
.customer-calendar-toolbar{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:10px;margin-bottom:12px}
.customer-calendar-toolbar>div{text-align:center;display:grid;gap:2px}
.customer-calendar-toolbar strong{font-size:18px}
.calendar-today-link{font-size:9px;color:#6c7e8d;text-decoration:none}
.calendar-arrow{display:grid;place-items:center;height:38px;border-radius:10px;background:#eef3f6;color:#315f80;text-decoration:none;font-size:26px;line-height:1}
.customer-calendar-stats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.customer-calendar-stats span{padding:5px 8px;border-radius:999px;font-size:9px;font-weight:800}
.customer-calendar-stats b{margin-left:3px}
.stat-day{background:#fff2bf;color:#755d08}.stat-night{background:#dfe8ff;color:#405d94}.stat-duty{background:#eadfff;color:#644a91}.stat-off{background:#edf0f3;color:#677582}
.customer-calendar-weekdays,.customer-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.customer-calendar-weekdays{margin-bottom:6px}
.customer-calendar-weekdays span{text-align:center;font-size:9px;font-weight:900;color:#8a96a1;text-transform:uppercase}
.calendar-empty{min-height:74px}
.calendar-day{position:relative;display:grid;align-content:space-between;gap:2px;min-height:82px;padding:8px;border:1px solid transparent;border-radius:11px;text-align:left;color:#233341;cursor:pointer}
.calendar-day-number{font-size:11px;font-weight:900}
.calendar-shift-symbol{font-size:20px;font-weight:900;line-height:1}
.calendar-shift-label{font-size:9px;font-weight:800}
.calendar-day.shift-day{background:#fff7d9;border-color:#f1dfa2}.calendar-day.shift-night{background:#edf2ff;border-color:#ccd9f6}.calendar-day.shift-duty{background:#f1ebfb;border-color:#dcccf2}.calendar-day.shift-off{background:#f4f6f7;border-color:#e4e8eb;color:#77838e}
.calendar-day.is-today{outline:2px solid #2b6e9d;outline-offset:1px}
.calendar-day.is-manual i{position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:#d45b4e}
.customer-calendar-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid #edf0f3}
.customer-calendar-legend span{display:inline-flex;align-items:center;gap:5px;font-size:9px;color:#74818d}
.customer-calendar-legend i{width:10px;height:10px;border-radius:3px}.legend-day{background:#f1dfa2}.legend-night{background:#ccd9f6}.legend-duty{background:#dcccf2}.legend-off{background:#e4e8eb}
.customer-calendar-legend b{color:#d45b4e;font-size:16px;line-height:.5}
.customer-day-dialog{width:min(430px,calc(100vw - 28px));padding:0;border:0;border-radius:16px;background:transparent}
.customer-day-dialog::backdrop{background:rgba(20,31,42,.45)}
.customer-day-dialog-card{padding:18px;border-radius:16px;background:#fff;color:#1e2a36;box-shadow:0 22px 65px rgba(20,31,42,.25)}
.customer-day-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.customer-day-dialog-head span{font-size:10px;color:#798794}.customer-day-dialog-head h2{margin:2px 0 0;font-size:19px}
.customer-dialog-close{border:0;background:#eef2f5;width:32px;height:32px;border-radius:9px;font-size:20px;cursor:pointer}
.customer-day-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.day-choice{cursor:pointer}.day-choice input{position:absolute;opacity:0;pointer-events:none}
.day-choice span{display:flex;align-items:center;gap:8px;padding:11px;border:1px solid #dce3e9;border-radius:11px}
.day-choice span>b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;font-size:11px}
.day-choice.day span>b{background:#fff0b7}.day-choice.night span>b{background:#dae5ff}.day-choice.duty span>b{background:#e8dcf8}.day-choice.off span>b{background:#edf0f2}
.day-choice strong{font-size:11px}.day-choice input:checked+span{border-color:#4d86ae;box-shadow:0 0 0 2px rgba(66,126,169,.12)}
.customer-day-form .customer-primary-button{grid-column:1/-1;margin-top:4px}
.customer-reset-day-form{text-align:center;margin-top:10px}.customer-text-button{border:0;background:transparent;color:#6b7d8c;text-decoration:underline;font-size:10px;cursor:pointer}
.customer-template-current{background:#edf6fc;border:1px solid #cbdfea}
.customer-template-form{display:grid;gap:12px}
.template-step-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.template-step-head>b{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:#1f587f;color:#fff}
.template-step-head>div{display:grid;gap:2px}.template-step-head strong{font-size:13px}.template-step-head span{font-size:10px;color:#788692}
.schedule-pattern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.schedule-pattern-card{cursor:pointer}.schedule-pattern-card>input{position:absolute;opacity:0;pointer-events:none}
.schedule-pattern-card>span{display:grid;gap:5px;height:100%;padding:12px;border:1px solid #dce3e9;border-radius:12px;background:#fff}
.schedule-pattern-card strong{font-size:12px}.schedule-pattern-card small{font-size:9px;color:#74828e;line-height:1.4}
.schedule-pattern-card em{display:flex;gap:4px;margin-top:4px;font-style:normal;flex-wrap:wrap}
.mini-shift{display:grid;place-items:center;width:25px;height:25px;border-radius:7px;font-size:9px;font-weight:900;font-style:normal}
.mini-shift.day{background:#fff0b7}.mini-shift.night{background:#dae5ff}.mini-shift.duty{background:#e8dcf8}.mini-shift.off{background:#edf0f2;color:#78848f}
.schedule-pattern-card>input:checked+span{border-color:#4d86ae;background:#f3f8fc;box-shadow:0 0 0 2px rgba(66,126,169,.12)}
.first-shift-date-field{display:grid;gap:7px;max-width:330px}.first-shift-date-field>span{font-size:10px;font-weight:900;text-transform:uppercase;color:#74828e}
.first-shift-date-field input{padding:12px;border:1px solid #ccd6df;border-radius:10px;background:#fff;color:#1e2a36}
.customer-template-save{width:100%;max-width:420px;margin:0 auto}
.scheme-dark .customer-calendar-card,.scheme-dark .customer-day-dialog-card,.scheme-dark .schedule-pattern-card>span{background:#1c232b;color:#e8edf2;border-color:#34404b}
.scheme-dark .customer-template-summary,.scheme-dark .customer-template-current{background:#223544;border-color:#34536b}
.scheme-dark .customer-template-missing{background:#3b3320;border-color:#625331}
.scheme-dark .calendar-arrow,.scheme-dark .customer-dialog-close{background:#26313a;color:#d9e5ee}
.scheme-dark .calendar-day.shift-day{background:#453d20;border-color:#665a2b}.scheme-dark .calendar-day.shift-night{background:#222f4b;border-color:#34476e}.scheme-dark .calendar-day.shift-duty{background:#352a48;border-color:#4c3b66}.scheme-dark .calendar-day.shift-off{background:#242b31;border-color:#333c44;color:#a8b2bb}
.scheme-dark .first-shift-date-field input{background:#171d23;color:#e8edf2;border-color:#3b4854}
@media(max-width:620px){
  .customer-schedule-head{align-items:flex-start}
  .customer-outline-link{white-space:nowrap}
  .customer-calendar-card{padding:10px}
  .customer-calendar-weekdays,.customer-calendar-grid{gap:4px}
  .calendar-empty{min-height:60px}
  .calendar-day{min-height:68px;padding:6px;border-radius:9px}
  .calendar-day-number{font-size:10px}.calendar-shift-symbol{font-size:17px}.calendar-shift-label{font-size:7px}
  .schedule-pattern-grid{grid-template-columns:1fr}
}

/* Actual PE work schedule types */
@media (min-width:760px) {
  .schedule-pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.mini-shift.manual{
  width:auto;
  min-width:72px;
  padding:0 8px;
  background:#e8eef3;
  color:#536a7c;
}

/* Shift reference modal: DD / DD / NN */
.shift-reference-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid #dbe4eb;
  border-radius:12px;
  background:#f8fafc;
}
.shift-reference-value{display:grid;gap:3px}
.shift-reference-value span,.shift-reference-date>span{
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  color:#748493
}
.shift-reference-value strong{font-size:13px}
.customer-outline-button{
  padding:10px 12px;
  border:1px solid #c4d3df;
  border-radius:10px;
  background:#fff;
  color:#315f80;
  font-weight:800;
  font-size:11px;
  cursor:pointer
}
.shift-reference-date{display:grid;gap:6px;margin-bottom:12px}
.shift-reference-date input{
  width:100%;
  padding:11px 12px;
  border:1px solid #ccd7e0;
  border-radius:10px;
  background:#fff;
  color:#1e2a36
}
.shift-phase-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.shift-phase-choice{cursor:pointer}
.shift-phase-choice input{position:absolute;opacity:0;pointer-events:none}
.shift-phase-choice span{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:58px;
  padding:10px;
  border:1px solid #dce3e9;
  border-radius:11px
}
.shift-phase-choice span>b{
  display:grid;
  place-items:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:9px;
  font-size:10px
}
.shift-phase-choice.day span>b{background:#fff0b7;color:#765e08}
.shift-phase-choice.night span>b{background:#dae5ff;color:#425f91}
.shift-phase-choice strong{font-size:10px}
.shift-phase-choice input:checked+span{
  border-color:#4d86ae;
  box-shadow:0 0 0 2px rgba(66,126,169,.12);
  background:#f6fbff
}
.scheme-dark .shift-reference-panel{background:#1b242c;border-color:#34414c}
.scheme-dark .customer-outline-button{background:#202a32;border-color:#3b4a56;color:#d4e9f8}
.scheme-dark .shift-reference-date input{background:#171d23;color:#e8edf2;border-color:#3b4854}
.scheme-dark .shift-phase-choice span{border-color:#35414c}
.scheme-dark .shift-phase-choice input:checked+span{background:#223544;border-color:#4d86ae}
@media(max-width:560px){
  .shift-reference-panel{align-items:stretch;flex-direction:column}
  .shift-phase-grid{grid-template-columns:1fr}
}

/* Current + next-week schedule window */
.calendar-month-section + .calendar-month-section{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #e5eaee;
}
.calendar-month-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:4px 0 10px;
}
.calendar-month-title strong{font-size:15px}
.calendar-month-title span{font-size:9px;font-weight:800;text-transform:uppercase;color:#82909c}
.calendar-day.shift-unset{
  background:#fff;
  border:1px dashed #c6d2dc;
  color:#70808d;
}
.calendar-day.shift-unset .calendar-shift-symbol{
  color:#4f7897;
}
.legend-unset{
  background:#fff;
  border:1px dashed #aebdca;
}
.calendar-confirm-text{
  margin:0 0 14px;
  color:#667786;
  font-size:12px;
  line-height:1.5;
}
.shift-anchor-form{
  grid-template-columns:1fr 1fr;
}
.shift-anchor-form .shift-phase-choice{
  min-width:0;
}
.scheme-dark .calendar-month-section + .calendar-month-section{border-color:#303943}
.scheme-dark .calendar-day.shift-unset{
  background:#1b2229;
  border-color:#475461;
  color:#9cabb7;
}
.scheme-dark .legend-unset{background:#1b2229;border-color:#657482}
@media(max-width:560px){
  .shift-anchor-form{grid-template-columns:1fr}
}

/* Trip cancellation workflow */
.customer-cancel-trip-button{
  width:100%;
  margin-top:12px;
  padding:11px 13px;
  border:1px solid #e0b4ae;
  border-radius:10px;
  background:#fff7f6;
  color:#a34d43;
  font-weight:850;
  cursor:pointer;
}
.trip-cancel-direction-list{display:grid;gap:9px}
.trip-cancel-direction{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:13px;
  border:1px solid #d9e1e7;
  border-radius:11px;
  background:#fff;
  color:#22323f;
  text-align:left;
  cursor:pointer;
}
.trip-cancel-direction>span{display:grid;gap:3px}
.trip-cancel-direction strong{font-size:13px}
.trip-cancel-direction small{font-size:9px;color:#788692}
.trip-cancel-direction em{
  font-size:9px;
  font-style:normal;
  font-weight:850;
  color:#a34d43;
}
.trip-cancel-direction.is-late{border-color:#e2beb8;background:#fff9f8}
.trip-cancel-direction.is-cancelled{opacity:.58;cursor:default}
.late-cancel-warning{
  padding:13px;
  border:1px solid #e4b9b2;
  border-radius:11px;
  background:#fff5f3;
}
.late-cancel-warning strong{display:block;color:#9d493f;font-size:13px}
.late-cancel-warning p{margin:7px 0;color:#744c47;font-size:12px;line-height:1.45}
.late-cancel-warning small{font-size:9px;color:#8d625d}
.late-cancel-warning-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.customer-ghost-action,.customer-danger-action{
  padding:10px 12px;border-radius:9px;font-weight:800;cursor:pointer
}
.customer-ghost-action{border:1px solid #d5dee5;background:#fff;color:#5f7180}
.customer-danger-action{border:1px solid #aa4d42;background:#aa4d42;color:#fff}
.trip-cancel-flags{
  display:grid;
  gap:2px;
  margin-top:2px;
}
.trip-cancel-flags em{
  display:block;
  padding:2px 4px;
  border-radius:4px;
  background:#f6dfdc;
  color:#99483f;
  font-size:6px;
  font-style:normal;
  font-weight:900;
  line-height:1.2;
}
.scheme-dark .customer-cancel-trip-button{background:#352523;border-color:#69423d;color:#f0b2aa}
.scheme-dark .trip-cancel-direction{background:#1c232b;border-color:#35414c;color:#e8edf2}
.scheme-dark .trip-cancel-direction.is-late{background:#332422;border-color:#65413c}
.scheme-dark .late-cancel-warning{background:#352523;border-color:#69423d}
.scheme-dark .late-cancel-warning strong{color:#f0b2aa}
.scheme-dark .late-cancel-warning p,.scheme-dark .late-cancel-warning small{color:#d0aaa5}
.scheme-dark .customer-ghost-action{background:#202831;border-color:#3b4854;color:#d6e0e8}
