:root{
  --blue-dark:#0A3D75;
  --blue:#0F5FAA;
  --orange:#F7941D;
  --orange-dark:#E67A0A;
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --ink:#16232F;
  --ink-soft:#5B6B7A;
  --line:#E4E9EF;
  --radius:14px;
  --shadow:0 4px 18px rgba(10,61,117,0.08);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;}
h1,h2,h3,.brand,.nav-group-label{font-family:'Poppins',sans-serif;}

.gradient-band{
  position:relative;
  background:linear-gradient(115deg,var(--blue-dark) 0%,var(--blue) 45%,var(--orange) 88%,var(--orange-dark) 100%);
  overflow:hidden;
}
.gradient-band::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,0.10) 0px, rgba(255,255,255,0.10) 2px, transparent 2px, transparent 34px);
  pointer-events:none;
}

.pill-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(120deg,var(--orange),var(--orange-dark));
  color:#fff; border:none; border-radius:999px;
  padding:11px 24px; font-weight:600; font-size:14px;
  cursor:pointer; box-shadow:0 6px 16px rgba(230,122,10,0.35);
  text-decoration:none;
}
.pill-btn.ghost{ background:rgba(255,255,255,0.14); box-shadow:none; border:1px solid rgba(255,255,255,0.4); }
.pill-btn.outline{ background:#fff; color:var(--blue-dark); border:1.5px solid var(--line); box-shadow:none; }
.pill-btn.small{ padding:7px 16px; font-size:12.5px; }

#login-view{min-height:100vh; display:flex; align-items:center; justify-content:center;}
.login-shell{
  width:min(920px, 92vw); display:grid; grid-template-columns:1.1fr 1fr;
  border-radius:20px; overflow:hidden; box-shadow:0 20px 60px rgba(10,61,117,0.18);
  background:var(--surface);
}
.login-hero{padding:48px 40px; color:#fff; position:relative; min-height:440px; display:flex; flex-direction:column; justify-content:space-between;}
.login-hero .brand{font-size:22px; font-weight:800; letter-spacing:.5px;}
.login-hero .brand span{opacity:.85; font-weight:500; font-size:13px; display:block; font-family:'Inter',sans-serif; margin-top:2px;}
.login-hero .tagline{font-size:24px; font-weight:700; line-height:1.35; max-width:340px;}
.login-hero .foot-note{font-size:12.5px; opacity:.85; font-family:'Inter',sans-serif;}
.login-form{padding:48px 44px; display:flex; flex-direction:column; justify-content:center;}
.login-form h2{margin:0 0 6px; font-size:22px;}
.login-form p.sub{margin:0 0 22px; color:var(--ink-soft); font-size:14px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
.field input,.field select{width:100%; padding:11px 13px; border-radius:9px; border:1.5px solid var(--line); font-family:'Inter',sans-serif; font-size:14px; background:#FCFDFE;}
.field input:focus,.field select:focus{outline:none; border-color:var(--blue);}
.login-form .pill-btn{width:100%; justify-content:center; margin-top:8px; border:none;}
.error-box{background:#FDE7E4; color:#C4443A; border-radius:9px; padding:10px 13px; font-size:13px; margin-bottom:16px;}
.success-box{background:#E3F3E8; color:#2E9E6B; border-radius:9px; padding:10px 13px; font-size:13px; margin-bottom:16px;}

#app-shell{display:grid; grid-template-columns:230px 1fr; min-height:100vh;}
.sidebar{background:var(--surface); border-right:1px solid var(--line); padding:22px 16px; display:flex; flex-direction:column;}
.sidebar .brand-mini{display:flex; align-items:center; gap:10px; padding:0 8px 20px; border-bottom:1px solid var(--line); margin-bottom:16px;}
.brand-mini .mark{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--blue),var(--orange)); flex-shrink:0;}
.brand-mini strong{font-size:14px; display:block;}
.brand-mini span{font-size:11px; color:var(--ink-soft);}
.nav-group-label{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#96A3AF; margin:16px 8px 8px; font-weight:600;}
.nav-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:13.5px; color:var(--ink); text-decoration:none; margin-bottom:2px; font-weight:500;}
.nav-item .dot{width:7px; height:7px; border-radius:50%; background:var(--line); flex-shrink:0;}
.nav-item:hover{background:#F2F6FA;}
.nav-item.active{background:linear-gradient(120deg, rgba(15,95,170,0.10), rgba(247,148,29,0.10)); color:var(--blue-dark); font-weight:700;}
.nav-item.active .dot{background:var(--orange);}
.nav-item.disabled{color:#B7C1CB; cursor:default;}
.sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-soft);}

.main{overflow-y:auto;}
.topbar{padding:18px 32px; display:flex; align-items:center; justify-content:space-between; color:#fff;}
.topbar h1{margin:0; font-size:19px;}
.topbar .crumb{font-size:12px; opacity:.85; font-family:'Inter',sans-serif; margin-top:2px;}
.topbar-right{display:flex; align-items:center; gap:10px;}
.avatar{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff;}
.tenant-switch{background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.4); border-radius:999px; color:#fff; padding:7px 14px; font-size:12.5px; font-family:'Inter',sans-serif;}
.tenant-switch option{color:var(--ink);}
.lang-toggle{display:inline-flex; align-items:center; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.4); border-radius:999px; padding:3px; gap:2px;}
.lang-toggle button{border:none; background:none; padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:700; font-family:'Poppins',sans-serif; letter-spacing:.3px; cursor:pointer; color:rgba(255,255,255,.75);}
.lang-toggle button.active{background:#fff; color:var(--blue-dark);}

.content{padding:28px 32px 60px;}
.placeholder-tag{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; background:#FFF3E4; color:var(--orange-dark); border-radius:999px; padding:4px 10px; margin-bottom:14px;}

.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px;}
.kpi-card{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; border-left:4px solid var(--blue);}
.kpi-card.orange{border-left-color:var(--orange);}
.kpi-card .label{font-size:12px; color:var(--ink-soft); font-weight:600;}
.kpi-card .value{font-size:26px; font-weight:800; margin-top:6px; font-family:'Poppins',sans-serif;}

.panel{background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; margin-bottom:20px;}
.panel h3{margin:0 0 4px; font-size:15px;}
.panel p.desc{margin:0 0 16px; font-size:12.5px; color:var(--ink-soft);}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft); padding:8px 6px; border-bottom:1.5px solid var(--line);}
td{padding:10px 6px; border-bottom:1px solid var(--line); color:var(--ink);}
.badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;}
.badge.high{background:#FDE7E4; color:#C4443A;}
.badge.med{background:#FFF3DE; color:#B5760B;}
.badge.low{background:#E3F3E8; color:#2E9E6B;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-grid .field.full{grid-column:1/-1;}

/* ---------- Responsive: tablet (iPad/Android ~600-1024px) & phone ---------- */
.menu-toggle{display:none;}
.sidebar-backdrop{display:none;}

@media (max-width:1024px){
  #app-shell{grid-template-columns:1fr;}
  .ia-kpi-grid{grid-template-columns:repeat(2,1fr) !important;}
  .ia-row{grid-template-columns:repeat(2,1fr) !important;}
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; width:280px; z-index:50;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:4px 0 24px rgba(10,61,117,0.18);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(10,61,117,0.35); z-index:40;
  }
  .sidebar-backdrop.open{display:block;}
  .menu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,0.4);
    background:rgba(255,255,255,0.14); color:#fff; font-size:18px; cursor:pointer; flex-shrink:0;
  }
  .topbar{padding:14px 16px; gap:10px;}
  .topbar h1{font-size:16px;}
  .content{padding:18px 16px 48px;}
  .kpi-grid{grid-template-columns:repeat(2,1fr) !important; gap:12px;}
  .panel-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .login-shell{grid-template-columns:1fr; margin:16px;}
  .login-hero{min-height:200px; padding:32px 24px;}
  .login-form{padding:32px 24px;}
  /* Tables scroll horizontally instead of squeezing columns unreadable */
  .panel{overflow-x:auto;}
  table{min-width:640px;}
  /* Bigger touch targets throughout (Apple/Android HIG ~44px minimum) */
  .pill-btn{padding:12px 22px; min-height:44px;}
  .pill-btn.small{padding:10px 18px; min-height:40px;}
  .nav-item{padding:13px 12px; font-size:14.5px;}
  .field input,.field select{padding:13px 14px; font-size:16px;} /* 16px avoids iOS auto-zoom on focus */
  .tenant-switch, .lang-toggle button{min-height:38px;}
}

@media (max-width:600px){
  .kpi-grid{grid-template-columns:1fr !important;}
  .ia-kpi-grid{grid-template-columns:1fr !important;}
  .ia-row{grid-template-columns:1fr !important;}
  .topbar-right{gap:6px;}
  .topbar-right .tenant-switch{display:none;} /* moved into sidebar-foot on phone to save topbar space */
  .doc{padding:28px 20px !important; margin:0 !important;}
  .sig-block{grid-template-columns:1fr !important;}
}

@media (hover:none) and (pointer:coarse){
  /* Any touch device (iPad, Android tablet, phone): remove hover-only affordances, ensure tap feedback via active state */
  .nav-item:active, .pill-btn:active{opacity:.7;}
}