:root{
  --bg:#0A0D10; --bg-raised:#0D1114; --surface:#12171C; --surface-2:#171D23;
  --border:#232B32; --border-light:#2E3944; --text:#EDF1F3; --text-muted:#8B99A3;
  --text-dim:#5A6771; --accent:#29D3FF; --accent-dim:#0E7490; --accent-soft:rgba(41,211,255,0.1);
  --danger:#FF6B5C; --danger-soft:rgba(255,107,92,0.1); --success:#3ADB76; --success-soft:rgba(58,219,118,0.1);
  --warn:#F5B93D; --warn-soft:rgba(245,185,61,0.1);
  --cut:10px; --sidebar-w:220px;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:15px; line-height:1.55;}
h1,h2,h3,h4{font-family:'Chakra Petch',sans-serif; font-weight:600; margin:0 0 0.5em;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
p{color:var(--text-muted); margin:0 0 1em;}
input,select,textarea,button{font-family:inherit;}
::-webkit-scrollbar{width:8px; height:8px;}
::-webkit-scrollbar-thumb{background:var(--border-light);}

.panel{background:var(--surface); border:1px solid var(--border); clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); padding:22px;}

.btn{display:inline-flex; align-items:center; gap:8px; font-family:'Chakra Petch',sans-serif; font-weight:600; font-size:0.88rem; padding:10px 18px; cursor:pointer; border:1px solid transparent; background:var(--accent); color:#031014; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);}
.btn:hover{background:#5CE0FF;}
.btn-outline{background:transparent; color:var(--text); border-color:var(--border-light);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent); background:transparent;}
.btn-danger{background:var(--danger); color:#1a0503;}
.btn-danger:hover{background:#FF8A7D;}
.btn-sm{padding:6px 12px; font-size:0.78rem;}
.btn:disabled{opacity:0.4; cursor:not-allowed;}

/* ---- Auth screens ---- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-box{width:100%; max-width:400px;}
.auth-box img{height:36px; margin-bottom:28px;}
.field{margin-bottom:16px;}
.field label{display:block; font-family:'Chakra Petch',sans-serif; font-size:0.85rem; margin-bottom:7px;}
.field input, .field select, .field textarea{width:100%; background:var(--bg-raised); border:1px solid var(--border-light); color:var(--text); padding:11px 13px; font-size:0.92rem;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent);}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-error{background:var(--danger-soft); border-left:2px solid var(--danger); padding:10px 14px; font-size:0.85rem; margin-bottom:16px; color:var(--text);}
.form-success{background:var(--success-soft); border-left:2px solid var(--success); padding:10px 14px; font-size:0.85rem; margin-bottom:16px; color:var(--text);}

/* ---- App shell ---- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{width:var(--sidebar-w); flex-shrink:0; background:var(--bg-raised); border-right:1px solid var(--border); display:flex; flex-direction:column; position:sticky; top:0; height:100vh;}
.sidebar-brand{padding:20px 18px; border-bottom:1px solid var(--border);}
.sidebar-brand img{height:28px;}
.sidebar-nav{flex:1; padding:14px 10px; overflow-y:auto;}
.sidebar-nav button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; color:var(--text-muted); font-family:'Chakra Petch',sans-serif; font-size:0.88rem; padding:11px 12px; cursor:pointer; margin-bottom:2px;}
.sidebar-nav button:hover{color:var(--text); background:var(--surface);}
.sidebar-nav button.active{color:var(--accent); background:var(--accent-soft); border-left:2px solid var(--accent);}
.sidebar-nav .badge{margin-left:auto; background:var(--border-light); color:var(--text); font-size:0.7rem; padding:1px 7px; border-radius:20px;}
.sidebar-nav .badge.hot{background:var(--danger); color:#1a0503;}
.sidebar-foot{padding:14px; border-top:1px solid var(--border); font-size:0.8rem; color:var(--text-dim);}
.sidebar-foot button{background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:0.8rem; padding:0;}
.sidebar-foot button:hover{color:var(--accent);}

.main{flex:1; min-width:0;}
.topbar{display:flex; justify-content:space-between; align-items:center; padding:18px 28px; border-bottom:1px solid var(--border); background:rgba(10,13,16,0.7);}
.content{padding:28px; max-width:1100px;}
.view{display:none;}
.view.active{display:block;}

/* ---- Stat cards ---- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;}
.stat-card{background:var(--surface); border:1px solid var(--border); padding:18px; clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));}
.stat-card b{font-family:'Chakra Petch',sans-serif; font-size:1.7rem; display:block; color:var(--text);}
.stat-card span{font-size:0.8rem; color:var(--text-dim);}
@media (max-width:900px){.stat-grid{grid-template-columns:1fr 1fr;}}

/* ---- Tables ---- */
table.data{width:100%; border-collapse:collapse;}
table.data th{text-align:left; font-family:'Chakra Petch',sans-serif; font-size:0.74rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-dim); padding:10px 12px; border-bottom:1px solid var(--border-light);}
table.data td{padding:13px 12px; border-bottom:1px solid var(--border); font-size:0.88rem; vertical-align:middle;}
table.data tr:last-child td{border-bottom:none;}
table.data tr:hover td{background:var(--bg-raised);}

.pill{display:inline-block; font-family:'Chakra Petch',sans-serif; font-size:0.72rem; padding:3px 10px; border:1px solid var(--border-light);}
.pill.active, .pill.paid, .pill.completed{color:var(--success); border-color:var(--success);}
.pill.suspended, .pill.overdue{color:var(--danger); border-color:var(--danger);}
.pill.pending, .pill.awaiting_payment, .pill.in_production, .pill.partially_paid{color:var(--warn); border-color:var(--warn);}
.pill.open{color:var(--accent); border-color:var(--accent);}
.pill.closed, .pill.estimate, .pill.received{color:var(--text-dim); border-color:var(--border-light);}

.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:12px;}
.toolbar h2{margin:0;}
.empty{text-align:center; padding:50px 20px; color:var(--text-dim); border:1px dashed var(--border-light);}

/* ---- Modal ---- */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-backdrop.open{display:flex;}
.modal{background:var(--surface); border:1px solid var(--border-light); width:100%; max-width:520px; max-height:90vh; overflow-y:auto; padding:26px; clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.modal-head button{background:none; border:none; color:var(--text-muted); font-size:1.2rem; cursor:pointer;}

.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px;}
.gallery-item{position:relative; border:1px solid var(--border);}
.gallery-item img{width:100%; height:130px; object-fit:cover; display:block;}
.gallery-item .cap{padding:8px 10px; font-size:0.8rem; color:var(--text-muted); border-top:1px solid var(--border);}
.gallery-item .del{position:absolute; top:6px; right:6px; background:rgba(10,13,16,0.85); color:var(--danger); border:none; width:26px; height:26px; cursor:pointer;}

.thread{border:1px solid var(--border); margin-bottom:18px;}
.thread-msg{padding:14px 16px; border-bottom:1px solid var(--border); font-size:0.9rem;}
.thread-msg:last-child{border-bottom:none;}
.thread-msg.admin{background:var(--accent-soft);}
.thread-msg .who{font-family:'Chakra Petch',sans-serif; font-size:0.76rem; color:var(--text-dim); margin-bottom:5px; display:flex; justify-content:space-between;}

.section-title{margin-bottom:4px;}
.muted-note{color:var(--text-dim); font-size:0.85rem; margin-bottom:20px;}
hr.rule{border:none; border-top:1px solid var(--border); margin:24px 0;}
.flex-between{display:flex; justify-content:space-between; align-items:center;}
.mt8{margin-top:8px;} .mt16{margin-top:16px;} .mb0{margin-bottom:0;}

/* ---- Sidebar nav categories ---- */
.nav-category{margin-top:4px;}
.sidebar-nav .nav-category-header{display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; background:rgba(255,255,255,0.06); border:none; border-left:3px solid var(--accent); color:var(--accent); font-weight:700; font-family:'Chakra Petch',sans-serif; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.09em; padding:10px 12px; cursor:pointer; margin:10px 0 4px; border-radius:0 4px 4px 0;}
.sidebar-nav .nav-category-header:hover{background:rgba(255,255,255,0.1);}

.nav-chevron{font-size:0.65rem; transition:transform 0.15s ease;}
.nav-category.collapsed .nav-chevron{transform:rotate(-90deg);}
.nav-category-items{overflow:hidden; max-height:600px; transition:max-height 0.2s ease;}
.nav-category.collapsed .nav-category-items{max-height:0;}

/* ---- Mobile menu button (hidden on desktop) ---- */
.mobile-menu-btn{display:none; background:none; border:none; color:var(--text); font-size:1.3rem; line-height:1; cursor:pointer; padding:4px 10px 4px 0;}
.sidebar-backdrop{display:none;}

@media (max-width:800px){
  .app-shell{flex-direction:column;}
  .mobile-menu-btn{display:block;}
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; width:280px; max-width:85vw;
    flex-direction:column; transform:translateX(-100%); transition:transform 0.2s ease;
    z-index:101; overflow-y:auto;
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-nav{display:block; padding:14px 10px;}
  .sidebar-nav button{white-space:normal;}
  .sidebar-foot{display:block;}
  .sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:100;}
  .sidebar-backdrop.open{display:block;}
  .field-row{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  table.data{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .modal{padding:20px 16px;}
  .topbar{flex-wrap:wrap; gap:8px; padding:14px 16px;}
  .topbar form{order:3; width:100%; margin:0 !important; flex-wrap:wrap;}
  .topbar form input{flex:1; min-width:0; width:auto;}
  .topbar > a{display:none;}
}

/* ---- Free files / how-to / FAQ (client portal) ---- */
.resource-card{border:1px solid var(--border); padding:16px; margin-bottom:14px;}
.resource-card h3{margin-bottom:6px; font-size:1rem;}
.video-embed{position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; background:var(--bg-raised); margin-top:10px;}
.video-embed iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
video.video-file{width:100%; height:auto; display:block; background:#000; margin-top:10px; border-radius:4px;}
.free-file-thumb-link{display:block; margin-bottom:10px;}
.free-file-thumb{width:100%; max-height:220px; object-fit:cover; border-radius:6px; display:block; transition:opacity 0.15s;}
.free-file-thumb-link:hover .free-file-thumb{opacity:0.85;}
.faq-item{border-bottom:1px solid var(--border); padding:14px 0;}
.faq-item:last-child{border-bottom:none;}
.faq-item summary{cursor:pointer; font-family:'Chakra Petch',sans-serif; font-weight:600; color:var(--text); list-style:none; display:flex; justify-content:space-between; align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; color:var(--accent); font-size:1.2rem; flex-shrink:0; margin-left:12px;}
.faq-item[open] summary::after{content:'−';}
.faq-item p{margin:10px 0 0; font-size:0.92rem;}

/* ---- Ticket attachments ---- */
.thread-msg .msg-text{white-space:pre-wrap; overflow-wrap:anywhere;}
.thread-atts{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.thread-atts img{width:112px; height:112px; object-fit:cover; display:block; border:1px solid var(--border-light);}
.thread-atts a:hover img{border-color:var(--accent);}
.thread-atts video{width:240px; max-width:100%; background:#000; display:block;}
.att-file{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--border-light); color:var(--text); text-decoration:none; font-size:0.84rem; max-width:100%; overflow-wrap:anywhere;}
.att-file:hover{border-color:var(--accent);}
.att-file span{color:var(--text-dim); font-size:0.76rem; white-space:nowrap;}
.att-chosen{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; font-size:0.8rem;}
.att-chosen span{border:1px solid var(--border-light); padding:3px 8px; overflow-wrap:anywhere;}
.att-hint{font-size:0.8rem; color:var(--text-dim); margin:8px 0 0;}

/* ---- Job card time on site ---- */
.job-time{margin-top:10px; border:1px solid var(--border); padding:10px 12px; font-size:0.86rem;}
.job-time strong{display:block; color:var(--text); margin-bottom:6px; font-family:'Chakra Petch',sans-serif; font-size:0.82rem;}
.job-time-row{display:grid; grid-template-columns:minmax(150px, 1.4fr) 1fr auto; gap:4px 14px; padding:5px 0; border-top:1px solid var(--border);}
.job-time-row small{grid-column:1 / -1; color:var(--text-dim);}
.job-time-total{border-top:1px solid var(--border-light); margin-top:2px; padding-top:7px; color:var(--text); font-weight:600;}
@media (max-width:560px){ .job-time-row{grid-template-columns:1fr auto;} .job-time-row span:first-child{grid-column:1 / -1; color:var(--text);} }

/* ---- Job card: tests, settings, signed statement ---- */
.job-proof-line{font-size:0.84rem; padding:3px 0; overflow-wrap:anywhere;}
/* ---- Support terms ---- */
.terms-overlay{position:fixed; inset:0; z-index:5000; background:rgba(4,6,8,0.88); display:flex; align-items:center; justify-content:center; padding:16px;}
.terms-box{background:var(--surface); border:1px solid var(--border-light); width:100%; max-width:640px; max-height:92vh; display:flex; flex-direction:column; padding:24px;}
.terms-box h3{margin:0 0 14px;}
.terms-text{overflow-y:auto; border:1px solid var(--border); background:var(--bg-raised); padding:14px 16px; font-size:0.9rem; line-height:1.55; margin-bottom:16px;}
.terms-text h4{margin:16px 0 6px; font-size:0.82rem; letter-spacing:0.04em; color:var(--accent); font-family:'Chakra Petch',sans-serif;}
.terms-text p{margin:0 0 10px;}
.terms-text ul{margin:0 0 10px 18px; padding:0;}
.terms-text li{margin-bottom:5px;}
.terms-accept{display:flex; align-items:center; gap:10px; margin-bottom:14px; color:var(--text); font-weight:600; cursor:pointer;}
.terms-accept input{width:22px; height:22px; flex:none;}
@media (max-width:560px){ .terms-box{padding:16px;} }

/* ---- Machine-problem ticket form ---- */
.nt-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:0 14px;}

/* ---- the build of a machine ---- */
.build-stages{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:6px;}
.build-stage{display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--text-dim); border:1px solid var(--border-light); padding:7px 9px; flex-wrap:wrap;}
.build-stage span{width:9px; height:9px; border-radius:50%; border:2px solid var(--text-dim); flex:none;}
.build-stage.done{color:var(--text); border-color:rgba(58,219,118,0.45);}
.build-stage.done span{background:var(--success); border-color:var(--success);}
.build-stage small{margin-left:auto; color:var(--text-dim);}
.build-update{border-left:2px solid var(--accent); padding:4px 0 8px 12px; margin-bottom:10px;}
.build-update .who{font-size:0.8rem; color:var(--text-dim);}
.build-photos{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.build-photos img{width:96px; height:96px; object-fit:cover; border:1px solid var(--border-light);}

/* ---- Cutting Bits shop ---- */
.sidebar-nav button.nav-shop{font-weight:700; color:var(--accent); border-left:3px solid var(--accent); background:var(--accent-soft); letter-spacing:0.02em;}
.sidebar-nav button.nav-shop span{font-size:0.62rem; background:var(--accent); color:#04141a; padding:1px 6px; margin-left:6px; border-radius:2px; vertical-align:middle;}
.sidebar-nav button.nav-shop.active{background:var(--accent); color:#04141a;}
.sidebar-nav button.nav-shop.active span{background:#04141a; color:var(--accent);}
.shop-top{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.shop-top input, .shop-top select{background:var(--bg-raised); border:1px solid var(--border-light); color:var(--text); padding:9px 12px;}
.shop-top input{flex:1; min-width:200px;}
.shop-layout{display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start;}
.shop-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px;}
.shop-bit{background:var(--surface, var(--bg-raised)); border:1px solid var(--border); display:flex; flex-direction:column;}
.shop-bit:hover{border-color:rgba(41,211,255,0.5);}
.shop-img{aspect-ratio:1/1; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.shop-img img{width:100%; height:100%; object-fit:contain;}
.shop-img.ph{background:radial-gradient(120% 90% at 30% 10%, rgba(41,211,255,0.18), transparent 60%), #0b1116;}
.shop-body{padding:12px; display:flex; flex-direction:column; gap:7px; flex:1;}
.shop-name{color:var(--text); font-size:0.92rem; line-height:1.3;}
.shop-sizes{font-size:0.72rem; color:var(--accent);}
.shop-desc{font-size:0.76rem; color:var(--text-dim); max-height:3.4em; overflow:hidden;}
.shop-body select{background:var(--bg-raised); border:1px solid var(--border-light); color:var(--text); padding:7px; font-size:0.82rem;}
.shop-row{display:flex; justify-content:space-between; align-items:center; margin-top:auto;}
.shop-price{color:var(--text); font-weight:700;}
.shop-stock{font-size:0.72rem;} .shop-stock.in{color:var(--success);} .shop-stock.out{color:var(--danger);}
.shop-cart{position:sticky; top:16px;}
.shop-line{display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; font-size:0.8rem; padding:8px 0; border-bottom:1px solid var(--border);}
.shop-line small{color:var(--text-dim);}
.shop-q{display:inline-flex; align-items:center; gap:6px;}
.shop-q button{background:var(--bg-raised); border:1px solid var(--border-light); color:var(--text); width:22px; height:22px; cursor:pointer;}
.shop-total{display:flex; justify-content:space-between; margin-top:10px; font-size:0.9rem;}
@media (max-width:900px){ .shop-layout{grid-template-columns:1fr;} .shop-cart{position:static;} }

/* credit line (https://taskforge-it.co.za) */
.tf-credit{padding:6px 28px 26px; font-size:0.78rem; color:var(--text-dim);}
.tf-credit a{color:inherit; text-decoration:underline;}
.auth-box .tf-credit{padding:14px 0 0; text-align:center;}