/* ================= Dashboard.css ================= */

/* ---------- Theme tokens ---------- */
/* Alias legacy names onto LegalNet light tokens. Admin remaps these on body.ln-admin. */
:root {
    --accent: var(--ln-orange, #EF4B24);
    --bg-dark: var(--ln-background, #F4F6F7);
    --card-bg: var(--ln-surface, #FFFFFF);
    --text-light: var(--ln-text, #24282B);
    --border: var(--ln-border, #E7EAED);
}

/* ---------- Base ---------- */
html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    cursor: pointer;
}

/* ---------- Layout ---------- */
.dashboard-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-content {
    padding-top: 72px; /* header height */
    padding-bottom: 90px; /* footer height */
}

/* ---------- Card utility ---------- */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem;
}

/* ---------- Header ---------- */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    z-index: 200;
}

.header-logo {
    height: 44px;
}

.menu-btn,
.profile-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 2rem;
    line-height: 1;
    padding: 0;
}

    .profile-btn img {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
    }

/* ---------- Greeting ---------- */
.greeting {
    margin: 1.25rem 1rem 0.75rem;
}

    .greeting h2 {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--accent);
        margin: 0 0 0.25rem;
    }

    .greeting p {
        font-size: 0.88rem;
        color: #9a9a9a;
        margin: 0;
    }

/* ---------- Metrics card ---------- */
.metrics-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light);
}

.metrics {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

    .metric .label {
        font-size: 0.8rem;
        color: #aaaaaa;
        margin-bottom: 0.25rem;
    }

    .metric .value {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--accent);
        line-height: 1.2;
    }

    .metric .currency {
        font-size: 0.7rem;
        color: #aaaaaa;
    }


/* ---------- Avatar dropdown ---------- */
.profile-wrapper {
    position: relative;
}

.dropdown-box {
    position: absolute;
    right: 0;
    top: 58px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    min-width: 150px;
    display: none;
    z-index: 260;
}

.drop-item {
    display: block;
    padding: .55rem 1rem;
    font-size: .85rem;
    color: var(--accent);
    text-decoration: none;
    background: none;
    border: none;
    text-align: left;
    width: 100%;
}

    .drop-item:hover {
        background: rgba(255,255,255,.04);
    }

/* reveal dropdown */
.profile-wrapper.open .dropdown-box {
    display: block;
}

/* ---------- Side-menu ---------- */
.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background: var(--card-bg);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 255;
    padding: 4rem 1rem 1rem; /* leave space for header */
    border-right: 1px solid var(--border);
}

    .side-menu.open {
        transform: translateX(0);
    }

    .side-menu nav {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

.nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .95rem;
    color: var(--text-light);
    text-decoration: none;
}

    .nav-item img {
        width: 24px;
        height: 24px;
    }

    .nav-item:hover {
        color: var(--accent);
    }

/* ---------- Hide body scroll when drawer open ---------- */
body.menu-open {
    overflow: hidden;
}


/* Breakpoint: stack ➜ row for metrics */
@media (min-width: 520px) {
    .metrics {
        flex-direction: row;
        justify-content: space-between;
    }

    .metric {
        align-items: center;
        text-align: center;
    }
}

/* ---------- Action buttons ---------- */
.action-row {
    display: flex;
    flex-wrap: wrap; /* ← allow wrap on small screens   */
    justify-content: center; /* ← centre the whole group        */
    gap: 1.25rem; /* a bit more breathing-room       */
    margin: 1.5rem 1rem;
}

.action-btn {
    flex: 0 0 210px; /* ← identical width on desktop    */
    max-width: 100%; /* but can shrink on very narrow   */
    display: flex;
    flex-direction: column; /* icon above label everywhere     */
    align-items: center;
    gap: .5rem;
    background: var(--accent);
    color: #121212;
    border: none;
    border-radius: 14px; /* slightly rounder                */
    padding: 1.1rem .75rem;
    font-size: .95rem;
    font-weight: 600;
    text-align: center;
    transition: transform .15s,opacity .2s,box-shadow .2s;
}

    .action-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0,0,0,.35);
        opacity: .95;
    }

    .action-btn img {
        width: 26px;
        height: 26px;
        filter: brightness(0); /* ← force pure black icons        */
    }
