/* THE BEST CAR SPA · Celadon-inspired Claymorphism UI
   Adapted from the user-supplied Celadon reference. Scoped to app surfaces,
   not the landing-page HTML or its animation/sound script. */
:root{
 --spa-navy:#29374b;--spa-deep:#2a7a62;--spa-gold:#7ccfb0;
 --spa-bg:#e8edf7;--spa-white:#f3f6fd;--spa-text:#232d3c;
 --spa-muted:#67758b;--spa-border:rgba(35,45,60,.10);
 --spa-shadow:0 22px 38px -20px rgba(35,45,60,.36),0 8px 16px -10px rgba(35,45,60,.18),inset 2px 3px 4px rgba(255,255,255,.95),inset -3px -5px 9px rgba(35,45,60,.09);
 --spa-radius:26px;
 --cel-canvas:#e8edf7;--cel-plate:#f3f6fd;--cel-plate2:#eaf0fa;--cel-sunk:#dce4f3;
 --cel-ink:#232d3c;--cel-muted:#67758b;--cel-jade:#7ccfb0;--cel-jadeink:#2a7a62;
 --cel-clay:0 22px 38px -20px rgba(35,45,60,.36),0 8px 16px -10px rgba(35,45,60,.18),inset 2px 3px 4px rgba(255,255,255,.95),inset -3px -5px 9px rgba(35,45,60,.09);
 --cel-small:0 12px 22px -13px rgba(35,45,60,.34),inset 2px 2px 3px rgba(255,255,255,.92),inset -2px -3px 6px rgba(35,45,60,.10);
 --cel-well:inset 4px 5px 11px -3px rgba(35,45,60,.22),inset -2px -3px 6px rgba(255,255,255,.9);
}
html{background:#e8edf7}
body,body.spa-workspace,body.payroll-page{background:#e8edf7!important;color:#232d3c!important;font-family:"Noto Sans Thai","Albert Sans",system-ui,sans-serif}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(48vw 40vw at 12% 5%,rgba(183,212,245,.55),transparent 65%),radial-gradient(40vw 36vw at 88% 23%,rgba(124,207,176,.28),transparent 64%),radial-gradient(52vw 44vw at 65% 94%,rgba(232,115,92,.10),transparent 66%)}
body>header,body.spa-workspace>header,body.payroll-page>header{background:linear-gradient(145deg,#fafdff,#edf3fb 48%,#e3eafa)!important;color:#29374b!important;border:0!important;border-radius:0 0 24px 24px;box-shadow:var(--cel-small);font-weight:750}
body>header small{color:#68798c!important}
body main{position:relative;z-index:1}
body .card,body .spa-kpi,body .kpi,body .stat,body .branch,body .req,body .tile:not(.t-jade):not(.t-sky):not(.t-coral),body .payroll-hero,body .spa-workspace-intro{
 color:var(--cel-ink)!important;
 background:linear-gradient(158deg,#fcfeff 0%,#f3f6fd 48%,#eaf0fa 100%)!important;
 border:1px solid rgba(255,255,255,.76)!important;
 border-radius:26px!important;
 box-shadow:var(--cel-clay)!important;
}
body .card,body.spa-workspace main>.card{padding:clamp(17px,2vw,28px)!important}
body .payroll-hero,body .spa-workspace-intro{padding:clamp(23px,3vw,38px)!important}
body .payroll-hero h1,body .spa-workspace-intro h1,body .payroll-hero p,body .spa-workspace-intro p{color:var(--cel-ink)!important}
body .payroll-hero .spa-eyebrow,body .spa-workspace-intro .eyebrow{color:#2a7a62!important}
body .spa-workspace-intro:after,body .payroll-hero:after{display:none!important}
body .card h2,body .card h3,body .section-title,body .heading{color:#253549!important;font-weight:650}
body .spa-section-head h2:before,body .spa-section-title:before,body .spa-kpi:before,body .card>h2:before{background:#7ccfb0!important}
body .spa-kpi strong,body .kpi b,body .stat b,body .num{color:#293a4d!important}
body .card p.muted,body .muted,body .hint,body .subtitle,body .spa-workspace-intro p{color:#67758b!important}
body .tile:not(.t-jade):not(.t-sky):not(.t-coral){transition:transform .25s cubic-bezier(.19,.86,.22,1),box-shadow .25s}
body a.tile:hover{transform:translateY(-5px);box-shadow:0 26px 38px -21px rgba(35,45,60,.43),inset 2px 3px 5px rgba(255,255,255,.97)!important}
body .tile.primary{background:linear-gradient(155deg,#f4fffa,#e7f7ef)!important}
body button:not(.secondary):not(.alt):not(.ghost),body .btn,body button#summary,body button#save{
 color:#133f33!important;background:linear-gradient(180deg,#b2e7d2 0%,#90d9bd 46%,#6bc5a5 46.01%,#52b492 100%)!important;
 border:0!important;border-radius:99px!important;
 box-shadow:0 12px 20px -11px rgba(42,122,98,.65),inset 0 1px rgba(255,255,255,.85),inset 0 -1px rgba(16,72,56,.2)!important;
 padding:11px 23px!important;min-height:44px;font-weight:700;
 transition:transform .2s,box-shadow .2s,filter .2s
}
body button:not(:disabled):hover{transform:translateY(-2px)}
body button:disabled{opacity:.55}
body input:not([type=checkbox]):not([type=radio]):not([type=file]),body select,body textarea{
 background:#dce4f3!important;color:#29374b!important;border:1px solid rgba(255,255,255,.45)!important;
 border-radius:17px!important;box-shadow:var(--cel-well)!important;
 min-height:45px;padding:11px 14px
}
body input:focus-visible,body select:focus-visible,body button:focus-visible,body a:focus-visible,body textarea:focus-visible{outline:3px solid #2a7a62!important;outline-offset:3px}
body label{color:#465b71!important}
body .spa-table-wrap,body .scroll{border-radius:20px!important;background:rgba(243,246,253,.55)}
body table{border-collapse:separate;border-spacing:0}
body table th{background:#dce4f3!important;color:#364760!important;border-bottom:1px solid rgba(35,45,60,.12)!important}
body table tbody tr:nth-child(even){background:#eff4fc}
body table tbody tr:hover{background:#e4f1eb!important}
body table td{color:#2b3d50}
body .spa-backlink,body a:not(.tile).spa-backlink{border-radius:99px!important;background:linear-gradient(180deg,#fefeff,#e5ecf8)!important;color:#314358!important;box-shadow:var(--cel-small)!important;border:0!important}
body .center{background:linear-gradient(158deg,#fcfeff,#f3f6fd 48%,#eaf0fa)!important;box-shadow:var(--cel-clay)!important}
body .stat,.spa-kpi{min-width:0}
@media(max-width:760px){body .card,body .center{border-radius:21px!important}body .tile{border-radius:21px!important}body .spa-kpi-grid,body .stats{gap:12px}body button{min-height:46px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Shared navigation system: replace bare underlined breadcrumbs on every module */
body .spa-module-nav{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:17px 0 24px;padding:11px 12px;border-radius:24px;background:linear-gradient(158deg,#fafdff,#edf3fc);border:1px solid #ffffffdb;box-shadow:var(--cel-small)}
body .spa-module-nav>a,body a.spa-backlink,body a.spa-nav-link{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:43px;max-width:100%;padding:10px 17px;border:1px solid #ffffffd9!important;border-radius:99px!important;background:linear-gradient(180deg,#fefeff,#eef3fb 46%,#e3eafa 46.1%,#dce7f4)!important;box-shadow:0 7px 14px -10px #23324a87,inset 0 1px #fff!important;text-decoration:none!important;color:#324b61!important;font-size:13px;font-weight:750;line-height:1.25;transition:transform .18s,box-shadow .18s}
body .spa-module-nav>a:hover,body a.spa-backlink:hover,body a.spa-nav-link:hover{background:linear-gradient(180deg,#f5fff9,#cfeede)!important;transform:translateY(-2px);box-shadow:0 12px 19px -12px #2a7a627f!important}
body .spa-module-nav>a:focus-visible,body a.spa-backlink:focus-visible{outline:3px solid #2a7a62;outline-offset:3px}
body .spa-module-nav>a:first-child{background:linear-gradient(180deg,#c7efdf,#81d0b2)!important;color:#154f3c!important}
body .spa-module-nav>a .spa-nav-icon{font-size:16px;line-height:1}
body .spa-workspace-intro + .spa-module-nav{margin-top:16px}
@media(max-width:640px){body .spa-module-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px;border-radius:19px}body .spa-module-nav>a{min-width:0;padding:10px 9px;font-size:12px;justify-content:center;text-align:center}}
@media(max-width:360px){body .spa-module-nav{grid-template-columns:1fr}}
@media print{body .spa-module-nav,body a.spa-backlink{display:none!important}}

/* Celadon refined: soft elevation, less decoration */
:root{--cel-clay:0 3px 12px rgba(35,45,60,.075),inset 0 1px rgba(255,255,255,.7);--cel-small:0 2px 7px rgba(35,45,60,.055);--cel-well:inset 0 1px 3px rgba(35,45,60,.09);--spa-shadow:0 3px 12px rgba(35,45,60,.075)}
body .card,body .spa-kpi,body .kpi,body .stat,body .branch,body .req,body .tile:not(.t-jade):not(.t-sky):not(.t-coral),body .payroll-hero,body .spa-workspace-intro{box-shadow:0 3px 12px rgba(35,45,60,.075)!important;border:1px solid #dde5ee!important;background:linear-gradient(160deg,#fdfefe,#f2f6fc)!important}
body>header,body.spa-workspace>header,body.payroll-page>header{box-shadow:0 2px 8px rgba(35,45,60,.06)!important}
body .spa-module-nav{box-shadow:0 2px 8px rgba(35,45,60,.055)!important}
body .spa-module-nav>a,body a.spa-backlink,body a.spa-nav-link{box-shadow:0 1px 4px rgba(35,45,60,.055)!important;background:#f4f7fb!important}
body .spa-module-nav>a:hover,body a.spa-backlink:hover,body a.spa-nav-link:hover{box-shadow:0 3px 8px rgba(35,45,60,.09)!important;transform:none}
body button:not(.secondary):not(.alt):not(.ghost),body .btn,body button#summary,body button#save{box-shadow:0 2px 6px rgba(42,122,98,.14)!important;background:#85cfb2!important}
body button:not(:disabled):hover{transform:none;filter:brightness(1.025)}
body input:not([type=checkbox]):not([type=radio]):not([type=file]),body select,body textarea{box-shadow:inset 0 1px 2px rgba(35,45,60,.075)!important;background:#edf2f8!important}
body a.tile:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(35,45,60,.09)!important}
body .center{box-shadow:0 3px 12px rgba(35,45,60,.075)!important}

/* Compact Celadon v4: smaller cards, comfortable button spacing */
body .card,body.spa-workspace main>.card,body.spa-workspace main>section.card,body.payroll-page .card{
 border-radius:18px!important;padding:18px 20px!important;margin-bottom:14px!important;
}
body .spa-kpi,body .kpi,body .stat,body .branch,body .req{
 border-radius:17px!important;padding:15px 17px!important;min-height:0!important;
}
body .spa-workspace-intro,body .payroll-hero{
 border-radius:20px!important;padding:22px 25px!important;margin-bottom:17px!important;
}
body .spa-kpi-grid{gap:10px!important;margin:14px 0 17px!important}
body .spa-workspace-intro h1,body .payroll-hero h1{font-size:clamp(20px,2.2vw,26px)!important}
body .card h2,body .spa-section-head h2{font-size:16px!important;margin-bottom:13px}
body .spa-section-head{padding-bottom:10px!important;margin-bottom:13px!important}
body .card label{margin-top:9px;margin-bottom:5px}
body .card input,body .card select{min-height:42px}
body .spa-module-nav{margin:12px 0 18px!important;padding:9px!important;border-radius:18px!important}
body .spa-module-nav>a{min-height:40px;padding:9px 14px}
body .card button,body .card .btn{max-width:100%}
body .card form>div:last-child:has(>button),
body .card form>div:last-child:has(>.btn){padding:8px 8px 10px}
body .card .actions,body .card .form-actions,body .card .button-row,body .card .reload-wrap,
body .card .spa-premium-actions{padding:10px 12px 14px;gap:10px}
body .card>button:last-child,body .card>.btn:last-child{margin-bottom:10px}
@media(max-width:640px){
 body .card,body.spa-workspace main>.card,body.spa-workspace main>section.card,body.payroll-page .card{padding:15px 16px!important;border-radius:16px!important}
 body .spa-workspace-intro,body .payroll-hero{padding:19px 20px!important}
 body .spa-kpi,body .kpi,body .stat{padding:12px 13px!important}
 body .card .actions,body .card .form-actions,body .card .button-row,body .card .reload-wrap{padding:9px 8px 13px}
}

/* Compact layout v5 — actual dimensions, not shadows alone */
body.spa-workspace main{max-width:1060px!important;padding:16px 18px 48px!important}
body.spa-workspace main>.card,body.spa-workspace main>section.card,body.spa-workspace main>div.card{padding:16px 18px!important;margin-bottom:12px!important}
body.spa-workspace .spa-workspace-intro{padding:17px 21px!important;margin:8px 0 15px!important}
body.spa-workspace .spa-workspace-intro h1{font-size:23px!important}
body.spa-workspace .spa-kpi-grid{gap:10px!important}
body.spa-workspace .spa-kpi{padding:12px!important;min-height:0!important}
body.spa-workspace .grid{gap:10px!important}
body.spa-workspace .branch,body.spa-workspace .req{padding:12px 14px!important}
body.spa-workspace .spa-module-nav{margin:11px 0 15px!important}
body.spa-workspace .spa-module-nav>a{padding:9px 13px!important}
body.spa-workspace .actions,body.spa-workspace .form-actions{margin:9px 0 12px!important;padding:8px 10px 12px!important}
@media(max-width:680px){body.spa-workspace main{padding:12px 12px 32px!important}body.spa-workspace main>.card,body.spa-workspace main>section.card,body.spa-workspace main>div.card{padding:14px!important}}

/* Celadon palette v6 — balanced blue + yellow accents */
:root{
 --cel-blue:#4169bb;--cel-blue-soft:#e4edff;--cel-blue-dark:#284989;
 --cel-yellow:#edc65a;--cel-yellow-soft:#fff4cf;--cel-yellow-dark:#765713;
}
body .spa-workspace-intro .eyebrow,body .payroll-hero .spa-eyebrow{color:var(--cel-blue-dark)!important}
body .spa-section-head h2:before,body .spa-kpi:before{background:var(--cel-blue)!important}
body .spa-kpi:nth-child(2):before,body .spa-kpi:nth-child(4):before{background:var(--cel-yellow)!important}
body .spa-module-nav>a:nth-child(2){background:var(--cel-blue-soft)!important;color:var(--cel-blue-dark)!important;border-color:#d5e1f9!important}
body .spa-module-nav>a:nth-child(3){background:var(--cel-yellow-soft)!important;color:var(--cel-yellow-dark)!important;border-color:#f1e2b2!important}
body .spa-module-nav>a:nth-child(2):hover{background:#d5e3ff!important}
body .spa-module-nav>a:nth-child(3):hover{background:#fae8a6!important}
body .tag,body .chip{border-radius:11px}
body .tag:nth-child(3n+2),body .chip:nth-child(3n+2){background:var(--cel-blue-soft)!important;color:var(--cel-blue-dark)!important}
body .tag:nth-child(3n),body .chip:nth-child(3n){background:var(--cel-yellow-soft)!important;color:var(--cel-yellow-dark)!important}
body button.secondary,body button.alt{background:var(--cel-blue-soft)!important;color:var(--cel-blue-dark)!important;border:1px solid #cfdcf7!important;box-shadow:none!important}
body button.secondary:hover,body button.alt:hover{background:#d7e5ff!important}
body .spa-nav-link:focus-visible,body button:focus-visible{outline-color:var(--cel-blue)!important}

/* v7: visible but tasteful palette on real Business Center tiles and homepage */
body .cards .tile:nth-child(3n+1){background:#e9f0ff!important;border:1px solid #cbdaf8!important;border-top:4px solid #4169bb!important}
body .cards .tile:nth-child(3n+2){background:#fff5d9!important;border:1px solid #efdda0!important;border-top:4px solid #edc65a!important}
body .cards .tile:nth-child(3n){background:#e8f6ed!important;border:1px solid #c7e7d7!important;border-top:4px solid #7ccfb0!important}
body .cards .tile .emoji{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#ffffffab}
body .cards .tile:nth-child(3n+1) .emoji{background:#d5e2ff}
body .cards .tile:nth-child(3n+2) .emoji{background:#f8e7af}
body .cards .tile:nth-child(3n) .emoji{background:#c9ebdc}
body .cards .tile strong{color:#263a51!important}
body .cards .tile small{color:#61758b!important}
body .home-quicknav>a:nth-child(1){background:#e7eeff!important;border-color:#cfddfb!important;color:#284989!important}
body .home-quicknav>a:nth-child(2){background:#fff3d3!important;border-color:#eddea9!important;color:#765713!important}
body .home-quicknav>a:nth-child(3){background:#dcf3e5!important;border-color:#bde6d0!important;color:#245e48!important}
body .home-quicknav>a:nth-child(4){background:#e7eeff!important;border-color:#cfddfb!important;color:#284989!important}
body .home-quicknav>a:nth-child(1) .quick-icon,body .home-quicknav>a:nth-child(4) .quick-icon{background:#d2e0ff!important}
body .home-quicknav>a:nth-child(2) .quick-icon{background:#f7e6aa!important}
body .intake-nav .intake-nav-link:nth-child(2){background:#e7eeff!important;border-color:#cbdaf8!important}
body .intake-nav .intake-nav-link:nth-child(3){background:#fff3d3!important;border-color:#eddea9!important}
body .spa-kpi:nth-child(2),body .stat:nth-child(2){background:#eaf0ff!important}
body .spa-kpi:nth-child(3),body .stat:nth-child(3){background:#fff6df!important}


/* CarCareSystem Royal Navy & Gold unified UI, October 2026 */
:root{--spa-navy:#1b2d4c;--spa-deep:#283f63;--spa-gold:#c5a56b;--spa-bg:#e5ebf3;--spa-white:#fbf8f1;--spa-text:#23334e;--spa-muted:#68768c;--spa-border:#ded8ce;--cel-canvas:#e5ebf3;--cel-plate:#fbf8f1;--cel-plate2:#f4f0e8;--cel-sunk:#e5e6ec;--cel-ink:#23334e;--cel-muted:#68768c;--cel-jade:#c5a56b;--cel-jadeink:#1b2d4c}
html{background:#e5ebf3}
body.spa-workspace,body.payroll-page{background:linear-gradient(145deg,#dce5f1,#ebedf3 55%,#e1e8f1)!important;color:#23334e!important}
body.spa-workspace::before,body.payroll-page::before{background:radial-gradient(50vw 40vw at 5% 0%,rgba(98,126,165,.13),transparent 70%),radial-gradient(42vw 38vw at 94% 95%,rgba(197,165,107,.12),transparent 70%)!important}
body.spa-workspace>header,body.payroll-page>header{background:linear-gradient(115deg,#1a2c4a,#2b4165)!important;color:#fff!important;border-bottom:2px solid #c5a56b!important;box-shadow:0 8px 24px rgba(17,32,56,.15)!important}
body.spa-workspace>header *,body.payroll-page>header *{color:#f9f4e8!important}
body.spa-workspace .card,body.payroll-page .card{background:#fbf8f1!important;border:1px solid #dfd8ca!important;box-shadow:0 8px 22px rgba(26,44,72,.07)!important}
body.spa-workspace h1,body.spa-workspace h2,body.spa-workspace h3,body.payroll-page h1,body.payroll-page h2{color:#1b2d4c}
body.spa-workspace .section-title,body.spa-workspace .spa-section-title{border-left-color:#c5a56b!important;color:#223755!important}
body.spa-workspace button:not(.cal-day):not([class*="danger"]),body.payroll-page button:not([class*="danger"]){background:#243b61!important;color:#fff!important;border-color:#243b61!important}
body.spa-workspace button.secondary,body.spa-workspace button[class*="outline"],body.payroll-page button.secondary{background:#e9d6aa!important;color:#253954!important;border-color:#cfb77d!important}
body.spa-workspace input:not([type="checkbox"]):not([type="radio"]),body.spa-workspace select,body.spa-workspace textarea{background:#fffdf8!important;border-color:#ddd7ca!important;color:#23334e!important}
body.spa-workspace input:focus,body.spa-workspace select:focus,body.spa-workspace textarea:focus{outline-color:#c5a56b!important}
body.spa-workspace a:not(.tile){color:#294e78}
@media print{html,body.spa-workspace,body.payroll-page{background:#fff!important}body.spa-workspace .card,body.payroll-page .card{box-shadow:none!important}body.spa-workspace>header,body.payroll-page>header{background:#fff!important;color:#000!important}}


/* Royal Navy & Gold: normalize legacy mint/green action buttons */
body.spa-workspace button:not(.cal-day):not(.staff-delete):not(.danger):not(.decline):not(.staff-reset),
body.payroll-page button:not(.danger):not(.decline),
body.spa-workspace input[type=submit]{
 background:#233b60!important;color:#fff!important;border-color:#233b60!important;
}
body.spa-workspace button.secondary,
body.spa-workspace button#preview,
body.spa-workspace button.staff-reset,
body.spa-workspace button#reload,
body.payroll-page button.secondary{
 background:#c5a56b!important;color:#1b2d4c!important;border-color:#b99a61!important;
}
body.spa-workspace button.staff-delete,
body.spa-workspace button.danger,
body.spa-workspace button.decline{background:#913f4b!important;color:#fff!important;border-color:#913f4b!important}
body.spa-workspace .staff-actions a,
body.spa-workspace .staff-top-actions a{background:#f0e5cd!important;border-color:#d4bd8d!important;color:#203958!important}
body.spa-workspace .share-actions a,
body.spa-workspace .setting-nav a{background:#e6ebf3!important;color:#243e63!important}


/* Final premium palette: replace remaining legacy green controls */
:root{--spa-deep:#243b60;--spa-gold:#c5a56b;--cel-jade:#c5a56b;--cel-jadeink:#1b2d4c}
body.spa-workspace .spa-nav-link,body.spa-workspace .intake-nav-link,
body.spa-workspace .doc-nav a,body.spa-workspace .staff-actions a,
body.spa-workspace .spa-module-nav a,body.spa-workspace .setting-nav a{
 background:#e6d3a7!important;color:#1b2d4c!important;border-color:#cfb67e!important;
}
body.spa-workspace a.tile.quick-primary,body.spa-workspace .tile.primary,
body.spa-workspace .share-link-row button,body.spa-workspace .share-row button,
body.spa-workspace .submit,body.spa-workspace .btn-primary,
body.spa-workspace button#save,body.spa-workspace button#create,
body.spa-workspace button#login,body.spa-workspace button#send,
body.spa-workspace button#sendRequest{
 background:#243b60!important;color:#fff!important;border-color:#243b60!important;
}
body.spa-workspace .spa-section-title,body.spa-workspace .section-title,
body.spa-workspace .staff-section-title{border-left-color:#c5a56b!important}
body.spa-workspace input[type=checkbox],body.spa-workspace input[type=radio],
body.payroll-page input[type=checkbox]{accent-color:#c5a56b!important}
body.spa-workspace .staff-status,body.spa-workspace .badge-success{
 background:#e9ddc3!important;color:#58431d!important}
body.spa-workspace .cal-day{background:#fffdf8!important;color:#263952!important}
body.spa-workspace .cal-day.today{outline-color:#c5a56b!important}
body.spa-workspace .cal-dot.ok{background:#e8d9b8!important;color:#5f4926!important}