/**
 * /assets/css/admin-sections.css
 *
 * Purpose:  Shared glassmorphism styles for all admin CRUD sections
 *           (Classes, Races, Titles, EXP, Equipment).
 *           Matches GM mode card design pattern.
 * Deps:     app.css (variables)
 * Load:     index.php
 * Version:  1.1.0 – Click-to-Edit: admin-edit-card selected state + form transition
 */

/* ============================================================================
   ADMIN SECTION CARD (replaces card bg-black border-secondary)
   ============================================================================ */
.admin-section-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-section-card:hover {
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* --- Header --- */
.admin-section-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.02);
}
.admin-section-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.9);
}
.admin-section-card__title i {
    font-size: 1rem;
    opacity: 0.7;
}
.admin-section-card__subtitle {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
}

/* --- Body --- */
.admin-section-card__body {
    padding: 1rem;
}

/* ============================================================================
   ADMIN DATA TABLE (glassmorphism table)
   ============================================================================ */
.admin-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}
.admin-data-table thead th {
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}
.admin-data-table tbody td {
    padding: 0.55rem 0.75rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    vertical-align: middle;
}
.admin-data-table tbody tr:last-child td {
    border-bottom: none;
}
.admin-data-table tbody tr {
    transition: background 0.15s ease;
}
.admin-data-table tbody tr:hover {
    background: rgba(255,255,255,0.03);
}

/* --- Table cell helpers --- */
.admin-data-table .cell-id {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}
.admin-data-table .cell-name {
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}
.admin-data-table .cell-icon {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    font-family: 'SFMono-Regular', Consolas, monospace;
}
.admin-data-table .cell-count {
    font-weight: 600;
    color: rgba(255,255,255,0.6);
}
.admin-data-table .cell-actions {
    text-align: right;
    white-space: nowrap;
}

/* --- Color swatch --- */
.admin-color-swatch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.admin-color-swatch__dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.admin-color-swatch__code {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    font-family: 'SFMono-Regular', Consolas, monospace;
}

/* ============================================================================
   ADMIN FORM AREA (add/edit forms)
   ============================================================================ */
.admin-form-area {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 0.6rem;
}
.admin-form-area__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.75rem;
}
.admin-form-area__title i {
    color: var(--accent, #5dd6c9);
    font-size: 0.8rem;
}

/* --- Glass input style --- */
.admin-input-glass {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.82rem !important;
}
.admin-input-glass::placeholder {
    color: rgba(255,255,255,0.3) !important;
}
.admin-input-glass:focus {
    border-color: rgba(93,214,201,0.4) !important;
    box-shadow: 0 0 0 2px rgba(93,214,201,0.1) !important;
}

/* --- Admin Edit Card (click-to-edit) --- */
.admin-edit-card {
    transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-edit-card.--selected {
    border-color: var(--accent, #5dd6c9) !important;
    box-shadow: 0 0 12px rgba(93,214,201,0.25);
}

/* --- Form area edit-mode transition --- */
.admin-form-area {
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* ============================================================================
   ADMIN ITEM CARDS (card-based list alternative to tables)
   ============================================================================ */
.admin-item-card {
    position: relative;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 0.6rem;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-item-card:hover {
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.admin-item-card__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.admin-item-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.admin-item-card__info {
    flex: 1;
    min-width: 0;
}
.admin-item-card__name {
    font-weight: 600;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.9);
}
.admin-item-card__meta {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
}
.admin-item-card__actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}
.admin-item-card__actions .btn {
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    border-radius: 0.45rem;
}

/* ============================================================================
   LEFT BORDER SEMANTICS (admin sections)
   ============================================================================ */
.admin-section-card--classes   { border-left: 3px solid rgba(176,140,255,0.4); }
.admin-section-card--races     { border-left: 3px solid rgba(93,214,201,0.4); }
.admin-section-card--titles    { border-left: 3px solid rgba(255,193,7,0.35); }
.admin-section-card--exp       { border-left: 3px solid rgba(77,163,255,0.35); }
.admin-section-card--equipment { border-left: 3px solid rgba(255,107,107,0.4); }

.admin-section-card--classes .admin-section-card__title i   { color: rgb(176,140,255); }
.admin-section-card--races .admin-section-card__title i     { color: var(--accent, #5dd6c9); }
.admin-section-card--titles .admin-section-card__title i    { color: var(--gold, #ffd36b); }
.admin-section-card--exp .admin-section-card__title i       { color: var(--exp, #4da3ff); }
.admin-section-card--equipment .admin-section-card__title i { color: var(--danger, #ff6b6b); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 767.98px) {
    .admin-section-card__body {
        padding: 0.75rem;
    }
    .admin-data-table thead th,
    .admin-data-table tbody td {
        padding: 0.4rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .admin-section-card,
    .admin-item-card {
        transition: none;
    }
}