/* ==========================================================================
   KiambeSoft — Design System / Brand Theme
   Paleta extraída do logótipo oficial (public/build/images/app_logo.png):
     verde  #7DDE02  |  azul  #0070F3  |  navy  #012753  |  #222222 / #ffffff
   Este ficheiro sobrepõe-se ao app.min.css (tema base do template) e é
   carregado por último em layouts/head-css.blade.php.
   ========================================================================== */

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

:root {
    --ks-green: #7DDE02;
    --ks-green-dark: #4C9A00;   /* variante com contraste AA para texto branco */
    --ks-blue: #0070F3;
    --ks-blue-dark: #0058C4;
    --ks-navy: #012753;
    --ks-dark: #222222;
    --ks-white: #FFFFFF;
}

/* ---------- Global Typography ---------- */
body {
    font-family: 'Inter', Arial, sans-serif !important;
    background-color: #f8f9fa;
    color: var(--ks-dark);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Inter', Arial, sans-serif !important;
    font-weight: 600;
    color: var(--ks-navy);
}

a { color: var(--ks-blue); }
a:hover { color: var(--ks-blue-dark); }

/* ---------- Form Controls ---------- */
.form-control,
.form-select {
    border-radius: 6px;
    border: 1px solid #ced4da;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    transition: all 0.2s ease-in-out;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ks-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 112, 243, 0.15) !important;
}

.form-check-input:checked {
    background-color: var(--ks-blue) !important;
    border-color: var(--ks-blue) !important;
}

.form-switch .form-check-input:checked {
    background-color: var(--ks-green-dark) !important;
    border-color: var(--ks-green-dark) !important;
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: var(--ks-blue);
    border-color: var(--ks-blue);
    box-shadow: 0 2px 4px rgba(0, 112, 243, 0.2);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--ks-blue-dark) !important;
    border-color: var(--ks-blue-dark) !important;
}

.btn-outline-primary {
    color: var(--ks-blue);
    border-color: var(--ks-blue);
}

.btn-outline-primary:hover {
    background-color: var(--ks-blue);
    border-color: var(--ks-blue);
}

.btn-success {
    background-color: var(--ks-green-dark);
    border-color: var(--ks-green-dark);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #3f8300 !important;
    border-color: #3f8300 !important;
}

.btn-outline-success {
    color: var(--ks-green-dark);
    border-color: var(--ks-green-dark);
}

.btn-outline-success:hover {
    background-color: var(--ks-green-dark);
    border-color: var(--ks-green-dark);
    color: #fff;
}

.btn-info {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    color: #fff;
}

.btn-info:hover {
    background-color: #31d2f2;
    border-color: #25cff2;
    color: #fff;
}

/* ---------- Brand Utility Colors ---------- */
.text-primary { color: var(--ks-blue) !important; }
.bg-primary { background-color: var(--ks-blue) !important; }
.text-success { color: var(--ks-green-dark) !important; }
.bg-success { background-color: var(--ks-green-dark) !important; }

.bg-soft-primary,
.bg-primary.bg-soft {
    background-color: rgba(0, 112, 243, 0.12) !important;
}

.bg-soft-success,
.bg-success.bg-soft {
    background-color: rgba(124, 222, 2, 0.18) !important;
}

.badge.bg-primary { background-color: var(--ks-blue) !important; }
.badge.bg-success { background-color: var(--ks-green-dark) !important; }

/* ---------- Avatares de ícone (.avatar-*, .mini-stat-icon) ---------- */
/* .bg-soft só tem efeito real quando combinado com .bg-primary/.bg-success
   (regras acima); para as restantes cores (danger, warning, dark, info...)
   .bg-soft não existe como classe própria, por isso o avatar fica com a
   cor sólida do Bootstrap. Em qualquer dos casos, estes avatares usavam
   um ícone com a MESMA classe de cor do fundo (ex: text-warning sobre
   bg-warning sólido), ficando praticamente invisível — em ambos os
   temas, já que estas cores não mudam com data-bs-theme. Uniformizado:
   fundo sempre sólido, ícone sempre branco, independentemente do tema. */
