/* ═══════════════════════════════════════════════════════════════
   PGT-POS v2 — Providence Supplies POS System
   Brand: Navy (#1a2744) + Red (#dc2626) + Cool Grey
   Font: Plus Jakarta Sans — modern geometric humanist
   Dev: PixelGrid Technologies
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&family=Oswald:wght@400;500;600;700&display=swap');

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
    --sidebar-w: 256px;
    --sidebar-mini: 68px;
    --topbar-h: 58px;

    /* Brand */
    --navy:     #0f1729;
    --navy-d:   #0a1020;
    --navy-dd:  #060b16;
    --accent:   #0ea5e9;
    --accent-d: #0284c7;
    --accent-l: #e0f2fe;
    --accent-50:#f0f9ff;
    --red:      #dc2626;

    /* Neutral */
    --n950:#030712;--n900:#111827;--n800:#1f2937;--n700:#374151;
    --n600:#4b5563;--n500:#6b7280;--n400:#9ca3af;--n300:#d1d5db;
    --n200:#e5e7eb;--n100:#f3f4f6;--n50:#f9fafb;--white:#fff;

    /* Semantic */
    --green:#059669;--green-bg:#ecfdf5;
    --amber:#d97706;--amber-bg:#fffbeb;
    --rose:#e11d48;--rose-bg:#fff1f2;
    --violet:#7c3aed;--violet-bg:#f5f3ff;
    --teal:#0891b2;--teal-bg:#ecfeff;

    /* Surfaces */
    --body-bg:#f0f2f5;
    --surface:#fff;
    --border:#e5e7eb;

    /* Text */
    --t1:#111827;--t2:#4b5563;--t3:#9ca3af;

    /* Font */
    --f:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

    /* Radius */
    --r4:4px;--r6:6px;--r8:8px;--r12:12px;--r16:16px;--r99:9999px;

    /* Shadow */
    --s1:0 1px 2px rgba(0,0,0,.05);
    --s2:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
    --s3:0 4px 6px -1px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.06);
    --s4:0 10px 15px -3px rgba(0,0,0,.06),0 4px 6px rgba(0,0,0,.03);
    --s5:0 20px 25px -5px rgba(0,0,0,.08),0 8px 10px -6px rgba(0,0,0,.04);
}

/* ── Reset ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--f);font-size:13.5px;line-height:1.6;color:var(--t1);background:var(--body-bg);margin:0;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;transition:.15s}a:hover{color:var(--accent-d)}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:8px;height:10px}
::-webkit-scrollbar-track{background:var(--n100);border-radius:4px}
::-webkit-scrollbar-thumb{background:var(--n400);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--n500)}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.sidebar{
    position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;
    background:linear-gradient(180deg,#0f2027 0%,#173347 40%,#1a3a5c 100%);
    display:flex;flex-direction:column;z-index:1040;
    transition:width .22s cubic-bezier(.4,0,.2,1);overflow:hidden;
    box-shadow:2px 0 24px rgba(0,0,0,.2);
}

.sidebar-header{
    display:flex;align-items:center;justify-content:center;
    padding:0;min-height:var(--topbar-h);flex-shrink:0;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar-brand{display:flex;align-items:center;width:100%;justify-content:center;padding:15px;}
.sidebar-brand img{width:100%;max-height:85px;flex-shrink:0;transition:.2s;object-fit:contain}
.btn-sidebar-close{background:none;border:none;color:var(--n400);font-size:20px;cursor:pointer;padding:4px;line-height:1;position:absolute;right:10px;top:10px;z-index:10}

.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 0}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08)}
.nav-group{margin-bottom:4px}
.nav-group-label{
    padding:16px 20px 5px;font-size:12px;font-weight:600;font-family:'Oswald',sans-serif;
    text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,0.95) !important;
    white-space:nowrap;transition:opacity .2s;
}
.nav-item{
    display:flex;align-items:center;gap:10px;
    padding:9px 14px;margin:1px 10px;
    color:rgba(255,255,255,.95);font-size:12.5px;font-weight:500;font-family:'Plus Jakarta Sans',sans-serif;text-transform:uppercase;letter-spacing:0.5px;
    border-radius:var(--r8);transition:all .15s;cursor:pointer;white-space:nowrap;
}
.nav-item:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.95)}
.nav-item.active{
    background:linear-gradient(135deg,#0ea5e9,#8b5cf6);color:#fff;
    box-shadow:0 2px 12px rgba(14,165,233,.3);
}
.nav-item i{font-size:16px;width:20px;text-align:center;flex-shrink:0;opacity:.55;transition:.15s}
.nav-item:hover i{opacity:.85}
.nav-item.active i{opacity:1}

/* Sidebar footer */
.sidebar-footer{padding:14px 16px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}
.dev-credit{display:flex;flex-direction:column;align-items:center;gap:3px;transition:opacity .2s}
.dev-credit img{height:18px;opacity:.2;transition:opacity .2s}
.dev-credit img:hover{opacity:.45}
.dev-credit small{font-size:10px;color:rgba(255,255,255,.15)}

