:root {

    /* --- Cor primária --- */
    --tk-primary:       #1D7FC3;   /* Cloud Blue */
    --tk-primary-dark:  #0D2B4E;   /* Dark Navy */
    --tk-primary-light: #00A9E0;   /* Accent */

    /* --- Tints (fundos derivados do primário) --- */
    --tk-tint:          #E8F4FC;   /* hover, check, selected */
    --tk-tint-mid:      #D6EBF9;   /* hover selecionado */
    --tk-tint-strong:   #EEF6FC;   /* backgrounds gerais */

    /* --- Hierarquia de texto --- */
    --tk-text-strong:   #0D2B4E;
    --tk-text-mid:      #3D5A73;
    --tk-text-light:    #8EAEC4;

    /* --- Bordas --- */
    --tk-border:        #D6E6F2;
    --tk-border-light:  #EEF6FC;
    --tk-border-field:  #AECFE8;

    /* --- Superfícies --- */
    --tk-surface:       #EEF6FC;
    --tk-surface-mid:   #F0F7FC;
    --tk-surface-light: #F7FBFE;

    /* --- Sombra (RGB separado para rgba()) --- */
    --tk-shadow-rgb:    13, 43, 78;

    /* --- Estados do btn-primary --- */
    --tk-btn-hover:     #163D6B;
    --tk-btn-active:    #091E38;
    --tk-btn-disabled:  #8EAEC4;

    /* --- Dropzone --- */
    --tk-dropzone-tint: #e8f4fc55;

    --name: hospedagem;

    /* --- Tipografia --- */
    --font-size:   13px;
    --font-family: 'Poppins', 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

}



