/*
 * theme.css — Paleta e Unifikuar Emerald / Amber / Dark Slate
 * Web Security Scanner — 2026-04-22
 *
 * Qëllimi: Zbatim konsistent i paletës së `resources/views/home.php`
 * dhe `resources/views/layouts/auth.php` mbi TË GJITHA faqet:
 * dashboard, scans, admin, profile, auth.
 *
 * Kjo skedë ngarkohet PAS style.css + modern.css që të mbivendosë
 * çdo ngjyrë të vjetër bootstrap-like (dc3545, fd7e14, ffc107, 2563eb…).
 *
 * Shënim: NUK prek routing, CSRF, middleware, ose symlink assets.
 */

:root {
    /* === Paleta Kryesore (autoritative) === */
    --wss-primary: #10b981;       /* emerald */
    --wss-primary-600: #059669;
    --wss-primary-400: #34d399;
    --wss-primary-light: rgba(16, 185, 129, 0.12);
    --wss-primary-border: rgba(16, 185, 129, 0.28);

    --wss-accent: #f59e0b;        /* amber */
    --wss-accent-600: #d97706;
    --wss-accent-light: rgba(245, 158, 11, 0.12);

    --wss-teal: #14b8a6;

    /* Severity kanonike */
    --wss-sev-critical: #ef4444;  /* kuq */
    --wss-sev-high:     #f97316;  /* portokalli i thellë */
    --wss-sev-medium:   #f59e0b;  /* amber */
    --wss-sev-low:      #14b8a6;  /* teal */
    --wss-sev-info:     #64748b;  /* slate */

    /* Sipërfaqe të errëta (konform home.php/auth.php) */
    --wss-bg:        #0f172a;
    --wss-bg-2:      #0b1220;
    --wss-surface:   #111a2e;
    --wss-surface-2: #162036;
    --wss-border:    rgba(148, 163, 184, 0.14);
    --wss-border-strong: rgba(16, 185, 129, 0.28);
    --wss-text:        #e2e8f0;
    --wss-text-strong: #f8fafc;
    --wss-muted:       #94a3b8;

    /* Alias-et e vjetra që i ri-mapojmë te paleta e re */
    --md-primary: var(--wss-primary);
    --md-primary-hover: var(--wss-primary-600);
    --md-success: var(--wss-primary);
    --md-warning: var(--wss-accent);
    --md-danger:  var(--wss-sev-critical);
}

/* Light-mode mbivendosje (për faqet legacy me light-mode.css) */
html[data-theme="light"] {
    --wss-bg:        #f8fafc;
    --wss-bg-2:      #ffffff;
    --wss-surface:   #ffffff;
    --wss-surface-2: #f1f5f9;
    --wss-border:    rgba(15, 23, 42, 0.08);
    --wss-text:        #0f172a;
    --wss-text-strong: #020617;
    --wss-muted:       #475569;
}

/* =========================================================
   1) Badge-et e severity — konsistente në të gjitha faqet
   ========================================================= */
.badge-critical,
.badge.bg-danger.badge-critical,
.severity-badge.critical,
.sev-badge.critical {
    background-color: var(--wss-sev-critical) !important;
    color: #fff !important;
    border-color: var(--wss-sev-critical) !important;
}
.badge-high,
.severity-badge.high,
.sev-badge.high {
    background-color: var(--wss-sev-high) !important;
    color: #fff !important;
    border-color: var(--wss-sev-high) !important;
}
.badge-medium,
.severity-badge.medium,
.sev-badge.medium {
    background-color: var(--wss-sev-medium) !important;
    color: #1f2937 !important;
    border-color: var(--wss-sev-medium) !important;
}
.badge-low,
.severity-badge.low,
.sev-badge.low {
    background-color: var(--wss-sev-low) !important;
    color: #fff !important;
    border-color: var(--wss-sev-low) !important;
}
.badge-info,
.severity-badge.info,
.sev-badge.info {
    background-color: var(--wss-sev-info) !important;
    color: #fff !important;
    border-color: var(--wss-sev-info) !important;
}

/* Tekst i severity (.severity-*) */
.severity-critical { color: var(--wss-sev-critical) !important; }
.severity-high     { color: var(--wss-sev-high)     !important; }
.severity-medium   { color: var(--wss-sev-medium)   !important; }
.severity-low      { color: var(--wss-sev-low)      !important; }
.severity-info     { color: var(--wss-sev-info)     !important; }

