:root{--bg:#f5f7fb;--card:#ffffff;--primary:#1e70bf;--muted:#6b7280;--accent:#0f62a8;--danger:#c53030}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
/* SGLG professional government-style CSS */
:root{--bg:#f5f7fb;--card:#ffffff;--primary:#1e70bf;--muted:#6b7280;--accent:#0f62a8;--danger:#c53030}
*{box-sizing:border-box;font-family:Inter, "Segoe UI", Roboto, Arial, sans-serif}
body{background:var(--bg);margin:0;color:#0f1724;font-feature-settings: "ss01" on }
.header{background:linear-gradient(90deg,#155a9a, #1e70bf);color:#fff;padding:14px 20px;box-shadow:0 2px 6px rgba(16,24,40,0.06)}
.header .brand{display:flex;align-items:center;gap:12px}
.brand h1{font-size:1.1rem;margin:0;font-weight:600}
.container{max-width:1280px;margin:18px auto;padding:0 18px}
.sidebar{width:300px;background:var(--card);border-right:1px solid #e6eef8;padding:20px}
.main{flex:1;padding:24px}
.layout{display:flex;gap:16px}
.card{background:var(--card);border-radius:8px;padding:16px;box-shadow:0 4px 12px rgba(16,24,40,0.04)}
.nav a{display:flex;align-items:center;gap:8px;padding:10px 8px;color:#154a73;text-decoration:none;border-radius:6px;font-weight:600}
.nav a:hover{background:#eef6ff}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #eef2f7;text-align:left}
.table-responsive{overflow:auto}
.btn{display:inline-block;padding:8px 12px;border-radius:6px;background:var(--primary);color:#fff;text-decoration:none;border:none;cursor:pointer}
.btn.secondary{background:#f3f6fb;color:var(--accent);border:1px solid #dbe8fb}
.btn.active{box-shadow:0 2px 0 rgba(0,0,0,0.08) inset, 0 4px 10px rgba(16,24,40,0.06);background:#0b63a5}

/* User-management action buttons */
.um-btn{font-weight:600;border:1px solid transparent}
.um-btn + .um-btn{margin-left:6px}
.um-btn{min-width:86px;text-align:left}
.um-btn-edit{background:#2563eb;color:#fff !important}
.um-btn-edit:hover{background:#1d4ed8;color:#fff !important}
.um-btn-reset{background:#ea7a12;color:#fff !important}
.um-btn-reset:hover{background:#cf690b;color:#fff !important}
/* Subtle delete style to reduce accidental destructive clicks */
.um-btn-delete-subtle{background:#f8fafc;color:#7f1d1d;border-color:#e5e7eb}
.um-btn-delete-subtle:hover{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.um-btn-undo{background:#ecfeff;color:#155e75;border-color:#bae6fd}
.um-btn-undo:hover{background:#cffafe;color:#0e7490}
.um-actions{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:6px}
.um-actions .um-btn{margin-left:0}

/* Tab styles for governance area and indicator buttons */
.tabs { display:flex; gap:8px; flex-wrap:wrap }
.tabs .btn{ border-radius:18px; padding:8px 14px; font-weight:600; background:#1e70bf }
.tabs .btn.active{ background:#0b63a5 }

/* Floating indicator nav (bottom-left) */
.indicator-float{ position:fixed; bottom:16px; right:16px; z-index:1200; display:flex; flex-direction:column; align-items:flex-end; gap:8px }
.indicator-float.indicator-left{ left:16px; right:auto; align-items:flex-start }
.indicator-float.indicator-right{ right:16px; left:auto; align-items:flex-end }
.indicator-float.indicator-side{ right:0; top:10%; bottom:10%; left:auto; display:flex; flex-direction:row-reverse; align-items:flex-start; gap:0 }
.indicator-float .indicator-toggle{ background:var(--primary); color:#fff; border-radius:20px; padding:10px 14px; box-shadow:0 6px 18px rgba(16,24,40,0.12); border:none }
.indicator-float .float-list{ display:none; max-width:calc(100vw - 64px); max-height:220px; overflow:auto; background:rgba(255,255,255,0.98); padding:6px; border-radius:10px; box-shadow:0 8px 24px rgba(16,24,40,0.12); }
.indicator-float.open .float-list{ display:flex; gap:8px; flex-wrap:wrap }
.indicator-float .float-list{ display:none; max-width:calc(100vw - 64px); max-height:220px; overflow:auto; background:rgba(255,255,255,0.98); padding:6px; border-radius:10px; box-shadow:0 8px 24px rgba(16,24,40,0.12); }
.indicator-float.open .float-list{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start }

/* subtle, rounded indicator buttons (pill-like) with spacing */
.indicator-float .float-list .btn{ border-radius:999px; padding:8px 14px; background:rgba(11,99,165,0.06); color:var(--primary); border:1px solid rgba(11,99,165,0.12); box-shadow:none; margin:4px 0 }
.#fake {}
/* When the indicator list is moved into the sidebar it is no longer a child of .indicator-float,
   so target the float list by id to ensure the subtle button styles always apply. */
#floatList .btn{ border-radius:999px; padding:8px 14px; background:rgba(11,99,165,0.06); color:var(--primary); border:1px solid rgba(11,99,165,0.12); box-shadow:none; margin:4px 0; display:block; text-align:left }
#floatList .btn:hover{ background:rgba(11,99,165,0.12) }
#floatList .btn.active{ background:var(--primary); color:#fff; border-color:var(--primary) }

#sidebarIndicatorNav{ position:relative; padding-top:6px }
/* Sidebar specific: ensure buttons inside the mounted sidebar are subtle and full-width */
#sidebarIndicatorNav .float-list .btn, #sidebarIndicatorNav .btn{ border-radius:8px; padding:10px 12px; background:rgba(11,99,165,0.06); color:var(--primary); border:1px solid rgba(11,99,165,0.08); display:block; width:100%; margin:6px 0; text-align:left }
#sidebarIndicatorNav .float-list .btn.active, #sidebarIndicatorNav .btn.active{ background:var(--primary); color:#fff; border-color:var(--primary) }
.indicator-float .float-list .btn:hover{ background:rgba(11,99,165,0.12) }
.indicator-float .float-list .btn.active{ background:var(--primary); color:#fff; border-color:var(--primary) }

/* vertical layout spacing for side drawer */
.indicator-float.indicator-side .float-list{ display:flex; flex-direction:column; width:380px; max-height:80vh; border-radius:8px 0 0 8px; padding:12px }
.indicator-float.indicator-side .float-list .btn{ width:100%; margin:6px 0 }

/* area selector buttons (above indicators) */
#areaSelector .btn{ border-radius:18px; padding:8px 14px; background:transparent; color:var(--primary); border:1px solid rgba(11,99,165,0.08); margin:4px }
#areaSelector .btn.active{ background:var(--primary); color:#fff; border-color:var(--primary) }

/* Side drawer specific styles */
.indicator-float.indicator-side .float-list{ display:flex; flex-direction:column; width:320px; max-height:80vh; border-radius:8px 0 0 8px; padding:14px }
.indicator-float.indicator-side .float-list .btn{ width:100%; text-align:left }

/* Auto-scroll modifier: when enabled, floating list will show scrollbar and keep compact buttons */
.indicator-float.auto-scroll .float-list{ max-height:240px; overflow:auto }

/* gear menu */
.indicator-gear{ background:transparent; color:#fff; border:none; font-size:18px; padding:8px; border-radius:50%; cursor:pointer; position:static }
.indicator-gear.sidebar-abs{ position:absolute; right:12px; top:8px; color:var(--muted); background:transparent }
.indicator-gear-menu{ display:none; position:absolute; right:48px; top:-6px; background:#fff; color:#0f1724; border-radius:8px; box-shadow:0 8px 24px rgba(16,24,40,0.12); padding:10px; z-index:1300 }
.indicator-gear-menu .row{ display:flex; align-items:center; gap:8px; margin-bottom:6px }
.indicator-gear-menu select{ padding:6px }
.indicator-gear-menu label{ font-size:13px }

/* sidebar mount animation */
#sidebarIndicatorNav{ transform: translateX(20px); opacity:0; transition: transform .28s ease, opacity .28s ease }
#sidebarIndicatorNav.enter{ transform: translateX(0); opacity:1 }

/* Indicator header (above form) */
.indicator-title{ display:block; font-size:18px; font-weight:700; margin:6px 0 12px 0; color:var(--primary) }

/* Governance area dropdown (styled) */
.area-dropdown{ position:relative; display:inline-block }
.area-dropdown .selected{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:#fff; border-radius:10px; box-shadow:0 8px 18px rgba(16,24,40,0.06); border:1px solid #eef6ff; color:var(--primary); cursor:pointer }
.area-dropdown .selected .caret{ margin-left:6px; width:14px; height:14px; display:inline-block; transform:rotate(0deg); transition:transform .18s }
.area-dropdown.open .selected .caret{ transform:rotate(180deg) }
.area-dropdown .menu{ display:none; position:absolute; right:0; top:calc(100% + 10px); background:#fff; border-radius:10px; padding:10px; box-shadow:0 12px 30px rgba(16,24,40,0.12); min-width:220px; z-index:1400 }
.area-dropdown.open .menu{ display:block }
.area-dropdown .menu .area-item{ padding:8px 10px; border-radius:8px; color:#0f1724; cursor:pointer; margin-bottom:6px }
.area-dropdown .menu .area-item:hover{ background:#f2f8ff }
.area-dropdown .menu .area-item.active{ background:var(--primary); color:#fff }


/* small muted labels used in the indicator nav */
.nav-label{ font-size:13px; color:var(--muted); font-weight:600; margin-bottom:4px }
.indicator-float .nav-label{ color:#fff }
.indicator-float.indicator-side .nav-label{ color:var(--muted) }
/* extra spacing between the area dropdown and the Indicators label */
.indicator-label{ margin-top:2px }
/* reduce dropdown bottom spacing when mounted */
.area-dropdown{ margin-bottom:4px }

/* remove extra top padding in sidebar-mounted list and tidy first-child spacing */
#sidebarIndicatorNav .float-list{ padding-top:6px }
#sidebarIndicatorNav .float-list .btn:first-child{ margin-top:0 }


.small{font-size:0.9rem;color:var(--muted)}
.status-pass{color:green;font-weight:700}
.status-fail{color:var(--danger);font-weight:700}
.form-row{margin-bottom:12px}
.form-row .option-row{ display:inline-flex; align-items:center; margin-right:12px; }
.form-row .option-row input[type="checkbox"], .form-row .option-row input[type="radio"]{ vertical-align:middle; }
.form-row .option-row label{ margin-left:6px; cursor:pointer; }
/* child fields get a visual indent */
.form-row.child-field{margin-left:22px}
label{display:block;margin-bottom:6px;font-weight:600}
input[type=text],select,textarea,input[type=date]{width:100%;padding:10px;border:1px solid #dbe8fb;border-radius:6px;background:#fff}
.muted{color:var(--muted)}

.icon{width:18px;height:18px;vertical-align:middle;fill:currentColor}
.nav .icon{width:16px;height:16px}

/* responsive */
@media(max-width:900px){
	.layout{flex-direction:column}
	.sidebar{width:100%;display:flex;gap:8px;flex-wrap:wrap}
	.nav a{flex:1 1 48%;text-align:center}
}

@media(max-width:480px){
	.header .brand h1{font-size:1rem}
	.nav a{flex-basis:100%}
}

.card h3{margin-top:0}

.kpi{display:flex;gap:12px}
.kpi .kpi-card{flex:1;padding:12px;border-radius:6px;background:#f8fbff;border:1px solid #e6f0fb}

.table tr:hover{background:#fbfdff}