/* =========================================================================
   MNT INVENTORY — UNIFIED DESIGN SYSTEM
   One source of truth for color, type, elevation and layout across all
   roles (owner / manager / staff / system_admin).

   Palette is derived from the MNT logo:
     navy      #26326E   (lanes, wordmark)
     bright    #1B9DF0 -> #0A6FD4 (center lane gradient)
     marker    #3E4650   (grey block)

   NOTE: existing views reference these variable names directly
   (--brand, --line, --soft, --shadow ...). Keep the names stable.
   ========================================================================= */

:root{
  /* Brand core */
  --brand:      #1877E6;   /* primary action blue (from center lane) */
  --brand-2:    #0A6FD4;   /* deep blue */
  --brand-3:    #26326E;   /* navy (sidebars, headings) */
  --brand-navy: #26326E;
  --brand-sky:  #37B4FF;   /* light lane top */
  --marker:     #3E4650;   /* grey accent block */

  --brand-grad: linear-gradient(180deg, #37B4FF 0%, #0A6FD4 100%);
  --navy-grad:  linear-gradient(180deg, #2C3A82 0%, #1B255A 100%);

  /* Surfaces */
  --bg:         #F3F6FD;   /* soft blue-tinted app background */
  --bg-2:       #E9EFFB;
  --card:       #FFFFFF;
  --line:       rgba(38,50,110,.12);

  /* Text */
  --ink:        #16204A;   /* near-navy body text */
  --muted:      #667092;

  /* Tints */
  --soft:       rgba(24,119,230,.08);
  --soft-2:     rgba(38,50,110,.06);

  /* Status */
  --success:    #12A150;
  --warning:    #F0A500;
  --danger:     #E23148;
  --info:       var(--brand);

  /* Shape */
  --radius:     16px;
  --r-sm:       12px;
  --r-lg:       22px;

  /* Elevation */
  --shadow:     0 14px 34px rgba(24,40,90,.10);
  --shadow-sm:  0 6px 18px rgba(24,40,90,.07);
  --shadow-lg:  0 24px 60px rgba(24,40,90,.16);

  --focus:      0 0 0 4px rgba(24,119,230,.20);
}

/* ---- Brand-blue dark theme (matches the logo background) ---- */
[data-bs-theme="dark"]{
  --brand:      #37B4FF;
  --brand-2:    #1B9DF0;
  --bg:         #0E1836;   /* deep navy, not black — reads as brand */
  --bg-2:       #0A122B;
  --card:       #16224C;
  --line:       rgba(255,255,255,.12);
  --ink:        #EAF1FF;
  --muted:      rgba(234,241,255,.66);
  --soft:       rgba(55,180,255,.14);
  --soft-2:     rgba(255,255,255,.05);
  --shadow:     0 14px 34px rgba(0,0,0,.45);
  --shadow-sm:  0 6px 18px rgba(0,0,0,.35);
  --shadow-lg:  0 24px 60px rgba(0,0,0,.5);
}

/* =============================== BASE ================================= */
*{ box-sizing:border-box; }

html,body{
  min-height:100%;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Manrope","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{ display:flex; min-height:100dvh; flex-direction:column; }
.page-wrap{ flex:1 0 auto; }

a{ color:var(--brand); }
h1,h2,h3,h4,h5,h6{ color:var(--ink); font-weight:800; letter-spacing:-.2px; }

::selection{ background:rgba(24,119,230,.18); }

/* Ambient brand glow behind the app (subtle, logo-derived) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vw 40vw at 100% -10%, rgba(55,180,255,.10), transparent 60%),
    radial-gradient(50vw 40vw at -10% 110%, rgba(38,50,110,.08), transparent 60%);
}

/* =============================== CARDS ================================ */
.card{
  border:1px solid var(--line);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card-lg{ border-radius:var(--r-lg); box-shadow:var(--shadow); }

/* =============================== MAIN ================================= */
main{ padding:1.15rem; background:transparent; }
@media (min-width:992px){ main{ padding:1.4rem 1.5rem; } }

/* =============================== NAVBAR =============================== */
.navbar{
  background:color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:.55rem .85rem;
  position:sticky; top:0; z-index:1040;
}
.navbar .container-fluid{
  display:flex; align-items:center; gap:.6rem;
  flex-wrap:nowrap; min-width:0;
}
.navbar-brand{
  display:flex; align-items:center; gap:.6rem;
  min-width:0; white-space:nowrap; text-decoration:none;
  color:var(--ink); flex:1 1 auto; overflow:hidden;
}
.brand-logo{ height:30px; width:auto; flex:0 0 auto; display:block; }
.logo-thumb{
  width:36px; height:36px; object-fit:cover;
  border-radius:11px; border:1px solid var(--line);
  background:var(--soft); display:inline-flex;
  align-items:center; justify-content:center; color:var(--brand);
  flex:0 0 auto;
}
.brand-name{
  display:inline-block; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  font-weight:800; letter-spacing:-.2px; max-width:52vw;
}
@media (min-width:576px){ .brand-name{ max-width:60vw; } }
@media (min-width:768px){ .brand-name{ max-width:420px; } }

.nav-controls{ display:flex; gap:.45rem; align-items:center; flex:0 0 auto; }

.btn-compact{
  padding:.44rem .64rem; font-size:.92rem; border-radius:12px;
  border:1px solid var(--line); background:var(--soft-2);
  color:var(--ink); line-height:1;
}
.btn-compact:hover{ background:var(--soft); color:var(--brand); }

.lang-switch{
  border:1px solid var(--line); padding:.34rem .7rem;
  font-size:.8rem; border-radius:999px; background:var(--soft-2);
  color:var(--muted); font-weight:800;
}
.lang-switch:hover{ background:var(--soft); color:var(--ink); }

.avatar-chip{
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-grad); color:#fff; font-weight:800;
}

/* =============================== SIDEBAR ============================== */
.sidebar-shell{
  position:sticky; top:64px; align-self:flex-start; z-index:1;
  height:calc(100dvh - 64px);
  max-height:calc(100dvh - 64px);
  padding:.95rem .85rem; background:transparent;
  display:flex; flex-direction:column;   /* let .sidebar fill exactly this height */
}
/* keep the row from being forced to the sidebar's full height */
.page-wrap .row{ align-items:flex-start; }
.sidebar{
  flex:1 1 auto; min-height:0;      /* fill the shell and allow overflow */
  border-radius:var(--r-lg);
  padding:.95rem .7rem; background:var(--navy-grad);
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
  /* scroll the whole sidebar when its content is taller than the viewport */
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent;
}
.sidebar::-webkit-scrollbar{ width:7px; }
.sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:8px; }
.sidebar::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.35); }
.sidebar::-webkit-scrollbar-track{ background:transparent; }
/* faint road-lane motif echoing the logo */
.sidebar::after{
  content:""; position:absolute; right:-40px; bottom:-30px;
  width:180px; height:180px; opacity:.06; pointer-events:none;
  background:
    linear-gradient(#fff,#fff) 40px 0/16px 100% no-repeat,
    linear-gradient(#fff,#fff) 82px 0/10px 100% no-repeat,
    linear-gradient(#fff,#fff) 120px 0/16px 100% no-repeat;
  transform:perspective(120px) rotateX(38deg);
}
.sidebar-header{
  padding:.35rem .6rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:.5rem; position:relative; z-index:1;
}
.sidebar-logo{ height:34px; width:auto; display:block; }
.sidebar-sub{
  color:rgba(255,255,255,.66); font-weight:600;
  font-size:.82rem; margin-top:.5rem; letter-spacing:.2px;
}
.navlist{ position:relative; z-index:1; }
.navlist a{
  display:flex; align-items:center; gap:.7rem;
  padding:.72rem .8rem; margin:.14rem .15rem;
  border-radius:13px; text-decoration:none;
  font-weight:650; font-size:.95rem;
  color:rgba(255,255,255,.82); border:1px solid transparent;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.navlist a .bi{ font-size:1.05rem; color:rgba(255,255,255,.72); width:1.15rem; text-align:center; }
.navlist a:hover{ background:rgba(255,255,255,.09); color:#fff; }
.navlist a:hover .bi{ color:#fff; }
.navlist a.active{
  background:linear-gradient(90deg, rgba(55,180,255,.32), rgba(255,255,255,.06));
  color:#fff; border-color:rgba(55,180,255,.35);
  box-shadow:inset 3px 0 0 var(--brand-sky);
}
.navlist a.active .bi{ color:#fff; }
.submenu a{ margin-left:1.15rem; font-weight:600; font-size:.9rem; color:rgba(255,255,255,.76); }

/* =============================== TABLES ============================== */
.table-responsive{
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--card); box-shadow:var(--shadow-sm);
}
.table{ margin-bottom:0; color:var(--ink); }
.table thead th{
  color:var(--muted); font-weight:800; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.4px;
  border-bottom:1px solid var(--line); background:var(--soft);
}
.table tbody tr:hover{ background:var(--soft-2); }
.table td, .table th{ border-color:var(--line); vertical-align:middle; }

/* =============================== BUTTONS ============================= */
.btn{ border-radius:12px; font-weight:700; }
.btn-brand,.btn-primary{
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.btn-brand:hover,.btn-primary:hover{
  background:var(--brand-2); border-color:var(--brand-2); color:#fff;
}
.btn-brand-soft{
  background:var(--soft); color:var(--brand); border:1px solid var(--line);
}
.btn-brand-soft:hover{ background:var(--brand); color:#fff; }

.btn:focus,.form-control:focus,.form-select:focus,
.lang-switch:focus,.btn-compact:focus{
  box-shadow:var(--focus); outline:none; border-color:var(--brand);
}

/* Badges */
.badge.text-bg-brand{ background:var(--brand); color:#fff; }

/* =============================== FORMS ============================== */
.form-control,.form-select{
  border-radius:11px; border:1px solid var(--line);
  background:var(--card); color:var(--ink);
}
.form-label{ font-weight:700; color:var(--ink); font-size:.9rem; }

/* =============================== OFFCANVAS ========================== */
.offcanvas{ border-radius:0 18px 18px 0; background:var(--card); }
.offcanvas-header{ border-bottom:1px solid var(--line); }
.offcanvas-title{ display:flex; align-items:center; gap:.6rem; font-weight:800; }
.offcanvas-body{ padding:.55rem; }
.offcanvas .navlist a{
  color:var(--ink); margin:.14rem 0; border-radius:13px; border:1px solid transparent;
}
.offcanvas .navlist a .bi{ color:var(--muted); }
.offcanvas .navlist a:hover{ background:var(--soft); color:var(--brand); }
.offcanvas .navlist a:hover .bi{ color:var(--brand); }
.offcanvas .navlist a.active{
  background:var(--soft); color:var(--brand);
  border-color:var(--line); box-shadow:inset 3px 0 0 var(--brand);
}
.offcanvas .navlist a.active .bi{ color:var(--brand); }

/* =============================== TOPBAR (admin) ==================== */
.topbar{
  background:var(--navy-grad); color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.topbar .nav-link,.topbar .navbar-brand{ color:rgba(255,255,255,.9) !important; }
.topbar .nav-link:hover{ color:#fff !important; }
.topbar .nav-link.active{ color:#fff !important; font-weight:700; }

/* =============================== FOOTER ============================= */
footer.app-footer{
  position:relative; z-index:1041;         /* sit above the sticky sidebar */
  background:var(--card);                   /* opaque — sidebar can't bleed through */
  border-top:1px solid var(--line);
  color:var(--muted); font-size:.86rem; padding:.9rem 1rem;
}
footer.app-footer a{ color:var(--brand); text-decoration:none; font-weight:800; }
footer.app-footer a:hover{ text-decoration:underline; }

/* =============================== AUTH SHELL ======================== */
.auth-shell{
  min-height:100dvh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:2rem 1.5rem;
  position:relative;
  background:var(--navy-grad);
  /* no overflow property: the PAGE scrolls naturally when the card is tall,
     so nothing is ever clipped and the top always stays reachable */
}
.auth-shell::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(50vw 40vw at 80% 0%, rgba(55,180,255,.28), transparent 60%),
    radial-gradient(40vw 40vw at 0% 100%, rgba(24,119,230,.22), transparent 60%);
}
.auth-card{
  position:relative; width:100%; max-width:430px;
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
  padding:2rem 1.75rem;
}
.auth-logo{ height:40px; width:auto; display:block; margin:0 auto 1.1rem; }

/* =============================== HELPERS ========================== */
.text-brand{ color:var(--brand) !important; }
.bg-brand{ background:var(--brand) !important; color:#fff; }
.hairline{ height:1px; background:var(--line); border:0; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}