/* Defining the AAF colour pallete */
:root {
    --LogoGold: #B28D35;
    --LightGold: #D1BB8B;
    --LogoGreen: #12433E;
    --DarkGreen: #475749;
    --LogoGrey: #859D9A;
    --LogoSand: #E0D5A8;
    --LogoLightGrey: #E9F0EF;
    --AAFRoyalBlue: #242A41;
    --TextColour: #F6F6F6;
    --PageBackground: #F9F9F6;
    --SmallFont: 0.7rem;
    --SmallMediumFont: 0.9rem;
    --MediumFont: 1.1rem;
    --LargeFont: 1.3rem;
    --ExtraLargeFont: 1.7rem;
    --XxlFont: 2.0rem;

    /* Typography */
    --font-family-base: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Semantic colour roles (refinement layer over the brand palette above -
       prefer these for new/updated work so usage stays consistent) */
    --text-primary: var(--AAFRoyalBlue);
    --text-secondary: var(--DarkGreen);
    --text-muted: var(--LogoGrey);
    --text-accent: var(--LogoGold);
    --border-default: var(--LogoLightGrey);
    --surface: #FFFFFF;

    /* Standard content-card treatment: thin border + subtle drop shadow,
       used on any div that separates a block of content from the page background */
    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12);

    --success-color: var(--LogoGreen);
    --success-bg: rgba(18, 67, 62, 0.08);
    --success-border: rgba(18, 67, 62, 0.3);
    --warning-color: var(--LogoGold);
    --warning-bg: rgba(178, 141, 53, 0.08);
    --warning-border: rgba(178, 141, 53, 0.4);
    --danger-color: #A32D2D;
    --danger-bg: rgba(163, 45, 45, 0.08);
    --danger-border: rgba(163, 45, 45, 0.3);
    --danger-bg-strong: rgba(163, 45, 45, 0.14);
    --danger-bg-hover: rgba(163, 45, 45, 0.22);
    --danger-bg-active: rgba(163, 45, 45, 0.3);
    --danger-border-hover: rgba(163, 45, 45, 0.5);
}

    html, body {
        font-family: var(--font-family-base);
        margin: 0;
    }

.e-btn-primary, .e-btn-primary:focus {
    width: 100px;
    height: 40px;
    background-color: var(--LightGold);
    color: var(--TextColour);
    border-radius: 20px;
    padding: 3px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--LogoGold);
    font-size: 18px;
    padding: 5px;
    font-family: var(--font-family-base);
    transition: background-color 0.1s;
    margin: 5px;
}

    .e-btn-primary:hover {
        background-color: var(--LightGold);
        cursor: pointer;
    }

    .e-btn-primary:active {
        background-color: var(--LightGold);
        transform: scale(0.99);
        box-shadow: inset 0 1px 2px #685d44;
    }
.e-btn-primary-autowidth, .e-btn-primary-autowidth:focus {
    width: auto;
    height: 40px;
    background-color: var(--LightGold);
    color: var(--TextColour);
    border-radius: 20px;
    padding: 3px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--LogoGold);
    font-size: 18px;
    padding: 5px;
    font-family: var(--font-family-base);
    transition: background-color 0.1s;
    margin: 5px;
}

    .e-btn-primary-autowidth:hover {
        background-color: var(--LightGold);
        cursor: pointer;
    }

    .e-btn-primary-autowidth:active {
        background-color: var(--LightGold);
        transform: scale(0.99);
        box-shadow: inset 0 1px 2px #685d44;
    }

.e-btn-secondary, .e-btn-secondary:focus {
    width: 100px;
    height: 40px;
    background-color: transparent;
    color: var(--LogoGreen);
    border-radius: 20px;
    padding: 3px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--DarkGreen);
    font-size: 16px;
    text-align: center;
    line-height: 25px;
    padding: 5px;
    font-family: var(--font-family-base);
    transition: background-color 0.1s;
    margin: 5px;
}

    .e-btn-secondary:hover {
        background-color: var(--DarkGreen);
        color: var(--TextColour);
        cursor: pointer;
    }

    .e-btn-secondary:active {
        background-color: var(--LogoGrey);
        color: var(--TextColour);
        transform: scale(0.99);
        box-shadow: inset 0 1px 2px #685d44;
    }

