/* =========================================
   LIFESTEAL ONLINE — SHARED DASHBOARD
   ========================================= */

:root {
    color-scheme: dark;

    --bg: #101216;
    --sidebar: #15181e;
    --panel: #1b1f26;
    --panel-light: #242930;
    --line: #343a44;
    --text: #f0f2f6;
    --muted: #9ba5b4;
    --red: #f04452;
    --red-dark: #a91e32;

    font-family: Inter, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, Arial, sans-serif;
    line-height: 1.5;
}

a {
    color: #ff7c88;
    text-decoration: none;
}

a:hover {
    color: #ffb3bb;
}

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

button {
    cursor: pointer;
}

img {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

/* =========================================
   APPLICATION LAYOUT
   ========================================= */

.app-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;

    position: sticky;
    top: 0;

    height: 100vh;
    min-width: 0;
    padding: 25px 17px;

    background: var(--sidebar);
    border-right: 1px solid var(--line);
}

.brand,
.logo-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 8px;
    text-align: center;
}

.server-logo {
    display: block;
    width: 100%;
    max-width: 195px;
    height: auto;
    max-height: 105px;
    object-fit: contain;
}

.brand small,
.logo-brand small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 10px;

    color: #c4ccd8;
    font-size: 13px;
    font-weight: 700;
}

.nav-link:hover {
    background: #262c35;
    color: white;
}

.nav-link.active,
.nav-link[aria-current="page"] {
    background: #3a2029;
    border-color: #67313e;
    color: #ffb4bf;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.identity {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 15px;
}

.identity img {
    width: 42px;
    height: 42px;
    border-radius: 9px;
    image-rendering: pixelated;
}

.identity strong,
.identity small {
    display: block;
}

.identity strong {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.identity small {
    color: var(--muted);
    font-size: 11px;
}

.main-area {
    min-width: 0;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px;
}

/* Compatibility with existing page layouts */

.main-content,
.page-content {
    min-width: 0;
    padding: 32px;
}

.content {
    min-width: 0;
}

/* =========================================
   PAGE HEADER
   ========================================= */

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 29px;

    background:
        radial-gradient(
            circle at 95% 10%,
            rgba(210, 38, 65, .2),
            transparent 40%
        ),
        linear-gradient(135deg, #26212a, #191d24);

    border: 1px solid #49313a;
    border-radius: 17px;
}

.eyebrow {
    display: block;
    margin-bottom: 8px;

    color: #aeb6c3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.eyebrow.red {
    color: var(--red);
}

.hero h1 {
    margin: 0;
    font-size: clamp(25px, 3vw, 35px);
    letter-spacing: -1px;
}

.hero p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 140px;
    padding: 15px 20px;

    background: rgba(10, 12, 16, .45);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.hero-stat small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

.hero-stat strong {
    font-size: 34px;
}

.hero-stat span {
    color: var(--muted);
    font-size: 11px;
}

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

.content-panel {
    min-width: 0;
    margin-top: 24px;
    padding: 24px;

    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 15px;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 20px;
}

.panel-heading h2 {
    margin: 0;
    font-size: 20px;
}

.panel-heading p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
}

h1,
h2,
h3 {
    color: var(--text);
}

p {
    overflow-wrap: anywhere;
}

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

label {
    display: block;
    margin-bottom: 7px;
    color: #d4dbe5;
    font-size: 13px;
    font-weight: 600;
}

input,
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 11px 13px;

    background: #11151b;
    border: 1px solid #414955;
    border-radius: 9px;

    color: var(--text);
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(240, 68, 82, .13);
}

input::placeholder,
textarea::placeholder {
    color: #778292;
}

form {
    min-width: 0;
}

form > p {
    margin: 0 0 16px;
}

form > p label {
    display: block;
}

form > p input,
form > p select,
form > p textarea {
    margin-top: 6px;
}

.staff-form-grid > div {
    min-width: 0;
    margin-bottom: 17px;
}

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

