/* =======================================================
   THEME BASE - Shared Component Overrides
   All colors reference CSS variables (--main-h/s/l, etc.)
   Variables are injected inline from database branding.
   ======================================================= */

/* ===================
   DEFAULT VARIABLES (fallback if DB not loaded)
=================== */
:root {
    --main-h: 240;
    --main-s: 81%;
    --main-l: 37%;
    --main: var(--main-h) var(--main-s) var(--main-l);

    --success-h: 270;
    --success-s: 91%;
    --success-l: 52%;

    --secondary-h: 0;
    --secondary-s: 0%;
    --secondary-l: 53%;

    --color-primary: hsl(var(--main-h), var(--main-s), var(--main-l));
    --color-secondary: hsl(var(--success-h), var(--success-s), var(--success-l));
    --color-terciary: #00aaff;
    --color-accent: #404042;
    --color-success: hsl(var(--success-h), var(--success-s), var(--success-l));

    --main-50: hsl(var(--main-h), var(--main-s), 95%);
    --main-100: hsl(var(--main-h), var(--main-s), 90%);
    --main-200: hsl(var(--main-h), var(--main-s), 80%);
    --main-300: hsl(var(--main-h), var(--main-s), 70%);
    --main-400: hsl(var(--main-h), var(--main-s), 60%);
    --main-500: hsl(var(--main-h), var(--main-s), var(--main-l));
    --main-600: hsl(var(--main-h), var(--main-s), calc(var(--main-l) - 4%));
    --main-700: hsl(var(--main-h), var(--main-s), calc(var(--main-l) - 8%));
    --main-800: hsl(var(--main-h), var(--main-s), calc(var(--main-l) - 12%));
    --main-900: hsl(var(--main-h), var(--main-s), calc(var(--main-l) - 16%));

    --navbar-bg: hsl(var(--main-h), var(--main-s), var(--main-l));
    --header-logo-max-height: 50px;
    --color-text-on-primary: #ffffff;
}

/* ===================
   RANKING BADGES
=================== */

.badge-position-0 {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)) 0%, color-mix(in srgb, hsl(var(--success-h), var(--success-s), var(--success-l)) 87%, transparent) 100%) !important;
}

.badge-position-1 {
    background: linear-gradient(135deg, hsl(var(--main-h), var(--main-s), var(--main-l)) 0%, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 100%) !important;
}

.badge-position-2 {
    background: linear-gradient(135deg, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 0%, color-mix(in srgb, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 87%, transparent) 100%) !important;
}

.badge-position-3 {
    background: linear-gradient(135deg, hsl(var(--main-h), var(--main-s), var(--main-l)) 0%, color-mix(in srgb, hsl(var(--main-h), var(--main-s), var(--main-l)) 80%, transparent) 100%) !important;
}

.badge-position-4 {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)) 0%, color-mix(in srgb, hsl(var(--success-h), var(--success-s), var(--success-l)) 80%, transparent) 100%) !important;
}

/* ===================
   TOP NAVBAR (HEADER)
=================== */

.top-navbar {
    background: var(--navbar-bg) !important;
    color: #ffffff !important;
}

.header-logo img {
    max-height: var(--header-logo-max-height) !important;
}

.top-navbar .users {
    background-color: #ffffff !important;
}

.top-navbar .flex-align .text-gray-500,
.top-navbar .text-gray-500 {
    color: #ffffff !important;
}

.top-navbar .toggle-btn {
    color: #ffffff !important;
}

.top-navbar .toggle-btn:hover {
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

/* Headers y navegación */
.client-header,
.header,
.navbar,
.sidebar-header {
    background-color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
    color: #ffffff !important;
}

/* ===================
   BUTTONS
=================== */

/* Botones primarios */
.btn-primary,
.bg-primary-600,
.hover-bg-primary-600:hover,
.bg-main-600,
.hover-bg-main-600:hover,
.btn-main {
    background-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    border-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.btn-primary:hover,
.bg-primary-600:hover,
.btn-main:hover {
    background-color: hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%)) !important;
    border-color: hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Botones secundarios */
.btn-secondary,
.bg-secondary-600 {
    background-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) !important;
    border-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.btn-secondary:hover {
    background-color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 5%)) !important;
    border-color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 5%)) !important;
}

/* Botones de éxito */
.btn-success,
.bg-success-600 {
    background-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    border-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.btn-success:hover {
    background-color: hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%)) !important;
}

