/* ───── CSS Variables (Premium Palette) ───── */
:root {
    --primary: #0D1E38;
    --primary-dark: #060F1E;
    --primary-light: #1F3A6E;
    --accent: #8E6A28;
    --accent-light: #A67D3D;
    --accent-gold: #C9A24B;
    --accent-gold-light: #EAD196;
    --success: #2B5D45;
    --success-light: #E8F0EA;
    --warning: #B8863A;
    --warning-light: #FBF3E4;
    --danger: #7A2E28;
    --danger-light: #F5E8E6;
    --neutral: #6B7280;
    --light-bg: #FAF9F6;
    --border: #E7E2D5;
    --border-light: #F0EDE3;
    --text: #16202E;
    --text-light: #6B7280;
    --text-white: #ffffff;
    --shadow-sm: 0 2px 6px rgba(6,15,30,0.07), 0 1px 2px rgba(6,15,30,0.05);
    --shadow-md: 0 10px 28px rgba(6,15,30,0.12), 0 3px 10px rgba(6,15,30,0.07);
    --shadow-lg: 0 24px 60px rgba(6,15,30,0.16), 0 8px 24px rgba(6,15,30,0.10);
    --shadow-xl: 0 32px 80px rgba(6,15,30,0.22), 0 12px 32px rgba(6,15,30,0.14);
    --radius: 24px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-display: 'Fraunces', Georgia, serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
    --max-width: 1440px;
    --header-bg: #060F1E;
    --header-text: #F5F1E7;
    --sidebar-bg: #ffffff;
    --card-bg: #ffffff;
    --body-bg: #FAF9F6;
    --link-color: var(--accent);
    --badge-admin: #6B4A8E;
    --badge-user: #2B5D45;
    --tab-dashboard: #2B5D45;
    --tab-insights: #2A4A7A;
    --tab-trends: #6B4A8E;
    --tab-data: #1e293b;
    --tab-pestle: #4f46e5;
    --tab-swot: #B8863A;
}
.dark-mode {
    --primary: #1e3a5f;
    --primary-dark: #0f1f33;
    --primary-light: #2a4a7a;
    --body-bg: #0f172a;
    --card-bg: #1e293b;
    --sidebar-bg: #1e293b;
    --border: #334155;
    --border-light: #2d3748;
    --text: #e2e8f0;
    --text-light: #94a3b8;
    --light-bg: #1e293b;
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.28);
    --shadow-md: 0 10px 28px rgba(0,0,0,0.4);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.5);
    --shadow-xl: 0 32px 80px rgba(0,0,0,0.6);
    --tab-dashboard: #10b981;
    --tab-insights: #60a5fa;
    --tab-trends: #a78bfa;
    --tab-data: #334155;
    --tab-pestle: #818cf8;
    --tab-swot: #fbbf24;
    --header-bg: #0f172a;
}
* { margin:0; padding:0; box-sizing:border-box; }
/* Form controls (button, input, select, textarea) don't inherit the
   page's font-family by default in any browser - this is why tab
   buttons and other button-based UI were still showing a browser
   default font even after body's font-family was updated. */
button, input, select, textarea { font-family: inherit; }
body {
    font-family: var(--font);
    background: var(--body-bg);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
    transition: background var(--transition), color var(--transition);
    -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: var(--neutral); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ─── Login Page ─── */
#loginPage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
    padding: 20px;
    position: relative;
    overflow: hidden;
}
#loginPage::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 150%;
    background: radial-gradient(ellipse, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
    pointer-events: none;
}
#loginPage::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -20%;
    width: 70%;
    height: 120%;
    background: radial-gradient(ellipse, rgba(212, 168, 67, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.login-card {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius);
    padding: 48px 40px;
    max-width: 440px;
    width: 100%;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255,255,255,0.2);
    position: relative;
    z-index: 1;
    transition: background var(--transition);
}
.dark-mode .login-card {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255,255,255,0.05);
}
.login-card .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.login-card .logo img { max-height: 64px; }
.login-card .service-description {
    text-align: center;
    color: var(--accent-gold, #b8873a);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 30px;
}
.login-card h2 {
    text-align: center;
    color: var(--primary);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}
.login-card .subtitle {
    text-align: center;
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 28px;
    line-height: 1.6;
}
.login-card .subtitle a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.login-card .subtitle a:hover { text-decoration: underline; }
.login-card .form-group { margin-bottom: 20px; }
.login-card .form-group label {
    display: block;
    font-weight: 600;
    color: var(--text-light);
    font-size: 13px;
    margin-bottom: 6px;
}
.login-card .form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: var(--transition);
    background: var(--card-bg);
    color: var(--text);
}
.login-card .form-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
    outline: none;
}
.login-card .btn-primary {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: var(--transition);
    letter-spacing: 0.3px;
    box-shadow: 0 4px 16px rgba(15,43,77,0.2);
}
.login-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15,43,77,0.3);
}
.login-card .links {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    font-size: 13px;
}
.login-card .links a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}
.login-card .links a:hover { color: var(--accent); }
.login-card .footer-text {
    text-align: center;
    margin-top: 24px;
    font-size: 12px;
    color: var(--text-light);
    border-top: 1px solid var(--border);
    padding-top: 20px;
}
.login-card .footer-text a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.login-card .alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 500;
}
.alert-error { background: var(--danger-light); color: var(--danger); }
.alert-success { background: var(--success-light); color: var(--success); }
.alert-info { background: #e6effe; color: #1e3a8a; }
.alert-warning { background: var(--warning-light); color: var(--warning); }

/* ─── App Layout ─── */
#appPage {
    display: none;
    height: 100vh;
    flex-direction: column;
}
#appPage.active { display: flex; }

#paymentWallPage {
    display: none;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    overflow-y: auto;
    background: linear-gradient(145deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
    padding: 40px 20px;
}
#paymentWallPage.active { display: flex; }
.payment-wall-card {
    max-width: 640px;
    margin: auto;
}

.licence-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 16px;
    border-radius: 30px;
}
.licence-detail-card {
    text-align: center;
    padding: 20px;
    margin-top: 18px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-md);
}
.licence-detail-title {
    font-weight: 700;
    color: var(--primary);
    font-size: 14px;
    margin-bottom: 8px;
}
.licence-detail-price {
    font-size: 34px;
    font-weight: 800;
    color: var(--primary);
}
.licence-detail-price span {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-light);
}
.licence-detail-sub {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 4px;
}
.licence-detail-estimate {
    font-size: 12px;
    color: var(--accent);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.licence-detail-estimate .estimate-caveat,
.estimate-caveat {
    color: var(--text-light);
    font-size: 10px;
}

.payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}
.payment-option-card {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
}
.payment-option-title {
    font-weight: 700;
    color: var(--primary);
    font-size: 14px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.payment-option-card p {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 12px;
}
.payment-option-card .btn-primary,
.payment-option-card .btn-secondary {
    margin-top: auto;
    justify-content: center;
    width: 100%;
}
.payment-option-card .form-group { margin-bottom: 12px; }
.payment-option-card .form-group label { font-size: 11px; }
.payment-option-card .form-group input,
.payment-option-card .form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--font);
    background: var(--card-bg);
    color: var(--text);
}

.payment-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.payment-history-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text);
    flex-wrap: wrap;
    gap: 8px;
}

.licence-request-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-sm);
}
.licence-request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.licence-request-org {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 6px;
}
.licence-request-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .payment-options { grid-template-columns: 1fr; }
}
#adminLayout {
    display: none;
    flex-direction: column;
    height: 100vh;
}
#adminLayout.active { display: flex; }

/* ─── Admin Header ─── */
.admin-header {
    background: var(--header-bg);
    padding: 14px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.admin-header .brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.admin-header .brand img {
    height: 40px;
}
.admin-header .brand i {
    color: var(--header-text);
}
.admin-header .brand h1 {
    color: var(--header-text);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
}
.admin-header .brand .org-name {
    color: #93bbfc;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.8;
}
.admin-header .user-info {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--header-text);
    font-size: 13px;
    flex-wrap: wrap;
}
.admin-header .user-info .badge {
    background: rgba(255,255,255,0.12);
    padding: 4px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.admin-header .user-info .badge.admin { background: var(--badge-admin); color: #fff; }
.admin-header .user-info .badge.user { background: var(--badge-user); color: #fff; }
.admin-header .user-info .view-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 30px;
    padding: 3px;
}
.admin-header .user-info .view-toggle button {
    background: transparent;
    border: none;
    color: #93bbfc;
    padding: 5px 14px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    font-size: 11px;
    transition: var(--transition);
}
.admin-header .user-info .view-toggle button.active {
    background: var(--accent);
    color: #fff;
}
.admin-header .user-info .view-toggle button:hover {
    background: rgba(255,255,255,0.1);
}
.admin-header .user-info .org-selector {
    background: rgba(255,255,255,0.08);
    border: none;
    color: var(--header-text);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
}
.admin-header .user-info .org-selector option {
    background: var(--primary);
    color: var(--header-text);
}
.admin-header .user-info .logout-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--header-text);
    padding: 6px 18px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
    font-size: 12px;
}
.admin-header .user-info .logout-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.4);
}
.admin-header .user-info .dark-mode-toggle {
    background: transparent;
    border: none;
    color: var(--header-text);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    transition: var(--transition);
}
.admin-header .user-info .dark-mode-toggle:hover {
    transform: rotate(20deg);
    color: #fff;
}

