/* ═══════════════════════════════════════════════════════════════
   ADV Services — Custom CSS
   Tema: industrial/utilitarian — scuro, preciso, funzionale
   ═══════════════════════════════════════════════════════════════ */

/* ─── Google Font ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

/* ─── Variabili ────────────────────────────────────────────── */
:root {
    --sidebar-width:        240px;
    --topbar-height:        58px;

    --color-bg:             #0f1117;
    --color-surface:        #181c24;
    --color-surface-2:      #1e2330;
    --color-border:         #2a2f3d;
    --color-border-light:   #333a4d;

    --color-primary:        #3d8ef8;
    --color-primary-hover:  #5a9ff9;
    --color-success:        #2dc98e;
    --color-warning:        #f5a623;
    --color-danger:         #e05252;
    --color-info:           #56c0e0;

    --color-text:           #d4d8e8;
    --color-text-muted:     #6b748a;
    --color-text-dim:       #3f4560;

    --font-main:            'IBM Plex Sans', sans-serif;
    --font-mono:            'IBM Plex Mono', monospace;

    --radius:               6px;
    --radius-lg:            10px;
    --shadow:               0 2px 12px rgba(0,0,0,.35);
    --shadow-lg:            0 8px 32px rgba(0,0,0,.5);
}

/* ─── Reset base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family:     var(--font-main);
    background:      var(--color-bg);
    color:           var(--color-text);
    font-size:       0.9rem;
    line-height:     1.6;
    margin:          0;
}

/* ─── Layout wrapper ───────────────────────────────────────── */
#wrapper {
    min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
#sidebar {
    width:           var(--sidebar-width);
    min-height:      100vh;
    background:      var(--color-surface);
    border-right:    1px solid var(--color-border);
    position:        sticky;
    top:             0;
    height:          100vh;
    overflow-y:      auto;
}

.sidebar-brand {
    color:           var(--color-primary) !important;
    font-weight:     600;
    font-size:       1rem;
    letter-spacing:  0.02em;
    padding-bottom:  0.75rem;
    border-bottom:   1px solid var(--color-border);
}

.sidebar-brand i {
    font-size: 1.25rem;
}

/* Nav items */
#sidebar .nav-link {
    color:           var(--color-text-muted);
    border-radius:   var(--radius);
    padding:         0.45rem 0.75rem;
    font-size:       0.875rem;
    font-weight:     400;
    transition:      background 0.15s, color 0.15s;
    display:         flex;
    align-items:     center;
}

#sidebar .nav-link:hover {
    background:      var(--color-surface-2);
    color:           var(--color-text);
}

#sidebar .nav-link.active {
    background:      rgba(61, 142, 248, 0.15);
    color:           var(--color-primary);
    font-weight:     500;
}

#sidebar .nav-link i {
    font-size: 0.95rem;
    width:     18px;
}

.nav-section-label {
    font-size:      0.7rem;
    font-weight:    600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--color-text-dim);
    padding:        0.25rem 0.75rem;
    display:        block;
}

/* Footer sidebar */
.sidebar-footer {
    border-color: var(--color-border) !important;
}

.avatar-circle {
    width:           28px;
    height:          28px;
    background:      rgba(61, 142, 248, 0.2);
    color:           var(--color-primary);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       0.75rem;
    font-weight:     600;
    font-family:     var(--font-mono);
    flex-shrink:     0;
}

.sidebar-username {
    font-size:   0.82rem;
    color:       var(--color-text-muted);
    overflow:    hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════════════════════ */
.topbar {
    background:    var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    min-height:    var(--topbar-height);
}

.topbar-title {
    font-size:   0.95rem;
    font-weight: 600;
    color:       var(--color-text);
    letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT
   ═══════════════════════════════════════════════════════════════ */
#page-content {
    background:  var(--color-bg);
    overflow-x:  hidden;
}

.content-body {
    min-height: calc(100vh - var(--topbar-height));
}

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS (Dashboard)
   ═══════════════════════════════════════════════════════════════ */
.stat-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       1.25rem;
    display:       flex;
    align-items:   center;
    gap:           1rem;
    transition:    border-color 0.2s;
}

