:root {
  --brand-green-950: #022c22;
  --brand-green-900: #064e3b;
  --brand-green-800: #065f46;
  --brand-green-700: #047857;
  --brand-green-600: #059669;
  --brand-green-100: #d1fae5;
  --brand-green-50: #ecfdf5;
  --brand-yellow: #facc15;
  --brand-yellow-strong: #eab308;
  --brand-yellow-soft: #fef9c3;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --surface: #ffffff;
  --page: #f7faf8;
}

html { background: var(--page); }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 90% 0%, rgba(250, 204, 21, .07), transparent 26rem),
    linear-gradient(180deg, #fbfdfc 0%, #f5f8f6 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- authenticated app shell ---------- */
.app-shell { min-height: 100vh; }
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: 248px;
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(34, 197, 94, .25), transparent 24rem),
    linear-gradient(180deg, #032f24 0%, #01341f 48%, #022c22 100%);
  box-shadow: 20px 0 50px rgba(2, 44, 34, .10);
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 8px 26px;
  color: #fff;
  text-decoration: none;
}
.app-brand:hover { text-decoration: none; }
.app-brand-mark {
  font-size: 2.6rem;
  line-height: .8;
  font-weight: 950;
  font-style: italic;
  color: var(--brand-yellow);
  letter-spacing: -4px;
  text-shadow: 0 5px 18px rgba(250, 204, 21, .18);
}
.app-brand-copy strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 950;
  letter-spacing: -.04em;
}
.app-brand-copy small {
  display: block;
  margin-top: -2px;
  color: #d1fae5;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.app-nav { display: grid; gap: 6px; }
.app-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  color: #e8fff5;
  border-radius: 11px;
  text-decoration: none;
  font-size: .91rem;
  font-weight: 650;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.app-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.09);
  transform: translateX(2px);
}
.app-nav a.is-active {
  color: #17210d;
  background: linear-gradient(135deg, #fde047, #facc15);
  box-shadow: 0 10px 24px rgba(250, 204, 21, .16);
}
.app-nav-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.app-sidebar-footer { margin-top: auto; }
.app-sidebar-footer a { color: #dcfce7; }
.app-logout-button {
  width:100%; display:flex; align-items:center; gap:11px; padding:10px 12px;
  border:0; border-radius:11px; background:transparent; color:#dcfce7;
  font:inherit; font-size:.91rem; font-weight:650; cursor:pointer; text-align:left;
}
.app-logout-button:hover { background:rgba(255,255,255,.09); color:#fff; }

.app-main { min-height: 100vh; margin-left: 248px; }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 28px;
  background: rgba(255,255,255,.90);
  border-bottom: 1px solid rgba(15,23,42,.07);
  backdrop-filter: blur(16px) saturate(150%);
}
.app-topbar-title { font-weight: 900; letter-spacing: -.03em; }
.app-user { display: flex; align-items: center; gap: 10px; color: #334155; font-size: .84rem; }
.app-avatar {
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--brand-green-900);
  background: var(--brand-green-50);
  border: 1px solid #bbf7d0;
  font-weight: 900;
}
.app-content { padding: 8px 10px 34px; }

/* ---------- modernise existing Tailwind-heavy templates ---------- */
.app-content .max-w-screen-xl,
.app-content .max-w-6xl,
.app-content .max-w-5xl { max-width: 1280px; }
.app-content h1 { color: #0f172a !important; letter-spacing: -.04em; }
.app-content h2 { letter-spacing: -.02em; }

.app-content section.bg-white,
.app-content .bg-white.shadow-lg,
.app-content .bg-white.border,
.app-content .rounded-2xl.border,
.app-content .rounded-xl.border {
  border-color: #e5ebe7 !important;
  box-shadow: 0 12px 34px rgba(15, 58, 42, .055);
}
.app-content section.bg-white { border-radius: 18px !important; }
.app-content .bg-gray-50 { background-color: #f7faf8 !important; }
.app-content .bg-gray-100 { background-color: #eef5f1 !important; }

/* blue controls become garage green */
.bg-blue-600 { background-color: var(--brand-green-700) !important; }
.hover\:bg-blue-700:hover { background-color: var(--brand-green-800) !important; }
.active\:bg-blue-800:active { background-color: var(--brand-green-900) !important; }
.text-blue-600 { color: var(--brand-green-700) !important; }
.text-blue-700 { color: var(--brand-green-800) !important; }
.hover\:text-blue-600:hover { color: var(--brand-green-700) !important; }
.bg-blue-50 { background-color: var(--brand-green-50) !important; }
.hover\:bg-blue-50:hover { background-color: var(--brand-green-50) !important; }
.hover\:bg-blue-100:hover { background-color: var(--brand-green-100) !important; }
.border-blue-200 { border-color: #a7f3d0 !important; }
.focus\:ring-blue-500:focus,
.focus-visible\:ring-blue-500:focus-visible { --tw-ring-color: rgba(5,150,105,.35) !important; }

/* search / primary buttons get slightly richer finish */
button.bg-blue-600,
a.bg-blue-600 {
  box-shadow: 0 8px 18px rgba(4,120,87,.16);
}
button.bg-blue-600:hover,
a.bg-blue-600:hover { transform: translateY(-1px); }

/* inputs */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: #d8e2dc !important;
  background-color: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(16,185,129,.10) !important;
}

/* tables */
thead.bg-gray-100 { background: #f0f6f2 !important; color: #334155 !important; }
tbody tr { border-color: #edf1ef !important; }
.hover\:bg-blue-50:hover { background-color: #f1fbf5 !important; }

/* badges */
.bg-green-100 { background-color: #dcfce7 !important; }
.text-green-700 { color: #166534 !important; }
.bg-yellow-100 { background-color: #fef9c3 !important; }
.text-yellow-700, .text-yellow-800 { color: #854d0e !important; }

/* dashboard cards */
.brand-stat-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e4ebe6;
  border-radius: 17px;
  box-shadow: 0 12px 32px rgba(20, 70, 48, .06);
}
.brand-stat-card::after {
  content: "";
  position: absolute;
  width: 84px; height: 84px; border-radius: 999px;
  right: -34px; top: -34px;
  background: rgba(250,204,21,.08);
}
.brand-quick-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 15px 18px;
  background: #fff;
  border: 1px solid #e4ebe6;
  border-radius: 17px;
  box-shadow: 0 12px 32px rgba(20,70,48,.05);
}
.brand-action-green,
.brand-action-yellow {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: 10px;
  font-size: .85rem; font-weight: 800; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.brand-action-green { color:#fff; background:#087443; }
.brand-action-yellow { color:#18210f; background:#facc15; }
.brand-action-green:hover, .brand-action-yellow:hover { transform: translateY(-1px); text-decoration:none; }

/* messages */
.app-messages { max-width: 1280px; margin: 16px auto 0; padding: 0 24px; }
.app-message {
  padding: 11px 14px; border: 1px solid #fde68a; border-radius: 12px;
  background: #fffbeb; color:#713f12; font-size:.9rem;
}

/* ---------- login ---------- */
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  background: #fff;
}
.login-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  padding: 56px;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(105deg, rgba(0,46,26,.92), rgba(0,45,28,.65)),
    url("../images/hero.726dfdcc08c7.jpg") center/cover no-repeat;
}
.login-visual::after {
  content:""; position:absolute; inset:auto -12% -35% 15%; height:55%;
  background:radial-gradient(circle, rgba(250,204,21,.18), transparent 62%);
}
.login-visual-copy { position:relative; z-index:1; max-width:620px; }
.login-visual h1 { margin:0; font-size:clamp(2.5rem, 5vw, 4.5rem); line-height:1.02; font-weight:950; letter-spacing:-.055em; }
.login-visual h1 span { color:var(--brand-yellow); }
.login-visual p { max-width:54ch; color:#dcfce7; font-size:1.05rem; }
.login-panel { display:grid; place-items:center; padding:42px; background:linear-gradient(180deg,#fff,#f7faf8); }
.login-card { width:min(440px, 100%); }
.login-card-brand { display:flex; align-items:center; gap:10px; margin-bottom:34px; }
.login-card-brand .app-brand-mark { font-size:2.8rem; }
.login-card h2 { margin:0; font-size:2rem; font-weight:950; letter-spacing:-.04em; }
.login-card .login-sub { margin:.35rem 0 1.6rem; color:var(--muted); }
.login-card label { color:#334155; font-weight:750; }
.login-card input { min-height:48px; border-radius:11px !important; }
.login-submit {
  width:100%; min-height:48px; border:0; border-radius:11px;
  color:#18210f; background:linear-gradient(135deg,#fde047,#facc15);
  font-weight:900; box-shadow:0 12px 26px rgba(250,204,21,.20);
}
.login-submit:hover { filter:brightness(.98); transform:translateY(-1px); }

/* ---------- scanner ---------- */
.scan-page { background: linear-gradient(180deg,#f8fbf9,#eef5f1) !important; }
.scan-header {
  background: linear-gradient(100deg, #033a27, #075c39) !important;
  border-bottom: 3px solid var(--brand-yellow);
}
.scan-form-card {
  width:min(760px, calc(100% - 28px));
  margin:22px auto;
  padding:22px;
  border:1px solid #e1e9e4;
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 44px rgba(15,70,45,.08);
}
.scan-footer { background:rgba(255,255,255,.94) !important; backdrop-filter:blur(12px); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .app-sidebar {
    position: sticky; top:0; width:100%; height:auto; padding:10px 12px;
    display:block; box-shadow:0 8px 26px rgba(2,44,34,.12);
  }
  .app-brand { margin:0 6px 8px; }
  .app-brand-mark { font-size:2rem; }
  .app-brand-copy strong { font-size:1rem; }
  .app-nav { display:flex; gap:5px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
  .app-nav::-webkit-scrollbar { display:none; }
  .app-nav a { white-space:nowrap; padding:8px 10px; font-size:.8rem; }
  .app-sidebar-footer { display:none; }
  .app-main { margin-left:0; }
  .app-topbar { height:56px; padding:0 16px; }
  .app-content { padding:4px 2px 26px; }
  .login-shell { grid-template-columns:1fr; }
  .login-visual { display:none; }
  .login-panel { min-height:100vh; padding:24px; }
}

/* ---------- 2026 mobile usability pass ---------- */
.app-mobile-logout{display:none}
.app-mobile-logout button{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid #dbe7df;border-radius:11px;
  background:#fff;color:var(--brand-green-800);cursor:pointer;box-shadow:0 4px 14px rgba(15,70,45,.06)
}
.app-mobile-logout svg{width:18px;height:18px}

@media (max-width: 900px){
  body{overflow-x:hidden}
  .app-sidebar{
    position:relative;top:auto;inset:auto;width:100%;height:auto;padding:12px 12px 13px;
    display:grid;grid-template-columns:1fr;gap:9px;box-shadow:0 8px 24px rgba(2,44,34,.12)
  }
  .app-brand{margin:0 5px 2px;justify-self:start}
  .app-nav{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;overflow:visible;padding:0
  }
  .app-nav a{
    min-width:0;min-height:54px;justify-content:center;gap:7px;padding:8px 7px;
    white-space:normal;text-align:center;line-height:1.15;font-size:.76rem
  }
  .app-nav a:hover{transform:none}
  .app-sidebar-footer{display:none}
  .app-main{margin-left:0}
  .app-topbar{height:58px;padding:0 14px;top:0}
  .app-mobile-logout{display:block;margin:0}
  .app-content{padding:4px 4px 28px}
  .app-messages{padding:0 14px}
}

@media (max-width: 640px){
  .app-sidebar{padding:10px 10px 12px}
  .app-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-nav a{min-height:50px;justify-content:flex-start;padding:9px 11px;font-size:.79rem}
  .app-topbar-title{font-size:.88rem}
  .app-user{gap:7px}
  .app-avatar{width:32px;height:32px}
  .app-user-greeting{font-size:.78rem}
  .dashboard-page{padding:14px 12px!important}
  .brand-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px}
  .brand-quick-actions .brand-action-green:first-child{grid-column:1/-1}
  .brand-action-green,.brand-action-yellow{width:100%;min-height:46px;padding:0 12px}
  .dashboard-stat-grid{gap:10px!important}
  .brand-stat-card{border-radius:15px}
  #mot-mobile .mot-item{padding:14px}
}

@media (max-width: 480px){
  .app-topbar-title{display:none}
  .app-topbar{justify-content:flex-end}
  .app-user-greeting{display:none}
  .dashboard-search-row{display:grid!important;grid-template-columns:1fr}
  .dashboard-search-button{width:100%;justify-content:center;min-height:44px}
  .mot-item-row{flex-direction:column!important;align-items:stretch!important}
  .mot-item-row>div:first-child{min-width:0}
  .mot-item-action{width:100%}
  .mot-item-action a{width:100%;justify-content:center}
  .dashboard-pagination>div:last-child{width:100%;justify-content:flex-start;overflow-x:auto;padding-bottom:3px;flex-wrap:nowrap!important}
}

@media (max-width: 360px){
  .dashboard-stat-grid{grid-template-columns:1fr!important}
  .brand-quick-actions{grid-template-columns:1fr}
  .brand-quick-actions .brand-action-green:first-child{grid-column:auto}
}


/* 2026 mobile portal v2 — navigation stays out of the way until requested */
.app-menu-toggle{display:none}
.app-nav-backdrop{display:none}

@media (max-width:900px){
  body.app-nav-open{overflow:hidden}
  .app-sidebar{
    position:fixed!important;inset:0 auto 0 0!important;z-index:70!important;
    width:min(84vw,310px)!important;height:100dvh!important;
    display:flex!important;flex-direction:column!important;gap:0!important;
    padding:18px 14px max(16px,env(safe-area-inset-bottom))!important;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(-104%);transition:transform .3s cubic-bezier(.16,1,.3,1);
    box-shadow:28px 0 70px rgba(1,34,24,.28)!important
  }
  body.app-nav-open .app-sidebar{transform:translateX(0)}
  .app-sidebar .app-brand{margin:2px 8px 24px!important;justify-self:auto!important}
  .app-sidebar .app-brand-mark{font-size:2.45rem}
  .app-sidebar .app-nav{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;overflow:visible!important;padding:0!important}
  .app-sidebar .app-nav a{
    min-height:48px!important;justify-content:flex-start!important;gap:12px!important;
    padding:10px 12px!important;white-space:normal!important;text-align:left!important;
    font-size:.88rem!important;line-height:1.2!important
  }
  .app-sidebar .app-sidebar-footer{display:block!important;margin-top:auto!important;padding-top:18px}
  .app-sidebar .app-logout-button{min-height:48px}
  .app-nav-backdrop{
    display:block;position:fixed;inset:0;z-index:65;background:rgba(1,24,17,.44);
    opacity:0;visibility:hidden;pointer-events:none;
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    transition:opacity .24s ease,visibility 0s linear .24s
  }
  body.app-nav-open .app-nav-backdrop{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .app-main{margin-left:0!important;min-width:0}
  .app-topbar{
    height:62px!important;padding:0 max(13px,env(safe-area-inset-right)) 0 max(13px,env(safe-area-inset-left))!important;
    display:grid!important;grid-template-columns:42px minmax(0,1fr) auto!important;gap:10px!important;
    box-shadow:0 4px 18px rgba(15,58,42,.05)
  }
  .app-menu-toggle{
    display:grid;width:40px;height:40px;place-items:center;border:1px solid #dce7e0;border-radius:12px;
    background:#fff;color:var(--brand-green-900);cursor:pointer;box-shadow:0 4px 14px rgba(15,70,45,.05)
  }
  .app-menu-toggle svg{width:20px;height:20px}
  .app-topbar-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.93rem!important}
  .app-user{justify-self:end}
  .app-mobile-logout{display:block!important}
  .app-content{padding:6px 0 28px!important;min-width:0}
  .app-messages{padding:0 12px!important}
  .app-content .overflow-x-auto{overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .app-content table{max-width:100%}
}

@media (max-width:640px){
  .dashboard-page{width:100%;padding:14px 12px 24px!important;overflow:hidden}
  .dashboard-page>header{gap:14px}
  .dashboard-page>header h1{font-size:1.65rem!important}
  .dashboard-page>header p{line-height:1.45}
  .dashboard-search-row{width:100%}
  .dashboard-search-row input{min-height:46px;font-size:16px}
  .brand-quick-actions{grid-template-columns:1fr!important;padding:11px!important;border-radius:15px}
  .brand-quick-actions .brand-action-green:first-child{grid-column:auto!important}
  .brand-action-green,.brand-action-yellow{min-height:47px!important}
  .dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .brand-stat-card{padding:14px!important;min-width:0}
  .brand-stat-card p.mt-2{font-size:1.65rem!important}
  .app-content section.bg-white{border-radius:15px!important}
  .app-content .px-4.sm\:px-6{padding-left:14px!important;padding-right:14px!important}
}

@media (max-width:420px){
  .app-topbar{grid-template-columns:42px minmax(0,1fr) auto!important}
  .app-topbar-title{display:block!important;font-size:.82rem!important}
  .app-user-greeting{display:none!important}
  .app-avatar{display:none}
  .dashboard-stat-grid{grid-template-columns:1fr!important}
  .brand-stat-card{padding:16px!important}
}

@media(prefers-reduced-motion:reduce){
  .app-sidebar,.app-nav-backdrop{transition:none!important}
}