/* ── Mini Mode ───────────────────────────────────────────────── */
body.sidebar-mini .sidebar{width:var(--sidebar-mini)}
body.sidebar-mini .main-content{margin-left:var(--sidebar-mini)}
body.sidebar-mini .sidebar .nav-group-label,
body.sidebar-mini .sidebar .nav-item span,
body.sidebar-mini .sidebar .sidebar-footer .dev-credit{opacity:0;width:0;overflow:hidden;white-space:nowrap}
body.sidebar-mini .sidebar .sidebar-header{padding:18px 8px}
body.sidebar-mini .sidebar .sidebar-brand img{height:28px}
body.sidebar-mini .sidebar .nav-item{justify-content:center;padding:10px 0;margin:2px 6px}
body.sidebar-mini .sidebar .nav-item i{font-size:17px;margin:0;opacity:.6}
body.sidebar-mini .sidebar .nav-item.active i{opacity:1}
body.sidebar-mini .sidebar .nav-item{position:relative}
body.sidebar-mini .sidebar .nav-item::after{
    content:attr(data-title);position:absolute;left:calc(var(--sidebar-mini) - 6px);top:50%;
    transform:translateY(-50%);background:var(--n800);color:#fff;padding:5px 12px;
    border-radius:var(--r6);font-size:11.5px;font-weight:600;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .12s;z-index:100;box-shadow:var(--s3);
}
body.sidebar-mini .sidebar .nav-item:hover::after{opacity:1}

/* ═══════════════════════════════════════════════════════════════
   MAIN + TOPBAR
   ═══════════════════════════════════════════════════════════════ */
.main-content{margin-left:var(--sidebar-w);min-height:100vh;transition:margin-left .22s cubic-bezier(.4,0,.2,1)}
.top-navbar{
    display:flex;align-items:center;justify-content:space-between;
    height:var(--topbar-h);padding:0 24px;
    background:var(--surface);border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:1020;
}
.page-title{font-size:15px;font-weight:700;color:var(--t1);margin:0;letter-spacing:-.2px}
.btn-hamburger{
    background:none;border:none;font-size:18px;color:var(--t2);
    cursor:pointer;padding:6px 8px;border-radius:var(--r6);margin-right:10px;transition:.15s;
}
.btn-hamburger:hover{background:var(--n100);color:var(--accent)}

