/* =========================================================================
   SRI DISTRIBUTORS — THEME PRO
   A drop-in visual layer for the existing MDB/Bootstrap based app.
   This file is ADDITIVE ONLY: it re-skins existing markup/classes,
   it does not require any HTML/PHP structure changes.
   Load this AFTER css/mdb.min.css (and after any page-level <style>).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Brand: distribution / logistics — deep indigo + warehouse amber ---- */
  --sd-primary-900:#0d1230;
  --sd-primary-800:#141a45;
  --sd-primary-700:#1b235e;
  --sd-primary-600:#243080;
  --sd-primary-500:#2f3fa8;
  --sd-primary-400:#4655c9;
  --sd-primary-100:#e8eaff;

  --sd-accent-600:#c9770a;
  --sd-accent-500:#f0980f;
  --sd-accent-400:#ffb238;
  --sd-accent-100:#fff2dc;

  --sd-success:#1a9e6b;
  --sd-danger:#e0405a;
  --sd-warning:#f0980f;
  --sd-info:#2ba9c9;

  --sd-ink:#1a2036;
  --sd-ink-soft:#4a5170;
  --sd-muted:#7a8098;
  --sd-line:#e6e9f2;

  --sd-bg:#eef1f9;
  --sd-surface:#ffffff;
  --sd-surface-2:#f6f8fd;

  --sd-radius-sm:10px;
  --sd-radius:16px;
  --sd-radius-lg:22px;

  --sd-shadow-sm:0 1px 2px rgba(20,26,69,.06), 0 1px 1px rgba(20,26,69,.04);
  --sd-shadow:0 8px 24px -8px rgba(20,26,69,.18), 0 2px 8px -2px rgba(20,26,69,.08);
  --sd-shadow-lg:0 20px 48px -12px rgba(20,26,69,.28);

  --sd-font-ui:'Inter','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* =========================================================================
   BASE
   ========================================================================= */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background:
    radial-gradient(1100px 460px at 100% -10%, rgba(70,85,201,.10), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, rgba(240,152,15,.08), transparent 55%),
    var(--sd-bg) !important;
  color:var(--sd-ink);
  font-family:var(--sd-font-ui);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--sd-font-ui);
  font-weight:700;
  color:var(--sd-ink);
  letter-spacing:-.01em;
}

a{ color:var(--sd-primary-500); }
a:hover{ color:var(--sd-primary-700); }

::selection{ background:var(--sd-accent-400); color:#1a1200; }

/* slim, tidy scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--sd-primary-400) transparent; }
*::-webkit-scrollbar{ height:8px; width:8px; }
*::-webkit-scrollbar-thumb{ background:#c7cdea; border-radius:99px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--sd-primary-400); }

/* =========================================================================
   NAVBAR — sticky glass bar with a signature "scan line" accent
   (nods to the distribution / barcode domain)
   ========================================================================= */
header nav.navbar{
  background:rgba(255,255,255,.86) !important;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--sd-line);
  position:sticky; top:0; z-index:1030;
  padding-top:.55rem; padding-bottom:.55rem;
  box-shadow:0 1px 0 rgba(20,26,69,.03);
}
header nav.navbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:linear-gradient(90deg, var(--sd-primary-600), var(--sd-accent-500) 55%, var(--sd-primary-600));
  background-size:200% 100%;
  animation:sd-scan 7s linear infinite;
  opacity:.9;
}
@keyframes sd-scan{ 0%{background-position:0% 0;} 100%{background-position:200% 0;} }
@media (prefers-reduced-motion:reduce){ header nav.navbar::after{ animation:none; } }

