/* ==================================================
   JMA TECNOLOGIA - IDENTIDADE VISUAL
   Compatível com modo Light/Dark
   ================================================== */

:root{
    --jma-primary: #081C46;
    --jma-primary-hover: #0D295F;
    --jma-secondary: #0A78EE;
    --jma-secondary-hover: #0666CC;

    --jma-light: #F5F7FA;
    --jma-white: #FFFFFF;

    --jma-text: #081C46;
    --jma-border: #DDE4EE;

    --jma-card-bg: var(--bs-card-bg, #ffffff);
    --jma-body-bg: var(--bs-body-bg, #ffffff);
    --jma-body-color: var(--bs-body-color, #212529);
    --jma-muted-color: var(--bs-secondary-color, #6c757d);
}

/* DARK MODE */
[data-bs-theme="dark"],
html[data-bs-theme="dark"],
body[data-bs-theme="dark"]{
    --jma-card-bg: var(--bs-card-bg, #1f2937);
    --jma-body-bg: var(--bs-body-bg, #111827);
    --jma-body-color: var(--bs-body-color, #e5e7eb);
    --jma-muted-color: var(--bs-secondary-color, #9ca3af);
    --jma-border: rgba(255,255,255,.12);
    --jma-light: rgba(255,255,255,.06);
}

/* ==================================================
   FUNDOS
   ================================================== */

.bg-jma{
    background: var(--jma-primary) !important;
}

.bg-jma-secondary{
    background: var(--jma-secondary) !important;
}

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

.app-menu,
.logo-box{
    background: var(--jma-primary) !important;
}

.menu-title{
    color: rgba(255,255,255,.60) !important;
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.menu-link{
    color: rgba(255,255,255,.85) !important;
    border-radius: 8px;
    transition: all .2s ease;
}

.menu-link:hover{
    background: rgba(10,120,238,.18) !important;
    color: #fff !important;
}

.menu-link:hover .menu-icon,
.menu-link:hover .menu-text{
    color: #fff !important;
}

.menu-item.active > .menu-link,
.menu-item.menuitem-active > .menu-link,
.menu-link.active{
    background: var(--jma-secondary) !important;
    color: #fff !important;
}

.menu-item.active > .menu-link .menu-icon,
.menu-item.menuitem-active > .menu-link .menu-icon,
.menu-link.active .menu-icon,
.menu-item.active > .menu-link .menu-text,
.menu-item.menuitem-active > .menu-link .menu-text,
.menu-link.active .menu-text{
    color: #fff !important;
}

/* ==================================================
   TOPBAR
   ================================================== */

.navbar-custom{
    background: var(--jma-card-bg) !important;
    border-bottom: 2px solid var(--jma-primary);
    color: var(--jma-body-color);
}

.page-title{
    color: var(--jma-body-color);
    font-weight: 700;
}

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

.btn-primary{
    background: var(--jma-primary) !important;
    border-color: var(--jma-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
    background: var(--jma-primary-hover) !important;
    border-color: var(--jma-primary-hover) !important;
}

.btn-secondary{
    background: var(--jma-secondary) !important;
    border-color: var(--jma-secondary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active{
    background: var(--jma-secondary-hover) !important;
    border-color: var(--jma-secondary-hover) !important;
}

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

a{
    color: var(--jma-secondary);
}

a:hover{
    color: var(--jma-secondary-hover);
}

/* ==================================================
   CARDS
   ================================================== */

.card{
    background: var(--jma-card-bg);
    color: var(--jma-body-color);
    border: 1px solid var(--jma-border);
    border-radius: 12px;
}

.card-header{
    background: transparent;
    color: var(--jma-body-color);
    border-bottom-color: var(--jma-border);
    font-weight: 600;
}

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

.table{
    color: var(--jma-body-color);
    border-color: var(--jma-border);
}

.table thead th{
    background: var(--jma-primary);
    /* color: #fff; */
    /* border-color: var(--jma-primary); */
}

.table-hover tbody tr:hover{
    background: rgba(10,120,238,.08);
}

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

.form-control,
.form-select{
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--jma-border);
}

.form-control:focus,
.form-select:focus{
    border-color: var(--jma-secondary);
    box-shadow: 0 0 0 .15rem rgba(10,120,238,.20);
}

/* ==================================================
   PAGINAÇÃO
   ================================================== */

.page-item.active .page-link{
    background: var(--jma-primary);
    border-color: var(--jma-primary);
    color: #fff;
}

.page-link{
    color: var(--jma-secondary);
    background: var(--jma-card-bg);
    border-color: var(--jma-border);
}

.page-link:hover{
    color: var(--jma-secondary-hover);
    background: var(--jma-light);
}

/* ==================================================
   ALERTAS
   ================================================== */

.alert-primary{
    background: rgba(10,120,238,.10);
    border-color: rgba(10,120,238,.25);
    color: var(--jma-body-color);
}

/* ==================================================
   SPINNER
   ================================================== */

.spinner-border{
    color: var(--jma-secondary) !important;
}

/* ==================================================
   SCROLLBAR
   ================================================== */

::-webkit-scrollbar{
    width: 8px;
}

::-webkit-scrollbar-thumb{
    background: var(--jma-secondary);
    border-radius: 10px;
}

::-webkit-scrollbar-track{
    background: var(--jma-body-bg);
}