/**
 * CutCut Motoboy — identidade visual global
 * Referência: wiki/marca/manual-identidade-visual.md
 * Carregar após style.css para sobrescrever o tema Xolo Admin.
 */

/* ------------------------------------------------------------------ */
/* Design tokens                                                       */
/* ------------------------------------------------------------------ */

:root {
    /* Marca */
    --brand-yellow: #FCC009;
    --brand-blue: #2E4295;
    --brand-black: #000000;
    --brand-gray: #616161;
    --brand-yellow-light: #FFE564;
    --brand-gray-light: #CAC9C9;

    /* Aliases legados (style.css / login.css) */
    --black: var(--brand-black);
    --blue: var(--brand-blue);
    --yellow: var(--brand-yellow);
    --gray: var(--brand-gray);
    --light-gray: var(--brand-gray-light);
    --light-yellow: var(--brand-yellow-light);
    --primary-color: var(--brand-yellow);
    --main-bg-color: var(--brand-yellow);

    /* Semânticas (separadas da paleta institucional) */
    --color-success: #2E7D32;
    --color-warning: #E65100;
    --color-danger: #C62828;
    --color-info: var(--brand-blue);

    /* UI */
    --font-display: 'Redonda Regular', 'Redonda Light', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --radius-sm: 4px;
    --radius-md: 8px;
    --touch-min: 48px;
    --touch-btn: 60px;
}

/* ------------------------------------------------------------------ */
/* Tipografia                                                          */
/* ------------------------------------------------------------------ */

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--brand-gray);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-header h3,
.card-header strong {
    font-family: var(--font-display);
    color: var(--brand-black);
}

p {
    font-size: 16px;
    line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Links e foco                                                        */
/* ------------------------------------------------------------------ */

* a {
    color: var(--brand-blue);
}

a:hover,
a:focus {
    color: var(--brand-blue);
    opacity: 0.85;
}

:focus {
    outline-color: var(--brand-blue);
}

code {
    color: var(--brand-blue) !important;
    background-color: rgba(46, 66, 149, 0.06);
}

/* ------------------------------------------------------------------ */
/* Utilitários de marca                                                */
/* ------------------------------------------------------------------ */

.text-brand-blue { color: var(--brand-blue) !important; }
.text-brand-yellow { color: var(--brand-yellow) !important; }
.text-brand-gray { color: var(--brand-gray) !important; }
.text-brand-black { color: var(--brand-black) !important; }
.text-success-brand { color: var(--color-success) !important; }

.bg-brand-yellow { background-color: var(--brand-yellow) !important; }
.bg-brand-blue { background-color: var(--brand-blue) !important; }

.icon-brand {
    color: var(--brand-blue);
}

.icon-brand-lg {
    width: 48px;
    height: 48px;
    color: var(--brand-blue);
}

.icon-success-lg {
    width: 48px;
    height: 48px;
    color: var(--color-success);
}

.icon-sm {
    width: 14px;
    height: 14px;
}

.icon-md {
    width: 18px;
    height: 18px;
}

.icon-lg {
    width: 20px;
    height: 20px;
}

/* ------------------------------------------------------------------ */
/* Bootstrap primary — azul institucional (headers, badges, progress)  */
/* ------------------------------------------------------------------ */

.bg-primary {
    background-color: var(--brand-blue) !important;
}

.text-primary {
    color: var(--brand-blue) !important;
}

.border-primary {
    border-color: var(--brand-blue) !important;
}

.badge-primary,
.badge.badge-primary {
    background-color: var(--brand-blue) !important;
}

.progress-bar.bg-primary {
    background-color: var(--brand-blue) !important;
}

/* ------------------------------------------------------------------ */
/* Botões mobile-first (consolidado de mobile-touch.css)               */
/* ------------------------------------------------------------------ */

.btn,
a.btn,
button.btn,
input.btn[type="submit"],
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    min-height: var(--touch-btn);
    padding: 14px 22px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-sm {
    min-height: 52px;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
}

.btn-lg,
.btn-touch,
.w-100.btn {
    min-height: var(--touch-btn);
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
}

.btn:active,
.btn-touch:active {
    transform: scale(0.98);
}

/* Primário: amarelo + texto escuro */
.btn-primary {
    background-color: var(--brand-yellow) !important;
    border-color: var(--brand-yellow) !important;
    color: var(--brand-black) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--brand-yellow-light) !important;
    border-color: var(--brand-yellow-light) !important;
    color: var(--brand-black) !important;
}

