@charset "utf-8";

/*
 * Tema personalizável do sistema
 *
 * Para mudar a identidade visual, altere as variáveis abaixo.
 * Cores, arredondamentos, espaçamentos, fontes — tudo parametrizado.
 */

:root {
    /* ── Cores principais (CaféOS) ── */
    --tema-primaria:         #7CB342;   /* Verde folha vibrante */
    --tema-primaria-escura:  #5A8A2E;   /* Verde escuro para hover/borda */
    --tema-primaria-clara:   #9CCC4A;   /* Verde lima claro */
    --tema-primaria-bg:      #eef7e0;   /* Fundo suave verde-claro */

    /* ── Sidebar / Menu lateral ── */
    --sidebar-bg:            #1B2A1F;   /* Verde-floresta profundo */
    --sidebar-header-bg:     #0F1A14;   /* Quase preto esverdeado */
    --sidebar-hover-bg:      #2D4030;   /* Verde escuro médio */
    --sidebar-submenu-bg:    #0B130D;
    --sidebar-submenu-hover: #050908;
    --sidebar-texto:         #e8f3d8;   /* Branco esverdeado */
    --sidebar-accent:        #9CCC4A;   /* Acento verde-lima */
    --sidebar-borda:         #0F1A14;

    /* ── Navbar topo ── */
    --navbar-bg:             #1B2A1F;
    --navbar-borda:          #0F1A14;

    /* ── Destaques ── */
    --select2-highlight:     #7CB342;
    --label-pagar:           #5A8A2E;
    --label-laranja:         #e67e22;

    /* ── Forma ── */
    --radius:                2px;       /* 0 = reto, 5px = arredondado */
    --radius-lg:             2px;
    --radius-sm:             2px;

    /* ── Tipografia ── */
    --font-family:           Roboto, 'Helvetica Neue', sans-serif;
    --font-size-base:        13px;
    --font-size-sm:          12px;
    --font-size-navbar:      14px;

    /* ── Espaçamento ── */
    --padding-panel:         12px 16px;
    --padding-cell:          8px 8px;
    --padding-btn:           6px 14px;
    --padding-input:         6px 10px;
    --padding-navbar-item:   12px 14px;
}


/* =============================================
   TIPOGRAFIA GLOBAL
   ============================================= */

body {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    background-color: #f4f6f9;
}


/* =============================================
   ARREDONDAMENTO GLOBAL — substitui Bootstrap
   ============================================= */

.panel,
.dropdown-menu,
.btn,
.form-control,
.input-group-addon,
.nav-tabs > li > a,
.alert,
.well,
.modal-content,
.popover,
.tooltip-inner,
.label,
.badge,
.thumbnail,
.progress,
.list-group-item:first-child,
.list-group-item:last-child,
.breadcrumb {
    border-radius: var(--radius) !important;
}

