/* =====================================================================
   DAET KITCHEN — tema ng POS (Phase 3 ng redesign, 2026-10-23)
   =====================================================================
   Nilo-load PAGKATAPOS ng styles.css sa index.html, at LAHAT ay naka-scope
   sa `body.daet` -- iyon ang switch. Alisin ang `daet` sa <body> at
   bumabalik ang itsura ng QUEBO, walang ibang galaw. Kapareho ng paraan ng
   daet-order.css (Phase 2).

   ⚠️ ITSURA LANG. Walang display/visibility na binabago rito sa mga
      elementong kinokontrol ng JS (.hidden, .active, .open, .collapsed,
      .feature-off...). Ang tanging itinatago ay ang mga bahaging pang-QUEBO
      lang (Free Donuts, Quebo Game) -- tingnan ang seksyon 6.
   ⚠️ HINDI binago ang lapad ng sidebar (280px): nakatali rito ang drawer ng
      telepono (`left:-280px` + `translateX(280px)` sa styles.css).

   Brand: UI/DAET_KITCHEN_DESIGN_SYSTEM.md · Mockup: Phase 3 (Shell A) sa
   https://claude.ai/artifact/4spcowbE8re4yh6fhAxdwE
   ===================================================================== */

/* ---- 1. TOKENS + remap ng mga variable ng QUEBO ----
   Ang --primary (espresso) ang pangunahing kulay ng buong app; pula na siya.
   Ang mga hardcoded na #6F4E37 sa styles.css ay hindi naaabot nito -- sa
   Phase 4-5 sila, screen kada screen. */
body.daet {
    --dk-yellow:      #FFF200;
    --dk-yellow-soft: #FFF9B3;
    --dk-red:         #B01010;
    --dk-red-dark:    #9A0A0A;
    --dk-cream:       #FFF4E0;
    --dk-ink:         #2B0A0A;
    --dk-ink-muted:   #6B3A3A;
    --dk-border:      #E6D200;

    --primary:         var(--dk-red);
    --primary-hover:   var(--dk-red-dark);
    --primary-light:   rgba(176, 16, 16, 0.06);
    --primary-color:   var(--dk-red);
    --secondary:       var(--dk-red-dark);
    --secondary-color: var(--dk-red-dark);
    --accent-color:    var(--dk-red-dark);
    --sidebar-bg:      var(--dk-red);
    --sidebar-text:    var(--dk-cream);
    --sidebar-active:  rgba(255, 244, 224, 0.14);
    --dark-bg:         var(--dk-ink);
    --text-primary:    var(--dk-ink);
    --text-dark:       var(--dk-ink);
    --shadow-focus:    0 0 0 3px rgba(176, 16, 16, 0.28);
}

/* Pangunahing button sa buong app: pula + dilaw na text, flat. */
body.daet .btn-primary {
    background: var(--dk-red);
    color: var(--dk-yellow);
    box-shadow: none;
}
body.daet .btn-primary:hover:not(:disabled) {
    background: var(--dk-red-dark);
    box-shadow: none;
}

/* ---- 2. SPLASH (habang naglo-load) ----
   Pulang plato, dilaw na 3D logo (quebo-logo-light.png = dilaw na logo ng
   Daet), dilaw na bar. Walang sinag sa likod. */
body.daet .ava-splash { background: var(--dk-red); }
body.daet .ava-splash::after,
body.daet .ava-aura { display: none; }
body.daet .ava-splash__caption { color: var(--dk-cream); text-shadow: none; font-weight: 800; }
body.daet .ava-splash__bar {
    background: rgba(255, 244, 224, .28);
    box-shadow: none;
    border-radius: 6px;
}
body.daet .ava-splash__bar span {
    background: var(--dk-yellow);
    box-shadow: none;
    border-radius: 6px;
}
body.daet .ava-splash__by .l1 { color: rgba(255, 244, 224, .75); }
body.daet .ava-splash__by .l2 { color: var(--dk-yellow); }

/* ---- 3. LOGIN ----
   Dalawang hanay: dilaw na wedge na may malaking pulang logo sa kaliwa
   (`::before`), puting form sa pulang likod sa kanan. Watermark (`::after`)
   sa likod. Walang binagong markup: ang logo sa card ay itinatago dahil nasa
   wedge na siya. */
body.daet .login-screen {
    background: var(--dk-red);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    padding: 0;
}
body.daet .login-screen::before,
body.daet .login-screen::after {
    content: '';
    border-radius: 0;
    pointer-events: none;
    background: none;
}
body.daet .login-screen::before {
    position: relative;
    top: auto; left: auto;
    width: auto; height: auto;
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    min-height: 100%;
    z-index: 1;
    background: var(--dk-yellow) url('images/brand/logo-red.png') no-repeat calc(50% - 24px) center / min(440px, 72%) auto;
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}
body.daet .login-screen::after {
    position: fixed;
    top: auto; left: auto;
    right: -200px;
    bottom: -120px;
    width: 760px;
    height: 387px;
    z-index: 0;
    background: url('images/brand/logo-red.png') no-repeat center / contain;
    transform: rotate(-8deg);
    opacity: .5;
}
body.daet .login-layout {
    grid-column: 2;
    grid-row: 1;
    z-index: 2;
    margin: auto;
    padding: 48px 24px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}
body.daet .login-container {
    max-width: 400px;
    padding: 36px 32px;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
}
body.daet .login-header { display: none; }
body.daet .login-form { color: var(--dk-ink); margin-top: 0; }
body.daet .login-form .form-group { margin-bottom: 18px; }
body.daet .login-form .form-group label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dk-ink);
    margin-bottom: 6px;
}
body.daet .login-form .form-group input {
    height: 52px;
    padding: 0 14px;
    background: #fff;
    border: 2px solid var(--dk-ink);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--dk-ink);
}
body.daet .login-form .form-group input::placeholder { color: #9A7B7B; font-weight: 500; }
body.daet .login-form .form-group input:focus {
    border-color: var(--dk-red);
    box-shadow: 0 0 0 3px var(--dk-yellow);
}
body.daet .login-form .form-hint { color: var(--dk-ink-muted); }
body.daet .login-form .auth-remember {
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dk-ink);
}
body.daet .login-form .auth-remember input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--dk-red);
}
body.daet .login-form .btn-block {
    height: 58px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body.daet .login-form .btn-primary {
    margin-top: 0;
    background: var(--dk-red);
    color: var(--dk-yellow);
    box-shadow: none;
}
body.daet .login-form .btn-primary:hover:not(:disabled) { background: var(--dk-red-dark); box-shadow: none; }
/* Ang icon lang ng Sign In ang itinatago -- hindi ang spinner habang
   naglo-load (iba ang klase niya). */
body.daet #authSignInBtn .fa-sign-in-alt { display: none; }
/* Demo mode (Quick Login / Back): pangalawang button = puti + 2px na dark */
body.daet .login-form .role-toggle-btn {
    height: auto;
    min-height: 48px;
    background: #fff;
    border: 2px solid var(--dk-ink);
    color: var(--dk-ink);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}
body.daet .login-form .role-toggle-btn:hover { background: var(--dk-yellow-soft); color: var(--dk-ink); border-color: var(--dk-ink); }
body.daet .login-notice {
    background: var(--dk-yellow-soft);
    border-left-color: var(--dk-red);
    color: var(--dk-ink);
}
body.daet .role-panel { border-radius: 12px; box-shadow: none; }
body.daet .role-btn.active { border-color: var(--dk-red); background: var(--dk-yellow-soft); }

/* Telepono at makitid na tablet: wedge sa itaas, form sa ilalim. */
@media (max-width: 900px) {
    body.daet .login-screen {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: start;
        align-content: start;
    }
    body.daet .login-screen::before {
        grid-column: 1;
        grid-row: 1;
        height: 34vh;
        min-height: 220px;
        background-position: center 42%;
        background-size: min(320px, 70%) auto;
        clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%);
    }
    body.daet .login-screen::after { width: 520px; height: 265px; right: -160px; bottom: -80px; }
    body.daet .login-layout {
        grid-column: 1;
        grid-row: 2;
        padding: 8px 16px 32px;
    }
    body.daet .login-container { padding: 28px 22px; }
}

/* ---- 4. SIDEBAR (Shell A) ----
   Pula, dilaw na logo, cream na icon + label. Aktibo = dilaw na text +
   6px na dilaw na bar sa kaliwa + cream 14% na likod. Flat: walang
   gumagalaw na sinag, walang anino. */
body.daet .sidebar { background: var(--dk-red); box-shadow: none; }
body.daet .sidebar-header {
    background: var(--dk-red);
    border-bottom: 0;
}
body.daet .sidebar-header--logo-only { padding: 22px 22px 10px; }
body.daet .sidebar-logo-mark { max-width: 170px; }
body.daet .sidebar-nav { padding: 12px 0 22px; gap: 2px; }
body.daet .nav-item {
    min-height: 46px;
    gap: 14px;
    padding: 0 14px;
    margin: 0 14px;
    border-radius: 10px;
    color: var(--dk-cream);
    font-size: 15px;
    font-weight: 700;
    transition: background .15s ease, color .15s ease;
    will-change: auto;   /* walang transform na -- huwag nang gawing sariling layer */
}
body.daet .nav-item::before,
body.daet .nav-item::after { display: none; }
body.daet .nav-item i {
    width: 22px;
    font-size: 18px;
    opacity: 1;
    transition: none;
}
body.daet .nav-item:hover,
body.daet .nav-item:active {
    background: rgba(255, 244, 224, 0.08);
    color: var(--dk-cream);
    transform: none;
}
body.daet .nav-item:hover i,
body.daet .nav-item:active i { transform: none; }
body.daet .nav-item.active {
    background: rgba(255, 244, 224, 0.14);
    box-shadow: inset 6px 0 0 var(--dk-yellow);
    color: var(--dk-yellow);
    font-weight: 900;
}
body.daet .nav-separator {
    background: rgba(255, 244, 224, 0.18);
    margin: 10px 26px;
}
/* Pulang badge sa pulang sidebar ay hindi kita -- dilaw na. */
body.daet .nav-item .alert-badge {
    background: var(--dk-yellow);
    color: var(--dk-red);
    font-weight: 900;
}
body.daet .sidebar-collapse-btn {
    background: var(--dk-yellow);
    color: var(--dk-red);
    border: 2px solid var(--dk-red);
    box-shadow: none;
}
body.daet .sidebar-collapse-btn:hover { background: var(--dk-yellow); transform: none; }
@media (min-width: 769px) {
    body.daet .sidebar.collapsed .nav-item:hover,
    body.daet .sidebar.collapsed .nav-item:active { transform: none; }
}
body.daet .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 244, 224, 0.28); }

/* ---- 5. TOP BAR ----
   Puti, 3px na dilaw na linya sa ibaba. Title · Main Branch · Synced ·
   oras · notifications · Owner (pulang button). */
body.daet .top-bar {
    background: #fff;
    border-bottom: 3px solid var(--dk-yellow);
    box-shadow: none;
    padding: 0 28px;
}
body.daet .module-title {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--dk-ink);
}
body.daet .top-bar-right { gap: 12px; }
body.daet .menu-toggle { color: var(--dk-red); }
body.daet .branch-chip {
    height: 40px;
    padding: 0 14px;
    border: 2px solid var(--dk-ink);
    border-radius: 8px;
    background: #fff;
    color: var(--dk-ink);
    font-size: 14px;
    font-weight: 800;
}
body.daet .branch-chip:hover { border-color: var(--dk-ink); background: var(--dk-yellow-soft); }
body.daet .branch-chip i.fa-store { color: var(--dk-red); }
body.daet .sync-fresh { color: var(--dk-ink-muted); font-weight: 700; }
body.daet .sync-fresh .fa-cloud { color: var(--dk-red); }
body.daet .current-time { color: var(--dk-ink); font-size: 14px; font-weight: 700; }
body.daet .notif-bell-btn {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
    background: var(--dk-yellow-soft);
    color: var(--dk-red);
    font-size: 19px;
}
body.daet .notif-bell-btn:hover { background: var(--dk-yellow); color: var(--dk-red); }
body.daet .notif-badge,
body.daet .notif-badge.critical { background: var(--dk-red); color: #fff; }
body.daet .notif-panel { border-radius: 12px; border: 2px solid var(--dk-ink); box-shadow: none; }
body.daet .notif-panel-head i { color: var(--dk-red); }
body.daet .user-info {
    height: 44px;
    box-sizing: border-box;
    padding: 0 14px 0 6px;
    border-radius: 10px;
    background: var(--dk-red);
    color: var(--dk-cream);
    font-size: 14px;
    font-weight: 800;
}
body.daet .user-info:hover { background: var(--dk-red-dark); }
body.daet .user-info i { color: var(--dk-red); }
body.daet .user-caret { color: var(--dk-cream) !important; }
body.daet .topbar-avatar {
    border-radius: 8px;
    background: var(--dk-yellow);
    color: var(--dk-red);
}
body.daet .topbar-avatar i { font-size: 20px; color: var(--dk-red); }
body.daet .topbar-avatar.has-photo { box-shadow: none; }
body.daet .user-dropdown { border: 2px solid var(--dk-ink); border-radius: 10px; box-shadow: none; }
@media (max-width: 768px) {
    body.daet .top-bar { padding: 0 15px; }
    body.daet .module-title { font-size: 20px; }
    body.daet .user-info { padding: 0 6px; }
}
/* Mula 769px pataas: IISANG LINYA ang buong top bar, at ang PAMAGAT ang
   umaako ng kakulangan (lumiliit, saka "…") -- hindi ang mga nasa kanan.
   Dati ay 1/1/auto ang kaliwa (kahati sa pagliit), kaya kapag naka-login
   (laging may "Main Branch" + "Synced 3m ago") ay nahahati sa 2-3 linya ang
   chip, ang orasan at ang "Owner - Daet Kitchen" (lumalampas pa sa pula), at
   ang pamagat ay tumatawid sa dilaw na guhit hanggang 1341px (CSS-9, REV-2).
   Ang laki ng pamagat ay batay sa lapad ng BAR (cqi), hindi ng screen --
   iba ang natitira kapag 280px ang sidebar o 76px (naka-minimize): 28px sa
   >=1037px na bar (hal. 1366 na naka-minimize), ~27.8 sa 1366 na may
   sidebar, 20px sa <=740. */
@media (min-width: 769px) {
    body.daet .top-bar { container: dk-topbar / inline-size; column-gap: 12px; }
    body.daet .top-bar-left { flex: 1 1 0; min-width: 0; }
    body.daet .module-title {
        min-width: 0;
        font-size: clamp(20px, 2.7cqi, 28px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    body.daet .top-bar-right { flex: 0 0 auto; }
    body.daet .top-bar-right > * { flex-shrink: 0; }
    body.daet .branch-chip,           /* kasama ang #cloudSyncAlert */
    body.daet .current-time,
    body.daet .user-info { white-space: nowrap; }
    /* Galing sa tao ang pangalan ng branch at ng user: may hangganan para
       hindi maitulak ng isang mahabang pangalan ang buong hanay palabas. */
    body.daet #branchChipName,
    body.daet #userInfoLabel { overflow: hidden; text-overflow: ellipsis; }
    body.daet #branchChipName { max-width: 160px; }
    body.daet #userInfoLabel { max-width: 200px; }
}
/* Kapag kulang pa rin, may NAWAWALA -- ang pinakawalang-silbi muna:
     1. ang orasan (nasa status bar na ng tablet/laptop ang oras)
     2. ang teksto ng "Synced 3m ago" (ikon na lang, gaya ng QUEBO sa <=820)
     3. ang pangalan sa Owner na pindutan (avatar na lang, gaya ng <=768)
     4. ang "Main Branch" (ikon ng tindahan na lang; nasa title/aria-label pa)
     5. ang teksto ng "Offline — saved locally" -- HULI, siya ang may
        gagawin ang may-ari (nasa title pa rin ang buong teksto).
   Lapad ng BAR sa loob ng padding ang batayan (1366 na may sidebar = 1030,
   naka-minimize = 1234; 1024 na may sidebar = 688). Ang bawat hangganan ay
   kinuwenta para kasya pa ang pinakamahabang pamagat ("Menu & Stock Hub",
   8.8em) sa matitira. Iba ang laman ng bar ayon sa estado, kaya iba rin:
     demo / wala pang sync      orasan <849, pangalan <651, branch <485
     + "Synced 3m ago"          orasan <1027, sync <807, pangalan <678, branch <512
     + "Offline"/"Sync error"   orasan <1120, pangalan <920, branch <711, babala <618
   (Ang orasan ay 134–167px depende sa petsa; 154 ang ginamit -- sa
   pinakamalapad na petsa sa 1366 na may sidebar ay "Menu & Stock H…" lang.)
   ⚠️ Kapag binago ang padding/font/gap ng mga ito sa itaas, kuwentahin ulit.
      Kung hindi, "…" lang ang mangyayari sa pamagat -- hindi na mahahati
      ang hanay. */
@container dk-topbar (max-width: 848px) {
    body.daet .current-time { display: none; }
}
@container dk-topbar (max-width: 650px) {
    body.daet .user-info span:not(.topbar-avatar) { display: none; }
    body.daet .user-info { padding: 0 6px; }
}
@container dk-topbar (max-width: 484px) {
    body.daet .top-bar:has(#branchChip:not([style*="none"])) #branchChipName { display: none; }
}
/* + "Synced 3m ago" (ang karaniwang estado kapag naka-login) */
@container dk-topbar (max-width: 1026px) {
    body.daet .top-bar:has(#syncFresh:not([style*="none"])) .current-time { display: none; }
}
@container dk-topbar (max-width: 806px) {
    body.daet .top-bar:has(#syncFresh:not([style*="none"])) .sync-fresh { gap: 0; }
    body.daet .top-bar:has(#syncFresh:not([style*="none"])) .sync-fresh .sf-text { display: none; }
}
@container dk-topbar (max-width: 677px) {
    body.daet .top-bar:has(#syncFresh:not([style*="none"])) .user-info span:not(.topbar-avatar) { display: none; }
    body.daet .top-bar:has(#syncFresh:not([style*="none"])) .user-info { padding: 0 6px; }
}
@container dk-topbar (max-width: 511px) {
    body.daet .top-bar:has(#syncFresh:not([style*="none"])) #branchChipName { display: none; }
}
/* + "Offline — saved locally" / "Sync error" (nagtatago ang "Synced") */
@container dk-topbar (max-width: 1119px) {
    body.daet .top-bar:has(#cloudSyncAlert:not([style*="none"])) .current-time { display: none; }
}
@container dk-topbar (max-width: 919px) {
    body.daet .top-bar:has(#cloudSyncAlert:not([style*="none"])) .user-info span:not(.topbar-avatar) { display: none; }
    body.daet .top-bar:has(#cloudSyncAlert:not([style*="none"])) .user-info { padding: 0 6px; }
}
@container dk-topbar (max-width: 710px) {
    body.daet .top-bar:has(#cloudSyncAlert:not([style*="none"])) #branchChipName { display: none; }
}
@container dk-topbar (max-width: 617px) {
    body.daet .top-bar:has(#cloudSyncAlert:not([style*="none"])) #cloudSyncAlert > span { display: none; }
}

/* ---- 6. CONTENT + DASHBOARD ----
   Cream na likod, puting card, walang anino. Ang label ng KPI ay nasa
   ITAAS ng numero (column-reverse -- h3 ang nauuna sa markup) na may maikling
   pulang bar. */
body.daet .main-content,
body.daet .content-container { background: var(--dk-cream); }

/* Apat sa isang hanay kapag kasya (>=200px bawat card), kung hindi ay 2x2 --
   hindi na 3 + isang naiiwang card (1024–1180px na may sidebar). Ang clamp
   ang pumipili ng minimum na lapad ng column: kapag >=848px (4x200 + 3x16)
   ang hanay, 1/4 nito; kung kulang, 1/2. */
body.daet #dashboard-module .summary-cards {
    grid-template-columns: repeat(auto-fit, minmax(clamp((100% - 48px) / 4 - 0.5px, (848px - 100%) * 999, (100% - 16px) / 2 - 0.5px), 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
body.daet #dashboard-module .summary-card {
    padding: 18px 20px;
    border-radius: 12px;
    box-shadow: none;
    container-type: inline-size;   /* para sa laki ng numero (cqi) sa ibaba */
}
body.daet #dashboard-module .summary-card:hover { transform: none; box-shadow: none; }
body.daet #dashboard-module .summary-card .card-content {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    min-width: 0;
}
body.daet #dashboard-module .summary-card .card-content p {
    position: relative;
    margin: 0;
    padding-top: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dk-ink-muted);
}
body.daet #dashboard-module .summary-card .card-content p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 6px;
    background: var(--dk-red);
}
body.daet #dashboard-module .summary-card .card-content h3 {
    margin: 0;
    /* Sumusunod sa lapad ng card (dati ay 36px kahit ~180px lang ang card --
       lumalampas ang "₱25,480.00"). 13.5cqi = kasya pa ang "₱1,234,567.89"
       (≈7.2em); 36px pa rin kapag maluwag. */
    font-size: clamp(20px, 13.5cqi, 36px);
    white-space: nowrap;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--dk-ink);
}
/* Telepono: dalawa kada hanay, gaya ng QUEBO -- isa kada hanay ay puro
   bakanteng puti. */
@media (max-width: 768px) {
    body.daet #dashboard-module .summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    body.daet #dashboard-module .summary-card { padding: 14px; }
    body.daet #dashboard-module .summary-card .card-content { gap: 6px; }
    body.daet #dashboard-module .summary-card .card-content p {
        padding-top: 10px;
        font-size: 11px;
    }
    body.daet #dashboard-module .summary-card .card-content p::before { width: 32px; height: 5px; }
    body.daet #dashboard-module .summary-card .card-content h3 { font-size: clamp(18px, 13.5cqi, 24px); }
}
/* Pang-QUEBO lang: ang libreng donut at ang Quebo Game. Wala sa Daet. */
body.daet #dashboard-module .summary-card:has(#freeDonutClaimsToday),
body.daet #dashboardGameStrip { display: none; }

body.daet .dashboard-grid { gap: 16px; margin-bottom: 16px; }
body.daet .dashboard-section {
    border-radius: 12px;
    box-shadow: none;
}
body.daet .dashboard-section .section-header {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 16px;
}
body.daet .dashboard-section .section-header h3 {
    font-size: 20px;
    font-weight: 900;
    color: var(--dk-ink);
}
body.daet .dashboard-section .section-header h3 i { color: var(--dk-red); }
body.daet .floorplan-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--dk-yellow);
    color: var(--dk-red);
}
body.daet .floorplan-sub { color: var(--dk-ink-muted); font-weight: 600; }
body.daet .floorplan-manage {
    height: 40px;
    box-sizing: border-box;
    padding: 0 16px;
    border: 3px solid var(--dk-red);
    border-radius: 8px;
    background: var(--dk-yellow);
    color: var(--dk-red);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body.daet .floorplan-manage:hover { background: var(--dk-yellow); color: var(--dk-red-dark); border-color: var(--dk-red-dark); }
body.daet #dashboardTablesStrip .no-data {
    border: 2px dashed var(--dk-border);
    border-radius: 10px;
    color: var(--dk-ink-muted);
    font-weight: 700;
}

body.daet .order-breakdown { gap: 10px; }
body.daet .breakdown-item {
    min-height: 58px;
    box-sizing: border-box;
    padding: 0 16px;
    background: var(--dk-yellow-soft);
    border-radius: 10px;
}
body.daet .breakdown-label { gap: 12px; font-size: 16px; font-weight: 800; color: var(--dk-ink); }
body.daet .breakdown-label i { width: 22px; text-align: center; color: var(--dk-red); font-size: 18px; }
body.daet .breakdown-value { font-size: 24px; font-weight: 900; color: var(--dk-ink); }

body.daet .recent-order-row { background: #fff; border: 2px solid var(--dk-cream); }
body.daet .recent-order-row:hover { background: var(--dk-yellow-soft); }
body.daet .recent-order-row .ro-q,
body.daet .recent-order-row .ro-total { color: var(--dk-red); }
body.daet .recent-order-row .ro-id { color: var(--dk-ink); }

/* =====================================================================
   PHASE 4 (2026-10-23): POS, Operations (Orders), Kitchen Display,
   Queue Board. Mockup: P4Pos, P4Orders, P4Kitchen, P4Queue.
   ===================================================================== */

/* ---- 7. MGA PINDUTAN AT TABLE SA BUONG APP ----
   Pangalawa = puti + 2px na dark border. Ang btn-success ng QUEBO ay
   kayumanggi rin (kapareho ng primary) -- dito ay pula + dilaw na. */
body.daet .btn-secondary {
    background: #fff;
    color: var(--dk-ink);
    border: 2px solid var(--dk-ink);
    box-shadow: none;
}
body.daet .btn-secondary:hover:not(:disabled) { background: var(--dk-yellow-soft); color: var(--dk-ink); box-shadow: none; }
body.daet .btn-success {
    background: var(--dk-red);
    color: var(--dk-yellow);
    box-shadow: none;
}
body.daet .btn-success:hover:not(:disabled) { background: var(--dk-red-dark); color: var(--dk-yellow); box-shadow: none; }
/* Danger = puti + pulang border. Kung puno ring pula, magkamukha ang
   Approve (✓, btn-success) at Reject (✗, btn-danger) -- nahuli ng QA. */
body.daet .btn-danger {
    background: #fff;
    color: var(--dk-red);
    border: 2px solid var(--dk-red);
    box-shadow: none;
}
body.daet .btn-danger:hover:not(:disabled) { background: var(--dk-red); color: #fff; box-shadow: none; }
/* Warning = dilaw + pulang text (kapareho ng warning chip), hindi kahel. */
body.daet .btn-warning { background: var(--dk-yellow); color: var(--dk-red); box-shadow: none; }
body.daet .btn-warning:hover:not(:disabled) { background: var(--dk-yellow); color: var(--dk-red-dark); box-shadow: inset 0 0 0 2px var(--dk-red); }
/* Keyboard focus (Tab). Ang `box-shadow: none` sa itaas (at sa mga pindutan
   ng bawat screen) ay mas tiyak sa `.btn:focus-visible` ng QUEBO -- box-shadow
   ang singsing niya, kaya NAWALA ang singsing sa lahat ng pindutan. Outline na
   lang (hindi tinatamaan ng box-shadow): dark na 3px na may puwang, kaya kita
   sa pula, dilaw, puti at dark na pindutan. `:focus-visible` lang -- walang
   singsing kapag mouse o tap. */
body.daet .btn:focus-visible {
    outline: 3px solid var(--dk-ink);
    outline-offset: 2px;
}
/* Pula/dark ang likod dito (sidebar, Hide bar, cash drawer, Queue Board,
   View Order bar): hindi kita ang dark na singsing -- dilaw. */
body.daet .sidebar :focus-visible,
body.daet .menu-hide-actionbar :focus-visible,
body.daet .cd-hero :focus-visible,
body.daet .qb-brand :focus-visible,
body.daet .mobile-order-bar:focus-visible { outline-color: var(--dk-yellow); }
/* Ang tiket ng KDS ay overflow:hidden -- napuputol ang singsing sa labas ng
   pindutan, kaya nasa LOOB siya: dark na gilid + dilaw na guhit (kita sa
   anumang kulay ng pindutan). */
body.daet .ticket-actions :is(.btn, .ticket-btn):focus-visible {
    outline: 3px solid var(--dk-ink);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 5px var(--dk-yellow);
}

/* Table: pulang header, cream na uppercase na label.
   ⚠️ HINDI sa header na may sariling inline na kulay (nahuli ng QA): ang
   Attendance at Schedule ay may `background:#fff` sa unang th at mga anak na
   may inline na kulay (#1a1a1a, #9ca3af, "CLOSED" #b91c1c) -- cream sa puti
   at pula sa pula ay hindi mabasa. Sila ay naiiwan sa itsura ng QUEBO. */
body.daet .data-table thead { background: transparent; }
body.daet .data-table th:not([style*="background"]):not(:has([style*="color"])) {
    background: var(--dk-red);
    color: var(--dk-cream);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 0;
}
body.daet .data-table th:not([style*="background"]):not(:has([style*="color"])):first-child { border-radius: 8px 0 0 8px; }
body.daet .data-table th:not([style*="background"]):not(:has([style*="color"])):last-child  { border-radius: 0 8px 8px 0; }
body.daet .data-table td { border-bottom: 1px solid var(--dk-border); }

/* ---- 8. HUB HEADER (lahat ng hub) ----
   Walang pamagat -- nasa top bar na ang pangalan ng hub (redundant).
   KPI = mapusyaw na dilaw + pulang numero; tab = 5px na pulang underline. */
body.daet .hub-header {
    background: #fff;
    border-bottom: 0;
    border-radius: 12px;
    padding: 18px 20px 0;
    margin-bottom: 16px;
}
body.daet .hub-title { display: none; }
body.daet .hub-title-row { justify-content: flex-start; margin-bottom: 16px; }
body.daet .hub-quick-stats { gap: 10px; }
body.daet .hub-stat {
    min-width: 120px;
    padding: 10px 14px;
    background: var(--dk-yellow-soft);
    border-radius: 10px;
}
body.daet .hub-stat-icon { display: none; }
body.daet .hub-stat-value { font-size: 24px; font-weight: 900; color: var(--dk-red); line-height: 1.15; }
body.daet .hub-stat-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dk-ink-muted);
}
body.daet .hub-tabs { column-gap: 24px; row-gap: 0; }
body.daet .hub-tab {
    padding: 8px 2px 12px;
    border-radius: 0;
    border-bottom: 5px solid transparent;
    background: transparent;
    color: var(--dk-ink);
    font-size: 15px;
    font-weight: 700;
}
body.daet .hub-tab:hover { background: transparent; color: var(--dk-red); }
body.daet .hub-tab.active {
    background: transparent;
    color: var(--dk-red);
    border-bottom-color: var(--dk-red);
    font-weight: 900;
}
body.daet .hub-tab i { color: inherit; }
body.daet .hub-tab-badge.on { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .hub-tab.active .hub-tab-badge.on { background: var(--dk-red); color: var(--dk-yellow); }
/* Cream ang pahina (hindi abo); ang laman ng hub ay puting section. */
body.daet .hub-module { background: transparent; }
body.daet .hub-content {
    background: #fff;
    border-radius: 12px;
    padding: 18px 20px 20px;
}
@media (max-width: 768px) {
    body.daet .hub-header { padding: 14px 14px 0; }
    body.daet .hub-content { padding: 14px; }
    /* Telepono: KPI dalawa kada hanay, mas maliit; mas sikip ang tab. */
    body.daet .hub-quick-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding-bottom: 0;
    }
    body.daet .hub-stat { min-width: 0; padding: 8px 12px; }
    body.daet .hub-stat-value { font-size: 20px; }
    body.daet .hub-stat-label { font-size: 11px; }
    body.daet .hub-title-row { margin-bottom: 10px; }
    body.daet .hub-tabs { column-gap: 16px; }
    body.daet .hub-tab { font-size: 14px; padding: 6px 2px 10px; }
}
body.daet .hub-content .module-header { border-bottom: 0; }
body.daet .hub-content .module-header h3 { font-size: 20px; font-weight: 900; color: var(--dk-ink); }

/* ---- 9. POS ----
   Puting menu panel + DILAW (#FFF9B3) na Current Order panel, para kita na
   hiwalay siyang component. Walang border sa bawat kahon; ang order type at
   Cash/Online ay iisang segmented control. */
body.daet #pos-module .pos-menu-section {
    border-radius: 12px;
    padding: 18px;
    box-shadow: none;
}
/* Tablet (769–1024px; hindi ang landscape na telepono -- iyon ay may View
   Order bar): nakapirmi sa ibaba ang Current Order (fixed, hanggang 50vh).
   Ang reserba ng QUEBO para dito (`padding-bottom: 52vh`, styles.css) ay
   natalo ng `padding: 18px` sa itaas -- kaya ang huling hanay ng menu ay
   laging nasa ilalim ng order at hindi ma-tap. Ibinalik, pero sukat sa order:
   ang menu panel ay nagtatapos sa 100vh - 60px (taas ng .pos-container), kaya
   50vh - 48px = ang menu ay humihinto 12px sa itaas ng order. (Ang 52vh mismo
   ay nag-iiwan lang ng ~67px na makikitang menu sa 768px na taas.) */
@media (min-width: 769px) and (max-width: 1024px) and (min-height: 601px) {
    body.daet #pos-module .pos-menu-section { padding-bottom: calc(50vh - 48px); }
}
body.daet #pos-module .pos-search {
    background: #fff;
    border: 2px solid var(--dk-ink);
    border-radius: 8px;
    padding: 8px 14px;
}
body.daet #pos-module .pos-search i { color: var(--dk-red); font-size: 16px; }
body.daet #pos-module .pos-search input { font-size: 16px; font-weight: 600; color: var(--dk-ink); }
body.daet #pos-module .pos-search:focus-within { border-color: var(--dk-red); background: #fff; box-shadow: 0 0 0 3px var(--dk-yellow); }
body.daet #pos-module .category-tabs { gap: 8px; }
body.daet #pos-module .category-tab {
    min-height: 40px;
    padding: 0 16px;
    background: var(--dk-yellow-soft);
    color: var(--dk-ink);
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none;
}
body.daet #pos-module .category-tab:hover { background: var(--dk-yellow); color: var(--dk-ink); }
body.daet #pos-module .category-tab.active {
    background: var(--dk-red);
    color: var(--dk-yellow);
    font-weight: 900;
    box-shadow: none;
}
body.daet #pos-module .menu-grid { gap: 12px; }
body.daet #pos-module .menu-item {
    padding: 0;
    border: 2px solid var(--dk-border);
    border-radius: 12px;
    text-align: left;
    box-shadow: none;
    /* BLOCK at WALANG overflow:hidden -- ang grid item na may overflow:hidden
       ay 0 ang minimum na taas, kaya pinipiga ng grid ang mga hanay sa taas
       ng panel (44px na card). Ang larawan na lang ang may radius. */
}
body.daet #pos-module .menu-item:hover { transform: none; box-shadow: none; border-color: var(--dk-red); }
body.daet #pos-module .menu-item .menu-item-img {
    aspect-ratio: 16 / 10;
    border-radius: 10px 10px 0 0;
    margin: 0;
    background: var(--dk-yellow);
}
body.daet #pos-module .menu-item .menu-item-img-placeholder {
    background: var(--dk-yellow);
    color: var(--dk-red);
}
body.daet #pos-module .menu-item .menu-item-img-placeholder > i { opacity: .45; }
body.daet #pos-module .menu-item:not(.menu-mcard) .menu-item-img::after {
    background: var(--dk-red);
    color: var(--dk-yellow);
    border-radius: 8px;
    box-shadow: none;
}
body.daet #pos-module .menu-item-badge {
    top: 8px;
    left: 8px;
    padding: 3px 7px;
    background: var(--dk-red);
    color: var(--dk-yellow);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: none;
}
body.daet #pos-module .menu-item .menu-item-name {
    padding: 10px 12px 2px;
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--dk-ink);
    text-align: left;
}
body.daet #pos-module .menu-item .menu-item-price {
    padding: 0 12px 12px;
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: var(--dk-red);
    text-align: left;
}
body.daet #pos-module .menu-item-add { background: var(--dk-red); color: var(--dk-yellow); box-shadow: none; }

