/* ===== TAMARA design tokens (Light • Blue + Green + Amber) ===== */
:root{
  --bg1:#ffffff;
  --bg2:#f7faff;

  /* Core hues */
  --blue:#2E6FDB;
  --green:#3F9A4D;
  --amber:#F0B429;

  /* Tints/Shades */
  --blue-50:#eaf1ff;
  --blue-100:#d6e4ff;
  --blue-400:#4e86e0;
  --blue-600:#275fc0;

  --green-50:#eaf6ee;
  --green-100:#d9efdf;
  --green-400:#50a65c;
  --green-600:#2f8340;

  --amber-50:#fff5da;
  --amber-100:#ffeab3;
  --amber-400:#f3c24a;
  --amber-600:#d69d17;

  --text:#0f172a;
  --muted:#64748b;
  --line:#e6ebf3;
  --card-br:#e6ebf3;

  --brand-app-size: 34px;

  /* Easing */
  --ease-smooth:cubic-bezier(.22,.61,.36,1);
}

/* Utility mixins (custom properties for reusable gradients) */
:root{
  /* Blue → Green with soft Amber tail */
  --g-blue-green-amber:
    linear-gradient(90deg,
      var(--blue) 0%,
      color-mix(in srgb, var(--blue) 75%, var(--green)) 30%,
      color-mix(in srgb, var(--blue) 45%, var(--green)) 55%,
      var(--green) 80%,
      color-mix(in srgb, var(--green) 70%, var(--amber)) 92%,
      var(--amber) 100%
    );

  /* Icon pill gradient */
  --g-pill:
    linear-gradient(135deg,
      color-mix(in srgb, var(--blue) 82%, white) 0%,
      color-mix(in srgb, var(--blue) 55%, var(--green)) 45%,
      color-mix(in srgb, var(--green) 85%, white) 100%
    );

  /* Card sweep highlight */
  --g-sweep-a:
    radial-gradient(420px 140px at -10% -10%, color-mix(in srgb, var(--blue) 22%, transparent) 0%, transparent 62%);
  --g-sweep-b:
    radial-gradient(420px 140px at 110% 110%, color-mix(in srgb, var(--green) 22%, transparent) 0%, transparent 62%);
}

/* Fluid type scale */
html{ font-size:clamp(15px, .9vw + 10px, 17px); }

/* ================================================================
   LOGIN • SPLIT PANEL  (revamped)
   – bersih dari inline, match komponen HTML terbaru
   ================================================================ */

/* ===== Canvas / Background ===== */
.auth-brand .brand-app{
  height: var(--brand-app-size);
  width: auto;
  display: block;
  object-fit: contain;
}

