/* ==========================================================================
   Dry Cleaner Marketplace - custom styles on top of Bootstrap 5
   ========================================================================== */
:root {
    --brand: #0d6efd;
    --brand-dark: #0a3d91;
    --sidebar-bg: #0f1f3d;
    --sidebar-width: 264px;
    --surface: #f5f7fb;
}

body { background: var(--surface); }
.min-w-0 { min-width: 0; }

/* ---------- Public site ---------- */
.hero {
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
    color: #fff;
    border-radius: 1rem;
    padding: 3rem 2rem;
}
.hero .form-control { border: 0; }
.category-tile {
    background: #fff; border-radius: .75rem; padding: 1.25rem .75rem; text-align: center;
    border: 1px solid #e6e9f0; height: 100%; transition: transform .15s, box-shadow .15s;
}
.category-tile:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(15, 31, 61, .08); }
.category-tile i { font-size: 2rem; color: var(--brand); }
.shop-card { border: 1px solid #e6e9f0; border-radius: .75rem; overflow: hidden; height: 100%; }
.shop-card .shop-logo { width: 56px; height: 56px; object-fit: cover; border-radius: .5rem; background: #eef2ff; }
.site-footer { background: #0f1f3d; color: #c7d0e0; }
.site-footer a { color: #c7d0e0; text-decoration: none; }
.site-footer a:hover { color: #fff; }

/* ---------- Dashboard panels ---------- */
body.panel { font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.panel-wrapper { display: flex; min-height: 100vh; }

/* Sidebar shell. Bootstrap's .offcanvas-lg forces a transparent background on large
   screens, so the dark background is re-applied with higher specificity. */
.panel-sidebar,
.panel-sidebar.offcanvas-lg {
    --bs-offcanvas-bg: var(--sidebar-bg);
    --bs-offcanvas-width: var(--sidebar-width);
    width: var(--sidebar-width);
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(180deg, #0f1f3d 0%, #0b1730 100%) !important;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.04);
}
@media (min-width: 992px) {
    .panel-sidebar { position: sticky; top: 0; height: 100vh; }
}

/* Brand */
.panel-brand { display: flex; align-items: center; gap: .75rem; padding: 1.15rem 1.1rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.panel-brand .brand-link { display: flex; align-items: center; gap: .7rem; text-decoration: none; min-width: 0; }
.panel-brand .brand-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.15rem; flex-shrink: 0;
    background: linear-gradient(135deg, #1f6feb, #14b8a6); box-shadow: 0 6px 16px -6px rgba(20,184,166,.7); }
.panel-brand .brand-name { display: block; color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-brand .brand-panel { display: inline-block; margin-top: .2rem; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #7ff0e1; background: rgba(20,184,166,.14); border-radius: 999px; padding: .12rem .5rem; }

/* Nav */
.panel-nav-scroll { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.panel-nav-scroll::-webkit-scrollbar { width: 6px; }
.panel-nav-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.panel-nav { padding: .6rem .75rem 1rem; gap: 2px; }
.panel-nav .nav-heading { color: #64748f; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: 1.1rem .8rem .4rem; }
.panel-nav .nav-link {
    position: relative; color: #aab6cc; font-weight: 500; font-size: .92rem; border-radius: .7rem;
    padding: .58rem .8rem; display: flex; gap: .75rem; align-items: center; transition: background .15s, color .15s;
}
.panel-nav .nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; color: #7d8aa5; transition: color .15s; }
.panel-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.panel-nav .nav-link:hover i { color: #fff; }
.panel-nav .nav-link.active {
    color: #fff; font-weight: 600;
    background: linear-gradient(90deg, rgba(31,111,235,.95), rgba(31,111,235,.75));
    box-shadow: 0 8px 18px -8px rgba(31,111,235,.8);
}
.panel-nav .nav-link.active i { color: #fff; }
.panel-nav .nav-link.active::before { content: ""; position: absolute; left: -.75rem; top: 22%; bottom: 22%; width: 4px; border-radius: 0 4px 4px 0; background: #7ff0e1; }
.panel-nav .nav-badge { margin-left: auto; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem; border-radius: 999px; display: inline-grid; place-items: center;
    font-size: .7rem; font-weight: 700; color: #0b1b33; background: #ffb020; }
.panel-nav .nav-link.active .nav-badge { background: #fff; color: #1f6feb; }

/* User card */
.panel-user { display: flex; align-items: center; gap: .7rem; margin: .75rem; padding: .7rem .75rem; border-radius: .9rem;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.panel-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; flex-shrink: 0;
    background: linear-gradient(135deg, #6f42c1, #1f6feb); }
.panel-user .u-name { display: block; font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-user .u-role { display: block; font-size: .72rem; color: #8b98b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-logout { border: 0; background: transparent; color: #8b98b3; width: 34px; height: 34px; border-radius: .6rem; display: grid; place-items: center; }
.panel-logout:hover { background: rgba(255,255,255,.08); color: #ff8a8a; }
.panel-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.panel-topbar { background: #fff; border-bottom: 1px solid #e6e9f0; padding: .75rem 1.5rem; display: flex; align-items: center; position: sticky; top: 0; z-index: 1010; }
.panel-content { padding: 1.5rem; }
@media (max-width: 576px) { .panel-content { padding: 1rem; } }

.card { border: 1px solid #e6e9f0; border-radius: .75rem; }
.card-header { background: #fff; font-weight: 600; }
.stat-card { color: inherit; }
.stat-card:hover { box-shadow: 0 .5rem 1rem rgba(15, 31, 61, .06); }
.stat-icon { width: 46px; height: 46px; border-radius: .75rem; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.stat-value { font-size: 1.35rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-label { font-size: .8rem; color: #6c757d; }

.table > :not(caption) > * > * { vertical-align: middle; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6c757d; font-weight: 600; }

/* ---------- Order tracking timeline ---------- */
.order-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.order-timeline li { position: relative; padding: 0 0 1rem 2rem; color: #adb5bd; }
.order-timeline li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: #dee2e6; }
.order-timeline li:last-child::before { display: none; }
.order-timeline .dot { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #dee2e6; border: 3px solid #fff; box-shadow: 0 0 0 1px #dee2e6; }
.order-timeline li.done { color: #212529; }
.order-timeline li.done .dot { background: #198754; box-shadow: 0 0 0 1px #198754; }
.order-timeline li.done::before { background: #198754; }
.order-timeline li.current { color: #212529; }
.order-timeline li.current .dot { background: var(--brand); box-shadow: 0 0 0 4px rgba(13,110,253,.2); }

/* ---------- Pricing matrix ---------- */
.price-matrix input { max-width: 110px; }
.qty-input { width: 70px; }