:root {

    /* --- Cor principal --- */
    --main-color: var(--tk-primary);

    /* --- Texto --- */
    --text-color-strong: var(--tk-text-strong);
    --text-color:        var(--tk-text-mid);
    --text-color-light:  var(--tk-text-light);

    /* --- Estrutura --- */
    --template-border-color: var(--tk-border);
    --scrollbar-color:       var(--tk-border-field);

    /* --- Fundos --- */
    --live-background-color: var(--tk-surface);

    /* ── Header ── */
    --header-height:               56px;
    --header-background-color:     #FFFFFF;
    --header-border-bottom:        var(--tk-border);
    --header-logo-border-right:    transparent;
    --header-logo-border-bottom:   var(--tk-border);
    --header-logo-background:      #FFFFFF;
    --header-track-border-right:   none;
    --header-logo-font-size:       18px;
    --header-text-color:           var(--tk-text-strong);
    --header-logo-text-color:      var(--tk-text-strong);
    --header-box-display:          none;
    --header-box-width:            56px;
    --header-box-background:       transparent;
    --header-box-shadow:           none;
    --header-box-padding-horizontal:  0px;
    --header-box-padding-vertical:    0px;
    --header-logo-padding-horizontal: 0px;
    --header-logo-padding-vertical:   0px;

    /* ── Buttons ── */
    --button-height:           36px;
    --button-border:           var(--tk-border-field);
    --button-text-color:       var(--tk-text-mid);
    --button-text-color-hover: var(--tk-primary);
    --button-background:       #FFFFFF;
    --button-border-radius:    6px;
    --button-padding:          12px;
    --button-box-shadow:       0 1px 2px 0 rgba(var(--tk-shadow-rgb), 0.06);

    /* ── Menu ── */
    --menu-box-shadow:               none;
    --menu-master-color-strong:      var(--tk-text-strong);
    --menu-width:                    250px;
    --menu-border-right:             var(--tk-border);
    --menu-background-color:         #FFFFFF;
    --menu-icon-font-size:           15px;
    --menu-background-check:         var(--tk-tint);
    --menu-check-color:              var(--tk-primary);
    --menu-button-border-color:      var(--tk-border-field);
    --menu-background-button-circle: #FFFFFF;
    --menu-color-button-circle:      var(--tk-text-mid);
    --menu-user-splash-background:   var(--tk-surface-mid);

    /* ── Submenu ── */
    --submenu-border-right:            var(--tk-border);
    --submenu-background-color:        #FFFFFF;
    --submenu-sub-text-color:          var(--tk-text-mid);
    --submenu-text-color:              var(--tk-text-mid);
    --submenu-text-hover:              var(--tk-primary);
    --submenu-background-check:        var(--tk-tint);
    --submenu-check-color:             var(--tk-primary);
    --submenu-font-size:               13px;
    --submenu-padding-horizontal:      0px;
    --submenu-item-padding-horizontal: 16px;
    --submenu-item-padding-vertical:   8px;

    /* ── Top Menu ── */
    --top-menu-border:                   var(--tk-border);
    --top-menu-background-color:         #FFFFFF;
    --top-menu-background-check:         var(--tk-tint);
    --top-menu-check-color:              var(--tk-primary);
    --top-menu-hover-color:              var(--tk-primary);
    --top-menu-color:                    var(--tk-text-mid);
    --top-menu-background-button-circle: #FFFFFF;
    --top-menu-color-button-circle:      var(--tk-text-mid);

    /* ── Top Submenu ── */
    --top-submenu-background-color: #FFFFFF;
    --top-submenu-text-color:       var(--tk-text-mid);
    --top-submenu-text-hover:       var(--tk-primary);
    --top-submenu-background-check: var(--tk-tint);
    --top-submenu-check-color:      var(--tk-primary);

    /* ── Login ── */
    --login-background-color:             var(--tk-surface);
    --login-panel-header-background:      #FFFFFF;
    --login-panel-left-background-color:  var(--tk-primary-dark);
    --login-panel-right-background-color: #FFFFFF;
    --login-button-background:            var(--tk-primary);
    --login-button-text-color:            #FFFFFF;
    --login-panel-left-text-header-color:       #FFFFFF;
    --login-panel-left-text-header-align:       left;
    --login-panel-left-text-header-font-size:   28px;
    --login-panel-left-text-header-font-weight: 700;
    --login-panel-left-text-footer-color:       #FFFFFF;
    --login-panel-left-text-footer-align:       left;
    --login-panel-left-text-footer-font-size:   20px;
    --login-panel-left-text-footer-font-weight: 600;
    --login-title-font-size:   24px;
    --login-title-align:       center;
    --login-title-font-weight: 700;
    --login-title-color:       var(--tk-text-strong);
    --login-header-font-size:  13px;
    --login-header-align:      left;
    --login-header-color:      var(--tk-text-mid);
    --login-border-color:      var(--tk-border);
    --login-link-color:        var(--tk-primary);
    --login-panel-detail-display:         flex;
    --login-panel-detail-display-image:   flex;
    --login-panel-detail-display-details: flex;
    --login-panel-detail-image-size:      contain;
    --login-panel-detail-image-position:  center;
    --login-panel-detail-direction:       row;
    --login-panel-max-width:              1000px;
    --login-panel-border-radius:          8px;
    --login-panel-box-shadow:             0 4px 6px -1px rgba(var(--tk-shadow-rgb), 0.12);
    --login-form-box-shadow:              none;
    --login-panel-left-header-image-position: center;
    --login-text-center-align:  center;
    --login-text-center-size:   14px;
    --login-text-center-weight: 500;
    --login-text-center-color:  var(--tk-text-mid);
    --login-background-opacity: 1;

    /* ── Fields ── */
    --field-border-color:        var(--tk-border-field);
    --field-border-top:          1px;
    --field-border-bottom:       1px;
    --field-border-right:        1px;
    --field-border-left:         1px;
    --field-height:              36px;
    --field-border-radius:       6px;
    --field-placeholder-color:   var(--tk-text-light);
    --field-padding-horizontal:  12px;
    --field-padding-vertical:    0px;
    --field-padding:             var(--field-padding-vertical) var(--field-padding-horizontal);
    --field-color:               var(--tk-text-strong);
    --field-background:          #FFFFFF;
    --field-focus-border-color:  var(--tk-primary);
    --field-check-color:         var(--tk-primary);
    --field-disabled-background: var(--tk-surface);
    --field-disabled-border:     var(--tk-border-field);
    --field-disabled-text-color: var(--tk-text-light);

    /* ── Content ── */
    --content-border-color:  var(--tk-border);
    --content-border-radius: 8px;
    --content-background:    #FFFFFF;
    --color-overlay:         rgba(var(--tk-shadow-rgb), 0.5);

    /* ── Cores semânticas (fixas — não mudam com o tema) ── */
    --color-green:  #10B981;
    --color-red:    #EF4444;
    --color-orange: #F97316;
    --color-purple: #5B6AD0;
    /* As abaixo acompanham o tema */
    --color-blue:   var(--tk-primary);
    --color-sea:    var(--tk-primary-light);

    /* ── Modal ── */
    --modal-background:        #FFFFFF;
    --modal-footer-background: var(--tk-surface-mid);
    --modal-header-background: var(--tk-primary-dark);
    --modal-header-color:      #FFFFFF;

    --preloader-color: var(--tk-primary);
    --live-area-width: 100%;

    /* ── Panel ── */
    --panel-background:               #FFFFFF;
    --panel-header-background:        #FFFFFF;
    --panel-footer-background:        #FFFFFF;
    --panel-header-color:             var(--tk-text-strong);
    --panel-body-padding:             16px;
    --panel-border-radius:            8px;
    --panel-box-shadow:               none;
    --panel-border-color:             var(--tk-border);
    --panel-header-padding-vertical:  12px;
    --panel-header-padding-horizontal: 16px;
    --panel-header-border-color:      var(--tk-surface);
    --panel-header-font-size:         15px;
    --panel-header-font-weight:       600;
    --panel-padding:                  0;
    --panel-footer-align-buttons:     right;
    --panel-row-margin-bottom:        12px;

    /* ── Table ── */
    --tr-hover-background:       var(--tk-surface-mid);
    --tr-hover-color:            var(--tk-text-strong);
    --tr-even-background:        #FFFFFF;
    --tr-odd-background:         var(--tk-surface-light);
    --table-body-color:          var(--tk-text-mid);
    --table-header-color:        var(--tk-text-strong);
    --table-header-border-color: var(--tk-border);
    --table-header-background:   var(--tk-surface-mid);
    --table-header-font-weight:  600;
    --table-header-font-size:    13px;
    --table-header-padding-vertical: 12px;

    /* ── Tabs ── */
    --tab-active-color:        var(--tk-primary);
    --tab-active-background:   var(--tk-tint);
    --tab-active-border-color: var(--tk-primary);
    --tab-active-font-weight:  600;
    --tab-font-size:           13px;
    --tab-font-weight:         500;
    --tab-color:               var(--tk-text-mid);
    --tab-background:          transparent;
    --tab-border-color:        var(--tk-border);
    --tab-border-radius:       6px;

    /* ── Misc ── */
    --color-fit:             var(--tk-text-mid);
    --modules-button-radius: 6px;

    /* ── Sombras ── */
    --shadow-sm: 0 1px 2px 0      rgba(var(--tk-shadow-rgb), 0.06);
    --shadow-md: 0 4px 6px -1px   rgba(var(--tk-shadow-rgb), 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(var(--tk-shadow-rgb), 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(var(--tk-shadow-rgb), 0.1);

    /* ── Espaçamentos ── */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;

    /* ── Bordas ── */
    --border-width:       1px;
    --border-width-thick: 2px;
    --border-radius-sm:   4px;
    --border-radius-md:   6px;
    --border-radius-lg:   8px;
    --border-radius-xl:   12px;
    --border-radius-full: 9999px;

    /* ── Transições ── */
    --transition-fast: 0ms ease;
    --transition-base: 0ms ease;
    --transition-slow: 0ms ease;

    /* ── Focus ring ── */
    --focus-ring-color: rgba(var(--tk-shadow-rgb), 0.2);
    --focus-ring-width: 3px;

    /* ── Componentes específicos ── */
    --card-border-radius:   var(--panel-border-radius);
    --card-shadow:          var(--panel-box-shadow);
    --input-group-addon-bg: var(--tk-surface);
    --dropdown-bg:          #FFFFFF;
    --dropdown-border:      var(--tk-border);
    --dropdown-shadow:      var(--shadow-md);

    /* ── Z-index ── */
    --z-dropdown: 1000;
    --z-sticky:   1020;
    --z-fixed:    1030;
    --z-modal:    1040;
    --z-popover:  1050;
    --z-tooltip:  1060;
}


/* ════════════════════════════════════════════════════════════
   COMPONENTES GLOBAIS
   ════════════════════════════════════════════════════════════ */

/* Dropzone hover */
.tfile_dropzone:hover {
    border-color:     var(--tk-primary);
    background-color: var(--tk-dropzone-tint);
}

/* Login */
.container-login .login-content [page-name="LoginForm"] .card,
.container-login .login-content [page-name="LoginForm"] .card-footer {
    border: none !important;
}

.container-login .login-content [page-name="LoginForm"] .btn {
    background-color: var(--tk-primary-dark) !important;
    border-color:     var(--tk-primary-dark) !important;
    color:            #FFFFFF !important;
    box-shadow:       0 1px 2px 0 rgba(var(--tk-shadow-rgb), 0.2) !important;
}

.container-login .login-content [page-name="LoginForm"] .btn:hover,
.container-login .login-content [page-name="LoginForm"] .btn:focus {
    background-color: var(--tk-btn-hover) !important;
    border-color:     var(--tk-btn-hover) !important;
    color:            #FFFFFF !important;
    box-shadow:       0 2px 6px 0 rgba(var(--tk-shadow-rgb), 0.3) !important;
}

.container-login .login-content [page-name="LoginForm"] .btn:active,
.container-login .login-content [page-name="LoginForm"] .btn.active {
    background-color: var(--tk-btn-active) !important;
    border-color:     var(--tk-btn-active) !important;
    color:            #FFFFFF !important;
    box-shadow:       none !important;
}

.container-login .login-content [page-name="LoginForm"] .btn:disabled,
.container-login .login-content [page-name="LoginForm"] .btn.disabled {
    background-color: var(--tk-btn-disabled) !important;
    border-color:     var(--tk-btn-disabled) !important;
    color:            #FFFFFF !important;
    opacity:          0.65 !important;
    cursor:           not-allowed !important;
    box-shadow:       none !important;
}


/* ── Tabs Bootstrap ── */
.nav-tabs {
    border-bottom: 2px solid var(--template-border-color) !important;
}

.nav-tabs .nav-item {
    margin-bottom: -2px !important;
}

.nav-tabs .nav-link {
    font-size:        var(--tab-font-size);
    font-weight:      var(--tab-font-weight);
    color:            var(--tab-color);
    background-color: var(--tab-background);
    border:           none !important;
    border-bottom:    1px solid var(--template-border-color) !important;
    padding-top:      7px;
    border-radius:    var(--tab-border-radius) var(--tab-border-radius) 0 0;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color:            var(--tab-active-color);
    background-color: transparent !important;
    border-top:       none !important;
    border-left:      none !important;
    border-right:     none !important;
    border-bottom:    2px solid var(--tab-active-color) !important;
    font-weight:      var(--tab-active-font-weight) !important;
}

.tab-pane {
    border: none !important;
}


/* ════════════════════════════════════════════════════════════
   TABELAS (TDataGrid) — FormBuilder
   ════════════════════════════════════════════════════════════ */

.fb-field-container .fb-inline-field-container .table-responsive {
    border-radius: 8px !important;
    overflow:      hidden !important;
    background:    #FFFFFF !important;
    box-shadow:    0 1px 3px 0 rgba(var(--tk-shadow-rgb), 0.1) !important;
    margin-bottom: 20px !important;
}

.fb-field-container .fb-inline-field-container .table {
    border-collapse: separate !important;
    border-spacing:  0 !important;
    margin-bottom:   0 !important;
    width:           100% !important;
}

.fb-field-container .fb-inline-field-container .table thead th {
    background:     var(--tk-surface-mid) !important;
    color:          var(--tk-text-strong) !important;
    font-weight:    600 !important;
    font-size:      13px !important;
    padding:        12px 16px !important;
    border-bottom:  2px solid var(--tk-border) !important;
    border-top:     none !important;
    border-left:    none !important;
    border-right:   none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space:    nowrap !important;
    user-select:    none !important;
}

.fb-field-container .fb-inline-field-container .table thead th:first-child {
    border-top-left-radius: 8px !important;
}

.fb-field-container .fb-inline-field-container .table thead th:last-child {
    border-top-right-radius: 8px !important;
}

.fb-field-container .fb-inline-field-container .table thead th.tdatagrid_action {
    background: var(--tk-surface-mid) !important;
    padding:    8px 4px !important;
    text-align: center !important;
    width:      28px !important;
    min-width:  28px !important;
}

.fb-field-container .fb-inline-field-container .table tbody td {
    padding:        12px 16px !important;
    color:          var(--tk-text-mid) !important;
    font-size:      14px !important;
    border-bottom:  1px solid var(--tk-border-light) !important;
    border-top:     none !important;
    border-left:    none !important;
    border-right:   none !important;
    vertical-align: top !important;
}

table.tfieldlist td.field {
    vertical-align: top !important;
}

.fb-field-container .fb-inline-field-container .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--tk-surface-light) !important;
}