.auth-canvas{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100svh;
  background:
    radial-gradient(1200px 720px at 0% -10%, color-mix(in srgb, var(--blue-50) 70%, white) 0%, transparent 55%),
    radial-gradient(1000px 720px at 100% 110%, color-mix(in srgb, var(--green-50) 70%, white) 0%, transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #f5f9ff 55%, #f1fbf5 100%);
}
.auth-canvas::after{ display:none !important; }

/* ===== Wrapper ===== */
.auth-wrap{
  width:min(800px,100vw);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

/* ===== Brand row (PCS + TAMARA) ===== */
.auth-brand{
  position:static;
  transform:none;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  margin-bottom:16px;
}
.brand-row{ display:flex; align-items:center; gap:8px; }
.brand-pcs{ height:38px; width:auto; display:block; object-fit:contain; }
.brand-divider{ width:2px; height:24px; background:#e2e8f0; display:inline-block; margin:0 6px; }
.brand-app{ height:40px; width:auto; display:block; }
.brand-text{ font-size:1.6rem; font-weight:700; color:#0f172a; letter-spacing:.2px; line-height:1; display:flex; align-items:center; }

/* ===== Panel (card) ===== */
.auth-panel{
  background:#ffffff !important;
  backdrop-filter:none !important;
  box-shadow: 0 28px 80px rgba(2,6,23,.16), 0 6px 18px rgba(2,6,23,.06);
  border-radius:20px;
  overflow:hidden;
}
.auth-split{
  width:100%;
  display:grid;
  grid-template-columns:1.05fr .95fr;
}

/* ===== Left: form area ===== */
.auth-left{
  background: linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
}
.auth-left--login{ padding:36px; font-size:.95rem; }

.auth-title{ margin:0 0 6px; font-size:1.18rem; font-weight:700; color:#0f172a; }
.auth-left .lead{ margin:0 0 22px; color:var(--muted); font-size:.95rem; }

.field{ display:block; }
.field-label{ display:block; font-size:.86rem; color:#334155; margin:0 0 .4rem .1rem; }

/* Inputs */
.input-wrap{ position:relative; }
.auth-left .form-control{
  height:48px; padding:.72rem .9rem;
  background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:.65rem;
  transition: border-color .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth), background-color .22s var(--ease-smooth);
}
.auth-left .form-control::placeholder{ color:#94a3b8; font-size:.82rem; } /* placeholder kecil */
.auth-left .form-control:hover{ border-color:#d6dce8; }
.auth-left .form-control:focus{
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-100) 65%, transparent);
  outline:none; background:#fff;
}

/* Samakan perilaku (hapus underline gradient khusus login) */
.auth-left .input-wrap::after{ display:none !important; }

/* Optional: toggle eye (jika dipakai di halaman lain) */
.toggle-pass{
  position:absolute; right:.55rem; top:50%; transform:translateY(-50%);
  border:none; background:transparent; color:#64748b; opacity:.9; cursor:pointer;
  width:24px; height:24px; display:grid; place-items:center;
  transition: transform .15s var(--ease-smooth), opacity .15s var(--ease-smooth);
}
.toggle-pass svg{ width:16px; height:16px; }
.input-wrap .form-control{ padding-right:2.2rem; }
.input-wrap:focus-within .toggle-pass{ color:#334155; opacity:1; }
.toggle-pass:hover{ opacity:1; transform: translateY(-50%) scale(1.03); }

/* Show/Hide checkbox row */
.showpass-row{ display:flex; align-items:center; gap:8px; margin:16px 0 24px; }
.showpass-row .form-check-label{ font-size:.82rem; color:#334155; }

/* Button */
.btn-continue{
  width:100%; height:46px; border-radius:.7rem; border:none;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-400) 100%);
  background-size:160% 100%;
  color:#fff; font-weight:600;
  box-shadow: 0 10px 20px rgba(46,111,219,.18);
  transition: background-position .35s var(--ease-smooth), transform .08s var(--ease-smooth), box-shadow .22s var(--ease-smooth);
}
.btn-continue:hover{ transform: translateY(-1px); background-position:100% 0; }

/* ===== Right: visual (full-bleed image) ===== */
.auth-right{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--blue-50) 60%, white) 0%,
      color-mix(in srgb, var(--green-50) 55%, white) 100%);
}
.auth-hero{
  border-left:1px solid var(--line);
  padding:0;
  position:relative;
  display:block;
  overflow:hidden;
}
.auth-hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}

/* ===== Animations & helpers ===== */
@keyframes float{ 0%,100%{ transform: translate(0,0) rotate(0deg); } 50%{ transform: translate(-10px,20px) rotate(2deg); } }
.shake{ animation: shake .35s var(--ease-smooth); }
@keyframes shake{ 0%,100%{transform: translateX(0)} 20%{transform: translateX(-6px)} 60%{transform: translateX(6px)} }

.alert-modern{
  border:1px solid #fecaca!important;
  background:#fff1f2!important;
  color:#b91c1c!important;
  border-radius:.6rem;
  animation: pop .25s var(--ease-smooth);
}
@keyframes pop{ from{ transform: scale(.98); opacity:.7; } to{ transform: scale(1); opacity:1; } }

.tiny{ font-size:.86rem; color:#334155; }
.tiny a{ color:var(--blue); text-decoration:none; }
.tiny a:hover{ text-decoration:underline; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .auth-split{ grid-template-columns: 1fr; }
  .auth-right{ order:2; }
  .auth-left{ order:1; }
  .brand-text{ font-size:1.4rem; }
}

/* ================================================================
   DASHBOARD (Light) — selaras tema LOGIN
   ================================================================ */

/* DASHBOARD (tanpa grid) */
.dashboard-canvas{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* polos: soft gradient (boleh ganti ke #ffffff kalau mau benar-benar flat) */
  background: linear-gradient(135deg, var(--bg1) 0%, #f6f9ff 55%, #f3fbf6 100%);
}

/* matikan grid overlay sepenuhnya */
.dashboard-grid{ display:none !important; }

/* top bar & tiles tetap sama */
.dash-bar{
  position:sticky; top:0; z-index:5;
  backdrop-filter:saturate(130%) blur(10px);
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 16px rgba(2,6,23,.06);
}
.section-pad{ padding-inline:clamp(16px,4vw,48px); }

.dash-brand{ display:flex; align-items:center; gap:10px; color:var(--text); }
.dash-badge{
  width:30px;height:30px;border-radius:8px;
  background: conic-gradient(from 210deg, var(--blue) 0 70%, color-mix(in srgb, var(--blue) 45%, var(--green)) 70% 85%, var(--green) 85% 98%, var(--amber) 98% 100%);
  box-shadow:0 4px 10px rgba(46,111,219,.16);
}
.role-chip{
  font-size:.78rem; padding:.18rem .5rem; border-radius:999px; margin-left:.4rem;
  color:#0f172a;
  background: linear-gradient(90deg, color-mix(in srgb, var(--green-100) 70%, white) 0%, color-mix(in srgb, var(--amber-100) 70%, white) 100%);
  border:1px solid #e7edf5;
}

.section-pad h1,.section-pad .h4{ color:var(--text); }

.tile-wrap{ position:relative; z-index:1; padding-block:28px; }
.tile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }

.tile{
  position:relative; overflow:hidden; border-radius:18px; background:#fff;
  border:1px solid var(--line);
  box-shadow:0 8px 18px rgba(2,6,23,.06), 0 2px 6px rgba(2,6,23,.03);
  color:var(--text); text-decoration:none; display:block;
  transition:transform .2s var(--ease-smooth), box-shadow .2s var(--ease-smooth), border-color .2s var(--ease-smooth);
}
.tile:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(2,6,23,.10), 0 4px 10px rgba(2,6,23,.06);
  border-color:color-mix(in srgb, var(--blue) 45%, var(--line));
}

.tile-body{ padding:18px 18px 16px; text-align:center; }
.tile-icon{
  width:44px;height:44px;border-radius:12px;margin-inline:auto;display:grid;place-items:center;color:#fff;
  background: var(--g-pill);
  box-shadow:0 8px 18px rgba(46,111,219,.16);
}

.tile h5{
  margin:.8rem 0 .3rem;
  font-weight:700;
  color:var(--text);
  font-size:1rem;       /* diperkecil sedikit dari default h5 */
}

.tile p{
  margin:0 0 .8rem;
  color:var(--muted);
  min-height:2.5em;
  font-size:.9rem;      /* sedikit lebih kecil agar hierarki jelas */
}

.btn.btn-danger{
  --red:#ef4444; --soft: color-mix(in srgb, var(--red) 18%, white);
  background: linear-gradient(90deg, var(--soft) 0%, color-mix(in srgb, var(--red) 45%, white) 100%);
  border:none; color:#7a1212;
  box-shadow:0 6px 14px rgba(239,68,68,.18);
  transition:background-position .35s var(--ease-smooth), transform .08s var(--ease-smooth), box-shadow .22s var(--ease-smooth);
  background-size:160% 100%;
}
.btn.btn-danger:hover{ background-position:100% 0; transform:translateY(-1px); }

.btn.btn-warning{
  --amber:#F0B429;
  --soft: color-mix(in srgb, var(--amber) 18%, white);
  background: linear-gradient(
    90deg,
    var(--soft) 0%,
    color-mix(in srgb, var(--amber) 45%, white) 100%
  );
  border:none;
  color:#7a4a12;
  box-shadow:0 6px 14px rgba(240,180,41,.22);
  transition:
    background-position .35s var(--ease-smooth),
    transform .08s var(--ease-smooth),
    box-shadow .22s var(--ease-smooth);
  background-size:160% 100%;
}

.btn.btn-warning:hover{
  background-position:100% 0;
  transform:translateY(-1px);
}

.btn.btn-success{
  --green:#3F9A4D;
  --soft: color-mix(in srgb, var(--green) 18%, white);
  background: linear-gradient(
    90deg,
    var(--soft) 0%,
    color-mix(in srgb, var(--green) 45%, white) 100%
  );
  border:none;
  color:#1f4a28;
  box-shadow:0 6px 14px rgba(63,154,77,.22);
  transition:
    background-position .35s var(--ease-smooth),
    transform .08s var(--ease-smooth),
    box-shadow .22s var(--ease-smooth);
  background-size:160% 100%;
}

.btn.btn-success:hover{
  background-position:100% 0;
  transform:translateY(-1px);
}

.btn.btn-secondary{
  --gray:#6B7280;
  --soft: color-mix(in srgb, var(--gray) 18%, white);
  background: linear-gradient(
    90deg,
    var(--soft) 0%,
    color-mix(in srgb, var(--gray) 45%, white) 100%
  );
  border:none;
  color:#1F2933;
  box-shadow:0 6px 14px rgba(107,114,128,.18);
  transition:
    background-position .35s var(--ease-smooth),
    transform .08s var(--ease-smooth),
    box-shadow .22s var(--ease-smooth);
  background-size:160% 100%;
}

.btn.btn-secondary:hover{
  background-position:100% 0;
  transform:translateY(-1px);
}

.btn.btn-primary{
  --blue:#2563EB;
  --soft: color-mix(in srgb, var(--blue) 18%, white);
  background: linear-gradient(
    90deg,
    var(--soft) 0%,
    color-mix(in srgb, var(--blue) 45%, white) 100%
  );
  border:none;
  color:#0b2257;
  box-shadow:0 6px 14px rgba(37,99,235,.22);
  transition:
    background-position .35s var(--ease-smooth),
    transform .08s var(--ease-smooth),
    box-shadow .22s var(--ease-smooth);
  background-size:160% 100%;
}

.btn.btn-primary:hover{
  background-position:100% 0;
  transform:translateY(-1px);
}

@media (min-width:1600px){
  .tile-body{ padding:22px 22px 18px; }
  .tile h5{ font-size:1.15rem; }
}
@media (max-width:480px){ .tile-body{ padding:16px; } }
@media (prefers-reduced-motion: reduce){ .tile, .btn{ transition:none!important; } }

/* ================================================================
   Master Gudang CSS
   ================================================================ */
.container.mt-5{ max-width: 1120px; }

.container.mt-5 > .d-flex.align-items-center.mb-3 h2{
  font-weight: 800; letter-spacing: .2px; color: var(--text); margin: 0;
}
.container.mt-5 > .d-flex.align-items-center.mb-3 .btn.btn-secondary{
  --_bg: linear-gradient(90deg,
           color-mix(in srgb, var(--blue) 12%, white) 0%,
           color-mix(in srgb, var(--green) 12%, white) 100%);
  background: var(--_bg);
  border: 1px solid var(--line);
  color: #0f172a;
  transition: transform .15s var(--ease-smooth), box-shadow .25s var(--ease-smooth), background-position .35s var(--ease-smooth);
  background-size: 180% 100%;
}
.container.mt-5 > .d-flex.align-items-center.mb-3 .btn.btn-secondary:hover{
  background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 8px 16px rgba(2,6,23,.06);
}

/* Section titles */
.container.mt-5 h4{ font-weight: 700; color: #0f172a; margin-bottom: 14px; }

/* Forms wrap */
.container.mt-5 form[action*="page=gudang"]{
  margin: 0; padding: 16px 16px 12px; background: #fff;
  border: 1px solid var(--card-br); border-radius: 14px;
  box-shadow: 0 8px 18px rgba(2,6,23,.05);
}
.container.mt-5 form[action*="action=nama"]{ margin-bottom: 18px; }
.container.mt-5 form[action*="action=tarif"]{ margin-bottom: 18px; }

/* Inputs */
.container.mt-5 .form-control,
.container.mt-5 select.form-control{
  background:#fff; border:1px solid var(--line); color:var(--text);
  border-radius:.6rem; padding:.72rem .9rem;
  transition: border-color .22s var(--ease-smooth), box-shadow .22s var(--ease-smooth), background-color .22s var(--ease-smooth);
}
.container.mt-5 .form-control::placeholder{ color:#94a3b8; }
.container.mt-5 .form-control:hover,
.container.mt-5 select.form-control:hover{ border-color:#d6dce8; }
.container.mt-5 .form-control:focus,
.container.mt-5 select.form-control:focus{
  border-color: var(--blue);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--blue-100) 65%, transparent),
    0 0 0 6px color-mix(in srgb, var(--amber-50) 40%, transparent);
  outline:none;
}

/* Form buttons */
.container.mt-5 .btn.btn-primary,
.container.mt-5 .btn.btn-success{
  background: var(--g-blue-green-amber);
  background-size: 180% 100%;
  border: none; color: #fff;
  box-shadow: 0 8px 16px rgba(46,111,219,.16);
  transition: background-position .42s var(--ease-smooth), transform .08s var(--ease-smooth), box-shadow .22s var(--ease-smooth);
}
.container.mt-5 .btn.btn-primary:hover,
.container.mt-5 .btn.btn-success:hover{
  background-position: 100% 0; transform: translateY(-1px);
}

/* Alerts */
.container.mt-5 .alert.alert-success{
  border: 1px solid color-mix(in srgb, var(--green-100) 80%, white);
  background: color-mix(in srgb, var(--green-50) 65%, white);
  color: #0b3a1a; border-radius: .6rem; box-shadow: 0 4px 10px rgba(2,6,23,.04);
}

/* Tables modern */
.container.mt-5 .table{
  background:#fff; border-collapse:separate; border-spacing:0;
  border:1px solid var(--card-br); border-radius:14px; overflow:hidden;
  box-shadow:0 8px 18px rgba(2,6,23,.05);
}
.container.mt-5 .table thead th{
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--blue-50) 55%, white) 0%,
              color-mix(in srgb, var(--green-50) 35%, white) 100%);
  color:#0f172a; border-bottom:1px solid var(--card-br);
  font-weight:700; vertical-align:middle;
}
.container.mt-5 .table tbody tr{ transition: background-color .18s var(--ease-smooth); }
.container.mt-5 .table tbody tr:hover{ background: color-mix(in srgb, var(--blue-50) 40%, white); }
.container.mt-5 .table td, 
.container.mt-5 .table th{ border-color: var(--card-br) !important; }

