/**
 * GesFitEvolution - Custom CSS
 * Template customizations on top of AdminLTE 4
 */

/* ============================================
   Color Variables (overridden by template params)
   ============================================ */
:root {
    --gesfit-primary: var(--bs-primary, #0d6efd);
    --gesfit-accent: var(--bs-info, #0dcaf0);
    --gesfit-sidebar-header: rgba(255, 255, 255, 0.5);

    /* Derived shades of the brand colour (auto-follow --bs-primary) */
    --gesfit-primary-dark: color-mix(in srgb, var(--bs-primary, #0d6efd) 82%, #000);
    --gesfit-primary-darker: color-mix(in srgb, var(--bs-primary, #0d6efd) 68%, #000);
    --gesfit-primary-light: color-mix(in srgb, var(--bs-primary, #0d6efd) 85%, #fff);
    --gesfit-primary-soft: color-mix(in srgb, var(--bs-primary, #0d6efd) 12%, transparent);
    --gesfit-primary-softer: color-mix(in srgb, var(--bs-primary, #0d6efd) 6%, transparent);
}

[data-bs-theme="light"] {
    --gesfit-sidebar-header: rgba(0, 0, 0, 0.4);
}

/* ============================================
   Brand colour -> Bootstrap 5 components
   ---------------------------------------------------------------
   Bootstrap 5 compiles component colours into CSS custom properties
   (--bs-btn-bg, --bs-pagination-active-bg, ...), therefore simply
   setting --bs-primary on <html> does NOT re-theme the components.
   These rules re-point the component variables at the brand colour.
   ============================================ */

a {
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--gesfit-primary-dark);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb);
}

.nav-link {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--bs-primary);
}

/* --- Solid buttons --- */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--gesfit-primary-dark);
    --bs-btn-hover-border-color: var(--gesfit-primary-dark);
    --bs-btn-active-bg: var(--gesfit-primary-darker);
    --bs-btn-active-border-color: var(--gesfit-primary-darker);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* --- Outline buttons --- */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--gesfit-primary-dark);
    --bs-btn-active-border-color: var(--gesfit-primary-dark);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* --- Accent (accent_color is the same orange as the brand) --- */
.btn-info {
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: var(--gesfit-primary-dark);
    --bs-btn-hover-border-color: var(--gesfit-primary-dark);
    --bs-btn-active-bg: var(--gesfit-primary-darker);
    --bs-btn-active-border-color: var(--gesfit-primary-darker);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
}

.btn-outline-info {
    --bs-btn-color: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--gesfit-primary-dark);
    --bs-btn-active-border-color: var(--gesfit-primary-dark);
}

/* --- Links styled as buttons --- */
.btn-link {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-hover-color: var(--gesfit-primary-dark);
    --bs-btn-active-color: var(--gesfit-primary-darker);
}

/* --- Pagination --- */
.pagination,
.page-link {
    --bs-pagination-color: var(--bs-primary);
    --bs-pagination-hover-color: var(--gesfit-primary-dark);
    --bs-pagination-focus-color: var(--gesfit-primary-dark);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
}

/* --- Form controls focus ring and checks --- */
.form-control:focus,
.form-select:focus {
    border-color: var(--gesfit-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: var(--gesfit-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
}

/* --- Dropdown / list group / nav active states --- */
.dropdown-menu,
.list-group {
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

/* --- Progress / badge helpers --- */
.progress {
    --bs-progress-bar-bg: var(--bs-primary);
}

.text-primary {
    color: var(--bs-primary) !important;
}

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

/* ============================================
   Sidebar Enhancements
   ============================================ */

/* Sidebar header styling */
.sidebar-menu .nav-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gesfit-sidebar-header);
    padding: 0.75rem 1rem 0.25rem;
    margin: 0;
}

/* Sidebar menu active state */
.sidebar-menu .nav-link.active {
    font-weight: 600;
    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1);
    border-left: 3px solid var(--gesfit-primary);
}

/* Sidebar collapsed mode - active indicator */
.layout-fixed.sidebar-collapse .sidebar-menu .nav-link.active {
    border-left: none;
    border-radius: 0.375rem;
    margin: 0 0.5rem;
    padding-left: 0.5rem;
}

/* Sidebar search */
.sidebar-search {
    padding: 0.5rem 1rem;
}

/* ============================================
   Content Enhancements
   ============================================ */

/* Fabrik component integration - remove card wrapper for Fabrik pages */
.app-content .card:has(.fabrikCalendar) {
    border: none;
    box-shadow: none;
}

.app-content .card:has(.fabrikCalendar) .card-body {
    padding: 0;
}

/* Fabrik list styling adjustments */
.fabrikList {
    width: 100%;
}

.fabrikList table {
    width: 100%;
}

/* Fabrik form integration */
.fabrikForm {
    width: 100%;
}

/* Fabrik button styles - match Bootstrap 5 / AdminLTE */
.fabrikButtons .btn,
.fabrik_actionsContainer .btn {
    margin: 0 2px;
}

/* Fabrik filter bar */
.fabrik_filter {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

/* Fabrik pagination */
.fabrikPagination {
    display: flex;
    justify-content: center;
}

/* DataTables integration */
.dataTables_wrapper .dataTables_filter input {
    margin-left: 0.5em;
}

.dataTables_wrapper .dataTables_length select {
    margin: 0 0.5em;
}

/* ============================================
   Header Enhancements
   ============================================ */

/* Theme switcher buttons */
#bd-theme .dropdown-item.active {
    background-color: var(--gesfit-primary);
    color: #fff;
}

/* ============================================
   Login page branding
   ============================================ */
.login-box {
    width: 360px;
    margin: 7% auto;
}

@media (max-width: 768px) {
    .login-box {
        width: 90%;
        margin: 5% auto;
    }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .app-content-header h1 {
        font-size: 1.25rem;
    }
}

/* Breadcrumb styling */
.app-content-header .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

/* Card header for Fabrik */
.card-title .fabrikTitle {
    margin: 0;
    font-size: 1.1rem;
}

/* ============================================
   Print styles
   ============================================ */
@media print {
    .app-header,
    .app-sidebar,
    .app-footer,
    .app-content-header {
        display: none !important;
    }

    .app-main {
        margin: 0;
        padding: 0;
    }

    .app-content {
        padding: 0;
    }
}