/* 🔒 IRON CAGE LOCKED — DO NOT DELETE OR MODIFY       Generic/shared components have been centralised in
       portal-shared.css under the .admin-app scope.
       This block now holds only admin-specific overrides,
       layout tweaks, and the admin-scoped workflow monitor. */

    /* Sidebar accordion sections (mobile) */
    @media(max-width:1023px){
    .d-nav-section .d-nav-label{color:rgba(255,255,255,.82);min-height:44px;padding:0 12px;border-radius:11px;font-size:13px;margin-bottom:0;cursor:pointer;user-select:none;display:flex;align-items:center;gap:10px;transition:all .12s;border:none;background:none;width:100%;text-align:left;font-family:var(--font);font-weight:600}
    .d-nav-section .d-nav-label:hover{background:rgba(255,255,255,.09);color:#fff}
    .d-nav-section .d-nav-label::after{content:'â–¾';margin-left:auto;font-size:.6rem;transition:transform .2s;opacity:.5;flex-shrink:0}
    .d-nav-section.collapsed .d-nav-label::after{transform:rotate(-90deg)}
    .d-nav-section.collapsed .d-nav-label{margin-bottom:0}
    .d-nav-section.collapsed .d-nav-item{display:none}
    .d-sidebar{overflow-y:auto}
    }
    .admin-app .d-hdr{background:transparent!important}

    /* Sidebar accordion — all screen sizes */
    .d-nav-section.collapsed .d-nav-item{display:none}
    .d-nav-section.collapsed .d-nav-label{margin-bottom:0}
    .d-nav-section.collapsed .d-nav-label::after{transform:rotate(-90deg)}

    /* Drawer accordion sections (mobile collapsible menu) */
    .dr-trigger:hover{background:var(--bg);color:var(--text)}
    .dr-trigger span:first-child{width:24px;text-align:center;font-size:1rem;flex-shrink:0}
    .dr-trigger .dr-chevron{margin-left:auto;font-size:.6rem;transition:transform .2s;opacity:.5;flex-shrink:0}
    .dr-section.open .dr-trigger .dr-chevron{transform:rotate(180deg)}
    .dr-body{display:none;padding:0 0 6px}
    .dr-section.open .dr-body{display:flex;flex-direction:column}
    .dr-body .drawer-item{padding-left:38px}

    /* Phone-specific styles */
    .card-phone{font-size:.7rem;color:var(--accent);font-weight:600}
    .d-phone{color:var(--accent);font-weight:600;font-size:.78rem}

    /* Desktop button hover colour variants */
    .d-btn.acc:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
    .d-btn.don:hover{background:var(--accent2);color:#fff;border-color:var(--accent2)}
    .d-btn.del:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

    /* Staff table / card toggling */
    @media(min-width:1024px){.staff-table-wrap{display:block}.staff-card-list{display:none}}
    @media(max-width:1023px){.staff-table-wrap{display:none}.staff-card-list{display:grid;gap:10px}}

    /* Mobile staff cards */
.staff-card{display:flex;align-items:center;gap:12px;background:var(--elevated);border:1px solid var(--border);border-radius:14px;padding:14px 16px;cursor:pointer;transition:all .15s}
.staff-card:active{transform:scale(.985);border-color:var(--accent)}
.staff-card-body{flex:1;min-width:0}
    .staff-card-name{font-weight:700;font-size:.88rem}
    .staff-card-phone{font-size:.74rem;color:var(--text3)}
    .staff-card-email{font-size:.68rem;color:var(--text3)}
    .staff-card-meta{font-size:.62rem;color:var(--text3);margin-top:2px}
    .staff-card-acts{flex-shrink:0}

    /* Mobile tab nav — active state */
    .mnav-item.active{background:var(--accent);color:#fff;border-color:var(--accent)}
    .mnav-item:active{transform:scale(.96)}

    /* Modal action button colours */
    .m-btn.accept{background:var(--accent);color:#fff}
    .m-btn.done{background:var(--accent2);color:#fff}
    .m-btn.decline{background:var(--danger);color:#fff}
    .m-btn.close{background:var(--border-strong);color:var(--text);grid-column:1/-1}

    /* WhatsApp link in modal */
    .m-wa{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:700;text-decoration:none;font-size:.78rem;padding:6px 14px;background:var(--accent-light);border-radius:20px;transition:all .15s}
    .m-wa:active{transform:scale(.96)}

    /* Staff selection & task timeline */
    .mv-sel{padding:10px;border:1px solid var(--border-strong);border-radius:10px;background:var(--bg);color:var(--text);font-family:var(--font);font-size:.82rem;width:100%}
    .tl{display:flex;flex-direction:column;gap:6px;margin-top:4px}
    .tl-item{display:flex;justify-content:space-between;font-size:.72rem}
    .tl-item .tk{color:var(--text3)}
    .tl-item .tv{color:var(--text);font-weight:600}

    /* Settings form */
    .sGrp{background:var(--elevated);border:1px solid var(--border);border-radius:16px;padding:18px}
    .sGrpH{font-size:.72rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
    .sLbl{display:block;font-size:.7rem;color:var(--text3);font-weight:600;margin-bottom:4px}
    .sInp{padding:10px;border:1px solid var(--border-strong);border-radius:10px;background:var(--bg);color:var(--text);font-family:var(--font);font-size:.83rem;width:100%;resize:vertical}

    /* Dashboard KPI grid — 3-column matching booking page */
    .dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
    @media(min-width:1024px){.dash-grid{grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}}
    @media(max-width:600px){.dash-grid{grid-template-columns:repeat(2,1fr);gap:8px}}

    /* KPI progress circle */
    .kpi{position:relative;overflow:hidden;padding-right:76px}
    .kpi-progress{position:absolute;top:20px;right:20px;width:48px;height:48px;flex-shrink:0}
    .kpi-progress svg{transform:rotate(-90deg)}
    .kpi-progress .bg{stroke:var(--card-muted,var(--border))}
    .kpi-progress .fg{stroke:var(--card-accent,var(--accent));stroke-linecap:round;transition:stroke-dashoffset .6s ease}
    .kpi-pct{position:absolute;top:72px;right:20px;font-size:9px;font-weight:800;color:var(--card-accent,var(--accent));letter-spacing:.04em;opacity:.85}

    /* Staff avatar */
    .st-av{width:52px;height:52px;border-radius:14px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;color:var(--text3)}
    .st-av img{width:100%;height:100%;object-fit:cover}
    .st-av.sm{width:40px;height:40px;border-radius:11px}

    /* Modern Booking Cards grid */
    .bk-grid{display:grid;grid-template-columns:1fr;gap:12px}
    @media(min-width:768px){.bk-grid{grid-template-columns:repeat(2,1fr);gap:14px}}
    @media(min-width:1500px){.bk-grid{grid-template-columns:repeat(3,1fr)}}

    /* CRM */
    .crm-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
    .crm-search{flex:1;min-width:200px;padding:12px 14px;border:1px solid var(--border-strong);border-radius:12px;background:var(--bg);color:var(--text);font-family:var(--font);font-size:.85rem}
    .crm-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
    .crm-sel{padding:12px 12px;border:1px solid var(--border-strong);border-radius:12px;background:var(--bg);color:var(--text);font-family:var(--font);font-size:.8rem;cursor:pointer}
    .cust-cb{width:17px;height:17px;flex-shrink:0;accent-color:var(--accent);cursor:pointer}
    .cust-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--elevated);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:border-color .12s}
    .cust-row:hover{border-color:var(--accent)}
    .cust-main{flex:1;min-width:0}
    .cust-name{font-weight:700;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .cust-sub{font-size:.72rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
    .cust-sub svg{width:.9em;height:.9em}
    .cust-stat{text-align:center;font-size:.68rem;color:var(--text3);white-space:nowrap;line-height:1.4}
    .cust-stat b{color:var(--text);font-size:.82rem}
    .pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px;padding-bottom:10px}
    .pager button{padding:8px 16px;border-radius:10px;border:1px solid var(--border-strong);background:var(--elevated);color:var(--text2);font-family:var(--font);font-weight:600;font-size:.75rem;cursor:pointer}
    .pager button:disabled{opacity:.4;cursor:not-allowed}
    .cbadge{padding:3px 10px;border-radius:20px;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}
    .cbadge.active{background:var(--accent-light);color:var(--accent)}
    .cbadge.vip{background:var(--warning-light);color:var(--warning)}
    .cbadge.inactive{background:var(--bg);color:var(--text3)}
    .cbadge.blacklist{background:var(--danger-light);color:var(--danger)}

    /* Spacing Normalization */
    body{line-height:1.5;font-family:var(--font)}
    .admin-app,.admin-app body,.admin-app h1,.admin-app h2,.admin-app h3,.admin-app h4,.admin-app p,.admin-app span,.admin-app div,.admin-app button,.admin-app input,.admin-app select,.admin-app label,.admin-app a,.admin-app .login-box h2,.admin-app .d-brand-text h1{font-family:var(--font)!important}
    @media(max-width:1023px){
      .d-main{padding:0!important}
      .stats-grid{padding:22px 16px 0;gap:10px}
      .sec{padding:18px 16px 10px}
      .list{padding:18px 16px 24px}
      .panel{margin-bottom:20px!important}
    }
    .panel{margin-bottom:24px}
    @media(min-width:1024px){
      .d-main{padding:28px 32px}
      .d-hdr{margin-bottom:24px}
      .stats-grid{padding:0;margin-bottom:20px}
      .sec{padding:0 0 14px}
    }
    .kpi,.panel,.bk-card,.sGrp,.d-card,.stat{border-radius:16px}
    .panel,.sGrp{padding:18px}
    .bk-card{padding:16px 18px}
    .panel-h{margin-bottom:14px}
    .sGrpH{margin-bottom:16px;padding-bottom:12px}
    .dash-grid{gap:12px}
    .panels{gap:14px;margin-bottom:14px}
    .bk-grid{gap:14px}
    .sec{align-items:center}
    .sec-title{line-height:1}
    .mrow{padding:11px 0}
    .m-row{padding:11px 0}
    .m-sheet h3{margin-bottom:16px}
    .sGrp{padding:22px}
    .sGrpH{margin-bottom:18px;padding-bottom:12px}
    .sFields{display:grid;gap:18px}
    .sLbl{margin-bottom:8px;letter-spacing:.2px;font-size:.72rem}
    .sInp,.mv-sel{padding:12px 14px;font-size:.85rem;border-radius:11px;line-height:1.4}
    .sInp:focus,.mv-sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

    /* Sidebar theming + nav badge */
    .d-nav-badge{background:var(--warning-light);color:var(--warning);padding:2px 8px;border-radius:20px;font-size:.64rem;font-weight:700;margin-left:auto}
    .drawer{background:var(--menu-bg)}
    .d-sidebar{background:#14532d}
    .d-brand{position:sticky;top:0;z-index:2;background:transparent;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14)}
    .sidebar-scroll{overflow-y:auto;flex:1;min-height:0}
    .d-sidebar{overflow-y:visible!important}
    .d-brand-text h1{color:#fff}
    .d-brand-text span{color:rgba(255,255,255,.6)}
    .d-nav-item{color:rgba(255,255,255,.82)}
    .d-nav-item .dni{color:inherit}
    .d-nav-item:hover{background:rgba(255,255,255,.09);color:#fff}
    .d-nav-item.active{background:rgba(255,255,255,.16);color:#fff}
    .d-nav-item.active .dni{color:#fff}
    .d-nav-badge{background:rgba(255,255,255,.2);color:#fff}
    .d-sidebar-footer{border-top-color:rgba(255,255,255,.14)}
    .d-sidebar-footer button{color:rgba(255,255,255,.72)}
    .d-sidebar-footer button:hover{background:rgba(255,255,255,.09);color:#fff}

    /* Template badges */
    .tpl-badge{display:inline-block;padding:3px 11px;border-radius:20px;font-size:.68rem;font-weight:700;letter-spacing:.2px}
    .tpl-badge.active{background:var(--accent-light);color:var(--accent)}
    .tpl-badge.inactive{background:var(--bg);color:var(--text3)}

    /* === 9-STEP WORKFLOW MONITOR (admin-scoped, namespaced to avoid portal collisions) === */
    .admin-app .wf-hgrid{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin:16px 0}
    .admin-app .wf-node{text-align:center;position:relative}
    .admin-app .wf-node::after{content:'';position:absolute;top:14px;left:calc(50% + 14px);width:calc(100% - 28px);height:2px;background:var(--border-strong);border-radius:1px;z-index:0}
    .admin-app .wf-node:last-child::after{display:none}
    .admin-app .wf-dot{width:28px;height:28px;border-radius:50%;background:var(--bg);border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;margin:0 auto 4px;position:relative;z-index:1;transition:all .3s}
    .admin-app .wf-node.done .wf-dot{background:var(--accent);border-color:var(--accent);color:#fff}
    .admin-app .wf-node.active .wf-dot{background:var(--accent2);border-color:var(--accent2);color:#fff;box-shadow:0 0 0 4px rgba(16,185,129,.2);animation:wf-pulse-admin 2s infinite}
    .admin-app .wf-node.done::after{background:var(--accent)}
    .admin-app .wf-label{font-size:.5rem;color:var(--text3);line-height:1.2;text-transform:uppercase;letter-spacing:.3px;font-weight:600}
    .admin-app .wf-node.active .wf-label,.admin-app .wf-node.done .wf-label{color:var(--text)}
    @keyframes wf-pulse-admin{0%,100%{box-shadow:0 0 0 4px rgba(16,185,129,.2)}50%{box-shadow:0 0 0 8px rgba(16,185,129,.08)}}

    /* Workflow Monitor cards */
    .admin-app .wfm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
    .admin-app .wfm-card{background:var(--elevated);border:1px solid var(--border);border-radius:14px;padding:16px;transition:all .2s}
    .admin-app .wfm-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
    .admin-app .wfm-head{display:flex;justify-content:space-between;align-items:start;gap:8px;margin-bottom:10px}
    .admin-app .wfm-cust{font-weight:700;font-size:.85rem}
    .admin-app .wfm-addr{font-size:.68rem;color:var(--text3);margin-top:2px}
    .admin-app .wfm-staff{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;color:var(--accent);padding:3px 10px;background:var(--accent-light);border-radius:20px}
    .admin-app .wfm-step-bar{position:relative;height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin:8px 0}
    .admin-app .wfm-step-fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;transition:width .5s ease}
    .admin-app .wfm-meta{display:flex;justify-content:space-between;align-items:center;font-size:.64rem;color:var(--text3);margin-top:4px}
    .admin-app .wfm-time{font-size:.62rem;color:var(--text3)}
    .admin-app .wfm-status{font-size:.65rem;font-weight:700;text-transform:uppercase}
    .admin-app .wf-refresh{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--text3)}

    /* Workflow timeline — vertical */
    .admin-app .awf-vertical{display:flex;flex-direction:column;gap:0;padding:4px 0}
    .admin-app .awf-row{display:flex;gap:14px;align-items:stretch;min-height:44px}
    .admin-app .awf-node{display:flex;flex-direction:column;align-items:center;width:28px;flex-shrink:0}
    .admin-app .awf-row .awf-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;border:2px solid var(--awf-color,#6b7280);color:var(--text3);background:var(--elevated);flex-shrink:0;transition:all .2s}
    .admin-app .awf-row.done .awf-dot,.admin-app .awf-row.active .awf-dot{color:#fff}
    .admin-app .awf-line{width:2px;flex:1;min-height:12px;margin:3px 0;border-radius:1px}
    .admin-app .awf-content{flex:1;padding:2px 0 10px;min-width:0}
    .admin-app .awf-title{font-size:.82rem;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:2px}
    .admin-app .awf-desc{font-size:.7rem;color:var(--text3);line-height:1.4}
    .admin-app .awf-row.active .awf-title{color:var(--awf-color)}
    .admin-app .awf-row.done .awf-title{color:var(--text2)}
    .admin-app .awf-status{display:flex;align-items:flex-start;padding-top:4px;flex-shrink:0}
    .admin-app .awf-check{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
    .admin-app .awf-check.done{color:#fff}
    .admin-app .awf-check.active{font-size:.7rem;animation:wf-pulse-admin 2s infinite}

    /* Keep old horizontal bar for backward compat */
    .admin-app .awf-bar{display:flex;align-items:center;gap:0;margin:16px 0;overflow-x:auto;padding:8px 0}
    .admin-app .awf-step{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px;position:relative}
    .admin-app .awf-step::after{content:'';position:absolute;top:14px;left:50%;width:100%;height:2px;background:var(--border-strong);z-index:0}
    .admin-app .awf-step:last-child::after{display:none}
    .admin-app .awf-step.done .awf-dot{background:var(--accent);border-color:var(--accent);color:#fff}
    .admin-app .awf-step.done::after{background:var(--accent)}
    .admin-app .awf-step.active .awf-dot{background:var(--accent2);border-color:var(--accent2);color:#fff;animation:wf-pulse-admin 2s infinite}
    .admin-app .awf-label{font-size:.55rem;color:var(--text3);text-align:center;line-height:1.2}
    .admin-app .awf-step.active .awf-label,.admin-app .awf-step.done .awf-label{color:var(--text)}
    @media(max-width:767px){.admin-app .wf-hgrid{grid-template-columns:repeat(5,1fr)}.admin-app .wf-hgrid .wf-node:nth-child(n+6){display:none}.admin-app .wfm-grid{grid-template-columns:1fr}.admin-app .awf-bar{flex-wrap:nowrap}.admin-app .awf-step{min-width:44px}}

    /* Workflow filter pills */
    .admin-app .wf-pills{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
    .admin-app .wf-pill{padding:5px 12px;border-radius:20px;border:1px solid var(--border-strong);background:var(--bg);color:var(--text3);font-size:.65rem;font-weight:600;cursor:pointer;transition:all .15s;font-family:var(--font)}
    .admin-app .wf-pill:hover{border-color:var(--accent);color:var(--accent)}
    .admin-app .wf-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}
    .admin-app .wf-pill .cnt{font-weight:800;margin-left:3px;opacity:.8}

/* ── Modern Settings Page ── */
.ss-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.ss-tabs{display:flex;gap:4px;flex-shrink:0}
.ss-tab{padding:8px 16px;border:1px solid var(--border-strong);border-radius:10px;background:var(--elevated);color:var(--text2);font-family:var(--font);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.ss-tab:hover{border-color:var(--accent);color:var(--accent)}
.ss-tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.ss-search{flex:1;max-width:240px;padding:9px 14px;border:1px solid var(--border-strong);border-radius:10px;background:var(--bg);color:var(--text);font-family:var(--font);font-size:.78rem;outline:none}
.ss-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.ss-grid{display:grid;gap:12px;max-width:880px}
.ss-card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:box-shadow .15s}
.ss-card:hover{box-shadow:var(--shadow)}
.ss-card[hidden]{display:none}
.ss-summary{display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;user-select:none;font-family:var(--font);font-size:.82rem;font-weight:700;color:var(--text);list-style:none}
.ss-summary::-webkit-details-marker{display:none}
.ss-summary::marker{display:none}
.ss-icon{width:32px;height:32px;border-radius:8px;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ss-icon i{width:16px;height:16px;display:flex}
.ss-title{flex:1}
.ss-arrow{color:var(--text3);transition:transform .2s;display:flex}
.ss-card[open] .ss-arrow{transform:rotate(180deg)}
.ss-body{padding:0 18px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.ss-field{margin:0}
.ss-field:last-child{margin-bottom:0}
.ss-field.full{grid-column:1/-1}
.ss-savebar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding:14px 18px;background:var(--card-bg);border:1px solid var(--border);border-radius:14px;max-width:880px}
@media(max-width:767px){
  .ss-toolbar{flex-direction:column;align-items:stretch}
  .ss-tabs{overflow-x:auto;padding-bottom:4px}
  .ss-search{max-width:100%}
  .ss-body{grid-template-columns:1fr}
  .ss-savebar{flex-direction:column;align-items:stretch;text-align:center}
}

/* Toggle Switch */
.ss-toggle{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer}
.ss-toggle input{opacity:0;width:0;height:0}
.ss-toggle-slide{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--border-strong);border-radius:12px;transition:all .25s}
.ss-toggle-slide::before{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:all .25s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.ss-toggle input:checked+.ss-toggle-slide{background:var(--accent)}
.ss-toggle input:checked+.ss-toggle-slide::before{transform:translateX(20px)}

/* Settings section labels */
.ss-section-label{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.8px;padding:8px 0 4px;margin-top:16px;border-bottom:2px solid var(--accent-light)}
.ss-section-label:first-child{margin-top:0}


/* ╔═══════════════════════════════════════════════════════════════╗
   ║  MODERN DASHBOARD v3 — premium, bento, multi-accent         ║
   â•‘  Added: 2026-08-07 by Mavis                                â•‘
   ║  v2 → v3: gradient mesh hero, bento grid, sparklines,     ║
   â•‘  multi-color accent system, dark-mode optimized, mobile    â•‘
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ─── Skeleton loading state ─── */
.dash-skeleton{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.dash-skeleton .sk{background:linear-gradient(90deg,var(--bg) 0%,var(--border) 50%,var(--bg) 100%);background-size:200% 100%;animation:sk-shimmer 1.4s infinite;border-radius:14px}
.dash-skeleton .sk-hero{height:120px;width:100%}
.dash-skeleton .sk-bento{height:140px;width:100%}
.dash-skeleton .sk-pipe{height:120px;width:100%}
.dash-skeleton .sk-row{height:200px;width:100%}
.dash-skeleton .sk-grid{height:160px;width:100%}
@keyframes sk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ─── HERO (premium with mesh gradient) ─── */
.dh{position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(135deg,#022c22 0%,#064e3b 50%,#065f46 100%);box-shadow:0 12px 40px rgba(6,78,59,.25),inset 0 1px 0 rgba(255,255,255,.05);margin-bottom:14px}
.dh-mesh{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none;opacity:.55}
.dh-mesh-1{top:-80px;right:-40px;width:280px;height:280px;background:radial-gradient(circle,#10b981 0%,transparent 70%);animation:dh-float-1 18s ease-in-out infinite}
.dh-mesh-2{bottom:-100px;left:30%;width:340px;height:340px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);animation:dh-float-2 22s ease-in-out infinite}
@keyframes dh-float-1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,20px) scale(1.15)}}
@keyframes dh-float-2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-20px) scale(.9)}}
.dh-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px}
.dh-l{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.dh-avatar{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.05));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.dh-avatar i{width:28px;height:28px;stroke-width:2}
.dh-eyebrow{font-size:.7rem;font-weight:700;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:2px}
.dh-name{font-size:1.4rem;font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.3px;font-family:var(--font)}
.dh-h{background:linear-gradient(135deg,#34d399,#10b981 60%,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dh-time{font-size:.74rem;color:rgba(255,255,255,.7);margin-top:4px;font-weight:500;letter-spacing:.2px;display:flex;align-items:center;gap:6px}
.dh-time::before{content:'';width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981;animation:pulse-dot 1.5s infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
.dh-live{font-variant-numeric:tabular-nums;color:#34d399;font-weight:600}
.dh-r{display:flex;gap:8px;flex-shrink:0}
.dh-btn{display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:12px;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .2s;font-family:var(--font);border:none}
.dh-btn i{width:16px;height:16px;stroke-width:2.5}
.dh-btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dh-btn-ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.18)}
.dh-btn-primary{background:linear-gradient(135deg,#fff,#d1fae5);color:#064e3b;box-shadow:0 4px 12px rgba(16,185,129,.3)}
.dh-btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,185,129,.4)}
.dh-quick{display:relative;z-index:1;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:0 20px 18px}
.dhq{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:11px;cursor:pointer;transition:all .2s;color:#fff;font-family:var(--font);text-align:left}
.dhq:hover{background:rgba(255,255,255,.14);transform:translateY(-1px);border-color:rgba(255,255,255,.2)}
.dhq i{width:14px;height:14px;opacity:.85;flex-shrink:0}
.dhq span{font-size:.7rem;font-weight:600;letter-spacing:.1px}
@media(max-width:768px){
  .dh-content{flex-direction:column;align-items:flex-start;padding:18px 18px}
  .dh-avatar{width:48px;height:48px}
  .dh-name{font-size:1.2rem}
  .dh-r{width:100%;justify-content:flex-end}
  .dh-quick{grid-template-columns:repeat(3,1fr);padding:0 18px 16px}
}
@media(max-width:420px){
  .dh-quick{grid-template-columns:repeat(2,1fr)}
  .dh-btn span{display:none}
  .dh-btn{padding:10px 12px}
}

/* ─── ALERT BANNER ─── */
.dal{position:relative;display:flex;align-items:center;gap:14px;padding:14px 18px;margin-bottom:12px;background:linear-gradient(135deg,#fff1f2 0%,#ffe4e6 100%);border:1px solid #fecdd3;border-radius:16px;box-shadow:0 4px 14px rgba(244,63,94,.1);overflow:hidden}
html.dark .dal{background:linear-gradient(135deg,#3f1d1f 0%,#5a1f24 100%);border-color:rgba(244,63,94,.3);box-shadow:0 4px 14px rgba(244,63,94,.15)}
.dal-pulse{position:absolute;left:18px;top:50%;width:42px;height:42px;border-radius:50%;background:rgba(244,63,94,.4);transform:translateY(-50%);animation:dal-ping 2s infinite;pointer-events:none}
@keyframes dal-ping{0%{transform:translateY(-50%) scale(.8);opacity:.6}100%{transform:translateY(-50%) scale(2.2);opacity:0}}
.dal-ic{position:relative;z-index:1;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 16px rgba(244,63,94,.35)}
.dal-ic i{width:20px;height:20px;stroke-width:2.5}
.dal-body{flex:1;min-width:0;position:relative;z-index:1}
.dal-t{font-weight:700;font-size:.94rem;color:#881337;line-height:1.2}
html.dark .dal-t{color:#fecdd3}
.dal-t b{color:#9f1239;font-size:1.1rem}
html.dark .dal-t b{color:#fff}
.dal-s{font-size:.74rem;color:#be123c;margin-top:3px;line-height:1.5}
html.dark .dal-s{color:#fda4af}
.dal-s b{font-weight:700;color:#9f1239}
html.dark .dal-s b{color:#fff}
.dal-btn{padding:9px 18px;background:#fff;color:#e11d48;border:1px solid #fecdd3;border-radius:11px;font-weight:700;font-size:.78rem;cursor:pointer;transition:all .15s;flex-shrink:0;position:relative;z-index:1;font-family:var(--font)}
html.dark .dal-btn{background:#881337;color:#fff;border-color:rgba(244,63,94,.4)}
.dal-btn:hover{background:#e11d48;color:#fff;border-color:#e11d48;transform:translateY(-1px);box-shadow:0 6px 16px rgba(225,29,72,.3)}
html.dark .dal-btn:hover{background:#f43f5e;color:#fff}
@media(max-width:600px){.dal{padding:12px 14px}.dal-btn{padding:7px 12px;font-size:.72rem}}

/* ─── BENTO GRID (4 KPI cards) ─── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
@media(max-width:1023px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.bento{grid-template-columns:1fr}}
.k{position:relative;padding:18px;background:var(--card-bg);border:1px solid var(--border);border-radius:18px;box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden;transition:all .25s cubic-bezier(.4,0,.2,1);min-height:140px}
.k:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.1);border-color:transparent}
.k-revenue:hover{box-shadow:0 12px 28px rgba(16,185,129,.2)}
.k-jobs:hover{box-shadow:0 12px 28px rgba(59,130,246,.2)}
.k-alerts:hover{box-shadow:0 12px 28px rgba(239,68,68,.2)}
.k-outstanding:hover{box-shadow:0 12px 28px rgba(245,158,11,.2)}
.k-bg{position:absolute;top:0;left:0;right:0;height:3px;background:currentColor;opacity:.85}
.k-revenue .k-bg{background:linear-gradient(90deg,#10b981,#059669,#047857)}
.k-jobs .k-bg{background:linear-gradient(90deg,#3b82f6,#2563eb,#1d4ed8)}
.k-alerts .k-bg{background:linear-gradient(90deg,#f43f5e,#ef4444,#dc2626)}
.k-outstanding .k-bg{background:linear-gradient(90deg,#f59e0b,#d97706,#b45309)}
.k-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;position:relative;z-index:1}
.k-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 16px currentColor}
.k-revenue .k-ic{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 6px 16px rgba(16,185,129,.35)}
.k-jobs .k-ic{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 6px 16px rgba(59,130,246,.35)}
.k-alerts .k-ic{background:linear-gradient(135deg,#f43f5e,#ef4444);color:#fff;box-shadow:0 6px 16px rgba(239,68,68,.35)}
.k-outstanding .k-ic{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 6px 16px rgba(245,158,11,.35)}
.k-ic i{width:20px;height:20px;stroke-width:2.5;color:#fff}
.k-spark{width:80px;height:32px;color:currentColor;flex-shrink:0;opacity:.8}
.k-revenue .k-spark{color:#10b981}
.k-jobs .k-spark{color:#3b82f6}
.k-alerts .k-spark{color:#f43f5e}
.k-outstanding .k-spark{color:#f59e0b}
.k-l{font-size:.68rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px;position:relative;z-index:1}
.k-v{font-size:2rem;font-weight:800;color:var(--text);line-height:1;letter-spacing:-.6px;font-variant-numeric:tabular-nums;position:relative;z-index:1}
.k-trend{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:.7rem;font-weight:600;position:relative;z-index:1}
.k-trend i{width:12px;height:12px;flex-shrink:0}
.k-trend em{font-style:normal;color:var(--text3);font-weight:500;margin-left:2px;font-size:.66rem}
.k-up{color:#059669}
.k-dn{color:#dc2626}
.k-up i,.k-dn i{color:currentColor}
.k-sub em{color:var(--text3)}
.k-revenue{color:#10b981}
.k-jobs{color:#3b82f6}
.k-alerts{color:#ef4444}
.k-outstanding{color:#f59e0b}

/* ─── PANEL (shared) ─── */
.panel-pro{background:var(--card-bg);border:1px solid var(--border);border-radius:18px;padding:18px 20px;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.03);transition:all .2s}
.panel-pro:hover{box-shadow:0 4px 14px rgba(0,0,0,.06);border-color:var(--border-strong)}
.panel-pro .panel-h{margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-pro .panel-h h3{display:flex;align-items:center;gap:8px;font-size:.96rem;font-weight:700;color:var(--text);letter-spacing:-.2px;font-family:var(--font)}
.panel-pro .panel-h h3 i{width:18px;height:18px;color:var(--accent);stroke-width:2.2}

/* ─── PIPELINE FUNNEL ─── */
.dp-wrap .panel-h .sec-count{margin-left:auto;background:linear-gradient(135deg,#f0fdf4,#dcfce7);color:#166534;padding:5px 12px;border-radius:20px;font-size:.72rem;font-weight:700;border:1px solid #bbf7d0}
html.dark .dp-wrap .panel-h .sec-count{background:linear-gradient(135deg,#064e3b,#065f46);color:#6ee7b7;border-color:rgba(16,185,129,.3)}
.dp{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:stretch;margin:6px 0 14px}
@media(min-width:1280px){.dp{grid-template-columns:repeat(6,1fr);gap:8px}}
@media(max-width:1279px){.dp-arr{display:none}}
@media(max-width:1100px){.dp{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){
  .dp{grid-template-columns:repeat(2,1fr)!important;gap:10px}
  .dp-arr{display:none!important}
  .dps{padding:14px 10px}
  .dps-c{font-size:1.5rem}
  .dps-l{font-size:.66rem}
  .dps-s{font-size:.6rem}
}
.dps{position:relative;padding:16px 12px;background:var(--card-bg);border:1.5px solid var(--border);border-radius:14px;text-align:center;transition:all .2s;cursor:default;overflow:hidden}
.dps:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.1);border-color:transparent}
.dps-bar{position:absolute;left:0;right:0;top:0;height:4px;background:currentColor}
.dps-c{font-size:1.8rem;font-weight:800;line-height:1;letter-spacing:-.6px;color:var(--text);font-variant-numeric:tabular-nums;margin:4px 0}
.dps-l{font-size:.7rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.dps-s{font-size:.62rem;color:var(--text3);margin-top:2px;opacity:.8}
.dp-lead{color:#8b5cf6}.dp-quote{color:#3b82f6}.dp-book{color:#0891b2}.dp-conf{color:#10b981}.dp-prog{color:#f59e0b}.dp-done{color:#22c55e}
.dp-arr{display:flex;align-items:center;justify-content:center;color:var(--border-strong);opacity:.6}
.dp-arr i{width:18px;height:18px}
.dp-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:12px;border-top:1px dashed var(--border)}
@media(max-width:600px){.dp-foot{grid-template-columns:repeat(2,1fr)}}
.dpf{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg);border-radius:10px;transition:all .15s}
.dpf:hover{background:var(--card-bg);transform:translateY(-1px)}
.dpf i{width:16px;height:16px;color:var(--accent);stroke-width:2.2;flex-shrink:0}
.dpf span{font-size:.7rem;color:var(--text3);font-weight:600;flex:1;min-width:0}
.dpf b{font-size:.86rem;color:var(--text);font-weight:800;font-variant-numeric:tabular-nums}

/* ─── BENTO ROW (2-col) ─── */
.bento-row{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:1023px){.bento-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.bento-row{grid-template-columns:1fr}}

/* ─── SCHEDULE (timeline) ─── */
.dsch .panel-h .sec-count{margin-left:auto;background:var(--bg);color:var(--text2);padding:4px 10px;border-radius:20px;font-size:.72rem;font-weight:700;border:1px solid var(--border)}
.dsch .lnk{margin-left:0;background:none;border:none;color:var(--accent);font-weight:600;font-size:.74rem;cursor:pointer;padding:4px 8px}
html.dark .dsch .lnk{color:#34d399}
.dsch-tl{display:flex;flex-direction:column;gap:0;max-height:480px;overflow-y:auto;padding-right:4px}
.dsch-tl::-webkit-scrollbar{width:5px}
.dsch-tl::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:5px}
.dsch-row{display:grid;grid-template-columns:80px 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--border);transition:background .15s}
.dsch-row:first-child{border-top:none;padding-top:0}
.dsch-row.has{padding:6px 0}
.dsch-row.done{background:linear-gradient(90deg,rgba(16,185,129,.04) 0%,transparent 100%)}
html.dark .dsch-row.done{background:linear-gradient(90deg,rgba(16,185,129,.08) 0%,transparent 100%)}
.dsch-hr{font-size:.72rem;font-weight:800;color:var(--text3);padding-top:6px;letter-spacing:.2px;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.dsch-row.has .dsch-hr{color:var(--accent);font-weight:800}
.dsch-row.done .dsch-hr{color:#10b981}
.dsch-row.done .dsch-hr::after{content:'✓';color:#10b981;font-size:.9rem}
.dsch-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.dsch-empty{font-size:.74rem;color:var(--text3);font-style:italic;padding:6px 0;opacity:.6}
.dsch-job{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .15s;min-width:0}
html.dark .dsch-job{background:rgba(255,255,255,.02)}
.dsch-job:hover{border-color:var(--accent);background:var(--card-bg);box-shadow:0 4px 12px rgba(0,0,0,.06);transform:translateX(2px)}
.dsch-job-main{flex:1;min-width:0}
.dsch-name{font-weight:700;font-size:.84rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.dsch-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:.68rem;color:var(--text3)}
.dsch-staff,.dsch-addr{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.dsch-staff i,.dsch-addr i{width:11px;height:11px;flex-shrink:0}
.dsch-staff{color:var(--accent);font-weight:600}
@media(max-width:600px){.dsch-row{grid-template-columns:60px 1fr;gap:8px}.dsch-meta{flex-direction:column;gap:2px}.dsch-staff,.dsch-addr{max-width:100%}}

/* ─── LIVE SNAPSHOT (right column) ─── */
.dst-list{display:flex;flex-direction:column;gap:8px}
.dst-item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;transition:all .15s}
html.dark .dst-item{background:rgba(255,255,255,.02)}
.dst-item:hover{background:var(--card-bg);transform:translateX(2px);border-color:var(--border-strong)}
.dst-ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.dst-ic i{width:18px;height:18px;color:#fff;stroke-width:2.5}
.dst-green{background:linear-gradient(135deg,#10b981,#059669)}
.dst-blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.dst-amber{background:linear-gradient(135deg,#f59e0b,#d97706)}
.dst-red{background:linear-gradient(135deg,#ef4444,#dc2626)}
.dst-purple{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.dst-l{font-size:.68rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.dst-v{font-size:1.2rem;font-weight:800;color:var(--text);line-height:1;letter-spacing:-.3px;font-variant-numeric:tabular-nums}

/* ─── TREND CHART ─── */
.dtr .panel-h{flex-direction:column;align-items:flex-start;gap:8px}
.dtr .panel-h h3{width:100%}
.dtr-head{display:flex;align-items:baseline;gap:14px;padding-left:26px}
.dtr-pri{font-size:1.5rem;font-weight:800;color:var(--text);letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.dtr-sub{font-size:.78rem;color:var(--text3);font-weight:600;background:var(--bg);padding:3px 10px;border-radius:12px;border:1px solid var(--border)}
.dtr-chart{position:relative;width:100%;padding:4px 0 12px}
.dtr-chart .dt-svg{width:100%;height:160px;display:block}
.dtr-axis{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:8px 4px 0;border-top:1px dashed var(--border)}
.dtr-tick{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.dtr-d{font-size:.66rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.3px}
.dtr-v{font-size:.72rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.dtr-tick.peak .dtr-v{color:#dc2626}
html.dark .dtr-tick.peak .dtr-v{color:#f87171}

/* ─── TOP ZONES (bar list) ─── */
.dzo-list{display:flex;flex-direction:column;gap:10px;padding:2px 0}
.dzo-row{display:grid;grid-template-columns:36px 1fr 130px 40px;gap:12px;align-items:center;padding:4px 0}
.dzo-rank{font-size:.72rem;font-weight:800;color:var(--text3);font-variant-numeric:tabular-nums;letter-spacing:-.5px;text-align:center;padding:3px 0;border-radius:6px;background:var(--bg)}
.dzo-rank.gold{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#fff;box-shadow:0 2px 8px rgba(245,158,11,.3)}
.dzo-rank.silver{background:linear-gradient(135deg,#cbd5e1,#94a3b8);color:#fff;box-shadow:0 2px 8px rgba(148,163,184,.3)}
.dzo-rank.bronze{background:linear-gradient(135deg,#b45309,#92400e);color:#fff;box-shadow:0 2px 8px rgba(180,83,9,.3)}
.dzo-name{font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dzo-bar{height:10px;background:var(--bg);border-radius:5px;overflow:hidden;position:relative;border:1px solid var(--border)}
html.dark .dzo-bar{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
.dzo-fill{height:100%;background:linear-gradient(90deg,var(--accent),#10b981);border-radius:5px;transition:width .8s cubic-bezier(.4,0,.2,1);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.dzo-count{font-size:.82rem;font-weight:800;color:var(--accent);text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:480px){.dzo-row{grid-template-columns:30px 1fr 80px 32px;gap:8px}.dzo-name{font-size:.74rem}}

/* ─── MINI STAT (3-col panels) ─── */
.bento-3col{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px}
@media(min-width:900px){.bento-3col{grid-template-columns:repeat(3,1fr);gap:14px}}

/* ─── STAFF (60%) + KEWANGAN (40%) in one row ─── */
.row-sf{
  display:grid;grid-template-columns:1fr;gap:12px;
  margin-bottom:12px;
}
@media(min-width:820px){
  .row-sf{grid-template-columns:3fr 2fr;gap:14px}
}
.sf-staff,.sf-finance{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px 20px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:all .2s;
}
.sf-staff:hover,.sf-finance:hover{
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  border-color:var(--border-strong);
}
.sf-staff .mst-grid,.sf-finance .mst-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
@media(min-width:1080px){
  .sf-staff .mst-grid,.sf-finance .mst-grid{grid-template-columns:1fr 1fr;gap:10px}
}
@media(max-width:560px){
  .sf-staff .mst-grid,.sf-finance .mst-grid{grid-template-columns:1fr}
}

/* ─── FULLWIDTH PANELS (Top Staff only) ─── */
.dts-full{
  width:100%;
  margin-bottom:12px;
}

/* ─── RECENT BOOKINGS: 3-COLUMN GRID (not fullwidth) ─── */
.bc-list-3col{
  display:grid !important;
  grid-template-columns:1fr;
  gap:12px;
}
@media(min-width:820px){
  .bc-list-3col{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(min-width:1180px){
  .bc-list-3col{grid-template-columns:repeat(3,1fr);gap:14px}
}

/* Tighter card sizing for 3-col layout */
@media(min-width:1180px){
  .bc-list-3col .booking-card{padding:14px 14px 12px;border-radius:14px;--card-pad-x:14px;--card-pad-b:12px}
  .bc-list-3col .bc-name{font-size:.95rem;margin-bottom:4px}
  .bc-list-3col .bc-svc{font-size:.7rem}
  .bc-list-3col .bc-svc i{width:12px;height:12px}
  .bc-list-3col .bc-info{margin-top:10px;padding-top:8px;gap:5px}
  .bc-list-3col .bc-info-row{font-size:.66rem;gap:6px}
  .bc-list-3col .bc-info-row i{width:11px;height:11px}
  .bc-list-3col .bc-info-row .label{min-width:42px;font-size:.56rem;letter-spacing:.3px}
  .bc-list-3col .bc-info-row.id .val{font-size:.62rem}
  .bc-list-3col .bc-foot{margin-top:8px;padding-top:8px;gap:6px}
  .bc-list-3col .bc-amt{font-size:.95rem}
  .bc-list-3col .bc-btn{padding:6px 9px;font-size:.6rem;letter-spacing:.2px}
  .bc-list-3col .bc-btn i{width:11px;height:11px}
  .bc-list-3col .bc-st{font-size:.58rem;padding:3px 7px;letter-spacing:.4px}
  .bc-list-3col .bc-time{font-size:.78rem}
  .bc-list-3col .bc-time em{font-size:.62rem}
  .bc-list-3col .bc-time-meta{gap:3px;justify-content:flex-end}
  .bc-list-3col .bc-time-tag{font-size:.54rem;padding:2px 5px;letter-spacing:.1px;gap:2px}
  .bc-list-3col .bc-time-tag i{width:9px;height:9px}
}

/* ─── MODERN VIEW ALL BUTTON ─── */
.viewall-btn{
  display:inline-flex;align-items:center;gap:6px;
  margin-left:auto;
  padding:7px 14px;
  background:transparent;
  border:1.5px solid var(--accent);
  border-radius:10px;
  color:var(--accent);
  font-size:.72rem;font-weight:700;
  letter-spacing:.3px;text-transform:uppercase;
  cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  font-family:var(--font);
  white-space:nowrap;
}
.viewall-btn i{width:13px;height:13px;stroke-width:2.5;transition:transform .2s}
.viewall-btn:hover{
  background:var(--accent);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(16,185,129,.3);
}
.viewall-btn:hover i{transform:translate(2px,-2px)}
html.dark .viewall-btn{border-color:#34d399;color:#34d399}
html.dark .viewall-btn:hover{background:#34d399;color:#0a0f0a}

/* ─── CHART PANEL WITH INLINE PERIOD SELECTOR ─── */
.po-trend-top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:14px;flex-wrap:wrap;
}
.po-trend-top .po-trend-h{flex:1;min-width:0}
.po-period-inline{
  margin-bottom:0;
  flex-shrink:0;
}
@media(max-width:640px){
  .po-trend-top{flex-direction:column;align-items:stretch}
  .po-period-inline{width:100%;flex-wrap:nowrap;overflow-x:auto}
  .po-period-inline button{flex-shrink:0;flex:0 0 auto}
}
.mst-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mst{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--bg);border-radius:12px;border:1px solid var(--border);transition:all .15s}
html.dark .mst{background:rgba(255,255,255,.02)}
.mst:hover{background:var(--card-bg);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06);border-color:var(--border-strong)}
.mst-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.mst-ic i{width:16px;height:16px;color:#fff;stroke-width:2.5}
.mc-c1 .mst-ic{background:linear-gradient(135deg,#10b981,#059669)}
.mc-c2 .mst-ic{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.mc-c3 .mst-ic{background:linear-gradient(135deg,#f59e0b,#d97706)}
.mc-c4 .mst-ic{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.mc-s1 .mst-ic{background:linear-gradient(135deg,#06b6d4,#0891b2)}
.mc-s2 .mst-ic{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.mc-s3 .mst-ic{background:linear-gradient(135deg,#10b981,#059669)}
.util-hi .mst-ic{background:linear-gradient(135deg,#10b981,#059669)}
.util-md .mst-ic{background:linear-gradient(135deg,#f59e0b,#d97706)}
.util-lo .mst-ic{background:linear-gradient(135deg,#94a3b8,#64748b)}
.mc-f1 .mst-ic{background:linear-gradient(135deg,#10b981,#059669)}
.mc-f2 .mst-ic{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.mc-f3 .mst-ic{background:linear-gradient(135deg,#f59e0b,#d97706)}
.mc-f4 .mst-ic{background:linear-gradient(135deg,#ef4444,#dc2626)}
.mc-f4.danger{border:1px solid rgba(239,68,68,.3);background:rgba(239,68,68,.05)}
html.dark .mc-f4.danger{background:rgba(239,68,68,.1)}
.mst-l{font-size:.62rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;line-height:1.2}
.mst-v{font-size:1.15rem;font-weight:800;color:var(--text);line-height:1;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.mst-s{font-size:.6rem;color:var(--text3);margin-top:1px;font-weight:500}

/* ─── TOP STAFF (uses dzo classes — same as Top Zones) ─── */
.dts .dzo-fill{background:linear-gradient(90deg,#10b981,#06b6d4)}

/* ─── RECENT BOOKINGS ─── */
.drb-list{display:flex;flex-direction:column;gap:6px}
.drb-row{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:all .15s}
html.dark .drb-row{background:rgba(255,255,255,.02)}
.drb-row:hover{background:var(--card-bg);border-color:var(--accent);transform:translateX(2px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.drb-time{font-size:.74rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;text-align:center;padding:4px 0;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-radius:8px;border:1px solid #bbf7d0}
html.dark .drb-time{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.15));color:#6ee7b7;border-color:rgba(16,185,129,.3)}
.drb-main{flex:1;min-width:0}
.drb-name{font-weight:700;font-size:.84rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.drb-addr{font-size:.7rem;color:var(--text3);display:flex;align-items:center;gap:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drb-addr i{width:11px;height:11px;flex-shrink:0}
.drb-badge{flex-shrink:0}

/* ─── EMPTY STATE (shared) ─── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 20px;text-align:center}
.es-ic{width:56px;height:56px;border-radius:18px;background:var(--bg);color:var(--text3);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.es-ic i{width:28px;height:28px}
html.dark .es-ic{background:rgba(255,255,255,.04)}
.es-t{font-weight:700;color:var(--text);font-size:.94rem}
.es-s{font-size:.78rem;color:var(--text3);max-width:280px;line-height:1.4}
.es-btn{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:8px 16px;background:linear-gradient(135deg,var(--accent),#10b981);color:#fff;border:none;border-radius:10px;font-weight:700;font-size:.78rem;cursor:pointer;transition:all .15s;font-family:var(--font);box-shadow:0 4px 12px rgba(16,185,129,.25)}
.es-btn i{width:14px;height:14px;stroke-width:2.5}
.es-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,185,129,.35)}

/* ─── Smooth count animation (skeleton->data) ─── */
.k-v,.dps-c,.dpp-count,.dstat-v,.mst-v,.dst-v,.dpp-v,.drb-time{animation:count-fade .5s ease-out}
@keyframes count-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ------------------------------------------------------------------------
   PERFORMANCE OVERVIEW � finance-style panel (matches akaun/finance page)
   Owner: Mavis 2026-08-07
   ------------------------------------------------------------------------ */

.po-period{
  display:flex;gap:4px;padding:4px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  margin-bottom:14px;
  width:fit-content;max-width:100%;
  overflow-x:auto;
  scrollbar-width:none;
}
.po-period::-webkit-scrollbar{display:none}
.po-period button{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border:none;background:transparent;
  color:var(--text2);font-weight:600;font-size:.8rem;
  border-radius:10px;cursor:pointer;transition:all .15s;
  font-family:var(--font);white-space:nowrap;
}
.po-period button i{width:14px;height:14px}
.po-period button:hover{background:var(--bg);color:var(--text)}
.po-period button.active{
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;
  box-shadow:0 4px 12px rgba(16,185,129,.3);
}

.po-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin-bottom:14px;
}
@media(min-width:1100px){.po-grid{grid-template-columns:repeat(4,1fr);gap:16px}}

.po-card{
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px 18px 16px;
  overflow:hidden;transition:all .2s;
}
.po-card::before{
  content:"";position:absolute;
  top:0;left:0;right:0;height:4px;
  background:var(--accent-color,var(--accent));
}
.po-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  border-color:var(--border-strong);
}

/* Per-card color variants */
.po-card.c-green::before{background:linear-gradient(90deg,#10b981,#34d399)}
.po-card.c-blue::before{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.po-card.c-amber::before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.po-card.c-purple::before{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.po-card.c-rose::before{background:linear-gradient(90deg,#f43f5e,#fb7185)}

.po-card.c-green .po-ic{background:rgba(16,185,129,.12);color:#10b981}
.po-card.c-blue  .po-ic{background:rgba(59,130,246,.12);color:#3b82f6}
.po-card.c-amber .po-ic{background:rgba(245,158,11,.14);color:#f59e0b}
.po-card.c-purple .po-ic{background:rgba(139,92,246,.14);color:#8b5cf6}
.po-card.c-rose  .po-ic{background:rgba(244,63,94,.12);color:#f43f5e}

.po-head{
  display:flex;align-items:center;gap:12px;
  margin-bottom:14px;
}
.po-ic{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.po-ic i{width:24px;height:24px;stroke-width:2.2}

.po-titles{flex:1;min-width:0}
.po-title{font-size:.92rem;font-weight:700;color:var(--text);line-height:1.2;letter-spacing:-.2px;font-family:var(--font)}
.po-sub{font-size:.7rem;color:var(--text3);margin-top:2px;font-weight:500}

.po-val{
  font-size:1.85rem;font-weight:800;color:var(--text);
  letter-spacing:-.6px;line-height:1.05;
  margin-bottom:12px;
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
}
.po-val .po-curr{font-size:.85rem;font-weight:600;color:var(--text3);letter-spacing:0}
.po-val .po-curr-lg{font-size:1.1rem;font-weight:700;color:var(--text2)}

.po-vals{
  display:flex;flex-direction:column;gap:6px;
  padding-top:10px;
  border-top:1px dashed var(--border);
}
.po-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;gap:8px;
}
.po-row .po-lbl{color:var(--text3);font-weight:500}
.po-row .po-val-row{font-weight:700;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px}
.po-row .po-val-row.green{color:#10b981}
.po-row .po-val-row.blue{color:#3b82f6}
.po-row .po-val-row.muted{color:var(--text3)}

.po-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 9px;border-radius:999px;
  font-size:.7rem;font-weight:700;
  background:rgba(16,185,129,.14);color:#10b981;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
.po-badge.hi{background:#10b981;color:#fff}
.po-badge.warn{background:rgba(245,158,11,.15);color:#b45309}
.po-badge.danger{background:rgba(239,68,68,.14);color:#dc2626}
.po-badge.muted{background:rgba(148,163,184,.18);color:var(--text2)}
.po-badge i{width:11px;height:11px}

/* Trend card under performance overview */
.po-trend{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px 20px;
  margin-bottom:14px;
  position:relative;
}
.po-trend-h{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;flex-wrap:wrap;
}
.po-trend-h h3{
  display:flex;align-items:center;gap:8px;
  font-size:.96rem;font-weight:700;color:var(--text);
  letter-spacing:-.2px;margin:0;font-family:var(--font)
}
.po-trend-h h3 i{width:18px;height:18px;color:var(--accent);stroke-width:2.2}
.po-trend-h .po-trend-meta{
  display:flex;align-items:baseline;gap:10px;padding-left:28px;
}
.po-trend-pri{font-size:1.4rem;font-weight:800;color:var(--text);letter-spacing:-.4px;font-variant-numeric:tabular-nums;font-family:var(--font)}
.po-trend-sub{font-size:.74rem;color:var(--text3);font-weight:600;background:var(--bg);padding:3px 10px;border-radius:12px;border:1px solid var(--border)}
.po-trend-chart{width:100%;height:160px;display:block;position:relative}
.po-trend-chart svg{width:100%;height:100%;display:block}
.po-trend-axis{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  padding:10px 4px 0;border-top:1px dashed var(--border);
  margin-top:8px;
}
.po-trend-tick{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.po-trend-d{font-size:.66rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.3px}
.po-trend-v{font-size:.72rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.po-trend-tick.peak .po-trend-v{color:#dc2626}

/* Section header for "Performance Overview" */
.po-section-h{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  flex-wrap:wrap;
}
.po-section-h h2{
  display:flex;align-items:center;gap:8px;
  font-size:1.18rem;font-weight:800;color:var(--text);
  letter-spacing:-.4px;margin:0;line-height:1.1;
  font-family:var(--font);
}
.po-section-h h2 i{width:22px;height:22px;color:var(--accent);stroke-width:2.2}
.po-section-h .po-section-sub{font-size:.78rem;color:var(--text3);font-weight:500}
.po-section-h .po-live-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;
  background:rgba(16,185,129,.12);color:#059669;
  font-size:.72rem;font-weight:700;
  border:1px solid rgba(16,185,129,.2);
  margin-left:auto;
}
.po-section-h .po-live-pill::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#10b981;display:inline-block;
  animation:pulse-dot 2s infinite;
}

/* Dark-mode polish */
html.dark .po-card{border-color:rgba(255,255,255,.07)}
html.dark .po-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.4)}
html.dark .po-trend{border-color:rgba(255,255,255,.07)}
html.dark .po-period{border-color:rgba(255,255,255,.08)}
html.dark .po-row .po-val-row.muted{color:var(--text3)}

/* Responsive — tighten card padding on small screens, auto-fit handles cols */
@media (max-width:720px){
  .po-card{padding:14px 14px 12px;border-radius:16px}
  .po-val{font-size:1.4rem;margin-bottom:10px}
  .po-ic{width:42px;height:42px;border-radius:12px}
  .po-ic i{width:20px;height:20px}
  .po-head{gap:10px;margin-bottom:10px}
  .po-title{font-size:.82rem}
  .po-sub{font-size:.62rem}
  .po-vals{padding-top:8px;gap:4px}
  .po-row{font-size:.7rem}
  .po-badge{font-size:.62rem;padding:2px 6px}
  .po-period{width:100%}
  .po-period button{flex:1;padding:7px 8px;font-size:.72rem;gap:4px}
  .po-trend-h{flex-direction:column;align-items:flex-start;gap:6px}
  .po-trend-h .po-trend-meta{padding-left:0}
  .po-trend-axis{gap:2px}
  .po-trend-d{font-size:.6rem}
  .po-trend-v{font-size:.66rem}
}

/* Smooth count animation for po-vals */
.po-val,.po-val-row{animation:count-fade .5s ease-out}

/* ------------------------------------------------------------------
/* ------------------------------------------------------------------------
   BOOKING CARD v4 — super modern, professional, single-action
   Owner: Mavis 2026-08-07
   Linear/Stripe-style card: clean 4-zone layout, mono booking ID,
   refined typography, hover-arrow CTA. No inline action buttons.
   ------------------------------------------------------------------------ */

.bc-list{display:flex;flex-direction:column;gap:14px}

.booking-card{
  position:relative;
  display:flex;flex-direction:column;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px 22px 16px;
  overflow:hidden;
  transition:all .28s cubic-bezier(.4,0,.2,1);
  --sc:#10b981;
  --card-pad-x:22px;
  --card-pad-b:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.02),0 4px 14px rgba(0,0,0,.04);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* No ::after overlay — no always-visible status tint. Only border colour changes on hover. */
.booking-card:hover{
  transform:translateY(-2px);
  border-color:var(--sc);
  box-shadow:0 2px 4px rgba(0,0,0,.04),0 16px 36px rgba(0,0,0,.09);
}
.booking-card:active{transform:translateY(0)}

.booking-card.status-pending{--sc:#6b7280}
.booking-card.status-confirmed{--sc:#10b981}
.booking-card.status-completed{--sc:#3b82f6}
.booking-card.status-cancelled{--sc:#ef4444}
.booking-card.status-progress,.booking-card.status-in_progress{--sc:#8b5cf6}
.booking-card.status-new,.booking-card.status-draft{--sc:#64748b}

html.dark .booking-card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
  border-color:rgba(255,255,255,.07);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
}
html.dark .booking-card:hover{
  border-color:color-mix(in srgb,var(--sc) 50%,rgba(255,255,255,.1));
  box-shadow:0 2px 4px rgba(0,0,0,.3),0 16px 36px rgba(0,0,0,.5);
}

/* ─── TOP: time (large) + status pill ─── */
.bc-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:16px;position:relative;z-index:1;
  flex-wrap:nowrap;
}
.bc-time{
  display:flex;align-items:baseline;gap:6px;
  font-size:.85rem;font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--text);letter-spacing:.3px;
  font-family:var(--font);
  line-height:1;
  flex-shrink:0;
  white-space:nowrap;
}
.bc-time em{
  font-style:normal;font-weight:600;color:var(--text3);
  font-size:.72rem;letter-spacing:.2px;
}
.bc-st{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;padding:5px 10px;border-radius:999px;
  color:var(--text2);
  background:var(--bg);
  border:1px solid var(--border);
  font-family:var(--font);
  white-space:nowrap;
  flex-shrink:0;
}
.bc-st::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--sc);
  flex-shrink:0;
}

/* ─── INLINE TIME META (Booked + Job) in top row ─── */
.bc-time-meta{
  display:inline-flex;align-items:center;gap:4px;
  flex:1;min-width:0;
  font-family:var(--font);
  flex-wrap:nowrap;
  justify-content:flex-end;
}
.bc-time-tag{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.58rem;font-weight:600;
  color:var(--text3);
  padding:2px 6px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:5px;
  white-space:nowrap;
  flex-shrink:0;
  letter-spacing:.15px;
}
.bc-time-tag i{width:10px;height:10px;opacity:.7;flex-shrink:0;color:var(--accent)}
.bc-time-tag:first-of-type i{color:#f59e0b}
.bc-time-tag:last-of-type i{color:#3b82f6}
html.dark .bc-time-tag{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
@media(max-width:480px){
  .bc-time{flex-shrink:0}
  .bc-time-tag{font-size:.54rem;padding:2px 5px;letter-spacing:.1px}
  .bc-time-tag i{width:9px;height:9px}
}

/* ─── HERO: name + service ─── */
.bc-name{
  font-size:1.18rem;font-weight:700;color:var(--text);
  line-height:1.2;letter-spacing:-.4px;
  margin-bottom:6px;
  font-family:var(--font);
  word-break:break-word;
}
.bc-svc{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.84rem;font-weight:600;color:var(--text2);
  margin-bottom:0;
  font-family:var(--font);
}
.bc-svc i{
  width:15px;height:15px;color:var(--accent);
  opacity:.85;stroke-width:2.2;flex-shrink:0;
}
.bc-svc-qty{
  color:var(--text3);font-weight:500;
  font-size:.78rem;margin-left:2px;
}

/* ─── INFO ROWS: booking ID, date, address, staff ─── */
.bc-info{
  display:flex;flex-direction:column;
  gap:9px;
  margin-top:16px;padding-top:14px;
  border-top:1px solid var(--border);
  position:relative;z-index:1;
}
.bc-info-row{
  display:flex;align-items:center;gap:10px;
  font-size:.78rem;
  min-width:0;
}
.bc-info-row i{
  width:14px;height:14px;color:var(--text3);
  flex-shrink:0;opacity:.6;stroke-width:2.2;
}
.bc-info-row.id i{color:#8b5cf6;opacity:.85}
.bc-info-row.booked i{color:#f59e0b;opacity:.85}
.bc-info-row.job i{color:#3b82f6;opacity:.85}
.bc-info-row.addr i{color:var(--accent);opacity:.85}
.bc-info-row.staff i{color:#10b981;opacity:.85}
.bc-info-row .label{
  color:var(--text3);font-weight:600;
  font-size:.66rem;text-transform:uppercase;
  letter-spacing:.6px;min-width:54px;
  flex-shrink:0;
}
.bc-info-row .val{
  color:var(--text);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;flex:1;
}
.bc-info-row.id .val{
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  font-size:.74rem;letter-spacing:.1px;
  color:var(--text);font-weight:700;
}
.bc-info-row .pill{
  display:inline-block;padding:2px 7px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent);
  border-radius:5px;
  font-size:.68rem;font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* ─── FOOTER: amount + arrow CTA (no buttons) ─── */
.bc-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--border);
  position:relative;z-index:1;
}
.bc-amt{
  display:inline-flex;align-items:baseline;gap:4px;
  font-size:1.15rem;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;
  font-family:var(--font);
  line-height:1;
}
.bc-amt em{
  font-style:normal;font-size:.7rem;font-weight:600;
  color:var(--text3);margin-right:1px;letter-spacing:.3px;
}
.bc-amt.pending{color:var(--sc)}
.bc-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;
  background:transparent;
  border:1.5px solid var(--border-strong);
  color:var(--text2);
  border-radius:9px;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  font-family:var(--font);
  white-space:nowrap;
  flex-shrink:0;
}
.bc-btn i{width:12px;height:12px;stroke-width:2.5;transition:transform .25s}
.bc-btn:hover{
  background:var(--sc);
  border-color:var(--sc);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px color-mix(in srgb,var(--sc) 35%,transparent);
}
.bc-btn:hover i{transform:translateX(2px)}
.bc-btn:active{transform:translateY(0)}

html.dark .bc-info-row .val{color:rgba(255,255,255,.95)}
html.dark .bc-info-row .label{color:rgba(255,255,255,.55)}

/* ─── Mobile responsive ─── */
@media(max-width:600px){
  .booking-card{padding:14px 14px 12px;border-radius:14px;--card-pad-x:14px;--card-pad-b:12px}
  .bc-name{font-size:1rem}
  .bc-svc{font-size:.76rem;margin-bottom:0}
  .bc-time{font-size:.76rem}
  .bc-time em{font-size:.64rem}
  .bc-info{margin-top:12px;padding-top:10px;gap:6px}
  .bc-info-row{font-size:.72rem;gap:7px}
  .bc-info-row .label{min-width:46px;font-size:.6rem;letter-spacing:.4px}
  .bc-info-row.id .val{font-size:.66rem}
  .bc-info-row i{width:12px;height:12px}
  .bc-foot{margin-top:10px;padding-top:10px;gap:10px}
  .bc-amt{font-size:1rem}
  .bc-btn{padding:7px 11px;font-size:.64rem;letter-spacing:.3px;gap:4px}
  .bc-btn i{width:12px;height:12px}
}
@media(max-width:420px){
  .booking-card{padding:12px 12px 10px;border-radius:12px;--card-pad-x:12px;--card-pad-b:10px}
  .bc-top{margin-bottom:10px;gap:6px}
  .bc-st{font-size:.56rem;padding:3px 7px;letter-spacing:.4px}
  .bc-time{font-size:.72rem}
  .bc-time em{font-size:.6rem}
  .bc-name{font-size:.92rem;margin-bottom:4px}
  .bc-svc{font-size:.72rem}
  .bc-svc i{width:12px;height:12px}
  .bc-info-row{font-size:.68rem;gap:6px}
  .bc-info-row .label{min-width:38px;font-size:.56rem;letter-spacing:.3px}
  .bc-foot{flex-wrap:wrap;gap:8px}
  .bc-amt{flex:1;font-size:.95rem}
  .bc-btn{flex:1;justify-content:center;padding:7px 8px}
}
/* ════════════════════════════════════════════════════════════════════
   BOOKINGS PAGE — Modern filter bar, table, action buttons
   ════════════════════════════════════════════════════════════════════ */

/* ─── Filter bar (sticky) ─── */
.bk-filterbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;margin-bottom:16px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  flex-wrap:wrap;
  position:relative;z-index:3;
  box-shadow:0 1px 2px rgba(0,0,0,.02);
}
html.dark .bk-filterbar{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015))}

.bk-search{
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;
  background:var(--bg);
  border:1px solid var(--border-strong);
  border-radius:10px;
  color:var(--text);
  font-family:var(--font);
  flex:1;min-width:180px;max-width:340px;
  transition:all .15s;
}
.bk-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.bk-search i{width:15px;height:15px;color:var(--text3);flex-shrink:0}
.bk-search input{
  flex:1;border:none;background:transparent;
  outline:none;color:var(--text);
  font-family:var(--font);font-size:.82rem;
  min-width:0;padding:0;
}
.bk-search input::placeholder{color:var(--text3)}

.bk-pills{display:flex;gap:4px;flex-wrap:wrap}
.bk-pill{
  padding:6px 12px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  background:transparent;
  color:var(--text2);
  font-size:.7rem;font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;transition:all .15s;
  font-family:var(--font);
  display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;
}
.bk-pill i{width:12px;height:12px}
.bk-pill:hover{border-color:var(--accent);color:var(--accent)}
.bk-pill.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}
.bk-pill .cnt{
  font-size:.62rem;font-weight:800;
  padding:1px 6px;border-radius:8px;
  background:rgba(0,0,0,.08);
  color:inherit;
}
.bk-pill.active .cnt{background:rgba(255,255,255,.22)}
html.dark .bk-pill .cnt{background:rgba(255,255,255,.1)}

.bk-fmeta{
  display:flex;align-items:center;gap:10px;
  margin-left:auto;
  font-size:.72rem;color:var(--text3);
  flex-wrap:wrap;
}
.bk-fmeta .bk-fm-item{display:inline-flex;align-items:center;gap:4px}
.bk-fmeta b{color:var(--text);font-weight:800}
.bk-fmeta .bk-fm-sep{color:var(--border-strong)}

.bk-confirm-all{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;
  background:transparent;
  color:var(--accent);
  border:1.5px solid var(--accent);
  border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.2px;
  cursor:pointer;
  transition:all .2s;
  font-family:var(--font);
}
.bk-confirm-all:hover{background:color-mix(in srgb,var(--accent) 8%,transparent);box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 25%,transparent)}
.bk-confirm-all:active{transform:scale(.97)}
.bk-confirm-all i{width:13px;height:13px}

@media(max-width:680px){
  /* === Mobile filter bar — simpler, slideable, no overflow === */
  .bk-filterbar{padding:10px 12px;gap:8px;flex-wrap:wrap;border-radius:14px}
  .bk-search{max-width:100%;flex-basis:100%;order:1;padding:9px 12px;min-height:42px}
  .bk-search input{font-size:.92rem}
  /* Status pills — single horizontal scroll row, snap to start */
  .bk-pills{order:2;width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:6px;margin:0 -12px;padding:4px 12px;scrollbar-width:thin}
  .bk-pills::-webkit-scrollbar{height:2px}
  .bk-pills::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:1px}
  .bk-pill{flex-shrink:0;scroll-snap-align:start;padding:7px 12px;font-size:.74rem;min-height:36px;gap:5px}
  .bk-pill .cnt{margin-left:2px;padding:1px 6px}
  .bk-fmeta{order:3;width:100%;justify-content:flex-start;gap:10px;font-size:.7rem;padding-top:2px;flex-wrap:wrap}
  .bk-confirm-all{order:4;width:100%;justify-content:center;min-height:38px;padding:8px 12px;font-size:.78rem;margin-top:2px}
}

/* ─── Desktop table ─── */
.bk-table-wrap{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.02);
}
.bk-table{
  width:100%;border-collapse:collapse;
  font-size:.78rem;
  table-layout:auto;
}
.bk-table thead th{
  text-align:left;
  padding:11px 14px;
  font-size:.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.7px;
  color:var(--text3);
  background:var(--bg);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  font-family:var(--font);
}
.bk-table tbody tr{
  border-bottom:1px solid var(--border);
  transition:background .12s,transform .12s;
  cursor:pointer;
}
.bk-table tbody tr:last-child{border-bottom:none}
.bk-table tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.bk-table tbody tr:active{transform:scale(.998)}
.bk-table td{
  padding:14px;
  vertical-align:middle;
}

.bk-td-no{
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  font-weight:800;color:var(--accent);
  font-size:.74rem;letter-spacing:.1px;
  min-width:90px;
  white-space:nowrap;
}
.bk-td-no small{display:block;font-family:var(--font);font-weight:500;color:var(--text3);font-size:.6rem;margin-top:2px;letter-spacing:0}

.bk-td-cust{display:flex;align-items:center;gap:11px;min-width:200px}
.bk-ava{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent2) 14%,transparent));
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.82rem;flex-shrink:0;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
}
.bk-cust-info{min-width:0;flex:1}
.bk-cust-name{
  font-weight:700;color:var(--text);
  font-size:.86rem;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:2px;
}
.bk-cust-addr{
  font-size:.7rem;color:var(--text3);line-height:1.3;
  max-width:280px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:3px;
}
.bk-cust-addr i{width:11px;height:11px;opacity:.7;flex-shrink:0}
.bk-cust-phone{
  font-size:.66rem;color:var(--accent);
  font-weight:600;
  display:flex;align-items:center;gap:3px;margin-top:2px;
}
.bk-cust-phone i{width:10px;height:10px}

.bk-td-sched{display:flex;flex-direction:column;gap:3px;min-width:130px}
.bk-sched-date{
  font-weight:700;color:var(--text);
  font-size:.84rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.2px;
}
.bk-sched-time{
  font-size:.7rem;color:var(--text2);font-weight:600;
  display:inline-flex;align-items:center;gap:3px;
}
.bk-sched-time i{width:11px;height:11px;color:var(--accent)}
.bk-sched-job{
  font-size:.62rem;color:var(--text3);
  display:inline-flex;align-items:center;gap:3px;
  margin-top:1px;
}
.bk-sched-job i{width:10px;height:10px;color:#3b82f6}

.bk-td-amt{text-align:right;min-width:110px}
.bk-amt-val{
  font-weight:800;color:var(--text);
  font-size:.95rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;
  line-height:1;
}
.bk-amt-val em{font-style:normal;font-size:.66rem;font-weight:600;color:var(--text3);margin-right:1px;letter-spacing:.3px}
.bk-amt-pay{
  display:inline-block;margin-top:4px;
  font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  padding:2px 7px;border-radius:5px;
  font-family:var(--font);
}
.bk-amt-pay.paid{background:rgba(16,185,129,.12);color:#10b981}
.bk-amt-pay.pending{background:rgba(245,158,11,.12);color:#f59e0b}
.bk-amt-pay.refunded{background:rgba(100,116,139,.15);color:#64748b}
html.dark .bk-amt-pay.paid{background:rgba(16,185,129,.18);color:#34d399}
html.dark .bk-amt-pay.pending{background:rgba(245,158,11,.18);color:#fbbf24}

.bk-td-staff{font-size:.78rem;color:var(--text2);min-width:110px}
.bk-staff-name{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;color:var(--text);
  font-size:.76rem;
}
.bk-staff-name i{width:12px;height:12px;color:var(--accent)}
.bk-staff-unassigned{
  color:var(--text3);font-style:italic;font-size:.72rem;
  display:inline-flex;align-items:center;gap:4px;
}
.bk-staff-unassigned i{width:11px;height:11px}

.bk-td-acts{display:flex;gap:5px;justify-content:flex-end;white-space:nowrap}
.bk-act{
  width:32px;height:32px;
  border-radius:9px;
  border:1px solid var(--border-strong);
  background:var(--card-bg);
  color:var(--text2);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);
  font-family:var(--font);
  position:relative;
}
.bk-act i{width:14px;height:14px}
.bk-act:hover{
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-light);
  transform:translateY(-1px);
}
.bk-act.acc:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 30%,transparent)}
.bk-act.don:hover{background:var(--accent2);color:#fff;border-color:var(--accent2);box-shadow:0 4px 10px color-mix(in srgb,var(--accent2) 30%,transparent)}
.bk-act.del:hover{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 4px 10px color-mix(in srgb,var(--danger) 30%,transparent)}
.bk-act.wa:hover{background:#25D366;color:#fff;border-color:#25D366;box-shadow:0 4px 10px rgba(37,211,102,.3)}
.bk-act:active{transform:translateY(0) scale(.96)}

@media(max-width:1180px){
  .bk-table{font-size:.74rem}
  .bk-table td{padding:11px 10px}
  .bk-td-cust{min-width:180px}
  .bk-cust-addr{max-width:180px}
  .bk-td-staff{min-width:auto}
}
@media(max-width:1023px){
  /* On mobile the table is hidden — cards rendered instead. But keep table wrap narrow-friendly. */
  .bk-table-wrap{display:none}
}
@media(min-width:1024px){
  .bk-grid-mobile{display:none}
}

/* ─── Mobile cards (full booking card with all actions) ─── */
.bk-grid-mobile{
  display:grid;grid-template-columns:1fr;gap:12px;
}
@media(min-width:680px){
  .bk-grid-mobile{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* Action grid inside card */
.bk-card-actions{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-top:14px;padding-top:14px;
  border-top:1px solid var(--border);
  position:relative;z-index:1;
}
.bk-card-act{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 6px;
  background:transparent;
  border:1.5px solid var(--border-strong);
  border-radius:9px;
  color:var(--text2);
  font-family:var(--font);
  font-size:.66rem;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
  min-width:0;
}
.bk-card-act i{width:12px;height:12px;stroke-width:2.5}
.bk-card-act:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-light);
  transform:translateY(-1px);
}
.bk-card-act.acc:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 30%,transparent)}
.bk-card-act.don:hover{background:var(--accent2);color:#fff;border-color:var(--accent2);box-shadow:0 4px 10px color-mix(in srgb,var(--accent2) 30%,transparent)}
.bk-card-act.del:hover{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 4px 10px color-mix(in srgb,var(--danger) 30%,transparent)}
.bk-card-act.wa:hover{background:#25D366;color:#fff;border-color:#25D366;box-shadow:0 4px 10px rgba(37,211,102,.3)}
.bk-card-act:active{transform:translateY(0) scale(.97)}
@media(max-width:380px){
  .bk-card-act{font-size:.6rem;padding:8px 4px;letter-spacing:.2px}
  .bk-card-act span.bk-act-lbl{display:none}
}

/* Card extras: phone, payment status row */
.bk-card-phone{
  font-size:.7rem;color:var(--accent);font-weight:600;
  display:inline-flex;align-items:center;gap:4px;
  margin-top:2px;
}
.bk-card-phone i{width:11px;height:11px}
.bk-card-pay-row{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:4px;
}
.bk-card-pay-row .bk-amt-pay{margin-top:0}

/* When embedded in bk-card-actions, the bc-foot is too crowded. Slim it. */
.bk-grid-mobile .bc-foot{padding-top:10px;margin-top:10px}

/* Empty state refinement */
.bk-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:60px 20px;text-align:center;
  background:var(--card-bg);
  border:1px dashed var(--border-strong);
  border-radius:16px;
  color:var(--text2);
}
.bk-empty-ic{
  width:64px;height:64px;border-radius:18px;
  background:linear-gradient(135deg,var(--accent-light),color-mix(in srgb,var(--accent2) 12%,transparent));
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.bk-empty-ic i{width:30px;height:30px}
.bk-empty h2{font-size:1.05rem;font-weight:800;margin:0;color:var(--text);letter-spacing:-.3px}
.bk-empty p{font-size:.82rem;color:var(--text3);margin:0;max-width:340px;line-height:1.5}
.bk-empty .bk-empty-cta{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:6px;padding:8px 16px;
  background:var(--accent);color:#fff;
  border:none;border-radius:10px;
  font-size:.78rem;font-weight:700;
  cursor:pointer;transition:all .15s;
  font-family:var(--font);
}
.bk-empty .bk-empty-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-glow)}
.bk-empty .bk-empty-cta i{width:14px;height:14px}

/* Compact filter bar for mobile (chip overflow) */
.bk-pills::-webkit-scrollbar{height:3px}
.bk-pills::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}

/* Table responsive — horizontally scrollable when too narrow */
@media(max-width:1180px) and (min-width:1024px){
  .bk-table-wrap{overflow-x:auto}
  .bk-table{min-width:980px}
}
/* ════════════════════════════════════════════════════════════════════
   BOOKINGS PAGE — Mobile card (.bk-card) — fuller version
   ════════════════════════════════════════════════════════════════════ */

.bk-card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 16px 12px;
  overflow:hidden;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  --sc:#10b981;
  box-shadow:0 1px 2px rgba(0,0,0,.02),0 4px 12px rgba(0,0,0,.03);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.bk-card:hover{
  transform:translateY(-2px);
  border-color:var(--sc);
  box-shadow:0 2px 4px rgba(0,0,0,.04),0 12px 28px rgba(0,0,0,.08);
}
html.dark .bk-card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
  border-color:rgba(255,255,255,.07);
}

.bk-card.status-pending{--sc:#f59e0b}
.bk-card.status-confirmed{--sc:#10b981}
.bk-card.status-completed{--sc:#3b82f6}
.bk-card.status-cancelled{--sc:#ef4444}
.bk-card.status-progress,.bk-card.status-in_progress{--sc:#8b5cf6}
.bk-card.status-new,.bk-card.status-draft{--sc:#64748b}

/* Card top: time + status */
.bk-card-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:12px;
  flex-wrap:nowrap;
}
.bk-card-time{
  display:flex;align-items:baseline;gap:6px;
  font-size:.95rem;font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--text);letter-spacing:.2px;
  font-family:var(--font);
  line-height:1;
  flex-shrink:0;
  white-space:nowrap;
}
.bk-card-time em{font-style:normal;font-size:.7rem;font-weight:600;color:var(--text3);letter-spacing:.2px}
.bk-card-date{
  font-size:.66rem;color:var(--text2);
  font-weight:600;
  flex:1;min-width:0;
  text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-card-date i{width:11px;height:11px;color:var(--accent);vertical-align:-2px;margin-right:2px}
.bk-card-st{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.6rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;padding:4px 9px;border-radius:999px;
  color:var(--sc);
  background:color-mix(in srgb,var(--sc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--sc) 28%,transparent);
  font-family:var(--font);
  white-space:nowrap;
  flex-shrink:0;
}
.bk-card-st::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--sc);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--sc) 20%,transparent);
}

/* Card main: customer row */
.bk-card-cust{
  display:flex;align-items:center;gap:11px;
  margin-bottom:10px;
}
.bk-card-ava{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent2) 14%,transparent));
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.82rem;flex-shrink:0;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
}
.bk-card-cust-info{min-width:0;flex:1}
.bk-card-name{
  font-size:1.02rem;font-weight:700;color:var(--text);
  line-height:1.2;letter-spacing:-.3px;
  margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-card-svc{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.74rem;font-weight:600;color:var(--text2);
  font-family:var(--font);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-card-svc i{width:12px;height:12px;color:var(--accent);opacity:.85;stroke-width:2.2;flex-shrink:0}
.bk-card-svc-qty{color:var(--text3);font-weight:500;font-size:.7rem;margin-left:2px}

/* Card info grid */
.bk-card-info{
  display:flex;flex-direction:column;gap:7px;
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border);
  font-size:.76rem;
}
.bk-card-info-row{
  display:flex;align-items:center;gap:8px;
  min-width:0;
}
.bk-card-info-row i{width:12px;height:12px;color:var(--text3);flex-shrink:0;opacity:.7;stroke-width:2.2}
.bk-card-info-row .label{
  color:var(--text3);font-weight:600;
  font-size:.6rem;text-transform:uppercase;
  letter-spacing:.4px;min-width:48px;
  flex-shrink:0;
}
.bk-card-info-row .val{
  color:var(--text);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;flex:1;
}
.bk-card-info-row.id .val{
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  font-size:.7rem;letter-spacing:.1px;
  color:var(--accent);font-weight:700;
}
.bk-card-info-row.addr i{color:#f43f5e;opacity:.85}
.bk-card-info-row.phone i{color:var(--accent);opacity:.85}
.bk-card-info-row.staff i{color:#10b981;opacity:.85}
.bk-card-info-row.job i{color:#3b82f6;opacity:.85}
.bk-card-info-row.booked i{color:#f59e0b;opacity:.85}

/* Card footer: amount + view */
.bk-card-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border);
  gap:8px;
}
.bk-card-amt{
  display:flex;flex-direction:column;gap:3px;
  flex:1;min-width:0;
}
.bk-card-amt-val{
  display:inline-flex;align-items:baseline;gap:3px;
  font-size:1.1rem;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;
  line-height:1;
}
.bk-card-amt-val em{font-style:normal;font-size:.7rem;font-weight:600;color:var(--text3);margin-right:1px;letter-spacing:.3px}
.bk-card-view{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;
  background:transparent;
  border:1.5px solid var(--border-strong);
  border-radius:9px;
  color:var(--text2);
  font-size:.66rem;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;
  cursor:pointer;transition:all .2s;
  font-family:var(--font);
  white-space:nowrap;flex-shrink:0;
}
.bk-card-view i{width:12px;height:12px;stroke-width:2.5;transition:transform .25s}
.bk-card-view:hover{
  background:var(--sc);
  border-color:var(--sc);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px color-mix(in srgb,var(--sc) 30%,transparent);
}
.bk-card-view:hover i{transform:translateX(2px)}
.bk-card-view:active{transform:translateY(0) scale(.97)}

/* Action grid (3-col on card) */
.bk-card-actions{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--border);
}
.bk-card-action{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:9px 6px;
  background:transparent;
  border:1.5px solid var(--border-strong);
  border-radius:9px;
  color:var(--text2);
  font-family:var(--font);
  font-size:.66rem;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
  min-width:0;
}
.bk-card-action i{width:12px;height:12px;stroke-width:2.5;flex-shrink:0}
.bk-card-action:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-light);
  transform:translateY(-1px);
}
.bk-card-action.acc:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 30%,transparent)}
.bk-card-action.don:hover{background:var(--accent2);color:#fff;border-color:var(--accent2);box-shadow:0 4px 10px color-mix(in srgb,var(--accent2) 30%,transparent)}
.bk-card-action.del:hover{background:var(--danger);color:#fff;border-color:var(--danger);box-shadow:0 4px 10px color-mix(in srgb,var(--danger) 30%,transparent)}
.bk-card-action.wa:hover{background:#25D366;color:#fff;border-color:#25D366;box-shadow:0 4px 10px rgba(37,211,102,.3)}
.bk-card-action:active{transform:translateY(0) scale(.97)}

@media(max-width:380px){
  .bk-card{padding:14px 14px 10px;border-radius:14px}
  .bk-card-name{font-size:.94rem}
  .bk-card-time{font-size:.86rem}
  .bk-card-st{font-size:.56rem;padding:3px 7px;letter-spacing:.4px}
  .bk-card-info-row{font-size:.7rem;gap:6px}
  .bk-card-info-row .label{min-width:42px;font-size:.56rem;letter-spacing:.3px}
  .bk-card-action{font-size:.6rem;padding:8px 4px;letter-spacing:.2px}
}

/* Compact 2-col layout on mid-size screens (between mobile & desktop) */
@media(min-width:680px) and (max-width:1023px){
  .bk-card-time{font-size:.9rem}
  .bk-card-name{font-size:1rem}
}
/* ════════════════════════════════════════════════════════════════════
   BOOKINGS PAGE v3 — KPI strip + Date filter + Data-rich cards/table
   ════════════════════════════════════════════════════════════════════ */

/* ─── KPI strip (4 cards) ─── */
.bk-kpi-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:18px;
}
.bk-kpi{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  transition:all .2s;
  box-shadow:0 1px 2px rgba(0,0,0,.02);
}
.bk-kpi:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.bk-kpi::before{
  content:"";position:absolute;
  top:0;left:0;right:0;height:3px;
  background:var(--kc,var(--accent));
}
html.dark .bk-kpi{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012))}
.bk-kpi.c-blue{--kc:#3b82f6}
.bk-kpi.c-amber{--kc:#f59e0b}
.bk-kpi.c-green{--kc:#10b981}
.bk-kpi.c-purple{--kc:#8b5cf6}
.bk-kpi.c-rose{--kc:#f43f5e}
.bk-kpi-ic{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  background:color-mix(in srgb,var(--kc) 14%,transparent);
  color:var(--kc);
}
.bk-kpi-ic i{width:20px;height:20px;stroke-width:2.2}
.bk-kpi-body{flex:1;min-width:0}
.bk-kpi-l{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);margin-bottom:2px}
.bk-kpi-v{font-size:1.35rem;font-weight:800;color:var(--text);letter-spacing:-.5px;line-height:1.1;font-variant-numeric:tabular-nums}
.bk-kpi-s{font-size:.66rem;color:var(--text3);margin-top:2px;font-weight:600}
.bk-kpi-trend{
  position:absolute;top:14px;right:14px;
  font-size:.6rem;font-weight:800;
  padding:2px 7px;border-radius:6px;
  background:color-mix(in srgb,var(--kc) 12%,transparent);
  color:var(--kc);
  display:inline-flex;align-items:center;gap:2px;
}
.bk-kpi-trend i{width:9px;height:9px}
.bk-kpi-trend.down{background:rgba(239,68,68,.12);color:#ef4444}
html.dark .bk-kpi-trend.down{background:rgba(239,68,68,.18);color:#f87171}

@media(max-width:820px){
  .bk-kpi-strip{grid-template-columns:repeat(2,1fr);gap:10px}
  .bk-kpi{padding:13px 14px;gap:11px}
  .bk-kpi-ic{width:36px;height:36px;border-radius:10px}
  .bk-kpi-ic i{width:17px;height:17px}
  .bk-kpi-v{font-size:1.1rem}
}

/* ─── Date filter section ─── */
.bk-period{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:14px;
  box-shadow:0 1px 2px rgba(0,0,0,.02);
  position:relative;z-index:2;
}
html.dark .bk-period{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015))}
.bk-period-h{
  display:flex;align-items:center;gap:8px;
  font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text3);
  margin-bottom:10px;
}
.bk-period-h i{width:14px;height:14px;color:var(--accent)}
.bk-period-h .bk-period-title{flex:1}

.bk-period-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:8px;
}
.bk-period-row:last-child{margin-bottom:0}
.bk-period-lbl{
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--text3);
  display:inline-flex;align-items:center;gap:5px;
  min-width:80px;
}
.bk-period-lbl i{width:13px;height:13px}

.bk-period-pills{display:flex;gap:5px;flex-wrap:wrap;flex:1}
.bk-pp{
  padding:6px 12px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  background:transparent;
  color:var(--text2);
  font-size:.7rem;font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;transition:all .15s;
  font-family:var(--font);
  display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;
}
.bk-pp i{width:11px;height:11px}
.bk-pp:hover{border-color:var(--accent);color:var(--accent)}
.bk-pp.active{background:transparent;color:var(--accent);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

.bk-date-inp{
  position:relative;display:inline-flex;align-items:center;
  padding:6px 10px;
  background:var(--bg);
  border:1px solid var(--border-strong);
  border-radius:9px;
  font-family:var(--font);
  font-size:.76rem;font-weight:600;color:var(--text);
  transition:all .15s;
}
.bk-date-inp:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.bk-date-inp i{width:13px;height:13px;color:var(--text3);margin-right:6px}
.bk-date-inp input{
  border:none;background:transparent;outline:none;
  font-family:var(--font);font-size:.76rem;font-weight:600;color:var(--text);
  padding:0;min-width:120px;
  color-scheme:light dark;
}
.bk-date-inp input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.6;filter:invert(.4)}

.bk-sel{
  position:relative;display:inline-flex;align-items:center;
  padding:6px 10px 6px 28px;
  background:var(--bg);
  border:1px solid var(--border-strong);
  border-radius:9px;
  font-family:var(--font);
  font-size:.76rem;font-weight:600;color:var(--text);
  cursor:pointer;
  transition:all .15s;
}
.bk-sel:focus-within,.bk-sel:hover{border-color:var(--accent)}
.bk-sel i{
  position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:13px;height:13px;color:var(--text3);pointer-events:none;
}
.bk-sel select{
  border:none;background:transparent;outline:none;
  font-family:var(--font);font-size:.76rem;font-weight:600;color:var(--text);
  padding:0 18px 0 0;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2364748b' stroke-width='1.5' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right center;
  cursor:pointer;
}
.bk-sel select option{background:var(--card-bg);color:var(--text)}

.bk-period-reset{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;
  background:transparent;
  border:1px solid var(--border-strong);
  border-radius:8px;
  color:var(--text3);
  font-size:.66rem;font-weight:700;letter-spacing:.2px;
  text-transform:uppercase;
  cursor:pointer;transition:all .15s;
  font-family:var(--font);
}
.bk-period-reset:hover{border-color:var(--danger);color:var(--danger)}
.bk-period-reset i{width:11px;height:11px}

@media(max-width:680px){
  .bk-period{padding:12px}
  .bk-period-row{flex-direction:column;align-items:flex-start;gap:6px}
  .bk-period-lbl{min-width:auto}
  .bk-date-inp input{min-width:100px}
}

/* ─── Enhanced customer type badge (New/Repeat) ─── */
.bk-type{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  padding:2px 6px;border-radius:4px;
  margin-left:6px;
  vertical-align:1px;
}
.bk-type.new{background:color-mix(in srgb,#3b82f6 12%,transparent);color:#3b82f6;border:1px solid color-mix(in srgb,#3b82f6 25%,transparent)}
.bk-type.repeat{background:color-mix(in srgb,#8b5cf6 12%,transparent);color:#8b5cf6;border:1px solid color-mix(in srgb,#8b5cf6 25%,transparent)}
.bk-type.vip{background:color-mix(in srgb,#f59e0b 12%,transparent);color:#f59e0b;border:1px solid color-mix(in srgb,#f59e0b 25%,transparent)}

/* ─── Age / days-to-job badges ─── */
.bk-age{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.6rem;font-weight:600;
  color:var(--text3);
}
.bk-age i{width:10px;height:10px;opacity:.7}
.bk-age.fresh{color:#10b981}
.bk-age.warn{color:#f59e0b}
.bk-age.overdue{color:#ef4444;font-weight:700}

.bk-job-rel{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.6rem;font-weight:700;
  padding:1px 6px;border-radius:4px;
}
.bk-job-rel i{width:10px;height:10px}
.bk-job-rel.today{background:rgba(16,185,129,.12);color:#10b981}
.bk-job-rel.tomorrow{background:rgba(59,130,246,.12);color:#3b82f6}
.bk-job-rel.future{background:var(--bg);color:var(--text2);border:1px solid var(--border)}
.bk-job-rel.overdue{background:rgba(239,68,68,.12);color:#ef4444}
.bk-job-rel.past{background:var(--bg);color:var(--text3);border:1px solid var(--border)}

/* ─── Modern table enhancements ─── */
.bk-td-job{
  font-size:.62rem;
  display:flex;align-items:center;gap:4px;
  margin-top:2px;
}

/* Customer name + type */
.bk-cust-name-row{
  display:flex;align-items:center;gap:0;min-width:0;
  margin-bottom:2px;
}
.bk-cust-name-row .bk-cust-name{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:0;flex:1;min-width:0;
}

/* Status badge in table (reuse .bk-card-st style but compact) */
.bk-table .bk-card-st{font-size:.58rem;padding:3px 8px}

/* Service icon + name in table */
.bk-svc-row{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.7rem;font-weight:600;color:var(--text2);
}
.bk-svc-row i{width:11px;height:11px;color:var(--accent);opacity:.85}

/* ─── Mobile card: extra data-rich rows ─── */
.bk-card-meta{
  display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;
  margin-top:6px;
}
.bk-card-meta > *{display:inline-flex;align-items:center}

.bk-card-grid2{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border);
}
.bk-card-grid2-cell{
  display:flex;flex-direction:column;gap:2px;
  min-width:0;
}
.bk-card-grid2-l{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text3)}
.bk-card-grid2-v{font-size:.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:380px){
  .bk-card-grid2{grid-template-columns:1fr;gap:6px}
}

/* ─── Modern empty state ─── */
.bk-empty-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:60px 24px;text-align:center;
  background:var(--card-bg);
  border:1px dashed var(--border-strong);
  border-radius:18px;
  color:var(--text2);
}
.bk-empty-card .bk-empty-ic{
  width:80px;height:80px;border-radius:22px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent2) 12%,transparent));
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 18%,transparent);
}
.bk-empty-card .bk-empty-ic i{width:36px;height:36px;stroke-width:1.8}
.bk-empty-card h2{font-size:1.1rem;font-weight:800;margin:0;color:var(--text);letter-spacing:-.4px}
.bk-empty-card p{font-size:.84rem;color:var(--text3);margin:0;max-width:380px;line-height:1.55}
.bk-empty-card .bk-empty-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.bk-empty-card .bk-empty-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;
  background:var(--accent);color:#fff;
  border:none;border-radius:10px;
  font-size:.78rem;font-weight:700;
  cursor:pointer;transition:all .15s;
  font-family:var(--font);
  box-shadow:0 4px 12px var(--accent-glow);
}
.bk-empty-card .bk-empty-cta:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--accent-glow)}
.bk-empty-card .bk-empty-cta.secondary{background:transparent;color:var(--text2);border:1.5px solid var(--border-strong);box-shadow:none}
.bk-empty-card .bk-empty-cta.secondary:hover{border-color:var(--accent);color:var(--accent);box-shadow:none}
.bk-empty-card .bk-empty-cta i{width:14px;height:14px}

/* ─── Period info bar (shows current filter context) ─── */
.bk-period-info{
  display:flex;align-items:center;gap:8px;
  font-size:.7rem;font-weight:600;
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:8px;
  padding:4px 10px;
  margin-left:auto;
}
.bk-period-info i{width:12px;height:12px}
/* ════════════════════════════════════════════════════════════════════
   MOBILE-NATIVE period filter (bottom sheet + native date picker)
   ════════════════════════════════════════════════════════════════════ */

.bk-mobile-filters-trigger{
  display:none; /* hidden on desktop */
  align-items:center;justify-content:center;gap:6px;
  padding:10px 14px;
  background:var(--card-bg);
  border:1px solid var(--border-strong);
  border-radius:12px;
  color:var(--text2);
  font-family:var(--font);
  font-size:.74rem;font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  transition:all .15s;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
  width:100%;
  margin-top:8px;
}
.bk-mobile-filters-trigger:hover{border-color:var(--accent);color:var(--accent)}
.bk-mobile-filters-trigger.has-filter{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  color:var(--accent);
}
.bk-mobile-filters-trigger i{width:14px;height:14px}
.bk-mobile-filters-trigger .bf-badge{
  background:var(--accent);
  color:#fff;
  font-size:.6rem;font-weight:800;
  padding:1px 6px;
  border-radius:8px;
  margin-left:4px;
}

/* On mobile: show trigger, hide the inline filter row */
@media(max-width:1023px){
  .bk-mobile-filters-trigger{display:inline-flex'}
  .bk-period-row.mobile-hide{display:none}
  /* === Period (mobile/tablet) — simple, single card, slideable chips === */
  .bk-period{padding:12px 14px;border-radius:14px;margin-bottom:10px}
  .bk-period-h{margin-bottom:10px;font-size:.7rem}
  .bk-period-info{display:none}
  /* Quick chips — single horizontal scroll with snap, NO label hiding (keep readable) */
  .bk-pp{padding:8px 14px;font-size:.76rem;min-height:38px;gap:6px;flex-shrink:0;scroll-snap-align:start}
  .bk-period-pills{padding:0 2px 4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .bk-period-pills::-webkit-scrollbar{height:2px}
  .bk-period-pills::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:1px}
  .bk-period-row{display:flex;align-items:center;gap:6px;margin-bottom:8px}
  .bk-period-row:last-child{margin-bottom:0}
  .bk-period-lbl{display:none}
  /* Custom range trigger — full-width, outlined style */
  .bk-mobile-filters-trigger{width:100%;justify-content:center;padding:10px 14px;font-size:.78rem;min-height:40px;margin-top:8px;gap:6px;font-weight:700}
}
@media(max-width:519px){
  /* Pills keep labels — only shrink padding slightly on smallest screens */
  .bk-pill{padding:6px 10px;font-size:.7rem;min-height:34px}
  .bk-pp{padding:7px 12px;font-size:.72rem;min-height:34px}
}

/* Bottom sheet overlay */
.bk-bs-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;
  transition:opacity .25s, visibility .25s;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.bk-bs-overlay.show{opacity:1;visibility:visible}
html.dark .bk-bs-overlay{background:rgba(0,0,0,.7)}

.bk-bs{
  position:fixed;left:0;right:0;bottom:0;z-index:10000;
  background:var(--card-bg);
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 32px rgba(0,0,0,.18);
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  max-height:85vh;
  display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0);
  -webkit-overflow-scrolling:touch;
}
html.dark .bk-bs{background:linear-gradient(180deg,rgba(30,30,32,.98),rgba(20,20,22,.98))}
.bk-bs.show{transform:translateY(0)}
.bk-bs-handle{
  width:36px;height:4px;
  background:var(--border-strong);
  border-radius:2px;
  margin:10px auto 4px;
  flex-shrink:0;
}
.bk-bs-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 20px 14px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.bk-bs-title{
  font-size:1.05rem;font-weight:800;color:var(--text);
  letter-spacing:-.3px;
  display:inline-flex;align-items:center;gap:8px;
}
.bk-bs-title i{width:18px;height:18px;color:var(--accent)}
.bk-bs-close{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text2);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;
  font-family:var(--font);
}
.bk-bs-close:hover{background:var(--accent-light);color:var(--accent);border-color:var(--accent)}
.bk-bs-close i{width:16px;height:16px}
.bk-bs-body{
  flex:1;overflow-y:auto;
  padding:16px 20px;
  -webkit-overflow-scrolling:touch;
}
.bk-bs-section{
  margin-bottom:18px;
}
.bk-bs-section:last-child{margin-bottom:0}
.bk-bs-section-h{
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text3);
  margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
.bk-bs-section-h i{width:13px;height:13px}
.bk-bs-row{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
}
.bk-bs-date{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:6px;
  padding:12px 12px;
  background:var(--card-bg);
  border:1px solid var(--border-strong);
  border-radius:11px;
  font-family:var(--font);
  font-size:.86rem;font-weight:700;color:var(--text);
  transition:all .15s;
  min-height:46px;
}
.bk-bs-date:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.bk-bs-date i{width:15px;height:15px;color:var(--text3)}
.bk-bs-date input{
  flex:1;border:none;background:transparent;outline:none;
  font-family:var(--font);font-size:.86rem;font-weight:600;color:var(--text);
  padding:0;min-width:0;
  color-scheme:light dark;
}
.bk-bs-date input::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.7;
  width:18px;height:18px;
  filter:invert(.4);
}
.bk-bs-date-lbl{
  position:absolute;top:-7px;left:10px;
  background:var(--card-bg);
  padding:0 6px;
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--text3);
}
.bk-bs-date-wrap{position:relative;flex:1;min-width:0}
.bk-bs-arrow{
  color:var(--text3);font-size:.86rem;flex-shrink:0;
}
.bk-bs-sel{
  width:100%;
  display:flex;align-items:center;
  padding:12px 12px;
  background:var(--card-bg);
  border:1px solid var(--border-strong);
  border-radius:11px;
  font-family:var(--font);
  font-size:.86rem;font-weight:700;color:var(--text);
  cursor:pointer;
  transition:all .15s;
  min-height:46px;
  position:relative;
}
.bk-bs-sel:focus-within,.bk-bs-sel:hover{border-color:var(--accent)}
.bk-bs-sel select{
  flex:1;border:none;background:transparent;outline:none;
  font-family:var(--font);font-size:.86rem;font-weight:600;color:var(--text);
  padding:0 22px 0 0;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2364748b' stroke-width='1.5' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 4px center;
  cursor:pointer;
}
.bk-bs-sel select option{background:var(--card-bg);color:var(--text)}
.bk-bs-foot{
  display:flex;gap:8px;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom,0));
  border-top:1px solid var(--border);
  background:var(--card-bg);
  flex-shrink:0;
}
.bk-bs-btn{
  flex:1;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:13px 16px;
  border-radius:12px;
  font-family:var(--font);
  font-size:.84rem;font-weight:700;letter-spacing:.2px;
  cursor:pointer;
  transition:all .15s;
  border:none;
  min-height:48px;
  -webkit-tap-highlight-color:transparent;
}
.bk-bs-btn i{width:15px;height:15px}
.bk-bs-btn.primary{background:var(--accent);color:#fff;box-shadow:0 4px 12px var(--accent-glow)}
.bk-bs-btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px var(--accent-glow)}
.bk-bs-btn.primary:active{transform:translateY(0)}
.bk-bs-btn.secondary{background:transparent;color:var(--text2);border:1.5px solid var(--border-strong)}
.bk-bs-btn.secondary:hover{border-color:var(--danger);color:var(--danger)}
.bk-bs-btn.ghost{background:transparent;color:var(--text3);border:1.5px solid var(--border)}
.bk-bs-btn.ghost:hover{border-color:var(--text2);color:var(--text2)}

@media(min-width:1024px){
  .bk-bs-overlay,.bk-bs{display:none}
}

/* Active filter chip on the bottom sheet trigger */
.bk-active-chip{
  display:none; /* shown only when filters active */
  align-items:center;gap:4px;
  margin-top:6px;
  padding:4px 8px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:6px;
  font-size:.6rem;font-weight:700;
  color:var(--accent);
  letter-spacing:.2px;
  width:fit-content;
}
.bk-active-chip.show{display:inline-flex'}
.bk-active-chip i{width:10px;height:10px}
/* ════════════════════════════════════════════════════════════════════
   STAFF PANEL & TOP STAFF LIST — modern redesign
   ════════════════════════════════════════════════════════════════════ */

/* ─── 3-col bento grid for mini panels (Customers/Staff/Kewangan) ─── */
.bento-3col{
  display:grid;grid-template-columns:1fr;gap:14px;
  margin-bottom:14px;
}
@media(min-width:720px){
  .bento-3col{grid-template-columns:repeat(3,1fr);gap:14px}
}

/* ─── Top Staff list — modern card design with avatars ─── */
.tsl-list{
  display:grid;grid-template-columns:1fr;gap:10px;
}
@media(min-width:720px){
  .tsl-list{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media(min-width:1180px){
  .tsl-list{grid-template-columns:repeat(5,1fr);gap:10px}
}

.tsl-card{
  display:flex;flex-direction:column;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  transition:all .2s;
  position:relative;
  overflow:hidden;
}
.tsl-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 4px 16px color-mix(in srgb,var(--accent) 12%,transparent);
}
html.dark .tsl-card{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
}
.tsl-card::before{
  content:"";position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 50%,#000));
}
.tsl-card.rank-1::before{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.tsl-card.rank-2::before{background:linear-gradient(90deg,#94a3b8,#64748b)}
.tsl-card.rank-3::before{background:linear-gradient(90deg,#d97706,#92400e)}

.tsl-head{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;
}
.tsl-rank{
  width:24px;height:24px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:800;
  background:var(--bg);
  color:var(--text3);
  border:1px solid var(--border);
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.tsl-rank.gold{background:rgba(251,191,36,.15);color:#b45309;border-color:rgba(251,191,36,.4)}
.tsl-rank.silver{background:rgba(148,163,184,.15);color:#475569;border-color:rgba(148,163,184,.4)}
.tsl-rank.bronze{background:rgba(217,119,6,.15);color:#92400e;border-color:rgba(217,119,6,.4)}
html.dark .tsl-rank.gold{background:rgba(251,191,36,.2);color:#fbbf24}
html.dark .tsl-rank.silver{background:rgba(148,163,184,.2);color:#cbd5e1}
html.dark .tsl-rank.bronze{background:rgba(217,119,6,.2);color:#fbbf24}

.tsl-ava{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.78rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent2) 14%,transparent));
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.tsl-info{flex:1;min-width:0}
.tsl-name{
  font-size:.84rem;font-weight:700;color:var(--text);
  line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:1px;
}
.tsl-id{
  font-size:.6rem;color:var(--text3);
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  letter-spacing:.1px;
}

.tsl-stats{
  display:flex;align-items:baseline;gap:6px;
  margin-top:2px;
}
.tsl-jobs{
  font-size:1.1rem;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.4px;
  line-height:1;
}
.tsl-jobs-lbl{
  font-size:.62rem;font-weight:600;
  color:var(--text3);
  text-transform:uppercase;letter-spacing:.4px;
}

.tsl-bar{
  height:5px;border-radius:3px;
  background:var(--bg);
  overflow:hidden;
  margin-top:8px;
  position:relative;
}
.tsl-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:3px;
  transition:width .5s ease;
}
.tsl-bar-fill.gold{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.tsl-bar-fill.silver{background:linear-gradient(90deg,#94a3b8,#64748b)}
.tsl-bar-fill.bronze{background:linear-gradient(90deg,#d97706,#92400e)}

.tsl-empty{
  display:flex;flex-direction:column;align-items:center;
  padding:32px 16px;gap:8px;
  color:var(--text3);
  font-size:.82rem;
}
.tsl-empty i{width:32px;height:32px;opacity:.5}

/* Panel-level tweaks */
.dts .panel-h .sec-count{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  color:#92400e;
  padding:4px 10px;border-radius:20px;
  font-size:.68rem;font-weight:700;
  border:1px solid #fcd34d;
}
html.dark .dts .panel-h .sec-count{
  background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(217,119,6,.12));
  color:#fbbf24;border-color:rgba(251,191,36,.3);
}
/* ════════════════════════════════════════════════════════════════════
   RECENT BOOKINGS card v6 — restructured content (dashboard panel)
   KEEPS the original v5 visual design; only content + small additions
   for avatar and action grid.
   ════════════════════════════════════════════════════════════════════ */

/* Top row: booking no (left) + status pill (right) */
.bc-no{
  font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  font-weight:800;
  font-size:.78rem;
  color:var(--accent);
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
}

/* Customer row: avatar + (name + service) */
.bc-cust{
  display:flex;align-items:flex-start;gap:12px;
  margin-top:4px;margin-bottom:14px;
  position:relative;z-index:1;
}
.bc-ava{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent2) 14%,transparent));
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.78rem;
  flex-shrink:0;
  border:1.5px solid color-mix(in srgb,var(--accent) 22%,transparent);
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}
.bc-cust-body{flex:1;min-width:0}
.bc-cust-body .bc-name{margin-bottom:2px}

/* Info row separator (between date and time) */
.bc-info-sep{
  display:inline-block;
  font-style:normal;
  color:var(--border-strong);
  margin:0 4px;
  font-weight:600;
  opacity:.7;
}

/* Action grid: 3-col, mirrors bk-card-action style */
.bc-actgrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border);
  position:relative;z-index:1;
}
.bc-actbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:8px 4px;
  background:transparent;
  border:1.5px solid var(--border-strong);
  border-radius:8px;
  color:var(--text2);
  font-family:var(--font);
  font-size:.66rem;font-weight:700;letter-spacing:.3px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
  min-width:0;
}
.bc-actbtn i{width:12px;height:12px;stroke-width:2.5;flex-shrink:0}
.bc-actbtn:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-light);
  transform:translateY(-1px);
}
.bc-actbtn.acc:hover{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 30%,transparent);
}
.bc-actbtn.wa:hover{
  background:#25D366;color:#fff;border-color:#25D366;
  box-shadow:0 4px 10px rgba(37,211,102,.3);
}
.bc-actbtn:active{transform:translateY(0) scale(.97)}

/* Ensure bc-foot / bc-info padding works with new structure */
.bc-list-3col .booking-card .bc-info-row .val{font-weight:600}
.bc-list-3col .bc-cust{margin-bottom:10px}
.bc-list-3col .bc-actgrid{margin-top:8px;padding-top:8px}
.bc-list-3col .bc-actbtn{font-size:.6rem;padding:7px 3px;letter-spacing:.2px}

@media(max-width:380px){
  .bc-ava{width:36px;height:36px;font-size:.72rem}
  .bc-actbtn{font-size:.6rem;padding:7px 2px;letter-spacing:.1px;gap:3px}
  .bc-actbtn i{width:11px;height:11px}
}
/* ════════════════════════════════════════════════════════════════════
   Card v6 refinements — booking no same font as name (smaller), btn-act, unassigned
   ════════════════════════════════════════════════════════════════════ */

/* Booking no — same font family as customer name, but smaller size */
.bc-no{
  font-family:var(--font) !important;
  font-size:.92rem !important;
  font-weight:700 !important;
  color:var(--accent);
  letter-spacing:.1px;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
}

/* Action button (bc-btn-act) — same outline style as View (bc-btn),
   but slightly more compact for 3-col grid */
.bc-actgrid .bc-btn{
  padding:7px 8px !important;
  font-size:.66rem !important;
  letter-spacing:.3px !important;
  gap:4px;
  min-width:0;
}
.bc-actgrid .bc-btn i{width:12px;height:12px;flex-shrink:0}
.bc-actgrid .bc-btn.acc:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 30%,transparent)}
.bc-actgrid .bc-btn.wa:hover{background:#25D366;color:#fff;border-color:#25D366;box-shadow:0 4px 10px rgba(37,211,102,.3)}
/* ═══ WhatsApp solid green pill (v2.4) ═══ */
.bc-btn-act.bc-btn-act-wa{
  background:rgba(37,211,102,.12) !important;
  color:#16a34a !important;
  border:1px solid rgba(37,211,102,.35) !important;
  font-weight:700 !important;
}
.bc-btn-act.bc-btn-act-wa:hover{
  background:#25D366 !important;
  color:#fff !important;
  border-color:#25D366 !important;
  box-shadow:0 4px 10px rgba(37,211,102,.35) !important;
  transform:translateY(-1px) !important;
}
.bc-btn-act.bc-btn-act-wa:active{transform:scale(.96) !important}
html.light .bc-btn-act.bc-btn-act-wa{
  background:rgba(22,101,52,.1) !important;
  color:#166534 !important;
  border-color:rgba(22,101,52,.25) !important;
}
html.light .bc-btn-act.bc-btn-act-wa:hover{
  background:#16a34a !important;
  color:#fff !important;
  border-color:#16a34a !important;
}
.m-wa.m-wa-staff{font-size:.7rem !important;padding:4px 10px !important;gap:3px !important;margin-left:6px !important}
.m-wa.m-wa-staff i{width:11px !important;height:11px !important}
/* ═══ WhatsApp solid green pill (v2.4) ═══ */
.bc-btn-act.bc-btn-act-wa{
  background:rgba(37,211,102,.12) !important;
  color:#16a34a !important;
  border:1px solid rgba(37,211,102,.35) !important;
  font-weight:700 !important;
}
.bc-btn-act.bc-btn-act-wa:hover{
  background:#25D366 !important;
  color:#fff !important;
  border-color:#25D366 !important;
  box-shadow:0 4px 10px rgba(37,211,102,.35) !important;
  transform:translateY(-1px) !important;
}
.bc-btn-act.bc-btn-act-wa:active{transform:scale(.96) !important}
html.light .bc-btn-act.bc-btn-act-wa{
  background:rgba(22,101,52,.1) !important;
  color:#166534 !important;
  border-color:rgba(22,101,52,.25) !important;
}
html.light .bc-btn-act.bc-btn-act-wa:hover{
  background:#16a34a !important;
  color:#fff !important;
  border-color:#16a34a !important;
}
.m-wa.m-wa-staff{font-size:.7rem !important;padding:4px 10px !important;gap:3px !important;margin-left:6px !important}
.m-wa.m-wa-staff i{width:11px !important;height:11px !important}
/* ═══ WhatsApp solid green pill (v2.4) ═══ */
.bc-btn-act.bc-btn-act-wa{
  background:rgba(37,211,102,.12) !important;
  color:#16a34a !important;
  border:1px solid rgba(37,211,102,.35) !important;
  font-weight:700 !important;
}
.bc-btn-act.bc-btn-act-wa:hover{
  background:#25D366 !important;
  color:#fff !important;
  border-color:#25D366 !important;
  box-shadow:0 4px 10px rgba(37,211,102,.35) !important;
  transform:translateY(-1px) !important;
}
.bc-btn-act.bc-btn-act-wa:active{transform:scale(.96) !important}
html.light .bc-btn-act.bc-btn-act-wa{
  background:rgba(22,101,52,.1) !important;
  color:#166534 !important;
  border-color:rgba(22,101,52,.25) !important;
}
html.light .bc-btn-act.bc-btn-act-wa:hover{
  background:#16a34a !important;
  color:#fff !important;
  border-color:#16a34a !important;
}
.m-wa.m-wa-staff{font-size:.7rem !important;padding:4px 10px !important;gap:3px !important;margin-left:6px !important}
.m-wa.m-wa-staff i{width:11px !important;height:11px !important}
/* ═══ WhatsApp solid green pill (v2.4) ═══ */
.bc-btn-act.bc-btn-act-wa{
  background:rgba(37,211,102,.12) !important;
  color:#16a34a !important;
  border:1px solid rgba(37,211,102,.35) !important;
  font-weight:700 !important;
}
.bc-btn-act.bc-btn-act-wa:hover{
  background:#25D366 !important;
  color:#fff !important;
  border-color:#25D366 !important;
  box-shadow:0 4px 10px rgba(37,211,102,.35) !important;
  transform:translateY(-1px) !important;
}
.bc-btn-act.bc-btn-act-wa:active{transform:scale(.96) !important}
html.light .bc-btn-act.bc-btn-act-wa{
  background:rgba(22,101,52,.1) !important;
  color:#166534 !important;
  border-color:rgba(22,101,52,.25) !important;
}
html.light .bc-btn-act.bc-btn-act-wa:hover{
  background:#16a34a !important;
  color:#fff !important;
  border-color:#16a34a !important;
}
.m-wa.m-wa-staff{font-size:.7rem !important;padding:4px 10px !important;gap:3px !important;margin-left:6px !important}
.m-wa.m-wa-staff i{width:11px !important;height:11px !important}

/* Unassigned staff indicator */
.bc-unassigned{font-style:italic;color:var(--text3);font-weight:500;opacity:.7}
/* ════════════════════════════════════════════════════════════════════
   Card v6.2 — Stronger separator, fullwidth balanced buttons,
   bolder/smaller booking number
   ════════════════════════════════════════════════════════════════════ */

/* Booking number — bolder + smaller (per user spec) */
.bc-no{
  font-family:var(--font);
  font-size:.82rem !important;
  font-weight:800 !important;
  color:var(--accent);
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
  line-height:1.2;
}

/* Strong border between amount/footer and action grid */
.bc-actgrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1.5px solid var(--border);
  position:relative;z-index:1;
}
html.dark .bc-actgrid{border-top-color:rgba(255,255,255,.12)}

/* Fullwidth balanced action buttons — fill their cell */
.bc-actgrid .bc-btn{
  width:100%;
  padding:8px 6px !important;
  font-size:.66rem !important;
  letter-spacing:.2px !important;
  gap:5px;
  min-width:0;
  justify-content:center;
  text-align:center;
}
.bc-actgrid .bc-btn i{width:12px;height:12px;flex-shrink:0}
.bc-actgrid .bc-btn span{display:inline}

/* 3-col layout balance — each cell equal width */
@media(max-width:420px){
  .bc-actgrid{gap:6px}
  .bc-actgrid .bc-btn{font-size:.6rem;padding:7px 4px;letter-spacing:0}
}
/* ════════════════════════════════════════════════════════════════════
   Card v6.3 — Fullwidth balanced buttons WITH vertical separators
   ════════════════════════════════════════════════════════════════════ */

/* Booking number — 40% smaller + bold (per user spec) */
.bc-no{
  font-family:var(--font) !important;
  font-size:.5rem !important;       /* 40% smaller (was 0.82rem) */
  font-weight:800 !important;        /* bold */
  color:var(--accent);
  letter-spacing:.1px;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
  line-height:1.2;
  text-transform:none;
}

/* Strong border between amount/footer and action grid (top) */
.bc-actgrid{
  display:flex !important;
  align-items:stretch;
  gap:0 !important;
  margin-top:14px;
  padding-top:14px;
  border-top:1.5px solid var(--border);
  position:relative;z-index:1;
  width:100%;
}
html.dark .bc-actgrid{border-top-color:rgba(255,255,255,.14)}

/* Fullwidth action buttons — flex 1:1:1 with vertical separators */
.bc-actgrid .bc-btn{
  flex:1 1 0;
  width:auto !important;
  min-width:0;
  padding:10px 4px !important;
  font-size:.68rem !important;
  letter-spacing:.1px !important;
  gap:5px;
  border-radius:0 !important;
  justify-content:center;
  text-align:center;
  background:transparent !important;
  border:none !important;
  border-left:1px solid var(--border) !important;
  color:var(--text2);
  font-weight:700;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html.dark .bc-actgrid .bc-btn{border-left-color:rgba(255,255,255,.1) !important}

.bc-actgrid .bc-btn:first-child{
  border-left:none !important;
}

/* Hover effects (no border-left change) */
.bc-actgrid .bc-btn:hover{
  border-left-color:var(--border) !important;  /* keep separator */
}
html.dark .bc-actgrid .bc-btn:hover{border-left-color:rgba(255,255,255,.1) !important}

.bc-actgrid .bc-btn.acc:hover{
  background:var(--accent) !important;color:#fff !important;
  border-left-color:var(--accent) !important;
}
.bc-actgrid .bc-btn.wa:hover{
  background:#25D366 !important;color:#fff !important;
  border-left-color:#25D366 !important;
}
.bc-actgrid .bc-btn:hover:not(.acc):not(.wa){
  background:var(--bg) !important;color:var(--text) !important;
}

/* Icon size */
.bc-actgrid .bc-btn i{width:13px;height:13px;flex-shrink:0}

@media(max-width:420px){
  .bc-actgrid .bc-btn{font-size:.6rem;padding:9px 2px;letter-spacing:0;gap:3px}
  .bc-actgrid .bc-btn i{width:11px;height:11px}
}
/* ════════════════════════════════════════════════════════════════════
   Card v6.4 — FINAL: thick visible separators, fullwidth buttons,
   booking ID even smaller + bold
   ════════════════════════════════════════════════════════════════════ */

/* Booking number — small + bold */
.bc-no{
  font-family:var(--font) !important;
  font-size:.55rem !important;       /* Small but readable */
  font-weight:900 !important;        /* Extra bold */
  color:var(--accent);
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  flex:1;min-width:0;
  line-height:1.1;
  text-transform:uppercase;
}

/* Make View button more prominent + inline with price */
.bc-foot{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--border);
  position:relative;z-index:1;
}
.bc-amt{
  display:inline-flex;align-items:baseline;gap:4px;
  font-size:1.15rem;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.3px;
  line-height:1;
  flex:1;min-width:0;
}
.bc-foot .bc-btn{
  flex-shrink:0;
  padding:7px 11px !important;
  font-size:.68rem !important;
  letter-spacing:.3px !important;
  background:transparent;
  border:1.5px solid var(--border-strong);
  color:var(--text2);
  border-radius:9px;
}
.bc-foot .bc-btn:hover{
  background:var(--sc);
  border-color:var(--sc);
  color:#fff;
  box-shadow:0 4px 12px color-mix(in srgb,var(--sc) 30%,transparent);
}

/* Action grid — 3 buttons fullwidth with visible top separator */
.bc-sep{
  border:none !important;
  border-top:1px solid #d4d4d8 !important;
  margin:10px 0 !important;
  padding:0 !important;
  width:100%;
  display:block;
  opacity:1;
}
/* Card v6.5 — 3-col action grid matching bk-card-action style (outlined + rounded) */
.bc-actgrid{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:6px !important;
  margin-top:12px !important;
  padding-top:12px !important;
  border-top:1px solid var(--border) !important;
  position:relative;
  z-index:1;
}

/* Each button — outlined + rounded, mirrors bk-card-action (bookings page mobile) */
.bc-actgrid .bc-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  padding:9px 6px !important;
  background:transparent !important;
  border:1.5px solid var(--border-strong) !important;
  border-radius:9px !important;
  color:var(--text2) !important;
  font-family:var(--font);
  font-size:.66rem !important;
  font-weight:700 !important;
  letter-spacing:.3px !important;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
  min-width:0;
  width:auto !important;
  flex:none !important;
}
.bc-actgrid .bc-btn i{width:12px;height:12px;stroke-width:2.5;flex-shrink:0}

.bc-actgrid .bc-btn:hover{
  border-color:var(--accent) !important;
  color:var(--accent) !important;
  background:var(--accent-light) !important;
  transform:translateY(-1px);
}
.bc-actgrid .bc-btn.acc:hover{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
  box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 30%,transparent);
}
.bc-actgrid .bc-btn.wa:hover{
  background:#25D366 !important;
  color:#fff !important;
  border-color:#25D366 !important;
  box-shadow:0 4px 10px rgba(37,211,102,.3);
}
.bc-actgrid .bc-btn:not(.acc):not(.wa):hover{
  background:var(--accent2) !important;
  color:#fff !important;
  border-color:var(--accent2) !important;
}
.bc-actgrid .bc-btn:active{transform:translateY(0) scale(.97)}

@media(max-width:380px){
  .bc-actgrid{gap:5px !important}
  .bc-actgrid .bc-btn{font-size:.6rem;padding:8px 4px !important;letter-spacing:.2px}
  .bc-actgrid .bc-btn i{width:11px;height:11px}
}