/* ==========================================================================
   SUPER-PROFESSIONAL HIGH-TECH PORTAL STYLESHEET
   Offline-first, dense, secure, cloud-integrated dashboard theme
   ========================================================================== */

/* Importazione Font Inter e JetBrains Mono (stilistica hitech) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@350;450;550;650;750;850&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
    --bg-primary: #121215;      /* Nero con una gradazione più leggera tendente al grigio (Main Body background) */
    --bg-secondary: #070709;    /* Nero puro molto profondo (Sidebar, Cards) */
    --bg-tertiary: #191921;     /* Livello intermedio grigio per stati attivi e hover */
    --border-color: #202028;    /* Bordo hitech più definito e visibile per separare le aree */
    --border-color-hover: #31313c;
    --text-primary: #f4f4f7;
    --text-muted: #8e8e9f;
    --text-dim: #606072;
    --accent: #ffffff;
}

body { 
    font-family: 'Inter', -apple-system, sans-serif; 
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-size: 13px;
    letter-spacing: -0.01em;
}

/* Monospace per cifre e metadati tech */
.tech-mono {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: -0.02em !important;
}

/* Custom Scrollbar minimalista */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
    background: #1e1e2d;
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2e2e3d;
}

/* ==========================================================================
   GLOBAL OVERRIDES (Forziamo compattezza ed eleganza hitech)
   ========================================================================== */

/* Rimozione Italic infantile e font eccessivi */
.italic, i, em {
    font-style: normal !important; /* Forza i testi ad essere dritti ed eleganti */
}

.font-black {
    font-weight: 650 !important; /* Lievemente più sottile per un design premium */
}

/* Override delle dimensioni font */
.text-5xl, .lg\:text-5xl, .text-4xl, .lg\:text-4xl {
    font-size: 1.5rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase;
}

.text-3xl {
    font-size: 1.25rem !important;
}

.text-2xl {
    font-size: 1.15rem !important;
}

.text-xl {
    font-size: 0.95rem !important;
}

.text-lg {
    font-size: 0.85rem !important;
}

.text-sm {
    font-size: 0.75rem !important;
}

.text-xs {
    font-size: 0.7rem !important;
}

/* Override dei bordi arrotondati (Eliminiamo l'aspetto a 'bolla' infantile) */
.rounded-\[3rem\], 
.rounded-\[2\.5rem\],
.rounded-\[2rem\],
.rounded-3xl, 
.rounded-2xl {
    border-radius: 6px !important; /* Arrotondamento minimale, geometrico, solido */
}

.rounded-xl {
    border-radius: 4px !important;
}

/* Override delle spaziature e dei padding enormi */
.p-20 {
    padding: 2.5rem !important;
}
.p-12, .lg\:p-12 {
    padding: 1.5rem !important;
}
.p-10, .p-8, .p-6, .p-5 {
    padding: 1rem !important;
}
.pb-12 {
    padding-bottom: 1rem !important;
}
.gap-8, .gap-10 {
    gap: 1.25rem !important;
}

/* Spaziature verticali della pagina */
.space-y-10 > * + * {
    margin-top: 1.5rem !important;
}
.space-y-8 > * + * {
    margin-top: 1.25rem !important;
}
.space-y-6 > * + * {
    margin-top: 1rem !important;
}

/* Grid & Table Spacing */
.gap-6 {
    gap: 0.75rem !important;
}

/* ==========================================================================
   SPECIFIC COMPONENT STYLING
   ========================================================================== */

/* Sfondo della Dashboard */
#dashboard-section {
    background-color: var(--bg-primary) !important;
    background-image: none !important; /* Pulizia gradiente */
    color: var(--text-primary) !important;
}

main {
    background-color: var(--bg-primary) !important;
}

/* Sidebar Compatta e Sottile */
aside {
    background-color: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-color) !important;
    width: 230px !important; /* Più stretto e pulito */
}

@media (min-width: 1024px) {
    aside {
        width: 230px !important;
    }
}

aside .p-8 {
    padding: 1.25rem 1rem !important;
}

/* Logo "S PORTAL" */
aside div.p-8 span.text-2xl {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

/* Link di navigazione */
aside nav#sidebar-nav {
    padding: 0.75rem !important;
}

aside nav#sidebar-nav a {
    padding: 0.6rem 0.75rem !important;
    border-radius: 4px !important;
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

aside a.bg-black,
aside nav#sidebar-nav a.bg-zinc-900 {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

aside a.text-zinc-400 {
    color: var(--text-muted) !important;
}

aside a.text-zinc-400:hover {
    background-color: var(--bg-tertiary) !important;
    color: #ffffff !important;
}

/* Bottone Logout */
aside button {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
}

/* Header */
header {
    height: 54px !important; /* Molto compatto */
    background-color: rgba(18, 18, 21, 0.85) !important; /* Allineato al bg-primary con opacità */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

header h1 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase;
    background: none !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

header .bg-zinc-50 {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 4px !important;
}

header #header-name {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

header #header-plan {
    font-size: 9px !important;
    letter-spacing: 0.05em !important;
}

