* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #09090d;
    --sidebar: #0d0d13;
    --panel: #111118;
    --panel-2: #181821;
    --panel-3: #1d1d28;

    --border: #292936;
    --border-light: #363646;

    --text: #f3f3f7;
    --muted: #9696a7;

    --purple: #8b5cf6;
    --purple-dark: #6d28d9;
    --purple-soft: rgba(139, 92, 246, 0.14);

    --green: #22c55e;
    --red: #ef4444;
    --yellow: #eab308;
    --blue: #3b82f6;
    --orange: #f97316;
    --cyan: #06b6d4;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

.app {
    display: flex;
    min-height: 100vh;
}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    width: 250px;

    padding: 25px 15px;

    background: var(--sidebar);

    border-right: 1px solid var(--border);

    overflow-y: auto;

    z-index: 20;
}

.brand {
    padding: 0 12px 25px;

    border-bottom: 1px solid var(--border);

    margin-bottom: 20px;
}

.brand h1 {
    color: var(--purple);

    font-size: 28px;
    line-height: 1;
}

.brand p {
    color: var(--muted);

    font-size: 12px;

    margin-top: 7px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.nav-item {
    position: relative;

    width: 100%;

    border: 0;

    background: transparent;

    color: #aaaabd;

    text-align: left;

    padding: 13px 14px;

    border-radius: 9px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.nav-item:hover {
    color: white;

    background: rgba(139, 92, 246, 0.09);

    transform: translateX(2px);
}

.nav-item.active {
    color: white;

    background: var(--purple-soft);

    box-shadow:
        inset 3px 0 0 var(--purple);
}

.menu-counter {
    float: right;

    min-width: 22px;

    padding: 2px 6px;

    border-radius: 20px;

    background: var(--purple);

    color: white;

    text-align: center;

    font-size: 11px;
    font-weight: 700;
}

.leave-counter {
    background: var(--red);
}


/* =====================================================
   MAIN
===================================================== */

.main-content {
    width: calc(100% - 250px);

    margin-left: 250px;

    padding: 34px;
}

.page {
    display: none;

    animation: pageFade 0.2s ease;
}

.page.active-page {
    display: block;
}

@keyframes pageFade {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}

.page-heading h2 {
    font-size: 30px;

    margin: 4px 0 7px;
}

.page-heading p {
    color: var(--muted);

    line-height: 1.5;
}

.small-heading {
    margin-top: 15px;
}

.eyebrow {
    color: var(--purple);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


/* =====================================================
   BUTTONS
===================================================== */

.primary-btn,
.secondary-btn,
.danger-btn,
.wipe-complete-btn,
.back-btn,
.icon-btn {
    border: 0;

    border-radius: 8px;

    padding: 10px 15px;

    color: white;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}

.primary-btn {
    background: var(--purple);
}

.primary-btn:hover {
    background: var(--purple-dark);

    transform: translateY(-1px);
}

.secondary-btn,
.back-btn {
    background: #252531;
}

.secondary-btn:hover,
.back-btn:hover {
    background: #30303e;
}

.danger-btn {
    background: #b91c1c;
}

.danger-btn:hover {
    background: #991b1b;
}

.wipe-complete-btn {
    background: #15803d;
}

.wipe-complete-btn:hover {
    background: #166534;
}

.icon-btn {
    background: transparent;

    font-size: 22px;

    padding: 5px 9px;
}

.icon-btn:hover {
    background: #242430;
}

.full-btn {
    width: 100%;

    margin-top: 10px;
}


/* =====================================================
   FORMS
===================================================== */

input,
select,
textarea {
    width: 100%;

    background: #0c0c12;

    color: white;

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 11px 12px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--purple);

    box-shadow:
        0 0 0 3px rgba(139, 92, 246, 0.08);
}

textarea {
    min-height: 100px;

    resize: vertical;
}

label {
    display: block;

    color: #c7c7d2;

    font-size: 13px;

    margin: 12px 0;
}

label input,
label select,
label textarea {
    margin-top: 7px;
}

.two-columns {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;
}

.filters-bar {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-bottom: 22px;
}

.filters-bar input,
.filters-bar select {
    width: auto;

    min-width: 190px;

    flex: 1;
}

.reports-filter-grid {
    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 15px;
}


/* =====================================================
   PANELS
===================================================== */

.panel,
.stat-card,
.info-card,
.dashboard-stat-card {
    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 13px;
}

.panel {
    padding: 22px;

    margin: 20px 0;
}

.panel h3 {
    margin-bottom: 15px;
}

.panel-title,
.results-heading {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 15px;
}

.hidden {
    display: none !important;
}


/* =====================================================
   STATISTICS
===================================================== */

.stats-grid {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 15px;

    margin: 20px 0;
}

.single-stat {
    grid-template-columns: minmax(220px, 320px);
}

.stat-card {
    padding: 20px;
}

.stat-card span,
.info-card span,
.dashboard-stat-card span {
    display: block;

    color: var(--muted);

    font-size: 12px;

    margin-bottom: 8px;
}

.stat-card strong {
    font-size: 27px;
}


/* =====================================================
   DASHBOARD
===================================================== */

.dashboard-status-panel {
    margin-top: 25px;
}

.dashboard-status-heading {
    margin-bottom: 20px;
}

.dashboard-team-layout {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;
}

.team-status-row {
    margin: 22px 0;
}

.team-status-info {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    font-size: 13px;

    margin-bottom: 8px;
}

.team-status-info span {
    color: var(--muted);
}

.team-status-track {
    height: 8px;

    background: #242430;

    border-radius: 20px;

    overflow: hidden;
}

.team-status-fill {
    height: 100%;

    width: 0;

    border-radius: inherit;

    transition: width 0.35s ease;
}

.active-fill {
    background: var(--green);
}

.offperiod-fill {
    background: var(--yellow);
}

.whitelist-fill {
    background: var(--purple);
}

.dashboard-rank-heading {
    margin-bottom: 15px;
}

.dashboard-rank-heading h4 {
    margin-top: 4px;
}

.dashboard-rank-list {
    display: flex;

    flex-direction: column;

    gap: 7px;
}

.rank-row {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 9px 11px;

    background: #171720;

    border: 1px solid #22222d;

    border-radius: 7px;

    font-size: 12px;
}

.rank-row span {
    color: #c6c6d1;
}

.dashboard-section-heading {
    margin-top: 28px;
}

.dashboard-section-heading h3 {
    margin-top: 5px;
}

.dashboard-stat-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin-top: 15px;
}

.dashboard-stat-card {
    padding: 20px;
}

.dashboard-stat-card strong {
    font-size: 25px;
}
/* =====================================================
   STAFF CARDS
===================================================== */

.staff-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 16px;
}

