/* ==========================================================================
   OSTOS SMART POS MAIN STYLESHEET
   File ini mengatur tampilan utama:
   Customer Menu, Customer Status, Admin/Master Data, Role Permission,
   Owner Dashboard, Cashier Board, Kitchen Display, Login, dan Theme Switcher.

   Cara mencari warna teks:
   - Cari "TEXT COLOR - <nama area>"
   - Cari "THEME Dark Mode - TEXT COLOR - <nama area>"
   - Cari "THEME Light Mode - TEXT COLOR - <nama area>"
   - Cari "THEME Crimson Velvet - TEXT COLOR - <nama area>"
   ========================================================================== */

/* BASE COLOR VARIABLES - warna default sebelum theme override aktif */
:root {
    --pos-red: #b21825;
    --pos-red-dark: #95111d;
    --pos-orange: #f58a12;
    --pos-cream: #fff7ed;
    --pos-ink: #1f1f24;
    --pos-muted: #7b7b86;
    --pos-line: #ece7df;
}

/* CUSTOMER APP - page wrapper, mobile shell, dan warna teks dasar */
.customer-body {
    background: #ead1bf;
    min-height: 100vh;
    color: var(--pos-ink);
}

.customer-shell {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;
    background: #fffaf4;
    position: relative;
    overflow: hidden;
}

/* CUSTOMER APP - welcome/status layout */
.customer-welcome,
.menu-screen,
.status-card {
    min-height: 100vh;
    padding: 28px 18px 92px;
}

.customer-welcome,
.status-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
}

/* TEXT COLOR - Customer brand mark / logo fallback */
.brand-mark,
.ostos-logo {
    font-size: 40px;
    line-height: 1;
    color: #fff;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0;
}

/* CUSTOMER APP - image logo sizing */
.brand-mark img,
.ostos-logo img {
    display: block;
    height: auto;
    object-fit: contain;
}

.ostos-logo img {
    width: min(100%, 360px);
    margin: 0 auto;
}

.ostos-logo {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.brand-mark img {
    width: 98px;
    margin: 0 auto;
}

/* TEXT COLOR - Customer welcome/status main icon */
.customer-welcome .brand-mark,
.status-card .brand-mark {
    color: var(--pos-orange);
}

/* TEXT COLOR - Customer welcome/status headline */
.customer-welcome h1,
.status-card h1 {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
}

/* TEXT COLOR - Customer table pill */
.table-pill {
    border-radius: 999px;
    padding: 12px 28px;
    background: #fff;
    color: var(--pos-red);
    font-weight: 800;
    box-shadow: 0 12px 32px rgba(93, 59, 27, .12);
}

/* LAYOUT HELPERS - baris flex yang dipakai banyak area */
.mobile-topbar,
.menu-title,
.menu-price-row,
.qty-row,
.pos-page-header,
.owner-topbar,
.report-line,
.bill-row,
.cart-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* CUSTOMER APP - mobile topbar */
.mobile-topbar {
    gap: 12px;
}

.mobile-topbar > div {
    min-width: 0;
}

.mobile-topbar strong,
.mobile-topbar span {
    display: block;
}

/* TEXT COLOR - Customer topbar secondary text and muted text */
.mobile-topbar span,
.muted-small {
    color: var(--pos-muted);
    font-size: 12px;
    margin: 0;
}

/* CUSTOMER CONTROLS - icon buttons, small actions, add buttons */
.icon-button,
.small-action,
.round-add,
.sheet-close,
.cart-line button {
    border: 0;
    background: #fff;
    color: var(--pos-ink);
    cursor: pointer;
}

.icon-button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(35, 20, 10, .07);
    position: relative;
}

.icon-button.has-badge b {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--pos-orange);
    color: #fff;
    font-size: 10px;
    display: grid;
    place-items: center;
}

/* CUSTOMER MENU - judul "What would you like today?" */
.menu-title {
    margin: 26px 0 14px;
}

/* TEXT COLOR - Customer Menu title */
.menu-title h2 {
    font-size: 24px;
    font-weight: 800;
    width: 220px;
    margin: 0;
}

/* CUSTOMER SESSION HISTORY - kartu Current Bill dan order sebelumnya */
.customer-session-card {
    background: #fff;
    border: 1px solid var(--pos-line);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 12px 28px rgba(44, 30, 14, .06);
}

/* CUSTOMER SESSION HISTORY - layout header dan baris order */
.session-card-head,
.session-order-line,
.notification-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.session-card-head {
    align-items: center;
    margin-bottom: 10px;
}

/* TEXT COLOR - Customer Session label "Current Bill" */
.session-card-head span {
    display: block;
    color: var(--pos-muted);
    font-size: 12px;
}

/* TEXT COLOR - Customer Session total amount */
.session-card-head strong {
    font-size: 18px;
}

/* CUSTOMER SESSION HISTORY - garis pemisah order */
.session-order-line {
    padding: 10px 0;
    border-top: 1px solid var(--pos-line);
}

/* TEXT COLOR - Customer Session order number and amount */
.session-order-line strong,
.session-order-line b {
    display: block;
    color: var(--pos-ink);
}

/* TEXT COLOR - Customer Session item summary */
.session-order-line p {
    margin: 3px 0 0;
    color: var(--pos-muted);
    font-size: 12px;
}

/* TEXT COLOR - Customer Session status badge */
.session-order-line span {
    display: inline-flex;
    border-radius: 999px;
    background: #fff3da;
    color: var(--pos-orange);
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 4px;
}

/* TEXT COLOR - Customer small action buttons */
.small-action {
    background: #fff;
    color: var(--pos-ink);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 12px;
}

/* CUSTOMER SEARCH - input search menu */
.search-wrap {
    display: grid;
    grid-template-columns: 24px 1fr 34px;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--pos-line);
    border-radius: 18px;
    padding: 8px 12px;
}

/* CUSTOMER SEARCH - input/button reset dasar */
.search-wrap input,
.search-wrap button {
    border: 0;
    outline: 0;
    background: transparent;
}

/* CUSTOMER CATEGORY TABS - filter kategori menu */
.category-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 0;
}

/* TEXT COLOR - Customer Category tab */
.category-tabs button {
    border: 0;
    background: #fff;
    color: var(--pos-muted);
    border-radius: 999px;
    padding: 8px 16px;
    white-space: nowrap;
}

/* TEXT COLOR - Customer Category active tab */
.category-tabs button.active {
    background: #ffe7c8;
    color: var(--pos-orange);
    font-weight: 800;
}

/* CUSTOMER MENU GRID - daftar menu bergambar */
.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* CUSTOMER MENU CARD - card tiap menu */
.menu-card {
    background: #fff;
    border: 1px solid var(--pos-line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(44, 30, 14, .06);
}

/* CUSTOMER MENU IMAGE - foto menu/detail/preview admin */
.menu-photo,
.detail-photo,
.preview-photo {
    background-size: cover;
    background-position: center;
}

.menu-photo {
    width: 100%;
    aspect-ratio: 1.1 / .82;
    display: block;
    border: 0;
}

/* CUSTOMER MENU INFO - wrapper teks nama/deskripsi/harga */
.menu-info {
    padding: 10px;
}

/* TEXT COLOR - Customer Menu item name */
.menu-name {
    border: 0;
    background: transparent;
    padding: 0;
    font-weight: 800;
    text-align: left;
    color: var(--pos-ink);
}

/* TEXT COLOR - Customer Menu item description */
.menu-info p {
    min-height: 36px;
    color: var(--pos-muted);
    font-size: 12px;
    margin: 4px 0 8px;
}

/* TEXT COLOR - Customer Menu add button */
.round-add {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pos-orange);
    color: #fff;
}

/* CUSTOMER CART BAR - tombol cart floating bawah */
.cart-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: min(394px, calc(100% - 28px));
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(40, 24, 12, .18);
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
}

/* TEXT COLOR - Customer Cart right action and primary button */
.cart-bar span:last-child,
.pos-btn.primary {
    background: var(--pos-orange);
    color: #fff;
}

/* CUSTOMER CART BAR - label Next */
.cart-bar span:last-child {
    border-radius: 999px;
    padding: 9px 18px;
    font-weight: 800;
}

/* CUSTOMER BOTTOM SHEET - modal menu detail/cart/notifikasi */
.bottom-sheet {
    position: fixed;
    inset: 0;
    background: rgba(16, 12, 9, .35);
    z-index: 50;
}

/* CUSTOMER BOTTOM SHEET - panel putih isi detail/cart/notification */
.sheet-panel {
    width: min(430px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    margin: 8vh auto 0;
    background: #fffaf4;
    border-radius: 24px 24px 0 0;
    padding: 18px;
    position: relative;
}

/* CUSTOMER BOTTOM SHEET - tombol close */
.sheet-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    z-index: 2;
}

/* CUSTOMER MENU DETAIL - foto besar menu */
.detail-photo {
    height: 240px;
    border-radius: 18px;
    margin: -4px -4px 18px;
}

/* CUSTOMER MENU DETAIL - grup pilihan variant/modifier */
.option-group {
    padding: 12px 0;
    border-top: 1px solid var(--pos-line);
}

/* TEXT COLOR - Customer Menu Detail option group title */
.option-group h4 {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 8px;
}

/* CUSTOMER MENU DETAIL - baris pilihan modifier/variant */
.option-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    margin: 8px 0;
}

/* CUSTOMER MENU DETAIL - input notes */
.option-group textarea {
    width: 100%;
    border: 1px solid var(--pos-line);
    border-radius: 14px;
    padding: 12px;
    resize: vertical;
}

/* CUSTOMER MENU DETAIL - quantity stepper */
.qty-row {
    width: 150px;
    margin: 8px auto 16px;
}

/* TEXT COLOR - Customer Menu Detail quantity buttons */
.qty-row button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    font-weight: 800;
}

/* GLOBAL BUTTON - tombol utama POS/customer/cashier */
.pos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 800;
    cursor: pointer;
}

/* GLOBAL BUTTON - full width */
.pos-btn.block {
    width: 100%;
}

/* TEXT COLOR - Global light button */
.pos-btn.light {
    background: #fff;
    color: var(--pos-red);
    border: 1px solid rgba(178, 24, 37, .12);
}

/* CUSTOMER CART - baris item di cart */
.cart-line {
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pos-line);
}

/* TEXT COLOR - Customer Cart item notes/modifier text */
.cart-line p {
    margin: 4px 0 0;
    color: var(--pos-muted);
    font-size: 12px;
}

/* CUSTOMER CART - subtotal/total row */
.bill-row {
    padding: 18px 0;
    font-size: 18px;
}

/* TEXT COLOR - Empty state / no data message */
.empty-state {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    color: var(--pos-muted);
}

/* EMPTY STATE - compact variant */
.empty-state.compact {
    padding: 10px 0;
    margin: 0;
    background: transparent;
}

/* CUSTOMER NOTIFICATIONS - notification item row */
.notification-line {
    justify-content: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--pos-line);
}

/* CUSTOMER NOTIFICATIONS - notification dot color */
.notification-dot {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--pos-orange);
    flex: 0 0 auto;
}

/* TEXT COLOR - Customer Notification title */
.notification-line strong {
    display: block;
}

/* TEXT COLOR - Customer Notification message */
.notification-line p {
    margin: 4px 0;
    color: var(--pos-muted);
    font-size: 13px;
}

/* TEXT COLOR - Customer Notification timestamp */
.notification-line span {
    color: var(--pos-muted);
    font-size: 11px;
}

/* TEXT COLOR - Customer Status icon */
.status-icon {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--pos-orange);
    font-size: 34px;
    box-shadow: 0 14px 34px rgba(40, 24, 12, .12);
}

.eta-box {
    width: 100%;
    background: #fff;
    color: var(--pos-ink);
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
}

/* TEXT COLOR - Customer ETA Box: label "Estimated ready time" */
.eta-box span,
.eta-box strong {
    display: block;
}

/* TEXT COLOR - Customer ETA Box: countdown / ready time value */
.eta-box strong {
    font-size: 26px;
}

/* LEGACY POS PAGE - wrapper halaman admin lama */
.pos-page {
    padding: 10px 18px 40px;
}

/* LEGACY POS PAGE - header */
.pos-page-header {
    margin-bottom: 18px;
}

/* TEXT COLOR - Legacy POS page title */
.pos-page-header h2 {
    margin: 0;
    font-weight: 800;
}

/* LEGACY LAYOUT GRIDS - ops/setup/report grid */
.ops-columns,
.setup-grid,
.owner-card-row,
.owner-report-grid {
    display: grid;
    gap: 16px;
}

.ops-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* LEGACY OPS/SETUP CARD - card putih standar */
.ops-column,
.setup-panel,
.owner-report-grid section {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #e9e9ef;
}

/* TEXT COLOR - Legacy ops/setup card title */
.ops-column h3,
.setup-panel h3 {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 12px;
}

/* LEGACY OPS CARD - order card */
.ops-card {
    background: #fafafa;
    border: 1px solid #eeeeee;
    border-left: 5px solid var(--pos-red);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

/* TEXT COLOR - Legacy ops card title */
.ops-card h4 {
    margin: 0;
    font-weight: 800;
}

/* TEXT COLOR - Legacy ops card paragraph */
.ops-card p {
    color: var(--pos-muted);
    margin: 6px 0;
}

/* LEGACY OPS ACTIONS - tombol aksi order */
.ops-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* TEXT COLOR - Legacy ops primary action button */
.ops-actions button {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: var(--pos-red);
    color: #fff;
}

/* TEXT COLOR - Legacy ops light action button */
.ops-actions button.light {
    background: #f1f1f4;
    color: var(--pos-ink);
}

.setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setup-panel.wide {
    grid-column: 1 / -1;
}

.setup-panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    color: var(--pos-ink);
    border-top: 1px solid #eee;
}

/* MASTER DATA FORM - form input menu/master data */
.menu-admin-form {
    display: grid;
    gap: 12px;
}

/* TEXT COLOR - Master Data form labels */
.menu-admin-form label {
    font-weight: 800;
    color: var(--pos-ink);
}

.menu-admin-form .form-control {
    margin-top: 6px;
    border-radius: 8px;
    border: 1px solid #e4e4ea;
}

.menu-admin-form .check-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.menu-admin-form .check-line input {
    margin: 0;
}

.master-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
    padding-bottom: 4px;
}

/* TEXT COLOR - Master Data tabs and Role list */
.master-tabs a,
.role-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--pos-ink);
    border: 1px solid #e7e7ee;
    padding: 9px 14px;
    white-space: nowrap;
}

/* TEXT COLOR - Master Data active tab and active role */
.master-tabs a.active,
.role-list a.active {
    background: var(--pos-red);
    border-color: var(--pos-red);
    color: #fff;
}

/* ROLE PERMISSION - role list wrapper */
.role-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ROLE PERMISSION - permission panel */
.permission-panel {
    margin-top: 16px;
}

/* ROLE PERMISSION - table horizontal scroll */
.permission-table-wrap {
    overflow-x: auto;
}

/* ROLE PERMISSION - permission table cells */
.permission-table th,
.permission-table td {
    text-align: center;
}

/* ROLE PERMISSION - first column module/menu name */
.permission-table td:first-child,
.permission-table th:first-child {
    text-align: left;
    min-width: 240px;
}

/* TEXT COLOR - Role Permission helper text */
.permission-table small {
    color: var(--pos-muted);
}

/* ROLE PERMISSION - check all column */
.permission-table th:last-child,
.permission-table td:last-child {
    min-width: 95px;
    background: rgba(255, 216, 78, .12);
}

/* ROLE PERMISSION - checkbox size */
.permission-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* MASTER DATA TABLE - table daftar master data */
.master-data-table {
    font-size: 13px;
}

/* MASTER DATA TABLE - keep columns readable */
.master-data-table th,
.master-data-table td {
    white-space: nowrap;
}

/* MASTER DATA TABLE - action column */
.master-actions {
    min-width: 86px;
}

/* MASTER MENU PREVIEW - preview menu bergambar di admin */
.admin-menu-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

/* MASTER MENU PREVIEW - preview item */
.admin-menu-preview div {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 10px;
    align-items: center;
    background: #fafafa;
    padding: 10px;
    border-radius: 8px;
}

.preview-photo {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    grid-row: span 2;
}

/* LEGACY OWNER DASHBOARD - wrapper dashboard owner lama */
.owner-dashboard {
    min-height: calc(100vh - 64px);
    background: #f4f5f8;
    margin: -15px 0 0;
    color: #111;
}

/* LEGACY OWNER DASHBOARD - top bar */
.owner-topbar {
    background: #fff;
    padding: 8px 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* TEXT COLOR - Legacy Owner back/search buttons */
.owner-back,
.owner-search {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f4f4f4;
    color: #222;
}

/* TEXT COLOR - Legacy Owner logo */
.owner-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pos-red);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
}

.owner-topbar h2,
.owner-topbar p {
    margin: 0;
}

/* LEGACY OWNER DASHBOARD - horizontal metric row */
.owner-card-row {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    padding: 16px 10px;
    overflow-x: auto;
}

/* TEXT COLOR - Legacy Owner metric cards */
.owner-metric {
    min-height: 180px;
    position: relative;
    overflow: hidden;
    background: var(--pos-red);
    color: #fff;
    border-radius: 22px;
    padding: 20px;
}

.owner-metric:before,
.owner-metric:after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}

.owner-metric:before {
    width: 150px;
    height: 150px;
    right: -36px;
    top: -42px;
}

.owner-metric:after {
    width: 130px;
    height: 130px;
    left: -52px;
    bottom: -70px;
}

.owner-metric > i {
    position: absolute;
    top: 22px;
    right: 22px;
    background: rgba(255,255,255,.16);
    border-radius: 14px;
    padding: 12px;
    font-size: 20px;
}

/* LEGACY OWNER DASHBOARD - ensure metric content above decoration */
.owner-metric h3,
.owner-metric p,
.owner-metric strong,
.owner-metric div {
    position: relative;
    z-index: 1;
}

/* TEXT COLOR - Legacy Owner metric title */
.owner-metric h3 {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 6px;
}

/* TEXT COLOR - Legacy Owner metric subtitle/date */
.owner-metric p {
    font-size: 12px;
    font-weight: 800;
}

/* TEXT COLOR - Legacy Owner metric value */
.owner-metric strong {
    display: block;
    font-size: 20px;
    margin: 12px 0;
}

.owner-metric div {
    display: flex;
    background: rgba(255,255,255,.14);
    border-radius: 14px;
    overflow: hidden;
}

.owner-metric span {
    flex: 1;
    padding: 10px;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.2);
}

/* LEGACY OWNER REPORT GRID - report cards */
.owner-report-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 10px 90px;
}

/* TEXT COLOR - Legacy Owner report title */
.owner-report-grid h3 {
    font-weight: 800;
    margin: 0 0 12px;
}

.report-line {
    padding: 10px 0;
    border-top: 1px solid #eee;
}

/* TEXT COLOR - Legacy Owner fixed footer */
.owner-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pos-red);
    color: #fff;
    border-radius: 26px 26px 0 0;
    padding: 20px;
    text-align: right;
}

/* UTILITY - hide element */
.is-hidden {
    display: none !important;
}

@media (max-width: 900px) {
    .ops-columns,
    .setup-grid,
    .owner-report-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 460px) {
    .customer-shell {
        max-width: none;
    }
    .menu-grid {
        gap: 10px;
    }
    .menu-title h2 {
        font-size: 22px;
    }
}

/* ADMIN / MASTER DATA WORKSPACE - wrapper halaman admin modern */
.crextio-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 78% 10%, rgba(255, 223, 78, .32), transparent 28%),
        linear-gradient(135deg, #eef1f4 0%, #d9dee5 100%);
    padding: 0;
    margin: 0;
}

/* ADMIN / MASTER DATA WORKSPACE - shell utama full screen */
.crextio-shell {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0 auto;
    background:
        radial-gradient(circle at 72% 16%, rgba(255, 232, 91, .34), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(244,245,241,.98) 100%);
    border-radius: 0;
    padding: 26px 34px 34px;
    box-shadow: none;
}

/* ADMIN / MASTER DATA TOPBAR - brand, nav, actions */
.crextio-topbar {
    min-height: 48px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
}

/* TEXT COLOR - Admin/Master Data brand "OSTOS" */
.crextio-brand {
    color: #1e2428;
    border: 1px solid rgba(24, 31, 36, .18);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 800;
    background: rgba(255, 255, 255, .72);
    transition: all .18s ease;
}

/* TEXT COLOR - Admin/Master Data hover links */
.crextio-brand:hover,
.crextio-nav a:hover,
.crextio-actions a:hover {
    color: #1e2428;
    text-decoration: none;
}

/* ADMIN / MASTER DATA NAV - menu tab dashboard/master/cashier */
.crextio-nav {
    justify-self: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    background: rgba(255, 255, 255, .78);
    border-radius: 999px;
    padding: 5px;
    box-shadow: 0 10px 30px rgba(40, 46, 52, .06);
}

/* TEXT COLOR - Admin/Master Data nav link */
.crextio-nav a {
    color: #2c3237;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    transition: all .18s ease;
}

/* TEXT COLOR - Admin/Master Data active nav link */
.crextio-nav a.active {
    color: #fff;
    background: #1f2529;
}

/* ADMIN / MASTER DATA ACTIONS - icons kanan topbar */
.crextio-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* TEXT COLOR - Admin/Master Data action icon buttons */
.crextio-actions a,
.crextio-round-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #1f2529;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(31,37,41,.06);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.crextio-actions a:hover,
.crextio-round-btn:hover,
.crextio-brand:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(31,37,41,.08);
    background: #fff;
}

/* ADMIN / MASTER DATA HERO - header halaman */
.crextio-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding: 28px 2px 16px;
}

/* TEXT COLOR - Admin/Master Data subtitle/section labels */
.crextio-hero p,
.crextio-table-toolbar span,
.crextio-section-title span,
.crextio-summary span {
    margin: 0;
    color: #6c737a;
    font-size: 12px;
    font-weight: 800;
}

/* TEXT COLOR - Admin/Master Data hero title */
.crextio-hero h1 {
    margin: 4px 0 0;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 800;
    color: #1f2529;
}

/* ADMIN / MASTER DATA OUTLET/MASTER SELECTOR */
.crextio-master-select {
    min-width: 190px;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(31,37,41,.08);
    border-radius: 22px;
    padding: 10px 14px;
}

.crextio-master-select label,
.crextio-master-select strong {
    display: block;
}

/* TEXT COLOR - Admin/Master Data selector label */
.crextio-master-select label {
    color: #6c737a;
    font-size: 11px;
    font-weight: 800;
}

.crextio-master-select select {
    width: 100%;
    border: 0;
    background: transparent;
    outline: 0;
    font-weight: 800;
}

/* ADMIN DASHBOARD SUMMARY - cards Sales/Orders/AOV/Open Orders */
.crextio-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.dashboard-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* FEATURE SETTING - informasi saat fitur Purchasing & Inventory belum aktif */
.feature-disabled-note {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(31,37,41,.08);
    border-radius: 22px;
    padding: 16px 18px;
    margin-bottom: 16px;
    background: rgba(255,255,255,.74);
    box-shadow: 0 16px 42px rgba(31,37,41,.08);
}

/* TEXT COLOR - Feature Setting inactive note icon */
.feature-disabled-note i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #20262c;
    background: #ffd84e;
}

/* TEXT COLOR - Feature Setting inactive note title */
.feature-disabled-note strong {
    display: block;
    color: #20262c;
    font-weight: 900;
}

/* TEXT COLOR - Feature Setting inactive note description */
.feature-disabled-note span {
    display: block;
    color: #657078;
    font-weight: 800;
}

/* TEXT COLOR - Admin Dashboard summary cards */
.crextio-summary article {
    min-height: 108px;
    border-radius: 26px;
    background: #ffd84e;
    padding: 18px;
    color: #1e2428;
    box-shadow: inset 0 -26px 50px rgba(255,255,255,.22), 0 18px 40px rgba(37, 43, 49, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.crextio-summary article:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 -26px 50px rgba(255,255,255,.22), 0 24px 52px rgba(37, 43, 49, .09);
}

.crextio-summary article:nth-child(2) {
    background: #ffffff;
}

.crextio-summary article:nth-child(3) {
    background: #dcf2df;
}

.crextio-summary article:nth-child(4) {
    background: #f1efff;
}

/* TEXT COLOR - Admin Dashboard summary value */
.crextio-summary strong {
    display: block;
    font-size: 24px;
    line-height: 1.2;
    margin: 8px 0 4px;
}

/* TEXT COLOR - Admin Dashboard summary helper text */
.crextio-summary small {
    color: #626970;
}

/* MASTER DATA MENU - horizontal master data categories */
.crextio-master-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* TEXT COLOR - Master Data category link */
.crextio-master-menu a {
    color: #3b4248;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(31,37,41,.08);
    border-radius: 999px;
    padding: 9px 14px;
    font-weight: 800;
    font-size: 12px;
    transition: all .18s ease;
}

/* TEXT COLOR - Master Data active category link */
.crextio-master-menu a.active {
    color: #1f2529;
    background: #ffd84e;
}

/* TEXT COLOR - Master Data category hover */
.crextio-master-menu a:hover {
    color: #1f2529;
    text-decoration: none;
    background: #fff;
    transform: translateY(-1px);
}

/* MASTER DATA CARD - form/table containers */
.crextio-form-card,
.crextio-table-card {
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(31,37,41,.08);
    border-radius: 28px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 18px 44px rgba(37, 43, 49, .07);
    backdrop-filter: blur(8px);
}

/* MASTER DATA CARD HEADER - section title and toolbar */
.crextio-section-title,
.crextio-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

/* TEXT COLOR - Master Data card title */
.crextio-section-title h2,
.crextio-table-toolbar h2 {
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: 800;
    color: #1f2529;
}

/* MASTER DATA FORM GRID - form layout */
.crextio-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* TEXT COLOR - Master Data form label */
.crextio-form-grid label {
    color: #252c31;
    font-weight: 800;
    font-size: 13px;
}

/* TEXT COLOR - Master Data form input/select/textarea */
.crextio-form-grid input,
.crextio-form-grid select,
.crextio-form-grid textarea {
    width: 100%;
    min-height: 42px;
    margin-top: 7px;
    border: 1px solid rgba(31,37,41,.08);
    border-radius: 18px;
    background: #fff;
    padding: 9px 12px;
    outline: 0;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.crextio-form-grid input:focus,
.crextio-form-grid select:focus,
.crextio-form-grid textarea:focus {
    border-color: rgba(255, 216, 78, .9);
    box-shadow: 0 0 0 4px rgba(255, 216, 78, .18);
}

.crextio-form-grid textarea {
    min-height: 88px;
}

.crextio-form-grid .span-2 {
    grid-column: 1 / -1;
}

/* TEXT COLOR - Master Data form helper text */
.crextio-form-grid label small {
    display: block;
    margin-top: 6px;
    color: #7a8288;
    font-size: 11px;
    font-weight: 700;
}

.crextio-file-input input[type="file"] {
    min-height: auto;
    padding: 10px;
}

/* MASTER DATA UPLOAD/QR PREVIEW - image and QR preview boxes */
.crextio-upload-preview,
.crextio-qr-field {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    margin-top: 8px;
    border: 1px dashed rgba(31,37,41,.16);
    border-radius: 18px;
    background: #fbfcfd;
    padding: 10px;
}

.crextio-upload-preview img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 14px;
}

/* TEXT COLOR - Master Data empty upload preview */
.crextio-upload-preview.empty {
    color: #7a8288;
}

/* TEXT COLOR - Master Data upload preview icon */
.crextio-upload-preview.empty i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #1f2529;
    background: #ffd84e;
}

