/* =========================================================
   Colombini — Gestione Piscine & Impianti Trattamento Acqua
   Palette: Blu / Azzurro / Teal
   ========================================================= */

/* --- Variabili colore ----------------------------------- */
:root {
    --clr-primary: #1a6fa8;
    --clr-primary-dark: #135480;
    --clr-primary-light: #2a8fd4;
    --clr-teal: #00bcd4;
    --clr-teal-dark: #0097a7;
    --clr-azure: #42a5f5;
    --clr-sidebar-bg: #1a2d4a;
    --clr-sidebar-alt: #162440;
    --clr-white: #ffffff;
    --clr-text-sidebar: #c2d4e8;
    --clr-success:   #28a745;
    --clr-danger:    #dc3545;
    --clr-warning:   #ffc107;
    --clr-secondary: #6c757d;
}

/* --- Navbar superiore ----------------------------------- */
.main-header.navbar {
    background-color: var(--clr-primary) !important;
    border-bottom: 3px solid var(--clr-teal);
}

.main-header .navbar-brand,
.main-header .nav-link,
.main-header .brand-text {
    color: var(--clr-white) !important;
}

.main-header .nav-link:hover {
    color: var(--clr-azure) !important;
}

/* --- Sidebar ------------------------------------------- */
.main-sidebar,
.main-sidebar::before {
    background-color: var(--clr-sidebar-bg);
}

.sidebar {
    background-color: var(--clr-sidebar-bg);
}

.brand-link {
    background-color: var(--clr-sidebar-alt) !important;
    border-bottom: 1px solid var(--clr-teal) !important;
    color: var(--clr-white) !important;
}

.brand-link:hover {
    background-color: var(--clr-primary-dark) !important;
}

/* Voci menu */
.sidebar .nav-link {
    color: var(--clr-text-sidebar) !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus {
    background-color: rgba(0, 188, 212, 0.15) !important;
    color: var(--clr-white) !important;
}

.sidebar .nav-link.active,
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--clr-primary) !important;
    color: var(--clr-white) !important;
    border-left: 3px solid var(--clr-teal);
}

.sidebar .nav-header {
    color: var(--clr-teal) !important;
    font-size: .7rem;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

/* Icone sidebar */
.sidebar .nav-icon {
    color: var(--clr-azure) !important;
}

.sidebar .nav-link.active .nav-icon {
    color: var(--clr-teal) !important;
}

/* Sottomenu */
.nav-treeview>.nav-item>.nav-link {
    color: #90b8d8 !important;
}

.nav-treeview>.nav-item>.nav-link.active,
.nav-treeview>.nav-item>.nav-link:hover {
    background-color: rgba(0, 188, 212, 0.1) !important;
    color: var(--clr-white) !important;
}

/* --- Pulsanti ------------------------------------------ */
.btn-primary {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
}

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

.btn-info {
    background-color: var(--clr-teal) !important;
    border-color: var(--clr-teal) !important;
}

.btn-info:hover {
    background-color: var(--clr-teal-dark) !important;
    border-color: var(--clr-teal-dark) !important;
}

/* --- Card header --------------------------------------- */
.card-primary>.card-header,
.card-primary.card-outline>.card-header {
    background-color: var(--clr-primary) !important;
    border-bottom-color: var(--clr-teal) !important;
}

.card-info>.card-header {
    background-color: var(--clr-teal) !important;
}

/* --- Small box (dashboard widget) ---------------------- */
.small-box.bg-info {
    background-color: var(--clr-teal) !important;
}

.small-box.bg-primary {
    background-color: var(--clr-primary) !important;
}

.small-box.bg-azure {
    background-color: var(--clr-azure) !important;
}

/* --- Testo link ---------------------------------------- */
a {
    color: var(--clr-primary);
}

a:hover {
    color: var(--clr-primary-dark);
}

/* --- Scrollbar sidebar --------------------------------- */
.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: var(--clr-sidebar-alt);
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--clr-primary);
    border-radius: 2px;
}

/* --- Login page ---------------------------------------- */
.login-page {
    background: linear-gradient(135deg, var(--clr-sidebar-bg) 0%, var(--clr-primary) 60%, var(--clr-teal) 100%);
}

.login-box .card {
    border-top: 4px solid var(--clr-teal);
    box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}

.login-logo a {
    color: var(--clr-white) !important;
}

/* --- Pulsante guida contestuale ------------------------ */
#btn-guida {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 1050;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--clr-teal);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: background .2s, transform .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#btn-guida:hover {
    background: var(--clr-teal-dark);
    transform: scale(1.08);
}

/* --- Corpo modal guida --------------------------------- */
.guida-body h5 {
    color: var(--clr-primary);
    border-bottom: 1px solid #dee2e6;
    padding-bottom: .4rem;
    margin-top: 1rem;
}

.guida-body h5:first-child {
    margin-top: 0;
}

.guida-body ul {
    padding-left: 1.2rem;
}

.guida-body .badge-tip {
    background: #e8f5e9;
    color: #2e7d32;
    font-weight: normal;
    font-size: .8rem;
    padding: .25rem .5rem;
    border-radius: .25rem;
}

/* Testo bianco nelle card header colorate (solo card-* con sfondo solido) */
.card-primary:not(.card-outline)>.card-header,
.card-info:not(.card-outline)>.card-header,
.card-success:not(.card-outline)>.card-header,
.card-danger:not(.card-outline)>.card-header,
.card-warning:not(.card-outline)>.card-header,
.card-secondary:not(.card-outline)>.card-header {
    color: #fff;
}

/* Colori per tipo card */
.card-primary   { --card-accent: var(--clr-primary);    --card-accent-text: #fff; }
.card-info      { --card-accent: var(--clr-teal);       --card-accent-text: #fff; }
.card-success   { --card-accent: #28a745;             --card-accent-text: #fff; }
.card-danger    { --card-accent: #dc3545;             --card-accent-text: #fff; }
.card-warning   { --card-accent: #ffc107;             --card-accent-text: #212529; }
.card-secondary { --card-accent: #6c757d;             --card-accent-text: #fff; }



/* Tutti i btn nelle card-tools ereditano il colore della card */
.card-tools .btn:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-secondary):not(.btn-light) {
    background-color: var(--card-accent, #6c757d) !important;
    border-color: var(--card-accent, #6c757d) !important;
    color: var(--card-accent-text, #fff) !important;
}

.card-tools .btn:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-secondary):not(.btn-light):hover {
    filter: brightness(.85);
    color: var(--card-accent-text, #fff) !important;
}
/* Nascondo le freccette nei campi input number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}