/* ============================================================
   Cerule Dashboard — global design system
   Brand color: cerulean (#0E6FB8) | dark sidebar + white top bar + light-gray content
   ============================================================ */

:root {
    --cerule-font: 'Segoe UI', 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --cerule-accent: #0E6FB8;
    --cerule-accent-light: #3D93CE;
    --cerule-sidebar-top: #14243D;
    --cerule-sidebar-bottom: #0B1524;

    /* make MudBlazor use one consistent font everywhere */
    --mud-typography-default-family: var(--cerule-font);
    --mud-typography-h1-family: var(--cerule-font);
    --mud-typography-h2-family: var(--cerule-font);
    --mud-typography-h3-family: var(--cerule-font);
    --mud-typography-h4-family: var(--cerule-font);
    --mud-typography-h5-family: var(--cerule-font);
    --mud-typography-h6-family: var(--cerule-font);
    --mud-typography-subtitle1-family: var(--cerule-font);
    --mud-typography-subtitle2-family: var(--cerule-font);
    --mud-typography-body1-family: var(--cerule-font);
    --mud-typography-body2-family: var(--cerule-font);
    --mud-typography-button-family: var(--cerule-font);
    --mud-typography-caption-family: var(--cerule-font);
    --mud-typography-overline-family: var(--cerule-font);
}

html, body {
    font-family: var(--cerule-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a, .btn-link {
    color: var(--cerule-accent);
}

/* -------- top bar -------- */
.cerule-appbar {
    border-bottom: 1px solid #E4E9F0;
}

.cerule-page-title-text {
    font-weight: 600;
    color: #1A2332;
}

/* link back to the old site, centred in the top bar for as long as both sites run. It is taken
   out of the flex flow and pinned to the bar's own centre, so the page title on the left and the
   currency/user chip on the right do not pull it off-centre. */
.cerule-appbar .cerule-legacy-notice {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    color: #5E6E88;
    white-space: nowrap;
}

.cerule-appbar .cerule-legacy-notice a {
    color: #0E6FB8;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cerule-appbar .cerule-legacy-notice a:hover {
    color: #3D93CE;
}

/* below this width it would run into the title or the user chip */
@media (max-width: 1100px) {
    .cerule-appbar .cerule-legacy-notice {
        display: none;
    }
}

/* -------- top bar user area -------- */
.cerule-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 6px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.cerule-user:hover {
    background-color: #F0F4FA;
}

.cerule-user-avatar {
    font-size: 13px;
    font-weight: 600;
}

.cerule-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-align: left;
}

.cerule-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #1A2332;
}

/* default currency next to the user name, links to the settings page */
.cerule-currency {
    margin-right: 14px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #0E6FB8;
}

.cerule-currency:hover {
    background-color: #F0F4FA;
}

.cerule-user-caret {
    color: #98A4B7;
}

.cerule-user-card {
    padding: 12px 16px 8px;
    min-width: 200px;
}

@media (max-width: 640px) {
    .cerule-user-meta, .cerule-user-caret {
        display: none;
    }
}

/* -------- sidebar -------- */
.cerule-drawer.mud-drawer {
    background-image: linear-gradient(180deg, var(--cerule-sidebar-top) 0%, var(--cerule-sidebar-bottom) 100%);
    border-right: none;
}

.cerule-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    height: 64px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.cerule-brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0E6FB8 0%, #0FA3A3 100%);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(14, 111, 184, .45);
}

.cerule-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cerule-brand-title {
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 2.5px;
}

.cerule-brand-sub {
    color: #7E8CA5;
    font-size: 10.5px;
    letter-spacing: .5px;
}

.cerule-nav-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 20px;
}

/* menu search: pinned to the top of the sidebar so it stays reachable in a long menu */
.cerule-nav-search {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 12px 14px;
    background-color: var(--cerule-sidebar-top);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* MudBlazor styles these for a light surface, and its own selectors are three classes deep, so
   the sidebar overrides have to be at least as specific to win. */
.cerule-nav-search .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, .14);
}

.cerule-nav-search .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, .28);
}

.cerule-nav-search .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--cerule-accent-light);
    border-width: 1px;
}

/* the input itself takes currentcolor from the wrapper, so both are set */
.cerule-nav-search .mud-input,
.cerule-nav-search .mud-input > input.mud-input-root,
.cerule-nav-search .mud-input .mud-input-adornment .mud-icon-root,
.cerule-nav-search .mud-input .mud-input-clear-button .mud-icon-root {
    color: #AEB9CC;
}

.cerule-nav-search .mud-input > input.mud-input-root::placeholder {
    color: #6B7A93;
    opacity: 1;
}

.cerule-nav-empty {
    color: #7E8CA5;
    font-size: 12.5px;
    line-height: 1.5;
    padding: 18px 24px;
}

/* sidebar section header */
.cerule-nav-section {
    color: #5E6E88;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 18px 24px 6px;
}

/* menu items */
.cerule-drawer .mud-nav-link {
    color: #AEB9CC;
    margin: 1px 10px;
    border-radius: 8px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 14px;
    transition: background-color .15s ease, color .15s ease;
}

.cerule-drawer .mud-nav-link:hover {
    background-color: rgba(255, 255, 255, .06);
    color: #fff;
}