/* ─── Admin Sidebar ─── */
.admin-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.admin-sidebar {
    width: 240px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    padding: 20px 0;
    overflow-y: auto;
    flex-shrink: 0;
    transition: background var(--transition);
}
.admin-sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    color: var(--text-light);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    border-left: 3px solid transparent;
    font-size: 14px;
    margin: 2px 12px;
    border-radius: var(--radius-sm);
}
.admin-sidebar .nav-item:hover {
    background: var(--border);
    color: var(--text);
}
.admin-sidebar .nav-item.active {
    background: var(--light-bg);
    color: var(--primary);
    border-left-color: var(--accent);
    font-weight: 600;
}
.admin-sidebar .nav-item i {
    width: 22px;
    text-align: center;
    font-size: 18px;
}
.admin-sidebar .nav-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 20px;
}
.admin-content {
    flex: 1;
    padding: 28px 36px;
    overflow-y: auto;
    background: var(--body-bg);
    transition: background var(--transition);
}
.admin-content .tab-content {
    display: none;
}
.admin-content .tab-content.active {
    display: block;
}

/* ─── Customer Layout ─── */
#customerLayout {
    display: none;
    height: 100vh;
    background: var(--body-bg);
    overflow-y: auto;
    padding: 20px;
    transition: background var(--transition);
}
#customerLayout.active { display: block; }
.customer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xl);
    padding: 0 36px 44px;
    overflow: hidden;
    transition: background var(--transition);
}

/* ─── Customer Header ─── */
.customer-header {
    margin: 0 -36px 0 -36px;
    background: radial-gradient(ellipse 900px 500px at 15% -20%, #14294A 0%, #0D1E38 45%, #060F1E 100%);
    border-bottom: 1px solid rgba(234,209,150,0.15);
    transition: background var(--transition);
    overflow: hidden;
}
.header-row-main {
    padding: 24px 36px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.header-top-meta {
    padding: 0 36px 18px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #8B93A6;
}
.header-bottom-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.header-bottom-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.header-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}
.customer-header .brand-icon {
    background: linear-gradient(135deg, var(--accent-gold-light), var(--accent-gold));
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0D1E38;
    font-size: 20px;
    overflow: hidden;
    flex-shrink: 0;
}
.customer-header .brand-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.customer-header .brand-text h1 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: #F7F4EC;
    line-height: 1.2;
}
.customer-header .brand-tagline {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-style: italic;
    color: var(--accent-gold-light);
    margin-top: 2px;
}
.header-top-meta .meta-sep { color: rgba(139,147,166,0.4); }
.header-top-meta .institution-name,
.header-top-meta .strategy-theme {
    font-size: 11px;
    color: #A7AEBF;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.header-top-meta .institution-name strong,
.header-top-meta .strategy-theme strong {
    color: #D9DDE6;
    font-weight: 500;
}
.header-top-meta .institution-name:hover,
.header-top-meta .strategy-theme:hover {
    color: #F0ECE0;
}
.header-top-meta .institution-name:hover strong,
.header-top-meta .strategy-theme:hover strong {
    color: var(--accent-gold-light);
}
.header-top-meta .institution-name i,
.header-top-meta .strategy-theme i {
    font-size: 10px;
    opacity: 0.5;
}
.header-top-meta .header-role-badge {
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(201,162,75,0.15);
    color: var(--accent-gold-light);
    display: inline-flex;
    align-items: center;
}
.header-top-meta #customerFYBadge {
    font-size: 11px;
    color: #8B93A6;
}

/* One quiet, unified style for every header utility action - icon only,
   small, muted by default, brightening only on hover. These are tools,
   not the focus; they shouldn't visually compete with the brand. */
.header-icon-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: #8B93A6;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header-icon-btn:hover {
    color: #F5F1E7;
    border-color: var(--accent-gold);
    background: rgba(201,162,75,0.08);
}
#backToAdminBtn { display: none; }
#backToAdminBtn.visible { display: inline-flex; }

/* ─── Customer Tabs — dark chrome matching the hero's premium treatment ─── */
.tab-group-label {
    font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--accent-gold-light); opacity: 0.75;
    display: flex; align-items: center;
    width: 210px; flex-shrink: 0;
    padding: 0 18px 0 0; margin-right: 6px;
    border-right: 1px solid rgba(234,209,150,0.18);
    white-space: nowrap;
}
.customer-tabs:not(.customer-tabs-secondary) {
    border-top: 1px solid rgba(201,162,75,0.4);
}
.customer-tabs.customer-tabs-secondary {
    border-top: 1px solid rgba(201,162,75,0.4);
    border-bottom: 1px solid rgba(201,162,75,0.4);
}
.customer-tabs {
    display: flex;
    gap: 4px;
    margin: 0 -36px 0;
    padding: 0 36px;
    background: #0D1E38;
    flex-wrap: wrap;
}
.customer-tabs .tab-btn {
    padding: 11px 16px;
    font-weight: 600;
    font-size: 12px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #8B93A6;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 0;
}
.customer-tabs .tab-btn:hover {
    color: #F0ECE0;
}
.customer-tabs .tab-btn.active {
    color: #F5F1E7;
    border-bottom-color: var(--accent-gold);
}
.customer-tabs .tab-btn[data-tab="dashboard"].active { border-bottom-color: #4A8A6A; }
.customer-tabs .tab-btn[data-tab="insights"].active { border-bottom-color: #4A6FA5; }
.customer-tabs .tab-btn[data-tab="trends"].active { border-bottom-color: #9370B5; }
.customer-tabs .tab-btn[data-tab="data"] {
    margin-left: auto;
    background: var(--accent-gold);
    color: #0D1E38;
    border-radius: 6px;
    margin-top: 8px; margin-bottom: 8px;
    padding: 10px 20px;
    border-bottom-color: transparent;
    font-weight: 700;
}
.customer-tabs .tab-btn[data-tab="data"]:hover {
    background: var(--accent-gold-light);
    color: #0D1E38;
}
.customer-tabs .tab-btn[data-tab="data"].active {
    background: #F5F1E7;
    color: #0D1E38;
    border-bottom-color: transparent;
}

/* ─── PESTLE / SWOT — a separate row of solid colored buttons, distinct
   from the underline-style tabs above so they stand out as a featured
   pair rather than blending into the regular tab list. ─── */
.customer-tabs-analysis {
    display: flex;
    gap: 12px;
    margin: 0 -36px 0;
    padding: 16px 36px 22px;
    background: #0D1E38;
    flex-wrap: wrap;
}
.tab-btn-analysis {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 12.5px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
}
.tab-btn-analysis i { font-size: 13px; }
.tab-btn-analysis.tab-pestle { color: #A78BC9; }
.tab-btn-analysis.tab-swot { color: var(--accent-gold-light); }
.tab-btn-analysis.tab-pestle:hover { border-color: #6B4A8E; background: rgba(107,74,142,0.12); color: #C4AEDE; }
.tab-btn-analysis.tab-swot:hover { border-color: var(--accent-gold); background: rgba(201,162,75,0.1); color: var(--accent-gold-light); }
.tab-btn-analysis.tab-pestle.active { border-color: #6B4A8E; background: rgba(107,74,142,0.18); color: #C4AEDE; }
.tab-btn-analysis.tab-swot.active { border-color: var(--accent-gold); background: rgba(201,162,75,0.16); color: var(--accent-gold-light); }
.tab-btn-analysis.active::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    margin-left: 2px;
}

.customer-content { padding-top: 0; }
.customer-content .tab-content {
    display: none;
    padding-top: 28px;
}
.customer-content .tab-content.active { display: block; }
#customerTabDashboard.active { padding-top: 0; }
#customerTabPestle.active { padding-top: 0; }
#customerTabSwot.active { padding-top: 0; }

/* ─── Filter Bar ─── */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    background: var(--card-bg);
    padding: 18px 24px;
    border-radius: var(--radius-md);
    margin: 20px 0 28px;
    align-items: center;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition);
}
.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.filter-group label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-light);
}
.filter-group select,
.filter-group input {
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--light-bg);
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    outline: none;
    transition: var(--transition);
    min-width: 150px;
}
.filter-group select:focus,
.filter-group input:focus {
    border-color: var(--accent-gold);
    background: var(--card-bg);
    box-shadow: 0 0 0 3px rgba(201,162,75,0.12);
}
.filter-group .pill {
    background: var(--border);
    padding: 4px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
}
.filter-group .last-updated {
    flex: 1;
    text-align: right;
    font-size: 12px;
    color: var(--text-light);
}
.filter-group .last-updated i { margin-right: 6px; }

/* ─── Dashboard Components ─── */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap: 20px;
    margin-bottom: 32px;
}
.kpi-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 20px 24px 18px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    transition: var(--transition);
    box-shadow: var(--shadow-md);
    position: relative;
}
.kpi-card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}
.kpi-card .label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kpi-card .label i { font-size: 16px; color: var(--accent); }
.kpi-card .value {
    font-size: 34px;
    font-weight: 700;
    color: var(--primary);
    margin: 6px 0 2px;
    letter-spacing: -0.5px;
}
.kpi-card .sub {
    font-size: 12px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 12px;
}
.trend-up {
    color: var(--success);
    background: var(--success-light);
    padding: 2px 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 11px;
}
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}
.status-dot.green { background: var(--success); }
.status-dot.amber { background: var(--warning); }
.status-dot.red { background: var(--danger); }

/* ─── Quadrant Cards ─── */
.quadrant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}
/* On wide screens, cap columns at the actual perspective count so cards
   don't stretch absurdly wide when an org only has 2-3 perspectives. */