body.daet #pos-module .pos-order-section {
    background: var(--dk-yellow-soft);
    border-radius: 12px;
    padding: 18px;
    box-shadow: none;
    color: var(--dk-ink);
}
body.daet #pos-module .order-header { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
body.daet #pos-module .order-header h3 { font-size: 18px; font-weight: 900; color: var(--dk-ink); white-space: nowrap; }
body.daet #pos-module .order-header { flex-wrap: wrap; row-gap: 6px; }
body.daet #pos-module .order-header-actions { gap: 4px; margin-left: auto; }
body.daet #pos-module .order-header-actions .btn {
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--dk-ink);
    font-size: 12px;
    font-weight: 800;
}
body.daet #pos-module .order-header-actions .btn[onclick="clearCurrentOrder()"] {
    background: transparent;
    color: var(--dk-red);
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
body.daet #pos-module #staffModeBtn.is-on { background: var(--dk-ink); color: var(--dk-yellow); }

/* Order type: iisang segmented control. Walang naka-check hangga't hindi
   pinipili (daet-pos.js). */
body.daet #pos-module .order-type-selector {
    gap: 4px;
    padding: 4px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 12px;
}
body.daet #pos-module .order-type-selector span {
    min-height: 38px;
    padding: 0 4px;
    background: transparent;
    border-radius: 8px;
    color: var(--dk-ink);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}
body.daet #pos-module .order-type-selector span i { color: var(--dk-red); }
body.daet #pos-module .order-type-selector input[type="radio"]:checked + span {
    background: var(--dk-red);
    color: var(--dk-yellow);
}
body.daet #pos-module .order-type-selector input[type="radio"]:checked + span i { color: var(--dk-yellow); }

/* Iisang pagitan lang: may sariling margin-bottom ang input sa loob ng
   .order-options sa QUEBO, kaya doble ang puwang -- at ang listahan ng
   order ang naiipit. */
body.daet #pos-module .order-options { margin-bottom: 8px; }
body.daet #pos-module .order-options input,
body.daet #pos-module .order-options select { margin-bottom: 0; }
body.daet #pos-module .order-buyer-row { margin-bottom: 8px; }
body.daet #pos-module .order-buyer-row .order-options { margin-bottom: 0; }
body.daet #pos-module .pos-order-section .form-control,
body.daet #pos-module .pos-order-section textarea {
    background: #fff;
    border: 0;
    border-radius: 8px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dk-ink);
    box-shadow: none;
}
body.daet #pos-module .pos-order-section .form-control:focus,
body.daet #pos-module .pos-order-section textarea:focus { box-shadow: 0 0 0 3px var(--dk-red); outline: none; }
body.daet #pos-module .table-picker-btn {
    min-height: 44px;
    background: #fff;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    color: var(--dk-ink);
}
body.daet #pos-module .table-picker-btn:hover { background: #fff; box-shadow: 0 0 0 2px var(--dk-red); }
body.daet #pos-module .table-picker-btn i { color: var(--dk-red) !important; }
body.daet #pos-module .buyer-student {
    border: 0;
    background: #fff;
    color: var(--dk-ink);
    font-weight: 800;
}
body.daet #pos-module .buyer-student:hover { color: var(--dk-red); }
body.daet #pos-module .buyer-student.is-on { background: var(--dk-ink); color: var(--dk-yellow); }

body.daet #pos-module .order-items {
    background: #fff;
    border: 0;
    border-radius: 10px;
    padding: 2px 12px;
    min-height: 112px;   /* kahit dalawang item ay kita nang hindi nag-i-scroll */
}
body.daet #pos-module .order-item {
    background: transparent;
    border-radius: 0;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--dk-yellow-soft);
}
body.daet #pos-module .order-item:last-child { border-bottom: 0; }
body.daet #pos-module .order-item-name { font-size: 15px; font-weight: 800; color: var(--dk-ink); }
body.daet #pos-module .order-item-price { color: var(--dk-ink-muted); }
body.daet #pos-module .qty-btn {
    border-radius: 7px;
    background: var(--dk-red);
    color: var(--dk-yellow);
    font-weight: 900;
    font-size: 16px;
}
body.daet #pos-module .order-item-controls .qty-btn:first-child { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet #pos-module .qty-display { font-weight: 900; }
body.daet #pos-module .empty-order { color: var(--dk-ink-muted); }

body.daet #pos-module .order-summary { background: transparent; padding: 0; }
body.daet #pos-module .summary-row { font-size: 12px; font-weight: 600; color: var(--dk-ink); opacity: .85; }
body.daet #pos-module .summary-row.total {
    opacity: 1;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 0;
    font-size: 17px;
    font-weight: 900;
    color: var(--dk-ink);
    align-items: baseline;
}
body.daet #pos-module .summary-row.total #orderTotal { font-size: 26px; font-weight: 900; color: var(--dk-red); line-height: 1.1; }

/* Cash / Online: iisang segmented control, walang label. */
body.daet #pos-module .order-pay-label { display: none; }
body.daet #pos-module .pay-segment {
    padding: 4px;
    gap: 4px;
    background: #fff;
    border-radius: 10px;
}
body.daet #pos-module .pay-seg-btn {
    min-height: 38px;
    border-radius: 8px;
    color: var(--dk-ink);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}
body.daet #pos-module .pay-seg-btn i { color: var(--dk-red); }
body.daet #pos-module .pay-seg-btn#payCashBtn.active,
body.daet #pos-module .pay-seg-btn#payOnlineBtn.active {
    background: var(--dk-red);
    color: var(--dk-yellow);
}
body.daet #pos-module .pay-seg-btn.active i { color: var(--dk-yellow); }
/* Notes: placeholder na lang ang nagsasabi (index.html); ang label ay para
   sa screen reader lang. */
body.daet #pos-module .order-notes-field > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
body.daet #pos-module .order-notes-field { margin: 0 0 10px !important; }
body.daet #pos-module .order-notes-field textarea { min-height: 44px; height: 44px; padding-top: 11px; }

body.daet #pos-module button[onclick="placeOrder()"] {
    min-height: 58px;
    border-radius: 12px;
    background: var(--dk-red);
    color: var(--dk-yellow);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: none;
}
body.daet #pos-module button[onclick="placeOrder()"].dk-place--wait,
body.daet #pos-module button[onclick="placeOrder()"]:disabled {
    background: #D9D9D9;
    color: #555;
    opacity: 1;
    text-transform: none;
    letter-spacing: .02em;
    font-weight: 800;
    cursor: not-allowed;
}
body.daet #pos-module .mobile-order-bar { background: var(--dk-red); color: var(--dk-cream); box-shadow: none; }
body.daet #pos-module .mobile-order-bar .mob-bar-total { color: var(--dk-yellow); }
body.daet #pos-module .mob-bar-count { background: var(--dk-yellow); color: var(--dk-red); }

/* ---- 10. OPERATIONS · ORDERS ----
   NAKA-HIGHLIGHT ANG HINDI PA TAPOS (utos ng may-ari): Pending = dilaw na
   hilera + pulang chip; Preparing (at iba pang hindi pa tapos) = mapusyaw na
   dilaw; Completed = puti. `data-dk-status` ay galing sa daet-pos.js. */
body.daet .data-table tr[data-dk-status="pending"] td { background: var(--dk-yellow); }
body.daet .data-table tr[data-dk-status="in-kitchen"] td,
body.daet .data-table tr[data-dk-status="ready"] td,
body.daet .data-table tr[data-dk-status="served"] td,
body.daet .data-table tr[data-dk-status="out-for-delivery"] td { background: var(--dk-yellow-soft); }
body.daet .data-table tr[data-dk-status] td:first-child { font-weight: 900; }
/* Ang naka-pin na Actions column ng QUEBO (sticky, may sariling kulay). */
body.daet .table-container .data-table:has(td:last-child button) thead th:last-child { background: var(--dk-red); box-shadow: none; }
body.daet .table-container .data-table:has(td:last-child button) tbody tr[data-dk-status="pending"] td:last-child { background: var(--dk-yellow); }
body.daet .table-container .data-table:has(td:last-child button) tbody tr[data-dk-status="in-kitchen"] td:last-child,
body.daet .table-container .data-table:has(td:last-child button) tbody tr[data-dk-status="ready"] td:last-child,
body.daet .table-container .data-table:has(td:last-child button) tbody tr[data-dk-status="served"] td:last-child,
body.daet .table-container .data-table:has(td:last-child button) tbody tr[data-dk-status="out-for-delivery"] td:last-child { background: var(--dk-yellow-soft); }
/* Orders / Sold: inline ang kulay ng QUEBO (kayumanggi), kaya !important.
   Ang aktibo ay ang may `#6F4E37` sa inline style. */
body.daet .hub-content button[onclick^="switchOrdersSubTab"] {
    color: var(--dk-ink) !important;
    border-bottom-color: transparent !important;
    font-weight: 700 !important;
}
body.daet .hub-content button[onclick^="switchOrdersSubTab"][style*="#6F4E37"] {
    color: var(--dk-red) !important;
    border-bottom: 5px solid var(--dk-red) !important;
    font-weight: 900 !important;
}
/* Status chip sa BUONG app: dalawang kulay ng Daet, parisukat (6px), at
   MAY KAHULUGAN ang variant ng QUEBO (nahuli ng QA: kung iisang kulay ang
   lahat, ang "₱X pending" at "Clear" ay hindi na mapag-iba).
   success/ok = tapos · warning = bantayan · danger/critical = problema ·
   info = naghihintay/neutral · road = nasa daan. */