/* Outline primário: azul */
.btn-outline-primary {
    color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
}

/* Secundário: azul sólido */
.btn-secondary {
    background-color: var(--brand-blue) !important;
    border-color: var(--brand-blue) !important;
    color: #fff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #243570 !important;
    border-color: #243570 !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: var(--brand-gray) !important;
    border-color: var(--brand-gray-light) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--brand-gray-light) !important;
    color: var(--brand-black) !important;
}

/* ------------------------------------------------------------------ */
/* Formulários touch-friendly                                          */
/* ------------------------------------------------------------------ */

.form-control,
.form-select {
    min-height: var(--touch-min);
    font-size: 16px;
    border-radius: var(--radius-sm);
}

.form-check-input {
    width: 1.4em;
    height: 1.4em;
    margin-top: 0.12em;
}

.form-check-label {
    font-size: 16px;
    padding-left: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* Layout — header, nav, footer                                        */
/* ------------------------------------------------------------------ */

.page-main-header {
    background-color: var(--brand-yellow);
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

.page-main-header .logo-wrapper img {
    max-height: 48px;
    width: auto;
}

.main-nav .nav-link.menu-title.active,
.main-nav .nav-link.menu-title:hover {
    color: var(--brand-blue);
}

.main-nav .nav-link.menu-title.active {
    font-weight: 700;
}

.footer {
    background-color: #fff;
    border-top: 1px solid var(--brand-gray-light);
    padding: 8px 0;
}

.footer .nav-link {
    color: var(--brand-gray);
    min-height: var(--touch-min);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    font-size: 12px;
}

.footer .nav-link i,
.footer .nav-link svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
}

.footer .nav-link.active {
    color: var(--brand-blue);
    font-weight: 700;
}

.footer .nav-link.active i,
.footer .nav-link.active svg {
    stroke: var(--brand-blue);
}

/* Cards */
.card {
    border-radius: var(--radius-sm);
}

.perfil-menu-card .perfil-menu-avatar-wrap {
    padding-top: 1.25rem;
    padding-bottom: 0.75rem;
}

.perfil-menu-avatar {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background-color: #f4f4f4;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.perfil-menu-card .profile-details h4 {
    font-size: 1.25rem;
}

.perfil-menu-card .profile-details h6 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--brand-gray);
}

.card-header.bg-primary {
    background-color: var(--brand-blue) !important;
    color: #fff;
}

.card-header.bg-primary .text-white {
    color: #fff !important;
}

/* Loader do tema */
.theme-loader {
    border-top-color: var(--brand-yellow);
}

/* ------------------------------------------------------------------ */
/* Componentes extras (radio, breadcrumb, alert)                       */
/* ------------------------------------------------------------------ */

.radio.radio-primary input[type="radio"]:checked + label::before,
.checkbox.checkbox-primary input[type="checkbox"]:checked + label::before {
    border-color: var(--brand-blue);
    background-color: var(--brand-blue);
}

.breadcrumb-item a {
    color: var(--brand-blue);
}

.alert-theme span+span+span {
    border-left-color: var(--brand-blue);
}

/* ------------------------------------------------------------------ */
/* Login (complementa login.css)                                       */
/* ------------------------------------------------------------------ */

.login-page button[type="submit"],
#formContent button[type="submit"] {
    min-height: var(--touch-btn);
    font-size: 18px;
    font-weight: 700;
    border-radius: var(--radius-md);
}

/* ------------------------------------------------------------------ */
/* PWA                                                                 */
/* ------------------------------------------------------------------ */

/* Esconde "Criar atalho" quando o app ja roda instalado (standalone).
   A classe e posta no body pelo assets/js/custom/pwa.js. */
.pwa-standalone .cc-pwa-install { display: none !important; }