/* SentraGuard web — component styles. */

/* App shell layout */
.sg-app { display:grid; grid-template-columns:var(--sg-nav-w) 1fr; grid-template-rows:var(--sg-topbar-h) 1fr; grid-template-areas:"brand topbar" "nav main"; height:100vh; }
.sg-brand { grid-area:brand; display:flex; align-items:center; gap:var(--sg-2); padding:0 var(--sg-5); border-bottom:1px solid var(--sg-border); border-right:1px solid var(--sg-border); }
.sg-brand img { width:24px; height:24px; }
.sg-brand b { font-family:var(--sg-font-display); font-size:var(--sg-text-lg); }
.sg-topbar { grid-area:topbar; display:flex; align-items:center; gap:var(--sg-4); padding:0 var(--sg-6); border-bottom:1px solid var(--sg-border); }
.sg-topbar .spacer { flex:1; }
.sg-nav { grid-area:nav; border-right:1px solid var(--sg-border); overflow-y:auto; padding:var(--sg-4) var(--sg-3); }
.sg-main { grid-area:main; overflow-y:auto; padding:var(--sg-8) var(--sg-10); }
.sg-main-inner { max-width:1160px; margin:0 auto; }

/* Surface switcher (segmented) */
.sg-switch { display:inline-flex; background:var(--sg-surface-2); border:1px solid var(--sg-border); border-radius:var(--sg-radius-full); padding:3px; }
.sg-switch button { border:0; background:transparent; color:var(--sg-text-muted); font:inherit; font-size:var(--sg-text-sm); padding:6px 16px; border-radius:var(--sg-radius-full); cursor:pointer; }
.sg-switch button[aria-pressed="true"] { background:var(--sg-accent-600); color:#fff; }

/* Nav */
.sg-nav-group { margin-bottom:var(--sg-5); }
.sg-nav-group h4 { font-family:var(--sg-font-body); text-transform:uppercase; letter-spacing:.8px; font-size:11px; color:var(--sg-text-faint); margin:0 0 var(--sg-2) var(--sg-3); }
.sg-nav a { display:flex; align-items:center; gap:var(--sg-3); padding:9px var(--sg-3); border-radius:var(--sg-radius-sm); color:var(--sg-text-muted); font-size:var(--sg-text-sm); }
.sg-nav a:hover { background:var(--sg-surface-2); color:var(--sg-text); }
.sg-nav a[aria-current="page"] { background:var(--sg-accent-600); color:#fff; }
.sg-nav a .ro { margin-left:auto; font-size:10px; color:var(--sg-text-faint); border:1px solid var(--sg-border); border-radius:var(--sg-radius-full); padding:1px 6px; }
.sg-nav a[aria-current="page"] .ro { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.3); }

/* Tenant menu + role badge */
.sg-tenant { display:flex; align-items:center; gap:var(--sg-2); color:var(--sg-text-muted); font-size:var(--sg-text-sm); }
.sg-tenant b { color:var(--sg-text); }
.sg-rolebadge { display:inline-flex; align-items:center; gap:var(--sg-2); font-size:var(--sg-text-sm); color:var(--sg-text); background:var(--sg-surface-2); border:1px solid var(--sg-border); border-radius:var(--sg-radius-full); padding:4px 12px; }
.sg-rolebadge .dot { width:8px; height:8px; border-radius:50%; background:var(--sg-accent-400); }
.sg-iconbtn { border:1px solid var(--sg-border); background:var(--sg-surface-2); color:var(--sg-text-muted); border-radius:var(--sg-radius-sm); padding:6px 12px; font:inherit; font-size:var(--sg-text-sm); cursor:pointer; }
.sg-iconbtn:hover { color:var(--sg-text); }

/* Page header */
.sg-pagehead { margin-bottom:var(--sg-6); }
.sg-pagehead h1 { font-size:var(--sg-text-2xl); }
.sg-pagehead p { color:var(--sg-text-muted); margin:var(--sg-2) 0 0; }

/* Cards + grid */
.sg-grid { display:grid; gap:var(--sg-4); }
.sg-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.sg-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.sg-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:1024px){ .sg-grid.cols-4{grid-template-columns:repeat(2,1fr);} .sg-grid.cols-3{grid-template-columns:1fr;} }
.sg-card { background:var(--sg-surface); border:1px solid var(--sg-border); border-radius:var(--sg-radius); padding:var(--sg-5); box-shadow:var(--sg-shadow); }
.sg-card h3 { font-size:var(--sg-text-lg); margin-bottom:var(--sg-4); }

