:root{
  --font-base:14px; --font-sm:12.5px; --font-xs:11.5px;
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --pad-xxs:4px; --pad-xs:6px; --pad-sm:8px; --pad-md:12px; --pad-lg:16px; --pad-xl:20px;
  --row-h:34px;
  --border:#2f2f2f; --header:#262626; --hover:#232323; --alt:#1f1f1f;
  --bg:#121212; --bg-elev:#171717; --text:#eaeaea; --text-dim:#bdbdbd; --text-muted:#9a9a9a;
  --brand:#2ecc71; --brand-2:#1abc9c; --warn:#f5a623; --danger:#ff4d4f; --ok:#2ecc71; --info:#3ea6ff;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font:var(--font-base)/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial}
/* compact headings */
h1{font-size:34px;letter-spacing:2px;margin:0 0 10px}
h2{font-size:24px;letter-spacing:.5px;margin:0 0 8px}
h3{font-size:20px;margin:0 0 8px}
h4{font-size:16px;margin:0 0 6px;color:var(--text-dim)}
a{color:var(--info);text-decoration:none} a:hover{text-decoration:underline}

/* Layout (sidebar + topbar) */
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;background:var(--bg)}
.admin-sidebar{background:var(--header);border-right:1px solid var(--border);padding:var(--pad-lg) var(--pad-md);position:sticky;top:0;align-self:start;height:100vh;overflow:auto}
.admin-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.admin-brand .title{font-weight:800;letter-spacing:.8px}
.admin-nav{display:grid;gap:6px}
.admin-nav .section{font-size:var(--font-xs);text-transform:uppercase;color:var(--text-muted);margin:10px 0 4px}
.admin-nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;color:var(--text);background:transparent;border-radius:var(--radius-sm);border:1px solid transparent}
.admin-nav a:hover{background:var(--hover)}
.admin-nav a.is-active{background:var(--alt);border-color:var(--border)}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;background:var(--bg-elev);border-bottom:1px solid var(--border);padding:10px var(--pad-lg)}
.admin-crumbs{display:flex;gap:8px;align-items:center;color:var(--text-muted)}
.admin-crumbs .sep{opacity:.5}
.admin-content{padding:var(--pad-lg)}

/* Cards */
.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--pad-lg);margin:0 0 var(--pad-lg)}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.card-title{font-weight:800}
.card-subtitle{color:var(--text-muted);font-size:var(--font-sm)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--pad-lg)}

/* Buttons / badges */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--radius-sm);padding:8px 12px;border:1px solid var(--border);background:var(--alt);color:var(--text)}
.btn:hover{background:var(--hover)}
.btn--primary{background:var(--brand);color:#032;border-color:transparent} .btn--primary:hover{filter:brightness(.95)}
.badge{display:inline-block;border-radius:999px;padding:2px 8px;font-size:var(--font-xs);border:1px solid var(--border);background:var(--alt)}
.badge--info{background:var(--hover);color:var(--text-dim)}

/* Tables (leaderboard/compact look) */
.themed-table{width:100%;border:1px solid var(--border);border-radius:8px;border-collapse:separate;border-spacing:0;background:transparent;font-size:var(--font-sm);table-layout:auto}
.themed-table thead th{position:sticky;top:0;z-index:1;background:var(--header);font-weight:700;padding:8px 10px;white-space:nowrap;text-align:left;border-bottom:1px solid var(--border)}
.themed-table tbody td{padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;vertical-align:middle}
.themed-table tbody tr:nth-child(even){background:var(--alt)} .themed-table tbody tr:hover{background:var(--hover)}


/* ==== Auth layout (no sidebar) ==== */
.auth-shell {
    min-height: 100vh;
    background: var(--bg);
    display: grid;
    place-items: center;
    padding: 24px
}

.auth-center {
    width: min(460px, 92%);
}

/* flashes on auth */
.auth-flashes {
    margin: 0 0 12px
}

.auth-alert {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--alt);
    font-size: var(--font-sm)
}

.auth-alert--success {
    border-color: var(--ok);
}

.auth-alert--error {
    border-color: var(--danger);
}

/* auth card */
.auth-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px
}

.auth-card__header {
    display: grid;
    gap: 6px;
    text-align: center;
    margin-bottom: 12px
}

.auth-card__header h1 {
    font-size: 18px;
    letter-spacing: .6px;
    margin: 0
}

.auth-card__header .muted {
    color: var(--text-muted);
    font-size: var(--font-sm);
    margin: 0
}

.auth-card__footer {
    display: flex;
    justify-content: center;
    margin-top: 10px
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--brand);
    justify-self: center
}

/* form controls (sharper, compact) */
.form--stack {
    display: grid;
    gap: 8px
}

.label {
    font-size: 12px;
    color: var(--text-dim)
}

.input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #101010;
    color: var(--text);
}

.input:focus {
    outline: none;
    border-color: #3a3a3a;
    box-shadow: 0 0 0 2px rgba(55, 214, 122, .15)
}

.btn.full {
    width: 100%
}

.link-muted {
    color: var(--text-muted);
    text-decoration: none
}