.stat-card:hover {
    border-color: var(--color-border-light);
}

.stat-card-warning {
    border-color: rgba(245, 166, 35, 0.4);
}

.stat-icon {
    width:          48px;
    height:         48px;
    border-radius:  var(--radius);
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-size:      1.4rem;
    flex-shrink:    0;
}

.stat-value {
    font-family: var(--font-mono);
    font-size:   1.75rem;
    font-weight: 500;
    line-height: 1;
    color:       var(--color-text);
}

.stat-label {
    font-size:  0.78rem;
    color:      var(--color-text-muted);
    margin-top: 0.2rem;
}

/* ─── Soft bg helpers ──────────────────────────────────────── */
.bg-primary-soft  { background: rgba(61, 142, 248, 0.12); }
.bg-success-soft  { background: rgba(45, 201, 142, 0.12); }
.bg-warning-soft  { background: rgba(245, 166, 35, 0.12); }
.bg-danger-soft   { background: rgba(224, 82, 82, 0.12);  }
.bg-info-soft     { background: rgba(86, 192, 224, 0.12); }
.bg-secondary-soft{ background: rgba(107, 116, 138, 0.12); }

.text-primary  { color: var(--color-primary)  !important; }
.text-success  { color: var(--color-success)  !important; }
.text-warning  { color: var(--color-warning)  !important; }
.text-danger   { color: var(--color-danger)   !important; }
.text-info     { color: var(--color-info)      !important; }

/* ═══════════════════════════════════════════════════════════════
   CARD Bootstrap override
   ═══════════════════════════════════════════════════════════════ */
.card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color:         var(--color-text);
}

.card-header {
    background:   var(--color-surface-2);
    border-bottom: 1px solid var(--color-border);
    font-size:    0.875rem;
    font-weight:  500;
    padding:      0.75rem 1rem;
}