.e-btn-secondary-autowidth, .e-btn-secondary-autowidth:focus {
    width: auto;
    height: 40px;
    background-color: transparent;
    color: var(--LogoGreen);
    border-radius: 20px;
    padding: 3px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--DarkGreen);
    font-size: 18px;
    text-align: center;
    line-height: 25px;
    padding: 5px;
    font-family: var(--font-family-base);
    transition: background-color 0.1s;
    margin: 5px;
}

    .e-btn-secondary-autowidth:hover {
        background-color: var(--DarkGreen);
        color: var(--TextColour);
        cursor: pointer;
    }

    .e-btn-secondary-autowidth:active {
        background-color: var(--LogoGrey);
        color: var(--TextColour);
        transform: scale(0.99);
        box-shadow: inset 0 1px 2px #685d44;
    }

.e-btn-tertiary, .e-btn-tertiary:focus {
    width: 100px;
    height: 30px;
    background-color: var(--LogoLightGrey);
    color: var(--AAFRoyalBlue);
    border-radius: 4px;
    padding: 3px 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--LogoGreen);
    font-size: 16px;
    text-align: center;
    line-height: 25px;
    padding: 8px;
    font-family: var(--font-family-base);
    transition: background-color 0.1s;
    text-decoration: none;
}

    .e-btn-tertiary:hover {
        background-color: var(--LogoLightGrey);
        color: var(--LogoGreen);
        cursor: pointer;
    }

    .e-btn-tertiary:active {
        background-color: var(--LogoGreen);
        color: var(--TextColour);
        transform: scale(0.99);
        box-shadow: inset 0 1px 2px #685d44;
    }

.e-btn-tertiary-autowidth, .e-btn-tertiary-autowidth:focus {
    width: auto;
    height: 26px;
    background-color: var(--LogoLightGrey);
    color: var(--AAFRoyalBlue);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--LogoGreen);
    font-size: 13px;
    text-align: center;
    line-height: normal;
    padding: 4px 12px;
    font-family: var(--font-family-base);
    text-decoration: none;
    transition: background-color 0.1s;
}

        .e-btn-tertiary-autowidth:hover {
            background-color: var(--LogoLightGrey);
            color: var(--LogoGreen);
            cursor: pointer;
        }

        .e-btn-tertiary-autowidth:active {
            background-color: var(--LogoGreen);
            color: var(--TextColour);
            transform: scale(0.99);
            box-shadow: inset 0 1px 2px #685d44;
        }


.e-btn-tertiary-link, .e-btn-tertiary-link:focus {
    height: 30px;
    width: 250px;
    background-color: var(--LogoLightGrey);
    color: var(--AAFRoyalBlue);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--LogoGreen);
    font-size: 16px;
    text-align: center;
    line-height: 25px;
    font-family: var(--font-family-base);
    transition: background-color 0.1s;
    text-decoration: none;
}
    .e-btn-tertiary-link:hover {
        background-color: var(--LogoLightGrey);
        color: var(--LogoGreen);
        cursor: pointer;
    }

    .e-btn-tertiary-link:active {
        background-color: var(--LogoGreen);
        color: var(--TextColour);
        transform: scale(0.99);
        box-shadow: inset 0 1px 2px #685d44;
    }

    .e-btn-four-link, .e-btn-tertiary-link:focus {
        height: 30px;
        width: 250px;
        background-color: var(--LogoSand);
        color: var(--AAFRoyalBlue);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--LogoGreen);
        font-size: 16px;
        text-align: center;
        line-height: 25px;
        font-family: var(--font-family-base);
        transition: background-color 0.1s;
        text-decoration: none;
    }

        .e-btn-four-link:hover {
            background-color: var(--LogoSand);
            color: var(--LogoGreen);
            cursor: pointer;
        }

        .e-btn-four-link:active {
            background-color: var(--LogoSand);
            color: var(--TextColour);
            transform: scale(0.99);
            box-shadow: inset 0 1px 2px #685d44;
        }