/* StatCard */
.sg-stat .label { color:var(--sg-text-muted); font-size:var(--sg-text-sm); }
.sg-stat .value { font-family:var(--sg-font-display); font-size:var(--sg-text-3xl); line-height:1.1; margin-top:var(--sg-2); }
.sg-stat .sub { margin-top:var(--sg-2); font-size:var(--sg-text-xs); color:var(--sg-text-faint); }
.sg-tag { display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.6px; padding:2px 7px; border-radius:var(--sg-radius-full); background:var(--sg-surface-2); color:var(--sg-text-muted); border:1px solid var(--sg-border); }

/* Posture ring */
.sg-posture { display:flex; align-items:center; gap:var(--sg-6); }
.sg-ring { width:132px; height:132px; flex:none; }
.sg-ring .track { stroke:var(--sg-border); }
.sg-ring .val { stroke:var(--sg-accent-500); stroke-linecap:round; transition:stroke-dashoffset .6s ease; }
.sg-ring text { fill:var(--sg-text); font-family:var(--sg-font-display); }
.sg-meter { margin-bottom:var(--sg-3); }
.sg-meter .row { display:flex; justify-content:space-between; font-size:var(--sg-text-sm); color:var(--sg-text-muted); margin-bottom:4px; }
.sg-meter .bar { height:8px; background:var(--sg-surface-2); border-radius:var(--sg-radius-full); overflow:hidden; }
.sg-meter .bar i { display:block; height:100%; background:var(--sg-accent-500); border-radius:inherit; }
.sg-band { font-size:var(--sg-text-sm); font-weight:600; }
.sg-band.protected { color:var(--sg-success); } .sg-band.attention { color:var(--sg-warning); } .sg-band.risk { color:var(--sg-danger); }

/* Table */
.sg-table { width:100%; border-collapse:collapse; font-size:var(--sg-text-sm); }
.sg-table th { text-align:left; color:var(--sg-text-faint); font-weight:600; text-transform:uppercase; letter-spacing:.5px; font-size:11px; padding:0 var(--sg-3) var(--sg-3); border-bottom:1px solid var(--sg-border); }
.sg-table td { padding:var(--sg-3); border-bottom:1px solid var(--sg-border); color:var(--sg-text); vertical-align:top; }
.sg-table tr:last-child td { border-bottom:0; }
.sg-table tbody tr:hover { background:var(--sg-surface-2); }
.sg-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:var(--sg-text-xs); color:var(--sg-text-muted); }

/* Decision / status chips */
.sg-chip { display:inline-block; font-size:11px; font-weight:600; padding:2px 9px; border-radius:var(--sg-radius-full); }
.sg-chip.allow { background:var(--sg-success-bg); color:var(--sg-success); }
.sg-chip.warning, .sg-chip.warn { background:var(--sg-warning-bg); color:var(--sg-warning); }
.sg-chip.block, .sg-chip.danger { background:var(--sg-danger-bg); color:var(--sg-danger); }
.sg-chip.info { background:var(--sg-info-bg); color:var(--sg-info); }

