/*
 * Gestione Affissioni - refresh grafico "Ardesia"
 * Caricato DOPO style.min.css: sovrascrive solo colori, pesi e raggi.
 * Per tornare alla grafica precedente basta togliere il <link> a questo file.
 * Tutti i colori sono nelle variabili qui sotto.
 */
:root {
    --ga-top: #1d2733;          /* barra in alto */
    --ga-side: #243140;         /* sidebar */
    --ga-side-active: #18212b;  /* voce attiva */
    --ga-side-sub: #2c3a4b;     /* sottomenu */
    --ga-side-text: #b3bfcc;
    --ga-side-line: rgba(255, 255, 255, .08);

    --ga-page: #edf0f3;         /* sfondo pagine */
    --ga-surface: #fff;
    --ga-line: #d5dce2;
    --ga-line-soft: #e8edf1;
    --ga-ink: #1f2a36;
    --ga-ink-soft: #4a5562;

    --ga-accent: #1f6fb2;       /* ex ciano #00a2d9 / blu #0090d9 */
    --ga-accent-hover: #195d96;
    --ga-accent-soft: #e3eef8;

    /* destinazioni, stessi toni di prima ma leggibili con testo bianco */
    --ga-green: #16806b;        /* ex #18a689 commerciale */
    --ga-green-hover: #116a58;
    --ga-red: #b0443f;          /* ex #c75757 istituzionale */
    --ga-red-hover: #973934;
    --ga-purple: #7d55b8;       /* ex #b57ee0 funebre */
    --ga-orange: #b9561a;       /* ex #f27835 */
    --ga-info: #1c7fa3;

    --ga-radius: 6px;
    --ga-radius-sm: 4px;
}

/* ---------- base ---------- */
body,
#main-content {
    background-color: var(--ga-page);
}
body {
    font-weight: 400;
    color: var(--ga-ink);
}
a {
    color: var(--ga-accent);
}
a:hover,
a:focus {
    color: var(--ga-accent-hover);
}
a.active,
.c-blue,
.sidebar-number,
.media-title a {
    color: var(--ga-accent) !important;
}
:focus-visible {
    outline: 2px solid var(--ga-accent);
    outline-offset: 2px;
}

/* ---------- barra in alto ---------- */
.navbar-inverse {
    background-color: var(--ga-top);
}
.navbar-center {
    color: #c3ccd6;
}
.navbar-inverse .navbar-brand strong {
    color: #7fb6e6;
}
.header-menu .dropdown-menu .dropdown-header,
.header-menu .dropdown-menu .dropdown-header:hover {
    background: var(--ga-top);
}
.header-menu .dropdown-menu:after {
    border-bottom-color: var(--ga-top);
}

/* ---------- sidebar ---------- */
#sidebar,
.footer-widget {
    background-color: var(--ga-side);
}
.sidebar-nav a {
    color: var(--ga-side-text);
}
.sidebar-nav a:hover,
.sidebar-nav a:hover i,
.sidebar-nav li.current a:hover i {
    color: #fff;
}
.sidebar-nav li.current a,
.sidebar-nav li.current li.current a {
    background-color: var(--ga-side-active);
    border-left-color: var(--ga-accent);
}
/* triangolino della voce attiva: deve avere il colore dello sfondo pagina */
.sidebar-nav > li.current > a:after,
.sidebar-large .sidebar-nav > li.current li.current > a:after {
    border-right-color: var(--ga-page);
}
.sidebar-medium .sidebar-nav li.active i,
.sidebar-medium .sidebar-nav li.current a i,
.sidebar-thin .sidebar-nav li.current a i,
.sidebar-large .sidebar-nav li.active i,
.sidebar-large .sidebar-nav li.current a i {
    color: #7fb6e6;
}
/* sottomenu: stesso ardesia della sidebar con il testo grigio-azzurro delle voci,
   sia con la sidebar larga sia con quella stretta (dove il tema usava il ciano) */
#sidebar ul.submenu a,
.sidebar-medium #sidebar ul.submenu a,
.sidebar-thin #sidebar ul.submenu a,
.sidebar-large #sidebar ul.submenu a {
    background-color: var(--ga-side-sub);
    color: var(--ga-side-text);
}
#sidebar ul.submenu a:hover,
#sidebar ul.submenu li.current a {
    color: #fff;
}
.sidebar-medium #sidebar li.active:after,
.sidebar-thin #sidebar li.active:after,
.sidebar-large #sidebar li.active:after {
    border-right-color: var(--ga-side-sub);
}
.footer-widget {
    border-top: 1px solid var(--ga-side-line);
}
#sidebar-charts {
    border-bottom-color: var(--ga-side-line);
}
.footer-widget i {
    color: #8794a3;
}

/* ---------- titoli pagina ---------- */
.page-title h3 {
    color: var(--ga-ink);
}
.page-title .fa {
    border-color: var(--ga-line);
    color: var(--ga-accent);
    background: var(--ga-surface);
}

/* ---------- pannelli ---------- */
.panel {
    border: 1px solid var(--ga-line);
    border-radius: var(--ga-radius);
    box-shadow: none;
}
/* angoli dell'intestazione allineati al pannello (senza overflow:hidden,
   che taglierebbe i menu a tendina dentro i pannelli) */