.card-body {
    padding: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   TABLE Bootstrap override
   ═══════════════════════════════════════════════════════════════ */
.table {
    color:       var(--color-text);
    font-size:   0.875rem;
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    background: transparent;
    border-color: var(--color-border);
    padding: 0.55rem 1rem;
}

.table-light thead th {
    background:  var(--color-surface-2) !important;
    color:       var(--color-text-muted);
    font-size:   0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-color: var(--color-border);
}

.table-hover > tbody > tr:hover > * {
    background: var(--color-surface-2);
}

.table td, .table th {
    color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════════════
   BADGE override
   ═══════════════════════════════════════════════════════════════ */
.badge {
    font-family:  var(--font-mono);
    font-size:    0.72rem;
    font-weight:  500;
    padding:      0.3em 0.6em;
    border-radius: 4px;
}

.badge.bg-success-soft { color: var(--color-success); }
.badge.bg-danger-soft  { color: var(--color-danger);  }
.badge.bg-warning-soft { color: var(--color-warning); }
.badge.bg-secondary    { background: var(--color-surface-2) !important; color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ═══════════════════════════════════════════════════════════════
   FORM Bootstrap override
   ═══════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
    background:   var(--color-surface-2);
    border:       1px solid var(--color-border);
    color:        var(--color-text);
    border-radius: var(--radius);
    font-size:    0.875rem;
}

.form-control:focus,
.form-select:focus {
    background:  var(--color-surface-2);
    border-color: var(--color-primary);
    color:       var(--color-text);
    box-shadow:  0 0 0 3px rgba(61, 142, 248, 0.2);
}

.form-control::placeholder {
    color: var(--color-text-dim);
}

.form-label {
    font-size:   0.82rem;
    font-weight: 500;
    color:       var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.input-group-text {
    background:  var(--color-surface-2);
    border:      1px solid var(--color-border);
    color:       var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTON Bootstrap override
   ═══════════════════════════════════════════════════════════════ */
.btn-primary {
    background:    var(--color-primary);
    border-color:  var(--color-primary);
    color:         #fff;
    font-weight:   500;
}

.btn-primary:hover {
    background:   var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-outline-secondary {
    border-color: var(--color-border);
    color:        var(--color-text-muted);
}

.btn-outline-secondary:hover {
    background:  var(--color-surface-2);
    border-color: var(--color-border-light);
    color:        var(--color-text);
}

.btn-sm {
    font-size: 0.78rem;
    padding:   0.3rem 0.65rem;
}

/* ═══════════════════════════════════════════════════════════════
   ALERT override
   ═══════════════════════════════════════════════════════════════ */
.alert-danger {
    background:  rgba(224, 82, 82, 0.1);
    border-color: rgba(224, 82, 82, 0.3);
    color:       #f08080;
}

.alert-success {
    background:  rgba(45, 201, 142, 0.1);
    border-color: rgba(45, 201, 142, 0.3);
    color:       #5de0a8;
}

.alert-warning {
    background:  rgba(245, 166, 35, 0.1);
    border-color: rgba(245, 166, 35, 0.3);
    color:       #f5b84a;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */
.login-body {
    background: var(--color-bg);
}

.login-card {
    width:         100%;
    max-width:     400px;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       2.5rem;
    box-shadow:    var(--shadow-lg);
}

.login-logo {
    font-size: 2.5rem;
    color:     var(--color-primary);
    line-height: 1;
}

.login-title {
    font-weight: 600;
    color:       var(--color-text);
    font-size:   1.2rem;
}

.login-subtitle {
    font-size: 0.82rem;
    color:     var(--color-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */
/* Drop zone upload */
.upload-drop-zone {
    border:        2px dashed var(--color-border-light);
    border-radius: var(--radius-lg);
    padding:       2.5rem;
    text-align:    center;
    transition:    border-color 0.2s, background 0.2s;
    cursor:        pointer;
}
.upload-drop-zone:hover,
.upload-drop-zone.drag-over {
    border-color: var(--color-primary);
    background:   rgba(61, 142, 248, 0.05);
}

/* Pre log sync */
.sync-log-pre {
    background:    var(--color-surface-2);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    padding:       1rem;
    font-family:   var(--font-mono);
    font-size:     0.75rem;
    color:         var(--color-text-muted);
    max-height:    400px;
    overflow-y:    auto;
    white-space:   pre-wrap;
    word-break:    break-all;
}

/* Riga modulo fuori sequenza */
.row-sequence-error td {
    background: rgba(224, 82, 82, 0.06) !important;
}
.row-sequence-error td:first-child {
    border-left: 2px solid var(--color-danger);
}

code, .font-mono {
    font-family: var(--font-mono);
    font-size:   0.82em;
    background:  var(--color-surface-2);
    padding:     0.1em 0.4em;
    border-radius: 3px;
    color:       var(--color-info);
}

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

.border-top {
    border-color: var(--color-border) !important;
}

.small {
    font-size: 0.82rem;
}

.rotating {
    animation: spin 1.5s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Dashboard module cards ─────────────────────────────────── */
.module-card {
    display: block;
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: #000; /* Fondo nero per l'immagine in 'fit' */
    transition: transform .15s;
    text-decoration: none !important;
}

.module-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
}

/* Contenitore immagine/lettera: deve stare al centro */
.module-icon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Sotto al titolo */
}

.module-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* L'immagine fitta senza tagliarsi */
}

/* Lettera fallback: occupa tutto lo spazio centrale */
.module-letter-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-2);
    color: var(--color-primary);
    font-size: 4rem;
    font-weight: 700;
}

/* Overlay Titolo: Nero 70%, sempre in alto */
.module-card-overlay {
    position: absolute;
    top: 5%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7); /* Opacità 70% */
    padding: 10px 5px;
    z-index: 10; /* Sopra a tutto */
    text-align: center;
}

.module-title {
    color: #ffffff !important;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.module-description {
    color: rgba(255,255,255,0.75);
    font-size: 0.72rem;
    margin-top: 3px;
    line-height: 1.2;
}