/* Empty state + banner + skeleton */
.sg-empty { text-align:center; padding:var(--sg-12) var(--sg-6); color:var(--sg-text-muted); }
.sg-empty .ic { font-size:34px; opacity:.5; }
.sg-empty h3 { margin:var(--sg-3) 0 var(--sg-2); color:var(--sg-text); }
.sg-banner { display:flex; gap:var(--sg-3); align-items:center; padding:var(--sg-3) var(--sg-4); border-radius:var(--sg-radius-sm); font-size:var(--sg-text-sm); margin-bottom:var(--sg-4); }
.sg-banner.info { background:var(--sg-info-bg); color:var(--sg-info); }
.sg-banner.warn { background:var(--sg-warning-bg); color:var(--sg-warning); }
.sg-skel { background:linear-gradient(90deg,var(--sg-surface-2) 25%,var(--sg-border) 37%,var(--sg-surface-2) 63%); background-size:400% 100%; animation:sg-shimmer 1.4s ease infinite; border-radius:var(--sg-radius-sm); height:14px; }
@keyframes sg-shimmer { 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* Buttons */
.sg-btn { border:0; border-radius:var(--sg-radius-sm); padding:9px 18px; font:inherit; font-size:var(--sg-text-sm); font-weight:600; cursor:pointer; }
.sg-btn.primary { background:var(--sg-accent-600); color:#fff; }
.sg-btn.primary:hover { background:var(--sg-accent-500); }
.sg-btn.ghost { background:transparent; color:var(--sg-text-muted); border:1px solid var(--sg-border); }

/* Sign-in + interstitial */
.sg-center { min-height:100vh; display:grid; place-items:center; padding:var(--sg-6); }
.sg-auth { width:380px; max-width:100%; background:var(--sg-surface); border:1px solid var(--sg-border); border-radius:var(--sg-radius-lg); padding:var(--sg-8); box-shadow:var(--sg-shadow); }
.sg-auth h1 { font-size:var(--sg-text-xl); margin-bottom:var(--sg-2); }
.sg-auth p.help { color:var(--sg-text-muted); font-size:var(--sg-text-sm); margin:0 0 var(--sg-5); }
.sg-auth label { display:block; font-size:var(--sg-text-sm); color:var(--sg-text-muted); margin-bottom:var(--sg-2); }
.sg-input { width:100%; background:var(--sg-bg); border:1px solid var(--sg-border); color:var(--sg-text); border-radius:var(--sg-radius-sm); padding:11px 13px; font:inherit; }
.sg-auth .err { color:var(--sg-danger); font-size:var(--sg-text-sm); margin-top:var(--sg-3); min-height:18px; }
.sg-auth .sg-btn { width:100%; margin-top:var(--sg-4); }

/* Toast */
.sg-toasts { position:fixed; right:var(--sg-6); bottom:var(--sg-6); display:flex; flex-direction:column; gap:var(--sg-2); z-index:50; }
.sg-toast { background:var(--sg-surface-2); border:1px solid var(--sg-border); border-radius:var(--sg-radius-sm); padding:10px 14px; font-size:var(--sg-text-sm); box-shadow:var(--sg-shadow); }

/* Mobile nav toggle — hidden on desktop, shown on narrow screens */
.sg-navtoggle { display:none; border:1px solid var(--sg-border); background:var(--sg-surface-2); color:var(--sg-text); border-radius:var(--sg-radius-sm); width:34px; height:34px; font-size:16px; cursor:pointer; margin-right:var(--sg-2); }
.sg-scrim { display:none; }

@media (max-width:880px) {
  .sg-app { grid-template-columns:1fr; grid-template-areas:"brand" "topbar" "main"; grid-template-rows:var(--sg-topbar-h) var(--sg-topbar-h) 1fr; }
  .sg-brand { border-right:0; }
  .sg-navtoggle { display:inline-flex; align-items:center; justify-content:center; }
  /* Nav slides in from the left as an overlay drawer */
  .sg-nav { position:fixed; top:0; left:0; bottom:0; width:var(--sg-nav-w); background:var(--sg-bg); border-right:1px solid var(--sg-border); transform:translateX(-100%); transition:transform .2s ease; z-index:40; padding-top:var(--sg-5); }
  .sg-app.nav-open .sg-nav { transform:translateX(0); box-shadow:var(--sg-shadow); }
  .sg-app.nav-open::after { content:""; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:30; }
  .sg-main { padding:var(--sg-6) var(--sg-5); }
  .sg-topbar { padding:0 var(--sg-4); gap:var(--sg-2); }
  .sg-tenant { display:none; } /* keep the bar uncluttered on mobile */
}
@media (max-width:560px) {
  .sg-grid.cols-4, .sg-grid.cols-3, .sg-grid.cols-2 { grid-template-columns:1fr; }
  .sg-posture { flex-direction:column; align-items:flex-start; }
}