/* ============================================================
   Equitelligent — app.css
   ------------------------------------------------------------
   Design goals:
   • Calm, premium, understated
   • Bootstrap + Syncfusion friendly
   • Minimal overrides, no layout fights
   • Works across MainLayout + AuthLayout
   ============================================================ */

/* ============================================================
   1. Design Tokens (single source of truth)
   ============================================================ */
:root {
    /* Backgrounds & surfaces */
    --eq-bg: #fff; /* Equitell Blue */
    --eq-surface: #fff; /* card / panel surface */
    --eq-button: #0B132B;
    --eq-darkblue: rgba(11, 19, 43, 1);
    --eq-lightblue: rgba(202, 214, 250, 1);
    --eq-darkgold: rgba(188, 156, 33, 1);
    --eq-lightgold: rgba(250, 239, 193, 1);
    /* Text */
    --eq-text: #1f2328; /* deep charcoal */
    --eq-muted: #5b6470; /* secondary text */
    /* Borders & separators */
    --eq-border: rgba(31, 35, 40, 0.10);
    /* Brand accents */
    --eq-accent: #b08d2d; /* heritage gold */
    --eq-accent-2: #1f3a2e; /* deep equestrian green (optional) */
    /* Radius & elevation */
    --eq-radius: 14px;
    --eq-radius-sm: 10px;
    --eq-shadow: 0 10px 30px rgba(10, 10, 10, 0.08);
    /* Typography */
    --eq-font: "PT Serif", Georgia, "Times New Roman", serif;
}


/* ============================================================
   2. Global base styles
   ============================================================ */
html, body {
    height: 100%;
    font-family: var(--eq-font);
}

body {
    min-height: 100vh;
    margin: 0;
}

a {
    color: var(--eq-darkblue);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

.small-muted {
    font-size: 0.9em;
    color: var(--eq-muted);
}

/* Remove focus outline from headings (Blazor sets tabindex for nav focus) */
h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus {
    outline: none;
}


/* ============================================================
   3. Layout containers (Main app pages)
   ============================================================ */
.eq-container {
    max-width: 1180px;
}

.eq-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0 0.75rem;
}

    .eq-pagehead h1 {
        margin: 0;
        font-size: 1.6rem;
        font-weight: 600;
    }

    .eq-pagehead p {
        margin: .25rem 0 0;
        color: var(--eq-muted);
    }


/* ============================================================
   4. Surface / card system
   ============================================================ */
.eq-card {
    background: var(--eq-surface);
    border: 1px solid var(--eq-border);
    border-radius: var(--eq-radius);
    box-shadow: var(--eq-shadow);
}


/* ============================================================
   5. Top navigation (MainLayout)
   ============================================================ */

/* App shell */
.eq-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--eq-bg);
}

/* Main area spacing */
.eq-main {
    flex: 1 0 auto;
    /*padding-top: .25rem;*/
}

/* Nav links (desktop) */
.eq-navlink {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .75rem;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    border: 1px solid transparent;
}

    .eq-navlink:hover {
        text-decoration: none;
        border-color: #fff;
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    /* Optional: active link class you can apply manually or via NavLink */
    .eq-navlink.active {
        /*border-color: var(--eq-lightgold);*/
        background: rgba(255, 255, 255, 0.2);
    }


.eq-navbar {
    background: var(--eq-darkblue);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--eq-border);
}

.eq-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 650;
    letter-spacing: 0.4px;
}

.eq-mark {
    width: 260px;
    /*height: 98px;*/
    border-radius: 10px;
    object-fit: contain;
    display: block;
}

/* ============================================================
   6. Buttons
   ============================================================ */

/* Primary solid action vertical / horizontal */
.btn-eq-solid {
    border-radius: 8px;
    padding: .35rem .5rem;
    border: 1px solid rgba(0,0,0,.12);
    background: var(--eq-button);
    color: #fff;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .btn-eq-solid:hover {
        border: 1px solid rgba(202, 214, 250, 1);
        text-decoration: none;
        box-shadow: 0 6px 18px rgba(0,0,0,.22);
        transform: translateY(-1px);
        background: var(--eq-lightblue);
    }

/* Secondary / accent button */
.btn-eq {
    border-radius: 10px;
    padding: .55rem 1rem;
    border: 1px solid rgba(202, 214, 250, 1);
    background: #fff;
    color: var(--eq-button);
    transition: border-color .15s ease, background .15s ease;
}

    .btn-eq:hover {
        border-color: var(--eq-darkblue);
        text-decoration: none;
        background: var(--eq-lightblue);
    }



/* ============================================================
   7. Badges & small UI elements
   ============================================================ */
.eq-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--eq-border);
    background: rgba(255,255,255,.6);
    color: var(--eq-muted);
    font-size: .85rem;
}

.eq-divider {
    height: 1px;
    background: var(--eq-border);
    margin: 1rem 0;
}


/* ============================================================
   8. Auth layout (Login / Register)
   ------------------------------------------------------------
   IMPORTANT:
   • Uses flex (not grid) to avoid shrink-to-fit
   • Width is controlled by the shell, not content
   ============================================================ */
