/* MARTS Electricals — premium theme & components */
:root{
  --brand:#015a59; --brand-2:#0a9b97; --brand-3:#067a77; --brand-ink:#013d3c; --brand-deep:#012b2a;
  --charcoal:#2a3534; --ink:#17201f; --muted:#5f7271; --muted-2:#899b9a;
  --bg:#eef2f1; --surface:#ffffff; --line:#e1e9e8; --line-2:#eef3f2; --soft:#f4f8f7;
  --ok:#17935a; --ok-bg:#e4f5ec; --warn:#b9770d; --warn-bg:#fbf0db;
  --danger:#cf3f3f; --danger-bg:#fce9e9; --info:#1763b8; --info-bg:#e7f0fb;
  --gold:#c9a227;
  --radius:16px; --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(1,50,49,.06), 0 1px 3px rgba(1,50,49,.05);
  --shadow:0 2px 4px rgba(1,50,49,.04), 0 8px 24px rgba(1,50,49,.07);
  --shadow-lg:0 12px 28px rgba(1,45,44,.14), 0 4px 10px rgba(1,45,44,.08);
  --shadow-brand:0 8px 20px rgba(1,90,89,.28);
  --ring:0 0 0 3px rgba(10,155,151,.18);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sidebar-grad:linear-gradient(185deg,#024746 0%,#013d3c 55%,#012f2e 100%);
  --topbar-grad:linear-gradient(100deg,#013d3c 0%,#015a59 60%,#067a77 140%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;
  background:
    radial-gradient(1100px 480px at 85% -8%,rgba(10,155,151,.08),transparent 60%),
    radial-gradient(900px 420px at -5% 108%,rgba(1,90,89,.07),transparent 55%),
    var(--bg);
  background-attachment:fixed}
a{color:var(--brand-3);text-decoration:none}
h1,h2,h3,h4{margin:0 0 .4em;color:var(--brand-ink);font-weight:750;letter-spacing:-.018em}
img{max-width:100%}
.hidden{display:none !important}
.num,.n,.amount-big{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- layout ---- */
.app{min-height:100vh;display:flex;flex-direction:column}
.container{width:100%;max-width:1080px;margin:0 auto;padding:0 16px}
.topbar{position:sticky;top:0;z-index:40;background:var(--topbar-grad);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 20px rgba(1,45,44,.18);
  border-bottom:1px solid rgba(255,255,255,.08)}
.topbar .container{display:flex;align-items:center;gap:12px;height:62px}
.topbar .logo-badge{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.04em;font-size:1.02rem}
.topbar .logo-badge .fan{width:34px;height:34px;border-radius:9px;background:#fff;display:grid;place-items:center;overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.22),0 0 0 1px rgba(255,255,255,.4)}
.topbar .logo-badge .fan img{width:29px;height:29px}
.topbar .spacer{flex:1}
.topbar .who{font-size:.78rem;opacity:.92;text-align:right;line-height:1.25;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .who b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-top{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);padding:8px 14px;border-radius:10px;font-size:.84rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s;backdrop-filter:blur(6px)}
.btn-top:hover{background:rgba(255,255,255,.22);transform:translateY(-1px)}
@media(max-width:480px){.topbar .who{max-width:92px;font-size:.72rem}.topbar .who b{font-size:.8rem}}

.main{flex:1;padding:20px 0 90px}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 18px;flex-wrap:wrap}
.page-head h1{font-size:1.5rem;margin:0}
.sub{color:var(--muted);font-size:.9rem}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px;position:relative}
.card.pad-sm{padding:14px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.card-h h2,.card-h h3{margin:0;font-size:1.05rem}
.card.row-click{cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.card.row-click:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#cfe0df}

/* ---- stat tiles ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:14px;margin-bottom:18px}
.stat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);overflow:hidden;transition:transform .15s,box-shadow .15s}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand-2),var(--brand));opacity:.9}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat .n{font-size:1.7rem;font-weight:800;color:var(--brand-ink);letter-spacing:-.02em;line-height:1.1}
.stat .l{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:4px;font-weight:600}
.stat.accent{background:linear-gradient(140deg,var(--brand-2) 0%,var(--brand) 55%,var(--brand-ink) 120%);border:none;color:#fff;
  box-shadow:var(--shadow-brand)}
.stat.accent::before{background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.1))}
.stat.accent::after{content:"";position:absolute;right:-30px;bottom:-40px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%)}
.stat.accent .n{color:#fff}
.stat.accent .l{color:#fff;opacity:.9}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-size:.92rem;font-weight:650;
  padding:11px 18px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .15s,background .15s,filter .15s;white-space:nowrap;letter-spacing:.01em}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn-primary{background:linear-gradient(135deg,var(--brand-2),var(--brand) 70%);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 10px 24px rgba(1,90,89,.34)}
.btn-accent{background:linear-gradient(135deg,#12b0ab,var(--brand-2));color:#fff;box-shadow:0 6px 16px rgba(10,155,151,.3)}
.btn-accent:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--brand);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost:hover:not(:disabled){background:var(--soft);border-color:#cfe0df;transform:translateY(-1px)}
.btn-ok{background:linear-gradient(135deg,#1caa67,var(--ok));color:#fff;box-shadow:0 6px 16px rgba(23,147,90,.28)}
.btn-ok:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}
.btn-danger{background:linear-gradient(135deg,#dd5151,var(--danger));color:#fff;box-shadow:0 6px 16px rgba(207,63,63,.26)}
.btn-danger:hover:not(:disabled){filter:brightness(1.04);transform:translateY(-1px)}
.btn-sm{padding:8px 13px;font-size:.83rem;border-radius:9px}
.btn-block{width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---- forms ---- */
.field{margin-bottom:15px}
.field label{display:block;font-size:.8rem;font-weight:650;color:var(--charcoal);margin-bottom:6px;letter-spacing:.01em}
.field .hint{font-size:.76rem;color:var(--muted);margin-top:5px}
input,select,textarea{width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:11px;padding:11px 13px;outline:none;transition:.15s;box-shadow:var(--shadow-sm)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{border-color:var(--brand-2);box-shadow:var(--ring)}
textarea{min-height:82px;resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
@media(max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ---- table ---- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;
  background:linear-gradient(180deg,#f7fafa,#f1f6f5)}
tbody tr{transition:background .12s}
tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums}
.row-click{cursor:pointer}
.row-click:hover td{background:var(--soft)}
tfoot td{border-top:1px solid var(--line);border-bottom:none;padding-top:12px}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.035em;white-space:nowrap;border:1px solid transparent}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.b-draft{background:#eef1f1;color:#5a6b6a;border-color:#e2e8e7}
.b-submitted,.b-pending{background:var(--info-bg);color:var(--info);border-color:#d4e4f7}
.b-approved{background:var(--warn-bg);color:var(--warn);border-color:#f2e2bf}
.b-paid{background:var(--ok-bg);color:var(--ok);border-color:#c9ecd7}
.b-rejected,.b-suspended{background:var(--danger-bg);color:var(--danger);border-color:#f6d4d4}

/* ---- auth screens ---- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 540px at 50% -12%,rgba(10,155,151,.28),transparent 60%),
    radial-gradient(700px 520px at 112% 112%,rgba(1,90,89,.3),transparent 55%),
    radial-gradient(640px 520px at -12% 108%,rgba(6,122,119,.22),transparent 55%),
    linear-gradient(170deg,#06413f,#03302f)}
.auth-wrap::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;opacity:.5}
.auth-card{position:relative;z-index:1;width:100%;max-width:440px;background:rgba(255,255,255,.98);
  border-radius:22px;box-shadow:0 30px 70px rgba(0,25,24,.45),0 2px 0 rgba(255,255,255,.6) inset;
  padding:30px 28px;border:1px solid rgba(255,255,255,.5)}
.auth-card::before{content:"";position:absolute;top:0;left:24px;right:24px;height:3px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand))}
.auth-logo{text-align:center;margin-bottom:20px}
.auth-logo img{height:50px;border-radius:13px;box-shadow:var(--shadow-brand)}
.auth-logo .tag{font-size:.74rem;color:var(--muted);margin-top:7px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.tabs{display:flex;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:20px}
.tabs button{flex:1;border:none;background:transparent;padding:10px;border-radius:9px;font-weight:650;font-size:.9rem;color:var(--muted);cursor:pointer;transition:.15s}
.tabs button.active{background:#fff;color:var(--brand);box-shadow:var(--shadow)}

/* ---- toast ---- */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;gap:8px;width:92%;max-width:420px}
.toast{background:var(--ink);color:#fff;padding:13px 17px;border-radius:12px;box-shadow:var(--shadow-lg);font-size:.9rem;animation:slideup .25s ease;border:1px solid rgba(255,255,255,.08)}
.toast.ok{background:linear-gradient(135deg,#1caa67,var(--ok))} .toast.err{background:linear-gradient(135deg,#dd5151,var(--danger))}
@keyframes slideup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(3,25,24,.55);backdrop-filter:blur(4px);z-index:900;display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(min-width:640px){.modal-bg{align-items:center;padding:20px}}
.modal{background:#fff;width:100%;max-width:680px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;box-shadow:var(--shadow-lg);animation:slideup .25s ease}
@media(min-width:640px){.modal{border-radius:20px}}
.modal-h{position:sticky;top:0;background:linear-gradient(180deg,#ffffff,#fbfdfc);display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);z-index:2}
.modal-h h2{margin:0;font-size:1.12rem}
.modal-b{padding:20px}
.modal-f{position:sticky;bottom:0;background:#fff;padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.x{background:var(--soft);border:1px solid var(--line);width:34px;height:34px;border-radius:9px;font-size:1.3rem;line-height:1;color:var(--muted);cursor:pointer;padding:0;transition:.15s}
.x:hover{background:#fff;color:var(--ink)}

/* ---- bottom nav (mobile) ---- */
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  display:flex;justify-content:space-around;padding:7px 4px env(safe-area-inset-bottom);box-shadow:0 -4px 20px rgba(1,60,59,.08)}
.bottomnav button{flex:1;background:none;border:none;color:var(--muted);font-size:.68rem;font-weight:650;padding:6px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.15s;border-radius:10px}
.bottomnav button.active{color:var(--brand)}
.bottomnav button.active svg{transform:translateY(-1px)}
.bottomnav svg{width:23px;height:23px;transition:.15s}

/* ---- misc ---- */
.empty{text-align:center;padding:46px 16px;color:var(--muted)}
.empty .big{font-size:2.6rem;margin-bottom:10px;filter:grayscale(.1)}
.loading{text-align:center;padding:46px;color:var(--muted)}
.spinner{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--brand-2);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px}
@keyframes spin{to{transform:rotate(360deg)}}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{border:1px solid var(--line);background:#fff;color:var(--muted);padding:8px 14px;border-radius:999px;font-size:.84rem;font-weight:650;cursor:pointer;transition:.15s;box-shadow:var(--shadow-sm)}
.pill:hover{border-color:#bcd3d2;color:var(--brand)}
.pill.active{background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;border-color:transparent;box-shadow:var(--shadow-brand)}
.kv{display:grid;grid-template-columns:140px 1fr;gap:8px 14px;font-size:.9rem}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:650}
.divider{height:1px;background:var(--line);margin:16px 0}
.note-box{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:13px;font-size:.88rem}
.amount-big{font-size:1.7rem;font-weight:800;color:var(--brand-ink);letter-spacing:-.02em}
.muted{color:var(--muted)}
.right{text-align:right}
.mt{margin-top:14px}.mb{margin-bottom:14px}
.line-item{display:grid;grid-template-columns:1fr 70px 90px 90px 32px;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2)}
.line-item .li-name{font-weight:650;font-size:.88rem}
.line-item .li-name small{display:block;font-weight:400;color:var(--muted);font-size:.74rem;margin-top:2px}
@media(max-width:560px){
  .line-item{grid-template-columns:1fr 60px;grid-template-areas:'name name''unit rate''qty del';row-gap:6px}
  .line-item .li-name{grid-column:1/-1}
}

/* ======================================================================
   DESKTOP LAYOUT — premium dark sidebar + wider content at >= 960px.
   Below 960px the mobile/PWA layout (bottom nav / tab bar) is used.
   ====================================================================== */
.body-row{display:flex;flex:1;width:100%;align-items:flex-start}
.sidebar{display:none}
.form-narrow{max-width:900px;margin:0 auto}

@media(min-width:960px){
  .container{max-width:1200px}
  .topbar .who{max-width:none}
  /* dark premium sidebar */
  .sidebar{
    display:flex;flex-direction:column;gap:3px;flex:0 0 248px;width:248px;
    background:var(--sidebar-grad);color:#dfeceb;
    border-right:1px solid rgba(255,255,255,.06);
    padding:20px 14px;position:sticky;top:62px;height:calc(100vh - 62px);overflow:auto;
    box-shadow:inset -14px 0 28px -22px rgba(0,0,0,.6)}
  .sidebar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;pointer-events:none;
    background:radial-gradient(120% 80% at 20% 120%,rgba(10,155,151,.22),transparent 70%)}
  .sidebar .side-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:rgba(223,236,235,.45);font-weight:700;padding:8px 14px;margin-top:8px}
  .sidebar .navitem{position:relative;display:flex;align-items:center;gap:13px;width:100%;text-align:left;z-index:1;
    padding:11px 15px;border:none;background:none;border-radius:11px;cursor:pointer;
    color:rgba(223,236,235,.82);font-weight:600;font-size:.94rem;font-family:inherit;transition:.14s}
  .sidebar .navitem:hover{background:rgba(255,255,255,.07);color:#fff}
  .sidebar .navitem.active{background:rgba(255,255,255,.12);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
  .sidebar .navitem.active::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;
    background:linear-gradient(180deg,#19c3bd,var(--brand-2));box-shadow:0 0 12px rgba(25,195,189,.7)}
  .sidebar .navitem svg{width:20px;height:20px;flex:0 0 20px;opacity:.95}
  .sidebar .side-spacer{flex:1;min-height:20px}
  .sidebar .navitem.danger{color:#ff9d9d}
  .sidebar .navitem.danger:hover{background:rgba(255,90,90,.14);color:#ffb3b3}
  /* main column */
  .main{flex:1;min-width:0;padding:28px 0 48px}
  .main .container{padding:0 30px}
  .page-head h1{font-size:1.8rem}
  /* hide the mobile navs on desktop */
  .bottomnav{display:none !important}
  .admin-tabbar{display:none !important}
  /* roomier cards & tiles */
  .stats{grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:16px}
  .stat{padding:20px 22px}
  .stat .n{font-size:1.95rem}
  .card{padding:24px}
  .modal{max-width:720px}
  .modal[style*="760"]{max-width:880px}
}

@media(min-width:1280px){ .container{max-width:1340px} }

@media(max-width:959px){
  .sidebar{display:none !important}
  .main{padding-bottom:90px}
}