body.daet .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--dk-yellow-soft);
    color: var(--dk-ink);
}
body.daet .status-badge.success,
body.daet .status-badge.ok        { background: var(--dk-yellow-soft); color: var(--dk-ink); }
body.daet .status-badge.warning   { background: var(--dk-yellow); color: var(--dk-red); }
body.daet .status-badge.danger,
body.daet .status-badge.critical  { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .status-badge.info      { background: #fff; color: var(--dk-red); box-shadow: inset 0 0 0 2px var(--dk-red); }
body.daet .status-badge.road      { background: var(--dk-ink); color: var(--dk-cream); }
/* Orders: ang hilera ang nagpapasya (data-dk-status), mas tiyak sa variant. */
body.daet .data-table tr[data-dk-status] .status-badge { box-shadow: none; }
body.daet .data-table tr[data-dk-status="completed"] .status-badge,
body.daet .data-table tr[data-dk-status="split"] .status-badge { background: var(--dk-yellow-soft); color: var(--dk-ink-muted); }
body.daet .data-table tr[data-dk-status="pending"] .status-badge { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .data-table tr[data-dk-status="in-kitchen"] .status-badge,
body.daet .data-table tr[data-dk-status="ready"] .status-badge,
body.daet .data-table tr[data-dk-status="served"] .status-badge,
body.daet .data-table tr[data-dk-status="out-for-delivery"] .status-badge { background: #fff; color: var(--dk-red); }
body.daet .data-table tr[data-dk-status="voided"] .status-badge,
body.daet .data-table tr[data-dk-status="refunded"] .status-badge { background: var(--dk-ink); color: var(--dk-cream); }

/* Bagong online order: ang unang hanay (pangalan, numero, uri, total) ay
   pulang banda; puti ang natitira para mabasa ang mga detalyeng may sariling
   kulay (cash panel, babala). */
body.daet .online-inbox {
    border: 0;
    border-radius: 12px;
    padding: 16px 18px;
}
body.daet .online-inbox__head h3 { font-size: 18px; font-weight: 900; color: var(--dk-ink); }
body.daet .online-inbox__head h3 i { color: var(--dk-red); }
body.daet .online-inbox__count {
    background: var(--dk-yellow);
    color: var(--dk-red);
    border-radius: 6px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
body.daet .online-inbox__card {
    border: 3px solid var(--dk-red);
    border-radius: 12px;
    padding: 0 18px 16px;
    overflow: hidden;
    box-shadow: none;
}
body.daet .online-inbox__row1 {
    margin: 0 -18px 12px;
    padding: 14px 18px;
    background: var(--dk-red);
    color: var(--dk-cream);
}
body.daet .online-inbox__name { color: var(--dk-cream); font-size: 17px; font-weight: 900; }
body.daet .online-inbox__qno {
    background: var(--dk-yellow);
    color: var(--dk-red);
    font-family: inherit;
    font-weight: 900;
    font-size: 18px;
}
body.daet .online-inbox__code,
body.daet .online-inbox__age,
body.daet .online-inbox__type { color: var(--dk-cream); }
body.daet .online-inbox__code,
body.daet .online-inbox__age { opacity: .8; }
body.daet .online-inbox__pay { background: var(--dk-red-dark); border: 0; color: var(--dk-cream); }
body.daet .online-inbox__total { color: var(--dk-yellow); font-size: 22px; font-weight: 900; }
body.daet .online-inbox__items { font-size: 14px; font-weight: 700; color: var(--dk-ink); }
body.daet .online-inbox__note { border-left-color: var(--dk-red); color: var(--dk-ink); }
/* Reject = pangalawang aksyon (puti + 2px dark), hindi ang kahel ng QUEBO. */
body.daet .online-inbox__actions .btn-warning {
    background: #fff;
    color: var(--dk-ink);
    border: 2px solid var(--dk-ink);
    box-shadow: none;
}
/* Sukli: dark na may dilaw na halaga (ang kulang ay nananatiling pula). */
body.daet .oi-cash__cell--change { background: var(--dk-ink); }
body.daet .oi-cash__cell--change .oi-cash__lbl { color: rgba(255, 244, 224, .75); }
body.daet .oi-cash__cell--change .oi-cash__amt { color: var(--dk-yellow); }
body.daet .oi-cash__cell--short { background: var(--dk-red); }
/* Walang idineklarang pambayad: ang "Ilagay ang pambayad" ay `#1A1512` sa
   `var(--secondary)` ng QUEBO -- pula-dark iyon sa Daet (2:1, hindi mabasa).
   Babala ng Daet: dilaw + pulang text (6:1), may pulang gilid para mukhang
   pindutan sa mapusyaw na panel. Ang label ng cell (taupe, 2.7:1) -> muted
   (8:1); ang may kulay na cell (Sukli/Kulang) ay may sariling label. */
body.daet .oi-cash__btn--warn {
    background: var(--dk-yellow);
    color: var(--dk-red);
    box-shadow: inset 0 0 0 2px var(--dk-red);
}
body.daet .oi-cash__cell:not(.oi-cash__cell--change):not(.oi-cash__cell--short) .oi-cash__lbl { color: var(--dk-ink-muted); }
/* Ang panel mismo (beige ng QUEBO) -> cream; ang "walang idineklara" ay
   mapusyaw na dilaw (dilaw din sa QUEBO). Ang "kulang" ay naiiwang pink
   (kahulugan, hindi tema) -- kaya ang :not. */
body.daet .oi-cash:not(.oi-cash--short) { background: var(--dk-cream); border-color: var(--dk-yellow-soft); }
body.daet .oi-cash.oi-cash--none { background: var(--dk-yellow-soft); border-color: var(--dk-border); }
body.daet .oi-cash__cell + .oi-cash__cell { border-left-color: rgba(43, 10, 10, .12); }
body.daet .oi-cash__cell:not(.oi-cash__cell--change):not(.oi-cash__cell--short):not(.oi-cash__cell--unknown) .oi-cash__amt { color: var(--dk-ink); }
body.daet .oi-cash__btn--link { text-decoration-color: var(--dk-border); }
body.daet .oi-cash__btn--link:hover { color: var(--dk-red-dark); }

/* ---- 11. KITCHEN DISPLAY ----
   Inayos 2026-10-23 ("pangit ng UI" -- screenshot ng may-ari):
   - Puting tiket sa cream na lane, walang makapal na kulay na guhit sa kaliwa
     at walang dilaw na linya sa loob; ang chip na lang ang nagsasabi ng uri.
   - Ulo: malaking numero + orasan sa unang hilera; uri + pangalan sa
     ikalawa (dati ay naiipit ang pangalan hanggang "ZZZ T…" o icon lang).
   - Ang mga pindutan sa ilalim ay nasa LOOB na ng card (dati ay -14px ang
     margin, kaya nausog pakaliwa at naputol ang "START COOKING").
   - Makitid na tiket (<=240px, hal. 1024px na may sidebar): bumababa ang ⇄ at 0/1 sa
     sariling hilera, kaya buong salita ang pangalan ng ulam. */
body.daet .chime-toggle {
    background: #fff;
    border: 2px solid var(--dk-red);
    border-radius: 8px;
    color: var(--dk-red);
    font-weight: 900;
    letter-spacing: .06em;
}
/* Kailangang i-tap (naka-lock ng browser) = dilaw para mapansin; naka-off =
   mapusyaw. (Dati ay pareho silang puti-na-may-pulang-guhit gaya ng naka-on.) */
body.daet .chime-toggle.is-locked { background: var(--dk-yellow); border-color: var(--dk-red); color: var(--dk-red); }
body.daet .chime-toggle.is-locked:hover { background: #F5E800; border-color: var(--dk-red); }
body.daet .chime-toggle.is-off { border-color: rgba(43, 10, 10, .2); color: var(--dk-ink-muted); }
body.daet .kds-subtab {
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--dk-ink);
    font-weight: 700;
    box-shadow: none;
}
body.daet .kds-subtab.active { background: var(--dk-red); color: var(--dk-yellow); font-weight: 900; }
body.daet .kitchen-board { gap: 14px; }
body.daet .kitchen-lane {
    background: var(--dk-cream);
    border: 0;
    border-radius: 12px;
    padding: 10px;
    gap: 10px;
}
body.daet .kitchen-lane-head {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--dk-ink);
    padding: 2px 4px;
}
body.daet .kitchen-lane-count {
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--dk-yellow);
    color: var(--dk-ink);
    font-size: 13px;
    font-weight: 900;
}
/* Kulay ng bilang = yugto: New dilaw, Cooking pula, Ready dark. Laging
   New · Cooking · Ready ang tatlong lane (renderLane sa app.js). */
body.daet .kitchen-board > .kitchen-lane:nth-child(2) .kitchen-lane-count { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .kitchen-board > .kitchen-lane:nth-child(3) .kitchen-lane-count { background: var(--dk-ink); color: var(--dk-cream); }
body.daet .hub-content .kitchen-lane > .empty-state {
    background: transparent;
    border: 2px dashed rgba(43, 10, 10, .14);
    border-radius: 10px;
    color: var(--dk-ink-muted);
    font-weight: 700;
}

/* -- Ang tiket -- */
body.daet .kitchen-ticket {
    /* Para sa @container sa ibaba (makitid na tiket). */
    container-type: inline-size;
    background: #fff;
    border: 1px solid rgba(43, 10, 10, .12);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(43, 10, 10, .06);
    overflow: hidden;
}
body.daet .kitchen-ticket:hover { box-shadow: 0 1px 2px rgba(43, 10, 10, .06); }

/* Ulo: dalawang hilera.  [numero]                  [orasan]
                         [uri] [mesa ng QR] [pangalan ng kumakain…]
   Flex na may `order` + isang `::after` na pamutol ng hilera. `display:
   contents` sa .ticket-meta para mapuwesto ang mga anak niya (pangalan, chip
   ng mesa, orasan) nang hiwalay. (Hindi grid: sa ~180px na tiket ay
   pinagsasama ng grid ang lapad ng numero at ng uri, at lumalampas ang
   orasan sa card.) */
body.daet .ticket-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    padding: 10px 12px 9px;
    background: #fff;
    border-bottom: 1px solid rgba(43, 10, 10, .08);
}
body.daet .ticket-header::after { content: ""; order: 4; flex: 0 0 100%; height: 0; }
body.daet .ticket-head-left { order: 1; min-width: 0; gap: 6px; flex-wrap: wrap; }
body.daet .ticket-head-left > span[title^="Paid in cash"] { white-space: nowrap; border-radius: 6px !important; }
body.daet .ticket-meta { display: contents; }
/* Ang chip ng mesa ng QR ay nasa IKALAWANG hilera (kasama ng uri), para laging
   numero + orasan lang ang una -- hindi apat na hilera sa makitid na tiket. */
body.daet .ticket-meta > span[title^="Table number"] { order: 6; margin-top: 7px; }
body.daet .ticket-meta .ticket-elapsed { order: 3; margin-left: auto; }
/* Ang uri: min-content -- ang mahabang label ng mesa ay bumababa sa LOOB ng
   chip, hindi lumalampas. */
body.daet .ticket-type {
    order: 5;
    flex: 0 1 auto;
    margin: 7px 0 0;
    max-width: 100%;
    min-width: min-content;
    white-space: normal;
}
/* 90px na basis: kapag hindi kasya katabi ng uri, bumababa ang pangalan sa
   sariling hilera sa halip na maging "Carl…". */
body.daet .ticket-meta .ticket-customer { order: 7; flex: 1 1 90px; margin-top: 7px; }

body.daet .ticket-id { font-size: 22px; font-weight: 900; color: var(--dk-ink); letter-spacing: -.01em; line-height: 1.1; }
body.daet .ticket-header .ticket-qno {
    background: var(--dk-red);
    color: var(--dk-yellow);
    font-family: inherit;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
    padding: 3px 10px;
    border-radius: 8px;
    letter-spacing: .02em;
}
/* Ang orasan lang -- ang lane na ang nagsasabi kung Waiting/Cooking/Total.
   Huli na (15m) = dilaw; lampas 25m = pula. */
body.daet .ticket-meta .ticket-elapsed {
    font-size: 13px;
    font-weight: 800;
    color: var(--dk-ink-muted);
    padding: 3px 9px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
body.daet .ticket-elapsed-lbl { display: none; }
body.daet .ticket-meta .ticket-elapsed.warning { background: var(--dk-yellow); color: var(--dk-ink); }
body.daet .ticket-meta .ticket-elapsed.danger { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .ticket-meta .ticket-customer {
    font-size: 13px;
    font-weight: 700;
    color: var(--dk-ink-muted);
}
body.daet .ticket-customer i { display: none; }
body.daet .ticket-meta > span[title^="Table number"] {
    background: var(--dk-red) !important;
    color: var(--dk-yellow) !important;
    border: 0 !important;
    border-radius: 6px !important;
}

body.daet .ticket-type {
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
body.daet .ticket-type--dinein   { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .ticket-type--takeout  { background: var(--dk-yellow); color: var(--dk-red); }
body.daet .ticket-type--delivery { background: var(--dk-ink); color: var(--dk-cream); }

/* Mga item. 12px sa gilid (dati ay 0 -- nakadikit ang "1×" sa gilid). */
body.daet .ticket-items { border-top: 0; }
body.daet .kitchen-ticket .ticket-line {
    padding: 9px 12px;
    background: #fff;
    border: 0;
}
body.daet .kitchen-ticket .ticket-line + .ticket-line { border-top: 1px solid rgba(43, 10, 10, .08); }
body.daet .ticket-item { align-items: center; gap: 8px; }
body.daet .ticket-qty { min-width: 26px; color: var(--dk-red); font-size: 15px; font-weight: 900; line-height: 1.4; }
body.daet .ticket-item-name { font-size: 16px; font-weight: 800; color: var(--dk-ink); line-height: 1.3; }
body.daet .ti-main .ticket-item-name { overflow-wrap: break-word; }
body.daet .ticket-item-name.kdsr-tap { border-bottom: 1px dotted rgba(43, 10, 10, .3); }
body.daet .ticket-item-name.kdsr-tap:hover { border-bottom-color: var(--dk-red); }
body.daet .ticket-swap {
    width: auto;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(43, 10, 10, .62);
    font-size: 13px;
}
body.daet .ticket-swap:hover { background: var(--dk-cream); color: var(--dk-red); border: 0; }
body.daet .ticket-tick {
    width: 50px;
    height: 34px;
    border: 1.5px solid rgba(43, 10, 10, .2);
    border-radius: 8px;
    background: #fff;
    color: var(--dk-ink);
    font-size: 13px;
    font-weight: 800;
}
body.daet .ticket-tick:hover { border-color: var(--dk-ink); }
/* (Berde ang bahagya at ang tapos -- kahulugan, hindi tema.) */
body.daet .ticket-tick.is-partial { border-color: rgba(22, 163, 74, .55); color: #15803D; }
body.daet .ticket-tick.is-done { background: #16A34A; border-color: #16A34A; color: #fff; }
/* Ang chips, ang "Replaced", at ang ↳ ay nakahanay sa PANGALAN (26px + 8px). */
body.daet .kitchen-ticket .ticket-mods { margin: 5px 0 0 34px; gap: 5px; }
body.daet .ticket-item-modifiers {
    border-radius: 6px;
    background: var(--dk-yellow-soft);
    color: var(--dk-red);
    font-size: 12px;
    font-weight: 800;
}
body.daet .ticket-item-modifiers.tm-extra,
body.daet .ticket-item-modifiers.tm-less,
body.daet .ticket-item-modifiers.tm-sweet { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .ticket-swapped {
    margin-left: 34px;
    padding: 2px 9px;
    border-radius: 6px;
    background: var(--dk-cream);
    color: var(--dk-ink);
}
body.daet .ticket-breakdown { padding-left: 34px; color: var(--dk-ink-muted); }

/* Note ng kumakain, tatak ng bayad, at "+2 more…" -- buong-lapad na hilera. */
body.daet .ticket-notes {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-top: 1px solid rgba(43, 10, 10, .08);
    border-radius: 0;
    background: var(--dk-yellow-soft);
    color: var(--dk-ink);
    font-size: 13px;
    font-weight: 700;
}
body.daet .ticket-notes i { color: var(--dk-red); }
body.daet .ticket-paid {
    margin: 0;
    padding: 7px 12px;
    border: 0;
    border-top: 1px solid rgba(43, 10, 10, .08);
    border-radius: 0;
    background: #EAF6EC;
    color: #166534;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .02em;
}
body.daet .ticket-otherstation {
    padding: 7px 12px;
    border-top: 1px solid rgba(43, 10, 10, .08);
    background: var(--dk-cream);
    color: var(--dk-ink-muted);
    font-size: 12.5px;
    font-weight: 700;
}
body.daet .ticket-name-foot {
    margin: 0;
    padding: 7px 12px;
    border-radius: 0;
    border-top: 1px solid rgba(43, 10, 10, .08);
    background: var(--dk-cream);
    color: var(--dk-ink);
    font-size: 13.5px;
    font-weight: 800;
    overflow-wrap: anywhere;
}
body.daet .ticket-name-foot i { color: var(--dk-red); }

/* Mga pindutan sa ilalim: nasa loob ng card, magkadikit, iisang taas. Ang
   label ay puwedeng bumaba sa 2 linya (makitid na lane) -- hindi naputol. */
body.daet .ticket-actions {
    margin: 0;
    gap: 0;
    border-top: 1px solid rgba(43, 10, 10, .1);
    border-radius: 0;
}
body.daet .ticket-actions .ticket-btn,
body.daet .ticket-actions .btn {
    min-height: 48px;
    height: auto;
    padding: 8px 10px;
    border: 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.15;
    text-transform: none;
    white-space: normal;
    box-shadow: none;
}
/* Ang Call ay pangalawa: kasya lang sa label niya; ang pangunahing aksyon
   ang kumukuha ng natitirang lapad, kaya isang linya ang "Start Cooking". */
body.daet .ticket-actions .ticket-btn.btn-secondary,
body.daet .ticket-actions .btn:not(.ticket-btn) { flex: 0 0 auto; padding: 8px 18px; }
body.daet .ticket-actions .btn:not(.ticket-btn) { background: #fff; color: var(--dk-ink); }
body.daet .ticket-actions .btn:not(.ticket-btn):hover { background: var(--dk-cream); }
/* Free meal: tatlo ang pindutan (Photo, Call, aksyon) -- hindi kasya sa isang
   hilera, kaya ang pangunahing aksyon ay nasa sariling buong-lapad na hilera. */
body.daet .ticket-actions:has(> .btn:not(.ticket-btn)) { flex-wrap: wrap; }
body.daet .ticket-actions:has(> .btn:not(.ticket-btn)) > .btn { flex: 1 1 auto; }
body.daet .ticket-actions:has(> .btn:not(.ticket-btn)) > :last-child {
    flex: 1 0 100%;
    border-left: 0;
    border-top: 1px solid rgba(43, 10, 10, .1);
}
body.daet .ticket-actions .ticket-btn + .ticket-btn,
body.daet .ticket-actions .btn + .btn { border-left: 1px solid rgba(43, 10, 10, .1); }
body.daet .ticket-actions .ticket-btn.btn-secondary { background: #fff; color: var(--dk-ink); }
body.daet .ticket-actions .ticket-btn.btn-secondary:hover { background: var(--dk-cream); }
body.daet .ticket-actions .ticket-btn.btn-warning { background: var(--dk-yellow); color: var(--dk-red); }
body.daet .ticket-actions .ticket-btn.btn-warning:hover { background: #F5E800; }
body.daet .ticket-actions .ticket-btn.btn-info { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .ticket-actions .ticket-btn.btn-info i { color: var(--dk-yellow); }
body.daet .ticket-actions .ticket-btn.btn-info:hover:not(:disabled) { background: var(--dk-red-dark); box-shadow: none; }
body.daet .ticket-actions .ticket-btn.btn-success { background: var(--dk-ink); color: var(--dk-cream); }
body.daet .ticket-actions .ticket-btn:disabled,
body.daet .ticket-actions .station-done { background: var(--dk-cream); color: var(--dk-ink-muted); }

/* Makitid na tiket (hal. 1024px na may sidebar = ~180px): bumababa ang ⇄ at
   ang 0/1 sa ilalim ng pangalan, sa kanan. Hindi na "Chick/en/Adob/o". */
@container (max-width: 240px) {
    body.daet .ticket-item { flex-wrap: wrap; row-gap: 6px; }
    body.daet .ti-main { flex: 1 1 calc(100% - 40px); }
    body.daet .ticket-swap,
    body.daet .ticket-tick { margin-left: auto; }
    body.daet .ticket-swap + .ticket-tick { margin-left: 0; }
    body.daet .kitchen-ticket .ticket-mods,
    body.daet .ticket-swapped,
    body.daet .ticket-breakdown { margin-left: 0; padding-left: 0; }
    body.daet .ticket-actions .btn,
    body.daet .ticket-actions .ticket-btn.btn-secondary,
    body.daet .ticket-actions .btn:not(.ticket-btn) { padding: 8px; font-size: 13px; }
    body.daet .ticket-actions .btn i { display: none; }
}

/* -- Mga order na iisang mesa (KKB) -- */
body.daet .kds-table-group {
    border: 2px solid var(--dk-red);
    border-radius: 14px;
    background: #fff;
    padding: 8px;
}
body.daet .kds-tg-table { color: var(--dk-ink); font-size: 14px; font-weight: 900; white-space: nowrap; }
body.daet .kds-tg-table i { color: var(--dk-red); }
body.daet .kds-tg-count { background: var(--dk-red); color: var(--dk-yellow); font-weight: 900; }

/* -- Prep Summary (sa ilalim ng board) -- */
body.daet .prep-summary {
    border: 1px solid rgba(43, 10, 10, .12);
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}
body.daet .prep-summary-head h4 { color: var(--dk-ink); font-weight: 900; }
body.daet .prep-summary-head h4 i { color: var(--dk-red); }
body.daet .prep-summary-sub { color: var(--dk-ink-muted); }
body.daet .prep-chip {
    background: var(--dk-cream);
    border: 0;
    border-radius: 8px;
    color: var(--dk-ink);
    font-weight: 700;
}
body.daet .prep-chip strong { color: var(--dk-red); font-weight: 900; }

/* ---- 12. QUEUE BOARD ----
   PREPARING (puti) at NOW SERVING (dilaw) -- PAREHONG grid ng numero, dahil
   madalas marami ang sabay-sabay na serving (utos ng may-ari). Gumagana pa
   rin ang fit-loop ng TV mode: `scrollHeight` ng `.qb-list` ang sinusukat
   niya, kaya grid man o listahan ay pareho. */
body.daet .qb-brand { background: var(--dk-red); border-radius: 12px; }
body.daet .qb-brand__clock { color: #fff; font-weight: 900; }
body.daet .qb-brand__day { color: var(--dk-yellow); font-weight: 800; }
body.daet .qb-tv-btn {
    border: 2px solid rgba(255, 244, 224, .5);
    border-radius: 8px;
    background: transparent;
    color: var(--dk-cream);
    font-weight: 800;
}
body.daet .qb-tv-btn:hover { background: rgba(255, 244, 224, .12); }
body.daet .qb-tv-btn.is-set { border-color: var(--dk-yellow); color: var(--dk-yellow); }
body.daet .qb-rate-select { color: var(--dk-cream); background: transparent; }
body.daet .qb-rate-select option { color: var(--dk-ink); }
body.daet .qb-col {
    border: 0;
    border-radius: 12px;
    padding: 20px 24px;
    background: #fff;
}
body.daet .qb-col--ready { background: var(--dk-yellow); }
body.daet .qb-head { border-bottom: 3px solid var(--dk-yellow-soft); align-items: center; }
body.daet .qb-col--ready .qb-head { border-bottom-color: var(--dk-red); }
body.daet .qb-head__label { font-size: 22px; font-weight: 900; letter-spacing: .08em; color: var(--dk-ink); }
body.daet .qb-col--ready .qb-head__label { color: var(--dk-red); }
body.daet .qb-head__count {
    min-width: 32px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--dk-ink);
    color: var(--dk-cream);
    font-size: 16px;
    font-weight: 900;
}
body.daet .qb-col--ready .qb-head__count { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .qb-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-auto-rows: min-content;
    align-content: start;
    gap: 12px;
}
body.daet .qb-list > .qb-empty,
body.daet .qb-list > .qb-more { grid-column: 1 / -1; }
body.daet .qb-row,
body.daet .qb-col--ready .qb-row {
    min-height: 110px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    border: 0;
    border-radius: 12px;
    background: var(--dk-yellow-soft);
    text-align: center;
}
body.daet .qb-col--ready .qb-row { background: #fff; }
/* Ang laki ng numero ay sumusunod sa LAPAD NG TILE (cqi), para hindi siya
   mahati sa dalawang linya kahit 4 na character ("001*"). */
body.daet .qb-row { container-type: inline-size; }
body.daet .qb-num {
    flex-direction: column;
    align-items: center;
    row-gap: 2px;
    font-size: min(52px, 30cqi);
    font-weight: 900;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: var(--dk-ink);
}
/* "QUE-" -- maliit sa itaas ng numero (daet-pos.js §3). */
body.daet .dk-qb-pre {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
    line-height: 1;
    opacity: .7;
}
body.daet .qb-col--ready .qb-num { color: var(--dk-red); }
body.daet .qb-name,
body.daet .qb-col--ready .qb-name {
    max-width: 100%;
    font-size: 14px;
    font-weight: 800;
    color: var(--dk-ink-muted);
}
/* Istasyon (Kitchen/Bar): icon na lang -- mahalaga lang kapag hati ang
   istasyon, at sapat na ang icon. */
body.daet .qb-tag,
body.daet .qb-col--ready .qb-tag {
    font-size: 0;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dk-ink-muted);
}
body.daet .qb-tag i { font-size: 14px; opacity: .6; }
body.daet .qb-empty { color: var(--dk-ink-muted); font-weight: 700; }
body.daet .qb-col--ready .qb-empty { color: var(--dk-red); }
body.daet .qb-more { color: var(--dk-ink); font-weight: 900; }
/* TV: ang 30px na padding ng #contentContainer ay naiiwan sa TV mode ng
   QUEBO -- lumalampas ang board sa screen (828/768) at lumalabas ang
   scrollbar na sinasabi mismo ng styles.css na bawal. Bug din ito sa QUEBO. */
body.daet.qb-tv .content-container { padding: 0 !important; overflow: hidden !important; }
/* TV: laki ayon sa taas ng screen, gaya ng QUEBO (vh). */
body.daet.qb-tv .qb-row { min-height: 15vh; padding: 1vh .6vw; }
body.daet.qb-tv .qb-num { font-size: min(clamp(36px, 8.5vh, 110px), 30cqi); }
body.daet.qb-tv .qb-col--prep .qb-num { font-size: min(clamp(32px, 7.6vh, 100px), 30cqi); }
body.daet.qb-tv .dk-qb-pre { font-size: clamp(12px, 1.9vh, 24px); }
body.daet.qb-tv .qb-list { grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 13vw, 260px), 1fr)); gap: 1.2vh; }
body.daet.qb-tv .qb-tag { font-size: 0; padding: 0; }
/* Pangalan sa TV: ang `.qb-col--ready .qb-name` (14px) sa itaas ay mas tiyak
   sa `.qb-tv .qb-name` ng QUEBO -- kaya 14px ang Now Serving habang ~27px ang
   Preparing (doon ay ang `.qb-tv .qb-col--prep .qb-name` ng QUEBO ang
   nananalo). Ang tinatawag ang dapat pinakamadaling mabasa: laki ng QUEBO. */
body.daet.qb-tv .qb-col--ready .qb-name { font-size: clamp(14px, 2.8vh, 40px); }
@media (max-width: 820px) {
    body.daet .qb-list { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    body.daet .qb-num { font-size: min(40px, 30cqi); }
    body.daet .qb-row { min-height: 90px; }
}

/* =====================================================================
   PHASE 5 (2026-10-23): ADMIN HUBS — Menu & Stock, Staff & HR, Finance,
   Customers, Reservations, Settings. Isang agent kada hub; pinagsama rito.
   Mockup: P5Menu, P5Staff, P5Finance, P5Settings, HubHeader.
   ===================================================================== */

/* ---- 13. SHARED: forms, switches, sub-tabs, modals ---- */
/* =====================================================================
   PHASE 5 — SHARED BASE (lahat ng admin hub). Isinusulat ng parent agent;
   ang mga hub agent ay HINDI nag-e-edit dito -- kung kailangan ng pagbabago,
   iulat. Pagsasamahin sa daet-pos.css sa dulo.
   Tokens: --dk-yellow #FFF200, --dk-yellow-soft #FFF9B3, --dk-red #B01010,
   --dk-red-dark #9A0A0A, --dk-cream #FFF4E0, --dk-ink #2B0A0A,
   --dk-ink-muted #6B3A3A, --dk-border #E6D200 (naka-define sa body.daet).
   ===================================================================== */

/* ---- Status chip: NASA daet-pos.css na (Phase 4 QA fix) -- ang mga variant
   na success/ok, warning, danger/critical, info, road. ---- */
/* ---- .btn-danger: NASA daet-pos.css na -- puti + 2px na pulang border. ----
   ---- .data-table th: pula LANG kung walang inline na background at walang
        anak na may inline na kulay (Attendance/Schedule ay naiiwang QUEBO --
        Staff agent ang mag-aayos sa sariling file). ---- */

/* ---- Forms: uppercase na label, puting input na may 2px na dark border ---- */
body.daet .form-group > label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dk-ink);
    margin-bottom: 6px;
}
body.daet .form-control {
    background: #fff;
    border: 2px solid var(--dk-ink);
    border-radius: 8px;
    font-weight: 600;
    font-family: inherit;   /* textarea ay bumabagsak sa monospace kung wala ito */
    color: var(--dk-ink);
}
/* Laki (QA): ang `.form-control-lg` (Cash Tendered sa payment modal) ay naiiwan
   sa laki ng QUEBO; ang 44px ay sa input ng form lang, hindi sa compact na
   inline control (options manager, add-ons). */
body.daet .form-control:not(.form-control-lg) { font-size: 15px; }
body.daet .form-group > .form-control { min-height: 44px; }
/* Disabled: dapat MUKHANG hindi napapalitan (sarado na araw sa Hours, atbp.). */
body.daet .form-control:disabled {
    background: #F4EFE6;
    border-color: rgba(43, 10, 10, .18);
    color: #8A6B6B;
    cursor: not-allowed;
}
body.daet .form-group > textarea.form-control { min-height: 80px; }
body.daet .form-group > label:has(> input[type="checkbox"]),
body.daet .form-group > label:has(> input[type="radio"]) {
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 700;
}
body.daet .form-control:focus {
    border-color: var(--dk-red);
    box-shadow: 0 0 0 3px var(--dk-yellow);
    outline: none;
}
body.daet .form-control::placeholder { color: #9A7B7B; font-weight: 500; }
body.daet .form-hint { color: var(--dk-ink-muted); }

/* ---- Switch: HINDI pill (8px radius) ---- */
/* OFF = mapusyaw na dark (dating #D9CFC0, beige ng QUEBO). */
body.daet .feature-switch .feature-switch-track { border-radius: 8px; background: rgba(43, 10, 10, .24); }
body.daet .feature-switch .feature-switch-thumb { border-radius: 6px; box-shadow: none; }
body.daet .feature-switch input:checked + .feature-switch-track { background: var(--dk-red); }
body.daet .feature-switch input:checked + .feature-switch-track .feature-switch-thumb { background: var(--dk-yellow); }
body.daet .switch .slider,
body.daet .switch .slider.round { border-radius: 8px; }
body.daet .switch .slider:before,
body.daet .switch .slider.round:before { border-radius: 6px; }
body.daet .switch input:checked + .slider { background: var(--dk-red); }
body.daet input[type="checkbox"],
body.daet input[type="radio"],
body.daet input[type="range"] { accent-color: var(--dk-red); }

/* ---- Sub-tabs at chips sa loob ng hub (hindi ang POS -- may sarili) ---- */
body.daet .sub-tabs { border-bottom: 0; }
body.daet .sub-tabs .sub-tab {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--dk-yellow-soft);
    color: var(--dk-ink);
    font-size: 14px;
    font-weight: 700;
}
body.daet .sub-tabs .sub-tab:hover { background: var(--dk-yellow); }
body.daet .sub-tabs .sub-tab[aria-selected="true"] { background: var(--dk-red); color: var(--dk-yellow); font-weight: 900; }
/* Dark na singsing (gaya ng .btn): ang dilaw sa puting hub ay hindi kita. */
body.daet .sub-tabs .sub-tab:focus-visible { outline: 3px solid var(--dk-ink); outline-offset: 2px; }
body.daet .hub-content .category-tab {
    min-height: 38px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--dk-yellow-soft);
    color: var(--dk-ink);
    font-weight: 700;
    box-shadow: none;
}
body.daet .hub-content .category-tab:hover { background: var(--dk-yellow); color: var(--dk-ink); }
body.daet .hub-content .category-tab.active { background: var(--dk-red); color: var(--dk-yellow); font-weight: 900; box-shadow: none; }

/* ---- Section header sa loob ng hub ---- */
body.daet .hub-content .module-header { padding-bottom: 0; margin-bottom: 16px; }
body.daet .hub-content .module-header h3 i,
body.daet .settings-section h3 i { color: var(--dk-red) !important; }
body.daet .settings-section { border-radius: 12px; box-shadow: none; }
body.daet .empty-state,
body.daet .no-data { color: var(--dk-ink-muted); }
body.daet .empty-state i { color: var(--dk-border); }

/* ---- Modal (static .modal at JS na .modal-overlay > div) ---- */
body.daet .modal { border-radius: 12px; box-shadow: none; }
body.daet .modal-header { border-bottom: 3px solid var(--dk-yellow); }
body.daet .modal-header h2,
body.daet .modal-header h3 { font-size: 20px; font-weight: 900; color: var(--dk-ink); }
body.daet .modal-close { color: var(--dk-ink); }
body.daet .modal-close:hover { color: var(--dk-red); }

/* ---- Ang ⋮ popup ng mga table (row-menu, inililipat sa <body>) ----
   !important dahil !important din ang kulay ng QUEBO (styles.css ~20500). */
body.daet .row-menu-pop { border: 2px solid var(--dk-ink); border-radius: 10px; box-shadow: none; }
body.daet .row-menu-pop > button,
body.daet .row-menu-pop > a,
body.daet .row-menu-pop .btn { color: var(--dk-ink) !important; font-weight: 700; text-align: left; }
body.daet .row-menu-pop > button i,
body.daet .row-menu-pop .btn i { color: var(--dk-red) !important; }
body.daet .row-menu-pop > button:hover,
body.daet .row-menu-pop .btn:hover { background: var(--dk-yellow-soft) !important; }
body.daet .row-menu-pop .btn-danger,
body.daet .row-menu-pop .btn-danger i { color: var(--dk-red) !important; }

/* ---- 14. MENU & STOCK ---- */
/* =====================================================================
   PHASE 5 — MENU & STOCK HUB (#menu-stock-hub-module)
   Mockup: P5Menu. Ang laman ng Menu tab ay iginuguhit ng
   `generateMenuContent()` (app.js); ang ⋯ ay galing sa daet-pos.js (Menu & Stock IIFE).
   ⚠️ Walang `display:…!important` sa mga pindutan/tab/card -- ang role at
      feature gating ay nagtatago gamit ang inline display at `.feature-off`.
   ===================================================================== */

/* ---- 1. Toolbar ng Menu & Pricing ---- */
body.daet #menu-stock-hub-module .mm-search {
    min-height: 42px;
    padding: 0 12px;
    background: #fff;
    border: 2px solid var(--dk-ink);
    border-radius: 8px;
    color: var(--dk-ink);
}
body.daet #menu-stock-hub-module .mm-search i { color: var(--dk-red); font-size: 15px; }
body.daet #menu-stock-hub-module .mm-search input { font-size: 15px; font-weight: 600; color: var(--dk-ink); }
body.daet #menu-stock-hub-module .mm-search:focus-within { border-color: var(--dk-red); box-shadow: 0 0 0 3px var(--dk-yellow); }
body.daet #menu-stock-hub-module .mm-nomatch { color: var(--dk-ink-muted); }

/* Ang "show hidden on QR menu" na switch + ang Hide tools = iisang cream na
   panel (magkatabing elemento sila sa markup, kaya dalawang kalahati). */
body.daet #menu-stock-hub-module .menu-showout-row {
    margin: 0;
    padding: 10px 12px;
    background: var(--dk-cream);
    border: 0;
    border-radius: 10px 10px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--dk-ink);
    align-items: center;
}
body.daet #menu-stock-hub-module .menu-showout-row input { width: 20px; height: 20px; margin: 0; }
body.daet #menu-stock-hub-module .menu-showout-row b { color: var(--dk-red); }
body.daet #menu-stock-hub-module .menu-hide-tools {
    margin: 0 0 16px;
    padding: 10px 12px;
    background: var(--dk-cream);
    border-radius: 10px;
}
body.daet #menu-stock-hub-module .menu-showout-row + .menu-hide-tools {
    padding-top: 0;
    border-radius: 0 0 10px 10px;
}
body.daet #menu-stock-hub-module .menu-hide-tools .btn {
    min-height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--dk-ink);
    font-size: 13px;
    font-weight: 800;
}
body.daet #menu-stock-hub-module .menu-hide-tools .btn i { color: var(--dk-red); }
body.daet #menu-stock-hub-module .menu-hide-tools .btn:hover:not(:disabled) { background: var(--dk-yellow-soft); }
body.daet #menu-stock-hub-module .menu-hide-tools .btn:disabled { color: #8A8A8A; opacity: 1; }
body.daet #menu-stock-hub-module .menu-hide-tools .btn:disabled i { color: #B9B0A6; }
/* Ang mahabang paliwanag sa paghila -- ang grip na mismo ang nagsasabi. */
body.daet #menu-stock-hub-module .menu-reorder-hint { display: none; }

/* Hide multiple / Unhide multiple: ang naka-dikit na action bar. */
body.daet #menu-stock-hub-module .menu-hide-actionbar {
    background: var(--dk-red);
    color: var(--dk-cream);
    border-radius: 10px;
    box-shadow: none;
}
body.daet #menu-stock-hub-module .menu-hide-actionbar.is-unhide { background: var(--dk-ink); box-shadow: none; }
body.daet #menu-stock-hub-module .menu-hide-actionbar .mhs-left b { color: var(--dk-yellow); }
body.daet #menu-stock-hub-module .menu-hide-actionbar .btn-secondary { background: #fff; color: var(--dk-ink); border: 0; }
body.daet #menu-stock-hub-module .menu-hide-actionbar .btn-primary,
body.daet #menu-stock-hub-module .menu-hide-actionbar.is-unhide .btn-primary { background: var(--dk-yellow); color: var(--dk-red); border: 0; font-weight: 900; }
body.daet #menu-stock-hub-module .mcard-select { border-radius: 12px; }
body.daet #menu-stock-hub-module .mcard-select .mcard-select-box { border: 2px solid var(--dk-ink); border-radius: 7px; box-shadow: none; }
body.daet #menu-stock-hub-module .mcard-select.is-picked { background: rgba(176, 16, 16, .14); box-shadow: inset 0 0 0 3px var(--dk-red); }
body.daet #menu-stock-hub-module .mcard-select.is-picked .mcard-select-box { background: var(--dk-red); border-color: var(--dk-red); color: var(--dk-yellow); }
body.daet #menu-stock-hub-module .mcard-select-tag { background: var(--dk-ink); border-radius: 6px; }

/* ---- 2. Ang item card ----
   Litrato (dilaw, Bestseller, grip) → pangalan → presyo + category →
   "+ Add recipe" → Visible/Hidden + ⋯. GRID ang card, at `display:contents`
   ang `.menu-mcard-pricing` para magkatabi ang presyo at ang category kahit
   magkaibang lalagyan sila sa markup. WALANG overflow:hidden sa card -- ang
   litrato na lang ang may radius. */
body.daet #menu-stock-hub-module .menu-grid.menu-manage-grid {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 12px;
}
/* min-width:0 -- kung hindi, ang presyo + category ay nagpapalapad sa card
   lampas sa hanay niya at kinakain ang 12px na pagitan. */