.panel > .panel-heading {
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.panel > .panel-footer {
    border-radius: 0 0 var(--radius) var(--radius) !important;
}

.btn-group > .btn:first-child {
    border-radius: var(--radius) 0 0 var(--radius) !important;
}

.btn-group > .btn:last-child {
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

.input-group > .form-control:first-child,
.input-group > .input-group-addon:first-child {
    border-radius: var(--radius) 0 0 var(--radius) !important;
}

.input-group > .form-control:last-child,
.input-group > .input-group-addon:last-child,
.input-group > .input-group-btn:last-child > .btn {
    border-radius: 0 var(--radius) var(--radius) 0 !important;
}

.nav-tabs > li > a {
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-dropdown,
.select2-search__field {
    border-radius: var(--radius) !important;
}

.tt-menu {
    border-radius: var(--radius) !important;
}


/* =============================================
   ESPAÇAMENTOS — inputs, botões, células
   ============================================= */

.form-control {
    padding: var(--padding-input) !important;
    height: 34px !important;
    font-size: var(--font-size-base) !important;
    border-color: #bdc3c7;
    transition: border-color 0.2s, box-shadow 0.2s;
}

textarea.form-control {
    height: auto !important;
}

.input-group .input-group-addon {
    height: 32px !important;
    line-height: 32px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.btn:not(.btn-xs):not(.btn-lg) {
    padding: var(--padding-btn) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 500;
    letter-spacing: 0.2px;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.btn-xs {
    padding: 2px 8px !important;
    font-size: var(--font-size-sm) !important;
}

.input-group-addon {
    padding: var(--padding-input) !important;
    font-size: var(--font-size-base) !important;
    border-color: #bdc3c7;
    background-color: #ecf0f1;
}


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

.table > thead > tr > th {
    background-color: var(--tema-primaria) !important;
    color: #fff !important;
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--padding-cell) !important;
    border-bottom: 2px solid var(--tema-primaria-escura) !important;
}

/* Dentro de panel-primary, thead respeita inline style ou usa fundo neutro */
.panel-primary .table > thead > tr > th {
    background-color: #eef3f7 !important;
    color: #2c3e50 !important;
    border-bottom: 1px solid #dce1e6 !important;
}

/* Botões dentro de thead — contraste sobre fundo primário */
.table > thead > tr > th .btn-primary,
.table > thead > tr > th .btn {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: var(--sidebar-header-bg) !important;
}

.table > thead > tr > th .btn-primary:hover,
.table > thead > tr > th .btn:hover {
    background-color: rgba(255, 255, 255, 0.35) !important;
}

.table > tbody > tr > td,
.table > tfoot > tr > td {
    padding: var(--padding-cell) !important;
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f8f9fa;
}

.table-hover > tbody > tr:hover {
    background-color: var(--tema-primaria-bg) !important;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border-color: #dce1e6 !important;
}

.thead-gray-dark {
    background-color: var(--tema-primaria) !important;
    color: #fff !important;
}

/* Tablesorter — ícones sobre cabeçalho colorido */
.tablesorter-default .tablesorter-header {
    color: #fff;
}


/* =============================================
   PANELS
   ============================================= */

.panel {
    border: 1px solid #dce1e6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.panel-default > .panel-heading {
    background-color: #f0f3f6;
    border-bottom: 1px solid #dce1e6;
    font-weight: 600;
    padding: var(--padding-panel);
    color: #2c3e50;
}

.panel-body {
    padding: 16px;
}

.panel-primary > .panel-heading {
    background-color: var(--tema-primaria-escura) !important;
    border-color: var(--tema-primaria-escura) !important;
    padding: var(--padding-panel);
}

.panel-primary {
    border-color: var(--tema-primaria) !important;
}


/* =============================================
   NAVBAR TOPO
   ============================================= */

.navbar.navbar-default.navbar-fixed-top {
    background-color: var(--navbar-bg) !important;
    border-color: var(--navbar-borda) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-height: 48px !important;
}

.navbar-default .navbar-nav > li > a {
    color: var(--sidebar-texto) !important;
    font-size: var(--font-size-navbar) !important;
    padding: var(--padding-navbar-item) !important;
    transition: color 0.2s;
}

.navbar-default .navbar-nav > li > a:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.navbar-default .navbar-brand {
    color: var(--sidebar-texto) !important;
    font-size: 14px !important;
    font-family: var(--font-family) !important;
    font-weight: 600;
}


/* =============================================
   SIDEBAR / MENU LATERAL
   ============================================= */

.nav-side-menu {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-texto);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.nav-side-menu .brand {
    background-color: var(--sidebar-header-bg);
    padding: 8px 0;
}

.nav-side-menu ul,
.nav-side-menu li {
    line-height: 38px;
}

.nav-side-menu li {
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--sidebar-borda);
    transition: background-color 0.2s, border-color 0.2s;
}

.nav-side-menu li a {
    color: var(--sidebar-texto);
    font-weight: 400;
    letter-spacing: 0.3px;
}

.nav-side-menu li:hover {
    border-left-color: var(--sidebar-accent);
    background-color: var(--sidebar-hover-bg);
}

.nav-side-menu ul .active,
.nav-side-menu li .active {
    border-left: 3px solid var(--sidebar-accent);
    background-color: var(--sidebar-hover-bg);
}

.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
    color: var(--sidebar-accent);
}

.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
    color: var(--sidebar-accent);
}

.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
    background-color: var(--sidebar-submenu-bg);
    border-bottom: 1px solid var(--sidebar-borda);
    line-height: 32px;
}

