/* =====================================================
   MIFE TRAINING — SISTEMA DE APARÊNCIA
   Temas: claro / escuro
   Cores: azul, lilás, verde-água, rosa, ciano e prata
===================================================== */

:root {
    color-scheme: light;

    --brand: #659BEA;
    --brand-hover: #477FD4;
    --brand-soft: #E4F0FF;
    --brand-rgb: 101, 155, 234;

    --brand-dark: #101827;
    --brand-deep: #0b1220;

    --surface: rgba(255, 255, 255, .88);
    --surface-solid: #ffffff;
    --surface-soft: #f8faff;

    --page: #f3f6fb;
    --page-gradient: linear-gradient(135deg, #f5f8ff, #edf2fb);

    --ink: #172033;
    --muted: #667085;
    --line: #e4e9f2;

    --focus: rgba(var(--brand-rgb), .22);

    --shadow: 0 5px 18px rgba(16, 24, 39, .045);
    --card-radius: 18px;
}

/* =====================================================
   PALETAS CRISTALINAS
===================================================== */

/* AZUL CRISTAL */
:root[data-accent="azul"] {
    --brand: #659BEA;
    --brand-hover: #477FD4;
    --brand-soft: #E4F0FF;
    --brand-rgb: 101, 155, 234;
}

/* LILÁS CRISTAL */
:root[data-accent="lilas"] {
    --brand: #A68AE8;
    --brand-hover: #896ACF;
    --brand-soft: #F0E9FF;
    --brand-rgb: 166, 138, 232;
}

/* VERDE-ÁGUA */
:root[data-accent="verde"] {
    --brand: #65C9B2;
    --brand-hover: #43A992;
    --brand-soft: #E0F8F1;
    --brand-rgb: 101, 201, 178;
}

/* ROSA CRISTAL */
:root[data-accent="rosa"] {
    --brand: #E49BC5;
    --brand-hover: #CC75A7;
    --brand-soft: #FCEAF4;
    --brand-rgb: 228, 155, 197;
}

/* CIANO CRISTAL */
:root[data-accent="ciano"] {
    --brand: #55BFD5;
    --brand-hover: #359BB3;
    --brand-soft: #E0F7FB;
    --brand-rgb: 85, 191, 213;
}

/* PRATA CRISTAL */
:root[data-accent="prata"] {
    --brand: #8998B5;
    --brand-hover: #687894;
    --brand-soft: #E9EDF5;
    --brand-rgb: 137, 152, 181;
}

/* =====================================================
   MODO ESCURO
===================================================== */

:root[data-theme="dark"] {
    color-scheme: dark;

    --surface: rgba(30, 41, 59, .92);
    --surface-solid: #1e293b;
    --surface-soft: #263449;

    --page: #111827;
    --page-gradient: linear-gradient(135deg, #111827, #172338);

    --ink: #edf2fa;
    --muted: #a6b2c5;
    --line: #34445b;

    --shadow: 0 5px 20px rgba(0, 0, 0, .20);
    --focus: rgba(var(--brand-rgb), .30);
}

:root[data-theme="dark"] .app-navbar {
    background: linear-gradient(110deg, #080d18, #172033);
}

:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .feature-tile,
:root[data-theme="dark"] .exercise-card {
    background: var(--surface-solid);
    border-color: var(--line) !important;
    color: var(--ink);
}

:root[data-theme="dark"] .table {
    --bs-table-bg: var(--surface-solid);
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: var(--surface-soft);
    --bs-table-striped-color: var(--ink);
    --bs-table-hover-bg: #33445c;
    --bs-table-hover-color: #ffffff;
}

:root[data-theme="dark"] .table thead th {
    background: #263449;
    color: var(--muted);
    border-color: var(--line);
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
    background-color: #1e293b;
    color: var(--ink);
    border-color: var(--line);
}

:root[data-theme="dark"] .form-control::placeholder {
    color: #94a3b8;
}

:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
    background-color: #263449;
    color: #ffffff;
}

:root[data-theme="dark"] .form-control:disabled {
    background-color: #263449;
    color: #94a3b8;
}

:root[data-theme="dark"] .text-dark {
    color: var(--ink) !important;
}

:root[data-theme="dark"] .text-secondary {
    color: var(--muted) !important;
}

:root[data-theme="dark"] .bg-white {
    background-color: var(--surface-solid) !important;
    color: var(--ink);
}

:root[data-theme="dark"] .border,
:root[data-theme="dark"] .border-bottom,
:root[data-theme="dark"] .border-top {
    border-color: var(--line) !important;
}

:root[data-theme="dark"] .load-chart-value {
    fill: var(--ink);
}

:root[data-theme="dark"] .load-chart-date {
    fill: var(--muted);
}

:root[data-theme="dark"] .load-chart-axis {
    stroke: var(--line);
}

:root[data-theme="dark"] .brand-mark {
    background: rgba(var(--brand-rgb), .16);
}

/* =====================================================
   BASE
===================================================== */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: auto;
}

/* Mantém campos focados afastados das bordas em telas pequenas.
   A rolagem é feita pelo navegador, sem interferir no teclado virtual. */
@media (max-width: 768px) {
    input:focus,
    textarea:focus,
    select:focus {
        scroll-margin-top: 24vh;
        scroll-margin-bottom: 30vh;
    }
}

body {
    background: var(--page-gradient);
    background-attachment: fixed;
    color: var(--ink);
    min-height: 100vh;
    font-size: 16px;
    line-height: 1.5;
    transition: background .25s ease, color .25s ease;
}

img,
iframe,
video {
    max-width: 100%;
}

/* =====================================================
   NAVEGAÇÃO
===================================================== */

.app-navbar {
    background: linear-gradient(
        110deg,
        var(--brand-deep),
        var(--brand-dark)
    );

    box-shadow: 0 2px 14px rgba(10, 20, 40, .12);
}

.navbar-brand {
    letter-spacing: .1px;
    font-size: 1.05rem;
    white-space: normal;
}

.navbar-toggler {
    padding: .5rem .65rem;
}

.nav-link {
    padding: .7rem .8rem !important;
}

/* =====================================================
   CONTEÚDO E CARTÕES
===================================================== */

main.container {
    width: 100%;
    max-width: 1140px;
}

.app-card {
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--ink);
    transition: background .25s ease, color .25s ease;
}

