/* ============================================================
   Ticket System — Player-facing CSS
   Works with the site's [data-theme="dark|light"] system
   ============================================================ */

.tickets-container {
    padding: 40px 0 60px;
}

.tickets-heading {
    color: rgb(220, 211, 202);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 32px;
    text-align: center;
    margin-bottom: 32px;
}

/* ---- State boxes (login, banned, error, empty) ---- */
.tickets-state-box {
    text-align: center;
    padding: 60px 20px;
    background: rgba(255,255,255,0.04);
    border-radius: 12px;
    color: rgb(198, 192, 186);
    max-width: 500px;
    margin: 0 auto;
}
.tickets-state-box h3 { color: rgb(220, 211, 202); margin-bottom: 10px; }
.tickets-state-box p  { margin-bottom: 20px; opacity: 0.8; }
.tickets-state-icon   { font-size: 48px; margin-bottom: 16px; }
.tickets-state-banned { border: 1px solid rgba(237,66,69,0.4); }
.tickets-state-error  { border: 1px solid rgba(254,231,92,0.4); }

/* ---- Top bar (back button + title) ---- */
.tickets-top-bar {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tickets-top-bar h3        { margin: 0; color: rgb(220, 211, 202); font-size: 20px; }
.tickets-top-bar .btn      { flex-shrink: 0; margin-top: 3px; }
.tickets-detail-title      { flex: 1; }
.tickets-detail-meta       { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.ticket-meta-text          { font-size: 13px; color: rgb(110, 111, 107); }

/* ---- List bar ---- */
.tickets-list-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.tickets-list-bar h3 { margin: 0; color: rgb(220, 211, 202); font-size: 20px; }

/* ---- Ticket list ---- */
.tickets-list       { display: flex; flex-direction: column; gap: 8px; }
.ticket-card-link   { text-decoration: none; color: inherit; display: block; }
.ticket-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 18px;
    transition: background 0.15s, border-color 0.15s;
}
.ticket-card:hover          { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.15); }
.ticket-card-left           { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.ticket-card-text           { min-width: 0; }
.ticket-card-title          { display: block; font-weight: 600; color: rgb(220, 211, 202); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-card-sub            { display: block; font-size: 12px; color: rgb(110, 111, 107); margin-top: 3px; }
.ticket-card-arrow          { color: rgb(110, 111, 107); font-size: 18px; margin-left: 12px; flex-shrink: 0; }

/* ---- Status badges ---- */
.ticket-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ts-open        { background: rgba(87,242,135,0.18); color: #57F287; border: 1px solid rgba(87,242,135,0.3); }
.ts-in-progress { background: rgba(254,231,92,0.18); color: #FEE75C; border: 1px solid rgba(254,231,92,0.3); }
.ts-resolved    { background: rgba(88,101,242,0.18); color: #7289DA; border: 1px solid rgba(88,101,242,0.3); }
.ts-rejected    { background: rgba(237,66,69,0.18);  color: #ED4245; border: 1px solid rgba(237,66,69,0.3); }
.ts-closed      { background: rgba(153,170,181,0.18); color: #99AAB5; border: 1px solid rgba(153,170,181,0.3); }

/* ---- Alert ---- */
.tickets-alert {
    background: rgba(237,66,69,0.15);
    border: 1px solid rgba(237,66,69,0.4);
    color: #ED4245;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* ---- Form card ---- */
.tickets-form-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 24px;
}
.tickets-reply-card { margin-top: 20px; }

.tickets-field  { margin-bottom: 18px; }
.tickets-label  { display: block; font-size: 13px; font-weight: 600; color: rgb(180, 175, 170); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.tickets-input  {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 10px 14px;
    color: rgb(220, 211, 202);
    font-size: 14px;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.tickets-input:focus  { outline: none; border-color: rgba(255,255,255,0.3); }
.tickets-input option { background: #1e1e1e; }
.tickets-textarea     { resize: vertical; min-height: 100px; font-family: inherit; }

/* ---- Thread ---- */
.ticket-thread       { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.ticket-msg          { border-radius: 10px; padding: 16px 18px; }
.ticket-msg-player   { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); }
.ticket-msg-staff    { background: rgba(88,101,242,0.1); border: 1px solid rgba(88,101,242,0.25); }

.ticket-msg-head     { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ticket-msg-avatar   { width: 28px; height: 28px; border-radius: 50%; }
.ticket-msg-name     { font-weight: 600; color: rgb(220, 211, 202); font-size: 14px; }
.ticket-msg-time     { font-size: 12px; color: rgb(110, 111, 107); margin-left: auto; }
.ticket-staff-badge  {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    background: rgba(88,101,242,0.3); color: #7289DA;
    padding: 2px 8px; border-radius: 10px;
}
.ticket-msg-body     { color: rgb(198, 192, 186); font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

/* ---- Closed notice ---- */
.tickets-closed-note {
    text-align: center;
    padding: 16px;
    color: rgb(110, 111, 107);
    font-size: 14px;
    margin-top: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

/* ============================================================
   Light theme overrides — sage green palette
   ============================================================ */
[data-theme="light"] .tickets-heading          { color: #1a2a1a; }
[data-theme="light"] .tickets-state-box        { background: #eef6ee; border: 1px solid #b0ccb0; color: #3d5c3d; }
[data-theme="light"] .tickets-state-box h3     { color: #1a2a1a; }
[data-theme="light"] .ticket-card              { background: #f4faf4; border-color: #b0ccb0; }
[data-theme="light"] .ticket-card:hover        { background: #e8f5e8; border-color: #90ba90; }
[data-theme="light"] .ticket-card-title        { color: #1a2a1a; }
[data-theme="light"] .ticket-card-sub          { color: #3d5c3d; }
[data-theme="light"] .ticket-card-arrow        { color: #3d5c3d; }
[data-theme="light"] .tickets-form-card        { background: #f4faf4; border-color: #b0ccb0; }
[data-theme="light"] .tickets-label            { color: #3d5c3d; }
[data-theme="light"] .tickets-input            { background: #eef6ee; border-color: #b0ccb0; color: #1a2a1a; }
[data-theme="light"] .tickets-input:focus      { border-color: #3d8c3d; }
[data-theme="light"] .tickets-input option     { background: #eef6ee; }
[data-theme="light"] .ticket-msg-player        { background: #f4faf4; border-color: #b0ccb0; }
[data-theme="light"] .ticket-msg-staff         { background: rgba(61,140,61,0.06); border-color: rgba(61,140,61,0.22); }
[data-theme="light"] .ticket-msg-name          { color: #1a2a1a; }
[data-theme="light"] .ticket-msg-time          { color: #3d5c3d; }
[data-theme="light"] .ticket-msg-body          { color: #1a2a1a; }
[data-theme="light"] .tickets-closed-note      { color: #3d5c3d; background: #eef6ee; }
[data-theme="light"] .tickets-list-bar h3      { color: #1a2a1a; }
[data-theme="light"] .tickets-top-bar h3       { color: #1a2a1a; }
[data-theme="light"] .ticket-meta-text         { color: #3d5c3d; }