/* 
FONT SETUP 
Você pode substituir "Inter" por outra fonte se tiver preferência (ex: "Poppins" ou "Rubik").
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
*/

.file-image img, .navbar-home img {
    border-radius: unset !important;   
    object-fit: initial !important;    
    width: initial !important;        
    height: initial !important;      
    align-self: auto !important;    
  }
  

/* Sobrescrever estilos do bundle para largura total da tela */
body {
    width: 100% !important;
    max-width: 100% !important;
}
    
body .container {
    width: 95% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Configuração para tela cheia em dispositivos maiores */
@media (min-width: 768px) {
    body.full-width .container {
        width: 95% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    body .container {
        width: 95% !important;
        max-width: 100% !important;
    }
}
/* 
* {
    font-family: 'Inter', sans-serif !important;
} */

:root {
    --selected-bg: #34bc5a; /* cor clara */
}

[data-theme="dark"] {
    --selected-bg: #1e3a5f; /* cor escura */
}



/* Colours */
:root {
    --background-color: #254ab0;
    --background-color-dark: #12255a;
    --primary-color: #ff9800;
    --secondary-color: #254ab0;
    --success-color: #2da149;
    --white-color: #ffffff;
    --black-color: #000000;
    --light-bg: #f8f9fa;
    --sidebar-select-color: #34bc5b4a;
    --awesomplete-hover-bg: #34bc5b4a;
    --invert-neutral: #254ab0;
    /*--focus-default: #254ab0;
    --neutral: #254ab0;*/
    
    /* Variáveis específicas para ícones como no Frappe */
    --icon-stroke: var(--gray-600);
    --icon-fill: none;
}


/* [data-theme="dark"] {
    --bg-color: #1a1d23;
    --border-color: #3a3f51;
    --avatar-frame-bg: #2d3142;
    --sidebar-select-color: rgba(2, 121, 208, 0.2);
    --awesomplete-hover-bg: rgba(2, 121, 208, 0.15);
    --scroll-bg: #1a1d23;
    --scroll-color: #3a3f51;
    --light-bg: #252938;
    --border-light: #3a3f51;
    --text-color: #e9ecef;
    --text-muted: #adb5bd;
} */


.nested-container button.standard-sidebar-label {
    display: none !important;
}

.btn-primary{
    color: #fff !important;
    background-color: var(--primary-color) !important;
}

.primary-action{
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border: none;
    transition: all 0.3s ease;
}

.primary-action:hover{
    background-color: #e68900 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
}

.btn-primary:hover{
    background-color: #e68900 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.3);
}

.btn-modal-primary{
    color: #fff !important;
    background-color: var(--primary-color) !important;
}

.navbar {
    /* background-color: #e8efe6 !important; */
    border-bottom-width: thick !important;
    border-bottom-color: #34bc5a !important;
}

.selected {
    background-color: var(--selected-bg) !important;
}


.driver-next-btn {
    background-color:  #254ab0 !important;
    border-color:  #254ab0 !important;
    color: white !important;
}


[data-theme="dark"] .navbar{
    background-color: var(--background-color-dark) !important;
}
[data-theme="dark"] .navbar-expand{
    background-color: var(--background-color-dark);
}

.navbar{
    background-color: var(--background-color) !important;
}
.navbar-expand{
    background-color: var(--background-color);
}

#navbar-breadcrumbs > li > a::before{
    font-family: FontAwesome;
    top: 3px;
    content: "▸";
    color: var(--white-color) !important;
}
#navbar-breadcrumbs a{
    color: var(--white-color) !important;
    text-decoration: none;
}
#navbar-breadcrumbs span{
    color: var(--white-color) !important;
    text-decoration: none;
}
#navbar-breadcrumbs .disabled{
    color: var(--white-color) !important;
    text-decoration: none;
}

h3.ellipsis.title-text,
.widget-group .widget-group-head .widget-group-title{
    color: var(--background-color) !important;
}
[data-theme="dark"] h3.ellipsis.title-text,
[data-theme="dark"] .widget-group .widget-group-head .widget-group-title{
    color: #9ad3ff !important;
}

.navbar-nav .nav-link {
    color: var(--white-color) !important;
}

.nav-item .nav-link .es-icon {
    stroke: #fff !important;
}