@supports (position: sticky){
  .container.mt-5 .table thead th{ position: sticky; top: 0; z-index: 1; }
}
.container.mt-5 .table td:last-child,
.container.mt-5 .table th:last-child{ white-space: nowrap; }

/* Buttons kecil */
.container.mt-5 .btn.btn-sm.btn-warning{
  --warn: color-mix(in srgb, var(--amber-400) 75%, white);
  background: linear-gradient(90deg, var(--warn) 0%, color-mix(in srgb, var(--amber-600) 55%, var(--warn)) 100%);
  border: 1px solid color-mix(in srgb, var(--amber-600) 30%, white);
  color:#3d2b00;
  transition: background-position .35s var(--ease-smooth), transform .08s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
  background-size: 160% 100%;
}
.container.mt-5 .btn.btn-sm.btn-warning:hover{
  background-position: 100% 0; transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(214,157,23,.18);
}
.container.mt-5 .btn.btn-sm.btn-danger{
  --red:#ef4444; --red-soft: color-mix(in srgb, var(--red) 14%, white);
  background: linear-gradient(90deg, var(--red-soft) 0%, color-mix(in srgb, var(--red) 40%, white) 100%);
  border: 1px solid color-mix(in srgb, var(--red) 28%, white);
  color:#7a1212;
  transition: background-position .35s var(--ease-smooth), transform .08s var(--ease-smooth), box-shadow .2s var(--ease-smooth);
  background-size: 160% 100%;
}
.container.mt-5 .btn.btn-sm.btn-danger:hover{
  background-position: 100% 0; transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(239,68,68,.18);
}