.navbar .navbar-text.fw-bold{
  font-weight:800 !important;
  letter-spacing:.02em;
  background:linear-gradient(90deg,var(--sd-primary-700),var(--sd-primary-500) 60%,var(--sd-accent-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.navbar .navbar-text{ color:var(--sd-ink-soft); font-size:.85rem; }
.navbar .navbar-brand img{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); }

.navbar .dropdown-toggle > div{
  background:var(--sd-surface) !important;
  border:1px solid var(--sd-line);
  border-radius:999px !important;
  padding:.35rem 1rem !important;
  font-weight:600;
  color:var(--sd-primary-700) !important;
  transition:box-shadow .15s ease, transform .15s ease;
}
.navbar .dropdown-toggle:hover > div{
  box-shadow:var(--sd-shadow-sm);
  transform:translateY(-1px);
}

.dropdown-menu{
  border:1px solid var(--sd-line);
  border-radius:var(--sd-radius-sm) !important;
  box-shadow:var(--sd-shadow-lg) !important;
  padding:.4rem !important;
  overflow:hidden;
}
.dropdown-menu .dropdown-item{
  border-radius:8px;
  padding:.5rem .75rem;
  font-size:.9rem;
  font-weight:500;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background:var(--sd-primary-100);
  color:var(--sd-primary-700);
}
.dropdown-divider{ opacity:.7; margin:.35rem 0 !important; }

.navbar-toggler{
  border:1px solid var(--sd-line) !important;
  border-radius:10px;
  padding:.4rem .6rem;
}
.navbar-toggler:focus{ box-shadow:0 0 0 3px var(--sd-primary-100) !important; }

/* =========================================================================
   LAYOUT / CONTAINERS
   ========================================================================= */
.container, .container-fluid{ padding-left:1.25rem; padding-right:1.25rem; }

/* =========================================================================
   CARDS
   ========================================================================= */
.card{
  background:var(--sd-surface);
  border:1px solid var(--sd-line) !important;
  border-radius:var(--sd-radius) !important;
  box-shadow:var(--sd-shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow:var(--sd-shadow); }
.card-header{
  background:linear-gradient(180deg,var(--sd-surface-2),var(--sd-surface)) !important;
  border-bottom:1px solid var(--sd-line) !important;
  border-radius:var(--sd-radius) var(--sd-radius) 0 0 !important;
  font-weight:700;
  color:var(--sd-primary-700);
}
.card-body{ padding:1.25rem; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  border-radius:11px !important;
  font-weight:600;
  letter-spacing:.01em;
  padding:.5rem 1.1rem;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--sd-accent-500); outline-offset:2px; }

.btn-primary{
  background:linear-gradient(135deg,var(--sd-primary-600),var(--sd-primary-500)) !important;
  border:none !important;
  box-shadow:0 6px 16px -6px rgba(47,63,168,.55);
}
.btn-primary:hover{ filter:brightness(1.08); box-shadow:0 8px 20px -6px rgba(47,63,168,.65); }

.btn-warning, .btn-secondary.sd-accent{
  background:linear-gradient(135deg,var(--sd-accent-600),var(--sd-accent-500)) !important;
  border:none !important; color:#20130a !important;
}
.btn-success{ background:linear-gradient(135deg,#0f7f56,var(--sd-success)) !important; border:none !important; }
.btn-danger{ background:linear-gradient(135deg,#b7263f,var(--sd-danger)) !important; border:none !important; }

.btn-outline-primary{
  border-color:var(--sd-primary-500) !important; color:var(--sd-primary-600) !important;
}
.btn-outline-primary:hover{ background:var(--sd-primary-500) !important; }

/* =========================================================================
   FORMS
   ========================================================================= */
.form-control, .form-select, select, textarea, input[type="text"], input[type="password"],
input[type="date"], input[type="number"], input[type="email"], input[type="search"]{
  border:1.5px solid var(--sd-line) !important;
  border-radius:10px !important;
  background:#fff !important;
  padding:.55rem .8rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus, select:focus, textarea:focus{
  border-color:var(--sd-primary-400) !important;
  box-shadow:0 0 0 3.5px var(--sd-primary-100) !important;
}
label, .form-label{ font-weight:600; color:var(--sd-ink-soft); font-size:.85rem; }

/* =========================================================================
   TABLES — the app is data-dense; keep it legible and calm
   ========================================================================= */
.table{
  --bs-table-bg:transparent;
  border-collapse:separate;
  border-spacing:0;
}
.table thead th{
  background:var(--sd-primary-800);
  color:#fff !important;
  font-weight:600;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:none !important;
  padding:.75rem .9rem;
  position:sticky; top:0; z-index:2;
}
.table thead th:first-child{ border-top-left-radius:12px; }
.table thead th:last-child{ border-top-right-radius:12px; }
.table tbody td{
  padding:.65rem .9rem;
  border-color:var(--sd-line) !important;
  font-size:.88rem;
  vertical-align:middle;
}
.table tbody tr{ transition:background-color .12s ease; }
.table-striped tbody tr:nth-of-type(odd){ background-color:var(--sd-surface-2); }
.table-hover tbody tr:hover{ background-color:var(--sd-primary-100) !important; }
.table-bordered, .table-bordered td, .table-bordered th{ border-color:var(--sd-line) !important; }

/* Universal responsive-scroll wrapper injected by js/theme-enhance.js
   (works even on tables that were not wrapped in .table-responsive) */
.sd-table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  box-shadow:var(--sd-shadow-sm);
  border:1px solid var(--sd-line);
}
.sd-table-scroll > table{ margin-bottom:0; min-width:560px; }
.table-responsive{ border-radius:12px; }

/* =========================================================================
   BADGES / ALERTS / PAGINATION
   ========================================================================= */
.badge{ border-radius:8px; font-weight:600; letter-spacing:.02em; padding:.4em .6em; }
.alert{ border:none !important; border-radius:12px !important; box-shadow:var(--sd-shadow-sm); }
.alert-success{ background:#e4f7ee !important; color:#0d6b47 !important; }
.alert-danger{ background:#fdeaee !important; color:#a3213a !important; }
.alert-warning{ background:var(--sd-accent-100) !important; color:#7a4d05 !important; }

.pagination .page-link{ border-radius:8px !important; margin:0 2px; border-color:var(--sd-line) !important; }
.pagination .page-item.active .page-link{
  background:var(--sd-primary-600) !important; border-color:var(--sd-primary-600) !important;
}

/* modals */
.modal-content{ border-radius:var(--sd-radius) !important; border:none !important; box-shadow:var(--sd-shadow-lg) !important; }
.modal-header{ border-bottom:1px solid var(--sd-line) !important; }
.modal-footer{ border-top:1px solid var(--sd-line) !important; }

/* =========================================================================
   LOGIN PAGE  (custom legacy markup: .login-logo / .form-heading / .app-cam / .text / .submit)
   ========================================================================= */
body#login{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    linear-gradient(160deg, rgba(13,18,48,.92), rgba(27,35,94,.90)),
    url('../img/login.jpg') center/cover no-repeat fixed;
  font-family:var(--sd-font-ui);
  padding:2rem 1rem;
}
body#login .login-logo{
  color:#fff !important;
  font-size:1.4rem;
  margin-bottom:.5rem;
  text-align:center;
}
body#login .login-logo a{ color:#fff !important; text-decoration:none; letter-spacing:.02em; }
body#login .form-heading{
  color:#fff;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.12em;
  font-size:.95rem;
  opacity:.85;
  margin-bottom:1.25rem;
}
body#login .app-cam{
  background:rgba(255,255,255,.98);
  border-radius:var(--sd-radius-lg);
  box-shadow:var(--sd-shadow-lg);
  padding:2.25rem 2rem;
  width:100%;
  max-width:380px;
}
body#login .app-cam form{ display:flex; flex-direction:column; gap:.9rem; }
body#login input.text{
  width:100%;
  border:1.5px solid var(--sd-line);
  border-radius:11px;
  padding:.75rem 1rem;
  font-size:.95rem;
  background:#fbfcff;
  box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}
body#login input.text:focus{
  outline:none;
  border-color:var(--sd-primary-400);
  box-shadow:0 0 0 3.5px var(--sd-primary-100);
}
body#login .submit{ margin-top:.25rem; }
body#login .submit input[type="submit"]{
  width:100%;
  border:none;
  border-radius:11px;
  padding:.8rem 1rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(135deg,var(--sd-primary-600),var(--sd-primary-500));
  box-shadow:0 8px 20px -6px rgba(47,63,168,.6);
  cursor:pointer;
  transition:filter .15s ease, transform .12s ease;
}
body#login .submit input[type="submit"]:hover{ filter:brightness(1.08); }
body#login .submit input[type="submit"]:active{ transform:translateY(1px); }
body#login ul.new{ list-style:none; padding:0; margin:0; }

/* =========================================================================
   MOBILE  (phones & small tablets)  — the ask: best viewing on mobile
   ========================================================================= */
@media (max-width:991.98px){
  .container, .container-fluid{ padding-left:1rem; padding-right:1rem; }
  .navbar-nav.mx-auto{ margin:0 !important; }
  .navbar .d-flex.align-items-center.gap-4{
    flex-wrap:wrap; gap:.5rem !important; padding:.5rem 0;
  }
}

@media (max-width:767.98px){
  html{ font-size:14.5px; }
  body{ padding-left:0 !important; padding-right:0 !important; overflow-x:hidden; }

  .container, .container-fluid{ padding-left:.85rem; padding-right:.85rem; }

  header nav.navbar{ padding-top:.4rem; padding-bottom:.4rem; }
  .navbar-brand{ margin-right:.5rem; }
  .navbar-collapse{
    background:var(--sd-surface);
    border-radius:12px;
    margin-top:.5rem;
    padding:.75rem;
    box-shadow:var(--sd-shadow);
    border:1px solid var(--sd-line);
  }
  .navbar .navbar-text{ font-size:.8rem; }

  .dropdown-menu{ max-width:calc(100vw - 2rem); }

  h1{ font-size:1.5rem; } h2{ font-size:1.3rem; } h3{ font-size:1.12rem; }

  .card-body{ padding:.9rem; }
  .card{ border-radius:var(--sd-radius-sm) !important; }

  /* Buttons: comfortable tap targets, stack in tight groups */
  .btn{ padding:.55rem 1rem; min-height:40px; }
  .modal-footer .btn, .card-footer .btn{ width:100%; }
  .modal-footer{ flex-direction:column; gap:.5rem; }
  .modal-footer > *{ margin:0 !important; }

  /* Tables: compact + horizontally scrollable, never break the layout */
  table{ font-size:.78rem; }
  .table thead th{ padding:.55rem .6rem; font-size:.68rem; }
  .table tbody td{ padding:.5rem .6rem; }
  .sd-table-scroll{ margin-left:-.1rem; margin-right:-.1rem; }

  /* Forms: full-width, roomy inputs for touch */
  .form-control, .form-select, select, textarea{ font-size:16px; padding:.6rem .8rem; }
  label, .form-label{ font-size:.82rem; }

  /* Generic Bootstrap grid columns: give a touch more breathing room */
  [class^="col-"], [class*=" col-"]{ margin-bottom:.5rem; }

  body#login .app-cam{ padding:1.75rem 1.25rem; border-radius:var(--sd-radius); }
  body#login .form-heading{ font-size:.85rem; }
}

@media (max-width:420px){
  html{ font-size:13.5px; }
  .navbar .navbar-text.fw-bold{ font-size:.9rem; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}