/* ========================================================================
   C-CYBERSAFE TYPOGRAPHY SYSTEM
   Technical precision meets distinctive design
   ======================================================================== */

/* ========== FONT IMPORTS FROM GOOGLE FONTS ========== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;300;400;500;600;700;800&display=swap');

/* ========== TYPOGRAPHY CSS VARIABLES ========== */
:root {
    /* Font Families */
    --font-primary: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;

    /* Font Weights - Extreme Contrast */
    --font-weight-ultralight: 100;
    --font-weight-light: 200;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Font Sizes - 3x+ Scale Jumps for Impact */
    --font-size-xs: 0.625rem;      /* 10px - Micro labels */
    --font-size-sm: 0.75rem;       /* 12px - Small text */
    --font-size-base: 1rem;        /* 16px - Body text */
    --font-size-lg: 1.125rem;      /* 18px - Large body */
    --font-size-xl: 1.5rem;        /* 24px - Subheadings */
    --font-size-2xl: 2rem;         /* 32px - Section titles */
    --font-size-3xl: 3rem;         /* 48px - Page headers */
    --font-size-4xl: 4rem;         /* 64px - Display */
    --font-size-5xl: 6rem;         /* 96px - Hero metrics */

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Letter Spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;

    /* Sidebar Navigation */
    --sidebar-nav-font-size: 0.8125rem;  /* 13px — modifica questo valore per scalare tutto il menu */
}

/* ========== BASE TYPOGRAPHY OVERRIDE ========== */
body {
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ========== HEADING STYLES - SPACE GROTESK ========== */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--font-display) !important;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    font-weight: var(--font-weight-bold);
}

h1, .h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-tight);
}

h2, .h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

h3, .h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

h4, .h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

h5, .h5 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
}

h6, .h6 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

/* ========== DISPLAY CLASSES - EXTREME SIZES ========== */
.display-hero {
    font-family: var(--font-display);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
}

.display-1 {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    line-height: 1.1;
}

.display-2 {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

/* ========== PARAGRAPH & BODY TEXT ========== */
p {
    font-family: var(--font-primary);
    margin-bottom: 1rem;
}

.lead {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-relaxed);
}

.text-small {
    font-size: var(--font-size-sm);
}

.text-micro {
    font-size: var(--font-size-xs);
    letter-spacing: var(--letter-spacing-wide);
}

/* ========== MONOSPACE & CODE - JETBRAINS MONO ========== */
code, kbd, pre, samp,
.font-mono,
.code-text {
    font-family: var(--font-mono) !important;
    font-weight: var(--font-weight-normal);
    font-feature-settings: "liga" 1, "calt" 1; /* Enable ligatures */
}

/* Technical identifiers (IPs, IDs, hashes) */
.tech-id {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background: rgba(0, 0, 0, 0.05);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

/* ========== WEIGHT UTILITIES - EXTREME CONTRAST ========== */
.font-ultralight {
    font-weight: var(--font-weight-ultralight) !important;
}

.font-light {
    font-weight: var(--font-weight-light) !important;
}

.font-normal {
    font-weight: var(--font-weight-normal) !important;
}

.font-medium {
    font-weight: var(--font-weight-medium) !important;
}

.font-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.font-bold {
    font-weight: var(--font-weight-bold) !important;
}

.font-extrabold {
    font-weight: var(--font-weight-extrabold) !important;
}

.font-black {
    font-weight: var(--font-weight-black) !important;
}

/* ========== METRICS & DASHBOARD NUMBERS ========== */
.metric-display {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-black);
    line-height: 1;
    letter-spacing: var(--letter-spacing-tight);
    font-feature-settings: "tnum" 1; /* Tabular numbers */
}

.metric-large {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    line-height: 1;
}

.metric-medium {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

.metric-small {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
}

.metric-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: #64748b;
}

/* ========== BUTTON & UI ELEMENTS TYPOGRAPHY ========== */
.btn {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
}

.btn-lg {
    font-size: var(--font-size-lg);
}

.btn-sm {
    font-size: var(--font-size-sm);
}

/* ========== BADGE & TAG TYPOGRAPHY ========== */
.badge,
.nms-badge {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
}

/* ========== TABLE & DATA DISPLAY ========== */
table {
    font-family: var(--font-primary);
}

table thead th {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

table tbody td {
    font-weight: var(--font-weight-normal);
}

/* Monospace for data columns */
table .data-col {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

/* ========== CARD TITLES ========== */
.card-title {
    font-family: var(--font-display) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.card-header {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
}

/* ========== NAVIGATION & MENU ========== */
.nav-link,
.navbar-nav .nav-link {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
}

/* Sidebar nav items — font-size controllato da --sidebar-nav-font-size */
.app-sidebar .nav-link p,
.app-sidebar .nav-treeview .nav-link p {
    font-size: var(--sidebar-nav-font-size);
}

/* Sezione Impact / SOA Matrix / Risk Matrix — modifica solo questa sezione */
/* !important necessario: adminlte.css (caricato dopo) sovrascrive font-size */
.impact_font_size .nav-link p {
    font-size: 0.7125rem !important; /* ← cambia solo questo valore */
}

/* ========== FORM ELEMENTS ========== */
label,
.form-label {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

input,
select,
textarea,
.form-control,
.form-select {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
}

/* ========== ALERT & STATUS MESSAGES ========== */
.alert {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
}

.alert-heading {
    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);
}

/* Critical alerts - extreme weight */
.alert-danger .alert-heading,
.alert-critical {
    font-weight: var(--font-weight-extrabold) !important;
}

/* ========== CYBERSECURITY-SPECIFIC CLASSES ========== */

/* Risk scores & threat levels */
.risk-score {
    font-family: var(--font-display);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    font-feature-settings: "tnum" 1;
}

/* Asset identifiers */
.asset-id,
.device-name {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

/* IP addresses */
.ip-address {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-normal);
    font-feature-settings: "tnum" 1;
}

/* Timestamps */
.timestamp {
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-wide);
    color: #64748b;
}

/* Status indicators */
.status-text {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

/* ========== RESPONSIVE TYPOGRAPHY ========== */
@media (max-width: 1200px) {
    :root {
        --font-size-3xl: 2.5rem;
        --font-size-4xl: 3.5rem;
        --font-size-5xl: 5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-3xl: 2rem;
        --font-size-4xl: 3rem;
        --font-size-5xl: 4rem;
    }

    .metric-display {
        font-size: var(--font-size-3xl);
    }

    .display-hero {
        font-size: var(--font-size-4xl);
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-base: 0.9375rem;
        --font-size-3xl: 1.75rem;
        --font-size-4xl: 2.5rem;
    }
}

/* ========== ACCESSIBILITY & PERFORMANCE ========== */

/* Prevent font size adjustment on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Optimize font rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure font loads don't block rendering */
@supports (font-display: swap) {
    /* Modern browsers will use font-display: swap from @import */
}