/* Mpire Automotive — shop manager (admin) styles */
:root{
  --bg:#0c0c0f; --panel:#141419; --card:#16161d; --line:#262630;
  --text:#f3f3f6; --muted:#8d8d99; --accent:#2e6bff; --accent-2:#5b8bff;
  --green:#22c55e; --amber:#f59e0b; --red:#ef4444; --radius:12px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
h1{font-size:1.6rem; margin:0; letter-spacing:-.02em}
h2{font-size:1.1rem; margin:0 0 .6rem}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.r{text-align:right}
.brand-mark{display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#1a3fb0); color:#fff; font-weight:900; flex:none}

/* ---- layout ---- */
.layout{display:flex; min-height:100vh}
.sidebar{width:248px; flex:none; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:40}
.side-brand{display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; padding:20px 18px;
  border-bottom:1px solid var(--line)}
.side-logo{width:172px; max-width:100%; height:auto; display:block}
.side-brand small{display:block; font-weight:600; color:var(--muted); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase}
.side-nav{display:flex; flex-direction:column; padding:14px 10px; gap:2px; flex:1}
.side-nav a{padding:.7rem .8rem; border-radius:9px; color:var(--muted); font-weight:600; font-size:.95rem}
.side-nav a:hover{background:#1d1d25; color:var(--text)}
.side-nav a.on{background:var(--accent); color:#fff}
.side-foot{padding:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.side-foot a{color:var(--muted); font-size:.88rem}
.side-foot button{width:100%; padding:.6rem; background:#1d1d25; border:1px solid var(--line);
  color:var(--text); border-radius:9px; cursor:pointer; font:inherit; font-weight:600}
.side-foot button:hover{border-color:var(--accent)}
.main{margin-left:248px; flex:1; padding:26px 30px; max-width:1280px}
.side-toggle{display:none}

/* ---- page header ---- */
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.page-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.page-actions form{margin:0}
.back{color:var(--muted); font-size:.85rem; font-weight:600}
.back:hover{color:var(--accent-2)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:.4em; padding:.6rem 1.05rem; border-radius:9px;
  border:1px solid var(--line); background:#1d1d25; color:var(--text); font-weight:600;
  cursor:pointer; font-size:.92rem; font-family:inherit; transition:.15s}
.btn:hover{border-color:#34343f}
.btn-accent{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-accent:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn-ghost{background:transparent}
.btn-danger{background:transparent; border-color:rgba(239,68,68,.4); color:#fca5a5}
.btn-danger:hover{background:rgba(239,68,68,.14)}
.btn-sm{padding:.35rem .65rem; font-size:.8rem}
.btn-block{width:100%; justify-content:center}

/* ---- cards & grids ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px}
.card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem}
.card-head a{color:var(--accent-2); font-size:.85rem; font-weight:600}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}

/* ---- stats ---- */
.stat-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:22px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:4px; transition:.15s}
.stat:hover{border-color:var(--accent); transform:translateY(-2px)}
.stat-num{font-size:1.6rem; font-weight:800; letter-spacing:-.02em}
.stat-label{color:var(--muted); font-size:.82rem; line-height:1.3}

/* ---- tables ---- */
.table{width:100%; border-collapse:collapse; font-size:.93rem}
.table th{text-align:left; padding:.6rem .7rem; color:var(--muted); font-size:.76rem; text-transform:uppercase;
  letter-spacing:.05em; border-bottom:1px solid var(--line)}
.table td{padding:.7rem; border-bottom:1px solid var(--line); vertical-align:middle}
.table tbody tr[onclick]{cursor:pointer}
.table tbody tr[onclick]:hover{background:#1c1c24}
.table tfoot td{border-bottom:none; padding:.4rem .7rem}
.row-actions{display:flex; gap:6px; justify-content:flex-end}
.row-actions form{margin:0}

/* ---- badges & tags ---- */
.badge{display:inline-block; padding:.18em .6em; border-radius:999px; font-size:.74rem; font-weight:700;
  background:#26262f; color:var(--muted); vertical-align:middle}
.s-open{background:rgba(46,107,255,.16); color:#9bb6ff}
.s-in_progress{background:rgba(245,158,11,.16); color:#fcd34d}
.s-completed{background:rgba(34,197,94,.16); color:#86efac}
.s-cancelled{background:rgba(239,68,68,.16); color:#fca5a5}
.s-inv-paid{background:rgba(34,197,94,.16); color:#86efac}
.s-inv-unpaid{background:rgba(245,158,11,.16); color:#fcd34d}
.s-appt-requested{background:rgba(46,107,255,.16); color:#9bb6ff}
.s-appt-confirmed{background:rgba(34,197,94,.16); color:#86efac}
.s-appt-completed{background:#26262f; color:var(--muted)}
.s-appt-cancelled{background:rgba(239,68,68,.16); color:#fca5a5}
.tag{display:inline-block; padding:.12em .5em; border-radius:6px; font-size:.72rem; font-weight:600;
  background:#26262f; color:var(--muted); text-transform:capitalize}
.tag-labor{background:rgba(46,107,255,.16); color:#9bb6ff}
.tag-part{background:rgba(139,92,246,.16); color:#c4b5fd}

/* ---- forms ---- */
.form{display:grid; gap:14px}
.form label{display:flex; flex-direction:column; gap:.35rem; font-size:.82rem; font-weight:600; color:var(--muted)}
.form-row{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.form input,.form select,.form textarea{
  background:#0e0e13; border:1px solid var(--line); color:var(--text);
  padding:.62rem .72rem; border-radius:9px; font:inherit; font-weight:400; width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--accent)}
.form-note{color:var(--muted); font-size:.82rem; margin:0}
.grow{flex:1}
.inline{display:flex; gap:8px; align-items:center; margin:0}
.inline input,.inline select{background:#0e0e13; border:1px solid var(--line); color:var(--text);
  padding:.5rem .6rem; border-radius:8px; font:inherit}

/* ---- searchbar / filters ---- */
.searchbar{display:flex; gap:10px; margin-bottom:18px}
.searchbar input{flex:1; background:#0e0e13; border:1px solid var(--line); color:var(--text);
  padding:.62rem .8rem; border-radius:9px; font:inherit}
.filters{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap}
.chip{padding:.4rem .9rem; border-radius:999px; border:1px solid var(--line); background:#16161d;
  color:var(--muted); font-size:.85rem; font-weight:600}
.chip:hover{border-color:#34343f}
.chip.on{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---- detail bits ---- */
.kv{display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.2rem; margin:0}
.kv dt{color:var(--muted); font-size:.85rem}
.kv dd{margin:0}
.notes{white-space:pre-wrap; background:#0e0e13; border:1px solid var(--line); border-radius:9px; padding:.8rem; color:var(--muted); margin-top:1rem}
.adder{margin-top:14px; border-top:1px solid var(--line); padding-top:14px}
.adder summary{cursor:pointer; color:var(--accent-2); font-weight:600}
.adder .form{margin-top:14px}
.item-add{margin-top:16px; border-top:1px solid var(--line); padding-top:16px}
.item-add .form-row{grid-template-columns:120px 1fr 110px 130px}
.items tfoot td{font-size:.92rem}
.invoice-box{position:sticky; top:20px}

/* ---- appointments ---- */
.appt-list{display:grid; gap:14px}
.appt{display:flex; justify-content:space-between; gap:18px; margin:0}
.appt-head{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.appt-meta{display:flex; gap:1rem; flex-wrap:wrap; font-size:.88rem; margin:.4rem 0}
.appt-service{font-size:.9rem; margin:.2rem 0}
.appt-msg{background:#0e0e13; border-left:3px solid var(--accent); padding:.6rem .9rem; border-radius:0 8px 8px 0; color:var(--muted); font-style:italic; margin:.5rem 0}
.appt-actions{display:flex; flex-direction:column; gap:8px; align-items:stretch; flex:none; min-width:140px}
.appt-actions form{margin:0}

/* ---- feed (dashboard) ---- */
.feed{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.feed li{display:flex; justify-content:space-between; gap:12px; padding:.7rem .2rem; border-bottom:1px solid var(--line)}
.feed li:last-child{border-bottom:none}

/* ---- login ---- */
.login-body{display:grid; place-items:center; min-height:100vh; padding:20px;
  background:radial-gradient(60% 50% at 50% 0%,rgba(46,107,255,.18),transparent 70%),var(--bg)}
.login-card{width:100%; max-width:360px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:28px; display:grid; gap:14px}
.login-brand{display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-bottom:1rem}
.login-logo{width:210px; max-width:100%; height:auto}
.login-brand small{color:var(--muted); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase}
.login-card label{display:flex; flex-direction:column; gap:.35rem; font-size:.82rem; font-weight:600; color:var(--muted)}
.login-card input{background:#0e0e13; border:1px solid var(--line); color:var(--text); padding:.7rem .8rem; border-radius:9px; font:inherit}
.login-card input:focus{outline:none; border-color:var(--accent)}
.login-back{text-align:center; color:var(--muted); font-size:.85rem}
.alert{padding:.7rem .9rem; border-radius:9px; font-size:.9rem; font-weight:500}
.alert-err{background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4); color:#fca5a5}

/* ---- pay card ---- */
.pay-card{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap}
.balance{font-size:1.5rem; margin:0 .6rem}
.pay-actions{display:flex; gap:10px; align-items:center}

/* ---- printable invoice ---- */
.invoice-print{background:#fff; color:#111; border-radius:var(--radius); padding:40px; max-width:820px}
.inv-top{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #111; padding-bottom:20px; margin-bottom:24px}
.inv-brand{display:flex; gap:.7rem; align-items:center}
.inv-brand .muted{color:#666}
.inv-meta{text-align:right}
.inv-meta h2{margin:0; letter-spacing:.1em; color:#111}
.inv-meta .muted{color:#666}
.inv-parties{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px}
.inv-parties .muted{color:#888}
.inv-items{color:#111}
.inv-items th{color:#666; border-bottom:1px solid #ccc}
.inv-items td{border-bottom:1px solid #eee}
.inv-totals{margin-left:auto; max-width:300px; margin-top:18px; display:grid; gap:.3rem}
.inv-totals>div{display:flex; justify-content:space-between; padding:.2rem 0}
.inv-totals .grand{border-top:2px solid #111; margin-top:.3rem; padding-top:.5rem; font-weight:800; font-size:1.1rem}
.inv-notes{margin-top:24px; padding-top:16px; border-top:1px solid #eee; color:#444}
.inv-thanks{margin-top:24px; text-align:center; color:#666; font-style:italic}

@media print{
  .sidebar,.side-toggle,.no-print,.page-head{display:none !important}
  .main{margin:0; padding:0; max-width:none}
  body{background:#fff}
  .invoice-print{border:none; padding:0; max-width:none}
}

/* ---- responsive ---- */
@media(max-width:1000px){ .stat-grid{grid-template-columns:repeat(3,1fr)} .cols{grid-template-columns:1fr} }
@media(max-width:820px){
  .sidebar{transform:translateX(-100%); transition:transform .2s}
  body.side-open .sidebar{transform:none}
  .main{margin-left:0}
  .side-toggle{display:inline-flex; align-items:center; gap:.4rem; margin-bottom:16px; background:#1d1d25;
    border:1px solid var(--line); color:var(--text); padding:.5rem .9rem; border-radius:9px; cursor:pointer; font:inherit; font-weight:600}
  .form-row,.item-add .form-row{grid-template-columns:1fr}
  .appt{flex-direction:column}
  .appt-actions{flex-direction:row; min-width:0; flex-wrap:wrap}
}
@media(max-width:560px){ .stat-grid{grid-template-columns:repeat(2,1fr)} }