.btn-user-menu{
    display:flex;align-items:center;gap:8px;background:var(--surface);
    border:1px solid var(--border);border-radius:var(--r99);
    padding:3px 14px 3px 3px;cursor:pointer;font-size:12.5px;
    font-weight:600;color:var(--t1);transition:.15s;
}
.btn-user-menu:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-l)}
.btn-user-menu::after{font-size:9px}
.user-avatar{
    width:30px;height:30px;border-radius:50%;
    background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;
}
.bg-outline-primary{
    background:var(--accent-50)!important;color:var(--accent-d)!important;
    border:1px solid var(--accent-l);font-weight:600;
    padding:3px 10px;border-radius:var(--r99);font-size:11px;
}
.content-wrapper{padding:22px 24px}

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════════════════════════════ */
.stat-card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r12);padding:20px;display:flex;
    align-items:center;gap:14px;box-shadow:var(--s1);
    transition:all .2s cubic-bezier(.4,0,.2,1);
}
.stat-card:hover{box-shadow:var(--s3);transform:translateY(-2px)}
.stat-icon{
    width:46px;height:46px;border-radius:var(--r12);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;flex-shrink:0;
}
.stat-icon.blue{background:var(--accent-l);color:var(--accent)}
.stat-icon.green{background:var(--green-bg);color:var(--green)}
.stat-icon.orange{background:var(--amber-bg);color:var(--amber)}
.stat-icon.red{background:var(--rose-bg);color:var(--rose)}
.stat-icon.purple{background:var(--violet-bg);color:var(--violet)}
.stat-icon.cyan{background:var(--teal-bg);color:var(--teal)}
.stat-info h3{font-size:20px;font-weight:800;margin:0;line-height:1.2;letter-spacing:-.4px}
.stat-info p{font-size:12px;color:var(--t2);margin:2px 0 0;font-weight:500}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r12);box-shadow:var(--s1);overflow:hidden}
.card-header{background:transparent;border-bottom:1px solid var(--border);padding:14px 20px;font-weight:700;font-size:13.5px}
.card-body{padding:20px}
.nav-tabs{border-bottom:2px solid var(--border)}
.nav-tabs .nav-link{font-weight:600;font-size:13px;color:var(--t2);border:none;padding:10px 18px;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.15s}
.nav-tabs .nav-link:hover{color:var(--t1);border-color:var(--n300)}
.nav-tabs .nav-link.active{color:var(--accent);border-color:var(--accent);background:transparent}

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */
.table{font-size:13px;margin:0}
.table th, .table thead th{
    background:var(--n50);font-weight:700 !important;font-size:10.5px;
    text-transform:uppercase;letter-spacing:.6px;color:var(--t2);
    border-bottom:2px solid var(--border);padding:10px 14px;white-space:nowrap;
}
.table tbody td{
    padding:10px 14px;vertical-align:middle;border-bottom:1px solid var(--n100);
    font-weight: 400 !important;
}
.table tbody td b,
.table tbody td strong,
.table tbody td code,
.table tbody td .fw-bold {
    font-weight: 400 !important;
}
.table tbody tr:hover{background:var(--accent-50)}
.table tbody tr:last-child td{border-bottom:none}

.table-responsive {
    overflow-x: auto;
    /* Removed max-height to eliminate the inner vertical scrollbar */
}

/* Make table headers sticky */
/* Removed due to browser rendering glitches */

/* DataTables */
div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input{border:1px solid var(--border);border-radius:var(--r6);padding:6px 10px;font-size:12.5px}
div.dataTables_wrapper div.dataTables_filter input{width:200px;background:var(--n50)}
div.dataTables_wrapper div.dataTables_filter input:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-l);outline:none}
div.dataTables_wrapper div.dataTables_info{font-size:12px;color:var(--t3)}
div.dataTables_wrapper .dataTables_paginate .paginate_button.current{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;border-radius:var(--r6)}
div.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:var(--accent-50)!important;color:var(--accent)!important;border-radius:var(--r6)}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn{font-size:12.5px;font-weight:600;border-radius:var(--r8);padding:7px 16px;transition:.15s;letter-spacing:.01em}
.btn-primary{background:var(--accent);border-color:var(--accent);box-shadow:0 1px 3px rgba(59,130,246,.2)}
.btn-primary:hover{background:var(--accent-d);border-color:var(--accent-d);box-shadow:0 3px 8px rgba(59,130,246,.25);transform:translateY(-1px)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-icon{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r6)}

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.form-control,.form-select{font-size:13px;border:1px solid var(--border);border-radius:var(--r8);padding:8px 12px;color:var(--t1);transition:.15s}
.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-l)}
.form-label{font-size:12px;font-weight:700;color:var(--t2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.input-group-text{font-size:13px;background:var(--n50);border-color:var(--border);color:var(--t2)}
.modal-header{border-bottom:1px solid var(--border);padding:14px 20px}
.modal-title{font-weight:700;font-size:15px}
.modal-footer{border-top:1px solid var(--border);padding:12px 20px}
.badge{font-weight:600;font-size:10.5px;letter-spacing:.3px;padding:3px 8px;border-radius:var(--r99)}
.alert{font-size:13px;border-radius:var(--r8);padding:12px 16px}

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */
.login-page{
    min-height:100vh;display:flex;
    background:linear-gradient(135deg,#0f2027 0%,#1a3a5c 50%,#2c3e6b 100%);
    position:relative;overflow:hidden;
}

/* Subtle diagonal stripe pattern */
.login-page::before{
    content:'';position:absolute;inset:0;
    background:repeating-linear-gradient(
        -45deg,transparent,transparent 80px,
        rgba(14,165,233,.025) 80px,rgba(14,165,233,.025) 81px
    );
    z-index:0;
}

/* Gradient accents */
.login-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.login-bg .orb{position:absolute;border-radius:50%;filter:blur(100px)}
.login-bg .orb-1{width:500px;height:500px;background:rgba(14,165,233,.18);top:-12%;right:-6%;animation:orbFloat 25s ease-in-out infinite}
.login-bg .orb-2{width:400px;height:400px;background:rgba(139,92,246,.14);bottom:-8%;left:-4%;animation:orbFloat 25s ease-in-out infinite -10s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(25px,-30px) scale(1.04)}}

.login-container{width:100%;max-width:420px;margin:auto;padding:32px 20px;position:relative;z-index:1}

.login-card{
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(40px) saturate(140%);
    -webkit-backdrop-filter:blur(40px) saturate(140%);
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;padding:44px 38px 36px;
    box-shadow:0 25px 50px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08);
}

.login-logo{text-align:center;margin-bottom:32px}
.login-logo img{max-height:60px;width:auto;margin-bottom:8px}
.login-subtitle{color:rgba(255,255,255,.4);font-size:13px;margin:0;font-weight:500}

.login-input-group{position:relative;margin-bottom:14px}
.login-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.3);font-size:15px;z-index:2;pointer-events:none;transition:.2s}
.login-card .form-control{
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
    color:#fff;padding:12px 14px 12px 44px;font-size:13.5px;
    border-radius:var(--r12);transition:.2s;
}
.login-card .form-control::placeholder{color:rgba(255,255,255,.3)}
.login-card .form-control:focus{background:rgba(255,255,255,.07);border-color:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.2);color:#fff}
.login-card .form-control:focus~.login-input-icon{color:var(--accent)}

