/* ── Paleta ────────────────────────────────────────────────── */
:root {
    --gr-bg:         #0f0f0f;
    --gr-surface:    #151515;
    --gr-surface2:   #1c1c1c;
    --gr-border:     #333333;
    --gr-text:       #f7f4f1;
    --gr-muted:      #aaa6a3;
    --gr-accent:     #b91d12;
    --gr-accent-dark:#520d08;
    --gr-green:      #33cc80;
    --gr-red:        #e64b40;
    --gr-orange:     #f4bc35;
    --gr-blue:       #1a5aff;
}

/* ── Base ──────────────────────────────────────────────────── */
body {
    background-color: var(--gr-bg);
    color: var(--gr-text);
    font-size: 0.9rem;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Navbar ────────────────────────────────────────────────── */
.navbar {
    background-color: var(--gr-surface) !important;
    border-bottom: 1px solid var(--gr-border);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gr-text) !important;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

.navbar-brand img { width: 112px; height: auto; display: block; }
.brand-divider { width: 1px; height: 22px; background: var(--gr-border); }
.navbar-brand span:last-child { color: var(--gr-muted); font-weight: 600; letter-spacing: .04em; }

.app-shell { max-width: 1680px; }
.logout-form { margin: 0 .75rem 0 0; }

.role-viewer .admin-only { display: none !important; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -.02em; }

.card {
    box-shadow: 0 12px 35px rgba(0,0,0,.16);
}

.navbar .nav-link {
    color: var(--gr-muted) !important;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--gr-text) !important;
    background: rgba(255,255,255,0.05);
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
    background-color: var(--gr-surface);
    border: 1px solid var(--gr-border) !important;
    border-radius: 10px;
}

.card-header {
    background-color: var(--gr-surface2) !important;
    border-bottom: 1px solid var(--gr-border) !important;
}

.card-footer {
    background-color: var(--gr-surface2) !important;
    border-top: 1px solid var(--gr-border) !important;
}

/* ── Tables ────────────────────────────────────────────────── */
.table {
    color: var(--gr-text);
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(255,255,255,0.03);
    --bs-table-striped-bg: transparent;
    margin-bottom: 0;
}

.table-light {
    --bs-table-bg: var(--gr-surface2);
    background-color: var(--gr-surface2) !important;
}

.table-light th {
    background-color: var(--gr-surface2) !important;
    color: var(--gr-muted) !important;
}

.table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gr-muted);
    border-bottom: 1px solid var(--gr-border) !important;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.table td {
    border-color: var(--gr-border);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: rgba(255,255,255,0.03);
}

/* ── Stat cards ────────────────────────────────────────────── */
.stat-card .fs-2 {
    font-size: 1.8rem !important;
    font-weight: 700;
}

/* ── Badges ────────────────────────────────────────────────── */
.badge {
    font-weight: 500;
}

.bg-success  { background-color: var(--gr-green)  !important; }
.bg-danger   { background-color: var(--gr-red)    !important; }
.bg-warning  { background-color: var(--gr-orange) !important; }
.bg-primary  { background-color: var(--gr-accent) !important; }