body.daet #menu-stock-hub-module .menu-mcard-flip { min-width: 0; }
body.daet #menu-stock-hub-module .menu-mcard-flip .mcard-inner { grid-template-columns: minmax(0, 1fr); }
body.daet #menu-stock-hub-module .menu-mcard {
    display: grid;
    /* Buo laging makikita ang presyo; ang category ang pumuputol (…). */
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    grid-template-areas:
        "img   img"
        "name  name"
        "price cat"
        "stock stock"
        "act   act";
    /* Ang huling hanay ang sumasalo ng sobrang taas -- kaya magkapantay ang
       Visible/⋯ ng magkakatabing card, at dikit ang teksto sa itaas. */
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    row-gap: 6px;
    padding: 0 0 12px;
    text-align: left;
    background: #fff;
    border: 2px solid var(--dk-border);
    border-radius: 12px;
    box-shadow: none;
}
body.daet #menu-stock-hub-module .menu-mcard:hover { transform: none; border-color: var(--dk-red); box-shadow: none; }
body.daet #menu-stock-hub-module .menu-mcard .menu-item-img {
    grid-area: img;
    aspect-ratio: 3 / 2;
    margin: 0 0 4px;
    border-radius: 10px 10px 0 0;
    background: var(--dk-yellow);
}
body.daet #menu-stock-hub-module .menu-mcard-ph {
    background: var(--dk-yellow);
    color: var(--dk-red);
    font-size: 34px;
}
body.daet #menu-stock-hub-module .menu-mcard-ph i { opacity: .45; }
body.daet #menu-stock-hub-module .menu-mcard-upload {
    background: rgba(176, 16, 16, .9);
    color: var(--dk-yellow);
    font-weight: 800;
}
body.daet #menu-stock-hub-module .menu-mcard .menu-item-badge {
    top: 8px;
    left: 8px;
    padding: 3px 7px;
    background: var(--dk-red);
    color: var(--dk-yellow);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: none;
}
body.daet #menu-stock-hub-module .menu-mcard-na {
    top: 8px;
    left: 8px;
    padding: 3px 7px;
    background: var(--dk-ink);
    color: var(--dk-cream);
    border-radius: 6px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: none;
}
body.daet #menu-stock-hub-module .menu-mcard-na + .menu-item-badge { top: 34px; }
body.daet #menu-stock-hub-module .mcard-drag,
body.daet #menu-stock-hub-module .mcard-flip-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #fff;
    color: var(--dk-ink);
    box-shadow: none;
}
body.daet #menu-stock-hub-module .mcard-flip-btn { color: var(--dk-red); }
body.daet #menu-stock-hub-module .mcard-drag:hover { background: #fff; color: var(--dk-red); }
body.daet #menu-stock-hub-module .mcard-flip-btn:hover { background: #fff; transform: none; }
@media (pointer: coarse) {
    body.daet #menu-stock-hub-module .mcard-drag { width: 40px; height: 40px; border-radius: 9px; }
}
/* "N left" sa litrato: dalawang kulay ng Daet. */
body.daet #menu-stock-hub-module .mcard-left {
    height: 28px;
    border-radius: 7px;
    background: #fff;
    color: var(--dk-ink);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.daet #menu-stock-hub-module .mcard-left-dot { background: var(--dk-red); box-shadow: none; }
body.daet #menu-stock-hub-module .mcard-left--low { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet #menu-stock-hub-module .mcard-left--out { background: var(--dk-red); color: var(--dk-yellow); }
body.daet #menu-stock-hub-module .mcard-left--low .mcard-left-dot,
body.daet #menu-stock-hub-module .mcard-left--out .mcard-left-dot { background: currentColor; box-shadow: none; }
/* Nakatago: lumalabo ang litrato (hindi kulay-abo). */
body.daet #menu-stock-hub-module .menu-mcard-off .menu-item-img > img,
body.daet #menu-stock-hub-module .menu-mcard-off .menu-mcard-ph { opacity: .45; filter: none; }

body.daet #menu-stock-hub-module .menu-mcard .menu-item-name {
    grid-area: name;
    margin: 0 12px;
    padding: 0;             /* may padding ang QUEBO sa telepono */
    min-height: 0;          /* ang QUEBO ay naglalaan ng 2 linya (2.7em) */
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    color: var(--dk-ink);
}
body.daet #menu-stock-hub-module .menu-mcard-pricing { display: contents; }
body.daet #menu-stock-hub-module .menu-mcard-price {
    grid-area: price;
    align-self: center;
    margin-left: 12px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0;
    color: var(--dk-red);
}
body.daet #menu-stock-hub-module .menu-mcard-cat {
    grid-area: cat;
    align-self: center;
    justify-self: end;
    max-width: calc(100% - 18px);
    margin: 0 12px 0 6px;
    padding: 2px 8px;
    background: var(--dk-yellow-soft);
    color: var(--dk-ink-muted);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* "+ Add recipe" -- inline ang ayos ng QUEBO (gitna, abo), kaya !important. */
body.daet #menu-stock-hub-module .menu-mcard .menu-mcard-stock {
    grid-area: stock;
    margin: 0 12px !important;
    text-align: left !important;
}
body.daet #menu-stock-hub-module .menu-mcard .menu-mcard-stock a {
    color: var(--dk-red) !important;
    font-size: 13px;
    font-weight: 800 !important;
    text-decoration: none;
}
body.daet #menu-stock-hub-module .menu-mcard .menu-mcard-stock a:hover { text-decoration: underline; }

/* ---- 3. Visible / Hidden + ⋯ ---- */
body.daet #menu-stock-hub-module .menu-mcard-actions {
    grid-area: act;
    align-self: end;
    margin: 2px 12px 0;
    gap: 8px;
    align-items: center;
}
/* Ang Hide (hindi ang Discount -- pareho silang `.mcard-eye`). */
body.daet #menu-stock-hub-module .menu-mcard-actions .mcard-eye:not([data-disc-id]) {
    flex: 0 0 auto;
    width: auto;
    height: 30px;
    gap: 5px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
}
body.daet #menu-stock-hub-module .menu-mcard-actions .mcard-eye.is-on:not([data-disc-id]) { background: var(--dk-yellow-soft); color: var(--dk-ink); }
body.daet #menu-stock-hub-module .menu-mcard-actions .mcard-eye.is-on:not([data-disc-id]) i { color: var(--dk-red); }
body.daet #menu-stock-hub-module .menu-mcard-actions .mcard-eye.is-off:not([data-disc-id]) { background: var(--dk-ink); color: var(--dk-cream); }
body.daet #menu-stock-hub-module .menu-mcard-actions .mcard-eye.is-on:not([data-disc-id])::after { content: 'Visible'; }
body.daet #menu-stock-hub-module .menu-mcard-actions .mcard-eye.is-off:not([data-disc-id])::after { content: 'Hidden'; }

/* Ang ⋯ -- MALIIT (30px; ang unang mockup ay masyadong malaki). */
body.daet #menu-stock-hub-module .dk-mcard-more { margin-left: auto; }
body.daet #menu-stock-hub-module .dk-mcard-more.dk-empty { display: none; }
body.daet #menu-stock-hub-module .dk-more-toggle {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: var(--dk-yellow-soft);
    color: var(--dk-ink);
    font-size: 15px;
}
body.daet #menu-stock-hub-module .dk-more-toggle:hover { background: var(--dk-yellow); color: var(--dk-ink); border-color: transparent; }
body.daet #menu-stock-hub-module .dk-mcard-more.open .dk-more-toggle { background: var(--dk-red); color: var(--dk-yellow); border-color: transparent; }

/* Ang popup ay inililipat sa <body> habang bukas (toggleRowMenu), kaya ang
   scope ay ang sariling klase niya. !important dahil ang `.row-menu-pop .btn`
   ng QUEBO ay naka-!important (puti/abo). */