.staff-card {
    background: var(--panel);

    border: 1px solid var(--border);

    border-radius: 13px;

    padding: 18px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.staff-card:hover {
    transform: translateY(-2px);

    border-color: #49495d;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.16);
}

.staff-card-top {
    display: flex;

    gap: 13px;

    align-items: center;

    margin-bottom: 17px;
}

.avatar,
.profile-avatar {
    display: grid;

    place-items: center;

    flex-shrink: 0;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            #4c1d95
        );

    font-weight: 800;
}

.avatar {
    width: 45px;
    height: 45px;

    border-radius: 10px;
}

.profile-avatar {
    width: 75px;
    height: 75px;

    border-radius: 16px;

    font-size: 22px;
}

.staff-rank {
    color: var(--muted);

    font-size: 12px;

    margin: 4px 0 7px;
}

.staff-card-details {
    border-top: 1px solid var(--border);

    padding-top: 12px;
}

.staff-detail-row {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 7px 0;

    font-size: 12px;
}

.staff-detail-label {
    color: var(--muted);
}

.staff-detail-value {
    text-align: right;

    word-break: break-word;
}

.card-actions,
.quick-actions {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin-top: 15px;
}

.leave-staff-card {
    border-color: rgba(239, 68, 68, 0.28);
}


/* =====================================================
   BADGES
===================================================== */

.status-badge,
.wipe-badge,
.result-pill {
    display: inline-block;

    border-radius: 20px;

    padding: 5px 9px;

    font-size: 11px;
    font-weight: 700;
}

.status-badge.active {
    background: rgba(34, 197, 94, 0.15);

    color: #4ade80;
}

.status-badge.off-period {
    background: rgba(234, 179, 8, 0.15);

    color: #facc15;
}

.status-badge.no-whitelist {
    background: rgba(59, 130, 246, 0.15);

    color: #60a5fa;
}

.status-badge.leave {
    background: rgba(239, 68, 68, 0.15);

    color: #f87171;
}

.wipe-badge.pending {
    background: rgba(234, 179, 8, 0.14);

    color: #facc15;
}

.wipe-badge.completed {
    background: rgba(34, 197, 94, 0.14);

    color: #4ade80;
}

.wipe-date {
    color: var(--muted);

    font-size: 11px;

    margin-top: 5px;
}

.result-pill {
    background: #242430;

    color: #c9c9d5;
}


/* =====================================================
   LISTS
===================================================== */

.simple-list,
.history-list,
.performance-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.simple-row,
.history-item,
.performance-row {
    background: var(--panel-2);

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 14px;
}

.simple-row,
.history-item {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;
}

.performance-row {
    display: grid;

    grid-template-columns: 2fr repeat(4, 1fr);

    gap: 15px;

    align-items: center;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.performance-row:hover {
    border-color: #47475b;

    background: #1c1c26;
}

.history-meta {
    color: var(--muted);

    font-size: 12px;

    line-height: 1.7;

    margin-top: 5px;
}

.empty-message,
.empty-state {
    color: var(--muted);

    background: var(--panel);

    border: 1px dashed var(--border);

    border-radius: 10px;

    padding: 22px;

    text-align: center;
}

.empty-state h3 {
    color: white;

    margin-bottom: 8px;
}


/* =====================================================
   WARNINGS
===================================================== */

.warning-type-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}

