:root{
    --theme-color:#f59e0b;
    --theme-rgb:245, 158, 11;
    --font-family-base:Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --sidebar-width:320px;
    --sidebar-bg-1:#0b1220;
    --sidebar-bg-2:#111c33;
    --sidebar-text:#e5eefc;
    --sidebar-text-soft:rgba(229, 238, 252, .72);
    --navbar-bg:#ffffff;
    --navbar-text:#0f172a;
    --header-bg:#ffffff;
    --header-text:#0f172a;
    --text-main:#0f172a;
    --text-soft:#64748b;
    --topbar-height:84px;
    --sidebar-compact-width:108px;
}

*{
    box-sizing:border-box;
}
body.app-body{
    font-family:var(--font-family-base, Inter, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
    background:
        radial-gradient(circle at top right, rgba(var(--theme-rgb, 245, 158, 11), .08), transparent 24%),
        linear-gradient(180deg,#f5f7fb 0%,#eef2f7 100%);
    color:var(--text-main,#0f172a);
    min-height:100vh;
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.app-shell{
    display:grid;
    grid-template-columns:var(--sidebar-width, 320px) minmax(0,1fr);
    min-height:100vh;
}
.sidebar{
    width:var(--sidebar-width, 320px);
    background:linear-gradient(180deg,var(--sidebar-bg-1,#0b1220) 0%,var(--sidebar-bg-2,#111c33) 58%,var(--sidebar-bg-1,#0b1220) 100%);
    color:var(--sidebar-text,#fff);
    padding:22px 16px 18px;
    position:sticky;
    top:0;
    height:100vh;
    overflow:auto;
    border-right:1px solid rgba(255,255,255,.08);
    transition:width .22s ease,transform .22s ease;
    scrollbar-width:thin;
    box-shadow:18px 0 40px rgba(2,6,23,.14);
}
.brand,.topbar-brand,.topbar-left{
    display:flex;
    align-items:center;
    gap:12px;
}
.brand{
    min-height:56px;
    width:100%;
    min-width:0;
    overflow:hidden;
}
.brand-logo{
    width:52px;
    height:52px;
    min-width:52px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:#fff;
    flex-shrink:0;
    overflow:hidden;
    box-shadow:0 10px 24px rgba(0,0,0,.16);
}
.brand-logo img,.topbar-brand img{
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center;
}
.brand-logo img{
    padding:7px;
}
.topbar-brand img{
    width:40px;
    height:40px;
    object-fit:contain;
}
.brand-text,.topbar-brand > div,.user-mini-text,.user-chip-text{
    min-width:0;
}
.brand h1{
    font-size:1rem;
    margin:0;
    font-weight:800;
    line-height:1.2;
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.brand small,.sidebar-footer small,.user-mini small{
    color:var(--sidebar-text-soft,#9aa8bd);
    display:block;
}
.brand small{
    max-width:170px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.user-mini{
    margin:18px 0;
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    display:flex;
    gap:10px;
    align-items:center;
    border:1px solid rgba(255,255,255,.08);
}
.avatar{
    width:42px;
    height:42px;
    border-radius:14px;
    background:linear-gradient(135deg,var(--theme-color),#7c3aed);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    flex-shrink:0;
    box-shadow:0 10px 24px rgba(var(--theme-rgb,245,158,11),.22);
}
.avatar-sm{
    width:32px;
    height:32px;
    font-size:.85rem;
}
.sidebar-menu{
    display:flex;
    flex-direction:column;
    gap:6px;
}
.menu-group{
    display:block;
}
.menu-link{
    width:100%;
    border:0;
    color:#dbe4f0;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 11px;
    border-radius:12px;
    background:transparent;
    transition:.18s ease;
    text-align:left;
    font-weight:650;
}
.menu-link:hover,.menu-link.active{
    background:rgba(245,158,11,.14);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(245,158,11,.28);
}
.menu-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:.72rem;
    font-weight:800;
    flex-shrink:0;
}
.menu-caret{
    margin-left:auto;
    color:#94a3b8;
}
.submenu{
    margin:4px 0 8px 44px;
    padding-left:10px;
    border-left:1px solid rgba(255,255,255,.12);
    display:flex;
    flex-direction:column;
    gap:4px;
}
.submenu-link{
    color:#b8c4d5;
    text-decoration:none;
    padding:8px 10px;
    border-radius:10px;
    font-size:.92rem;
}
.submenu-link:hover,.submenu-link.active{
    background:rgba(255,255,255,.08);
    color:#fff;
}
.sidebar-footer{
    margin-top:24px;
    padding:16px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    color:var(--sidebar-text,#dbe4f0);
}
.main-content{
    min-width:0;
    display:flex;
    flex-direction:column;
}
.topbar{
    position:sticky;
    top:0;
    z-index:1100;
    min-height:var(--topbar-height,84px);
    padding:14px 24px;
    background:var(--navbar-bg,#ffffff);
    color:var(--navbar-text,#0f172a);
    border-bottom:1px solid rgba(15,23,42,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    backdrop-filter:none;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
    min-width:0;
    isolation:isolate;
}
.topbar-brand img{
    width:40px;
    height:40px;
    padding:5px;
    background:#fff;
    border:1px solid #e6edf5;
    border-radius:12px;
    flex-shrink:0;
}
.topbar-brand{
    min-width:0;
}
.topbar-brand .fw-semibold{
    max-width:320px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.topbar-btn,.sidebar-icon-btn{
    border:1px solid #d8e1ee;
    background:#fff;
    color:var(--navbar-text,#0f172a);
    border-radius:14px;
    min-height:44px;
    padding:8px 12px;
    font-weight:800;
    cursor:pointer;
}
.topbar-actions{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:nowrap;
    justify-content:flex-end;
    min-width:0;
    margin-left:auto;
}
.notification-btn{
    border:1px solid #e2e8f0;
    background:#fff;
    color:var(--navbar-text,#0f172a);
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    font-weight:700;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
    min-height:46px;
    white-space:nowrap;
}
.notification-btn strong{
    width:26px;
    height:26px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--theme-color);
    color:#fff;
    font-size:.82rem;
}
.notification-menu{
    width:320px;
    max-width:calc(100vw - 24px);
    border:0;
    border-radius:16px;
    padding:10px;
    box-shadow:0 20px 60px rgba(15,23,42,.16);
    overflow:hidden;
}
.notification-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    text-decoration:none;
    color:#0f172a;
    padding:12px;
    border-radius:12px;
    min-width:0;
}
.notification-item strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.notification-item:hover{
    background:#f1f5f9;
}
.notification-item span{
    min-width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#eaf0f7;
    font-weight:800;
}
.user-chip{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid #e2e8f0;
    padding:7px 8px;
    border-radius:999px;
    color:var(--navbar-text,#0f172a);
    box-shadow:0 10px 30px rgba(15,23,42,.05);
    min-width:0;
    flex-shrink:0;
}
.user-chip-text{
    max-width:120px;
}
.user-chip-text .fw-semibold,
.user-chip-text small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.content-wrapper{
    padding:24px 28px 28px;
}
.page-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
    padding:22px 24px;
    background:var(--header-bg,#ffffff);
    color:var(--header-text,#0f172a);
    border:1px solid rgba(15,23,42,.08);
    border-radius:24px;
    box-shadow:0 14px 38px rgba(15,23,42,.06);
    position:relative;
    z-index:1;
}
.page-header h2{
    margin:0 0 8px;
    font-size:clamp(1.6rem,2vw,2rem);
    line-height:1.15;
    font-weight:800;
    color:var(--header-text,#0f172a);
}
.page-subtitle{
    margin:0;
    font-size:.98rem;
    color:var(--text-soft,#64748b);
}
.breadcrumb-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:16px;
    background:rgba(255,255,255,.92);
    border:1px solid rgba(15,23,42,.08);
}
.breadcrumb-icon{
    width:36px;
    height:36px;
    border-radius:12px;
    display:grid;
    place-items:center;
    color:var(--theme-color);
    background:rgba(var(--theme-rgb,245,158,11),.12);
}
.breadcrumb strong{
    display:block;
    font-size:.92rem;
    color:var(--header-text,#0f172a);
    margin-bottom:2px;
}
.page-body{
    padding:0;
    position:relative;
}
.panel,.card-soft,.stat-card{
    background:#fff;
    border:1px solid #e6edf5;
    border-radius:14px;
    box-shadow:0 14px 38px rgba(15,23,42,.06);
}
.card-soft .card-header{
    background:transparent;
    border-bottom:1px solid #eaf0f7;
    font-weight:800;
    padding:15px 18px;
}
.card-soft .card-body{
    padding:18px;
}
.stat-card{
    padding:18px;
    height:100%;
}
.stat-label,.small-muted{
    color:#64748b;
    font-size:.86rem;
}
.stat-value{
    font-weight:850;
    font-size:clamp(1.15rem,2vw,1.55rem);
    margin-top:6px;
}
.form-label{
    font-weight:700;
    font-size:.9rem;
}
.form-control,.form-select{
    border-color:#dce5f1;
    border-radius:11px;
}
.form-control:focus,.form-select:focus{
    border-color:var(--theme-color);
    box-shadow:0 0 0 .18rem rgba(245,158,11,.16);
}
.btn{
    border-radius:11px;
    font-weight:700;
}
.table{
    --bs-table-border-color:#edf2f7;
}
.table thead th{
    background:#f8fafc;
    font-size:.84rem;
    color:#475569;
}
.qty-warning{
    background:rgba(250,204,21,.18)!important;
}
.qty-danger{
    background:rgba(239,68,68,.12)!important;
}
.pos-layout{
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
    gap:18px;
    align-items:start;
}
.catalog-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
}
.catalog-search{
    max-width:360px;
}
.catalog-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
    gap:12px;
}
.catalog-item{
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:15px;
    cursor:grab;
    background:#fff;
    transition:.18s ease;
    min-height:128px;
}
.catalog-item:hover,.catalog-item:focus{
    border-color:var(--theme-color);
    box-shadow:0 14px 28px rgba(15,23,42,.08);
    transform:translateY(-1px);
    outline:none;
}
.cart-dropzone{
    border:1px dashed #cbd5e1;
    border-radius:14px;
    background:#f8fafc;
    padding:12px;
}
.cart-dropzone.drag-over{
    border-color:var(--theme-color);
    background:rgba(245,158,11,.08);
}
.cart-row{
    cursor:grab;
}
.cart-row.dragging{
    opacity:.45;
}
.payment-panel{
    border:1px solid #e2e8f0;
    border-radius:14px;
    padding:14px;
    background:linear-gradient(180deg,#fff,#f8fafc);
}
.qris-preview{
    width:210px;
    max-width:100%;
    aspect-ratio:1;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(13,1fr);
    gap:3px;
    padding:14px;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:16px;
}
.qris-preview span{
    border-radius:2px;
    background:#111827;
}
.qris-preview span.light{
    background:#f1f5f9;
}
.receipt{
    width:80mm;
    margin:0 auto;
    padding:10px;
    font-size:12px;
    background:#fff;
}
.receipt hr{
    border-top:1px dashed #000;
}
.print-only{
    display:none;
}
.bar-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.bar-track{
    width:100%;
    height:12px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
}
.bar-fill{
    height:100%;
    background:linear-gradient(90deg,var(--theme-color),#7c3aed);
}
.toast-zone{
    position:fixed;
    right:22px;
    top:calc(var(--topbar-height,84px) + 10px);
    z-index:1200;
    width:min(380px,calc(100vw - 28px));
}
.app-toast{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    border-radius:16px;
    color:#0f172a;
    background:#fff;
    border:1px solid #e2e8f0;
    box-shadow:0 24px 70px rgba(15,23,42,.16);
    padding:14px 15px;
}
.app-toast strong,.app-toast span{
    display:block;
}
.app-toast span{
    color:#475569;
    font-size:.92rem;
}
.app-toast button{
    border:0;
    background:#f1f5f9;
    border-radius:50%;
    width:28px;
    height:28px;
    font-weight:800;
}
.app-toast-success{
    border-left:5px solid #22c55e;
}
.app-toast-danger{
    border-left:5px solid #ef4444;
}
.app-toast-warning{
    border-left:5px solid #f59e0b;
}
body.sidebar-collapsed .app-shell{
    grid-template-columns:var(--sidebar-compact-width,108px) minmax(0,1fr);
}
body.sidebar-collapsed .sidebar{
    padding-left:12px;
    padding-right:12px;
    overflow-x:hidden;
}
body.sidebar-collapsed .brand{
    justify-content:center;
}
body.sidebar-collapsed .brand-logo{
    width:52px;
    height:52px;
    min-width:52px;
}
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .user-mini-text,
body.sidebar-collapsed .menu-text,
body.sidebar-collapsed .menu-caret,
body.sidebar-collapsed .sidebar-footer{
    display:none;
}
body.sidebar-collapsed .submenu{
    display:none;
}
body.sidebar-collapsed .menu-link{
    justify-content:center;
}
body.sidebar-collapsed .user-mini{
    justify-content:center;
    padding:10px 0;
}
body.sidebar-open{
    overflow:hidden;
}
@media (max-width: 1180px){
    .pos-layout{
        grid-template-columns:1fr;
    }
}
@media (max-width: 992px){
    .app-shell,body.sidebar-collapsed .app-shell{
        grid-template-columns:1fr;
    }
    .sidebar{
        position:fixed;
        inset:0 auto 0 0;
        width:min(var(--sidebar-width,320px),90vw);
        max-width:90vw;
        z-index:1040;
        transform:translateX(-105%);
        padding-top:max(16px,env(safe-area-inset-top));
        padding-bottom:max(16px,env(safe-area-inset-bottom));
    }
    body.sidebar-open .sidebar{
        transform:translateX(0);
    }
    .mobile-sidebar-backdrop{
        display:none;
        position:fixed;
        inset:0;
        background:rgba(15,23,42,.42);
        z-index:1030;
    }
    body.sidebar-open .mobile-sidebar-backdrop{
        display:block;
    }
    body.sidebar-collapsed .brand-text,
    body.sidebar-collapsed .user-mini-text,
    body.sidebar-collapsed .menu-text,
    body.sidebar-collapsed .menu-caret{
        display:block;
    }
    body.sidebar-collapsed .sidebar-footer{
        display:block;
    }
    body.sidebar-collapsed .submenu{
        display:flex;
    }
    body.sidebar-collapsed .brand{
        justify-content:flex-start;
    }
    body.sidebar-collapsed .menu-link{
        justify-content:flex-start;
    }
    .topbar{
        align-items:center;
        flex-direction:row;
        padding:10px 12px;
        min-height:64px;
        gap:10px;
        padding-top:max(10px,env(safe-area-inset-top));
    }
    .topbar-left{
        min-width:0;
        flex:1 1 auto;
    }
    .topbar-actions{
        width:auto;
        justify-content:flex-end;
        flex:0 0 auto;
        gap:8px;
    }
    .topbar-brand .fw-semibold{
        max-width:28vw;
    }
    .notification-menu{
        position:fixed!important;
        top:72px!important;
        left:12px!important;
        right:12px!important;
        width:auto;
        max-width:none;
        transform:none!important;
        border-radius:16px;
    }
    .content-wrapper{
        padding:18px;
    }
    .page-header{
        flex-direction:column;
        align-items:stretch;
    }
}
@media (max-width: 576px){
    .topbar-brand small,.user-chip-text,.notification-btn span{
        display:none;
    }
    .topbar{
        gap:8px;
    }
    .topbar-btn{
        min-height:38px;
        padding:7px 10px;
        font-size:.86rem;
    }
    .topbar-brand img{
        width:36px;
        height:36px;
        padding:4px;
    }
    .topbar-brand .fw-semibold{
        max-width:34vw;
        font-size:.92rem;
    }
    .notification-btn{
        width:42px;
        height:42px;
        padding:0;
        justify-content:center;
        border-radius:14px;
    }
    .notification-btn strong{
        width:24px;
        height:24px;
    }
    .user-chip{
        padding:5px;
        border-radius:14px;
    }
    .user-chip .btn{
        display:none;
    }
    .avatar-sm{
        width:30px;
        height:30px;
    }
    .notification-menu{
        top:64px!important;
        left:10px!important;
        right:10px!important;
    }
    .notification-item{
        padding:11px 10px;
    }
    .brand h1,.brand small{
        max-width:calc(86vw - 104px);
    }
    .catalog-grid{
        grid-template-columns:1fr;
    }
    .card-soft .card-body{
        padding:14px;
    }
    .content-wrapper{
        padding:12px;
    }
    .page-header{
        padding:18px;
        border-radius:20px;
    }
    .breadcrumb-wrap{
        width:100%;
    }
}
@media print{
    body{
        background:#fff!important;
    }
    .no-print,.topbar,.sidebar,.mobile-sidebar-backdrop{
        display:none!important;
    }
    .app-shell{
        display:block;
    }
    .print-only{
        display:block;
    }
}


.topbar-brand .fw-semibold,
.user-chip-text .fw-semibold{
    color:var(--navbar-text,#0f172a);
}
.topbar-brand small,
.user-chip-text small{
    color:rgba(15,23,42,.62);
}
.page-header .text-secondary,
.page-header small{
    color:var(--text-soft,#64748b) !important;
}