/* ============================================================================
   PSK THEME - stratul de tema partajat (CANON: zona de monitorizare)
   ----------------------------------------------------------------------------
   Sursa canonului: resources/views/customer/monitoring.blade.php,
   monitorizare-landing.blade.php, customer/project-hub.blade.php.
   Estetica: DM Sans peste tot (decizie 2026-07-23), accent roz #D81B60,
   hero-uri moi cu glow roz/violet, carduri aerisite, editorial premium.

   Acest fisier face 2 lucruri:
   1) ARMONIZARE - aliniaza fontul de heading (DM Sans) pe h1-h5 si fontul
      de body (DM Sans) pe body, peste tema Material Dashboard, in toate
      layout-urile (app, guest, public).
   2) TOKENS + CLASE UTILITARE canonice (.psk-*) pe care le folosesc
      agentii de zona ca sa inlocuiasca stilurile divergente.

   Se incarca DUPA material-dashboard.css / main.css ca sa castige cascada.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS (variabile CSS canonice)
   --------------------------------------------------------------------------- */
:root {
    /* Fonturi */
    --psk-font-heading: 'DM Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --psk-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Accent roz (brand) */
    --psk-accent: #D81B60;        /* roz principal */
    --psk-accent-dark: #ad1457;   /* roz inchis - linkuri, hover, preturi */
    --psk-accent-light: #ec407a;  /* start gradient buton */
    --psk-accent-soft: #fdeef5;   /* fundal roz f. deschis (hover outline) */
    --psk-accent-tint: #fce4ec;   /* fundal roz pentru alert/info */
    --psk-accent-border: #f2d5e2; /* bordura roz pentru eyebrow/pill */

    /* Accent violet secundar */
    --psk-purple: #6a1b9a;
    --psk-purple-2: #8e24aa;      /* capat gradient text */
    --psk-purple-soft: #f0eaf7;   /* fundal badge violet */

    /* Text / cerneala */
    --psk-ink: #151426;           /* text principal inchis */
    --psk-ink-soft: #3a3f4b;      /* text principal mai deschis */
    --psk-muted: #5c6273;         /* text secundar */
    --psk-muted-2: #8a90a2;       /* etichete, subtitluri, meta */

    /* Suprafete si linii */
    --psk-surface: #ffffff;
    --psk-surface-soft: #fafbfd;  /* fundal kpi / celule moi */
    --psk-surface-alt: #fbf7fa;   /* fundal sectiune alternativa */
    --psk-line: #eef0f3;          /* bordura subtila principala */
    --psk-line-2: #f1f2f6;        /* bordura si mai subtila */

    /* Semantic */
    --psk-green: #1b8a4b;
    --psk-green-bg: #e9f7ec;
    --psk-green-ink: #2e7d32;
    --psk-red: #c62828;
    --psk-red-bg: #fdecec;

    /* Gradiente */
    --psk-grad-btn: linear-gradient(195deg, #ec407a, #d81b60);
    --psk-grad-btn-hover: linear-gradient(195deg, #e91e63, #c2185b);
    --psk-grad-text: linear-gradient(90deg, #d81b60, #8e24aa);
    --psk-hero-glow: radial-gradient(620px 240px at 85% -30%, rgba(216,27,96,.10), transparent 60%),
                     radial-gradient(440px 210px at 3% 0, rgba(106,27,154,.09), transparent 55%);

    /* Raze */
    --psk-radius: 16px;
    --psk-radius-lg: 18px;
    --psk-radius-sm: 11px;
    --psk-radius-pill: 30px;

    /* Umbre */
    --psk-shadow-card: 0 8px 26px -20px rgba(21,20,38,.5);
    --psk-shadow-card-hover: 0 20px 42px -22px rgba(21,20,38,.5);
    --psk-shadow-btn: 0 12px 26px -10px rgba(216,27,96,.55);
    --psk-shadow-soft: 0 4px 14px rgba(216,27,96,.08);

    /* Spacing recurent */
    --psk-gap: 18px;
    --psk-pad-card: 22px;
}

/* Suprascriu variabila Bootstrap/Material ca body, .form-control, .navbar etc.
   sa nu mai rezolve la Roboto ci la DM Sans. */
:root {
    --bs-font-sans-serif: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   2. ARMONIZARE (peste Material Dashboard)
   Body si headinguri -> DM Sans (greutati diferite).
   h6 ramane font de body - canonul foloseste body-ul pentru titlurile
   mici de card. Nu ating fonturile de iconita (FontAwesome / Material Icons).
   --------------------------------------------------------------------------- */
body {
    font-family: var(--psk-font-body);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
    font-family: var(--psk-font-heading);
    letter-spacing: -.01em;
}

/* Material Dashboard seteaza explicit Roboto pe corpul cardului - il readuc la DM Sans. */
.card .card-body {
    font-family: var(--psk-font-body);
}

/* Utilitarul Material .text-sans-serif forta Roboto cu !important. */
.text-sans-serif {
    font-family: var(--psk-font-body) !important;
}

/* ---------------------------------------------------------------------------
   3. CLASE UTILITARE CANONICE (.psk-*)
   Opt-in: se aplica de agentii de zona, nu schimba nimic din oficiu.
   --------------------------------------------------------------------------- */

/* --- Card aerisit --- */
.psk-card {
    background: var(--psk-surface);
    border: 1px solid var(--psk-line);
    border-radius: var(--psk-radius);
    padding: var(--psk-pad-card);
    box-shadow: var(--psk-shadow-card);
    transition: transform .15s, box-shadow .15s;
}
.psk-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: var(--psk-shadow-card-hover);
}

/* --- Hero moale cu glow roz/violet --- */
.psk-hero {
    background: var(--psk-hero-glow);
    border: 1px solid var(--psk-line);
    border-radius: var(--psk-radius);
    padding: 24px 26px;
}

/* --- Eyebrow / pill de sectiune --- */
.psk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--psk-surface);
    border: 1px solid var(--psk-accent-border);
    color: var(--psk-accent-dark);
    font-family: var(--psk-font-body);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: var(--psk-radius-pill);
    box-shadow: var(--psk-shadow-soft);
}

/* --- Titlu de sectiune serif --- */
.psk-section-title {
    font-family: var(--psk-font-heading);
    font-weight: 600;
    color: var(--psk-ink);
    letter-spacing: -.01em;
    line-height: 1.15;
}

/* --- Text cu gradient roz -> violet --- */
.psk-gradient-text {
    background: var(--psk-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- Butoane --- */
.psk-btn,
.psk-btn-outline,
.psk-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--psk-font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    border-radius: 11px;
    padding: 12px 20px;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.psk-btn {
    background: var(--psk-grad-btn);
    color: #fff;
    box-shadow: var(--psk-shadow-btn);
}
.psk-btn:hover {
    color: #fff;
    transform: translateY(-1px);
}
.psk-btn-outline {
    background: var(--psk-surface);
    border-color: var(--psk-accent);
    color: var(--psk-accent-dark);
}
.psk-btn-outline:hover {
    background: var(--psk-accent-soft);
    color: var(--psk-accent-dark);
}
.psk-btn-ghost {
    background: var(--psk-surface);
    border-color: var(--psk-line);
    color: var(--psk-ink);
}
.psk-btn-ghost:hover {
    background: var(--psk-surface-soft);
    color: var(--psk-ink);
}

/* --- Badge / pill --- */
.psk-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 9px;
    font-family: var(--psk-font-body);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    background: var(--psk-purple-soft);
    color: var(--psk-purple);
}
.psk-badge-success { background: var(--psk-green-bg); color: var(--psk-green-ink); text-transform: none; }
.psk-badge-danger  { background: var(--psk-red-bg);   color: var(--psk-red);       text-transform: none; }
.psk-badge-accent  { background: var(--psk-accent-soft); color: var(--psk-accent-dark); text-transform: none; }

/* --- Tabel editorial --- */
.psk-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--psk-font-body);
}
.psk-table th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--psk-muted-2);
    text-align: left;
    padding: 8px 6px;
    font-weight: 700;
}
.psk-table td {
    padding: 10px 6px;
    border-top: 1px solid #f4f5f8;
    font-size: 13px;
    color: var(--psk-ink-soft);
}