.warning-type-card {
    display: flex;

    flex-direction: column;

    gap: 6px;

    background: var(--panel);

    color: white;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 18px;

    text-align: left;
}

.warning-type-card span {
    color: var(--muted);

    font-size: 12px;
}

.warning-type-card.selected {
    border-color: var(--red);

    background: rgba(239, 68, 68, 0.08);
}

.warning-level {
    color: #f87171;

    font-weight: 800;
}


/* =====================================================
   PROFILE
===================================================== */

.profile-hero {
    display: flex;

    align-items: center;

    gap: 18px;

    margin: 20px 0;
}

.profile-name-line {
    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}

.profile-identity p {
    color: var(--muted);

    margin: 5px 0 9px;
}

.profile-tabs {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    border-bottom: 1px solid var(--border);

    margin-bottom: 20px;
}

.profile-tab {
    border: 0;

    color: var(--muted);

    background: transparent;

    padding: 12px;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.profile-tab:hover {
    color: white;
}

.profile-tab.active {
    color: white;

    border-bottom: 2px solid var(--purple);
}

.profile-tab-content {
    display: none;
}

.profile-tab-content.active-tab-content {
    display: block;
}

.profile-info-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;
}

.info-card {
    padding: 16px;
}

.info-card strong {
    word-break: break-word;
}

.notes-text {
    color: #d0d0da;

    line-height: 1.6;

    white-space: pre-wrap;
}

.back-btn {
    margin-bottom: 10px;
}


/* =====================================================
   MODAL
===================================================== */

.modal {
    position: fixed;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(0, 0, 0, 0.72);

    z-index: 100;
}

.modal.open {
    display: flex;
}

.modal-content {
    width: min(600px, 100%);

    max-height: 90vh;

    overflow-y: auto;

    background: #121219;

    border: 1px solid var(--border);

    border-radius: 14px;

    padding: 22px;
}

.modal-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 15px;
}
/* =====================================================
   LOGS
===================================================== */

.logs-live-indicator {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    border: 1px solid var(--border);

    border-radius: 20px;

    background: var(--panel);

    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.live-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--yellow);

    box-shadow:
        0 0 0 4px rgba(234, 179, 8, 0.08);
}

.logs-toolbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 10px;
}

.logs-tabs {
    display: flex;

    gap: 8px;

    flex-wrap: wrap;
}

.log-tab {
    border: 1px solid var(--border);

    background: var(--panel);

    color: var(--muted);

    padding: 11px 16px;

    border-radius: 9px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.log-tab:hover {
    color: white;

    border-color: #48485c;
}

.log-tab.active {
    color: white;

    background: var(--purple-soft);

    border-color: var(--purple);
}

.logs-filter-panel {
    margin-top: 15px;
}

.logs-filter-grid {
    display: grid;

    grid-template-columns:
        minmax(240px, 2fr)
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        auto;

    gap: 14px;

    align-items: end;
}

.logs-filter-grid label {
    margin: 0;
}

.logs-filter-button-wrap {
    padding-bottom: 1px;
}

.log-content {
    display: none;
}

.log-content.active-log-content {
    display: block;
}

.logs-table-wrapper {
    width: 100%;

    overflow-x: auto;
}

.logs-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 780px;
}

.logs-table thead th {
    padding: 11px 12px;

    border-bottom: 1px solid var(--border);

    color: var(--muted);

    text-align: left;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.5px;

    text-transform: uppercase;
}

.logs-table tbody td {
    padding: 14px 12px;

    border-bottom: 1px solid #22222d;

    color: #d8d8e1;

    font-size: 13px;
}

.logs-table tbody tr {
    transition: background 0.15s ease;
}

.logs-table tbody tr:hover {
    background: #171720;
}

.logs-table tbody tr:last-child td {
    border-bottom: 0;
}

.log-player {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.log-player strong {
    color: white;
}

.log-player span {
    color: var(--muted);

    font-size: 11px;
}

.log-weapon {
    display: inline-block;

    padding: 5px 8px;

    border-radius: 6px;

    background: #242430;

    color: #d8d8e2;

    font-size: 11px;
}

.log-kill-badge {
    display: inline-block;

    padding: 4px 7px;

    border-radius: 20px;

    background: rgba(239, 68, 68, 0.12);

    color: #f87171;

    font-size: 11px;
    font-weight: 700;
}

.log-aim-badge {
    display: inline-block;

    padding: 4px 7px;

    border-radius: 20px;

    background: rgba(234, 179, 8, 0.12);

    color: #facc15;

    font-size: 11px;
    font-weight: 700;
}

.log-join-badge {
    display: inline-block;

    padding: 4px 7px;

    border-radius: 20px;

    background: rgba(34, 197, 94, 0.12);

    color: #4ade80;

    font-size: 11px;
    font-weight: 700;
}

.logs-empty-row td {
    padding: 30px !important;

    color: var(--muted) !important;

    text-align: center !important;
}


/* =====================================================
   LEAVE STAFF
===================================================== */

.leave-wipe-stats {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px;

    max-width: 650px;

    margin-bottom: 20px;
}

.wipe-pending-card {
    border-color: rgba(234, 179, 8, 0.25);
}

.wipe-completed-card {
    border-color: rgba(34, 197, 94, 0.25);
}



/* =====================================================
   EVALUATIONS
===================================================== */

.evaluation-auto-date-note {
    margin: 4px 0 16px;
    color: var(--muted);
    font-size: 12px;
}

.evaluation-filter-panel {
    margin-bottom: 15px;
}

.evaluation-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 15px;
}

