/* Portal color tokens. Components read --cp-*. Bootstrap reads the --bs-* bridge. */

:root {
    --cp-primary: #E35205;
    --cp-secondary: #004C97;
    --cp-primary-hover: color-mix(in srgb, var(--cp-primary) 82%, #000);
    --cp-secondary-hover: color-mix(in srgb, var(--cp-secondary) 82%, #000);
    --cp-bg: #F3F4F7;
    --cp-surface: #FFFFFF;
    --cp-text: #1A1A1A;
    --cp-text-muted: #5E6570;
    --cp-border: #D6DAE1;
    --cp-highlight: #FFD100;
    --cp-highlight-hover: #E6BD00;
    --cp-highlight-soft: #FFE2CC;
    --cp-secondary-strong: #0F6FE6;
    --cp-admin-primary: #0F766E;
    --cp-admin-secondary: #1E3A5F;
    --cp-admin-bg: #E1EAEB;

    /* Role icon colors — shared by the top-nav user avatar and the Users grid name column */
    --role-developer: #683E82;
    --role-superuser: #B9770E;
    --role-clientadmin: #086C86;
    --role-reportbuilder: #2E7D32;

    --bs-primary: var(--cp-secondary);
    --bs-link-color: var(--cp-secondary);
    --bs-link-hover-color: var(--cp-secondary-hover);
    --bs-body-bg: var(--cp-bg);
    --bs-body-color: var(--cp-text);
    --bs-border-color: var(--cp-border);

    --chart-primary: var(--cp-primary);
    --chart-secondary: var(--cp-secondary);
    --maint-primary: var(--cp-admin-primary);
    --maint-secondary: var(--cp-admin-secondary);
    --maint-bg: var(--cp-admin-bg);
    --report-bg: var(--cp-bg);
    --page-bg: var(--cp-bg);
    --bg-page: var(--cp-bg);
    --bg-card: var(--cp-surface);
    --text: var(--cp-text);
    --text-muted: var(--cp-text-muted);
    --border: var(--cp-border);
    --brand-orange: var(--cp-primary);
    --brand-blue: var(--cp-secondary);
    --brand-orange-dark: var(--cp-primary-hover);
    --brand-blue-hover: var(--cp-secondary-hover);
    --brand-yellow: var(--cp-highlight);
    --link: var(--cp-secondary);
    --link-hover: var(--cp-secondary-hover);
    --icon-default: var(--cp-secondary);
    --icon-hover: var(--cp-primary-hover);
    --bg-muted: #EDF0F4;
    --shadow-1: 0 2px 4px rgba(0,0,0,0.08);
    --shadow-2: 0 4px 12px rgba(0,0,0,0.12);
    --focus-ring: #5CB3FF;
    --focus-ring-shadow: rgba(76,166,255,0.35);
    --brand-yellow-dark: var(--cp-highlight-hover);
    --brand-orange-light: var(--cp-highlight-soft);
    --brand-blue-strong: var(--cp-secondary-strong);
    --row-odd: #F8FAFD;
    --row-even: #FFFFFF;
    --dt-header-bg: #EAF0F7;
    --dt-header-text: var(--cp-secondary);
    --dt-row-hover: rgba(255,209,0,0.18);
    --dt-row-selected: rgba(0, 76, 151, 0.10);
}

html[data-theme="dark"] {
    --cp-bg: color-mix(in srgb, #F3F4F7 18%, #3B4452);
    --cp-surface: #424C5D;
    --cp-text: #FAFAFF;
    --cp-text-muted: #C8CFDA;
    --cp-border: #6A7690;
    --cp-primary-hover: color-mix(in srgb, var(--cp-primary) 65%, #fff);
    --cp-secondary-hover: color-mix(in srgb, var(--cp-secondary) 65%, #fff);
    --bg-page: var(--cp-bg);
    --page-bg: var(--cp-bg);
    --bg-card: var(--cp-surface);
    --text: var(--cp-text);
    --text-muted: var(--cp-text-muted);
    --border: var(--cp-border);
    --brand-blue: var(--cp-secondary);
    --brand-blue-hover: var(--cp-secondary-hover);
    --brand-orange-dark: var(--cp-primary-hover);
    --bg-muted: #4B5668;
    --blue-ov-08: rgba(26,140,255,.08);
    --blue-ov-12: rgba(26,140,255,.12);
    --blue-ov-20: rgba(26,140,255,.20);
    --dt-header-bg: #2A3F5F;
    --dt-header-text: #FFFFFF;
    --row-odd: #2D3748;
    --row-even: #323E52;
    --dt-row-hover: var(--blue-ov-12);
    --dt-row-selected: rgba(26, 140, 255, 0.16);
    --focus-ring: #6BB6FF;
    --focus-ring-shadow: rgba(90,160,255,.35);
    --shadow-1: 0 6px 18px rgba(0,0,0,.28);
    --shadow-2: 0 10px 30px rgba(0,0,0,.38);
    --icon-default: #FAFAFF;
    --icon-hover: var(--brand-blue-hover);

    /* Role icon colors (dark) — brighter tones for contrast on dark surfaces */
    --role-developer: #B79CD1;
    --role-superuser: #F0C24B;
    --role-clientadmin: #4FD1C5;
    --role-reportbuilder: #81C784;
}

/* Compiled Bootstrap bakes button colors. Point the button variables at the role tokens. */
.btn-primary {
    --bs-btn-bg: var(--cp-secondary);
    --bs-btn-border-color: var(--cp-secondary);
    --bs-btn-hover-bg: var(--cp-secondary-hover);
    --bs-btn-hover-border-color: var(--cp-secondary-hover);
    --bs-btn-active-bg: var(--cp-secondary-hover);
    --bs-btn-active-border-color: var(--cp-secondary-hover);
    --bs-btn-disabled-bg: var(--cp-secondary);
    --bs-btn-disabled-border-color: var(--cp-secondary);
}

body.cp-admin {
    --cp-primary: var(--cp-admin-primary);
    --cp-secondary: var(--cp-admin-secondary);
    --cp-bg: var(--cp-admin-bg);
    --cp-primary-hover: color-mix(in srgb, var(--cp-admin-primary) 82%, #000);
    --cp-secondary-hover: color-mix(in srgb, var(--cp-admin-secondary) 82%, #000);
    --chart-primary: var(--cp-primary);
    --chart-secondary: var(--cp-secondary);
    --brand-orange: var(--cp-primary);
    --brand-blue: var(--cp-secondary);
    --brand-orange-dark: var(--cp-primary-hover);
    --brand-blue-hover: var(--cp-secondary-hover);
    --page-bg: var(--cp-bg);
    --bg-page: var(--cp-bg);
    --link: var(--cp-secondary);
    --icon-default: var(--cp-secondary);
    --bs-primary: var(--cp-secondary);
    --bs-link-color: var(--cp-secondary);
    --bs-link-hover-color: var(--cp-secondary-hover);
    --bs-body-bg: var(--cp-bg);
}

html[data-theme="dark"] body.cp-admin {
    --cp-bg: color-mix(in srgb, var(--cp-admin-bg) 18%, #3B4452);
    --cp-primary-hover: color-mix(in srgb, var(--cp-admin-primary) 65%, #fff);
    --cp-secondary-hover: color-mix(in srgb, var(--cp-admin-secondary) 65%, #fff);
    --bg-page: var(--cp-bg);
    --page-bg: var(--cp-bg);
    --brand-orange-dark: var(--cp-primary-hover);
    --brand-blue-hover: var(--cp-secondary-hover);
}

.cp-text-primary,
.text-chart-primary {
    color: var(--cp-primary, #E35205);
}

/* Title words stay primary. The icon beside the title follows secondary.
   Dark mode lightens that secondary so it stays visible on the dark card. */
h1 > i[class*="fa-"] {
    color: var(--cp-secondary);
}

html[data-theme="dark"] h1 > i[class*="fa-"] {
    color: color-mix(in srgb, var(--cp-secondary) 35%, var(--cp-text));
}

.cp-text-secondary,
.text-chart-secondary {
    color: var(--cp-secondary, #004C97);
}

.cp-accent,
.accent-chart-primary {
    background: var(--cp-primary, #E35205);
    border-color: var(--cp-primary, #E35205);
    color: #fff;
}

/* Role icon utility classes — shared by the top-nav user avatar and any grid showing a user's
   role (e.g. the Users grid name column). Colors come from the --role-* tokens above so light
   and dark mode stay in sync automatically. */
.role-icon-developer {
    color: var(--role-developer);
}

.role-icon-superuser {
    color: var(--role-superuser);
}

.role-icon-clientadmin {
    color: var(--role-clientadmin);
}

.role-icon-reportbuilder {
    color: var(--role-reportbuilder);
}