/* --- Input canonic --- */
.psk-input {
    width: 100%;
    font-family: var(--psk-font-body);
    font-size: 14px;
    color: var(--psk-ink);
    background: var(--psk-surface);
    border: 1.5px solid var(--psk-line);
    border-radius: 11px;
    padding: 10px 14px;
    transition: border-color .15s, box-shadow .15s;
}
.psk-input::placeholder { color: var(--psk-muted-2); }
.psk-input:focus {
    outline: none;
    border-color: var(--psk-accent);
    box-shadow: 0 0 0 3px rgba(216,27,96,.12);
}

/* --- KPI / tile --- */
.psk-kpi {
    background: var(--psk-surface-soft);
    border: 1px solid var(--psk-line-2);
    border-radius: var(--psk-radius-sm);
    padding: 12px 10px;
    text-align: center;
}
.psk-kpi .v {
    font-family: var(--psk-font-heading);
    font-weight: 700;
    font-size: 20px;
    color: var(--psk-ink);
    line-height: 1.1;
}
.psk-kpi .l {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--psk-muted-2);
    font-weight: 700;
    margin-top: 3px;
}

/* --- Helperi de text --- */
.psk-ink { color: var(--psk-ink) !important; }
.psk-muted { color: var(--psk-muted) !important; }
.psk-accent { color: var(--psk-accent) !important; }
.psk-accent-dark { color: var(--psk-accent-dark) !important; }