.evaluation-filter-grid label {
    margin: 0;
}

.evaluation-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.evaluation-groups {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.evaluation-rank-group {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #0d0d13;
}

.evaluation-rank-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    background: #15151d;
}

.evaluation-rank-heading h3 {
    margin: 4px 0 0;
    font-size: 17px;
}

.evaluation-member-list {
    display: flex;
    flex-direction: column;
}

.evaluation-member-card + .evaluation-member-card {
    border-top: 1px solid var(--border);
}

.evaluation-member-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    transition: background 0.2s ease;
}

.evaluation-member-header:hover,
.evaluation-member-card.open .evaluation-member-header {
    background: rgba(139, 92, 246, 0.08);
}

.evaluation-member-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.evaluation-member-main > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.evaluation-member-main strong {
    font-size: 15px;
}

.evaluation-member-main span:not(.evaluation-chevron) {
    color: var(--muted);
    font-size: 11px;
}

.evaluation-chevron {
    width: 18px;
    color: var(--purple);
    font-size: 12px;
    flex-shrink: 0;
}

.evaluation-member-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.evaluation-count-badge,
.evaluation-yes-badge,
.evaluation-no-badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}

.evaluation-count-badge {
    background: #242430;
    color: #d0d0da;
}

.evaluation-yes-badge {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

.evaluation-no-badge {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
}

.evaluation-member-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px 18px 48px;
    border-top: 1px solid var(--border);
    background: #101017;
}

.evaluation-history-item {
    align-items: flex-start;
}

.evaluation-profile-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1150px) {

    .staff-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .logs-filter-grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 900px) {

    .dashboard-team-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-stat-grid {
        grid-template-columns: 1fr;
    }

    .reports-filter-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 750px) {

    .sidebar {
        position: static;

        width: 100%;

        min-height: auto;
    }

    .app {
        display: block;
    }

    .main-content {
        width: 100%;

        margin-left: 0;

        padding: 20px;
    }

    .staff-grid,
    .stats-grid,
    .profile-info-grid,
    .dashboard-team-layout,
    .dashboard-stat-grid,
    .warning-type-grid,
    .leave-wipe-stats,
    .two-columns,
    .logs-filter-grid {
        grid-template-columns: 1fr;
    }

    .page-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .performance-row {
        grid-template-columns: 1fr;
    }

}
@media (max-width: 900px) {
    .evaluation-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .evaluation-member-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .evaluation-member-stats {
        justify-content: flex-start;
    }

    .evaluation-member-body {
        padding-left: 18px;
    }
}

@media (max-width: 600px) {
    .evaluation-filter-grid,
    .evaluation-summary-grid {
        grid-template-columns: 1fr;
    }

    .evaluation-profile-actions {
        width: 100%;
        justify-content: space-between;
    }
}



/* =====================================================
   PROFILE EVALUATIONS
===================================================== */

.profile-evaluation-filter-panel {
    margin: 18px 0;
    padding: 16px;
    background: #0d0d13;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.profile-evaluation-filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.profile-evaluation-filter-heading h4 {
    margin-top: 4px;
}

.profile-evaluation-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 15px;
}

.profile-evaluation-filter-grid label {
    margin: 0;
}

.profile-evaluation-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 20px;
}

.profile-evaluation-stat {
    padding: 15px 16px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.profile-evaluation-stat span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    margin-bottom: 7px;
}

.profile-evaluation-stat strong {
    font-size: 23px;
}

.profile-evaluation-stat.yes {
    border-color: rgba(34, 197, 94, 0.25);
}

.profile-evaluation-stat.yes strong {
    color: #4ade80;
}

.profile-evaluation-stat.no {
    border-color: rgba(239, 68, 68, 0.25);
}

.profile-evaluation-stat.no strong {
    color: #f87171;
}

.profile-evaluation-weeks {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profile-evaluation-week {
    overflow: hidden;
    background: #0d0d13;
    border: 1px solid var(--border);
    border-radius: 11px;
}

.profile-evaluation-week.open {
    border-color: #3b3b4d;
}

.profile-evaluation-week-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 17px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    transition: background 0.2s ease;
}

.profile-evaluation-week-header:hover,
.profile-evaluation-week.open
.profile-evaluation-week-header {
    background: rgba(139, 92, 246, 0.08);
}

