/* ==========================================================================
   AthosFX theme (Brand Book v1.3)
   Loaded after bootstrap.min.css and style13.css.

   This file holds the component styling only. Colours and fonts are defined
   as tokens in athosfx-tokens.css: change a colour there, not here.
   Ratio to aim for: 60% Ivory, 25% Aegean Teal, 10% Charcoal text, 5% Gold.
   ========================================================================== */

:root,
[data-bs-theme=light] {
    /* Bootstrap / template variables mapped to the tokens */
    --bs-font-sans-serif: var(--font-body);
    --bs-body-bg: var(--color-bg);
    --bs-body-bg-rgb: var(--color-bg-rgb);
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: var(--color-text-rgb);
    --bs-emphasis-color: var(--color-text);
    --bs-emphasis-color-rgb: var(--color-text-rgb);
    --bs-secondary-color: var(--color-text-muted);
    --bs-border-color: var(--color-border);
    --bs-header-bg: var(--color-surface);
    --bs-header-item-color: var(--color-text);
    --bs-footer-bg: var(--color-bg);
    --bs-footer-color: var(--color-text-muted);
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Text selection in brand colours */
::selection {
    background: rgba(var(--color-primary-rgb), 0.18);
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Typography
   Headlines: Cormorant Garamond. Body, tables, forms, numbers: Inter.
   Only real headlines use the display font; amounts and stat numbers stay in
   Inter so figures line up and stay easy to read.
   -------------------------------------------------------------------------- */
.page-title-box h1,
.page-title-box h2,
.page-title-box h3,
.page-title-box h4,
.modal-title,
.card-title,
.font-display {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.005em;
    font-variant-numeric: lining-nums;
    color: var(--color-text);
}

.page-title-box h2 {
    font-size: 2rem;
    line-height: 1.15;
}

.card-title {
    font-size: 1.25rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Logo: the name is the logo
   "Athos" = Cormorant Garamond SemiBold, "FX" = Inter Medium at ~60% height,
   same baseline, one word. Never split, recoloured red, or restyled.
   -------------------------------------------------------------------------- */
.athos-wordmark {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    line-height: 1;
    text-decoration: none;
    color: var(--athos-teal);          /* Main: teal on ivory */
    user-select: none;
}

.athos-wordmark__athos {
    font-family: var(--athos-font-display);
    font-weight: 600;
    font-size: 1em;
    letter-spacing: -0.005em;
}

.athos-wordmark__fx {
    font-family: var(--athos-font-body);
    font-weight: 500;
    font-size: 0.6em;
    letter-spacing: 0.02em;
    margin-left: 0.06em;
}

.athos-wordmark--reversed,
.athos-wordmark--dark {
    color: var(--athos-ivory);         /* Reversed / dark mode: ivory on teal */
}

.athos-wordmark--one-colour {
    color: var(--athos-charcoal);      /* One-colour: charcoal on light surfaces */
}

/* Symbol placeholder (3 peaks) until the final mark is supplied */
.athos-symbol {
    display: inline-block;
    vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Sidebar: Aegean Teal with ivory text ("Reversed" colour version)
   -------------------------------------------------------------------------- */
body[data-sidebar=dark] .vertical-menu,
body[data-sidebar=dark] .navbar-brand-box {
    background: var(--color-primary);
}

body[data-sidebar=dark] #sidebar-menu ul li a {
    color: rgba(var(--color-on-primary-rgb), 0.78);
}

body[data-sidebar=dark] #sidebar-menu ul li a i {
    color: rgba(var(--color-on-primary-rgb), 0.7);
}

body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a {
    color: rgba(var(--color-on-primary-rgb), 0.6);
}

body[data-sidebar=dark] #sidebar-menu ul li a:hover,
body[data-sidebar=dark] #sidebar-menu ul li a:hover i,
body[data-sidebar=dark] #sidebar-menu ul li ul.sub-menu li a:hover {
    color: var(--color-on-primary);
}

body[data-sidebar=dark] .menu-title {
    color: rgba(var(--color-on-primary-rgb), 0.5);
}

body[data-sidebar=dark] .mm-active,
body[data-sidebar=dark] .mm-active > a,
body[data-sidebar=dark] .mm-active > a i,
body[data-sidebar=dark] .mm-active > i,
body[data-sidebar=dark] .mm-active .active,
body[data-sidebar=dark] .mm-active .active i {
    color: var(--color-on-primary) !important;
}

/* Thin gold accent line on the current page */
body[data-sidebar=dark] #sidebar-menu ul li a.active {
    box-shadow: inset 3px 0 0 var(--color-accent);
}

/* Collapsed sidebar fly-out */
body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    background: var(--color-primary-d20);
    color: var(--color-on-primary);
}

body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
    background-color: var(--color-primary-d20);
}

body[data-sidebar=dark].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
    color: rgba(var(--color-on-primary-rgb), 0.7);
}