.e-btn-danger,
.e-btn-danger:focus {
    width: auto; /* small, neat button */
    height: auto;
    background-color: var(--danger-bg-strong);
    color: var(--danger-color);
    border-radius: 10%; /* circular for clean close icon look */
    border: 1px solid var(--danger-border);
    font-size: 14px;
    font-family: var(--font-family-base);
    display: flex;
    align-items: center; /* vertical centering */
    justify-content: center; /* horizontal centering */
    line-height: 1; /* remove extra line spacing */
    padding: 5px; /* remove default Syncfusion padding */
    margin: 5px;
    transition: all 0.15s ease;
    box-sizing: border-box; /* ensures border doesn't affect centering */
}

    .e-btn-danger:hover {
        background-color: var(--danger-bg-hover);
        border-color: var(--danger-border-hover);
        color: var(--danger-color);
        cursor: pointer;
    }

    .e-btn-danger:active {
        background-color: var(--danger-bg-active);
        transform: scale(0.96);
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    }

/* Trade/order status badges - shared across OrderBook and ShareHistoryGrid */
.status-traded, .status-failed, .status-awaiting-contracts {
    padding: 2px 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
}

.status-traded {
    background-color: var(--success-bg);
    color: var(--success-color);
    border: 1px solid var(--success-border);
}

.status-failed {
    background-color: var(--danger-bg);
    color: var(--danger-color);
    border: 1px solid var(--danger-border);
}

.status-awaiting-contracts {
    background-color: var(--warning-bg);
    color: var(--warning-color);
    border: 1px solid var(--warning-border);
}

.status-traded::before, .status-failed::before, .status-awaiting-contracts::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.status-traded::before {
    background-image: url("../img/circle-check.svg");
}

.status-failed::before {
    background-image: url("../img/circle-cross.svg");
}

.status-awaiting-contracts::before {
    background-image: url("../img/clock.svg");
}

/* ============================================================
   SUMMARY CARDS
   Icon + label, a big figure and a supporting line. Used for the
   top cards on Home (InfoCards) and My Investment (InvestmentPerformance).
   ------------------------------------------------------------ */
.summary-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    background-color: white;
    border: 1px solid var(--LogoLightGrey);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 16px 20px;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    /* Thin brand accent along the top edge */
    .summary-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: var(--LogoGreen);
    }

    .summary-card:hover {
        box-shadow: var(--card-shadow-hover);
        transform: translateY(-1px);
    }

    .summary-card.is-clickable {
        cursor: pointer;
    }

.summary-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--LogoGreen);
    margin: auto 0 0;
}

.summary-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.summary-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .summary-icon.is-green {
        background: rgba(18, 67, 62, 0.08);
        color: var(--LogoGreen);
    }

    .summary-icon.is-gold {
        background: rgba(178, 141, 53, 0.12);
        color: #8A6A22;
    }

    .summary-icon.is-navy {
        background: rgba(36, 42, 65, 0.07);
        color: var(--AAFRoyalBlue);
    }

.summary-label {
    font-size: var(--SmallMediumFont);
    font-weight: 500;
    color: var(--LogoGrey);
    margin: 0;
    line-height: 1.3;
}

.summary-value {
    font-size: var(--LargeFont);
    font-weight: 700;
    color: var(--AAFRoyalBlue);
    margin: 0;
    letter-spacing: -0.01em;
}

.summary-unit {
    font-size: var(--SmallMediumFont);
    font-weight: 500;
    color: var(--LogoGold);
}

.summary-sub {
    font-size: 12px;
    color: var(--LogoGrey);
    margin: 0;
}

.summary-change {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

    .summary-change.positive {
        background: #E6F4EA;
        color: #1E6B3A;
    }

    .summary-change.negative {
        background: #FCE8E8;
        color: #A32D2D;
    }