.button,
button[type="submit"],
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    width: auto;
    min-height: 41px;
    padding: 10px 17px;

    background: #343b45;
    border: 1px solid #4a535f;
    border-radius: 9px;

    color: white;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.button:hover,
button[type="submit"]:hover {
    background: #46505c;
    color: white;
}

.button.primary,
button.primary,
button[type="submit"].primary {
    background: linear-gradient(135deg, #ef4352, #ae2538);
    border-color: #d23b4d;
    color: white;
}

.button.primary:hover,
button.primary:hover {
    background: #f04a5b;
}

.button.secondary,
button.secondary {
    background: #343b45;
}

button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* =========================================
   TABLES AND CASES
   ========================================= */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th,
td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

tr:hover td {
    background: rgba(255, 255, 255, .025);
}

.case-search {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

.search-label {
    font-size: 12px;
}

.empty-state {
    padding: 28px;
    color: var(--muted);
    text-align: center;
}

.page-footer {
    margin-top: 30px;
    padding: 20px 0;

    color: #798391;
    font-size: 11px;
    text-align: center;
}

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

@media (max-width: 900px) {

    .app-shell {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .sidebar {
        padding: 18px 11px;
    }

    .main-area,
    .main-content,
    .page-content {
        padding: 22px;
    }

}

@media (max-width: 700px) {

    .app-shell {
        display: block;
    }

    .sidebar {
        position: relative;
        height: auto;
        gap: 14px;
        padding: 14px;
    }

    .server-logo {
        max-width: 145px;
        max-height: 75px;
    }

    .side-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .nav-link {
        padding: 9px 11px;
    }

    .sidebar-footer {
        margin-top: 0;
    }

    .main-area,
    .main-content,
    .page-content {
        padding: 16px;
    }

    .hero {
        flex-direction: column;
        align-items: stretch;
        padding: 20px;
    }

    .hero-stat {
        align-items: flex-start;
    }

    .content-panel {
        padding: 16px;
    }

    .panel-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    table {
        display: block;
        overflow-x: auto;
    }

}
/* ==========================================
   STAFF REQUESTS
   ========================================== */

.request-filters {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 190px 170px auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
    margin-bottom: 18px;
    background: #171b21;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.request-filters label {
    margin-top: 0;
}

.request-filter-button {
    display: flex;
    align-items: flex-end;
}

.request-filter-button button {
    width: auto;
}

.request-list {
    display: grid;
    gap: 10px;
}

.request-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 16px;
    color: #fff;
    text-decoration: none;
    background: #242930;
    border: 1px solid #363d46;
    border-radius: 12px;
    transition: background .15s, border-color .15s, transform .15s;
}

.request-row:hover {
    background: #2d333b;
    border-color: #a84457;
    color: #fff;
    transform: translateY(-1px);
}

.request-main {
    min-width: 0;
    flex: 1;
}

.request-row-top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.request-row-top strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 15px;
}

.request-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px;
    color: #a1abb9;
    font-size: 12px;
}

.request-main p {
    margin: 7px 0 0;
    color: #aeb6c3;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.request-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.request-badge.large {
    padding: 7px 15px;
    font-size: 12px;
}

.request-badge.open {
    background: #263f31;
    border: 1px solid #47785b;
    color: #a8e8bb;
}

.request-badge.closed {
    background: #363a40;
    border: 1px solid #555d68;
    color: #c5ccd5;
}

.request-form-panel {
    max-width: 900px;
}

.request-form-panel form > input,
.request-form-panel form > select,
.request-form-panel form > textarea {
    display: block;
    width: 100%;
}

.request-form-panel textarea {
    resize: vertical;
    min-height: 170px;
}

.request-attachment-box {
    margin-top: 18px;
    padding: 15px 17px;
    background: #20252c;
    border: 1px solid #353d47;
    border-radius: 10px;
}

.request-attachment-box strong {
    display: block;
    margin-bottom: 3px;
}