/* TEXT COLOR - Master Data upload filename/description */
.crextio-upload-preview em {
    color: #4b545c;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}

.crextio-qr-field {
    align-items: flex-start;
    flex-direction: column;
    background: #fff;
}

/* TEXT COLOR - Master Data QR field label */
.crextio-qr-field > span {
    color: #252c31;
    font-size: 13px;
    font-weight: 800;
}

.crextio-qr-field img {
    width: 132px;
    height: 132px;
    border-radius: 16px;
    background: #fff;
    padding: 8px;
    border: 1px solid rgba(31,37,41,.08);
}

/* MASTER DATA CHECKBOX LINE - status/boolean input row */
.crextio-check {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(31,37,41,.08);
    border-radius: 16px;
    background: rgba(241, 220, 23, 0.7) !important;
    padding: 10px 12px;
    margin-top: 20px;
}

.crextio-check input {
    width: auto;
    min-height: auto;
    margin: 0;
}

/* MASTER DATA FORM ACTIONS - save/cancel buttons row */
.crextio-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* GLOBAL ADMIN BUTTONS - primary, soft, filter buttons */
.crextio-primary-btn,
.crextio-soft-btn,
.crextio-filter-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border-radius: 999px;
    padding: 9px 16px;
    border: 0;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* TEXT COLOR - Admin primary button */
.crextio-primary-btn {
    color: #1f2529;
    background: #ffd84e;
}

/* TEXT COLOR - Admin button hover */
.crextio-primary-btn:hover,
.crextio-soft-btn:hover,
.crextio-filter-row button:hover {
    color: #1f2529;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(31,37,41,.08);
}

/* TEXT COLOR - Admin soft/filter buttons */
.crextio-soft-btn,
.crextio-filter-row button {
    color: #1f2529;
    background: #fff;
    border: 1px solid rgba(31,37,41,.08);
}

.crextio-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* MASTER DATA SEARCH - table search field */
.crextio-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    min-width: 240px;
    border-radius: 999px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid rgba(31,37,41,.08);
}

.crextio-search input {
    width: 100%;
    border: 0;
    outline: 0;
}

/* MASTER DATA TABLE - wrapper and table styling */
.crextio-table-wrap {
    overflow-x: auto;
}

.crextio-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-size: 13px;
}

/* TEXT COLOR - Master Data table header */
.crextio-table th {
    color: #7a8288;
    font-size: 12px;
    font-weight: 800;
    padding: 10px 12px;
    white-space: nowrap;
}

/* TEXT COLOR - Master Data table cell */
.crextio-table td {
    background: #fff;
    padding: 12px;
    color: #30373d;
    white-space: nowrap;
    vertical-align: middle;
    transition: background .18s ease;
}

.crextio-table tbody tr:hover td {
    background: #fff8d7;
}

.crextio-table tbody tr td:first-child {
    border-radius: 18px 0 0 18px;
}

.crextio-table tbody tr td:last-child {
    border-radius: 0 18px 18px 0;
}

.crextio-table tbody tr.selected-row td {
    background: #ffd84e;
}

/* TEXT COLOR - Master Data status badge */
.crextio-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 800;
}

/* TEXT COLOR - Master Data active/green status */
.crextio-status.green {
    background: #dff6bf;
    color: #355d0b;
}

/* TEXT COLOR - Master Data inactive/gray status */
.crextio-status.gray {
    background: #f0f1f2;
    color: #676e75;
}

/* TEXT COLOR - Master Data image link */
.crextio-image-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #6472d9;
    font-weight: 800;
}

.crextio-image-link img,
.crextio-qr-table-btn img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 10px;
}

/* TEXT COLOR - Master Data QR table button */
.crextio-qr-table-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1f2529;
    border: 0;
    border-radius: 999px;
    background: #fff3bf;
    padding: 6px 10px;
    font-weight: 900;
}

.crextio-qr-table-btn img {
    background: #fff;
    padding: 3px;
}

.crextio-row-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* TEXT COLOR - Master Data row action icon */
.crextio-row-actions a {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #1f2529;
    background: rgba(31,37,41,.07);
    transition: transform .18s ease, background .18s ease;
}

.crextio-row-actions a:hover {
    transform: translateY(-1px);
    text-decoration: none;
    background: rgba(31,37,41,.12);
}

/* TEXT COLOR - Master Data danger/delete action */
.crextio-row-actions a.danger {
    color: #b21825;
    background: rgba(178,24,37,.09);
}

/* ADMIN DASHBOARD - grid dashboard cards */
.crextio-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 16px;
}

/* ADMIN DASHBOARD - list blocks */
.crextio-list {
    display: grid;
    gap: 8px;
}

.crextio-list div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border-radius: 16px;
    padding: 12px 14px;
}

/* ADMIN DASHBOARD - quick action grid */
.crextio-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* TEXT COLOR - Admin Dashboard quick action */
.crextio-action-grid a {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1f2529;
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    font-weight: 800;
}

/* TEXT COLOR - Admin Dashboard quick action icon */
.crextio-action-grid i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffd84e;
}

@media (max-width: 980px) {
    .crextio-topbar,
    .crextio-hero,
    .crextio-section-title,
    .crextio-table-toolbar {
        align-items: flex-start;
        grid-template-columns: 1fr;
        flex-direction: column;
    }
    .crextio-nav {
        justify-self: stretch;
        border-radius: 18px;
    }
    .crextio-summary,
    .dashboard-summary,
    .crextio-dashboard-grid,
    .crextio-form-grid {
        grid-template-columns: 1fr;
    }
    .crextio-form-grid .span-2 {
        grid-column: auto;
    }
}

@media (max-width: 540px) {
    .crextio-page {
        padding: 10px;
    }
    .crextio-shell {
        border-radius: 20px;
        padding: 14px;
    }
    .crextio-hero h1 {
        font-size: 26px;
    }
    .crextio-search {
        min-width: 100%;
    }
}

/* OWNER EXECUTIVE DASHBOARD - halaman laporan owner modern */
.owner-exec-page {
    background: radial-gradient(circle at 18% 4%, rgba(255,216,78,.42), transparent 28%),
        linear-gradient(135deg, #f4f6f8 0%, #eef2f6 52%, #f8f5e9 100%);
}

/* OWNER EXECUTIVE DASHBOARD - shell utama */
.owner-exec-shell {
    max-width: 1380px;
    gap: 18px;
    box-shadow: 0 26px 70px rgba(27,34,43,.14);
}

/* OWNER EXECUTIVE TOPBAR - nav sticky dashboard owner */
.owner-exec-topbar {
    position: sticky;
    top: 12px;
    z-index: 5;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(31,37,41,.06);
    border-radius: 24px;
    padding: 10px;
}

/* OWNER EXECUTIVE HEADER - hero dan filter bar layout */
.owner-exec-hero,
.owner-exec-filterbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* TEXT COLOR - Owner Dashboard greeting "GOOD AFTERNOON" */
.owner-exec-hero p {
    margin: 0 0 7px;
    color: #727980;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

/* TEXT COLOR - Owner Dashboard title "Executive Dashboard" */
.owner-exec-hero h1 {
    margin: 0;
    color: #20262c;
    font-size: 42px;
    line-height: 1.05;
    font-weight: 900;
}

/* TEXT COLOR - Owner Dashboard date pill */
.owner-exec-date {
    color: #20262c;
    background: #fff;
    border: 1px solid rgba(31,37,41,.06);
    border-radius: 999px;
    padding: 12px 18px;
    font-size: 12px;
    font-weight: 900;
}

/* OWNER FILTER BAR - period/outlet selector wrapper */
.owner-exec-filterbar {
    padding: 10px;
    background: rgba(255,255,255,.66);
    border: 1px solid rgba(31,37,41,.06);
    border-radius: 22px;
}

.owner-exec-filterbar form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* TEXT COLOR - Owner Filter label and selected outlet text */
.owner-exec-filterbar label,
.owner-exec-filterbar div {
    margin: 0;
    color: #778087;
    font-size: 12px;
    font-weight: 800;
}

/* TEXT COLOR - Owner Filter select */
.owner-exec-filterbar select {
    min-height: 40px;
    border: 0;
    outline: 0;
    color: #20262c;
    background: #ffd84e;
    border-radius: 999px;
    padding: 0 34px 0 16px;
    font-weight: 900;
}

/* OWNER OVERVIEW - KPI plus Priority Attention layout */
.owner-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, .55fr);
    gap: 16px;
}

/* OWNER KPI - compact 4-card layout */
.owner-kpi-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* OWNER PRIORITY ATTENTION - main attention card */
.owner-priority-card {
    min-height: 100%;
}

/* OWNER REPORT MENU - category tiles for Sales/Product/etc */
.owner-report-menu {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

/* TEXT COLOR - Owner Report Menu tile */
.owner-report-menu a {
    min-height: 104px;
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 8px 12px;
    color: #20262c;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(31,37,41,.07);
    border-radius: 24px;
    padding: 14px;
    box-shadow: 0 16px 42px rgba(31,37,41,.08);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* TEXT COLOR - Owner Report Menu hover/focus */
.owner-report-menu a:hover,
.owner-report-menu a:focus {
    color: #20262c;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(31,37,41,.12);
}

/* TEXT COLOR - Owner Report Menu icon */
.owner-report-menu i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    grid-row: 1 / 3;
    border-radius: 16px;
    color: #20262c;
    background: #ffd84e;
}

/* TEXT COLOR - Owner Report Menu title */
.owner-report-menu span {
    align-self: end;
    font-size: 15px;
    font-weight: 900;
}

/* TEXT COLOR - Owner Report Menu subtitle */
.owner-report-menu small {
    align-self: start;
    color: #778087;
    font-size: 12px;
    font-weight: 800;
}

/* OWNER REPORT STACK - accordion report sections */
.owner-report-stack {
    display: grid;
    gap: 14px;
}

/* OWNER REPORT SECTION - accordion container */
.owner-report-section {
    overflow: hidden;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(31,37,41,.07);
    border-radius: 26px;
    box-shadow: 0 16px 42px rgba(31,37,41,.08);
}

/* OWNER REPORT SECTION - accordion summary row */
.owner-report-section summary {
    min-height: 80px;
    display: grid;
    grid-template-columns: 46px 1fr auto 18px;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.owner-report-section summary::-webkit-details-marker {
    display: none;
}

/* TEXT COLOR - Owner Report Section icon */
.owner-report-section summary > i {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #20262c;
    background: #ffd84e;
}

/* TEXT COLOR - Owner Report Section title */
.owner-report-section summary b {
    display: block;
    color: #20262c;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 900;
}

/* TEXT COLOR - Owner Report Section subtitle */
.owner-report-section summary em {
    display: block;
    margin-top: 4px;
    color: #778087;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

/* TEXT COLOR - Owner Report Section right badge */
.owner-report-section summary strong {
    color: #20262c;
    background: #f2f4f5;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    white-space: nowrap;
}

/* TEXT COLOR - Owner Report Section arrow icon */
.owner-report-section summary:after {
    content: "\f107";
    font-family: FontAwesome;
    color: #778087;
    font-size: 16px;
    margin-left: -4px;
}

/* OWNER REPORT SECTION - open state summary background */
.owner-report-section[open] summary {
    background: rgba(255,248,217,.64);
}

.owner-report-section[open] summary:after {
    content: "\f106";
}

/* OWNER REPORT CONTENT - content grid inside accordion */
.owner-report-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 16px 16px;
}

.owner-report-content .span-2 {
    grid-column: 1 / -1;
}

/* TEXT COLOR - Owner empty report message */
.owner-empty {
    margin: 0;
    color: #778087;
    background: #f7f8f9;
    border-radius: 16px;
    padding: 12px;
    font-weight: 800;
}

/* OWNER KPI GRID - KPI cards layout */
.owner-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.owner-kpi-grid.owner-kpi-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* OWNER CARD BASE - KPI and report cards */
.owner-kpi-grid article,
.owner-card {
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(31,37,41,.07);
    border-radius: 24px;
    box-shadow: 0 16px 42px rgba(31,37,41,.08);
}

/* OWNER KPI CARD - single metric card */
.owner-kpi-grid article {
    min-height: 132px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

.owner-kpi-grid article:after {
    content: "";
    position: absolute;
    right: -26px;
    top: -30px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(255,216,78,.34);
}

/* TEXT COLOR - Owner KPI label and card section label */
.owner-kpi-grid span,
.owner-card-head span {
    color: #7b838b;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

/* TEXT COLOR - Owner KPI value */
.owner-kpi-grid strong {
    color: #20262c;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
}

/* TEXT COLOR - Owner KPI badge/default comparison */
.owner-kpi-grid small {
    width: max-content;
    max-width: 100%;
    color: #657078;
    background: #f2f4f5;
    border-radius: 999px;
    padding: 5px 9px;
    font-weight: 900;
}

/* TEXT COLOR - Owner KPI positive badge */
.owner-kpi-grid small.up {
    color: #226b3b;
    background: #def5e4;
}

/* TEXT COLOR - Owner KPI negative/down badge */
.owner-kpi-grid small.down {
    color: #2b6788;
    background: #dff1fb;
}

.owner-exec-grid {
    display: grid;
    gap: 16px;
}

.owner-exec-grid.two {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
}

.owner-exec-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.owner-exec-grid.chart-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr);
}

.owner-card {
    padding: 18px;
}

/* OWNER CARD HEADER - card title row */
.owner-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

/* TEXT COLOR - Owner Card title */
.owner-card-head h2 {
    margin: 4px 0 0;
    color: #20262c;
    font-size: 21px;
    line-height: 1.1;
    font-weight: 900;
}

/* TEXT COLOR - Owner Card header icon */
.owner-card-head > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #20262c;
    background: #ffd84e;
}

/* OWNER SUMMARY LIST - Sales Summary rows */
.owner-summary-list {
    display: grid;
    gap: 10px;
}

.owner-summary-list div {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 16px;
    padding: 10px 12px;
    background: #f7f8f9;
}

/* TEXT COLOR - Owner Summary total row */
.owner-summary-list div.total {
    color: #20262c;
    background: #fff2bb;
    border: 1px solid rgba(244,197,66,.5);
}

/* TEXT COLOR - Owner Summary label / finance labels */
.owner-summary-list span,
.owner-progress-list span,
.owner-cash-box span,
.owner-issue-grid span,
.owner-addon-revenue span {
    color: #727b83;
    font-size: 12px;
    font-weight: 800;
}

/* TEXT COLOR - Owner Summary value */
.owner-summary-list strong {
    color: #20262c;
    font-weight: 900;
}

.owner-summary-list.slim div {
    min-height: 36px;
    padding: 8px 10px;
}

.owner-live-list {
    display: grid;
    gap: 10px;
}

/* OWNER LIVE OPERATION - status rows */
.owner-live-list div {
    display: grid;
    grid-template-columns: 12px 42px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border-radius: 16px;
    padding: 8px 12px;
    background: #f7f8f9;
}

.owner-live-list span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffd84e;
}

/* TEXT COLOR - Owner Live Operation number */
.owner-live-list strong {
    color: #20262c;
    font-size: 22px;
    font-weight: 900;
}

/* TEXT COLOR - Owner Live Operation label */
.owner-live-list em {
    color: #485159;
    font-style: normal;
    font-weight: 800;
}

.owner-hour-chart {
    height: 260px;
    display: grid;
    grid-template-columns: repeat(12, minmax(22px, 1fr));
    align-items: end;
    gap: 10px;
    padding: 16px 4px 4px;
    border-radius: 20px;
    background: linear-gradient(to top, rgba(32,38,44,.06) 1px, transparent 1px);
    background-size: 100% 52px;
}

/* OWNER SALES BY HOUR - single hour bar item */
.owner-hour {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    gap: 8px;
    text-align: center;
}

/* OWNER SALES BY HOUR - bar color */
.owner-hour span {
    width: 100%;
    min-height: 8px;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, #ffd84e, #f1844b);
    box-shadow: 0 10px 22px rgba(241,132,75,.22);
    transition: height .25s ease, transform .18s ease;
}

.owner-hour:hover span {
    transform: translateY(-3px);
}

/* TEXT COLOR - Owner Sales by Hour time label */
.owner-hour small {
    color: #7b838b;
    font-size: 11px;
    font-weight: 900;
}

/* OWNER BUSIEST HOUR - peak card layout */
.owner-peak-card {
    display: flex;
    flex-direction: column;
}

/* TEXT COLOR - Owner Busiest Hour main value */
.owner-peak-card > strong {
    color: #20262c;
    font-size: 28px;
    font-weight: 900;
}

/* TEXT COLOR - Owner Busiest Hour details */
.owner-peak-card p {
    margin: 8px 0 0;
    color: #485159;
    font-weight: 800;
}

/* TEXT COLOR - Owner Busiest Hour comparison badge */
.owner-peak-card small {
    margin-top: auto;
    color: #226b3b;
    background: #def5e4;
    border-radius: 999px;
    padding: 8px 10px;
    font-weight: 900;
}

/* OWNER DAILY SALES COMPARISON - comparison list */
.owner-compare-list {
    display: grid;
    gap: 12px;
}

.owner-compare-list div {
    display: grid;
    grid-template-columns: 44px 1fr 1fr 112px;
    align-items: center;
    gap: 10px;
}

/* TEXT COLOR - Owner Daily Sales day label */
.owner-compare-list label {
    margin: 0;
    color: #485159;
    font-weight: 900;
}

.owner-compare-list span {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #eef0f2;
}

.owner-compare-list i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #20262c;
}

.owner-compare-list span.last i {
    background: #cad0d5;
}

/* TEXT COLOR - Owner Daily Sales amount */
.owner-compare-list strong {
    text-align: right;
    color: #20262c;
}

/* OWNER PRODUCT FILTER PILLS - By Quantity / By Revenue */
.owner-pills {
    display: flex;
    gap: 8px;
}

/* TEXT COLOR - Owner product filter pill */
.owner-pills button {
    min-height: 32px;
    border: 0;
    border-radius: 999px;
    padding: 0 12px;
    color: #20262c;
    background: #f0f2f4;
    font-size: 12px;
    font-weight: 900;
}

/* TEXT COLOR - Owner active product filter pill */
.owner-pills button:first-child {
    background: #ffd84e;
}

/* OWNER PRODUCT RANKING - top menu / low menu / addons */
.owner-ranked-list {
    display: grid;
    gap: 10px;
}

.owner-ranked-list div {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    border-radius: 18px;
    padding: 10px;
    background: #f7f8f9;
}

/* TEXT COLOR - Owner ranking number */
.owner-ranked-list b {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #20262c;
    background: #ffd84e;
}

/* TEXT COLOR - Owner ranking item name */
.owner-ranked-list span {
    color: #20262c;
    font-weight: 900;
}

/* TEXT COLOR - Owner ranking item detail */
.owner-ranked-list small {
    display: block;
    margin-top: 4px;
    color: #7b838b;
    font-weight: 800;
}

/* TEXT COLOR - Owner ranking revenue/value */
.owner-ranked-list strong {
    color: #20262c;
    white-space: nowrap;
}

/* TEXT COLOR - Owner low selling ranking number */
.owner-ranked-list.low b {
    color: #7a341d;
    background: #ffe2d4;
}

/* OWNER CATEGORY REPORT - donut and category list */
.owner-category-card {
    display: grid;
    grid-template-columns: 190px 1fr;
    align-items: center;
    gap: 20px;
}

.owner-donut {
    width: 180px;
    aspect-ratio: 1;
    border-radius: 50%;
    position: relative;
}

.owner-donut:after {
    content: "";
    position: absolute;
    inset: 34px;
    border-radius: inherit;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(31,37,41,.06);
}

/* OWNER CATEGORY REPORT - category list wrapper */
.owner-category-list {
    display: grid;
    gap: 8px;
}

/* TEXT COLOR - Owner Category top category name */
.owner-category-list > strong {
    color: #20262c;
    font-size: 24px;
    font-weight: 900;
}

/* TEXT COLOR - Owner Category description */
.owner-category-list p {
    margin: 0;
    color: #657078;
    font-weight: 800;
}

/* TEXT COLOR - Owner Category list row */
.owner-category-list div {
    display: grid;
    grid-template-columns: 10px 1fr auto;
    align-items: center;
    gap: 8px;
    color: #485159;
    font-weight: 800;
}

.owner-category-list div span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* TEXT COLOR - Owner Category percentage */
.owner-category-list em {
    color: #20262c;
    font-style: normal;
    font-weight: 900;
}

/* OWNER MINI METRICS - Avg Prep / On Time / Delayed chips */
.owner-mini-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* TEXT COLOR - Owner Mini Metrics chip */
.owner-mini-metrics span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    color: #657078;
    background: #f1f3f4;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
}

/* TEXT COLOR - Owner Mini Metrics value */
.owner-mini-metrics b {
    color: #20262c;
}

.owner-mini-metrics.compact {
    margin-top: 12px;
}

/* OWNER TABLE REPORT - responsive table wrapper */
.owner-table-wrap {
    overflow-x: auto;
}

.owner-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    font-size: 13px;
}

/* TEXT COLOR - Owner table header */
.owner-table th {
    padding: 8px 10px;
    color: #7b838b;
    font-size: 11px;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
}

/* TEXT COLOR - Owner table cell */
.owner-table td {
    padding: 12px 10px;
    color: #30373d;
    background: #f7f8f9;
    font-weight: 800;
    white-space: nowrap;
}

.owner-table tbody tr td:first-child {
    border-radius: 14px 0 0 14px;
}

.owner-table tbody tr td:last-child {
    border-radius: 0 14px 14px 0;
}

.owner-table tbody tr:hover td {
    background: #fff4c9;
}

/* TEXT COLOR - Owner kitchen attention and promo note */
.owner-attention,
.owner-note {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: 18px;
    padding: 12px 14px;
    color: #7a341d;
    background: #fff0e8;
    font-weight: 900;
}

.owner-attention i {
    margin-top: 2px;
}

/* OWNER PROGRESS LIST - payment/category progress bars */
.owner-progress-list {
    display: grid;
    gap: 12px;
}

.owner-progress-list div {
    display: grid;
    gap: 6px;
}

/* TEXT COLOR - Owner Progress row label */
.owner-progress-list span {
    display: flex;
    justify-content: space-between;
}

.owner-progress-list i {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f2;
}

.owner-progress-list em {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #4b9fe1, #5dbb63);
}

/* TEXT COLOR - Owner Progress value */
.owner-progress-list strong {
    color: #20262c;
}