/* Botones no-branded - solo override de color de texto para consistencia */
.btn-danger {
    color: var(--color-text-on-primary, #ffffff) !important;
}

.btn-danger:hover {
    color: var(--color-text-on-primary, #ffffff) !important;
}

.btn-warning {
    color: var(--color-text-on-primary, #ffffff) !important;
}

.btn-info {
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Botones outline */
.btn-outline-main,
.btn-outline-primary {
    background-color: transparent !important;
    border: 2px solid hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

.btn-outline-main:hover,
.btn-outline-primary:hover {
    background-color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* ===================
   TEXT & TITLES
=================== */

.text-client-primary,
.text-main-600,
h1.client-title,
h2.client-title,
h3.client-title {
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

.text-client-secondary {
    color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) !important;
}

.text-success-600,
.text-success-700 {
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

/* ===================
   CARDS & COMPONENTS
=================== */

.card-client-border {
    border-left: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

.card-client-header {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)) 0%, hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%)) 100%) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Badges */
.badge-client-primary,
.badge-main {
    background-color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.badge-client-success {
    background-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.badge-client-secondary {
    background-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Alerts */
.alert-client-success {
    background-color: hsla(var(--success-h), var(--success-s), var(--success-l), 0.1) !important;
    border-left: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 5%)) !important;
}

.alert-client-info {
    background-color: hsla(var(--main-h), var(--main-s), var(--main-l), 0.1) !important;
    border-left: 4px solid hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

/* Progress bars */
.progress-bar-client,
.progress-bar-main {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)), hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%))) !important;
}

/* ===================
   GRADIENTS
=================== */

.client-gradient-primary,
.bg-gradient-primary {
    background: linear-gradient(135deg, hsl(var(--main-h), var(--main-s), var(--main-l)) 0%, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 100%) !important;
}

.client-gradient-success {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)) 0%, hsl(var(--success-h), var(--success-s), calc(var(--success-l) + 8%)) 100%) !important;
}

.client-gradient-signature {
    background: linear-gradient(135deg, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 0%, hsl(var(--main-h), var(--main-s), var(--main-l)) 50%, hsl(var(--success-h), var(--success-s), var(--success-l)) 100%) !important;
}

.client-gradient-light {
    background: linear-gradient(135deg, hsl(var(--main-h), var(--main-s), 95%) 0%, hsl(var(--main-h), var(--main-s), 93%) 100%) !important;
}

.client-gradient-forest {
    background: linear-gradient(135deg, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 0%, hsl(var(--success-h), var(--success-s), var(--success-l)) 100%) !important;
}

/* ===================
   TABLES
=================== */

.table thead {
    background-color: #f9fafb !important;
    color: #374151 !important;
}

.table tbody tr:hover {
    background-color: #f9fafb !important;
}

.table tbody tr.client-highlight {
    background-color: hsla(var(--success-h), var(--success-s), var(--success-l), 0.05) !important;
}

/* ===================
   FORMS
=================== */

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
    border-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    box-shadow: 0 0 0 0.2rem hsla(var(--success-h), var(--success-s), var(--success-l), 0.25) !important;
}

.form-label.client-required::after {
    content: " *";
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

/* ===================
   SIDEBAR & NAVIGATION
=================== */

.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.3s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: hsla(var(--success-h), var(--success-s), var(--success-l), 0.15) !important;
    color: #ffffff !important;
}

