/* =========================================================
   MODE — Admin styles (extends style.css)
   ========================================================= */

.admin-body { background: #08080A; }

/* Auth screen ============================================ */
.admin-body--auth {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 20px;
    background:
        radial-gradient(circle at 20% 20%, rgba(198,255,61,0.10), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(198,255,61,0.05), transparent 40%),
        #08080A;
}
.admin-auth__card {
    width: 100%;
    max-width: 440px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 42px;
}
.admin-auth__card .logo { margin-bottom: 30px; }
.admin-auth__card h1 { font-size: 2rem; margin-bottom: 6px; }
.admin-auth__card p { margin: 0 0 24px; }
.admin-auth__card .field { margin-bottom: 18px; }
.admin-auth__hint {
    margin-top: 28px !important;
    padding: 16px;
    background: var(--bg);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    font-size: 12.5px;
    color: var(--text-mute) !important;
    line-height: 1.6;
}
.admin-auth__hint b { color: var(--accent); font-weight: 600; }

/* Admin header =========================================== */
.admin-header {
    background: rgba(10,10,10,0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 50;
}
.admin-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.admin-header__right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.admin-user { font-size: 13px; color: var(--text-dim); }
.admin-user b { color: var(--text); font-weight: 600; }
.logo em { font-style: normal; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-left: 6px; }

/* Admin main ============================================= */
.admin-main { padding: 50px 0 100px; }
.admin-wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.admin-page-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 30px; flex-wrap: wrap;
    margin-bottom: 40px;
}
.admin-page-head h1 { font-size: 2.4rem; margin: 8px 0 0; }

.admin-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-pill {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 20px;
    min-width: 110px;
}
.stat-pill b {
    display: block;
    font-family: var(--f-display);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}
.stat-pill span {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-mute);
}

/* Filters ================================================ */
.admin-filters {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 26px;
}
.admin-chip {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color var(--e-fast), border-color var(--e-fast), background var(--e-fast);
}
.admin-chip span {
    background: var(--panel);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    color: var(--text-mute);
}
.admin-chip:hover { color: var(--text); border-color: var(--text-dim); }
.admin-chip.is-active { background: var(--accent); color: #0A0A0A; border-color: var(--accent); }
.admin-chip.is-active span { background: rgba(0,0,0,0.15); color: #0A0A0A; }

/* Table ================================================== */
.admin-table-wrap {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: auto;
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}
.admin-table th {
    text-align: left;
    padding: 18px 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-mute);
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
}
.admin-table td {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text-dim);
    vertical-align: top;
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr:hover td { background: rgba(255,255,255,0.015); }

.cell-name { display: flex; flex-direction: column; gap: 3px; }
.cell-name b { color: var(--text); font-weight: 600; }
.cell-name a { color: var(--accent); font-size: 13px; }
.cell-name span { font-size: 12px; color: var(--text-mute); }

.cell-date { font-size: 12px; color: var(--text-mute); white-space: nowrap; }

.cell-details { margin-top: 10px; }
.cell-details summary { font-size: 12px; color: var(--accent); cursor: pointer; list-style: none; }
.cell-details summary::before { content: "▸ "; }
.cell-details[open] summary::before { content: "▾ "; }
.cell-details p {
    margin: 10px 0 0;
    padding: 12px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    max-width: 380px;
}

.status-form { margin: 0; }
.status-select {
    background: var(--bg);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 8px 30px 8px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 10px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    letter-spacing: 0.02em;
}
.status-select--pending    { color: #FFC857; border-color: rgba(255,200,87,0.4); }
.status-select--confirmed  { color: #C6FF3D; border-color: rgba(198,255,61,0.4); }
.status-select--completed  { color: #7CE38B; border-color: rgba(124,227,139,0.4); }
.status-select--cancelled  { color: #FF7A7A; border-color: rgba(255,122,122,0.4); }

.admin-empty {
    padding: 80px 30px;
    text-align: center;
    background: var(--panel);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}
.admin-empty h3 { margin: 0 0 8px; }

@media (max-width: 720px) {
    .admin-header__inner, .admin-wrap { padding: 0 20px; }
    .admin-auth__card { padding: 30px 26px; }
    .admin-page-head h1 { font-size: 1.8rem; }
    .stat-pill { min-width: 90px; padding: 12px 16px; }
    .stat-pill b { font-size: 1.4rem; }
}