body.daet .row-menu-pop.dk-mcard-pop {
    min-width: 168px;
    padding: 6px;
    gap: 2px;
    background: #fff;
    border: 2px solid var(--dk-ink);
    border-radius: 10px;
    box-shadow: none;
}
body.daet .row-menu-pop.dk-mcard-pop .btn {
    flex: 0 0 auto;
    width: 100%;
    height: 38px;
    min-height: 38px;
    gap: 10px;
    padding: 0 10px;
    border-radius: 7px;
    background: #fff !important;
    color: var(--dk-ink) !important;
    font-size: 14px;
    font-weight: 800;
    justify-content: flex-start;
}
body.daet .row-menu-pop.dk-mcard-pop .btn i { width: 16px; color: var(--dk-red) !important; font-size: 14px; }
body.daet .row-menu-pop.dk-mcard-pop .btn:hover { background: var(--dk-yellow-soft) !important; }
body.daet .row-menu-pop.dk-mcard-pop .mcard-btn-del { background: var(--dk-yellow-soft) !important; color: var(--dk-red) !important; font-weight: 900; }
body.daet .row-menu-pop.dk-mcard-pop .mcard-btn-del:hover { background: var(--dk-yellow) !important; }
body.daet .row-menu-pop.dk-mcard-pop .mcard-btn-del::after { content: 'Delete'; }
/* Discount: ang estado ay nasa salita (dating kulay lang: berde/dilaw). */
body.daet .row-menu-pop.dk-mcard-pop [data-disc-id]::after { content: 'Discount · Off'; }
body.daet .row-menu-pop.dk-mcard-pop [data-disc-id].is-disc-on::after { content: 'Discount · On'; }
body.daet .row-menu-pop.dk-mcard-pop [data-disc-id].is-disc-mixed::after { content: 'Discount · Some'; }
body.daet .row-menu-pop.dk-mcard-pop [data-disc-id].is-disc-on i,
body.daet .row-menu-pop.dk-mcard-pop [data-disc-id].is-disc-mixed i { color: var(--dk-red) !important; }
body.daet .row-menu-pop.dk-mcard-pop [data-disc-id]:not(.is-disc-on):not(.is-disc-mixed) i { color: #B9B0A6 !important; }

/* Kapag hindi tumakbo ang JS: magmukha pa ring maayos ang Edit/Delete. */
body.daet #menu-stock-hub-module .menu-mcard-actions > .mcard-btn-edit { background: #fff; color: var(--dk-ink); border: 2px solid var(--dk-ink); height: 30px; }
body.daet #menu-stock-hub-module .menu-mcard-actions > .mcard-btn-del { background: var(--dk-red); color: var(--dk-yellow); height: 30px; }

/* Walang edit rights (kitchen/barista): ang Available/Unavailable na toggle. */
body.daet #menu-stock-hub-module .mcard-avail-toggle {
    grid-area: act;
    align-self: end;
    justify-self: start;
    width: auto;
    min-height: 36px;
    margin: 2px 12px 0;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    justify-content: flex-start;
}
body.daet #menu-stock-hub-module .mcard-avail-toggle.is-on { background: var(--dk-yellow-soft); color: var(--dk-ink); }
body.daet #menu-stock-hub-module .mcard-avail-toggle.is-on i { color: var(--dk-red); }
body.daet #menu-stock-hub-module .mcard-avail-toggle.is-off { background: var(--dk-ink); color: var(--dk-cream); }
body.daet #menu-stock-hub-module .mcard-avail-toggle:focus-visible { box-shadow: 0 0 0 3px var(--dk-yellow); }

/* Likod ng card (ⓘ) */
body.daet #menu-stock-hub-module .mcard-back {
    border: 2px solid var(--dk-border);
    border-radius: 12px;
    box-shadow: none;
}
body.daet #menu-stock-hub-module .mcard-back-head,
body.daet #menu-stock-hub-module .mcard-back-foot { border-color: var(--dk-yellow-soft); }
body.daet #menu-stock-hub-module .mcard-back-name { font-weight: 900; color: var(--dk-ink); }
body.daet #menu-stock-hub-module .mcard-back .mcard-flip-back { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet #menu-stock-hub-module .mcard-chip,
body.daet #menu-stock-hub-module .mcard-chip--good { background: var(--dk-yellow-soft); color: var(--dk-ink); border-radius: 6px; font-weight: 800; }
body.daet #menu-stock-hub-module .mcard-back-price { color: var(--dk-red); font-weight: 900; }
body.daet #menu-stock-hub-module .mcard-back .mcard-btn-edit { background: #fff; color: var(--dk-ink); border: 2px solid var(--dk-ink); }

/* ---- 4. Ibang tab: Inventory, Production, Procurement, Waste ---- */
/* Hanapan na may inline na icon (Inventory) at `.search-box` (Procurement,
   Waste, Purchase Orders). */
body.daet #menu-stock-hub-module .search-box i { color: var(--dk-red); }
body.daet #menu-stock-hub-module .search-box input {
    min-height: 44px;
    background: #fff;
    border: 2px solid var(--dk-ink);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--dk-ink);
}
body.daet #menu-stock-hub-module .search-box input:focus { outline: none; border-color: var(--dk-red); box-shadow: 0 0 0 3px var(--dk-yellow); }
body.daet #menu-stock-hub-module .fa-search[style*="position:absolute"] { color: var(--dk-red) !important; }

/* Status ng stock: inline ang kulay ng QUEBO (berde/kahel/pula), kaya
   pinipili ayon sa kulay na iyon. */
body.daet #menu-stock-hub-module .stock-badge {
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
}
body.daet #menu-stock-hub-module .stock-badge[style*="#1B7A43"] { background: var(--dk-yellow-soft) !important; color: var(--dk-ink) !important; }
body.daet #menu-stock-hub-module .stock-badge[style*="#B26A00"] { background: var(--dk-yellow) !important; color: var(--dk-red) !important; }
/* Lakas ng tunog ayon sa bigat (QA): Out of stock = buong pula (pinakamaingay),
   Critical = puting may pulang gilid, Low = dilaw, OK = mapusyaw. */
body.daet #menu-stock-hub-module .stock-badge[style*="#C62828"] { background: #fff !important; color: var(--dk-red) !important; box-shadow: inset 0 0 0 2px var(--dk-red); }
body.daet #menu-stock-hub-module .stock-badge[style*="#7f1d1d"] { background: var(--dk-red) !important; color: var(--dk-yellow) !important; }
body.daet #menu-stock-hub-module .stock-badge[style*="#1B7A43"] .stock-dot,
body.daet #menu-stock-hub-module .stock-badge[style*="#B26A00"] .stock-dot,
body.daet #menu-stock-hub-module .stock-badge[style*="#C62828"] .stock-dot,
body.daet #menu-stock-hub-module .stock-badge[style*="#7f1d1d"] .stock-dot { background: currentColor !important; }

/* Supplier: aktibo / hindi */
body.daet #menu-stock-hub-module .supplier-status {
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}
body.daet #menu-stock-hub-module .supplier-status.active { background: var(--dk-yellow-soft); color: var(--dk-ink); }
body.daet #menu-stock-hub-module .supplier-status.inactive { background: var(--dk-red); color: var(--dk-yellow); }

/* Waste: summary na parang KPI ng hub; dahilan sa dalawang kulay (ang icon
   ang nag-iiba sa kanila). */
body.daet #menu-stock-hub-module .waste-summary-cards,
body.daet #menu-stock-hub-module .po-summary-cards { gap: 10px; }
body.daet #menu-stock-hub-module .po-summary-card,
body.daet #menu-stock-hub-module .waste-summary-card {
    padding: 10px 14px;
    background: var(--dk-yellow-soft);
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}
body.daet #menu-stock-hub-module .po-summary-icon { display: none; }
body.daet #menu-stock-hub-module .po-summary-value,
body.daet #menu-stock-hub-module .waste-summary-value { font-size: 24px; font-weight: 900; color: var(--dk-red); }
body.daet #menu-stock-hub-module .po-summary-label,
body.daet #menu-stock-hub-module .waste-summary-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dk-ink-muted);
}
body.daet #menu-stock-hub-module .waste-reason-badge {
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    background: var(--dk-yellow-soft);
    color: var(--dk-red);
}
body.daet #menu-stock-hub-module .waste-reason-badge.spoiled,
body.daet #menu-stock-hub-module .waste-reason-badge.expired,
body.daet #menu-stock-hub-module .waste-reason-badge.theft { background: var(--dk-red); color: var(--dk-yellow); }

/* Production: ang walang lamang estado. */
body.daet #menu-stock-hub-module #productionBody .empty-state {
    background: #fff;
    border: 2px dashed var(--dk-border);
    border-radius: 12px;
}
body.daet #menu-stock-hub-module .prod-empty-icon { color: var(--dk-red); }
body.daet #menu-stock-hub-module .prod-empty-title { color: var(--dk-ink); font-weight: 900; }

/* Ang ⋮ ng mga table sa hub na ito. */
body.daet #menu-stock-hub-module .data-table .row-menu-toggle {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: var(--dk-yellow-soft);
    color: var(--dk-ink);
}
body.daet #menu-stock-hub-module .data-table .row-menu-toggle:hover { background: var(--dk-yellow); }
body.daet #menu-stock-hub-module .data-table .row-menu.open .row-menu-toggle { background: var(--dk-red); color: var(--dk-yellow); border-color: transparent; }

/* ---- 5. Mga modal ng hub na ito (nasa <body>, kaya ang id ang scope) ----
   Hide this item (ang daan ng Hide/Available) at Hide history. Inline ang
   kayumanggi ng QUEBO, kaya !important sa kulay lang. */
body.daet #hideReasonModal > div { border-radius: 12px !important; box-shadow: none !important; }
body.daet #hideReasonModal h3 { font-weight: 900 !important; color: var(--dk-ink); }
body.daet #hideReasonModal h3 i,
body.daet #hideHistoryModal h3 i,
body.daet #hideHistoryModal .fa-clock-rotate-left { color: var(--dk-red) !important; }
body.daet #hideReasonModal label[for="hideReasonText"] {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dk-ink) !important;
}
body.daet #hideReasonModal .hr-item-chip { background: var(--dk-yellow-soft); color: var(--dk-ink); border-radius: 6px; font-weight: 800; }
body.daet #hideReasonModal .hr-chip {
    background: var(--dk-yellow-soft);
    border: 0;
    border-radius: 8px;
    color: var(--dk-ink);
    font-weight: 700;
}
body.daet #hideReasonModal .hr-chip:hover { background: var(--dk-yellow); }
body.daet #hideReasonModal .hr-chip.is-on { background: var(--dk-red); color: var(--dk-yellow); }
body.daet #hideReasonModal button[onclick*="closeHideReasonPrompt"] {
    background: #fff !important;
    border: 2px solid var(--dk-ink) !important;
    border-radius: 10px !important;
    color: var(--dk-ink) !important;
    font-weight: 800 !important;
}
body.daet #hideReasonModal button[onclick*="submitHideReason"] {
    background: var(--dk-red) !important;
    color: var(--dk-yellow) !important;
    border-radius: 10px !important;
    font-weight: 900 !important;
}
body.daet #hideHistoryModal .hh-reason { color: var(--dk-ink); font-weight: 700; }
body.daet #hideHistoryModal .hh-reason .fa-quote-left { color: var(--dk-red); }

/* Lalagyang 521–820px ang lapad (hal. 1024 na may sidebar, 820 na naka-
   minimize ang sidebar, 768 na tablet): ang naka-pin na Actions column
   (sticky, styles.css §15) ay tumatakip sa naunang column kapag bahagyang mas
   malapad ang table kaysa sa lalagyan -- "Recorded by" ng Waste at "Rating" ng
   Suppliers ("Syst…" sa ilalim ng ⋯), at walang anino ang Daet na nagsasabing
   may nasa ilalim. Dito ay hindi naka-pin: ang buong table ang dumudulas
   pakanan, walang natatakpan. Lapad ng LALAGYAN ang batayan, hindi ng screen:
   iba ang natitira kapag 280px ang sidebar, 76px (naka-minimize), o wala
   (<=768). (Sa <521px ay naka-pin pa rin -- doon ay daan-daang px ang lampas
   at malayo ang ⋯ kung hindi; sa <=480 ay card na ang table -- doon ay hindi
   ginagawang container, dahil pinipigilan nito ang pag-collapse ng margin ng
   huling card at 12px na mas mataas ang lalagyan.) */
@media (min-width: 481px) {
    body.daet #menu-stock-hub-module .table-container { container: dk-table / inline-size; }
}
@container dk-table (min-width: 521px) and (max-width: 820px) {
    body.daet #menu-stock-hub-module .table-container .data-table:has(td:last-child button) th:last-child,
    body.daet #menu-stock-hub-module .table-container .data-table:has(td:last-child button) td:last-child { position: static; }
}

/* ---- 6. Telepono ---- */
@media (max-width: 640px) {
    /* padding-bottom: 0 -- ang 104px ng QUEBO ay para sa View Order bar ng POS. */
    body.daet #menu-stock-hub-module .menu-grid.menu-manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 0; }
    body.daet #menu-stock-hub-module .menu-mcard .menu-item-name { font-size: 14px; }
    /* Makitid ang card: ang category ay sariling hanay sa ilalim ng presyo. */
    body.daet #menu-stock-hub-module .menu-mcard {
        grid-template-areas:
            "img   img"
            "name  name"
            "price price"
            "cat   cat"
            "stock stock"
            "act   act";
        grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    }
    body.daet #menu-stock-hub-module .menu-mcard-cat { justify-self: start; margin: 0 12px; max-width: calc(100% - 24px); }
    body.daet #menu-stock-hub-module .menu-mcard-actions { gap: 6px; }
    /* Summary ng Waste/PO: tatlo sa isang hanay, hindi tig-iisang malaking kahon. */
    body.daet #menu-stock-hub-module .waste-summary-cards,
    body.daet #menu-stock-hub-module .po-summary-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    body.daet #menu-stock-hub-module .po-summary-card,
    body.daet #menu-stock-hub-module .waste-summary-card { padding: 8px 10px; min-width: 0; }
    body.daet #menu-stock-hub-module .po-summary-value,
    body.daet #menu-stock-hub-module .waste-summary-value { font-size: 17px; overflow-wrap: anywhere; }
    body.daet #menu-stock-hub-module .po-summary-label,
    body.daet #menu-stock-hub-module .waste-summary-label { font-size: 10px; }
    body.daet #menu-stock-hub-module .menu-mcard-actions .mcard-eye:not([data-disc-id]) { padding: 0 8px; }
}

/* ---- 15. STAFF & HR ---- */
/* =====================================================================
   PHASE 5 — STAFF & HR HUB (#staff-hub-module). Mockup: P5Staff.
   Nakasandal sa seksyon 13 (shared) (badges, forms, sub-tabs, modal) at sa
   seksyon 7–8 ng daet-pos.css (buttons, table header, hub header).
   Inline na kulay ng QUEBO dito: `color:#6F4E37` (×17, walang background-
   color), berdeng "today"/shift (#e7f6ec, #f4fbf6, #166534) at ang
   kayumangging gradient ng time clock -- attribute selector + !important.
   HINDI ginagalaw ang display ng anumang pindutan (role/feature gating).
   ===================================================================== */

/* ---- Inline na kayumanggi → pula (icon, h3, aktibong sub-tab) ---- */
body.daet #staff-hub-module [style*="color:#6F4E37"],
body.daet #staff-hub-module [style*="color: #6F4E37"] { color: var(--dk-red) !important; }

/* ---- Employees ---- */
/* Avatar: dilaw na parisukat + pulang inisyal (hindi pulang bilog). */
body.daet #staff-hub-module .employee-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--dk-yellow);
    color: var(--dk-red);
    font-weight: 900;
    font-size: 15px;
}
body.daet #staff-hub-module .data-table:has(.employee-avatar) td:first-child { font-weight: 800; }
body.daet #staff-hub-module .desig-chip,
body.daet #staff-hub-module .role-badge {
    padding: 4px 10px;
    border: 0;
    border-radius: 6px;
    background: var(--dk-yellow-soft);
    color: var(--dk-red);
    font-size: 13px;
    font-weight: 800;
}
body.daet #staff-hub-module .desig-none { color: var(--dk-ink-muted); }
/* Active sa listahan ng empleyado = dilaw + pula (mockup). Ang ibang table
   (Payroll: Paid) ay sumusunod sa seksyon 13 at sa status chip ng seksyon 10. */
body.daet #staff-hub-module .data-table:has(.employee-avatar) .status-badge.success {
    background: var(--dk-yellow);
    color: var(--dk-red);
}
/* ⋯ ng bawat hilera: mapusyaw na dilaw na parisukat, pahalang na tuldok. */
body.daet .row-menu-toggle {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: var(--dk-yellow-soft);
    color: var(--dk-ink);
}
body.daet .row-menu-toggle:hover { background: var(--dk-yellow); }
body.daet .row-menu.open .row-menu-toggle { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .row-menu-toggle .fa-ellipsis-vertical::before { content: "\f141"; }

/* ---- Mga period chip (Today / Yesterday / 7 Days…, Meals) ----
   Simpleng `.btn.btn-sm` na abo sa QUEBO → mapusyaw na dilaw na chip. */
body.daet #staff-hub-module .hub-content .btn.btn-sm:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info) {
    background: var(--dk-yellow-soft);
    color: var(--dk-ink);
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    box-shadow: none;
}
body.daet #staff-hub-module .hub-content .btn.btn-sm:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-info):hover {
    background: var(--dk-yellow);
}
body.daet #staff-hub-module .att-range__field span { color: var(--dk-ink-muted); font-weight: 700; }

/* ---- Attendance: Time Clock & Log / Daily Grid (inline na underline) ---- */
body.daet #staff-hub-module div[style*="border-bottom:1px solid #ece4da"] { border-bottom-color: var(--dk-yellow-soft) !important; }
body.daet #staff-hub-module button[onclick^="switchAttSubTab"] {
    color: var(--dk-ink) !important;
    border-bottom: 5px solid transparent !important;
    font-weight: 700 !important;
}
body.daet #staff-hub-module button[onclick^="switchAttSubTab"][style*="solid #6F4E37"] {
    color: var(--dk-red) !important;
    border-bottom-color: var(--dk-red) !important;
    font-weight: 900 !important;
}
/* Ang time clock: kayumangging gradient → pulang plato, flat. */
body.daet #staff-hub-module div[style*="#573C2A 0%, #6F4E37 100%"] {
    background: var(--dk-red) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
body.daet #staff-hub-module #attLiveClock { color: var(--dk-yellow); font-weight: 900 !important; }
/* Avatar sa listahan ng pipiliing empleyado: inline ang kulay ayon sa role. */
body.daet .att-emp__avatar {
    background: var(--dk-yellow) !important;
    color: var(--dk-red) !important;
    border-radius: 8px !important;
    font-weight: 900;
}

/* ---- Daily Grid at Schedule: ang header ----
   Hindi sila inaabot ng pulang header ng daet-pos.css (may inline na
   `background:#fff` ang unang th at may inline na kulay ang mga anak), kaya
   dito sila binibigyan: pareho ng ibang table -- pula, cream na uppercase.
   Ang dalawang table lang na may naka-pin na "Staff" na th. */
body.daet #staff-hub-module .data-table:has(th[style*="position:sticky"]) th {
    background: var(--dk-red);
    color: var(--dk-cream);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 0;
}
body.daet #staff-hub-module .data-table:has(th[style*="position:sticky"]) th:first-child { border-radius: 8px 0 0 8px; }
body.daet #staff-hub-module .data-table:has(th[style*="position:sticky"]) th:last-child  { border-radius: 0 8px 8px 0; }
body.daet #staff-hub-module .data-table th[style*="position:sticky"] { background: var(--dk-red) !important; }
/* CLOSED (inline #b91c1c): madilim na chip na dilaw ang titik -- kita sa
   pulang header at sa dilaw na "today". */
body.daet #staff-hub-module .data-table th div[style*="color:#b91c1c"] {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--dk-ink);
    color: var(--dk-yellow) !important;
    font-weight: 900 !important;
}
body.daet #staff-hub-module .data-table th div[style*="color:#1a1a1a"] { color: var(--dk-cream) !important; }
body.daet #staff-hub-module .data-table th div[style*="color:#9ca3af"] { color: var(--dk-cream) !important; opacity: .8; }
/* Ngayong araw: berde → dilaw. */
body.daet #staff-hub-module .data-table th[style*="background:#e7f6ec"] { background: var(--dk-yellow) !important; }
body.daet #staff-hub-module .data-table th[style*="background:#e7f6ec"] div { color: var(--dk-red) !important; opacity: 1; }
body.daet #staff-hub-module td[style*="background:#f4fbf6"] { background: var(--dk-yellow-soft) !important; }
/* Shift chip: puting kahon na may dilaw na gilid; pula ang oras. */
body.daet #staff-hub-module div[onclick^="editShift"][style*="background:#e7f6ec"] {
    background: #fff !important;
    border: 2px solid var(--dk-border) !important;
    border-radius: 8px !important;
}
body.daet #staff-hub-module div[onclick^="editShift"] div[style*="color:#166534"] { color: var(--dk-red) !important; font-weight: 900 !important; }
body.daet #staff-hub-module div[onclick^="editShift"] div[style*="color:#374151"] { color: var(--dk-ink) !important; }
/* "Signed in as … Cashier" (My Attendance): inline na berdeng chip. */
body.daet #staff-hub-module span[style*="background:#e7f6ec"] {
    background: var(--dk-yellow-soft) !important;
    color: var(--dk-red) !important;
    font-weight: 800 !important;
}
body.daet #staff-hub-module a[style*="color:#cbd5e1"] { color: var(--dk-border) !important; }
body.daet #staff-hub-module a[style*="color:#cbd5e1"]:hover { color: var(--dk-red) !important; }
body.daet #staff-hub-module td[style*="position:sticky"] { font-weight: 800 !important; color: var(--dk-ink) !important; }
body.daet #staff-hub-module .as-chip { border-radius: 6px; }

/* ---- Status ng attendance (`.clock-status` + clock-*) ----
   Parisukat na chip sa dalawang kulay; pareho ang ibig sabihin ng QUEBO:
   Present = karaniwan (mahina), Late = bantayan, Absent = problema,
   Day off = pahinga (madilim), No sched / Out = talaan lang (puti). */
body.daet #staff-hub-module .clock-status {
    border-radius: 6px;
    font-weight: 900;
    letter-spacing: .02em;
}
body.daet #staff-hub-module .clock-in      { background: var(--dk-yellow-soft); color: var(--dk-ink); }
body.daet #staff-hub-module .clock-late    { background: var(--dk-yellow); color: var(--dk-red); }
body.daet #staff-hub-module .clock-absent  { background: var(--dk-red); color: var(--dk-yellow); }
body.daet #staff-hub-module .clock-off     { background: var(--dk-ink); color: var(--dk-cream); }
body.daet #staff-hub-module .clock-nosched { background: #fff; color: var(--dk-ink-muted); box-shadow: inset 0 0 0 2px var(--dk-border); }
body.daet #staff-hub-module .clock-out     { background: #fff; color: var(--dk-red); box-shadow: inset 0 0 0 2px var(--dk-red); }

/* Naka-pin na Actions column ng QUEBO: walang abong anino (flat). */
body.daet .table-container .data-table:has(td:last-child button) tbody td:last-child,
body.daet .table-container .data-table:has(td:last-child button) thead th:last-child { box-shadow: none; }

