/* Penta-fecta styles — Modern Light with Pops of Logo Color */
:root {
    --bg: #F8FAFC;           /* light page background */
    --fg: #0F172A;           /* dark slate text */
    --primary: #27AE60;      /* vibrant green from logo */
    --accent:  #F2C94C;      /* gold accent from logo */
    --card: #FFFFFF;         /* white cards */
    --muted: #64748B;        /* soft gray text */
    --success: #16A34A;
    --warning: #F59E0B;
    --danger: #DC2626;
    --border: rgba(15, 23, 42, 0.08);
    --shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
}

* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--fg);
}

/* Container */
.container {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* Navigation */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border);
}
.nav a {
    color: var(--fg);
    text-decoration: none;
    margin-left: 16px;
    opacity: .85;
    transition: color .2s ease, opacity .2s ease;
}
.nav a:hover {
    opacity: 1;
    color: var(--primary);
}

.logo { height: 56px; border-radius: 12px; }

/* Hero */
.hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
    align-items: center;
    padding: 60px 0;
}
.hero .card {
    background: var(--card);
    padding: 28px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.badge {
    display: inline-block;
    background: var(--accent);
    color: #000;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: .35px;
}
.h1 {
    font-size: 42px;
    line-height: 1.15;
    margin: 12px 0 10px;
    font-weight: 800;
    color: var(--primary);
}
.lead {
    font-size: 18px;
    color: var(--muted);
}
.cta {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(39, 174, 96, 0.2);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn.secondary {
    background: #fff;
    color: var(--fg);
    border: 1px solid var(--accent);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(39, 174, 96, 0.3);
    background: #219653;
}

/* Sections */
.section {
    padding: 28px;
    margin: 28px auto;
    background: var(--card);
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.section h2 {
    margin: 0 0 12px;
    font-size: 26px;
    color: var(--primary);
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.card-simple {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    box-shadow: var(--shadow);
}
.kv {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
    font-size: 14px;
    color: var(--muted);
}
.kv b { color: var(--fg); }

/* FAQ */
.faq details {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0;
    box-shadow: var(--shadow);
    transition: all .2s ease;
}
.faq summary {
    font-weight: 700;
    cursor: pointer;
    color: var(--primary);
}
.faq p { margin: 10px 0 0; color: var(--muted); }

/* Footer */
.footer {
    padding: 24px;
    color: var(--muted);
    font-size: 14px;
    text-align: center;
}

/* Forms */
.form label {
    display: block;
    font-weight: 600;
    margin: 12px 0 6px;
}
.form input[type=text],
.form input[type=email],
.form textarea,
.form input[type=password],
.form select {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--fg);
}
.form textarea { min-height: 140px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .actions { margin-top: 14px; display: flex; gap: 10px; }

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.table th, .table td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 14px;
}
.table th {
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-size: 12px;
}
.table tr:hover td { background: #F9FAFB; }

/* Status pills */
.status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.status-new { background: #D1FAE5; color: #065F46; }
.status-in_process { background: #FEF9C3; color: #92400E; }
.status-awaiting_user { background: #EDE9FE; color: #6D28D9; }
.status-closed { background: #E2E8F0; color: #334155; }
.status-resolved { background: #DCFCE7; color: #166534; }

/* Alerts */
.alert {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
}
.alert.ok { background: #ECFDF5; border-color: #A7F3D0; }
.alert.warn { background: #FFFBEB; border-color: #FDE68A; }
.alert.err { background: #FEF2F2; border-color: #FCA5A5; }

/* Mobile */
@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; }
    .form .row { grid-template-columns: 1fr; }
    .kv { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
}
/* === Players table responsiveness === */
.table-container{
    width:100%;
    overflow-x:auto;            /* graceful horizontal scroll if needed */
    -webkit-overflow-scrolling: touch;
}

.table.compact th,
.table.compact td{
    padding:10px 8px;           /* slightly tighter */
    vertical-align: top;
}

/* Let long tokens (UUIDs, filenames) wrap instead of blowing width */
.players-table td:nth-child(2),  /* PLAYER ID */
.players-table td:nth-child(4){  /* AVATAR */
    word-break: break-all;
    white-space: normal;
    line-height: 1.25;
    font-size: 13px;
}

/* Fix column widths so the table fits within the card */
.players-table{ table-layout: fixed; }

/* ID */
.players-table th:nth-child(1),
.players-table td:nth-child(1){ width:48px; }

/* PLAYER ID */
.players-table th:nth-child(2),
.players-table td:nth-child(2){ width:220px; }

/* NAME */
.players-table th:nth-child(3),
.players-table td:nth-child(3){ width:140px; }

/* AVATAR */
.players-table th:nth-child(4),
.players-table td:nth-child(4){ width:120px; }

/* TERMS VER. */
.players-table th:nth-child(5),
.players-table td:nth-child(5){ width:110px; }

/* TERMS AGREED */
.players-table th:nth-child(6),
.players-table td:nth-child(6){ width:160px; }

/* PENTA-FECTAS */
.players-table th:nth-child(7),
.players-table td:nth-child(7){ width:100px; text-align:right; }

/* BEST STREAK */
.players-table th:nth-child(8),
.players-table td:nth-child(8){ width:100px; text-align:right; }

/* TOTAL */
.players-table th:nth-child(9),
.players-table td:nth-child(9){ width:90px; text-align:right; }

/* CORRECT */
.players-table th:nth-child(10),
.players-table td:nth-child(10){ width:90px; text-align:right; }

/* ACCURACY */
.players-table th:nth-child(11),
.players-table td:nth-child(11){ width:90px; }

/* ADMIN OVRD */
.players-table th:nth-child(12),
.players-table td:nth-child(12){ width:110px; }

/* CREATED / UPDATED */
.players-table th:nth-child(13),
.players-table td:nth-child(13),
.players-table th:nth-child(14),
.players-table td:nth-child(14){ width:160px; }

/* ACTIONS */
.players-table th:nth-child(15),
.players-table td:nth-child(15){ width:140px; }

/* On small screens, let the table scroll and trim paddings more */
@media (max-width: 900px){
    .table.compact th, .table.compact td{ padding:8px 6px; }
}