.login-wrap {
    min-height: calc(100vh - 160px);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 30px;
}

.brand-name {
    letter-spacing: .025em;
}

.brand-name span {
    color: var(--brand);
}

/* =====================================================
   BOTÕES
===================================================== */

.btn {
    min-height: 42px;
    border-radius: 11px;
    font-weight: 600;
    touch-action: manipulation;
}

.btn-sm {
    min-height: 38px;
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: #ffffff;
}

.btn-outline-primary {
    color: var(--brand-hover);
    border-color: var(--brand);
}

.btn-outline-primary:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
}

/* =====================================================
   LINKS
===================================================== */

a:not(.navbar-brand):not(.nav-link) {
    transition: color .2s ease;
}

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

body a:not(.btn):not(.navbar-brand):not(.nav-link) {
    color: var(--link-color);
}

/* =====================================================
   FORMULÁRIOS
===================================================== */

.form-control,
.form-select {
    min-height: 44px;
    border-radius: 11px;
    font-size: 16px;
    background-color: var(--surface-solid);
    color: var(--ink);
    border-color: var(--line);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem var(--focus);
}

.form-label {
    font-weight: 600;
    color: var(--ink);
}

/* =====================================================
   INDICADORES
===================================================== */

.stat-card {
    height: 100%;
    background: var(--surface-solid);
    border-radius: 16px;
    padding: 22px;
    border: 1px solid var(--line);
    color: var(--ink);
}

.stat-label {
    display: block;
    color: var(--muted);
    font-size: .9rem;
    margin-bottom: 8px;
}