/* ---- Generate Payroll (modal sa <body>, kaya walang #staff-hub-module) ----
   Ang `1fr 1fr` ng QUEBO ay hindi lumiliit sa ilalim ng lapad ng date input,
   at mas malapad ang input ng Daet (15px/600 + 2px na border) -- kaya sa
   telepono ay naputol sa kanan ang "Pay Period End". minmax(0,1fr) + 100%, at
   isa kada hanay sa <=480px (sa 390px ay ~135px lang sana ang bawat petsa). */
body.daet .payroll-generator-form .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.daet .payroll-generator-form .form-row .form-control { width: 100%; min-width: 0; }
@media (max-width: 480px) {
    body.daet .payroll-generator-form .form-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* 13th Month Pay → Preview: inline na `repeat(4, 1fr)` ang buod -- hanggang
   ~570px ay lumalampas ang Total Tax/Net at dumudulas ang buong modal (~511px
   ang kailangan ng apat). Dalawa kada hanay sa <=600px, may palugit para sa
   mas malalaking halaga (ang table ay may sariling scroll). */
@media (max-width: 600px) {
    body.daet #genericModal .preview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---- Telepono ---- */
@media (max-width: 768px) {
    body.daet #staff-hub-module .employee-avatar { width: 34px; height: 34px; }
}

/* ---- 16. FINANCE ---- */
/* =====================================================================
   PHASE 5 — FINANCE HUB (#finance-hub-module). Itsura lang; ang layout ay
   sa QUEBO pa rin. Maraming inline na kulay sa app.js (#6F4E37, #7a6a5c,
   #9a8a7c, #ece4da, #2c221b, 999px na pill) -- kaya attribute selector +
   !important. HINDI kailanman `display:...!important` sa button/tab.
   Panuntunan ng kulay sa KPI: lahat ng numero ay pula; ang ALERTO (negatibo,
   kulang) ay matingkad na dilaw na tile -- para hindi nawawala ang kahulugan
   kahit iisa ang kulay ng numero.
   ===================================================================== */

/* ---- 1. Mga kulay na inline sa buong hub ---- */
body.daet #finance-hub-module [style*="color:#7a6a5c"],
body.daet #finance-hub-module [style*="color: #7a6a5c"],
body.daet #finance-hub-module [style*="color:#9a8a7c"],
body.daet #finance-hub-module [style*="color:#b8a894"],
body.daet #finance-hub-module [style*="color:#78716c"],
body.daet #finance-hub-module [style*="color:#8a8f98"],
body.daet #finance-hub-module [style*="color:#9aa1a9"] { color: var(--dk-ink-muted) !important; }
body.daet #finance-hub-module [style*="color:#2c221b"],
body.daet #finance-hub-module [style*="color:#3a2a1e"],
body.daet #finance-hub-module [style*="color:#1f2937"] { color: var(--dk-ink) !important; }
body.daet #finance-hub-module [style*=" color:#6F4E37"],
body.daet #finance-hub-module [style*=";color:#6F4E37"],
body.daet #finance-hub-module [style^="color:#6F4E37"] { color: var(--dk-red) !important; }
body.daet #finance-hub-module [style*="border-top:1px solid #ece4da"],
body.daet #finance-hub-module [style*="border-top:2px solid #ece4da"] { border-top-color: var(--dk-border) !important; }
body.daet #finance-hub-module [style*="border-top:1px dashed #ece4da"] { border-top-color: var(--dk-border) !important; }

/* ---- 2. Period chips (Today / This week / This month / All / petsa) ----
   Aktibo = may `background:#6F4E37` sa inline style. */
body.daet #finance-hub-module button[onclick^="setFinScope"],
body.daet #finance-hub-module label:has(> input[onchange^="setFinDate"]) {
    min-height: 36px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--dk-yellow-soft) !important;
    color: var(--dk-ink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
body.daet #finance-hub-module label:has(> input[onchange^="setFinDate"]) { display: inline-flex; align-items: center; }
body.daet #finance-hub-module button[onclick^="setFinScope"]:hover { background: var(--dk-yellow) !important; }
body.daet #finance-hub-module button[onclick^="setFinScope"][style*="background:#6F4E37"],
body.daet #finance-hub-module label:has(> input[onchange^="setFinDate"])[style*="background:#6F4E37"] {
    background: var(--dk-red) !important;
    color: var(--dk-yellow) !important;
    font-weight: 900 !important;
}
body.daet #finance-hub-module input[onchange^="setFinDate"] { font-size: 13px !important; font-weight: 700 !important; }
/* Mga filter ng transaksyon sa Cash Drawer (`data-cdf`). */
body.daet #finance-hub-module button[data-cdf] {
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--dk-yellow-soft) !important;
    color: var(--dk-ink) !important;
    font-weight: 700 !important;
}
/* Ang napili: "background:#6F4E37" sa template, pero ang `setCdTxFilter`
   (app.js) ay `b.style.background = '#6F4E37'` -- isinusulat ulit ng Chrome
   ang attribute bilang "background: rgb(111, 78, 55)", kaya kailangan ang
   dalawang anyo; kung hindi, walang chip na naka-highlight pagka-click
   (REG-24b). */
body.daet #finance-hub-module button[data-cdf][style*="background:#6F4E37"],
body.daet #finance-hub-module button[data-cdf][style*="background: rgb(111, 78, 55)"] {
    background: var(--dk-red) !important;
    color: var(--dk-yellow) !important;
    font-weight: 900 !important;
}

/* ---- 3. DAILY REPORT (.dsum) ---- */
body.daet #finance-hub-module .dsum__title { font-size: 20px; font-weight: 900; color: var(--dk-ink); }
body.daet #finance-hub-module .dsum__date { color: var(--dk-ink-muted); font-weight: 600; }
body.daet #finance-hub-module .dsum__line {
    background: var(--dk-yellow-soft);
    border: 0;
    border-radius: 8px;
    color: var(--dk-ink);
}
body.daet #finance-hub-module .dsum-hero {
    background: var(--dk-yellow-soft);
    border: 0;
    border-radius: 12px;
    box-shadow: none;
}
body.daet #finance-hub-module .dsum-hero.is-neg { background: var(--dk-yellow); }
body.daet #finance-hub-module .dsum-hero__label {
    position: relative;
    padding-top: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dk-ink-muted);
}
body.daet #finance-hub-module .dsum-hero__label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 6px;
    background: var(--dk-red);
}
body.daet #finance-hub-module .dsum-hero__val {
    font-size: 48px;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.05;
}
body.daet #finance-hub-module .dsum-hero.is-pos .dsum-hero__val,
body.daet #finance-hub-module .dsum-hero.is-neg .dsum-hero__val { color: var(--dk-red); }
body.daet #finance-hub-module .dsum-hero__sub { color: var(--dk-ink-muted); font-size: 14px; font-weight: 700; }
body.daet #finance-hub-module .dsum-hero__io { border-left: 0; padding-left: 0; gap: 10px; }
body.daet #finance-hub-module .dsum-io {
    padding: 12px 14px;
    background: #fff;
    border-radius: 10px;
}
body.daet #finance-hub-module .dsum-io__ic { width: 36px; height: 36px; border-radius: 8px; }
body.daet #finance-hub-module .dsum-io--in .dsum-io__ic { background: var(--dk-yellow); color: var(--dk-red); }
body.daet #finance-hub-module .dsum-io--out .dsum-io__ic { background: var(--dk-ink); color: var(--dk-cream); }
body.daet #finance-hub-module .dsum-io__l { font-size: 14px; font-weight: 800; color: var(--dk-ink); }
body.daet #finance-hub-module .dsum-io__v { font-size: 18px; font-weight: 900; color: var(--dk-ink); }

body.daet #finance-hub-module .dsum-mini__c {
    border: 2px solid var(--dk-border);
    border-radius: 12px;
    box-shadow: none;
}
body.daet #finance-hub-module .dsum-mini__ic { background: var(--dk-yellow-soft); color: var(--dk-red); border-radius: 8px; }
body.daet #finance-hub-module .dsum-mini__v { font-size: 24px; font-weight: 900; color: var(--dk-ink); }
body.daet #finance-hub-module .dsum-mini__l {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dk-ink-muted);
}
body.daet #finance-hub-module .dsum-mini__d { color: var(--dk-ink-muted); }
body.daet #finance-hub-module .dsum-section-label {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--dk-ink-muted);
}
body.daet #finance-hub-module .dsum-panel {
    border: 2px solid var(--dk-border);
    border-radius: 12px;
    box-shadow: none;
}
body.daet #finance-hub-module .dsum-panel__t {
    font-size: 15px;
    font-weight: 900;
    color: var(--dk-ink);
    border-bottom: 2px solid var(--dk-yellow-soft);
}
body.daet #finance-hub-module .dsum-panel__t i { color: var(--dk-red); }
body.daet #finance-hub-module .dsum-panel__t em { color: var(--dk-ink-muted); font-style: normal; font-weight: 700; }
body.daet #finance-hub-module .dsum-row { color: var(--dk-ink); font-weight: 600; }
body.daet #finance-hub-module .dsum-row strong { color: var(--dk-ink); font-weight: 800; }
body.daet #finance-hub-module .dsum-row em { color: var(--dk-ink-muted); }
body.daet #finance-hub-module .dsum-row__ic { color: var(--dk-red); }
body.daet #finance-hub-module .dsum-rank { border-radius: 6px; background: var(--dk-yellow); color: var(--dk-red); font-weight: 900; }
body.daet #finance-hub-module .dsum-row--total { border-top: 2px solid var(--dk-border); }
body.daet #finance-hub-module .dsum-row--total strong { color: var(--dk-red); font-size: 16px; font-weight: 900; }
body.daet #finance-hub-module .dsum-row--cash { background: var(--dk-yellow-soft); border-radius: 8px; }
body.daet #finance-hub-module .dsum-row--cash .dsum-row__ic,
body.daet #finance-hub-module .dsum-row--cash strong { color: var(--dk-red); }
body.daet #finance-hub-module .dsum-row--warn span,
body.daet #finance-hub-module .dsum-row--warn strong { color: var(--dk-red-dark); }
body.daet #finance-hub-module .dsum-row--warn .dsum-row__ic { color: var(--dk-red); }
body.daet #finance-hub-module .dsum-var.is-balanced strong { color: var(--dk-ink); }
body.daet #finance-hub-module .dsum-var.is-over strong { color: var(--dk-red-dark); }
body.daet #finance-hub-module .dsum-var.is-short strong { color: var(--dk-red); }
body.daet #finance-hub-module .dsum-empty { color: var(--dk-ink-muted); }
body.daet #finance-hub-module .dsum-details > summary {
    background: var(--dk-yellow-soft);
    border: 0;
    border-radius: 8px;
    color: var(--dk-ink);
    font-weight: 900;
}
body.daet #finance-hub-module .dsum-details > summary:hover { background: var(--dk-yellow); border: 0; }
body.daet #finance-hub-module .dsum-details > summary::after { color: var(--dk-red); }
body.daet #finance-hub-module .dsum-details > summary:focus-visible { outline: 3px solid var(--dk-red); }
/* Mga paalala (amber sa QUEBO) -> dilaw ng Daet. */
body.daet #finance-hub-module [style*="background:#fef3c7"],
body.daet #finance-hub-module [style*="background:#fffbeb"],
body.daet #finance-hub-module [style*="background:#FFFBEB"] {
    background: var(--dk-yellow) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-red-dark) !important;
}

/* ---- 4. KPI tile na inline (Cash Flow `card()`, Costing `tile()`) ----
   Mapusyaw na dilaw + pulang numero; ang alerto (pulang halaga sa QUEBO,
   #b91c1c) ay matingkad na dilaw na tile. */
body.daet #finance-hub-module div[style*="min-width:150px; background:#fff; border:1px solid #ece4da"],
body.daet #finance-hub-module div[style*="min-width:150px; background:#fff; border:1px solid #eceef1"] {
    background: var(--dk-yellow-soft) !important;
    border: 0 !important;
    border-radius: 10px !important;
}
body.daet #finance-hub-module div[style*="min-width:150px; background:#fff"]:has(> div[style*="color:#b91c1c"]) {
    background: var(--dk-yellow) !important;
}
/* "Watch" (amber sa QUEBO): puting tile na may dilaw na gilid -- nasa gitna
   ng Healthy (mapusyaw) at Alert (matingkad na dilaw). */
body.daet #finance-hub-module div[style*="min-width:150px; background:#fff"]:has(> div[style*="color:#92400e"]) {
    background: #fff !important;
    box-shadow: inset 0 0 0 3px var(--dk-yellow);
}
body.daet #finance-hub-module div[style*="min-width:150px; background:#fff"] > div:first-child {
    color: var(--dk-ink-muted) !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
}
body.daet #finance-hub-module div[style*="font-size:23px; font-weight:800"],
body.daet #finance-hub-module div[style*="min-width:150px; background:#fff"] > div[style*="font-size:22px; font-weight:800"] {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: var(--dk-red) !important;
    letter-spacing: -.02em;
}
/* Ang listahan ng gastos ayon sa uri (Cash Flow). */
body.daet #finance-hub-module div[style*="border:1px solid #ece4da; border-radius:12px; overflow:hidden"] {
    border: 2px solid var(--dk-border) !important;
}
body.daet #finance-hub-module div[style*="border-top:1px solid #f1eae1"] { border-top-color: var(--dk-yellow-soft) !important; }
body.daet #finance-hub-module div[style*="background:#f1eae1"] { background: var(--dk-yellow-soft) !important; border-radius: 4px !important; }
body.daet #finance-hub-module div[style*="background:#f1eae1"] > div[style*="background:#6F4E37"] { background: var(--dk-red) !important; }
body.daet #finance-hub-module div[style*="background:#faf6f0"],
body.daet #finance-hub-module td[style*="background:#faf6f0"],
body.daet #finance-hub-module div[style*="background:#faf7f2"] {
    background: var(--dk-yellow-soft) !important;
    border-color: var(--dk-border) !important;
}
body.daet #finance-hub-module i[style*="color:#c9bbae"] { color: var(--dk-red) !important; }
body.daet #finance-hub-module select[style*="border:1px solid #d9cab6"],
body.daet #finance-hub-module input[style*="border:1px solid #d9cab6"] {
    border: 2px solid var(--dk-ink) !important;
    border-radius: 6px !important;
    color: var(--dk-ink) !important;
}

/* ---- 5. PAYMENTS: mga card ---- */
body.daet #finance-hub-module div[style*="min-width:170px; background:#fff"] {
    background: var(--dk-yellow-soft) !important;
    color: var(--dk-ink) !important;
    border: 0 !important;
}
body.daet #finance-hub-module div[style*="min-width:170px; background:#fff"] > div[style*="font-size:22px"] { color: var(--dk-red); font-weight: 900 !important; }
body.daet #finance-hub-module div[style*="min-width:170px; background:#6F4E37"] {
    background: var(--dk-yellow) !important;
    color: var(--dk-ink) !important;
    border: 0 !important;
}
body.daet #finance-hub-module div[style*="min-width:170px; background:#6F4E37"] > div[style*="font-size:22px"] { color: var(--dk-red); font-weight: 900 !important; }
/* Total collected: ang bida -- pula, dilaw na numero. */
body.daet #finance-hub-module div[style*="background:#1B5E37"] {
    background: var(--dk-red) !important;
    color: var(--dk-cream) !important;
}
body.daet #finance-hub-module div[style*="background:#1B5E37"] > div[style*="font-size:30px"] { color: var(--dk-yellow); font-weight: 900 !important; }
body.daet #finance-hub-module div[style*="min-width:230px; background:#fff; border:1px solid #e7ddd3"] {
    border: 2px solid var(--dk-border) !important;
}
body.daet #finance-hub-module div[style*="background:#fef3c7; color:#92400e; border:1px solid #f0d089"] {
    background: var(--dk-yellow) !important;
    color: var(--dk-red-dark) !important;
    border: 0 !important;
}

/* ---- 6. EXPENSES: chip ng bayad ---- */
body.daet #finance-hub-module span[style*="background:#dcfce7; padding:1px 7px"] { background: var(--dk-yellow-soft) !important; color: var(--dk-ink) !important; border-radius: 6px !important; }
body.daet #finance-hub-module span[style*="background:#efe7dd; padding:1px 7px"] { background: #fff !important; color: var(--dk-red) !important; box-shadow: inset 0 0 0 1.5px var(--dk-red); border-radius: 6px !important; }
body.daet #finance-hub-module span[style*="background:#fde68a; padding:1px 7px"] { background: var(--dk-yellow) !important; color: var(--dk-red) !important; border-radius: 6px !important; }

/* ---- 7. CASH DRAWER (hero + mga dialog) ----
   ⚠️ Ang `.cd-hero` ay ginagamit din ng Operations → Cash Drawer -- kaya
      pang-buong-app na ang mga rule na ito (pinagsama ng parent). */
body.daet .cd-hero { border-radius: 12px; box-shadow: none; }
body.daet .cd-hero--open { background: var(--dk-red); }
body.daet .cd-hero--closed { background: var(--dk-ink); }
body.daet .cd-hero__status { background: rgba(255, 244, 224, .18); border-radius: 8px; font-weight: 800; }
body.daet .cd-dot { background: var(--dk-yellow); box-shadow: 0 0 0 4px rgba(255, 242, 0, .25); }
body.daet .cd-hero__btn { border-radius: 8px; color: var(--dk-red); font-weight: 900; }
body.daet .cd-hero__balance span { font-weight: 700; }
body.daet .cd-hero__balance strong { color: var(--dk-yellow); font-weight: 900; font-size: 44px; }
body.daet .cd-hero__stats { background: rgba(255, 244, 224, .14); border-radius: 10px; }
body.daet .cd-hero__stats span { font-weight: 800; }
body.daet .cd-hero__stats strong { font-weight: 900; }
body.daet .cd-hero__actions button { border-radius: 8px; border-color: rgba(255, 244, 224, .7); font-weight: 900; }
body.daet .cd-section-title { font-size: 16px; font-weight: 900; color: var(--dk-ink); }
body.daet .cd-section-title i { color: var(--dk-red); }
body.daet .cd-dialog { border-radius: 12px; box-shadow: none; }
body.daet .cd-dialog__head--green { background: var(--dk-red); color: var(--dk-yellow); }
body.daet .cd-dialog__head--red { background: var(--dk-ink); color: var(--dk-yellow); }
body.daet .cd-label { color: var(--dk-ink); font-weight: 800; }
body.daet .cd-amount-input { border-color: var(--dk-ink); border-radius: 8px; }
body.daet .cd-amount-input:focus-within { border-color: var(--dk-red); box-shadow: 0 0 0 3px var(--dk-yellow); }
body.daet .cd-amount-input span { color: var(--dk-red); }
body.daet .cd-text-input,
body.daet .cd-select { border-color: var(--dk-ink); border-radius: 8px; color: var(--dk-ink); }
body.daet .cd-text-input:focus,
body.daet .cd-select:focus { border-color: var(--dk-red); }
body.daet .cd-chip { border: 0; border-radius: 8px; background: var(--dk-yellow-soft); color: var(--dk-ink); font-weight: 700; }
body.daet .cd-btn-cancel { border: 2px solid var(--dk-ink); border-radius: 8px; color: var(--dk-ink); font-weight: 800; }
body.daet .cd-btn-cancel:hover { background: var(--dk-yellow-soft); }
body.daet .cd-help a { color: var(--dk-red); }

/* ---- 8. REPORTS: report-card = KPI tile ---- */
body.daet #finance-hub-module .report-card {
    background: var(--dk-yellow-soft);
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}
body.daet #finance-hub-module .report-card:hover { transform: none; box-shadow: none; }
body.daet #finance-hub-module .report-card .report-value,
body.daet #finance-hub-module .report-card h3 { color: var(--dk-red); font-weight: 900; }
body.daet #finance-hub-module .report-card p,
body.daet #finance-hub-module .report-card h4 { color: var(--dk-ink-muted); font-weight: 800; }
/* Pangalawang hanay ng numero (Completed sales…): stat tile na may dilaw na
   border, gaya ng mockup. */
body.daet #finance-hub-module .report-stat {
    background: #fff;
    border: 2px solid var(--dk-border);
    border-radius: 12px;
    box-shadow: none;
}
body.daet #finance-hub-module .report-stat .stat-value { color: var(--dk-ink); font-weight: 900; }
body.daet #finance-hub-module .report-stat .stat-of { color: var(--dk-ink-muted); }
body.daet #finance-hub-module .report-stat h4 { color: var(--dk-ink-muted); font-weight: 800; }
/* "Add upcoming" -- payak na .btn ng QUEBO (abo) -> pangalawang button. */
body.daet #finance-hub-module button.btn.btn-sm[onclick^="openAddExpenseModal"] {
    background: #fff;
    border: 2px solid var(--dk-ink);
    color: var(--dk-ink);
    font-weight: 800;
}
/* "What should be in the drawer right now" na kahon. */
body.daet #finance-hub-module div[style*="background:#fff;border:1px solid #e5e7eb;border-radius:12px"] {
    border: 2px solid var(--dk-border) !important;
}
body.daet #finance-hub-module div[style*="font-size:13px;font-weight:700;color:#374151"] { color: var(--dk-ink) !important; font-weight: 900 !important; }

/* ---- 9. COSTING: tile, mga input, margin, food cost chip ---- */
body.daet #finance-hub-module td[style*="color:#166534"],
body.daet #finance-hub-module span[style*="color:#166534"] { color: var(--dk-ink) !important; }
body.daet #finance-hub-module td[style*="color:#b91c1c"],
body.daet #finance-hub-module span[style*="color:#b91c1c"] { color: var(--dk-red) !important; }
body.daet #finance-hub-module span[style*="background:#dcfce7; padding:3px 9px"] { background: var(--dk-yellow-soft) !important; color: var(--dk-ink) !important; border-radius: 6px !important; }
body.daet #finance-hub-module span[style*="background:#fef3c7; padding:3px 9px"] { background: var(--dk-yellow) !important; color: var(--dk-red) !important; border-radius: 6px !important; }
body.daet #finance-hub-module span[style*="background:#fee2e2; padding:3px 9px"] { background: var(--dk-red) !important; color: var(--dk-yellow) !important; border-radius: 6px !important; }
body.daet #finance-hub-module button[onclick^="openCostBreakdown"] {
    border: 2px solid var(--dk-ink) !important;
    background: #fff !important;
    color: var(--dk-red) !important;
    border-radius: 6px !important;
}
body.daet #finance-hub-module button[onclick^="openCostBreakdown"][style*="background:#f3e9dd"] { background: var(--dk-yellow-soft) !important; }

/* ---- 10. Telepono ---- */
@media (max-width: 600px) {
    body.daet #finance-hub-module .dsum-hero__val { font-size: 38px; }
    body.daet .cd-hero__balance strong { font-size: 34px; }
}

/* ---- 17. CUSTOMERS + RESERVATIONS ---- */
/* =====================================================================
   PHASE 5 — CUSTOMERS + RESERVATIONS (pattern ng QUEBO, itsura ng Daet)
   Walang mockup ang dalawang ito: ang layout ay sa QUEBO, ang kulay at
   hugis ay ang inaprubahang Phase 5 pattern. Naka-scope sa dalawang hub at
   sa kani-kanilang modal (#addCustomerModal, #resModal, ang Customer view).
   ⚠️ May inline na kayumanggi/ginto ang Reservations (generator sa app.js) —
      `[style*="…"]` + !important ang ginagamit, KULAY lang, hindi display.
   ===================================================================== */