/* OWNER CASH/ISSUE/ADDON BOXES - finance/control summary boxes */
.owner-cash-box,
.owner-issue-grid {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.owner-cash-box div,
.owner-issue-grid div,
.owner-addon-revenue {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-radius: 16px;
    padding: 10px 12px;
    background: #f7f8f9;
}

/* TEXT COLOR - Owner cash/issue/addon values */
.owner-cash-box strong,
.owner-issue-grid strong,
.owner-addon-revenue strong {
    color: #20262c;
    font-weight: 900;
}

/* TEXT COLOR - Owner Promo title */
.owner-promo-title {
    margin: 0 0 12px;
    color: #20262c;
    font-size: 24px;
    font-weight: 900;
}

/* TEXT COLOR - Owner Promo insight note */
.owner-note {
    display: block;
    color: #34532d;
    background: #e9f7df;
}

.owner-ranked-list.addons div {
    grid-template-columns: 1fr auto;
}

.owner-addon-revenue {
    margin-top: 16px;
    align-items: center;
    background: #fff2bb;
}

/* OWNER ISSUE GRID - Cancel/Reject/Void/Refund boxes */
.owner-issue-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.owner-issue-grid div {
    flex-direction: column;
}

.owner-issue-grid .wide {
    grid-column: 1 / -1;
    flex-direction: row;
}

/* OWNER PRIORITY ATTENTION - insight list layout */
.owner-insights {
    display: grid;
    gap: 12px;
}

.owner-insights .owner-card-head {
    margin-bottom: 4px;
}

/* OWNER PRIORITY ATTENTION - single insight item */
.owner-insights > div:not(.owner-card-head) {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: start;
    gap: 10px;
    border-radius: 18px;
    padding: 12px;
    background: #f7f8f9;
}

/* OWNER PRIORITY ATTENTION - icon circle */
.owner-insights i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

/* TEXT COLOR - Priority Attention warning icon */
.owner-insights .warning i {
    color: #7a341d;
    background: #ffe2d4;
}

/* TEXT COLOR - Priority Attention good icon */
.owner-insights .good i {
    color: #226b3b;
    background: #def5e4;
}

/* TEXT COLOR - Priority Attention message */
.owner-insights p {
    margin: 0;
    color: #3f484f;
    font-weight: 800;
}

/* CASHIER PAYMENT PANEL - panel pembayaran/session bill lama */
.cashier-payment-panel {
    margin-top: 18px;
    background: #fff;
    border: 1px solid rgba(31,37,41,.08);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 16px 38px rgba(31,37,41,.08);
}

/* CASHIER PAYMENT PANEL - header/title rows */
.cashier-payment-head,
.cashier-session-title,
.cashier-bill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cashier-payment-head {
    margin-bottom: 14px;
}

/* TEXT COLOR - Cashier payment/session title */
.cashier-payment-head h3,
.cashier-session-title h4 {
    margin: 0;
    color: #20262c;
    font-weight: 900;
}

/* CASHIER SESSION GRID - daftar session meja */
.cashier-session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

/* CASHIER SESSION CARD - card session meja */
.cashier-session-card {
    border-radius: 18px;
    padding: 14px;
    background: #f7f8f9;
    border: 1px solid rgba(31,37,41,.06);
}

.cashier-session-title {
    align-items: flex-start;
    margin-bottom: 12px;
}

/* TEXT COLOR - Cashier session order summary */
.cashier-session-title p {
    margin: 5px 0 0;
    color: #727b83;
    font-size: 12px;
    line-height: 1.4;
}

/* TEXT COLOR - Cashier session status badge */
.cashier-session-title span {
    color: #20262c;
    background: #ffd84e;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

/* TEXT COLOR - Cashier bill row label */
.cashier-bill-row {
    min-height: 34px;
    color: #657078;
    font-weight: 800;
}

/* TEXT COLOR - Cashier bill row value */
.cashier-bill-row strong {
    color: #20262c;
    font-weight: 900;
}

/* TEXT COLOR - Cashier bill due row */
.cashier-bill-row.due {
    margin-top: 6px;
    border-radius: 14px;
    padding: 8px 10px;
    color: #7a341d;
    background: #fff0e8;
}

/* CASHIER PAYMENT FORM - method/amount/reference */
.cashier-payment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

/* TEXT COLOR - Cashier payment inputs */
.cashier-payment-form select,
.cashier-payment-form input {
    min-height: 38px;
    width: 100%;
    border: 1px solid rgba(31,37,41,.1);
    border-radius: 14px;
    padding: 0 10px;
    background: #fff;
    outline: 0;
}

.cashier-payment-form input[name="reference_number"],
.cashier-payment-form button {
    grid-column: 1 / -1;
}

/* TEXT COLOR - Cashier payment submit button */
.cashier-payment-form button {
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    color: #20262c;
    background: #ffd84e;
    font-weight: 900;
}

/* TEXT COLOR - Cashier paid state */
.cashier-paid-state {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    border-radius: 14px;
    padding: 10px;
    color: #226b3b;
    background: #def5e4;
    font-weight: 900;
}

/* CASHIER BOARD - halaman cashier modern */
.cashier-app-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #f4f6f8 0%, #eef2f6 52%, #fbf7e8 100%);
}

/* CASHIER BOARD - shell utama */
.cashier-app-shell {
    max-width: 1540px;
    min-height: calc(100vh - 28px);
    gap: 16px;
    box-shadow: 0 26px 70px rgba(27,34,43,.12);
}

.cashier-topbar {
    margin-bottom: 0;
}

/* CASHIER MANUAL ORDER - tombol tab di header untuk order manual kasir */
.cashier-nav-action {
    border: 0;
    border-radius: 999px;
    padding: 10px 16px;
    background: transparent;
    color: #20262c;
    font-weight: 900;
    line-height: 1;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.cashier-nav-action:hover,
.cashier-nav-action:focus {
    color: #20262c;
    background: rgba(255, 216, 78, .72);
    outline: 0;
    transform: translateY(-1px);
}

/* CASHIER BOARD HERO - title and refresh button row */
.cashier-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

/* TEXT COLOR - Cashier hero subtitle */
.cashier-hero p {
    margin: 0 0 6px;
    color: #727980;
    font-size: 12px;
    font-weight: 900;
}

/* TEXT COLOR - Cashier hero title */
.cashier-hero h1 {
    margin: 0;
    color: #20262c;
    font-size: 38px;
    line-height: 1.05;
    font-weight: 900;
}

/* CASHIER BOARD GRID - New/Active/Ready/Finish/Closed */
.cashier-board {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.cashier-board .ops-column:nth-child(1),
.cashier-board .ops-column:nth-child(2),
.cashier-board .ops-column:nth-child(3) {
    grid-column: span 2;
}

.cashier-board .ops-column:nth-child(4),
.cashier-board .ops-column:nth-child(5) {
    grid-column: span 3;
}

/* CASHIER BOARD COLUMN - each status column */
.cashier-board .ops-column {
    min-height: 560px;
    max-height: 520px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    padding: 12px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(31,37,41,.07);
    box-shadow: 0 16px 42px rgba(31,37,41,.08);
}

/* TEXT COLOR - Cashier column title */
.cashier-board .ops-column h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
    color: #20262c;
    font-size: 16px;
    font-weight: 900;
}

/* TEXT COLOR - Cashier column count badge */
.cashier-board .ops-column h3 b {
    min-width: 34px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: #20262c;
    background: #ffd84e;
    font-size: 13px;
}

.cashier-board .ops-list {
    overflow-y: auto;
    padding-right: 2px;
}

/* CASHIER ORDER CARD - card per order */
.cashier-board .ops-card {
    border: 1px solid rgba(31,37,41,.07);
    border-left: 0;
    border-radius: 18px;
    padding: 12px;
    background: #f7f8f9;
    box-shadow: none;
}

/* CASHIER ORDER CARD - card head layout */
.ops-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

/* TEXT COLOR - Cashier order status/ETA/meta badges */
.ops-card-head b,
.ops-meta span {
    border-radius: 999px;
    padding: 5px 8px;
    color: #657078;
    background: #eef0f2;
    font-size: 11px;
    font-weight: 900;
    text-transform: capitalize;
    white-space: nowrap;
}

/* TEXT COLOR - Cashier order total */
.cashier-board .ops-card strong {
    display: block;
    margin: 8px 0;
    color: #20262c;
    font-size: 18px;
}

.ops-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* CASHIER TIMELINE - New/Active/Ready/Finish/Closed timestamps */
.ops-timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin: 8px 0;
}

/* TEXT COLOR - Cashier timeline time */
.ops-timeline span {
    min-width: 0;
    border-radius: 10px;
    background: rgba(31,37,41,.05);
    padding: 5px 4px;
    color: #5e6870;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
}

/* TEXT COLOR - Cashier timeline label */
.ops-timeline b {
    display: block;
    color: #20262c;
    font-size: 9px;
    text-transform: uppercase;
}

/* CASHIER ETA FORM - set estimasi waktu */
.ops-eta-form {
    margin: 10px 0;
    border-radius: 14px;
    padding: 10px;
    background: #fff;
}

/* TEXT COLOR - Cashier ETA label */
.ops-eta-form label {
    display: block;
    margin-bottom: 6px;
    color: #727980;
    font-size: 11px;
    font-weight: 900;
}

.ops-eta-form div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

/* TEXT COLOR - Cashier ETA input */
.ops-eta-form input {
    min-height: 36px;
    border: 1px solid rgba(31,37,41,.1);
    border-radius: 12px;
    padding: 0 10px;
    outline: 0;
}

.ops-eta-form button {
    min-height: 36px;
}

/* TEXT COLOR - Cashier board primary action button */
.cashier-board .ops-actions button {
    background: #20262c;
}

/* TEXT COLOR - Cashier board light action button */
.cashier-board .ops-actions button.light {
    background: #fff;
    color: #20262c;
    border: 1px solid rgba(31,37,41,.08);
}

.status-rejected,
.status-cancelled {
    opacity: .74;
}

/* CASHIER BILL MODAL - full screen payment modal overlay */
.cashier-bill-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    background: rgba(20,25,30,.45);
    backdrop-filter: blur(12px);
}

.cashier-bill-modal.is-open {
    display: block;
}

/* CASHIER MANUAL ORDER - full screen modal overlay */
.cashier-manual-modal {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    background: rgba(20,25,30,.45);
    backdrop-filter: blur(12px);
}

.cashier-manual-modal.is-open {
    display: block;
}

/* CASHIER MANUAL ORDER - full screen modal surface */
.cashier-manual-screen {
    position: relative;
    height: 100dvh;
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #f6f8fa, #fff8df);
    overflow: hidden;
}

/* CASHIER MANUAL ORDER - table picker container */
.manual-table-picker {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    border-radius: 28px;
    padding: 20px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(31,37,41,.08);
    box-shadow: 0 22px 58px rgba(31,37,41,.12);
}

/* TEXT COLOR - Cashier Manual Order picker title and helper */
.manual-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.manual-picker-head p {
    margin: 0 0 6px;
    color: #727980;
    font-size: 12px;
    font-weight: 900;
}

.manual-picker-head h2 {
    margin: 0;
    color: #20262c;
    font-size: 34px;
    font-weight: 900;
}

.manual-picker-head span {
    display: block;
    margin-top: 6px;
    color: #657078;
    font-weight: 800;
}

/* CASHIER MANUAL ORDER - grid daftar meja */
.manual-table-grid {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding-right: 3px;
}

/* CASHIER MANUAL ORDER - kartu meja */
.manual-table-card {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid rgba(31,37,41,.08);
    border-radius: 20px;
    padding: 16px;
    background: #f7f8f9;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.manual-table-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,216,78,.86);
    box-shadow: 0 18px 38px rgba(31,37,41,.12);
}

/* TEXT COLOR - Cashier Manual Order table outlet/code */
.manual-table-card span,
.manual-table-card p {
    margin: 0;
    color: #727980;
    font-weight: 800;
}

/* TEXT COLOR - Cashier Manual Order table name */
.manual-table-card h3 {
    margin: 6px 0;
    color: #20262c;
    font-size: 24px;
    font-weight: 900;
}

/* TEXT COLOR - Cashier Manual Order table status badge */
.manual-table-card b {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 6px 10px;
    color: #226b3b;
    background: #def5e4;
    font-size: 12px;
    font-weight: 900;
}

.manual-table-card b.is-open {
    color: #825100;
    background: #fff1c4;
}

/* TEXT COLOR - Cashier Manual Order table bill amount */
.manual-table-card strong {
    display: block;
    margin-top: 8px;
    color: #20262c;
    font-size: 18px;
    font-weight: 900;
}

/* CASHIER MANUAL ORDER - iframe wrapper after table selected */
.manual-order-frame-wrap {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
}

.manual-frame-head {
    position: relative;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 22px;
    background: rgba(255,255,255,.9);
    border: 1px solid rgba(31,37,41,.08);
    box-shadow: 0 14px 34px rgba(31,37,41,.08);
}

.manual-frame-head .pos-btn {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
}

/* TEXT COLOR - Cashier Manual Order selected table title */
.manual-frame-head strong {
    color: #20262c;
    font-weight: 900;
}

/* CASHIER MANUAL ORDER - customer-like order page iframe */
#manualOrderFrame {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 22px 58px rgba(31,37,41,.12);
}

/* PURCHASE QUICK - halaman Quick Purchase dan Stock Card */
.purchase-page {
    min-height: 100vh;
}

.purchase-shell {
    max-width: 1540px;
    min-height: calc(100vh - 28px);
}

/* PURCHASE QUICK - hero header */
.purchase-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    border-radius: 28px;
    padding: 24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,216,78,.2), transparent 36%),
        rgba(255,255,255,.72);
    border: 1px solid rgba(31,37,41,.08);
    box-shadow: 0 18px 46px rgba(31,37,41,.08);
}

/* TEXT COLOR - Purchase hero subtitle */
.purchase-hero p {
    margin: 0 0 6px;
    color: #727980;
    font-size: 12px;
    font-weight: 900;
}

/* TEXT COLOR - Purchase hero title */
.purchase-hero h1 {
    margin: 0;
    color: #20262c;
    font-size: 38px;
    font-weight: 900;
}

/* TEXT COLOR - Purchase hero helper */
.purchase-hero span {
    color: #657078;
    font-weight: 800;
}

/* TEXT COLOR - Purchase mode badge */
.purchase-hero > strong {
    border-radius: 999px;
    padding: 10px 14px;
    color: #20262c;
    background: #ffd84e;
    font-weight: 900;
}

/* PURCHASE QUICK - metric cards */
.purchase-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.purchase-metrics article,
.purchase-form-card,
.purchase-history-card,
.purchase-table-card {
    border: 1px solid rgba(31,37,41,.08);
    border-radius: 24px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 18px 46px rgba(31,37,41,.08);
}

.purchase-metrics article {
    min-height: 112px;
    padding: 18px;
}

/* TEXT COLOR - Purchase metric label */
.purchase-metrics span {
    color: #727980;
    font-weight: 900;
}

/* TEXT COLOR - Purchase metric value */
.purchase-metrics strong {
    display: block;
    margin-top: 18px;
    color: #20262c;
    font-size: 24px;
    font-weight: 900;
}

/* PURCHASE QUICK - main form/history layout */
.purchase-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
    gap: 14px;
    align-items: start;
}

.purchase-form-card,
.purchase-history-card,
.purchase-table-card {
    padding: 16px;
}

.purchase-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

/* TEXT COLOR - Purchase card eyebrow */
.purchase-card-head span {
    color: #727980;
    font-weight: 900;
}

/* TEXT COLOR - Purchase card title */
.purchase-card-head h2 {
    margin: 2px 0 0;
    color: #20262c;
    font-size: 24px;
    font-weight: 900;
}

.purchase-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.purchase-form-grid .span-2 {
    grid-column: 1 / -1;
}

/* TEXT COLOR - Purchase form labels */
.purchase-form-grid label,
.quick-line label {
    color: #657078;
    font-weight: 900;
}

/* TEXT COLOR - Purchase inputs */
.purchase-form-grid input,
.purchase-form-grid select,
.purchase-form-grid textarea,
.quick-line input,
.quick-line select {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(31,37,41,.1);
    border-radius: 14px;
    padding: 0 12px;
    color: #20262c;
    background: #fff;
    outline: 0;
}

.purchase-form-grid textarea {
    min-height: 72px;
    padding-top: 10px;
}

/* PURCHASE QUICK - item lines */
.quick-lines {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}

.quick-line {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr .6fr .75fr .9fr 1fr auto;
    gap: 10px;
    align-items: end;
    border-radius: 18px;
    padding: 12px;
    background: #f7f8f9;
}

/* TEXT COLOR - Purchase line conversion text */
.quick-line-result {
    border-radius: 14px;
    padding: 10px;
    background: rgba(31,37,41,.05);
}

.quick-line-result span {
    display: block;
    color: #727980;
    font-weight: 900;
}

.quick-line-result strong {
    display: block;
    color: #20262c;
    font-weight: 900;
}

.quick-line-result em {
    display: block;
    color: #657078;
    font-style: normal;
    font-weight: 800;
}

.quick-line-remove {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #9d2f2f;
}

.quick-total-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 14px;
    background: #20262c;
}

/* TEXT COLOR - Purchase total bar */
.quick-total-bar span,
.quick-total-bar strong {
    color: #fff;
    font-weight: 900;
}

.quick-total-bar strong {
    font-size: 22px;
}

/* STOCK CARD - latest movement list */
.stock-card-list {
    display: grid;
    gap: 10px;
    max-height: 520px;
    overflow-y: auto;
}

.stock-card-list div {
    display: grid;
    gap: 4px;
    border-radius: 16px;
    padding: 12px;
    background: #f7f8f9;
}

/* TEXT COLOR - Stock card material name */
.stock-card-list b {
    color: #20262c;
    font-weight: 900;
}

/* TEXT COLOR - Stock card reference */
.stock-card-list span,
.stock-card-list em {
    color: #657078;
    font-style: normal;
    font-weight: 800;
}

/* TEXT COLOR - Stock card quantity in */
.stock-card-list strong {
    color: #226b3b;
    font-size: 18px;
    font-weight: 900;
}

.purchase-table-wrap {
    overflow-x: auto;
}

/* CASHIER BILL MODAL - screen container */
.cashier-bill-screen {
    position: relative;
    height: 100dvh;
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #f6f8fa, #fff8df);
    overflow: hidden;
}

/* TEXT COLOR - Cashier bill close button */
.cashier-bill-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    color: #20262c;
    background: #fff;
    box-shadow: 0 12px 30px rgba(31,37,41,.12);
}

/* TEXT COLOR - Cashier bill content wrapper */
.cashier-bill-content {
    color:white;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 16px;
}

/* CASHIER BILL MODAL - left/right panels */
.bill-left,
.bill-right {
    min-height: 0;
    border-radius: 26px;
    padding: 20px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(31,37,41,.07);
    box-shadow: 0 18px 50px rgba(31,37,41,.1);
}

.bill-left {
    display: flex;
    flex-direction: column;
}

/* TEXT COLOR - Cashier bill eyebrow/current bill label */
.bill-left p {
    margin: 0;
    color: #727980;
    font-size: 12px;
    font-weight: 900;
}

/* TEXT COLOR - Cashier bill table/title */
.bill-left h2 {
    margin: 6px 0 16px;
    color: #20262c;
    font-size: 34px;
    font-weight: 900;
}

.bill-items {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    gap: 10px;
}

/* CASHIER BILL ITEM - item row in bill */
.bill-item {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 10px;
    align-items: start;
    border-radius: 18px;
    padding: 12px;
    background: #f7f8f9;
}

/* TEXT COLOR - Cashier bill item qty badge */
.bill-item b {
    display: grid;
    place-items: center;
    height: 36px;
    border-radius: 12px;
    color: #20262c;
    background: #ffd84e;
}

/* TEXT COLOR - Cashier bill item name */
.bill-item span {
    color: #20262c;
    font-weight: 900;
}

/* TEXT COLOR - Cashier bill item modifier/note */
.bill-item small {
    display: block;
    margin-top: 4px;
    color: #727980;
    font-weight: 800;
}

/* TEXT COLOR - Cashier bill item note warning */
.bill-note {
    color: #7a341d !important;
}

/* TEXT COLOR - Cashier bill item subtotal */
.bill-item strong {
    color: #20262c;
    white-space: nowrap;
}

.bill-right {
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 12px;
}

/* CASHIER BILL TOTAL/PAYMENT ROWS */
.bill-total-card,
.bill-pay-row,
.bill-paid {
    border-radius: 20px;
    padding: 14px;
    background: #f7f8f9;
}

/* TEXT COLOR - Cashier bill total/paid/remaining labels */
.bill-total-card span,
.bill-pay-row span {
    display: block;
    color: #727980;
    font-size: 12px;
    font-weight: 900;
}

/* TEXT COLOR - Cashier bill grand total */
.bill-total-card strong {
    display: block;
    margin-top: 8px;
    color: #20262c;
    font-size: 32px;
    font-weight: 900;
}

.bill-pay-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* TEXT COLOR - Cashier bill paid/remaining values */
.bill-pay-row strong {
    color: #20262c;
    font-size: 18px;
}

/* CASHIER BILL - remaining/due row background */
.bill-pay-row.due {
    background: #fff0e8;
}

/* CASHIER BILL PAYMENT FORM - full screen payment form */
.bill-payment-form {
    align-self: end;
    display: grid;
    gap: 10px;
    border-radius: 22px;
    padding: 14px;
    background: #20262c;
}

/* TEXT COLOR - Cashier bill payment inputs */
.bill-payment-form select,
.bill-payment-form input {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    padding: 0 12px;
    outline: 0;
}

/* TEXT COLOR - Cashier bill Pay Now / close table button */
.bill-payment-form button,
.bill-paid button {
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    color: #20262c;
    background: #ffd84e;
    font-weight: 900;
}

/* TEXT COLOR - Cashier bill paid state */
.bill-paid {
    align-self: end;
    display: grid;
    gap: 10px;
    color: #226b3b;
    background: #def5e4;
    font-weight: 900;
}

/* TEXT COLOR - Cashier bill loading state */
.bill-loading {
    display: grid;
    place-items: center;
    height: 100%;
    color: #20262c;
    font-size: 24px;
    font-weight: 900;
}

/* SWEETALERT - keep alert above bill modal */
.swal2-container {
    z-index: 12000 !important;
}