/* ---------- break-points ---------- */
@media (max-width:520px) { /* phones */
    .action-btn {
        flex: 1 1 140px; /* two buttons per row, equal size */
    }
}
/* ---------- Footer ---------- */
.contact-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 78px;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    gap: 0.25rem;
    z-index: 150;
}

    .contact-footer a {
        color: var(--accent);
        text-decoration: none;
    }

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
    /* small tablets */
    .page-content {
        padding-top: 78px;
    }

    .action-row,
    .greeting {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 900px) {
    /* desktop two-column grid */
    .dashboard-container > .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin: 0 1rem;
    }

    .metrics-card,
    .action-row {
        grid-column: 1 / 3;
    }
    /* full width rows */
    /* ---------- Form inputs ---------- */
    .form-input {
        width: 100%;
        background: #232323;
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: .65rem .75rem;
        color: var(--text-light);
    }

        .form-input:focus {
            outline: 2px solid var(--accent);
        }

    .form-label {
        font-size: .85rem;
        color: #cccccc;
        margin-bottom: .35rem;
    }

    .form-error {
        color: #ff6666;
        font-size: .75rem;
    }

    .form-card { /* wrapper around the whole form */
        max-width: 380px;
        margin: 2rem auto;
    }

    /* ---------- Avatar dropdown ---------- */
    .profile-wrapper {
        position: relative;
    }

    .logout-box {
        position: absolute;
        right: 0;
        top: 58px; /* just under the header bar */
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: .25rem .75rem;
        display: none;
        z-index: 250;
    }

    .logout-btn {
        background: none;
        border: none;
        color: var(--accent);
        font-size: .85rem;
        padding: .4rem 0;
    }

    .profile-wrapper.open .logout-box {
        display: block;
    }
    /* reveal */



}
.dropdown-box {
    min-width: 180px; /* wider */
    border-radius: 10px; /* slightly rounder */
}

.drop-item {
    padding: .75rem 1.25rem; /* taller / wider hit-area */
    font-size: .95rem; /* larger text */
}

/* ---------- Side-drawer ---------- */
.side-menu {
    width: 270px; /* wider drawer */
    padding: 4.5rem 1.25rem 1.25rem; /* more breathing room */
}

/* close (“×”) button */
.close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

/* roomier navigation items */
.side-menu nav {
    gap: 1.5rem;
}
/* more vertical spacing */
.nav-item {
    font-size: 1.05rem; /* bigger label */
    gap: 1rem; /* icon–text gap */
    padding: .4rem 0; /* padding top/bottom */
}

    .nav-item img {
        width: 28px;
        height: 28px;
    }
/* larger icons */
/* ========== RESPONSIVE ENHANCEMENTS ========== */

/* 1 – container gets a max-width so cards don’t stretch on big monitors */
.dashboard-container {
    max-width: 1040px;
    margin-inline: auto;
    padding-inline: 1.25rem; /* keeps left / right air on phones too */
}

/* 2 – metrics grid: three columns ≥640 px, single column below */
@media(min-width:640px) {
    .metrics {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 1.75rem 2.5rem;
        text-align: center;
    }

    .metric {
        align-items: center
    }
}

/* 3 – next due date line (see markup change) */
.next-due {
    display: block;
    margin-top: .75rem;
    font-size: .9rem;
    color: #dddddd;
}

/* 4 – action buttons responsive grid */
.action-row {
    display: grid;
    gap: 1rem;
    margin: 1.25rem;
}

@media(min-width:500px) {
    .action-row {
        grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
    }
}

.action-btn {
    flex: unset; /* grid now controls width */
    flex-direction: column;
    gap: .6rem;
}

    .action-btn img {
        width: 32px;
        height: 32px;
        filter: brightness(0) contrast(0) /* black-ish glyph */
        sepia(1) saturate(0);
    }

/* 5 – tighter card padding on very narrow screens */
@media(max-width:370px) {
    .metrics-card {
        padding: 1.25rem 1rem;
    }
}