.profile-evaluation-week-title {
    display: flex;
    align-items: center;
    gap: 11px;
}

.profile-evaluation-week-title > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-evaluation-week-chevron {
    width: 18px;
    color: var(--purple);
    font-size: 11px;
}

.profile-evaluation-week-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.profile-evaluation-week-body {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--border);
    background: #101017;
}

.profile-evaluation-card {
    padding: 15px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.profile-evaluation-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 13px;
}

.profile-evaluation-promote {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}

.profile-evaluation-promote.yes {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.14);
}

.profile-evaluation-promote.no {
    color: #f87171;
    background: rgba(239, 68, 68, 0.14);
}

.profile-evaluation-date {
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
}

.profile-evaluation-text-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.profile-evaluation-text-block {
    min-width: 0;
    padding: 13px;
    background: #12121a;
    border: 1px solid #272733;
    border-radius: 8px;
}

.profile-evaluation-text-block > span {
    display: block;
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.profile-evaluation-text-block.positives {
    border-left: 3px solid var(--green);
}

.profile-evaluation-text-block.observations {
    border-left: 3px solid var(--purple);
}

.profile-evaluation-text-block p {
    color: #d7d7e0;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 760px) {
    .profile-evaluation-filter-grid,
    .profile-evaluation-summary-grid,
    .profile-evaluation-text-grid {
        grid-template-columns: 1fr;
    }

    .profile-evaluation-week-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-evaluation-week-stats {
        justify-content: flex-start;
    }
}


/* =====================================================
   DELCHAR
===================================================== */

.delchar-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.delchar-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 26px 0 12px;
}

.delchar-history-header h3 {
    margin-top: 5px;
}

.delchar-compact-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.delchar-compact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 46px;
    padding: 9px 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.delchar-compact-info {
    display: flex;
    align-items: center;
    gap: 26px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.delchar-compact-field {
    color: #d7d7e0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.delchar-compact-field strong {
    color: var(--purple);
    margin-right: 5px;
}

.delchar-delete-btn {
    flex-shrink: 0;
    border: 1px solid rgba(239, 68, 68, 0.28);
    border-radius: 6px;
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.10);
    color: #f87171;
    font-size: 11px;
    font-weight: 700;
}

.delchar-delete-btn:hover {
    background: rgba(239, 68, 68, 0.18);
}

@media (max-width: 1000px) {
    .delchar-form-grid {
        grid-template-columns: 1fr;
    }

    .delchar-compact-info {
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
        overflow: visible;
    }

    .delchar-compact-field {
        white-space: normal;
        overflow: visible;
    }
}

@media (max-width: 650px) {
    .delchar-compact-row {
        align-items: stretch;
        flex-direction: column;
    }

    .delchar-delete-btn {
        align-self: flex-end;
    }
}


/* =====================================================
   STAFF REWARDS
===================================================== */

.staff-rewards-period-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 15px;
}

.staff-rewards-builder-heading,
.staff-rewards-history-heading,
.staff-reward-period-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.staff-rewards-builder-heading {
    margin: 22px 0 10px;
}

.staff-rewards-builder-heading h4,
.staff-rewards-history-heading h3 {
    margin-top: 5px;
}

.staff-rewards-builder {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.staff-reward-builder-row {
    display: grid;
    grid-template-columns: 42px minmax(200px, 2fr) minmax(120px, .7fr) 100px auto;
    gap: 12px;
    align-items: end;
    padding: 10px 12px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 9px;
}

.staff-reward-builder-row label {
    margin: 0;
}

.staff-reward-builder-number {
    display: grid;
    place-items: center;
    min-height: 42px;
    color: var(--purple);
    font-weight: 800;
}

.staff-reward-given-builder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
}

.staff-reward-given-builder input,
.staff-reward-history-given input {
    width: 18px;
    height: 18px;
    accent-color: var(--purple);
}

.staff-reward-remove-btn,
.staff-reward-delete-btn {
    border: 1px solid rgba(239, 68, 68, .28);
    border-radius: 7px;
    padding: 10px 11px;
    background: rgba(239, 68, 68, .10);
    color: #f87171;
    font-size: 11px;
    font-weight: 700;
}

.staff-rewards-history-heading {
    margin: 28px 0 12px;
}

.staff-reward-period-card {
    margin: 0 0 12px;
}

.staff-reward-period-top {
    margin-bottom: 15px;
}

.staff-reward-period-top h3 {
    margin: 5px 0 0;
}

.staff-reward-table-head,
.staff-reward-history-row {
    display: grid;
    grid-template-columns: 55px minmax(180px, 2fr) minmax(100px, .7fr) minmax(130px, .8fr);
    gap: 12px;
    align-items: center;
}