/* --------------------------------------------------------------------------
   Topbar and footer
   -------------------------------------------------------------------------- */
#page-topbar {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.header-item,
.header-item:hover {
    color: var(--color-text);
}

.footer {
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Surfaces, tables and forms
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--color-border);
}

.table > thead th,
.table > thead td {
    color: var(--color-text);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--color-primary-rgb), 0.55);
    box-shadow: 0 0 0 0.15rem rgba(var(--color-primary-rgb), 0.15);
}

a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-d20);
}

/* Gold is an accent only: thin rules and small marks */
.athos-accent-line {
    height: 2px;
    width: 48px;
    background: var(--color-accent);
    border: 0;
    opacity: 1;
}

/* Loader overlay in brand colours */
.dots-container {
    background-color: rgba(var(--color-bg-rgb), 0.78);
}

.dot {
    background-color: rgba(var(--color-primary-rgb), 0.35);
}

/* --------------------------------------------------------------------------
   Modals: one look for every popup in the panel.

   Standard modal ......... white header with the title and a divider line,
                            body, white footer with the buttons on the right.
   Small "dialog" modal ... same, but the header/footer use border-bottom-0 /
                            border-top-0 (confirmations, OTP entry).

   Do not add colour, shadow, radius or font-size classes to .modal-content,
   .modal-header, .modal-title or .modal-footer in JSX: change them here.
   -------------------------------------------------------------------------- */
.modal {
    --bs-modal-bg: var(--color-surface);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: 16px;
    --bs-modal-inner-border-radius: 16px;
    --bs-modal-padding: 1.5rem;
    --bs-modal-header-padding: 1.1rem 1.5rem;
    --bs-modal-header-border-color: var(--color-border);
    --bs-modal-footer-border-color: var(--color-border);
    --bs-modal-footer-gap: 0.5rem;
}

.modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(var(--color-text-rgb), 0.22);
}

.modal-header {
    align-items: center;
    padding: 1.1rem 1.5rem;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.modal-title {
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--color-text);
}

.modal-header .btn-close {
    flex-shrink: 0;
    width: 0.75em;
    height: 0.75em;
    padding: 0.6rem;
    margin: -0.25rem -0.25rem -0.25rem auto;
    border-radius: 8px;
    opacity: 0.55;
    filter: none;
    box-shadow: none;
}

.modal-header .btn-close:hover {
    opacity: 1;
    background-color: var(--color-light);
}