@media (min-width: 900px) {
    .quadrant-grid { grid-template-columns: repeat(var(--quadrant-count, 4), 1fr); }
}
.quadrant-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    padding: 22px 22px 18px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border-left: none;
    border-top: 3px solid var(--primary);
    position: relative;
}
.quadrant-card:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.quadrant-card .qtitle {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}
.quadrant-card .qtitle span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quadrant-card .qtitle i { font-size: 13px; color: var(--primary); flex-shrink: 0; }
.quadrant-card .qprogress {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 400;
    color: var(--text);
    line-height: 1;
}
.quadrant-card .qsub {
    font-size: 11px;
    color: var(--text-light);
    margin-top: 4px;
}
.quadrant-card .qbar {
    margin-top: 12px;
    height: 3px;
    background: var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.quadrant-card .qbar .fill { height: 100%; border-radius: 10px; }
.quadrant-card.financial { border-top-color: var(--success); }
.quadrant-card.customer { border-top-color: var(--accent); }
.quadrant-card.internal { border-top-color: var(--warning); }
.quadrant-card.learning { border-top-color: var(--badge-admin); }
.quadrant-card .qbar .fill.financial { background: var(--success); }
.quadrant-card .qbar .fill.customer { background: var(--accent); }
.quadrant-card .qbar .fill.internal { background: var(--warning); }
.quadrant-card .qbar .fill.learning { background: var(--badge-admin); }

/* ═══════════════════════════════════════════════════════════
   Perspective colour palette — every org-defined perspective
   (Balanced Scorecard or custom) is assigned one of these 8
   colours via its color_index, applied consistently wherever a
   perspective is shown (quadrant cards, KPI badges, the
   perspective manager in Settings).
   ═══════════════════════════════════════════════════════════ */
.persp-0 { --persp-color: #2B5D45; --persp-color-light: #4A8A6A; }
.persp-1 { --persp-color: #2A4A7A; --persp-color-light: #4A6FA5; }
.persp-2 { --persp-color: #B8863A; --persp-color-light: #D4A85F; }
.persp-3 { --persp-color: #6B4A8E; --persp-color-light: #9370B5; }
.persp-4 { --persp-color: #9B4066; --persp-color-light: #C1638C; }
.persp-5 { --persp-color: #2D6E7A; --persp-color-light: #4F97A3; }
.persp-6 { --persp-color: #7A2E28; --persp-color-light: #A9564C; }
.persp-7 { --persp-color: #5C6E2F; --persp-color-light: #83984F; }

.quadrant-card[class*="persp-"] { border-top-color: var(--persp-color); }
.quadrant-card .qbar .fill[class*="persp-"] { background: var(--persp-color); }
.perspective-badge[class*="persp-"] { background: var(--persp-color); }
.bar-fill[class*="persp-"] { background: linear-gradient(90deg, var(--persp-color), var(--persp-color-light)); }

/* ─── Charts ─── */
.charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
}
.chart-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 22px 26px 24px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
.chart-card:hover {
    box-shadow: var(--shadow-lg);
}
.chart-card .chart-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chart-card .chart-title small {
    font-weight: 400;
    font-size: 12px;
    color: var(--text-light);
}
.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bar-item {
    display: flex;
    align-items: center;
    gap: 14px;
}
.bar-item .bar-label {
    width: 130px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    flex-shrink: 0;
}
.bar-track {
    flex: 1;
    height: 26px;
    background: var(--border);
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}
.bar-fill {
    height: 100%;
    border-radius: 30px;
    transition: width 0.8s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}
.bar-fill.financial { background: linear-gradient(90deg, var(--success), #10b981); }
.bar-fill.customer { background: linear-gradient(90deg, var(--accent), #60a5fa); }
.bar-fill.internal { background: linear-gradient(90deg, var(--warning), #fbbf24); }
.bar-fill.learning { background: linear-gradient(90deg, var(--badge-admin), #9370B5); }
.bar-fill.green { background: linear-gradient(90deg, var(--success), #10b981); }
.bar-fill.amber { background: linear-gradient(90deg, var(--warning), #f59e0b); }
.bar-fill.red { background: linear-gradient(90deg, var(--danger), #A9564C); }
.bar-target {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
    width: 60px;
    text-align: right;
    flex-shrink: 0;
}
.donut-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0 6px;
    flex-wrap: wrap;
}
.donut-item { text-align: center; }
.donut-ring {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: conic-gradient(var(--primary) 0% 72%, var(--border) 72% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    position: relative;
    box-shadow: var(--shadow-sm);
}
.donut-ring .inner {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    color: var(--primary);
}
.donut-item .dlabel { font-size: 13px; font-weight: 600; color: var(--text-light); }
.donut-item .dsub { font-size: 12px; color: var(--text-light); }

/* ─── Board Banner ─── */
.board-banner {
    background: linear-gradient(145deg, var(--primary-dark), var(--primary-light));
    border-radius: var(--radius-md);
    padding: 24px 32px;
    margin: 32px 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    color: #fff;
    box-shadow: var(--shadow-lg);
}
.board-banner h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.board-banner h2 i {
    margin-right: 12px;
    color: #93bbfc;
}
.board-banner p { opacity: 0.8; font-size: 13px; }
.board-stats {
    display: flex;
    gap: 32px;
}
.board-stats .stat { text-align: center; }
.board-stats .stat .num { font-size: 28px; font-weight: 700; }
.board-stats .stat .lbl {
    font-size: 11px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ─── Table ─── */
.section-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    color: var(--text);
    margin: 32px 0 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.section-title i { color: var(--accent); }
.table-wrap {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table thead { background: var(--light-bg); }
table th {
    text-align: left;
    padding: 14px 20px;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 10.5px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border);
}
table td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
table tbody tr:hover { background: var(--light-bg); }
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 16px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 11px;
}
.status-badge.on-track { background: var(--success-light); color: var(--success); }
.status-badge.at-risk { background: var(--warning-light); color: var(--warning); }
.status-badge.behind { background: var(--danger-light); color: var(--danger); }
.progress-mini {
    width: 100px;
    height: 3px;
    background: var(--border);
    border-radius: 10px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}
.progress-mini .fill { height: 100%; border-radius: 10px; }
.progress-mini .fill.green { background: var(--success); }
.progress-mini .fill.amber { background: var(--warning); }
.progress-mini .fill.red { background: var(--danger); }
.perspective-badge {
    display: inline-block;
    padding: 2px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}
.perspective-badge.financial { background: var(--success); }
.perspective-badge.customer { background: var(--accent); }
.perspective-badge.internal { background: var(--warning); }
.perspective-badge.learning { background: var(--badge-admin); }

/* ─── Insights ─── */
.insights-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.insights-header h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--text);
}
.insights-header .right-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.insights-header .country-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}
.insights-header .country-selector label {
    font-weight: 600;
    color: var(--text-light);
    font-size: 13px;
}
.insights-header .country-selector select {
    padding: 8px 18px;
    border-radius: 30px;
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    outline: none;
    cursor: pointer;
    min-width: 160px;
}
.insights-header .country-selector select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
}
.insights-header .refresh-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.insights-header .refresh-btn:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.insights-header .refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.insights-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-bottom: 28px;
}
.insight-perspective {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--primary);
    transition: var(--transition);
}
.insight-perspective:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
}
.insight-perspective.financial { border-top-color: var(--success); }
.insight-perspective.customer { border-top-color: var(--accent); }
.insight-perspective.internal { border-top-color: var(--warning); }
.insight-perspective.learning { border-top-color: var(--badge-admin); }
.insight-perspective .ip-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.insight-perspective .ip-header i { font-size: 22px; }
.insight-perspective .ip-header h4 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}
.insight-perspective .ip-header .count {
    margin-left: auto;
    background: var(--border);
    padding: 2px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
}
.insight-item {
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--light-bg);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border);
    transition: var(--transition);
    cursor: default;
}
.insight-item:hover { background: var(--border); }
.insight-item .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.insight-item .title a {
    color: var(--primary);
    text-decoration: none;
}
.insight-item .title a:hover { color: var(--accent); text-decoration: underline; }
.insight-item .source {
    font-size: 11px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.insight-item .source .date { color: var(--neutral); }
.insight-item .source .badge-perspective {
    font-size: 10px;
    padding: 1px 10px;
    border-radius: 30px;
    font-weight: 600;
    color: #fff;
}
.insight-item .source .badge-perspective.financial { background: var(--success); }
.insight-item .source .badge-perspective.customer { background: var(--accent); }
.insight-item .source .badge-perspective.internal { background: var(--warning); }
.insight-item .source .badge-perspective.learning { background: var(--badge-admin); }
.insight-item .summary {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}
.insight-scroll {
    max-height: 420px;
    overflow-y: auto;
}

/* ─── Trends ─── */
.trends-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.trends-header h3 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--text);
}
.trends-header .trend-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}
.trends-header .trend-actions .update-time {
    font-size: 13px;
    color: var(--text-light);
}
.trends-header .trend-actions .btn-refresh {
    background: var(--primary);
    color: #fff;
    padding: 8px 20px;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
}
.trends-header .trend-actions .btn-refresh:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.trend-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    margin-bottom: 28px;
}

/* ─── PESTLE / SWOT analysis ─── */
.analysis-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--light-bg, #F4F6FA);
    border-radius: var(--radius-md);
    padding: 12px 18px;
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--text-light);
}
.analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.analysis-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.analysis-card-header {
    padding: 12px 18px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.analysis-card-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.analysis-point p {
    margin: 0 0 4px;
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.5;
}
.analysis-source {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: var(--text-light);
    text-decoration: none;
    border-top: 1px dashed var(--border);
    padding-top: 4px;
    margin-top: 2px;
}
.analysis-source:hover { color: var(--accent); text-decoration: underline; }
.analysis-empty-cat {
    font-size: 12px;
    color: var(--text-light);
    font-style: italic;
    margin: 0;
}
.analysis-empty-state {
    text-align: center;
    padding: 50px 30px;
    background: var(--light-bg, #F4F6FA);
    border-radius: var(--radius-md);
}
.analysis-empty-state i {
    font-size: 40px;
    color: var(--accent);
    margin-bottom: 14px;
    display: block;
}
.analysis-empty-state h4 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--text);
}
.analysis-empty-state p {
    max-width: 520px;
    margin: 0 auto 20px;
    font-size: 12.5px;
    color: var(--text-light);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .analysis-grid { grid-template-columns: 1fr; }
}
.trend-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 20px 22px 22px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border-top: 4px solid var(--badge-admin);
}
.trend-card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.trend-card .trend-icon {
    font-size: 28px;
    margin-bottom: 8px;
    display: inline-block;
}
.trend-card .trend-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 4px;
}
.trend-card .trend-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.trend-card .trend-score {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    color: var(--text);
}
.trend-card .trend-score .label {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-light);
}
.trend-card .trend-momentum {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 14px;
    border-radius: 30px;
}
.trend-card .trend-momentum.high {
    background: var(--success-light);
    color: var(--success);
}
.trend-card .trend-momentum.medium {
    background: var(--warning-light);
    color: var(--warning);
}
.trend-card .trend-momentum.low {
    background: var(--danger-light);
    color: var(--danger);
}
.trend-card .trend-perspectives {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 8px 0 12px;
}
.trend-card .trend-perspectives .pill {
    font-size: 10px;
    padding: 2px 12px;
    border-radius: 30px;
    font-weight: 600;
    color: #fff;
}
.trend-card .trend-perspectives .pill.financial { background: var(--success); }
.trend-card .trend-perspectives .pill.customer { background: var(--accent); }
.trend-card .trend-perspectives .pill.internal { background: var(--warning); }
.trend-card .trend-perspectives .pill.learning { background: var(--badge-admin); }
.trend-card .trend-description {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.trend-card .trend-articles {
    font-size: 12px;
    color: var(--text-light);
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 6px;
}
.trend-card .trend-articles a {
    color: var(--accent);
    text-decoration: none;
}
.trend-card .trend-articles a:hover { text-decoration: underline; }

/* ─── Data Editor ─── */
.data-editor .table-wrap { margin-bottom: 24px; }
.data-editor table td input,
.data-editor table td select {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    background: var(--card-bg);
    transition: var(--transition);
}
.data-editor table td input:focus,
.data-editor table td select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
    outline: none;
}
.data-editor table td .delete-row {
    color: var(--danger);
    cursor: pointer;
    font-size: 18px;
    opacity: 0.6;
    transition: var(--transition);
}
.data-editor table td .delete-row:hover {
    opacity: 1;
    transform: scale(1.2);
}
.data-editor .btn-success {
    background: var(--success);
    color: #fff;
    border: none;
    padding: 8px 22px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}
.data-editor .btn-success:hover {
    background: #0a5a40;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.data-editor .btn-primary {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}
.data-editor .btn-primary:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.data-editor .btn-secondary {
    background: var(--border);
    color: var(--text);
    border: none;
    padding: 8px 24px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}
.data-editor .btn-secondary:hover {
    background: #d0d8e6;
}

/* ─── Customer Footer ─── */
.customer-footer {
    margin-top: 32px;
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    border-top: 1px solid var(--border);
    padding-top: 20px;
}
.customer-footer i { margin: 0 6px; }
.customer-footer a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.customer-footer a:hover { text-decoration: underline; }

/* ─── Admin Styles ─── */
.admin-org-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    gap: 20px;
    margin: 16px 0;
}
.admin-org-card {
    background: var(--card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 20px 24px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
.admin-org-card:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.admin-org-card h4 {
    color: var(--primary);
    font-size: 17px;
    margin-bottom: 4px;
}
.admin-org-card .stats {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 12px;
}
.admin-org-card .actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.admin-org-card .actions button {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 5px 16px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.admin-org-card .actions button:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
}
.admin-org-card .actions .btn-danger {
    background: var(--danger);
}
.admin-org-card .actions .btn-danger:hover {
    background: #a01515;
}
.admin-report .btn {
    padding: 8px 20px;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    transition: var(--transition);
}
.admin-report .btn:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.pending-users-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
    gap: 16px;
    margin: 12px 0 24px;
}
.pending-user-card {
    background: var(--card-bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-left: 4px solid var(--warning);
}
.pending-user-card .info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pending-user-card .info .email {
    font-weight: 600;
    color: var(--primary);
    font-size: 13px;
}
.pending-user-card .info .org {
    font-size: 12px;
    color: var(--text-light);
}
.pending-user-card .actions {
    display: flex;
    gap: 8px;
}
.pending-user-card .actions button {
    border: none;
    padding: 5px 16px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}
.pending-user-card .actions .approve {
    background: var(--success);
    color: #fff;
}
.pending-user-card .actions .approve:hover {
    background: #0a5a40;
}
.pending-user-card .actions .reject {
    background: var(--danger);
    color: #fff;
}
.pending-user-card .actions .reject:hover {
    background: #a01515;
}

.settings-form {
    max-width: 500px;
    margin-top: 20px;
}
.settings-form .form-group { margin-bottom: 20px; }
.settings-form .form-group label {
    display: block;
    font-weight: 600;
    color: var(--text-light);
    font-size: 13px;
    margin-bottom: 6px;
}
.settings-form .form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: var(--card-bg);
    color: var(--text);
    transition: var(--transition);
}
.settings-form .form-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
    outline: none;
}
.settings-form .btn {
    padding: 10px 28px;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    transition: var(--transition);
}
.settings-form .btn:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ─── Modal ─── */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}
.modal-overlay.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 36px 40px;
    max-width: 600px;
    width: 90%;
    box-shadow: var(--shadow-xl);
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
    position: relative;
}
.modal-close-x {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 2;
}
.modal-close-x:hover {
    background: rgba(0,0,0,0.06);
    color: var(--danger);
    transform: rotate(90deg);
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-box h3 {
    font-size: 24px;
    color: var(--primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.modal-box .form-group { margin-bottom: 20px; }
.modal-box .form-group label {
    display: block;
    font-weight: 600;
    color: var(--text-light);
    font-size: 13px;
    margin-bottom: 6px;
}
.modal-box .form-group input,
.modal-box .form-group select,
.modal-box .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font);
    background: var(--card-bg);
    color: var(--text);
    transition: var(--transition);
}
.modal-box .form-group textarea {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}
.modal-box .form-group input[type="color"] {
    width: 60px;
    height: 42px;
    padding: 4px;
    cursor: pointer;
}
.modal-box .form-group input:focus,
.modal-box .form-group select:focus,
.modal-box .form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.08);
    outline: none;
}
.modal-box .btn-row {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.modal-box .btn-row .btn {
    padding: 10px 28px;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
}
.modal-box .btn-row .btn-primary {
    background: var(--primary);
    color: #fff;
}
.modal-box .btn-row .btn-primary:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.modal-box .btn-row .btn-secondary {
    background: var(--border);
    color: var(--text);
}
.modal-box .btn-row .btn-secondary:hover {
    background: #d0d8e6;
}
.modal-box .btn-row .btn-danger {
    background: var(--danger);
    color: #fff;
}
.modal-box .btn-row .btn-danger:hover {
    background: #a01515;
}
.modal-box .user-list { margin: 12px 0; }
.modal-box .user-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.modal-box .user-list-item .email { font-weight: 500; }
.modal-box .user-list-item .role {
    font-size: 11px;
    background: var(--border);
    padding: 2px 12px;
    border-radius: 30px;
    color: var(--text-light);
}
.modal-box .user-list-item .delete-user {
    color: var(--danger);
    cursor: pointer;
    transition: var(--transition);
}
.modal-box .user-list-item .delete-user:hover { transform: scale(1.2); }
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13px; font-weight: 500; }

/* ─── Responsive ─── */
@media (max-width:1024px) {
    .quadrant-grid, .insights-grid { grid-template-columns: repeat(2,1fr); }
    .trend-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:900px) {
    .charts-grid { grid-template-columns: 1fr; }
    .customer-container { padding: 0 16px 40px; margin: 0; border-radius: 0; }
    .customer-header { margin: 0 -16px 0 -16px; border-radius: 0; }
    .customer-header-top { padding: 16px 20px; flex-direction: column; align-items: flex-start; }
    .customer-header-bottom { padding: 12px 20px; flex-direction: column; align-items: stretch; }
    .header-bottom-left, .header-bottom-right { flex-wrap: wrap; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-group { flex-wrap: wrap; }
    .board-stats { flex-wrap: wrap; gap: 12px; }
    .kpi-row { grid-template-columns: 1fr 1fr; }
    .customer-tabs { flex-wrap: wrap; }
    .customer-tabs .tab-btn { padding: 10px 18px; font-size: 13px; }
    .customer-tabs .tab-btn[data-tab="data"] { margin-left: 0; }
    .insights-grid, .trend-grid { grid-template-columns: 1fr; }
    .insights-header { flex-direction: column; align-items: stretch; }
    .insights-header .right-controls { flex-direction: column; align-items: stretch; }
    .trends-header { flex-direction: column; align-items: stretch; }
    .admin-sidebar { width: 60px; }
    .admin-sidebar .nav-item span { display: none; }
    .admin-sidebar .nav-item { justify-content: center; padding: 12px; }
    .admin-content { padding: 16px; }
}
@media (max-width:600px) {
    .quadrant-grid, .kpi-row { grid-template-columns: 1fr; }
    .bar-item { flex-wrap: wrap; }
    .bar-item .bar-label { width: 100%; }
    .donut-group { flex-direction: column; gap: 18px; }
    table { font-size: 11px; }
    table th, table td { padding: 10px 14px; }
    .customer-header .brand-text h1 { font-size: 20px; }
    .customer-header .header-bottom-left .date-badge, .customer-header .header-bottom-right .date-badge { font-size: 11px; padding: 6px 14px; }
    .modal-box { padding: 20px; }
}
.table-scroll { overflow-x: auto; }
.report-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════
   Premium refresh — global button system + new components
   ═══════════════════════════════════════════════════════════ */

/* Headings now carry the platform's actual typographic identity - a
   serif display face, not just a bolder cut of the body sans. */
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.01em; font-weight: 600; }

/* Global button base — several buttons in the app (Refresh Report,
   Update Password, the new report/PDF controls) had no styling rule
   that actually matched their markup and were falling back to unstyled
   native browser buttons. This gives every .btn a consistent, premium
   look by default; the more specific scoped rules above still win
   where they apply. */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success, .btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 30px;
    font-family: var(--font);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn:hover, .btn-primary:hover, .btn-success:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.btn-secondary {
    background: var(--card-bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    box-shadow: none;
}
.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #9c1414; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-success { background: var(--success); }
.btn-success:hover { background: #094f39; }
.btn-pdf {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #b8873a 100%);
    color: #23180a;
}
.btn-pdf:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212, 168, 67, 0.35);
}
.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Performance Report toolbar */
.report-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.report-toolbar .filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.report-toolbar .filter-group label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
}
.report-toolbar select {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    min-width: 220px;
}
.report-toolbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Financial year settings row */
.fy-settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.fy-settings-row .form-group input[type="date"] {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font-family: var(--font);
}
@media (max-width:600px) {
    .fy-settings-row { grid-template-columns: 1fr; }
}