.stat-card strong {
    font-size: 2rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

/* =====================================================
   RECURSOS
===================================================== */

.feature-tile {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    height: 100%;
    background: var(--surface-solid);
    color: var(--ink);
}

.feature-tile > span {
    font-size: 1.5rem;
    flex: 0 0 auto;
}

/* =====================================================
   TABELAS
===================================================== */

.table {
    color: var(--ink);
    border-color: var(--line);
}

.table thead th {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
}

.table-responsive {
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
}

/* =====================================================
   EXERCÍCIOS
===================================================== */

.exercise-card {
    background: var(--surface-solid);
    border-color: var(--line) !important;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.exercise-card iframe {
    border: 0;
    border-radius: 12px;
}

summary {
    cursor: pointer;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: .4rem;
}

footer {
    padding-top: .5rem;
    color: var(--muted);
}

/* =====================================================
   GRÁFICOS DE CARGAS
===================================================== */

.load-chart {
    height: 190px;
    min-width: 0;
    overflow-x: auto;
}

.load-chart-item {
    flex: 1 0 32px;
    min-width: 32px;
    height: 100%;
    gap: 4px;
}

.load-chart-bar {
    width: min(100%, 34px);
    min-height: 8px;
    background: linear-gradient(
        180deg,
        rgba(var(--brand-rgb), .55),
        var(--brand)
    );
    border-radius: 6px 6px 2px 2px;
}

.load-chart-item > span {
    font-size: .72rem;
    line-height: 1.2;
}

.load-chart-wrap {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.load-line-chart {
    display: block;
    width: 100%;
    height: auto;
    max-height: 190px;
    overflow: visible;
}

.load-chart-axis {
    stroke: #cbd5e1;
    stroke-width: 1;
}

.load-chart-line {
    fill: none;
    stroke: var(--brand);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.load-chart-point {
    fill: var(--brand);
    stroke: var(--surface-solid);
    stroke-width: 2;
}

.load-chart-value {
    fill: var(--ink);
    font-size: 11px;
    font-weight: 700;
}

.load-chart-date {
    fill: var(--muted);
    font-size: 9px;
}

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

@media (max-width: 575.98px) {

    main.container {
        padding-left: 14px;
        padding-right: 14px;
    }

    main.container.py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1.25rem !important;
    }

    .login-wrap {
        min-height: auto;
        padding-top: .5rem;
        padding-bottom: 1.5rem;
    }

    .login-wrap > .col-12 {
        padding-left: 0;
        padding-right: 0;
    }

    .login-wrap .card-body {
        padding: 1.25rem !important;
    }

    .stat-card {
        padding: 15px;
        border-radius: 14px;
    }

    .stat-card strong {
        font-size: 1.55rem;
    }

    .feature-tile {
        padding: 13px;
        gap: 10px;
    }

    .card-header {
        padding: .8rem 1rem;
    }

    .exercise-card {
        padding: 12px !important;
    }

    h1.h2 {
        font-size: 1.45rem;
    }

    .navbar-brand {
        font-size: .98rem;
        max-width: calc(100% - 64px);
    }

    .table {
        font-size: .9rem;
    }

    .btn-lg {
        min-height: 48px;
    }
}

@media (max-width: 420px) {

    .load-chart {
        gap: 6px !important;
    }

    .load-chart-item {
        flex-basis: 28px;
        min-width: 28px;
    }

    .load-chart-item > span {
        font-size: .65rem;
    }
}

/* =====================================================
   ACESSIBILIDADE
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================
   SELETOR DE APARÊNCIA
========================================= */

.appearance-option {
    display: block;
    cursor: pointer;
    height: 100%;
}

.appearance-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.appearance-card {
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
    border: 2px solid var(--line) !important;
}

.appearance-option:hover .appearance-card {
    transform: translateY(-2px);
    border-color: var(--brand) !important;
}

.appearance-option:has(.appearance-radio:checked) .appearance-card {
    border: 2px solid var(--brand) !important;
    background: var(--brand-soft);
}

.appearance-radio:focus-visible + .appearance-card {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}

.selection-status {
    display: none;
    color: var(--brand-hover);
    font-weight: 700;
}

.appearance-option:has(.appearance-radio:checked) .selection-status {
    display: block;
}
.appearance-option .selection-status {
    display: none;
}

.appearance-option:has(.appearance-radio:checked) .selection-status {
    display: block;
}
.appearance-preview {
    height: 75px;
    border-radius: 12px;
    padding: 10px;
}

.light-preview {
    background: #f1f5f9;
    border: 1px solid #dbe2ed;
}

.dark-preview {
    background: #111827;
    border: 1px solid #34445b;
}

.preview-top {
    height: 15px;
    background: #ffffff;
    border-radius: 5px;
    margin-bottom: 7px;
}

.preview-content {
    height: 30px;
    background: #ffffff;
    border-radius: 5px;
}

.dark-preview .preview-top,
.dark-preview .preview-content {
    background: #263449;
}

.appearance-color {
    height: 65px;
    border-radius: 12px;
}

/* LOGO MIFE - CABEÇALHO */

.logo-header {
    display: block;
    width: 190px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .logo-header {
        width: 155px;
    }
}

/* Correção definitiva da caixa de progressão no tema escuro */
html[data-theme="dark"] body .progression-individual .bg-light {
    background-color: #263449 !important;
    color: #edf2fa !important;
    border: 1px solid #3b4d67;
}

html[data-theme="dark"] body .progression-individual .bg-light strong,
html[data-theme="dark"] body .progression-individual .bg-light label,
html[data-theme="dark"] body .progression-individual .bg-light div {
    color: #edf2fa !important;
}