:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-soft: #f8f9fb;

    --text: #1f2937;
    --text-soft: #667085;
    --text-light: #98a2b3;

    --border: #e4e7ec;

    --primary: #6f4dc4;
    --primary-soft: #eee8ff;
    --primary-hover: #5f3eb7;

    --success: #157f3b;
    --success-soft: #e8f7ee;

    --danger: #b42318;
    --danger-soft: #fee4e2;

    --warning: #b54708;
    --warning-soft: #fff4e5;

    --shadow:
        0 10px 30px rgba(16, 24, 40, 0.08);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    --sidebar-width: 260px;
    --topbar-height: 72px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    min-width: 320px;
    min-height: 100%;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        var(--bg);

    color:
        var(--text);
}

body {
    min-height: 100vh;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

.hidden {
    display: none !important;
}

.screen {
    min-height: 100vh;
}

.screen-active {
    display: block;
}

/* ============================================================= */
/* LOGIN */
/* ============================================================= */

#login-screen {
    background:
        linear-gradient(
            135deg,
            #f8f7ff 0%,
            #f1f3f7 50%,
            #ececf5 100%
        );
}

.login-wrapper {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 32px 20px;
}

.login-card {
    width: 100%;
    max-width: 460px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow);

    padding:
        38px;
}

.login-brand {
    text-align: center;

    margin-bottom:
        34px;
}

.login-brand h1 {
    margin:
        0 0 8px 0;

    font-size:
        38px;

    letter-spacing:
        0.02em;

    color:
        var(--primary);
}

.login-brand p {
    margin:
        0;

    color:
        var(--text-soft);

    line-height:
        1.45;
}

.form-group {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    margin-bottom:
        20px;
}

.form-group label {
    font-weight:
        600;

    color:
        var(--text);
}

.form-group input {
    width:
        100%;

    min-height:
        48px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-sm);

    padding:
        0 14px;

    background:
        var(--surface);

    color:
        var(--text);

    outline:
        none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input:focus {
    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px rgba(111, 77, 196, 0.13);
}

.password-wrapper {
    position:
        relative;
}

.password-wrapper input {
    padding-right:
        92px;
}

.password-toggle {
    position:
        absolute;

    top:
        50%;

    right:
        10px;

    transform:
        translateY(-50%);

    border:
        none;

    background:
        transparent;

    color:
        var(--primary);

    font-weight:
        600;

    padding:
        6px 8px;
}

.login-options {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin:
        2px 0 24px 0;

    flex-wrap:
        wrap;
}

.remember-option {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--text-soft);
}

.remember-option input {
    width:
        18px;

    height:
        18px;

    accent-color:
        var(--primary);
}

.link-button {
    border:
        none;

    background:
        transparent;

    padding:
        4px 0;

    color:
        var(--primary);

    font-weight:
        600;
}

.link-button:hover {
    text-decoration:
        underline;
}

