:root {
  --bg:#f4f7fb; --panel:#fff; --text:#152033; --muted:#6f7a8c; --line:#dfe5ee;
  --accent:#2167f3; --accent2:#174fc1; --green:#1f9d68; --red:#d94545; --amber:#b97200;
  --shadow:0 10px 30px rgba(22,36,66,.08); --radius:16px;
}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit} button{cursor:pointer}.hidden{display:none!important}
.topbar{min-height:86px;padding:7px 28px;background:#1b2841;color:#fff;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 18px rgba(10,20,40,.18)}
.topbar h1{font-size:22px;margin:0}.topbar p{margin:2px 0 0;color:#c7cfdb;font-size:13px}
.primary,.ghost,.icon-btn{border:0;border-radius:10px;padding:10px 14px;font-weight:700}.primary{background:var(--accent);color:#fff}.primary:hover{background:var(--accent2)}.ghost{background:#edf2f8;color:#27344b}.icon-btn{background:#edf2f8;font-size:22px;padding:6px 12px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;padding:20px;max-width:1700px;margin:auto}.main-panel,.card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}.main-panel{padding:18px;min-width:0}.sidebar{display:flex;flex-direction:column;gap:20px}.card{padding:16px}
.calendar-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:14px}.toolbar-left{display:flex;gap:8px}.calendar-toolbar h2{margin:0;font-size:23px;text-align:center}.legend{display:flex;gap:12px;justify-content:flex-end;font-size:12px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:5px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.scheduled{background:var(--accent)}.dot.completed{background:var(--green)}.dot.overdue{background:var(--red)}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:12px;overflow:hidden}.weekday{padding:10px 8px;background:#f7f9fc;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;font-size:12px;font-weight:800;color:#607086;text-transform:uppercase}.day{min-height:132px;padding:7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;position:relative;overflow:hidden}.day.outside{background:#fafbfd;color:#a8b1bf}.day.today{box-shadow:inset 0 0 0 2px rgba(33,103,243,.35)}.day.drag-target{background:#eef5ff;box-shadow:inset 0 0 0 2px var(--accent)}.day-number{font-size:12px;font-weight:800;margin-bottom:6px;display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%}.day.today .day-number{background:var(--accent);color:white}.events{display:flex;flex-direction:column;gap:5px}
.job{border:0;border-radius:9px;padding:6px 7px;background:#e9f0ff;color:#174aab;text-align:left;font-size:11px;line-height:1.25;font-weight:800;box-shadow:0 2px 5px rgba(24,50,95,.08);touch-action:none;user-select:none;cursor:grab}.job:active{cursor:grabbing}.job.completed{background:#e7f8f0;color:#137049;text-decoration:none}.job.overdue{background:#fff0f0;color:#b12f2f}.job .sub{display:block;font-weight:600;opacity:.76;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.drag-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:.88;transform:rotate(2deg);width:170px;box-shadow:0 12px 30px rgba(20,40,70,.25)}
.section-title{display:flex;align-items:center;justify-content:space-between}.section-title h3{margin:0;font-size:16px}.badge{min-width:25px;height:25px;padding:0 8px;border-radius:999px;background:#ffe7e7;color:#b82727;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}.badge.soft{background:#edf2f8;color:#526178}.muted{color:var(--muted);font-size:12px;margin:6px 0 12px}.attention-list,.client-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto}.attention-item,.client-item{border:1px solid var(--line);border-radius:10px;padding:9px 10px}.attention-item{background:#fff8f8}.attention-item strong,.client-item strong{display:block;font-size:13px}.attention-item span,.client-item span{font-size:11px;color:var(--muted)}.client-item{display:flex;justify-content:space-between;gap:8px;align-items:center}.client-item .meta{min-width:0}.client-item button{border:0;background:transparent;color:#9b3d3d;font-size:11px}
.modal{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(6,13,26,.52);backdrop-filter:blur(2px)}.modal-sheet{position:relative;z-index:1;background:#fff;border-radius:18px;box-shadow:0 25px 70px rgba(0,0,0,.25);width:min(700px,100%);max-height:90vh;overflow:auto;padding:22px}.job-sheet{width:min(520px,100%)}.close{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:27px;color:#7a8495}.modal-sheet h2{margin:0 0 16px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid label{font-size:12px;font-weight:800;color:#4d5b70}.form-grid input,.form-grid select,.form-grid textarea{width:100%;margin-top:5px;border:1px solid #ccd5e2;border-radius:9px;padding:10px;background:#fff;color:var(--text)}.form-grid textarea{resize:vertical}.wide{grid-column:1/-1}.hidden-field{display:none}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.job-info{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;font-size:13px;margin:16px 0}.job-info dt{font-weight:800;color:#657086}.job-info dd{margin:0}.job-actions{display:flex;gap:8px;flex-wrap:wrap}.danger{background:#fff0f0;color:#ae3030;border:0;border-radius:10px;padding:10px 14px;font-weight:800}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#111b2c;color:white;padding:10px 15px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:9000;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:1050px){.layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr}.calendar-toolbar{grid-template-columns:1fr auto}.legend{grid-column:1/-1;justify-content:center}}
@media (max-width:720px){.topbar{padding:0 14px}.layout{padding:10px}.main-panel{padding:10px}.sidebar{grid-template-columns:1fr}.calendar-toolbar{grid-template-columns:1fr}.toolbar-left{justify-content:center}.calendar-toolbar h2{order:-1}.legend{font-size:11px}.calendar{min-width:650px}.main-panel{overflow-x:auto}.day{min-height:115px}.job{font-size:10px;padding:5px}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.modal{padding:10px}.modal-sheet{padding:18px}.topbar h1{font-size:18px}.topbar .primary{padding:9px 10px}}
.brand{display:flex;align-items:center;gap:22px}.company-logo{display:block;width:auto;height:68px;flex:0 0 auto;object-fit:contain}.brand-copy{flex:0 0 auto}.topnav{display:flex;gap:6px}.nav-btn{border:0;background:transparent;color:#c7cfdb;padding:10px 12px;border-radius:9px;font-weight:800}.nav-btn.active,.nav-btn:hover{background:#263754;color:#fff}.full-width{width:100%;margin-top:12px}.clickable-client{width:100%;background:#fff;color:inherit;border:1px solid var(--line);text-align:left}.clickable-client:hover{border-color:#b8c6dc;background:#f8fbff}.chevron{font-size:22px;color:#8492a7}.manual-tag{display:inline-block;margin-left:5px;font-size:8px;letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.65);padding:1px 4px;border-radius:999px;vertical-align:1px}
.database-layout{display:grid;grid-template-columns:minmax(330px,440px) minmax(0,1fr);gap:20px;padding:20px;max-width:1500px;margin:auto}.database-list,.customer-detail{min-height:calc(100vh - 118px)}.database-header{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.database-header h2,.customer-detail h2{margin:0}.search-input{width:100%;border:1px solid #ccd5e2;border-radius:10px;padding:10px 12px;background:#fff}.database-customer-list{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 240px);overflow:auto}.database-row{display:flex;justify-content:space-between;gap:16px;align-items:center;width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;color:inherit}.database-row:hover,.database-row.selected{border-color:#9eb8ea;background:#f4f8ff}.database-row strong,.database-row span{display:block}.database-row strong{font-size:14px}.database-row>div>span{font-size:12px;color:var(--muted);margin-top:2px}.database-row-meta{text-align:right;min-width:105px}.database-row-meta span{font-size:11px!important}.customer-detail{padding:20px}.empty-state{height:100%;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}.empty-state h3{margin:0;color:var(--text)}.empty-state.small{min-height:100px}.detail-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:16px}.detail-heading p{margin:4px 0 0;color:var(--muted)}.detail-actions{display:flex;gap:8px;flex-wrap:wrap}.customer-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.customer-stats>div,.customer-info-grid>div{border:1px solid var(--line);background:#f9fbfd;border-radius:12px;padding:12px}.customer-stats span,.customer-info-grid span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;margin-bottom:5px}.customer-stats strong,.customer-info-grid strong{font-size:13px}.customer-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}.wide-info{grid-column:1/-1}.wash-history-header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:8px}.wash-history-header h3{margin:0}.wash-table{border:1px solid var(--line);border-radius:12px;overflow:hidden}.wash-row{display:grid;grid-template-columns:1.2fr .8fr .9fr .5fr;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);font-size:12px}.wash-row:first-child{border-top:0}.wash-head{background:#f5f8fc;font-size:10px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:var(--muted)}.status-pill{display:inline-flex;width:max-content;padding:4px 8px;border-radius:999px;background:#eaf1ff;color:#2457a6;font-size:10px;font-weight:800}.status-pill.completed{background:#e6f7ef;color:#16704a}.tiny-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 8px;font-size:11px}.archive-row{display:flex;justify-content:flex-end;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.standalone-label{display:block;font-size:12px;font-weight:800;color:#4d5b70;margin-top:12px}.standalone-label input,.standalone-label textarea{width:100%;margin-top:5px;border:1px solid #ccd5e2;border-radius:9px;padding:10px}.app-view{min-height:calc(100vh - 86px)}
@media (max-width:900px){.database-layout{grid-template-columns:1fr}.database-list,.customer-detail{min-height:auto}.database-customer-list{max-height:360px}.customer-stats{grid-template-columns:1fr 1fr}.brand{gap:14px}.topnav{display:none}}
@media (max-width:620px){.customer-stats,.customer-info-grid{grid-template-columns:1fr}.wide-info{grid-column:auto}.detail-heading,.wash-history-header{flex-direction:column}.wash-row{grid-template-columns:1fr .7fr .8fr}.wash-row span:last-child{grid-column:1/-1}.wash-head span:last-child{display:none}.database-layout{padding:10px}.customer-detail{padding:14px}}


/* V1.2 authentication */
.header-actions{display:flex;align-items:center;gap:10px}.signed-in-user{font-size:13px;color:#c7cfdb;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-page{min-height:100vh;background:linear-gradient(135deg,#f7f9fc 0%,#eef3f8 100%);display:grid;place-items:center;padding:24px}
.login-shell{width:min(100%,430px)}.login-card{background:#fff;border:1px solid #e3e8ef;border-radius:20px;padding:34px;box-shadow:0 20px 60px rgba(16,24,40,.10)}
.login-card h1{margin:14px 0 4px;font-size:28px}.login-mark{width:48px;height:48px;border-radius:14px;background:#101828;color:white;display:grid;place-items:center;font-weight:800;letter-spacing:.04em}
.login-form{display:grid;gap:16px;margin-top:24px}.login-form label{display:grid;gap:7px;font-weight:650;font-size:14px}.login-form input{width:100%;padding:12px 13px;border:1px solid #d0d5dd;border-radius:10px;font:inherit;box-sizing:border-box}.login-form .primary{width:100%;margin-top:4px}.login-error{margin:0;color:#b42318;background:#fef3f2;border:1px solid #fecdca;border-radius:10px;padding:10px 12px;font-size:13px}.hidden{display:none!important}
@media(max-width:720px){.signed-in-user{display:none}.header-actions{gap:6px}}
.permission-hidden{display:none!important}.management-card{max-width:1180px;margin:24px auto}.management-header{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.user-list,.activity-list{display:flex;flex-direction:column;gap:10px}.user-row{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(170px,.9fr) auto;gap:18px;align-items:center;padding:14px 16px;border:1px solid var(--border,#dfe3ea);border-radius:12px;background:var(--surface,#fff)}.user-row>div:first-child{display:flex;flex-direction:column;gap:4px}.user-row>div:first-child span,.user-meta{font-size:.85rem;color:var(--muted,#6b7280)}.user-disabled{opacity:.58}.user-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.you-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;background:#e7efff;color:#2857a4;font-size:.72rem}.activity-row{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(240px,1.4fr) 170px;gap:16px;padding:12px 14px;border-bottom:1px solid var(--border,#e5e7eb);align-items:start}.activity-row span,.activity-row time{font-size:.85rem;color:var(--muted,#6b7280)}.activity-row time{text-align:right}.standalone-label select{width:100%;margin-top:6px}
@media(max-width:800px){.management-card{margin:12px}.management-header{align-items:flex-start}.user-row,.activity-row{grid-template-columns:1fr}.user-actions{justify-content:flex-start}.activity-row time{text-align:left}.topnav{flex-wrap:wrap}}

/* V1.3.1 mobile navigation fix */
@media (max-width:900px){
  .topbar{
    height:auto;
    min-height:78px;
    padding:10px 14px;
    gap:10px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .brand{
    flex:1 1 100%;
    width:100%;
    min-width:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 12px;
  }
  .brand-copy{flex:1 1 180px;min-width:0}
  .company-logo{height:56px}
  .topnav{
    display:flex;
    flex:1 1 100%;
    width:100%;
    gap:4px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 0 4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .topnav::-webkit-scrollbar{display:none}
  .nav-btn{
    flex:0 0 auto;
    padding:9px 11px;
    white-space:nowrap;
  }
  .header-actions{
    width:100%;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  .app-view{min-height:calc(100vh - 132px)}
}
@media (max-width:520px){
  .topbar{padding:9px 10px}
  .company-logo{height:48px}
  .topbar h1{font-size:18px}
  .topbar p{font-size:11px}
  .nav-btn{font-size:13px;padding:8px 10px}
  .header-actions .ghost,.header-actions .primary{padding:8px 10px;font-size:13px}
}

.danger-btn{border-color:#7f1d1d;color:#fecaca}.danger-btn:hover{background:#3f1218;border-color:#b91c1c}

/* V1.4.3 mobile calendar readability improvements.
   Desktop calendar styling is intentionally unchanged. */
@media (max-width:720px){
  /* Give each day a little more breathing room on phones while retaining
     horizontal scrolling for the seven-column month view. */
  .calendar{min-width:700px}
  .day{
    min-height:145px;
    padding:6px;
  }
  .events{gap:6px}

  /* Mobile event cards may grow vertically instead of hiding useful text. */
  .job{
    font-size:10px;
    line-height:1.22;
    padding:6px;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .job .service-icon{
    font-size:9px;
    line-height:1;
  }
  .job .sub{
    display:block;
    margin-top:3px;
    font-size:9.5px;
    line-height:1.22;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
  }
  .manual-tag{
    font-size:7px;
    margin-left:3px;
    padding:1px 3px;
  }
}

/* V1.5.0 custom-date scheduling */
.custom-dates-field{grid-column:1/-1;border:1px solid var(--line);border-radius:12px;padding:12px;background:#f8fbff;display:flex;align-items:center;justify-content:space-between;gap:14px}
.custom-dates-field p{margin:3px 0 0}.custom-dates-field .ghost{white-space:nowrap}
.custom-date-sheet{width:min(780px,100%)}
.custom-picker-heading{padding-right:36px}.custom-picker-heading h2{margin-bottom:2px}
.custom-calendar-toolbar{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin:8px 0 12px}.custom-calendar-toolbar h3{text-align:center;margin:0;font-size:18px}
.custom-date-calendar{display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:12px;overflow:hidden}
.custom-weekday{padding:8px 4px;background:#f5f8fc;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase}
.custom-date-day{min-height:66px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:800}
.custom-date-day:hover{background:#f2f7ff}.custom-date-day.outside{background:#fafbfd;color:#a7afbc}.custom-date-day.selected{background:#2167f3;color:#fff;box-shadow:inset 0 0 0 2px #174fc1}.custom-date-day.disabled{opacity:.4;cursor:not-allowed}.custom-date-day small{font-size:11px}
.custom-selected-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 8px}.custom-selected-heading h3{margin:0}.custom-selected-heading p{margin:3px 0 0}
.custom-selected-list{display:flex;flex-direction:column;gap:7px;max-height:250px;overflow:auto}
.custom-selected-row{display:grid;grid-template-columns:1fr minmax(190px,260px);gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:#fff}
.custom-selected-row>div{display:flex;flex-direction:column;gap:2px}.custom-selected-row strong{font-size:13px}.custom-selected-row span{font-size:11px;color:var(--muted)}.custom-selected-row select{width:100%;border:1px solid #ccd5e2;border-radius:8px;padding:8px;background:#fff}
@media(max-width:620px){.custom-dates-field{align-items:stretch;flex-direction:column}.custom-dates-field .ghost{width:100%}.custom-date-sheet{padding:14px}.custom-date-day{min-height:54px;font-size:12px}.custom-selected-row{grid-template-columns:1fr}.custom-selected-list{max-height:220px}}

/* V1.5.1 Legendary Marine branding: top bar matches logo navy #1B2841. */

/* V1.5.2 — professional header polish + user-selectable light/dark appearance. */
:root{
  --surface-soft:#f8fafc;
  --surface-muted:#f5f8fc;
  --surface-hover:#f4f8ff;
  --input-bg:#fff;
  --calendar-day:#fff;
  --calendar-outside:#fafbfd;
  --weekday-bg:#f7f9fc;
  --header-navy:#1b2841;
  --header-navy-hover:#2b3d5d;
  --job-bg:#e9f0ff;
  --job-text:#174aab;
  --job-completed-bg:#e7f8f0;
  --job-completed-text:#137049;
  --job-overdue-bg:#fff0f0;
  --job-overdue-text:#b12f2f;
}

/* More intentional, business-grade masthead typography. */
.topbar{
  background:var(--header-navy);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-copy h1{
  margin:0;
  font-size:20px;
  line-height:1;
  font-weight:650;
  letter-spacing:.035em;
  text-transform:uppercase;
  color:#f7f9fc;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.topnav{align-items:center}
.nav-btn{
  font-size:13px;
  letter-spacing:.015em;
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.nav-btn.active,.nav-btn:hover{background:var(--header-navy-hover)}
.nav-btn:hover{transform:translateY(-1px)}
.header-actions .primary,.header-actions .ghost,.theme-toggle{box-shadow:0 1px 2px rgba(0,0,0,.08)}

.theme-toggle{
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  min-height:39px;
  padding:8px 11px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(255,255,255,.08);
  color:#f5f7fb;
  font-weight:750;
  font-size:13px;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.theme-toggle:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.theme-icon{font-size:16px;line-height:1}

/* Dark appearance. Header remains the Legendary Marine navy while the workspace dims. */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0d1420;
  --panel:#151f2d;
  --text:#e7edf6;
  --muted:#9aa8bb;
  --line:#2b394b;
  --accent:#5f91ff;
  --accent2:#79a4ff;
  --green:#4fc08d;
  --red:#ff7474;
  --amber:#e9ad49;
  --shadow:0 12px 34px rgba(0,0,0,.26);
  --surface-soft:#182433;
  --surface-muted:#1b2736;
  --surface-hover:#1d2d43;
  --input-bg:#111a27;
  --calendar-day:#151f2d;
  --calendar-outside:#111a25;
  --weekday-bg:#192534;
  --job-bg:#203a69;
  --job-text:#c7dcff;
  --job-completed-bg:#173b31;
  --job-completed-text:#9be7c7;
  --job-overdue-bg:#48272c;
  --job-overdue-text:#ffb7bd;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html[data-theme="dark"] .main-panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-sheet,
html[data-theme="dark"] .customer-detail,
html[data-theme="dark"] .database-list{background:var(--panel);border-color:var(--line)}
html[data-theme="dark"] .weekday,
html[data-theme="dark"] .wash-head,
html[data-theme="dark"] .custom-weekday{background:var(--weekday-bg);color:#aab6c7}
html[data-theme="dark"] .day{background:var(--calendar-day);border-color:var(--line)}
html[data-theme="dark"] .day.outside{background:var(--calendar-outside);color:#647286}
html[data-theme="dark"] .day.drag-target{background:#1c3150}
html[data-theme="dark"] .calendar,
html[data-theme="dark"] .custom-date-calendar,
html[data-theme="dark"] .wash-table{border-color:var(--line)}
html[data-theme="dark"] .job{background:var(--job-bg);color:var(--job-text);box-shadow:0 3px 9px rgba(0,0,0,.2)}
html[data-theme="dark"] .job.completed{background:var(--job-completed-bg);color:var(--job-completed-text)}
html[data-theme="dark"] .job.overdue{background:var(--job-overdue-bg);color:var(--job-overdue-text)}
html[data-theme="dark"] .attention-item{background:#241c25;border-color:#49313c}
html[data-theme="dark"] .client-item,
html[data-theme="dark"] .clickable-client,
html[data-theme="dark"] .database-row,
html[data-theme="dark"] .tiny-btn,
html[data-theme="dark"] .custom-selected-row,
html[data-theme="dark"] .custom-date-day,
html[data-theme="dark"] .user-row{background:var(--panel);color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .clickable-client:hover,
html[data-theme="dark"] .database-row:hover,
html[data-theme="dark"] .database-row.selected{background:var(--surface-hover);border-color:#4d6d9e}
html[data-theme="dark"] .customer-stats>div,
html[data-theme="dark"] .customer-info-grid>div,
html[data-theme="dark"] .custom-dates-field{background:var(--surface-soft);border-color:var(--line)}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .form-grid input,
html[data-theme="dark"] .form-grid select,
html[data-theme="dark"] .form-grid textarea,
html[data-theme="dark"] .standalone-label input,
html[data-theme="dark"] .standalone-label textarea,
html[data-theme="dark"] .custom-selected-row select{background:var(--input-bg);color:var(--text);border-color:#3a495d}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#78879a}
html[data-theme="dark"] .ghost,
html[data-theme="dark"] .icon-btn{background:#263447;color:#e8eef7}
html[data-theme="dark"] .ghost:hover,
html[data-theme="dark"] .icon-btn:hover{background:#314158}
html[data-theme="dark"] .badge.soft{background:#263447;color:#b9c7da}
html[data-theme="dark"] .badge{background:#4a2830;color:#ffc2c7}
html[data-theme="dark"] .status-pill{background:#263d67;color:#c9dcff}
html[data-theme="dark"] .status-pill.completed{background:#183b31;color:#a8e6cb}
html[data-theme="dark"] .danger{background:#4a252a;color:#ffb7bd}
html[data-theme="dark"] .danger-btn{background:#381e24;border-color:#68313d;color:#ffc5ca}
html[data-theme="dark"] .custom-date-day.outside{background:#111a25;color:#5f6d80}
html[data-theme="dark"] .custom-date-day:hover{background:#20314a}
html[data-theme="dark"] .custom-date-day.selected{background:#346fd5;color:#fff;box-shadow:inset 0 0 0 2px #79a4ff}
html[data-theme="dark"] .manual-tag{background:rgba(255,255,255,.12)}
html[data-theme="dark"] .modal-backdrop{background:rgba(3,7,13,.72)}
html[data-theme="dark"] .close{color:#a7b3c5}
html[data-theme="dark"] .activity-row{border-color:var(--line)}
html[data-theme="dark"] .archive-row,
html[data-theme="dark"] .detail-heading{border-color:var(--line)}

@media(max-width:520px){
  .brand-copy h1{font-size:16px;letter-spacing:.025em}
  .theme-toggle{padding:7px 9px;font-size:12px}
  .theme-label{display:none}
}

/* V1.6.0 annual variable service plan */
.annual-plan-field{border:1px solid var(--line,#dfe5ec);border-radius:14px;padding:14px;background:#f8fafc}
.annual-plan-heading{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.annual-plan-heading p{margin:4px 0 0;max-width:680px}
.annual-fill-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.annual-month-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.annual-month{display:flex;flex-direction:column;gap:5px;padding:9px;border:1px solid var(--line,#dfe5ec);border-radius:10px;background:#fff;font-size:12px;font-weight:700}
.annual-month select{width:100%;font-weight:600}
html[data-theme="dark"] .annual-plan-field{background:var(--surface-soft);border-color:var(--line)}
html[data-theme="dark"] .annual-month{background:var(--panel);border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .annual-month select{background:var(--input-bg);color:var(--text);border-color:#3a495d}
@media(max-width:760px){.annual-month-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.annual-plan-heading{flex-direction:column}.annual-fill-actions{justify-content:flex-start}}


/* V1.6.1 — polished dark-first login experience. */
.polished-login{
  --login-bg:#1b2841;
  --login-panel:#101b2d;
  --login-panel-2:#0d1727;
  --login-line:#24344c;
  --login-text:#f4f7fb;
  --login-muted:#9eacc0;
  --login-accent:#4f86f7;
  min-height:100vh;
  background:#1b2841;
  color:var(--login-text);
  display:grid;
  place-items:center;
  padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));
  overflow:hidden;
}
.polished-login::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,black,transparent 78%);
}
.login-shell-wide{
  width:min(980px,100%);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(350px,.9fr);
  border:1px solid rgba(130,158,196,.18);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 35px 90px rgba(0,0,0,.42);
  background:rgba(9,17,31,.72);
  backdrop-filter:blur(18px);
}
.login-brand-panel{
  position:relative;
  min-height:520px;
  padding:52px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:#1b2841;
  overflow:hidden;
}
.login-brand-panel::after{
  content:"";
  position:absolute;
  width:360px;height:360px;border-radius:50%;
  right:-160px;top:-145px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 0 0 34px rgba(255,255,255,.018),0 0 0 72px rgba(255,255,255,.012);
}
.login-company-logo{width:min(250px,72%);height:auto;display:block;position:relative;z-index:2;filter:drop-shadow(0 6px 16px rgba(0,0,0,.18))}
.login-brand-copy{position:relative;z-index:2;max-width:480px}
.login-eyebrow,.login-kicker{font-size:11px;letter-spacing:.18em;font-weight:800;color:#8fb4f5}
.login-brand-copy h1{margin:10px 0 14px;font-size:clamp(34px,5vw,52px);line-height:.98;letter-spacing:-.035em;font-weight:720;color:#fff}
.login-brand-copy p{margin:0;color:#b8c4d5;font-size:15px;line-height:1.7;max-width:440px}
.login-water-lines{position:absolute;left:-10%;right:-10%;bottom:-18px;height:125px;opacity:.23;background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 24px,rgba(120,177,255,.38) 25px 26px,transparent 27px 44px);transform:scaleY(.36)}
.login-card-dark{
  border:0;
  border-radius:0;
  padding:52px 44px;
  background:linear-gradient(180deg,rgba(16,27,45,.98),rgba(12,22,38,.99));
  box-shadow:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.login-card-heading{margin-bottom:28px}
.login-card-heading h2{margin:8px 0 7px;font-size:30px;letter-spacing:-.025em;color:#fff}
.login-card-heading p{margin:0;color:var(--login-muted);font-size:14px}
.modern-login-form{gap:18px;margin-top:0}
.modern-login-form label{gap:8px;color:#dbe4f0;font-size:13px;font-weight:750}
.login-input-wrap{position:relative;display:flex;align-items:center}
.modern-login-form .login-input-wrap input{
  width:100%;
  height:50px;
  padding:0 66px 0 42px;
  border:1px solid #31435d;
  border-radius:12px;
  background:#0b1525;
  color:#f7f9fc;
  outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.modern-login-form .login-input-wrap input::placeholder{color:#60718a}
.modern-login-form .login-input-wrap input:focus{border-color:#5c8ff2;background:#0e1a2c;box-shadow:0 0 0 3px rgba(79,134,247,.16)}
.login-input-icon{position:absolute;left:15px;color:#6781a5;font-size:9px;pointer-events:none;z-index:1}
.lock-icon{transform:rotate(45deg);font-size:8px}
.password-toggle{position:absolute;right:9px;border:0;background:transparent;color:#98acd0;font-weight:750;font-size:12px;padding:8px;border-radius:8px}
.password-toggle:hover{background:#18263b;color:#dce8fb}
.login-submit{height:50px;border-radius:12px;margin-top:4px;background:linear-gradient(135deg,#3e73df,#5c8ff2);box-shadow:0 10px 26px rgba(52,111,213,.24);letter-spacing:.01em}
.login-submit:hover{background:linear-gradient(135deg,#4b7fe8,#6b9af5)}
.login-submit:disabled{opacity:.72;cursor:wait}
.polished-login .login-error{color:#ffbdc2;background:#321a21;border-color:#62303b;border-radius:11px}
.login-security-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;color:#708199;font-size:11px;letter-spacing:.02em}
.login-security-note span{color:#4fa67a;font-size:8px;box-shadow:0 0 10px rgba(79,166,122,.45);border-radius:50%}
@media(max-width:760px){
  .polished-login{padding:14px}
  .login-shell-wide{grid-template-columns:1fr;border-radius:22px;max-width:470px}
  .login-brand-panel{min-height:auto;padding:28px 28px 24px;gap:28px}
  .login-company-logo{width:175px}
  .login-brand-copy h1{font-size:32px;margin-bottom:8px}
  .login-brand-copy p{display:none}
  .login-water-lines{height:80px}
  .login-card-dark{padding:30px 28px 32px}
  .login-card-heading{margin-bottom:22px}
  .login-card-heading h2{font-size:26px}
}
@media(max-width:420px){
  .login-brand-panel{padding:24px 22px 20px}
  .login-company-logo{width:150px}
  .login-brand-copy h1{font-size:28px}
  .login-card-dark{padding:27px 22px 28px}
}

/* V1.6.2 — login canvas and logo panel use the exact Legendary Marine navy (#1B2841). */

/* V1.7.0 — Current/Past customer workflow + denser customer database. */
.customer-status-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border:1px solid var(--line);border-radius:11px;background:var(--surface-soft,#f8fafc)}
.customer-status-tab{border:0;border-radius:8px;background:transparent;color:var(--muted);padding:7px 9px;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:7px}
.customer-status-tab span{min-width:22px;padding:1px 6px;border-radius:999px;background:rgba(111,122,140,.12);font-size:10px}
.customer-status-tab.active{background:var(--panel);color:var(--text);box-shadow:0 1px 4px rgba(20,35,60,.09)}
.database-layout{grid-template-columns:minmax(310px,390px) minmax(0,1fr);gap:14px;padding:14px;max-width:1580px}
.database-list{padding:12px}.customer-detail{padding:16px}.database-header{gap:7px;margin-bottom:9px}.database-header .muted{margin:3px 0 5px}.search-input{padding:8px 10px;border-radius:8px;font-size:12px}
.database-customer-list{gap:4px;max-height:calc(100vh - 225px)}
.database-row{gap:10px;border-radius:8px;padding:7px 9px;min-height:48px}
.database-primary{min-width:0;flex:1}.database-primary strong{font-size:12.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.database-primary span{font-size:10.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.database-row-meta{min-width:112px;max-width:145px}.database-row-meta span{font-size:9.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-heading{padding-bottom:11px}.customer-name-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.customer-status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}.customer-status-pill.current{background:#e6f7ef;color:#16704a}.customer-status-pill.past{background:#edf1f6;color:#657086}
.customer-stats{gap:7px;margin:12px 0}.customer-stats>div,.customer-info-grid>div{border-radius:9px;padding:9px}.customer-info-grid{gap:7px;margin-bottom:14px}.customer-stats span,.customer-info-grid span{margin-bottom:3px}.customer-stats strong,.customer-info-grid strong{font-size:12px}.wash-history-header{margin-top:4px}.wash-history-header .muted{margin:3px 0 8px}.wash-row{padding:8px 10px}.archive-row{margin-top:12px;padding-top:12px}
html[data-theme="dark"] .customer-status-tabs{background:var(--surface-soft);border-color:var(--line)}
html[data-theme="dark"] .customer-status-tab.active{background:#263447;color:#fff;box-shadow:none}
html[data-theme="dark"] .customer-status-tab span{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .customer-status-pill.current{background:#173b31;color:#9be7c7}
html[data-theme="dark"] .customer-status-pill.past{background:#263447;color:#b9c7da}
@media(max-width:900px){.database-layout{grid-template-columns:1fr;padding:10px}.database-list{padding:10px}.database-customer-list{max-height:310px}.customer-detail{padding:12px}}
@media(max-width:620px){.database-row{padding:7px 8px}.database-row-meta{min-width:92px;max-width:112px}.database-primary strong{font-size:12px}.database-primary span{font-size:10px!important}.database-row-meta span{font-size:9px!important}.customer-status-tab{padding:7px 6px}}

/* V1.7.3: Customer creation belongs to the Customers workspace, not the global header. */
.database-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.database-title-row .primary{flex:0 0 auto;white-space:nowrap}
@media (max-width:700px){.database-title-row{align-items:stretch;flex-direction:column}.database-title-row .primary{align-self:flex-start}}


/* V1.7.4 calendar work-summary sidebar */
.monthly-progress-card{overflow:hidden}
.monthly-progress-summary{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:10px 0 12px}
.progress-number{text-align:center;min-width:0}
.progress-number strong{display:block;font-size:30px;line-height:1;font-weight:900;letter-spacing:-.04em;color:var(--text)}
.progress-number span{display:block;margin-top:5px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.progress-divider{width:1px;height:42px;background:var(--line)}
.progress-track{height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.progress-track span{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .25s ease}
.progress-subline{display:flex;justify-content:flex-end;margin-top:7px;font-size:11px;font-weight:700;color:var(--muted)}
.completed-services-list{display:flex;flex-direction:column;gap:7px;max-height:350px;overflow:auto}
.completed-service-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;border:1px solid var(--line);border-radius:10px;padding:8px 9px;background:var(--panel);color:var(--text);cursor:pointer}
.completed-service-item:hover{border-color:var(--accent);transform:translateY(-1px)}
.completed-service-main{min-width:0}
.completed-service-main strong{display:block;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.completed-service-main span{display:block;margin-top:2px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.completed-service-date{flex:0 0 auto;font-size:10px;font-weight:800;color:var(--muted)}
.empty-completed{margin-bottom:0}
html[data-theme="dark"] .completed-service-item{background:#162131}
@media (max-width:720px){
  .monthly-progress-summary{gap:8px}
  .progress-number strong{font-size:26px}
  .completed-services-list{max-height:280px}
}
