:root {
  --ink: #172d30;
  --muted: #687c7e;
  --line: #dce6e4;
  --surface: #ffffff;
  --canvas: #f4f7f5;
  --teal-950: #06383e;
  --teal-900: #08464c;
  --teal-800: #0a5960;
  --teal-700: #0b6d70;
  --teal-100: #dff1ef;
  --teal-50: #eff8f6;
  --gold: #d6a64a;
  --gold-soft: #fff3d8;
  --orange: #e17a3c;
  --orange-soft: #fff0e5;
  --red: #c94646;
  --red-soft: #fdecec;
  --green: #28856c;
  --green-soft: #e7f5ef;
  --blue: #3e78a8;
  --blue-soft: #eaf2fa;
  --shadow: 0 10px 35px rgba(16, 53, 55, .08);
  --radius: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.auth-gateway { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, 1.05fr) minmax(480px, .95fr); background: #fff; }
.auth-showcase { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 46px clamp(38px, 5vw, 76px); color: #fff; background: radial-gradient(circle at 82% 16%, rgba(214,166,74,.2), transparent 22%), radial-gradient(circle at 18% 82%, rgba(35,139,128,.24), transparent 28%), linear-gradient(145deg, #042f34, #075158 58%, #063e43); }
.auth-showcase::before { content: ''; position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.auth-showcase::after { content: ''; position: absolute; right: -120px; bottom: -150px; width: 430px; height: 430px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 110px rgba(255,255,255,.018); }
.auth-logos, .auth-copy, .auth-features { position: relative; z-index: 1; }
.auth-logos { display: flex; align-items: center; gap: 22px; }
.auth-logo { display: grid; place-items: center; }
.auth-logo img { display: block; object-fit: contain; }
.bab-logo { width: 92px; height: 92px; border: 1px solid rgba(255,255,255,.14); border-radius: 21px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 30px rgba(255,255,255,.04); }
.bab-logo img { width: 76px; height: 76px; }
.smart-logo { width: 118px; height: 92px; padding: 7px; border-radius: 16px; background: #fff; }
.smart-logo img { width: 78px; height: 78px; image-rendering: auto; }
.logo-divider { width: 1px; height: 52px; background: rgba(255,255,255,.24); }
.auth-copy { max-width: 650px; margin: auto 0; padding: 45px 0; }
.auth-copy .eyebrow { color: #a8d0cc; }
.auth-copy h1 { margin: 13px 0 18px; font-size: clamp(42px, 5vw, 68px); line-height: .98; letter-spacing: -2.4px; }
.auth-copy h1 span { color: var(--gold); font-weight: 450; }
.auth-copy p { max-width: 570px; margin: 0; color: #c3d8d6; font-size: 14px; line-height: 1.75; }
.auth-features { display: flex; flex-wrap: wrap; gap: 10px; }
.auth-features span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; color: #c8ddda; background: rgba(255,255,255,.055); font-size: 10px; font-weight: 700; letter-spacing: .4px; }
.auth-workspace { min-height: 100vh; display: grid; place-items: center; padding: 40px clamp(28px, 5vw, 76px); background: radial-gradient(circle at 90% 5%, #eff8f6, transparent 30%), #fff; }
.login-panel { width: min(420px, 100%); }
.mobile-auth-logos { display: none; }
.login-panel h2, .section-panel h2 { margin: 4px 0 8px; color: var(--teal-950); font-size: 32px; letter-spacing: -.8px; }
.auth-intro, .section-welcome p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.login-form { display: grid; gap: 17px; margin-top: 28px; }
.login-field { display: grid; gap: 7px; }
.login-field > label { color: #405b5d; font-size: 10px; font-weight: 800; }
.login-control { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfc; transition: .18s ease; }
.login-control:focus-within { border-color: var(--teal-700); box-shadow: 0 0 0 4px var(--teal-50); }
.login-control > span { color: #799092; font-size: 16px; }
.login-control input { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.login-control button { border: 0; color: #799092; background: transparent; }
.login-error { min-height: 16px; margin-top: -6px; color: var(--red); font-size: 10px; font-weight: 700; }
.login-submit { height: 48px; display: flex; align-items: center; justify-content: center; gap: 14px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--teal-800), var(--teal-950)); box-shadow: 0 9px 24px rgba(6,56,62,.2); font-size: 11px; font-weight: 800; }
.login-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(6,56,62,.25); }
.login-submit span { font-size: 16px; }
.demo-access { margin-top: 23px; border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; background: #f8faf9; }
.demo-access summary { color: var(--teal-800); cursor: pointer; font-size: 10px; font-weight: 800; }
.demo-access p { margin: 10px 0 8px; color: var(--muted); font-size: 9px; }
.demo-access button { margin: 3px 3px 0 0; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; color: var(--ink); background: #fff; font-size: 8px; }
.demo-access button:hover { border-color: var(--teal-700); color: var(--teal-800); }
.auth-security { display: block; margin-top: 17px; color: #8c9b9c; font-size: 8px; line-height: 1.5; text-align: center; }
.secure-auth-mode .demo-access { display: none; }
.otp-panel { max-width: 470px; }
.otp-control input { font-size: 22px; font-weight: 850; letter-spacing: 9px; text-align: center; }
.otp-actions { display: flex; justify-content: center; gap: 16px; margin-top: 16px; }
.otp-actions button { border: 0; padding: 5px; color: var(--teal-700); background: transparent; font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.otp-actions button:hover { color: var(--teal-950); text-decoration: underline; text-underline-offset: 3px; }
.otp-actions button:disabled { color: #9caaaa; cursor: wait; text-decoration: none; }
.section-panel { width: min(660px, 100%); }
.section-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.portal-logout { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; color: var(--muted); background: #fff; font-size: 9px; }
.portal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.portal-card { position: relative; overflow: hidden; min-height: 270px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: 17px; padding: 23px; text-align: left; background: #fff; box-shadow: 0 8px 28px rgba(16,53,55,.07); transition: .2s ease; }
.portal-card::after { content: ''; position: absolute; right: -52px; bottom: -58px; width: 165px; height: 165px; border-radius: 50%; background: var(--teal-50); }
.portal-card:hover { border-color: #a8c6c2; transform: translateY(-3px); box-shadow: 0 15px 35px rgba(16,53,55,.12); }
.portal-card.investments::after { background: var(--gold-soft); }
.portal-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--teal-800); font-size: 21px; }
.portal-card.investments .portal-icon { color: #694b12; background: var(--gold); }
.portal-card h3 { margin: 22px 0 8px; color: var(--teal-950); font-size: 20px; letter-spacing: -.4px; }
.portal-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.portal-card ul { display: grid; gap: 5px; margin: 15px 0 20px; padding: 0; list-style: none; color: #536a6c; font-size: 9px; }
.portal-card li::before { content: '✓'; margin-right: 6px; color: var(--green); font-weight: 800; }
.portal-card.investments li::before { color: #a27620; }
.portal-enter { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; color: var(--teal-800); font-size: 10px; font-weight: 800; }
.portal-enter b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal-800); }
.portal-card.investments .portal-enter { color: #8b651e; }
.portal-card.investments .portal-enter b { color: #513b12; background: var(--gold); }
.direction-access { width: 100%; display: flex; align-items: center; gap: 13px; margin-top: 15px; border: 1px solid #bed4d1; border-radius: 13px; padding: 14px 16px; color: var(--teal-950); background: var(--teal-50); text-align: left; }
.direction-access > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--teal-800); }
.direction-access strong, .direction-access small { display: block; }
.direction-access strong { font-size: 10px; }
.direction-access small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.direction-access b { margin-left: auto; }
.user-logout { border: 0; color: var(--muted); background: transparent; font-size: 16px; }
.portal-return { margin-bottom: 3px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 16px;
  color: #eaf6f4;
  background:
    radial-gradient(circle at 10% 90%, rgba(214, 166, 74, .12), transparent 28%),
    linear-gradient(155deg, var(--teal-950), #052f34 70%);
}
.sidebar-collapse-button { position: absolute; z-index: 2; top: 70px; right: -14px; width: 29px; height: 29px; display: grid; place-items: center; border: 2px solid #edf5f4; border-radius: 50%; color: var(--teal-950); background: var(--gold); box-shadow: 0 5px 14px rgba(4,31,34,.22); font-size: 21px; line-height: 1; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.sidebar-collapse-button:hover { transform: scale(1.07); background: #edc76f; }
.app-shell.sidebar-collapsed { grid-template-columns: 78px 1fr; }
.sidebar-collapsed .sidebar { padding-inline: 10px; }
.sidebar-collapsed .brand { justify-content: center; padding-inline: 0; }
.sidebar-collapsed .brand > div:last-child,.sidebar-collapsed .workspace-label,.sidebar-collapsed .nav-item > span:not(.nav-icon),.sidebar-collapsed .settings-link:not(span),.sidebar-collapsed .sidebar-card { display: none; }
.sidebar-collapsed .nav-item,.sidebar-collapsed .settings-link { justify-content: center; padding: 0; }
.sidebar-collapsed .nav-icon { width: auto; }

.brand { display: flex; gap: 11px; align-items: center; padding: 0 8px 24px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; background: rgba(255,255,255,.08); }
.brand-mark svg { width: 27px; fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.brand strong { display: block; color: #fff; font-size: 16px; letter-spacing: .1px; }
.brand span { display: block; margin-top: 3px; color: #9fc1c0; font-size: 11px; }
.workspace-label { margin: 8px 12px 8px; color: #729b9a; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.workspace-label.second { margin-top: 24px; }
.main-nav { display: grid; gap: 4px; }
.nav-item, .settings-link {
  width: 100%; min-height: 43px; border: 0; border-radius: 10px; color: #bcd2d0; background: transparent;
  display: flex; align-items: center; gap: 11px; padding: 0 12px; text-align: left; transition: .18s ease;
}
.nav-item:hover, .settings-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-item.active { color: #fff; background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.07)); box-shadow: inset 3px 0 var(--gold); }
.nav-icon { width: 20px; color: #8db2af; font-size: 18px; text-align: center; }
.nav-item.active .nav-icon { color: var(--gold); }
.nav-count { margin-left: auto; min-width: 22px; padding: 2px 6px; border-radius: 10px; color: #a9cac7; background: rgba(255,255,255,.08); font-size: 10px; text-align: center; }
.nav-count.attention { color: #ffd7bd; background: rgba(225,122,60,.2); }
.sidebar-card { margin: auto 4px 14px; padding: 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(255,255,255,.05); }
.sidebar-card-icon { float: right; color: var(--gold); font-size: 18px; }
.sidebar-card strong { display: block; color: #fff; font-size: 12px; }
.sidebar-card p { margin: 7px 0 10px; color: #95b8b6; font-size: 10px; line-height: 1.5; }
.sidebar-card small { color: #d2e1df; font-size: 9px; }
.settings-link { margin-top: 0; }

.page-shell { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20; min-height: 70px; display: flex; align-items: center; gap: 20px;
  padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.93); backdrop-filter: blur(14px);
}
.menu-button { display: none !important; }
.global-search { position: relative; width: min(440px, 42vw); min-width: 0; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #e0e8e6; border-radius: 10px; background: #f7faf9; }
.global-search > span { color: #7b8e90; font-size: 20px; }
.global-search input { width: 100%; min-width: 0; height: 38px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.global-search kbd { color: #829293; border: 1px solid #d7e0df; border-radius: 5px; background: #fff; padding: 3px 6px; font-size: 9px; white-space: nowrap; }
.search-results { position: absolute; display: none; top: 46px; left: 0; right: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.search-results.open { display: block; }
.search-result { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: 8px; padding: 9px 10px; color: var(--ink); background: #fff; text-align: left; }
.search-result:hover { background: var(--teal-50); }
.search-result small { color: var(--muted); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.period-select { height: 36px; border: 1px solid var(--line); border-radius: 9px; padding: 0 30px 0 11px; color: var(--ink); background: #fff; font-size: 11px; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; }
.notification-button { position: relative; font-size: 18px; }
.notification-button span { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: var(--orange); }
.user-menu { display: flex; align-items: center; gap: 9px; padding-left: 4px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--teal-700), var(--teal-900)); font-size: 10px; font-weight: 800; }
.user-menu strong, .user-menu span { display: block; }
.user-menu strong { font-size: 11px; }
.user-menu div span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.user-menu > span { color: var(--muted); }

#appView { padding: 28px; }
.page-enter { animation: pageIn .25s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.eyebrow { margin: 0 0 6px; color: var(--teal-700); font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.page-heading h1 { margin: 0; overflow-wrap: anywhere; color: var(--teal-950); font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.8px; }
.page-heading p { max-width: 690px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.heading-actions { display: flex; gap: 8px; flex-shrink: 0; }
.primary-button, .secondary-button { min-height: 38px; border-radius: 9px; padding: 0 14px; font-size: 11px; font-weight: 700; }
.primary-button { border: 1px solid var(--teal-800); color: #fff; background: var(--teal-800); box-shadow: 0 5px 15px rgba(8,70,76,.18); }
.primary-button:hover { background: var(--teal-950); }
.secondary-button { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.secondary-button:hover { border-color: #b9cecb; background: var(--teal-50); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-card { position: relative; overflow: hidden; min-height: 134px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 18px rgba(16,53,55,.035); }
.kpi-card::after { content: ''; position: absolute; right: -20px; bottom: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--teal-50); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; }
.kpi-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--teal-800); background: var(--teal-50); font-size: 15px; }
.kpi-value { position: relative; z-index: 1; margin-top: 16px; color: var(--teal-950); font-size: 28px; font-weight: 750; letter-spacing: -1px; }
.kpi-foot { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--muted); font-size: 10px; }
.period-evolution { display: inline-flex; align-items: center; border-radius: 14px; padding: 4px 7px; font-size: 8px; font-weight: 800; line-height: 1.25; }
.period-evolution.positive { color: #17745f; background: #e1f3ed; }
.period-evolution.negative { color: #ad3838; background: #fae3e3; }
.period-evolution.neutral { color: #68797a; background: #edf2f1; }
.trend { color: var(--green); font-weight: 800; }
.trend.bad { color: var(--red); }

.dashboard-filter { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding: 17px 18px; }
.period-summary { min-width: 235px; }
.period-summary .eyebrow { margin-bottom: 5px; }
.period-summary strong { display: block; color: var(--teal-950); font-size: 15px; text-transform: capitalize; }
.period-summary small { display: block; max-width: 390px; margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.period-controls { display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 9px; }
.period-field { display: grid; gap: 5px; }
.period-field label { color: #607678; font-size: 8px; font-weight: 800; letter-spacing: .45px; text-transform: uppercase; }
.period-field input, .period-field select { min-width: 145px; height: 38px; border: 1px solid var(--line); border-radius: 9px; outline: none; padding: 0 10px; color: var(--ink); background: #fbfcfc; font-size: 10px; }
.period-field input:focus, .period-field select:focus { border-color: var(--teal-700); box-shadow: 0 0 0 3px var(--teal-50); }
.period-all { min-height: 38px; display: flex; align-items: center; gap: 7px; border-radius: 9px; padding: 0 12px; color: var(--green); background: var(--green-soft); font-size: 9px; font-weight: 700; }
.dashboard-section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 2px 11px; }
.dashboard-section-title h2 { margin: 0; color: var(--teal-950); font-size: 14px; }
.dashboard-section-title > span { color: var(--muted); font-size: 9px; text-transform: capitalize; }
.dashboard-section-title.secondary-title { margin-top: 22px; }
.indicator-grid { display: grid; gap: 11px; }
.module-indicators { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 22px; }
.module-title { margin-top: 22px; }
.module-title .panel-link { padding: 8px 0; }
.operational-filter { margin-bottom: 22px; }
.module-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recovery-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.recovery-color-card { min-height: 118px; display: flex; align-items: center; justify-content: space-between; gap: 14px; overflow: hidden; padding: 20px 22px; border-radius: 3px; color: #fff; box-shadow: 0 8px 22px rgba(36,65,110,.13); }
.recovery-color-card.teal { background: #0da79f; }
.recovery-color-card.cyan { background: #2298b1; }
.recovery-color-card.blue { background: #437db4; }
.recovery-color-card.green { background: linear-gradient(135deg, #188a5a, #38a96f); }
.recovery-color-card.orange { background: linear-gradient(135deg, #dc7a19, #eda63a); }
.recovery-color-card.red { background: linear-gradient(135deg, #c63d3d, #e35b52); }
.recovery-color-card.indigo { background: #5e5aa8; }
.recovery-color-card.violet { background: #765bac; }
.recovery-color-card.purple { background: #8a5cae; }
.recovery-color-card strong { display: block; font-size: clamp(22px, 2vw, 29px); line-height: 1; letter-spacing: -.7px; }
.recovery-color-card span:not(.recovery-color-icon) { display: block; margin-top: 7px; font-size: 12px; font-weight: 800; }
.recovery-color-card small { display: block; margin-top: 5px; color: rgba(255,255,255,.82); font-size: 10px; font-style: italic; }
.recovery-color-icon { width: 56px; height: 56px; display: grid; place-items: center; flex: 0 0 auto; color: rgba(255,255,255,.68); border: 3px solid rgba(255,255,255,.52); border-radius: 50%; font-size: 24px; font-weight: 800; }
.recovery-search-panel { overflow: hidden; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 6px 22px rgba(16,53,55,.055); }
.recovery-search-controls { display: grid; grid-template-columns: minmax(260px, 1.8fr) repeat(3, minmax(120px, .65fr)) auto; align-items: end; gap: 11px; padding: 15px 16px; }
.recovery-search-field, .recovery-filter-field { min-width: 0; display: grid; gap: 6px; }
.recovery-search-field > span:first-child, .recovery-filter-field > span:first-child { color: #607678; font-size: 8px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.recovery-search-input { height: 40px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: #fbfcfc; transition: border-color .2s, box-shadow .2s; }
.recovery-search-input:focus-within { border-color: var(--teal-700); box-shadow: 0 0 0 3px var(--teal-50); }
.recovery-search-input b { color: var(--teal-700); font-size: 18px; line-height: 1; }
.recovery-search-input input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.recovery-filter-field select { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 10px; outline: 0; padding: 0 10px; color: var(--ink); background: #fbfcfc; font-size: 10px; }
.recovery-filter-field select:focus { border-color: var(--teal-700); box-shadow: 0 0 0 3px var(--teal-50); }
.recovery-reset-button { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #bed3d1; border-radius: 10px; padding: 0 13px; color: var(--teal-800); background: var(--teal-50); font-size: 9px; font-weight: 800; white-space: nowrap; }
.recovery-reset-button:hover { border-color: var(--teal-700); background: #e1f1ee; }
.recovery-reset-button span { font-size: 16px; }
.recovery-search-summary { min-height: 40px; display: flex; align-items: center; gap: 22px; border-top: 1px solid #e7efee; padding: 9px 16px; color: var(--muted); background: #f7faf9; font-size: 10px; }
.recovery-search-summary strong { color: var(--teal-950); }
.recovery-search-summary span:last-child { margin-left: auto; color: var(--teal-800); font-weight: 800; }
.excel-summary-title { margin-top: 2px; }
.excel-kpi-summary { overflow-x: auto; margin-bottom: 25px; border: 1px solid #102f52; background: #102f52; box-shadow: 0 7px 20px rgba(16,47,82,.09); }
.excel-kpi-row { min-width: 1050px; display: grid; gap: 1px; background: #102f52; }
.excel-kpi-row-six { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 12px; }
.excel-kpi-row-seven { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.excel-kpi-cell { min-width: 0; display: grid; grid-template-rows: minmax(58px, auto) 1fr; background: #eef2f7; }
.excel-kpi-label { display: grid; place-items: center; padding: 10px 7px; color: #fff; background: #1d4f82; font-size: 9px; font-weight: 850; line-height: 1.3; text-align: center; text-transform: uppercase; }
.excel-kpi-value { min-height: 52px; display: grid; place-items: center; padding: 8px; color: #123f73; background: #f2f5f9; font-size: 19px; font-weight: 800; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.excel-kpi-row-seven .excel-kpi-value { min-height: 76px; }
.excel-kpi-cell.ranking-cell .excel-kpi-value { padding: 6px 8px; }
.top-signaled-ranking { width: 100%; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.top-signaled-ranking li { min-width: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 5px; color: #123f73; font-size: 8px; text-align: left; }
.top-signaled-ranking li > span { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #1d4f82; font-size: 7px; }
.top-signaled-ranking li > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-person-button { min-width: 0; overflow: hidden; border: 0; padding: 2px 0; color: #123f73; background: transparent; font: inherit; font-weight: 800; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; transition: color .16s ease, text-decoration-color .16s ease; }
.ranking-person-button:hover { color: var(--teal-700); text-decoration-color: currentColor; }
.ranking-person-button:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; border-radius: 3px; }
.top-signaled-ranking li > b { min-width: 18px; border-radius: 10px; padding: 2px 5px; color: #8c4d11; background: #f9dfbd; text-align: center; }
.ranking-empty { color: var(--muted); font-size: 9px; font-weight: 600; }
.kpi-value .top-signaled-ranking { gap: 6px; }
.kpi-value .top-signaled-ranking li { font-size: 9px; }
.gauge-section-title { margin-top: 4px; }
.gauge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 14px; margin-bottom: 26px; }
.gauge-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; padding: 15px 15px 13px; background: linear-gradient(155deg, #fff 55%, #f3f8f7); box-shadow: 0 7px 22px rgba(16,53,55,.055); }
.gauge-card-heading { min-height: 38px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.gauge-card-heading > span:first-child { max-width: 145px; color: var(--teal-950); font-size: 9px; font-weight: 850; line-height: 1.35; letter-spacing: .25px; text-transform: uppercase; }
.gauge-status { flex: 0 0 auto; border-radius: 18px; padding: 4px 7px; font-size: 7px; font-weight: 800; white-space: nowrap; }
.gauge-status.success { color: #23794d; background: #dff3e8; }
.gauge-status.danger { color: #a53636; background: #f9dddd; }
.gauge-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, .48fr); align-items: center; gap: 8px; }
.gauge-visual { min-width: 0; }
.gauge-meter { position: relative; width: min(185px, 100%); margin: 1px auto 0; }
.gauge-meter svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge-track, .gauge-zones { fill: none; stroke-width: 21; }
.gauge-track { stroke: #e9eeee; }
.gauge-zones { stroke-linecap: butt; }
.gauge-ticks line { stroke: rgba(255,255,255,.9); stroke-width: 2; }
.gauge-needle { stroke: #813f46; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 2px 2px rgba(60,31,35,.28)); }
.gauge-hub { fill: #f5f7f7; stroke: #aab6b7; stroke-width: 2; }
.gauge-hub-core { fill: #d7dddd; }
.gauge-min, .gauge-mid, .gauge-max { position: absolute; bottom: 4px; color: #718384; font-size: 7px; font-weight: 700; }
.gauge-min { left: 7px; }
.gauge-mid { left: 50%; transform: translateX(-50%); }
.gauge-max { right: 3px; }
.gauge-value { display: block; margin-top: -2px; color: var(--teal-950); font-size: 25px; line-height: 1; text-align: center; letter-spacing: -.7px; }
.gauge-companion { min-height: 82px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid #dfe9e7; padding-left: 10px; }
.gauge-companion strong { color: var(--teal-950); font-size: clamp(13px, 1.05vw, 17px); line-height: 1.05; letter-spacing: -.35px; white-space: nowrap; }
.gauge-companion span { display: block; margin-top: 6px; color: var(--muted); font-size: 7px; font-weight: 750; line-height: 1.35; text-transform: uppercase; }
.gauge-card-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; border-top: 1px solid #e8eeee; padding-top: 9px; color: var(--muted); font-size: 7px; line-height: 1.35; }
.gauge-card-foot b { flex: 0 0 auto; color: var(--teal-700); }
.operations-title-banner { overflow: hidden; margin-bottom: 17px; border: 1px solid #0e666b; border-radius: 17px; padding: 4px; background: linear-gradient(125deg,#073f45,#0d6267 62%,#168477); box-shadow: 0 10px 28px rgba(7,63,69,.17); }
.operations-title-banner .page-heading { margin: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; padding: 18px 20px; }
.operations-title-banner .eyebrow { color: #a9ded8; }
.operations-title-banner h1 { color: #fff; font-size: clamp(22px,2.3vw,31px); }
.performance-section-title { align-items: center; margin: 23px 0 15px; border: 1px solid #9a6d16; border-left: 5px solid #ffe19a; border-radius: 14px; padding: 13px 16px; color: #fff; background: linear-gradient(110deg,#8c6215,#b88625 58%,#d1a13f); box-shadow: 0 8px 22px rgba(126,85,12,.19); }
.performance-section-title .eyebrow { color: #ffe7ad; }
.performance-section-title h2 { margin-top: 3px; color: #fff; font-size: 17px; }
.performance-section-title > span { border: 1px solid rgba(255,255,255,.34); border-radius: 18px; padding: 6px 9px; color: #fff8e6; background: rgba(255,255,255,.12); font-weight: 750; }
.attention-section-title { align-items: center; margin: 25px 0 14px; border: 1px solid #632d35; border-left: 5px solid #ef7070; border-radius: 14px; padding: 13px 16px; color: #fff; background: linear-gradient(110deg,#3f252d,#65323a 62%,#7b3d42); box-shadow: 0 8px 22px rgba(67,34,40,.17); }
.attention-section-title .eyebrow { color: #ffb9b9; }
.attention-section-title h2 { margin-top: 3px; color: #fff; font-size: 17px; }
.cockpit-section-title.attention-section-title > small { color: #f4d9dc; }
.performance-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 9px; }
.performance-kpi-card { --kpi-color: #17866f; --kpi-soft: #e7f5f1; position: relative; min-width: 0; min-height: 226px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d9e7e4; border-radius: 18px; padding: 17px 17px 15px; color: var(--ink); background: linear-gradient(145deg, #fff 58%, var(--kpi-soft)); box-shadow: 0 8px 26px rgba(16,53,55,.065); font: inherit; text-align: left; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.performance-kpi-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--kpi-color); }
.performance-kpi-card::after { content: ''; position: absolute; right: -46px; top: -54px; width: 130px; height: 130px; border-radius: 50%; background: var(--kpi-soft); opacity: .72; }
.performance-kpi-card.warning { --kpi-color: #d88a1d; --kpi-soft: #fff4df; border-color: #f0ddb9; }
.performance-kpi-card.danger { --kpi-color: #cf4d4d; --kpi-soft: #fff0ee; border-color: #efd1cd; }
.performance-kpi-card:hover { transform: translateY(-3px); border-color: var(--kpi-color); box-shadow: 0 14px 34px rgba(16,53,55,.11); }
.performance-kpi-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.performance-kpi-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--kpi-color); background: var(--kpi-soft); }
.performance-kpi-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.performance-kpi-status { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--kpi-color) 23%, #fff); border-radius: 20px; padding: 5px 8px; color: var(--kpi-color); background: rgba(255,255,255,.78); font-size: 7px; font-weight: 850; white-space: nowrap; }
.performance-kpi-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--kpi-color); box-shadow: 0 0 0 3px var(--kpi-soft); }
.performance-kpi-label { position: relative; z-index: 1; display: block; min-height: 30px; margin-top: 14px; color: #536b6d; font-size: 9px; font-weight: 850; line-height: 1.35; letter-spacing: .38px; text-transform: uppercase; }
.performance-kpi-values { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 4px; }
.performance-kpi-values > strong { color: var(--teal-950); font-size: clamp(28px, 2.5vw, 38px); line-height: .95; letter-spacing: -1.6px; }
.performance-kpi-facts { min-width: 112px; display: grid; gap: 7px; border-left: 1px solid #dbe6e4; padding-left: 11px; }
.performance-kpi-facts > span { min-width: 0; display: block; }
.performance-kpi-facts > span + span { border-top: 1px solid rgba(113,131,132,.16); padding-top: 6px; }
.performance-kpi-facts b, .performance-kpi-facts small { display: block; }
.performance-kpi-facts b { overflow: hidden; color: var(--teal-950); font-size: 11px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.performance-kpi-facts small { margin-top: 3px; color: var(--muted); font-size: 6.5px; font-weight: 750; line-height: 1.25; text-transform: uppercase; }
.performance-kpi-progress { position: relative; z-index: 1; height: 8px; margin-top: 17px; border-radius: 20px; background: #e6eceb; box-shadow: inset 0 1px 2px rgba(16,53,55,.08); }
.performance-kpi-progress > span { display: block; width: var(--kpi-progress); height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--kpi-color) 72%, #fff), var(--kpi-color)); }
.performance-kpi-progress > i { position: absolute; left: var(--kpi-target); top: -4px; width: 2px; height: 16px; border-radius: 2px; background: var(--teal-950); transform: translateX(-1px); }
.performance-kpi-foot { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 5px 8px; margin-top: 11px; color: var(--muted); font-size: 8px; }
.performance-kpi-foot > span b { color: var(--teal-950); }
.performance-kpi-foot > strong { justify-self: end; color: var(--kpi-color); font-size: 8px; }
.performance-kpi-foot > button { grid-column: 1 / -1; justify-self: start; border: 0; padding: 4px 0 0; color: var(--teal-700); background: transparent; font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
.performance-kpi-foot > button:hover { color: var(--teal-950); text-decoration: underline; text-underline-offset: 3px; }
.performance-kpi-foot > button:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; border-radius: 2px; }
.summary-hero-grid { display: grid; grid-template-columns: minmax(190px, .62fr) minmax(390px, 1.65fr) minmax(280px, .9fr); gap: 14px; align-items: stretch; }
.summary-metric-stack { display: grid; gap: 11px; }
.summary-metric { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 13px; padding: 13px; background: #fff; box-shadow: 0 5px 18px rgba(16,53,55,.04); }
.summary-metric-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--teal-700); font-size: 14px; }
.summary-metric.green .summary-metric-icon { background: #50b89b; }
.summary-metric.blue .summary-metric-icon { background: #4b83b6; }
.summary-metric small { display: block; color: var(--muted); font-size: 7px; font-weight: 800; line-height: 1.3; letter-spacing: .3px; text-transform: uppercase; }
.summary-metric strong { display: block; margin-top: 5px; color: var(--teal-950); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.05; overflow-wrap: anywhere; }
.summary-metric p { margin: 5px 0 0; color: var(--muted); font-size: 7px; }
.summary-performance-panel, .summary-review-panel { overflow: hidden; }
.summary-period { color: var(--muted); font-size: 8px; text-transform: capitalize; }
.summary-objectives { gap: 23px; padding-top: 22px; }
.summary-counter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--line); }
.summary-counter { min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 13px; color: #fff; background: #315b74; text-align: center; }
.summary-counter:nth-child(2) { background: #47768d; }
.summary-counter strong { font-size: 29px; line-height: 1; }
.summary-counter span { margin-top: 8px; font-size: 8px; font-weight: 800; line-height: 1.3; text-transform: uppercase; }
.summary-counter small { margin-top: 4px; color: #d9e7ec; font-size: 7px; }
.summary-counter.danger strong { color: #ffd6d6; }
.summary-counter.warning strong { color: #ffe7ad; }
.summary-counter.success strong { color: #c8f2d9; }
.summary-review-notices { display: grid; padding: 8px 11px; }
.summary-review-notices button { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; border-radius: 8px; padding: 8px; color: var(--ink); background: transparent; text-align: left; }
.summary-review-notices button:hover { background: #fff7e8; }
.summary-review-notices button > span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: #9a6814; background: #ffedbd; font-size: 8px; }
.summary-review-notices strong, .summary-review-notices small { display: block; }
.summary-review-notices strong { font-size: 8px; }
.summary-review-notices small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.summary-review-notices button > b { color: var(--teal-700); }
.summary-top-three { border-top: 1px solid var(--line); padding: 12px 17px 15px; }
.summary-top-three > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.summary-top-three > div:first-child > strong { color: var(--teal-950); font-size: 9px; }
.summary-distribution-title { margin-top: 24px; }
.summary-donut-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.summary-donut-card { overflow: hidden; }
.summary-donut-body { min-height: 205px; display: grid; grid-template-columns: minmax(125px, .9fr) minmax(135px, 1.1fr); align-items: center; gap: 12px; padding: 15px 18px 19px; }
.summary-donut { position: relative; width: min(150px, 100%); aspect-ratio: 1; display: grid; place-items: center; margin: auto; border-radius: 50%; background: conic-gradient(var(--donut)); }
.summary-donut::after { content: ''; position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #edf2f1; }
.summary-donut > div { position: relative; z-index: 1; text-align: center; }
.summary-donut strong, .summary-donut small { display: block; }
.summary-donut strong { color: var(--teal-950); font-size: 21px; }
.summary-donut small { margin-top: 2px; color: var(--muted); font-size: 7px; text-transform: uppercase; }
.summary-donut-legend { display: grid; gap: 8px; }
.summary-donut-legend > div:not(.donut-empty) { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.summary-donut-legend > div > span { width: 8px; height: 8px; border-radius: 50%; background: var(--legend-color); }
.summary-donut-legend p { min-width: 0; margin: 0; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.summary-donut-legend strong { color: var(--teal-950); font-size: 9px; }
.donut-empty { color: var(--muted); font-size: 8px; line-height: 1.5; }
.cockpit-section-title { align-items: center; margin-top: 24px; }
.cockpit-section-title:first-of-type { margin-top: 2px; }
.cockpit-section-title > small { color: var(--muted); font-size: 8px; }
.cockpit-gauges { margin-bottom: 8px; }
.cockpit-alert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cockpit-alert-card { position: relative; min-height: 116px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); border-radius: 13px; padding: 14px; color: var(--ink); background: #fff; text-align: left; transition: transform .16s ease, box-shadow .16s ease; }
.cockpit-alert-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 13px 0 0 13px; background: var(--teal-700); }
.cockpit-alert-card:hover { transform: translateY(-2px); box-shadow: 0 9px 24px rgba(16,53,55,.09); }
.cockpit-alert-card.danger::before { background: var(--red); }
.cockpit-alert-card.warning::before { background: var(--orange); }
.cockpit-alert-card.success::before { background: var(--green); }
.cockpit-alert-card > span { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; }
.cockpit-alert-card > strong { margin-top: 10px; color: var(--teal-950); font-size: 23px; line-height: 1; }
.cockpit-alert-card > small { margin-top: 6px; color: var(--muted); font-size: 8px; }
.cockpit-detail-button { margin-top: auto; border: 0; padding: 10px 0 0; color: var(--teal-700); background: transparent; font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
.cockpit-detail-button:hover { color: var(--teal-950); text-decoration: underline; text-underline-offset: 3px; }
.cockpit-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr); gap: 14px; margin-top: 22px; }
.cockpit-analysis-balanced { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.objective-list { display: grid; gap: 20px; }
.objective-row { display: grid; gap: 8px; }
.objective-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.objective-row-head strong { color: var(--ink); font-size: 9px; }
.objective-row-head > span { color: var(--teal-950); font-size: 11px; font-weight: 800; }
.objective-row-head small { color: var(--muted); font-size: 8px; font-weight: 600; }
.objective-track { position: relative; height: 10px; border-radius: 20px; background: #e9efee; }
.objective-value { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--teal-700); }
.objective-value.blue { background: #3c7fb0; }
.objective-value.green { background: var(--green); }
.objective-value.gold { background: var(--gold); }
.objective-track i { position: absolute; top: -4px; width: 2px; height: 18px; border-radius: 2px; background: var(--teal-950); transform: translateX(-1px); }
.cockpit-insights { overflow: hidden; }
.panel.top-signaled-panel { overflow: hidden; border-color: #bfd4de; color: var(--ink); background: #fff; box-shadow: 0 10px 28px rgba(18,59,83,.09); }
.panel.priorities-panel { overflow: hidden; border-color: #d6cce4; color: var(--ink); background: #fff; box-shadow: 0 10px 28px rgba(75,53,111,.09); }
.top-signaled-panel .panel-header { border-bottom-color: #174e6b; background: linear-gradient(110deg,#123b53,#1a5973); }
.priorities-panel .panel-header { border-bottom-color: #75559c; background: linear-gradient(110deg,#50396f,#75559c); }
.top-signaled-panel .panel-header h2,.priorities-panel .panel-header h2 { color: #fff; }
.top-signaled-panel .panel-header p { color: #c9e0e9; }
.priorities-panel .panel-header p { color: #e8ddf2; }
.top-signaled-panel .panel-link { color: #e7f4f8; }
.top-signaled-panel .ranking-person-button { color: var(--teal-950); }
.top-signaled-panel .top-signaled-ranking li > span { color: #4f390e; background: #f3c96b; }
.top-signaled-panel .top-signaled-ranking li > b { color: #593d08; background: #ffe3a0; }
.priorities-panel .priority-list button { color: var(--ink); }
.priorities-panel .priority-list button:hover { background: #f5f0fa; }
.priorities-panel .priority-list button small { color: var(--muted); }
.priorities-panel .priority-list button > b { color: #75559c; }
.priorities-panel .all-clear { color: var(--green); }
.insight-block + .insight-block { border-top: 1px solid var(--line); }
.insight-ranking { padding: 4px 18px 17px; }
.insight-ranking .top-signaled-ranking { gap: 8px; }
.insight-ranking .top-signaled-ranking li { grid-template-columns: 23px minmax(0, 1fr) auto; font-size: 9px; }
.insight-ranking .top-signaled-ranking li > span { width: 22px; height: 22px; }
.quality-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 4px 0 13px; border-radius: 12px; padding: 15px 18px; color: #fff; background: linear-gradient(110deg,#103f58,#176a78); box-shadow: 0 8px 22px rgba(15,63,78,.12); }
.quality-section-heading span { display: block; color: #acd7d9; font-size: 8px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.quality-section-heading h2 { margin: 4px 0 0; color: #fff; font-size: 17px; }
.quality-section-heading > strong { border: 1px solid rgba(255,255,255,.28); border-radius: 18px; padding: 8px 12px; color: #fff; font-size: 8px; font-weight: 750; text-transform: capitalize; }
.quality-overview-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }
.quality-metric-card { --quality-color:#397cb0; --quality-soft:#eaf3fa; position: relative; overflow: hidden; min-height: 205px; border: 1px solid #dce7e8; border-top: 4px solid var(--quality-color); border-radius: 14px; padding: 17px 18px 16px; background: #fff; box-shadow: 0 8px 24px rgba(20,58,65,.07); }
.quality-metric-card.green { --quality-color:#159673; --quality-soft:#e5f5ef; }
.quality-metric-card.empty-success { border-color:#b9dfd1; background:linear-gradient(145deg,#fff,#f0faf6); }
.quality-metric-card.orange { --quality-color:#da8a26; --quality-soft:#fff1dc; }
.quality-metric-card.red { --quality-color:#d54b4b; --quality-soft:#fce8e7; }
.quality-metric-card.teal { --quality-color:#16838a; --quality-soft:#e3f3f3; }
.quality-metric-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quality-metric-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--quality-color); background: var(--quality-soft); font-size: 16px; font-weight: 900; }
.quality-metric-status { border-radius: 14px; padding: 5px 8px; color: var(--quality-color); background: var(--quality-soft); font-size: 7px; font-weight: 850; }
.quality-metric-label { display: block; margin-top: 16px; color: #64777a; font-size: 8px; font-weight: 850; letter-spacing: .35px; text-transform: uppercase; }
.quality-metric-value { display: block; margin-top: 5px; color: #073e46; font-size: 31px; line-height: 1.08; letter-spacing: -1.2px; }
.quality-metric-detail { min-height: 25px; margin-top: 8px; color: #38575c; font-size: 9px; line-height: 1.45; }
.quality-metric-facts { margin-top: 9px; border-top: 1px solid #e4ecec; padding-top: 9px; color: #748689; font-size: 8px; line-height: 1.4; }
.quality-progress { position: relative; height: 7px; margin-top: 12px; border-radius: 10px; background: #e8eeee; }
.quality-progress span { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: var(--quality-color); }
.quality-progress i { position: absolute; top: -4px; width: 2px; height: 15px; border-radius: 2px; background: #073e46; transform: translateX(-1px); }
.quality-insights-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 14px; margin-bottom: 18px; }
.quality-insight-panel { overflow: hidden; border: 1px solid #dbe6e6; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(20,58,65,.06); }
.quality-insight-panel header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px; color: #fff; background: linear-gradient(110deg,#126b70,#198a80); }
.quality-insight-panel.ranking header { background: linear-gradient(110deg,#244f75,#376e96); }
.quality-insight-panel header span { display: block; color: #bfe2df; font-size: 7px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.quality-insight-panel.ranking header span { color: #c8dce9; }
.quality-insight-panel header h3 { margin: 4px 0 0; color: #fff; font-size: 13px; }
.quality-insight-panel header > strong { font-size: 25px; }
.quality-insight-panel header > small { max-width: 145px; color: #dbe9f2; font-size: 7px; line-height: 1.35; text-align: right; }
.quality-insight-body { min-height: 105px; padding: 15px 17px; }
.quality-recurrence-count { display: flex; align-items: center; gap: 12px; }
.quality-recurrence-count strong { color: #126b70; font-size: 27px; }
.quality-recurrence-count span { max-width: 170px; color: #435f63; font-size: 9px; line-height: 1.4; }
.quality-recurrence-track { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 10px; background: #e7efee; }
.quality-recurrence-track span { display: block; height: 100%; border-radius: inherit; background: #159673; }
.quality-insight-body p { margin: 10px 0 0; color: #718386; font-size: 8px; line-height: 1.45; }
.quality-insight-panel .top-signaled-ranking { gap: 9px; }
.quality-insight-panel .top-signaled-ranking li { grid-template-columns: 25px minmax(0,1fr) auto; font-size: 9px; }
.quality-insight-panel .top-signaled-ranking li > span { width: 24px; height: 24px; background: #376e96; }
.quality-insight-panel .ranking-person-button { color: #183d5a; }
.operators-title-banner { position: relative; overflow: hidden; margin-bottom: 18px; border: 1px solid #174f69; border-radius: 17px; padding: 4px; background: linear-gradient(120deg,#123d57,#1c6176 62%,#23837f); box-shadow: 0 11px 30px rgba(18,61,87,.17); }
.operators-title-banner::after { content:''; position:absolute; right:70px; bottom:-80px; width:210px; height:210px; border:34px solid rgba(255,255,255,.055); border-radius:50%; pointer-events:none; }
.operators-title-banner .page-heading { position: relative; z-index: 1; align-items: center; margin: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; padding: 19px 20px; }
.operators-title-banner .eyebrow { color: #f3cd78; }
.operators-title-banner .page-heading h1 { color: #fff; font-size: clamp(23px,2.4vw,32px); }
.operators-title-banner .page-heading p { color: #d1e4e7; }
.operators-title-banner .secondary-button { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.1); }
.operators-title-banner .secondary-button:hover { background: rgba(255,255,255,.18); }
.operators-title-banner .primary-button { border-color: #e7b94f; color: #183d57; background: #f2c763; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.operators-title-banner .primary-button:hover { background: #ffda7d; }
.module-title-banner { position:relative; overflow:hidden; margin-bottom:18px; border-radius:17px; padding:4px; box-shadow:0 11px 30px rgba(18,61,87,.16); }
.module-title-banner::after { content:''; position:absolute; right:65px; bottom:-85px; width:220px; height:220px; border:35px solid rgba(255,255,255,.055); border-radius:50%; pointer-events:none; }
.module-title-banner .page-heading { position:relative; z-index:1; align-items:center; margin:0; border:1px solid rgba(255,255,255,.15); border-radius:13px; padding:19px 20px; }
.module-title-banner .page-heading h1 { color:#fff; font-size:clamp(23px,2.4vw,32px); }
.module-title-banner .page-heading p { color:rgba(255,255,255,.79); }
.module-title-banner .secondary-button { border-color:rgba(255,255,255,.42); color:#fff; background:rgba(255,255,255,.1); }
.module-title-banner .secondary-button:hover { background:rgba(255,255,255,.18); }
.module-title-banner .primary-button { color:#173b4d; background:#f2c763; border-color:#e7b94f; box-shadow:0 6px 18px rgba(0,0,0,.16); }
.module-title-banner .primary-button:hover { background:#ffda7d; }
.recovery-title-banner { border:1px solid #176b73; background:linear-gradient(120deg,#0b4d55,#11747a 62%,#15958a); }
.recovery-title-banner .eyebrow { color:#ffd77d; }
.quality-title-banner { border:1px solid #315f83; background:linear-gradient(120deg,#173f62,#276589 62%,#32818c); }
.quality-title-banner .eyebrow { color:#f3cd78; }
.operators-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin: 3px 0 13px; border-left:5px solid #e4b74e; border-radius:12px; padding:13px 16px; background:#fff; box-shadow:0 6px 20px rgba(22,57,69,.06); }
.operators-section-heading span { display:block; color:#a07318; font-size:8px; font-weight:850; letter-spacing:.8px; text-transform:uppercase; }
.operators-section-heading h2 { margin:4px 0 0; color:#103f58; font-size:16px; }
.operators-section-heading > strong { border-radius:18px; padding:7px 11px; color:#176a70; background:#e6f3f1; font-size:8px; }
.operator-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.operator-metric-card { --operator-color:#2f668b; --operator-soft:#e8f0f6; position:relative; overflow:hidden; min-height:210px; border:1px solid #dce6e8; border-top:4px solid var(--operator-color); border-radius:14px; padding:17px 18px 16px; background:#fff; box-shadow:0 8px 24px rgba(20,58,65,.07); }
.operator-metric-card.green { --operator-color:#159673; --operator-soft:#e4f4ee; }
.operator-metric-card.orange { --operator-color:#d98324; --operator-soft:#fff0dc; }
.operator-metric-card.gold { --operator-color:#b98725; --operator-soft:#fff3d6; }
.operator-metric-card.red { --operator-color:#d54b4b; --operator-soft:#fce8e7; }
.operator-metric-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.operator-metric-icon { width:35px; height:35px; display:grid; place-items:center; border-radius:10px; color:var(--operator-color); background:var(--operator-soft); font-size:16px; font-weight:900; }
.operator-metric-status { border-radius:14px; padding:5px 8px; color:var(--operator-color); background:var(--operator-soft); font-size:7px; font-weight:850; }
.operator-metric-label { display:block; margin-top:16px; color:#63777b; font-size:8px; font-weight:850; letter-spacing:.35px; text-transform:uppercase; }
.operator-metric-value { display:block; margin-top:5px; color:#073e46; font-size:30px; line-height:1.08; letter-spacing:-1px; }
.operator-metric-card p { min-height:25px; margin:8px 0 0; color:#39585d; font-size:9px; line-height:1.45; }
.operator-metric-facts { margin-top:9px; border-top:1px solid #e4ecec; padding-top:9px; color:#738689; font-size:8px; line-height:1.4; }
.operator-progress { height:7px; margin-top:12px; overflow:hidden; border-radius:10px; background:#e8eeee; }
.operator-progress span { display:block; height:100%; min-width:3px; border-radius:inherit; background:var(--operator-color); }
.priority-list { display: grid; padding: 0 12px 13px; }
.priority-list button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 0; border-radius: 9px; padding: 8px; color: var(--ink); background: transparent; text-align: left; }
.priority-list button:hover { background: var(--red-soft); }
.priority-list button > span { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--red); font-size: 9px; font-weight: 900; }
.priority-list button strong, .priority-list button small { display: block; }
.priority-list button strong { font-size: 8px; }
.priority-list button small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.priority-list button > b { color: var(--teal-700); }
.all-clear { display: flex; align-items: center; gap: 8px; padding: 14px; color: var(--green); font-size: 9px; }
.detail-section-title { margin-top: 25px; }
.operation-detail { overflow: hidden; }
.operation-tabs-bar { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-right: 12px; background: #f8faf9; }
.operation-tabs { min-width: 0; display: flex; flex: 1; gap: 4px; overflow-x: auto; padding: 10px 12px 0; }
.operation-tabs button { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px 11px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 750; }
.operation-tabs button:hover { color: var(--teal-700); }
.operation-tabs button.active { border-bottom-color: var(--gold); color: var(--teal-950); }
.operation-entry-button { min-height: 34px; flex: 0 0 auto; padding: 0 13px; font-size: 8px; }
.operation-tab-content .data-table { min-width: 780px; }
.operation-tab-content .empty-state { background: #fff; }
.operators-table { min-width: 1050px; }
.operator-observation { max-width: 280px; color: var(--muted); line-height: 1.45; }
.primary-indicators { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.quality-indicators { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.indicator-card { position: relative; overflow: hidden; min-height: 124px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); border-radius: 13px; padding: 15px; background: #fff; box-shadow: 0 4px 16px rgba(16,53,55,.035); }
.indicator-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--teal-700); }
.indicator-card > span { position: relative; z-index: 1; min-height: 27px; color: #5f7476; font-size: 8px; font-weight: 800; line-height: 1.35; letter-spacing: .35px; text-transform: uppercase; }
.indicator-card strong { position: relative; z-index: 1; display: block; margin: 11px 0 5px; color: var(--teal-950); font-size: clamp(17px, 1.7vw, 24px); line-height: 1.05; letter-spacing: -.5px; }
.indicator-card small { position: relative; z-index: 1; color: var(--muted); font-size: 8px; line-height: 1.35; }
.indicator-card.success::before { background: var(--green); }
.indicator-card.danger::before { background: var(--red); }
.indicator-card.warning::before { background: var(--orange); }
.indicator-card.success { background: linear-gradient(155deg, #fff 68%, var(--green-soft)); }
.indicator-card.danger { background: linear-gradient(155deg, #fff 68%, var(--red-soft)); }
.indicator-card.warning { background: linear-gradient(155deg, #fff 68%, var(--orange-soft)); }
.quality-indicators .indicator-card { min-height: 134px; }
.quality-indicators .indicator-card > span { min-height: 39px; }
.quality-indicators .indicator-card strong { font-size: clamp(15px, 1.45vw, 21px); overflow-wrap: anywhere; }
.alerts-panel { margin-top: 22px; overflow: hidden; }
.alerts-table { width: 100%; border-collapse: collapse; }
.alerts-table th { padding: 11px 15px; color: #fff; background: #174f77; font-size: 9px; letter-spacing: .35px; text-align: left; text-transform: uppercase; }
.alerts-table td { padding: 11px 15px; border-top: 1px solid var(--line); font-size: 10px; }
.alerts-table th:nth-child(2), .alerts-table th:nth-child(3), .alerts-table th:nth-child(4), .alerts-table td:nth-child(2), .alerts-table td:nth-child(3), .alerts-table td:nth-child(4) { text-align: center; }
.alert-status { display: inline-flex; justify-content: center; min-width: 78px; border-radius: 20px; padding: 5px 9px; font-size: 8px; font-weight: 900; }
.alert-status.alert { color: #a62525; background: #f6cccc; }
.alert-status.ok { color: var(--green); background: var(--green-soft); }
.dashboard-investment-panel { margin-top: 18px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .85fr); gap: 18px; margin-bottom: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 4px 18px rgba(16,53,55,.035); }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px 14px; border-bottom: 1px solid #edf2f1; }
.panel-header h2 { margin: 0; color: var(--teal-950); font-size: 14px; }
.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.panel-link { border: 0; color: var(--teal-700); background: transparent; font-size: 10px; font-weight: 700; }
.panel-body { padding: 18px; }
.dual-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.metric-block { padding: 14px; border-radius: 12px; background: #f8faf9; }
.metric-block.accent { color: #fff; background: linear-gradient(145deg, var(--teal-800), var(--teal-950)); }
.metric-block label { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.metric-block.accent label { color: #aed0cd; }
.metric-block strong { display: block; margin-top: 7px; font-size: 21px; }
.metric-block small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.metric-block.accent small { color: #bdd5d3; }
.progress-track { height: 7px; overflow: hidden; margin-top: 11px; border-radius: 10px; background: #dce8e6; }
.progress-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal-700), #42a18c); }
.accent .progress-track { background: rgba(255,255,255,.16); }
.accent .progress-track > span { background: var(--gold); }
.stage-row { display: grid; grid-template-columns: 135px 1fr 34px; align-items: center; gap: 12px; margin-top: 15px; }
.stage-row label { color: var(--muted); font-size: 10px; }
.stage-row strong { font-size: 10px; text-align: right; }
.stage-bar { height: 8px; overflow: hidden; border-radius: 8px; background: #edf2f1; }
.stage-bar span { display: block; height: 100%; border-radius: inherit; background: var(--teal-700); }
.stage-bar span.gold { background: var(--gold); }
.stage-bar span.orange { background: var(--orange); }

.alert-list { display: grid; gap: 10px; }
.alert-item { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid #edf1f0; border-radius: 11px; }
.alert-symbol { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--red); background: var(--red-soft); font-weight: 800; }
.alert-symbol.warning { color: var(--orange); background: var(--orange-soft); }
.alert-symbol.info { color: var(--blue); background: var(--blue-soft); }
.alert-item strong { display: block; font-size: 10px; }
.alert-item p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.35; }
.alert-value { color: var(--red); font-size: 11px; font-weight: 800; }
.alert-value.warning { color: var(--orange); }

.transition-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 20px; }
.transition-step { position: relative; padding: 0 18px; border-right: 1px solid var(--line); }
.transition-step:first-child { padding-left: 0; }
.transition-step:last-child { padding-right: 0; border-right: 0; }
.transition-step span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.transition-step strong { display: block; margin-top: 6px; color: var(--teal-950); font-size: 24px; }
.transition-step small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }

.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.quality-toolbar > label { color: #536b6d; font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.quality-person-row { cursor: pointer; }
.quality-person-row:hover { background: #f0f8f6; }
.quality-person-link { border: 0; padding: 0; color: var(--teal-700); background: transparent; font: inherit; font-weight: 850; text-align: left; cursor: pointer; }
.quality-person-link:hover { color: var(--teal-950); text-decoration: underline; text-underline-offset: 3px; }
.filter-input, .filter-select { height: 38px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; font-size: 11px; }
.filter-input { min-width: 260px; padding: 0 12px; }
.filter-select { padding: 0 30px 0 11px; }
.toolbar-spacer { flex: 1; }
.result-count { color: var(--muted); font-size: 10px; }

.table-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.data-table th { padding: 12px 14px; color: #718384; background: #f8faf9; font-size: 9px; font-weight: 800; letter-spacing: .45px; text-align: left; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 13px 14px; border-top: 1px solid #edf2f1; font-size: 10px; vertical-align: middle; }
.data-table tbody tr { transition: .15s ease; }
.data-table tbody tr:hover { background: var(--teal-50); }
.data-table tbody tr.clickable { cursor: pointer; }
.quality-register .data-table { min-width: 2050px; }
.quality-register .quality-text { min-width: 230px; max-width: 320px; line-height: 1.45; white-space: normal; }
.quality-register .quality-local { width: auto; min-width: 34px; max-width: 150px; padding: 0 9px; white-space: nowrap; }
.recovery-register .data-table { min-width: 2450px; }
.recovery-register .recovery-operator { min-width: 220px; font-weight: 700; }
.recovery-register .recovery-observation { min-width: 220px; max-width: 320px; line-height: 1.45; white-space: normal; }
.table-title { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.local-token { width: 31px; height: 31px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #fff; background: var(--teal-800); font-size: 10px; font-weight: 800; }
.table-title strong { display: block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.table-title small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini-progress { min-width: 105px; display: flex; align-items: center; gap: 8px; }
.mini-progress .progress-track { width: 72px; margin: 0; height: 6px; }
.mini-progress strong { font-size: 9px; }
.badge { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border-radius: 20px; color: var(--muted); background: #edf2f1; font-size: 8px; font-weight: 800; white-space: nowrap; }
.badge.success { color: var(--green); background: var(--green-soft); }
.badge.warning { color: #b45e2b; background: var(--orange-soft); }
.badge.danger { color: var(--red); background: var(--red-soft); }
.badge.info { color: var(--blue); background: var(--blue-soft); }
.badge.gold { color: #8f691f; background: var(--gold-soft); }
.empty-state { padding: 58px 20px; text-align: center; }
.empty-state-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 17px; color: var(--teal-700); background: var(--teal-50); font-size: 23px; }
.empty-state h3 { margin: 0; color: var(--teal-950); font-size: 15px; }
.empty-state p { max-width: 420px; margin: 8px auto 16px; color: var(--muted); font-size: 10px; line-height: 1.55; }

.kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-column { min-height: 520px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #eef3f2; }
.kanban-header { display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 12px; }
.kanban-header strong { font-size: 10px; }
.kanban-header span { min-width: 23px; padding: 3px 6px; border-radius: 10px; color: var(--muted); background: #fff; font-size: 9px; text-align: center; }
.kanban-list { display: grid; gap: 9px; }
.kanban-card { border: 1px solid #dfe8e6; border-radius: 11px; padding: 12px; background: #fff; box-shadow: 0 3px 10px rgba(16,53,55,.04); cursor: pointer; }
.kanban-card:hover { border-color: #aecbc7; transform: translateY(-1px); }
.kanban-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kanban-card-top strong { color: var(--teal-800); font-size: 9px; }
.kanban-card h3 { margin: 9px 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.kanban-card p { margin: 0; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.kanban-card .progress-track { margin-top: 11px; height: 5px; }
.kanban-card-foot { display: flex; justify-content: space-between; margin-top: 8px; color: var(--muted); font-size: 8px; }

.split-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 30px; min-height: 210px; }
.donut { --value: 50; width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal-700) calc(var(--value) * 1%), #e8efed 0); }
.donut::before { content: ''; width: 108px; height: 108px; border-radius: 50%; background: #fff; }
.donut-label { position: absolute; text-align: center; }
.donut-label strong { display: block; color: var(--teal-950); font-size: 25px; }
.donut-label small { color: var(--muted); font-size: 8px; }
.donut-holder { position: relative; display: grid; place-items: center; }
.legend { display: grid; gap: 11px; }
.legend-row { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; font-size: 9px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-700); }
.legend-dot.gray { background: #dbe5e3; }
.legend-dot.orange { background: var(--orange); }

.drawer-backdrop { position: fixed; inset: 0; z-index: 49; visibility: hidden; opacity: 0; background: rgba(4, 31, 34, .32); backdrop-filter: blur(2px); transition: .22s ease; }
.drawer-backdrop.open { visibility: visible; opacity: 1; }
.detail-drawer { position: fixed; top: 0; right: 0; z-index: 50; width: min(720px, 94vw); height: 100vh; overflow-y: auto; padding: 28px; background: #f7faf9; box-shadow: -20px 0 50px rgba(4,31,34,.15); transform: translateX(102%); transition: transform .25s ease; }
.detail-drawer.open { transform: translateX(0); }
.drawer-close { position: absolute; top: 16px; right: 18px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; font-size: 20px; }
.drawer-hero { margin: -28px -28px 20px; padding: 30px 60px 24px 28px; color: #fff; background: linear-gradient(145deg, var(--teal-800), var(--teal-950)); }
.drawer-hero .eyebrow { color: #9dc7c3; }
.drawer-hero h2 { margin: 0; font-size: 24px; }
.drawer-hero p { margin: 7px 0 0; color: #c5dcda; font-size: 10px; }
.drawer-period { display: inline-flex; margin-top: 10px; padding: 6px 9px; border-radius: 7px; color: #d8ece9; background: rgba(255,255,255,.09); font-size: 9px; font-weight: 700; }
.drawer-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 18px; }
.drawer-kpi { padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.07); }
.drawer-kpi span { display: block; color: #a8ccca; font-size: 8px; text-transform: uppercase; }
.drawer-kpi strong { display: block; margin-top: 5px; font-size: 13px; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.drawer-actions .secondary-button { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.1); }
.drawer-actions .secondary-button:hover { background: rgba(255,255,255,.18); }
.drawer-actions .primary-button { color: var(--teal-950); background: #fff; box-shadow: none; }
.drawer-actions .receipt-button { border-color: #e7bd56; color: #173f48; background: #f4c65a; }
.drawer-actions .receipt-button:hover { background: #ffd778; }
.drawer-section { margin-top: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.drawer-section h3 { margin: 0; padding: 14px 16px; border-bottom: 1px solid #edf2f1; color: var(--teal-950); font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 6px 16px 14px; }
.detail-item { padding: 10px 0; border-bottom: 1px solid #f0f3f2; }
.detail-item:nth-child(odd) { padding-right: 18px; }
.detail-item label { display: block; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.detail-item strong { display: block; margin-top: 4px; font-size: 10px; line-height: 1.35; }
.milestone-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 14px 16px 16px; }
.milestone { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 9px; background: #f7faf9; font-size: 9px; }
.milestone-dot { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--red); background: var(--red-soft); font-size: 9px; }
.milestone.done .milestone-dot { color: var(--green); background: var(--green-soft); }
.milestone.pending .milestone-dot { color: var(--orange); background: var(--orange-soft); }
.drawer-note { margin: 0; padding: 14px 16px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.lease-contract-panel { padding: 15px 16px 16px; }
.lease-loading { color: var(--muted); font-size: 10px; }
.lease-empty { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px dashed #bfd0ce; border-radius: 10px; background: #f8fbfa; }
.lease-empty > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: var(--teal-700); background: var(--teal-50); font-size: 18px; }
.lease-empty strong, .lease-document strong { display: block; color: var(--teal-950); font-size: 11px; }
.lease-empty small, .lease-document small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.lease-document { display: flex; align-items: center; gap: 13px; padding: 13px; border: 1px solid #cfe1de; border-radius: 10px; background: #f4faf8; }
.lease-document-icon { width: 46px; height: 52px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #fff; background: linear-gradient(145deg, var(--teal-700), var(--teal-950)); font-size: 10px; font-weight: 850; }
.lease-document .badge { display: inline-flex; margin-bottom: 7px; }
.lease-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lease-actions .primary-button, .lease-actions .secondary-button, .lease-delete-button { min-height: 36px; }
.lease-delete-button { border: 1px solid #efcaca; border-radius: 9px; padding: 0 12px; color: #a83c3c; background: #fff5f5; font-size: 9px; font-weight: 800; }
.lease-delete-button:hover { background: #fbe3e3; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 80; visibility: hidden; opacity: 0; transform: translateY(8px); padding: 11px 15px; border-radius: 10px; color: #fff; background: var(--teal-950); box-shadow: var(--shadow); font-size: 10px; transition: .2s ease; }
.toast.open { visibility: visible; opacity: 1; transform: none; }

.modal-backdrop { position: fixed; inset: 0; z-index: 59; visibility: hidden; opacity: 0; background: rgba(4,31,34,.42); backdrop-filter: blur(3px); transition: .2s ease; }
.modal-backdrop.open { visibility: visible; opacity: 1; }
.app-modal { position: fixed; top: 50%; left: 50%; z-index: 60; width: min(620px, calc(100vw - 30px)); max-height: calc(100vh - 40px); overflow-y: auto; visibility: hidden; opacity: 0; border-radius: 17px; background: #fff; box-shadow: 0 24px 70px rgba(4,31,34,.24); transform: translate(-50%, -47%) scale(.98); transition: .2s ease; }
.app-modal.quality-modal { width: min(860px, calc(100vw - 30px)); }
.app-modal.recovery-modal { width: min(900px, calc(100vw - 30px)); }
.app-modal.open { visibility: visible; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal-header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 21px 22px 17px; border-bottom: 1px solid var(--line); }
.modal-header .eyebrow { margin-bottom: 5px; }
.modal-header h2 { margin: 0; color: var(--teal-950); font-size: 19px; }
.modal-close { position: static; flex: 0 0 auto; }
.modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 20px 22px; }
.form-field { display: grid; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { color: #536b6d; font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; outline: none; color: var(--ink); background: #fbfcfc; font-size: 11px; }
.form-field input, .form-field select { height: 40px; padding: 0 11px; }
.form-field textarea { min-height: 84px; resize: vertical; padding: 10px 11px; line-height: 1.45; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--teal-700); box-shadow: 0 0 0 3px var(--teal-50); }
.form-field input[readonly] { color: #647778; background: #eef3f2; cursor: not-allowed; }
.field-help { color: var(--muted); font-size: 8px; line-height: 1.4; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 20px; border-top: 1px solid #edf2f1; }

.user-admin-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.user-admin-summary article { display: flex; align-items: center; gap: 14px; min-height: 94px; border: 1px solid #dce8e6; border-radius: 15px; padding: 17px; background: linear-gradient(145deg,#fff,#f4f9f8); box-shadow: 0 6px 20px rgba(16,53,55,.05); }
.user-admin-summary article > span { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: #fff; background: linear-gradient(145deg,var(--teal-700),var(--teal-950)); font-size: 21px; }
.user-admin-summary strong,.user-admin-summary small { display: block; }
.user-admin-summary strong { color: var(--teal-950); font-size: 25px; line-height: 1; }
.user-admin-summary small { margin-top: 6px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.admin-security-notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; border: 1px solid #efdca8; border-left: 5px solid var(--gold); border-radius: 13px; padding: 13px 15px; color: #5c471c; background: #fff9e9; }
.admin-security-notice > span { width: 25px; height: 25px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #b47c19; font-weight: 900; }
.admin-security-notice strong { display: block; font-size: 10px; }
.admin-security-notice p { margin: 4px 0 0; font-size: 9px; line-height: 1.5; }
.user-admin-panel { overflow: hidden; }
.users-table { min-width: 940px; }
.user-identity { display: flex; align-items: center; gap: 10px; }
.user-identity > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #fff; background: var(--teal-800); font-size: 10px; font-weight: 900; }
.user-identity strong,.user-identity small { display: block; }
.user-identity small { margin-top: 3px; color: var(--muted); }
.role-chip { display: inline-flex; border-radius: 20px; padding: 5px 9px; color: #5a420e; background: #fff0c9; font-size: 8px; font-weight: 850; }
.role-chip.facilityManager { color: #0e6658; background: #ddf3ed; }
.role-chip.daf { color: #345a86; background: #e3eef9; }
.table-action-button { border: 1px solid #cbdcda; border-radius: 8px; padding: 6px 9px; color: var(--teal-700); background: #fff; font: inherit; font-size: 8px; font-weight: 800; cursor: pointer; }
.table-action-button:hover { border-color: var(--teal-700); background: #eef7f5; }
.user-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.table-action-button.suspend { border-color: #efc9c9; color: #b83232; background: #fff8f8; }
.table-action-button.activate { border-color: #bfe2d8; color: var(--green); background: #f4fbf9; }
.users-loading { padding: 24px !important; color: var(--muted); text-align: center; }
.user-role-title { margin-top: 22px; }
.user-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.user-role-grid article { position: relative; overflow: hidden; min-height: 145px; border: 1px solid #dce8e6; border-radius: 15px; padding: 18px; background: #fff; box-shadow: 0 6px 20px rgba(16,53,55,.045); }
.user-role-grid article::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--teal-700); }
.user-role-grid article:nth-child(2)::before { background: var(--green); }
.user-role-grid article:nth-child(3)::before { background: #4b83b6; }
.user-role-grid article > span { color: var(--gold); font-size: 11px; font-weight: 900; }
.user-role-grid h3 { margin: 13px 0 7px; color: var(--teal-950); font-size: 14px; }
.user-role-grid p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.form-security-banner { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #cfe1de; border-radius: 11px; padding: 12px; color: var(--teal-950); background: #eff8f6; }
.form-security-banner > span { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: var(--teal-700); }
.form-security-banner strong,.form-security-banner small { display: block; }
.form-security-banner small { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.user-audit-panel { overflow: hidden; margin-top: 18px; }
.user-audit-list { max-height: 360px; overflow-y: auto; }
.user-audit-list article { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 11px 18px; border-top: 1px solid #edf2f1; }
.user-audit-list article:first-child { border-top: 0; }
.audit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-700); box-shadow: 0 0 0 4px #e6f3f0; }
.user-audit-list strong,.user-audit-list small { display: block; }
.user-audit-list strong { color: var(--ink); font-size: 9px; }
.user-audit-list small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.user-audit-list time { color: #708385; font-size: 8px; white-space: nowrap; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 78px 1fr; }
  .sidebar { padding-inline: 10px; }
  .sidebar-collapse-button { display: none; }
  .brand { justify-content: center; padding-inline: 0; }
  .brand > div:last-child, .workspace-label, .nav-item > span:not(.nav-icon), .settings-link:not(span), .sidebar-card { display: none; }
  .nav-item, .settings-link { justify-content: center; padding: 0; }
  .nav-icon { width: auto; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .module-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .quality-overview-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .operator-overview-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .recovery-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gauge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-alert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-analysis-grid { grid-template-columns: 1fr; }
  .user-admin-summary,.user-role-grid { grid-template-columns: 1fr; }
  .summary-hero-grid { grid-template-columns: minmax(190px, .65fr) minmax(0, 1.35fr); }
  .summary-review-panel { grid-column: 1 / -1; }
  .summary-donut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .primary-indicators { grid-template-columns: repeat(3, 1fr); }
  .quality-indicators { grid-template-columns: repeat(4, 1fr); }
  .recovery-search-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .recovery-search-field { grid-column: span 2; }
}

@media (max-width: 820px) {
  .auth-gateway { grid-template-columns: 1fr; }
  .auth-showcase { display: none; }
  .auth-workspace { min-height: 100vh; padding: 30px 20px; }
  .mobile-auth-logos { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
  .mobile-auth-logos img:first-child { width: 62px; height: 62px; padding: 7px; border-radius: 14px; background: var(--teal-950); object-fit: contain; }
  .mobile-auth-logos img:last-child { width: 70px; height: 70px; object-fit: contain; }
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; width: 250px; padding: 22px 16px 16px; transform: translateX(-102%); transition: .22s ease; }
  .sidebar.open { transform: none; box-shadow: 20px 0 50px rgba(4,31,34,.22); }
  .brand { justify-content: flex-start; padding-inline: 8px; }
  .brand > div:last-child, .workspace-label, .nav-item > span:not(.nav-icon), .sidebar-card { display: block; }
  .nav-item { justify-content: flex-start; padding: 0 12px; }
  .nav-count { display: inline-block !important; }
  .settings-link { justify-content: flex-start; padding: 0 12px; }
  .menu-button { display: grid !important; }
  .topbar { padding: 0 15px; gap: 10px; }
  .global-search { width: auto; flex: 1; }
  .global-search kbd, .period-select, .user-menu > div:not(.avatar), .user-menu > span { display: none; }
  #appView { padding: 20px 15px; }
  .dashboard-grid, .split-grid { grid-template-columns: 1fr; }
  .dashboard-filter { align-items: flex-start; flex-direction: column; }
  .period-controls { justify-content: flex-start; width: 100%; }
  .transition-strip { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .transition-step:nth-child(2) { border-right: 0; }
  .kanban { grid-template-columns: repeat(4, 260px); }
  .summary-hero-grid { grid-template-columns: 1fr; }
  .summary-review-panel { grid-column: auto; }
  .summary-metric-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .summary-donut-grid { grid-template-columns: 1fr; }
  .quality-insights-grid { grid-template-columns: 1fr; }
  .recovery-search-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recovery-search-field { grid-column: 1 / -1; }
}

@media (max-width: 540px) {
  .portal-cards { grid-template-columns: 1fr; }
  .recovery-color-grid { grid-template-columns: 1fr; }
  .portal-card { min-height: 235px; }
  .section-welcome { flex-direction: column; }
  html, body, .page-shell, #appView { width: 100%; max-width: 100vw; overflow-x: hidden; }
  .topbar-actions { display: none; }
  .page-enter { animation: none; }
  .kpi-grid { grid-template-columns: 1fr; }
  .module-kpi-grid, .module-indicators { grid-template-columns: 1fr; }
  .quality-overview-grid { grid-template-columns: 1fr; }
  .quality-section-heading { align-items: flex-start; flex-direction: column; }
  .operator-overview-grid { grid-template-columns: 1fr; }
  .operators-section-heading { align-items:flex-start; flex-direction:column; }
  .gauge-grid { grid-template-columns: 1fr; }
  .performance-kpi-grid { grid-template-columns: 1fr; }
  .cockpit-alert-grid { grid-template-columns: 1fr; }
  .summary-metric-stack { grid-template-columns: 1fr; }
  .summary-donut-body { grid-template-columns: 1fr; }
  .cockpit-section-title { align-items: flex-start; flex-direction: column; }
  .operation-tabs-bar { align-items: stretch; flex-direction: column; gap: 0; padding-right: 0; }
  .operation-entry-button { margin: 9px 12px 12px; }
  .primary-indicators, .quality-indicators { grid-template-columns: 1fr 1fr; }
  .period-controls, .period-field { width: 100%; }
  .period-field input, .period-field select { width: 100%; }
  .period-all { width: 100%; }
  .page-enter, .kpi-grid, .dashboard-grid, .panel, .kpi-card { width: 100%; min-width: 0; max-width: 100%; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { width: 100%; }
  .heading-actions { display: grid; grid-template-columns: 1fr; }
  .heading-actions button { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gauge-companion strong { white-space: normal; }
  .gauge-main { grid-template-columns: minmax(0, 1fr) 90px; }
  .gauge-meter { width: min(165px, 100%); }
  .dual-metrics, .drawer-kpis, .detail-grid, .milestone-grid { grid-template-columns: 1fr; }
  .transition-strip { grid-template-columns: 1fr; }
  .transition-step { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .transition-step:last-child { border-bottom: 0; }
  .filter-input { min-width: 100%; width: 100%; }
  .recovery-search-controls { grid-template-columns: 1fr; }
  .recovery-search-field { grid-column: auto; }
  .recovery-search-summary { align-items: flex-start; flex-direction: column; gap: 5px; }
  .recovery-search-summary span:last-child { margin-left: 0; }
  .detail-drawer { width: 100vw; padding: 22px 15px; }
  .modal-body { grid-template-columns: 1fr; padding: 17px 16px; }
  .form-field.full { grid-column: auto; }
  .modal-header { padding-inline: 16px; }
  .modal-footer { padding-inline: 16px; }
  .drawer-hero { margin: -22px -15px 18px; padding-left: 15px; }
  .drawer-kpis { grid-template-columns: repeat(3, 1fr); }
}