/*
Author: Marcin Grodek
Copyright (c) Marcin Grodek. All rights reserved.
*/
:root {
    --bg: #0e1518;
    --panel: #172227;
    --panel-alt: #203038;
    --text: #edf3f2;
    --muted: #9cb0b3;
    --accent: #5cc2a8;
    --accent-strong: #79d2bd;
    --warning: #f4a261;
    --danger: #ef6a6a;
    --line: rgba(255, 255, 255, 0.09);
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    --radius: 18px;
}

html[data-theme="light"] {
    --bg: #edf2f0;
    --panel: #ffffff;
    --panel-alt: #f4f7f6;
    --text: #172227;
    --muted: #55686d;
    --accent: #0f8d72;
    --accent-strong: #167c66;
    --warning: #b56a1c;
    --danger: #b54c4c;
    --line: rgba(16, 30, 32, 0.08);
    --shadow: 0 12px 30px rgba(24, 46, 50, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", "Trebuchet MS", sans-serif;
    background:
        radial-gradient(circle at top right, rgba(92, 194, 168, 0.12), transparent 25%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0)),
        var(--bg);
    color: var(--text);
}

a { color: inherit; text-decoration: none; }
code, pre { font-family: Consolas, "Courier New", monospace; }

.shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)), #101b20;
    border-right: 1px solid var(--line);
    padding: 1.5rem 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
}
.brand { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.8rem; }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 12px;
    background: linear-gradient(145deg, var(--accent), #244740);
    color: #06201a; font-weight: 700; letter-spacing: .08em;
}
.nav { display: grid; gap: .4rem; }
.nav a {
    padding: .8rem 1rem; border-radius: 12px; color: var(--muted); transition: .2s ease;
}
.nav a:hover { background: rgba(255,255,255,0.05); color: var(--text); }

.content-wrap { display: flex; flex-direction: column; min-width: 0; }
.topbar {
    display: flex; align-items: start; justify-content: space-between; gap: 1rem;
    padding: 1.5rem 2rem; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: rgba(14, 21, 24, 0.85); backdrop-filter: blur(16px); z-index: 10;
}
html[data-theme="light"] .topbar { background: rgba(237, 242, 240, 0.92); }
.topbar h1 { margin: 0; font-size: 1.8rem; }
.subtitle { margin: .35rem 0 0; color: var(--muted); max-width: 60rem; }
.topbar-actions { display: flex; gap: .75rem; align-items: center; }
.session-card {
    display: grid; gap: .2rem; min-width: 210px; padding: .8rem 1rem;
    border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.03);
}
.session-card div:last-child { color: var(--muted); text-transform: capitalize; }
.portal-logo-panel, .auth-logo-panel, .branding-preview {
    display: flex; align-items: center; justify-content: center;
    padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.03);
}
.portal-logo {
    display: block; max-width: 180px; max-height: 64px; width: auto; height: auto; object-fit: contain;
}
.auth-logo { max-width: 160px; max-height: 72px; }
.branding-preview { margin: 1rem 0; min-height: 96px; }
.branding-preview-image { max-width: 240px; max-height: 88px; }
.main { padding: 2rem; display: grid; gap: 1.5rem; }
.footer {
    padding: 1rem 2rem 1.5rem; color: var(--muted); font-size: .9rem;
    border-top: 1px solid var(--line);
}

.panel, .mini-card, .auth-card, .installer-shell, .step-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)), var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.panel, .step-card { padding: 1.25rem; }
.panel-header {
    display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1rem;
}
.panel h2, .panel h3, .step-card h2 { margin-top: 0; }
.muted { color: var(--muted); }

.grid { display: grid; gap: 1.2rem; }
.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-two { grid-column: 1 / -1; }

.stat-card .stat { font-size: 2rem; font-weight: 700; margin: 0 0 .5rem; }
.alarm { color: var(--danger); }
.button-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.button-row form { margin: 0; }

