:root{--ink:#162f3d;--muted:#657780;--bg:#f3f6f8;--white:#fff;--nav:#142b38;--accent:#087f77;--accent-soft:#e8f5f2;--line:#dee6e9;--red:#b83e48;--amber:#966016;--shadow:0 5px 22px #14314008}
*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button:disabled{opacity:.55;cursor:wait}h1,h2,h3,p{margin-top:0}h1{font-size:29px;letter-spacing:-.8px;line-height:1.2;margin-bottom:8px}h2{font-size:18px;margin-bottom:5px;letter-spacing:-.2px}h3{font-size:15px;margin-bottom:8px}p{margin-bottom:12px}small,.muted{color:var(--muted)}small{font-size:12px}.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:700;text-transform:uppercase;color:var(--accent);margin-bottom:9px}.sub{color:var(--muted);font-size:13px;line-height:1.6}.starting{padding:80px;text-align:center}.skip{position:absolute;left:-999px;top:0}.skip:focus{left:15px;z-index:100;background:white;padding:12px}.icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.brand{display:flex;align-items:center;gap:11px}.brand img{width:38px;height:38px}.brand strong{display:block;letter-spacing:.2px;font-size:19px}.brand small{font-size:10px;letter-spacing:1.6px;color:#a7bcc6}.shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:238px;background:var(--nav);color:#ebf5f8;padding:30px 20px 20px;display:flex;flex-direction:column;z-index:20}.sidebar .brand{padding:0 10px 33px}.nav-group-label{font-size:10px;letter-spacing:1.5px;color:#7f9aa8;font-weight:700;padding:13px 13px 8px}.sidebar nav a{display:flex;gap:12px;align-items:center;padding:12px 13px;color:#b8cbd4;border-radius:9px;margin-bottom:3px;font-size:13px;font-weight:500}.sidebar nav a:hover{background:#203d4b;text-decoration:none;color:white}.sidebar nav a.active{background:#215049;color:#d9fff4}.sidebar nav a.active .icon{color:#66d9b9}.nav-count{margin-left:auto;border-radius:5px;padding:0 6px;background:#37665f;color:#e0fff3;font-size:11px}.sidebar-bottom{margin-top:auto;padding:24px 10px 0}.online{font-size:11px;color:#a2b9c4;display:flex;align-items:center;gap:8px}.dot{width:7px;height:7px;border-radius:50%;background:#6ac4a5;display:inline-block}.pilot-badge{margin-top:8px;font-size:10px;color:#9cb1bb}.workspace{margin-left:238px}.topbar{height:77px;background:white;border-bottom:1px solid var(--line);padding:0 35px;display:flex;align-items:center;justify-content:space-between;gap:12px}.crumb{font-size:12px;color:var(--muted)}.crumb b{color:var(--ink);font-weight:500;margin-left:9px}.top-right{display:flex;align-items:center;gap:19px}.top-time{font-size:11px;color:var(--muted)}.user-chip{display:flex;align-items:center;gap:10px;border-left:1px solid var(--line);padding-left:20px}.avatar{background:var(--accent-soft);color:var(--accent);border-radius:10px;width:35px;height:35px;display:grid;place-items:center;font-size:12px;font-weight:700}.user-chip strong{display:block;font-size:12px}.user-chip small{font-size:10px}.icon-button{border:0;background:transparent;color:var(--muted);padding:8px;border-radius:7px}.icon-button:hover{background:var(--bg);color:var(--ink)}.mobile-menu{display:none}main{padding:31px 35px 45px;max-width:1760px;margin:auto}.page-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:26px}.page-head p{margin:0}.head-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;border-radius:7px;padding:10px 16px;background:var(--accent);color:white;font-weight:600;font-size:12px;min-height:39px;white-space:nowrap;text-decoration:none}.btn:hover{background:#066b64;text-decoration:none}.btn.secondary{background:white;border-color:var(--line);color:var(--ink)}.btn.secondary:hover{background:#f7fafb}.btn.ghost{background:transparent;color:var(--accent);padding:6px 8px;min-height:31px}.btn.ghost:hover{background:var(--accent-soft)}.btn.danger{background:#faecee;color:var(--red);border:1px solid #eecad0}.btn.small{padding:6px 10px;min-height:31px;font-size:11px}.local-notice{padding:9px 13px;background:#fff7e8;border:1px solid #f3dfb8;border-radius:7px;color:#8a6124;font-size:12px;margin-bottom:22px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:23px}.kpi{background:white;border:1px solid var(--line);border-radius:10px;padding:19px 20px;box-shadow:var(--shadow)}.kpi-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-bottom:12px}.kpi-icon{background:#eef3f6;padding:8px;display:flex;border-radius:9px;color:#668397}.kpi-icon.green{background:var(--accent-soft);color:var(--accent)}.kpi-icon.red{background:#fff0ef;color:var(--red)}.kpi-icon.amber{background:#fff6e7;color:var(--amber)}.kpi-number{font-size:33px;line-height:1.1;font-weight:650;letter-spacing:-1px;margin-bottom:9px}.kpi small{font-size:11px}.grid-two{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);gap:21px;margin-bottom:23px}.equal{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{background:white;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:21px}.grid-two .panel{margin-bottom:0}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:19px 22px;border-bottom:1px solid #e9eef0}.panel-head h2{font-size:15px;margin:0}.panel-head p{margin:4px 0 0;font-size:11px;color:var(--muted)}.panel-body{padding:21px 22px}.campus-row{display:grid;grid-template-columns:122px 1fr 28px;gap:17px;align-items:center;margin-bottom:17px;font-size:12px}.campus-row:last-child{margin-bottom:0}.campus-row b{text-align:right;font-weight:600}progress{width:100%;height:7px;border:0;display:block;border-radius:5px;overflow:hidden;background:#edf2f4;accent-color:var(--accent)}progress::-webkit-progress-bar{background:#edf2f4;border-radius:5px}progress::-webkit-progress-value{background:var(--accent);border-radius:5px}progress::-moz-progress-bar{background:var(--accent);border-radius:5px}.priority-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #edf1f3;font-size:12px}.priority-row:last-child{border:0}.priority-name{display:flex;gap:10px;align-items:center}.priority-dot{width:7px;height:7px;border-radius:50%;background:#8093a0}.priority-dot.Critical{background:#c8515a}.priority-dot.High{background:#d8a047}.priority-dot.Normal{background:#44a28f}.priority-dot.Low{background:#7d96b5}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left}th{color:#71808a;background:#f9fbfc;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;padding:12px 18px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:15px 18px;border-bottom:1px solid #edf1f3;font-size:12px;vertical-align:middle}tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfdfd}.ticket-table{min-width:720px}.ticket-link{font-weight:600;color:var(--ink);display:block;max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px}.ticket-id{font-size:10px;color:var(--muted);font-weight:500;letter-spacing:.2px}.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:5px;font-size:10px;font-weight:600;white-space:nowrap;line-height:1.3;background:#eef2f6;color:#5a7188}.badge.open{color:#2d648a;background:#eaf4fc}.badge.in-progress{color:#756029;background:#fdf5df}.badge.waiting-for-user,.badge.waiting-for-supplier{background:#f1ecf8;color:#755690}.badge.resolved,.badge.closed{background:#e9f5ef;color:#31795b}.badge.critical,.badge.breached{color:#b0434d;background:#fbecee}.badge.high{color:#9b651f;background:#fff5e3}.badge.normal{color:#2c7b68;background:#edf8f4}.badge.low{color:#657993;background:#eef3f9}.sla-risk{color:var(--red);font-size:10px;font-weight:600}.sla-ok{color:var(--accent);font-size:10px}.panel-foot{padding:13px 21px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:12px}.empty{text-align:center;padding:45px 24px;color:var(--muted)}.empty .icon{width:30px;height:30px;margin-bottom:13px;color:#9caeb6}.empty strong{display:block;color:var(--ink);font-size:15px;margin-bottom:7px}.empty p{font-size:12px;max-width:440px;margin:0 auto 15px}.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:17px 20px;border-bottom:1px solid var(--line)}.filters input[type=search]{flex:1;min-width:190px}.filters select{max-width:190px}.filters input,.filters select{font-size:12px;min-height:37px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}label{font-size:12px;font-weight:600;color:#35505e}input,select,textarea{border:1px solid #cfdbe1;border-radius:7px;background:white;color:var(--ink);padding:10px 12px;min-width:0;max-width:100%;width:100%;line-height:1.4}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid #cdece4}textarea{resize:vertical;min-height:120px}.hint{color:var(--muted);font-size:11px;margin:0}.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;border-top:1px solid var(--line);padding-top:21px;margin-top:22px}.form-error{color:var(--red);background:#fff0f1;padding:10px 12px;border-radius:6px;font-size:12px;margin-bottom:15px}.form-error:empty{display:none}.notice{background:#eef7f5;border:1px solid #d8eae5;padding:15px 17px;border-radius:8px;font-size:12px;color:#365e56;margin-bottom:19px}.notice.warning{background:#fff8ed;border-color:#f1debb;color:#875f23}.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 325px;gap:22px}.detail-grid>.side-col{min-width:0}.ticket-heading{font-size:25px;word-break:break-word}.ticket-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}.prewrap{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.8}.detail-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin:0}.detail-pairs dt{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:4px}.detail-pairs dd{margin:0;font-size:12px;word-break:break-word}.detail-pairs .full{grid-column:1/-1}.stack{display:flex;flex-direction:column;gap:15px}.comment{padding:18px 22px;border-bottom:1px solid var(--line)}.comment.internal{background:#fffaf0;border-left:3px solid #d9b363}.comment-head{display:flex;gap:10px;justify-content:space-between;margin-bottom:9px;align-items:center}.comment-head strong{font-size:12px}.comment-head small{font-size:10px}.comment .prewrap{font-size:12px;margin:0}.checkbox{display:flex;align-items:center;gap:8px;font-size:12px}.checkbox input{width:16px;height:16px;accent-color:var(--accent)}.activity{border-left:1px solid var(--line);padding:0 0 19px 15px;margin-left:4px;position:relative}.activity:before{content:"";position:absolute;width:7px;height:7px;left:-4px;top:5px;background:#b0c5cd;border-radius:50%}.activity strong{font-size:12px;display:block}.activity p{font-size:11px;color:var(--muted);margin:4px 0;overflow-wrap:anywhere}.activity small{font-size:10px}.attachments{display:flex;flex-direction:column;gap:10px}.attachment{border:1px solid var(--line);border-radius:7px;padding:10px;display:flex;gap:9px;align-items:center;font-size:12px}.attachment a{overflow-wrap:anywhere}.attachment small{margin-left:auto;white-space:nowrap}.article-card{padding:20px;border:1px solid var(--line);background:white;border-radius:9px}.article-card h3{font-size:16px;margin:10px 0 8px}.article-card p{font-size:12px;color:var(--muted);line-height:1.6}.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.knowledge-toolbar{display:flex;gap:12px;margin-bottom:22px}.knowledge-toolbar input{max-width:470px}.notification{display:flex;gap:15px;align-items:center;padding:17px 22px;border-bottom:1px solid var(--line)}.notification.unread{background:#f4faf8}.notification a{font-weight:600;font-size:13px}.notification p{margin:3px 0 0;font-size:11px;color:var(--muted)}.report-definitions{font-size:11px;color:var(--muted);margin:12px 0}.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.report-grid .campus-row{grid-template-columns:135px 1fr 25px;gap:10px}.report-grid .panel-body{padding:20px 16px}.audit-table{min-width:800px}.audit-table td:last-child{max-width:440px;overflow-wrap:anywhere}.toast{position:fixed;right:25px;bottom:24px;background:#173e34;color:white;border:1px solid #2f5d4f;box-shadow:0 8px 28px #142b3830;padding:14px 20px;max-width:430px;border-radius:9px;z-index:100;font-size:13px}.toast.error{background:#762a35;border-color:#93414b}dialog{border:0;border-radius:13px;padding:0;width:560px;max-width:calc(100vw - 30px);max-height:90vh;color:var(--ink);box-shadow:0 30px 100px #142b3845}dialog::backdrop{background:#102c3a77;backdrop-filter:blur(3px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:1px solid var(--line)}.dialog-head h2{margin:0;font-size:20px}.dialog-body{padding:24px}.dialog-body .prewrap{max-height:53vh;overflow:auto}.secret{font-family:Consolas,monospace;word-break:break-all;background:#f0f5f7;border:1px dashed #a8bec8;border-radius:6px;padding:15px;font-size:17px;margin:15px 0}.login-page{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr;background:white}.login-story{background:var(--nav);color:#ecf5f8;padding:55px 65px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-story:after{content:"";position:absolute;width:450px;height:450px;border:1px solid #305363;border-radius:50%;right:-240px;bottom:50px;pointer-events:none}.login-story .brand{align-self:flex-start}.login-story h1{font-size:45px;line-height:1.17;letter-spacing:-1.5px;max-width:460px;margin:25px 0}.login-story .eyebrow{color:#7ad1b7}.login-story p{color:#a9c0ca;font-size:15px;line-height:1.8;max-width:430px}.login-story .feature{display:flex;align-items:center;gap:12px;font-size:13px;margin:18px 0;color:#cbdee6}.login-story .feature .icon{color:#7ad1b7}.login-story footer{font-size:11px;color:#85a4b3;margin-top:40px}.login-form-side{display:flex;align-items:center;justify-content:center;padding:40px}.login-form-card{width:100%;max-width:390px}.login-form-card h2{font-size:28px;letter-spacing:-.7px}.login-form-card .field{margin-top:19px}.login-form-card .btn{width:100%;margin-top:23px;padding:12px}.login-help{border-top:1px solid var(--line);margin-top:29px;padding-top:20px;font-size:12px;color:var(--muted);line-height:1.7}.login-form-card .local-notice{margin-top:22px;margin-bottom:0}.login-label{background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:700;padding:6px 9px;border-radius:5px;display:inline-block;margin-bottom:24px;letter-spacing:.7px}.credentials-note{font-size:11px;color:var(--muted);padding-top:14px}.w-full{width:100%}.mt{margin-top:18px}.mb0{margin-bottom:0}.spaced{display:flex;justify-content:space-between;align-items:center;gap:10px}.text-right{text-align:right}.loading{padding:50px;text-align:center;color:var(--muted)}.screenreader{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1500px){main{padding:36px 45px}.kpi{padding:22px 24px}.topbar{padding:0 45px}.campus-row{margin-bottom:20px}.panel-head{padding:21px 24px}}
@media(max-width:1150px){.sidebar{width:210px;padding-left:14px;padding-right:14px}.workspace{margin-left:210px}.topbar{padding:0 22px}main{padding:26px 22px}.kpi-grid{gap:11px}.kpi{padding:16px}.kpi-number{font-size:29px}.detail-grid{grid-template-columns:minmax(0,1fr) 285px}.top-time{display:none}.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.report-grid{grid-template-columns:1fr}.grid-two{gap:16px}.login-story{padding:45px}.login-story h1{font-size:38px}}
@media(max-width:860px){.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.visible{transform:translateX(0);box-shadow:10px 0 40px #122b3830}.workspace{margin-left:0}.mobile-menu{display:inline-flex}.topbar{height:67px}.grid-two,.detail-grid{grid-template-columns:1fr}.article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.login-story{padding:36px}.login-story h1{font-size:34px}.login-form-side{padding:28px}}
@media(max-width:620px){main{padding:22px 15px}.topbar{padding:0 13px}.crumb{display:none}.top-right{gap:6px}.user-chip{padding-left:9px}.user-chip strong{max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.kpi{padding:15px}.kpi-top{font-size:11px}.kpi-icon{padding:6px}.page-head{align-items:flex-start;flex-direction:column;gap:15px;margin-bottom:19px}h1{font-size:25px}.page-head .head-actions{width:100%}.grid-two,.equal,.form-grid,.article-grid{grid-template-columns:1fr}.panel-body,.panel-head{padding:18px}.filters{padding:14px;gap:8px}.filters select{flex:1;max-width:none;min-width:130px}.detail-pairs{gap:15px}.login-page{grid-template-columns:1fr}.login-story{padding:27px}.login-story .story-main,.login-story footer{display:none}.login-form-side{padding:34px 26px}.login-label{margin-bottom:18px}.toast{left:15px;right:15px;bottom:15px;max-width:none}.dialog-body{padding:19px}.form-actions{flex-wrap:wrap}.campus-row{grid-template-columns:105px 1fr 23px;gap:10px}.report-grid .campus-row{grid-template-columns:125px 1fr 23px}.topbar .icon-button{padding:7px}}
@media print{body{background:white;font-size:11px}.sidebar,.topbar,.head-actions,.filters,.toast,.local-notice,.btn,.skip{display:none!important}.workspace{margin-left:0}main{padding:0}.panel,.kpi{break-inside:avoid;box-shadow:none}.panel-head{padding:10px}.panel-body{padding:12px}.kpi-grid{gap:10px}.report-grid{grid-template-columns:1fr}.page-head{margin-bottom:18px}.table-wrap{overflow:visible}}

/* ============================================================
   TALETSO TVET COLLEGE BRAND THEME - v1.1
   Place the official logo at: static/taletsologo.png
   ============================================================ */
:root{
  --ink:#16324f;
  --muted:#68798a;
  --bg:#f4f7fb;
  --white:#ffffff;
  --nav:#0b4d8a;
  --nav-deep:#073867;
  --nav-hover:#165f9f;
  --accent:#0b4d8a;
  --accent-strong:#073867;
  --accent-soft:#eaf3fb;
  --gold:#fff200;
  --gold-soft:#fffbd1;
  --line:#dce5ee;
  --red:#b83e48;
  --amber:#966016;
  --shadow:0 8px 26px rgba(18,57,93,.07);
}
body{background:linear-gradient(180deg,#f8fbff 0,#f4f7fb 210px);}
a{color:var(--accent)}
.eyebrow{color:var(--accent);font-weight:800}
.brand{gap:12px;min-width:0}
.brand img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.12))}
.brand strong{font-size:15px;line-height:1.18;color:#fff;letter-spacing:.1px;max-width:132px}
.brand small{font-size:9px;letter-spacing:1.45px;color:var(--gold);font-weight:800;margin-top:4px;display:block}
.sidebar{background:linear-gradient(180deg,var(--nav) 0%,var(--nav-deep) 100%);padding-top:25px;box-shadow:8px 0 30px rgba(6,43,78,.08)}
.sidebar .brand{padding:0 8px 27px;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:10px}
.nav-group-label{color:rgba(255,255,255,.52);font-weight:800}
.sidebar nav a{color:rgba(255,255,255,.82);border-radius:11px;padding:12px 13px;font-weight:600;transition:background .15s ease,color .15s ease,transform .15s ease}
.sidebar nav a:hover{background:rgba(255,255,255,.10);color:#fff;transform:translateX(2px)}
.sidebar nav a.active{background:var(--gold);color:#102d4b;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.sidebar nav a.active .icon{color:#102d4b}
.nav-count{background:rgba(255,255,255,.16);color:#fff}
.sidebar nav a.active .nav-count{background:#102d4b;color:var(--gold)}
.online{color:rgba(255,255,255,.72)}
.dot{background:var(--gold);box-shadow:0 0 0 3px rgba(255,242,0,.12)}
.pilot-badge{color:rgba(255,255,255,.45)}
.topbar{height:74px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 3px 15px rgba(17,62,100,.035)}
.crumb{color:#74869a}.crumb b{color:var(--accent);font-weight:700}
.avatar{background:var(--accent-soft);color:var(--accent);border:1px solid #d7e8f7}
.icon-button:hover{background:var(--accent-soft);color:var(--accent)}
main{padding-top:32px}
h1{color:#17395d;font-weight:750}
.page-head{padding-bottom:4px}
.btn{background:var(--accent);color:#fff;border-radius:9px;box-shadow:0 3px 9px rgba(11,77,138,.12);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn:hover{background:var(--accent-strong);transform:translateY(-1px);box-shadow:0 7px 18px rgba(11,77,138,.15)}
.btn.secondary{background:#fff;border-color:#d5e1ed;color:var(--accent);box-shadow:none}
.btn.secondary:hover{background:#f5f9fd;border-color:#c4d6e6}
.btn.ghost{color:var(--accent);box-shadow:none}
.btn.ghost:hover{background:var(--accent-soft)}
.kpi,.panel,.article-card{border-color:#dbe6ef;border-radius:13px;box-shadow:var(--shadow)}
.kpi{position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.kpi-icon.green{background:var(--accent-soft);color:var(--accent)}
.kpi-number{color:#17395d;font-weight:750}
.panel-head{background:linear-gradient(180deg,#fff,#fbfdff);padding-top:18px;padding-bottom:18px}
.panel-head h2{color:#17395d;font-weight:750}
progress{accent-color:var(--accent)}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),#2e76b5)}
progress::-moz-progress-bar{background:var(--accent)}
tbody tr:hover{background:#f7fbff}
.ticket-link{color:#17395d}
.badge.open{color:#215f96;background:#e9f3fc}
.badge.in-progress{color:#6c5b16;background:#fff9ce}
.badge.normal{color:#205d91;background:#edf5fc}
.badge.resolved,.badge.closed{background:#e9f6ef;color:#29734f}
.filters{background:#fbfdff}
input,select,textarea{border-color:#cfdbe7;border-radius:9px;background:#fff}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:3px solid rgba(11,77,138,.12)}
label{color:#284968}
.notice{background:#eef6fd;border-color:#d6e8f7;color:#315873}
.toast{background:var(--nav-deep);border-color:#2a6da8}
dialog{border-radius:15px}
dialog::backdrop{background:rgba(4,35,63,.55)}
.login-page{background:#fff}
.login-story{background:linear-gradient(145deg,#0b4d8a 0%,#0a447b 54%,#073867 100%);padding:55px 65px;position:relative}
.login-story:before{content:"";position:absolute;left:0;top:0;right:0;height:7px;background:var(--gold)}
.login-story:after{content:"";position:absolute;width:540px;height:540px;border:1px solid rgba(255,255,255,.11);border-radius:50%;right:-270px;bottom:-40px;pointer-events:none;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018)}
.login-story .brand{position:relative;z-index:2}
.login-story .brand img{width:66px;height:66px}
.login-story .brand strong{font-size:18px;max-width:220px}
.login-story .brand small{font-size:10px}
.login-story h1{font-size:46px;color:#fff;max-width:500px;font-weight:780;letter-spacing:-1.7px}
.login-story .eyebrow{color:var(--gold);font-weight:800}
.login-story p{color:#d9e7f4}
.login-story .feature{color:#e8f2fa}
.login-story .feature .icon{color:var(--gold)}
.login-story footer{color:#adc7dd}
.login-form-side{background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)}
.login-form-card{max-width:410px}
.login-form-card h2{color:#17395d;font-weight:760}
.login-label{background:var(--gold);color:#17395d;border-radius:999px;padding:7px 11px;font-weight:800}
.login-form-card .btn{min-height:45px;font-size:13px}
.login-help{border-top-color:#dde7f0}
.secret{background:#f4f8fc;border-color:#aec7dc}
@media(max-width:1150px){.brand strong{font-size:14px}.login-story .brand strong{font-size:17px}}
@media(max-width:860px){.sidebar{box-shadow:14px 0 42px rgba(5,44,80,.18)}}
@media(max-width:620px){.login-story{padding:28px}.login-story .brand img{width:54px;height:54px}.login-story .brand strong{font-size:16px}.login-story:before{height:5px}}


/* ============================================================
   TALETSO TVET COLLEGE BRAND THEME - v1.2
   This block intentionally overrides the legacy teal pilot theme.
   Official logo: static/taletsologo.png
   ============================================================ */
:root{
  --ink:#17314d;
  --muted:#65778a;
  --bg:#f3f6fa;
  --white:#ffffff;
  --nav:#064b86;
  --nav-deep:#033765;
  --nav-hover:#0b5b9d;
  --accent:#064b86;
  --accent-strong:#033765;
  --accent-soft:#eaf3fb;
  --gold:#fff200;
  --gold-deep:#eadf00;
  --gold-soft:#fffbd3;
  --line:#dbe5ee;
  --red:#b83e48;
  --amber:#966016;
  --shadow:0 8px 28px rgba(11,61,101,.08);
}
html,body{background:#f3f6fa!important;color:var(--ink)}
body{font-family:"Segoe UI",Arial,sans-serif;background:linear-gradient(180deg,#ffffff 0,#f3f6fa 240px)!important}

/* Global brand */
a{color:var(--accent)}
.eyebrow{color:var(--accent)!important;font-weight:800}
.brand{gap:13px}
.brand img{width:52px!important;height:52px!important;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,.12))}
.brand strong{font-size:15px!important;line-height:1.2;color:#fff!important;font-weight:800;max-width:138px}
.brand small{font-size:9px!important;letter-spacing:1.35px;color:var(--gold)!important;font-weight:800;margin-top:4px;display:block}

/* Main navigation */
.sidebar{background:linear-gradient(180deg,#064b86 0%,#043f73 48%,#033765 100%)!important;box-shadow:8px 0 30px rgba(4,52,94,.10)}
.sidebar .brand{padding-bottom:25px!important;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:12px}
.nav-group-label{color:rgba(255,255,255,.55)!important;font-weight:800}
.sidebar nav a{color:rgba(255,255,255,.86)!important;border-radius:11px;font-weight:650;transition:.15s ease}
.sidebar nav a:hover{background:rgba(255,255,255,.12)!important;color:#fff!important;transform:translateX(2px)}
.sidebar nav a.active{background:var(--gold)!important;color:#102d4b!important;box-shadow:0 7px 18px rgba(0,0,0,.13)}
.sidebar nav a.active .icon{color:#102d4b!important}
.sidebar nav a.active .nav-count{background:#102d4b!important;color:var(--gold)!important}
.online{color:rgba(255,255,255,.75)!important}.dot{background:var(--gold)!important}
.pilot-badge{color:rgba(255,255,255,.50)!important}

/* Workspace */
.topbar{background:#fff!important;border-bottom:1px solid var(--line);box-shadow:0 3px 16px rgba(10,62,102,.04)}
.crumb b{color:var(--accent)!important;font-weight:750}
.avatar{background:var(--accent-soft)!important;color:var(--accent)!important;border:1px solid #d4e7f6}
.icon-button:hover{background:var(--accent-soft)!important;color:var(--accent)!important}
h1,.panel-head h2,.kpi-number,.ticket-link{color:#17395d!important}
.kpi,.panel,.article-card{border-color:#dbe5ee!important;border-radius:14px!important;box-shadow:var(--shadow)!important}
.kpi{position:relative;overflow:hidden;background:#fff!important}
.kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.kpi-icon.green{background:var(--accent-soft)!important;color:var(--accent)!important}
.panel-head{background:linear-gradient(180deg,#fff,#fbfdff)!important}
.filters{background:#fbfdff!important}
tbody tr:hover{background:#f7fbff!important}
progress{accent-color:var(--accent)!important}
progress::-webkit-progress-value{background:linear-gradient(90deg,#064b86,#2582c5)!important}

/* Controls */
.btn{background:var(--accent)!important;color:#fff!important;border-radius:9px!important;box-shadow:0 4px 10px rgba(6,75,134,.14);font-weight:700}
.btn:hover{background:var(--accent-strong)!important;transform:translateY(-1px)}
.btn.secondary{background:#fff!important;color:var(--accent)!important;border-color:#d3e0eb!important;box-shadow:none}
.btn.ghost{background:transparent!important;color:var(--accent)!important;box-shadow:none}
.btn.ghost:hover{background:var(--accent-soft)!important}
input,select,textarea{border-color:#cddae6!important;border-radius:9px!important}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;outline:3px solid rgba(6,75,134,.12)!important}
label{color:#294b69!important}
.notice{background:#eef6fd!important;border-color:#d4e7f6!important;color:#315873!important}

/* Login - intentionally close to the new Taletso website visual language */
.login-page{background:#fff!important;grid-template-columns:1.06fr 1fr!important}
.login-story{background:linear-gradient(145deg,#064b86 0%,#05477f 55%,#033765 100%)!important;padding:54px 64px!important;position:relative;overflow:hidden}
.login-story:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--gold);z-index:3}
.login-story:after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-255px;bottom:-45px;box-shadow:0 0 0 70px rgba(255,255,255,.028),0 0 0 140px rgba(255,255,255,.018)}
.login-story .brand{position:relative;z-index:4}
.login-story .brand img{width:74px!important;height:74px!important}
.login-story .brand strong{font-size:18px!important;max-width:220px!important}
.login-story .brand small{font-size:10px!important}
.login-story .story-main{position:relative;z-index:2}
.login-story .eyebrow{color:var(--gold)!important;font-weight:850!important}
.login-story h1{font-size:46px!important;line-height:1.12!important;color:#fff!important;font-weight:780!important;letter-spacing:-1.7px!important;max-width:500px!important}
.login-story p{color:#dceaf6!important}
.login-story .feature{color:#edf5fb!important}
.login-story .feature .icon{color:var(--gold)!important}
.login-story footer{color:#b4cde1!important;position:relative;z-index:2}
.login-form-side{background:linear-gradient(180deg,#fff 0%,#f8fbfe 100%)!important}
.login-form-card{max-width:415px!important}
.login-form-card h2{font-size:31px!important;color:#17395d!important;font-weight:760!important}
.login-label{background:var(--gold)!important;color:#17395d!important;border-radius:999px!important;padding:7px 12px!important;font-weight:850!important;letter-spacing:.65px!important}
.login-form-card .btn{min-height:46px!important;font-size:13px!important}
.login-form-card input{background:#fff!important}
.login-help{border-top-color:#dce6ef!important}
.local-notice{background:#fff8e6!important;border-color:#ecd793!important;color:#765316!important}

@media(max-width:1150px){.brand strong{font-size:14px!important}.login-story{padding:44px!important}.login-story h1{font-size:40px!important}}
@media(max-width:860px){.sidebar{box-shadow:14px 0 42px rgba(5,44,80,.18)!important}.login-page{grid-template-columns:1fr!important}.login-story{min-height:250px!important}}
@media(max-width:620px){.login-story{padding:28px!important}.login-story .story-main,.login-story footer{display:none!important}.login-story .brand img{width:60px!important;height:60px!important}.login-story:before{height:6px}}