.badge.bg-light {
    background-color: var(--gr-surface2) !important;
    color: var(--gr-muted) !important;
    border: 1px solid var(--gr-border) !important;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-outline-secondary {
    border-color: var(--gr-border);
    color: var(--gr-muted);
}
.btn-outline-secondary:hover {
    background-color: var(--gr-surface2);
    border-color: var(--gr-muted);
    color: var(--gr-text);
}

.btn-outline-light {
    border-color: var(--gr-border);
    color: var(--gr-muted);
}
.btn-outline-light:hover {
    background-color: rgba(255,255,255,0.08);
    color: var(--gr-text);
}

.btn-outline-primary {
    border-color: var(--gr-accent);
    color: var(--gr-accent);
}
.btn-outline-primary:hover {
    background-color: rgba(185,29,18,0.14);
    color: var(--gr-accent);
}

.btn-outline-danger {
    border-color: var(--gr-red);
    color: var(--gr-red);
}

.btn-outline-success {
    border-color: var(--gr-green);
    color: var(--gr-green);
}

/* ── Form controls ─────────────────────────────────────────── */
.form-select, .form-control {
    background-color: var(--gr-surface2);
    border-color: var(--gr-border);
    color: var(--gr-text);
}

.form-select:focus, .form-control:focus {
    background-color: var(--gr-surface2);
    border-color: var(--gr-accent);
    color: var(--gr-text);
    box-shadow: 0 0 0 3px rgba(185,29,18,0.18);
}

.form-label { color: var(--gr-muted); }

/* ── Progress ──────────────────────────────────────────────── */
.progress {
    background-color: var(--gr-surface2);
    border: 1px solid var(--gr-border);
}

/* ── Score color (gold) ────────────────────────────────────── */
[style*="color:#e6a817"],
[style*="color: #e6a817"] {
    color: var(--gr-orange) !important;
}

/* ── Links ─────────────────────────────────────────────────── */
a.text-decoration-none.fw-semibold {
    color: var(--gr-accent);
}
a.text-decoration-none.fw-semibold:hover {
    color: #ef6c62;
}

/* ── Misc ──────────────────────────────────────────────────── */
.min-width-0 { min-width: 0; }
@media (max-width: 767px) {
    .app-shell { padding-left: 12px; padding-right: 12px; }
    .navbar-brand { font-size: 1rem; }
    .navbar-brand img { max-width: 110px; }
    .navbar-collapse .btn, .navbar-collapse form { margin: 6px 0; }
    .btn, .form-select, .form-control { min-height: 44px; }
    .card-header { flex-wrap: wrap; gap: 8px; }
    .table { font-size: .8rem; }
    .table td { white-space: normal; overflow-wrap: anywhere; }
    .table td a { display: inline-block; padding: 7px 0; }
    .d-flex { flex-wrap: wrap; }
}
.page-link   { font-size: 0.82rem; }

.text-muted  { color: var(--gr-muted) !important; }
.text-success{ color: var(--gr-green)  !important; }
.text-danger { color: var(--gr-red)    !important; }
.text-primary{ color: var(--gr-accent) !important; }
.text-warning{ color: var(--gr-orange) !important; }
.text-info   { color: var(--gr-blue) !important; }

/* ── Alert ─────────────────────────────────────────────────── */
.alert {
    border-color: var(--gr-border);
    background-color: var(--gr-surface2);
}

/* Spinner ───────────────────────────────────────────────────── */
.spinner-border.text-primary { color: var(--gr-accent) !important; }

/* Card header title ─────────────────────────────────────────── */
.card-header h6 { color: var(--gr-text); }

/* ── Logowanie SocialMinds ─────────────────────────────────── */
.login-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 15%, rgba(185,29,18,.18), transparent 36%),
        linear-gradient(140deg, #0e0e0e 0%, #151515 55%, #250906 100%);
}
.login-card {
    width: min(420px, 100%);
    padding: 38px;
    border: 1px solid var(--gr-border);
    border-radius: 16px;
    background: rgba(21,21,21,.94);
    box-shadow: 0 24px 80px rgba(0,0,0,.48);
}
.login-logo { width: 165px; height: auto; margin-bottom: 38px; }
.login-product { display: flex; align-items: center; gap: 16px; }
.login-mark { width: 5px; height: 52px; border-radius: 4px; background: var(--gr-accent); }
.login-product p { margin: 0 0 3px; color: var(--gr-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.login-product h1 { margin: 0; font-size: 2.2rem; }
.login-lead { color: var(--gr-muted); margin: 20px 0 30px; }
.login-card label { display: block; margin: 0 0 7px; font-size: .8rem; font-weight: 600; }
.login-card input { width: 100%; box-sizing: border-box; padding: 13px 14px; margin-bottom: 18px; border-radius: 8px; border: 1px solid var(--gr-border); background: var(--gr-surface2); color: var(--gr-text); }
.login-card input:focus { outline: none; border-color: var(--gr-accent); box-shadow: 0 0 0 3px rgba(185,29,18,.18); }
.login-card button { width: 100%; padding: 13px; border: 0; border-radius: 8px; background: var(--gr-accent); color: white; font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, transform .15s; }
.login-card button:hover { background: #d3281c; transform: translateY(-1px); }
.login-error { padding: 10px 12px; border: 1px solid var(--gr-red); border-radius: 8px; color: #ffb2ac; background: rgba(185,29,18,.12); }
.login-note { margin: 22px 0 0; text-align: center; color: var(--gr-muted); font-size: .72rem; }

@media (max-width: 767px) {
    .login-card { padding: 28px 22px; }
    .navbar-brand img { width: 96px; }
}