/* KLaundry overlay: student booking and store tools. Scoped to #klaundryPage. */
#klaundryPage {
    --kl-purple: #6d28d9; --kl-purple-soft: #f3edff; --kl-ink: #16131f; --kl-muted: #6b6582;
    --kl-border: #e4e2ec; --kl-canvas: #f6f5fa; --kl-green: #059669; --kl-green-soft: #ecfdf5; --kl-rose: #e11d48;
    display: none; position: fixed; inset: 0; z-index: 3900; background: var(--kl-canvas); color: var(--kl-ink);
    overflow-y: auto; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
#klaundryPage.open { display: block; }
body.klaundry-open { overflow: hidden; }
#klaundryPage * { box-sizing: border-box; }
#klaundryPage button { font: inherit; cursor: pointer; }
#klaundryPage .kl-top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, #4c1d95, #7c3aed); color: #fff; }
#klaundryPage .kl-top h2 { margin: 0; font-size: 20px; }
#klaundryPage .kl-top p { margin: 2px 0 0; opacity: .85; font-size: 13px; }
#klaundryPage .kl-back { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; }
#klaundryPage .kl-tabs { display: flex; gap: 6px; padding: 12px 20px 0; max-width: 980px; margin: 0 auto; }
#klaundryPage .kl-tabs button { border: 0; background: #fff; border: 1px solid var(--kl-border); padding: 8px 16px; border-radius: 999px; color: var(--kl-muted); font-weight: 600; }
#klaundryPage .kl-tabs button.active { background: var(--kl-purple); border-color: var(--kl-purple); color: #fff; }
#klaundryPage .kl-tabs b { background: #fff; color: var(--kl-purple); border-radius: 999px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
#klaundryPage .kl-body { max-width: 980px; margin: 0 auto; padding: 16px 20px 60px; }
#klaundryPage h3 { font-size: 15px; margin: 18px 0 8px; }
#klaundryPage .kl-muted { color: var(--kl-muted); font-size: 13px; }
#klaundryPage .kl-error { background: #fff1f2; color: var(--kl-rose); padding: 10px 12px; border-radius: 10px; }
#klaundryPage .kl-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#klaundryPage .kl-service { text-align: left; background: #fff; border: 2px solid var(--kl-border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
#klaundryPage .kl-service i { font-size: 22px; color: var(--kl-purple); }
#klaundryPage .kl-service strong { font-size: 16px; }
#klaundryPage .kl-service span { color: var(--kl-muted); font-size: 13px; }
#klaundryPage .kl-service em { font-style: normal; font-size: 12px; color: var(--kl-purple); font-weight: 600; }
#klaundryPage .kl-service.active { border-color: var(--kl-purple); background: var(--kl-purple-soft); }
#klaundryPage .kl-form { display: flex; flex-direction: column; gap: 10px; }
#klaundryPage .kl-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; flex: 1; }
#klaundryPage .kl-form input:not([type="radio"]):not([type="checkbox"]), #klaundryPage .kl-form textarea {
    padding: 10px 12px; border: 1px solid var(--kl-border); border-radius: 10px; font: inherit; font-weight: 400; background: #fff; width: 100%;
}
#klaundryPage .kl-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
#klaundryPage .kl-stores { display: flex; flex-direction: column; gap: 8px; }
#klaundryPage .kl-store { flex-direction: row !important; align-items: center; gap: 12px !important; background: #fff; border: 1px solid var(--kl-border); border-radius: 12px; padding: 12px; }
#klaundryPage .kl-store div { flex: 1; display: flex; flex-direction: column; }
#klaundryPage .kl-store span { color: var(--kl-muted); font-weight: 400; }
#klaundryPage .kl-store b { font-size: 15px; }
#klaundryPage .kl-store small { color: var(--kl-muted); font-weight: 400; }
#klaundryPage .kl-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#klaundryPage .kl-modes label { flex-direction: row; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--kl-border); border-radius: 12px; padding: 12px; }
#klaundryPage .kl-note { background: var(--kl-purple-soft); color: #4c1d95; padding: 10px 12px; border-radius: 10px; font-size: 13px; margin: 0; }
#klaundryPage .kl-summary { background: #fff; border: 1px solid var(--kl-border); border-radius: 12px; padding: 12px 14px; }
#klaundryPage .kl-summary div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
#klaundryPage .kl-summary .kl-total { border-top: 1px dashed var(--kl-border); margin-top: 6px; padding-top: 8px; font-size: 16px; }
#klaundryPage .kl-primary { background: var(--kl-purple); color: #fff; border: 0; border-radius: 10px; padding: 11px 16px; font-weight: 700; }
#klaundryPage .kl-primary:disabled { opacity: .5; }
#klaundryPage .kl-ghost { background: #fff; color: var(--kl-purple); border: 1px solid var(--kl-border); border-radius: 10px; padding: 9px 14px; font-weight: 600; }
#klaundryPage .kl-order { background: #fff; border: 1px solid var(--kl-border); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
#klaundryPage .kl-order-head { display: flex; justify-content: space-between; gap: 10px; }
#klaundryPage .kl-order-head div { display: flex; flex-direction: column; }
#klaundryPage .kl-order-head span { color: var(--kl-muted); font-size: 12px; }
#klaundryPage .kl-notes { margin: 8px 0 0; font-size: 13px; color: var(--kl-muted); }
#klaundryPage .kl-steps { list-style: none; display: flex; padding: 0; margin: 14px 0 6px; }
#klaundryPage .kl-steps li { flex: 1; text-align: center; font-size: 11px; color: var(--kl-muted); position: relative; }
#klaundryPage .kl-steps li span { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--kl-border); margin: 0 auto 4px; position: relative; z-index: 1; }
#klaundryPage .kl-steps li::before { content: ""; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px; background: var(--kl-border); }
#klaundryPage .kl-steps li:first-child::before { display: none; }
#klaundryPage .kl-steps li.done span, #klaundryPage .kl-steps li.done::before, #klaundryPage .kl-steps li.now::before { background: var(--kl-green); }
#klaundryPage .kl-steps li.now span { background: var(--kl-purple); box-shadow: 0 0 0 4px var(--kl-purple-soft); }
#klaundryPage .kl-steps li.now { color: var(--kl-ink); font-weight: 700; }
#klaundryPage .kl-ended { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #f3f2f7; font-size: 13px; color: var(--kl-muted); }
#klaundryPage .kl-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
#klaundryPage .kl-codes div { background: var(--kl-purple-soft); border-radius: 10px; padding: 8px 10px; }
#klaundryPage .kl-codes span { display: block; font-size: 11px; color: var(--kl-muted); }
#klaundryPage .kl-codes b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 18px; letter-spacing: .12em; color: #4c1d95; }
#klaundryPage .kl-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
#klaundryPage .kl-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#klaundryPage .kl-kpis div { background: #fff; border: 1px solid var(--kl-border); border-top: 3px solid var(--kl-purple); border-radius: 12px; padding: 12px; }
#klaundryPage .kl-kpis span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--kl-muted); }
#klaundryPage .kl-kpis b { display: block; font-size: 20px; margin-top: 4px; }
#klaundryPage .kl-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
#klaundryPage .kl-card { background: #fff; border: 1px solid var(--kl-border); border-radius: 14px; padding: 14px; margin-top: 18px; }
#klaundryPage .kl-card h3 { margin-top: 0; }
#klaundryPage .kl-switch { flex-direction: row !important; align-items: center; gap: 8px; min-width: 140px; }
@media (max-width: 760px) {
    #klaundryPage .kl-grid, #klaundryPage .kl-modes { grid-template-columns: 1fr; }
    #klaundryPage .kl-services { grid-template-columns: 1fr 1fr; }
    #klaundryPage .kl-service span { display: none; }
}
#klaundryPage [hidden] { display: none !important; }