.btn-login{
    width:100%;padding:13px;font-size:14px;font-weight:700;
    border-radius:var(--r12);letter-spacing:.3px;
    background:linear-gradient(135deg,#0ea5e9,#8b5cf6);border:none;color:#fff;cursor:pointer;
    box-shadow:0 4px 12px rgba(14,165,233,.3);transition:.2s;
}
.btn-login:hover{box-shadow:0 6px 20px rgba(14,165,233,.4);transform:translateY(-1px)}

.login-card .form-check-label{color:rgba(255,255,255,.35);font-size:12.5px}
.login-card .form-check-input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);border-radius:3px}
.login-card .form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.password-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;z-index:2;padding:4px;font-size:15px;transition:.15s}
.password-toggle:hover{color:var(--accent)}

.login-alert{background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.2);color:#fca5a5;border-radius:var(--r8);padding:10px 14px;font-size:12.5px;margin-bottom:14px;display:none}
.login-footer{text-align:center;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06)}
.login-footer a{color:var(--accent);font-size:12.5px;font-weight:500}
.login-footer a:hover{color:#93c5fd}

.login-dev-credit{text-align:center;margin-top:28px}
.login-dev-credit img{height:22px;opacity:.15;transition:opacity .3s}
.login-dev-credit img:hover{opacity:.4}
.login-dev-credit small{display:block;color:rgba(255,255,255,.1);font-size:10.5px;margin-top:4px}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:991.98px){
    .sidebar{transform:translateX(-100%);width:var(--sidebar-w)!important}
    .sidebar.open{transform:translateX(0)}
    .main-content{margin-left:0!important}
    body.sidebar-mini .sidebar{width:var(--sidebar-w)!important;transform:translateX(-100%)}
    body.sidebar-mini .sidebar.open{transform:translateX(0)}
    body.sidebar-mini .sidebar .nav-group-label,
    body.sidebar-mini .sidebar .nav-item span,
    body.sidebar-mini .sidebar .sidebar-footer .dev-credit{opacity:1;width:auto}
    body.sidebar-mini .sidebar .nav-item{justify-content:flex-start;padding:9px 14px}
    body.sidebar-mini .sidebar .nav-item::after{display:none}
    .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1035;backdrop-filter:blur(2px)}
    .sidebar-overlay.active{display:block}
}
@media(max-width:575.98px){.content-wrapper{padding:14px}.login-card{padding:32px 24px 28px}.stat-card{padding:14px}.stat-icon{width:40px;height:40px;font-size:17px}.stat-info h3{font-size:17px}}

/* Utilities */
.cursor-pointer{cursor:pointer}
.action-btns{display:flex;gap:3px;align-items:center}

/* Remove up/down arrows from number inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Override code tags globally to match Product Name style */
code {
  color: var(--t1) !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
}