.primary-button,
.secondary-button {
    min-height:
        44px;

    border-radius:
        var(--radius-sm);

    padding:
        0 18px;

    font-weight:
        700;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.primary-button {
    width:
        100%;

    border:
        1px solid var(--primary);

    background:
        var(--primary);

    color:
        #ffffff;
}

.primary-button:hover {
    background:
        var(--primary-hover);

    border-color:
        var(--primary-hover);
}

.secondary-button {
    border:
        1px solid var(--border);

    background:
        var(--surface);

    color:
        var(--text);
}

.secondary-button:hover {
    background:
        var(--surface-soft);
}

.login-footer {
    margin-top:
        28px;

    padding-top:
        20px;

    border-top:
        1px solid var(--border);

    text-align:
        center;

    color:
        var(--text-soft);
}

.login-footer p {
    margin:
        0 0 4px 0;

    font-weight:
        600;
}

.login-footer small {
    color:
        var(--text-light);
}

/* ============================================================= */
/* MENSAGENS */
/* ============================================================= */

.message {
    border-radius:
        var(--radius-sm);

    padding:
        12px 14px;

    margin-bottom:
        18px;

    line-height:
        1.4;
}

.message-error {
    background:
        var(--danger-soft);

    color:
        var(--danger);
}

.message-success {
    background:
        var(--success-soft);

    color:
        var(--success);
}

/* ============================================================= */
/* TOPO */
/* ============================================================= */

.topbar {
    position:
        sticky;

    top:
        0;

    z-index:
        20;

    height:
        var(--topbar-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        0 24px;

    background:
        rgba(255, 255, 255, 0.96);

    backdrop-filter:
        blur(8px);

    border-bottom:
        1px solid var(--border);
}

.topbar-left,
.topbar-right {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}

.icon-button {
    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-sm);

    background:
        var(--surface);

    color:
        var(--text);

    font-size:
        20px;
}

.icon-button:hover {
    background:
        var(--surface-soft);
}

.topbar-brand {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.2;
}

.topbar-brand strong {
    color:
        var(--primary);

    font-size:
        20px;
}

.topbar-brand span {
    color:
        var(--text-soft);

    font-size:
        13px;
}

.user-info {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    line-height:
        1.2;
}

.user-info span {
    font-weight:
        700;
}

.user-info small {
    color:
        var(--text-soft);
}

/* ============================================================= */
/* LAYOUT PRINCIPAL */
/* ============================================================= */

.main-layout {
    display:
        grid;

    grid-template-columns:
        var(--sidebar-width) minmax(0, 1fr);

    min-height:
        calc(100vh - var(--topbar-height));
}

/* ============================================================= */
/* SIDEBAR */
/* ============================================================= */

.sidebar {
    position:
        sticky;

    top:
        var(--topbar-height);

    height:
        calc(100vh - var(--topbar-height));

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    background:
        #20252d;

    color:
        #ffffff;

    border-right:
        1px solid rgba(255, 255, 255, 0.06);

    overflow-y:
        auto;
}

.sidebar-nav {
    padding:
        18px 14px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}

.nav-item {
    width:
        100%;

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    border:
        none;

    border-radius:
        var(--radius-sm);

    padding:
        0 14px;

    background:
        transparent;

    color:
        rgba(255, 255, 255, 0.78);

    text-align:
        left;

    font-weight:
        600;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.nav-item:hover {
    background:
        rgba(255, 255, 255, 0.07);

    color:
        #ffffff;
}

.nav-item-active {
    background:
        var(--primary);

    color:
        #ffffff;
}

.nav-item-active:hover {
    background:
        var(--primary-hover);
}

.nav-icon {
    width:
        24px;

    text-align:
        center;

    font-size:
        18px;
}

.sidebar-footer {
    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;

    padding:
        18px 20px;

    color:
        rgba(255, 255, 255, 0.52);

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================= */
/* CONTEÚDO */
/* ============================================================= */

.content {
    min-width:
        0;

    padding:
        28px;
}

.page {
    width:
        100%;
}

.page-active {
    display:
        block;
}

.page-header {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        24px;
}

.page-header h2 {
    margin:
        0 0 5px 0;

    font-size:
        28px;
}

.page-header p {
    margin:
        0;

    color:
        var(--text-soft);
}

.page-header-meta {
    color:
        var(--text-soft);

    font-size:
        13px;

    white-space:
        nowrap;
}

/* ============================================================= */
/* DASHBOARD */
/* ============================================================= */

.cards-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        18px;

    margin-bottom:
        22px;
}

.summary-card {
    min-height:
        145px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        5px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-md);

    padding:
        22px;

    box-shadow:
        0 3px 12px rgba(16, 24, 40, 0.04);
}

.summary-label {
    color:
        var(--text-soft);

    font-weight:
        600;
}

.summary-value {
    font-size:
        34px;

    line-height:
        1.15;

    color:
        var(--text);
}

.summary-unit {
    color:
        var(--text-light);

    font-size:
        13px;
}

.dashboard-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        18px;
}

.panel-card {
    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-md);

    overflow:
        hidden;

    box-shadow:
        0 3px 12px rgba(16, 24, 40, 0.04);
}

.panel-card-wide {
    grid-column:
        1 / -1;
}

.panel-header {
    padding:
        18px 20px;

    border-bottom:
        1px solid var(--border);
}

.panel-header h3 {
    margin:
        0;

    font-size:
        17px;
}

.panel-content {
    padding:
        20px;

    min-height:
        140px;
}

.empty-state {
    margin:
        0;

    color:
        var(--text-light);

    line-height:
        1.5;
}

/* ============================================================= */
/* PLACEHOLDERS */
/* ============================================================= */

.placeholder-card {
    min-height:
        240px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

    text-align:
        center;

    color:
        var(--text-soft);

    background:
        var(--surface);

    border:
        1px dashed #cfd4dc;

    border-radius:
        var(--radius-md);
}

/* ============================================================= */
/* RESPONSIVIDADE */
/* ============================================================= */

@media (
    max-width: 1180px
) {

    .cards-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (
    max-width: 900px
) {

    :root {
        --sidebar-width:
            220px;
    }

    .content {
        padding:
            22px;
    }

    .dashboard-grid {
        grid-template-columns:
            1fr;
    }

    .panel-card-wide {
        grid-column:
            auto;
    }
}

@media (
    max-width: 760px
) {

    .topbar {
        padding:
            0 14px;
    }

    .topbar-brand span {
        display:
            none;
    }

    .user-info {
        display:
            none;
    }

    .main-layout {
        display:
            block;
    }

    .sidebar {
        position:
            fixed;

        top:
            var(--topbar-height);

        left:
            0;

        bottom:
            0;

        width:
            min(
                82vw,
                280px
            );

        height:
            auto;

        z-index:
            30;

        transform:
            translateX(-105%);

        transition:
            transform 0.2s ease;

        box-shadow:
            12px 0 30px rgba(16, 24, 40, 0.18);
    }

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

    .content {
        padding:
            18px 14px 30px 14px;
    }

    .page-header {
        flex-direction:
            column;
    }

    .page-header-meta {
        white-space:
            normal;
    }

    .cards-grid {
        grid-template-columns:
            1fr;
    }
}

@media (
    max-width: 520px
) {

    .login-card {
        padding:
            26px 20px;
    }

    .login-brand h1 {
        font-size:
            32px;
    }

    .login-options {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .topbar-right .secondary-button {
        padding:
            0 12px;
    }

    .summary-card {
        min-height:
            125px;
    }
}