.link-muted:hover {
    color: var(--text)
}
/* --- Responsive tables: desktop = table, mobile = stacked cards --- */
.responsive-table {
    width: 100%;
    font-size: var(--font-sm);
}

.responsive-table .muted {
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .responsive-table thead {
        display: none;
    }

    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
    }

    .responsive-table tr {
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px;
        margin-bottom: 12px;
    }

    .responsive-table td {
        border: none;
        padding: 6px 0;
    }

    .responsive-table td::before {
        content: attr(data-label);
        display: block;
        font-size: var(--font-xs);
        color: var(--text-muted);
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: .2px;
    }

    .responsive-table td[data-label="Action"]>form {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .wrap {
        white-space: normal !important;
    }

    .clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
/* Allow certain cells to wrap (desktop + mobile) */
.themed-table td.wrap {
    white-space: normal !important;
    word-break: break-word;
}

.clamp-2,
.clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-2 {
    -webkit-line-clamp: 2;
}

/* ~2 lines */
.clamp-3 {
    -webkit-line-clamp: 3;
}

/* Title: single-line with ellipsis */
.title-clip {
    max-width: 320px;
    /* adjust if you want wider */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description: allow wrapping; clamp to 3 lines on desktop */
.wrap {
    white-space: normal !important;
    word-break: break-word;
}

.clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Admin inline form: neat grid */
.admin-inline-form {
    display: grid;
    grid-template-columns: 150px 150px 1fr auto;
    gap: 8px;
    align-items: center;
}

/* Mobile stacking for table + form */
@media (max-width: 900px) {
    .admin-inline-form {
        grid-template-columns: 1fr;
    }

    .title-clip {
        max-width: none;
        white-space: normal;
    }

    .clamp-3 {
        -webkit-line-clamp: unset;
    }

    /* show full description on mobile */
}

/* --- Table spacing / buffer --- */
.themed-table {
    border-collapse: separate;
    /* allow spacing */
    border-spacing: 0;
    /* keep borders tight, use cell padding instead */
}

.themed-table th,
.themed-table td {
    padding: 10px 16px;
    /* buffer inside cells */
}

/* Make long text wrap (never cut off) */
.themed-table td.wrap {
    white-space: normal !important;
    word-break: break-word;
}

/* Title: keep one line w/ ellipsis on desktop; full on mobile */
.title-clip {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Admin inline form grid */
.admin-inline-form {
    display: grid;
    grid-template-columns: 150px 150px 1fr auto;
    gap: 8px;
    align-items: center;
}

/* Mobile: stacked cards + full description */
@media (max-width: 900px) {
    .responsive-table thead {
        display: none;
    }

    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block;
        width: 100%;
    }

    .responsive-table tr {
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 14px;
        /* card padding/buffer */
        margin-bottom: 14px;
    }

    .responsive-table td {
        border: none;
        padding: 6px 0;
    }

    .responsive-table td::before {
        content: attr(data-label);
        display: block;
        font-size: var(--font-xs);
        color: var(--text-muted);
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: .2px;
    }

    .admin-inline-form {
        grid-template-columns: 1fr;
    }

    .title-clip {
        max-width: none;
        white-space: normal;
    }

    /* allow multi-line title on mobile */
}
/* --- Collapsible table rows --- */
.table-accordion {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table-accordion th,
.table-accordion td {
    padding: 10px 14px;
}

.table-accordion tr.summary {
    cursor: pointer;
}

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

.table-accordion tr.details td {
    padding: 0;
    /* outer padding provided by .details-box */
    border-top: 1px solid var(--border);
}

.details-box {
    padding: 14px;
    background: var(--bg-elev);
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.details-grid .full {
    grid-column: 1 / -1;
}

.meta {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.chev {
    display: inline-block;
    transition: transform .2s ease;
    margin-right: 8px;
}

.chev.rot {
    transform: rotate(90deg);
}

.badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 18px;
}

.badge.dev {
    background: #3498db;
    color: #fff;
}

.badge.issue {
    background: #f39c12;
    color: #fff;
}

.badge.down {
    background: #e74c3c;
    color: #fff;
}

.admin-inline {
    display: grid;
    grid-template-columns: 160px 160px 1fr auto;
    gap: 8px;
    align-items: center;
}

.input {
    background: #1e1e1e;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    padding: 8px 10px;
    width: 100%;
}
.admin-sidebar img {
    display: block;
    max-width: 180px;
    /* shrink width to fit nicely in sidebar */
    height: auto;
    margin: 0 auto 1rem auto;
    /* center + spacing */
    filter: brightness(0) invert(1);
    /* keep white version visible on dark bg */
}

.admin-brand {
    display: flex;
    flex-direction: column;
    /* stack vertically */
    align-items: center;
    /* center horizontally */
    justify-content: center;
    padding: 1rem 0;
}

.admin-brand img {
    max-width: 160px;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
    margin-bottom: 0.5rem;
    /* space between logo and title */
}

.admin-brand .title {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    opacity: 0.9;
    letter-spacing: 0.5px;
}
@media (max-width: 900px) {
    .details-grid {
        grid-template-columns: 1fr;
    }

    .admin-inline {
        grid-template-columns: 1fr;
    }
}