/* MRDH Tracker - MetroDocs green theme */
/* MRDH Tracker - MetroDocs green theme */
/* Smooth fade-in and slide-up animation */
.smooth-title{animation:smoothRevealTitle .9s cubic-bezier(.16,1,.3,1) both}
@keyframes smoothRevealTitle{
  from{opacity:0;transform:translateY(25px)}
  to{opacity:1;transform:none}
}

:root{
  --g950:#0b2a1d; --g900:#143f2d; --g800:#1b5139; --g700:#256b4e; --g600:#23805a; --g500:#2f9b6f; --g400:#3dbb57; --g100:#e1f1e9; --g50:#f2f9f5;
  --ink:#13211a; --muted:#66786e; --line:#e3ebe6; --bg:#f3f7f4; --card:#fff;
  --blue:#2f6fdb; --blue-bg:#e7efff; --amber:#c27a0a; --amber-bg:#fff1d9; --red:#c43d3d; --red-bg:#fde8e8; --gray-bg:#eceeed;
  --radius:16px; --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 1px 2px rgba(20,63,45,.05),0 8px 24px -8px rgba(20,63,45,.10);
  --shadow-lg:0 2px 4px rgba(20,63,45,.06),0 24px 48px -16px rgba(20,63,45,.22);
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Sora','DM Sans',system-ui,sans-serif;
  --sb-w:272px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 400px at 100% -10%,rgba(61,187,87,.07),transparent 70%),radial-gradient(700px 360px at -10% 110%,rgba(35,128,90,.06),transparent 70%);background-attachment:fixed}
a{color:var(--g700)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;line-height:1.2}
.ic{width:20px;height:20px;flex:none}
.muted{color:var(--muted)} .small{font-size:12px} .mt{margin-top:16px} .hide{display:none!important}
:focus-visible{outline:3px solid #7cc9a5;outline-offset:2px}
::selection{background:#c5ecd5;color:var(--g950)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#c9d8cf;border-radius:99px;border:3px solid transparent;background-clip:padding-box}

/* ---------- Route progress bar ---------- */
.route-bar{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--g400),#8cf0c0);z-index:300;box-shadow:0 0 12px rgba(61,187,87,.6);opacity:0}

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sb-w);background:linear-gradient(180deg,var(--g800) 0%,var(--g900) 55%,var(--g950) 100%);color:#fff;padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:60;flex:none;
  transition:width .45s var(--ease),padding .45s var(--ease);overflow:hidden;isolation:isolate}
