:root {
    --pos-primary: #0b82d9;
    --pos-primary-dark: #075da6;
    --pos-accent: #19b8e6;
    --pos-success: #16a765;
    --pos-danger: #e55353;
    --pos-warning: #f4a62a;
    --pos-ink: #15283b;
    --pos-muted: #718096;
    --pos-bg: #f2f7fb;
    --pos-card: #ffffff;
    --pos-border: #e2ebf3;
    --pos-sidebar: #14283b;
    --pos-sidebar-2: #0e1e2f;
    --pos-radius: 14px;
    --pos-shadow: 0 10px 35px rgba(20, 56, 87, .08);
}

html { min-height: 100%; }
body.pos-body {
    margin: 0;
    min-height: 100vh;
    background: var(--pos-bg);
    color: var(--pos-ink);
    font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    font-size: 14px;
}
body.pos-body * { box-sizing: border-box; }
body.pos-body a { color: inherit; }

.pos-app { min-height: 100vh; }
.pos-sidebar {
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    bottom: 0;
    width: 255px;
    padding: 18px 14px;
    background: linear-gradient(180deg, var(--pos-sidebar) 0%, var(--pos-sidebar-2) 100%);
    color: #dce9f5;
    box-shadow: 8px 0 30px rgba(10, 28, 45, .12);
    overflow-y: auto;
}
.pos-brand { display:flex; align-items:center; min-height:58px; margin-bottom:18px; }
.pos-brand-link { display:flex; align-items:center; gap:10px; text-decoration:none !important; width:100%; }
.pos-brand-mark {
    width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
    background: linear-gradient(135deg, #17aee8, #0b67c5); color:#fff; font-size:23px; font-weight:800;
    box-shadow: 0 8px 20px rgba(12, 135, 218, .25);
}
.pos-brand-copy { display:flex; flex-direction:column; min-width:0; }
.pos-brand-copy strong { color:#fff; font-size:15px; line-height:1.2; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-brand-copy small { color:#8fa9be; font-size:10px; margin-top:4px; }
.pos-sidebar-close { display:none; margin-left:auto; border:0; background:transparent; color:#fff; font-size:18px; }
.pos-nav-label { padding: 16px 12px 8px; color:#7891a6; font-size:10px; font-weight:700; letter-spacing:.12em; }
.pos-nav-label-secondary { margin-top:8px; border-top:1px solid rgba(255,255,255,.08); }
.pos-sidebar-nav { display:flex; flex-direction:column; gap:5px; }
.pos-nav-item {
    display:flex; align-items:center; gap:13px; min-height:45px; padding:0 13px; border-radius:10px;
    color:#c7d7e6; text-decoration:none !important; transition:.2s ease; font-weight:600;
}
.pos-nav-item i { width:20px; text-align:center; color:#91abc0; font-size:15px; }
.pos-nav-item:hover { background:rgba(255,255,255,.07); color:#fff; transform:translateX(2px); }
.pos-nav-item.active { background:linear-gradient(90deg, #0d8ee6, #0b70c7); color:#fff; box-shadow:0 8px 18px rgba(5, 119, 205, .24); }
.pos-nav-item.active i { color:#fff; }
.pos-sidebar-bottom { margin-top:auto; padding-top:20px; }
.pos-online-card { display:flex; align-items:center; gap:10px; padding:11px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.055); border-radius:12px; }
.pos-online-card strong { display:block; color:#fff; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:145px; }
.pos-online-card small { display:block; margin-top:4px; color:#8da5b9; font-size:10px; }
.pos-status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#21c77a; margin-right:4px; }

.pos-main-shell { min-height:100vh; margin-left:255px; }
.pos-topbar {
    position:sticky; top:0; z-index:900; min-height:66px; display:flex; align-items:center; gap:14px;
    padding:10px 26px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--pos-border); backdrop-filter:blur(12px);
}
.pos-menu-toggle { display:none; width:40px; height:40px; border:0; border-radius:10px; background:#edf5fb; color:var(--pos-primary); }
.pos-search { width:480px; max-width:46vw; height:40px; display:flex; align-items:center; gap:9px; padding:0 10px 0 13px; border:1px solid #dce7f0; background:#f7fafc; border-radius:11px; }
.pos-search i { color:#6d8498; }
.pos-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--pos-ink); }
.pos-search input::placeholder { color:#9aabba; }
.pos-shortcut { padding:4px 7px; border:1px solid #d9e5ee; border-radius:6px; background:#fff; color:#7a8b9a; font-size:10px; white-space:nowrap; }
.pos-topbar-spacer { flex:1; }
.pos-topbar-info { display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; min-width:130px; }
.pos-date { color:#738699; font-size:10px; display:flex; gap:5px; align-items:center; margin-bottom:4px; }
.pos-topbar-info strong { color:var(--pos-ink); font-size:17px; letter-spacing:.04em; }
.pos-topbar-divider { width:1px; height:30px; background:#e2e9ef; }
.pos-icon-btn { position:relative; width:38px; height:38px; border:0; background:transparent; color:#5e7387; border-radius:10px; }
.pos-icon-btn:hover { background:#f1f6fa; }
.pos-notification-dot { position:absolute; top:1px; right:1px; min-width:17px; height:17px; display:grid; place-items:center; border-radius:20px; background:#e55353; color:#fff; font-size:9px; border:2px solid #fff; }
.pos-user-trigger { display:flex !important; align-items:center; gap:9px; padding:4px 3px !important; text-decoration:none !important; }
.pos-avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#16a8e5,#0b69c5); color:#fff; font-weight:800; }
.pos-avatar-sm { width:34px; height:34px; font-size:13px; }
.pos-user-copy { display:flex; flex-direction:column; min-width:70px; }
.pos-user-copy strong { font-size:12px; color:var(--pos-ink); }
.pos-user-copy small { font-size:10px; color:#8a9aaa; margin-top:2px; }
.pos-user-trigger > i { color:#8193a3; font-size:10px; }
.pos-user-dropdown { min-width:190px; margin-top:9px !important; padding:7px; border:1px solid var(--pos-border); border-radius:12px; box-shadow:var(--pos-shadow); }
.pos-user-dropdown li a { border-radius:8px; padding:10px 12px; }
.pos-user-dropdown li a i { width:20px; color:var(--pos-primary); }
.pos-user-dropdown .pos-logout-form { margin:0; }
.pos-user-dropdown .pos-logout-button { width:100%; border:0; border-radius:8px; padding:10px 12px; background:transparent; color:inherit; text-align:left; }
.pos-user-dropdown .pos-logout-button:hover,
.pos-user-dropdown .pos-logout-button:focus { background:#f3f7fb; outline:0; }
.pos-user-dropdown .pos-logout-button i { width:20px; color:var(--pos-primary); }

.pos-main-content { padding: 24px 26px 18px; min-height:calc(100vh - 120px); }
.pos-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.pos-breadcrumb { display:flex; align-items:center; gap:8px; color:#8a9aaa; font-size:11px; margin-bottom:6px; }
.pos-breadcrumb a { color:var(--pos-primary); text-decoration:none; }
.pos-breadcrumb i { font-size:8px; }
.pos-page-heading h1 { margin:0; font-size:26px; font-weight:800; letter-spacing:-.02em; }
.pos-page-heading p { margin:5px 0 0; color:#718497; }
.pos-page-clock { padding:8px 12px; border-radius:10px; background:#fff; border:1px solid var(--pos-border); color:var(--pos-primary); font-weight:800; font-size:18px; box-shadow:0 4px 15px rgba(24,66,99,.05); }
.pos-footer { display:flex; justify-content:space-between; gap:15px; padding:14px 26px 22px; color:#8192a2; font-size:11px; }

/* Bootstrap compatibility / global modern cards */
.pos-body .container-fluid, .pos-body .container { width:100%; max-width:none; padding-left:0; padding-right:0; }
.pos-body .row { margin-left:-7px; margin-right:-7px; }
.pos-body [class*="col-"] { padding-left:7px; padding-right:7px; }
.pos-body .panel { border:1px solid var(--pos-border); border-radius:var(--pos-radius); box-shadow:var(--pos-shadow); background:var(--pos-card); overflow:hidden; }
.pos-body .panel-default, .pos-body .panel-danger, .pos-body .panel-primary, .pos-body .panel-success, .pos-body .panel-warning { border-color:var(--pos-border); }
.pos-body .panel-heading { padding:15px 18px; background:#fff; border-bottom:1px solid var(--pos-border); color:var(--pos-ink); font-weight:800; }
.pos-body .panel-body { padding:18px; }
.pos-body .panel-title { font-size:15px; font-weight:800; }
.pos-body .form-control, .pos-body select, .pos-body textarea, .pos-body input[type="text"], .pos-body input[type="number"], .pos-body input[type="password"], .pos-body input[type="file"] {
    min-height:40px; border:1px solid #dbe6ef; border-radius:9px; box-shadow:none; background:#fff; color:var(--pos-ink); transition:.2s ease;
}
.pos-body .form-control:focus, .pos-body select:focus, .pos-body textarea:focus { border-color:#68b8e8; box-shadow:0 0 0 3px rgba(11,130,217,.10); }
.pos-body textarea { resize:vertical; }
.pos-body .form-group { margin-bottom:14px; }
.pos-body label.control-label, .pos-body label { color:#3d5266; font-size:12px; font-weight:800; }
.pos-body .btn { border-radius:9px; border:1px solid transparent; font-weight:700; transition:.2s ease; box-shadow:none; }
.pos-body .btn-primary { background:linear-gradient(135deg,#0b8cdd,#086bc0); border-color:#0b7ed0; color: #fff;}
.pos-body .btn-primary:hover, .pos-body .btn-primary:focus { background:linear-gradient(135deg,#087ec8,#075ca6); }
.pos-body .btn-success { background:#16a765; }
.pos-body .btn-danger { background:#e55353; }
.pos-body .btn-warning { background:#f2a72b; }
.pos-body .btn-default { background:#fff; border-color:#dbe5ee; color:#42586c; }
.pos-body .btn-default:hover { background:#f4f8fb; }
.pos-body .alert { border-radius:10px; border:1px solid transparent; }
.pos-body .table-responsive { border:0; }
.pos-body .table { margin-bottom:0; color:#34495b; }
.pos-body .table > thead > tr > th { background:#f5f9fc; color:#50677b; border-bottom:1px solid #dfe8ef; font-size:11px; font-weight:800; letter-spacing:.02em; padding:12px 10px; white-space:nowrap; }
.pos-body .table > tbody > tr > td { padding:11px 10px; vertical-align:middle; border-color:#edf2f6; }
.pos-body .table-striped > tbody > tr:nth-of-type(odd) { background:#fbfdff; }
.pos-body .table-hover > tbody > tr:hover { background:#f0f8fd; }
.pos-body .pagination > li > a, .pos-body .pagination > li > span { border-color:#dce6ee; color:var(--pos-primary); }
.pos-body .pagination > .active > a { background:var(--pos-primary); border-color:var(--pos-primary); color: #fff;}
.pos-body .dataTables_wrapper { padding:2px 0; }
.pos-body .dataTables_filter input { margin-left:7px; min-height:35px; }
.pos-body .dataTables_length select { min-height:35px; }
.pos-body .modal-content { border:0; border-radius:15px; overflow:hidden; box-shadow:0 25px 70px rgba(17,44,68,.2); }
.pos-body .modal-header { padding:17px 20px; background:#f7fafc; border-bottom:1px solid var(--pos-border); }
.pos-body .modal-title { font-weight:800; }
.pos-body .modal-body { padding:20px; }
.pos-body .modal-footer { border-top:1px solid var(--pos-border); background:#fbfdff; }

/* Transaction page */
.pos-page-penjualan .pos-main-content > .container-fluid { margin-top:0 !important; }
.pos-page-penjualan .container-fluid > .col-md-2 { width:100%; padding:0; }
.pos-page-penjualan .container-fluid > .col-md-10 { width:100%; padding:0; }
.pos-page-penjualan .jamdigital { display:none; }
.pos-page-penjualan .container-fluid > .col-md-2 > .panel { margin-bottom:14px; }
.pos-page-penjualan #id_pelanggan { max-width:100%; }
.pos-page-penjualan .container-fluid > .col-md-2 > input.form-control { display:none; }
.pos-page-penjualan .panel-danger { border-color:var(--pos-border); }
.pos-page-penjualan #TabelTransaksi { border:1px solid var(--pos-border); border-radius:12px; overflow:hidden; }
.pos-page-penjualan #TabelTransaksi thead th { text-align:center !important; background:#f4f8fb; }
.pos-page-penjualan #TabelTransaksi td { background:#fff; }
.pos-page-penjualan #TabelTransaksi tbody input { min-height:36px; }
.pos-page-penjualan .TotalBayar { display:flex; align-items:center; justify-content:space-between; min-height:72px; margin:14px 0; padding:12px 16px; border:0; border-radius:12px; background:linear-gradient(135deg,#eaf7ff,#d6f0fb) !important; color:#0b5f89; }
.pos-page-penjualan .TotalBayar h2 { margin:0; font-size:27px; font-weight:800 !important; }
.pos-page-penjualan #BarisBaru { width:43px; height:43px; padding:0; border-radius:11px; color:#fff; background:var(--pos-primary); border:0; }
.pos-page-penjualan #Simpann { min-height:44px; font-weight:800 !important; }
.pos-page-penjualan .col-sm-9, .pos-page-penjualan .col-sm-3 { padding-top:0 !important; }
.pos-page-penjualan #catatan { background:#fff !important; }
.pos-page-penjualan .footer { display:none; }
.pos-page-penjualan .table-responsive { overflow-x:auto; }
.pos-page-penjualan .container-fluid > .col-md-2 .panel-body { padding:15px; }

/* Legacy pages that still use a container-first structure */
.pos-page-datapenjualan .container-fluid,
.pos-page-piutang .container-fluid,
.pos-page-barang .container-fluid,
.pos-page-pelanggan .container-fluid,
.pos-page-laporan .container-fluid,
.pos-page-supplier .container,
.pos-page-pengguna .container { margin-top:0 !important; }
.pos-page-datapenjualan .panel, .pos-page-piutang .panel, .pos-page-barang .panel, .pos-page-pelanggan .panel, .pos-page-supplier .panel, .pos-page-pengguna .panel, .pos-page-laporan .panel { margin-bottom:16px; }
.pos-page-datapenjualan .panel-danger { border-color:var(--pos-border); }
.pos-page-pelanggan .form-group, .pos-page-supplier .form-group { margin-bottom:12px; }
.pos-page-laporan .btn-danger { width:100%; font-weight:800; }

/* Action links / status badges */
.pos-body .btn-sm { min-height:32px; }
.pos-body .badge { border-radius:20px; padding:5px 9px; }
.pos-body .label { border-radius:12px; padding:5px 8px; }
.pos-body .alert-success { background:#eaf9f1; color:#167346; border-color:#c9efd9; }
.pos-body .alert-danger { background:#fff0f0; color:#a73b3b; border-color:#f6d0d0; }
.pos-body .alert-warning { background:#fff8e8; color:#8a5a10; border-color:#f5dfae; }
.pos-body .alert-info { background:#eaf7ff; color:#155d84; border-color:#c9e8f8; }

/* Login */
body.pos-login-body { min-height:100vh; margin:0; background:radial-gradient(circle at 15% 20%, #1db6eb 0, transparent 32%), linear-gradient(135deg,#0b2035 0%,#0c5c8a 52%,#0ba8dd 100%); font-family:'Ubuntu',Arial,sans-serif; }
.pos-login-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:28px; }
.pos-login-card { width:min(920px,100%); min-height:510px; display:grid; grid-template-columns:42% 58%; overflow:hidden; border-radius:24px; background:#fff; box-shadow:0 35px 90px rgba(2,24,43,.35); }
.pos-login-brand { position:relative; display:flex; flex-direction:column; justify-content:center; padding:45px; color:#fff; background:linear-gradient(160deg,#087ac8,#0b3152); overflow:hidden; }
.pos-login-brand:after { content:""; position:absolute; width:260px; height:260px; right:-110px; bottom:-100px; border-radius:50%; background:rgba(23,184,230,.25); }
.pos-login-brand-mark { width:68px; height:68px; display:grid; place-items:center; border-radius:19px; background:linear-gradient(135deg,#18bce9,#0b67c5); font-size:36px; font-weight:800; box-shadow:0 15px 30px rgba(0,0,0,.2); }
.pos-login-brand h1 { margin:22px 0 8px; font-size:31px; font-weight:800; text-transform:uppercase; }
.pos-login-brand p { color:#bcd6e8; line-height:1.6; margin:0; }
.pos-login-points { margin:30px 0 0; padding:0; list-style:none; }
.pos-login-points li { margin:13px 0; color:#dcecf7; }
.pos-login-points i { color:#3fd09a; margin-right:8px; }
.pos-login-form { display:flex; flex-direction:column; justify-content:center; padding:55px; }
.pos-login-form h2 { margin:0 0 8px; font-size:26px; font-weight:800; color:var(--pos-ink); }
.pos-login-form .pos-login-subtitle { margin:0 0 28px; color:#8090a0; }
.pos-login-field { position:relative; margin-bottom:16px; }
.pos-login-field i { position:absolute; left:14px; top:13px; color:#8aa0b2; }
.pos-login-field .form__input { width:100%; height:45px; margin:0; padding:0 14px 0 42px; border:1px solid #dbe6ef; border-radius:10px; outline:0; background:#f9fbfd; }
.pos-login-field .form__input:focus { border-color:#56b1e4; box-shadow:0 0 0 3px rgba(11,130,217,.1); background:#fff; }
.pos-login-submit { width:100%; height:46px; margin-top:8px; border:0; border-radius:10px; background:linear-gradient(135deg,#0b8cdd,#086bc0); color:#fff; font-weight:800; }
#ResponseInput { margin-top:12px; }

@media (max-width:1199px) {
    .pos-topbar { padding-left:18px; padding-right:18px; }
    .pos-main-content { padding-left:18px; padding-right:18px; }
    .pos-search { width:350px; }
}
@media (max-width:991px) {
    .pos-sidebar { transform:translateX(-105%); transition:.25s ease; }
    .pos-sidebar-open .pos-sidebar { transform:translateX(0); }
    .pos-sidebar-close { display:block; }
    .pos-sidebar-overlay { display:block; position:fixed; inset:0; z-index:1040; background:rgba(10,25,39,.48); opacity:0; visibility:hidden; transition:.2s ease; }
    .pos-sidebar-open .pos-sidebar-overlay { opacity:1; visibility:visible; }
    .pos-main-shell { margin-left:0; }
    .pos-menu-toggle { display:block; }
    .pos-search { max-width:none; width:auto; flex:1; }
    .pos-topbar-info, .pos-topbar-divider { display:none; }
    .pos-page-heading h1 { font-size:22px; }
    .pos-login-card { grid-template-columns:1fr; max-width:520px; }
    .pos-login-brand { display:none; }
}
@media (max-width:767px) {
    .pos-topbar { gap:8px; min-height:58px; padding:8px 12px; }
    .pos-shortcut, .pos-user-copy, .pos-user-trigger > i { display:none; }
    .pos-main-content { padding:16px 12px; }
    .pos-page-heading { align-items:flex-start; }
    .pos-page-clock { display:none; }
    .pos-footer { padding:12px; flex-direction:column; }
    .pos-body .panel-body { padding:13px; }
    .pos-page-penjualan .container-fluid > .col-md-2 .panel-body { padding:13px; }
    .pos-login-shell { padding:14px; }
    .pos-login-form { padding:32px 24px; }
}

/* Error template */
body.pos-error-page { min-height:100vh; margin:0; display:flex; align-items:center; justify-content:center; padding:24px; background:#f2f7fb; font-family:'Ubuntu',Arial,sans-serif; color:#15283b; }
.pos-error-card { width:min(900px,100%); display:flex; gap:18px; padding:26px; background:#fff; border:1px solid #e2ebf3; border-radius:16px; box-shadow:0 15px 45px rgba(20,56,87,.1); }
.pos-error-icon { width:48px; height:48px; flex:0 0 48px; display:grid; place-items:center; border-radius:13px; background:#fff0f0; color:#e55353; font-size:20px; }
.pos-error-card h1 { margin:0 0 15px; font-size:23px; }
.pos-error-card p { margin:8px 0; line-height:1.55; }
.pos-error-card strong { display:inline-block; min-width:105px; }
.pos-body .js-order-type, .pos-body .js-money-value { font-size:15px; padding-top:8px; display:inline-block; }
.pos-body .pos-modal-divider { margin:10px 0 8px; border:0; border-top:1px solid var(--pos-border); }


/* Transaction responsive layout */
.pos-page-penjualan .pos-main-content > .container-fluid { display:block; width:100%; min-width:0; }
.pos-page-penjualan .pos-main-content > .container-fluid::after { content:""; display:table; clear:both; }
.pos-page-penjualan .pos-main-content > .container-fluid > .col-md-2 { width:24%; float:left; padding:0 7px 0 0; }
.pos-page-penjualan .pos-main-content > .container-fluid > .col-md-10 { width:76%; float:left; padding:0 0 0 7px; }
.pos-page-penjualan .pos-main-content > .container-fluid > .col-md-2 > .panel,
.pos-page-penjualan .pos-main-content > .container-fluid > .col-md-10 > .panel { height:100%; }
.pos-page-penjualan .pos-main-content #TabelTransaksi { min-width:850px; table-layout:auto; }
.pos-page-penjualan .pos-main-content #TabelTransaksi th,
.pos-page-penjualan .pos-main-content #TabelTransaksi td { white-space:nowrap; }
.pos-page-penjualan .pos-main-content #TabelTransaksi th:nth-child(2) { min-width:180px; }
.pos-page-penjualan .pos-main-content #TabelTransaksi th:nth-child(3) { min-width:120px; }
.pos-page-penjualan .pos-main-content #TabelTransaksi th:nth-child(4),
.pos-page-penjualan .pos-main-content #TabelTransaksi th:nth-child(5),
.pos-page-penjualan .pos-main-content #TabelTransaksi th:nth-child(6) { min-width:90px; }
.pos-page-penjualan .pos-main-content #TabelTransaksi td:nth-child(2) { position:relative; }
.pos-page-penjualan .pos-main-content .panel-body { min-width:0; }
.pos-page-penjualan .pos-main-content .TotalBayar { display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 16px; margin-bottom:16px; }
.pos-page-penjualan .pos-main-content .TotalBayar h2 { margin:0 !important; text-align:center; font-size:26px; }
.pos-page-penjualan .pos-main-content .TotalBayar > div { text-align:right; }
.pos-page-penjualan .pos-main-content .form-group textarea { min-height:140px; }
.pos-page-penjualan .pos-main-content .table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media(max-width:991px){
    .pos-page-penjualan .pos-main-content > .container-fluid > .col-md-2,
    .pos-page-penjualan .pos-main-content > .container-fluid > .col-md-10 { width:100%; float:none; padding:0; }
    .pos-page-penjualan .pos-main-content > .container-fluid > .col-md-2 { margin-bottom:14px; }
    .pos-page-penjualan .pos-main-content #TabelTransaksi { min-width:800px; }
}
@media(max-width:600px){
    .pos-page-penjualan .pos-main-content .TotalBayar { grid-template-columns:46px minmax(0,1fr); }
    .pos-page-penjualan .pos-main-content .TotalBayar > div { grid-column:1 / -1; text-align:center; }
    .pos-page-penjualan .pos-main-content .TotalBayar h2 { font-size:22px; }
}

/* Dashboard */
.pos-dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; min-width:0; }
.pos-welcome-card { min-height:190px; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:28px 32px; border-radius:18px; background:linear-gradient(135deg,#0b6fc0,#0a9bd8); color:#fff; box-shadow:0 18px 40px rgba(7,106,177,.18); overflow:hidden; position:relative; }
.pos-welcome-card:after { content:""; position:absolute; width:330px; height:330px; right:-140px; top:-180px; border-radius:50%; background:rgba(255,255,255,.09); }
.pos-eyebrow { font-size:10px; letter-spacing:.16em; font-weight:800; opacity:.75; }
.pos-welcome-card h2 { margin:8px 0 7px; font-size:25px; font-weight:800; }
.pos-welcome-card p { max-width:650px; margin:0 0 18px; color:#d7eefb; line-height:1.6; }
.pos-welcome-card .btn { background:#fff; color:#0a6eb8; border:0; }
.pos-welcome-card .btn:hover, .pos-welcome-card .btn:focus { background:linear-gradient(135deg,#087ec8,#075ca6); color: #fff }
.pos-welcome-icon { width:110px; height:110px; flex:0 0 110px; display:grid; place-items:center; border-radius:30px; background:rgba(255,255,255,.13); font-size:48px; position:relative; z-index:1; }
.pos-dashboard-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pos-dashboard-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.pos-dashboard-metric { min-width:0; display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--pos-border); border-radius:14px; background:#fff; box-shadow:0 8px 25px rgba(20,56,87,.05); text-decoration:none !important; transition:.18s ease; }
a.pos-dashboard-metric:hover { transform:translateY(-2px); border-color:#b8dff3; box-shadow:0 12px 28px rgba(20,56,87,.09); }
.pos-dashboard-metric > div { min-width:0; display:flex; flex-direction:column; gap:3px; }
.pos-dashboard-metric small { color:#8292a1; font-size:9px; font-weight:800; line-height:1.35; letter-spacing:.045em; }
.pos-dashboard-metric strong { color:var(--pos-ink); font-size:clamp(14px,1.3vw,19px); line-height:1.3; white-space:nowrap; }
.pos-dashboard-metric em { color:#8192a2; font-size:10px; font-style:normal; }
.pos-metric-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:12px; font-size:16px; }
.pos-metric-icon.blue { background:#e8f5ff; color:#0b82d9; }
.pos-metric-icon.green { background:#e8f8f0; color:#17a765; }
.pos-metric-icon.purple { background:#f1edff; color:#7559d9; }
.pos-metric-icon.red { background:#ffebed; color:#dc3545; }
.pos-metric-icon.orange { background:#fff3e4; color:#df8c19; }
.pos-stat-card { display:flex; align-items:center; gap:12px; padding:17px; background:#fff; border:1px solid var(--pos-border); border-radius:14px; box-shadow:0 8px 25px rgba(20,56,87,.05); text-decoration:none !important; transition:.2s ease; }
.pos-stat-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(20,56,87,.09); }
.pos-stat-card > span:last-child { min-width:0; display:flex; flex-direction:column; }
.pos-stat-card small { font-size:9px; color:#92a0ad; font-weight:800; letter-spacing:.08em; }
.pos-stat-card strong { font-size:16px; color:var(--pos-ink); margin:2px 0; }
.pos-stat-card em { font-size:10px; color:#8192a2; font-style:normal; }
.pos-stat-icon { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:12px; font-size:17px; }
.pos-stat-icon.blue { background:#e8f5ff; color:#0b82d9; } .pos-stat-icon.purple { background:#f1edff; color:#7559d9; } .pos-stat-icon.green { background:#e8f8f0; color:#17a765; } .pos-stat-icon.orange { background:#fff3e4; color:#df8c19; }
.pos-dashboard-panel { min-width:0; background:#fff; border:1px solid var(--pos-border); border-radius:15px; box-shadow:var(--pos-shadow); padding:20px; }
.pos-dashboard-panel-head h3 { margin:0; font-size:16px; font-weight:800; } .pos-dashboard-panel-head p { margin:5px 0 17px; color:#8292a1; font-size:12px; }
.pos-recent-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.pos-recent-head .btn { flex:0 0 auto; border-radius:8px; font-size:11px; font-weight:700; }
.pos-recent-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pos-recent-table { min-width:800px; margin-bottom:0; }
.pos-recent-table thead th { color:#526d84; background:#f4f8fb; font-size:10px; white-space:nowrap; }
.pos-recent-table tbody td { vertical-align:middle; font-size:12px; white-space:nowrap; }
.pos-sale-status { display:inline-block; padding:5px 9px; border-radius:12px; font-size:10px; font-weight:800; }
.pos-sale-status.paid { color:#087c48; background:#e5f7ee; }
.pos-sale-status.unpaid { color:#8c6100; background:#fff2d2; }
.pos-sale-status.cancelled { color:#a62b32; background:#ffebed; }
.pos-dashboard-empty { padding:25px 12px; color:#8393a2; text-align:center; font-size:12px; }
.pos-quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.pos-quick-grid a { display:flex; flex-direction:column; gap:5px; padding:16px; border:1px solid #e6edf3; border-radius:11px; text-decoration:none !important; background:#fbfdff; }
.pos-quick-grid a:hover { border-color:#b8dff3; background:#f4fbff; }
.pos-quick-grid i { color:var(--pos-primary); font-size:18px; margin-bottom:5px; } .pos-quick-grid span { font-weight:800; color:var(--pos-ink); } .pos-quick-grid small { color:#8494a3; }
@media (max-width:1199px) { .pos-dashboard-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:991px) { .pos-dashboard-cards,.pos-quick-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .pos-welcome-card { padding:22px; } .pos-welcome-icon { display:none; } .pos-dashboard-cards,.pos-quick-grid { grid-template-columns:1fr; } .pos-dashboard-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .pos-dashboard-metric { align-items:flex-start; gap:8px; padding:12px 10px; } .pos-metric-icon { width:34px; height:34px; flex-basis:34px; font-size:14px; } .pos-dashboard-metric small { font-size:8px; } .pos-dashboard-metric strong { font-size:13px; white-space:normal; overflow-wrap:anywhere; } .pos-dashboard-metric em { font-size:9px; } .pos-recent-head { flex-direction:column; } }

/* Dashboard sales chart */
.pos-sales-chart-panel { overflow:hidden; min-width:0; }
.pos-chart-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.pos-chart-head h3 i { margin-right:7px; }
.pos-chart-tabs { display:flex; gap:6px; background:#edf4f9; padding:4px; border-radius:10px; flex-shrink:0; border:1px solid #dce8f0; }
.pos-chart-tab { border:1px solid transparent; background:transparent; color:#5f7386; border-radius:7px; padding:8px 14px; font-size:12px; font-weight:800; cursor:pointer; transition:.15s ease; }
.pos-chart-tab:hover { background:#e8f1f8; color:#1689d8; }
.pos-chart-tab.active { background:linear-gradient(135deg,#0b8cdd,#086bc0); border-color:#0879c9; color:#fff; box-shadow:0 3px 8px rgba(22,137,216,.22); }
.pos-chart-summary { display:flex; gap:28px; margin:2px 0 10px; }
.pos-chart-summary div { display:flex; flex-direction:column; gap:3px; }
.pos-chart-summary small { font-size:9px; color:#8b99a8; font-weight:800; letter-spacing:.6px; }
.pos-chart-summary strong { color:#17334d; font-size:17px; }
.pos-chart-wrap { position:relative; width:100%; min-width:0; height:340px; max-height:340px; overflow:hidden; box-sizing:border-box; contain:layout paint size; } .pos-chart-wrap canvas { display:block; width:100% !important; height:340px !important; max-height:340px !important; }
#posSalesChart { display:block; width:100% !important; max-width:100% !important; height:340px !important; max-height:340px !important; min-width:0; box-sizing:border-box; }
.pos-chart-empty { position:absolute; inset:0; align-items:center; justify-content:center; color:#8b99a8; font-size:13px; font-weight:700; }
@media (max-width:700px) {
    .pos-chart-head { flex-direction:column; }
    .pos-chart-tabs { width:100%; }
    .pos-chart-tab { flex:1; }
    .pos-chart-summary { gap:18px; }
}
/* One shared action-button style for every DataTable action cell. */
.dataTables_wrapper .dt-action-btn {
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 2px 3px;
    padding: 0 12px !important;
    border-radius: 8px !important;
    line-height: 1.2;
    vertical-align: middle;
    text-decoration: none !important;
    white-space: nowrap;
}
.dataTables_wrapper .dt-action-btn.dt-action-icon {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
}
.dataTables_wrapper .dt-action-btn > i:only-child {
    width: 16px;
    text-align: center;
}
.dataTables_wrapper .dt-action-btn:focus-visible {
    outline: 3px solid rgba(11, 130, 217, .3);
    outline-offset: 2px;
}
.dataTables_wrapper .dt-action-btn:disabled,
.dataTables_wrapper .dt-action-btn[disabled] {
    cursor: not-allowed;
    opacity: .55;
}
.dataTables_wrapper .dt-action-btn.btn-primary {
    color: #fff !important;
    background: #0b82d9 !important;
    border-color: #0878ca !important;
}
.dataTables_wrapper .dt-action-btn.btn-primary:hover,
.dataTables_wrapper .dt-action-btn.btn-primary:focus {
    color: #fff !important;
    background: #086fc0 !important;
    border-color: #075fa6 !important;
}
.dataTables_wrapper .dt-action-btn.btn-success {
    color: #fff !important;
    background: #16a765 !important;
    border-color: #12985a !important;
}
.dataTables_wrapper .dt-action-btn.btn-success:hover,
.dataTables_wrapper .dt-action-btn.btn-success:focus {
    color: #fff !important;
    background: #118a52 !important;
    border-color: #0f7a49 !important;
}
.dataTables_wrapper .dt-action-btn.btn-delete {
    color: #fff !important;
    background: #e55353 !important;
    border-color: #d74444 !important;
}
.dataTables_wrapper .dt-action-btn.btn-delete:hover,
.dataTables_wrapper .dt-action-btn.btn-delete:focus {
    color: #fff !important;
    background: #ce3f3f !important;
    border-color: #bd3636 !important;
}
.dataTables_wrapper .dt-action-btn.btn-default {
    color: #111827 !important;
    background: #fff !important;
    border-color: #dbe5ee !important;
}
.dataTables_wrapper .dt-action-btn.btn-default:hover,
.dataTables_wrapper .dt-action-btn.btn-default:focus {
    color: #111827 !important;
    background: #f2f6fa !important;
    border-color: #c6d5e2 !important;
}
.dataTables_wrapper .user-row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}
/* Joined Bootstrap-style groups for rows with multiple DataTable actions. */
.dataTables_wrapper .dt-action-group {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    vertical-align: middle;
    white-space: nowrap;
}
.dataTables_wrapper .dt-action-group > * + * { margin-left: -1px !important; }
.dataTables_wrapper .dt-action-group > form { display: inline-flex; margin: 0; }
.dataTables_wrapper .dt-action-group > .dt-action-btn,
.dataTables_wrapper .dt-action-group > form > .dt-action-btn {
    position: relative;
    margin: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 0 !important;
}
.dataTables_wrapper .dt-action-group > :first-child,
.dataTables_wrapper .dt-action-group > :first-child > .dt-action-btn {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}
.dataTables_wrapper .dt-action-group > :last-child,
.dataTables_wrapper .dt-action-group > :last-child > .dt-action-btn {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
.dataTables_wrapper .dt-action-group > .dt-action-btn:hover,
.dataTables_wrapper .dt-action-group > .dt-action-btn:focus,
.dataTables_wrapper .dt-action-group > form > .dt-action-btn:hover,
.dataTables_wrapper .dt-action-group > form > .dt-action-btn:focus { z-index: 2; }