/* Modo Claro */
:root {
    --main-header-bar: #558D79;
    --main-header-title: #ffffff;
    --dark-color-bar: #7fb1a3;
    --font-color-bar: #42665e;
    --light-color-bar: #d2e4de;
    --gradient-dark: #8dc5b7;
    --gradient-light: #e0e0e0;
    --grid-lines: #c5ded8;
    --grid-lines-hover: #a8d0c4;
    --background-body: #d9d9d9;
    --background-light: #f4f4f4;
    --background-border: #a2a2a2;
    --bill-late-color: #f09269;
    --bill-open-color: #f4f914;
    --color-text-body: #333333;
    --color-link: #141155;
    --color-link-hover: #000000;
    --color-input-bg: #ffffff;
    --color-input-text: #222;
    --focus-outline: white;
    --focus-ring: #258cfb;
    --cor-fundo-toolbox: #f1f1f1;
    --cor-sombra-box: rgba(0, 0, 0, 0.1);
    --cor-fundo-card: #f9f9f9;
    --cor-fundo-card-header: #e9ecef;
    --cor-texto-card-header: #212529;
    --cor-icone-acao: #007bff;
    --cor-icone-acao-hover: #0056b3;
    --cor-texto-botao: #ffffff;
    --cor-fundo-botao: #007bff;
    --cor-receita: #006400;
    --cor-despesa: #8B0000;
    --cor-salvar: #1e90ff;
    --cor-remover: #dc3545;
    --cor-baixar: #28a745;
    --form-container-bg: #f7f7f7;
    --form-bg: #ffffff;
    --form-shadow: rgba(0, 0, 0, 0.3);
    --input-border-color: #cccccc;
    --input-focus-bg: #fff8e1;
    --input-focus-border: #fbc02d;
    --btn-success-bg: #5200FF;
    --btn-success-color: #ffffff;
    --btn-danger-bg: #dc3545;
    --btn-danger-color: #ffffff;
    --select-multi-bg: #e9ecef;
    --select-multi-color: #333333;
    --success-border-color: green;
    --danger-border-color: #d9534f;
    --danger-color: #d9534f;
    --dropdown-shadow: rgba(0, 0, 0, 0.2);
    --dropdown-item-color: #42665e;
    --dropdown-item-hover-bg: #8dc5b7;
    --footer-bg: #f0f0f0;
    --modal-overlay-bg: rgba(100, 100, 100, 0.6);
    --toast-shadow: rgba(0, 0, 0, 0.35);
    --toast-success-bg: #e6f4ea;
    --toast-success-text: #2e7d32;
    --toast-warning-bg: #fff8e1;
    --toast-warning-text: #ff6f00;
    --toast-error-bg: #fbe9e7;
    --toast-error-text: #c62828;
    --shadow-heavy-color: rgba(170,170,170,1);
    --login-bg: #eceeef;
    --button-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    --btn-success-gradient-start: #32cd32;
    --btn-success-gradient-end: #228b22;
    --btn-success-hover-gradient-start: #66bb6a;
    --btn-success-hover-gradient-end: #43a047;
    --box-shadow-medium: rgba(0, 0, 0, 0.2);
    --btn-disabled-gradient-start: #d3d3d3;
    --btn-disabled-gradient-end: #a9a9a9;
    --btn-disabled-text-color: #808080;
    --error-bg: #fff5f5;
    --error-border-color: #ffcccc;
    --error-title-color: #e74c3c;
    --error-button-bg: #3498db;
    --error-button-hover-bg: #2980b9;
}

