:root{--navy:#071d38;--navy2:#0b315d;--blue:#2563eb;--cyan:#0ea5e9;--bg:#f4f7fb;--text:#10233f;--muted:#6b7b91;--line:#e1e8f0;--green:#16a34a;--red:#dc2626;--shadow:0 12px 32px rgba(15,40,75,.07)}*{box-sizing:border-box}html{font-size:16px}body{margin:0;font-family:"Segoe UI Variable Text","Segoe UI",Inter,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}.app-shell{display:grid;grid-template-columns:292px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#061a32,#0a2e58 62%,#092547);color:white;padding:24px 20px 18px;display:flex;flex-direction:column;overflow-y:auto}.brand,.login-brand{display:flex;align-items:center;gap:13px}.brandmark{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#2f7fff,#19c7ff);display:grid;place-items:center;font-weight:900;box-shadow:0 8px 22px #0ea5e955;font-size:18px}.brandmark.mini{width:34px;height:34px;border-radius:10px;font-size:14px}.brand b,.login-brand b{font-size:22px;letter-spacing:.1em}.brand small,.login-brand small{display:block;font-size:11px;letter-spacing:.08em;opacity:.72;margin-top:2px}.me{display:flex;gap:11px;align-items:center;background:#ffffff0e;border:1px solid #ffffff13;border-radius:15px;padding:13px;margin:24px 0 12px}.avatar{width:42px;height:42px;border-radius:12px;background:#2563eb;color:white;display:grid;place-items:center;font-weight:800}.me b{font-size:14px}.me small{display:block;font-size:11px;opacity:.68;margin-top:3px}nav{display:flex;flex-direction:column;gap:3px}.navlabel{font-size:11px;letter-spacing:.12em;color:#8eb0d4;margin:17px 10px 6px}nav a{padding:11px 12px;border-radius:10px;color:#d9e9fa;font-size:14px;display:flex;gap:11px;align-items:center;min-height:43px}nav a:hover{background:#ffffff10;color:white}nav a.create{background:linear-gradient(135deg,#2869ee,#10a8e8);color:white;box-shadow:0 8px 20px #0b63d133;margin:4px 0}.sidefoot{margin-top:20px;border-top:1px solid #ffffff17;padding-top:14px;display:flex;flex-direction:column;gap:5px}.sidefoot a{padding:10px 12px;border-radius:10px;display:flex;align-items:center;gap:9px;font-size:14px}.sidefoot .side-notif{color:#dbeafe}.sidefoot .side-notif span{margin-left:auto;background:#ef4444;color:white;border-radius:999px;padding:2px 7px;font-size:11px}.sidefoot .logout{color:#ffc1c8}.sidefoot .logout:hover{background:#ef44441b}.sidefoot small{font-size:10px;color:#7291b3;padding:3px 12px}main{min-width:0}.topbar{min-height:94px;padding:20px 36px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:20}.topbar h1{margin:3px 0 0;font-size:25px;letter-spacing:-.02em}.crumb,.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:800;color:#4f78a8}.top-actions{display:flex;align-items:center;gap:11px}.health,.rolepill{padding:9px 12px;border:1px solid var(--line);border-radius:999px;font-size:12px;background:#fff}.health i{display:inline-block;width:8px;height:8px;background:#22c55e;border-radius:50%;margin-right:7px;box-shadow:0 0 0 4px #22c55e16}.notif-btn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:13px;background:white;font-size:18px}.notif-btn em,.mobile-nav em{position:absolute;top:-5px;right:-5px;background:#ef4444;color:white;border:2px solid white;border-radius:999px;min-width:21px;height:21px;display:grid;place-items:center;font-size:10px;font-style:normal;font-weight:800}.content{padding:30px 36px 70px;max-width:1680px;margin:0 auto}.hero{padding:30px 32px;border-radius:21px;background:radial-gradient(circle at 85% 10%,#1c8cff 0,#145dc5 24%,transparent 25%),linear-gradient(135deg,#082b57,#0e4d94);color:white;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);overflow:hidden}.hero h2{font-size:30px;margin:7px 0}.hero p{margin:0;color:#c7dcf4;max-width:730px;font-size:15px}.hero .eyebrow{color:#86c8ff}.btn{border:0;border-radius:11px;padding:11px 16px;font-weight:750;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:14px;min-height:42px}.primary{background:linear-gradient(135deg,#2563eb,#0ea5e9);color:white}.secondary{background:white;color:#263c58;border:1px solid var(--line)}.light{background:white;color:#0b3d78}.good{background:#16a34a;color:white}.danger{background:#fff1f2;color:#b42318;border:1px solid #fecdd3}.btn.small{font-size:12px;padding:8px 10px;min-height:34px}.full{width:100%}.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:20px 0}.kpi{background:white;border:1px solid #e5ebf2;border-radius:17px;padding:20px 21px;box-shadow:0 5px 15px rgba(17,43,76,.03)}.kpi span{font-size:12px;color:var(--muted);font-weight:750}.kpi b{display:block;font-size:30px;margin:8px 0 3px;letter-spacing:-.03em}.kpi small{color:#8a98ab;font-size:11px}.kpi.accent{border-top:3px solid #2563eb}.kpi.good{background:white;color:inherit;border-top:3px solid #16a34a}.grid2{display:grid;grid-template-columns:1.65fr 1fr;gap:18px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px}.panel{background:white;border:1px solid #e3e9f1;border-radius:17px;padding:21px;box-shadow:0 5px 20px rgba(15,40,75,.04);margin-bottom:18px}.panel-head,.toolbar,.ticket-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-head h3,.panel h3{margin:4px 0 12px;font-size:18px}.panel-head a{font-size:13px;color:var(--blue);font-weight:750}.ticket-list{margin:0 -7px}.ticket-row{display:flex;justify-content:space-between;gap:15px;padding:14px 8px;border-top:1px solid #edf1f5}.ticket-row:first-child{border-top:0}.ticket-row b,.ticket-row span,.ticket-row small{display:block}.ticket-row b{font-size:14px}.ticket-row span{font-size:14px;margin:4px 0}.ticket-row small{font-size:12px;color:var(--muted)}.tright{text-align:right}.pill{display:inline-flex!important;width:max-content!important;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--c) 11%,white);color:var(--c);border:1px solid color-mix(in srgb,var(--c) 22%,white);font-size:11px!important;font-weight:800}.pill.big{padding:8px 13px;font-size:13px!important}.dot{display:inline-block;width:8px;height:8px;background:var(--c);border-radius:50%;margin-right:7px}.table-wrap{overflow:auto;padding:0}table{width:100%;border-collapse:collapse;font-size:13px}th{background:#f7f9fc;color:#63758b;text-align:left;font-size:11px;letter-spacing:.04em;padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:14px;border-bottom:1px solid #edf1f5;vertical-align:top}td small,.link small{display:block;color:var(--muted);margin-top:4px;font-size:11px}.link b{color:#175bc4}.toolbar{margin-bottom:16px}.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}.filters{display:flex;gap:9px;align-items:end;flex-wrap:wrap}.filters label{font-size:12px;color:var(--muted)}input,select,textarea{width:100%;border:1px solid #dbe3ed;border-radius:11px;padding:12px 13px;background:#fff;color:#1c304b;outline:none;font:inherit;font-size:14px}input:focus,select:focus,textarea:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #60a5fa1c}.filters input{min-width:290px}.form{display:flex;flex-direction:column;gap:14px}.form label,.mini-form label,.settings-grid label{font-size:13px;font-weight:700;color:#40536b}.form label input,.form label select,.form label textarea,.mini-form input,.mini-form select,.mini-form textarea{margin-top:6px}.bigform{max-width:1040px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.form-grid .full{grid-column:1/-1}.uploadbox{border:1px dashed #bfd0e5;border-radius:13px;padding:17px;background:#f8fbff}.uploadbox small{display:block;color:var(--muted);margin-top:6px}.form-actions{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line);padding-top:17px}.page-intro{margin-bottom:20px}.page-intro h2{margin:4px 0;font-size:24px}.page-intro p{margin:0;color:var(--muted);font-size:14px}.ticket-head{margin-bottom:19px}.ticket-head h2{margin:5px 0 7px;font-size:25px}.ticket-head-actions{display:flex;gap:9px;align-items:center}.meta{display:flex;gap:7px;font-size:13px;color:var(--muted);flex-wrap:wrap}.ticket-layout{display:grid;grid-template-columns:minmax(0,1.7fr) 380px;gap:18px}.initial{display:flex;gap:13px}.initial b,.initial small{display:block}.initial small{color:var(--muted);font-size:12px;margin-top:3px}.initial p{line-height:1.65;font-size:14px}.timeline-item{position:relative;margin-left:18px;padding:16px 0 16px 25px;border-left:1px solid #dce5f0}.time-dot{position:absolute;left:-5px;top:23px;width:9px;height:9px;border:2px solid white;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 2px #bfdbfe}.update-head{display:flex;justify-content:space-between;font-size:13px}.update-head span{font-size:11px;color:var(--muted)}.timeline-item p{font-size:14px;margin:8px 0 0}.status-change{font-size:12px;background:#f4f7fb;padding:8px 10px;border-radius:8px;margin-top:7px}.reply textarea{margin-bottom:10px}.reply-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.info-list>div,.mini-list>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #edf1f5;font-size:13px}.info-list span{color:var(--muted)}.mini-form{border-top:1px solid var(--line);margin-top:14px;padding-top:14px;display:flex;flex-direction:column;gap:9px}.confirm-box{display:flex;flex-direction:column;gap:9px;margin-top:15px}.attachment{display:flex;justify-content:space-between;gap:10px;padding:11px 0;color:#2563eb;font-size:13px;border-bottom:1px solid #edf1f5}.attachment small{color:var(--muted)}.attachment.deleted{color:#64748b;display:block}.mini-list span,.mini-list b{font-size:13px}.admin-grid{display:grid;grid-template-columns:350px 1fr;gap:18px}.inline{display:inline-flex;gap:4px;align-items:center;margin:2px}.inline input{width:130px;padding:7px}.tiny{padding:7px 9px;border:1px solid var(--line);background:white;border-radius:7px;font-size:11px}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.settings-grid label small{display:block;color:#9aa8b8;font-size:10px;margin:3px 0 6px}.settings-grid .full{grid-column:1/-1}.flash{padding:12px 14px;border-radius:11px;margin-bottom:13px;font-size:13px}.flash.success{background:#ecfdf3;color:#166534;border:1px solid #bbf7d0}.flash.danger{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3}.empty{text-align:center;padding:32px;color:var(--muted)}.icon-download{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;border:1px solid var(--line);color:#2563eb;font-size:17px}.audit-action{display:inline-block;background:#eef4ff;color:#2457a7;border-radius:7px;padding:4px 7px;font-weight:700;font-size:11px}.muted{color:var(--muted)}.notification-list{padding:0;overflow:hidden}.notification-item{display:grid;grid-template-columns:44px 1fr 20px;gap:13px;align-items:start;padding:16px 18px;border-bottom:1px solid var(--line)}.notification-item:last-child{border-bottom:0}.notification-item.unread{background:#f4f8ff}.notif-icon{width:40px;height:40px;border-radius:12px;background:#eaf2ff;display:grid;place-items:center}.notification-item b{font-size:14px}.notification-item p{margin:4px 0;color:#40536b;font-size:13px}.notification-item small{color:var(--muted);font-size:11px}.ticket-cards{display:none}.mobile-head,.mobile-nav{display:none}.storage-kpis{grid-template-columns:repeat(3,1fr)}
.login-page{min-height:100vh;background:#061a32;display:grid;place-items:center;padding:25px}.login-wrap{width:min(1080px,96vw);min-height:630px;display:grid;grid-template-columns:1.15fr .85fr;background:white;border-radius:26px;overflow:hidden;box-shadow:0 30px 80px #0005}.login-hero{position:relative;padding:56px;background:linear-gradient(145deg,#061d39,#0b3d76 65%,#0f66b6);color:white;overflow:hidden}.login-hero:after{content:'';position:absolute;width:420px;height:420px;border:1px solid #ffffff18;border-radius:50%;right:-160px;bottom:-130px;box-shadow:0 0 0 70px #ffffff06,0 0 0 140px #ffffff04}.login-hero h1{font-size:44px;line-height:1.08;margin-top:95px}.login-hero h1 span{color:#58d1ff}.login-hero p{max-width:500px;color:#bad2ea;line-height:1.7;font-size:15px}.hero-features{display:flex;gap:18px;margin-top:55px;font-size:12px;color:#d8eaff}.login-card{padding:65px 50px;display:flex;flex-direction:column;justify-content:center}.login-card h2{font-size:31px;margin:8px 0}.login-card p{color:var(--muted);margin-bottom:25px}.login-card .form{gap:18px}.login-note{margin-top:40px;color:#95a3b4;text-align:center}
@media(max-width:1150px){.app-shell{grid-template-columns:86px 1fr}.sidebar{padding:20px 12px}.brand>div:last-child,.me>div:last-child,nav b,.navlabel,.sidefoot b,.sidefoot small{display:none}.brand,.me{justify-content:center}.sidefoot a{justify-content:center}.kpis{grid-template-columns:repeat(2,1fr)}.grid2,.ticket-layout,.admin-grid{grid-template-columns:1fr}.grid3,.settings-grid{grid-template-columns:1fr}.login-wrap{grid-template-columns:1fr}.login-hero{display:none}}
@media(max-width:760px){body{font-size:15px;padding-bottom:78px}.app-shell{display:block}.sidebar{display:none}.mobile-head{height:64px;padding:10px 16px;background:#071d38;color:white;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40}.mobile-brand{display:flex;align-items:center;gap:9px}.mobile-brand b{font-size:18px;letter-spacing:.08em}.mobile-head .notif-btn{border-color:#ffffff18;background:#ffffff0d;color:white}.topbar{position:relative;min-height:auto;padding:18px 16px 14px}.topbar h1{font-size:22px}.crumb{font-size:9px}.top-actions{display:none}.content{padding:16px 14px 30px}.hero{padding:22px 20px;display:block}.hero h2{font-size:24px}.hero p{font-size:14px}.hero .btn{margin-top:17px;width:100%}.kpis{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:16px}.kpi b{font-size:25px}.grid2,.grid3,.ticket-layout,.admin-grid,.settings-grid,.storage-kpis{grid-template-columns:1fr}.toolbar,.filters,.ticket-head{align-items:stretch;flex-direction:column}.filters input{min-width:0}.filters>*{width:100%}.toolbar-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.form-actions{display:grid;grid-template-columns:1fr 1fr}.ticket-head-actions{display:grid;grid-template-columns:1fr;align-items:stretch}.ticket-head-actions .btn{order:2}.reply-actions{align-items:stretch;flex-direction:column}.reply-actions .btn{width:100%}.desktop-table{display:none}.ticket-cards{display:grid;gap:11px}.ticket-card{background:white;border:1px solid var(--line);border-radius:15px;padding:15px;box-shadow:0 4px 15px rgba(15,40,75,.04)}.ticket-card-top,.ticket-card-meta{display:flex;justify-content:space-between;gap:10px;align-items:center}.ticket-card-top b{font-size:13px;color:#175bc4}.ticket-card h3{font-size:16px;margin:9px 0 5px;line-height:1.35}.ticket-card p{color:var(--muted);font-size:12px;margin:0 0 11px}.ticket-card-meta{font-size:12px;color:#52667e;border-top:1px solid #eef2f6;padding-top:10px}.panel{padding:17px}.mobile-nav{position:fixed;bottom:0;left:0;right:0;height:68px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:50;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 25px rgba(15,40,75,.08)}.mobile-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:18px;color:#5d7188}.mobile-nav a span{font-size:10px;font-weight:700}.mobile-nav a.new{color:#fff;background:linear-gradient(135deg,#2563eb,#0ea5e9);margin:-10px 7px 7px;border-radius:15px;box-shadow:0 7px 18px #2563eb40}.mobile-nav em{top:4px;right:16px}.desktop.notif-btn{display:none}.login-page{padding:0;background:#fff}.login-wrap{width:100%;min-height:100vh;border-radius:0}.login-card{padding:42px 24px}.login-card h2{font-size:28px}.page-intro h2{font-size:21px}}
@media(max-width:420px){.kpis{grid-template-columns:1fr}.toolbar-actions,.form-actions{grid-template-columns:1fr}.topbar h1{font-size:20px}}
/* v1.2 role/download/master/priority refinements */
.btn-icon-pdf{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:34px;padding:0 10px;border:1px solid #d7e2f0;border-radius:10px;background:#fff;color:#164ea6;font-weight:800;font-size:12px;text-decoration:none}.btn-icon-pdf:hover{background:#eef5ff}.ticket-card-main{display:block;color:inherit;text-decoration:none}.mobile-pdf{display:none}.master-edit-grid{margin-top:22px}.section-head h3{margin-bottom:4px}.section-head p{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.5}.editable-list{display:flex;flex-direction:column;gap:12px}.editable-row{display:flex;align-items:flex-end;gap:12px;padding:14px;border:1px solid #e5edf6;border-radius:14px;background:#fbfdff}.edit-fields{display:grid;grid-template-columns:.7fr 1.4fr 1fr .8fr;gap:10px;flex:1}.category-fields{grid-template-columns:1.6fr .7fr}.editable-row label{font-size:12px;font-weight:700;color:#52657d}.editable-row input,.editable-row select{margin-top:6px}.btn.compact{min-height:43px;padding:0 16px}.priority-review{background:#f8fbff;border:1px solid #d9e8fb;border-radius:14px;padding:14px}.helper{display:block;margin-top:9px;color:#6b7f96;line-height:1.45}.priority-list{max-width:700px}.sidefoot .logout{margin-top:0}
@media(max-width:780px){.editable-row{display:block}.edit-fields,.category-fields{grid-template-columns:1fr}.editable-row .btn{width:100%;margin-top:10px}.mobile-pdf{display:inline-flex;margin:0 16px 14px;padding:8px 12px;border-radius:9px;background:#eef5ff;color:#1454ad;font-weight:800;text-decoration:none}.mobile-nav{grid-template-columns:repeat(4,1fr)}.master-create{grid-template-columns:1fr!important}}

/* =========================================================
   v1.5 — MODERN IT OPERATIONS VISUAL REFRESH
   UI only: no route/database/business-logic changes
   ========================================================= */
:root{
  --navy:#06192d;
  --navy2:#0a2a49;
  --blue:#2463eb;
  --blue2:#1d4ed8;
  --cyan:#17bde7;
  --cyan-soft:#e9f9fd;
  --bg:#f5f8fc;
  --surface:#ffffff;
  --text:#0d1f36;
  --muted:#64748b;
  --line:#dfe7f1;
  --green:#13a76b;
  --orange:#f59e0b;
  --red:#e84855;
  --shadow-sm:0 4px 16px rgba(14,39,72,.045);
  --shadow:0 16px 42px rgba(10,35,68,.075);
}
html{font-size:16px}
body{
  font-family:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  background:
    radial-gradient(circle at 76% -10%,rgba(23,189,231,.055),transparent 24rem),
    var(--bg);
  color:var(--text);
  font-size:15.5px;
  line-height:1.52;
  letter-spacing:-.005em;
}

/* Sidebar: darker, cleaner, more product-like */
.app-shell{grid-template-columns:300px minmax(0,1fr)}
.sidebar{
  background:
    radial-gradient(circle at 0 0,rgba(35,130,230,.17),transparent 19rem),
    linear-gradient(180deg,#06192d 0%,#08243e 52%,#071f36 100%);
  padding:25px 20px 18px;
  border-right:1px solid rgba(255,255,255,.035);
  box-shadow:10px 0 35px rgba(7,25,45,.055);
  scrollbar-width:thin;
  scrollbar-color:#315273 transparent;
}
.sidebar::-webkit-scrollbar{width:5px}.sidebar::-webkit-scrollbar-thumb{background:#315273;border-radius:10px}.sidebar::-webkit-scrollbar-track{background:transparent}
.brand{padding:1px 2px 3px}.brandmark{
  width:48px;height:48px;border-radius:15px;
  background:linear-gradient(145deg,#2463eb 0%,#17bde7 100%);
  box-shadow:0 10px 28px rgba(23,189,231,.24),inset 0 1px 0 rgba(255,255,255,.28);
}
.brand b{font-size:22px;letter-spacing:.06em}.brand small{font-size:10.5px;color:#a8bfd6;opacity:1;letter-spacing:.115em}
.me{
  padding:14px 13px;margin:23px 0 13px;border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  border:1px solid rgba(150,201,241,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.avatar{width:44px;height:44px;border-radius:13px;background:linear-gradient(145deg,#2d6cf2,#2457d4);font-size:16px;box-shadow:0 7px 16px rgba(37,99,235,.25)}
.me b{font-size:14.5px}.me small{font-size:11.5px;color:#afc5db;opacity:1}
.navlabel{font-size:10.5px;letter-spacing:.15em;color:#7699bc;margin:18px 10px 7px;font-weight:800}
nav a{
  min-height:45px;padding:11px 13px;border-radius:11px;color:#d7e7f7;font-size:14.5px;
  transition:background .16s ease,transform .16s ease,color .16s ease;
}
nav a:hover{background:rgba(69,150,225,.105);color:#fff;transform:translateX(2px)}
nav a.create{
  background:linear-gradient(110deg,#2463eb,#119fd7 72%,#17bde7);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 9px 24px rgba(20,122,211,.22),inset 0 1px 0 rgba(255,255,255,.20);
  margin:5px 0 4px;
}
nav a.create:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(20,122,211,.28)}
.sidefoot{border-top:1px solid rgba(180,214,244,.10);margin-top:20px;padding-top:15px}.sidefoot .logout{color:#ffb1bb}.sidefoot .logout:hover{background:rgba(232,72,85,.11);transform:none}.sidefoot small{color:#6585a4}

/* Header: sharper hierarchy, operational feel */
.topbar{
  min-height:96px;padding:20px 38px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid #e3eaf3;
  box-shadow:0 3px 18px rgba(15,40,75,.025);
}
.topbar h1{font-size:26px;line-height:1.16;letter-spacing:-.035em;font-weight:780;color:#0a1d35}
.crumb,.eyebrow{font-size:10.5px;letter-spacing:.16em;font-weight:850;color:#3971b4}
.health{
  background:#fbfefd;border-color:#dae8e2;color:#294b3c;padding:9px 13px;font-size:12px;font-weight:650;
  box-shadow:inset 0 1px 0 #fff;
}
.health i{background:#17b978;box-shadow:0 0 0 4px rgba(23,185,120,.11),0 0 13px rgba(23,185,120,.25)}
.rolepill{background:#fff;border-color:#dfe7f1;color:#33475f;font-weight:650;box-shadow:0 2px 8px rgba(15,40,75,.025)}
.notif-btn{border-color:#dfe7f1;background:#fff;border-radius:13px;box-shadow:0 3px 12px rgba(15,40,75,.035);transition:.16s ease}.notif-btn:hover{border-color:#b8d2f2;background:#f7fbff;transform:translateY(-1px)}

/* Main canvas */
.content{padding:31px 38px 72px;max-width:1740px}
.page-intro{margin-bottom:22px}.page-intro h2{font-size:26px;letter-spacing:-.035em;font-weight:780;color:#0a1d35;margin-bottom:5px}.page-intro p{font-size:14px;color:#6c7f95}
.hero{
  border:1px solid rgba(75,156,232,.13);
  background:
    radial-gradient(circle at 88% 22%,rgba(65,195,244,.34),transparent 16rem),
    radial-gradient(circle at 78% 115%,rgba(48,105,238,.25),transparent 20rem),
    linear-gradient(120deg,#071f3a 0%,#0b3970 50%,#0c5b9d 100%);
  border-radius:22px;box-shadow:0 18px 48px rgba(7,39,75,.13);
}
.hero h2{font-size:31px;letter-spacing:-.035em}.hero p{color:#c7d9eb}

/* Cards / panels */
.kpis{gap:17px;margin:21px 0}.kpi,.panel{
  border:1px solid #e1e8f0;background:rgba(255,255,255,.98);
  box-shadow:var(--shadow-sm);
}
.kpi{border-radius:18px;padding:20px 22px;position:relative;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.kpi:after{content:"";position:absolute;right:-30px;top:-44px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(36,99,235,.055),transparent 67%);pointer-events:none}
.kpi:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(14,39,72,.075);border-color:#d4e0ed}
.kpi span{font-size:11.5px;letter-spacing:.015em;color:#667990}.kpi b{font-size:31px;color:#0b213d}.kpi small{font-size:11.5px}.kpi.accent{border-top:1px solid #e1e8f0}.kpi.accent:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#2463eb,#17bde7)}
.kpi.good{border-top:1px solid #e1e8f0}.kpi.good:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:#13a76b}
.panel{border-radius:18px;padding:22px;box-shadow:0 8px 24px rgba(13,40,73,.045)}
.panel-head h3,.panel h3{font-size:18.5px;letter-spacing:-.02em;color:#10233f}

/* Buttons */
.btn{border-radius:11px;font-size:13.5px;min-height:43px;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease}
.primary{background:linear-gradient(110deg,#2463eb,#159ed9 80%,#17bde7);box-shadow:0 7px 18px rgba(36,99,235,.18)}
.primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(36,99,235,.24)}
.secondary{background:#fff;border-color:#d9e3ef}.secondary:hover{background:#f8fbff;border-color:#bfd2e9}.danger{background:#fff6f7;border-color:#ffd6da;color:#c83243}.danger:hover{background:#fff0f2}

/* Forms */
input,select,textarea{border-color:#d7e1ed;border-radius:12px;padding:12px 14px;font-size:14px;background:#fff;box-shadow:inset 0 1px 1px rgba(15,40,75,.012)}
input:hover,select:hover,textarea:hover{border-color:#c7d7e8}input:focus,select:focus,textarea:focus{border-color:#4e93e7;box-shadow:0 0 0 4px rgba(78,147,231,.10)}
.form label,.mini-form label,.settings-grid label{color:#334960;font-weight:720}.uploadbox{background:linear-gradient(180deg,#fbfdff,#f7fbff);border-color:#bfd4ec}

/* Tables: cleaner operational density */
.table-wrap{border-radius:18px;overflow:auto}.table-wrap table{background:#fff}table{font-size:13.5px}th{
  position:sticky;top:0;z-index:1;background:#f7fafe;color:#5a6f88;font-size:10.5px;letter-spacing:.065em;font-weight:800;text-transform:uppercase;padding:13px 15px;border-bottom:1px solid #dfe7f1
}
td{padding:14px 15px;border-bottom:1px solid #edf2f7}tbody tr{transition:background .12s ease}tbody tr:hover{background:#f8fbff}.link b{color:#1d5fbd}.link:hover b{color:#134b9a}
.pill{font-size:10.5px!important;padding:5px 10px;border-radius:999px;font-weight:800}.pill.big{font-size:12px!important;padding:8px 13px}

/* Ticket workspace */
.ticket-layout{grid-template-columns:minmax(0,1.75fr) 390px;gap:20px}.ticket-head h2{font-size:27px;letter-spacing:-.035em}.ticket-head{margin-bottom:20px}.meta{font-size:13px}.initial p,.timeline-item p{font-size:14.5px}.timeline-item{border-left-color:#d7e4f3}.time-dot{background:#2975e8;box-shadow:0 0 0 3px #dcecff}.status-change{background:#f3f7fc;border:1px solid #e6edf6}.priority-review{background:linear-gradient(180deg,#f9fcff,#f5f9ff);border-color:#d5e4f7}
.info-list>div,.mini-list>div{padding:12px 0}.attachment{font-size:13.5px}

/* Storage: make it feel like an operations panel */
.storage-kpis{gap:18px}.storage-kpis .kpi{min-height:154px;display:flex;flex-direction:column;justify-content:center}.storage-kpis .kpi:nth-child(1){background:linear-gradient(145deg,#ffffff 0%,#f2f8ff 100%)}.storage-kpis .kpi:nth-child(2){background:linear-gradient(145deg,#ffffff 0%,#f5fbfd 100%)}.storage-kpis .kpi:nth-child(3){background:linear-gradient(145deg,#ffffff 0%,#f7fbf8 100%)}
.storage-kpis .kpi:nth-child(1):before{background:linear-gradient(90deg,#2463eb,#17bde7)}.storage-kpis .kpi:nth-child(2):before,.storage-kpis .kpi:nth-child(3):before{content:"";position:absolute;left:0;right:0;top:0;height:3px}.storage-kpis .kpi:nth-child(2):before{background:linear-gradient(90deg,#17a7d9,#42d2de)}.storage-kpis .kpi:nth-child(3):before{background:linear-gradient(90deg,#13a76b,#48c98d)}

/* Notifications */
.notification-list{border-radius:18px}.notification-item{padding:17px 19px}.notification-item.unread{background:linear-gradient(90deg,#f2f7ff,#fbfdff)}.notif-icon{background:linear-gradient(145deg,#eaf2ff,#e5f8fd);border:1px solid #d7e8f8}

/* Audit / admin helpers */
.audit-action{background:#edf4ff;color:#245bac;border:1px solid #dae8fa}.editable-row{background:#fcfdff;border-color:#e1e9f2}.flash{border-radius:12px;font-size:13.5px}

/* Desktop compact sidebar mode keeps stronger visual hierarchy */
@media(max-width:1150px) and (min-width:761px){
  .app-shell{grid-template-columns:88px 1fr}.sidebar{padding:20px 12px}.brandmark{width:46px;height:46px}.content{padding-left:28px;padding-right:28px}.topbar{padding-left:28px;padding-right:28px}
}

/* Mobile: native app-like feel */
@media(max-width:760px){
  body{background:#f6f9fc;font-size:15px}
  .mobile-head{
    height:66px;background:linear-gradient(110deg,#06192d,#0a3155);
    border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 6px 20px rgba(7,25,45,.16)
  }
  .mobile-brand b{font-size:18.5px}.mobile-head .brandmark{box-shadow:0 6px 15px rgba(23,189,231,.20)}
  .topbar{padding:17px 16px 14px;background:#fff;border-bottom-color:#e5ebf2}.topbar h1{font-size:22px}.content{padding:16px 14px 30px}
  .page-intro h2{font-size:22px}.page-intro p{font-size:13.5px}
  .hero{border-radius:18px;padding:23px 20px}.hero h2{font-size:25px}
  .kpis{gap:11px}.kpi{border-radius:15px;padding:16px}.kpi b{font-size:26px}.panel{border-radius:16px;padding:17px}
  .ticket-card{border-radius:16px;border-color:#dfe8f2;box-shadow:0 7px 20px rgba(15,40,75,.045)}
  .mobile-nav{
    height:70px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top-color:#dde6f0;box-shadow:0 -10px 30px rgba(15,40,75,.09)
  }
  .mobile-nav a{color:#657990}.mobile-nav a.new{background:linear-gradient(135deg,#2463eb,#17bde7);box-shadow:0 8px 21px rgba(36,99,235,.28)}
  .form-actions .btn,.toolbar-actions .btn{min-height:45px}
  input,select,textarea{font-size:16px} /* prevents iOS zoom and improves touch readability */
}

.ticket-filter-pro{display:grid;grid-template-columns:2fr repeat(3,minmax(150px,1fr));gap:12px;align-items:end;background:#fff;border:1px solid #e3eaf3;border-radius:18px;padding:18px;box-shadow:0 8px 25px rgba(15,42,75,.045);margin-bottom:14px}.ticket-filter-pro label{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;color:#667b95;margin:0 0 6px}.ticket-filter-pro input,.ticket-filter-pro select{width:100%;min-height:44px}.ticket-filter-pro .filter-actions{display:flex;gap:8px;align-items:center}.ticket-toolbar{margin-top:0}.period-info{color:#64748b;font-size:13px}.btn.ghost{background:transparent;border:1px solid #dbe5ef;color:#42566f}@media(max-width:1200px){.ticket-filter-pro{grid-template-columns:repeat(3,1fr)}.ticket-filter-pro .filter-search{grid-column:span 2}}@media(max-width:760px){.ticket-filter-pro{grid-template-columns:1fr;padding:14px}.ticket-filter-pro .filter-search{grid-column:auto}.ticket-filter-pro .filter-actions{display:grid;grid-template-columns:1fr 1fr}.ticket-toolbar{align-items:stretch}.period-info{width:100%;margin-bottom:8px}.ticket-toolbar .toolbar-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}}

/* ===== CCS v1.7 - date layout + audit export ===== */
.ticket-filter-pro .filter-date{min-width:0}.ticket-filter-pro .filter-date input[type=date]{min-width:0;width:100%;max-width:100%}
@media(min-width:1201px){.ticket-filter-pro{grid-template-columns:minmax(320px,2fr) minmax(170px,1fr) minmax(190px,1fr) minmax(170px,1fr)}.ticket-filter-pro .filter-date{min-width:190px}}
.audit-filter{display:grid;grid-template-columns:minmax(210px,260px) minmax(210px,260px) auto;gap:12px;align-items:end;background:#fff;border:1px solid #e3eaf3;border-radius:18px;padding:18px;box-shadow:0 8px 25px rgba(15,42,75,.045);margin-bottom:14px}.audit-filter label{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;color:#667b95;margin:0 0 6px}.audit-filter input[type=date]{min-width:0;width:100%;min-height:44px}.audit-filter .filter-actions{display:flex;gap:8px;align-items:center}.audit-toolbar{margin-top:0}.audit-table .audit-time{white-space:nowrap;min-width:150px}.audit-table .nowrap{white-space:nowrap}.audit-table td:nth-child(5){min-width:260px}
@media(max-width:900px){.audit-filter{grid-template-columns:1fr 1fr}.audit-filter .filter-actions{grid-column:1/-1}.audit-toolbar{align-items:stretch;flex-direction:column}.audit-toolbar .toolbar-actions{width:100%}}
@media(max-width:760px){.audit-filter{grid-template-columns:1fr;padding:14px}.audit-filter .filter-actions{grid-column:auto;display:grid;grid-template-columns:1fr 1fr}.audit-toolbar .toolbar-actions{display:grid;grid-template-columns:1fr 1fr}.audit-table{overflow-x:auto}.audit-table table{min-width:880px}}


/* ===== CCS v1.8 - Indonesian date format DD-MM-YYYY ===== */
.date-id-control{position:relative;width:100%}.date-id-display{width:100%;padding-right:46px!important;font-variant-numeric:tabular-nums}.date-id-native{position:absolute!important;right:12px;top:50%;transform:translateY(-50%);width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;padding:0!important;border:0!important}.date-id-button{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:38px;height:36px;border:0;background:transparent;color:#536b86;border-radius:9px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}.date-id-button:hover{background:#eef5fc;color:#1f67bd}.date-id-display:invalid{border-color:#e55b66!important;box-shadow:0 0 0 4px rgba(229,91,102,.10)!important}.report-date-filter label{min-width:210px}.report-date-filter .date-id-control{margin-top:6px}
@media(max-width:760px){.date-id-button{width:42px;height:40px}.report-date-filter label{min-width:0;width:100%}}


/* ===== CCS v1.9 - calendar input polish ===== */
.ticket-filter-pro > div,
.audit-filter > div,
.report-date-filter > label{min-width:0}
.ticket-filter-pro input,
.ticket-filter-pro select,
.ticket-filter-pro .date-id-display,
.audit-filter .date-id-display,
.report-date-filter .date-id-display{min-width:0!important;max-width:100%!important;width:100%!important}

.date-id-control{
  position:relative;
  width:100%;
  min-width:0;
}
.date-id-display{
  height:46px;
  padding:11px 52px 11px 14px!important;
  border-radius:12px!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  background:#fff!important;
}
.date-id-native{
  position:absolute!important;
  right:0!important;
  top:0!important;
  width:48px!important;
  height:46px!important;
  opacity:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  z-index:3!important;
}
.date-id-button{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#55708e;
  border-radius:9px;
  background:#f6f9fc;
  border:1px solid #e2eaf3;
  pointer-events:none;
  z-index:2;
  transition:.15s ease;
}
.date-id-control:focus-within .date-id-button{
  color:#2563eb;
  background:#eff6ff;
  border-color:#bfdbfe;
}
.date-id-button svg{display:block}

/* desktop ticket filters: exact two-row alignment, no overlap */
@media(min-width:1201px){
  .ticket-filter-pro{
    grid-template-columns:minmax(300px,2fr) minmax(180px,1fr) minmax(190px,1fr) minmax(180px,1fr)!important;
    column-gap:14px!important;
    row-gap:14px!important;
  }
  .ticket-filter-pro .filter-date{min-width:0!important}
}
@media(max-width:1200px) and (min-width:761px){
  .ticket-filter-pro{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ticket-filter-pro .filter-search{grid-column:1/-1!important}
}

/* audit date boxes stay compact and aligned */
.audit-filter .filter-date{min-width:0}
.audit-filter .date-id-control{width:100%}
@media(min-width:901px){
  .audit-filter{grid-template-columns:minmax(220px,280px) minmax(220px,280px) auto!important}
}

/* report date controls */
.report-date-filter label{min-width:220px!important}
@media(max-width:760px){
  .date-id-display{height:48px}
  .date-id-native{height:48px;width:50px!important}
  .date-id-button{width:36px;height:36px}
  .report-date-filter label{min-width:0!important;width:100%}
}