.sidebar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(260px 200px at 20% 0%,rgba(61,187,87,.25),transparent 70%),repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px)}
.brand{display:flex;align-items:center;gap:12px;padding:2px 6px 22px;white-space:nowrap;color:#fff;text-decoration:none;cursor:pointer}
.brand:focus-visible{border-radius:14px}
.brand b{font-family:var(--display);font-size:16.5px;display:block;letter-spacing:-.02em;font-weight:700}
.brand small{display:block;font-size:11px;opacity:.68;font-weight:500}
.brand-mark{width:44px;height:44px;border-radius:13px;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 6px 18px -6px rgba(0,0,0,.4),inset 0 0 0 1px rgba(20,63,45,.08);overflow:hidden;transition:transform .5s var(--ease)}
.brand-mark img{width:36px;height:36px;object-fit:contain}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.05)}
.brand-text,.nav a span,.ub-text,.nav-label span{transition:opacity .25s,transform .35s var(--ease)}
.nav-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;padding:0 12px 10px;font-weight:700;white-space:nowrap;height:26px}
.nav{display:flex;flex-direction:column;gap:3px;position:relative}
.nav-glow{position:absolute;left:0;right:0;top:0;height:44px;border-radius:12px;background:rgba(255,255,255,.07);opacity:0;pointer-events:none;transition:transform .35s var(--ease),opacity .2s,height .3s}
.nav a{display:flex;align-items:center;gap:13px;color:#c9e0d3;text-decoration:none;padding:11px 13px;border-radius:12px;font-weight:600;position:relative;white-space:nowrap;z-index:1;overflow:hidden;transition:color .2s}
.nav a .ic{transition:transform .35s var(--ease)}
.nav a:hover{color:#fff} .nav a:hover .ic{transform:scale(1.12) rotate(-4deg)}
.nav a.active{background:linear-gradient(90deg,rgba(61,187,87,.32),rgba(255,255,255,.08));color:#fff;box-shadow:inset 0 0 0 1px rgba(140,240,192,.18)}
.nav a.active .ic{color:#8cf0c0}
.nav a.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 4px 4px 0;background:#8cf0c0;box-shadow:0 0 10px #8cf0c0}
.userbox{display:flex;align-items:center;gap:10px;margin-top:auto;padding:14px 4px 0;border-top:1px solid rgba(255,255,255,.12);white-space:nowrap}
.ub-text{flex:1;min-width:0} .ub-text b{display:block;font-size:13.5px;overflow:hidden;text-overflow:ellipsis} .ub-text small{display:block;font-size:11.5px;opacity:.62;overflow:hidden;text-overflow:ellipsis}
.logout{color:#c9e0d3;padding:9px;border-radius:10px;display:grid;margin-left:auto;transition:background .2s,color .2s,transform .2s var(--ease)} .logout:hover{background:rgba(255,120,120,.15);color:#ffb3b3;transform:translateX(2px)}
.eq-action{transition:transform .25s var(--ease),box-shadow .25s,border-color .2s;box-shadow:0 2px 5px rgba(20,63,45,.08)}
.eq-action:hover,.eq-action:focus-visible{transform:translateY(-3px) scale(1.08);box-shadow:0 9px 16px -8px rgba(20,63,45,.45);border-color:rgba(35,128,90,.35)!important}
.eq-action:active{transform:scale(.96)}
.avatar{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--g400),var(--g600));color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.avatar-lg{width:46px;height:46px;font-size:15px;border-radius:14px}

/* Collapsed sidebar (desktop) */
@media (min-width:861px){
  html.sb-collapsed{--sb-w:84px}
  html.sb-collapsed .sidebar{padding:20px 12px}
  html.sb-collapsed .brand{padding:2px 4px 22px;justify-content:center}
  html.sb-collapsed .brand-text,html.sb-collapsed .nav a span,html.sb-collapsed .ub-text,html.sb-collapsed .nav-label span{opacity:0;transform:translateX(-8px);pointer-events:none}
  html.sb-collapsed .brand-text,html.sb-collapsed .ub-text{position:absolute}
  html.sb-collapsed .nav a{justify-content:center;padding:12px}
  html.sb-collapsed .nav a span{position:absolute}
  html.sb-collapsed .userbox{flex-direction:column;gap:8px;padding:14px 0 0}
  html.sb-collapsed .sidebar{overflow:visible}
  html.sb-collapsed .nav a{overflow:visible}
  html.sb-collapsed .nav a::after{content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;transform:translate(-6px,-50%);background:var(--g950);color:#fff;font-size:12.5px;font-weight:600;padding:7px 11px;border-radius:9px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease);box-shadow:var(--shadow-lg)}
  html.sb-collapsed .nav a:hover::after,html.sb-collapsed .nav a:focus-visible::after{opacity:1;transform:translate(0,-50%)}
}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:12px 28px;background:rgba(255,255,255,.78);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;transition:box-shadow .3s}
.topbar.scrolled{box-shadow:0 10px 30px -18px rgba(20,63,45,.35)}
.search{flex:1;display:flex;align-items:center;gap:10px;color:var(--muted);max-width:520px;background:var(--g50);border:1px solid var(--line);border-radius:13px;padding:0 10px 0 14px;height:44px;transition:border-color .2s,box-shadow .3s,background .2s,max-width .4s var(--ease)}
.search:focus-within{background:#fff;border-color:var(--g500);box-shadow:0 0 0 4px rgba(47,155,111,.14);max-width:600px;color:var(--g700)}
.search input{border:0!important;background:transparent!important;font:inherit;width:100%;outline:none!important;color:var(--ink);min-height:0!important;padding:0!important}
.burger,.top-scan{display:grid;border:1px solid var(--line);background:#fff;color:var(--g700);width:44px;height:44px;border-radius:13px;place-items:center;cursor:pointer;text-decoration:none;flex:none;transition:background .2s,transform .2s var(--ease),border-color .2s}
.burger:hover,.top-scan:hover{background:var(--g50);border-color:#c5dccf}
.burger:active,.top-scan:active{transform:scale(.92)}
.burger .ic{transition:transform .45s var(--ease)}
html.sb-collapsed .burger-desk .ic{transform:scaleX(-1)}
.burger-mob{display:none}.burger-desk,.burger-mob{line-height:0}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.top-clock{font-size:12.5px;font-weight:600;color:var(--muted);padding:0 6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.acct{position:relative}
.acct-btn{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:4px 10px 4px 4px;cursor:pointer;font:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.acct-btn:hover,.acct-btn[aria-expanded=true]{border-color:#c5dccf;box-shadow:0 6px 18px -10px rgba(20,63,45,.4)}
.acct-btn .avatar{width:36px;height:36px;border-radius:11px}
.acct-name{text-align:left;line-height:1.2}.acct-name b{display:block;font-size:13.5px}.acct-name small{display:block;font-size:11.5px;color:var(--muted)}
.acct-chev .ic{width:16px;height:16px;color:var(--muted);transition:transform .35s var(--ease)}
.acct-btn[aria-expanded=true] .acct-chev .ic{transform:rotate(180deg)}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);width:280px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;visibility:hidden;opacity:0;transform-origin:top right;z-index:80}
.acct-menu.open{visibility:visible;opacity:1}
.acct-head{display:flex;gap:12px;align-items:center;padding:10px 10px 14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acct-head b{display:block;font-size:14px}.acct-head small{display:block;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;max-width:190px;white-space:nowrap}
.acct-menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:13.5px;transition:background .15s,padding .25s var(--ease)}
.acct-menu a .ic{width:18px;height:18px;color:var(--g600)}
.acct-menu a:hover{background:var(--g50);padding-left:16px}
.acct-menu a.danger{color:var(--red)}.acct-menu a.danger .ic{color:var(--red)}.acct-menu a.danger:hover{background:var(--red-bg)}
.content{padding:30px 32px 60px;max-width:1280px;width:100%}
.overlay{position:fixed;inset:0;background:rgba(8,28,18,.5);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:55}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.page-head h1{font-size:28px;font-weight:700;background:linear-gradient(90deg,var(--g950),var(--g600));-webkit-background-clip:text;background-clip:text;color:transparent}
.page-head p{color:var(--muted);margin-top:4px}

/* ---------- Cards, stats ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.card h2{font-size:16.5px;font-weight:700} .card-sub{color:var(--muted);font-size:13px;margin:2px 0 14px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px} .stack{display:flex;flex-direction:column;gap:20px}
.grid-2.wide{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);align-items:start}
.grid-2.split{grid-template-columns:minmax(300px,1fr) minmax(0,1.6fr);align-items:start}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{--mx:50%;--my:50%;display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-decoration:none;color:inherit;box-shadow:var(--shadow);position:relative;overflow:hidden;isolation:isolate;transition:border-color .25s,box-shadow .3s,transform .4s var(--ease);transform-style:preserve-3d}
.stat::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(220px circle at var(--mx) var(--my),rgba(61,187,87,.14),transparent 60%)}
.stat::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--g400),var(--g600));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.stat:hover{border-color:#b9dcc9;box-shadow:var(--shadow-lg)} .stat:hover::before{opacity:1} .stat:hover::after{transform:scaleX(1)}
.stat .tile{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none;transition:transform .5s var(--ease)}
.stat:hover .tile{transform:rotate(-8deg) scale(1.08)}
.stat small{color:var(--muted);font-size:12.5px;font-weight:500;display:block} .stat b{font-family:var(--display);font-size:28px;line-height:1.1;font-weight:700;display:block;font-variant-numeric:tabular-nums}
.t-green{background:var(--g100);color:var(--g700)} .t-blue{background:var(--blue-bg);color:var(--blue)} .t-amber{background:var(--amber-bg);color:var(--amber)} .t-red{background:var(--red-bg);color:var(--red)}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;margin:0 -22px}
table{width:100%;border-collapse:collapse}
th{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-align:left;padding:11px 22px;background:#f8fbf9;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap}
td{padding:14px 22px;border-bottom:1px solid var(--line);vertical-align:middle;transition:background .2s}
tbody tr:hover td{background:#f7fbf8}
tr:last-child td{border-bottom:0}
.eq-cell{display:flex;align-items:center;gap:12px} .eq-cell b{display:block} .eq-cell small{color:var(--muted)}
.eq-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.eq-ic .ic{width:19px;height:19px}
.lc-blue{background:#e7efff;color:#2f6fdb}.lc-green{background:#e3f4e0;color:#3a8a2e}.lc-red{background:#fde8e8;color:#c43d3d}.lc-orange{background:#fff1d9;color:#c27a0a}.lc-purple{background:#eee8fb;color:#6d4bc2}.lc-gray{background:#eceeed;color:#59635e}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-available::before,.st-in-use::before{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}
.st-available{background:var(--g100);color:#1c7a4f}.st-in-use{background:var(--blue-bg);color:var(--blue)}
.st-maintenance-required{background:var(--amber-bg);color:var(--amber)}.st-under-repair{background:#ffe6d1;color:#b4540c}
.st-defective{background:var(--red-bg);color:var(--red)}.st-lost,.st-disposed{background:var(--gray-bg);color:#59635e}
.tabs{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;padding:4px;margin-bottom:14px;scrollbar-width:none;background:var(--g50);border:1px solid var(--line);border-radius:14px;width:100%;max-width:100%;min-width:0}.tabs a{flex:0 0 auto}
.tabs a{padding:7px 14px;border-radius:10px;text-decoration:none;color:var(--muted);font-weight:600;white-space:nowrap;font-size:13.5px;transition:background .2s,color .2s}
.tabs a:hover{color:var(--g800);background:rgba(255,255,255,.7)} .tabs a.on{background:#fff;color:var(--g800);box-shadow:0 2px 8px -2px rgba(20,63,45,.18)}
.tabs i{font-style:normal;background:var(--g600);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;margin-left:5px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.empty{text-align:center;color:var(--muted);padding:36px 12px}

/* ---------- Buttons & forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:10px 18px;border-radius:12px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;min-height:42px;position:relative;overflow:hidden;transition:transform .2s var(--ease),background .2s,box-shadow .25s,border-color .2s}
.btn:active{transform:scale(.97)} .btn:hover{background:var(--g50);border-color:#c5dccf}
.btn .ic{width:18px;height:18px}
.btn-primary{background:linear-gradient(135deg,var(--g500),var(--g600) 55%,var(--g700));border-color:var(--g600);color:#fff;box-shadow:0 6px 16px -6px rgba(35,128,90,.55)}
.btn-primary:hover{background:linear-gradient(135deg,var(--g600),var(--g700));border-color:var(--g700);box-shadow:0 10px 22px -8px rgba(35,128,90,.6);transform:translateY(-1px)}
.btn-warn{background:var(--amber-bg);border-color:#f3d9a8;color:#8a5206} .btn-warn:hover{background:#ffe8bf}
.btn-danger{background:var(--red-bg);border-color:#f3c3c3;color:var(--red)} .btn-danger:hover{background:#fbd6d6}
.btn-sm{padding:6px 12px;min-height:34px;font-size:13px;border-radius:10px} .btn-block{width:100%} .btn:disabled{opacity:.55;cursor:not-allowed}
.tabs a,.acct-menu a{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.25;transform:scale(0)}
.link-btn{background:none;border:0;color:var(--g700);font:inherit;font-weight:700;cursor:pointer;padding:4px 6px}
.link-btn:hover{text-decoration:underline}
label{display:block;font-weight:700;font-size:13px;margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{width:100%;padding:11px 13px;border:1px solid #d3ded8;border-radius:12px;font:inherit;background:#fff;color:var(--ink);min-height:44px;transition:border-color .2s,box-shadow .25s}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2323805a' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer}
input:focus,select:focus,textarea:focus{border-color:var(--g500);outline:0;box-shadow:0 0 0 4px rgba(47,155,111,.15)}
input:hover:not(:focus),select:hover:not(:focus){border-color:#b9cfc3}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .hint{font-size:12px;color:var(--muted);margin-top:5px}
.alert{padding:13px 16px;border-radius:13px;margin-bottom:20px;font-weight:600;border-left:4px solid currentColor}
.alert-success{background:var(--g100);color:#14633f} .alert-error{background:var(--red-bg);color:#9d2b2b}

/* ---------- Modal, toast ---------- */
.modal-back{position:fixed;inset:0;background:rgba(8,28,18,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:16px;z-index:100;overflow-y:auto}
.modal-back.open{display:flex}
.modal{background:#fff;border-radius:20px;width:100%;max-width:540px;padding:26px;box-shadow:0 30px 80px -20px rgba(0,0,0,.4);max-height:calc(100vh - 32px);overflow-y:auto;border-top:4px solid var(--g500)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px} .modal h2{font-size:19px}
.x{border:0;background:var(--g50);width:36px;height:36px;border-radius:11px;cursor:pointer;display:grid;place-items:center;color:var(--muted);transition:transform .35s var(--ease),background .2s,color .2s}
.x:hover{background:var(--red-bg);color:var(--red);transform:rotate(90deg)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--g900);color:#fff;padding:13px 20px 15px;border-radius:14px;font-weight:600;opacity:0;pointer-events:none;z-index:200;max-width:90vw;box-shadow:0 20px 40px -12px rgba(0,0,0,.45);overflow:hidden;display:flex;align-items:center;gap:10px}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:#8cf0c0;flex:none;box-shadow:0 0 10px #8cf0c0}
.toast.err{background:#8f2626}.toast.err::before{background:#ffb3b3;box-shadow:0 0 10px #ffb3b3}
.toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.45);transform-origin:left}
.qr-box{display:grid;place-items:center;padding:12px} .qr-box img,.qr-box canvas{max-width:100%}

/* ---------- Activity logs ---------- */
.terminal{background:linear-gradient(180deg,#0b2a1d,#0a2219);color:#cfe9db;border-radius:14px;padding:6px 0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(140,240,192,.08)}
.logline{padding:8px 16px;border-bottom:1px solid rgba(255,255,255,.06);white-space:normal;overflow-wrap:anywhere;line-height:1.7;transition:background .2s} .logline:last-child{border:0}
.logline:hover{background:rgba(140,240,192,.06)}
.logline span{display:inline-block;max-width:100%;vertical-align:top}
.logline .t{color:#7fa592}.logline .u{color:#9bd6ff}.logline .d{color:#c5b4ff}.logline .as{color:#ffe08a}.logline .dst{color:#8cf0c0}
.act-RETURN{color:#8cf0c0!important}.act-REPORT_MAINTENANCE,.act-START_REPAIR{color:#ffb38a!important}.act-CHECK_OUT{color:#9bd6ff!important}
.feed{list-style:none} .feed li{padding:13px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;position:relative} .feed li:last-child{border:0}
.feed .dot{width:10px;height:10px;border-radius:50%;background:var(--g500);margin-top:6px;flex:none;box-shadow:0 0 0 4px var(--g100)}
.feed .dot.warn{background:#e49a1d;box-shadow:0 0 0 4px var(--amber-bg)}.feed .dot.blue{background:var(--blue);box-shadow:0 0 0 4px var(--blue-bg)}
.feed small{color:var(--muted);display:block}

/* ---------- Scanner ---------- */
.scan-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.viewfinder{position:relative;background:radial-gradient(circle at 50% 40%,#1f3a2d,#121d18);border-radius:18px;overflow:hidden;min-height:300px;display:grid;place-items:center}
#reader{width:100%;border:0!important} #reader video{border-radius:0!important}
.vf-corners{position:absolute;inset:0;pointer-events:none}
.vf-corners::before{content:"";position:absolute;left:50%;top:50%;width:min(62%,250px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:16px;animation:vfBreath 2.4s var(--ease) infinite;
 background:linear-gradient(#8cf0c0,#8cf0c0) top left/34px 4px no-repeat,linear-gradient(#8cf0c0,#8cf0c0) top left/4px 34px no-repeat,linear-gradient(#8cf0c0,#8cf0c0) top right/34px 4px no-repeat,linear-gradient(#8cf0c0,#8cf0c0) top right/4px 34px no-repeat,linear-gradient(#8cf0c0,#8cf0c0) bottom left/34px 4px no-repeat,linear-gradient(#8cf0c0,#8cf0c0) bottom left/4px 34px no-repeat,linear-gradient(#8cf0c0,#8cf0c0) bottom right/34px 4px no-repeat,linear-gradient(#8cf0c0,#8cf0c0) bottom right/4px 34px no-repeat}
.vf-corners::after{content:"";position:absolute;left:50%;width:min(56%,226px);height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#8cf0c0,transparent);box-shadow:0 0 14px #8cf0c0;animation:vfLine 2.4s ease-in-out infinite alternate}
@keyframes vfBreath{50%{transform:translate(-50%,-50%) scale(1.04)}}
@keyframes vfLine{from{top:calc(50% - min(28%,112px))}to{top:calc(50% + min(28%,112px))}}
.vf-msg{color:#cfe3d8;text-align:center;padding:24px;font-size:13px}
.panel{border-radius:16px;padding:18px;border:1px solid var(--line);background:#fff}
.panel.ok{border-color:#bfe3d0;background:var(--g50)} .panel.bad{border-color:#f0bcbc;background:#fff6f6} .panel.info{border-color:#c9dafb;background:#f5f8ff} .panel.warnp{border-color:#f3d9a8;background:#fffaf0}
.panel h3{font-size:16px;margin-bottom:6px} .item-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:14px}
.item-head b{font-family:var(--display);font-size:18px;display:block} .item-head small{color:var(--muted)}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13.5px;margin:12px 0} .kv dt{color:var(--muted)} .kv dd{font-weight:600}
.denied{display:flex;gap:10px;background:var(--red-bg);color:#8d2222;padding:14px;border-radius:12px;font-weight:700;margin:12px 0}
.divider{height:1px;background:var(--line);margin:16px 0}
.dur-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- Reports ---------- */
.filter-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.chip{border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;position:relative;overflow:hidden;transition:background .2s,border-color .2s,transform .2s var(--ease)}
.chip:hover,.chip.on{background:var(--g100);border-color:#b7dcc8;color:var(--g800)} .chip:active{transform:scale(.95)}
.mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.mini-stats div{background:var(--g50);border:1px solid var(--line);border-radius:14px;padding:14px} .mini-stats b{font-family:var(--display);font-size:22px;display:block} .mini-stats small{color:var(--muted)}
.role-badge{background:var(--g100);color:var(--g800);padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700}
.role-badge.head{background:#eee8fb;color:#5b3cb0}.role-badge.admin{background:#1b5139;color:#fff}

/* ---------- Login ---------- */
.login-page{background:#fff}
.login-split{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.login-hero{color:#fff;padding:36px 56px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden;isolation:isolate;background:var(--g900)}
.hero-bg{position:absolute;inset:-30px;z-index:-2;background:url(images/background.jpg) center/cover no-repeat;transform:scale(1.06);will-change:transform}
.login-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(160deg,rgba(14,47,33,.55) 0%,rgba(20,63,45,.78) 45%,rgba(11,42,29,.96) 100%)}
.login-hero .brand{padding:0}
.login-hero .brand-mark{width:54px;height:54px;border-radius:16px}.login-hero .brand-mark img{width:46px;height:46px}
.login-hero .brand b{font-size:18px}
.hero-copy{margin:10vh 0 0;position:relative;z-index:1}
.hero-copy h1{font-size:clamp(38px,4.6vw,60px);font-weight:800;margin:22px 0 16px;letter-spacing:-.04em;line-height:1.04;text-shadow:0 4px 30px rgba(0,0,0,.25)}
.hero-copy h1 em{font-style:normal;background:linear-gradient(90deg,#8cf0c0,#3dbb57);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{opacity:.88;max-width:440px;font-size:16px}
.pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 16px;border-radius:99px;font-size:13px;font-weight:600}
.pill i{width:8px;height:8px;border-radius:50%;background:#8cf0c0;box-shadow:0 0 0 0 #8cf0c0;animation:pulse 2s infinite;color:#8cf0c0}
.login-form-side{display:grid;place-items:center;padding:32px;position:relative;background:radial-gradient(500px 300px at 100% 0%,rgba(61,187,87,.08),transparent 70%)}
.login-card{width:100%;max-width:400px}
.login-logo{display:flex;justify-content:center;margin-bottom:18px}
.login-logo img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(35,128,90,.25))}
.login-card h2{font-size:30px;font-weight:700;margin-bottom:4px;text-align:center}
.login-card > .muted{text-align:center}
.login-card .btn-block{margin-top:22px;min-height:50px;font-size:15px}
.pw-wrap{position:relative} .pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--g700);font-weight:700;cursor:pointer;padding:8px;font:inherit;font-weight:700}
.login-foot{text-align:center;color:var(--muted);margin-top:22px;font-size:13px}.login-foot.small{font-size:11.5px;margin-top:10px}
.mobile-only{display:none;padding:0 0 28px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.top-clock{display:none}}
@media (max-width:1000px){.stats{grid-template-columns:1fr 1fr}.grid-2,.grid-2.wide,.grid-2.split,.scan-grid{grid-template-columns:1fr}.filter-bar{grid-template-columns:1fr 1fr}.mini-stats{grid-template-columns:1fr 1fr}.content{padding-left:24px;padding-right:24px}.table-wrap{overflow-x:auto}.table-wrap table{min-width:760px}}
@media (max-width:860px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-105%);transition:transform .5s var(--ease);width:min(300px,86vw)}
  body.menu-open .sidebar{transform:none;box-shadow:20px 0 60px -10px rgba(0,0,0,.4)} body.menu-open .overlay{opacity:1;pointer-events:auto}
  .burger-desk{display:none}.burger-mob{display:block}
  .topbar{padding:10px 14px;gap:10px;padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .acct-name,.acct-chev{display:none}.acct-btn{padding:3px;border-radius:13px}
  .content{padding:20px 14px 90px} .page-head h1{font-size:23px}
  .login-split{grid-template-columns:1fr}.login-hero{display:none}.mobile-only{display:flex}
  .login-form-side{align-items:start;padding-top:0;padding-left:0;padding-right:0}
  .login-card{padding:0 22px 32px}
  .mobile-only.login-banner{margin:0 -22px 26px;height:200px;background:linear-gradient(180deg,rgba(14,47,33,.2),rgba(14,47,33,.75)),url(images/background.jpg) center 30%/cover;align-items:flex-end;padding:18px 22px;color:#fff;font-family:var(--display);font-weight:700;font-size:18px;border-radius:0 0 24px 24px}
  .card{padding:16px;min-width:0;overflow:hidden}.table-wrap{margin:0 -16px;min-width:0}
  table.resp thead{display:none} table.resp,table.resp tbody,table.resp tr,table.resp td{display:block;width:100%}
  table.resp tr{padding:12px 16px;border-bottom:1px solid var(--line)} table.resp td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  table.resp td::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:600;text-align:left;flex:0 0 auto;min-width:76px}
  table.resp td.first{display:block;text-align:left}table.resp td.first::before{display:none}
  .form-row,.dur-row{grid-template-columns:1fr}
  .logline{white-space:normal}
  .table-wrap table{min-width:0}
  table.resp td[data-label="Status"]{align-items:flex-start;gap:8px}
  table.resp td[data-label="Status"] > span{max-width:calc(100% - 88px);text-align:left;min-width:0}
  .equipment-table td[data-label="Status"] > span{align-self:flex-start}
  .equipment-table td[data-label="Actions"] > span{width:100%;justify-content:flex-start!important}
  .equipment-table td[data-label="Actions"] .btn{flex:1;min-width:72px}
  .equipment-table .eq-cell{min-width:0}
  .equipment-table .eq-cell > span{min-width:0;overflow:hidden}
  .equipment-table .eq-cell b,.equipment-table .eq-cell small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .modal-confirm{max-width:440px}
  .modal-actions form{display:flex}
}
@media (max-width:520px){.stats{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:12px;gap:10px}.stat b{font-size:22px}.stat .tile{width:38px;height:38px}.filter-bar{grid-template-columns:1fr}.top-scan{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.viewfinder>*{grid-area:1/1}.vf-msg{z-index:2}

/* Login hero: content slightly below vertical center */
.login-hero{justify-content:center !important}
.hero-copy{margin:10vh 0 0 !important}