/**
 * Telefusion Corporate Identity - CSS Variables & Theme Overrides
 *
 * Colors:
 * - Dark Green: #043D17 (Primary, Sidebar, Buttons)
 * - Light Green: #66FF33 (Accent, Hover, Success)
 * - Black: #13181C (Text, Headlines)
 * - White: #FFFFFF (Backgrounds)
 */

:root {
    /* CI Farben */
    --tf-dark-green: #043D17;
    --tf-dark-green-rgb: 4, 61, 23;
    --tf-light-green: #66FF33;
    --tf-light-green-rgb: 102, 255, 51;
    --tf-black: #13181C;
    --tf-white: #FFFFFF;

    /* Abgeleitete Farben */
    --tf-dark-green-light: #065A22;
    --tf-dark-green-dark: #022B0F;
    --tf-light-green-dark: #52CC29;

    /* Font Family */
    --tf-font-family: 'Allumi Std', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =============================================================================
   VELZON THEME OVERRIDES (Interner Bereich)
   ============================================================================= */

/* Sidebar Dark Theme */
[data-sidebar="dark"] .navbar-menu {
    --vz-vertical-menu-bg: var(--tf-dark-green);
    --vz-vertical-menu-item-color: rgba(255, 255, 255, 0.8);
    --vz-vertical-menu-item-hover-color: var(--tf-white);
    --vz-vertical-menu-item-hover-bg: var(--tf-dark-green-light);
    --vz-vertical-menu-item-active-color: var(--tf-white);
    --vz-vertical-menu-item-active-bg: var(--tf-dark-green-light);
}

[data-sidebar="dark"] .navbar-menu .navbar-nav .nav-link.active {
    background-color: var(--tf-dark-green-light);
}

/* Sidebar Border & Scrollbar */
[data-sidebar="dark"] .navbar-menu {
    border-right-color: var(--tf-dark-green-light);
}

/* Logo Container Background - nur Sidebar, nicht Topbar */
[data-sidebar="dark"] .app-menu .navbar-brand-box {
    background-color: var(--tf-dark-green);
}

/* Topbar Logo Container - transparent auf weißem Header */
.horizontal-logo.navbar-brand-box {
    background-color: transparent !important;
}

/* =============================================================================
   GLOBAL FONT OVERRIDE
   ============================================================================= */

body,
.navbar-menu,
.main-content,
.card,
.card-body,
.card-header,
.card-title,
.btn,
input,
select,
textarea,
.form-control,
.form-select,
.modal,
.modal-content,
.dropdown-menu,
.nav-link,
.page-title,
h1, h2, h3, h4, h5, h6,
p, span, div,
table, th, td,
.dataTables_wrapper {
    font-family: var(--tf-font-family) !important;
}

/* =============================================================================
   BUTTON OVERRIDES
   ============================================================================= */

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

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

.btn-outline-primary {
    color: var(--tf-dark-green) !important;
    border-color: var(--tf-dark-green) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--tf-dark-green) !important;
    border-color: var(--tf-dark-green) !important;
    color: var(--tf-white) !important;
}

.btn-success {
    background-color: var(--tf-light-green) !important;
    border-color: var(--tf-light-green) !important;
    color: var(--tf-black) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--tf-light-green-dark) !important;
    border-color: var(--tf-light-green-dark) !important;
    color: var(--tf-black) !important;
}

.btn-outline-success {
    color: var(--tf-dark-green) !important;
    border-color: var(--tf-light-green) !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: var(--tf-light-green) !important;
    border-color: var(--tf-light-green) !important;
    color: var(--tf-black) !important;
}

/* =============================================================================
   LINK COLORS
   ============================================================================= */

a {
    color: var(--tf-dark-green);
}

a:hover {
    color: var(--tf-light-green-dark);
}

/* =============================================================================
   BADGE & ALERT COLORS
   ============================================================================= */

.bg-primary {
    background-color: var(--tf-dark-green) !important;
}

.bg-success {
    background-color: var(--tf-light-green) !important;
}

