/* ===========================================
   COMPONENTI GENERALI
   File: components.css
   Bottoni, Form, Link, Checkbox, ecc.
   =========================================== */

/* ===========================================
   VARIABILI CSS (definite dal plugin PHP)
   =========================================== */
:root {
    --primary-color: #000000;
    --navbar-color: #000000;
    --sidebar-color: #e6e6e6;
    --icon-active-bg: #ff0000;
    --icon-active-color: #ffffff;
}

/* ===========================================
   LINK
   =========================================== */
a {
    color: var(--primary-color, #000000);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--primary-color, #000000);
    filter: brightness(0.8);
}

/* Esclusioni per toolbar e listing */
.toolbar a,
.listing a,
.listbox a,
.menu a {
    color: inherit !important;
}

/* ===========================================
   BOTTONI
   =========================================== */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled {
    background: var(--primary-color, #000000) !important;
    background-color: var(--primary-color, #000000) !important;
    border-color: var(--primary-color, #000000) !important;
    color: #fff !important;
}

.btn-primary:hover {
    filter: brightness(0.9);
}

.btn-link {
    color: var(--primary-color, #000000) !important;
}

/* Bottone con gradiente (stile moderno) */
body:not(.task-login):not(.task-error) .btn-primary {
    background: linear-gradient(135deg, var(--primary-color, #000000) 0%, var(--primary-color, #000000) 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

body:not(.task-login):not(.task-error) .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* ===========================================
   FORM CONTROLS
   =========================================== */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color, #000000) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
    outline: none;
}

/* ===========================================
   CHECKBOX MODERNI
   =========================================== */
.modern-checkbox input:checked + label:before,
input[type="checkbox"]:checked + label:before {
    color: var(--primary-color, #000000) !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--primary-color, #000000) !important;
    border-color: var(--primary-color, #000000) !important;
}

/* ===========================================
   UI SLIDER
   =========================================== */
.ui-slider .ui-slider-handle {
    background: var(--primary-color, #000000) !important;
    border-color: var(--primary-color, #000000) !important;
}

.ui-slider .ui-slider-handle.ui-state-active {
    background: var(--primary-color, #000000) !important;
}

.ui-slider .ui-slider-range {
    background: var(--primary-color, #000000) !important;
}

/* ===========================================
   SEARCHBAR
   =========================================== */
.searchbar {
    border-radius: 8px;
    border: 1px solid #ddd;
    transition: all 0.2s ease;
}

.searchbar:focus-within {
    border-color: var(--primary-color, #000000) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1) !important;
}

/* ===========================================
   POPOVER MENU
   =========================================== */
.popover .menu li a:hover,
.popover .menu .dropbutton a.dropdown:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.popover .menu li a:hover:before,
.popover .menu .dropbutton a.dropdown:hover:before {
    color: var(--primary-color, #000000) !important;
}

/* ===========================================
   UI ALERT
   =========================================== */
.ui.alert a:not(.btn) {
    color: var(--primary-color, #000000) !important;
}

.ui.alert.loading {
    border-left-color: var(--primary-color, #000000) !important;
}

/* ===========================================
   TABS
   =========================================== */
.nav-tabs .nav-link.active {
    border-bottom-color: var(--primary-color, #000000) !important;
    color: var(--primary-color, #000000) !important;
}

/* ===========================================
   PAGINATION
   =========================================== */
.pagination .page-item.active .page-link {
    background-color: var(--primary-color, #000000) !important;
    border-color: var(--primary-color, #000000) !important;
}

/* ===========================================
   TINYMCE EDITOR
   =========================================== */
div.tox .tox-button--primary,
div.tox .tox-button--primary:hover {
    background: var(--primary-color, #000000) !important;
    border-color: var(--primary-color, #000000) !important;
}

div.tox .tox-textfield:focus {
    border-color: var(--primary-color, #000000) !important;
}

/* ===========================================
   LOADING SPINNER
   =========================================== */
.loading-spinner,
.spinner-border {
    border-color: var(--primary-color, #000000);
    border-right-color: transparent;
}

/* ===========================================
   DARK MODE
   =========================================== */
html.dark-mode a {
    color: var(--primary-color, #000000);
}

html.dark-mode .form-control:focus,
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .searchbar:focus-within {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}