/* Store analytics layout adapted from the supplied dashboard UI. */
#klaundryPage.kl-store-dashboard { --kl-ink:#1e293b; --kl-muted:#64748b; --kl-border:#e2e8f0; --kl-canvas:#f8fafc; }
#klaundryPage.kl-store-dashboard .kl-top { position:sticky; top:0; z-index:3; background:linear-gradient(135deg,#7c3aed,#5b21b6); padding:16px 24px; box-shadow:0 8px 24px #5b21b622; }
#klaundryPage.kl-store-dashboard .kl-top p { font-size:12px; }
#klaundryPage.kl-store-dashboard .kl-tabs { max-width:none; background:white; padding:0 24px; gap:24px; border-bottom:1px solid var(--kl-border); overflow-x:auto; }
#klaundryPage.kl-store-dashboard .kl-tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; padding:16px 0; background:transparent; white-space:nowrap; font-size:13px; }
#klaundryPage.kl-store-dashboard .kl-tabs button.active { color:#7c3aed; border-bottom-color:#7c3aed; }
#klaundryPage.kl-store-dashboard .kl-tabs b { background:#ede9fe; }
#klaundryPage.kl-store-dashboard .kl-body { max-width:1280px; padding:20px 24px 60px; }
#klaundryPage .kl-dashboard-toolbar, #klaundryPage .kl-section-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
#klaundryPage .kl-dashboard-toolbar { margin-bottom:18px; }
#klaundryPage .kl-dashboard-toolbar p { margin:0; font-size:12px; }
#klaundryPage.kl-store-dashboard .kl-kpis { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
#klaundryPage.kl-store-dashboard .kl-kpis > div { padding:20px; border:1px solid var(--kl-border); border-radius:16px; box-shadow:0 1px 3px #0f172a08; }
#klaundryPage.kl-store-dashboard .kl-kpis span { display:flex; align-items:center; justify-content:space-between; font-weight:700; }
#klaundryPage.kl-store-dashboard .kl-kpis i { padding:10px; border-radius:8px; background:#f5f3ff; color:#7c3aed; font-size:15px; }
#klaundryPage.kl-store-dashboard .kl-kpis b { font-size:30px; margin:8px 0 4px; }
#klaundryPage.kl-store-dashboard .kl-kpis > div:first-child b { color:#7c3aed; }
#klaundryPage.kl-store-dashboard .kl-kpis small { color:var(--kl-muted); font-size:11px; }
#klaundryPage .kl-analytics-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; }
#klaundryPage.kl-store-dashboard .kl-card { border-radius:16px; padding:24px; margin-top:24px; min-width:0; box-shadow:0 1px 3px #0f172a08; }
#klaundryPage.kl-store-dashboard .kl-card h3 { font-size:16px; margin:0 0 4px; }
#klaundryPage.kl-store-dashboard .kl-card p.kl-muted { font-size:12px; margin:4px 0 16px; }
#klaundryPage .kl-periods { display:flex; gap:8px; }
#klaundryPage .kl-periods button { font-size:11px; padding:8px 10px; background:#f1f5f9; border:0; }
#klaundryPage .kl-periods button.active { background:#ede9fe; color:#6d28d9; }
#klaundryPage .kl-chart-legend { display:flex; justify-content:center; gap:20px; font-size:11px; }
#klaundryPage .kl-chart-legend span:first-child { color:#7c3aed; }
#klaundryPage .kl-chart-legend span:last-child { color:#3b82f6; }
#klaundryPage .kl-trend { width:100%; display:block; min-height:220px; }
#klaundryPage .kl-trend text { font:10px system-ui,sans-serif; fill:#64748b; }
#klaundryPage .kl-chart-data { font-size:12px; color:var(--kl-muted); }
#klaundryPage .kl-chart-data summary { cursor:pointer; }
#klaundryPage .kl-donut { width:200px; height:200px; margin:24px auto; border-radius:50%; display:grid; place-items:center; }
#klaundryPage .kl-donut > div { width:144px; height:144px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#klaundryPage .kl-donut b { font-size:28px; }
#klaundryPage .kl-donut span { font-size:12px; color:var(--kl-muted); }
#klaundryPage .kl-distribution { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; padding-top:16px; border-top:1px solid var(--kl-border); }
#klaundryPage .kl-distribution > div { padding:10px 4px; text-align:center; border-radius:10px; background:#f8fafc; }
#klaundryPage .kl-distribution span { font-size:9px; font-weight:700; display:block; }
#klaundryPage .kl-distribution b { display:block; margin-top:6px; }
#klaundryPage .kl-table-scroll { overflow-x:auto; margin-top:16px; }
#klaundryPage.kl-store-dashboard table { width:100%; border-collapse:collapse; text-align:left; font-size:12px; }
#klaundryPage.kl-store-dashboard th { font-size:10px; text-transform:uppercase; color:#94a3b8; letter-spacing:.05em; padding:12px; white-space:nowrap; }
#klaundryPage.kl-store-dashboard td { padding:14px 12px; border-top:1px solid #f1f5f9; }
#klaundryPage.kl-store-dashboard td .kl-ghost { font-size:11px; padding:6px 10px; }
#klaundryPage .kl-status { display:inline-block; padding:5px 8px; border-radius:8px; white-space:nowrap; }
#klaundryPage .kl-status-new { background:#fffbeb; color:#b45309; }
#klaundryPage .kl-status-progress { background:#eff6ff; color:#1d4ed8; }
#klaundryPage .kl-status-completed { background:#ecfdf5; color:#047857; }
#klaundryPage .kl-status-cancelled { background:#fff1f2; color:#be123c; }
#klaundryPage .kl-pipeline .kl-section-head { margin-bottom:20px; }
#klaundryPage .kl-section-head label { font-size:12px; color:var(--kl-muted); }
#klaundryPage select { padding:10px 12px; background:#f8fafc; border:1px solid var(--kl-border); border-radius:10px; color:var(--kl-ink); font:inherit; }
#klaundryPage .kl-settings-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:24px; align-items:start; }
#klaundryPage .kl-settings-grid .kl-row { background:#f8fafc; padding:16px; border-radius:12px; align-items:center; }
#klaundryPage button:focus-visible, #klaundryPage select:focus-visible, #klaundryPage input:focus-visible, #klaundryPage summary:focus-visible { outline:3px solid #a78bfa; outline-offset:3px; }
@media(max-width:1000px) { #klaundryPage.kl-store-dashboard .kl-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } #klaundryPage .kl-analytics-grid, #klaundryPage .kl-settings-grid { grid-template-columns:1fr; } }
@media(max-width:480px) { #klaundryPage.kl-store-dashboard .kl-top { padding:14px 16px; } #klaundryPage.kl-store-dashboard .kl-top h2 { font-size:17px; } #klaundryPage.kl-store-dashboard .kl-body { padding:16px 12px 40px; } #klaundryPage.kl-store-dashboard .kl-tabs { padding:0 16px; gap:20px; } #klaundryPage.kl-store-dashboard .kl-card { padding:16px; } #klaundryPage.kl-store-dashboard .kl-kpis { gap:10px; } #klaundryPage.kl-store-dashboard .kl-kpis > div { padding:14px; } #klaundryPage.kl-store-dashboard .kl-kpis b { font-size:24px; } #klaundryPage.kl-store-dashboard .kl-kpis span { font-size:10px; } #klaundryPage.kl-store-dashboard .kl-top p { max-width:270px; line-height:1.5; } }


/* Clothing-specific washing price lists and booking quantities. */
#klaundryPage .kl-rate-editor { border:1px solid var(--kl-border); border-radius:12px; padding:16px; }
#klaundryPage .kl-type-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
#klaundryPage .kl-type-suggestions button { font-size:12px; padding:7px 10px; }
#klaundryPage .kl-clothing-rate { display:flex; gap:10px; align-items:flex-end; padding:12px 0; border-top:1px solid var(--kl-border); }
#klaundryPage .kl-clothing-rate label { min-width:0; }
#klaundryPage .kl-clothing-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
#klaundryPage .kl-clothing-choice { flex-direction:row !important; align-items:center; justify-content:space-between; gap:12px !important; border:1px solid var(--kl-border); border-radius:12px; padding:12px; background:white; }
#klaundryPage .kl-clothing-choice span { display:flex; flex-direction:column; gap:5px; }
#klaundryPage .kl-clothing-choice small { color:var(--kl-muted); font-weight:400; }
#klaundryPage .kl-clothing-choice input { max-width:85px; }
#klaundryPage .kl-clothes-breakdown { list-style:none; margin:12px 0; padding:10px 12px; border-radius:10px; background:var(--kl-purple-soft); font-size:12px; }
#klaundryPage .kl-clothes-breakdown li { display:flex; justify-content:space-between; gap:12px; padding:4px 0; }
@media(max-width:600px) { #klaundryPage .kl-clothing-list { grid-template-columns:1fr; } #klaundryPage .kl-clothing-rate { flex-wrap:wrap; } #klaundryPage .kl-clothing-rate label { flex-basis:calc(50% - 10px); } }