@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 240 10% 2%;
    --foreground: 0 0% 98%;
    --card: 240 10% 4%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 2%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.1%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 12%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15%;
    --input: 240 3.7% 15.1%;
    --ring: 240 4.9% 83.9%;
    --radius: 0.75rem;

    --grade-a: #10b981;
    --grade-b: #84cc16;
    --grade-c: #f59e0b;
    --grade-d: #f97316;
    --grade-e: #ef4444;
    --grade-f: #dc2626;
  }
}

* {
    scrollbar-width: thin;
    scrollbar-color: hsl(240 3.7% 20%) transparent;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: hsl(240 3.7% 20%);
    border-radius: 20px;
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

#canvas3d {
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Glassmorphism & Depth */
.glass-panel {
    @apply border border-border bg-card/40 backdrop-blur-xl shadow-2xl;
}

.premium-border {
    position: relative;
}

.premium-border::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(to right, transparent, rgba(59, 130, 246, 0.2), transparent);
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.premium-border:hover::after {
    opacity: 1;
}

/* Grade Styling */
.grade-box {
    @apply flex items-center justify-center font-black rounded-2xl transition-all duration-700;
}

.grade-a { background: var(--grade-a); color: #000; box-shadow: 0 0 40px rgba(16, 185, 129, 0.3); }
.grade-b { background: var(--grade-b); color: #000; box-shadow: 0 0 40px rgba(132, 204, 22, 0.3); }
.grade-c { background: var(--grade-c); color: #000; box-shadow: 0 0 40px rgba(245, 158, 11, 0.3); }
.grade-d { background: var(--grade-d); color: #000; box-shadow: 0 0 40px rgba(249, 115, 22, 0.3); }
.grade-e { background: var(--grade-e); color: #fff; box-shadow: 0 0 40px rgba(239, 68, 68, 0.3); }
.grade-f { background: var(--grade-f); color: #fff; box-shadow: 0 0 40px rgba(220, 38, 38, 0.3); }

/* ─── Analysis Table ─────────────────────────────────── */
.analysis-table {
    width: 100%;
    border-collapse: collapse;
}

.analysis-table thead {
    border-bottom: 1px solid hsl(var(--border) / 0.45);
}

.analysis-table th {
    padding: 0.8rem 1.375rem;
    text-align: left;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: hsl(var(--muted-foreground) / 0.4);
    white-space: nowrap;
}

/* ─── Result Rows ─────────────────────────────────────── */
.result-row {
    border-bottom: 1px solid hsl(var(--border) / 0.16);
    transition: background 0.14s ease, box-shadow 0.14s ease;
}
.result-row:last-child { border-bottom: none; }
.result-row:hover { background: rgba(255,255,255,0.016); }
.result-row-missing:hover { box-shadow: inset 3px 0 0 rgba(248,113,113,0.45); }
.result-row-warning:hover { box-shadow: inset 3px 0 0 rgba(251,191,36,0.45); }
.result-row-good:hover    { box-shadow: inset 3px 0 0 rgba(52,211,153,0.45); }

.result-cell-name,
.result-cell-value,
.result-cell-rec {
    padding: 1.2rem 1.375rem;
    vertical-align: top;
}
.result-cell-name  { width: 26%; }
.result-cell-value { width: 43%; }
.result-cell-rec   { width: 31%; }

/* Header name chip */
.result-name-chip {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.64rem;
    font-weight: 500;
    color: hsl(var(--foreground) / 0.88);
    background: rgba(255,255,255,0.04);
    border: 1px solid hsl(var(--border) / 0.6);
    padding: 0.18rem 0.52rem;
    border-radius: 0.3rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
    line-height: 1.6;
}

/* Description text below chip */
.result-name-desc {
    font-size: 0.67rem;
    color: hsl(var(--muted-foreground) / 0.52);
    line-height: 1.55;
    margin-bottom: 0.55rem;
}

/* Value code block */
.result-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.63rem;
    background: hsl(240 12% 3%);
    border: 1px solid hsl(var(--border) / 0.4);
    color: #60a5fa;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    word-break: break-all;
    line-height: 1.7;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);
}

/* Empty / not detected state */
.result-val-empty {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.67rem;
    color: hsl(var(--muted-foreground) / 0.28);
    font-style: italic;
    padding: 0.25rem 0;
}

/* Recommendation callout */
.result-rec-box {
    background: rgba(16,185,129,0.04);
    border: 1px solid rgba(16,185,129,0.13);
    border-radius: 0.5rem;
    padding: 0.65rem 0.8rem;
}
.result-rec-box p {
    font-size: 0.68rem;
    color: hsl(var(--muted-foreground) / 0.7);
    line-height: 1.65;
}

/* Category panel colored top border */
.result-panel-missing { border-top: 2px solid rgba(239,68,68,0.3) !important; }
.result-panel-warning { border-top: 2px solid rgba(245,158,11,0.3) !important; }
.result-panel-good    { border-top: 2px solid rgba(16,185,129,0.3) !important; }

/* Category thead tint */
.result-thead-missing { background: rgba(239,68,68,0.025); }
.result-thead-warning { background: rgba(245,158,11,0.025); }
.result-thead-good    { background: rgba(16,185,129,0.025); }

/* ─── Section header (category) ──────────────────────── */
.result-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
    padding-left: 0.1rem;
}

.result-cat-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-missing { background: rgba(239,68,68,0.10); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.icon-warning { background: rgba(245,158,11,0.10); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
.icon-good    { background: rgba(16,185,129,0.10); color: #34d399; border: 1px solid rgba(16,185,129,0.2); }

.result-cat-title {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: hsl(var(--foreground) / 0.78);
}

.result-cat-count {
    margin-left: auto;
    font-size: 0.63rem;
    font-weight: 700;
    padding: 0.14rem 0.6rem;
    border-radius: 99px;
    letter-spacing: 0.02em;
}
.count-missing { background: rgba(239,68,68,0.10); color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.count-warning { background: rgba(245,158,11,0.10); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
.count-good    { background: rgba(16,185,129,0.10); color: #34d399; border: 1px solid rgba(16,185,129,0.2); }

/* ─── Status Badges ───────────────────────────────────── */
.badge-present {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 99px;
    padding: 0.2rem 0.6rem;
    font-size: 0.62rem;
    font-weight: 700;
    background: rgba(16,185,129,0.1);
    color: #34d399;
    border: 1px solid rgba(16,185,129,0.22);
}
.badge-missing {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 99px;
    padding: 0.2rem 0.6rem;
    font-size: 0.62rem;
    font-weight: 700;
    background: rgba(239,68,68,0.1);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.22);
}
.badge-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 99px;
    padding: 0.2rem 0.6rem;
    font-size: 0.62rem;
    font-weight: 700;
    background: rgba(245,158,11,0.1);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,0.22);
}

/* Status dot inside badges */
.status-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-good    { background: #34d399; }
.dot-missing { background: #f87171; }
.dot-warning { background: #fbbf24; }

/* ─── Legacy / kept for compat ───────────────────────── */
.cat-header {
    @apply text-sm font-black tracking-[0.2em] uppercase text-muted-foreground mb-6 flex items-center gap-4;
}
.cat-header::after {
    content: "";
    @apply flex-1 h-[1px] bg-gradient-to-r from-border to-transparent;
}
.val-monospace {
    @apply font-mono text-[11px] bg-[#0d0d0d] p-3 rounded-lg border border-border/80 break-all text-blue-400/90 leading-relaxed shadow-inner;
}
.rec-badge {
    @apply inline-flex items-center rounded-md border border-green-500/20 bg-green-500/5 px-2 py-0.5 text-[10px] font-bold text-green-500/80 mb-2;
}
.cat-indicator { @apply w-1 rounded-full; }
.cat-indicator-missing { @apply bg-destructive; box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
.cat-indicator-warning { @apply bg-yellow-500; box-shadow: 0 0 10px rgba(245, 158, 11, 0.3); }
.cat-indicator-good { @apply bg-green-500; box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); }

/* Dashboard refinements */
.scan-list thead tr {
    border-bottom: 1px solid hsl(var(--border) / 0.5);
    background: linear-gradient(180deg, hsl(240 10% 5%) 0%, transparent 100%);
}

.scan-list th {
    @apply py-3 px-5 text-left text-[9px] font-bold uppercase tracking-[0.2em] text-muted-foreground/40;
}

.scan-list th:last-child {
    @apply text-right;
}

.scan-list td {
    @apply py-3.5 px-5;
}

.scan-list td:last-child {
    @apply text-right;
}

.scan-list tbody tr:last-child td {
    @apply border-b-0;
}

.scan-list tbody tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

/* Animations */
@keyframes glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.animate-glow {
    animation: glow 4s ease-in-out infinite;
}

/* ─── SSL / TLS Panel ─────────────────────────────────────────────────────── */

.ssl-panel-border {
    border-top: 2px solid rgba(99, 102, 241, 0.28) !important;
}

.ssl-error-border {
    border-top: 2px solid rgba(239, 68, 68, 0.25) !important;
}

.result-thead-ssl {
    background: rgba(99, 102, 241, 0.025);
}

/* Grade box */
.ssl-grade-box {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    transition: all 0.5s ease;
}

/* Meta info grid */
.ssl-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ssl-meta-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: hsl(var(--muted-foreground) / 0.35);
}

.ssl-meta-value {
    font-size: 0.7rem;
    font-weight: 600;
    color: hsl(var(--foreground) / 0.82);
    line-height: 1.3;
    word-break: break-all;
}

/* SAN chips */
.ssl-san-chip {
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    background: rgba(99, 102, 241, 0.07);
    border: 1px solid rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    white-space: nowrap;
}

.ssl-san-more {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid hsl(var(--border) / 0.4);
    color: hsl(var(--muted-foreground) / 0.4);
    font-style: italic;
}

/* Check table rows */
.result-row-ssl-pass:hover { box-shadow: inset 3px 0 0 rgba(52,211,153,0.45); }
.result-row-ssl-fail:hover { box-shadow: inset 3px 0 0 rgba(248,113,113,0.45); }
.result-row-ssl-warn:hover { box-shadow: inset 3px 0 0 rgba(251,191,36,0.45); }
.result-row-ssl-info:hover { box-shadow: inset 3px 0 0 rgba(99,102,241,0.45); }

/* Value display inside SSL checks */
.ssl-val-pass { color: #34d399; font-size: 0.68rem; font-weight: 600; }
.ssl-val-fail { color: #f87171; font-size: 0.68rem; font-weight: 600; }
.ssl-val-warn { color: #fbbf24; font-size: 0.68rem; font-weight: 600; }
.ssl-val-info { color: hsl(var(--muted-foreground) / 0.65); font-size: 0.68rem; font-weight: 600; }

/* Result rec box overrides per ssl status */
.result-rec-ssl-pass { background: rgba(16,185,129,0.04); border: 1px solid rgba(16,185,129,0.12); }
.result-rec-ssl-fail { background: rgba(239,68,68,0.04); border: 1px solid rgba(239,68,68,0.12); }
.result-rec-ssl-warn { background: rgba(245,158,11,0.04); border: 1px solid rgba(245,158,11,0.12); }
.result-rec-ssl-info { background: rgba(99,102,241,0.04); border: 1px solid rgba(99,102,241,0.12); }

/* Check icons */
.ssl-check-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}
.ssl-icon-pass { color: #34d399; }
.ssl-icon-fail { color: #f87171; }
.ssl-icon-warn { color: #fbbf24; }
.ssl-icon-info { color: #818cf8; }