@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* ===== CSS Variables for Color System ===== */
:root {
    /* Background Colors */
    --bg-dark: oklch(0.16 0.02 270);      /* Deep violet-gray, not pure black */
    --bg: oklch(0.19 0.03 270);           /* Main background, soft dark violet */
    --bg-light: oklch(0.24 0.04 270);     /* Light background, muted violet */
    
    /* Text Colors */
    --text: oklch(0.96 0.01 270);         /* High contrast, off-white with violet tint */
    --text-muted: oklch(0.7 0.02 270);    /* Muted text, soft violet-gray */
    --text-subtle: oklch(0.55 0.02 270);  /* Subtle text, even softer violet-gray */

    /* Highlight and Accents */
    --highlight: oklch(0.45 0.12 270);    /* Highlight color, vibrant violet */

    /* Borders */
    --border: oklch(0.28 0.04 270);       /* Standard border, muted violet */
    --border-muted: oklch(0.21 0.03 270); /* Muted border, darker violet */

    /* Status Colors */
    --primary: oklch(0.62 0.18 300);      /* Primary: modern purple/violet */
    --secondary: oklch(0.62 0.13 210);    /* Secondary: blue accent */
    --danger: oklch(0.65 0.13 30);        /* Red/danger */
    --warning: oklch(0.75 0.13 100);      /* Orange/warning */
    --success: oklch(0.65 0.13 160);      /* Green/success */
    --info: oklch(0.65 0.13 260);         /* Blue/info */
    
    /* Interactive States */
    --hover-bg: var(--bg-light);    /* Hover background */
    --active-bg: var(--bg-light);   /* Active/pressed background */
    --border-card: solid 1px var(--bg);
    
    /* Shadows and Effects */
    --shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1);
    --shadow-light: 0px 1px 2px oklch(0 0 0 / 0.03);
    --shadow-medium: 0px 2px 4px oklch(0 0 0 / 0.06);
    --shadow-dark: 0px 4px 8px oklch(0 0 0 / 0.12);
    --primary-shadow: oklch(0.4 0.1 138 / 0.25);  /* Primary color with transparency */

    /* Bootstrap text color overrides */
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-color: var(--text-subtle);

    /* Default settings */
    --default-padding: 1rem 1rem;
    --default-border-radius: 1rem;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text);
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}
h2 {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

h4 {
    font-weight: 600;
    color: var(--text-muted); 
    margin-bottom: 10px;   
    display: flex;
    justify-content: center;
}

.row {
    justify-content: space-between;
}


#page-content {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}


/* ==== Navbar custom ==== */
.custom-navbar {
    background-color: var(--bg) !important;
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 4px var(--shadow-dark);
}

.custom-navbar .navbar-brand {
    font-size: 1.3rem;
    color: var(--text) !important;
    font-weight: bold;
}

.nav-link-custom {
    color: var(--text-muted) !important;
    font-weight: 500;
    margin-left: 1rem;
    transition: color 0.3s ease, background-color 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.nav-link-custom:hover {
    color: var(--text) !important;
    background-color: var(--hover-bg);
}

.nav-link-custom.active {
    background-color: var(--active-bg) !important;
    color: var(--text) !important;
}

.nav-link-custom i {
    font-size: 1.1rem;
    vertical-align: middle;
}

#navbar-collapse{
    padding-top: 10px;
}
div.dropdown-menu.show{
    background-color: var(--bg);
}


/* ====== Footer right buttons ======*/

.floating-footer-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}
.floating-footer-button:hover {
    transform: scale(1.03);
}

.footer-control-dropdown .dropdown-menu {
    box-shadow: 0 8px 20px var(--shadow-dark);
    padding: 12px;
    border-radius: 10px;
}

.footer-control-dropdown .dropdown-toggle:active {
    transform: scale(0.92);
    box-shadow: 0 0 0 4px var(--shadow-medium);
    transition: transform 0.1s ease-in-out, box-shadow 0.1s;
}


.touch-dropdown-item {
    padding: 14px 20px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 6px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent; /* Remove highlight azul do Android */
    touch-action: manipulation;               /* Melhor resposta ao toque */
}

.touch-dropdown-item:hover {
    background-color: var(--primary);
    color: var(--text);
    transform: scale(1.03);
}

.touch-dropdown-item:active {
    background-color: var(--active-bg);  /* cor mais escura no toque */
    transform: scale(0.97);     /* efeito de "afundar" */
    transition: transform 0.1s ease-in-out;
}

/* ====== Footer left buttons ======*/


.footer-info-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    background-color: var(--info);
    color: var(--text);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px var(--shadow-dark);
    font-size: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.footer-info-button:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px var(--shadow-dark);
}


/* ===== Scrollbar global escura ===== */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-light);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--highlight);
    border-radius: 10px;
    border: 2px solid var(--bg-light);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--highlight) var(--bg-light);
}


div.toast-header{
    background-color: transparent;
    border: 1px;
}
div#positioned-toast{
    position: fixed;
    top: 320px;
    right: 10px; 
    width: 350px;
    height: 100px;
    z-index: 9999;
}


@media (min-width: 768px) { /* ajuste para telas maiores */
    div#positioned-toast{ /*não esconder abaixo da navbar*/
        position: fixed;        
        top: 150px;
    }
}