.breadcrumb-item.active {
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

/* ===================
   DASHBOARD STATS
=================== */

.stat-card {
    border-left: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

.stat-card:hover {
    box-shadow: 0 8px 20px hsla(var(--main-h), var(--main-s), var(--main-l), 0.15) !important;
}

.stat-icon {
    background-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    color: #ffffff !important;
}

.stat-number {
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

/* ===================
   STUDENT COMPONENTS
=================== */

.student-hero {
    background: linear-gradient(135deg, hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) 0%, hsl(var(--main-h), var(--main-s), var(--main-l)) 100%) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.course-card {
    border-left: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

.course-card:hover {
    box-shadow: 0 12px 28px hsla(var(--main-h), var(--main-s), var(--main-l), 0.15) !important;
}

.status-badge.status-progress {
    background-color: hsla(var(--success-h), var(--success-s), var(--success-l), 0.95) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.status-badge.status-completed {
    background-color: hsla(var(--main-h), var(--main-s), var(--main-l), 0.95) !important;
    color: var(--color-text-on-primary, #ffffff) !important;
}

.status-badge.status-not-started {
    background-color: rgba(107, 114, 128, 0.95) !important;
    color: #ffffff !important;
}

.course-progress-bar {
    background: linear-gradient(135deg, hsl(var(--success-h), var(--success-s), var(--success-l)), hsl(var(--success-h), var(--success-s), calc(var(--success-l) - 8%))) !important;
}

/* ===================
   UTILITIES
=================== */

.client-checkmark {
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    font-weight: bold;
}

.client-checkmark::before {
    content: "✓ ";
}

.client-icon-primary {
    color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

.client-icon-success {
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

.client-icon-secondary {
    color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l)) !important;
}

.border-client-primary {
    border-color: hsl(var(--main-h), var(--main-s), var(--main-l)) !important;
}

.border-client-success {
    border-color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

.hover-bg-client:hover {
    background-color: hsla(var(--success-h), var(--success-s), var(--success-l), 0.1) !important;
}

.ph-fill.client-icon {
    color: hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
}

/* ===================
   ANIMATIONS
=================== */

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

.client-float {
    animation: float 6s ease-in-out infinite;
}

.client-transition {
    transition: all 0.3s ease;
}

/* ===================
   RESPONSIVE
=================== */

@media (max-width: 768px) {
    .stat-card {
        border-left: none !important;
        border-top: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    }

    .card-client-border {
        border-left: none !important;
        border-top: 4px solid hsl(var(--success-h), var(--success-s), var(--success-l)) !important;
    }
}

/* ===================
   DARK MODE (OPTIONAL)
=================== */

@media (prefers-color-scheme: dark) {
    .client-card {
        background-color: #1a1a1a !important;
        border-color: #2a2a2a !important;
    }

    .client-text {
        color: #e0e0e0 !important;
    }
}

/* ===================
   PRINT
=================== */

@media print {

    .top-navbar,
    .sidebar,
    .btn {
        color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ===================
   TEXT-ON-PRIMARY OVERRIDE
   Overrides Bootstrap's .text-white (#fff !important) inside branded backgrounds
   so text color is configurable via --color-text-on-primary.
=================== */

.bg-main-600 .text-white,
.bg-main-600.text-white,
.hover-bg-main-600:hover .text-white,
.bg-primary-600 .text-white,
.bg-primary-600.text-white,
.bg-secondary-600 .text-white,
.bg-secondary-600.text-white,
.btn-main.text-white,
.btn-primary.text-white,
.btn-secondary.text-white,
.btn-success.text-white,
.btn-danger.text-white,
.btn-warning.text-white,
.btn-info.text-white,
.u-modal-header-gradient .text-white,
.u-modal-header-gradient.text-white,
.card-client-header .text-white,
.card-client-header.text-white,
.student-hero .text-white,
.student-hero.text-white,
.badge-main.text-white,
.badge-client-primary.text-white,
.badge-client-success.text-white,
.badge-client-secondary.text-white,
.bg-gradient-primary .text-white,
.bg-gradient-primary.text-white,
[style*="--main-h"] .text-white,
[style*="hsl(var(--main"] .text-white,
.training-topbar .text-white,
.training-topbar.text-white {
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Also override .text-white directly when used on branded background elements */
.u-modal-header-gradient,
.training-topbar {
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* Override .text-white-50 (Bootstrap rgba(255,255,255,.5)) in branded contexts */
.u-modal-header-gradient .text-white-50,
.bg-main-600 .text-white-50,
.bg-primary-600 .text-white-50,
.training-topbar .text-white-50 {
    color: var(--color-text-on-primary, #ffffff) !important;
    opacity: 0.5;
}

/* Override hover-text-white utility in branded hover contexts */
.hover-bg-main-600.hover-text-white:hover,
.hover-bg-primary-600.hover-text-white:hover {
    color: var(--color-text-on-primary, #ffffff) !important;
}

/* ===================
   CLOSE BUTTON ON BRANDED BACKGROUNDS
   Bootstrap btn-close uses SVG background + filter for white variant.
   Use CSS mask to allow --color-text-on-primary to control close icon color.
=================== */
.u-modal-header-gradient .btn-close.btn-close-white,
.bg-main-600 .btn-close.btn-close-white,
.bg-primary-600 .btn-close.btn-close-white,
.training-topbar .btn-close.btn-close-white {
    filter: none !important;
    background: transparent !important;
    background-color: var(--color-text-on-primary, #ffffff) !important;
    -webkit-mask: var(--bs-btn-close-bg) center/1em auto no-repeat;
    mask: var(--bs-btn-close-bg) center/1em auto no-repeat;
    opacity: 0.85 !important;
}

.u-modal-header-gradient .btn-close.btn-close-white:hover,
.bg-main-600 .btn-close.btn-close-white:hover,
.bg-primary-600 .btn-close.btn-close-white:hover,
.training-topbar .btn-close.btn-close-white:hover {
    opacity: 1 !important;
}