.request-attachment-box p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.request-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.staff-alert {
    margin: 18px 0;
    padding: 14px 17px;
    border-radius: 10px;
    font-weight: 600;
}

.staff-alert.success {
    background: #20392b;
    border: 1px solid #3d7455;
    color: #a8e4ba;
}

.staff-alert.error {
    background: #482630;
    border: 1px solid #914255;
    color: #ffb3c1;
}

.request-person {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 10px 0 22px;
}

.request-person strong,
.request-person span {
    display: block;
}

.request-person strong {
    font-size: 17px;
}

.request-person span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
}

.request-message {
    margin-top: 20px;
    padding: 18px;
    background: #242930;
    border: 1px solid var(--line);
    border-radius: 12px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.request-replies {
    display: grid;
    gap: 12px;
}

.request-reply {
    margin: 0;
    padding: 15px;
}

.request-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.request-reply-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.request-reply-user strong,
.request-reply-user small {
    display: block;
}

.request-reply-user strong {
    overflow-wrap: anywhere;
}

.request-reply-user small {
    color: var(--muted);
    font-size: 11px;
}

.reply-role {
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 999px;
    background: #303740;
    color: #c8d0db;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.reply-role.management {
    background: #482630;
    color: #ffb0bf;
}

.request-reply-message {
    padding-left: 52px;
    color: #dce1e8;
    overflow-wrap: anywhere;
}

.request-files {
    display: grid;
    gap: 9px;
}

.request-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 15px;
    background: #242930;
    border: 1px solid #363d46;
    border-radius: 10px;
}

.request-file strong,
.request-file small {
    display: block;
    overflow-wrap: anywhere;
}

.request-file small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

.form-help {
    margin: 8px 0 13px;
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 900px) {

    .request-filters {
        grid-template-columns: 1fr 1fr;
    }

    .request-filter-button {
        align-items: stretch;
    }

    .request-filter-button button {
        width: 100%;
    }

}

@media (max-width: 650px) {

    .request-filters {
        grid-template-columns: 1fr;
    }

    .request-row {
        align-items: flex-start;
    }

    .request-row > .head {
        width: 42px;
        height: 42px;
    }

    .request-row-top {
        flex-wrap: wrap;
    }

    .request-meta {
        gap: 5px;
    }

    .request-row .row-arrow {
        display: none;
    }

    .request-form-actions {
        flex-direction: column-reverse;
    }

    .request-form-actions .button {
        width: 100%;
    }

    .request-reply-header {
        align-items: flex-start;
    }

    .request-reply-message {
        padding-left: 0;
    }

    .request-file {
        align-items: flex-start;
        flex-direction: column;
    }

    .request-file .button {
        width: 100%;
    }

}


/* =========================================================
   CASE DIRECTORY — LAYOUT REPAIR
   ========================================================= */

.case-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.case-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: #171b20;
    border: 1px solid #343a43;
    border-radius: 12px;
    color: #f5f6f8;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}

.case-row:hover {
    background: #252a32;
    border-color: #e84b60;
}

.case-row .head {
    display: block;
    width: 52px;
    height: 52px;
    min-width: 52px;
    object-fit: cover;
    image-rendering: pixelated;
    border-radius: 7px;
}

.case-row .head.small {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 5px;
}

.case-player {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.case-player strong {
    color: #f5f6f8;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.case-player span {
    color: #f16a7d;
    font-size: 12px;
    font-weight: 600;
}

.case-staff {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.case-staff > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.case-staff strong {
    color: #f5f6f8;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.case-staff small {
    color: #a5afbf;
    font-size: 11px;
}

@media (max-width: 650px) {
    .case-row {
        flex-wrap: wrap;
        padding: 14px;
        gap: 12px;
    }

    .case-player {
        flex-basis: calc(100% - 70px);
    }

    .case-staff {
        margin-left: 64px;
        flex-basis: calc(100% - 64px);
    }
}