/* Modo Escuro */
body.dark-mode {
    --main-header-bar: #558D79;
    --main-header-title: #ffffff;
    --dark-color-bar: #5a8c7c;
    --font-color-bar: #b3e2d6;
    --light-color-bar: #3b4e4b;
    --gradient-dark: #5a8c7c;
    --gradient-light: #3b4e4b;
    --grid-lines: #4d6964;
    --grid-lines-hover: #6a9c91;
    --background-body: #2D2D2D;
    --background-light: #3D3D3D;
    --background-border: #4d6964;
    --bill-late-color: #f09269;
    --bill-open-color: #f4f914;
    --color-text-body: #d4d4d4;
    --color-link: #98c5bb;
    --color-link-hover: #ffffff;
    --color-input-bg: #1e1e1e;
    --color-input-text: #CCC;
    --focus-outline: #98c5bb;
    --focus-ring: #62a99a;
    --cor-fundo-toolbox: #2c2c2c;
    --cor-sombra-box: rgba(0, 0, 0, 0.7);
    --cor-fundo-card: #3a3a3a;
    --cor-fundo-card-header: #444;
    --cor-texto-card-header: #f1f1f1;
    --cor-icone-acao: #66b0ff;
    --cor-icone-acao-hover: #3399ff;
    --cor-texto-botao: #ffffff;
    --cor-fundo-botao: #0056b3;
    --cor-receita: #32cd32;
    --cor-despesa: #ff4d4d;
    --cor-salvar: #3399ff;
    --cor-remover: #ff4d4d;
    --cor-baixar: #44cc77;
    --form-container-bg: #1e1e1e;
    --form-bg: #2c2c2c;
    --form-shadow: rgba(0, 0, 0, 0.6);
    --input-border-color: #555555;
    --input-focus-bg: #333333;
    --input-focus-border: #ffd54f;
    --btn-success-bg: #28a745;
    --btn-success-color: #ffffff;
    --btn-danger-bg: #dc3545; /* Igual ao modo claro */
    --btn-danger-color: #ffffff;
    --select-multi-bg: #3a3a3a;
    --select-multi-color: #dddddd;
    --success-border-color: lightgreen;
    --danger-border-color: lightcoral;
    --danger-color: lightcoral;
    --dropdown-shadow: rgba(0, 0, 0, 0.7);
    --dropdown-item-color: #b3e2d6;
    --dropdown-item-hover-bg: #3399ff;
    --footer-bg: #2c2c2c;
    --modal-overlay-bg: rgba(0, 0, 0, 0.6);
    --toast-shadow: rgba(0, 0, 0, 0.5);
    --toast-success-bg: #1b5e20;
    --toast-success-text: #a5d6a7;
    --toast-warning-bg: #ff8f00;
    --toast-warning-text: #fff3e0;
    --toast-error-bg: #b71c1c;
    --toast-error-text: #ffcdd2;
    --shadow-heavy-color: rgba(100,100,100,0.7);
    --login-bg: #3a3a3a;
    --button-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    --btn-success-gradient-start: #5a8c7c;
    --btn-success-gradient-end: #3b4e4b;
    --btn-success-hover-gradient-start: #66b0ff;
    --btn-success-hover-gradient-end: #3399ff;
    --box-shadow-medium: rgba(0, 0, 0, 0.6);
    --btn-disabled-gradient-start: #555555;
    --btn-disabled-gradient-end: #777777;
    --btn-disabled-text-color: #aaaaaa;
    --error-bg: #3a1e1e;
    --error-border-color: #5a1a1a;
    --error-title-color: #e74c3c;
    --error-button-bg: #5a8c7c;
    --error-button-hover-bg: #3399ff;
}

    body.dark-mode input::placeholder {
        color: var(--color-input-text);
        opacity: 0.6;
    }


html {
    position: relative;
    min-height: 100%;
    font-size: 16px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--focus-outline), 0 0 0 0.25rem var(--focus-ring);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, input, button {
    font-family: 'Manrope', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    color: var(--color-text-body);
    transition: background-color 0.3s, color 0.3s;
}

/* Links */
a {
    color: var(--color-link);
    text-decoration: none;
}

    a:hover {
        color: var(--color-link-hover);
    }

.button-primary {
    background-color: var(--dark-color-bar);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

    .button-primary:hover {
        background-color: var(--gradient-dark);
        transform: scale(1.03);
    }

/* Botão secundário (ex: Criar Conta, links) */
.button-secondary {
    background: none;
    color: var(--font-color-bar);
    border: 1px solid var(--font-color-bar);
    padding: 8px 16px;
    font-size: 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

    .button-secondary:hover {
        background-color: var(--light-color-bar);
        color: var(--dark-color-bar);
    }

/* ===============================
   MOBILE FRIENDLY ADJUSTMENTS
   =============================== */
@media (max-width: 768px) {
    html, body {
        font-size: 18px; /* aumenta fonte base */
        line-height: 1.5;
        padding-bottom: 60px; /* espaço extra pro teclado */
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 1.2em !important;
    }

    label, input, select, textarea, button, .btn {
        font-size: 1em !important;
    }

    .btn, button {
        padding: 12px 20px !important;
        border-radius: 10px !important;
        min-width: 90px;
    }

    .form-control, input, select, textarea {
        height: 46px !important;
        padding: 10px 14px !important;
    }

    /* aumenta o tamanho dos ícones e botões com ícones */
    .btn i, .input-group-text i {
        font-size: 1.4em;
    }

    /* Margens mais confortáveis */
    .container, .card, .form-group, .row, .col {
        margin-bottom: 1rem;
    }

    /* Ajusta tabelas para scroll horizontal */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Evita sumir atrás do teclado */
    input:focus, textarea:focus, select:focus {
        scroll-margin-bottom: 80px;
    }

    /* Melhor espaçamento entre botões próximos */
    .btn + .btn {
        margin-left: 8px;
    }
}