:root {
    --primary: #253b32;
    --accent: #253b32;
    --brand-dark: #253b32;
    --brand-dark-hover: #1d2f28;
    --bg: #eef3f7;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --border: #d9e2ec;
    --text: #0f172a;
    --muted: #64748b;
    --success: #2fa86b;
    --danger: #dc2626;
    --shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --topbar-height: 92px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; color: var(--text); background: var(--bg); }
body { min-height: 100vh; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.login-body { background: linear-gradient(180deg, #edf2f7 0%, #e8eef4 100%); }
.login-shell { width: 100%; max-width: 1500px; margin: 0 auto; padding: 26px; }
.admin-login-shell { max-width: 780px; }
.login-card, .report-card, .form-card { background: rgba(255,255,255,0.92); border: 1px solid rgba(217,226,236,0.95); border-radius: 30px; box-shadow: var(--shadow); padding: 28px 32px 34px; backdrop-filter: blur(8px); }
.admin-login-card { padding: 28px; }
.login-brand { display:flex; align-items:center; gap:18px; margin-bottom:24px; }
.login-brand-only { margin-bottom:26px; }
.brand-logo { height:48px; width:auto; display:block; object-fit:contain; max-width:min(100%,440px); }
.brand-logo-topbar { height:42px; max-width:240px; }
.login-grid { display:grid; grid-template-columns:1.15fr 0.95fr; gap:34px; align-items:stretch; }
.login-copy,.login-form-panel { background: rgba(255,255,255,0.72); border:1px solid var(--border); border-radius: var(--radius-lg); padding:38px 38px 34px; }
.single-panel { max-width: 560px; margin: 0 auto; }
.eyebrow { display:inline-block; font-size:13px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:#253b32; margin-bottom:14px; }
.login-copy h2 { margin:0 0 20px; font-size:34px; line-height:1.1; letter-spacing:-0.02em; color:#17203a; }
.login-copy p { margin:0 0 28px; color: var(--muted); font-size:17px; line-height:1.35; max-width:760px; }
.feature-list { margin:0; padding:0; list-style:none; display:grid; gap:16px; }
.feature-list li { position:relative; padding-left:34px; font-size:18px; line-height:1.35; color:#334155; }
.feature-list li::before { content:"✓"; position:absolute; left:0; top:0; color: var(--success); font-weight:700; font-size:20px; line-height:1.1; }
.panel-header h3 { margin:0 0 18px; font-size:21px; color:#17203a; }
.panel-header p { margin:0 0 28px; color: var(--muted); font-size:15px; line-height:1.5; }
.panel-header-flex { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.pbi-badge { display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 10px; border-radius:999px; background:#edf2f7; border:1px solid #d9e2ec; color:var(--brand-dark); font-size:12px; font-weight:700; white-space:nowrap; }
.alert-error,.alert-success { border-radius:14px; padding:14px 16px; margin-bottom:18px; font-size:14px; }
.alert-error { background:#fff1f2; border:1px solid #fecdd3; color:#b42318; }
.alert-success { background:#ecfdf3; border:1px solid #a6f4c5; color:#067647; }
.login-form { display:grid; gap:20px; }
.login-form label { display:grid; gap:10px; }
.login-form span { font-size:15px; color:#334155; font-weight:600; }
.login-form input, .filter-field input, .filter-field select { width:100%; height:58px; border:1px solid #cbd5e1; border-radius:16px; padding:0 18px; font-size:16px; color:var(--text); background:#fff; outline:none; transition:border-color 0.2s ease, box-shadow 0.2s ease; }
.login-form input:focus, .filter-field input:focus, .filter-field select:focus { border-color:#94a3b8; box-shadow:0 0 0 3px rgba(37,59,50,0.10); }
.password-field { display:grid; gap:10px; }
.password-toggle { justify-self:flex-end; border:1px solid #d9e2ec; background:#ffffff; color:var(--brand-dark); border-radius:12px; display:inline-flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; transition:background 0.15s ease,border-color 0.15s ease,transform 0.15s ease; }
.password-toggle:hover { background:#f8fafc; border-color:#cbd5e1; text-decoration:none; transform:translateY(-1px); }
.password-toggle:focus { outline:none; box-shadow:0 0 0 3px rgba(37,59,50,0.12); }
.password-toggle-icon { width:18px; height:18px; object-fit:contain; }
.password-toggle-text { font-size:13px; font-weight:700; color:var(--brand-dark); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.checkbox-row { grid-template-columns:auto 1fr; align-items:center; gap:12px; }
.checkbox-row-inline { display:flex !important; grid-template-columns:none !important; }
.checkbox-row input { width:18px; height:18px; margin:0; }
.btn-primary,.btn-secondary { display:inline-flex; align-items:center; justify-content:center; min-height:56px; border-radius:16px; border:none; cursor:pointer; font-size:16px; font-weight:700; padding:0 22px; transition:transform 0.15s ease,opacity 0.15s ease,background 0.15s ease; text-decoration:none; }
.btn-primary:hover,.btn-secondary:hover { transform:translateY(-1px); text-decoration:none; }
.btn-primary { background:#253b32; color:#ffffff; width:100%; }
.btn-inline { width:auto; min-height:44px; }
.btn-primary:hover { background:#1d2f28; color:#ffffff; opacity:1; }
.btn-secondary { background:var(--brand-dark); color:#ffffff; border:1px solid var(--brand-dark); min-height:44px; padding:0 16px; font-size:14px; }
.btn-secondary-light { background:#ffffff; color:var(--brand-dark); border:1px solid var(--brand-dark); }
.btn-secondary:hover { background:var(--brand-dark-hover); border-color:var(--brand-dark-hover); color:#ffffff; }
.btn-secondary-light:hover { background:#f8fafc; color:var(--brand-dark); border-color:var(--brand-dark); }
.panel-footer { margin-top:20px; font-size:14px; color:var(--muted); }
.panel-footer a { color:#253b32; font-weight:600; }
.panel-footer a:hover { color:#1d2f28; }
.forgot-password-row { margin-top:16px; font-size:14px; color:var(--muted); }
.forgot-password-row a { font-weight:700; }
.dashboard-body { background: linear-gradient(180deg, #eef3f7 0%, #e8eef4 100%); min-height:100vh; }
.topbar { min-height:var(--topbar-height); display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 34px; background:rgba(255,255,255,0.88); backdrop-filter:blur(10px); border-bottom:1px solid rgba(217,226,236,0.95); position:sticky; top:0; z-index:30; }
.topbar-left,.topbar-right { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.topbar-title { font-size:18px; font-weight:700; color:#17203a; }
.topbar-subtitle { font-size:13px; color:var(--brand-dark); margin-top:2px; font-weight:600; }
.client-pill { height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; background:#ffffff; border:1px solid var(--brand-dark); border-radius:999px; font-size:14px; font-weight:700; color:var(--brand-dark); white-space:nowrap; }
.dashboard-shell { width:100%; max-width:1760px; margin:0 auto; padding:28px 34px 38px; }
.narrow-shell { max-width:860px; }
.hero-card { background:#253b32; border-radius:28px; padding:36px; color:#ffffff; box-shadow:0 18px 40px rgba(37,59,50,0.22); }
.hero-card * { color:inherit; }
.hero-card-split { display:flex; align-items:center; justify-content:space-between; gap:28px; }
.hero-card-main { flex:1; min-width:0; }
.hero-card h1 { color:#ffffff; margin:10px 0 14px; font-size:42px; line-height:1.08; letter-spacing:-0.02em; }
.hero-card p { color:rgba(255,255,255,0.90); margin:0; line-height:1.6; font-size:17px; }
.hero-card .eyebrow { color:#b8e6cf; margin-bottom:8px; }
.client-logo-panel { flex:0 0 auto; display:flex; justify-content:flex-end; }
.client-logo-wrap { width:180px; height:72px; background:rgba(255,255,255,0.96); border:1px solid rgba(255,255,255,0.45); border-radius:18px; padding:10px 14px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.client-logo-wrap-admin { width:240px; height:96px; }
.client-logo-image, .table-logo-image { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; }
.table-logo-wrap { width:120px; height:48px; background:#fff; border:1px solid #e5edf5; border-radius:12px; padding:8px; display:flex; align-items:center; justify-content:center; }
.client-logo-admin-preview { display:grid; gap:12px; }
.upload-field { display:grid; gap:10px; }
.upload-help,.upload-meta { color:var(--muted); font-size:13px; }
.info-card { border:1px solid #d9e2ec; border-radius:18px; background:#f8fafc; padding:18px 20px; margin-bottom:20px; }
.compact-card { line-height:1.6; }
.inline-toolbar { display:flex; justify-content:flex-end; }
.selection-grid { margin-top:28px; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:22px; }
.compact-grid { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.metric-card,.selection-card { background:rgba(255,255,255,0.92); border:1px solid rgba(217,226,236,0.95); border-radius:24px; box-shadow:var(--shadow); }
.metric-card { padding:24px; }
.metric-card span { display:block; color:var(--muted); margin-bottom:8px; font-size:14px; }
.metric-card strong { font-size:34px; color:var(--brand-dark); }
.selection-card { display:flex; flex-direction:column; justify-content:space-between; }
.selection-card-body { padding:24px 24px 18px; }
.selection-card-actions { padding:0 24px 24px; }
.selection-kicker { display:inline-flex; margin-bottom:14px; color:var(--brand-dark); background:#eff6f2; border:1px solid #d2e5d9; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700; }
.selection-card h2 { margin:0 0 12px; color:#17203a; font-size:24px; }
.selection-card p { margin:0 0 16px; color:var(--muted); line-height:1.5; }
.selection-notes { color:var(--brand-dark); font-size:14px; font-weight:600; }
.report-card,.form-card { margin-top:28px; }
.report-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.report-header h2 { margin:0 0 8px; font-size:26px; line-height:1.1; color:#17203a; }
.report-header p { margin:0; color:var(--brand-dark); font-size:15px; line-height:1.45; font-weight:500; }
.report-frame-wrap { width:100%; min-height:780px; background:#fff; border:1px solid #dde5ee; border-radius:24px; overflow:hidden; }
.report-frame-wrap iframe { display:block; width:100%; min-height:780px; border:0; background:#fff; }
.table-wrap { overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th,.admin-table td { text-align:left; padding:14px 12px; border-bottom:1px solid #e5edf5; vertical-align:top; }
.admin-table th { color:#334155; font-size:13px; text-transform:uppercase; letter-spacing:0.06em; }
.admin-table td { font-size:14px; color:#17203a; }
.actions { display:flex; gap:10px; flex-wrap:wrap; }
.actions a { font-size:13px; font-weight:700; }
.status-badge { display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:700; }
.status-badge.is-active { background:#ecfdf3; color:#067647; border:1px solid #a6f4c5; }
.status-badge.is-inactive { background:#fff4f5; color:#b42318; border:1px solid #fecdd3; }
.filter-bar { display:grid; grid-template-columns: 1.6fr 0.9fr auto; gap:16px; margin-bottom:22px; align-items:end; }
.filter-field { display:grid; gap:8px; }
.filter-field label { font-size:14px; font-weight:700; color:#334155; }
.filter-actions { display:flex; gap:10px; align-items:center; }
.pagination { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; margin-top:22px; }
.pagination-link { min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border-radius:12px; border:1px solid #d9e2ec; background:#fff; color:#253b32; font-weight:700; }
.pagination-link:hover { background:#f8fafc; text-decoration:none; }
.pagination-link.is-active { background:#253b32; color:#fff; border-color:#253b32; }

@media (max-width: 1180px) {
    .login-grid { grid-template-columns:1fr; }
    .dashboard-shell { padding:22px 20px 30px; }
    .topbar { padding:16px 20px; }
    .hero-card h1 { font-size:34px; }
}
@media (max-width: 920px) {
    .hero-card-split { flex-direction:column; align-items:flex-start; }
    .client-logo-panel { width:100%; justify-content:flex-start; }
    .client-logo-wrap { width:170px; height:68px; }
    .filter-bar { grid-template-columns:1fr; }
    .filter-actions { justify-content:flex-start; }
}
@media (max-width: 820px) {
    .login-shell { padding:14px; }
    .login-card { padding:18px; border-radius:22px; }
    .login-copy,.login-form-panel { padding:24px 20px; }
    .login-copy h2 { font-size:28px; }
    .feature-list li { font-size:16px; }
    .topbar { flex-direction:column; align-items:flex-start; }
    .topbar-right { width:100%; justify-content:space-between; }
    .hero-card { padding:24px; }
    .hero-card h1 { font-size:30px; }
    .report-card,.form-card { padding:18px; }
    .report-frame-wrap,.report-frame-wrap iframe { min-height:620px; }
    .brand-logo { height:40px; max-width:min(100%,300px); }
    .brand-logo-topbar { height:34px; max-width:180px; }
    .client-logo-wrap-admin { width:200px; height:84px; }
}
@media (max-width: 520px) {
    .login-copy h2 { font-size:24px; }
    .hero-card h1 { font-size:26px; }
    .report-header h2 { font-size:22px; }
    .client-pill { width:100%; justify-content:center; }
    .topbar-right { flex-direction:column; align-items:stretch; }
    .report-frame-wrap,.report-frame-wrap iframe { min-height:540px; }
    .password-toggle { width:100%; justify-content:center; }
    .client-logo-wrap { width:150px; height:60px; }
    .client-logo-wrap-admin { width:180px; height:76px; }
}