.button, .ghost-button, .theme-toggle, .nav-toggle {
    border: 0; border-radius: 12px; padding: .8rem 1.1rem;
    cursor: pointer; font-weight: 600; transition: transform .15s ease, opacity .15s ease, background .2s ease;
}
.button { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #08211b; }
.button.secondary { background: var(--panel-alt); color: var(--text); border: 1px solid var(--line); }
.button.danger { background: linear-gradient(135deg, #d35c5c, #f08080); color: #fff; }
.ghost-button, .theme-toggle, .nav-toggle { background: transparent; color: var(--text); border: 1px solid var(--line); }
.button:hover, .ghost-button:hover, .theme-toggle:hover, .nav-toggle:hover { transform: translateY(-1px); opacity: .95; }

.notice {
    padding: .95rem 1rem; border-radius: 14px; border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
}
.notice.success { border-color: rgba(92, 194, 168, 0.35); }
.notice.danger { border-color: rgba(239, 106, 106, 0.35); }

.data-table, .compact-table {
    width: 100%; border-collapse: collapse; overflow: hidden;
}
.data-table th, .data-table td, .compact-table td {
    padding: .8rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top;
}
.data-table th { text-align: left; color: var(--muted); font-size: .88rem; letter-spacing: .03em; }

.stack-form { display: grid; gap: .9rem; }
.stack-form label { display: grid; gap: .35rem; }
.stack-form input, .stack-form select, .stack-form textarea, .filter-form input {
    width: 100%; padding: .8rem .9rem; border-radius: 12px; border: 1px solid var(--line);
    background: var(--panel-alt); color: var(--text);
}
.checkbox { grid-template-columns: auto 1fr; gap: .75rem; align-items: center; }
.checkbox input { width: auto; }
.filter-form {
    display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)) auto; gap: .75rem; margin-bottom: 1rem;
}

.help-box, .warning-box {
    border-radius: 14px; padding: 1rem; border: 1px solid var(--line);
    background: rgba(255,255,255,0.02);
}
.warning-box { color: #ffd9c1; border-color: rgba(244, 162, 97, 0.35); }
html[data-theme="light"] .warning-box { color: #8b4b12; }

.timeline, .plain-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .75rem; }
.timeline li { display: grid; gap: .15rem; }

.pill {
    display: inline-flex; align-items: center; padding: .25rem .55rem;
    border-radius: 999px; font-size: .8rem; font-weight: 700; text-transform: capitalize;
}
.pill-info, .pill-success { background: rgba(92, 194, 168, 0.18); color: var(--accent-strong); }
.pill-seeded-demo, .pill-derived { background: rgba(92, 194, 168, 0.18); color: var(--accent-strong); }
.pill-warning, .pill-medium { background: rgba(244, 162, 97, 0.18); color: var(--warning); }
.pill-candidate, .pill-needs-confirmation, .pill-low, .pill-observed-unknown { background: rgba(244, 162, 97, 0.18); color: var(--warning); }
.pill-danger, .pill-error, .pill-critical, .pill-high { background: rgba(239, 106, 106, 0.18); color: var(--danger); }
.pill-captured, .pill-known { background: rgba(92, 194, 168, 0.18); color: var(--accent-strong); }

.sparkline {
    width: 100%; min-height: 56px; border-radius: 12px; border: 1px dashed var(--line); margin: .75rem 0 1rem;
    background: linear-gradient(180deg, rgba(92,194,168,0.08), transparent);
}

.mini-card { padding: 1rem; }
.mini-card h3 { margin: 0 0 .25rem; }
.status-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0 .2rem; }

.auth-body, .installer-body {
    min-height: 100vh; display: grid; place-items: center; padding: 2rem;
}
.auth-card, .installer-shell {
    width: min(960px, 100%); padding: 2rem;
}
.auth-card { max-width: 520px; }
.auth-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; }
.auth-footer { text-align: center; }
.eyebrow {
    display: inline-block; text-transform: uppercase; letter-spacing: .1em;
    font-size: .8rem; color: var(--muted); margin-bottom: .4rem;
}
.installer-panel h1 { margin-top: .25rem; }
.step-card { margin-bottom: 1rem; }
.scan-output {
    padding: 1rem; min-height: 8rem; overflow: auto;
    background: #0a1114; border-radius: 14px; border: 1px solid var(--line);
}
html[data-theme="light"] .scan-output { background: #f3f5f5; }

@media (max-width: 1100px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; inset: 0 auto 0 0; width: 280px; transform: translateX(-100%);
        transition: transform .2s ease; z-index: 30;
    }
    .sidebar.open { transform: translateX(0); }
}

@media (max-width: 900px) {
    .two-up, .three-up, .filter-form { grid-template-columns: 1fr; }
    .topbar { padding: 1rem; flex-direction: column; }
    .main { padding: 1rem; }
    .footer { padding: 1rem; }
    .auth-header { flex-direction: column; }
}