/* ---------- CUSTOMERS ---------- */
body.daet #customers-hub-module .filter-controls .fa-search { color: var(--dk-red) !important; }
body.daet #customers-hub-module .hub-stat-sub { color: var(--dk-ink-muted); font-weight: 800; }
body.daet #customers-hub-module .cust-name { font-weight: 800; color: var(--dk-ink); }
body.daet #customers-hub-module .cust-sub,
body.daet #customers-hub-module .cust-muted { color: var(--dk-ink-muted); }

/* Ang estado ng pagbabalik, sa dalawang kulay ng Daet (parisukat, 6px):
   bago = puti + pulang guhit · bumabalik = mapusyaw na dilaw (mabuti) ·
   dumudulas = dilaw + pula (bantayan) · nawala = dark. */
body.daet .cust-chip {
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}
body.daet .cust-chip.is-new      { background: #fff; color: var(--dk-red); box-shadow: inset 0 0 0 2px var(--dk-red); }
body.daet .cust-chip.is-active   { background: var(--dk-yellow-soft); color: var(--dk-ink); }
body.daet .cust-chip.is-slipping { background: var(--dk-yellow); color: var(--dk-red); }
body.daet .cust-chip.is-lapsed   { background: var(--dk-ink); color: var(--dk-cream); }

/* Customer view (History / Loyalty modal): parisukat na dilaw na avatar. */
body.daet .cust-avatar {
    border-radius: 10px;
    background: var(--dk-yellow);
    color: var(--dk-red);
    font-weight: 900;
}
body.daet .cust-head-name { font-weight: 900; color: var(--dk-ink); }
body.daet .cust-head-meta { color: var(--dk-ink-muted); }
body.daet .cust-stat { background: var(--dk-yellow-soft); border-radius: 10px; }
body.daet .cust-stat--accent { background: #fff; box-shadow: inset 0 0 0 2px var(--dk-red); }
body.daet .cust-stat-value { font-weight: 900; color: var(--dk-red); }
body.daet .cust-stat-label,
body.daet .cust-strip-label,
body.daet .cust-strip-ago,
body.daet .cust-section-title span,
body.daet .cust-empty { color: var(--dk-ink-muted); }
body.daet .cust-strip { border: 2px solid var(--dk-yellow-soft); border-radius: 10px; }
body.daet .cust-strip-value,
body.daet .cust-section-title { color: var(--dk-ink); font-weight: 800; }
body.daet .cust-strip-arrow { color: var(--dk-red); }

/* ---------- RESERVATIONS ---------- */
body.daet #reservations-hub-module .hub-stat-value[style*="#C9A24B"] { color: var(--dk-red) !important; }

/* Kalendaryo. `minmax(0,1fr)`: hindi na lumalampas ang Sabado sa kahon.
   ≤1100px: isang hanay (kalendaryo, tapos ang araw) -- sa 1024px ay 268px
   lang ang kalendaryo sa dalawang hanay at nagpapatong ang bilang at petsa. */
body.daet #reservations-hub-module .res-cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (min-width: 901px) and (max-width: 1100px) {
    body.daet #reservations-hub-module .res-layout { grid-template-columns: minmax(0, 1fr); }
}
body.daet #reservations-hub-module .res-cal,
body.daet #reservations-hub-module .res-day {
    border: 2px solid var(--dk-yellow-soft);
    border-radius: 12px;
}
body.daet #reservations-hub-module .res-cal-title { font-size: 18px; font-weight: 900; color: var(--dk-ink); }
body.daet #reservations-hub-module .res-cal-nav {
    width: 36px;
    height: 36px;
    border: 2px solid var(--dk-ink);
    border-radius: 8px;
    background: #fff;
    color: var(--dk-ink);
}
body.daet #reservations-hub-module .res-cal-nav:hover { background: var(--dk-red); border-color: var(--dk-red); color: var(--dk-yellow); }
body.daet #reservations-hub-module .res-cal-dow { color: var(--dk-ink-muted); font-weight: 800; }
body.daet #reservations-hub-module .res-cal-cell {
    border: 2px solid var(--dk-yellow-soft);
    border-radius: 8px;
    background: #fff;
}
body.daet #reservations-hub-module .res-cal-cell.res-cal-empty { border: 0; background: transparent; }
/* May reserbasyon sa araw na iyon = mapusyaw na dilaw. */
body.daet #reservations-hub-module .res-cal-cell:has(.res-cal-count) { background: var(--dk-yellow-soft); }
body.daet #reservations-hub-module .res-cal-cell:not(.res-cal-empty):hover { border-color: var(--dk-red); background: #fff; }
body.daet #reservations-hub-module .res-cal-cell:has(.res-cal-count):hover { background: var(--dk-yellow-soft); }
body.daet #reservations-hub-module .res-cal-day { font-weight: 800; color: var(--dk-ink); }
/* Ngayon = pulang guhit at pulang numero; napili = pula + dilaw. */
body.daet #reservations-hub-module .res-cal-cell.is-today { border-color: var(--dk-red); }
body.daet #reservations-hub-module .res-cal-cell.is-today .res-cal-day { color: var(--dk-red); font-weight: 900; }
body.daet #reservations-hub-module .res-cal-cell.is-sel,
body.daet #reservations-hub-module .res-cal-cell.is-sel:hover { background: var(--dk-red); border-color: var(--dk-red); }
body.daet #reservations-hub-module .res-cal-cell.is-sel .res-cal-day { color: var(--dk-yellow); font-weight: 900; }
body.daet #reservations-hub-module .res-cal-count {
    border-radius: 6px;
    background: var(--dk-red);
    color: var(--dk-yellow);
    font-weight: 900;
}
body.daet #reservations-hub-module .res-cal-cell.is-sel .res-cal-count { background: var(--dk-yellow); color: var(--dk-red); }
body.daet #reservations-hub-module .res-cal-legend { color: var(--dk-ink-muted); font-weight: 600; }
/* Telepono: maliliit ang cell -- huwag patungan ng bilang ang petsa. */
@media (max-width: 600px) {
    body.daet #reservations-hub-module .res-cal-grid { gap: 4px; }
    body.daet #reservations-hub-module .res-cal-cell { padding: 3px 4px; border-width: 1.5px; border-radius: 6px; }
    body.daet #reservations-hub-module .res-cal-day { font-size: 12px; }
    body.daet #reservations-hub-module .res-cal-count { bottom: 2px; right: 2px; border-radius: 4px; }
}

/* Listahan ng araw */
body.daet #reservations-hub-module .res-day-head { border-bottom: 3px solid var(--dk-yellow-soft); }
body.daet #reservations-hub-module .res-day-title { font-size: 16px; font-weight: 900; color: var(--dk-ink); }
body.daet #reservations-hub-module .res-day-sub { color: var(--dk-ink-muted); font-weight: 600; }
body.daet #reservations-hub-module .res-day-item { border: 2px solid var(--dk-yellow-soft); border-radius: 10px; }
body.daet #reservations-hub-module .res-day-time {
    background: var(--dk-yellow);
    color: var(--dk-red);
    font-weight: 900;
    border-radius: 6px;
}
body.daet #reservations-hub-module .res-day-name { font-weight: 800; color: var(--dk-ink); }
body.daet #reservations-hub-module .res-day-meta { color: var(--dk-ink-muted); }
body.daet #reservations-hub-module .res-day-meta[style*="#6F4E37"] { color: var(--dk-red) !important; }
body.daet #reservations-hub-module .res-day-pre { color: var(--dk-red); font-weight: 800; }
body.daet #reservations-hub-module .res-day-info div[style*="#92400e"] { color: var(--dk-red) !important; }
/* Telepono: oras + status/pindutan sa itaas, pangalan/detalye buong lapad sa
   ilalim -- ang parehong ayos na ginagamit ng QUEBO sa 901–1280px, dahil sa
   390px ay naiipit ang pangalan sa isang salita kada linya. */
@media (max-width: 600px) {
    body.daet #reservations-hub-module .res-day-item { flex-wrap: wrap; }
    body.daet #reservations-hub-module .res-day-time { order: 1; }
    body.daet #reservations-hub-module .res-day-right { order: 2; margin-left: auto; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
    body.daet #reservations-hub-module .res-day-info { order: 3; flex: 1 1 100%; }
}
body.daet #reservations-hub-module .res-day-empty { color: var(--dk-ink-muted); }
body.daet #reservations-hub-module .res-day-empty i { color: var(--dk-border); opacity: 1; }
/* Pindutan: Seat (walang variant) = puti + 2px dark. Confirm (btn-success)
   at Cancel/Decline (btn-danger = puti + pulang guhit) ay global na sa
   daet-pos.css -- hindi inuulit dito. */
body.daet #reservations-hub-module .res-day-actions .btn:not(.btn-success):not(.btn-danger):not(.btn-secondary) {
    background: #fff;
    border: 2px solid var(--dk-ink);
    color: var(--dk-ink);
}

/* Pills ng Private Room at ng event (inline sa app.js) */
body.daet #reservations-hub-module span[style*="#f3ece1"],
body.daet #resModal span[style*="#f3ece1"] {
    background: var(--dk-yellow-soft) !important;
    color: var(--dk-red) !important;
    border: 0 !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
}
body.daet #reservations-hub-module i[style*="#C9A24B"],
body.daet #resModal i[style*="#C9A24B"] { color: var(--dk-red) !important; }

/* Online event requests (inline na seksyon sa itaas ng kalendaryo) */
body.daet #reservationsHubContent div[style*="#fffdf9"] {
    background: #fff !important;
    border: 3px solid var(--dk-red) !important;
    border-radius: 12px !important;
}
body.daet #reservationsHubContent div[style*="#3a2e26"] { color: var(--dk-ink) !important; font-weight: 800 !important; }
body.daet #reservationsHubContent div[style*="#7a6a5c"] { color: var(--dk-ink-muted) !important; }
body.daet #reservationsHubContent span[style*="background:#6F4E37"] {
    background: var(--dk-red) !important;
    color: var(--dk-yellow) !important;
    border-radius: 6px !important;
    font-weight: 900 !important;
}

/* ---------- RESERVATION MODAL (#resModal, inline sa app.js) ---------- */
body.daet #resModal > div {
    border-radius: 12px !important;
    box-shadow: none !important;
}
body.daet #resModal h3 { font-size: 20px !important; font-weight: 900 !important; color: var(--dk-ink); }
body.daet #resModal h3 i { color: var(--dk-red) !important; }
body.daet #resModal button[onclick="window.closeResModal()"]:not([style*="flex"]) { color: var(--dk-ink) !important; }
body.daet #resModal .res-form-group > label,
body.daet #resModal .res-preorder > label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dk-ink);
}
body.daet #resModal .res-preorder { border-top: 3px solid var(--dk-yellow-soft); }
body.daet #resModal .table-picker-btn {
    min-height: 44px;
    background: #fff;
    border: 2px solid var(--dk-ink);
    border-radius: 8px;
    font-weight: 700;
    color: var(--dk-ink);
}
body.daet #resModal .table-picker-btn:hover { border-color: var(--dk-red); background: #fff; }
body.daet #resModal .table-picker-btn i.fa-chair { color: var(--dk-red); }
body.daet #resModal .res-preorder-item { background: var(--dk-yellow-soft); border-radius: 8px; color: var(--dk-ink); }
body.daet #resModal .res-preorder-item button { color: var(--dk-red) !important; }
body.daet #resModal .res-preorder-empty { color: var(--dk-ink-muted); }
body.daet #resModal label[style*="#3a2e26"] { color: var(--dk-ink) !important; font-weight: 700 !important; }
body.daet #resModal label[style*="#3a2e26"] i { color: var(--dk-red) !important; }
body.daet #resModal label[style*="#3a2e26"] span { color: var(--dk-ink-muted) !important; }
/* Cancel / Save sa ibaba */
body.daet #resModal button[onclick="window.closeResModal()"][style*="flex"] {
    background: #fff !important;
    border: 2px solid var(--dk-ink) !important;
    border-radius: 12px !important;
    color: var(--dk-ink) !important;
    font-weight: 800 !important;
}
body.daet #resModal button[onclick="window.saveReservationNew()"] {
    background: var(--dk-red) !important;
    color: var(--dk-yellow) !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---- 18. SETTINGS ---- */
/* =====================================================================
   PHASE 5 — SETTINGS HUB (#settings-hub-module)
   Puting section na (ang .hub-content) -- kaya ang mga .settings-section at
   ang mga inline na "card" sa loob ay pinapatag: walang card-sa-loob-ng-card.
   Hiwalay ang bawat section sa 3px na dilaw na guhit. Ang mga inline na
   kulay ng QUEBO (kayumanggi/berde/amber) ay pinapalitan sa attribute
   selector + !important. WALANG display:!important dito.
   ===================================================================== */

/* ---- 1. Mga section: patag, may dilaw na guhit sa pagitan ---- */
body.daet #settings-hub-module .settings-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
body.daet #settings-hub-module .settings-section + .settings-section {
    margin-top: 22px !important;
    padding-top: 22px;
    border-top: 3px solid var(--dk-yellow-soft);
}
body.daet #settings-hub-module .settings-section > .module-header h3,
body.daet #settings-hub-module .module-header h3 { font-size: 20px; font-weight: 900; color: var(--dk-ink); }
/* Ang inline na puting kahon (border:1px solid #e4e4e4) sa loob ng section */
body.daet #settings-hub-module div[style*="border:1px solid #e4e4e4"],
body.daet #settings-hub-module div[style*="border: 1px solid #e4e4e4"] {
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
/* Ang General form ay may sariling card (may anino) -- patag din */
body.daet #settings-hub-module .settings-form {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
/* Kayumangging icon sa pamagat */
body.daet #settings-hub-module i[style*="#6F4E37"] { color: var(--dk-red) !important; }
/* Mga guhit sa pagitan ng hilera (inline na abo) */
body.daet #settings-hub-module [style*="border-bottom:1px solid #eceff2"],
body.daet #settings-hub-module [style*="border-bottom:1px solid #f3f4f6"] { border-bottom-color: var(--dk-yellow-soft) !important; }
body.daet #settings-hub-module [style*="border-top:1px solid #f1f1f1"] { border-top-color: var(--dk-yellow-soft) !important; }

/* ---- 2. Checkbox na may label: hilera sa mapusyaw na dilaw (gaya ng
   "Service charge" sa mockup), HINDI uppercase.
   BLOCK, hindi flex: halo ng text at <b> ang mga label dito (hal. "<b>Cash</b>
   — bayad sa rider…"), at sa flex ay sariling item ang bawat piraso -- naging
   hanay-hanay na salita sa telepono at lumampas sa card. Ang checkbox ay nasa
   kaliwang padding (absolute), kaya iisang talata ang buong text. ---- */
body.daet #settings-hub-module .form-group > label:has(> input[type="checkbox"]) {
    display: block;
    position: relative;
    padding: 12px 14px 12px 44px;
    background: var(--dk-yellow-soft);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 800;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: break-word;
    cursor: pointer;
}
body.daet #settings-hub-module .form-group > label > input[type="checkbox"] {
    position: absolute;
    left: 14px;
    top: 13px;          /* gitna ng unang linya (22px) */
    width: 20px;
    height: 20px;
    margin: 0;
}
body.daet #settings-hub-module textarea { font-family: inherit; }
body.daet #settings-hub-module input[type="range"] { accent-color: var(--dk-red); }

/* ---- 3. Payroll & Benefits (.pay-cfg-*) ---- */
body.daet #settings-hub-module .pay-cfg-group { border-bottom: 3px solid var(--dk-yellow-soft); }
body.daet #settings-hub-module .pay-cfg-title { font-size: 15px; font-weight: 900; color: var(--dk-ink); }
body.daet #settings-hub-module .pay-cfg-title i { color: var(--dk-red); }
body.daet #settings-hub-module .pay-cfg-switch { font-weight: 800; color: var(--dk-ink); }
body.daet #settings-hub-module .pay-cfg-grid > label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dk-ink);
}
body.daet #settings-hub-module .pay-cfg-grid > label small {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--dk-ink-muted);
}
body.daet #settings-hub-module .pay-cfg-grid > label .form-control { text-transform: none; letter-spacing: 0; }
body.daet #settings-hub-module .pay-cfg-off { background: var(--dk-yellow-soft); color: var(--dk-ink-muted); }
/* Paalala (amber na kahon) -> mapusyaw na dilaw, pulang guhit */
body.daet #settings-hub-module p[style*="background:#fffbeb"] {
    background: var(--dk-yellow-soft) !important;
    border: 0 !important;
    border-left: 4px solid var(--dk-red) !important;
    color: var(--dk-ink) !important;
}
/* Babala ng default PIN (pink) */
body.daet #settings-hub-module div[style*="background:#fdecec"] {
    background: var(--dk-yellow-soft) !important;
    border-left: 4px solid var(--dk-red);
    color: var(--dk-red) !important;
    font-weight: 700 !important;
}

/* ---- 4. Mga card na may aksyon (.data-management-card): Backup, Users,
   Games) ---- */
body.daet #settings-hub-module .data-management-card {
    background: var(--dk-yellow-soft);
    border: 0;
    border-radius: 12px;
}
body.daet #settings-hub-module .data-management-card[style*="border-color"] {
    border: 3px solid var(--dk-red) !important;
}
body.daet #settings-hub-module .data-info i { color: var(--dk-red); }
body.daet #settings-hub-module .data-info p strong { font-weight: 900; color: var(--dk-ink); }
body.daet #settings-hub-module .data-info .text-muted { color: var(--dk-ink-muted); }
body.daet #settings-hub-module .data-actions .btn { white-space: nowrap; }
/* "Change PIN" (btn-info) = pangalawang button */
body.daet #settings-hub-module .btn-info {
    background: #fff;
    color: var(--dk-ink);
    border: 2px solid var(--dk-ink);
    box-shadow: none;
}
body.daet #settings-hub-module .btn-info:hover:not(:disabled) { background: var(--dk-yellow); color: var(--dk-ink); }

/* ---- 5. Modules & Features ---- */
body.daet #settings-hub-module .features-panel { background: transparent; border: 0; border-radius: 0; padding: 0; }
body.daet #settings-hub-module .features-intro { color: var(--dk-ink-muted); }
body.daet #settings-hub-module .feature-group-title {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    color: var(--dk-red);
}
body.daet #settings-hub-module .feature-row { border-top: 1px solid var(--dk-yellow-soft); }
body.daet #settings-hub-module .feature-row.is-child { border-left: 3px solid var(--dk-yellow-soft); }
body.daet #settings-hub-module .feature-row-label { font-size: 15px; font-weight: 800; color: var(--dk-ink); }
body.daet #settings-hub-module .feature-row-desc { color: var(--dk-ink-muted); }
body.daet #settings-hub-module .feature-row-note { color: var(--dk-red-dark); }
body.daet #settings-hub-module .feature-row.is-locked .feature-row-label,
body.daet #settings-hub-module .feature-row.is-blocked .feature-row-label { color: var(--dk-ink-muted); }
body.daet #settings-hub-module .feature-row.is-locked .feature-switch input:checked + .feature-switch-track { background: #C9B9A8; }
body.daet #settings-hub-module .feature-lock-badge {
    border-radius: 6px;
    background: var(--dk-yellow-soft);
    color: var(--dk-ink-muted);
    font-weight: 900;
}
body.daet #settings-hub-module .features-core-toggle {
    padding: 10px 14px;
    background: var(--dk-yellow-soft);
    border-radius: 10px;
    color: var(--dk-red);
    font-size: 14px;
    font-weight: 900;
}
body.daet #settings-hub-module .features-core-toggle:hover { text-decoration: none; background: var(--dk-yellow); }

/* ---- 6. Menu Order (category manager) ---- */
body.daet #settings-hub-module .catmgr-hint,
body.daet #settings-hub-module .catmgr-hint b { color: var(--dk-ink-muted); }
body.daet #settings-hub-module .catmgr-hint b { color: var(--dk-ink); }
body.daet #settings-hub-module .catmgr-list { border: 2px solid var(--dk-yellow-soft); }
body.daet #settings-hub-module .catmgr-row { border-top-color: var(--dk-yellow-soft); }
body.daet #settings-hub-module .catmgr-grip { color: var(--dk-red); }
body.daet #settings-hub-module .catmgr-num { border-radius: 6px; background: var(--dk-yellow); color: var(--dk-red); font-weight: 900; }
body.daet #settings-hub-module .catmgr-name { font-weight: 800; color: var(--dk-ink); }
/* Mas siksik na select sa bawat hilera (hindi 44px ng .form-control) */
body.daet #settings-hub-module .catmgr-sel { min-height: 36px; padding: 4px 8px; font-size: 13px; }
body.daet #settings-hub-module .catmgr-count { color: var(--dk-ink-muted); }
body.daet #settings-hub-module .catmgr-row--over { box-shadow: inset 0 3px 0 var(--dk-red); }
body.daet #settings-hub-module .catmgr-row--overend { box-shadow: inset 0 -3px 0 var(--dk-red); }

/* ---- 7. Voice buttons ---- */
body.daet #settings-hub-module .vb-item {
    background: var(--dk-yellow-soft);
    border: 0;
    border-radius: 12px;
}
body.daet #settings-hub-module .vb-item__badge {
    background: var(--dk-yellow);
    border: 0;
    border-radius: 8px;
    color: var(--dk-red);
}
body.daet #settings-hub-module .vb-add {
    background: #fff;
    color: var(--dk-ink);
    border: 2px solid var(--dk-ink);
    font-weight: 800;
}
body.daet #settings-hub-module .vb-tune label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dk-ink);
}
body.daet #settings-hub-module .vb-now { color: var(--dk-ink-muted); }

/* ---- 8. Feedback ---- */
body.daet #settings-hub-module .fbl-box { background: var(--dk-yellow-soft); border: 0; color: var(--dk-ink-muted); }
body.daet #settings-hub-module .fbl-avg-n { color: var(--dk-red); }
body.daet #settings-hub-module .fbl-stars { color: var(--dk-red); }
body.daet #settings-hub-module .fbl-tag { border-radius: 6px; background: #fff; color: var(--dk-ink); }
body.daet #settings-hub-module .fbl-text { border-left-color: var(--dk-red); color: var(--dk-ink); }

/* ---- 9. Games (inline na berde/amber) ---- */
body.daet #settings-hub-module span[style*="color:#16a34a"] { color: var(--dk-ink) !important; font-weight: 900 !important; }
body.daet #settings-hub-module input[style*="accent-color:#16a34a"] { accent-color: var(--dk-red) !important; }
body.daet #settings-hub-module span[style*="color:#b45309"] { color: var(--dk-red-dark) !important; }
body.daet #settings-hub-module [style*="border-bottom:1px solid var(--border-color)"] { border-bottom-color: var(--dk-yellow-soft) !important; }
body.daet #settings-hub-module [style*="border-top:1px solid var(--border-color)"] { border-top-color: var(--dk-yellow-soft) !important; }