/* CSS específico APENAS para ícones de notificação */
.notifications-seen svg,
.notifications-unseen svg {
    color: var(--white-color) !important;
    fill: currentColor !important;
    stroke: none !important;
}

/* Força cor branca para elementos use dentro de SVG de notificação */
.notifications-seen svg use,
.notifications-unseen svg use {
    color: var(--white-color) !important;
    fill: var(--white-color) !important;
}

/* Ícones de notificação específicos no navbar - exclui search */
.navbar .notifications-seen,
.navbar .notifications-unseen {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* Excluir explicitamente o ícone de search do filtro branco */
.navbar .search-bar svg,
.navbar [class*="search"] svg,
.navbar .form-control + svg {
    filter: none !important;
    color: inherit !important;
}

/* SIDEBAR ITEM SELECIONADO - Baseado nas práticas do Frappe Framework */

/* Item do sidebar selecionado - background e cor geral */
.desk-sidebar-item.standard-sidebar-item.selected {
    background-color: var(--selected-bg) !important;
    color: var(--white-color) !important;
}

/* Label (texto) fica branco quando selecionado */
.desk-sidebar-item.standard-sidebar-item.selected .sidebar-item-label,
.desk-sidebar-item.standard-sidebar-item.selected .item-anchor {
    color: var(--white-color) !important;
}

/* Ícones SVG selecionados - método Frappe Framework */
.desk-sidebar-item.standard-sidebar-item.selected .sidebar-item-icon .icon,
.desk-sidebar-item.standard-sidebar-item.selected .sidebar-item-icon svg {
    color: var(--white-color) !important;
}

/* Para ícones que usam stroke (contorno) - preserva vazado */
.desk-sidebar-item.standard-sidebar-item.selected .sidebar-item-icon .icon use,
.desk-sidebar-item.standard-sidebar-item.selected .sidebar-item-icon svg use {
    stroke: var(--white-color) !important;
    fill: none !important;
    color: var(--white-color) !important;
}

/* Para ícones que usam fill (preenchido) */
.desk-sidebar-item.standard-sidebar-item.selected .sidebar-item-icon svg[fill]:not([fill="none"]) {
    fill: var(--white-color) !important;
}

/* Método alternativo usando filter para garantir que funcione */
.desk-sidebar-item.standard-sidebar-item.selected .sidebar-item-icon {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}

input:focus{
    border: 2px solid var(--success-color) !important;
}

.form-control:focus{
    box-shadow: 0 0 0 3px rgba(2, 121, 208, 0.1) !important;
}

.frappe-control .action-btn, .frappe-control .link-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
    padding: 4px;
    z-index: 3;
    border: none;
}

.frappe-control button.action-btn, .frappe-control button.link-btn {
    padding: 4px 6px;
    background-color: transparent !important;
    border: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.frappe-control button.action-btn:hover, .frappe-control button.link-btn:hover {
    background-color: rgba(0, 0, 0, 0.1) !important;    
}

.frappe-control .link-btn {
    background-color: transparent !important;   
    display: none;
}

/* Seletores para dia selecionado no datepicker - várias opções */

/* Opção 1: Seletor mais específico e correto */
#datepickers-container .datepicker--cell-day.-selected- {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}

/* Opção 2: Seletor alternativo caso a classe seja diferente */
#datepickers-container .datepicker--cell-day.selected {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}

/* Opção 3: Seletor mais amplo para pegar variações */
.datepicker .datepicker--cell-day[class*="selected"] {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}

/* Opção 4: Seletor usando atributo aria (mais acessível) */
.datepicker .datepicker--cell-day[aria-selected="true"] {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
}

.search-bar .awesomplete input {
    background-color: var(--bg-color) !important;
}


.btn.btn-primary, div#driver-popover-item .driver-popover-footer button.btn-primary, div#driver-popover-item .driver-popover-footer button.driver-next-btn {
    background-color: var(--btn-primary);
    color: var(--white-color);
    white-space: nowrap;
    --icon-stroke: currentColor;
    --icon-fill-bg: var(--btn-primary);
  }
  .btn.btn-primary:active, div#driver-popover-item .driver-popover-footer button.btn-primary:active, div#driver-popover-item .driver-popover-footer button.driver-next-btn:active {
    color: var(--gray-100) !important;
    background-color: var(--invert-neutral) !important;
  }