.eq-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--eq-darkblue);
}


.eq-auth-shell {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.eq-auth-card {
    width: 100%;
    padding: 1.5rem;
}

/* Auth logo block */
.eq-auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.eq-logo-img {
    display: block;
    height: 62px; /* tweak to taste */
    max-width: 540px; /* prevents oversized logos */
    width: auto;
}


    /* ============================================================
   9. Forms (light alignment only)
   ============================================================ */
    .eq-auth-card form,
    .eq-auth-card .form-floating,
    .eq-auth-card .btn {
        width: 100%;
    }

    .eq-auth-card .form-check {
        display: flex;
        align-items: center;
        gap: .5rem;
    }


/* ============================================================
   10. Syncfusion light-touch alignment
   ------------------------------------------------------------
   Avoid deep overrides — wrap controls in .eq-card
   ============================================================ */
.eq-card .e-grid,
.eq-card .e-control {
    border-radius: var(--eq-radius-sm);
}

/* ============================================================
   Footer (MainLayout)
   ============================================================ */
.eq-footer {
    border-top: 1px solid var(--eq-border);
    background: #f2f2f2;
    backdrop-filter: blur(10px);
}

.eq-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.eq-footer-mark {
    width: 200px;
    border-radius: 10px;
    object-fit: contain;
    display: block;
}

.eq-footer-title {
    letter-spacing: 0.3px;
}

.eq-footer-sub {
    line-height: 1.2;
}

.eq-footer-link {
    color: var(--eq-text);
    text-decoration: none;
    padding: .25rem .4rem;
    border-radius: 8px;
    border: 1px solid transparent;
}

    .eq-footer-link:hover {
        text-decoration: none;
        border-color: var(--eq-border);
        background: rgba(255,255,255,.65);
    }

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

.eq-footer-bottom {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--eq-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ============================================================
   Icon buttons (Profile / Help)
   ============================================================ */
.eq-icon-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--eq-darkblue);
    border: 1px solid var(--eq-border);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

    .eq-icon-btn:hover {
        background: rgba(255,255,255,.85);
        border-color: rgba(176,141,45,.45);
        box-shadow: 0 6px 16px rgba(0,0,0,.12);
        transform: translateY(-1px);
        text-decoration: none;
    }

    .eq-icon-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(176,141,45,.25);
    }

    .eq-icon-btn i {
        font-size: 1.5rem;
        line-height: 1;
    }
/* ============================================================
   Title bar (full-width background + constrained content)
   ============================================================ */
.eq-titlebar {
    width: 100%;
    background: rgba(202, 214, 250, 0.2);
    /*background: rgba(188, 156, 33, 0.1);*/
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--eq-border);
}

.eq-titlebar-title {
    font-size: 1.25rem;
    font-weight: 700; /* PT Serif supports 700 */
    line-height: 1.1;
}

.eq-titlebar-sub {
    margin-top: .15rem;
}

.eq-titlebar-icon {
    color: var(--eq-accent);
    font-size: 2.8rem;
    line-height: 1;
    margin-right:10px;
}

/* ============================================================
   Home tiles
   ============================================================ */

.eq-hero-title{
    font-weight:bold;
    color: var(--eq-darkgold)
}

.eq-tile {
    display: block;
    text-decoration: none;
    color: inherit;
}

    .eq-tile:hover {
        text-decoration: none;
    }

.eq-tile-card {
    display: flex;
    align-items: flex-start; /* ← locks image top-left */
    gap: 1rem;
    padding: 1rem;
    border: 3.5px solid var(--eq-accent); /* thick gold border */
    min-height: 130px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .eq-tile-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 34px rgba(10, 10, 10, 0.12);
        border-color: rgba(176,141,45,.35);
    }

/* Left column: image */
.eq-tile-media {
    flex: 0 0 auto; /* ← prevents shrink */
    display: flex;
    align-items: flex-start;
}

.eq-tile-img {
    width: 92px;
    height: auto;
    border-radius: 12px;
    display: block;
}

/* Right column: text */
.eq-tile-content {
    flex: 1 1 auto;
}

.eq-tile-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.eq-tile-text {
    line-height: 1.35;
}

/* Coming soon overlay */
.eq-tile-card {
    position: relative;
    overflow: hidden;
}

.eq-tile--comingsoon {
    pointer-events: none; /* blocks navigation */
    cursor: default;
}

    .eq-tile--comingsoon .eq-tile-card {
        opacity: .92;
    }

    .eq-tile--comingsoon .eq-tile-img,
    .eq-tile--comingsoon .eq-tile-content {
        filter: grayscale(.15);
    }

.eq-tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /*rgb(153,221,255)*/
    background: rgba(191, 191, 191, 0.45); /* your --eq-bg tinted */
    backdrop-filter: blur(1px);
}

.eq-soon-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    border: 2px solid var(--eq-accent);
    background: rgba(255,255,255,.92);
    color: var(--eq-text);
    font-weight: 700;
}