/* Load-error state (distinct from the genuine "no data yet" empty state) */
.btn-secondary i.fa-rotate-right { font-size: 12px; }

/* Subtle premium card lift across the app */
.kpi-card, .admin-org-card, .insights-grid > *, .trend-grid > * {
    will-change: transform;
}

/* Header PDF button needs slightly less horizontal padding to sit
   comfortably alongside the other header actions */
.customer-header .header-bottom-right .btn-pdf {
    padding: 10px 20px;
    box-shadow: 0 4px 12px rgba(212, 168, 67, 0.25);
}
.customer-header .header-bottom-right .btn-pdf:hover {
    box-shadow: 0 8px 22px rgba(212, 168, 67, 0.35);
}
.customer-header .header-bottom-left .date-badge#customerFYBadge,
.customer-header .header-bottom-right .date-badge#customerFYBadge {
    background: rgba(212, 168, 67, 0.18);
    color: #f0d080;
}
.customer-header .header-bottom-left .date-badge#customerFYBadge i,
.customer-header .header-bottom-right .date-badge#customerFYBadge i { color: #f0d080; }

/* ═══════════════════════════════════════════════════════════
   Strategy Framework manager (Settings → Balanced Scorecard / Custom)
   ═══════════════════════════════════════════════════════════ */
