:root{--primary:#2f5293;--primary-dark:#1c558b;--link:#0069d9;--text:#232222;--text-soft:#333;--muted:#666;--bg:#eeeeee;--card:#fff;--line:#dcdcdc;--danger:#c0392b;--warn-bg:#fff7e6;--warn:#b45309;--radius:3px;--shadow:0 1px 2px rgba(0,0,0,.06);--font:"Hyundai Sans Text","HyundaiSansText","Source Sans 3","Source Sans Pro",Arial,Helvetica,sans-serif;--font-head:"Hyundai Sans Head","HyundaiSansHead-Bold","Hyundai Sans Text","HyundaiSansText","Source Sans 3","Source Sans Pro",Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;font-size:16px}
.hidden{display:none!important}
.muted{color:var(--muted)}.small{font-size:13px}
.topstrip{background:#000;color:#fff;font-size:12px;letter-spacing:.8px;text-transform:uppercase;padding:9px 28px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar{background:#fff;color:var(--text);padding:0 28px;height:72px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--text)}
.wordmark{font-family:var(--font-head);font-weight:700;font-size:22px;letter-spacing:4px}
.brand-sub{font-weight:700;color:var(--primary-dark);text-transform:uppercase;letter-spacing:.42px;font-size:13px}
.topbar nav a{color:var(--primary-dark);text-decoration:none;margin-left:26px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.42px;padding:6px 0;border-bottom:2px solid transparent}
.topbar nav a.active,.topbar nav a:hover{color:var(--text);border-bottom-color:var(--primary-dark)}
.topbar .nav-user{margin-left:26px;font-size:13px;color:var(--muted)}
main{max-width:1240px;margin:0 auto;padding:28px 24px 48px}
.footer{text-align:center;padding:12px 24px 32px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);padding:28px;margin-bottom:20px}
h1{font-family:var(--font-head);font-size:32px;margin:0 0 8px;color:var(--text);text-align:center}
h2{font-family:var(--font-head);font-size:22px;margin:0 0 16px;color:var(--text)}
h3{font-size:18px;margin:0 0 8px;color:var(--text)}
h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:16px 0 8px}
.hero{margin:8px 0 24px;text-align:center}.hero p{max-width:720px;margin:0 auto;font-size:18px;font-weight:300;color:var(--text-soft)}
.grid{display:grid;gap:0 20px}
.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
label{display:block;font-size:14px;font-weight:700;margin-bottom:6px;color:var(--text-soft)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);font-size:15px;font-family:inherit;background:#fff;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--link);outline-offset:0;border-color:var(--link)}
.field{margin-bottom:18px}
.hint{margin:6px 0 0;font-size:12px;color:var(--muted)}
.radio-row{display:flex;gap:18px;padding-top:8px;flex-wrap:wrap}
.radio{display:flex;align-items:center;gap:6px;font-weight:500;font-size:15px;margin:0}
.radio input{width:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--radius);border:1px solid transparent;font-size:16px;font-weight:400;cursor:pointer;background:var(--primary);color:#fff;text-decoration:none;font-family:inherit;line-height:1.2;letter-spacing:.2px}
.btn:hover{background:var(--primary-dark)}
.btn.ghost{background:#fff;color:var(--primary-dark);border-color:var(--primary-dark)}
.btn.ghost:hover{background:#e9f0f8}
.btn.danger{background:var(--danger)}.btn.danger:hover{background:#9e2f22}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:8px 14px;font-size:14px}
.btn-group{display:flex;gap:6px}
.actions{display:flex;gap:12px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.error{color:var(--danger);font-weight:600}
.notice{padding:12px 16px;border-radius:var(--radius);background:#eef6fb;border:1px solid #cfe3f1;margin-bottom:16px}
.notice.warn{background:var(--warn-bg);border-color:#fcd9a0;color:var(--warn)}
.notice.urgent{background:#fdecea;border-color:#f5b7b1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.notice.urgent .btn{margin-left:auto}
.steps{list-style:none;display:flex;gap:8px;padding:0;margin:0 0 18px}
.steps li{flex:1;padding:12px 14px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);color:var(--muted);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.4px;text-align:center}
.steps li.active{background:var(--primary);border-color:var(--primary);color:#fff}
.steps li.done{background:#e3effa;border-color:#e3effa;color:var(--primary-dark)}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
@media(max-width:1000px){.service-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.service-grid{grid-template-columns:1fr}}
.service-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 14px 14px 40px;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;font-weight:400;margin:0;min-height:116px}
.service-card input{position:absolute;left:14px;top:16px;width:auto;margin:0}
.service-card:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 2px var(--primary) inset;background:#f3f7fc}
.service-card.urgent:has(input:checked){border-color:var(--danger);box-shadow:0 0 0 2px var(--danger) inset;background:#fdf3f2}
.service-name{font-weight:700;font-size:14px}
.service-meta{margin-top:auto;color:var(--primary-dark);font-weight:700}
.slot-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.slot-head p{margin:2px 0}
.date-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:12px}
.date-tab{flex:0 0 auto;min-width:96px;display:flex;flex-direction:column;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;font-family:inherit;color:var(--text)}
.date-tab.active{border-color:var(--primary);background:var(--primary);color:#fff}
.date-tab.active .dt-count{color:#d6e2f3}
.dt-day{font-weight:700;font-size:13px}.dt-date{font-size:15px}.dt-count{color:var(--muted)}
.slot-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:14px}
.slot{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;font-family:inherit;color:var(--text);text-align:left}
.slot:hover{border-color:var(--primary)}
.slot.selected{border-color:var(--primary);background:#f3f7fc;box-shadow:0 0 0 2px var(--primary) inset}
.slot-time{font-weight:700;font-size:15px}.slot-station{color:var(--muted)}
.slot-summary{border-top:1px solid var(--line);padding-top:12px}
.slot-summary p{margin:0}
.success-icon{width:56px;height:56px;border-radius:50%;background:#e3f4ea;color:#1f8a4c;display:grid;place-items:center;font-size:28px;font-weight:700;margin-bottom:12px}
.details{display:grid;grid-template-columns:200px 1fr;gap:8px 16px;margin:16px 0}
.details dt{color:var(--muted);font-size:13px;font-weight:600}.details dd{margin:0}
@media(max-width:600px){.details{grid-template-columns:1fr}}
.admin-nav{display:flex;align-items:center;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:12px;flex-wrap:wrap}
.admin-nav .tab{padding:10px 16px;border-radius:var(--radius);border:none;background:transparent;font:inherit;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--primary-dark);cursor:pointer}
.admin-nav .tab.active{background:var(--primary);color:#fff}
.spacer{flex:1}
.toolbar{display:flex;align-items:center;gap:20px;margin-bottom:14px;flex-wrap:wrap}
.toolbar-title h2{margin:0}
.table-wrap{padding:0;overflow-x:auto}
.weektable{width:100%;border-collapse:collapse;table-layout:fixed;min-width:900px}
.weektable th,.weektable td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);vertical-align:top;padding:10px;text-align:left}
.weektable th:last-child,.weektable td:last-child{border-right:none}
.weektable thead th{background:#f7f9fb;border-bottom:2px solid var(--line)}
.weektable .ws-col{width:190px;font-weight:400}
.weektable tfoot th,.weektable tfoot td{border-bottom:none;background:#f7f9fb}
.day-head{cursor:pointer}
.day-head:hover{background:#eef3f8!important}
.day-head.today .dh-day,.day-head.today .dh-date{color:var(--link)}
td.today{background:#f4fbfd}
.dh-day{display:block;font-weight:700}.dh-date{display:block}.dh-count{display:block;color:var(--muted);font-weight:400}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.chip{display:block;width:100%;text-align:left;border:none;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);border-radius:var(--radius);padding:5px 8px;margin-bottom:5px;font:inherit;font-size:13px;cursor:pointer;color:var(--text)}
.chip:hover{background:color-mix(in srgb,var(--c) 24%,#fff)}
.chip.past{opacity:.6}
.chip-svc{display:block;font-size:11px;color:var(--muted)}
.cell-foot{margin-top:4px}
.util-bar{height:8px;background:#e6ebf1;border-radius:4px;overflow:hidden;margin:4px 0}
.util-bar span{display:block;height:100%;background:var(--link);border-radius:4px}
.util-bar.big{height:12px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:-6px}
.daygrid{display:grid;grid-template-columns:64px repeat(4,1fr);grid-template-rows:56px repeat(var(--rows),34px);position:relative}
.dg-corner{grid-row:1;grid-column:1}
.dg-head{grid-row:1;display:flex;flex-direction:column;justify-content:center;padding:0 10px;border-bottom:1px solid var(--line);background:#f7f9fb}
.dg-head b{font-size:14px}
.dg-hour{grid-column:1;font-size:12px;color:var(--muted);padding:4px 8px 0 0;text-align:right;border-top:1px solid var(--line)}
.dg-cell{border-top:1px solid var(--line);border-left:1px solid var(--line)}
.dg-block{position:relative;margin:2px 4px;border:none;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);border-radius:var(--radius);padding:5px 10px 8px;text-align:left;font:inherit;font-size:13px;line-height:1.3;cursor:pointer;color:var(--text);display:flex;flex-direction:column;gap:1px;overflow:hidden;z-index:1}
.dg-block:hover{background:color-mix(in srgb,var(--c) 26%,#fff)}
.dg-block.past{opacity:.65}
table.list{width:100%;border-collapse:collapse;font-size:14px}
table.list th,table.list td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
table.list th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
table.list tr.row{cursor:pointer}table.list tr.row:hover{background:#f7f9fb}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;color:#fff;font-size:11px;font-weight:700;vertical-align:middle;white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.tiles.six{grid-template-columns:repeat(6,1fr)}
@media(max-width:1000px){.tiles.six{grid-template-columns:repeat(3,1fr)}}
.tile{background:#f4f4f4;border-radius:var(--radius);padding:12px}
.tile-v{display:block;font-family:var(--font-head);font-size:26px;font-weight:700;color:var(--text);line-height:1.1}
.tile-l{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:#e6ebf1}
.stack span{display:block;height:100%}
.mix-list{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.bars{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:220px 1fr 110px;align-items:center;gap:12px;font-size:14px}
.bar-track{height:18px;background:#e6ebf1;border-radius:9px;overflow:hidden}
.bar-track span{display:block;height:100%;border-radius:9px}
.bar-val{text-align:right;font-weight:600}
@media(max-width:700px){.bar-row{grid-template-columns:120px 1fr 80px}}
.station-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:900px){.station-grid{grid-template-columns:1fr}}
.station-card{margin-bottom:0}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:50;padding:20px}
.modal-card{background:#fff;border-radius:var(--radius);padding:24px;max-width:680px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);max-height:90vh;overflow:auto}

/* approval workflow, editing and drag & drop */
.tab .count{display:inline-block;min-width:20px;padding:1px 6px;border-radius:999px;background:var(--danger);color:#fff;font-size:11px;margin-left:4px;text-align:center}
.chip.pending,.dg-block.pending{border-left-style:dashed;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 12%,#fff) 0 6px,#fff 6px 12px)}
.chip.in_progress,.dg-block.in_progress{box-shadow:0 0 0 2px #7c3aed inset}
[draggable="true"]{cursor:grab}
.dragging{opacity:.4}
.drop-target{background:#e6f6fb!important;outline:2px dashed var(--link);outline-offset:-2px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#232222;color:#fff;padding:12px 18px;border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.25);z-index:60;font-size:14px;max-width:90vw}
.toast.error{background:var(--danger)}
.pending-list{display:grid;gap:14px}
.pending-card{margin:0}
.pending-main{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.pending-main{grid-template-columns:1fr 1fr}}
.edit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px}
.edit-grid .field{margin-bottom:12px}
.edit-grid select:disabled,.edit-grid input:disabled{background:#f3f5f8;color:var(--muted)}
.modal-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.modal-title h3{margin:0}
.dg-block .badge{align-self:flex-start;margin-top:2px}

/* embedded mode (iframe inside the Duda site) */
.embedded .topstrip,.embedded .topbar,.embedded .footer,.embedded .hero{display:none}
.embedded{background:transparent}
.embedded main{padding:4px 0 8px;max-width:none}

/* customer / brand toggles */
.toggle{display:inline-flex;border:1px solid var(--primary-dark);border-radius:var(--radius);overflow:hidden}
.toggle label{position:relative;margin:0;padding:9px 18px;font-weight:700;font-size:14px;color:var(--primary-dark);cursor:pointer;background:#fff}
.toggle label+label{border-left:1px solid var(--primary-dark)}
.toggle label:has(input:checked){background:var(--primary);color:#fff}
.toggle input{position:absolute;opacity:0;width:0;height:0}
/* half-hour day grid, move and resize */
.dg-hour.half{border-top-style:dashed;border-top-color:#ececec}
.dg-cell.half{border-top-style:dashed;border-top-color:#ececec}
.dg-block.compact{flex-direction:row;align-items:center;flex-wrap:wrap;gap:0 8px;padding:3px 10px 6px}
.dg-block.compact .small,.dg-block.compact .badge{display:none}
.dg-resize{position:absolute;left:0;right:0;bottom:0;height:9px;cursor:ns-resize;border-radius:0 0 var(--radius) var(--radius)}
.dg-resize::after{content:"";position:absolute;left:50%;bottom:3px;width:28px;height:2px;margin-left:-14px;background:rgba(0,0,0,.25);border-radius:1px}
.dg-resize:hover{background:rgba(0,0,0,.08)}
.dg-block.resizing{opacity:.9;outline:2px solid var(--primary);z-index:3}
/* dialog confirmation panels */
.date-change{border:1px solid var(--danger);background:#fdf2f1;color:#7a1f14;padding:12px 14px;border-radius:var(--radius);margin:4px 0 10px}
.date-change p,.notify-panel p{margin:0 0 8px}
.date-change .actions,.notify-panel .actions{margin-top:10px}
.notify-panel{border:1px solid #cfe3f1;background:#eef6fb;padding:12px 14px;border-radius:var(--radius);margin:4px 0 10px}
.notif-list{margin:0;padding-left:18px;font-size:13px}
.badge.outline{background:#fff!important;color:var(--text);border:1px solid var(--line)}
/* service type editor */
.service-admin-list{display:grid;gap:16px}
.service-admin{margin:0}
.service-admin .grid{gap:0 16px}
.service-admin input[type=color]{padding:4px;height:42px;width:80px}
.check-row{display:flex;gap:16px;flex-wrap:wrap;padding-top:8px}
.check-row label{display:flex;align-items:center;gap:6px;font-weight:500;font-size:15px;margin:0}
.check-row input{width:auto}
.workflow-help{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:800px){.workflow-help{grid-template-columns:1fr}}

/* activity log, comments and work history */
.history{list-style:none;margin:0;padding:0;max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius)}
.history li{display:grid;grid-template-columns:118px 1fr;gap:4px 12px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px}
.history li:last-child{border-bottom:none}
.history li.h-comment{background:#fffbea}
.history .h-when{color:var(--muted);white-space:nowrap}
.history .h-type{font-weight:700;margin-right:6px}
.history .h-actor{color:var(--muted)}
.comment-box{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.comment-box textarea{flex:1}
.filters{display:grid;grid-template-columns:repeat(6,1fr);gap:0 14px;align-items:end}
@media(max-width:1000px){.filters{grid-template-columns:repeat(2,1fr)}}
.filters .field{margin-bottom:12px}
table.list td.nowrap{white-space:nowrap}
.count-pill{display:inline-block;min-width:22px;padding:1px 7px;border-radius:999px;background:#eef2f7;color:var(--text);font-size:12px;font-weight:700;text-align:center}
.lookup-notice{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#eaf5ec;border-color:#bfe0c6}
.lookup-notice .btn{margin-left:auto}
.landing{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.landing .card h2{margin-top:0}
.consent{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;display:grid;gap:10px}
.consent .check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer}
.consent .check input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--primary)}
.consent .check a{color:var(--link)}