/* RESPONSIVE - Cashier board tablet layout */
@media (max-width: 1180px) {
    .cashier-board {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        padding-bottom: 6px;
    }
    .cashier-board .ops-column:nth-child(1),
    .cashier-board .ops-column:nth-child(2),
    .cashier-board .ops-column:nth-child(3),
    .cashier-board .ops-column:nth-child(4),
    .cashier-board .ops-column:nth-child(5) {
        grid-column: auto;
    }
    .cashier-board .ops-column {
        min-width: 310px;
        max-height: calc(100vh - 210px);
        scroll-snap-align: start;
    }
    .cashier-bill-content {
        color:white;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .manual-table-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .purchase-layout {
        grid-template-columns: 1fr;
    }
    .purchase-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .quick-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .quick-line-result {
        grid-column: 1 / -1;
    }
    .bill-right {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto;
    }
    .bill-payment-form,
    .bill-paid {
        grid-column: 1 / -1;
    }
    .owner-overview-layout {
        grid-template-columns: 1fr;
    }
    .owner-report-menu {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .owner-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .owner-kpi-grid.owner-kpi-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .owner-exec-grid.three,
    .owner-exec-grid.two,
    .owner-exec-grid.chart-row {
        grid-template-columns: 1fr;
    }
}

/* RESPONSIVE - Cashier/Owner mobile layout */
@media (max-width: 760px) {
    .cashier-app-shell {
        border-radius: 20px;
        padding: 12px;
    }
    .cashier-hero {
        align-items: flex-start;
        flex-direction: column;
    }
    .cashier-hero h1 {
        font-size: 30px;
    }
    .cashier-board .ops-column {
        min-width: 86vw;
        min-height: calc(100vh - 220px);
    }
    .cashier-bill-screen {
        padding: 10px;
    }
    .cashier-manual-screen {
        padding: 10px;
    }
    .manual-table-picker {
        border-radius: 20px;
        padding: 14px;
    }
    .manual-picker-head {
        flex-direction: column;
    }
    .manual-picker-head h2 {
        font-size: 28px;
    }
    .manual-table-grid {
        grid-template-columns: 1fr;
    }
    .manual-frame-head {
        justify-content: flex-end;
        padding-left: 120px;
    }
    .manual-frame-head .pos-btn {
        left: 12px;
        padding: 10px 12px;
    }
    .purchase-hero,
    .purchase-card-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .purchase-hero h1 {
        font-size: 30px;
    }
    .purchase-metrics {
        grid-template-columns: 1fr;
    }
    .purchase-form-grid,
    .quick-line {
        grid-template-columns: 1fr;
    }
    .purchase-form-grid .span-2,
    .quick-line-result {
        grid-column: auto;
    }
    .stock-card-list {
        max-height: none;
    }
    #manualOrderFrame {
        border-radius: 20px;
    }
    .cashier-bill-close {
        top: 12px;
        right: 12px;
    }
    .bill-left,
    .bill-right {
        border-radius: 20px;
        padding: 14px;
    }
    .bill-left h2 {
        font-size: 26px;
        margin-bottom: 10px;
    }
    .bill-right {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .bill-total-card {
        grid-column: 1 / -1;
    }
    .bill-total-card strong {
        font-size: 24px;
    }
    .bill-item {
        grid-template-columns: 38px 1fr;
    }
    .bill-item strong {
        grid-column: 2;
    }
    .owner-exec-hero,
    .owner-exec-filterbar,
    .owner-card-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .owner-exec-hero h1 {
        font-size: 32px;
    }
    .owner-exec-filterbar {
        gap: 10px;
    }
    .owner-exec-filterbar form,
    .owner-exec-filterbar select {
        width: 100%;
    }
    .owner-report-menu {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
    }
    .owner-report-menu a {
        min-width: 176px;
        min-height: 92px;
        scroll-snap-align: start;
        border-radius: 20px;
    }
    .owner-report-section {
        border-radius: 22px;
    }
    .owner-report-section summary {
        grid-template-columns: 42px 1fr;
        min-height: 74px;
        padding: 14px;
    }
    .owner-report-section summary strong {
        grid-column: 2;
        width: max-content;
    }
    .owner-report-section summary:after {
        position: absolute;
        right: 18px;
    }
    .owner-report-content {
        grid-template-columns: 1fr;
        padding: 0 12px 12px;
    }
    .owner-kpi-grid {
        grid-template-columns: 1fr;
    }
    .owner-kpi-grid.owner-kpi-compact {
        grid-template-columns: 1fr 1fr;
    }
    .owner-kpi-grid article {
        min-height: 112px;
        padding: 14px;
    }
    .owner-kpi-grid strong {
        font-size: 20px;
    }
    .owner-hour-chart {
        grid-template-columns: repeat(6, minmax(24px, 1fr));
        height: 220px;
    }
    .owner-compare-list div {
        grid-template-columns: 38px 1fr;
    }
    .owner-compare-list strong {
        grid-column: 2;
        text-align: left;
    }
    .owner-category-card {
        grid-template-columns: 1fr;
    }
    .owner-donut {
        width: min(220px, 70vw);
        margin: 0 auto;
    }
    .owner-issue-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* RESPONSIVE - Owner small mobile layout */
@media (max-width: 430px) {
    .owner-exec-shell {
        padding: 12px;
    }
    .owner-kpi-grid.owner-kpi-compact {
        grid-template-columns: 1fr;
    }
    .owner-report-section summary strong {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .owner-card {
        padding: 14px;
        border-radius: 20px;
    }
    .owner-ranked-list div {
        grid-template-columns: 30px 1fr;
    }
    .owner-ranked-list strong {
        grid-column: 2;
    }
}

/* ==========================================================================
   THEME Dark Mode - default deep green theme
   Gunakan komentar "THEME Dark Mode - TEXT COLOR - ..." untuk mencari warna teks.
   ========================================================================== */

/* THEME Dark Mode - color variables */
:root {
    --pos-red: #235347;
    --pos-red-dark: #051f20;
    --pos-orange: #8eb69b;
    --pos-cream: #daf1de;
    --pos-ink: #f4fff6;
    --pos-muted: #b9d4c1;
    --pos-line: rgba(218, 241, 222, .18);
    --abyss: #235347;
    --abyss-deep: #051f20;
    --abyss-dark: #0b2b26;
    --abyss-mid: #163832;
    --abyss-glow: #8eb69b;
    --abyss-mint: #daf1de;
    --abyss-card: rgba(11, 43, 38, .72);
    --abyss-border: rgba(218, 241, 222, .18);
    --abyss-shadow: 0 26px 70px rgba(3, 18, 18, .42);
    --abyss-page-bg:
        radial-gradient(circle at 14% 9%, rgba(218, 241, 222, .22), transparent 27%),
        radial-gradient(circle at 82% 14%, rgba(142, 182, 155, .26), transparent 31%),
        radial-gradient(circle at 38% 90%, rgba(35, 83, 71, .54), transparent 38%),
        linear-gradient(135deg, #051f20 0%, #0b2b26 32%, #163832 65%, #235347 100%);
    --abyss-panel-bg:
        linear-gradient(145deg, rgba(5, 31, 32, .92), rgba(11, 43, 38, .8));
    --forest-soft-bg: rgba(218, 241, 222, .1);
    --forest-soft-border: rgba(218, 241, 222, .22);
}

/* THEME Dark Mode - body background */
body {
    background: var(--abyss-page-bg);
}

/* THEME Dark Mode - page background for all main screens */
.customer-body,
.crextio-page,
.purchase-page,
.owner-exec-page,
.cashier-app-page,
.ostos-login-page {
    color: #f4fff6;
    background:
        radial-gradient(circle at 10% 8%, rgba(218, 241, 222, .2), transparent 28%),
        radial-gradient(circle at 78% 16%, rgba(142, 182, 155, .26), transparent 30%),
        linear-gradient(120deg, rgba(5, 31, 32, .98) 0%, rgba(11, 43, 38, .98) 46%, rgba(35, 83, 71, .96) 100%) !important;
    background-size: auto, auto, auto !important;
    background-position: center, center, center, center !important;
}

/* THEME Dark Mode - shell/card background for main app containers */
.customer-shell,
.crextio-shell,
.purchase-shell,
.owner-exec-shell,
.cashier-app-shell,
.ostos-login-card,
.cashier-bill-screen,
.cashier-manual-screen {
    color: #f4fff6;
    background:
        radial-gradient(circle at 10% 0%, rgba(218, 241, 222, .16), transparent 30%),
        linear-gradient(145deg, rgba(5, 31, 32, .96), rgba(22, 56, 50, .86)) !important;
}

/* THEME Dark Mode - shared panel/card surfaces */
.crextio-topbar,
.owner-exec-topbar,
.cashier-topbar,
.crextio-nav,
.crextio-brand,
.crextio-actions a,
.crextio-round-btn,
.owner-exec-filterbar,
.crextio-master-select,
.crextio-form-card,
.crextio-table-card,
.crextio-summary article,
.feature-disabled-note,
.purchase-hero,
.purchase-metrics article,
.purchase-form-card,
.purchase-history-card,
.purchase-table-card,
.quick-line,
.quick-line-result,
.stock-card-list div,
.owner-card,
.owner-report-section,
.cashier-board .ops-column,
.cashier-board .ops-card,
.cashier-bill-content > section,
.bill-total-card,
.manual-table-picker,
.manual-frame-head,
.manual-table-card,
.customer-session-card,
.menu-card,
.cart-bar,
.sheet-panel,
.option-line,
.status-card,
.ostos-login-card,
.login-top-pill,
.install-button,
.cashier-payment-panel,
.cashier-session-card {
    border-color: var(--abyss-border) !important;
    background: var(--abyss-panel-bg) !important;
    box-shadow: var(--abyss-shadow) !important;
    backdrop-filter: blur(16px);
}

/* THEME Dark Mode - TEXT COLOR - neutral buttons and form controls */
.crextio-nav,
.crextio-brand,
.crextio-actions a,
.crextio-round-btn,
.icon-button,
.small-action,
.sheet-close,
.qty-row button,
.pos-btn.light,
.cashier-bill-close,
.cashier-nav-action,
.cashier-board .ops-actions button.light,
.category-tabs button,
.login-input,
.crextio-form-grid input,
.crextio-form-grid select,
.crextio-form-grid textarea,
.purchase-form-grid input,
.purchase-form-grid select,
.purchase-form-grid textarea,
.quick-line input,
.quick-line select,
.cashier-payment-form select,
.cashier-payment-form input,
.bill-payment-form select,
.bill-payment-form input {
    color: #f4fff6 !important;
    border-color: var(--abyss-border) !important;
    background: rgba(5, 31, 32, .58) !important;
}

/* THEME Dark Mode - TEXT COLOR - form placeholders */
.crextio-form-grid input::placeholder,
.crextio-form-grid textarea::placeholder,
.cashier-payment-form input::placeholder,
.bill-payment-form input::placeholder,
.login-input input::placeholder {
    color: rgba(218, 241, 222, .6) !important;
}

/* THEME Dark Mode - TEXT COLOR - main titles across Customer/Admin/Owner/Cashier */
.crextio-nav a,
.crextio-brand,
.crextio-actions a,
.crextio-master-menu a,
.owner-report-section summary,
.owner-card-head h2,
.owner-exec-hero h1,
.cashier-hero h1,
.crextio-hero h1,
.crextio-table-toolbar h2,
.crextio-section-title h2,
.purchase-hero h1,
.purchase-hero > strong,
.purchase-metrics strong,
.purchase-card-head h2,
.quick-line-result strong,
.stock-card-list b,
.mobile-topbar strong,
.menu-title h2,
.menu-name,
.status-card h1,
.status-card h2,
.ostos-login-card h1,
.cashier-board .ops-column h3,
.cashier-board .ops-card strong,
.ops-card-head h4,
.manual-picker-head h2,
.manual-table-card h3,
.manual-table-card strong,
.manual-frame-head strong,
.feature-disabled-note strong,
.bill-left h2,
.bill-total-card strong,
.bill-pay-row strong,
.owner-ranked-list span,
.owner-ranked-list strong,
.owner-category-list > strong,
.owner-table td,
.crextio-table td,
.session-order-line strong,
.session-order-line b {
    color: #f4fff6 !important;
}

/* THEME Dark Mode - TEXT COLOR - secondary labels/descriptions across all screens */
.muted-small,
.mobile-topbar span,
.menu-info p,
.cart-line p,
.notification-line p,
.session-card-head span,
.session-order-line p,
.crextio-hero p,
.crextio-table-toolbar span,
.crextio-section-title span,
.crextio-summary span,
.feature-disabled-note span,
.purchase-hero p,
.purchase-hero span,
.purchase-metrics span,
.purchase-card-head span,
.purchase-form-grid label,
.quick-line label,
.quick-line-result span,
.quick-line-result em,
.stock-card-list span,
.stock-card-list em,
.owner-exec-hero p,
.owner-exec-filterbar label,
.owner-exec-filterbar div,
.owner-card-head span,
.owner-ranked-list small,
.owner-category-list p,
.cashier-hero p,
.manual-picker-head p,
.manual-picker-head span,
.manual-table-card span,
.manual-table-card p,
.bill-left p,
.ostos-login-card p,
.login-web {
    color: var(--abyss-mint) !important;
}

/* THEME Dark Mode - TEXT COLOR - active buttons, badges, status pills */
.crextio-nav a.active,
.crextio-master-menu a.active,
.category-tabs button.active,
.cart-bar span:last-child,
.pos-btn.primary,
.round-add,
.crextio-primary-btn,
.crextio-summary article,
.cashier-board .ops-column h3 b,
.manual-table-card b,
.ops-card-head b,
.ops-meta span,
.owner-ranked-list b,
.owner-mini-metrics span,
.cashier-session-title span,
.bill-paid button,
.bill-pay-now,
.cashier-payment-form button,
.login-submit,
.owner-exec-filterbar select,
.status-icon,
.table-pill,
.notification-dot {
    color: #051f20 !important;
    border-color: rgba(218, 241, 222, .58) !important;
    background: linear-gradient(135deg, #daf1de 0%, #8eb69b 48%, #235347 100%) !important;
    box-shadow: 0 16px 38px rgba(5, 31, 32, .28) !important;
}

/* THEME Dark Mode - TEXT COLOR - cashier action buttons and install button */
.cashier-board .ops-actions button,
.bill-payment-form button,
.cashier-bill-close,
.install-button {
    color: #051f20 !important;
    background: linear-gradient(135deg, #daf1de, #8eb69b) !important;
}

/* THEME Dark Mode - TEXT COLOR - accent links, brand marks, notes */
.owner-report-section summary strong,
.crextio-image-link,
.brand-mark,
.ostos-logo,
.customer-welcome .brand-mark,
.status-card .brand-mark,
.owner-note,
.owner-attention i {
    color: #daf1de !important;
}

/* THEME Dark Mode - TEXT COLOR - table/list/card rows */
.crextio-table td,
.crextio-table tbody tr td,
.owner-table td,
.owner-ranked-list div,
.owner-compare-list div,
.owner-mini-metrics span,
.owner-payment-list div,
.owner-issue-grid div,
.cashier-session-card,
.bill-item,
.bill-pay-row,
.ops-eta-form,
.empty-state,
.customer-session-card,
.option-line {
    background: rgba(5, 31, 32, .5) !important;
    color: #f4fff6 !important;
}

.crextio-table tbody tr:hover td,
.crextio-table tbody tr.selected-row td {
    background: rgba(142, 182, 155, .2) !important;
}

/* THEME Dark Mode - TEXT COLOR - positive status blocks */
.crextio-status.green,
.owner-insights .good,
.cashier-paid-state,
.bill-paid {
    color: #ecfff0 !important;
    background: rgba(142, 182, 155, .22) !important;
}

/* THEME Dark Mode - TEXT COLOR - warning/due status blocks */
.crextio-status.gray,
.owner-insights .warning,
.owner-attention,
.cashier-bill-row.due,
.bill-pay-row.due {
    color: #ffe9cb !important;
    background: rgba(232, 155, 76, .18) !important;
}

/* THEME Dark Mode - overlay background for sheets/modals */
.bottom-sheet,
.cashier-bill-modal {
    background: rgba(2, 13, 14, .74) !important;
}

.menu-photo,
.detail-photo,
.preview-photo {
    filter: saturate(.92) contrast(1.04);
}

.owner-hour-chart,
.owner-compare-list span,
.owner-donut {
    box-shadow: inset 0 0 0 1px var(--abyss-border);
}

.owner-hour span,
.owner-compare-list span i,
.owner-compare-list span.last i {
    background: linear-gradient(180deg, #daf1de, #8eb69b 58%, #235347) !important;
}

/* THEME Dark Mode - TEXT COLOR - Bootstrap/default buttons */
.btn,
.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning {
    color: #051f20 !important;
    border-color: rgba(218, 241, 222, .42) !important;
    background: linear-gradient(135deg, #daf1de, #8eb69b) !important;
    box-shadow: 0 12px 28px rgba(5, 31, 32, .2) !important;
}

.btn:hover,
.btn:focus,
.btn-default:hover,
.btn-default:focus,
.btn-primary:hover,
.btn-primary:focus {
    color: #051f20 !important;
    border-color: rgba(218, 241, 222, .66) !important;
    background: linear-gradient(135deg, #effff1, #a8cbb1) !important;
}

/* THEME Dark Mode - TEXT COLOR - danger/delete button */
.btn-danger {
    color: #fff8f3 !important;
    border-color: rgba(255, 210, 180, .42) !important;
    background: linear-gradient(135deg, #8f3d32, #c86b4f) !important;
}

/* THEME Dark Mode - TEXT COLOR - Bootstrap forms/tables/modal panels */
.form-control,
.input-group-addon,
.modal-content,
.panel,
.box,
.table,
.dataTables_wrapper {
    color: #f4fff6 !important;
    border-color: var(--abyss-border) !important;
    background: rgba(5, 31, 32, .78) !important;
}

.form-control {
    box-shadow: inset 0 1px 0 rgba(218, 241, 222, .05) !important;
}

/* THEME Dark Mode - TEXT COLOR - Bootstrap form placeholder */
.form-control::placeholder {
    color: rgba(218, 241, 222, .6) !important;
}

/* THEME Dark Mode - TEXT COLOR - Bootstrap/DataTable cells */
.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td,
.dataTable > thead > tr > th,
.dataTable > tbody > tr > td {
    color: #f4fff6 !important;
    border-color: rgba(218, 241, 222, .12) !important;
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover {
    background: rgba(142, 182, 155, .12) !important;
}

/* THEME Dark Mode - TEXT COLOR - Bootstrap modal/panel header */
.modal-header,
.modal-footer,
.panel-heading,
.box-header {
    color: #f4fff6 !important;
    border-color: rgba(218, 241, 222, .14) !important;
    background: rgba(11, 43, 38, .86) !important;
}

/* THEME Dark Mode - TEXT COLOR - Bootstrap modal/panel title */
.modal-title,
.panel-title,
.box-title {
    color: #f4fff6 !important;
}

/* THEME Dark Mode - TEXT COLOR - SweetAlert popup */
.swal2-popup,
.swal-modal {
    color: #f4fff6 !important;
    border: 1px solid var(--abyss-border) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 16% 0%, rgba(218, 241, 222, .14), transparent 32%),
        linear-gradient(145deg, rgba(5, 31, 32, .98), rgba(11, 43, 38, .96)) !important;
    box-shadow: 0 30px 80px rgba(3, 18, 18, .55) !important;
}

/* THEME Dark Mode - TEXT COLOR - SweetAlert text */
.swal2-title,
.swal-title,
.swal2-html-container,
.swal-text {
    color: #f4fff6 !important;
}

/* THEME Dark Mode - TEXT COLOR - SweetAlert confirm button */
.swal2-confirm,
.swal-button--confirm,
.swal-button:not(.swal-button--cancel) {
    color: #051f20 !important;
    border: 0 !important;
    background: linear-gradient(135deg, #daf1de, #8eb69b) !important;
}

/* THEME Dark Mode - TEXT COLOR - SweetAlert cancel button */
.swal2-cancel,
.swal-button--cancel {
    color: #daf1de !important;
    border: 1px solid rgba(218, 241, 222, .24) !important;
    background: rgba(5, 31, 32, .62) !important;
}

/* LOGIN PAGE - full screen layout */
.ostos-login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}

/* LOGIN PAGE / CUSTOMER / ADMIN - subtle grid overlay */
.ostos-login-page:before,
.customer-body:before,
.crextio-page:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background:
        linear-gradient(90deg, rgba(218, 241, 222, .045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(218, 241, 222, .035) 1px, transparent 1px);
    background-size: 72px 72px;
}

/* LOGIN PAGE - login card */
.ostos-login-card {
    width: min(430px, calc(100vw - 32px));
    border: 1px solid var(--abyss-border);
    border-radius: 28px;
    padding: 34px 26px;
    text-align: center;
}

/* LOGIN PAGE - username/password input wrapper */
.login-input {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    border: 1px solid var(--abyss-border);
    border-radius: 999px;
    padding: 0 15px;
    margin: 14px 0;
}

/* TEXT COLOR - Login input text */
.login-input input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #f4fff6;
    background: transparent;
}

/* TEXT COLOR - Login input placeholder */
.login-input input::placeholder {
    color: rgba(218, 241, 222, .66);
}

/* TEXT COLOR - Login submit button */
.login-submit {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    margin-top: 18px;
    font-weight: 900;
}

/* TEXT COLOR - Login top pill and install app button */
.login-top-pill,
.install-button {
    position: fixed;
    border: 1px solid var(--abyss-border);
    border-radius: 999px;
    padding: 10px 18px;
    color: #f4fff6 !important;
    font-weight: 900;
    z-index: 5;
}

.login-top-pill {
    top: 18px;
    left: 24px;
    transform: none !important;
}

.install-button {
    right: 18px;
    bottom: 18px;
}

@media (max-width: 640px) {
    .ostos-login-page {
        align-items: center;
        padding: 72px 16px 28px;
    }

    .login-top-pill,
    .install-button {
        position: static;
        margin: 8px auto;
    }
}

/* ==========================================================================
   OSTOS TEXT COLOR GUIDE
   Cara ubah warna tulisan:
   - Dark Mode / default: cari komentar "TEXT COLOR - ..."
   - Light Mode: cari komentar "THEME Light Mode - TEXT COLOR - ..."
   - Crimson Velvet: cari komentar "THEME Crimson Velvet - TEXT COLOR - ..."
   Contoh cepat:
   - Priority Attention: cari "TEXT COLOR - Priority Attention"
   - Customer ETA Box: cari "TEXT COLOR - Customer ETA Box"
   - Owner KPI cards: cari "TEXT COLOR - Owner KPI cards"
   - Owner report titles: cari "TEXT COLOR - Owner report menu titles"
   ========================================================================== */

/* Dark Mode contrast pass */
.crextio-page,
.owner-exec-page,
.cashier-app-page,
.kitchen-app-page,
.ostos-login-page,
.customer-body {
    color: #f7fff8 !important;
}

.crextio-hero p,
.cashier-hero p,
.owner-exec-hero p,
.muted-small,
.crextio-summary span,
.crextio-summary small,
.crextio-table-toolbar span,
.crextio-section-title span,
.owner-card-head span,
.owner-report-section summary em,
.owner-summary-list span,
.owner-progress-list span,
.owner-cash-box span,
.owner-issue-grid span,
.owner-addon-revenue span,
.owner-hour small,
.owner-compare-list label,
.owner-peak-card p,
.ops-card p,
.ops-eta-form label,
.session-order-line p,
.menu-info p,
.cart-line p,
.notification-line p {
    color: #daf1de !important;
}

.crextio-summary article,
.crextio-summary article:nth-child(2),
.crextio-summary article:nth-child(3),
.crextio-summary article:nth-child(4),
.pos-page,
.setup-panel,
.ops-column,
.owner-report-grid section,
.owner-kpi-grid article,
.owner-card,
.owner-report-section,
.owner-summary-list div,
.owner-live-list div,
.owner-insights > div:not(.owner-card-head),
.owner-category-list,
.owner-progress-list div,
.owner-cash-box,
.owner-addon-revenue,
.crextio-list div,
.crextio-action-grid a,
.role-list a,
.permission-panel,
.permission-table-wrap,
.permission-table,
.cashier-board .ops-column,
.cashier-board .ops-card,
.ops-eta-form,
.empty-state,
.cashier-session-card,
.bill-item,
.bill-pay-row {
    color: #f7fff8 !important;
    border-color: rgba(218, 241, 222, .18) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(218, 241, 222, .1), transparent 34%),
        linear-gradient(145deg, rgba(5, 31, 32, .94), rgba(11, 43, 38, .86)) !important;
    box-shadow: 0 18px 42px rgba(3, 18, 18, .28) !important;
}

/* TEXT COLOR - Dark Mode readable text: shared dark cards, master data, role permission, owner KPI cards */
.crextio-summary strong,
.crextio-summary article span,
.crextio-summary article small,
.crextio-list span,
.crextio-list strong,
.crextio-action-grid a,
.crextio-action-grid i,
.role-list a,
.permission-table th,
.permission-table td,
.permission-table label,
.permission-table small,
.owner-kpi-grid span,
.owner-kpi-grid strong,
.owner-kpi-grid small,
.owner-card h2,
.owner-card h3,
.owner-card strong,
.owner-summary-list strong,
.owner-live-list strong,
.owner-live-list em,
.owner-peak-card > strong,
.owner-peak-card small,
.owner-compare-list strong,
.cashier-board .ops-column h3,
.cashier-board .ops-column h3 span,
.cashier-board .ops-card strong,
.ops-card-head h4,
.ops-timeline b,
.ops-timeline span,
.empty-state,
.empty-state p,
.bill-loading {
    color: #f7fff8 !important;
}

/* TEXT COLOR - Owner KPI cards: small labels / secondary text */
.owner-kpi-grid span,
.crextio-summary span,
.permission-table small,
.owner-card small,
.ops-timeline span,
.ops-card p {
    color: #c7e4cd !important;
}

.crextio-nav a.active,
.crextio-master-menu a.active,
.role-list a.active,
.owner-pills button:first-child,
.cashier-board .ops-column h3 b,
.ops-card-head b,
.ops-meta span,
.owner-report-section summary strong,
.owner-mini-metrics span,
.owner-kpi-grid small.up,
.owner-kpi-grid small.down,
.crextio-status.green,
.crextio-status.gray,
.table-pill,
.status-icon {
    color: #051f20 !important;
    background: linear-gradient(135deg, #daf1de, #8eb69b) !important;
    border-color: rgba(218, 241, 222, .48) !important;
}

.owner-report-section summary span,
.owner-report-section summary b,
.owner-report-section summary em {
    text-shadow: 0 1px 2px rgba(3, 18, 18, .28);
}

.owner-report-section summary span,
.owner-report-section summary b {
    color: #f7fff8 !important;
}

.owner-report-section summary em {
    color: #d7f0dc !important;
}

.owner-report-section summary > strong {
    color: #051f20 !important;
    background: linear-gradient(135deg, #daf1de, #8eb69b) !important;
    border: 1px solid rgba(218, 241, 222, .48) !important;
    text-shadow: none !important;
}

.owner-report-section summary:after {
    color: #d7f0dc !important;
}

.owner-report-section[open] summary {
    background: rgba(218, 241, 222, .08) !important;
}

/* TEXT COLOR - Priority Attention warning cards and negative KPI badges */
.owner-kpi-grid small.down,
.owner-insights .warning,
.owner-attention,
.cashier-bill-row.due,
.bill-pay-row.due {
    color: #fff3df !important;
    background: rgba(161, 96, 55, .32) !important;
    border-color: rgba(255, 226, 190, .2) !important;
}

/* TEXT COLOR - Priority Attention positive insight cards */
.owner-insights .good,
.cashier-paid-state,
.bill-paid,
.owner-peak-card small {
    color: #f4fff6 !important;
    background: rgba(142, 182, 155, .26) !important;
    border-color: rgba(218, 241, 222, .18) !important;
}

/* TEXT COLOR - Priority Attention message text */
.owner-insights p,
.owner-insights .warning p,
.owner-insights .good p {
    color: #f7fff8 !important;
}

/* TEXT COLOR - Customer ETA Box on Dark Mode theme */
.eta-box {
    color: #f7fff8 !important;
    border: 1px solid rgba(218, 241, 222, .18) !important;
    background: rgba(5, 31, 32, .62) !important;
}

.eta-box span {
    color: #d7f0dc !important;
}

.eta-box strong {
    color: #ffffff !important;
}

.crextio-master-menu a,
.owner-pills button,
.cashier-board .ops-actions button.light,
.pos-btn.light,
.small-action,
.icon-button,
.sheet-close,
.qty-row button,
.cashier-bill-close {
    color: #f7fff8 !important;
    border-color: rgba(218, 241, 222, .22) !important;
    background: rgba(5, 31, 32, .68) !important;
}

.crextio-master-menu a:hover,
.role-list a:hover,
.crextio-action-grid a:hover,
.cashier-board .ops-actions button.light:hover,
.pos-btn.light:hover,
.small-action:hover,
.icon-button:hover,
.sheet-close:hover,
.qty-row button:hover {
    color: #051f20 !important;
    background: linear-gradient(135deg, #effff1, #a8cbb1) !important;
}

.pos-btn.primary,
.crextio-primary-btn,
.round-add,
.cart-bar span:last-child,
.cashier-board .ops-actions button:not(.light),
.bill-pay-now,
.cashier-payment-form button,
.bill-payment-form button,
.login-submit,
.btn:not(.btn-danger) {
    color: #051f20 !important;
    background: linear-gradient(135deg, #effff1 0%, #daf1de 32%, #8eb69b 100%) !important;
    border-color: rgba(218, 241, 222, .58) !important;
    text-shadow: none !important;
}

.crextio-form-grid label,
.crextio-form-grid label small,
.menu-admin-form label,
.setup-panel label,
.form-group label,
.control-label,
.checkbox label,
.radio label {
    color: #f7fff8 !important;
}

.pos-page-header h2,
.setup-panel h3,
.ops-column h3,
.ops-card h4 {
    color: #f7fff8 !important;
}

.crextio-form-grid label small,
.form-text,
small.help-block,
.help-block {
    color: #c7e4cd !important;
}

.crextio-form-grid input,
.crextio-form-grid select,
.crextio-form-grid textarea,
.form-control,
.input-group-addon,
.cashier-payment-form select,
.cashier-payment-form input,
.bill-payment-form select,
.bill-payment-form input,
.login-input {
    color: #f7fff8 !important;
    background: rgba(3, 18, 18, .7) !important;
    border-color: rgba(218, 241, 222, .24) !important;
}

option,
select option {
    color: #f7fff8 !important;
    background: #0b2b26 !important;
}

.dropdown-menu,
.select2-dropdown,
.select2-results__option,
.pagination > li > a,
.pagination > li > span {
    color: #f7fff8 !important;
    border-color: rgba(218, 241, 222, .16) !important;
    background: rgba(5, 31, 32, .96) !important;
}

.dropdown-menu > li > a,
.select2-results__option {
    color: #f7fff8 !important;
}

.dropdown-menu > li > a:hover,
.select2-results__option--highlighted,
.pagination > .active > a,
.pagination > .active > span {
    color: #051f20 !important;
    background: linear-gradient(135deg, #daf1de, #8eb69b) !important;
}

.crextio-form-grid input:focus,
.crextio-form-grid select:focus,
.crextio-form-grid textarea:focus,
.form-control:focus {
    color: #ffffff !important;
    border-color: rgba(218, 241, 222, .62) !important;
    box-shadow: 0 0 0 3px rgba(142, 182, 155, .18) !important;
}

.table,
.table > thead > tr > th,
.table > tbody > tr > td,
.crextio-table th,
.crextio-table td,
.owner-table th,
.owner-table td {
    color: #f7fff8 !important;
    border-color: rgba(218, 241, 222, .12) !important;
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-hover > tbody > tr:hover,
.crextio-table tbody tr:hover td,
.crextio-table tbody tr.selected-row td {
    color: #ffffff !important;
    background: rgba(142, 182, 155, .2) !important;
}

.ops-timeline span {
    background: rgba(218, 241, 222, .1) !important;
}

.ops-timeline span.is-done,
.ops-timeline span.done,
.ops-timeline span.active {
    color: #051f20 !important;
    background: linear-gradient(135deg, #daf1de, #8eb69b) !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: #8eb69b;
}

/* THEME SWITCHER - wrapper tombol pilih tema */
.pos-theme-switcher {
    position: relative;
    z-index: 13000;
    font-family: inherit;
}

/* THEME SWITCHER - posisi floating kanan atas */
.pos-theme-switcher.is-floating {
    position: fixed;
    top: 18px;
    right: 18px;
}

/* TEXT COLOR - Theme switcher toggle button */
.pos-theme-toggle {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(218, 241, 222, .24);
    border-radius: 999px;
    padding: 0 14px;
    color: #f7fff8;
    background:
        radial-gradient(circle at 12% 0%, rgba(218, 241, 222, .12), transparent 34%),
        linear-gradient(145deg, rgba(5, 31, 32, .96), rgba(11, 43, 38, .9));
    box-shadow: 0 18px 44px rgba(3, 18, 18, .32);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

/* TEXT COLOR - Theme switcher icon */
.pos-theme-toggle i {
    color: #daf1de;
}

/* THEME SWITCHER - dropdown menu pilihan tema */
.pos-theme-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    display: none;
    gap: 8px;
    border: 1px solid rgba(218, 241, 222, .2);
    border-radius: 18px;
    padding: 8px;
    background:
        radial-gradient(circle at 16% 0%, rgba(218, 241, 222, .12), transparent 34%),
        linear-gradient(145deg, rgba(5, 31, 32, .98), rgba(11, 43, 38, .96));
    box-shadow: 0 26px 64px rgba(3, 18, 18, .48);
}

.pos-theme-switcher.is-open .pos-theme-menu {
    display: grid;
}

/* TEXT COLOR - Theme switcher option button */
.pos-theme-menu button {
    min-height: 44px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 13px;
    padding: 8px 10px;
    color: #f7fff8;
    background: rgba(218, 241, 222, .07);
    text-align: left;
    font-weight: 900;
}

.pos-theme-menu button:hover,
.pos-theme-menu button.is-active {
    border-color: rgba(218, 241, 222, .34);
    background: rgba(218, 241, 222, .14);
}

/* TEXT COLOR - Theme switcher selected check icon */
.pos-theme-menu button .fa-check {
    opacity: 0;
    color: #daf1de;
}

.pos-theme-menu button.is-active .fa-check {
    opacity: 1;
}

/* THEME SWITCHER - swatch lingkaran preview warna */
.pos-theme-swatch {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--swatch-a), var(--swatch-b));
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .08);
}

/* ==========================================================================
   THEME Ocean Legacy - tema lama/opsional jika masih dipakai localStorage lama
   ========================================================================== */

/* THEME Ocean Legacy - color variables */
html[data-pos-theme="ocean"] {
    --pos-red: #0f6f73;
    --pos-red-dark: #063f47;
    --pos-orange: #28c7bd;
    --pos-cream: #e7fbf8;
    --pos-ink: #eafdfa;
    --pos-muted: #95c8c6;
    --pos-line: rgba(167, 232, 224, .18);
    --abyss: #063f47;
    --abyss-deep: #021c22;
    --abyss-dark: #032e35;
    --abyss-mid: #07545c;
    --abyss-glow: #1cc7bd;
    --abyss-mint: #bdf5ec;
    --abyss-card: rgba(4, 49, 56, .72);
    --abyss-border: rgba(189, 245, 236, .18);
    --abyss-shadow: 0 26px 70px rgba(0, 13, 17, .36);
    --abyss-page-bg:
        radial-gradient(circle at 16% 8%, rgba(30, 199, 189, .22), transparent 26%),
        radial-gradient(circle at 86% 12%, rgba(10, 105, 112, .34), transparent 28%),
        linear-gradient(135deg, #021c22 0%, #063f47 46%, #07545c 100%);
    --abyss-panel-bg:
        linear-gradient(145deg, rgba(4, 43, 50, .92), rgba(6, 63, 71, .76));
}

/* THEME Ocean Legacy - page background */
html[data-pos-theme="ocean"] body,
html[data-pos-theme="ocean"] .customer-body,
html[data-pos-theme="ocean"] .crextio-page,
html[data-pos-theme="ocean"] .owner-exec-page,
html[data-pos-theme="ocean"] .cashier-app-page,
html[data-pos-theme="ocean"] .ostos-login-page {
    background:
        radial-gradient(circle at 12% 12%, rgba(40, 199, 189, .24), transparent 27%),
        radial-gradient(circle at 84% 10%, rgba(10, 105, 112, .32), transparent 30%),
        linear-gradient(120deg, rgba(0, 15, 19, .98) 0%, rgba(6, 63, 71, .98) 52%, rgba(4, 77, 83, .96) 100%) !important;
}

/* THEME Ocean Legacy - panels/cards background */
html[data-pos-theme="ocean"] .customer-shell,
html[data-pos-theme="ocean"] .crextio-shell,
html[data-pos-theme="ocean"] .owner-exec-shell,
html[data-pos-theme="ocean"] .cashier-app-shell,
html[data-pos-theme="ocean"] .ostos-login-card,
html[data-pos-theme="ocean"] .cashier-bill-screen,
html[data-pos-theme="ocean"] .cashier-manual-screen,
html[data-pos-theme="ocean"] .crextio-summary article,
html[data-pos-theme="ocean"] .crextio-summary article:nth-child(2),
html[data-pos-theme="ocean"] .crextio-summary article:nth-child(3),
html[data-pos-theme="ocean"] .crextio-summary article:nth-child(4),
html[data-pos-theme="ocean"] .pos-page,
html[data-pos-theme="ocean"] .setup-panel,
html[data-pos-theme="ocean"] .owner-kpi-grid article,
html[data-pos-theme="ocean"] .owner-card,
html[data-pos-theme="ocean"] .owner-report-section,
html[data-pos-theme="ocean"] .crextio-list div,
html[data-pos-theme="ocean"] .crextio-action-grid a,
html[data-pos-theme="ocean"] .role-list a,
html[data-pos-theme="ocean"] .permission-panel,
html[data-pos-theme="ocean"] .cashier-board .ops-column,
html[data-pos-theme="ocean"] .cashier-board .ops-card,
html[data-pos-theme="ocean"] .manual-table-picker,
html[data-pos-theme="ocean"] .manual-frame-head,
html[data-pos-theme="ocean"] .manual-table-card,
html[data-pos-theme="ocean"] .empty-state,
html[data-pos-theme="ocean"] .pos-theme-toggle,
html[data-pos-theme="ocean"] .pos-theme-menu {
    border-color: rgba(189, 245, 236, .2) !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(40, 199, 189, .18), transparent 30%),
        linear-gradient(145deg, rgba(2, 28, 34, .96), rgba(6, 63, 71, .86)) !important;
    box-shadow: 0 22px 58px rgba(0, 13, 17, .34) !important;
}

/* THEME Ocean Legacy - TEXT COLOR - secondary labels/descriptions */
html[data-pos-theme="ocean"] .crextio-hero p,
html[data-pos-theme="ocean"] .cashier-hero p,
html[data-pos-theme="ocean"] .owner-exec-hero p,
html[data-pos-theme="ocean"] .muted-small,
html[data-pos-theme="ocean"] .crextio-summary span,
html[data-pos-theme="ocean"] .crextio-summary small,
html[data-pos-theme="ocean"] .owner-card-head span,
html[data-pos-theme="ocean"] .owner-report-section summary em,
html[data-pos-theme="ocean"] .ops-card p,
html[data-pos-theme="ocean"] .manual-picker-head p,
html[data-pos-theme="ocean"] .manual-picker-head span,
html[data-pos-theme="ocean"] .manual-table-card span,
html[data-pos-theme="ocean"] .manual-table-card p,
html[data-pos-theme="ocean"] .pos-theme-toggle i {
    color: #bdf5ec !important;
}

/* THEME Ocean Legacy - TEXT COLOR - active buttons/badges */
html[data-pos-theme="ocean"] .crextio-nav a.active,
html[data-pos-theme="ocean"] .crextio-master-menu a.active,
html[data-pos-theme="ocean"] .role-list a.active,
html[data-pos-theme="ocean"] .pos-btn.primary,
html[data-pos-theme="ocean"] .crextio-primary-btn,
html[data-pos-theme="ocean"] .round-add,
html[data-pos-theme="ocean"] .cart-bar span:last-child,
html[data-pos-theme="ocean"] .cashier-board .ops-actions button:not(.light),
html[data-pos-theme="ocean"] .bill-pay-now,
html[data-pos-theme="ocean"] .cashier-payment-form button,
html[data-pos-theme="ocean"] .bill-payment-form button,
html[data-pos-theme="ocean"] .login-submit,
html[data-pos-theme="ocean"] .cashier-board .ops-column h3 b,
html[data-pos-theme="ocean"] .manual-table-card b,
html[data-pos-theme="ocean"] .ops-card-head b,
html[data-pos-theme="ocean"] .ops-meta span {
    color: #02282e !important;
    border-color: rgba(150, 255, 241, .44) !important;
    background: linear-gradient(135deg, #bdf5ec 0%, #28c7bd 46%, #0a7a7e 100%) !important;
}

/* THEME Ocean Legacy - TEXT COLOR - light buttons */
html[data-pos-theme="ocean"] .crextio-master-menu a,
html[data-pos-theme="ocean"] .cashier-board .ops-actions button.light,
html[data-pos-theme="ocean"] .pos-btn.light,
html[data-pos-theme="ocean"] .cashier-nav-action,
html[data-pos-theme="ocean"] .small-action,
html[data-pos-theme="ocean"] .icon-button,
html[data-pos-theme="ocean"] .qty-row button {
    color: #f4fffd !important;
    border-color: rgba(189, 245, 236, .24) !important;
    background: rgba(1, 27, 32, .62) !important;
}

/* THEME Ocean Legacy - TEXT COLOR - forms/inputs */
html[data-pos-theme="ocean"] .crextio-form-grid input,
html[data-pos-theme="ocean"] .crextio-form-grid select,
html[data-pos-theme="ocean"] .crextio-form-grid textarea,
html[data-pos-theme="ocean"] .form-control,
html[data-pos-theme="ocean"] .login-input {
    color: #f4fffd !important;
    border-color: rgba(189, 245, 236, .24) !important;
    background: rgba(1, 27, 32, .68) !important;
}

/* RESPONSIVE - Theme switcher mobile */
@media (max-width: 640px) {
    .pos-theme-switcher.is-floating {
        top: 12px;
        right: 12px;
    }

    .pos-theme-toggle {
        min-height: 38px;
        padding: 0 11px;
    }

    .pos-theme-toggle span {
        display: none;
    }

    .pos-theme-menu {
        width: min(210px, calc(100vw - 24px));
    }
}

/* ==========================================================================
   THEME Light Mode (#F6F4EC / #C5C6B3)
   Cari "THEME Light Mode - TEXT COLOR" untuk mengubah teks tema ini.
   ========================================================================== */

/* THEME Light Mode - color variables */
html[data-pos-theme="gradient"] {
    --pos-red: #6f7561;
    --pos-red-dark: #3f4739;
    --pos-orange: #c5c6b3;
    --pos-cream: #f6f4ec;
    --pos-ink: #2f342c;
    --pos-muted: #66705f;
    --pos-line: rgba(72, 78, 66, .16);
    --abyss: #c5c6b3;
    --abyss-deep: #f6f4ec;
    --abyss-dark: #e6e5d9;
    --abyss-mid: #c5c6b3;
    --abyss-glow: #8c967b;
    --abyss-mint: #4f5a48;
    --abyss-card: rgba(255, 255, 255, .72);
    --abyss-border: rgba(79, 90, 72, .2);
    --abyss-shadow: 0 26px 70px rgba(77, 76, 57, .18);
    --abyss-page-bg:
        radial-gradient(circle at 10% 8%, rgba(255,255,255,.72), transparent 26%),
        radial-gradient(circle at 82% 16%, rgba(197,198,179,.62), transparent 34%),
        linear-gradient(135deg, #f6f4ec 0%, #eceade 45%, #c5c6b3 100%);
    --abyss-panel-bg:
        linear-gradient(145deg, rgba(255,255,255,.82), rgba(246,244,236,.72));
}

/* THEME Light Mode - TEXT COLOR - page/base text and background */
html[data-pos-theme="gradient"] body,
html[data-pos-theme="gradient"] .customer-body,
html[data-pos-theme="gradient"] .crextio-page,
html[data-pos-theme="gradient"] .purchase-page,
html[data-pos-theme="gradient"] .owner-exec-page,
html[data-pos-theme="gradient"] .cashier-app-page,
html[data-pos-theme="gradient"] .ostos-login-page {
    color: #2f342c !important;
    background:
        radial-gradient(circle at 9% 9%, rgba(255,255,255,.82), transparent 28%),
        radial-gradient(circle at 85% 18%, rgba(197,198,179,.72), transparent 32%),
        linear-gradient(135deg, #f6f4ec 0%, #ebe9dd 48%, #c5c6b3 100%) !important;
}

/* THEME Light Mode - TEXT COLOR - panels/cards base text */
html[data-pos-theme="gradient"] .customer-shell,
html[data-pos-theme="gradient"] .crextio-shell,
html[data-pos-theme="gradient"] .purchase-shell,
html[data-pos-theme="gradient"] .owner-exec-shell,
html[data-pos-theme="gradient"] .cashier-app-shell,
html[data-pos-theme="gradient"] .ostos-login-card,
html[data-pos-theme="gradient"] .cashier-bill-screen,
html[data-pos-theme="gradient"] .cashier-manual-screen,
html[data-pos-theme="gradient"] .crextio-topbar,
html[data-pos-theme="gradient"] .owner-exec-topbar,
html[data-pos-theme="gradient"] .cashier-topbar,
html[data-pos-theme="gradient"] .crextio-summary article,
html[data-pos-theme="gradient"] .crextio-summary article:nth-child(2),
html[data-pos-theme="gradient"] .crextio-summary article:nth-child(3),
html[data-pos-theme="gradient"] .crextio-summary article:nth-child(4),
html[data-pos-theme="gradient"] .feature-disabled-note,
html[data-pos-theme="gradient"] .purchase-hero,
html[data-pos-theme="gradient"] .purchase-metrics article,
html[data-pos-theme="gradient"] .purchase-form-card,
html[data-pos-theme="gradient"] .purchase-history-card,
html[data-pos-theme="gradient"] .purchase-table-card,
html[data-pos-theme="gradient"] .quick-line,
html[data-pos-theme="gradient"] .quick-line-result,
html[data-pos-theme="gradient"] .stock-card-list div,
html[data-pos-theme="gradient"] .pos-page,
html[data-pos-theme="gradient"] .setup-panel,
html[data-pos-theme="gradient"] .owner-kpi-grid article,
html[data-pos-theme="gradient"] .owner-card,
html[data-pos-theme="gradient"] .owner-report-section,
html[data-pos-theme="gradient"] .owner-summary-list div,
html[data-pos-theme="gradient"] .owner-live-list div,
html[data-pos-theme="gradient"] .owner-insights > div:not(.owner-card-head),
html[data-pos-theme="gradient"] .crextio-list div,
html[data-pos-theme="gradient"] .crextio-action-grid a,
html[data-pos-theme="gradient"] .role-list a,
html[data-pos-theme="gradient"] .permission-panel,
html[data-pos-theme="gradient"] .permission-table-wrap,
html[data-pos-theme="gradient"] .cashier-board .ops-column,
html[data-pos-theme="gradient"] .cashier-board .ops-card,
html[data-pos-theme="gradient"] .manual-table-picker,
html[data-pos-theme="gradient"] .manual-frame-head,
html[data-pos-theme="gradient"] .manual-table-card,
html[data-pos-theme="gradient"] .empty-state,
html[data-pos-theme="gradient"] .menu-card,
html[data-pos-theme="gradient"] .customer-session-card,
html[data-pos-theme="gradient"] .sheet-panel,
html[data-pos-theme="gradient"] .status-card,
html[data-pos-theme="gradient"] .option-line,
html[data-pos-theme="gradient"] .pos-theme-toggle,
html[data-pos-theme="gradient"] .pos-theme-menu {
    color: #2f342c !important;
    border-color: rgba(79, 90, 72, .2) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.54), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.86), rgba(246,244,236,.76)) !important;
    box-shadow: 0 22px 58px rgba(77, 76, 57, .14) !important;
}

/* THEME Light Mode - TEXT COLOR - main titles */
html[data-pos-theme="gradient"] .crextio-nav a,
html[data-pos-theme="gradient"] .crextio-brand,
html[data-pos-theme="gradient"] .crextio-actions a,
html[data-pos-theme="gradient"] .crextio-hero h1,
html[data-pos-theme="gradient"] .purchase-hero h1,
html[data-pos-theme="gradient"] .purchase-hero > strong,
html[data-pos-theme="gradient"] .purchase-metrics strong,
html[data-pos-theme="gradient"] .purchase-card-head h2,
html[data-pos-theme="gradient"] .quick-line-result strong,
html[data-pos-theme="gradient"] .stock-card-list b,
html[data-pos-theme="gradient"] .cashier-hero h1,
html[data-pos-theme="gradient"] .owner-exec-hero h1,
html[data-pos-theme="gradient"] .mobile-topbar strong,
html[data-pos-theme="gradient"] .menu-title h2,
html[data-pos-theme="gradient"] .menu-name,
html[data-pos-theme="gradient"] .status-card h1,
html[data-pos-theme="gradient"] .status-card h2,
html[data-pos-theme="gradient"] .ostos-login-card h1,
html[data-pos-theme="gradient"] .pos-page-header h2,
html[data-pos-theme="gradient"] .setup-panel h3,
html[data-pos-theme="gradient"] .owner-card h2,
html[data-pos-theme="gradient"] .owner-card h3,
html[data-pos-theme="gradient"] .owner-card strong,
html[data-pos-theme="gradient"] .owner-kpi-grid strong,
html[data-pos-theme="gradient"] .crextio-summary strong,
html[data-pos-theme="gradient"] .crextio-list span,
html[data-pos-theme="gradient"] .crextio-list strong,
html[data-pos-theme="gradient"] .permission-table th,
html[data-pos-theme="gradient"] .permission-table td,
html[data-pos-theme="gradient"] .cashier-board .ops-column h3,
html[data-pos-theme="gradient"] .cashier-board .ops-card strong,
html[data-pos-theme="gradient"] .ops-card-head h4,
html[data-pos-theme="gradient"] .feature-disabled-note strong,
html[data-pos-theme="gradient"] .manual-picker-head h2,
html[data-pos-theme="gradient"] .manual-table-card h3,
html[data-pos-theme="gradient"] .manual-table-card strong,
html[data-pos-theme="gradient"] .manual-frame-head strong,
html[data-pos-theme="gradient"] .bill-total-card strong,
html[data-pos-theme="gradient"] .bill-pay-row strong,
html[data-pos-theme="gradient"] .login-web,
html[data-pos-theme="gradient"] .pos-theme-menu button {
    color: #2f342c !important;
}

/* THEME Light Mode - TEXT COLOR - secondary labels/descriptions */
html[data-pos-theme="gradient"] .crextio-hero p,
html[data-pos-theme="gradient"] .cashier-hero p,
html[data-pos-theme="gradient"] .owner-exec-hero p,
html[data-pos-theme="gradient"] .muted-small,
html[data-pos-theme="gradient"] .crextio-summary span,
html[data-pos-theme="gradient"] .crextio-summary small,
html[data-pos-theme="gradient"] .feature-disabled-note span,
html[data-pos-theme="gradient"] .purchase-hero p,
html[data-pos-theme="gradient"] .purchase-hero span,
html[data-pos-theme="gradient"] .purchase-metrics span,
html[data-pos-theme="gradient"] .purchase-card-head span,
html[data-pos-theme="gradient"] .purchase-form-grid label,
html[data-pos-theme="gradient"] .quick-line label,
html[data-pos-theme="gradient"] .quick-line-result span,
html[data-pos-theme="gradient"] .quick-line-result em,
html[data-pos-theme="gradient"] .stock-card-list span,
html[data-pos-theme="gradient"] .stock-card-list em,
html[data-pos-theme="gradient"] .owner-card-head span,
html[data-pos-theme="gradient"] .owner-report-section summary em,
html[data-pos-theme="gradient"] .owner-kpi-grid span,
html[data-pos-theme="gradient"] .owner-kpi-grid small,
html[data-pos-theme="gradient"] .ops-card p,
html[data-pos-theme="gradient"] .manual-picker-head p,
html[data-pos-theme="gradient"] .manual-picker-head span,
html[data-pos-theme="gradient"] .manual-table-card span,
html[data-pos-theme="gradient"] .manual-table-card p,
html[data-pos-theme="gradient"] .mobile-topbar span,
html[data-pos-theme="gradient"] .menu-info p,
html[data-pos-theme="gradient"] .notification-line p,
html[data-pos-theme="gradient"] .session-order-line p,
html[data-pos-theme="gradient"] .crextio-form-grid label small,
html[data-pos-theme="gradient"] .permission-table small {
    color: #66705f !important;
}

/* THEME Light Mode - TEXT COLOR - Priority Attention message text */
html[data-pos-theme="gradient"] .owner-insights p,
html[data-pos-theme="gradient"] .owner-insights .warning p,
html[data-pos-theme="gradient"] .owner-insights .good p {
    color: #2f342c !important;
}

/* THEME Light Mode - TEXT COLOR - Customer ETA Box */
html[data-pos-theme="gradient"] .eta-box {
    color: #2f342c !important;
    border-color: rgba(79, 90, 72, .2) !important;
    background: rgba(255, 255, 255, .78) !important;
}

html[data-pos-theme="gradient"] .eta-box span {
    color: #66705f !important;
}

html[data-pos-theme="gradient"] .eta-box strong {
    color: #2f342c !important;
}

/* THEME Light Mode - TEXT COLOR - Owner report menu titles */
html[data-pos-theme="gradient"] .owner-report-section summary span,
html[data-pos-theme="gradient"] .owner-report-section summary b {
    color: #2f342c !important;
    text-shadow: none !important;
}

html[data-pos-theme="gradient"] .owner-report-section summary > strong {
    color: #f6f4ec !important;
    border-color: rgba(63, 71, 57, .28) !important;
    background: linear-gradient(135deg, #6f7561 0%, #4f5a48 100%) !important;
}

html[data-pos-theme="gradient"] .owner-report-section summary:after {
    color: #66705f !important;
}

html[data-pos-theme="gradient"] .owner-report-section[open] summary {
    background: rgba(246, 244, 236, .72) !important;
}

/* THEME Light Mode - TEXT COLOR - active buttons/badges/status pills */
html[data-pos-theme="gradient"] .crextio-nav a.active,
html[data-pos-theme="gradient"] .crextio-master-menu a.active,
html[data-pos-theme="gradient"] .role-list a.active,
html[data-pos-theme="gradient"] .pos-btn.primary,
html[data-pos-theme="gradient"] .crextio-primary-btn,
html[data-pos-theme="gradient"] .round-add,
html[data-pos-theme="gradient"] .cart-bar span:last-child,
html[data-pos-theme="gradient"] .cashier-board .ops-actions button:not(.light),
html[data-pos-theme="gradient"] .bill-pay-now,
html[data-pos-theme="gradient"] .cashier-payment-form button,
html[data-pos-theme="gradient"] .bill-payment-form button,
html[data-pos-theme="gradient"] .login-submit,
html[data-pos-theme="gradient"] .cashier-board .ops-column h3 b,
html[data-pos-theme="gradient"] .manual-table-card b,
html[data-pos-theme="gradient"] .ops-card-head b,
html[data-pos-theme="gradient"] .ops-meta span,
html[data-pos-theme="gradient"] .status-icon,
html[data-pos-theme="gradient"] .table-pill,
html[data-pos-theme="gradient"] .notification-dot {
    color: #f6f4ec !important;
    border-color: rgba(63, 71, 57, .28) !important;
    background: linear-gradient(135deg, #6f7561 0%, #4f5a48 100%) !important;
    box-shadow: 0 16px 38px rgba(79, 90, 72, .2) !important;
}

/* THEME Light Mode - TEXT COLOR - light buttons and icon buttons */
html[data-pos-theme="gradient"] .crextio-master-menu a,
html[data-pos-theme="gradient"] .cashier-board .ops-actions button.light,
html[data-pos-theme="gradient"] .pos-btn.light,
html[data-pos-theme="gradient"] .small-action,
html[data-pos-theme="gradient"] .icon-button,
html[data-pos-theme="gradient"] .qty-row button,
html[data-pos-theme="gradient"] .cashier-bill-close,
html[data-pos-theme="gradient"] .cashier-nav-action,
html[data-pos-theme="gradient"] .pos-theme-menu button {
    color: #2f342c !important;
    border-color: rgba(79, 90, 72, .18) !important;
    background: rgba(246, 244, 236, .78) !important;
}

/* THEME Light Mode - TEXT COLOR - form inputs and bill inputs */
html[data-pos-theme="gradient"] .crextio-form-grid input,
html[data-pos-theme="gradient"] .crextio-form-grid select,
html[data-pos-theme="gradient"] .crextio-form-grid textarea,
html[data-pos-theme="gradient"] .purchase-form-grid input,
html[data-pos-theme="gradient"] .purchase-form-grid select,
html[data-pos-theme="gradient"] .purchase-form-grid textarea,
html[data-pos-theme="gradient"] .quick-line input,
html[data-pos-theme="gradient"] .quick-line select,
html[data-pos-theme="gradient"] .form-control,
html[data-pos-theme="gradient"] .login-input,
html[data-pos-theme="gradient"] .login-input input,
html[data-pos-theme="gradient"] .cashier-payment-form select,
html[data-pos-theme="gradient"] .cashier-payment-form input,
html[data-pos-theme="gradient"] .bill-payment-form select,
html[data-pos-theme="gradient"] .bill-payment-form input {
    color: #2f342c !important;
    border-color: rgba(79, 90, 72, .2) !important;
    background: rgba(255, 255, 255, .76) !important;
}

/* THEME Light Mode - TEXT COLOR - placeholders */
html[data-pos-theme="gradient"] .login-input input::placeholder,
html[data-pos-theme="gradient"] .crextio-form-grid input::placeholder,
html[data-pos-theme="gradient"] .crextio-form-grid textarea::placeholder,
html[data-pos-theme="gradient"] .form-control::placeholder {
    color: rgba(79, 90, 72, .66) !important;
}

/* THEME Light Mode - TEXT COLOR - login pill and theme switcher */
html[data-pos-theme="gradient"] .login-top-pill,
html[data-pos-theme="gradient"] .pos-theme-toggle,
html[data-pos-theme="gradient"] .pos-theme-menu {
    color: #2f342c !important;
    border-color: rgba(79, 90, 72, .2) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255,255,255,.54), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,.9), rgba(246,244,236,.78)) !important;
}

/* THEME Light Mode - TEXT COLOR - install app button */
html[data-pos-theme="gradient"] .install-button {
    color: #f6f4ec !important;
    border-color: rgba(63, 71, 57, .28) !important;
    background: linear-gradient(135deg, #6f7561 0%, #4f5a48 100%) !important;
}

/* THEME Light Mode - TEXT COLOR - select dropdown options */
html[data-pos-theme="gradient"] option,
html[data-pos-theme="gradient"] select option {
    color: #2f342c !important;
    background: #f6f4ec !important;
}

/* THEME Light Mode - overlay background for sheets/modals */
html[data-pos-theme="gradient"] .bottom-sheet,
html[data-pos-theme="gradient"] .cashier-bill-modal {
    background: rgba(47, 52, 44, .32) !important;
}

/* THEME Light Mode - checkbox/radio accent */
html[data-pos-theme="gradient"] input[type="checkbox"],
html[data-pos-theme="gradient"] input[type="radio"] {
    accent-color: #6f7561;
}

/* ==========================================================================
   THEME Crimson Velvet (#2C0F12 / #6B1E23)
   Cari "THEME Crimson Velvet - TEXT COLOR" untuk mengubah teks tema ini.
   ========================================================================== */

/* THEME Crimson Velvet - color variables */
html[data-pos-theme="crimson"] {
    --pos-red: #6b1e23;
    --pos-red-dark: #2c0f12;
    --pos-orange: #c78683;
    --pos-cream: #fff0ed;
    --pos-ink: #fff7f3;
    --pos-muted: #e4b8b2;
    --pos-line: rgba(255, 226, 220, .18);
    --abyss: #6b1e23;
    --abyss-deep: #2c0f12;
    --abyss-dark: #3d1418;
    --abyss-mid: #6b1e23;
    --abyss-glow: #c78683;
    --abyss-mint: #f1c9c4;
    --abyss-card: rgba(44, 15, 18, .76);
    --abyss-border: rgba(255, 226, 220, .18);
    --abyss-shadow: 0 26px 70px rgba(24, 4, 7, .48);
    --abyss-page-bg:
        radial-gradient(circle at 14% 10%, rgba(198, 79, 75, .24), transparent 28%),
        radial-gradient(circle at 86% 16%, rgba(107, 30, 35, .52), transparent 34%),
        linear-gradient(135deg, #2c0f12 0%, #421418 42%, #6b1e23 100%);
    --abyss-panel-bg:
        linear-gradient(145deg, rgba(44, 15, 18, .94), rgba(107, 30, 35, .76));
}

/* THEME Crimson Velvet - TEXT COLOR - page/base text and background */
html[data-pos-theme="crimson"] body,
html[data-pos-theme="crimson"] .customer-body,
html[data-pos-theme="crimson"] .crextio-page,
html[data-pos-theme="crimson"] .purchase-page,
html[data-pos-theme="crimson"] .owner-exec-page,
html[data-pos-theme="crimson"] .cashier-app-page,
html[data-pos-theme="crimson"] .ostos-login-page {
    color: #fff7f3 !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(198, 79, 75, .24), transparent 28%),
        radial-gradient(circle at 84% 14%, rgba(107, 30, 35, .48), transparent 32%),
        linear-gradient(135deg, #2c0f12 0%, #411317 48%, #6b1e23 100%) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - panels/cards base text */
html[data-pos-theme="crimson"] .customer-shell,
html[data-pos-theme="crimson"] .crextio-shell,
html[data-pos-theme="crimson"] .purchase-shell,
html[data-pos-theme="crimson"] .owner-exec-shell,
html[data-pos-theme="crimson"] .cashier-app-shell,
html[data-pos-theme="crimson"] .ostos-login-card,
html[data-pos-theme="crimson"] .cashier-bill-screen,
html[data-pos-theme="crimson"] .cashier-manual-screen,
html[data-pos-theme="crimson"] .crextio-summary article,
html[data-pos-theme="crimson"] .crextio-summary article:nth-child(2),
html[data-pos-theme="crimson"] .crextio-summary article:nth-child(3),
html[data-pos-theme="crimson"] .crextio-summary article:nth-child(4),
html[data-pos-theme="crimson"] .feature-disabled-note,
html[data-pos-theme="crimson"] .purchase-hero,
html[data-pos-theme="crimson"] .purchase-metrics article,
html[data-pos-theme="crimson"] .purchase-form-card,
html[data-pos-theme="crimson"] .purchase-history-card,
html[data-pos-theme="crimson"] .purchase-table-card,
html[data-pos-theme="crimson"] .quick-line,
html[data-pos-theme="crimson"] .quick-line-result,
html[data-pos-theme="crimson"] .stock-card-list div,
html[data-pos-theme="crimson"] .pos-page,
html[data-pos-theme="crimson"] .setup-panel,
html[data-pos-theme="crimson"] .owner-kpi-grid article,
html[data-pos-theme="crimson"] .owner-card,
html[data-pos-theme="crimson"] .owner-report-section,
html[data-pos-theme="crimson"] .owner-summary-list div,
html[data-pos-theme="crimson"] .owner-live-list div,
html[data-pos-theme="crimson"] .owner-insights > div:not(.owner-card-head),
html[data-pos-theme="crimson"] .crextio-list div,
html[data-pos-theme="crimson"] .crextio-action-grid a,
html[data-pos-theme="crimson"] .role-list a,
html[data-pos-theme="crimson"] .permission-panel,
html[data-pos-theme="crimson"] .cashier-board .ops-column,
html[data-pos-theme="crimson"] .cashier-board .ops-card,
html[data-pos-theme="crimson"] .manual-table-picker,
html[data-pos-theme="crimson"] .manual-frame-head,
html[data-pos-theme="crimson"] .manual-table-card,
html[data-pos-theme="crimson"] .empty-state,
html[data-pos-theme="crimson"] .menu-card,
html[data-pos-theme="crimson"] .customer-session-card,
html[data-pos-theme="crimson"] .sheet-panel,
html[data-pos-theme="crimson"] .status-card,
html[data-pos-theme="crimson"] .option-line,
html[data-pos-theme="crimson"] .pos-theme-toggle,
html[data-pos-theme="crimson"] .pos-theme-menu {
    color: #fff7f3 !important;
    border-color: rgba(255, 226, 220, .18) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 226, 220, .1), transparent 34%),
        linear-gradient(145deg, rgba(44, 15, 18, .94), rgba(107, 30, 35, .76)) !important;
    box-shadow: 0 24px 64px rgba(24, 4, 7, .42) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - main titles */
html[data-pos-theme="crimson"] .crextio-nav a,
html[data-pos-theme="crimson"] .crextio-brand,
html[data-pos-theme="crimson"] .crextio-actions a,
html[data-pos-theme="crimson"] .crextio-hero h1,
html[data-pos-theme="crimson"] .purchase-hero h1,
html[data-pos-theme="crimson"] .purchase-hero > strong,
html[data-pos-theme="crimson"] .purchase-metrics strong,
html[data-pos-theme="crimson"] .purchase-card-head h2,
html[data-pos-theme="crimson"] .quick-line-result strong,
html[data-pos-theme="crimson"] .stock-card-list b,
html[data-pos-theme="crimson"] .cashier-hero h1,
html[data-pos-theme="crimson"] .owner-exec-hero h1,
html[data-pos-theme="crimson"] .mobile-topbar strong,
html[data-pos-theme="crimson"] .menu-title h2,
html[data-pos-theme="crimson"] .menu-name,
html[data-pos-theme="crimson"] .status-card h1,
html[data-pos-theme="crimson"] .status-card h2,
html[data-pos-theme="crimson"] .ostos-login-card h1,
html[data-pos-theme="crimson"] .pos-page-header h2,
html[data-pos-theme="crimson"] .setup-panel h3,
html[data-pos-theme="crimson"] .owner-card h2,
html[data-pos-theme="crimson"] .owner-card h3,
html[data-pos-theme="crimson"] .owner-card strong,
html[data-pos-theme="crimson"] .owner-kpi-grid strong,
html[data-pos-theme="crimson"] .crextio-summary strong,
html[data-pos-theme="crimson"] .crextio-list span,
html[data-pos-theme="crimson"] .crextio-list strong,
html[data-pos-theme="crimson"] .permission-table th,
html[data-pos-theme="crimson"] .permission-table td,
html[data-pos-theme="crimson"] .cashier-board .ops-column h3,
html[data-pos-theme="crimson"] .cashier-board .ops-card strong,
html[data-pos-theme="crimson"] .ops-card-head h4,
html[data-pos-theme="crimson"] .feature-disabled-note strong,
html[data-pos-theme="crimson"] .manual-picker-head h2,
html[data-pos-theme="crimson"] .manual-table-card h3,
html[data-pos-theme="crimson"] .manual-table-card strong,
html[data-pos-theme="crimson"] .manual-frame-head strong,
html[data-pos-theme="crimson"] .bill-total-card strong,
html[data-pos-theme="crimson"] .bill-pay-row strong,
html[data-pos-theme="crimson"] .pos-theme-menu button {
    color: #fff7f3 !important;
}

/* THEME Crimson Velvet - TEXT COLOR - secondary labels/descriptions */
html[data-pos-theme="crimson"] .crextio-hero p,
html[data-pos-theme="crimson"] .cashier-hero p,
html[data-pos-theme="crimson"] .owner-exec-hero p,
html[data-pos-theme="crimson"] .muted-small,
html[data-pos-theme="crimson"] .crextio-summary span,
html[data-pos-theme="crimson"] .crextio-summary small,
html[data-pos-theme="crimson"] .feature-disabled-note span,
html[data-pos-theme="crimson"] .purchase-hero p,
html[data-pos-theme="crimson"] .purchase-hero span,
html[data-pos-theme="crimson"] .purchase-metrics span,
html[data-pos-theme="crimson"] .purchase-card-head span,
html[data-pos-theme="crimson"] .purchase-form-grid label,
html[data-pos-theme="crimson"] .quick-line label,
html[data-pos-theme="crimson"] .quick-line-result span,
html[data-pos-theme="crimson"] .quick-line-result em,
html[data-pos-theme="crimson"] .stock-card-list span,
html[data-pos-theme="crimson"] .stock-card-list em,
html[data-pos-theme="crimson"] .owner-card-head span,
html[data-pos-theme="crimson"] .owner-report-section summary em,
html[data-pos-theme="crimson"] .owner-kpi-grid span,
html[data-pos-theme="crimson"] .owner-kpi-grid small,
html[data-pos-theme="crimson"] .ops-card p,
html[data-pos-theme="crimson"] .manual-picker-head p,
html[data-pos-theme="crimson"] .manual-picker-head span,
html[data-pos-theme="crimson"] .manual-table-card span,
html[data-pos-theme="crimson"] .manual-table-card p,
html[data-pos-theme="crimson"] .mobile-topbar span,
html[data-pos-theme="crimson"] .menu-info p,
html[data-pos-theme="crimson"] .notification-line p,
html[data-pos-theme="crimson"] .session-order-line p,
html[data-pos-theme="crimson"] .crextio-form-grid label small,
html[data-pos-theme="crimson"] .permission-table small {
    color: #f1c9c4 !important;
}

/* THEME Crimson Velvet - TEXT COLOR - Priority Attention message text */
html[data-pos-theme="crimson"] .owner-insights p,
html[data-pos-theme="crimson"] .owner-insights .warning p,
html[data-pos-theme="crimson"] .owner-insights .good p {
    color: #fff7f3 !important;
}

/* THEME Crimson Velvet - TEXT COLOR - Customer ETA Box */
html[data-pos-theme="crimson"] .eta-box {
    color: #fff7f3 !important;
    border-color: rgba(255, 226, 220, .18) !important;
    background: rgba(44, 15, 18, .72) !important;
}

html[data-pos-theme="crimson"] .eta-box span {
    color: #f1c9c4 !important;
}

html[data-pos-theme="crimson"] .eta-box strong {
    color: #fff7f3 !important;
}

/* THEME Crimson Velvet - TEXT COLOR - Owner report menu titles */
html[data-pos-theme="crimson"] .owner-report-section summary span,
html[data-pos-theme="crimson"] .owner-report-section summary b {
    color: #fff7f3 !important;
    text-shadow: 0 1px 2px rgba(24, 4, 7, .36) !important;
}

html[data-pos-theme="crimson"] .owner-report-section summary em {
    color: #f1c9c4 !important;
}

html[data-pos-theme="crimson"] .owner-report-section summary > strong {
    color: #2c0f12 !important;
    border-color: rgba(255, 226, 220, .42) !important;
    background: linear-gradient(135deg, #fff0ed 0%, #d9a09a 52%, #b86161 100%) !important;
    text-shadow: none !important;
}

html[data-pos-theme="crimson"] .owner-report-section summary:after {
    color: #f1c9c4 !important;
}

html[data-pos-theme="crimson"] .owner-report-section[open] summary {
    background: rgba(255, 226, 220, .08) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - active buttons/badges/status pills */
html[data-pos-theme="crimson"] .crextio-nav a.active,
html[data-pos-theme="crimson"] .crextio-master-menu a.active,
html[data-pos-theme="crimson"] .role-list a.active,
html[data-pos-theme="crimson"] .pos-btn.primary,
html[data-pos-theme="crimson"] .crextio-primary-btn,
html[data-pos-theme="crimson"] .round-add,
html[data-pos-theme="crimson"] .cart-bar span:last-child,
html[data-pos-theme="crimson"] .cashier-board .ops-actions button:not(.light),
html[data-pos-theme="crimson"] .bill-pay-now,
html[data-pos-theme="crimson"] .cashier-payment-form button,
html[data-pos-theme="crimson"] .bill-payment-form button,
html[data-pos-theme="crimson"] .login-submit,
html[data-pos-theme="crimson"] .cashier-board .ops-column h3 b,
html[data-pos-theme="crimson"] .manual-table-card b,
html[data-pos-theme="crimson"] .ops-card-head b,
html[data-pos-theme="crimson"] .ops-meta span,
html[data-pos-theme="crimson"] .status-icon,
html[data-pos-theme="crimson"] .table-pill,
html[data-pos-theme="crimson"] .notification-dot {
    color: #2c0f12 !important;
    border-color: rgba(255, 226, 220, .42) !important;
    background: linear-gradient(135deg, #fff0ed 0%, #d9a09a 52%, #b86161 100%) !important;
    box-shadow: 0 16px 38px rgba(24, 4, 7, .28) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - light buttons and icon buttons */
html[data-pos-theme="crimson"] .crextio-master-menu a,
html[data-pos-theme="crimson"] .cashier-board .ops-actions button.light,
html[data-pos-theme="crimson"] .pos-btn.light,
html[data-pos-theme="crimson"] .small-action,
html[data-pos-theme="crimson"] .icon-button,
html[data-pos-theme="crimson"] .qty-row button,
html[data-pos-theme="crimson"] .cashier-bill-close,
html[data-pos-theme="crimson"] .cashier-nav-action,
html[data-pos-theme="crimson"] .pos-theme-menu button {
    color: #fff7f3 !important;
    border-color: rgba(255, 226, 220, .22) !important;
    background: rgba(44, 15, 18, .68) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - form inputs and bill inputs */
html[data-pos-theme="crimson"] .crextio-form-grid input,
html[data-pos-theme="crimson"] .crextio-form-grid select,
html[data-pos-theme="crimson"] .crextio-form-grid textarea,
html[data-pos-theme="crimson"] .purchase-form-grid input,
html[data-pos-theme="crimson"] .purchase-form-grid select,
html[data-pos-theme="crimson"] .purchase-form-grid textarea,
html[data-pos-theme="crimson"] .quick-line input,
html[data-pos-theme="crimson"] .quick-line select,
html[data-pos-theme="crimson"] .form-control,
html[data-pos-theme="crimson"] .login-input,
html[data-pos-theme="crimson"] .login-input input,
html[data-pos-theme="crimson"] .cashier-payment-form select,
html[data-pos-theme="crimson"] .cashier-payment-form input,
html[data-pos-theme="crimson"] .bill-payment-form select,
html[data-pos-theme="crimson"] .bill-payment-form input {
    color: #fff7f3 !important;
    border-color: rgba(255, 226, 220, .24) !important;
    background: rgba(44, 15, 18, .72) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - placeholders */
html[data-pos-theme="crimson"] .login-input input::placeholder,
html[data-pos-theme="crimson"] .crextio-form-grid input::placeholder,
html[data-pos-theme="crimson"] .crextio-form-grid textarea::placeholder,
html[data-pos-theme="crimson"] .form-control::placeholder {
    color: rgba(241, 201, 196, .74) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - login pill and theme switcher */
html[data-pos-theme="crimson"] .login-top-pill,
html[data-pos-theme="crimson"] .pos-theme-toggle,
html[data-pos-theme="crimson"] .pos-theme-menu {
    color: #fff7f3 !important;
    border-color: rgba(255, 226, 220, .18) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 226, 220, .1), transparent 34%),
        linear-gradient(145deg, rgba(44, 15, 18, .94), rgba(107, 30, 35, .76)) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - install app button */
html[data-pos-theme="crimson"] .install-button {
    color: #2c0f12 !important;
    border-color: rgba(255, 226, 220, .42) !important;
    background: linear-gradient(135deg, #fff0ed 0%, #d9a09a 52%, #b86161 100%) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - select dropdown options */
html[data-pos-theme="crimson"] option,
html[data-pos-theme="crimson"] select option {
    color: #fff7f3 !important;
    background: #2c0f12 !important;
}

/* THEME Crimson Velvet - overlay background for sheets/modals */
html[data-pos-theme="crimson"] .bottom-sheet,
html[data-pos-theme="crimson"] .cashier-bill-modal {
    background: rgba(24, 4, 7, .76) !important;
}

/* THEME Crimson Velvet - checkbox/radio accent */
html[data-pos-theme="crimson"] input[type="checkbox"],
html[data-pos-theme="crimson"] input[type="radio"] {
    accent-color: #d9a09a;
}

/* ==========================================================================
   THEME Solid Mode Overrides - Dark Mode / Light Mode / Crimson Velvet
   Keterangan:
   - Key internal tetap forest, gradient, crimson agar setting lama tidak rusak.
   - Nama tampil: Dark Mode, Light Mode, Crimson Velvet.
   - Komentar TEXT COLOR di bawah dipakai untuk menemukan warna tulisan per area.
   ========================================================================== */

/* THEME Dark Mode - color variables and solid background */
:root,
html[data-pos-theme="forest"] {
    --pos-red: #2c2c2c;
    --pos-red-dark: #202020;
    --pos-orange: #ffffff;
    --pos-cream: #f5f5f5;
    --pos-ink: #ffffff;
    --pos-muted: #d9d9d9;
    --pos-line: rgba(255, 255, 255, .16);
    --abyss: #2c2c2c;
    --abyss-deep: #2c2c2c;
    --abyss-dark: #242424;
    --abyss-mid: #383838;
    --abyss-glow: #ffffff;
    --abyss-mint: #f4f4f4;
    --abyss-card: #363636;
    --abyss-border: rgba(255, 255, 255, .16);
    --abyss-shadow: 0 18px 44px rgba(0, 0, 0, .28);
    --abyss-page-bg: #2c2c2c;
    --abyss-panel-bg: #363636;
}

/* THEME Dark Mode - page background and default page text */
html[data-pos-theme="forest"] body,
html[data-pos-theme="forest"] .customer-body,
html[data-pos-theme="forest"] .crextio-page,
html[data-pos-theme="forest"] .purchase-page,
html[data-pos-theme="forest"] .owner-exec-page,
html[data-pos-theme="forest"] .cashier-app-page,
html[data-pos-theme="forest"] .ostos-login-page,
html[data-pos-theme="forest"] .pos-page {
    color: #ffffff !important;
    background: #2c2c2c !important;
}

/* THEME Dark Mode - panels/cards/table surfaces */
html[data-pos-theme="forest"] .customer-shell,
html[data-pos-theme="forest"] .crextio-shell,
html[data-pos-theme="forest"] .purchase-shell,
html[data-pos-theme="forest"] .owner-exec-shell,
html[data-pos-theme="forest"] .cashier-app-shell,
html[data-pos-theme="forest"] .ostos-login-card,
html[data-pos-theme="forest"] .cashier-bill-screen,
html[data-pos-theme="forest"] .cashier-manual-screen,
html[data-pos-theme="forest"] .crextio-topbar,
html[data-pos-theme="forest"] .owner-exec-topbar,
html[data-pos-theme="forest"] .crextio-summary article,
html[data-pos-theme="forest"] .feature-disabled-note,
html[data-pos-theme="forest"] .purchase-hero,
html[data-pos-theme="forest"] .purchase-metrics article,
html[data-pos-theme="forest"] .purchase-form-card,
html[data-pos-theme="forest"] .purchase-history-card,
html[data-pos-theme="forest"] .purchase-table-card,
html[data-pos-theme="forest"] .quick-line,
html[data-pos-theme="forest"] .quick-line-result,
html[data-pos-theme="forest"] .stock-card-list div,
html[data-pos-theme="forest"] .setup-panel,
html[data-pos-theme="forest"] .owner-kpi-grid article,
html[data-pos-theme="forest"] .owner-card,
html[data-pos-theme="forest"] .owner-report-section,
html[data-pos-theme="forest"] .owner-summary-list div,
html[data-pos-theme="forest"] .owner-live-list div,
html[data-pos-theme="forest"] .owner-insights > div:not(.owner-card-head),
html[data-pos-theme="forest"] .crextio-list div,
html[data-pos-theme="forest"] .crextio-action-grid a,
html[data-pos-theme="forest"] .role-list a,
html[data-pos-theme="forest"] .permission-panel,
html[data-pos-theme="forest"] .cashier-board .ops-column,
html[data-pos-theme="forest"] .cashier-board .ops-card,
html[data-pos-theme="forest"] .manual-table-picker,
html[data-pos-theme="forest"] .manual-frame-head,
html[data-pos-theme="forest"] .manual-table-card,
html[data-pos-theme="forest"] .empty-state,
html[data-pos-theme="forest"] .menu-card,
html[data-pos-theme="forest"] .customer-session-card,
html[data-pos-theme="forest"] .sheet-panel,
html[data-pos-theme="forest"] .status-card,
html[data-pos-theme="forest"] .option-line,
html[data-pos-theme="forest"] .bill-item,
html[data-pos-theme="forest"] .bill-pay-row,
html[data-pos-theme="forest"] .ops-eta-form,
html[data-pos-theme="forest"] .pos-theme-toggle,
html[data-pos-theme="forest"] .pos-theme-menu,
html[data-pos-theme="forest"] .modal-content,
html[data-pos-theme="forest"] .panel,
html[data-pos-theme="forest"] .box,
html[data-pos-theme="forest"] .table,
html[data-pos-theme="forest"] .dataTables_wrapper {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .16) !important;
    background: #363636 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .24) !important;
}

/* THEME Dark Mode - TEXT COLOR - main titles and important values */
html[data-pos-theme="forest"] h1,
html[data-pos-theme="forest"] h2,
html[data-pos-theme="forest"] h3,
html[data-pos-theme="forest"] h4,
html[data-pos-theme="forest"] h5,
html[data-pos-theme="forest"] h6,
html[data-pos-theme="forest"] .crextio-brand,
html[data-pos-theme="forest"] .crextio-nav a,
html[data-pos-theme="forest"] .crextio-actions a,
html[data-pos-theme="forest"] .crextio-hero h1,
html[data-pos-theme="forest"] .purchase-hero h1,
html[data-pos-theme="forest"] .purchase-metrics strong,
html[data-pos-theme="forest"] .purchase-card-head h2,
html[data-pos-theme="forest"] .quick-line-result strong,
html[data-pos-theme="forest"] .stock-card-list b,
html[data-pos-theme="forest"] .cashier-hero h1,
html[data-pos-theme="forest"] .owner-exec-hero h1,
html[data-pos-theme="forest"] .mobile-topbar strong,
html[data-pos-theme="forest"] .menu-title h2,
html[data-pos-theme="forest"] .menu-name,
html[data-pos-theme="forest"] .status-card h1,
html[data-pos-theme="forest"] .status-card h2,
html[data-pos-theme="forest"] .ostos-login-card h1,
html[data-pos-theme="forest"] .pos-page-header h2,
html[data-pos-theme="forest"] .setup-panel h3,
html[data-pos-theme="forest"] .owner-card h2,
html[data-pos-theme="forest"] .owner-card h3,
html[data-pos-theme="forest"] .owner-card strong,
html[data-pos-theme="forest"] .owner-kpi-grid strong,
html[data-pos-theme="forest"] .crextio-summary strong,
html[data-pos-theme="forest"] .crextio-list span,
html[data-pos-theme="forest"] .crextio-list strong,
html[data-pos-theme="forest"] .permission-table th,
html[data-pos-theme="forest"] .permission-table td,
html[data-pos-theme="forest"] .cashier-board .ops-column h3,
html[data-pos-theme="forest"] .cashier-board .ops-card strong,
html[data-pos-theme="forest"] .ops-card-head h4,
html[data-pos-theme="forest"] .feature-disabled-note strong,
html[data-pos-theme="forest"] .manual-picker-head h2,
html[data-pos-theme="forest"] .manual-table-card h3,
html[data-pos-theme="forest"] .manual-table-card strong,
html[data-pos-theme="forest"] .manual-frame-head strong,
html[data-pos-theme="forest"] .bill-total-card strong,
html[data-pos-theme="forest"] .bill-pay-row strong,
html[data-pos-theme="forest"] .pos-theme-menu button {
    color: #ffffff !important;
}

/* THEME Dark Mode - TEXT COLOR - secondary labels/descriptions */
html[data-pos-theme="forest"] p,
html[data-pos-theme="forest"] small,
html[data-pos-theme="forest"] label,
html[data-pos-theme="forest"] .muted-small,
html[data-pos-theme="forest"] .crextio-hero p,
html[data-pos-theme="forest"] .cashier-hero p,
html[data-pos-theme="forest"] .owner-exec-hero p,
html[data-pos-theme="forest"] .crextio-summary span,
html[data-pos-theme="forest"] .crextio-summary small,
html[data-pos-theme="forest"] .feature-disabled-note span,
html[data-pos-theme="forest"] .purchase-hero p,
html[data-pos-theme="forest"] .purchase-hero span,
html[data-pos-theme="forest"] .purchase-metrics span,
html[data-pos-theme="forest"] .purchase-card-head span,
html[data-pos-theme="forest"] .purchase-form-grid label,
html[data-pos-theme="forest"] .quick-line label,
html[data-pos-theme="forest"] .quick-line-result span,
html[data-pos-theme="forest"] .quick-line-result em,
html[data-pos-theme="forest"] .stock-card-list span,
html[data-pos-theme="forest"] .stock-card-list em,
html[data-pos-theme="forest"] .owner-card-head span,
html[data-pos-theme="forest"] .owner-report-section summary em,
html[data-pos-theme="forest"] .owner-kpi-grid span,
html[data-pos-theme="forest"] .owner-kpi-grid small,
html[data-pos-theme="forest"] .ops-card p,
html[data-pos-theme="forest"] .manual-picker-head p,
html[data-pos-theme="forest"] .manual-picker-head span,
html[data-pos-theme="forest"] .manual-table-card span,
html[data-pos-theme="forest"] .manual-table-card p,
html[data-pos-theme="forest"] .mobile-topbar span,
html[data-pos-theme="forest"] .menu-info p,
html[data-pos-theme="forest"] .notification-line p,
html[data-pos-theme="forest"] .session-order-line p,
html[data-pos-theme="forest"] .crextio-form-grid label small,
html[data-pos-theme="forest"] .permission-table small,
html[data-pos-theme="forest"] .help-block {
    color: #dedede !important;
}

/* THEME Dark Mode - TEXT COLOR - primary buttons, active nav, badges */
html[data-pos-theme="forest"] .crextio-nav a.active,
html[data-pos-theme="forest"] .crextio-master-menu a.active,
html[data-pos-theme="forest"] .role-list a.active,
html[data-pos-theme="forest"] .pos-btn.primary,
html[data-pos-theme="forest"] .crextio-primary-btn,
html[data-pos-theme="forest"] .round-add,
html[data-pos-theme="forest"] .cart-bar span:last-child,
html[data-pos-theme="forest"] .cashier-board .ops-actions button:not(.light),
html[data-pos-theme="forest"] .bill-pay-now,
html[data-pos-theme="forest"] .cashier-payment-form button,
html[data-pos-theme="forest"] .bill-payment-form button,
html[data-pos-theme="forest"] .login-submit,
html[data-pos-theme="forest"] .cashier-board .ops-column h3 b,
html[data-pos-theme="forest"] .manual-table-card b,
html[data-pos-theme="forest"] .ops-card-head b,
html[data-pos-theme="forest"] .ops-meta span,
html[data-pos-theme="forest"] .status-icon,
html[data-pos-theme="forest"] .table-pill,
html[data-pos-theme="forest"] .notification-dot,
html[data-pos-theme="forest"] .install-button,
html[data-pos-theme="forest"] .owner-report-section summary > strong {
    color: #252525 !important;
    border-color: rgba(255, 255, 255, .55) !important;
    background: #ffffff !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .22) !important;
}

/* THEME Dark Mode - TEXT COLOR - neutral buttons and category tabs */
html[data-pos-theme="forest"] .crextio-master-menu a,
html[data-pos-theme="forest"] .cashier-board .ops-actions button.light,
html[data-pos-theme="forest"] .pos-btn.light,
html[data-pos-theme="forest"] .small-action,
html[data-pos-theme="forest"] .icon-button,
html[data-pos-theme="forest"] .qty-row button,
html[data-pos-theme="forest"] .cashier-bill-close,
html[data-pos-theme="forest"] .cashier-nav-action,
html[data-pos-theme="forest"] .category-tabs button,
html[data-pos-theme="forest"] .pos-theme-menu button {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .16) !important;
    background: #444444 !important;
}

/* THEME Dark Mode - TEXT COLOR - form inputs and placeholders */
html[data-pos-theme="forest"] input,
html[data-pos-theme="forest"] select,
html[data-pos-theme="forest"] textarea,
html[data-pos-theme="forest"] .form-control,
html[data-pos-theme="forest"] .input-group-addon,
html[data-pos-theme="forest"] .login-input,
html[data-pos-theme="forest"] .login-input input,
html[data-pos-theme="forest"] .cashier-payment-form select,
html[data-pos-theme="forest"] .cashier-payment-form input,
html[data-pos-theme="forest"] .bill-payment-form select,
html[data-pos-theme="forest"] .bill-payment-form input {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .18) !important;
    background: #2f2f2f !important;
}

html[data-pos-theme="forest"] input::placeholder,
html[data-pos-theme="forest"] textarea::placeholder,
html[data-pos-theme="forest"] .form-control::placeholder,
html[data-pos-theme="forest"] .login-input input::placeholder {
    color: rgba(255, 255, 255, .68) !important;
}

/* THEME Dark Mode - TEXT COLOR - light-background exceptions */
html[data-pos-theme="forest"] .swal2-popup,
html[data-pos-theme="forest"] .swal2-title,
html[data-pos-theme="forest"] .swal2-html-container,
html[data-pos-theme="forest"] .receipt-preview,
html[data-pos-theme="forest"] .print-area,
html[data-pos-theme="forest"] .kot-print {
    color: #252525 !important;
}

/* THEME Dark Mode - TEXT COLOR - customer ETA box */
html[data-pos-theme="forest"] .eta-box,
html[data-pos-theme="forest"] .eta-box span,
html[data-pos-theme="forest"] .eta-box strong {
    color: #ffffff !important;
    background: #363636 !important;
}

/* THEME Dark Mode - TEXT COLOR - select dropdown options */
html[data-pos-theme="forest"] option,
html[data-pos-theme="forest"] select option {
    color: #ffffff !important;
    background: #2f2f2f !important;
}

/* THEME Light Mode - color variables and solid background */
html[data-pos-theme="gradient"] {
    --pos-red: #2c2c2c;
    --pos-red-dark: #1f1f1f;
    --pos-orange: #2c2c2c;
    --pos-cream: #ededea;
    --pos-ink: #252525;
    --pos-muted: #626262;
    --pos-line: rgba(44, 44, 44, .12);
    --abyss: #ededea;
    --abyss-deep: #ededea;
    --abyss-dark: #ffffff;
    --abyss-mid: #f7f7f3;
    --abyss-glow: #2c2c2c;
    --abyss-mint: #2c2c2c;
    --abyss-card: #ffffff;
    --abyss-border: rgba(44, 44, 44, .12);
    --abyss-shadow: 0 18px 44px rgba(44, 44, 44, .12);
    --abyss-page-bg: #ededea;
    --abyss-panel-bg: #ffffff;
}

/* THEME Light Mode - page background and default page text */
html[data-pos-theme="gradient"] body,
html[data-pos-theme="gradient"] .customer-body,
html[data-pos-theme="gradient"] .crextio-page,
html[data-pos-theme="gradient"] .purchase-page,
html[data-pos-theme="gradient"] .owner-exec-page,
html[data-pos-theme="gradient"] .cashier-app-page,
html[data-pos-theme="gradient"] .ostos-login-page,
html[data-pos-theme="gradient"] .pos-page {
    color: #252525 !important;
    background: #ededea !important;
}

/* THEME Light Mode - panels/cards/table surfaces */
html[data-pos-theme="gradient"] .customer-shell,
html[data-pos-theme="gradient"] .crextio-shell,
html[data-pos-theme="gradient"] .purchase-shell,
html[data-pos-theme="gradient"] .owner-exec-shell,
html[data-pos-theme="gradient"] .cashier-app-shell,
html[data-pos-theme="gradient"] .ostos-login-card,
html[data-pos-theme="gradient"] .cashier-bill-screen,
html[data-pos-theme="gradient"] .cashier-manual-screen,
html[data-pos-theme="gradient"] .crextio-topbar,
html[data-pos-theme="gradient"] .owner-exec-topbar,
html[data-pos-theme="gradient"] .crextio-summary article,
html[data-pos-theme="gradient"] .feature-disabled-note,
html[data-pos-theme="gradient"] .purchase-hero,
html[data-pos-theme="gradient"] .purchase-metrics article,
html[data-pos-theme="gradient"] .purchase-form-card,
html[data-pos-theme="gradient"] .purchase-history-card,
html[data-pos-theme="gradient"] .purchase-table-card,
html[data-pos-theme="gradient"] .quick-line,
html[data-pos-theme="gradient"] .quick-line-result,
html[data-pos-theme="gradient"] .stock-card-list div,
html[data-pos-theme="gradient"] .setup-panel,
html[data-pos-theme="gradient"] .owner-kpi-grid article,
html[data-pos-theme="gradient"] .owner-card,
html[data-pos-theme="gradient"] .owner-report-section,
html[data-pos-theme="gradient"] .owner-summary-list div,
html[data-pos-theme="gradient"] .owner-live-list div,
html[data-pos-theme="gradient"] .owner-insights > div:not(.owner-card-head),
html[data-pos-theme="gradient"] .crextio-list div,
html[data-pos-theme="gradient"] .crextio-action-grid a,
html[data-pos-theme="gradient"] .role-list a,
html[data-pos-theme="gradient"] .permission-panel,
html[data-pos-theme="gradient"] .cashier-board .ops-column,
html[data-pos-theme="gradient"] .cashier-board .ops-card,
html[data-pos-theme="gradient"] .manual-table-picker,
html[data-pos-theme="gradient"] .manual-frame-head,
html[data-pos-theme="gradient"] .manual-table-card,
html[data-pos-theme="gradient"] .empty-state,
html[data-pos-theme="gradient"] .menu-card,
html[data-pos-theme="gradient"] .customer-session-card,
html[data-pos-theme="gradient"] .sheet-panel,
html[data-pos-theme="gradient"] .status-card,
html[data-pos-theme="gradient"] .option-line,
html[data-pos-theme="gradient"] .bill-item,
html[data-pos-theme="gradient"] .bill-pay-row,
html[data-pos-theme="gradient"] .ops-eta-form,
html[data-pos-theme="gradient"] .pos-theme-toggle,
html[data-pos-theme="gradient"] .pos-theme-menu,
html[data-pos-theme="gradient"] .modal-content,
html[data-pos-theme="gradient"] .panel,
html[data-pos-theme="gradient"] .box,
html[data-pos-theme="gradient"] .table,
html[data-pos-theme="gradient"] .dataTables_wrapper {
    color: #252525 !important;
    border-color: rgba(44, 44, 44, .12) !important;
    background: #ffffff !important;
    box-shadow: 0 20px 50px rgba(44, 44, 44, .10) !important;
}

/* THEME Light Mode - TEXT COLOR - main titles and important values */
html[data-pos-theme="gradient"] h1,
html[data-pos-theme="gradient"] h2,
html[data-pos-theme="gradient"] h3,
html[data-pos-theme="gradient"] h4,
html[data-pos-theme="gradient"] h5,
html[data-pos-theme="gradient"] h6,
html[data-pos-theme="gradient"] .crextio-brand,
html[data-pos-theme="gradient"] .crextio-nav a,
html[data-pos-theme="gradient"] .crextio-actions a,
html[data-pos-theme="gradient"] .crextio-hero h1,
html[data-pos-theme="gradient"] .purchase-hero h1,
html[data-pos-theme="gradient"] .purchase-metrics strong,
html[data-pos-theme="gradient"] .purchase-card-head h2,
html[data-pos-theme="gradient"] .quick-line-result strong,
html[data-pos-theme="gradient"] .stock-card-list b,
html[data-pos-theme="gradient"] .cashier-hero h1,
html[data-pos-theme="gradient"] .owner-exec-hero h1,
html[data-pos-theme="gradient"] .mobile-topbar strong,
html[data-pos-theme="gradient"] .menu-title h2,
html[data-pos-theme="gradient"] .menu-name,
html[data-pos-theme="gradient"] .status-card h1,
html[data-pos-theme="gradient"] .status-card h2,
html[data-pos-theme="gradient"] .ostos-login-card h1,
html[data-pos-theme="gradient"] .pos-page-header h2,
html[data-pos-theme="gradient"] .setup-panel h3,
html[data-pos-theme="gradient"] .owner-card h2,
html[data-pos-theme="gradient"] .owner-card h3,
html[data-pos-theme="gradient"] .owner-card strong,
html[data-pos-theme="gradient"] .owner-kpi-grid strong,
html[data-pos-theme="gradient"] .crextio-summary strong,
html[data-pos-theme="gradient"] .crextio-list span,
html[data-pos-theme="gradient"] .crextio-list strong,
html[data-pos-theme="gradient"] .permission-table th,
html[data-pos-theme="gradient"] .permission-table td,
html[data-pos-theme="gradient"] .cashier-board .ops-column h3,
html[data-pos-theme="gradient"] .cashier-board .ops-card strong,
html[data-pos-theme="gradient"] .ops-card-head h4,
html[data-pos-theme="gradient"] .feature-disabled-note strong,
html[data-pos-theme="gradient"] .manual-picker-head h2,
html[data-pos-theme="gradient"] .manual-table-card h3,
html[data-pos-theme="gradient"] .manual-table-card strong,
html[data-pos-theme="gradient"] .manual-frame-head strong,
html[data-pos-theme="gradient"] .bill-total-card strong,
html[data-pos-theme="gradient"] .bill-pay-row strong,
html[data-pos-theme="gradient"] .pos-theme-menu button {
    color: #252525 !important;
}

/* THEME Light Mode - TEXT COLOR - secondary labels/descriptions */
html[data-pos-theme="gradient"] p,
html[data-pos-theme="gradient"] small,
html[data-pos-theme="gradient"] label,
html[data-pos-theme="gradient"] .muted-small,
html[data-pos-theme="gradient"] .crextio-hero p,
html[data-pos-theme="gradient"] .cashier-hero p,
html[data-pos-theme="gradient"] .owner-exec-hero p,
html[data-pos-theme="gradient"] .crextio-summary span,
html[data-pos-theme="gradient"] .crextio-summary small,
html[data-pos-theme="gradient"] .feature-disabled-note span,
html[data-pos-theme="gradient"] .purchase-hero p,
html[data-pos-theme="gradient"] .purchase-hero span,
html[data-pos-theme="gradient"] .purchase-metrics span,
html[data-pos-theme="gradient"] .purchase-card-head span,
html[data-pos-theme="gradient"] .purchase-form-grid label,
html[data-pos-theme="gradient"] .quick-line label,
html[data-pos-theme="gradient"] .quick-line-result span,
html[data-pos-theme="gradient"] .quick-line-result em,
html[data-pos-theme="gradient"] .stock-card-list span,
html[data-pos-theme="gradient"] .stock-card-list em,
html[data-pos-theme="gradient"] .owner-card-head span,
html[data-pos-theme="gradient"] .owner-report-section summary em,
html[data-pos-theme="gradient"] .owner-kpi-grid span,
html[data-pos-theme="gradient"] .owner-kpi-grid small,
html[data-pos-theme="gradient"] .ops-card p,
html[data-pos-theme="gradient"] .manual-picker-head p,
html[data-pos-theme="gradient"] .manual-picker-head span,
html[data-pos-theme="gradient"] .manual-table-card span,
html[data-pos-theme="gradient"] .manual-table-card p,
html[data-pos-theme="gradient"] .mobile-topbar span,
html[data-pos-theme="gradient"] .menu-info p,
html[data-pos-theme="gradient"] .notification-line p,
html[data-pos-theme="gradient"] .session-order-line p,
html[data-pos-theme="gradient"] .crextio-form-grid label small,
html[data-pos-theme="gradient"] .permission-table small,
html[data-pos-theme="gradient"] .help-block {
    color: #626262 !important;
}

/* THEME Light Mode - TEXT COLOR - primary buttons, active nav, badges */
html[data-pos-theme="gradient"] .crextio-nav a.active,
html[data-pos-theme="gradient"] .crextio-master-menu a.active,
html[data-pos-theme="gradient"] .role-list a.active,
html[data-pos-theme="gradient"] .pos-btn.primary,
html[data-pos-theme="gradient"] .crextio-primary-btn,
html[data-pos-theme="gradient"] .round-add,
html[data-pos-theme="gradient"] .cart-bar span:last-child,
html[data-pos-theme="gradient"] .cashier-board .ops-actions button:not(.light),
html[data-pos-theme="gradient"] .bill-pay-now,
html[data-pos-theme="gradient"] .cashier-payment-form button,
html[data-pos-theme="gradient"] .bill-payment-form button,
html[data-pos-theme="gradient"] .login-submit,
html[data-pos-theme="gradient"] .cashier-board .ops-column h3 b,
html[data-pos-theme="gradient"] .manual-table-card b,
html[data-pos-theme="gradient"] .ops-card-head b,
html[data-pos-theme="gradient"] .ops-meta span,
html[data-pos-theme="gradient"] .status-icon,
html[data-pos-theme="gradient"] .table-pill,
html[data-pos-theme="gradient"] .notification-dot,
html[data-pos-theme="gradient"] .install-button,
html[data-pos-theme="gradient"] .owner-report-section summary > strong {
    color: #ffffff !important;
    border-color: rgba(44, 44, 44, .16) !important;
    background: #2c2c2c !important;
    box-shadow: 0 16px 38px rgba(44, 44, 44, .18) !important;
}

/* THEME Light Mode - TEXT COLOR - neutral buttons and category tabs */
html[data-pos-theme="gradient"] .crextio-master-menu a,
html[data-pos-theme="gradient"] .cashier-board .ops-actions button.light,
html[data-pos-theme="gradient"] .pos-btn.light,
html[data-pos-theme="gradient"] .small-action,
html[data-pos-theme="gradient"] .icon-button,
html[data-pos-theme="gradient"] .qty-row button,
html[data-pos-theme="gradient"] .cashier-bill-close,
html[data-pos-theme="gradient"] .cashier-nav-action,
html[data-pos-theme="gradient"] .category-tabs button,
html[data-pos-theme="gradient"] .pos-theme-menu button {
    color: #252525 !important;
    border-color: rgba(44, 44, 44, .12) !important;
    background: #f6f6f1 !important;
}

/* THEME Light Mode - TEXT COLOR - form inputs and placeholders */
html[data-pos-theme="gradient"] input,
html[data-pos-theme="gradient"] select,
html[data-pos-theme="gradient"] textarea,
html[data-pos-theme="gradient"] .form-control,
html[data-pos-theme="gradient"] .input-group-addon,
html[data-pos-theme="gradient"] .login-input,
html[data-pos-theme="gradient"] .login-input input,
html[data-pos-theme="gradient"] .cashier-payment-form select,
html[data-pos-theme="gradient"] .cashier-payment-form input,
html[data-pos-theme="gradient"] .bill-payment-form select,
html[data-pos-theme="gradient"] .bill-payment-form input {
    color: #252525 !important;
    border-color: rgba(44, 44, 44, .14) !important;
    background: #ffffff !important;
}

html[data-pos-theme="gradient"] input::placeholder,
html[data-pos-theme="gradient"] textarea::placeholder,
html[data-pos-theme="gradient"] .form-control::placeholder,
html[data-pos-theme="gradient"] .login-input input::placeholder {
    color: rgba(37, 37, 37, .48) !important;
}

/* THEME Light Mode - TEXT COLOR - dark-background exceptions */
html[data-pos-theme="gradient"] .cashier-board .ops-actions button:not(.light) *,
html[data-pos-theme="gradient"] .pos-btn.primary *,
html[data-pos-theme="gradient"] .login-submit *,
html[data-pos-theme="gradient"] .bill-pay-now * {
    color: #ffffff !important;
}

/* THEME Light Mode - TEXT COLOR - customer ETA box */
html[data-pos-theme="gradient"] .eta-box,
html[data-pos-theme="gradient"] .eta-box span,
html[data-pos-theme="gradient"] .eta-box strong {
    color: #252525 !important;
    background: #ffffff !important;
}

/* THEME Light Mode - TEXT COLOR - select dropdown options */
html[data-pos-theme="gradient"] option,
html[data-pos-theme="gradient"] select option {
    color: #252525 !important;
    background: #ffffff !important;
}

/* THEME Crimson Velvet - color variables and solid background */
html[data-pos-theme="crimson"] {
    --pos-red: #a21321;
    --pos-red-dark: #7e0f19;
    --pos-orange: #ffffff;
    --pos-cream: #fff3f4;
    --pos-ink: #ffffff;
    --pos-muted: #ffd8dc;
    --pos-line: rgba(255, 255, 255, .18);
    --abyss: #a21321;
    --abyss-deep: #a21321;
    --abyss-dark: #7e0f19;
    --abyss-mid: #b82432;
    --abyss-glow: #ffffff;
    --abyss-mint: #fff3f4;
    --abyss-card: #8f111d;
    --abyss-border: rgba(255, 255, 255, .18);
    --abyss-shadow: 0 18px 44px rgba(52, 4, 10, .28);
    --abyss-page-bg: #a21321;
    --abyss-panel-bg: #8f111d;
}

/* THEME Crimson Velvet - page background and default page text */
html[data-pos-theme="crimson"] body,
html[data-pos-theme="crimson"] .customer-body,
html[data-pos-theme="crimson"] .crextio-page,
html[data-pos-theme="crimson"] .purchase-page,
html[data-pos-theme="crimson"] .owner-exec-page,
html[data-pos-theme="crimson"] .cashier-app-page,
html[data-pos-theme="crimson"] .ostos-login-page,
html[data-pos-theme="crimson"] .pos-page {
    color: #ffffff !important;
    background: #a21321 !important;
}

/* THEME Crimson Velvet - panels/cards/table surfaces */
html[data-pos-theme="crimson"] .customer-shell,
html[data-pos-theme="crimson"] .crextio-shell,
html[data-pos-theme="crimson"] .purchase-shell,
html[data-pos-theme="crimson"] .owner-exec-shell,
html[data-pos-theme="crimson"] .cashier-app-shell,
html[data-pos-theme="crimson"] .ostos-login-card,
html[data-pos-theme="crimson"] .cashier-bill-screen,
html[data-pos-theme="crimson"] .cashier-manual-screen,
html[data-pos-theme="crimson"] .crextio-topbar,
html[data-pos-theme="crimson"] .owner-exec-topbar,
html[data-pos-theme="crimson"] .crextio-summary article,
html[data-pos-theme="crimson"] .feature-disabled-note,
html[data-pos-theme="crimson"] .purchase-hero,
html[data-pos-theme="crimson"] .purchase-metrics article,
html[data-pos-theme="crimson"] .purchase-form-card,
html[data-pos-theme="crimson"] .purchase-history-card,
html[data-pos-theme="crimson"] .purchase-table-card,
html[data-pos-theme="crimson"] .quick-line,
html[data-pos-theme="crimson"] .quick-line-result,
html[data-pos-theme="crimson"] .stock-card-list div,
html[data-pos-theme="crimson"] .setup-panel,
html[data-pos-theme="crimson"] .owner-kpi-grid article,
html[data-pos-theme="crimson"] .owner-card,
html[data-pos-theme="crimson"] .owner-report-section,
html[data-pos-theme="crimson"] .owner-summary-list div,
html[data-pos-theme="crimson"] .owner-live-list div,
html[data-pos-theme="crimson"] .owner-insights > div:not(.owner-card-head),
html[data-pos-theme="crimson"] .crextio-list div,
html[data-pos-theme="crimson"] .crextio-action-grid a,
html[data-pos-theme="crimson"] .role-list a,
html[data-pos-theme="crimson"] .permission-panel,
html[data-pos-theme="crimson"] .cashier-board .ops-column,
html[data-pos-theme="crimson"] .cashier-board .ops-card,
html[data-pos-theme="crimson"] .manual-table-picker,
html[data-pos-theme="crimson"] .manual-frame-head,
html[data-pos-theme="crimson"] .manual-table-card,
html[data-pos-theme="crimson"] .empty-state,
html[data-pos-theme="crimson"] .menu-card,
html[data-pos-theme="crimson"] .customer-session-card,
html[data-pos-theme="crimson"] .sheet-panel,
html[data-pos-theme="crimson"] .status-card,
html[data-pos-theme="crimson"] .option-line,
html[data-pos-theme="crimson"] .bill-item,
html[data-pos-theme="crimson"] .bill-pay-row,
html[data-pos-theme="crimson"] .ops-eta-form,
html[data-pos-theme="crimson"] .pos-theme-toggle,
html[data-pos-theme="crimson"] .pos-theme-menu,
html[data-pos-theme="crimson"] .modal-content,
html[data-pos-theme="crimson"] .panel,
html[data-pos-theme="crimson"] .box,
html[data-pos-theme="crimson"] .table,
html[data-pos-theme="crimson"] .dataTables_wrapper {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .18) !important;
    background: #8f111d !important;
    box-shadow: 0 20px 50px rgba(52, 4, 10, .22) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - main titles and important values */
html[data-pos-theme="crimson"] h1,
html[data-pos-theme="crimson"] h2,
html[data-pos-theme="crimson"] h3,
html[data-pos-theme="crimson"] h4,
html[data-pos-theme="crimson"] h5,
html[data-pos-theme="crimson"] h6,
html[data-pos-theme="crimson"] .crextio-brand,
html[data-pos-theme="crimson"] .crextio-nav a,
html[data-pos-theme="crimson"] .crextio-actions a,
html[data-pos-theme="crimson"] .crextio-hero h1,
html[data-pos-theme="crimson"] .purchase-hero h1,
html[data-pos-theme="crimson"] .purchase-metrics strong,
html[data-pos-theme="crimson"] .purchase-card-head h2,
html[data-pos-theme="crimson"] .quick-line-result strong,
html[data-pos-theme="crimson"] .stock-card-list b,
html[data-pos-theme="crimson"] .cashier-hero h1,
html[data-pos-theme="crimson"] .owner-exec-hero h1,
html[data-pos-theme="crimson"] .mobile-topbar strong,
html[data-pos-theme="crimson"] .menu-title h2,
html[data-pos-theme="crimson"] .menu-name,
html[data-pos-theme="crimson"] .status-card h1,
html[data-pos-theme="crimson"] .status-card h2,
html[data-pos-theme="crimson"] .ostos-login-card h1,
html[data-pos-theme="crimson"] .pos-page-header h2,
html[data-pos-theme="crimson"] .setup-panel h3,
html[data-pos-theme="crimson"] .owner-card h2,
html[data-pos-theme="crimson"] .owner-card h3,
html[data-pos-theme="crimson"] .owner-card strong,
html[data-pos-theme="crimson"] .owner-kpi-grid strong,
html[data-pos-theme="crimson"] .crextio-summary strong,
html[data-pos-theme="crimson"] .crextio-list span,
html[data-pos-theme="crimson"] .crextio-list strong,
html[data-pos-theme="crimson"] .permission-table th,
html[data-pos-theme="crimson"] .permission-table td,
html[data-pos-theme="crimson"] .cashier-board .ops-column h3,
html[data-pos-theme="crimson"] .cashier-board .ops-card strong,
html[data-pos-theme="crimson"] .ops-card-head h4,
html[data-pos-theme="crimson"] .feature-disabled-note strong,
html[data-pos-theme="crimson"] .manual-picker-head h2,
html[data-pos-theme="crimson"] .manual-table-card h3,
html[data-pos-theme="crimson"] .manual-table-card strong,
html[data-pos-theme="crimson"] .manual-frame-head strong,
html[data-pos-theme="crimson"] .bill-total-card strong,
html[data-pos-theme="crimson"] .bill-pay-row strong,
html[data-pos-theme="crimson"] .pos-theme-menu button {
    color: #ffffff !important;
}

/* THEME Crimson Velvet - TEXT COLOR - secondary labels/descriptions */
html[data-pos-theme="crimson"] p,
html[data-pos-theme="crimson"] small,
html[data-pos-theme="crimson"] label,
html[data-pos-theme="crimson"] .muted-small,
html[data-pos-theme="crimson"] .crextio-hero p,
html[data-pos-theme="crimson"] .cashier-hero p,
html[data-pos-theme="crimson"] .owner-exec-hero p,
html[data-pos-theme="crimson"] .crextio-summary span,
html[data-pos-theme="crimson"] .crextio-summary small,
html[data-pos-theme="crimson"] .feature-disabled-note span,
html[data-pos-theme="crimson"] .purchase-hero p,
html[data-pos-theme="crimson"] .purchase-hero span,
html[data-pos-theme="crimson"] .purchase-metrics span,
html[data-pos-theme="crimson"] .purchase-card-head span,
html[data-pos-theme="crimson"] .purchase-form-grid label,
html[data-pos-theme="crimson"] .quick-line label,
html[data-pos-theme="crimson"] .quick-line-result span,
html[data-pos-theme="crimson"] .quick-line-result em,
html[data-pos-theme="crimson"] .stock-card-list span,
html[data-pos-theme="crimson"] .stock-card-list em,
html[data-pos-theme="crimson"] .owner-card-head span,
html[data-pos-theme="crimson"] .owner-report-section summary em,
html[data-pos-theme="crimson"] .owner-kpi-grid span,
html[data-pos-theme="crimson"] .owner-kpi-grid small,
html[data-pos-theme="crimson"] .ops-card p,
html[data-pos-theme="crimson"] .manual-picker-head p,
html[data-pos-theme="crimson"] .manual-picker-head span,
html[data-pos-theme="crimson"] .manual-table-card span,
html[data-pos-theme="crimson"] .manual-table-card p,
html[data-pos-theme="crimson"] .mobile-topbar span,
html[data-pos-theme="crimson"] .menu-info p,
html[data-pos-theme="crimson"] .notification-line p,
html[data-pos-theme="crimson"] .session-order-line p,
html[data-pos-theme="crimson"] .crextio-form-grid label small,
html[data-pos-theme="crimson"] .permission-table small,
html[data-pos-theme="crimson"] .help-block {
    color: #ffd8dc !important;
}

/* THEME Crimson Velvet - TEXT COLOR - primary buttons, active nav, badges */
html[data-pos-theme="crimson"] .crextio-nav a.active,
html[data-pos-theme="crimson"] .crextio-master-menu a.active,
html[data-pos-theme="crimson"] .role-list a.active,
html[data-pos-theme="crimson"] .pos-btn.primary,
html[data-pos-theme="crimson"] .crextio-primary-btn,
html[data-pos-theme="crimson"] .round-add,
html[data-pos-theme="crimson"] .cart-bar span:last-child,
html[data-pos-theme="crimson"] .cashier-board .ops-actions button:not(.light),
html[data-pos-theme="crimson"] .bill-pay-now,
html[data-pos-theme="crimson"] .cashier-payment-form button,
html[data-pos-theme="crimson"] .bill-payment-form button,
html[data-pos-theme="crimson"] .login-submit,
html[data-pos-theme="crimson"] .cashier-board .ops-column h3 b,
html[data-pos-theme="crimson"] .manual-table-card b,
html[data-pos-theme="crimson"] .ops-card-head b,
html[data-pos-theme="crimson"] .ops-meta span,
html[data-pos-theme="crimson"] .status-icon,
html[data-pos-theme="crimson"] .table-pill,
html[data-pos-theme="crimson"] .notification-dot,
html[data-pos-theme="crimson"] .install-button,
html[data-pos-theme="crimson"] .owner-report-section summary > strong {
    color: #6b0f18 !important;
    border-color: rgba(255, 255, 255, .42) !important;
    background: #ffffff !important;
    box-shadow: 0 16px 38px rgba(52, 4, 10, .24) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - neutral buttons and category tabs */
html[data-pos-theme="crimson"] .crextio-master-menu a,
html[data-pos-theme="crimson"] .cashier-board .ops-actions button.light,
html[data-pos-theme="crimson"] .pos-btn.light,
html[data-pos-theme="crimson"] .small-action,
html[data-pos-theme="crimson"] .icon-button,
html[data-pos-theme="crimson"] .qty-row button,
html[data-pos-theme="crimson"] .cashier-bill-close,
html[data-pos-theme="crimson"] .cashier-nav-action,
html[data-pos-theme="crimson"] .category-tabs button,
html[data-pos-theme="crimson"] .pos-theme-menu button {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .18) !important;
    background: #7e0f19 !important;
}

/* THEME Crimson Velvet - TEXT COLOR - form inputs and placeholders */
html[data-pos-theme="crimson"] input,
html[data-pos-theme="crimson"] select,
html[data-pos-theme="crimson"] textarea,
html[data-pos-theme="crimson"] .form-control,
html[data-pos-theme="crimson"] .input-group-addon,
html[data-pos-theme="crimson"] .login-input,
html[data-pos-theme="crimson"] .login-input input,
html[data-pos-theme="crimson"] .cashier-payment-form select,
html[data-pos-theme="crimson"] .cashier-payment-form input,
html[data-pos-theme="crimson"] .bill-payment-form select,
html[data-pos-theme="crimson"] .bill-payment-form input {
    color: #2c0f12 !important;
    border-color: rgba(255, 255, 255, .24) !important;
    background: #ffffff !important;
}

html[data-pos-theme="crimson"] input::placeholder,
html[data-pos-theme="crimson"] textarea::placeholder,
html[data-pos-theme="crimson"] .form-control::placeholder,
html[data-pos-theme="crimson"] .login-input input::placeholder {
    color: rgba(44, 15, 18, .48) !important;
}

/* THEME Crimson Velvet - TEXT COLOR - dark-background exceptions */
html[data-pos-theme="crimson"] .pos-theme-menu,
html[data-pos-theme="crimson"] .cashier-board .ops-actions button.light *,
html[data-pos-theme="crimson"] .pos-btn.light *,
html[data-pos-theme="crimson"] .category-tabs button *,
html[data-pos-theme="crimson"] .cashier-bill-close *,
html[data-pos-theme="crimson"] .cashier-nav-action * {
    color: #ffffff !important;
}

/* THEME Crimson Velvet - TEXT COLOR - light-background exceptions */
html[data-pos-theme="crimson"] .swal2-popup,
html[data-pos-theme="crimson"] .swal2-title,
html[data-pos-theme="crimson"] .swal2-html-container,
html[data-pos-theme="crimson"] .receipt-preview,
html[data-pos-theme="crimson"] .print-area,
html[data-pos-theme="crimson"] .kot-print {
    color: #2c0f12 !important;
}

/* THEME Crimson Velvet - TEXT COLOR - customer ETA box */
html[data-pos-theme="crimson"] .eta-box,
html[data-pos-theme="crimson"] .eta-box span,
html[data-pos-theme="crimson"] .eta-box strong {
    color: #ffffff !important;
    background: #8f111d !important;
}

/* THEME Crimson Velvet - TEXT COLOR - select dropdown options */
html[data-pos-theme="crimson"] option,
html[data-pos-theme="crimson"] select option {
    color: #2c0f12 !important;
    background: #ffffff !important;
}

/* THEME Light Mode - TEXT COLOR - Report colored rows / Kitchen Performance rows */
html[data-pos-theme="gradient"] .crextio-table td,
html[data-pos-theme="gradient"] .crextio-table tbody tr:hover td,
html[data-pos-theme="gradient"] .crextio-table tbody tr.selected-row td,
html[data-pos-theme="gradient"] .owner-table td,
html[data-pos-theme="gradient"] .owner-table tbody tr:hover td,
html[data-pos-theme="gradient"] .owner-summary-list div,
html[data-pos-theme="gradient"] .owner-summary-list div.total,
html[data-pos-theme="gradient"] .owner-live-list div,
html[data-pos-theme="gradient"] .owner-mini-metrics span,
html[data-pos-theme="gradient"] .crextio-filter-row button {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .08) !important;
    background: #f3f3f3 !important;
}

/* THEME Light Mode - TEXT COLOR - Report colored row labels and values */
html[data-pos-theme="gradient"] .crextio-table td,
html[data-pos-theme="gradient"] .crextio-table td strong,
html[data-pos-theme="gradient"] .owner-table td,
html[data-pos-theme="gradient"] .owner-table td strong,
html[data-pos-theme="gradient"] .owner-summary-list div span,
html[data-pos-theme="gradient"] .owner-summary-list div strong,
html[data-pos-theme="gradient"] .owner-live-list div strong,
html[data-pos-theme="gradient"] .owner-live-list div em,
html[data-pos-theme="gradient"] .owner-mini-metrics span,
html[data-pos-theme="gradient"] .owner-mini-metrics b,
html[data-pos-theme="gradient"] .crextio-filter-row button {
    color: #000000 !important;
}

/* THEME Light Mode - TEXT COLOR - Report colored status badges */
html[data-pos-theme="gradient"] .crextio-status,
html[data-pos-theme="gradient"] .crextio-status.green,
html[data-pos-theme="gradient"] .crextio-status.gray {
    color: #000000 !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    background: #f3f3f3 !important;
}

/* THEME Light Mode - TEXT COLOR - Live Operation indicator dot */
html[data-pos-theme="gradient"] .owner-live-list span {
    background: #f3f3f3 !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .08) !important;
}

/* THEME Light Mode - TEXT COLOR - requested light surfaces */
html[data-pos-theme="gradient"] .customer-shell,
html[data-pos-theme="gradient"] .crextio-shell,
html[data-pos-theme="gradient"] .purchase-shell,
html[data-pos-theme="gradient"] .owner-exec-shell,
html[data-pos-theme="gradient"] .cashier-app-shell,
html[data-pos-theme="gradient"] .ostos-login-card,
html[data-pos-theme="gradient"] .cashier-bill-screen,
html[data-pos-theme="gradient"] .cashier-manual-screen,
html[data-pos-theme="gradient"] .crextio-summary article,
html[data-pos-theme="gradient"] .feature-disabled-note,
html[data-pos-theme="gradient"] .purchase-hero,
html[data-pos-theme="gradient"] .purchase-metrics article,
html[data-pos-theme="gradient"] .purchase-form-card,
html[data-pos-theme="gradient"] .purchase-history-card,
html[data-pos-theme="gradient"] .purchase-table-card,
html[data-pos-theme="gradient"] .quick-line,
html[data-pos-theme="gradient"] .quick-line-result,
html[data-pos-theme="gradient"] .stock-card-list div,
html[data-pos-theme="gradient"] .setup-panel,
html[data-pos-theme="gradient"] .owner-kpi-grid article,
html[data-pos-theme="gradient"] .owner-card,
html[data-pos-theme="gradient"] .owner-report-section,
html[data-pos-theme="gradient"] .owner-summary-list div,
html[data-pos-theme="gradient"] .owner-summary-list div.total,
html[data-pos-theme="gradient"] .owner-live-list div,
html[data-pos-theme="gradient"] .owner-insights > div:not(.owner-card-head),
html[data-pos-theme="gradient"] .crextio-list div,
html[data-pos-theme="gradient"] .crextio-action-grid a,
html[data-pos-theme="gradient"] .role-list a,
html[data-pos-theme="gradient"] .permission-panel,
html[data-pos-theme="gradient"] .cashier-board .ops-column,
html[data-pos-theme="gradient"] .cashier-board .ops-card,
html[data-pos-theme="gradient"] .manual-table-picker,
html[data-pos-theme="gradient"] .manual-frame-head,
html[data-pos-theme="gradient"] .manual-table-card,
html[data-pos-theme="gradient"] .empty-state,
html[data-pos-theme="gradient"] .menu-card,
html[data-pos-theme="gradient"] .customer-session-card,
html[data-pos-theme="gradient"] .sheet-panel,
html[data-pos-theme="gradient"] .status-card,
html[data-pos-theme="gradient"] .option-line,
html[data-pos-theme="gradient"] .bill-item,
html[data-pos-theme="gradient"] .bill-pay-row,
html[data-pos-theme="gradient"] .ops-eta-form,
html[data-pos-theme="gradient"] .modal-content,
html[data-pos-theme="gradient"] .panel,
html[data-pos-theme="gradient"] .box,
html[data-pos-theme="gradient"] .table,
html[data-pos-theme="gradient"] .dataTables_wrapper,
html[data-pos-theme="gradient"] .crextio-table td,
html[data-pos-theme="gradient"] .owner-table td {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .08) !important;
    background: #f3f3f3 !important;
}

/* THEME Light Mode - TEXT COLOR - requested title color */
html[data-pos-theme="gradient"] h1,
html[data-pos-theme="gradient"] h2,
html[data-pos-theme="gradient"] h3,
html[data-pos-theme="gradient"] h4,
html[data-pos-theme="gradient"] h5,
html[data-pos-theme="gradient"] h6,
html[data-pos-theme="gradient"] .crextio-hero h1,
html[data-pos-theme="gradient"] .purchase-hero h1,
html[data-pos-theme="gradient"] .purchase-card-head h2,
html[data-pos-theme="gradient"] .cashier-hero h1,
html[data-pos-theme="gradient"] .owner-exec-hero h1,
html[data-pos-theme="gradient"] .menu-title h2,
html[data-pos-theme="gradient"] .status-card h1,
html[data-pos-theme="gradient"] .status-card h2,
html[data-pos-theme="gradient"] .ostos-login-card h1,
html[data-pos-theme="gradient"] .pos-page-header h2,
html[data-pos-theme="gradient"] .setup-panel h3,
html[data-pos-theme="gradient"] .owner-card h2,
html[data-pos-theme="gradient"] .owner-card h3,
html[data-pos-theme="gradient"] .ops-card-head h4,
html[data-pos-theme="gradient"] .feature-disabled-note strong,
html[data-pos-theme="gradient"] .manual-picker-head h2,
html[data-pos-theme="gradient"] .manual-table-card h3,
html[data-pos-theme="gradient"] .crextio-table-toolbar h2 {
    color: #ce8623 !important;
}

/* THEME Light Mode - TEXT COLOR - requested black body text */
html[data-pos-theme="gradient"] p,
html[data-pos-theme="gradient"] small,
html[data-pos-theme="gradient"] label,
html[data-pos-theme="gradient"] span,
html[data-pos-theme="gradient"] strong,
html[data-pos-theme="gradient"] em,
html[data-pos-theme="gradient"] b,
html[data-pos-theme="gradient"] td,
html[data-pos-theme="gradient"] th,
html[data-pos-theme="gradient"] .muted-small,
html[data-pos-theme="gradient"] .crextio-summary span,
html[data-pos-theme="gradient"] .crextio-summary small,
html[data-pos-theme="gradient"] .purchase-metrics span,
html[data-pos-theme="gradient"] .owner-kpi-grid span,
html[data-pos-theme="gradient"] .owner-kpi-grid small,
html[data-pos-theme="gradient"] .owner-card-head span,
html[data-pos-theme="gradient"] .owner-report-section summary em,
html[data-pos-theme="gradient"] .owner-live-list div strong,
html[data-pos-theme="gradient"] .owner-live-list div em,
html[data-pos-theme="gradient"] .mobile-topbar span,
html[data-pos-theme="gradient"] .menu-info p,
html[data-pos-theme="gradient"] .notification-line p,
html[data-pos-theme="gradient"] .session-order-line p,
html[data-pos-theme="gradient"] .permission-table small {
    color: #000000 !important;
}

/* THEME Light Mode - TEXT COLOR - menu, brand, logout, and action buttons */
html[data-pos-theme="gradient"] .crextio-brand,
html[data-pos-theme="gradient"] .crextio-nav,
html[data-pos-theme="gradient"] .crextio-nav a,
html[data-pos-theme="gradient"] .crextio-nav a.active,
html[data-pos-theme="gradient"] .crextio-actions a,
html[data-pos-theme="gradient"] .crextio-round-btn,
html[data-pos-theme="gradient"] .cashier-nav-action,
html[data-pos-theme="gradient"] .pos-btn.primary,
html[data-pos-theme="gradient"] .crextio-primary-btn,
html[data-pos-theme="gradient"] .round-add,
html[data-pos-theme="gradient"] .cart-bar span:last-child,
html[data-pos-theme="gradient"] .cashier-board .ops-actions button:not(.light),
html[data-pos-theme="gradient"] .bill-pay-now,
html[data-pos-theme="gradient"] .cashier-payment-form button,
html[data-pos-theme="gradient"] .bill-payment-form button,
html[data-pos-theme="gradient"] .login-submit,
html[data-pos-theme="gradient"] .install-button,
html[data-pos-theme="gradient"] .owner-report-section summary > strong {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .10) !important;
    background: #f3f3f3 !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .08) !important;
}

/* THEME Light Mode - TEXT COLOR - menu/action icons */
html[data-pos-theme="gradient"] .crextio-brand *,
html[data-pos-theme="gradient"] .crextio-nav a *,
html[data-pos-theme="gradient"] .crextio-actions a *,
html[data-pos-theme="gradient"] .crextio-round-btn *,
html[data-pos-theme="gradient"] .cashier-nav-action *,
html[data-pos-theme="gradient"] .pos-btn.primary *,
html[data-pos-theme="gradient"] .crextio-primary-btn *,
html[data-pos-theme="gradient"] .round-add *,
html[data-pos-theme="gradient"] .bill-pay-now *,
html[data-pos-theme="gradient"] .login-submit *,
html[data-pos-theme="gradient"] .install-button * {
    color: #000000 !important;
}

/* THEME Light Mode - TEXT COLOR - neutral controls on bright backgrounds */
html[data-pos-theme="gradient"] .pos-theme-toggle,
html[data-pos-theme="gradient"] .pos-theme-menu,
html[data-pos-theme="gradient"] .pos-theme-menu button,
html[data-pos-theme="gradient"] .cashier-board .ops-actions button.light,
html[data-pos-theme="gradient"] .pos-btn.light,
html[data-pos-theme="gradient"] .small-action,
html[data-pos-theme="gradient"] .icon-button,
html[data-pos-theme="gradient"] .qty-row button,
html[data-pos-theme="gradient"] .cashier-bill-close,
html[data-pos-theme="gradient"] .category-tabs button {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .08) !important;
    background: #f3f3f3 !important;
}

/* THEME SWITCHER - keep dropdown above cards/date widgets */
.crextio-topbar,
.owner-exec-topbar,
.cashier-topbar {
    overflow: visible !important;
}

.crextio-actions {
    position: relative;
    z-index: 2147482000;
}

.pos-theme-switcher,
.pos-theme-switcher.is-open {
    z-index: 2147483000 !important;
}

.pos-theme-menu {
    z-index: 2147483001 !important;
    position: fixed !important;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
}

.crextio-master-select,
.owner-exec-date,
.owner-exec-filterbar {
    position: relative;
    z-index: 1;
}

/* THEME SWITCHER - Dark Mode swatch must look dark */
.pos-theme-menu button[data-theme-option="forest"] .pos-theme-swatch {
    border-color: rgba(255, 255, 255, .26) !important;
    background: #2c2c2c !important;
    box-shadow: inset 0 0 0 4px #1f1f1f, 0 0 0 1px rgba(0, 0, 0, .2) !important;
}

/* THEME SWITCHER - Light Mode swatch must look bright */
.pos-theme-menu button[data-theme-option="gradient"] .pos-theme-swatch {
    border-color: rgba(0, 0, 0, .18) !important;
    background: #f3f3f3 !important;
    box-shadow: inset 0 0 0 4px #ffffff, 0 0 0 1px rgba(0, 0, 0, .08) !important;
}

/* TOPBAR ACTIONS - logout and adjacent utility buttons */
html[data-pos-theme] .crextio-actions > a,
html[data-pos-theme] .crextio-actions > .crextio-round-btn {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .10) !important;
    background: #ffd84e !important;
    box-shadow: 0 12px 28px rgba(255, 216, 78, .24) !important;
}

html[data-pos-theme] .crextio-actions > a *,
html[data-pos-theme] .crextio-actions > .crextio-round-btn * {
    color: #000000 !important;
}

html[data-pos-theme] .crextio-actions > a:hover,
html[data-pos-theme] .crextio-actions > .crextio-round-btn:hover {
    color: #000000 !important;
    background: #ffd84e !important;
    transform: translateY(-1px);
}

/* THEME Dark Mode - TEXT COLOR - Master Table QR white preview */
html[data-pos-theme="forest"] .crextio-qr-field,
html[data-pos-theme="forest"] .crextio-qr-field > span,
html[data-pos-theme="forest"] .crextio-qr-field small,
html[data-pos-theme="forest"] .crextio-qr-field button,
html[data-pos-theme="forest"] .crextio-qr-field em {
    color: #000000 !important;
    font-weight: 900 !important;
}

html[data-pos-theme="forest"] .crextio-qr-field {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, .10) !important;
}

/* THEME Dark Mode - TEXT COLOR - Master Data table rows and action icons */
html[data-pos-theme="forest"] .crextio-table td,
html[data-pos-theme="forest"] .crextio-table tbody tr:hover td {
    color: #000000 !important;
    background: #f3f3f3 !important;
    font-weight: 800 !important;
}

html[data-pos-theme="forest"] .crextio-table td strong,
html[data-pos-theme="forest"] .crextio-table td span,
html[data-pos-theme="forest"] .crextio-table td a:not(.danger) {
    color: #000000 !important;
}

html[data-pos-theme="forest"] .crextio-table tbody tr.selected-row td {
    color: #000000 !important;
    background: #ffd84e !important;
}

html[data-pos-theme="forest"] .crextio-row-actions a {
    color: #000000 !important;
    background: #ffd84e !important;
    border: 1px solid rgba(0, 0, 0, .10) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .16) !important;
}

html[data-pos-theme="forest"] .crextio-row-actions a i {
    color: #000000 !important;
}

html[data-pos-theme="forest"] .crextio-row-actions a.danger {
    color: #ffffff !important;
    background: #e53946 !important;
}

html[data-pos-theme="forest"] .crextio-row-actions a.danger i {
    color: #ffffff !important;
}

/* THEME Crimson Velvet - TEXT COLOR - Master Data table rows and action icons */
html[data-pos-theme="crimson"] .crextio-table td,
html[data-pos-theme="crimson"] .crextio-table tbody tr:hover td {
    color: #000000 !important;
    background: #f3f3f3 !important;
    font-weight: 800 !important;
}

html[data-pos-theme="crimson"] .crextio-table td strong,
html[data-pos-theme="crimson"] .crextio-table td span,
html[data-pos-theme="crimson"] .crextio-table td a:not(.danger) {
    color: #000000 !important;
}

html[data-pos-theme="crimson"] .crextio-table tbody tr.selected-row td {
    color: #000000 !important;
    background: #ffd84e !important;
}

html[data-pos-theme="crimson"] .crextio-row-actions a {
    color: #000000 !important;
    background: #ffd84e !important;
    border: 1px solid rgba(0, 0, 0, .10) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .20) !important;
}

html[data-pos-theme="crimson"] .crextio-row-actions a i {
    color: #000000 !important;
}

html[data-pos-theme="crimson"] .crextio-row-actions a.danger {
    color: #ffffff !important;
    background: #e53946 !important;
}

html[data-pos-theme="crimson"] .crextio-row-actions a.danger i {
    color: #ffffff !important;
}

/* TABLE PAGINATION - controls 10/25/50 for modern OSTOS tables */
.ostos-table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(31, 37, 41, .08);
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 12px 28px rgba(29, 37, 47, .06);
}

.ostos-page-size,
.ostos-page-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* TEXT COLOR - Table pagination label and info */
.ostos-page-size span,
.ostos-page-info,
.ostos-page-actions span {
    color: #30373d;
    font-size: 12px;
    font-weight: 900;
}

.ostos-page-size select {
    min-height: 34px;
    border: 1px solid rgba(31, 37, 41, .10);
    border-radius: 999px;
    padding: 0 28px 0 12px;
    color: #1f2529;
    background: #ffffff;
    font-size: 12px;
    font-weight: 900;
}

.ostos-page-actions button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(31, 37, 41, .10);
    border-radius: 50%;
    color: #1f2529;
    background: #ffd84e;
    transition: transform .18s ease, opacity .18s ease;
}

.ostos-page-actions button:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.ostos-page-actions button:not(:disabled):hover {
    transform: translateY(-1px);
}

html[data-pos-theme="forest"] .ostos-table-pagination {
    border-color: rgba(255, 255, 255, .16) !important;
    background: #363636 !important;
}

html[data-pos-theme="forest"] .ostos-page-size span,
html[data-pos-theme="forest"] .ostos-page-info,
html[data-pos-theme="forest"] .ostos-page-actions span {
    color: #ffffff !important;
}

html[data-pos-theme="forest"] .ostos-page-size select {
    color: #000000 !important;
    background: #ffffff !important;
}

html[data-pos-theme="gradient"] .ostos-table-pagination {
    border-color: rgba(0, 0, 0, .08) !important;
    background: #f3f3f3 !important;
}

html[data-pos-theme="gradient"] .ostos-page-size span,
html[data-pos-theme="gradient"] .ostos-page-info,
html[data-pos-theme="gradient"] .ostos-page-actions span,
html[data-pos-theme="gradient"] .ostos-page-size select {
    color: #000000 !important;
}

html[data-pos-theme="crimson"] .ostos-table-pagination {
    border-color: rgba(255, 255, 255, .18) !important;
    background: #8f111d !important;
}

html[data-pos-theme="crimson"] .ostos-page-size span,
html[data-pos-theme="crimson"] .ostos-page-info,
html[data-pos-theme="crimson"] .ostos-page-actions span {
    color: #ffffff !important;
}

html[data-pos-theme="crimson"] .ostos-page-size select {
    color: #2c0f12 !important;
    background: #ffffff !important;
}

@media (max-width: 640px) {
    .ostos-table-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .ostos-page-size,
    .ostos-page-actions {
        justify-content: space-between;
    }
}

/* THEME Dark Mode / Crimson Velvet - TEXT COLOR - Owner report readable light rows */
html[data-pos-theme="forest"] .owner-empty,
html[data-pos-theme="forest"] .owner-summary-list div,
html[data-pos-theme="forest"] .owner-progress-list div,
html[data-pos-theme="forest"] .owner-cash-box div,
html[data-pos-theme="forest"] .owner-issue-grid div,
html[data-pos-theme="forest"] .owner-ranked-list div,
html[data-pos-theme="forest"] .owner-category-list,
html[data-pos-theme="forest"] .owner-category-list div,
html[data-pos-theme="forest"] .owner-compare-list div,
html[data-pos-theme="forest"] .owner-addon-revenue,
html[data-pos-theme="forest"] .owner-note,
html[data-pos-theme="forest"] .owner-attention,
html[data-pos-theme="forest"] .owner-mini-metrics span,
html[data-pos-theme="forest"] .owner-table td,
html[data-pos-theme="crimson"] .owner-empty,
html[data-pos-theme="crimson"] .owner-summary-list div,
html[data-pos-theme="crimson"] .owner-progress-list div,
html[data-pos-theme="crimson"] .owner-cash-box div,
html[data-pos-theme="crimson"] .owner-issue-grid div,
html[data-pos-theme="crimson"] .owner-ranked-list div,
html[data-pos-theme="crimson"] .owner-category-list,
html[data-pos-theme="crimson"] .owner-category-list div,
html[data-pos-theme="crimson"] .owner-compare-list div,
html[data-pos-theme="crimson"] .owner-addon-revenue,
html[data-pos-theme="crimson"] .owner-note,
html[data-pos-theme="crimson"] .owner-attention,
html[data-pos-theme="crimson"] .owner-mini-metrics span,
html[data-pos-theme="crimson"] .owner-table td {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .08) !important;
    background: #f3f3f3 !important;
    box-shadow: none !important;
}

/* THEME Dark Mode / Crimson Velvet - TEXT COLOR - Owner report labels and values on light rows */
html[data-pos-theme="forest"] .owner-empty *,
html[data-pos-theme="forest"] .owner-summary-list div *,
html[data-pos-theme="forest"] .owner-progress-list div *,
html[data-pos-theme="forest"] .owner-cash-box div *,
html[data-pos-theme="forest"] .owner-issue-grid div *,
html[data-pos-theme="forest"] .owner-ranked-list div *,
html[data-pos-theme="forest"] .owner-category-list *,
html[data-pos-theme="forest"] .owner-category-list div *,
html[data-pos-theme="forest"] .owner-compare-list div *,
html[data-pos-theme="forest"] .owner-addon-revenue *,
html[data-pos-theme="forest"] .owner-note *,
html[data-pos-theme="forest"] .owner-attention *,
html[data-pos-theme="forest"] .owner-mini-metrics span *,
html[data-pos-theme="forest"] .owner-table td *,
html[data-pos-theme="crimson"] .owner-empty *,
html[data-pos-theme="crimson"] .owner-summary-list div *,
html[data-pos-theme="crimson"] .owner-progress-list div *,
html[data-pos-theme="crimson"] .owner-cash-box div *,
html[data-pos-theme="crimson"] .owner-issue-grid div *,
html[data-pos-theme="crimson"] .owner-ranked-list div *,
html[data-pos-theme="crimson"] .owner-category-list *,
html[data-pos-theme="crimson"] .owner-category-list div *,
html[data-pos-theme="crimson"] .owner-compare-list div *,
html[data-pos-theme="crimson"] .owner-addon-revenue *,
html[data-pos-theme="crimson"] .owner-note *,
html[data-pos-theme="crimson"] .owner-attention *,
html[data-pos-theme="crimson"] .owner-mini-metrics span *,
html[data-pos-theme="crimson"] .owner-table td * {
    color: #000000 !important;
}

html[data-pos-theme="forest"] .owner-summary-list span,
html[data-pos-theme="forest"] .owner-progress-list span,
html[data-pos-theme="forest"] .owner-cash-box span,
html[data-pos-theme="forest"] .owner-issue-grid span,
html[data-pos-theme="forest"] .owner-addon-revenue span,
html[data-pos-theme="forest"] .owner-category-list p,
html[data-pos-theme="forest"] .owner-category-list div,
html[data-pos-theme="forest"] .owner-compare-list label,
html[data-pos-theme="crimson"] .owner-summary-list span,
html[data-pos-theme="crimson"] .owner-progress-list span,
html[data-pos-theme="crimson"] .owner-cash-box span,
html[data-pos-theme="crimson"] .owner-issue-grid span,
html[data-pos-theme="crimson"] .owner-addon-revenue span,
html[data-pos-theme="crimson"] .owner-category-list p,
html[data-pos-theme="crimson"] .owner-category-list div,
html[data-pos-theme="crimson"] .owner-compare-list label {
    color: #20262c !important;
    font-weight: 900 !important;
}

html[data-pos-theme="forest"] .owner-summary-list strong,
html[data-pos-theme="forest"] .owner-progress-list strong,
html[data-pos-theme="forest"] .owner-cash-box strong,
html[data-pos-theme="forest"] .owner-issue-grid strong,
html[data-pos-theme="forest"] .owner-addon-revenue strong,
html[data-pos-theme="forest"] .owner-category-list > strong,
html[data-pos-theme="forest"] .owner-category-list em,
html[data-pos-theme="forest"] .owner-compare-list strong,
html[data-pos-theme="crimson"] .owner-summary-list strong,
html[data-pos-theme="crimson"] .owner-progress-list strong,
html[data-pos-theme="crimson"] .owner-cash-box strong,
html[data-pos-theme="crimson"] .owner-issue-grid strong,
html[data-pos-theme="crimson"] .owner-addon-revenue strong,
html[data-pos-theme="crimson"] .owner-category-list > strong,
html[data-pos-theme="crimson"] .owner-category-list em,
html[data-pos-theme="crimson"] .owner-compare-list strong {
    color: #000000 !important;
    font-weight: 900 !important;
}

/* THEME Dark Mode / Crimson Velvet - TEXT COLOR - Owner sales by category box */
html[data-pos-theme="forest"] .owner-category-list,
html[data-pos-theme="crimson"] .owner-category-list {
    border-radius: 18px !important;
    padding: 12px !important;
}

html[data-pos-theme="forest"] .owner-category-list div span,
html[data-pos-theme="crimson"] .owner-category-list div span {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .06) !important;
}

/* THEME Light Mode - TEXT COLOR - Owner sales by category and daily comparison */
html[data-pos-theme="gradient"] .owner-category-list,
html[data-pos-theme="gradient"] .owner-category-list div,
html[data-pos-theme="gradient"] .owner-compare-list div {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, .08) !important;
    background: #f3f3f3 !important;
    box-shadow: none !important;
}

html[data-pos-theme="gradient"] .owner-category-list {
    border-radius: 18px !important;
    padding: 12px !important;
}

html[data-pos-theme="gradient"] .owner-category-list *,
html[data-pos-theme="gradient"] .owner-category-list div *,
html[data-pos-theme="gradient"] .owner-compare-list div * {
    color: #000000 !important;
}

html[data-pos-theme="gradient"] .owner-category-list > strong,
html[data-pos-theme="gradient"] .owner-category-list em,
html[data-pos-theme="gradient"] .owner-compare-list strong {
    color: #000000 !important;
    font-weight: 900 !important;
}

html[data-pos-theme="gradient"] .owner-category-list p,
html[data-pos-theme="gradient"] .owner-category-list div,
html[data-pos-theme="gradient"] .owner-compare-list label {
    color: #20262c !important;
    font-weight: 900 !important;
}

html[data-pos-theme="gradient"] .owner-category-list div span {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .06) !important;
}

html[data-pos-theme="gradient"] .owner-donut {
    border: 1px solid rgba(0, 0, 0, .10) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 12px 28px rgba(0, 0, 0, .08) !important;
}

html[data-pos-theme="gradient"] .owner-donut:after {
    background: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08) !important;
}

html[data-pos-theme="gradient"] .owner-compare-list span {
    background: #c9d1d3 !important;
}

html[data-pos-theme="gradient"] .owner-compare-list i {
    background: #2c2c2c !important;
}

html[data-pos-theme="gradient"] .owner-compare-list span.last i {
    background: #879391 !important;
}

/* THEME Dark Mode / Crimson Velvet - TEXT COLOR - Owner progress bars remain visible */
html[data-pos-theme="forest"] .owner-progress-list i,
html[data-pos-theme="crimson"] .owner-progress-list i {
    background: #d9dee2 !important;
}

html[data-pos-theme="forest"] .owner-progress-list em,
html[data-pos-theme="crimson"] .owner-progress-list em {
    background: linear-gradient(90deg, #ffd84e, #5dbb63) !important;
}