.modal-box-wide { max-width: 760px; }

.framework-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
.framework-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    transition: var(--transition);
}
.framework-option i { font-size: 18px; color: var(--text-light); margin-bottom: 4px; }
.framework-option .fo-title { font-weight: 700; font-size: 13px; }
.framework-option .fo-desc { font-size: 11px; color: var(--text-light); font-weight: 400; }
.framework-option:hover { border-color: var(--accent); }
.framework-option.active {
    border-color: var(--accent);
    background: rgba(37, 99, 235, 0.06);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.framework-option.active i,
.framework-option.active .fo-title { color: var(--accent); }

.perspective-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 6px;
}
.perspective-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
}
.perspective-row-move {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.perspective-row-move button {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: var(--transition);
}
.perspective-row-move button:hover:not(:disabled) { background: var(--bg-subtle, rgba(0,0,0,0.05)); color: var(--accent); }
.perspective-row-move button:disabled { opacity: 0.3; cursor: not-allowed; }

.perspective-row-icon-preview {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--persp-color, var(--primary));
    flex-shrink: 0;
    font-size: 13px;
}

.perspective-row-label {
    flex: 1 1 160px;
    min-width: 140px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
}

.perspective-row-icon-select {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    text-transform: capitalize;
}

.perspective-row-colors {
    display: flex;
    gap: 6px;
    align-items: center;
}
.persp-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--persp-color);
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
    display: inline-block;
}
.persp-swatch:hover { transform: scale(1.15); }
.persp-swatch.selected {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3px var(--persp-color);
}

.perspective-row-save,
.perspective-row-delete {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}
.perspective-row-save { background: var(--success); color: #fff; }
.perspective-row-save:hover { background: #094f39; transform: scale(1.08); }
.perspective-row-delete { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }
.perspective-row-delete:hover { background: var(--danger); color: #fff; }

@media (max-width: 640px) {
    .framework-toggle { grid-template-columns: 1fr; }
    .perspective-row { flex-direction: column; align-items: stretch; }
    .perspective-row-move { flex-direction: row; align-self: flex-end; }
}

/* ═══════════════════════════════════════════════════════════
   Account Settings — tabbed layout (Profile / Team / Security)
   ═══════════════════════════════════════════════════════════ */
.settings-tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1.5px solid var(--border);
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.settings-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    background: none;
    color: var(--text-light);
    font-family: var(--font);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1.5px;
    transition: var(--transition);
}
.settings-tab-btn:hover { color: var(--accent); }
.settings-tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.settings-tab-pane { display: none; }
.settings-tab-pane.active { display: block; animation: fadeIn 0.2s ease; }

.team-member-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.team-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
}
.team-member-info { display: flex; flex-direction: column; gap: 4px; }
.team-member-email {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.team-member-email i { color: var(--text-light); font-size: 16px; }
.team-member-you {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(37, 99, 235, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
}
.team-member-meta {
    font-size: 11px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 6px;
}
.team-member-remove {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--danger);
    background: transparent;
    color: var(--danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}
.team-member-remove:hover { background: var(--danger); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   Phase 3: Cascading Goals, Initiatives, Risk Register
   ═══════════════════════════════════════════════════════════ */

/* Shared status/priority badges and progress bars, used by goals and
   initiatives alike. */
.goal-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.goal-progress-bar {
    flex: 1;
    height: 3px;
    background: var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.goal-progress-bar .fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}
.goal-card-progress, .initiative-card .goal-card-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
}
.goal-progress-pct {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    min-width: 38px;
    text-align: right;
}
.goal-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.goal-meta-item {
    font-size: 11px;
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.goal-meta-item.overdue { color: var(--danger); font-weight: 600; }
.goal-meta-item i { font-size: 10px; }

/* Goal tree */
.goal-level { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.goal-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.goal-card:hover { box-shadow: var(--shadow-md); }
.goal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.goal-card-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    color: var(--text);
    display: flex;
    align-items: center;
    min-width: 0;
}
.goal-level-tag {
    margin-left: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    background: var(--light-bg);
    border: 1px solid var(--border);
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}
.goal-card-desc {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 3px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.goal-card-actions, .initiative-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.goal-card-actions button, .initiative-card-actions button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 11px;
}
.goal-card-actions button:hover, .initiative-card-actions button:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.goal-card-actions button.add-child-btn {
    width: auto;
    border-radius: 20px;
    padding: 0 14px;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--accent);
    border-color: rgba(201,162,75,0.4);
    background: rgba(201,162,75,0.06);
}
.goal-card-actions button.add-child-btn:hover {
    background: rgba(201,162,75,0.14);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}
.goal-card-actions button.danger:hover, .initiative-card-actions button.danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(220, 38, 38, 0.08);
}

/* Goal KPI multi-select checkboxes in the modal */
.goal-kpi-checkbox-list {
    max-height: 180px;
    overflow-y: auto;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    background: var(--card-bg);
}
.goal-kpi-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
}
.goal-kpi-checkbox input { flex-shrink: 0; }

/* Initiatives */
.initiative-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.initiative-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.initiative-card:hover { box-shadow: var(--shadow-md); }
.initiative-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.initiative-card-title { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--text); }
.initiative-card-desc {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 6px;
    line-height: 1.5;
}

/* Risk register */
.risk-score-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.table-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
}
.table-actions button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--card-bg);
    color: var(--text-light);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: 11px;
}
.table-actions button:hover { border-color: var(--accent); color: var(--accent); }
.table-actions button.danger:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(220, 38, 38, 0.08);
}

@media (max-width: 640px) {
    .initiative-list { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   Strategic Pillars — dashboard tiles
   ═══════════════════════════════════════════════════════════ */
.dashboard-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 28px 0 12px;
}
.dashboard-section-title i { font-size: 16px; }
.pillar-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}
.pillar-tile {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 4px solid var(--primary);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}
.pillar-tile:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.pillar-tile-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 10px;
}
.pillar-tile-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.pillar-tile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
/* ═══════════════════════════════════════════════════════════
   Strategic Compass hero — dashboard centerpiece
   Adapted from the validated mockup: full-bleed there, a contained
   rounded card here since it lives inside the existing padded app
   shell rather than owning the full viewport.
   ═══════════════════════════════════════════════════════════ */
.compass-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse 900px 500px at 50% -10%, #14294A 0%, #0D1E38 45%, #060F1E 100%);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin: 0 -36px -34px; /* full-width breakout, matching the header/tabs above; -34px bottom lets the KPI strip overlap up into it */
    padding-bottom: 34px;
}
.compass-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 600px 500px at 50% 45%, rgba(201,162,75,0.08), transparent 70%);
}
.compass-hero-inner { position: relative; padding: 4px 44px 8px; max-width: 1360px; margin: 0 auto; }