/* ---- 10. Data & Backup, Activity Logs: mga chip ---- */
/* "Demo — local only" (amber na pill) */
body.daet #settings-hub-module div[style*="background:#fef3c7"] {
    background: var(--dk-yellow) !important;
    color: var(--dk-red) !important;
    border-radius: 8px !important;
    font-weight: 900 !important;
}
/* "Owner" (berdeng chip) */
body.daet #settings-hub-module span[style*="background:#e7f6ec"] {
    background: var(--dk-yellow-soft) !important;
    color: var(--dk-ink) !important;
    font-weight: 900 !important;
}
body.daet #settings-hub-module .integrity-badge.ok {
    background: var(--dk-yellow-soft) !important;
    color: var(--dk-ink) !important;
    font-weight: 800 !important;
}
body.daet #settings-hub-module .integrity-badge.ok i { color: var(--dk-red); }
body.daet #settings-hub-module .integrity-badge.bad {
    background: var(--dk-red) !important;
    color: var(--dk-yellow) !important;
    font-weight: 900 !important;
}
/* Mga amber na mensahe (Ordering/Billing kapag demo / offline) */
body.daet #settings-hub-module p[style*="color:#b45309"],
body.daet #settings-hub-module div[style*="color:#b45309"] { color: var(--dk-red-dark) !important; }

/* ---- 11. Telepono ---- */
@media (max-width: 600px) {
    body.daet #settings-hub-module .data-actions .btn { white-space: normal; }
    body.daet #settings-hub-module .settings-section + .settings-section { margin-top: 16px !important; padding-top: 16px; }
    /* General → Holidays: ang inline na `1fr 150px 110px auto auto` ay hindi
       kasya sa telepono -- lumalampas sa card ang "Every year" at ang Add.
       Dalawang hanay: pangalan (buong lapad) · petsa + % · Every year + Add. */
    body.daet #settings-hub-module div[style*="grid-template-columns:1fr 150px 110px auto auto"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body.daet #settings-hub-module div[style*="grid-template-columns:1fr 150px 110px auto auto"] > :first-child { grid-column: 1 / -1; }
}

/* ---- 19. PHASE 5 QA (browser QA ng pinagsamang Phase 5) ---- */
/* Supply tags sa Procurement: asul ng QUEBO (may kayumangging text) → Daet. */
body.daet .sup-tag { background: var(--dk-yellow-soft); color: var(--dk-ink); border-radius: 6px; font-weight: 700; }
body.daet .sup-tag.more { background: #fff; color: var(--dk-red); box-shadow: inset 0 0 0 1.5px var(--dk-red); }
/* Malabong abo (#9ca3af, contrast 2.5) sa inline text ng mga hub → mas
   madilim na muted (≈5:1). Walang kahulugan ang abong ito, kaya ligtas. */
body.daet .hub-content [style*="color:#9ca3af"],
body.daet .hub-content [style*="color: #9ca3af"] { color: #8A6B6B !important; }
/* Walang-laman na estado sa loob ng hub: dashed na dilaw, hindi abong kahon. */
body.daet .hub-content .empty-state {
    background: transparent;
    border: 2px dashed var(--dk-border);
    border-radius: 10px;
    color: var(--dk-ink-muted);
}

/* =====================================================================
   PHASE 6 (2026-10-23): paglilinis ng mga bakas ng QUEBO
   ===================================================================== */
/* Settings → Games: ang mga laro ng QUEBO (kape ang tema, "QUEBO Cafe" ang
   pangalan) -- wala sa Daet. Nakatago lang ang tab; walang binurang data. */
body.daet #settings-hub-module .hub-tab[onclick="switchHubTab('settings', 'games')"] { display: none; }
/* Settings → Modules: "Donut Inventory" (bilang ng tray ng donut) ay negosyo
   ng QUEBO -- wala sa Daet. Ang hilera lang sa listahan ang nakatago (hindi
   pindutan o tab na may gating); ang flag mismo ay hindi ginagalaw. Ang
   Barista Station ay sinadyang naiiwan. */
body.daet #settings-hub-module .feature-row:has(input[onchange*="'donutInventory'"]) { display: none; }
/* Ruta ng rider sa mapa: kulay espresso ng QUEBO (nakasulat sa JS ng app.js). */
body.daet .leaflet-overlay-pane path[stroke="#6F4E37" i] { stroke: var(--dk-red); }
body.daet .leaflet-overlay-pane path[fill="#6F4E37" i] { fill: var(--dk-red); }

/* =====================================================================
   20. MGA NATITIRANG KULAY NG QUEBO (E2E sweep, 2026-10-25)
   =====================================================================
   Mga rule sa styles.css na may kulay ng QUEBO (kayumanggi #6F4E37/#573C2A,
   ginto #C2A06A/#D8BE8E, beige #F3E9D7/#FAF7F2/#ECE4DA, espresso/taupe) na
   naaabot pa sa Daet at hindi pa natatalo ng mga seksyon sa itaas. Hinanap
   sa styles.css at kinumpirma sa browser (bawat screen, sub-tab at modal).
   Palitan: kayumanggi -> pula, madilim na kayumanggi -> pula-dark, ginto ->
   dilaw / dilaw na gilid (HINDI dilaw na text sa puti -- pula ang text/icon),
   beige -> cream / mapusyaw na dilaw, espresso/taupe na text -> ink / muted.
   Ang berde (bayad/tapos), pula (mali/kulang) at amber (babala) ay KAHULUGAN,
   hindi tema -- hindi ginagalaw. Kulay lang dito: walang display, walang
   laki, walang ayos. */

/* ---- Buong app: focus glow, "Skip to main content", sidebar, splash ---- */
/* Ang gintong glow ng `:focus-visible` ng QUEBO (lahat ng elementong walang
   sariling focus style -- mga pindutan sa modal, ⋯, segmented control).
   :where() para kapantay lang ng QUEBO ang tiyak (0,1,0): ang mga sariling
   focus ring ng ibang rule ay nananalo pa rin. */
:where(body.daet) :focus-visible { box-shadow: 0 0 0 4px rgba(255, 242, 0, .55); }
/* Inline na `background:#6F4E37` sa index.html -- !important dahil inline (kulay
   lang, hindi display). */
body.daet a.sr-only-focusable { background: var(--dk-red) !important; color: var(--dk-yellow) !important; }
/* Nakatago na sila sa Daet (seksyon 2 at 4); kulay na rin, para walang ginto
   kahit lumabas. */
body.daet .nav-item::before { background: var(--dk-yellow); }
body.daet .ava-splash::after { background: none; }
body.daet ::-webkit-scrollbar-thumb:hover { background-color: var(--dk-red); }
/* Hover sa disabled na pangunahing pindutan (ang Daet hover ay :not(:disabled)). */
body.daet .btn-primary:hover { box-shadow: none; }

/* ---- Notifications (kampana) ---- */
body.daet .notif-empty i { color: var(--dk-ink-muted); }   /* hindi dilaw sa puti */
body.daet .notif-item.sev-info { border-left-color: var(--dk-border); }
body.daet .sev-info .notif-item-icon { background: var(--dk-yellow-soft); color: var(--dk-red); }

/* ---- Confirm dialog (Logout = "neutral" na `?`) ---- */
body.daet .danger-confirm-overlay.is-neutral .danger-confirm-icon { background: var(--dk-yellow-soft); color: var(--dk-red); }

/* ---- Dashboard: Low stock ---- */
body.daet .ls-restock:focus-visible { outline: 3px solid var(--dk-ink); outline-offset: 2px; box-shadow: none; }
body.daet .ls-empty { color: var(--dk-ink-muted); }
body.daet .alert-item.success { background: var(--dk-yellow-soft); color: var(--dk-ink); }

/* ---- POS: staff mode, mga menu card sa labas ng #pos-module (Staff
   purchase, item picker), discount chooser, delivery details ---- */
body.daet .pos-order-section.staff-mode .order-summary { border-left-color: var(--dk-red); }
body.daet .category-tab.active { background: var(--dk-red); color: var(--dk-yellow); box-shadow: none; }
body.daet .menu-item:hover { border-color: var(--dk-red); box-shadow: none; }
body.daet .menu-item-img-placeholder { color: var(--dk-red); }
body.daet .menu-item:not(.menu-mcard) .menu-item-img::after { background: var(--dk-red); color: var(--dk-yellow); box-shadow: none; }
body.daet .pos-search:focus-within { border-color: var(--dk-red); box-shadow: 0 0 0 3px var(--dk-yellow); }
/* Ang "pindot" na pintig ng bawat search (keyframes `searchPressPulse` ng
   QUEBO, ginto) -- parehong galaw, dilaw na kulay. */
@keyframes dkSearchPressPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 242, 0, .7); }
    55%  { box-shadow: 0 0 0 7px rgba(255, 242, 0, .25); }
    100% { box-shadow: 0 0 0 3px var(--dk-yellow); }
}
body.daet .pos-search:focus-within,
body.daet .att-picker__search:focus-within,
body.daet #customerSearch:focus,
body.daet #supplierSearch:focus,
body.daet #poSearch:focus,
body.daet #wasteSearch:focus,
body.daet #ddMapSearch:focus { animation-name: dkSearchPressPulse; }
body.daet .search-suggest__item:hover,
body.daet .search-suggest__item.is-active { background: var(--dk-yellow-soft); }
body.daet .size-base-tag { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .staff-rate-pill { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .staff-pay-opt > span i { color: var(--dk-red); }
body.daet .staff-pay-opt input:checked + span { border-color: var(--dk-red); box-shadow: inset 0 0 0 1px var(--dk-red); }
body.daet .staff-pay-opt input:focus-visible + span { outline-color: var(--dk-ink); }
body.daet .spw-name { background: var(--dk-cream); border-color: var(--dk-border); color: var(--dk-red); }
body.daet .spw-field input:focus { border-color: var(--dk-red); box-shadow: 0 0 0 3px var(--dk-yellow); }
body.daet .poc-chip { background: var(--dk-cream); border-color: var(--dk-border); color: var(--dk-red); }
/* Payment modal: "Change" -- gradient na kayumanggi -> ink, flat. HINDI pula:
   inline na berde (sukli) o pula ("short") ang halaga mula sa calculateChange()
   -- pula sa pula ay 1.9:1. Sa ink: berde 8.7:1, pula 4.9:1, puting label 18:1. */
body.daet .change-display { background: var(--dk-ink); }

/* ---- Operations · Orders ---- */
/* Ang guhit sa ilalim ng "Orders | Sold" (inline na `#ece4da` sa app.js). */
body.daet .hub-content div:has(> button[onclick^="switchOrdersSubTab"]) { border-bottom-color: var(--dk-yellow-soft) !important; }
body.daet .pay-badge--online,
body.daet .rider-order-card__online { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .modify-item-restore { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .refund-method-btn.active { border-color: var(--dk-red); background: var(--dk-red); color: var(--dk-yellow); }
body.daet .hh-batch { background: var(--dk-yellow-soft); color: var(--dk-red); }

/* ---- Kitchen Display: palit-ulam (⇄), recipe, checklist, history ---- */
body.daet .kdss-name em { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .kdss-go { color: var(--dk-red); }
body.daet .kdsr-view-track { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .kdsr-add:hover { background: var(--dk-red-dark); }
body.daet .kdsr-addform .kdsr-fld input:focus { border-color: var(--dk-red); box-shadow: 0 0 0 3px var(--dk-yellow); }
body.daet .kdsck-day b,
body.daet .kdsck-head i { color: var(--dk-red); }
body.daet .kdsck-box:hover,
body.daet .kdsck-editin:focus,
body.daet .kdsck-add input:focus { border-color: var(--dk-red); }
/* Abong #6b7280 ng QUEBO sa cream ay 4.4:1 lang -- ink-muted (8.4:1). Ang
   maliit na sub-label (opacity .7) ay .85 para lumampas sa 4.5:1. */
body.daet .kdsh-table th { background: var(--dk-cream); color: var(--dk-ink-muted); }
body.daet .kdsh-table th small { opacity: .85; }
body.daet td.kdsh-duty { color: var(--dk-red) !important; }
body.daet .att-duty-badge { background: var(--dk-yellow-soft); color: var(--dk-red); }

/* ---- Queue Board: bilis ng tawag (dropdown sa TV bar) ---- */
body.daet .qb-tv-btn--rate:focus-within { background: rgba(255, 244, 224, .12); border-color: var(--dk-yellow); }

/* ---- Delivery: rider card, mapa, direksyon ---- */
body.daet .rider-order-card:hover,
body.daet .rider-order-card:focus-visible { box-shadow: none; }
body.daet .rider-order-card__gps--true { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .rider-order-card__pay { background: var(--dk-yellow-soft); border-color: var(--dk-border); }
body.daet .rider-order-card__btn--route,
body.daet .rider-order-card__btn--route:hover { box-shadow: none; }
body.daet .rider-nav-banner { background: var(--dk-yellow-soft); border-color: var(--dk-border); }
body.daet .rider-nav-ic { background: var(--dk-red); }
body.daet .rider-dir-title { background: var(--dk-cream); color: var(--dk-red); border-bottom-color: var(--dk-yellow-soft); }
body.daet .rider-dir-step.is-active { background: var(--dk-yellow-soft); }
body.daet .rider-dir-step.is-active .rider-dir-ic { background: var(--dk-red); }
body.daet .rider-dir-step.is-active .rider-dir-main { color: var(--dk-red); }

/* ---- Cash drawer: Close & Count, mga dialog ---- */
body.daet .cd-expectbar__exp { background: var(--dk-red); }
body.daet .cd-expectbar__exp span,
body.daet .cd-expectbar__exp strong { color: var(--dk-yellow); }
body.daet .cd-variance.is-balanced { background: var(--dk-yellow-soft); color: var(--dk-ink); }
body.daet .cd-check input { accent-color: var(--dk-red); }
body.daet .cd-sub__title,
body.daet .cd-preview strong { color: var(--dk-red); }
body.daet .cd-dencount:focus { border-color: var(--dk-red); }

/* ---- Menu & Stock: inventory history, mga modal ---- */
body.daet .inv-history { border-color: var(--dk-yellow-soft); }
body.daet .inv-history__day { color: var(--dk-ink-muted); border-bottom-color: var(--dk-yellow-soft); }
body.daet .inv-history__time,
body.daet .inv-history__muted { color: var(--dk-ink-muted); }
body.daet .inv-history__main,
body.daet .inv-history__detail { color: var(--dk-ink); }
body.daet .inv-history__sep { color: rgba(43, 10, 10, .3); }
body.daet .inv-history__tag { background: var(--dk-cream); border-color: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .inv-history__user { color: var(--dk-red); }
/* Add/Edit item → "Customer-facing" na tatak. */
body.daet .vis-badge--customer { background: var(--dk-yellow-soft); color: var(--dk-red); border-color: var(--dk-border); }
/* Category manager (modal mula sa Menu & Stock -- seksyon 18 ay sa Settings lang). */
body.daet .catmgr-num { border-radius: 6px; background: var(--dk-yellow); color: var(--dk-red); }
body.daet .catmgr-row--over { box-shadow: inset 0 3px 0 var(--dk-red); }
body.daet .catmgr-row--overend { box-shadow: inset 0 -3px 0 var(--dk-red); }
body.daet .menu-mcard-flip.is-dragging { filter: drop-shadow(0 14px 28px rgba(43, 10, 10, .22)); }
body.daet .product-badge { color: var(--dk-red); }
body.daet .batch-status-badge.status-available { background: var(--dk-yellow-soft); }
body.daet .warning-section h4 { color: var(--dk-red-dark); }
body.daet .menu-suggestions h5 { color: var(--dk-red); }
body.daet .suggestion-tip i { color: var(--dk-red); }
body.daet .eq-service-card { border-color: rgba(43, 10, 10, .14); }
/* Mga search sa hub (Customers, Suppliers, PO, Waste, mapa ng delivery). */
body.daet #customerSearch:focus,
body.daet #supplierSearch:focus,
body.daet #poSearch:focus,
body.daet #wasteSearch:focus,
body.daet #ddMapSearch:focus { border-color: var(--dk-red); box-shadow: 0 0 0 3px var(--dk-yellow); }

/* ---- Staff & HR: attendance picker, auto-schedule, 13th month ---- */
/* Designation chip sa labas ng #staff-hub-module (hal. View Employee modal --
   #viewEmpModal ay nasa <body>): parehong dilaw/pula ng chip sa listahan. */
body.daet .desig-chip { border-radius: 6px; background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .att-picker__search:focus-within { border-color: var(--dk-red); box-shadow: 0 0 0 3px var(--dk-yellow); }
body.daet .att-picker__search:focus-within i { color: var(--dk-red); }
body.daet .att-emp:focus-visible,
body.daet .att-emp__hide:focus-visible { outline-color: var(--dk-ink); }
body.daet .att-emp.is-selected { background: var(--dk-yellow-soft); }
body.daet .att-emp__in { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .att-emp.is-selected .att-emp__radio { border-color: var(--dk-red); }
body.daet .att-emp.is-selected .att-emp__radio::after { background: var(--dk-red); }
body.daet .att-hidden__count { color: var(--dk-red); }
body.daet .att-hidden__unhide { border-color: var(--dk-red); background: var(--dk-red); color: var(--dk-yellow); }
body.daet .att-hidden__unhide:hover { background: var(--dk-red-dark); }
/* Auto-schedule modal. */
body.daet .as-h,
body.daet .as-halfs-h,
body.daet .as-time__lbl,
body.daet .as-counts th:first-child,
body.daet .as-staff .as-name,
body.daet .as-preview .as-name { color: var(--dk-ink); }
body.daet .as-time__lbl em,
body.daet .as-preview th span,
body.daet .as-sub { color: var(--dk-ink-muted); }
body.daet .as-counts th,
body.daet .as-counts td,
body.daet .as-staff th,
body.daet .as-staff td,
body.daet .as-preview th,
body.daet .as-preview td { border-bottom-color: var(--dk-yellow-soft); }
body.daet .info-banner i { color: var(--dk-red); }

/* ---- Customers: Loyalty modal (amber na gradient, kahel/lila na tier --
   hindi kulay ng QUEBO, pero wala rin sa Daet) ---- */
body.daet .loyalty-summary-card { background: var(--dk-yellow-soft); }
body.daet .loyalty-summary-card .summary-item i { color: var(--dk-red); }
body.daet .loyalty-summary-card .tier-vip { color: var(--dk-red); }
body.daet .loyalty-summary-card .tier-platinum { color: var(--dk-ink); }

/* ---- Settings: Backup, Close online ordering ---- */
body.daet .backup-info-banner { background: var(--dk-red); }
body.daet .backup-info-banner .info-item i { color: var(--dk-yellow); }
body.daet .closed-modal-top h3,
body.daet .closed-msg-opt strong,
body.daet .closed-store-head strong { color: var(--dk-ink); }
body.daet .closed-msg-opt:hover { border-color: var(--dk-border); }
body.daet .closed-msg-opt input { accent-color: var(--dk-red); }
body.daet .closed-msg-opt:has(input:checked) { border-color: var(--dk-red); background: var(--dk-yellow-soft); box-shadow: inset 0 0 0 1px var(--dk-red); }
/* Taupe #8A7355 ng QUEBO (label, paliwanag ng bawat opsyon, icon ng card):
   4.1:1 lang ang `em` sa napiling dilaw -- ink-muted (8.5:1). Ang abong-kayu-
   manggi na gilid (#e5e0d8) -> ink na 14%. Ang SARADO na card (.is-closed)
   ay pula pa rin -- kahulugan iyon. */
body.daet .closed-modal-label,
body.daet .closed-msg-opt em,
body.daet .closed-store-card:not(.is-closed) .closed-store-head > i { color: var(--dk-ink-muted); }
body.daet .closed-msg-opt,
body.daet .closed-store-card:not(.is-closed) { border-color: rgba(43, 10, 10, .14); }

/* ---- Pag-save (overlay ng savefx) ---- */
body.daet .savefx-overlay.is-saving .savefx-icon,
body.daet .savefx-btn-retry { background: var(--dk-red); }

/* ---- Signup (auth) ---- */
body.daet .auth-terms input[type="checkbox"] { accent-color: var(--dk-red); }
body.daet .auth-terms a { color: var(--dk-red); }

/* ---- AI hub (Overview, Health, Autopilot, Simulator, Assistant) ---- */
body.daet .comparison-banner { background: var(--dk-red); }
body.daet .contribution-bar { background: var(--dk-red); }
body.daet .section-card.opportunities { border-color: var(--dk-border); }
body.daet .autopilot-control-panel { border-color: var(--dk-red); }
body.daet .autopilot-title i,
body.daet .switch-label { color: var(--dk-yellow); }   /* madilim ang panel */
body.daet .type-btn.active { background: var(--dk-yellow-soft); }
body.daet .ai-action-card:hover { border-color: var(--dk-border); }
body.daet .confidence-fill { background: var(--dk-red); }
body.daet .confidence-value,
body.daet .impact-value,
body.daet .item-action,
body.daet .item-value { color: var(--dk-red); }
body.daet .action-time { background: var(--dk-yellow-soft); color: var(--dk-red); }
body.daet .ai-action-toast { border-color: var(--dk-red); box-shadow: none; }
body.daet .ai-toast-icon { background: var(--dk-red); }
body.daet .ai-toast-title { color: var(--dk-yellow); }   /* madilim ang toast */

/* =====================================================================
   21. "49 UNLI" (2026-10-26)
   ===================================================================== */
/* Badge sa card (daet-pos.js). Ang pinaka-highlight ng may-ari, kaya mas
   malakas sa Bestseller: may dilaw na gilid at mas malaking numero. */
body.daet #pos-module .dk-unli {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 3px 7px 4px;
    background: var(--dk-red);
    color: var(--dk-yellow);
    border: 2px solid var(--dk-yellow);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .03em;
    box-shadow: 0 2px 8px rgba(43, 10, 10, .28);
    pointer-events: none;
}
body.daet #pos-module .dk-unli b { font-size: 15px; letter-spacing: 0; }
/* May Bestseller din: sa ilalim ng UNLI, hindi patong. */
body.daet #pos-module .dk-unli ~ .menu-item-badge { top: 38px; }
/* HINDI PA NAPILING option sa item modal: OUTLINE na bilog/parisukat.
   Sa QUEBO ay `fas fa-circle` / `fas fa-square` (SOLID) ang hindi napili at
   walang CSS ang .modifier-option-check -- kaya madilim na tuldok ang bawat
   option, at ang "49 UNLI" ay mukhang naka-tsek na kahit hindi pa. Ang
   regular (400) na timbang ng Font Awesome 6 ay ang outline na bersyon ng
   parehong icon. Ang napili (check-circle / check-square) ay solid pa rin. */
body.daet .modifier-option:not(.selected) .modifier-option-check i {
    font-weight: 400;
    color: var(--dk-ink-muted);
}

/* =====================================================================
   22. FOCUS RING (2026-10-26)
   ===================================================================== */
/* Ang global na `:focus-visible` ng styles.css ay may gintong halo ng QUEBO
   (rgba(194,160,106,.3)) -- lumalabas sa mga pindutang hindi .btn sa loob ng
   modal (hal. Cancel ng verify-payment, "Additional Order"). Pula na. Ang
   .btn at sidebar ay may sariling ring sa itaas (CSS-5) at mas tiyak sila. */
body.daet :focus-visible { box-shadow: 0 0 0 4px rgba(176, 16, 16, .18); }