.text-primary {
    color: var(--tf-dark-green) !important;
}

.text-success {
    color: var(--tf-dark-green) !important;
}

.badge-primary,
.badge.bg-primary {
    background-color: var(--tf-dark-green) !important;
}

.badge-success,
.badge.bg-success {
    background-color: var(--tf-light-green) !important;
    color: var(--tf-black) !important;
}

/* =============================================================================
   FORM ELEMENTS
   ============================================================================= */

.form-control:focus,
.form-select:focus {
    border-color: var(--tf-dark-green) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--tf-dark-green-rgb), 0.25) !important;
}

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

/* =============================================================================
   PAGINATION
   ============================================================================= */

.page-item.active .page-link {
    background-color: var(--tf-dark-green) !important;
    border-color: var(--tf-dark-green) !important;
}

.page-link {
    color: var(--tf-dark-green) !important;
}

.page-link:hover {
    color: var(--tf-dark-green-light) !important;
}

/* =============================================================================
   PROGRESS BARS
   ============================================================================= */

/* Standard Progress-Bars ohne explizite Inline-Farbe erhalten CI-Farbe */
.progress-bar:not([style*="background-color"]):not(.bg-warning):not(.bg-danger):not(.bg-info) {
    background-color: var(--tf-dark-green);
}

.progress-bar.bg-success:not([style*="background-color"]) {
    background-color: var(--tf-light-green);
}

/* Bootstrap Utility-Klassen für Progress-Bars erhalten */
.progress-bar.bg-warning {
    background-color: #ffc107 !important;
}

.progress-bar.bg-danger {
    background-color: #dc3545 !important;
}

.progress-bar.bg-info {
    background-color: #0dcaf0 !important;
}

.progress-bar.bg-primary {
    background-color: var(--tf-dark-green) !important;
}

/* =============================================================================
   TABS & NAV
   ============================================================================= */

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--tf-dark-green) !important;
    border-bottom-color: var(--tf-dark-green) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--tf-dark-green) !important;
}

/* =============================================================================
   DATATABLES
   ============================================================================= */

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--tf-dark-green) !important;
    border-color: var(--tf-dark-green) !important;
    color: var(--tf-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--tf-dark-green-light) !important;
    border-color: var(--tf-dark-green-light) !important;
    color: var(--tf-white) !important;
}

/* DataTables Sort Indicators - Verbesserte Sichtbarkeit */
table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_asc:after,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc:after {
    font-size: 1em !important;           /* Größer (war 0.8em) */
    opacity: 0.4 !important;             /* Sichtbarer (war 0.125) */
    line-height: 12px !important;        /* Angepasst (war 9px) */
    color: var(--tf-dark-green) !important;
}

/* Aktiver Aufsteigend-Pfeil */
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc:before {
    opacity: 1 !important;
    color: var(--tf-dark-green) !important;
}

/* Aktiver Absteigend-Pfeil */
table.dataTable thead > tr > th.sorting_desc:after,
table.dataTable thead > tr > td.sorting_desc:after {
    opacity: 1 !important;
    color: var(--tf-dark-green) !important;
}

/* Mehr Platz für größere Pfeile */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > td.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc {
    padding-right: 30px !important;
}

/* Hover-Effekt auf sortierbaren Spalten */
table.dataTable thead > tr > th.sorting:hover:before,
table.dataTable thead > tr > th.sorting:hover:after {
    opacity: 0.7 !important;
}

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

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--tf-dark-green) !important;
}

/* =============================================================================
   CARDS & HEADERS
   ============================================================================= */

.card-header.bg-primary {
    background-color: var(--tf-dark-green) !important;
}

/* =============================================================================
   SPINNERS & LOADERS
   ============================================================================= */

.spinner-border.text-primary {
    color: var(--tf-dark-green) !important;
}

/* =============================================================================
   SELECTION
   ============================================================================= */

::selection {
    background-color: var(--tf-light-green);
    color: var(--tf-black);
}

::-moz-selection {
    background-color: var(--tf-light-green);
    color: var(--tf-black);
}