.fb-field-container .fb-inline-field-container .table-striped tbody tr:nth-of-type(even) {
    background-color: #FFFFFF !important;
}

.fb-field-container .fb-inline-field-container .table-hover tbody tr:hover {
    background-color: var(--tk-surface-mid) !important;
    cursor: pointer !important;
}

.fb-field-container .fb-inline-field-container .table tbody tr:last-child td {
    border-bottom: none !important;
}

.fb-field-container .fb-inline-field-container .table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px !important;
}

.fb-field-container .fb-inline-field-container .table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px !important;
}

.fb-field-container .fb-inline-field-container .table tbody td input[type="hidden"] {
    display: none !important;
}

.fb-field-container .fb-inline-field-container .table-bordered {
    border:        1px solid var(--tk-border) !important;
    border-radius: 8px !important;
}

.fb-field-container .fb-inline-field-container .table-bordered th,
.fb-field-container .fb-inline-field-container .table-bordered td {
    border-left:  none !important;
    border-right: none !important;
}

.fb-field-container .fb-inline-field-container .table tbody td[href] {
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.fb-field-container .fb-inline-field-container .table tbody td[generator="adianti"] {
    position: relative !important;
}

.fb-field-container .fb-inline-field-container .table tbody tr.selected {
    background-color: var(--tk-tint) !important;
}

.fb-field-container .fb-inline-field-container .table tbody tr.selected:hover {
    background-color: var(--tk-tint-mid) !important;
}

.fb-field-container .fb-inline-field-container .table tbody tr.loading td {
    opacity:        0.5 !important;
    pointer-events: none !important;
}

.panel .fb-field-container .fb-inline-field-container .table-responsive {
    margin:        0 !important;
    border-radius: 0 0 8px 8px !important;
}

.panel .fb-field-container .fb-inline-field-container .table thead th:first-child {
    border-top-left-radius: 0 !important;
}

.panel .fb-field-container .fb-inline-field-container .table thead th:last-child {
    border-top-right-radius: 0 !important;
}

@media (max-width: 768px) {
    .fb-field-container .fb-inline-field-container .table-responsive {
        border-radius: 6px !important;
    }

    .fb-field-container .fb-inline-field-container .table thead th,
    .fb-field-container .fb-inline-field-container .table tbody td {
        padding:   10px 12px !important;
        font-size: 13px !important;
    }

    .fb-field-container .fb-inline-field-container .table tbody td.action a {
        width:  28px !important;
        height: 28px !important;
    }

    .fb-field-container .fb-inline-field-container .table tbody td.action a i {
        font-size: 14px !important;
    }
}

.fb-field-container .fb-inline-field-container button.btn-success i[class*="fa-"],
.fb-field-container .fb-inline-field-container button.btn-success i.fa-edit,
.fb-field-container .fb-inline-field-container button.btn-success i.far,
.fb-field-container .fb-inline-field-container button.btn-success i.fas,
.fb-field-container .fb-inline-field-container button.btn-success span i {
    color: #FFFFFF !important;
}


/* ════════════════════════════════════════════════════════════
   BTN-PRIMARY
   ════════════════════════════════════════════════════════════ */

.btn.btn-primary {
    background-color: var(--tk-primary-dark) !important;
    border-color:     var(--tk-primary-dark) !important;
    color:            #FFFFFF !important;
    box-shadow:       0 1px 2px 0 rgba(var(--tk-shadow-rgb), 0.2) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--tk-btn-hover) !important;
    border-color:     var(--tk-btn-hover) !important;
    color:            #FFFFFF !important;
    box-shadow:       0 2px 6px 0 rgba(var(--tk-shadow-rgb), 0.3) !important;
}

