:root{
  --navy: #12205E;
  --red: #C4272E;
  --gray-bg: #FAFAFA;
  --border: #E4E4E7;
  --border-strong: #D0D1D6;
  --text: #202127;
  --text-muted: #71727A;
  --text-faint: #9C9DA5;
}
*{box-sizing:border-box; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;}
html,body{margin:0; background:#fff; color:var(--text); height:100%;}
#app{min-height:100%; display:flex; flex-direction:column;}

/* Topbar */
.topbar{background:var(--navy); color:#fff; padding:16px 24px; display:flex; align-items:center; justify-content:space-between;}
.topbar .brand{font-weight:600; font-size:14px; letter-spacing:.01em; display:flex; align-items:center; gap:18px;}
.topbar nav{display:flex; gap:16px;}
.topbar nav a{color:rgba(255,255,255,0.72); text-decoration:none; font-size:12.5px; font-weight:500; cursor:pointer;}
.topbar nav a.active{color:#fff; font-weight:600;}
.topbar .right{display:flex; align-items:center; gap:14px;}
.panel-tag{font-size:11.5px; color:rgba(255,255,255,0.65); font-weight:500;}
.logout-link{color:rgba(255,255,255,0.65); font-size:12px; cursor:pointer; text-decoration:none;}
.logout-link:hover{color:#fff;}

.content{padding:28px 24px; max-width:1040px; margin:0 auto; width:100%;}
.content.narrow{max-width:720px;}
.content.mid{max-width:840px;}

.head-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
h1{font-size:18px; font-weight:600; margin:0 0 3px; letter-spacing:-.01em;}
.sub{color:var(--text-muted); font-size:13px; margin:0;}

.section{margin-bottom:26px;}
.section-title{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); font-weight:600; margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--border-strong);}

.row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1/-1;}
label{font-size:12.5px; font-weight:500; color:var(--text-muted);}
select, input[type=text], input[type=email], input[type=password]{
  height:36px; border:1px solid var(--border); border-radius:6px;
  padding:0 10px; font-size:13.5px; background:#fff; color:var(--text); width:100%;
}
select:focus, input:focus{outline:none; border-color:var(--navy);}
select:disabled, input:disabled{background:var(--gray-bg); color:var(--text-faint); cursor:not-allowed;}

.scope-toggle{display:flex; gap:6px;}
.scope-btn{flex:1; height:36px; border:1px solid var(--border); border-radius:6px; background:#fff; font-size:12.5px; cursor:pointer; color:var(--text-muted); font-weight:500;}
.scope-btn.active{border-color:var(--navy); color:var(--navy); font-weight:600; background:#F4F5FA;}

.desc-box{font-size:12.5px; color:var(--text-muted); margin-top:2px; display:none; line-height:1.5;}
.desc-box.show{display:block;}

.sev-row{display:flex; align-items:baseline; gap:10px; padding-top:18px; border-top:1px solid var(--border);}
.sev-label{font-size:12.5px; color:var(--text-muted);}
.sev-value{font-size:14px; font-weight:600; color:var(--text);}
.sev-value.alta{color:var(--red);}
.sev-hint{font-size:12px; color:var(--text-faint);}

.footer-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:8px;}
.btn{height:38px; padding:0 18px; border-radius:6px; font-size:13.5px; font-weight:600; cursor:pointer; border:1px solid var(--border); background:#fff; color:var(--text);}
.btn-primary{background:var(--navy); border-color:var(--navy); color:#fff;}
.btn-primary:disabled{background:#C7C8D6; border-color:#C7C8D6; cursor:not-allowed;}
.btn-text{border:none; background:none; color:var(--text-muted); font-weight:500; font-size:12.5px; cursor:pointer; padding:0;}
.btn-text:hover{color:var(--text);}
.btn-text.danger:hover{color:var(--red);}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-bottom:28px; border:1px solid var(--border); border-radius:8px;}
.kpi{padding:16px 18px; border-right:1px solid var(--border);}
.kpi:last-child{border-right:none;}
.kpi .label{font-size:11.5px; color:var(--text-faint); margin-bottom:8px; text-transform:uppercase; letter-spacing:.03em;}
.kpi .value{font-size:22px; font-weight:600; letter-spacing:-.01em;}
.kpi .value.small{font-size:17px;}
.kpi .delta{font-size:11.5px; margin-top:5px; color:var(--text-muted);}

.grid2{display:grid; grid-template-columns:1.6fr 1fr; gap:24px; margin-bottom:28px; align-items:start;}
.grid2.detail{grid-template-columns:1fr 1.4fr;}

.status-bar{display:flex; height:6px; border-radius:3px; overflow:hidden; margin-bottom:12px; background:var(--border);}
.status-bar span{height:100%; background:var(--navy);}
.status-legend{font-size:12.5px; color:var(--text-muted); line-height:2;}
.status-legend .pct{color:var(--text); font-weight:600; margin-right:6px; font-variant-numeric:tabular-nums;}

.rank-item{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px;}
.rank-item:last-child{border-bottom:none;}
.rank-item .count{font-weight:600; color:var(--text-muted); font-variant-numeric:tabular-nums;}

/* Tables */
table{width:100%; border-collapse:collapse; font-size:13px;}
thead th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-faint); font-weight:600; padding:0 12px 10px; border-bottom:1px solid var(--border-strong);}
td{padding:12px; border-bottom:1px solid var(--border); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr.clickable:hover{background:var(--gray-bg); cursor:pointer;}
.ticket-id{color:var(--text-faint); font-variant-numeric:tabular-nums; font-size:12.5px;}
.unit-name{font-weight:500;}
.unit-sub{font-size:12px; color:var(--text-muted); margin-top:1px;}
.sev-alta{color:var(--red); font-weight:600;}
.status-text{color:var(--text-muted);}
.reopen{font-size:11px; color:var(--red); margin-left:6px;}
.waiting.overdue{color:var(--red); font-weight:600;}
.support-empty{color:var(--text-faint);}

/* Tabs */
.tabs{display:flex; gap:22px; margin-bottom:20px; border-bottom:1px solid var(--border);}
.tab{padding:0 0 10px 0; font-size:13px; font-weight:500; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent;}
.tab.active{color:var(--text); border-color:var(--navy); font-weight:600;}
.tab .count{color:var(--text-faint); font-weight:400; margin-left:3px;}
.tab.active .count{color:var(--text-muted);}

.filters{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.filters input[type=text]{flex:1; min-width:200px;}

/* Timeline */
.info-row{display:flex; justify-content:space-between; padding:7px 0; font-size:13px;}
.info-row .k{color:var(--text-muted);}
.info-row .v{font-weight:500; text-align:right;}
.timeline{position:relative; padding-left:18px;}
.timeline::before{content:""; position:absolute; left:4px; top:4px; bottom:4px; width:1px; background:var(--border-strong);}
.tl-item{position:relative; padding-bottom:20px;}
.tl-item:last-child{padding-bottom:0;}
.tl-dot{position:absolute; left:-18px; top:3px; width:8px; height:8px; border-radius:50%; background:var(--text-faint);}
.tl-dot.reopen{background:var(--red);}
.tl-head{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:4px;}
.tl-author{font-weight:600; color:var(--text);}
.tl-meta{color:var(--text-faint);}
.tl-body{font-size:13px; color:var(--text-muted); line-height:1.5;}
.tl-body.status-change{color:var(--text-faint);}
.comment-box{display:flex; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid var(--border);}
.comment-box input{flex:1;}
.comment-box button{width:auto; white-space:nowrap;}
.tags{display:flex; gap:14px; align-items:center; font-size:12.5px;}
.tags .sep{color:var(--border-strong);}
.reopen-text{color:var(--red); font-weight:600;}
.breadcrumb{font-size:12px; color:var(--text-faint); margin-bottom:12px; cursor:pointer;}
.id{color:var(--text-faint); font-weight:500;}

/* Toggle / add-row */
.toggle{width:32px; height:18px; border-radius:10px; background:var(--border-strong); position:relative; cursor:pointer; display:inline-block; vertical-align:middle;}
.toggle::after{content:""; position:absolute; width:14px; height:14px; border-radius:50%; background:#fff; top:2px; left:2px; transition:.15s;}
.toggle.on{background:var(--navy);}
.toggle.on::after{left:16px;}
.add-row{display:flex; gap:8px; margin-bottom:22px;}
.add-row input{flex:1;}
.actions{display:flex; gap:14px; justify-content:flex-end;}
.import-box{border:1px dashed var(--border-strong); border-radius:8px; padding:16px 18px; margin-bottom:24px; display:flex; align-items:center; justify-content:space-between;}
.import-box .txt{font-size:13px; color:var(--text-muted);}
.import-box .txt b{color:var(--text); font-weight:600;}
.import-log{font-size:12px; color:var(--text-faint); margin-top:6px;}
.summary{display:flex; gap:24px; margin-bottom:20px; font-size:13px; color:var(--text-muted);}
.summary b{color:var(--text); font-weight:600;}
.note{font-size:12px; color:var(--text-faint); margin-bottom:20px; line-height:1.5;}

/* Login */
.login-wrap{flex:1; display:flex; align-items:center; justify-content:center; background:var(--gray-bg);}
.login-card{background:#fff; border:1px solid var(--border); border-radius:10px; padding:36px 32px; width:340px;}
.login-card h1{font-size:16px; margin-bottom:4px;}
.login-card .sub{margin-bottom:22px;}
.login-card .field{margin-bottom:14px;}
.login-error{color:var(--red); font-size:12.5px; margin-top:10px; display:none;}
.login-error.show{display:block;}

/* Loading / empty states */
.state-msg{color:var(--text-faint); font-size:13px; padding:30px 0; text-align:center;}
</style>