.cerule-drawer .mud-nav-link .mud-nav-link-icon {
    color: #7E8CA5;
    min-width: 34px;
    transition: color .15s ease;
}

.cerule-drawer .mud-nav-link:hover .mud-nav-link-icon {
    color: #fff;
}

/* active state: left accent bar + gradient highlight */
.cerule-drawer .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(14, 111, 184, .30) 0%, rgba(14, 111, 184, .08) 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--cerule-accent-light);
}

.cerule-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: var(--cerule-accent-light);
}

/* sidebar scrollbar */
.cerule-nav-scroll::-webkit-scrollbar {
    width: 8px;
}

.cerule-nav-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .10);
    border-radius: 8px;
}

.cerule-nav-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .18);
}

/* -------- content area -------- */
.cerule-content {
    padding: 24px 28px;
    max-width: 1680px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .cerule-content {
        padding: 16px;
    }
}

/* -------- report pages (shared across all migrated reports) -------- */
.rpt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.rpt-title {
    font-size: 22px;
    font-weight: 700;
    color: #14243D;
    margin: 0;
}

.rpt-badge {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    vertical-align: middle;
}

.rpt-badge-date { background: #0E6FB8; }
.rpt-badge-total { background: #17A673; }

.rpt-panel {
    background: #fff;
    border: 1px solid #E9EDF3;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.rpt-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid #EDF1F6;
    background: #FAFBFD;
}

.rpt-panel-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #14243D;
}

.rpt-panel-head .sub {
    color: #8794A8;
    font-size: 12.5px;
}

/* pushes a control (period select, filter) to the right edge of a panel header */
.rpt-head-right {
    margin-left: auto;
}

/* Filter row above a report: the date boxes, the drop-downs and the Submit button sit on one
   line. Most pages carry this same rule in their own scoped stylesheet; it lives here as well so
   a page that never got one still lays out as a row instead of stacking each control. A scoped
   copy has the higher specificity, so a page that wants different padding keeps winning. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding: 18px 20px;
}

.filter label {
    display: block;
    font-size: 13px;
    color: #4A5A72;
    margin-bottom: 4px;
}

.filter-actions {
    display: flex;
    gap: 8px;
}

/* MudBlazor copies a picker's Style onto its calendar panel as well as its text box, so
   Style="width:190px" - meant to size the box - also squeezes the panel, and the calendar is cut
   off (a date range picker shows two months, needs 630px, and was being given 280px). The panel is
   always as wide as the calendar it holds; !important is needed because MudBlazor writes the width
   into the panel's own style attribute. Both the drop-down and the PickerVariant.Dialog panels are
   covered. Never size a picker through Style expecting the box only. */
.mud-picker-paper {
    width: auto !important;
}

.rpt-subtitle {
    margin-left: 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: #8794A8;
}

.rpt-scroll {
    overflow-x: auto;
}

.rpt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

.rpt-table th,
.rpt-table td {
    border: 1px solid #EAEEF4;
    padding: 8px 12px;
}

.rpt-table thead th {
    background: #F4F6F9;
    color: #4A5A72;
    font-weight: 600;
    text-align: center;
}

.rpt-table td.num,
.rpt-table th.num {
    text-align: right;
}

.rpt-table tbody tr:nth-child(even) {
    background: #F7F9FC;
}

.rpt-table tbody tr:hover {
    background: #F0F4FA;
}

.rpt-table tbody tr.grp td strong {
    color: #14243D;
}

.rpt-table tbody tr.grp.expandable {
    cursor: pointer;
}

.rpt-table tbody tr.child {
    background: #FAFBFD;
    color: #52627A;
}

.rpt-table tbody tr.child td:first-child {
    padding-left: 34px;
}

.rpt-table tfoot th,
.rpt-table tr.total th,
.rpt-table tr.total td {
    background: #EEF2F7;
    color: #14243D;
    font-weight: 700;
    border-top: 2px solid #D5DEEA;
}

/* Country flags are 16px files; this is the size, spacing and hairline border they are meant to
   have. CeruleGrid renders its own table, so it is named here too - roughly ninety grid pages
   already write class="flag" and were getting the bare image. */
.rpt-table .flag,
.cgrid-table .flag {
    width: 18px;
    height: auto;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid #E4E9F0;
}

/* legacy market summary rows render the market name upper-cased */
.rpt-table tbody tr.grp.market td strong {
    text-transform: uppercase;
}

.rpt-table .caret {
    margin-left: 6px;
    color: #0E6FB8;
    font-size: 11px;
}

.rpt-up { color: #17A673; }
.rpt-down { color: #D64550; }
.rpt-flat { color: #8794A8; }
.rpt-success { color: #17A673; font-weight: 700; }
.rpt-danger { color: #D64550; font-weight: 700; }

/* gauge cards (Quarter/Year to Date achievement) */
.rpt-gauges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.rpt-gauge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.rpt-gauge-value {
    position: absolute;
    top: 96px;
    font-size: 26px;
    font-weight: 700;
    color: #14243D;
}

.rpt-gauge-meta {
    margin-top: 14px;
    text-align: center;
    color: #4A5A72;
    font-size: 13.5px;
    line-height: 1.6;
}

/* -------- Blazor framework error / validation -------- */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}