.staff-reward-table-head {
    padding: 9px 12px;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.staff-reward-history-row {
    min-height: 48px;
    padding: 9px 12px;
    border-bottom: 1px solid #22222d;
}

.staff-reward-history-row:last-child {
    border-bottom: 0;
}

.staff-reward-history-number {
    color: var(--purple);
    font-weight: 800;
}

.staff-reward-history-name {
    font-weight: 700;
}

.staff-reward-history-value {
    font-weight: 800;
}

.staff-reward-history-given {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.staff-reward-history-given span {
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 650px) {
    .staff-rewards-period-grid {
        grid-template-columns: 1fr;
    }

    .staff-reward-builder-row {
        grid-template-columns: 36px 1fr;
    }

    .staff-reward-builder-row > *:not(.staff-reward-builder-number) {
        grid-column: 2;
    }

    .staff-reward-table-head,
    .staff-reward-history-row {
        grid-template-columns: 35px minmax(120px, 1fr) 70px 105px;
        min-width: 430px;
    }

    .staff-reward-period-card {
        overflow-x: auto;
    }
}


/* =====================================================
   STAFF REWARDS - ACCORDION PERIODS
===================================================== */

.staff-reward-period-card {
    padding: 0;
    overflow: hidden;
}

.staff-reward-period-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.18s ease;
}

.staff-reward-period-summary:hover {
    background: rgba(139, 92, 246, 0.05);
}

.staff-reward-period-summary:focus-visible {
    outline: 1px solid var(--purple);
    outline-offset: -1px;
}

.staff-reward-period-summary-main,
.staff-reward-period-summary-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.staff-reward-period-summary-main {
    min-width: 0;
}

.staff-reward-period-summary-main h3 {
    margin: 5px 0 0;
}

.staff-reward-period-arrow {
    display: grid;
    place-items: center;
    width: 22px;
    flex: 0 0 22px;
    color: var(--purple);
    font-size: 12px;
}

.staff-reward-period-summary-actions {
    margin-left: auto;
}

.staff-reward-given-count {
    min-width: 120px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-2);
    text-align: center;
}

.staff-reward-given-count span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.staff-reward-given-count strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 14px;
}

.staff-reward-period-details {
    display: none;
    padding: 0 20px 14px;
    border-top: 1px solid var(--border);
}

.staff-reward-period-card.is-open .staff-reward-period-details {
    display: block;
}

.staff-reward-period-card.is-open .staff-reward-period-summary {
    background: rgba(139, 92, 246, 0.035);
}

.staff-reward-period-details .staff-reward-table-head {
    padding-top: 14px;
}

@media (max-width: 700px) {
    .staff-reward-period-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-reward-period-summary-actions {
        width: calc(100% - 37px);
        margin-left: 37px;
        justify-content: space-between;
    }
}


/* =====================================================
   DELCHAR FILTERS
===================================================== */

.delchar-filter-panel {
    margin-top: 20px;
    margin-bottom: 22px;
}

.delchar-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(180px, 0.7fr);
    gap: 15px;
}

.delchar-filter-grid label {
    margin: 0;
}