.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
    background-color: var(--sidebar-submenu-hover);
}

#barra_menu_lateral {
    background-color: var(--sidebar-bg) !important;
}

#botoes_menu .btn {
    border-radius: var(--radius) !important;
}


/* =============================================
   BOOTSTRAP OVERRIDES — COR PRIMÁRIA
   ============================================= */

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

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--tema-primaria-escura) !important;
    border-color: var(--tema-primaria-escura) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.btn-default {
    background-color: #fff;
    border-color: #bdc3c7;
    color: #2c3e50;
}

.btn-default:hover,
.btn-default:focus {
    background-color: #ecf0f1;
    border-color: #95a5a6;
}

.btn-success {
    background-color: #27ae60 !important;
    border-color: #219a52 !important;
}

.btn-danger {
    background-color: #c0392b !important;
    border-color: #a93226 !important;
}

.btn-warning {
    background-color: #e67e22 !important;
    border-color: #cf6d17 !important;
    color: #fff !important;
}

.btn-info {
    background-color: #2980b9 !important;
    border-color: #2472a4 !important;
}

/* Links */
a {
    color: var(--tema-primaria-escura);
    transition: color 0.2s;
}

a:hover,
a:focus {
    color: var(--tema-primaria);
}

/* Paginação */
.pagination > li > a,
.pagination > li > span {
    color: var(--tema-primaria);
    border-color: #dce1e6;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--tema-primaria) !important;
    border-color: var(--tema-primaria) !important;
    color: #fff !important;
}

.pagination > li > a:hover {
    background-color: var(--tema-primaria-bg);
    color: var(--tema-primaria);
}

/* Nav tabs */
.nav-tabs {
    border-bottom: 2px solid #dce1e6;
}

.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    font-size: var(--font-size-sm) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #7f8c8d;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin-bottom: -2px;
    padding: 8px 16px !important;
    transition: color 0.2s, border-color 0.2s;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: var(--tema-primaria) !important;
    border: none !important;
    border-bottom: 2px solid var(--tema-primaria) !important;
    background: transparent !important;
}

.nav-tabs > li > a:hover {
    color: var(--tema-primaria) !important;
    background: transparent !important;
}

/* Progress bar */
.progress {
    height: 18px;
    box-shadow: none;
    background-color: #ecf0f1;
}

.progress-bar {
    background-color: var(--tema-primaria) !important;
    box-shadow: none;
}


/* =============================================
   LABELS E BADGES
   ============================================= */

.label {
    font-weight: 500 !important;
    letter-spacing: 0.3px;
    padding: 3px 8px !important;
}

.label-primary {
    background-color: var(--tema-primaria) !important;
}

.label-success {
    background-color: #27ae60 !important;
}

.label-danger {
    background-color: #c0392b !important;
}

.label-warning {
    background-color: #e67e22 !important;
    color: #fff !important;
}

.label-info {
    background-color: #2980b9 !important;
}

.label-default {
    background-color: #95a5a6 !important;
}

.label-pagar {
    background-color: var(--label-pagar) !important;
}

.label-laranja {
    background-color: var(--label-laranja) !important;
}

.badge {
    background-color: var(--tema-primaria);
    font-weight: 500;
}


/* =============================================
   ALERTS
   ============================================= */

.alert {
    border: none;
    font-weight: 500;
}

.alert-success {
    background-color: #d5f5e3;
    color: #1e8449;
}

.alert-danger {
    background-color: #fadbd8;
    color: #922b21;
}

.alert-warning {
    background-color: #fdebd0;
    color: #935116;
}

.alert-info {
    background-color: #e8f3d8;
    color: #3F5E1F;
}


/* =============================================
   INPUTS E SELECT2
   ============================================= */

.form-control:focus {
    border-color: var(--sidebar-accent) !important;
    box-shadow: 0 0 0 2px rgba(156, 204, 74, 0.20) !important;
}

/* Inputs nativos de data/hora — força aparência consistente */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control,
input[type="week"].form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: var(--radius) !important;
    line-height: 1.5;
}

/* Bootstrap-select */
.bootstrap-select {
    padding: 0 !important;
}