/* Pill-i standard i severity-t — stil i unifikuar */
.sev-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
    line-height: 1.4;
}
.sev-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.sev-pill.critical { background: rgba(239,68,68,.12);  color: #fca5a5; border-color: rgba(239,68,68,.30); }
.sev-pill.high     { background: rgba(249,115,22,.12); color: #fdba74; border-color: rgba(249,115,22,.30); }
.sev-pill.medium   { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.30); }
.sev-pill.low      { background: rgba(20,184,166,.12); color: #5eead4; border-color: rgba(20,184,166,.30); }
.sev-pill.info     { background: rgba(100,116,139,.15); color: #cbd5e1; border-color: rgba(100,116,139,.35); }

/* =========================================================
   2) Rregullim ngjyrash për layouts/app.php (badge legacy)
   ========================================================= */
.card-header {
    background-color: var(--wss-bg) !important;
    border-bottom: 1px solid var(--wss-primary-border) !important;
    color: var(--wss-primary-400) !important;
}

.stat-card { border-left: 4px solid var(--wss-primary) !important; }
.stat-card.success { border-left-color: var(--wss-primary) !important; }
.stat-card.danger  { border-left-color: var(--wss-sev-critical) !important; }
.stat-card.warning { border-left-color: var(--wss-accent) !important; }
.stat-card.info    { border-left-color: var(--wss-teal) !important; }

/* =========================================================
   3) Butonat — aliasing emerald
   ========================================================= */
.btn-primary,
.btn.btn-primary {
    background: linear-gradient(135deg, var(--wss-primary) 0%, var(--wss-teal) 100%) !important;
    border-color: var(--wss-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px -8px rgba(16,185,129,.45);
}
.btn-primary:hover,
.btn.btn-primary:hover {
    background: linear-gradient(135deg, var(--wss-primary-600) 0%, #0d9488 100%) !important;
    border-color: var(--wss-primary-600) !important;
    box-shadow: 0 12px 26px -10px rgba(16,185,129,.55);
}
.btn-outline-primary {
    color: var(--wss-primary-400) !important;
    border-color: var(--wss-primary-border) !important;
    background: transparent !important;
}
.btn-outline-primary:hover {
    background: var(--wss-primary-light) !important;
    color: var(--wss-primary-400) !important;
    border-color: var(--wss-primary) !important;
}
.btn-warning,
.btn.btn-warning {
    background: linear-gradient(135deg, var(--wss-accent) 0%, var(--wss-accent-600) 100%) !important;
    border-color: var(--wss-accent) !important;
    color: #1f2937 !important;
}
.btn-warning:hover,
.btn.btn-warning:hover {
    background: linear-gradient(135deg, var(--wss-accent-600) 0%, #b45309 100%) !important;
    color: #fff !important;
}

/* =========================================================
   4) Link-et & fokusi
   ========================================================= */
a { color: var(--wss-primary-400); }
a:hover { color: var(--wss-primary); }
:focus-visible {
    outline: 2px solid var(--wss-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =========================================================
   5) Alert-et (bootstrap + custom) në paletën emerald/amber
   ========================================================= */
.alert-primary,
.alert-success {
    background-color: rgba(16,185,129,.10) !important;
    border-color: rgba(16,185,129,.28) !important;
    color: #6ee7b7 !important;
}
.alert-warning {
    background-color: rgba(245,158,11,.10) !important;
    border-color: rgba(245,158,11,.28) !important;
    color: #fcd34d !important;
}
.alert-danger {
    background-color: rgba(239,68,68,.10) !important;
    border-color: rgba(239,68,68,.28) !important;
    color: #fca5a5 !important;
}
.alert-info {
    background-color: rgba(20,184,166,.10) !important;
    border-color: rgba(20,184,166,.28) !important;
    color: #5eead4 !important;
}

/* =========================================================
   6) Form input-et — fokus emerald
   ========================================================= */
.form-control:focus,
.form-select:focus {
    border-color: var(--wss-primary) !important;
    box-shadow: 0 0 0 4px rgba(16,185,129,.14) !important;
}

/* =========================================================
   7) Navbar / Sidebar polish (konform auth.php)
   ========================================================= */
.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    border-left-color: var(--wss-primary) !important;
    background: rgba(16,185,129,0.10) !important;
    color: #fff !important;
}
.sidebar-brand,
.sidebar-brand:hover {
    color: var(--wss-primary-400) !important;
}

/* =========================================================
   8) Tabela — ngjyra e header-it
   ========================================================= */
.table > :not(caption) > * > * {
    border-bottom-color: var(--wss-border) !important;
}
.table-light,
.table thead th {
    background-color: var(--wss-surface-2) !important;
    color: var(--wss-text-strong) !important;
}

/* =========================================================
   9) Mbyllje: cilësime të përgjithshme theme-color
   ========================================================= */
::selection {
    background: rgba(16, 185, 129, 0.35);
    color: #fff;
}
/* =========================================================
   10) Kontrast & konsistencë (shtuar: fix dizajni)
   - text-muted i lexueshëm në dark theme
   - input-et marrin ngjyrat e temës (jo të bardha mbi dark)
   ========================================================= */
.text-muted,
.text-secondary,
small.text-muted,
.card .text-muted {
    color: var(--wss-muted) !important;
}
.form-control,
.form-select,
textarea.form-control {
    background-color: var(--wss-surface) !important;
    border-color: var(--wss-border) !important;
    color: var(--wss-text) !important;
}
.form-control::placeholder { color: var(--wss-muted) !important; opacity: .85; }
.form-control:disabled,
.form-control[readonly] { background-color: var(--wss-surface-2) !important; opacity: .9; }
.input-group-text {
    background-color: var(--wss-surface-2) !important;
    border-color: var(--wss-border) !important;
    color: var(--wss-muted) !important;
}
/* =========================================================
   10) Kontrast & konsistencë (shtuar: fix dizajni)
   - text-muted i lexueshëm në dark theme
   - input-et marrin ngjyrat e temës (jo të bardha mbi dark)
   ========================================================= */
.text-muted,
.text-secondary,
small.text-muted,
.card .text-muted {
    color: var(--wss-muted) !important;
}
.form-control,
.form-select,
textarea.form-control {
    background-color: var(--wss-surface) !important;
    border-color: var(--wss-border) !important;
    color: var(--wss-text) !important;
}
.form-control::placeholder { color: var(--wss-muted) !important; opacity: .85; }
.form-control:disabled,
.form-control[readonly] { background-color: var(--wss-surface-2) !important; opacity: .9; }
.input-group-text {
    background-color: var(--wss-surface-2) !important;
    border-color: var(--wss-border) !important;
    color: var(--wss-muted) !important;
}