[class*="avatar-"].bg-danger.bg-soft { background-color: #dc3545 !important; }
[class*="avatar-"].bg-warning.bg-soft { background-color: #f1b44c !important; }
[class*="avatar-"].bg-dark.bg-soft { background-color: #343a40 !important; }
[class*="avatar-"].bg-info.bg-soft { background-color: #0dcaf0 !important; }
[class*="avatar-"].bg-primary.bg-soft { background-color: var(--ks-blue) !important; }
[class*="avatar-"].bg-success.bg-soft { background-color: var(--ks-green-dark) !important; }

[class*="avatar-"].bg-primary i, [class*="avatar-"].bg-primary .avatar-title,
[class*="avatar-"].bg-success i, [class*="avatar-"].bg-success .avatar-title,
[class*="avatar-"].bg-danger i, [class*="avatar-"].bg-danger .avatar-title,
[class*="avatar-"].bg-warning i, [class*="avatar-"].bg-warning .avatar-title,
[class*="avatar-"].bg-dark i, [class*="avatar-"].bg-dark .avatar-title,
[class*="avatar-"].bg-info i, [class*="avatar-"].bg-info .avatar-title,
.mini-stat-icon.bg-primary i, .mini-stat-icon.bg-success i, .mini-stat-icon.bg-danger i,
.mini-stat-icon.bg-warning i, .mini-stat-icon.bg-dark i, .mini-stat-icon.bg-info i {
    color: #fff !important;
}

/* ---------- Links & Navigation ---------- */
.nav-tabs .nav-link.active {
    color: var(--ks-blue) !important;
    border-bottom: 2px solid var(--ks-blue);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--ks-blue) !important;
}

.page-item.active .page-link {
    background-color: var(--ks-blue) !important;
    border-color: var(--ks-blue) !important;
}

.page-link {
    color: var(--ks-blue);
}

/* ---------- Sidebar (Whitelabel Navy) ---------- */
body[data-sidebar="dark"] .navbar-brand-box,
body[data-sidebar="dark"] .vertical-menu {
    background-color: var(--ks-navy) !important;
}

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    background-color: #023569 !important;
}

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
    background-color: var(--ks-navy) !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover i {
    color: var(--ks-green) !important;
}

body[data-sidebar="dark"] .mm-active,
body[data-sidebar="dark"] .mm-active > a,
body[data-sidebar="dark"] .mm-active > a i,
body[data-sidebar="dark"] .mm-active > i {
    color: var(--ks-green) !important;
}

/* ---------- Topbar ---------- */
#page-topbar {
    box-shadow: 0 1px 2px rgba(1, 39, 83, 0.08);
}

/* ---------- SweetAlert2 Institutional Customization ---------- */
.swal2-popup {
    border-radius: 12px !important;
    padding: 2em !important;
    font-family: 'Inter', Arial, sans-serif !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.swal2-title {
    font-weight: 600 !important;
    color: var(--ks-navy) !important;
    font-size: 1.5em !important;
}

.swal2-html-container {
    color: #555555 !important;
    font-size: 1rem !important;
}

.swal2-confirm.btn,
.swal2-cancel.btn {
    border-radius: 6px !important;
    padding: 0.5rem 1.5rem !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.kiambesoft-swal-popup {
    border-top: 4px solid var(--ks-blue);
}

/* ---------- DataTables Styling Adjustments ---------- */
table.dataTable {
    border-collapse: collapse !important;
}

table.dataTable thead th {
    background-color: #f1f5f9;
    color: #475569;
    font-weight: 600;
    border-bottom: 2px solid #e2e8f0 !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 12px 10px !important;
}

table.dataTable tbody td {
    padding: 12px 10px !important;
    vertical-align: middle;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.85rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ks-navy) !important;
    color: white !important;
    border: 1px solid var(--ks-navy) !important;
    border-radius: 4px;
}

/* ---------- Cards ---------- */
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0 !important;
    padding: 1rem 1.25rem;
}

.card-header .text-primary,
.card-header i.text-primary {
    color: var(--ks-blue) !important;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* ---------- Select2 Institutional Overrides ---------- */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #f1f5f9 !important;
    color: var(--ks-navy) !important;
}

.select2-container--default .select2-selection--single {
    height: 38px !important;
    border: 1px solid #ced4da !important;
    padding: 0.375rem 0.75rem !important;
    padding-top: 5px;
    border-radius: 6px !important;
    background-color: #fff;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    color: #495057 !important;
    padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    width: 30px !important;
    top: 1px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #adb5bd transparent transparent transparent;
    border-width: 5px 4px 0 4px;
    margin-left: 0 !important;
    margin-top: 2px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    line-height: 20px;
    font-weight: bold;
    color: #dc3545;
    z-index: 10;
    margin-right: 0;
}

.select2-dropdown {
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
    border-radius: 6px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--ks-blue) !important;
}