.modal-footer {
    padding: 0.9rem 1.5rem;
    gap: 0.5rem;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.modal-footer > * {
    margin: 0;
}

.modal-footer .btn {
    min-width: 88px;
}

/* Scrim: teal-charcoal instead of pure black */
.modal-backdrop {
    --bs-backdrop-bg: var(--color-text);
    --bs-backdrop-opacity: 0.55;
}

@media (max-width: 575.98px) {
    .modal {
        --bs-modal-padding: 1.1rem;
        --bs-modal-header-padding: 0.9rem 1.1rem;
    }

    .modal-header {
        padding: 0.9rem 1.1rem;
    }

    .modal-footer {
        padding: 0.8rem 1.1rem;
    }

    .modal-title {
        font-size: 1.2rem;
    }
}

/* --------------------------------------------------------------------------
   Login / Register / Forgot / Reset password pages (.account-pages)
   A white card on the ivory page: teal logo centred at the top, thin gold
   accent line, then the page title. Header markup: AuthHeader in Logo.jsx.
   -------------------------------------------------------------------------- */
.account-pages .card {
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(var(--color-text-rgb), 0.08);
}

.athos-auth-header {
    background: var(--color-surface);
    color: var(--color-text);
    padding: 2.25rem 2rem 0.25rem;
    text-align: center;
}

.athos-auth-header__tagline {
    margin-top: 0.75rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.athos-auth-header .athos-accent-line {
    margin: 1.25rem auto;
}

.athos-auth-header__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.9rem;
    line-height: 1.15;
    color: var(--color-text);
    margin: 0;
}

.athos-auth-header__subtitle {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Form: a little more room, taller fields and button */
.account-pages .card-body {
    padding-left: 2rem;
    padding-right: 2rem;
    /* padding-bottom: 2rem; */
}

.account-pages .form-label {
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

.account-pages .form-control,
.account-pages .form-select {
    min-height: 46px;
}

/* The custom dropdown sets its own height inline: keep it level with the inputs */
.account-pages .custom-select-wrapper > .form-select {
    min-height: 46px !important;
}

.account-pages .btn-primary {
    min-height: 48px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Tall forms (Register): on a normal screen the card never grows past the window.
   The logo header stays in place and only the form scrolls inside the card.
   On small screens the whole page scrolls as usual (see the media query). */
@media (min-width: 768px) and (min-height: 620px) {
    .account-pages.auth-fit {
        padding: 16px 0;
    }

    .account-pages.auth-fit .card {
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        margin-bottom: 0;
        overflow: hidden;
    }

    .account-pages.auth-fit .card-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) transparent;
    }

    .account-pages.auth-fit .card-body::-webkit-scrollbar {
        width: 6px;
    }

    .account-pages.auth-fit .card-body::-webkit-scrollbar-thumb {
        background: var(--color-border);
        border-radius: 3px;
    }

    /* Smaller header so more of the form is visible without scrolling */
    .account-pages.auth-fit .athos-auth-header {
        flex: 0 0 auto;
        padding: 1.5rem 2rem 0.75rem;
        border-bottom: 1px solid var(--color-border);
    }

    .account-pages.auth-fit .athos-auth-header img {
        height: 44px;
    }

    .account-pages.auth-fit .athos-auth-header__tagline {
        margin-top: 0.5rem;
    }

    .account-pages.auth-fit .athos-auth-header .athos-accent-line {
        margin: 0.75rem auto;
    }

    .account-pages.auth-fit .athos-auth-header__title {
        font-size: 1.6rem;
    }
}

@media (max-width: 575.98px) {
    .athos-auth-header {
        padding: 1.75rem 1.25rem 0.25rem;
    }

    .account-pages .card-body {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-bottom: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Dashboard stat cards: brand colours only (no multi-colour tiles)
   White surface on the ivory page, teal icon chip, thin gold line on hover.
   -------------------------------------------------------------------------- */
.card.athos-stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card.athos-stat:hover {
    border-color: rgba(var(--color-primary-rgb), 0.35);
    box-shadow: inset 0 2px 0 var(--color-accent);
}

/* Remove the template's wavy overlay image */
.card.athos-stat.card-animate:before {
    display: none;
}

.athos-stat__icon {
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
    color: var(--color-primary) !important;
}

.card.athos-stat .text-muted {
    color: var(--color-text-muted) !important;
}

/* Label above, figure below. Figures use fixed-width digits so they line up. */
.athos-stat__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.athos-stat__value {
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.athos-stat__value--sm {
    font-size: 1.3rem;
}

.athos-stat__unit {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

/* Calm: no spinning icon on hover */
.card.athos-stat .upcoming-icon i,
.card.athos-stat:hover .upcoming-icon i,
.card.athos-stat .upcoming-box:hover .upcoming-icon i {
    transform: none;
    transition: none;
}

/* --------------------------------------------------------------------------
   Dashboard "Account Overview": a simple list, label left and status right
   -------------------------------------------------------------------------- */
.athos-overview__line {
    margin: 0.75rem 0 0.25rem;
}

.athos-overview__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--color-border);
}

.athos-overview__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.athos-overview__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.athos-overview__label i {
    font-size: 1.15rem;
    color: var(--color-primary);
}

.athos-overview__value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.athos-overview__action {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Dashboard "Introducing Broker" banner (.welcome-card)
   Teal block with the brand mark as a faint watermark, a small label, thin
   gold line, title, one line of text and a solid ivory button.
   -------------------------------------------------------------------------- */
.welcome-card {
    border: 0;
}

.welcome-card .card-body {
    background-image: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-d25) 100%);
    background-color: var(--color-primary);
    padding: 2rem 2.25rem;
}

.welcome-card .card-body .d-flex .flex-grow-1 {
    position: relative;
    z-index: 1;
    margin-top: 0;
    max-width: 560px;
}

.welcome-card__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--color-on-primary-rgb), 0.75);
}

.welcome-card .athos-accent-line {
    margin: 0.75rem 0 1rem;
}

.welcome-card h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: 0;
    color: var(--color-on-primary);
}

.welcome-card p {
    margin-top: 0.6rem;
    margin-right: 0;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(var(--color-on-primary-rgb), 0.85) !important;
}

.welcome-card .btn {
    margin-top: 1.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    background: var(--color-on-primary);
    color: var(--color-primary);
    border: 1px solid var(--color-on-primary);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.welcome-card .btn:hover,
.welcome-card .btn:focus {
    background: transparent;
    color: var(--color-on-primary);
    border-color: var(--color-on-primary);
}

/* The mark sits on the right, behind the text */
.welcome-card .card-body .d-flex .flex-shrink-0 img {
    position: absolute;
    top: 50%;
    right: 2rem;
    width: auto;
    height: 135%;
    transform: translateY(-50%);
    opacity: 0.1;
    animation: none;
    pointer-events: none;
}

@media (max-width: 575.98px) {
    .welcome-card .card-body {
        padding: 1.5rem 1.25rem;
    }

    .welcome-card h1 {
        font-size: 1.6rem;
    }

    .welcome-card .card-body .d-flex .flex-shrink-0 img {
        right: -1rem;
        opacity: 0.07;
    }
}

/* Inter is a little wider than the old font: keep stat labels on one line */
.card.athos-stat .fs-17 {
    font-size: 15px !important;
}