/* UX micro */
.container.mt-5 input[type="number"]{ text-align:right; font-variant-numeric: tabular-nums; }
.container.mt-5 select.form-control{
  appearance:none;
  background-image:
     linear-gradient(45deg, transparent 50%, #94a3b8 50%),
     linear-gradient(135deg, #94a3b8 50%, transparent 50%),
     linear-gradient(to right, transparent, transparent);
  background-position:
     calc(100% - 18px) calc(50% - 4px),
     calc(100% - 12px) calc(50% - 4px),
     calc(100% - 2.5rem) 50%;
  background-size: 6px 6px, 6px 6px, 1px 2.2rem;
  background-repeat:no-repeat; padding-right:2.5rem;
}

/* Spacing */
.container.mt-5 .table + h4{ margin-top:28px; }

/* Mobile tweaks */
@media (max-width: 768px){
  .container.mt-5 form[action*="page=gudang"]{ padding:14px; }
  .container.mt-5 .d-flex.justify-content-between.align-items-center.mb-3{ gap:10px; }
  .container.mt-5 .table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* Reduced motion tambahan untuk blok Master */
@media (prefers-reduced-motion: reduce){
  .container.mt-5 .btn,
  .container.mt-5 .form-control,
  .container.mt-5 .table tbody tr{
    transition: none !important;
  }
}

/* ================================================================
   Fallback kompatibilitas
   ================================================================ */
@supports not (color: color-mix(in srgb, white 50%, black)) {
  :root{
    --g-blue-green-amber: linear-gradient(90deg, #2E6FDB 0%, #3F9A4D 80%, #F0B429 100%);
    --g-pill: linear-gradient(135deg, #3a7ae0 0%, #4aa15a 100%);
  }
}
@supports not (backdrop-filter: blur(8px)) {
  .auth-brand{ background:#ffffff; }
}
/* === PERBAIKAN: Select2 Multiple agar konsisten dan label tidak flex === */

/* Pastikan wrapper label tetap block */
.field-label,
label[for*="wilayah"] {
  display: block !important;
  margin-bottom: .4rem !important;
  color: #334155;
  font-size: .86rem;
}

/* Samakan lebar dengan input Bootstrap (.form-control) */
.select2-container--bootstrap-5 {
  width: 100% !important;
}

/* Sejajarkan tampilan dengan input biasa */
/* ===== FIX: Tag Select2 multiple agar tetap sejajar sebelum turun baris ===== */
.select2-container--bootstrap-5 .select2-selection--multiple {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  background-color: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: .6rem !important;
  min-height: 48px !important;
  padding: .45rem .55rem !important;
  line-height: 1.4 !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
  display: contents !important; /* biar item mengikuti flex parent di atas */
  padding: 0 !important;
  margin: 0 !important;
}

.select2-container--bootstrap-5 .select2-selection__choice {
  background: var(--blue-50) !important;
  border: 1px solid var(--blue-100) !important;
  color: var(--blue-600) !important;
  border-radius: .5rem !important;
  padding: .25rem .5rem !important;
  font-size: .85rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}


/* Tombol hapus */
.select2-container--bootstrap-5 .select2-selection__choice__remove {
  color: var(--blue-600) !important;
  font-weight: bold !important;
  cursor: pointer !important;
}
.select2-container--bootstrap-5 .select2-selection__choice__remove:hover {
  color: #d32f2f !important;
}

/* ================================================================
   LOGIN — Konten 85% dan benar-benar center
   ================================================================ */

.auth-canvas{
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(1200px 720px at 0% -10%, color-mix(in srgb, var(--blue-50) 70%, white) 0%, transparent 55%),
    radial-gradient(1000px 720px at 100% 110%, color-mix(in srgb, var(--green-50) 70%, white) 0%, transparent 55%),
    linear-gradient(135deg, #ffffff 0%, #f5f9ff 55%, #f1fbf5 100%);
}

.auth-wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9); 
  transform-origin: center center;

  width: min(800px, 100vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
}

/* ================================================================
   GLOBAL CONTENT SCALE — Dashboard & halaman form
   ================================================================ */

/* Dashboard (top bar + konten utama) */
.dashboard-canvas .section-pad{
  max-width: 1200px;
  margin-inline: auto;
  transform: scale(0.9); 
  transform-origin: top center;
}

/* Halaman dengan layout container (Master Gudang, dst.) */
.container.mt-5{
  transform: scale(0.9); 
  transform-origin: top center;
}

/* Supaya di layar kecil (mobile/tablet) tidak terlalu mengecil */
@media (max-width: 992px){
  .dashboard-canvas .section-pad,
  .container.mt-5{
    transform: none;
  }
}

.dashboard-canvas .section-pad{
  max-width: 1500px;       /* supaya tetap rapi di layar sangat lebar */
  margin: 0 auto;          /* center kiri–kanan */
}

.dashboard-canvas {
      position: relative;
      z-index: 0;
    }

    .dashboard-canvas::before,
    .dashboard-canvas::after {
      pointer-events: none !important;
      z-index: -2 !important;
    }

    .dashboard-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: -1 !important;
    }

    /* Brand TAMARA – sama seperti di Dashboard */
    .app-brand {
      display: flex;
      align-items: center;
      gap: .75rem;
    }

    .app-brand-logo {
      width: 44px;
      height: 44px;
      border-radius: 16px;
      background: linear-gradient(145deg, var(--blue), var(--green));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
      overflow: hidden;
    }

    .app-brand-title {
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-size: .8rem;
    }

    .app-brand-subtitle {
      font-size: .76rem;
    }

    .role-chip-compact {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      padding: .2rem .55rem;
      border-radius: 999px;
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      background: rgba(248, 250, 252, .85);
      border: 1px solid rgba(148, 163, 184, .35);
      color: #0f172a;
    }

    .role-chip-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--green);
    }

    /* Uploader + pill file (dipakai form create & edit) */
    .uploader {
      border: 2px dashed #cfe3ff;
      border-radius: 12px;
      background: #f7fbff;
      cursor: pointer;
    }

    .uploader:hover {
      background: #f1f8ff;
    }

    .uploader .cloud {
      font-size: 40px;
      line-height: 1;
    }

    .uploader .cta {
      color: #1976d2;
      font-weight: 600;
    }

    .file-pill {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .45rem .6rem;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: .9rem;
    }

    .file-badge {
      font-weight: 700;
      font-size: .75rem;
      padding: .15rem .45rem;
      border-radius: 6px;
      background: #e8f1ff;
      color: #0b5ed7;
      text-transform: uppercase;
    }

    .file-remove {
      border: none;
      background: #f8d7da;
      color: #a61b2b;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      font-weight: 700;
      line-height: 1;
      font-size: .8rem;
    }

    .file-remove:hover {
      filter: brightness(.95);
    }

    .file-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }

    /* Skala font konten utama sedikit lebih kecil (header/top-bar tidak diubah) */
    .section-pad p,
    .section-pad .form-label,
    .section-pad .form-control,
    .section-pad .form-select,
    .section-pad .input-group-text,
    .section-pad .form-text,
    .section-pad .alert,
    .section-pad table,
    .section-pad .table,
    .section-pad .btn,
    .section-pad .badge,
    .section-pad .pagination .page-link,
    .section-pad .list-group-item,
    .section-pad small,
    .section-pad .text-muted {
      font-size: .9rem;
    }

    .section-pad .form-label {
      font-size: .85rem;
    }

    .section-pad .form-control::placeholder {
      font-size: .85rem;
    }

    /* Batas tinggi modal supaya konten scroll, tidak menutup penuh layar */
    .modal-dialog-scrollable .modal-body {
      max-height: calc(100vh - 200px);
      overflow-y: auto;
    }

    /* Hirarki z-index: backdrop di belakang, modal di depan */
    .modal.sto-modal {
      z-index: 1060;
    }
    .modal-backdrop {
      z-index: 1050;
    }

    /* Tipografi modal konsisten dengan konten utama */
    .sto-modal .modal-content {
      font-size: 0.9rem;
    }
    .sto-modal .modal-title {
      font-size: 1rem;
      font-weight: 600;
    }
    .sto-modal dt {
      font-size: 0.85rem;
      font-weight: 600;
    }
    .sto-modal dd {
      font-size: 0.9rem;
    }
    .sto-modal .btn {
      font-size: 0.85rem;
      padding: 0.35rem 0.9rem;
      border-radius: 0.4rem;
    }
    .sto-modal h6 {
      font-size: 0.9rem;
      font-weight: 600;
    }
    .sto-modal .form-label {
      font-size: 0.85rem;
      margin-bottom: 0.25rem;
    }
    .sto-modal .form-control,
    .sto-modal .form-select {
      font-size: 0.9rem;
      padding: 0.35rem 0.75rem;
    }
    .sto-modal .form-control::placeholder {
      font-size: 0.85rem;
    }
    .sto-modal .form-text,
    .sto-modal small {
      font-size: 0.75rem;
    }
    .sto-modal .list-group.small .list-group-item {
      font-size: 0.8rem;
      padding: 0.3rem 0.5rem;
    }

    /* ===========================================
   VARIAN OUTLINE (DANGER, WARNING, SUCCESS,
   SECONDARY, PRIMARY)
   =========================================== */

.btn.btn-outline-danger{
  --red: #ef4444;
  --soft: color-mix(in srgb, var(--red) 18%, white);

  background: transparent;
  border: 1px solid color-mix(in srgb, var(--red) 60%, white);
  color: #7a1212;

  box-shadow: 0 0 0 1px rgba(239, 68, 68, .18);
  transition:
    background-position .35s var(--ease-smooth),
    background-color .35s var(--ease-smooth),
    color .22s var(--ease-smooth),
    transform .08s var(--ease-smooth),
    box-shadow .22s var(--ease-smooth);
  background-size: 160% 100%;
}

.btn.btn-outline-danger:hover{
  background: linear-gradient(
    90deg,
    var(--soft) 0%,
    color-mix(in srgb, var(--red) 45%, white) 100%
  );
  color: #7a1212;
  box-shadow: 0 6px 14px rgba(239, 68, 68, .18);
  transform: translateY(-1px);
}

/* ----------------------------------------- */

.btn.btn-outline-warning{
  --amber: #F0B429;
  --soft: color-mix(in srgb, var(--amber) 18%, white);

  background: transparent;
  border: 1px solid color-mix(in srgb, var(--amber) 60%, white);
  color: #7a4a12;

  box-shadow: 0 0 0 1px rgba(240, 180, 41, .22);
  transition:
    background-position .35s var(--ease-smooth),
    background-color .35s var(--ease-smooth),
    color .22s var(--ease-smooth),
    transform .08s var(--ease-smooth),
    box-shadow .22s var(--ease-smooth);
  background-size: 160% 100%;
}

.btn.btn-outline-warning:hover{
  background: linear-gradient(
    90deg,
    var(--soft) 0%,
    color-mix(in srgb, var(--amber) 45%, white) 100%
  );
  color: #7a4a12;
  box-shadow: 0 6px 14px rgba(240, 180, 41, .22);
  transform: translateY(-1px);
}

/* ----------------------------------------- */

.btn.btn-outline-success{
  --green: #3F9A4D;
  --soft: color-mix(in srgb, var(--green) 18%, white);

  background: transparent;
  border: 1px solid color-mix(in srgb, var(--green) 60%, white);
  color: #1f4a28;

  box-shadow: 0 0 0 1px rgba(63, 154, 77, .22);
  transition:
    background-position .35s var(--ease-smooth),
    background-color .35s var(--ease-smooth),
    color .22s var(--ease-smooth),
    transform .08s var(--ease-smooth),
    box-shadow .22s var(--ease-smooth);
  background-size: 160% 100%;
}

.btn.btn-outline-success:hover{
  background: linear-gradient(
    90deg,
    var(--soft) 0%,
    color-mix(in srgb, var(--green) 45%, white) 100%
  );
  color: #1f4a28;
  box-shadow: 0 6px 14px rgba(63, 154, 77, .22);
  transform: translateY(-1px);
}

/* ----------------------------------------- */

.btn.btn-outline-secondary{
  --gray: #6B7280;
  --soft: color-mix(in srgb, var(--gray) 18%, white);

  background: transparent;
  border: 1px solid color-mix(in srgb, var(--gray) 60%, white);
  color: #1F2933;

  box-shadow: 0 0 0 1px rgba(107, 114, 128, .18);
  transition:
    background-position .35s var(--ease-smooth),
    background-color .35s var(--ease-smooth),
    color .22s var(--ease-smooth),
    transform .08s var(--ease-smooth),
    box-shadow .22s var(--ease-smooth);
  background-size: 160% 100%;
}

.btn.btn-outline-secondary:hover{
  background: linear-gradient(
    90deg,
    var(--soft) 0%,
    color-mix(in srgb, var(--gray) 45%, white) 100%
  );
  color: #1F2933;
  box-shadow: 0 6px 14px rgba(107, 114, 128, .18);
  transform: translateY(-1px);
}

/* ----------------------------------------- */

.btn.btn-outline-primary{
  --blue: #2563EB;
  --soft: color-mix(in srgb, var(--blue) 18%, white);

  background: transparent;
  border: 1px solid color-mix(in srgb, var(--blue) 60%, white);
  color: #0b2257;

  box-shadow: 0 0 0 1px rgba(37, 99, 235, .22);
  transition:
    background-position .35s var(--ease-smooth),
    background-color .35s var(--ease-smooth),
    color .22s var(--ease-smooth),
    transform .08s var(--ease-smooth),
    box-shadow .22s var(--ease-smooth);
  background-size: 160% 100%;
}

.btn.btn-outline-primary:hover{
  background: linear-gradient(
    90deg,
    var(--soft) 0%,
    color-mix(in srgb, var(--blue) 45%, white) 100%
  );
  color: #0b2257;
  box-shadow: 0 6px 14px rgba(37, 99, 235, .22);
  transform: translateY(-1px);
}