/* ---------- Login / Auth screens ---------- */
.text-kiambe {
    color: var(--ks-green);
}

/* ==========================================================================
   Modo Escuro — sobreposições para o data-bs-theme="dark" nativo do
   Bootstrap 5.3, activado pelo alternador em layouts/right-sidebar.blade.php.
   As regras acima usam cores fixas (muitas com !important) desenhadas só
   para o tema claro, por isso ignoravam por completo o alternador. Este
   bloco cobre os componentes partilhados por toda a aplicação; páginas com
   os seus próprios <style> (Dashboard, Relatórios) têm overrides adicionais
   no próprio ficheiro Blade para as variáveis/cores específicas dessas
   vistas.
   ========================================================================== */
[data-bs-theme="dark"] body {
    background-color: #171c28;
    color: #e4e6ef;
}

[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .h1,
[data-bs-theme="dark"] .h2,
[data-bs-theme="dark"] .h3,
[data-bs-theme="dark"] .h4,
[data-bs-theme="dark"] .h5,
[data-bs-theme="dark"] .h6 {
    color: #e4e6ef;
}

[data-bs-theme="dark"] .card-title {
    color: #f8f9fa;
    font-weight: 700;
}

[data-bs-theme="dark"] .card {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .card-header {
    background-color: #232838;
    border-bottom-color: #33384a;
}

/* .bg-white e .text-dark são utilitários do Bootstrap com !important,
   usados em ~17 vistas (Armazéns, Produtos, Clientes, Fornecedores,
   Lotes, Entradas, Saídas, etc.) para dar aos cabeçalhos de card um
   fundo branco fixo com texto escuro — daí ficarem sempre "presos" ao
   modo claro. Neutralizados aqui, sem tocar nas ~17 vistas uma a uma. */
[data-bs-theme="dark"] .card-header.bg-white {
    background-color: #232838 !important;
    border-bottom-color: #33384a !important;
}
[data-bs-theme="dark"] .card-header.bg-white .text-dark {
    color: #f1f2f6 !important;
}

[data-bs-theme="dark"] table.dataTable thead th {
    background-color: #1e2333;
    color: #b8bfd1;
    border-bottom-color: #33384a !important;
}

[data-bs-theme="dark"] table.dataTable tbody td {
    color: #cfd3e0;
    border-bottom-color: #2a2f42;
}

[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--ks-blue) !important;
    border-color: var(--ks-blue) !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
    background-color: #1e2333;
    border-color: #3a4055 !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e4e6ef !important;
}

[data-bs-theme="dark"] .select2-dropdown {
    background-color: #1e2333;
    border-color: #3a4055 !important;
    color: #e4e6ef;
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--selectable {
    background-color: #262b3d !important;
    color: #e4e6ef !important;
}

[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #1e2333;
    border-color: #3a4055 !important;
    color: #e4e6ef;
}

[data-bs-theme="dark"] .swal2-popup {
    background: #232838 !important;
    color: #e4e6ef !important;
}

[data-bs-theme="dark"] .swal2-title {
    color: #f1f2f6 !important;
}

[data-bs-theme="dark"] .swal2-html-container {
    color: #b8bfd1 !important;
}

[data-bs-theme="dark"] .modal-content {
    background-color: #1f2434;
    color: #e4e6ef;
}

[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: #33384a;
}