.btn.btn-primary:active,
.btn.btn-primary.active {
    background-color: var(--tk-btn-active) !important;
    border-color:     var(--tk-btn-active) !important;
    color:            #FFFFFF !important;
    box-shadow:       none !important;
}

.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
    background-color: var(--tk-btn-disabled) !important;
    border-color:     var(--tk-btn-disabled) !important;
    color:            #FFFFFF !important;
    opacity:          0.65 !important;
    cursor:           not-allowed !important;
    box-shadow:       none !important;
}

.btn.btn-primary i,
.btn.btn-primary span i {
    color: #FFFFFF !important;
}


/* Opção selecionada (tag/badge no multiple) */
.select2-primary .select2-selection__choice,
.select2-primary + .select2-container .select2-selection__choice {
    background-color: var(--tk-tint) !important;
    color:            var(--tk-primary) !important;
    border-color:     var(--tk-border-field) !important;
}
 
/* Opção destacada no hover */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tk-tint) !important;
    color:            var(--tk-primary) !important;
}
 
/* Opção já selecionada (marcada) */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--tk-tint) !important;
    color:            var(--tk-text-strong) !important;
}
 
/* Seta do dropdown quando aberto */
.select2-container--default.select2-container--open
.select2-selection--single .select2-selection__arrow b {
    border-color: var(--tk-primary) !important;
}
 
/* Campo de busca interno ao abrir */
.select2-dropdown .select2-search__field:focus,
.select2-search--inline .select2-search__field:focus {
    border-color: var(--field-focus-border-color) !important;
    outline:      none !important;
}
 
/* Seleção múltipla — tag/choice */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tk-tint) !important;
    color:            var(--tk-primary) !important;
    border-color:     var(--tk-border-field) !important;
}
 
/* Seleção múltipla — foco no container */
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--field-focus-border-color) !important;
}