.panel > .panel-heading:first-child {
    border-radius: calc(var(--ga-radius) - 1px) calc(var(--ga-radius) - 1px) 0 0;
}
.panel-default > .panel-heading {
    border-bottom: 1px solid var(--ga-line-soft);
}
.panel-heading .panel-title,
.panel-heading h3,
.panel-heading h4 {
    color: inherit;
}

/* ---------- colori pieni (intestazioni, bottoni, avvisi) ---------- */
.bg-blue {
    background-color: var(--ga-accent) !important;
}
.bg-dark {
    background-color: var(--ga-top) !important;
}
.bg-green {
    background-color: var(--ga-green) !important;
}
.bg-red {
    background-color: var(--ga-red) !important;
}
.bg-purple {
    background-color: var(--ga-purple) !important;
}
.bg-orange {
    background-color: var(--ga-orange) !important;
}
.bd-t-blue {
    border-top-color: var(--ga-accent);
}
.bd-l-blue {
    border-left-color: var(--ga-accent);
}
.bd-t-dark {
    border-top-color: var(--ga-top);
}
.bd-l-dark {
    border-left-color: var(--ga-top);
}

/* ---------- bottoni ---------- */
.btn {
    border-radius: var(--ga-radius-sm);
}
.btn-primary,
.btn-blue {
    background-color: var(--ga-accent);
    border-color: var(--ga-accent);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue.active {
    background-color: var(--ga-accent-hover);
    border-color: var(--ga-accent-hover);
    color: #fff;
}
.btn-success {
    background-color: var(--ga-green);
    border-color: var(--ga-green);
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active {
    background-color: var(--ga-green-hover);
    border-color: var(--ga-green-hover);
}
.btn-danger {
    background-color: var(--ga-red);
    border-color: var(--ga-red);
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active {
    background-color: var(--ga-red-hover);
    border-color: var(--ga-red-hover);
}
.btn-info {
    background-color: var(--ga-info);
    border-color: var(--ga-info);
    color: #fff;
}
.btn-dark {
    background-color: var(--ga-top);
}
.btn-default {
    background-color: var(--ga-surface);
    border-color: var(--ga-line);
}
.btn-default:hover, .btn-default:focus {
    background-color: #f3f5f8;
    border-color: #c4cdd5;
}

/* ---------- moduli ---------- */
.form-control {
    border-color: var(--ga-line);
    border-radius: var(--ga-radius-sm);
    color: var(--ga-ink);
}
.form-control:focus {
    border-color: var(--ga-accent);
    background-color: #fff;
    box-shadow: 0 0 0 3px var(--ga-accent-soft);
}

/* ---------- tabelle ---------- */
.table {
    border-color: var(--ga-line);
}
.table th {
    text-transform: none;
    font-weight: 600;
    color: var(--ga-ink-soft);
}
.table-bordered thead th {
    background-color: #f2f5f8;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: var(--ga-accent-soft);
    color: var(--ga-ink);
}
.table-responsive i.fa {
    color: var(--ga-accent);
}
.table-responsive i.red {
    color: var(--ga-red);
}
div.dataTables_info {
    color: var(--ga-ink-soft);
}

/* ---------- paginazione, schede, datepicker, calendario ---------- */
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover,
.pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: var(--ga-accent);
    border-color: var(--ga-accent);
}
.pagination > li > a, .pagination > li > span {
    color: var(--ga-accent);
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus,
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus,
.label-primary, .progress-bar {
    background-color: var(--ga-accent);
}
.nav.nav-tabs.nav-dark > li > a,
.nav-tabs.nav-dark .dropdown-menu,
.panel-accordion.dark-accordion a.collapsed,
.popover-dark, .popover-dark .popover-content,
.badge-dark {
    background-color: var(--ga-side) !important;
}
.datepicker thead tr .dow,
.datepicker thead tr .next:before,
.datepicker thead tr .prev:before {
    color: var(--ga-accent);
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background-color: var(--ga-accent);
}
.fc-button-prev, .fc-button-next {
    background-color: var(--ga-accent) !important;
}

/* ---------- avvisi ---------- */
.alert {
    border-radius: var(--ga-radius-sm);
}

/* ---------- login ed errori ---------- */
body.login,
.error-page {
    background: var(--ga-page);
    background: radial-gradient(ellipse at center, #f4f6f8 0%, #c9d2db 100%);
}
.login-box {
    background: var(--ga-side);
    border-radius: var(--ga-radius);
}
.page-icon {
    background: var(--ga-side-active);
}
.btn.btn-login {
    background: var(--ga-accent);
    border-radius: var(--ga-radius-sm);
}
.btn.btn-login:hover {
    background: var(--ga-accent-hover);
    border-color: transparent;
    opacity: 1;
}
.login-form input {
    border-radius: var(--ga-radius-sm);
}
.error-main,
.error-page a {
    color: var(--ga-ink);
}

/* ---------- logo (immagini a doppia risoluzione per schermi Retina) ---------- */
img[src*="account/login-logo.png"] {
    width: 151px;
    max-width: 100%;
    height: auto;
}