:root{
--navy:#0b1739;--navy2:#102454;--blue:#3767ff;--blue2:#5d7dff;--bg:#f5f7fb;
--text:#17213d;--muted:#78839b;--line:#e8ebf2;--white:#fff;--green:#17a673;
--orange:#f59e0b;--violet:#7657e8;--shadow:0 16px 40px rgba(23,33,61,.08);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:var(--text)}
a{text-decoration:none;color:inherit}button,input{font:inherit}

/* LOGIN */
.login-body{background:#fff}.login-page{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr}
.login-hero{position:relative;padding:42px 56px;display:flex;flex-direction:column;overflow:hidden;color:#fff;background:
radial-gradient(circle at 85% 15%,rgba(94,124,255,.35),transparent 25%),
radial-gradient(circle at 10% 80%,rgba(55,103,255,.3),transparent 26%),
linear-gradient(145deg,#07122f,#102659 70%,#0b1a41)}
.login-hero:before,.login-hero:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%}
.login-hero:before{width:520px;height:520px;right:-280px;top:60px}.login-hero:after{width:390px;height:390px;left:-210px;bottom:-140px}
.brand-pill{font-size:12px;letter-spacing:1.5px;font-weight:800;display:flex;align-items:center;gap:9px;z-index:1}.brand-pill span{width:8px;height:8px;background:#6f8bff;border-radius:50%;box-shadow:0 0 0 6px rgba(111,139,255,.14)}
.hero-content{margin:auto 0;max-width:620px;z-index:1}.hero-logo{width:76px;height:76px;border-radius:23px;background:linear-gradient(145deg,#4c74ff,#7456ed);display:grid;place-items:center;font-size:36px;box-shadow:0 18px 45px rgba(55,103,255,.35);margin-bottom:28px}
.hero-logo.small{width:42px;height:42px;font-size:20px;border-radius:13px;margin:0}
.hero-content h1{font-size:54px;line-height:1;margin:0;font-weight:700;letter-spacing:-2.5px}.hero-content h1 strong{font-weight:800;color:#7391ff}.hero-tagline{font-size:17px;color:#c7d0ea;margin:15px 0 38px}
.hero-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.hero-feature{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:16px;border-radius:16px;backdrop-filter:blur(8px)}
.hero-feature>i{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(96,126,255,.18);color:#90a7ff}.hero-feature b{display:block;font-size:13px}.hero-feature small{display:block;color:#9faccc;margin-top:3px;font-size:11px}.hero-footer{z-index:1;color:#7180a5;font-size:11px}
.login-panel{display:flex;align-items:center;justify-content:center;padding:45px;background:#fff}.login-card{width:min(440px,100%)}.mobile-brand{display:none}.login-heading{margin-bottom:28px}.eyebrow{font-size:11px;letter-spacing:1.6px;color:var(--blue);font-weight:800}.login-heading h2{font-size:30px;letter-spacing:-1px;margin:9px 0 9px}.login-heading p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}
.alert-error{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;background:#fff1f1;color:#bc3535;border:1px solid #ffd8d8;border-radius:12px;font-size:12px;margin-bottom:20px}.form-label{display:block;font-size:12px;font-weight:700;margin:15px 0 8px}.input-wrap{height:52px;border:1.5px solid #e1e5ee;border-radius:13px;display:flex;align-items:center;padding:0 15px;transition:.2s;background:#fff}.input-wrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(55,103,255,.09)}.input-wrap>i{color:#9aa5ba;font-size:17px}.input-wrap input{border:0;outline:0;flex:1;padding:0 12px;font-size:13px;color:var(--text);min-width:0}.input-wrap input::placeholder{color:#acb4c5}.toggle-password{border:0;background:none;color:#8994aa;cursor:pointer;padding:6px}
.btn-login{margin-top:24px;width:100%;height:53px;border:0;border-radius:13px;background:linear-gradient(135deg,#2f62ff,#4d73ed);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;box-shadow:0 14px 27px rgba(55,103,255,.25);transition:.2s}.btn-login:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(55,103,255,.32)}.security-note{display:flex;justify-content:center;align-items:center;gap:8px;color:#9aa4b7;font-size:11px;margin-top:23px}

/* APP LAYOUT */
.app-body{background:var(--bg)}.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:255px;background:linear-gradient(180deg,#0a1635,#0e204a);color:#fff;z-index:1000;display:flex;flex-direction:column;padding:23px 17px}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:0 7px 22px}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#3f6cff,#6957e9);display:grid;place-items:center;font-size:20px}.brand-name{font-size:16px;font-weight:800;letter-spacing:-.3px}.brand-name span{color:#7892ff}.sidebar-brand small{color:#7282a8;font-size:9px}
.store-badge{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.06);padding:11px;border-radius:13px;margin-bottom:19px}.store-icon{width:32px;height:32px;display:grid;place-items:center;background:rgba(92,124,255,.16);border-radius:9px;color:#7893ff}.store-badge small{display:block;color:#6f80a8;font-size:8px;letter-spacing:1px}.store-badge strong{display:block;font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.sidebar-nav{overflow:auto;flex:1;padding-right:3px}.nav-caption{font-size:8px;color:#5f7097;letter-spacing:1.3px;font-weight:800;padding:7px 10px 8px}.nav-item{height:43px;display:flex;align-items:center;gap:13px;padding:0 12px;border-radius:10px;color:#9cabc9;font-size:12px;font-weight:600;margin:3px 0}.nav-item i{font-size:16px;width:20px}.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}.nav-item.active{color:#fff;background:linear-gradient(135deg,rgba(55,103,255,.9),rgba(88,86,224,.85));box-shadow:0 8px 20px rgba(44,74,180,.25)}
.sidebar-footer{font-size:9px;color:#53658e;border-top:1px solid rgba(255,255,255,.06);padding:15px 8px 0;line-height:1.7}.version{color:#7889ae;font-weight:700}
.main-area{margin-left:255px;min-height:100vh}.topbar{height:79px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:100}.topbar-left{display:flex;align-items:center;gap:12px}.topbar h1{font-size:17px;margin:0 0 3px;letter-spacing:-.3px}.topbar p{font-size:10px;color:var(--muted);margin:0}.topbar-actions{display:flex;align-items:center;gap:10px}.pos-shortcut{height:39px;display:flex;align-items:center;gap:8px;background:#edf2ff;color:#315edb;border-radius:10px;padding:0 13px;font-size:11px;font-weight:700}.icon-btn{width:39px;height:39px;border:1px solid var(--line);background:#fff;border-radius:10px;display:grid;place-items:center;color:#65718b;position:relative;cursor:pointer}.notif-dot{position:absolute;width:6px;height:6px;background:#ff4b5c;border:1px solid #fff;border-radius:50%;right:8px;top:7px}.mobile-menu{display:none}
.user-menu{position:relative}.user-trigger{height:46px;display:flex;align-items:center;gap:10px;border:0;background:#fff;cursor:pointer;padding:2px 5px}.avatar{width:35px;height:35px;border-radius:10px;background:linear-gradient(145deg,#e6ebff,#d8e1ff);color:#315edb;display:grid;place-items:center;font-weight:800;font-size:12px}.user-meta{text-align:left}.user-meta strong,.user-meta small{display:block}.user-meta strong{font-size:11px}.user-meta small{font-size:9px;color:#8d98ae;margin-top:2px}.user-trigger>i{font-size:10px;color:#9aa5b9}.user-dropdown{display:none;position:absolute;right:0;top:54px;width:220px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);overflow:hidden}.user-dropdown.show{display:block}.dropdown-head{padding:15px}.dropdown-head strong,.dropdown-head small{display:block}.dropdown-head strong{font-size:12px}.dropdown-head small{font-size:9px;color:var(--muted);margin-top:4px}.logout-link{display:flex;gap:8px;padding:12px 15px;border-top:1px solid var(--line);font-size:11px;color:#d74747}.content{padding:26px 30px 35px;max-width:1600px;margin:auto}
.welcome-banner{background:linear-gradient(115deg,#0d1d46,#173777);min-height:145px;border-radius:20px;padding:27px 31px;color:#fff;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow)}.welcome-banner:after{content:"";position:absolute;width:300px;height:300px;border:50px solid rgba(255,255,255,.035);border-radius:50%;right:100px;top:-150px}.welcome-kicker{font-size:8px;letter-spacing:1.5px;color:#7799ff;font-weight:800}.welcome-banner h2,.cashier-hero h2{font-size:24px;margin:8px 0 7px;letter-spacing:-.7px}.welcome-banner p,.cashier-hero p{margin:0;color:#9dadd0;font-size:11px}.welcome-date{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);padding:11px 14px;border-radius:13px;z-index:1}.welcome-date>i{font-size:21px;color:#7898ff}.welcome-date small,.welcome-date strong{display:block}.welcome-date small{font-size:7px;color:#7185b3}.welcome-date strong{font-size:11px;margin-top:2px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:17px 0}.stat-card{background:#fff;border:1px solid #edf0f5;border-radius:16px;padding:17px;display:flex;align-items:center;gap:14px;min-height:100px;box-shadow:0 5px 18px rgba(31,42,68,.025)}.stat-icon{width:45px;height:45px;border-radius:13px;display:grid;place-items:center;font-size:19px;flex:0 0 auto}.stat-icon.blue{background:#edf2ff;color:#3a67f2}.stat-icon.violet{background:#f2efff;color:#7258e4}.stat-icon.green{background:#eaf8f2;color:#16a06e}.stat-icon.orange{background:#fff5e8;color:#ee9514}.stat-body{min-width:0}.stat-body>span{font-size:9px;color:#8792a7;font-weight:600}.stat-body h3{font-size:19px;margin:5px 0 3px;letter-spacing:-.5px}.stat-body h3 em{font-size:9px;font-style:normal;color:#8490a7;font-weight:600}.stat-body small{font-size:8px;color:#99a4b7}.stat-body small i{color:var(--green)}.status-text{font-size:14px!important}
.dashboard-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:15px;margin-bottom:15px}.bottom-grid{grid-template-columns:1.55fr 1fr}.panel{background:#fff;border:1px solid #edf0f5;border-radius:17px;padding:20px;box-shadow:0 4px 17px rgba(31,42,68,.02)}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.panel-head h3{font-size:12px;margin:0 0 4px}.panel-head p{font-size:9px;color:var(--muted);margin:0}.panel-head>a{font-size:9px;color:var(--blue);font-weight:700}.panel-badge{font-size:8px;color:#566684;background:#f4f6fa;border-radius:8px;padding:7px 9px}.empty-chart{height:200px;display:flex;flex-direction:column;justify-content:flex-end}.chart-bars{height:150px;border-bottom:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-around;gap:12px;padding:0 20px}.chart-bars span{width:8%;max-width:34px;min-width:13px;background:linear-gradient(180deg,#4c74ff,#b6c4ff);border-radius:7px 7px 0 0;opacity:.82}.empty-chart p{text-align:center;color:#a0a9ba;font-size:8px;margin:13px 0 0}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-grid a{min-height:83px;border:1px solid var(--line);border-radius:13px;padding:12px;display:grid;grid-template-columns:31px 1fr;column-gap:8px;align-content:center}.quick-grid a:hover{border-color:#cdd8ff;background:#f9faff}.quick-grid i{grid-row:1/3;width:31px;height:31px;border-radius:9px;background:#edf2ff;color:#4069e8;display:grid;place-items:center;font-size:14px}.quick-grid span{font-size:9px;font-weight:700}.quick-grid small{font-size:7px;color:#9ba5b7;margin-top:2px}.empty-state{min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9ba6ba;text-align:center}.empty-state>i{font-size:28px;color:#ccd3df;margin-bottom:9px}.empty-state strong{font-size:10px;color:#7f8aa0}.empty-state span{font-size:8px;margin-top:5px}.small-empty{min-height:130px}

/* CASHIER */
.cashier-hero{background:linear-gradient(120deg,#0d1c43,#17428a);border-radius:20px;color:#fff;padding:27px 30px;display:flex;justify-content:space-between;align-items:center;min-height:190px}.big-pos-button{margin-top:21px;background:#fff;color:#1d3c83;display:flex;align-items:center;gap:12px;width:260px;padding:12px 15px;border-radius:13px;box-shadow:0 12px 30px rgba(0,0,0,.13)}.big-pos-button>i:first-child{font-size:20px}.big-pos-button>i:last-child{margin-left:auto}.big-pos-button b,.big-pos-button small{display:block}.big-pos-button b{font-size:10px}.big-pos-button small{font-size:8px;color:#8a96ae;margin-top:3px}.cashier-illustration{font-size:88px;color:rgba(255,255,255,.13);padding-right:50px}.cashier-stats{grid-template-columns:repeat(3,1fr)}

/* POS COMING */
.pos-coming-body{background:linear-gradient(145deg,#07122f,#102659);min-height:100vh;color:#fff}.pos-coming{min-height:100vh;padding:24px}.pos-coming-top{display:flex;justify-content:space-between;align-items:center;color:#a9b7d6;font-size:11px;max-width:1180px;margin:auto}.pos-coming-top a{display:flex;gap:7px;align-items:center}.pos-coming-card{max-width:720px;margin:10vh auto 0;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:50px 40px;box-shadow:0 30px 70px rgba(0,0,0,.18)}.pos-coming-icon{width:75px;height:75px;border-radius:22px;background:linear-gradient(145deg,#3c6cff,#7358e5);display:grid;place-items:center;font-size:34px;margin:0 auto 21px}.pos-coming-card h1{font-size:31px;letter-spacing:-1px;margin:10px 0}.pos-coming-card p{color:#aebbd7;font-size:12px;line-height:1.8;max-width:550px;margin:0 auto}.progress-steps{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:28px 0}.progress-steps span{font-size:9px;padding:8px 10px;border-radius:20px;background:rgba(255,255,255,.07);color:#8e9dbf}.progress-steps .done{color:#7fe0bc}.progress-steps .active{background:rgba(80,113,255,.2);color:#9bb0ff}.inline-btn{width:auto;display:inline-flex;padding:0 20px}

/* 403 */
.error-page{background:#f5f7fb;min-height:100vh;display:grid;place-items:center;padding:25px}.error-card{width:min(490px,100%);background:#fff;border-radius:22px;padding:44px;text-align:center;box-shadow:var(--shadow)}.error-icon{width:70px;height:70px;border-radius:20px;background:#fff0f0;color:#d85858;display:grid;place-items:center;font-size:30px;margin:0 auto}.error-code{font-size:11px;color:#a1aabd;letter-spacing:2px;font-weight:800;margin-top:18px}.error-card h1{font-size:25px;margin:7px 0}.error-card p{font-size:11px;color:var(--muted);margin-bottom:22px}.sidebar-overlay{display:none}

@media(max-width:1100px){
.stat-grid{grid-template-columns:1fr 1fr}.dashboard-grid,.bottom-grid{grid-template-columns:1fr}
}
@media(max-width:850px){
.login-page{grid-template-columns:1fr}.login-hero{display:none}.login-panel{padding:28px;min-height:100vh;background:#f6f8fc}.login-card{background:#fff;border-radius:20px;padding:28px;box-shadow:var(--shadow)}.mobile-brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;margin-bottom:32px}.mobile-brand b{color:var(--blue)}
.sidebar{transform:translateX(-105%);transition:.25s}.sidebar.show{transform:translateX(0)}.main-area{margin-left:0}.mobile-menu{display:grid}.sidebar-overlay{position:fixed;inset:0;background:rgba(3,10,29,.45);z-index:900}.sidebar-overlay.show{display:block}.content{padding:20px}.topbar{padding:0 18px}.topbar p{display:none}
}
@media(max-width:600px){
.stat-grid,.cashier-stats{grid-template-columns:1fr}.welcome-banner{padding:22px;align-items:flex-start}.welcome-date{display:none}.quick-grid{grid-template-columns:1fr}.topbar-actions .pos-shortcut span,.user-meta,.user-trigger>i{display:none}.content{padding:15px}.cashier-hero{padding:24px}.cashier-illustration{display:none}.big-pos-button{width:100%}.login-panel{padding:18px}.login-card{padding:23px}.pos-coming{padding:16px}.pos-coming-top span{display:none}.pos-coming-card{padding:35px 22px}.pos-coming-card h1{font-size:25px}
}


/* =========================================================
   KASIRKU POS - GLOBAL READABILITY / UI SCALE FIX
   Dashboard + Admin
   ========================================================= */

html {
    font-size: 16px;
}

/* Topbar */
.topbar {
    height: 84px;
}

.topbar h1 {
    font-size: 21px;
}

.topbar p {
    font-size: 12px;
}

.pos-shortcut {
    height: 42px;
    font-size: 12px;
    padding: 0 15px;
}

.icon-btn {
    width: 42px;
    height: 42px;
}

.user-meta strong {
    font-size: 12px;
}

.user-meta small {
    font-size: 10px;
}

.avatar {
    width: 38px;
    height: 38px;
    font-size: 13px;
}

/* Sidebar */
.sidebar {
    width: 270px;
}

.main-area {
    margin-left: 270px;
}

.brand-name {
    font-size: 18px;
}

.sidebar-brand small {
    font-size: 10px;
}

.store-badge small {
    font-size: 9px;
}

.store-badge strong {
    font-size: 12px;
}

.nav-caption {
    font-size: 9px;
}

.nav-item {
    height: 46px;
    font-size: 13px;
}

.nav-item i {
    font-size: 17px;
}

.sidebar-footer {
    font-size: 10px;
}

/* Main content */
.content {
    padding: 30px 32px 38px;
}

.welcome-kicker {
    font-size: 10px;
}

.welcome-banner h2,
.cashier-hero h2 {
    font-size: 28px;
}

.welcome-banner p,
.cashier-hero p {
    font-size: 13px;
}

.welcome-date small {
    font-size: 9px;
}

.welcome-date strong {
    font-size: 12px;
}

/* KPI cards */
.stat-card {
    min-height: 112px;
    padding: 20px;
}

.stat-icon {
    width: 50px;
    height: 50px;
    font-size: 21px;
}

.stat-body > span {
    font-size: 11px;
}

.stat-body h3 {
    font-size: 23px;
}

.stat-body h3 em {
    font-size: 11px;
}

.stat-body small {
    font-size: 10px;
}

/* Panels */
.panel {
    padding: 22px;
}

.panel-head h3 {
    font-size: 14px;
}

.panel-head p,
.panel-head > a {
    font-size: 10px;
}

.panel-badge {
    font-size: 9px;
}

/* Quick access */
.quick-grid span {
    font-size: 11px;
}

.quick-grid small {
    font-size: 9px;
}

.quick-grid i {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

/* Empty states */
.empty-state strong {
    font-size: 12px;
}

.empty-state span {
    font-size: 10px;
}

/* Real-time reporting widgets */
.rpt-bar-value,
.rpt-bar-col > span {
    font-size: 9px !important;
}

.rpt-pay-row {
    font-size: 11px !important;
}

.rpt-pay-row strong {
    font-size: 13px !important;
}

.rpt-list-row strong {
    font-size: 11px !important;
}

.rpt-list-row span {
    font-size: 9px !important;
}

.rpt-list-row b {
    font-size: 12px !important;
}

.rpt-rank strong {
    font-size: 11px !important;
}

.rpt-rank small {
    font-size: 9px !important;
}

.rpt-rank b {
    font-size: 11px !important;
}

/* Cashier dashboard */
.big-pos-button {
    width: 290px;
    padding: 14px 17px;
}

.big-pos-button b {
    font-size: 12px;
}

.big-pos-button small {
    font-size: 10px;
}

/* Laptop optimization */
@media (max-width: 1366px) and (min-width: 851px) {
    .sidebar {
        width: 255px;
    }

    .main-area {
        margin-left: 255px;
    }

    .content {
        padding: 24px 26px 32px;
    }
}

/* Mobile */
@media (max-width: 850px) {
    .main-area {
        margin-left: 0;
    }

    .topbar h1 {
        font-size: 18px;
    }

    .content {
        padding: 18px;
    }
}