@media (max-width: 850px) {
    .delchar-filter-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   DELCHAR FILTERS - COMPACT ONE ROW
===================================================== */

.delchar-filter-panel {
    padding: 14px 16px;
    margin: 14px 0 18px;
}

.delchar-filter-panel .panel-title {
    margin-bottom: 10px;
}

.delchar-filter-panel .panel-title h3 {
    margin-bottom: 0;
    font-size: 15px;
}

.delchar-filter-grid {
    display: grid;
    grid-template-columns:
        minmax(170px, 1fr)
        minmax(190px, 1fr)
        minmax(150px, 190px);
    gap: 10px;
    align-items: end;
}

.delchar-filter-grid label {
    margin: 0;
}

.delchar-filter-grid input {
    padding: 9px 10px;
}

@media (min-width: 851px) {
    .delchar-filter-panel .panel-title {
        float: right;
        margin: 18px 0 0 10px;
    }

    .delchar-filter-panel .panel-title > div {
        display: none;
    }

    .delchar-filter-grid {
        padding-right: 125px;
    }

    .delchar-filter-panel::after {
        content: "";
        display: block;
        clear: both;
    }
}

@media (max-width: 850px) {
    .delchar-filter-grid {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   AUTHENTICATION
===================================================== */

.auth-gate {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, rgba(139, 92, 246, 0.12), transparent 38%),
        var(--bg);
}

.auth-card {
    width: min(430px, 100%);
    padding: 30px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.auth-brand {
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
}

.auth-brand h1 {
    margin: 5px 0;
    color: var(--purple);
    font-size: 32px;
}

.auth-brand p,
.auth-subtitle {
    color: var(--muted);
    line-height: 1.55;
}

.auth-screen h2 {
    margin-bottom: 7px;
}

.auth-subtitle {
    margin-bottom: 18px;
    font-size: 13px;
}

.auth-link-btn {
    width: 100%;
    margin-top: 14px;
    padding: 8px;
    border: 0;
    background: transparent;
    color: #b9a5ff;
}

.auth-link-btn:hover {
    color: white;
}

.auth-message {
    margin-bottom: 18px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #d8d8e2;
    background: var(--panel-2);
    font-size: 13px;
    line-height: 1.45;
}

.auth-message.error {
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.auth-message.success {
    border-color: rgba(34, 197, 94, 0.35);
    color: #86efac;
}

.auth-message.info {
    border-color: rgba(59, 130, 246, 0.35);
    color: #93c5fd;
}

.auth-status-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 14px;
    background: var(--purple-soft);
    color: #c4b5fd;
    font-size: 23px;
}

.sidebar-account {
    margin-top: 22px;
    padding: 14px 12px 0;
    border-top: 1px solid var(--border);
}

.sidebar-account span,
.sidebar-account strong {
    display: block;
    word-break: break-word;
}

.sidebar-account span {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.sidebar-account strong {
    margin: 5px 0 10px;
    font-size: 11px;
}

.sidebar-account .secondary-btn {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
}


/* =====================================================
   ADMIN USER MANAGEMENT
===================================================== */

.settings-description {
    color: var(--muted);
    margin-top: 6px;
    line-height: 1.5;
}

.user-management-legend {
    display: flex;
    gap: 10px 22px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--muted);
    font-size: 12px;
}

.user-management-legend strong {
    color: var(--text);
}

.user-management-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-account-card {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.8fr) minmax(170px, 1fr) auto;
    gap: 14px;
    align-items: end;
    padding: 16px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.user-account-identity {
    align-self: center;
    min-width: 0;
}

.user-account-identity strong {
    display: block;
    overflow-wrap: anywhere;
}

.user-account-meta {
    color: var(--muted);
    font-size: 11px;
    margin-top: 6px;
}

.user-account-card label {
    margin: 0;
}

.user-account-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 1px;
}

.account-status {
    display: inline-block;
    margin-top: 7px;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}

.account-status.pending {
    color: #facc15;
    background: rgba(234, 179, 8, 0.14);
}

.account-status.approved {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.14);
}

.account-status.rejected {
    color: #f87171;
    background: rgba(239, 68, 68, 0.14);
}

@media (max-width: 1050px) {
    .user-account-card {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .user-account-card {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   SIDEBAR - DARK SUBTLE SCROLLBAR
===================================================== */

.sidebar {
    scrollbar-width: thin;
    scrollbar-color: #30303b #0d0d13;
}

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: #0d0d13;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #30303b;
    border: 2px solid #0d0d13;
    border-radius: 999px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #3b3b48;
}

.sidebar::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}


/* VOODOO HOME */
.voodoo-welcome-hero{position:relative;overflow:hidden;min-height:330px;display:flex;align-items:center;justify-content:space-between;gap:35px;padding:48px;background:linear-gradient(120deg,rgba(139,92,246,.13),rgba(17,17,24,.96) 48%),var(--panel);border:1px solid var(--border);border-radius:18px}
.voodoo-welcome-content{max-width:720px;position:relative;z-index:2}
.voodoo-welcome-content h2{margin:9px 0 14px;font-size:clamp(38px,5vw,62px);line-height:1;letter-spacing:-2px}
.voodoo-welcome-content h2 span{color:var(--purple)}
.voodoo-welcome-content p{max-width:650px;color:#b4b4c2;font-size:15px;line-height:1.8}
.voodoo-welcome-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.voodoo-welcome-tags span{padding:7px 11px;color:#c9b9ff;background:rgba(139,92,246,.09);border:1px solid rgba(139,92,246,.22);border-radius:20px;font-size:11px;font-weight:700}
.voodoo-mark{display:grid;place-items:center;flex:0 0 180px;width:180px;height:180px;border:1px solid rgba(139,92,246,.28);border-radius:36px;background:linear-gradient(145deg,rgba(139,92,246,.20),rgba(139,92,246,.03));color:var(--purple);font-size:92px;font-weight:900;box-shadow:0 20px 70px rgba(0,0,0,.22);transform:rotate(4deg)}
.voodoo-home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:20px}
.voodoo-home-card{margin:0;min-height:180px}.voodoo-home-card h3{margin:7px 0 10px}
.voodoo-home-card p,.voodoo-note-panel p{color:var(--muted);line-height:1.7;font-size:13px}
.voodoo-note-panel{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:15px}.voodoo-note-panel h3{margin:6px 0 7px}
@media(max-width:950px){.voodoo-home-grid{grid-template-columns:1fr}.voodoo-mark{flex-basis:130px;width:130px;height:130px;font-size:68px}}
@media(max-width:700px){.voodoo-welcome-hero{min-height:0;padding:28px 22px}.voodoo-mark{display:none}.voodoo-note-panel{align-items:flex-start;flex-direction:column}}


/* =====================================================
   ROLE / RANK PERMISSIONS
===================================================== */

.permission-hidden {
    display: none !important;
}

/* VOODOO HOME LOGO */
.voodoo-logo-wrap{display:grid;place-items:center;flex:0 0 280px;width:280px;min-height:280px;position:relative;z-index:2}
.voodoo-home-logo{display:block;width:100%;max-width:280px;height:auto;object-fit:contain;filter:drop-shadow(0 20px 35px rgba(0,0,0,.38))}
@media(max-width:950px){.voodoo-logo-wrap{flex-basis:220px;width:220px;min-height:220px}.voodoo-home-logo{max-width:220px}}
@media(max-width:700px){.voodoo-welcome-hero{flex-direction:column-reverse;text-align:center}.voodoo-welcome-content p{margin-left:auto;margin-right:auto}.voodoo-welcome-tags{justify-content:center}.voodoo-logo-wrap{width:190px;min-height:190px;flex-basis:auto}.voodoo-home-logo{max-width:190px}}

/* SIDEBAR BRAND LOGO */
.brand .sidebar-voodoo-logo {
    display: block;
    width: 145px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: -8px 0 4px 0;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .30));
}

/* COMPACT SIDEBAR LOGO SPACING */
.sidebar .brand {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
    margin-bottom: 10px !important;
}

.brand .sidebar-voodoo-logo {
    margin-top: -14px !important;
    margin-bottom: -10px !important;
}

.sidebar nav,
.sidebar .nav {
    margin-top: 0 !important;
}

/* EXTRA COMPACT SIDEBAR HEADER */
.sidebar .brand {
    padding-top: 0 !important;
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
}

.brand .sidebar-voodoo-logo {
    margin-top: -28px !important;
    margin-bottom: -24px !important;
}

.sidebar nav,
.sidebar .nav {
    margin-top: -6px !important;
}

/* SIDEBAR LOGO - NO OVERLAP */
.sidebar .brand {
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 8px !important;
}

.brand .sidebar-voodoo-logo {
    transform: none !important;
    margin-top: -20px !important;
    margin-bottom: -10px !important;
}

.sidebar nav,
.sidebar .nav {
    margin-top: 0 !important;
}

/* LOGIN / AUTH VOODOO LOGO */
.auth-logo-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.auth-voodoo-logo {
    display: block;
    width: 190px;
    max-width: 72%;
    height: auto;
    object-fit: contain;
    margin: -14px auto -4px;
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .34));
}


