:root{--navy:#0b1f3a;--navy2:#102a4c;--slate:#52647a;--cyan:#2ec4ff;--bg:#f3f6fa;--panel:#fff;--text:#172235;--muted:#6b7c90;--line:#dce5ef;--green:#15966d;--amber:#d98b13;--red:#cf4451;--shadow:0 8px 28px rgba(11,31,58,.08)}
*{box-sizing:border-box}html{font-size:15px}body{margin:0;background:var(--bg);color:var(--text);font-family:Vazirmatn,Tahoma,sans-serif;line-height:1.65}a{color:#0879a8;text-decoration:none}button,input,select,textarea{font:inherit}button,a{transition:.18s ease}button:focus-visible,a:focus-visible,input:focus,select:focus,textarea:focus{outline:3px solid rgba(46,196,255,.35);outline-offset:2px}
.topbar{height:68px;background:var(--navy);color:#fff;display:flex;align-items:center;padding:0 max(22px,calc((100vw - 1400px)/2));gap:30px;position:sticky;top:0;z-index:10;box-shadow:0 3px 15px rgba(0,0,0,.16)}.brand{color:#fff;display:flex;align-items:center;gap:10px;min-width:160px}.brand img{width:40px;height:40px;border-radius:9px}.brand span{font-weight:800;line-height:1.15}.brand small{display:block;color:#8ca5bf;font-size:.66rem;font-weight:500}.topbar nav{display:flex;gap:4px;flex:1}.topbar nav a,.user-menu a,.logout-form button{color:#b9c8d8;padding:9px 12px;border-radius:7px;font-size:.88rem}.topbar nav a:hover,.user-menu a:hover,.logout-form button:hover{color:#fff;background:rgba(255,255,255,.08)}.user-menu{display:flex;align-items:center}.user-menu b{background:var(--cyan);color:var(--navy);font-size:.68rem;padding:1px 5px;border-radius:10px;margin-right:4px}.logout-form{margin:0}.logout-form button{border:0;background:transparent;cursor:pointer}
.app-shell{max-width:1400px;margin:0 auto;padding:26px}.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin:6px 0 20px}.page-head h1,.ticket-title h1{margin:0;font-size:1.65rem;letter-spacing:-.03em}.page-head p{margin:4px 0 0;color:var(--muted)}.eyebrow{font-size:.75rem;color:#0879a8;font-weight:700}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:var(--text);padding:8px 15px;border-radius:8px;cursor:pointer;font-weight:600}.btn:hover{border-color:#9db1c5}.btn.primary{background:var(--cyan);color:#06243a;border-color:var(--cyan);box-shadow:0 4px 12px rgba(46,196,255,.22)}.btn.primary:hover{background:#5bd1ff}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:18px}.stat{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--cyan);border-radius:9px;padding:15px;box-shadow:var(--shadow)}.stat span{color:var(--muted);font-size:.78rem}.stat strong{display:block;font-size:1.65rem;margin-top:4px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:18px;margin-bottom:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel h2,.panel h3{margin:0 0 13px}.table-wrap{overflow:auto}.panel.table-wrap{padding:0}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:right;color:var(--muted);font-size:.75rem;background:#f7f9fc;border-bottom:1px solid var(--line);padding:11px 13px}td{border-bottom:1px solid #edf2f7;padding:12px 13px;font-size:.84rem}tr:last-child td{border:0}tr:hover td{background:#fbfdff}.tickets td:first-child{min-width:260px}.tickets td:first-child strong,td strong{display:block;color:var(--text)}td small{display:block;color:var(--muted);font-size:.7rem}.chip{display:inline-flex;padding:3px 8px;border-radius:12px;font-size:.7rem;font-weight:700;background:#e8eef5;color:#40546a;margin:2px}.chip.urgent{background:#ffe7ea;color:#ae2434}.chip.high{background:#fff1d6;color:#a55d00}.chip.normal{background:#e2f4ff;color:#076e98}.chip.low{background:#edf1f5;color:#52647a}.chip.sla.good{background:#e1f7ee;color:#087b57}.chip.sla.risk{background:#fff2d9;color:#9b6208}.chip.sla.breach{background:#ffe5e8;color:#b12233}
.filters{display:flex;align-items:end;gap:8px;background:#e9eff6;border:1px solid #d5e0eb;border-radius:9px;padding:12px;margin-bottom:15px;flex-wrap:wrap}.filters input,.filters select{min-width:155px}.filters input[name=q]{min-width:280px}.filters label{font-size:.75rem;color:var(--muted)}input,select,textarea{width:100%;border:1px solid #cbd7e4;background:#fff;border-radius:7px;padding:9px 10px;color:var(--text)}textarea{resize:vertical}.form-panel{max-width:900px}.form-panel form,.reply{display:grid;gap:13px}.form-panel label{font-weight:600;font-size:.82rem}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.form-panel small{color:var(--muted)}
.ticket-title{margin:3px 0 18px}.ticket-title>a,.ticket-title a{font-size:.8rem}.chips{margin-top:8px}.ticket-layout{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(260px,.7fr);gap:18px}.description>p{font-size:.96rem;line-height:1.9}.description dl{display:grid;grid-template-columns:110px 1fr 110px 1fr;border-top:1px solid var(--line);padding-top:13px}.description dt{color:var(--muted);font-size:.76rem}.description dd{margin:0;font-size:.82rem}.comment{border-right:3px solid var(--cyan);padding:10px 13px;margin:12px 0;background:#f8fbfe;border-radius:5px}.comment div{display:flex;justify-content:space-between}.comment div span{font-size:.7rem;color:var(--muted)}.comment p{margin:7px 0}.attachment{display:block;border:1px dashed #a9bad0;padding:8px 10px;border-radius:6px;margin:8px 0}.activity{list-style:none;padding:0;margin:0}.activity li{display:flex;gap:9px;padding-bottom:13px;position:relative;font-size:.78rem}.activity li>span{width:9px;height:9px;border-radius:50%;background:var(--cyan);margin-top:6px;flex:none}.activity li small{display:block;color:var(--muted)}.manage{border-right:4px solid var(--cyan)}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.bar-row{display:grid;grid-template-columns:130px 1fr 35px;align-items:center;gap:10px;margin:10px 0;font-size:.8rem}.bar-row>div{height:8px;background:#e8eef4;border-radius:5px;overflow:hidden}.bar-row i{display:block;height:100%;background:linear-gradient(90deg,#168fbd,var(--cyan));border-radius:5px}.notices{padding:0}.notice{display:block;padding:14px 17px;border-bottom:1px solid var(--line);color:var(--text)}.notice.unread{border-right:4px solid var(--cyan);background:#f4fbff}.notice span{display:block;color:var(--muted);font-size:.72rem}.empty{text-align:center;padding:40px 20px;color:var(--muted)}.empty img{max-width:320px;width:80%;border-radius:12px;filter:saturate(.8)}.empty h2,.empty h3{color:var(--text)}.alert{padding:11px 14px;border-radius:7px;margin-bottom:12px}.alert.success{background:#e2f7ef;color:#08724f}.alert.error,.alert.danger{background:#ffe6e9;color:#a92435}.pagination{display:flex;justify-content:center;gap:15px}.link-btn,.reset-form button{border:0;background:none;color:#0879a8;cursor:pointer;padding:0}.reset-form{margin-top:28px;text-align:left}.reset-form button{color:#9e3440;font-size:.72rem}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:#fff}.login-brand{background:linear-gradient(145deg,var(--navy),#12385d);color:#fff;padding:7vh 8vw;position:relative;overflow:hidden}.login-brand>img:first-child{width:72px;height:72px;border-radius:15px}.login-brand h1{font-size:3rem;margin:25px 0 0}.login-brand>p{color:#b9cadd;font-size:1.1rem}.demo-mark{display:inline-block;border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:4px 10px;margin-right:10px;font-size:.76rem}.hero-img{width:min(600px,90%);margin-top:5vh;border-radius:17px;box-shadow:0 30px 70px rgba(0,0,0,.3)}.login-panel{padding:5vh 7vw;overflow:auto}.login-panel h2{font-size:1.7rem;margin-bottom:2px}.login-panel>p{color:var(--muted)}.login-panel form{display:grid;gap:12px;margin:20px 0}.login-panel label{font-size:.82rem;font-weight:600}.demo-title{font-size:.9rem;margin-top:25px}.credentials{display:grid;gap:8px}.credential{text-align:right;display:grid;grid-template-columns:1fr auto;border:1px solid var(--line);background:#f7f9fc;border-radius:8px;padding:10px 12px;cursor:pointer;color:var(--text)}.credential:hover{border-color:var(--cyan);background:#effaff}.credential strong{color:#075f86}.credential small{color:var(--muted);grid-column:1}.credential code{font-size:.7rem;color:#4c6177;direction:ltr;text-align:left}.warning{font-size:.72rem!important;background:#fff8e7;padding:8px;border-radius:6px}
.chip.vip{background:#fff3cd;color:#8a6d00}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.tag-check{display:inline-flex;align-items:center;gap:4px;margin:4px 8px 4px 0;font-size:.8rem}.chat-stream{max-height:280px;overflow:auto;display:grid;gap:8px;margin-bottom:10px}.chat-msg{background:#f4f7fb;border-radius:8px;padding:8px 10px}.chat-msg span{float:left;font-size:.7rem;color:var(--muted)}.chat-form{display:grid;gap:8px}.check-inline{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted)}.canned-insert{display:block;margin-bottom:8px}.kb-body{line-height:2}.notify-enable{font-size:.78rem}
.topbar{height:auto;flex-wrap:wrap;padding:10px 15px;gap:5px}.topbar nav{order:3;width:100%;overflow:auto}.user-menu{margin-right:auto}.app-shell{padding:16px}.stats{grid-template-columns:repeat(3,1fr)}.ticket-layout,.report-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr 1fr}.login-shell{grid-template-columns:1fr}.login-brand{padding:30px;min-height:340px}.hero-img{max-height:160px;object-fit:cover}.login-panel{padding:30px}.page-head{align-items:flex-start}.description dl{grid-template-columns:100px 1fr}.description dd{margin-bottom:5px}}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}.filters>*{width:100%}.filters input[name=q]{min-width:0}.topbar nav a{padding:7px}.credential{grid-template-columns:1fr}.credential code{text-align:right}.login-brand h1{font-size:2.2rem}}

/* Nested / grouped navigation (Phase-2) */
.topbar nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px;flex:1}
.topbar nav > a,.topbar nav .nav-group > summary{color:#b9c8d8;padding:8px 11px;border-radius:7px;font-size:.86rem;cursor:pointer;list-style:none;white-space:nowrap}
.topbar nav > a:hover,.topbar nav .nav-group > summary:hover,.topbar nav .nav-group[open] > summary{color:#fff;background:rgba(255,255,255,.08)}
.topbar nav .nav-group{position:relative}
.topbar nav .nav-group > summary::-webkit-details-marker{display:none}
.topbar nav .nav-group > summary::after{content:"▾";margin-inline-start:6px;font-size:.7em;opacity:.75}
.topbar nav .nav-sub{position:absolute;inset-inline-start:0;top:calc(100% + 4px);min-width:190px;background:#0f2744;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 12px 28px rgba(0,0,0,.28);z-index:40}
.topbar nav .nav-sub a{color:#d5e2ef;padding:8px 10px;border-radius:6px;font-size:.84rem}
.topbar nav .nav-sub a:hover{background:rgba(255,255,255,.1);color:#fff}
@media(max-width:900px){
  .topbar nav .nav-group{width:100%}
  .topbar nav .nav-sub{position:static;box-shadow:none;border:0;background:rgba(0,0,0,.18);margin:2px 0 6px;width:100%}
}