.hero-split { display: flex; align-items: center; gap: 40px; }
.hero-copy-left { flex: 0 1 420px; text-align: left; }
.kicker-left {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 3.5px;
    color: var(--accent-gold-light); text-transform: uppercase; font-weight: 500;
    margin-bottom: 16px; opacity: 0.85; text-align: left;
}
.hero-copy-left h1 {
    font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.14;
    color: #F7F4EC; letter-spacing: -0.4px; margin-bottom: 10px; text-align: left;
}
.hero-copy-left h1 em { font-style: italic; font-weight: 500; color: var(--accent-gold-light); }
.hero-sub { font-family: var(--font-mono); font-size: 11.5px; color: #8B93A6; letter-spacing: 0.4px; margin-bottom: 22px; }
.hero-stats-row { display: flex; gap: 30px; margin-bottom: 22px; }
.hero-stats-row .stat .n { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: #F7F4EC; line-height: 1; }
.hero-stats-row .stat .n .of { font-size: 14px; color: #8B93A6; font-family: var(--font); }
.hero-stats-row .stat .l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: #8B93A6; margin-top: 5px; }
.hero-stats-row .stat.flag .n { color: var(--accent-gold-light); }
.hero-rule { width: 40px; height: 1px; background: linear-gradient(90deg, var(--accent-gold), transparent); margin-bottom: 18px; }
.hero-pointer { display: flex; gap: 13px; align-items: flex-start; border-top: 1px solid rgba(234,209,150,0.18); padding-top: 16px; }
.hero-pointer .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-gold); margin-top: 6px; flex-shrink: 0; box-shadow: 0 0 8px rgba(201,162,75,0.6); }
.hero-pointer strong { font-family: var(--font-display); font-weight: 500; font-size: 13px; color: #F0ECE0; display: block; margin-bottom: 3px; }
.hero-pointer span { font-size: 11.5px; color: #8B93A6; line-height: 1.55; }

.instrument-huge { position: relative; flex: 1 1 auto; display: flex; justify-content: center; align-items: center; min-width: 0; }
.instrument-huge svg { width: 100%; max-width: 480px; height: auto; }
.compass-center-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.compass-center-label .score {
    font-family: var(--font-display); font-weight: 400; font-size: 54px; line-height: 1;
    background: linear-gradient(160deg, #FBF6E9, var(--accent-gold-light) 60%, var(--accent-gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.compass-center-label .score sup { font-size: 22px; font-weight: 400; -webkit-text-fill-color: var(--accent-gold); }
.compass-center-label .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 2.5px; color: #7E869B; text-transform: uppercase; margin-top: 10px; }

/* ─── KPI strip — bridges the dark hero and the light content below ─── */
.kpi-strip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: relative; z-index: 2; margin: 0 auto 40px;
    background: var(--card-bg); border-radius: 4px;
    box-shadow: 0 24px 60px -20px rgba(6,15,30,0.25), 0 1px 0 var(--border);
    max-width: calc(100% - 8px);
}
.kpi-cell { padding: 22px 26px; border-right: 1px solid var(--border); }
.kpi-cell:last-child { border-right: none; }
.kpi-cell .num { font-family: var(--font-mono); font-weight: 500; font-size: 28px; color: var(--text); line-height: 1; }
.kpi-cell .num.gold { color: var(--accent); }
.kpi-cell .num.oxblood { color: var(--danger); }
.kpi-cell .lbl { font-size: 10.5px; color: var(--text-light); margin-top: 8px; letter-spacing: 0.2px; }

/* ─── Pillars + Needs Attention, side by side below the fold ─── */
.lower-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; margin-bottom: 32px; }
.lower-grid.lower-grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
.lower-grid .panel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.lower-grid .panel-head h2 { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--text); }
.lower-grid .panel-head a { font-size: 11px; color: var(--accent); text-decoration: none; font-weight: 600; letter-spacing: 0.2px; }
.lower-grid .panel-scroll {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
.lower-grid .panel-scroll::-webkit-scrollbar { width: 5px; }
.lower-grid .panel-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.lower-grid .panel-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

.pillar-row { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: padding-left 0.15s ease; }
.pillar-row:first-child { border-top: 1px solid var(--border); }
.pillar-row:hover { padding-left: 6px; }
.pillar-row .swatch { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pillar-row .info { flex: 1; min-width: 0; }
.pillar-row .name { font-family: var(--font-display); font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pillar-row .meta { font-size: 10.5px; color: var(--text-light); margin-top: 2px; }
.pillar-row .track { width: 100px; height: 2px; background: var(--border); overflow: hidden; flex-shrink: 0; }
.pillar-row .track-fill { height: 100%; }
.pillar-row .pct { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; width: 36px; text-align: right; color: var(--text); flex-shrink: 0; }
.pillar-row .chevron { color: var(--text-light); font-size: 12px; opacity: 0.5; flex-shrink: 0; }

.attn-item { padding: 15px 0; border-bottom: 1px solid var(--border); }
.attn-item:first-child { border-top: 1px solid var(--border); }
.attn-item .tag {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
    font-weight: 600; padding: 2px 7px; border-radius: 3px;
}
.attn-item .tag.critical { background: var(--danger-light); color: var(--danger); }
.attn-item .tag.watch { background: var(--warning-light); color: var(--warning); }
.attn-item .name { font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--text); margin-top: 7px; }
.attn-item .meta { font-size: 10.5px; color: var(--text-light); margin-top: 3px; }

@media (max-width: 980px) {
    .hero-main { grid-template-columns: 1fr; }
    .kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .lower-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Analysis tab intro (PESTLE/SWOT) — same premium dark language as
   the Dashboard hero, scaled down since there's no compass here, and
   deliberately NOT extended into the actual analysis content below,
   since that's dense text that needs to stay on a light, readable
   background. ─── */
.analysis-intro {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse 700px 400px at 80% -20%, #14294A 0%, #0D1E38 45%, #060F1E 100%);
    border-radius: var(--radius-md);
    margin: 0 -36px 24px;
    padding: 32px 44px 26px;
}
.analysis-intro .kicker {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 3px;
    color: var(--accent-gold-light); text-transform: uppercase; font-weight: 500; margin-bottom: 12px; opacity: 0.85;
}
.analysis-intro h1 {
    font-family: var(--font-display); font-weight: 400; font-size: 24px;
    color: #F7F4EC; margin-bottom: 12px; display: flex; align-items: center; gap: 10px;
}
.analysis-intro h1 i { color: var(--accent-gold); font-size: 20px; }
.analysis-intro p { font-size: 12.5px; line-height: 1.6; color: #A7AEBF; max-width: 640px; margin-bottom: 16px; }
.analysis-intro .hero-rule { width: 32px; height: 1px; background: linear-gradient(90deg, var(--accent-gold), transparent); margin-bottom: 14px; }
.analysis-intro .refresh-note { font-size: 11.5px; color: #8B93A6; }
.analysis-intro .refresh-note strong { color: #EAD196; font-weight: 600; }

/* ─── Cascade legend (Data Management) — a quiet visual reminder of the
   real hierarchy, so it's obvious what belongs under what. ─── */
.cascade-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--light-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 18px;
    margin-bottom: 16px;
}
.cascade-legend .cascade-step {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text);
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 20px;
}
.cascade-legend i {
    color: var(--text-light);
    font-size: 10px;
}
.cascade-legend .cascade-hint {
    font-size: 11px;
    color: var(--text-light);
    margin-left: 4px;
}
.goal-cascade-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.goal-cascade-cell select {
    font-size: 11px !important;
    padding: 5px 8px !important;
}
.goal-cascade-cell .cascade-cell-label {
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-light);
}

/* ─── Tier chooser — explicit, visual first step for adding to the
   strategy hierarchy, so the Pillar/Goal/Objective decision is made
   upfront rather than inferred from a dropdown inside a generic form. ─── */
.tier-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 16px;
}
.tier-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 24px 16px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    background: var(--light-bg);
    cursor: pointer;
    transition: var(--transition);
}
.tier-choice-card i {
    font-size: 28px;
    color: var(--primary);
}
.tier-choice-card .tc-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
}
.tier-choice-card .tc-desc {
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.4;
}
.tier-choice-card:hover:not(:disabled) {
    border-color: var(--accent-gold);
    background: rgba(201,162,75,0.06);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.tier-choice-card:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--light-bg);
}
.tier-choice-card:disabled .tc-desc {
    color: var(--warning);
    font-weight: 600;
}
@media (max-width: 640px) {
    .tier-choice-grid { grid-template-columns: 1fr; }
}

/* Small colored icon badge conveying tier (Pillar/Goal/Objective),
   deliberately separate from the status color used on the card's left
   border and status pill. */
.tier-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    margin-right: 8px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Tidy tick/cross action buttons for the Data Management table - icon
   only, small, colored clearly enough for instant recognition since
   these are frequent, meaningful per-row actions. */
.row-action-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: 4px;
    transition: var(--transition);
}
.row-action-btn.accept {
    background: rgba(43,93,69,0.1);
    color: var(--success);
}
.row-action-btn.accept:hover {
    background: var(--success);
    color: #fff;
}
.row-action-btn.reject {
    background: rgba(122,46,40,0.08);
    color: var(--danger);
}
.row-action-btn.reject:hover {
    background: var(--danger);
    color: #fff;
}

/* Collapse toggle for tree nodes with children - lets a long hierarchy
   stay manageable instead of always rendering every level at once. */
.goal-collapse-toggle {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    flex-shrink: 0;
    font-size: 11px;
    transition: transform 0.2s ease;
}
.goal-collapse-toggle.collapsed { transform: rotate(-90deg); }
.goal-collapse-spacer { display: inline-block; width: 24px; flex-shrink: 0; }
.goal-children-wrap.collapsed { display: none; }

.compass-arc-group { transition: opacity 0.15s ease; }
.compass-arc-group:hover { opacity: 0.82; }

