/* ============================================================ CHOCO'S WASH HOUSE — Light / Dark theme Applied by adding class "dark" to . Loaded on every page; theme.js applies the saved choice. ============================================================ */ /* ---------- DARK MODE ---------- */ html.dark body{ background:#0F1729; color:#E4E9F2; } html.dark{ --white:#182238; --cream:#E4E9F2; --ink:#0B1220; --line-soft:#2A3550; --text-soft:#9DAAC4; --muted:#6C7A96; --gold-mist:#1C2942; --shadow:0 2px 10px rgba(0,0,0,.4); --shadow-lg:0 10px 30px rgba(0,0,0,.5); } html.dark .panel, html.dark .stat, html.dark .order-card, html.dark .item-card, html.dark .basket-item, html.dark .modal-card, html.dark .set-section, html.dark .hr-card, html.dark .kpi, html.dark .serv-card, html.dark .step-card, html.dark .contact-card, html.dark .track-panel, html.dark .cust-order, html.dark .wfh-card{ background:#182238 !important; border-color:#2A3550 !important; color:#E4E9F2; } html.dark .side{ background:#0B1220; } html.dark .top h1{ color:#F2F5FA; } html.dark h1,html.dark h2,html.dark h3,html.dark b{ color:#F2F5FA; } html.dark p,html.dark span{ color:#B6C2D9; } html.dark input, html.dark textarea, html.dark select{ background:#111A2C !important; border-color:#2A3550 !important; color:#E9EEF7 !important; } html.dark input::placeholder{ color:#5F6D89; } html.dark .btn-outline{ border-color:#39456A;color:#C9D5EA; } html.dark .btn-ghost{ color:#9DAAC4; } html.dark .badge{ background:#1E2A44;border-color:#2F3C5C;color:#C2CEE5; } html.dark .badge.mute{ background:#1A2338;color:#8593AD; } html.dark .filter{ background:#182238;border-color:#2A3550;color:#9DAAC4; } html.dark .filter.on{ background:#3B76F0;border-color:#3B76F0;color:#fff; } html.dark .tab{ color:#9DAAC4; } html.dark .tab.on{ background:#1E2A44;color:#8FB4FF; } html.dark .empty{ background:#141D30;color:#8593AD; } html.dark .grid-scroll table.price-grid th{ background:#111A2C;color:#B6C2D9; } html.dark .grid-scroll table.price-grid td{ border-color:#2A3550; } html.dark .call-pile{ background:linear-gradient(135deg,#12301F,#0E2418);border-color:#2E7A50; } html.dark .hr-pile{ background:linear-gradient(135deg,#131F3B,#0F1930);border-color:#2A4585; } /* dark works nicely with the existing dark customer pages, leave those */ html.dark .cust-wrap, html.dark .wfh-wrap, html.dark .mb-wrap{ filter:none; } /* ---------- theme toggle switch ---------- */ .set-toggle{ display:flex;align-items:center;justify-content:space-between; padding:.9rem 0;border-bottom:1px solid var(--line-soft); } .set-toggle:last-child{border-bottom:none} .set-toggle .lbl b{display:block;font-size:.94rem} .set-toggle .lbl span{font-size:.82rem;color:var(--text-soft)} .switch{ width:52px;height:29px;border-radius:99px;background:#C9D2E2;border:none; position:relative;cursor:pointer;transition:.25s;flex-shrink:0; } .switch::after{ content:"";position:absolute;top:3px;left:3px;width:23px;height:23px; border-radius:50%;background:#fff;transition:.25s;box-shadow:0 2px 5px rgba(0,0,0,.25); } .switch.on{background:linear-gradient(135deg,#3B76F0,#1A56DB)} .switch.on::after{transform:translateX(23px)} html.dark .switch{background:#39456A} /* ============================================================ SUPPLIES — inventory cards ============================================================ */ .sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem} .sup-card{ background:var(--white);border:1px solid var(--line-soft);border-radius:14px; padding:1rem;box-shadow:var(--shadow);transition:.18s; } .sup-card.low{border-color:#E8A093;background:linear-gradient(160deg,#FDF0EC,#FBE3DE)} .sup-card.out{border-color:#C6452F;background:linear-gradient(160deg,#FBE3DE,#F7D2C9)} html.dark .sup-card.low{background:linear-gradient(160deg,#3A1E18,#2E1712);border-color:#8C4033} html.dark .sup-card.out{background:linear-gradient(160deg,#45201A,#361711);border-color:#C6452F} .sup-top{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem} .sup-ico{font-size:1.7rem;width:44px;height:44px;border-radius:12px;background:var(--gold-mist);display:grid;place-items:center;flex-shrink:0} .sup-nm{flex:1;min-width:0} .sup-nm b{display:block;font-size:.98rem} .sup-nm span{font-size:.78rem;color:var(--text-soft)} .sup-qty{font-family:var(--font-display,sans-serif);font-weight:800;font-size:1.5rem;line-height:1} .sup-qty small{font-size:.72rem;font-weight:600;color:var(--text-soft);display:block} .sup-bar{height:7px;border-radius:99px;background:var(--gold-mist);overflow:hidden;margin:.6rem 0} .sup-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#4FB877,#2E9E5B);transition:width .4s} .sup-bar i.low{background:linear-gradient(90deg,#F0A93F,#E08A1E)} .sup-bar i.out{background:linear-gradient(90deg,#E5484D,#C6452F)} .sup-acts{display:flex;gap:.4rem;margin-top:.6rem} .sup-acts button{flex:1;font-size:.8rem;padding:.45rem} .sup-warn{display:inline-flex;align-items:center;gap:.3rem;font-size:.76rem;font-weight:700;color:#C6452F;margin-top:.3rem} .low-banner{ background:linear-gradient(135deg,#FDF0EC,#FBE3DE);border:1px solid #E8A093; border-radius:14px;padding:1rem 1.2rem;margin-bottom:1.4rem; } html.dark .low-banner{background:linear-gradient(135deg,#3A1E18,#2E1712);border-color:#8C4033} .low-banner .hd{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem} .low-banner .hd b{font-family:var(--font-display,sans-serif);color:#8C2A18;font-size:1.02rem} html.dark .low-banner .hd b{color:#F3A797} .low-banner .items{display:flex;gap:.5rem;flex-wrap:wrap} .low-banner .pill{background:rgba(255,255,255,.75);border:1px solid #E8A093;border-radius:99px;padding:.25rem .7rem;font-size:.82rem;font-weight:600;color:#8C2A18} html.dark .low-banner .pill{background:rgba(0,0,0,.25);color:#F3A797}