header .w-11, header .h-11 {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 10px !important;
    border-radius: 4px !important;
}

/* Le Card di tutta la Applet */
.bg-white {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
}

.border-zinc-200, 
.border-zinc-200\/85, 
.border-zinc-100, 
.border-zinc-100\/80, 
.border-zinc-50 {
    border-color: var(--border-color) !important;
}

/* Testi Generali */
.text-zinc-950, .text-zinc-900, .text-zinc-800, .text-zinc-700, .text-black, .text-zinc-650 {
    color: var(--text-primary) !important;
}

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

.text-zinc-400 {
    color: var(--text-dim) !important;
}

/* Badge di connessione e status */
#db-status-badge {
    background-color: rgba(16, 185, 129, 0.02) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 9px !important;
    letter-spacing: 0.05em !important;
}

/* Profilo Utente Widget */
#profile-container {
    background-color: var(--bg-secondary) !important;
}

#profile-container > div:first-child {
    background: var(--bg-tertiary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 1.25rem !important;
}

#profile-container .w-12, #profile-container .h-12 {
    width: 2.25rem !important;
    height: 2.25rem !important;
    border-radius: 4px !important;
    font-size: 0.85rem !important;
}

#avatar-circle {
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 6px !important;
    font-size: 1.25rem !important;
    background-color: #12121e !important;
    border: 1px solid #1f1f32 !important;
    box-shadow: none !important;
}

#badge-plan {
    background-color: #12121e !important;
    border: 1px solid #222238 !important;
    color: #ffffff !important;
    padding: 0.4rem 0.75rem !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
}

/* Form, Input, Textarea e Select hitech */
input, textarea, select {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: 0.75rem !important;
    padding: 0.6rem 0.75rem !important;
    border-radius: 4px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: #3f3f56 !important;
    outline: none !important;
}

/* I Bottoni Generali ed Azioni */
button.bg-black {
    background-color: var(--text-primary) !important;
    color: var(--bg-primary) !important;
    font-weight: 600 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px !important;
    border: none !important;
    transition: all 0.15s ease-in-out !important;
}
button.bg-black:hover {
    background-color: #e4e4e7 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Bottoni di filtro */
button.bg-zinc-50 {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.05em !important;
    padding: 0.4rem 0.8rem !important;
    border-radius: 4px !important;
}
button.bg-zinc-50:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color-hover) !important;
    color: #ffffff !important;
}

/* Righe e tabelle */
thead tr {
    background-color: var(--bg-tertiary) !important;
}
th {
    padding: 0.75rem 1rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
    color: var(--text-muted) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
td {
    padding: 0.75rem 1rem !important;
    font-size: 0.75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
}
tr.bg-zinc-50\/55 {
    background-color: var(--bg-tertiary) !important;
}
.divide-y > * + * {
    border-color: var(--border-color) !important;
}

/* Bottoni d'azione della tabella rapida */
td button {
    width: 1.75rem !important;
    height: 1.75rem !important;
    border-radius: 4px !important;
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-muted) !important;
}
td button:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color-hover) !important;
    color: #ffffff !important;
}

/* Modali scuri e solidi */
#task-modal > div,
#telegram-connect-flow,
#google-details,
#telegram-details {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important;
    border-radius: 6px !important;
}

#task-modal .p-8 {
    padding: 1.25rem !important;
}

/* Bottoni Modal di controllo */
#task-form button[type="submit"] {
    background-color: var(--text-primary) !important;
    color: var(--bg-primary) !important;
    padding: 0.55rem 1rem !important;
    border-radius: 4px !important;
}
#task-form button[type="button"] {
    background-color: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    padding: 0.55rem 1rem !important;
    border-radius: 4px !important;
}
#task-form button[type="button"]:hover {
    background-color: var(--bg-tertiary) !important;
    color: #ffffff !important;
}

/* Label delle Form */
label {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.1em !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
}

/* Badge di stato Hitech per i task */
.status-badge {
    padding: 0.2rem 0.5rem !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: 0.05em !important;
}

/* Footer ultra compatto */
footer {
    padding: 1.5rem !important;
    font-size: 8px !important;
    letter-spacing: 0.1em !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Login Panel */
#auth-section div.glass {
    border-radius: 6px !important;
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
}

#auth-section div.glass #auth-icon {
    font-size: 1.25rem !important;
}

#auth-section div.glass h2 {
    font-size: 1.35rem !important;
    letter-spacing: -0.01em !important;
}
#auth-section div.glass p {
    font-size: 0.75rem !important;
}
#auth-section div.glass .p-10 {
    padding: 1.5rem !important;
}

/* ==========================================================================
   SUPPORT EFFECTS
   ========================================================================== */
.glass { 
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

.tab-active { 
    border-bottom: 2px solid var(--accent); 
    color: #ffffff !important; 
}

.loader { 
    width: 14px; 
    height: 14px; 
    border: 2px solid rgba(255, 255, 255, 0.1); 
    border-top-color: #ffffff; 
}