/* ==========================================================================
   FinMinion brand theme — "CA India / blue & gold"
   Navy (primary) · Gold (accent / warning) · Green (success) · Orange (info)

   Loaded AFTER theme.min.css and radzen/material.css, so these overrides win
   for both the Phoenix layout and every Radzen component.
   ========================================================================== */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {

    /* ---- Source palette ---- */
    --ca-navy:       #003a70;
    --ca-navy-rgb:   0, 58, 112;
    --ca-gold:       #f0a500;
    --ca-gold-rgb:   240, 165, 0;
    --ca-green:      #3e8914;
    --ca-green-rgb:  62, 137, 20;
    --ca-orange:     #e2711d;
    --ca-orange-rgb: 226, 113, 29;

    /* ---- Phoenix / Bootstrap tokens ---- */
    --phoenix-primary: var(--ca-navy);
    --phoenix-primary-rgb: var(--ca-navy-rgb);
    --phoenix-primary-lighter: #b3c7da;
    --phoenix-primary-light: #6690b3;
    --phoenix-primary-dark: #002e59;
    --phoenix-primary-darker: #002240;
    --phoenix-primary-bg-subtle: #e1eaf1;
    --phoenix-primary-border-subtle: #99b3c9;
    --phoenix-primary-text-emphasis: #002e59;

    --phoenix-success: var(--ca-green);
    --phoenix-success-rgb: var(--ca-green-rgb);
    --phoenix-success-bg-subtle: #e2efd9;
    --phoenix-success-border-subtle: #b1d49b;
    --phoenix-success-text-emphasis: #2a5e0e;

    --phoenix-warning: var(--ca-gold);
    --phoenix-warning-rgb: var(--ca-gold-rgb);
    --phoenix-warning-bg-subtle: #fcefcf;
    --phoenix-warning-border-subtle: #f6d78a;
    --phoenix-warning-text-emphasis: #7a5400;

    --phoenix-info: var(--ca-orange);
    --phoenix-info-rgb: var(--ca-orange-rgb);
    --phoenix-info-bg-subtle: #fbe7d6;
    --phoenix-info-border-subtle: #f2c199;
    --phoenix-info-text-emphasis: #8a4412;

    --phoenix-link-color: var(--ca-navy);
    --phoenix-link-hover-color: #002e59;

    --phoenix-navbar-vertical-link-active-color: var(--ca-navy);

    /* Content surfaces – one consistent colour (drop Phoenix's aliceblue kanban tint) */
    --phoenix-kanban-bg: var(--phoenix-body-bg);
    --phoenix-kanban-column-bg: var(--phoenix-emphasis-bg);

    /* ---- Radzen tokens ---- */
    --rz-primary: var(--ca-navy);
    --rz-primary-light: #33608d;
    --rz-primary-lighter: #e1eaf1;
    --rz-primary-dark: #002e59;
    --rz-primary-darker: #002240;

    --rz-secondary: var(--ca-gold);
    --rz-secondary-light: #f4b733;
    --rz-secondary-lighter: #fcefcf;
    --rz-secondary-dark: #c98a00;
    --rz-secondary-darker: #9a6900;

    --rz-success: var(--ca-green);
    --rz-success-light: #5aa33a;
    --rz-success-lighter: #e2efd9;
    --rz-success-dark: #2f6a0f;
    --rz-success-darker: #24520b;

    --rz-warning: var(--ca-gold);
    --rz-warning-light: #f4b733;
    --rz-warning-lighter: #fcefcf;
    --rz-warning-dark: #c98a00;
    --rz-warning-darker: #9a6900;

    --rz-info: var(--ca-orange);
    --rz-info-light: #e88b47;
    --rz-info-lighter: #fbe7d6;
    --rz-info-dark: #b85a17;
    --rz-info-darker: #8a4412;

    /* Chart series lead with the brand colours */
    --rz-series-1: var(--ca-navy);
    --rz-series-2: var(--ca-gold);
    --rz-series-3: var(--ca-green);
    --rz-series-4: var(--ca-orange);
    --rz-series-5: #6690b3;
    --rz-series-6: #7a5400;
}