.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select > .dropdown-toggle:focus,
.bootstrap-select > .dropdown-toggle:active {
    border-radius: var(--radius) !important;
    border-color: #bdc3c7 !important;
    background-color: #fff !important;
    color: #2c3e50 !important;
    font-size: var(--font-size-base) !important;
    box-shadow: none !important;
}

.bootstrap-select .dropdown-menu {
    border-radius: var(--radius) !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: #bdc3c7;
    background-color: #fff;
    min-height: 34px !important;
}

.select2-results__option--highlighted {
    background-color: var(--select2-highlight) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 32px;
}

.select2-dropdown {
    border-color: #bdc3c7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* =============================================
   MODAIS
   ============================================= */

.modal-header {
    background-color: var(--tema-primaria);
    color: #fff;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 12px 16px;
}

.modal-header .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
}

.modal-header .close:hover {
    opacity: 1;
}

.modal-title {
    font-weight: 600;
    font-size: 15px;
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 12px 16px;
    background-color: #f8f9fa;
    border-top: 1px solid #dce1e6;
}

.modal-content {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: none;
}


/* =============================================
   DROPDOWN
   ============================================= */

.dropdown-menu {
    border: 1px solid #dce1e6;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 4px 0;
}

.dropdown-menu > li > a {
    padding: 6px 16px;
    font-size: var(--font-size-base);
    color: #2c3e50;
    transition: background-color 0.15s;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--tema-primaria-bg);
    color: var(--tema-primaria);
}


/* =============================================
   BREADCRUMB
   ============================================= */

.breadcrumb {
    background-color: #fff;
    border: 1px solid #dce1e6;
    padding: 8px 14px;
    font-size: var(--font-size-sm);
    margin-bottom: 16px;
}

.breadcrumb > li + li::before {
    color: #95a5a6;
}


/* =============================================
   WELLS E MISC
   ============================================= */

.well {
    background-color: #f8f9fa;
    border: 1px solid #dce1e6;
    box-shadow: none;
}

.titulo_pagina li {
    font-size: var(--font-size-base);
}

.botoes_pagina > .btn-primary {
    background-color: var(--tema-primaria) !important;
    border-color: var(--tema-primaria) !important;
}

/* Container */
.container-fluid {
    max-width: 1700px;
}

/* Tooltip */
.tooltip-inner {
    background-color: var(--sidebar-bg);
    font-size: var(--font-size-sm);
    padding: 4px 10px;
}

.tooltip.top .tooltip-arrow {
    border-top-color: var(--sidebar-bg);
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: var(--sidebar-bg);
}


/* =============================================
   TYPEAHEAD
   ============================================= */

.tt-menu {
    border: 1px solid #bdc3c7;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: var(--font-size-base);
}

.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
    background-color: var(--tema-primaria-bg);
    color: var(--tema-primaria);
}


/* =============================================
   SCROLLBAR CUSTOMIZADA (webkit)
   ============================================= */

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

::-webkit-scrollbar-track {
    background: #f0f3f6;
}

::-webkit-scrollbar-thumb {
    background: #b0bec5;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #90a4ae;
}


/* =============================================
   LISTA DE ORDENS DE COMPRA (oc-line cards)
   ============================================= */

.oc-line,
.oc-line-header {
    border-radius: var(--radius) !important;
    border-color: #dce1e6 !important;
}

.oc-line-header {
    background-color: var(--tema-primaria) !important;
    color: #fff !important;
    border-color: var(--tema-primaria-escura) !important;
    font-weight: 600;
}

.oc-line-header div {
    color: #fff !important;
}

.oc-line:hover {
    border-color: var(--sidebar-accent) !important;
    background-color: var(--tema-primaria-bg) !important;
}

/* Lista OC — labels */
.oc-line .label {
    border-radius: var(--radius-sm) !important;
}


/* =============================================
   PRINT — não altera impressão
   ============================================= */

@media print {
    body {
        background-color: #fff !important;
        color: #000 !important;
    }

    .table > thead > tr > th {
        background-color: #ddd !important;
        color: #000 !important;
    }

    .modal-header {
        background-color: #eee !important;
        color: #000 !important;
    }
}