:root{
  /* Matched to the Matchbox kiosk staff board: light theme, purple accent */
  --bg:#f6f4fb; --panel:#ffffff; --panel-2:#faf9fd; --line:#e6e3ee;
  --txt:#1c1b22; --muted:#6b6878; --accent:#754e9d; --accent-d:#5e3f80;
  --green:#1f9d57; --green-bg:#e6f6ee; --yellow:#b7791f; --yellow-bg:#fdf3e2;
  --red:#c0392b; --red-bg:#fdecea; --radius:16px;
  --shadow:0 4px 14px rgba(28,27,34,.05);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--txt);font-size:15px;line-height:1.5;touch-action:manipulation}
a{color:var(--accent);text-decoration:none}
button{font:inherit;cursor:pointer}
.hidden{display:none!important}

/* layout: expanding icon sidebar + main column */
.layout{display:flex;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;width:66px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden;transition:width .18s ease;z-index:30;flex:none}
.sidebar:hover{width:224px;box-shadow:10px 0 34px rgba(28,27,34,.10)}
.side-brand{display:flex;align-items:center;gap:14px;padding:16px 20px;color:var(--accent);font-weight:800;white-space:nowrap;letter-spacing:.2px}
.side-nav{display:flex;flex-direction:column;gap:2px;padding:8px 12px;flex:1;overflow-y:auto;overflow-x:hidden}
.side-nav a,.side-foot a{display:flex;align-items:center;gap:16px;padding:11px 11px;border-radius:11px;color:var(--muted);white-space:nowrap;font-weight:600;cursor:pointer}
.side-nav a:hover,.side-foot a:hover{background:var(--panel-2);color:var(--txt)}
.side-nav a.active{background:var(--accent);color:#fff}
.side-foot{padding:10px 12px;border-top:1px solid var(--line)}
.sidebar .label{opacity:0;transition:opacity .14s ease}
.sidebar:hover .label{opacity:1}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.nav-toggle{display:none;background:none;border:none;color:var(--txt);font-size:26px;line-height:1;padding:2px 8px;cursor:pointer}
.nav-overlay{display:none}

.topbar{display:flex;align-items:center;gap:14px;padding:12px 24px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:8px;color:var(--accent)}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.spacer{flex:1}
.wrap{max-width:1180px;margin:0 auto;padding:24px 20px;width:100%}

@media(max-width:820px){
  html,body{overflow-x:hidden}
  .nav-toggle{display:inline-flex}
  /* sidebar becomes a slide-in drawer (no more horizontal scrolling strip) */
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:250px;flex-direction:column;
    transform:translateX(-100%);transition:transform .2s ease;overflow-y:auto;
    border-right:1px solid var(--line);border-bottom:none;box-shadow:none;z-index:60}
  .sidebar:hover{width:250px;box-shadow:none}
  .layout.nav-open .sidebar{transform:translateX(0);box-shadow:12px 0 40px rgba(28,27,34,.22)}
  .sidebar .label{opacity:1}
  .side-brand{display:flex}
  .side-nav{flex-direction:column;padding:8px 12px;gap:2px}
  .side-nav a .label,.side-foot .label{display:inline}
  .side-foot{border-top:1px solid var(--line);padding:10px 12px;margin-left:0}
  .nav-overlay{display:block;position:fixed;inset:0;background:rgba(28,27,34,.4);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
  .layout.nav-open .nav-overlay{opacity:1;pointer-events:auto}
  .topbar{gap:10px;padding:10px 16px;flex-wrap:wrap}
  .wrap{padding:18px 16px}
  /* header actions wrap instead of being cut off; modal forms go single-column */
  .section-head{flex-wrap:wrap;row-gap:10px}
  .modal .grid{grid-template-columns:1fr !important}
  .modal .grid>div[style*="grid-column"]{grid-column:1 !important}
}
.user-chip{font-size:13px;color:var(--muted)}
select,input,textarea{background:#fff;border:1.5px solid var(--line);color:var(--txt);border-radius:10px;padding:9px 11px;font:inherit;font-size:16px}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--accent)}
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 5px}

/* buttons */
.btn{background:var(--accent);color:#fff;border:none;padding:10px 16px;border-radius:11px;font-weight:600;touch-action:manipulation;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.btn:hover{background:var(--accent-d)}
.btn.ghost{background:#fff;border:1.5px solid var(--line);color:var(--txt)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.danger{background:var(--red)}
.btn.warn{background:var(--yellow);color:#fff}
.btn.ghost.rm{color:var(--red);border-color:var(--line)}
.btn.ghost.rm:hover{background:var(--red);border-color:var(--red);color:#fff}
.clickable{cursor:pointer;transition:transform .08s ease,box-shadow .12s ease}
.clickable:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(28,27,34,.10)}
.spin{display:inline-block;width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;vertical-align:-2px;margin-right:6px;opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
.btn:disabled{opacity:.75;cursor:default}

/* cards / grid */
.grid{display:grid;gap:16px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);overflow-x:auto}
.card h3{margin:0 0 4px;font-size:15px}
.muted{color:var(--muted)}
.big{font-size:30px;font-weight:800;margin:4px 0}

/* status stat tiles */
.stat{display:flex;flex-direction:column;gap:2px;border-radius:var(--radius);padding:16px 18px;border:1px solid var(--line);box-shadow:var(--shadow)}
.stat .n{font-size:34px;font-weight:800;line-height:1}
.stat.green{background:var(--green-bg);border-color:#bfe6cf;color:#12683a}
.stat.yellow{background:var(--yellow-bg);border-color:#f2dcb0;color:#8a5a12}
.stat.red{background:var(--red-bg);border-color:#f5c6c0;color:#a5281b}
.stat .lbl{font-size:13px;opacity:.85}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.pill .d{width:8px;height:8px;border-radius:50%}
.pill.green{background:var(--green-bg);color:#12683a}.pill.green .d{background:var(--green)}
.pill.yellow{background:var(--yellow-bg);color:#8a5a12}.pill.yellow .d{background:var(--yellow)}
.pill.red{background:var(--red-bg);color:#a5281b}.pill.red .d{background:var(--red)}
.pill.grey{background:#efedf5;color:var(--muted)}.pill.grey .d{background:var(--muted)}
.pill.blue{background:#efe9f6;color:var(--accent)}.pill.blue .d{background:var(--accent)}

/* financial tiles */
.card.fin .big{font-size:24px}
.big.neg{color:var(--red)}
.big.pos{color:var(--green)}

/* work-order timeline */
.timeline{margin:6px 0}
.tl-item{position:relative;padding:0 0 18px 22px;border-left:2px solid var(--line);margin-left:6px}
.tl-item:last-child{border-left-color:transparent}
.tl-dot{position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--line)}
.tl-item.done .tl-dot{background:var(--green);border-color:var(--green)}
.tl-head{font-weight:600;font-size:14px}
.tl-body{font-size:14px;color:var(--txt);margin-top:2px}

/* photo markup + thumbnails */
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.mediabtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
input[type=file]{max-width:100%;box-sizing:border-box}
.thumb{position:relative;width:110px}
.thumb img,.thumb video{width:110px;height:82px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.thumb .draw{width:100%;margin-top:4px;padding:4px}
.thumb-x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(28,27,34,.6);color:#fff;line-height:1}
.thumb-tag{position:absolute;top:4px;left:4px;background:var(--accent);color:#fff;border-radius:6px;font-size:11px;padding:1px 5px}
.mk-item{position:relative;display:flex;flex-direction:column;gap:4px;width:140px}
.mk-item .media-thumb{width:140px;height:100px}
.mk-cap{font-size:11px;color:var(--muted)}
.mk-overlay{z-index:70}
.mk-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mk-swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.mk-swatch.sel{border-color:var(--txt);box-shadow:0 0 0 2px var(--accent)}
.mk-wrap{max-height:60vh;overflow:auto;text-align:center;background:#efedf5;border:1px solid var(--line);border-radius:10px;padding:8px}
.mk-wrap canvas{max-width:100%;border-radius:6px;touch-action:none;cursor:crosshair}

/* analytics bars */
.bar-row{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:13px}
.bar-lbl{width:130px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;background:#efedf5;border-radius:6px;height:16px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent);border-radius:6px}
.bar-val{width:46px;text-align:right}

/* tables */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);font-size:14px}
th{color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
tr:hover td{background:var(--panel-2)}
.row-link{cursor:pointer}

/* login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{width:360px;box-shadow:0 12px 40px rgba(28,27,34,.08)}
.brand-logo{height:26px;width:auto;flex:none}
.login-logo{max-height:54px;width:auto;margin:0 auto 10px;display:block}
.pinpad{text-align:center}
.pin-dots{display:flex;gap:12px;justify-content:center;margin:16px 0 6px}
.pin-dots .pdot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line)}
.pin-dots .pdot.on{background:var(--accent);border-color:var(--accent)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.key{padding:16px 0;font-size:20px;font-weight:700;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--txt);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.key:hover{border-color:var(--accent);color:var(--accent)}
.key.ghost{background:var(--panel-2);color:var(--muted);font-weight:500}
.err{color:var(--red);font-size:13px;margin-top:8px;min-height:16px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(28,27,34,.45);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;z-index:50}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:640px;max-width:100%;padding:22px;box-shadow:0 20px 60px rgba(28,27,34,.18)}
.modal h2{margin:0 0 14px}
.modal-close{float:right;background:none;border:none;color:var(--muted);font-size:22px;line-height:1}
/* modal form fields fill their grid cell (stops the right column spilling off-screen) */
.modal .grid>div{min-width:0}
.modal .grid input,.modal .grid select,.modal .grid textarea{width:100%;box-sizing:border-box}

/* misc */
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.section-head h1{font-size:22px;margin:0}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.media-thumb{width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.hist-item{border-left:2px solid var(--line);padding:2px 0 14px 14px;margin-left:6px;position:relative}
.hist-item::before{content:"";position:absolute;left:-5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:6px 14px;font-size:14px}
.kv div:nth-child(odd){color:var(--muted)}
.qr-box{text-align:center}
.qr-box img{background:#fff;padding:8px;border-radius:8px;border:1px solid var(--line)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--txt);color:#fff;border:none;padding:12px 18px;border-radius:12px;z-index:100;box-shadow:0 8px 30px rgba(28,27,34,.25)}
@media(max-width:820px){.cols-3,.cols-4{grid-template-columns:1fr 1fr}.kv{grid-template-columns:1fr}}

/* ---------- Spotter platform mark ---------- */
:root{ --navy:#1b2a4a; }
.spotter-ico{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-0.12em}
.spotter-badge{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:15px;color:var(--navy);
  text-decoration:none;padding:5px 11px 5px 9px;border:1px solid var(--line);border-radius:999px;background:var(--panel);line-height:1;white-space:nowrap}
.spotter-badge .spotter-ico{font-size:18px}
.spotter-badge:hover{border-color:#ffb547;background:#fff7ef}
.powered-by{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:12px;
  padding:12px 12px 14px;line-height:1}
.powered-by .spotter-ico{font-size:15px}
.powered-by strong{color:var(--navy);font-weight:800}
.side-foot + .powered-by{border-top:0;padding-top:4px}
.login-wrap{flex-direction:column;gap:16px}
.login-wrap .powered-by{padding:0}
@media(max-width:820px){
  .spotter-badge{font-size:13px;padding:4px 10px 4px 8px}
  .spotter-badge .spotter-ico{font-size:16px}
}