/* Dark theme: lift navy so primary stays legible on a dark ground */
[data-bs-theme="dark"] {
    --phoenix-primary: #4d8fd6;
    --phoenix-primary-rgb: 77, 143, 214;
    --phoenix-primary-bg-subtle: #16283a;
    --phoenix-primary-text-emphasis: #a9ccec;
    --phoenix-link-color: #7fb3e6;
    --phoenix-link-hover-color: #a9ccec;
    --phoenix-navbar-vertical-link-active-color: #7fb3e6;
    --rz-primary: #4d8fd6;
    --rz-primary-light: #74a8e0;
    --rz-primary-dark: #2f6fb0;
}

/* Gold / orange buttons read better with dark text */
.rz-button.rz-secondary,
.rz-button.rz-warning,
.btn-warning,
.badge.bg-warning {
    color: #1f2532;
}


/* ==========================================================================
   Dropdowns — one consistent look everywhere (the "Country" dropdown is the reference)
   ========================================================================== */
.rz-dropdown,
.rz-autocomplete {
    font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    color: var(--phoenix-body-color, #3e465b);
    border: 1px solid var(--phoenix-border-color, #cbd0dd);
    border-radius: 0.375rem;
    background-color: var(--phoenix-emphasis-bg, #fff);
    min-height: 2.5rem;
}

/* Neutralise Bootstrap's .form-select on Radzen dropdowns (Radzen draws its own caret) */
.rz-dropdown.form-select {
    background-image: none;
    padding: 0;
    line-height: normal;
}

.rz-dropdown .rz-dropdown-label,
.rz-dropdown .rz-placeholder,
.rz-autocomplete .rz-inputtext {
    font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 0.45rem 0.75rem;
}

.rz-dropdown .rz-placeholder,
.rz-autocomplete .rz-inputtext::placeholder {
    color: var(--phoenix-quaternary-color, #8a94ad);
}

/* Gentle, consistent focus — no jarring near-black border */
.rz-dropdown.rz-state-focused,
.rz-dropdown:focus-within,
.rz-autocomplete.rz-state-focused,
.rz-autocomplete:focus-within {
    border-color: var(--phoenix-primary-light, #6690b3) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--ca-navy-rgb, 0 58 112), 0.15) !important;
    outline: none !important;
}

/* Invalid state stays red but subtle */
.rz-dropdown.rz-state-invalid,
.rz-autocomplete.rz-state-invalid {
    border-color: var(--phoenix-danger, #e5350b) !important;
    box-shadow: none !important;
}


/* ==========================================================================
   Phoenix-styled Radzen DataGrid
   ========================================================================== */
.rz-datatable {
    border: 1px solid var(--phoenix-border-color, #cbd0dd);
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--phoenix-emphasis-bg, #fff);
    box-shadow: none;
    font-size: 0.8rem;
}

/* Header band – compact, brand navy tint */
.rz-datatable .rz-grid-table thead th,
.rz-datatable .rz-datatable-thead th {
    background: var(--phoenix-primary-bg-subtle, #e1eaf1);
    border-bottom: 2px solid var(--phoenix-primary, #003a70);
    padding: 0.45rem 0.75rem;
}

/* Header title text only (not the filter inputs) */
.rz-datatable .rz-grid-table thead th .rz-column-title,
.rz-datatable .rz-grid-table thead th .rz-column-title-content {
    color: var(--phoenix-primary-text-emphasis, #002e59);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.72rem;
}

.rz-datatable .rz-grid-table thead th .rz-sortable-column-icon {
    color: var(--phoenix-primary, #003a70);
}

/* Filter cell */
.rz-datatable .rz-grid-table thead th .rz-cell-filter {
    text-transform: none;
    padding-top: 0.3rem;
}

/* Body – white surface (dark surface in dark mode) */
.rz-datatable .rz-grid-table,
.rz-datatable .rz-grid-table tbody,
.rz-datatable .rz-grid-table tbody tr,
.rz-datatable .rz-grid-table tbody tr.rz-datatable-odd,
.rz-datatable .rz-grid-table tbody tr.rz-datatable-even {
    background-color: var(--phoenix-emphasis-bg, #fff);
}

.rz-datatable .rz-grid-table td {
    border: 0;
    border-bottom: 1px solid var(--phoenix-tertiary-bg, #eff2f6);
    padding: 0.5rem 0.75rem;
    color: var(--phoenix-body-color, #3e465b);
    background-color: var(--phoenix-emphasis-bg, #fff);
    vertical-align: middle;
}

.rz-datatable .rz-grid-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Row hover / selection — neutral grey, distinct from the navy header */
.rz-datatable .rz-grid-table tbody tr.rz-data-row:hover td {
    background-color: var(--phoenix-body-highlight-bg, #eff2f6);
}

.rz-datatable .rz-grid-table tbody tr.rz-selected td,
.rz-datatable .rz-grid-table tbody tr.rz-state-selected td {
    background-color: var(--phoenix-secondary-bg, #e3e6ed);
}

/* Toolbar band above the table */
.rz-datatable .rz-datatable-header {
    background: transparent;
    border: 0;
    padding: 0.5rem 0;
}

/* Paginator */
.rz-datatable .rz-paginator {
    background: transparent;
    border-top: 1px solid var(--phoenix-border-color, #cbd0dd);
    padding: 0.5rem 0.75rem;
}

/* Grid flush inside a RadzenCard */
.rz-card > .rz-datatable {
    border: 0;
    border-radius: 0;
}


/* ---- Plain HTML .table styled to match the Radzen grid (Tasks list) ---- */
.grid-card.rz-card {
    border: 1px solid var(--phoenix-border-color, #cbd0dd);
    border-radius: 0.5rem;
    box-shadow: none;
    background: var(--phoenix-emphasis-bg, #fff);
}

.task-list-card .table {
    margin-bottom: 0;
    font-size: 0.8rem;
    border: 0;
    color: var(--phoenix-body-color, #3e465b);
}

.task-list-card .table > thead > tr > th {
    background: var(--phoenix-primary-bg-subtle, #e1eaf1);
    color: var(--phoenix-primary-text-emphasis, #002e59);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 0.72rem;
    border: 0;
    border-bottom: 2px solid var(--phoenix-primary, #003a70);
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.task-list-card .table > tbody > tr > td {
    background: var(--phoenix-emphasis-bg, #fff);
    border: 0;
    border-bottom: 1px solid var(--phoenix-tertiary-bg, #eff2f6);
    padding: 0.55rem 0.75rem !important;
    vertical-align: middle;
}

.task-list-card .table > tbody > tr:hover > td {
    background: var(--phoenix-body-highlight-bg, #eff2f6);
}

.task-list-card .table > tbody > tr:last-child > td {
    border-bottom: 0;
}


/* ==========================================================================
   Common page header (<PageHeader> component)
   ========================================================================== */
.page-header {
    margin: 0 0 0.25rem 0;
    padding: 0.5rem 1rem;
    background-color: var(--phoenix-emphasis-bg, #fff);
}

.page-header .page-header-title {
    padding: 0.3rem 0;
}

.page-header .page-header-icon {
    font-size: 1.05rem;
    line-height: 1;
    margin-right: 0.5rem;
    color: var(--phoenix-primary, #003a70);
}

.page-header .page-header-text {
    font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: var(--phoenix-emphasis-color, #141824);
}

.page-header .page-header-actions .rz-button {
    white-space: nowrap;
}


/* ==========================================================================
   EmptyGuard — overlay over an empty API-backed dropdown
   ========================================================================== */
.empty-guard {
    position: relative;
}

.empty-guard__overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: pointer;
    background: transparent;
}


/* ==========================================================================
   Top navbar (#navbarDefault) — fixed + branded
   ========================================================================== */
.navbar.navbar-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1035;
    min-height: var(--phoenix-navbar-top-height, 4rem);
    background-color: var(--phoenix-body-bg, #fff);
    border-bottom: 1px solid var(--phoenix-border-color, #cbd0dd);
    box-shadow: 0 2px 6px rgba(var(--ca-navy-rgb, 0 58 112), 0.06);
    align-items: center;
}

/* page content sits flush under the fixed top bar */
.content.kanban-content {
    padding-top: var(--phoenix-navbar-top-height, 4rem);
}


/* Brand / logo */
.navbar-top .navbar-brand .logo-text {
    font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: var(--phoenix-primary, #003a70);
}

/* Round icon buttons (bell, avatar) */
.navbar-top .navbar-nav-icons {
    align-items: center;
    gap: 0.35rem;
}

.navbar-top .nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    color: var(--phoenix-secondary-color, #525b75);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar-top .nav-icon-btn:hover {
    background-color: var(--phoenix-primary-bg-subtle, #e1eaf1);
    color: var(--phoenix-primary, #003a70);
}

.navbar-top .nav-icon-badge {
    position: absolute;
    top: 0.1rem;
    right: 0.05rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.22rem;
    border-radius: 1rem;
    background: var(--phoenix-danger, #e5350b);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

/* Avatar */
.navbar-top .navbar-nav-icons .avatar img {
    border: 2px solid var(--phoenix-primary-bg-subtle, #e1eaf1);
}

.navbar-top .navbar-nav-icons .nav-link:hover .avatar img {
    border-color: var(--phoenix-primary, #003a70);
}


/* ==========================================================================
   Vertical navbar
   ========================================================================== */

/* Sidebar collapse/expand toggle (footer button) */
.navbar-vertical .navbar-vertical-footer .co-sidebar-toggle {
    color: var(--phoenix-navbar-vertical-link-color, #525b75);
}

.navbar-vertical .navbar-vertical-footer .co-sidebar-toggle:hover {
    color: var(--phoenix-primary, #003a70);
}

/* Active menu item: bold navy text, no fill (keeps contrast in the flyout) */
.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical .navbar-nav .nav-link.active .nav-link-text,
.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon {
    font-weight: 700;
    color: var(--phoenix-primary, #003a70) !important;
    background-color: transparent !important;
}

/* Flyout / expanded sub-menu links stay readable */
.navbar-vertical .navbar-nav .parent .nav-link,
.navbar-vertical .navbar-nav .parent .nav-link .nav-link-text {
    color: var(--phoenix-navbar-vertical-link-color, #525b75);
    background-color: transparent;
}

.navbar-vertical .navbar-nav .parent .nav-link:hover,
.navbar-vertical .navbar-nav .parent .nav-link:hover .nav-link-text {
    color: var(--phoenix-navbar-vertical-link-hover-color, #3e465b);
}

/* Active pill background ONLY on the collapsed top-level icon button */
.navbar-vertical-collapsed .navbar-vertical .navbar-nav .nav-item-wrapper:not(:hover) > .nav-link.active {
    background-color: var(--phoenix-primary-bg-subtle, #e1eaf1) !important;
    border-radius: 0.375rem;
}

/* Collapsed sidebar (not hovered): centre each icon in its nav-link / pill */
.navbar-vertical-collapsed .navbar-vertical .navbar-nav .nav-item-wrapper:not(:hover) > .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.navbar-vertical-collapsed .navbar-vertical .navbar-nav .nav-item-wrapper:not(:hover) > .nav-link > .d-flex {
    justify-content: center;
}

.navbar-vertical-collapsed .navbar-vertical .navbar-nav .nav-item-wrapper:not(:hover) .nav-link-icon {
    margin: 0;
}

.navbar-vertical-collapsed .navbar-vertical .navbar-nav .nav-item-wrapper:not(:hover) .dropdown-indicator-icon-wrapper {
    display: none;
}


/* Icon column + spacing (expanded sidebar) */
.navbar-vertical .navbar-nav .nav-link .nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    min-width: 1.5rem !important;
    margin-right: 0.75rem;
    color: var(--phoenix-navbar-vertical-link-color, #525b75);
}

.navbar-vertical .navbar-nav .nav-link .nav-link-icon svg,
.navbar-vertical .navbar-nav .nav-link .nav-link-icon i {
    width: 1.15rem;
    height: 1.15rem;
}

/* Dropdown caret: floated into the left gutter so parent + leaf icons align */
.navbar-vertical .navbar-nav .nav-link.dropdown-indicator {
    position: relative;
}

.navbar-vertical .navbar-nav .dropdown-indicator .dropdown-indicator-icon-wrapper {
    position: absolute;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    min-width: 0;
    margin: 0;
}

/* Even vertical rhythm */
.navbar-vertical .navbar-nav .nav-item-wrapper > .nav-link {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    display: flex;
    align-items: center;
}

.navbar-vertical .navbar-nav .nav-link .nav-link-text {
    line-height: 1.2;
}

/* Sub-menu (child) items align under the parent label */
.navbar-vertical .navbar-nav .parent .nav-link {
    padding-left: 2.25rem;
}
