/* ============================================================
   PilarPOS brand override — warna & font ala QuickBoard.
   Dimuat PALING AKHIR agar menimpa Stisla/Bootstrap.
   TIDAK mengubah layout & ikon (FontAwesome tetap).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

:root{
  --qb-blue:#1d4ed8; --qb-blue-d:#1e40af; --qb-blue-bg:rgba(29,78,216,.10);
  --qb-green:#047857; --qb-green-d:#036249;
  --qb-orange:#b45309; --qb-orange-d:#92400e;
  --qb-red:#b91c1c; --qb-red-d:#991b1b;
  --qb-info:#2563eb; --qb-purple:#6d28d9;
}

/* ---------- Font ---------- */
body, .main-content, .card, .navbar, .sidebar-menu, .btn, input, select, textarea,
.dataTables_wrapper, h1,h2,h3,h4,h5,h6, .section-header h1{
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
h1,h2,h3,h4,h5,h6, .card-header h4, .section-header h1{ letter-spacing:-.3px; font-weight:800; }
body{ -webkit-font-smoothing:antialiased; }

/* ---------- Primary (biru QuickBoard) ---------- */
.btn-primary{ background-color:var(--qb-blue) !important; border-color:var(--qb-blue) !important; }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active{ background-color:var(--qb-blue-d) !important; border-color:var(--qb-blue-d) !important; box-shadow:none !important; }
.btn-outline-primary{ color:var(--qb-blue) !important; border-color:var(--qb-blue) !important; }
.btn-outline-primary:hover{ background-color:var(--qb-blue) !important; color:#fff !important; }
.bg-primary{ background-color:var(--qb-blue) !important; }
.text-primary{ color:var(--qb-blue) !important; }
.badge-primary{ background-color:var(--qb-blue) !important; }
a, a:hover{ color:var(--qb-blue); }
.page-item.active .page-link{ background-color:var(--qb-blue) !important; border-color:var(--qb-blue) !important; }
.page-link{ color:var(--qb-blue); }
.custom-control-input:checked~.custom-control-label::before{ background-color:var(--qb-blue) !important; border-color:var(--qb-blue) !important; }
.form-control:focus, .select2-container--focus .select2-selection{ border-color:var(--qb-blue) !important; box-shadow:0 0 0 .15rem var(--qb-blue-bg) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background-color:var(--qb-blue) !important; }

/* ---------- Kontekstual lain ---------- */
.btn-success,.bg-success,.badge-success{ background-color:var(--qb-green) !important; border-color:var(--qb-green) !important; }
.btn-success:hover{ background-color:var(--qb-green-d) !important; border-color:var(--qb-green-d) !important; }
.text-success{ color:var(--qb-green) !important; }
.btn-warning,.bg-warning,.badge-warning{ background-color:var(--qb-orange) !important; border-color:var(--qb-orange) !important; color:#fff !important; }
.btn-warning:hover{ background-color:var(--qb-orange-d) !important; border-color:var(--qb-orange-d) !important; color:#fff !important; }
.text-warning{ color:var(--qb-orange) !important; }
.btn-danger,.bg-danger,.badge-danger{ background-color:var(--qb-red) !important; border-color:var(--qb-red) !important; }
.btn-danger:hover{ background-color:var(--qb-red-d) !important; border-color:var(--qb-red-d) !important; }
.text-danger{ color:var(--qb-red) !important; }
.btn-info,.bg-info,.badge-info{ background-color:var(--qb-info) !important; border-color:var(--qb-info) !important; }
.btn-info:hover{ background-color:var(--qb-blue-d) !important; border-color:var(--qb-blue-d) !important; }

/* ---------- Header / Navbar (biru QuickBoard yang lebih gelap) ---------- */
.navbar.main-navbar, .main-navbar, .navbar{ background-color:var(--qb-blue) !important;
  background-image:linear-gradient(135deg, var(--qb-blue) 0%, var(--qb-blue-d) 100%) !important; }
.navbar .nav-link, .navbar .navbar-brand, .navbar .navbar-brand span{ color:rgba(255,255,255,.92) !important; }
.navbar .nav-link:hover, .navbar .navbar-brand:hover{ color:#fff !important; }
.navbar .nav-link i{ color:rgba(255,255,255,.9) !important; }
/* Header POS (pakai .pos-topbar custom) */
.pos-topbar{ background:linear-gradient(135deg, var(--qb-blue) 0%, var(--qb-blue-d) 100%) !important; }

/* ---------- Sidebar aktif ---------- */
.main-sidebar .sidebar-menu li.active > a,
.main-sidebar .sidebar-menu li a:hover{ color:var(--qb-blue) !important; }
.main-sidebar .sidebar-menu li.active > a{ font-weight:800; }

/* ---------- Poles halus (tanpa ubah layout) ---------- */
.card{ border-radius:14px; border:1px solid #e6e9f0;
  box-shadow:0 4px 16px rgba(15,23,42,.10),0 1px 3px rgba(15,23,42,.08) !important;
  transition:box-shadow .25s cubic-bezier(.22,1,.36,1), transform .2s cubic-bezier(.22,1,.36,1); }
.card:hover{ box-shadow:0 12px 40px rgba(15,23,42,.14),0 4px 12px rgba(15,23,42,.08) !important; }
/* ---------- Stat card modern (ala QuickBoard) ---------- */
.card-statistic-1{ display:flex !important; align-items:center; gap:16px; padding:20px !important;
  border-radius:16px !important; overflow:hidden; position:relative;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.card-statistic-1:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(15,23,42,.13),0 4px 12px rgba(15,23,42,.08) !important; }
.card-statistic-1::after{ content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--qb-blue); opacity:.9; }
.card-statistic-1 .card-icon{ width:56px !important; height:56px !important; border-radius:15px !important;
  font-size:23px !important; display:flex !important; align-items:center; justify-content:center;
  margin:0 !important; box-shadow:none !important; flex:0 0 auto; }
/* ikon soft-tint (bukan blok warna solid) */
.card-statistic-1 .card-icon.bg-primary{ background:var(--qb-blue-bg) !important; color:var(--qb-blue) !important; }
.card-statistic-1 .card-icon.bg-success{ background:rgba(4,120,87,.12) !important; color:var(--qb-green) !important; }
.card-statistic-1 .card-icon.bg-warning{ background:rgba(180,83,9,.12) !important; color:var(--qb-orange) !important; }
.card-statistic-1 .card-icon.bg-danger{ background:rgba(185,28,28,.12) !important; color:var(--qb-red) !important; }
.card-statistic-1 .card-icon.bg-info{ background:rgba(37,99,235,.12) !important; color:var(--qb-info) !important; }
.card-statistic-1 .card-icon.bg-secondary{ background:rgba(100,116,139,.12) !important; color:#475569 !important; }
/* aksen kiri mengikuti warna ikon */
.card-statistic-1:has(.card-icon.bg-success)::after{ background:var(--qb-green); }
.card-statistic-1:has(.card-icon.bg-warning)::after{ background:var(--qb-orange); }
.card-statistic-1:has(.card-icon.bg-danger)::after{ background:var(--qb-red); }
.card-statistic-1:has(.card-icon.bg-info)::after{ background:var(--qb-info); }
.card-statistic-1:has(.card-icon.bg-secondary)::after{ background:#64748b; }
.card-statistic-1 .card-wrap{ min-width:0; }
.card-statistic-1 .card-wrap .card-header{ padding:0 !important; border:0 !important; background:none !important; min-height:0 !important; }
.card-statistic-1 .card-wrap .card-header h4{ font-size:12.5px !important; color:#64748b !important; font-weight:700 !important; margin:0 0 5px !important; letter-spacing:0 !important; }
.card-statistic-1 .card-wrap .card-body{ padding:0 !important; font-size:23px !important; font-weight:900 !important; letter-spacing:-.6px !important; color:#0c1222 !important; line-height:1.1; }

/* ---------- Card header umum lebih rapi ---------- */
.card .card-header{ border-bottom:1px solid #eef1f6; padding:16px 18px; }
.card .card-header h4{ font-size:14.5px; font-weight:800; }
.card .card-body{ padding:18px; }
.btn{ border-radius:10px; font-weight:700; }
.badge{ border-radius:999px; font-weight:700; padding:.35em .7em; }
.card-statistic-1 .card-icon{ border-radius:12px; }
.form-control, .select2-selection{ border-radius:10px !important; }
.section-header h1{ font-weight:900; }

/* status badge helper (dipakai status_badge()) mengikuti warna baru otomatis via .badge-* */

/* ================= MOBILE FIX ================= */
@media (max-width: 1024px){
  /* konten full-width (menang atas .main-wrapper .main-content{margin-left:250px}) */
  .main-wrapper .main-content, .main-content, .main-footer{ margin-left:0 !important; }
  .main-content{ padding:16px 12px 48px !important; padding-top:84px !important; }
  /* sidebar off-canvas geser */
  .main-sidebar{ left:-270px !important; transition:left .28s ease; z-index:920; }
  .main-sidebar.toggled{ left:0 !important; box-shadow:6px 0 40px rgba(0,0,0,.35); }
  body.sidebar-mini::before{ content:''; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:910; }
  /* navbar rapikan — paksa 1 baris (Bootstrap default navbar-nav = kolom di bawah lg) */
  .navbar.main-navbar{ height:60px; flex-wrap:nowrap !important; }
  .main-navbar .navbar-nav{ flex-direction:row !important; align-items:center !important; }
  .navbar .navbar-right{ margin-left:auto; }
  .navbar .navbar-brand{ max-width:44vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .navbar .nav-link.nav-link-lg{ padding:0 9px !important; }
  .navbar .nav-link-user div{ display:none !important; }
  .section-header h1{ font-size:19px; }
  /* kartu & angka pas HP */
  .card-statistic-1{ padding:16px !important; }
  .card-statistic-1 .card-wrap .card-body{ font-size:20px !important; }
  .card .card-body{ padding:14px !important; }
  /* POS topbar tak wrap */
  .pos-topbar .brand{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw; font-size:15px; }
}
@media (max-width: 480px){
  .navbar .navbar-brand span{ display:none !important; } /* sisakan logo saja di layar sempit */
  .stat-grid{ grid-template-columns:1fr 1fr; }
}