/* ─── Client Analytics ─── */
.analytics-summary-row { display: flex; gap: 16px; margin-bottom: 24px; }
.analytics-stat {
    background: var(--card-bg, #fff); border: 1px solid var(--border, #E7E2D5); border-radius: 10px;
    padding: 18px 24px; flex: 1;
}
.analytics-stat-num { font-family: var(--font-display); font-weight: 500; font-size: 28px; color: var(--primary); line-height: 1; }
.analytics-stat-label { font-size: 12px; color: var(--neutral); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.analytics-bar-list { display: flex; flex-direction: column; gap: 10px; }
.analytics-bar-row { display: grid; grid-template-columns: 140px 1fr 90px; align-items: center; gap: 14px; }
.analytics-bar-country { font-size: 13.5px; font-weight: 600; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analytics-bar-track { background: var(--light-bg, #FAF9F6); border-radius: 6px; height: 10px; overflow: hidden; }
.analytics-bar-fill { background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-light)); height: 100%; border-radius: 6px; }
.analytics-bar-count { font-size: 12.5px; color: var(--neutral); text-align: right; white-space: nowrap; }
.analytics-bar-pct { color: var(--neutral); opacity: 0.7; }
.analytics-bar-row-unset .analytics-bar-country { color: var(--neutral); font-style: italic; font-weight: 400; }
.analytics-bar-row-unset .analytics-bar-fill { background: var(--neutral); opacity: 0.4; }

/* ─── Input guidance tips ─── */
.input-tip {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 11.5px; line-height: 1.4; color: var(--text-light, #6b7280);
    margin-top: 6px; font-style: italic;
}
.input-tip i { color: var(--accent-gold, #C9A24B); font-size: 11px; margin-top: 1.5px; flex-shrink: 0; }

/* ─── Admin Platform Dashboard ─── */
.admin-dash-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px; margin-bottom: 28px;
}
.admin-dash-stat {
    background: var(--card-bg, #fff); border: 1px solid var(--border, #E7E2D5);
    border-radius: 10px; padding: 18px 20px;
}
.admin-dash-stat-num { font-family: var(--font-display); font-weight: 500; font-size: 30px; color: var(--primary); line-height: 1; }
.admin-dash-stat-label { font-size: 12px; color: var(--neutral); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.admin-dash-stat-sub { font-size: 11.5px; color: var(--text-light, #6b7280); margin-top: 4px; }
.admin-dash-stat.flag { border-color: var(--warning, #B8863A); }
.admin-dash-stat.flag .admin-dash-stat-num { color: var(--warning, #B8863A); }

.admin-dash-section { margin-bottom: 28px; }
.admin-dash-section h4 {
    font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px;
}
.admin-dash-section h4 .count-badge {
    background: var(--warning-light, #FBF3E4); color: var(--warning, #B8863A);
    font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px;
}
.admin-dash-empty { color: var(--neutral); font-size: 13px; padding: 14px 0; }

.admin-dash-list { display: flex; flex-direction: column; gap: 8px; }
.admin-dash-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--card-bg, #fff); border: 1px solid var(--border, #E7E2D5);
    border-radius: 8px; padding: 11px 16px; font-size: 13px;
}
.admin-dash-row-org { font-weight: 600; color: var(--primary); }
.admin-dash-row-detail { color: var(--text-light, #6b7280); font-size: 12px; }
.admin-dash-row-tag {
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px;
    white-space: nowrap; text-transform: uppercase; letter-spacing: 0.3px;
}
.admin-dash-row-tag.urgent { background: var(--danger-light, #F5E8E6); color: var(--danger, #7A2E28); }
.admin-dash-row-tag.warn { background: var(--warning-light, #FBF3E4); color: var(--warning, #B8863A); }
.admin-dash-row-tag.neutral { background: var(--light-bg, #FAF9F6); color: var(--neutral); }

/* ─── Notifications ─── */
.notif-bell-wrap { position: relative; }
.notif-badge {
    position: absolute; top: -5px; right: -5px;
    background: var(--danger, #7A2E28); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 1;
    min-width: 16px; height: 16px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; pointer-events: none;
}
.notif-dropdown {
    position: fixed; z-index: 1000;
    width: 360px; max-height: 420px; overflow-y: auto;
    background: var(--card-bg, #fff); border: 1px solid var(--border, #E7E2D5);
    border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.notif-dropdown-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border, #E7E2D5);
    font-weight: 700; font-size: 13px; color: var(--primary, #0D1E38);
    position: sticky; top: 0; background: var(--card-bg, #fff);
}
.notif-mark-all {
    background: none; border: none; color: var(--accent-gold, #C9A24B);
    font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 4px;
}
.notif-dropdown-list { padding: 6px; }
.notif-item {
    display: flex; gap: 10px; padding: 10px 10px; border-radius: 8px;
    cursor: pointer; align-items: flex-start;
}
.notif-item:hover { background: var(--light-bg, #FAF9F6); }
.notif-item.unread { background: var(--warning-light, #FBF3E4); }
.notif-item.unread:hover { background: #F5EAD0; }
.notif-item-icon {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.notif-item-icon.urgent { background: var(--danger-light, #F5E8E6); color: var(--danger, #7A2E28); }
.notif-item-icon.warning { background: var(--warning-light, #FBF3E4); color: var(--warning, #B8863A); }
.notif-item-title { font-size: 12.5px; font-weight: 700; color: var(--primary, #0D1E38); margin-bottom: 2px; }
.notif-item-message { font-size: 11.5px; color: var(--text-light, #6b7280); line-height: 1.4; }
.notif-empty-state { padding: 30px 16px; text-align: center; color: var(--neutral, #6B7280); font-size: 12.5px; }

/* ─── Guided Setup Wizard ─── */
.wizard-box { max-width: 560px; text-align: center; }
.wizard-progress { height: 4px; background: var(--border, #E7E2D5); border-radius: 2px; margin-bottom: 28px; overflow: hidden; }
.wizard-progress-bar { height: 100%; background: var(--accent-gold, #C9A24B); border-radius: 2px; transition: width 0.3s ease; }
.wizard-icon { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-gold-light, #EAD196), var(--accent-gold, #C9A24B)); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--primary, #0D1E38); margin: 0 auto 18px; }
.wizard-title { font-size: 20px; font-weight: 700; color: var(--primary, #0D1E38); margin-bottom: 8px; }
.wizard-subtitle { font-size: 13.5px; color: var(--text-light, #6b7280); margin-bottom: 24px; line-height: 1.5; }
.wizard-step-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent-gold, #C9A24B); margin-bottom: 6px; }
.wizard-form-group { text-align: left; margin-bottom: 16px; }
.wizard-form-group label { display: block; font-size: 12.5px; font-weight: 600; color: var(--primary, #0D1E38); margin-bottom: 5px; }
.wizard-form-group input, .wizard-form-group textarea {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border, #E7E2D5); border-radius: 8px;
    font-size: 13.5px; font-family: inherit; box-sizing: border-box;
}
.wizard-breadcrumb { font-size: 12px; color: var(--text-light, #6b7280); margin-bottom: 18px; text-align: left; }
.wizard-breadcrumb strong { color: var(--primary, #0D1E38); }
.wizard-btn-row { display: flex; gap: 10px; margin-top: 24px; justify-content: center; }
.wizard-skip-link { display: block; text-align: center; margin-top: 14px; font-size: 12px; color: var(--text-light, #6b7280); cursor: pointer; text-decoration: underline; }
.wizard-error { color: var(--danger, #7A2E28); font-size: 12.5px; margin-top: 8px; text-align: left; }

/* ─── Comments ─── */
.comments-box { max-width: 480px; }
.comments-list { max-height: 320px; overflow-y: auto; margin: 16px 0; display: flex; flex-direction: column; gap: 12px; }
.comment-item { padding: 10px 12px; background: var(--light-bg, #FAF9F6); border-radius: 8px; }
.comment-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.comment-item-author { font-size: 12px; font-weight: 700; color: var(--primary, #0D1E38); }
.comment-item-date { font-size: 10.5px; color: var(--text-light, #6b7280); }
.comment-item-body { font-size: 13px; color: var(--text, #232A38); line-height: 1.5; white-space: pre-wrap; }
.comment-item-delete { background: none; border: none; color: var(--text-light, #6b7280); cursor: pointer; font-size: 11px; padding: 2px 4px; }
.comment-item-delete:hover { color: var(--danger, #7A2E28); }
.comments-empty { text-align: center; color: var(--text-light, #6b7280); font-size: 12.5px; padding: 20px 0; }
.comments-add-row { display: flex; gap: 8px; align-items: flex-end; }
.comments-add-row textarea { flex: 1; padding: 8px 10px; border: 1.5px solid var(--border, #E7E2D5); border-radius: 8px; font-family: inherit; font-size: 13px; resize: vertical; }
.comment-count-btn { position: relative; background: transparent; border: 1px solid var(--border, #E7E2D5); border-radius: 6px; padding: 4px 8px; font-size: 11.5px; color: var(--text-light, #6b7280); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.comment-count-btn:hover { border-color: var(--accent-gold, #C9A24B); color: var(--primary, #0D1E38); }

/* ─── CSV Import ─── */
.csv-import-box { max-width: 560px; }
.csv-drop-zone {
    border: 2px dashed var(--border, #E7E2D5); border-radius: 10px; padding: 32px 20px;
    text-align: center; margin: 16px 0; cursor: pointer; transition: border-color 0.15s;
}
.csv-drop-zone:hover, .csv-drop-zone.dragover { border-color: var(--accent-gold, #C9A24B); }
.csv-drop-zone i { font-size: 28px; color: var(--accent-gold, #C9A24B); margin-bottom: 10px; display: block; }
.csv-drop-zone-text { font-size: 13px; color: var(--text-light, #6b7280); }
.csv-template-link { display: block; text-align: center; font-size: 12px; margin-top: 4px; }
.csv-preview-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.csv-preview-stat { background: var(--light-bg, #FAF9F6); border-radius: 8px; padding: 12px 14px; }
.csv-preview-stat-num { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--primary, #0D1E38); }
.csv-preview-stat-label { font-size: 11px; color: var(--text-light, #6b7280); text-transform: uppercase; letter-spacing: 0.5px; }
.csv-preview-list { font-size: 12px; color: var(--text-light, #6b7280); max-height: 100px; overflow-y: auto; margin-bottom: 12px; }
.csv-error-list { background: var(--danger-light, #F5E8E6); border-radius: 8px; padding: 12px 14px; font-size: 12.5px; color: var(--danger, #7A2E28); margin: 12px 0; max-height: 150px; overflow-y: auto; }
.csv-error-list div { margin-bottom: 4px; }

/* ─── Activity Log ─── */
.activity-log-list { display: flex; flex-direction: column; gap: 10px; }
.activity-log-row { display: flex; gap: 14px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; align-items: flex-start; }
.activity-log-icon { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.activity-log-summary { font-size: 13.5px; color: var(--text); }
.activity-log-entity-name { color: var(--primary); font-style: italic; }
.activity-log-details { font-size: 12.5px; color: var(--text-light); margin-top: 4px; font-family: var(--font-mono, monospace); }
.activity-log-time { font-size: 11px; color: var(--text-light); margin-top: 6px; }

/* ─── Initiative budget tracking ─── */
.initiative-budget-row { margin: 8px 0; }
.initiative-budget-bar { background: var(--border); border-radius: 6px; height: 6px; overflow: hidden; margin-bottom: 4px; }
.initiative-budget-bar .fill { height: 100%; border-radius: 6px; transition: width 0.2s; }
.initiative-budget-label { font-size: 11.5px; color: var(--text-light); }

/* ─── Mobile fixes (max-width: 768px) ───
   Three real problems found by actually auditing the app at a 375px
   viewport, not assumed: the KPI and Risk tables were the same wide
   desktop table hidden behind an undiscoverable horizontal scroll,
   with Target/Actual/Status sitting off-screen; the compass hero
   squeezed into a horizontal row it couldn't fit, clipping the
   Overall Progress figure; and the Data Management tab kept its
   desktop "pushed right, gold button" treatment even once the tab
   list itself switched to a vertical stack, where that treatment
   has no visual logic left and just looks like a stray button. */
@media (max-width: 768px) {

    /* KPI editor and Risk Register tables become stacked cards -
       each row a card, each cell showing its own label via
       data-label, rather than a table requiring horizontal scroll
       to reach the fields people actually edit. */
    .table-scroll { overflow-x: visible; }
    .table-wrap table,
    .table-wrap thead,
    .table-wrap tbody,
    .table-wrap tr,
    .table-wrap td { display: block; width: 100%; }
    .table-wrap thead { position: absolute; left: -9999px; } /* hidden, not removed - screen readers can still reach it if needed */
    .table-wrap tbody tr {
        background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
        margin-bottom: 12px; padding: 12px 14px 4px;
    }
    .table-wrap tbody td {
        border: none; padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .table-wrap tbody td[data-label]::before {
        content: attr(data-label); font-size: 11px; font-weight: 700; color: var(--text-light);
        text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0;
    }
    .table-wrap tbody td[data-label] > *:not(.status-badge) { flex: 1; max-width: 65%; }
    .table-wrap tbody td[data-label="Actions"] { justify-content: flex-end; gap: 8px; }
    .table-wrap tbody td[data-label="Actions"]::before { display: none; }
    .table-wrap tbody td:first-child { padding-top: 4px; } /* the Pillar/Goal/Objective cascade cell - already has its own internal labels */
    .table-wrap tbody td svg { margin-left: auto; } /* the Trend sparkline */

    /* Dashboard compass: stack instead of squeezing into a row that
       can't fit both the stats and a 480px instrument - the compass
       already scales down responsively once it has the full width
       to itself. */
    .hero-split { flex-direction: column; gap: 24px; align-items: stretch; }
    .instrument-huge { width: 100%; }
    .compass-center-label .score { font-size: 40px; }

    /* Data Management tab: reset the desktop "primary action, pushed
       right" treatment entirely - once the tab list is a vertical
       stack (see the existing 900px rule above), that treatment has
       no layout left to justify it and just reads as a random
       highlighted button among plain text tabs. */
    .customer-tabs .tab-btn[data-tab="data"] {
        background: transparent; color: #8B93A6; border-radius: 0; margin: 0;
        padding: 10px 18px; font-weight: 600; border-bottom: 3px solid transparent;
    }
    .customer-tabs .tab-btn[data-tab="data"]:hover { background: transparent; color: #F0ECE0; }
    .customer-tabs .tab-btn[data-tab="data"].active {
        background: transparent; color: #F5F1E7; border-bottom-color: var(--accent-gold);
    }

    /* Header icon row: the container is only ~263px wide here, and 7
       icons at their desktop 32px size with 8px gaps need ~280px -
       a genuine overflow, not a rounding issue. Shrinking slightly
       fits everything on one row instead of leaving one icon
       orphaned on a line by itself. */
    .header-bottom-right {
        display: grid; grid-template-columns: repeat(4, 28px); gap: 6px; justify-content: start;
    }
    .header-bottom-right .header-icon-btn, .header-bottom-right .notif-bell-wrap button {
        width: 28px; height: 28px; font-size: 11px;
    }
    .header-bottom-right .notif-bell-wrap { width: 28px; }
}

/* ─── Scenario Planning ───
   Deliberately purple, not amber - amber already means "at risk"
   everywhere else in this app, and a hypothetical scenario is not a
   warning. The banner and dashed borders throughout this tab exist
   for one reason: making it visually impossible to mistake this for
   the real, live dashboard if someone screenshots it or glances at
   it out of context. */
.scenario-banner {
    display: flex; align-items: flex-start; gap: 12px;
    background: #F3EFFB; border: 1.5px dashed #7B5FB8; border-radius: 10px;
    padding: 14px 18px; margin-bottom: 20px; font-size: 13px; color: #4A3B6B;
}
.scenario-banner i { font-size: 18px; color: #7B5FB8; margin-top: 2px; flex-shrink: 0; }
.scenario-banner strong { display: block; margin-bottom: 2px; color: #3D2E5C; }

.scenario-goal-card {
    background: var(--card-bg); border: 1.5px dashed #B8A4DE; border-radius: 10px;
    padding: 14px 18px; margin-bottom: 10px;
}
.scenario-goal-title { font-size: 13.5px; font-weight: 700; color: var(--primary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.scenario-goal-title .tier-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 10px; background: #EDE6FA; color: #7B5FB8; }
.scenario-progress-row { display: flex; align-items: center; gap: 10px; }
.scenario-progress-bar { flex: 1; height: 8px; background: var(--border); border-radius: 6px; overflow: hidden; }
.scenario-progress-bar .fill { height: 100%; background: #7B5FB8; border-radius: 6px; transition: width 0.25s ease; }
.scenario-progress-pct { font-size: 13px; font-weight: 700; color: #7B5FB8; min-width: 42px; text-align: right; }

.scenario-kpi-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 0 10px 22px;
    border-top: 1px dashed var(--border); margin-top: 8px; flex-wrap: wrap;
}
.scenario-kpi-name { font-size: 12.5px; color: var(--text); flex: 1; min-width: 160px; }
.scenario-kpi-target { font-size: 11px; color: var(--text-light); }
.scenario-kpi-input-wrap { display: flex; align-items: center; gap: 8px; }
.scenario-kpi-input-wrap input[type="range"] { width: 120px; accent-color: #7B5FB8; }
.scenario-kpi-value { font-size: 12.5px; font-weight: 700; color: #7B5FB8; min-width: 60px; text-align: right; font-family: var(--font-mono, monospace); }
.scenario-kpi-changed { background: #F3EFFB; }

/* ─── Sign in with Google ─── */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border, #E7E2D5); }
.auth-divider span { font-size: 12px; color: var(--text-light, #6b7280); text-transform: uppercase; letter-spacing: 0.5px; }
.btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 12px; background: #fff; color: #3c4043;
    border: 1.5px solid var(--border, #dadce0); border-radius: 30px;
    font-weight: 600; font-size: 14.5px; text-decoration: none;
    box-sizing: border-box; transition: var(--transition);
}
.btn-google:hover { background: #f8f9fa; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* ─── Wizard: framework choice + template choice (Expanded Setup Wizard) ─── */
.wizard-framework-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.wizard-radio-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    border: 1.5px solid var(--border, #E7E2D5); border-radius: 10px; padding: 12px 8px; cursor: pointer;
    transition: var(--transition);
}
.wizard-radio-card input[type="radio"] { margin-bottom: 4px; }
.wizard-radio-card:has(input:checked) { border-color: var(--accent-gold, #C9A24B); background: #FBF6E9; }
.wizard-radio-card .wf-title { font-size: 12.5px; font-weight: 700; color: var(--primary, #0D1E38); }
.wizard-radio-card .wf-desc { font-size: 10.5px; color: var(--text-light, #6b7280); }

.wizard-fy-details { text-align: left; margin-bottom: 16px; }
.wizard-fy-details summary { font-size: 12.5px; font-weight: 600; color: var(--text-light, #6b7280); cursor: pointer; }

.wizard-template-choice { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; text-align: left; }
.wizard-choice-card {
    display: flex; flex-direction: column; gap: 4px; text-align: left;
    border: 1.5px solid var(--border, #E7E2D5); border-radius: 12px; padding: 16px 18px;
    background: var(--card-bg, #fff); cursor: pointer; transition: var(--transition); width: 100%;
}
.wizard-choice-card:hover { border-color: var(--accent-gold, #C9A24B); box-shadow: 0 4px 12px rgba(201,162,75,0.15); }
.wizard-choice-card i { font-size: 20px; color: var(--accent-gold, #C9A24B); margin-bottom: 4px; }
.wizard-choice-card .wc-title { font-size: 14.5px; font-weight: 700; color: var(--primary, #0D1E38); }
.wizard-choice-card .wc-desc { font-size: 12px; color: var(--text-light, #6b7280); line-height: 1.4; }

/* ─── Quick Add ─── */
.quick-add-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.quick-add-option {
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
    border: 1.5px solid var(--border, #E7E2D5); border-radius: 12px; padding: 20px 12px;
    background: var(--card-bg, #fff); cursor: pointer; transition: var(--transition);
}
.quick-add-option:hover { border-color: var(--accent-gold, #C9A24B); box-shadow: 0 4px 12px rgba(201,162,75,0.15); }
.quick-add-option i { font-size: 22px; color: var(--accent-gold, #C9A24B); }
.quick-add-option span { font-size: 13px; font-weight: 700; color: var(--primary, #0D1E38); }