/* =====================================================
   GLOBAL LOG SEARCH
===================================================== */

.global-logs-search-panel {
    border-color: rgba(139, 92, 246, 0.35);
    background:
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.10), transparent 34%),
        var(--panel);
}

.global-logs-search-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.global-logs-search-head h3 {
    margin: 5px 0 7px;
}

.global-logs-search-head p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.global-search-count {
    flex-shrink: 0;
    padding: 7px 11px;
    border-radius: 20px;
    background: var(--purple-soft);
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 800;
}

.global-logs-search-grid {
    display: grid;
    grid-template-columns: minmax(300px, 2fr) minmax(180px, 1fr) minmax(145px, .7fr) minmax(145px, .7fr);
    gap: 14px;
    align-items: end;
}

.global-logs-search-grid label {
    margin: 0;
}

.global-logs-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.logs-category-browser {
    margin: 28px 0 20px;
}

.logs-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.log-category-card {
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.log-category-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 13px;
}

.log-category-card-head strong {
    font-size: 13px;
}

.log-category-card-head span {
    min-width: 25px;
    padding: 3px 7px;
    border-radius: 20px;
    background: #242430;
    color: var(--muted);
    text-align: center;
    font-size: 10px;
    font-weight: 800;
}

.log-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.log-category-chip {
    border: 1px solid #30303e;
    border-radius: 7px;
    background: #181821;
    color: #b7b7c5;
    padding: 7px 9px;
    font-size: 11px;
    text-align: left;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.log-category-chip:hover {
    color: white;
    border-color: var(--purple);
    background: var(--purple-soft);
}

.global-logs-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logs-api-placeholder {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 130px;
    padding: 22px;
    border: 1px dashed #383849;
    border-radius: 11px;
    background: #0e0e14;
}

.logs-api-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;
    background: var(--purple-soft);
    color: #c4b5fd;
    font-size: 27px;
}

.logs-api-placeholder strong {
    display: block;
    margin-bottom: 7px;
}

.logs-api-placeholder p {
    color: #c4c4cf;
    font-size: 13px;
    margin-bottom: 5px;
}

.logs-api-placeholder span {
    color: var(--muted);
    font-size: 11px;
}

.global-log-result-card {
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-2);
}

.global-log-result-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 12px;
}

.global-log-result-top > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.global-log-category {
    color: #c4b5fd;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.global-log-demo-badge {
    padding: 4px 7px;
    border-radius: 20px;
    background: rgba(234, 179, 8, .12);
    color: #facc15;
    font-size: 10px;
    font-weight: 800;
}

.global-log-result-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: var(--muted);
    font-size: 12px;
}

.global-log-result-details b {
    color: #d8d8e1;
}

@media (max-width: 1100px) {
    .global-logs-search-grid {
        grid-template-columns: 1fr 1fr;
    }

    .logs-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .global-logs-search-head {
        flex-direction: column;
    }

    .global-logs-search-grid,
    .logs-category-grid {
        grid-template-columns: 1fr;
    }
}