/**
 * TELANODE Admin Common Styles
 * /assets/css/tn-admin.css
 * 
 * Styles partagés pour les pages d'administration COLLAB.
 * Préfixe: tna- (TelaNode Admin)
 * Scope: .tn-admin (à ajouter sur le conteneur racine à côté de .tn-fragment)
 * 
 * Utilise EXCLUSIVEMENT les variables --tn-* (pas de couleurs en dur)
 * Dark mode géré automatiquement via [data-theme="dark"]
 * 
 * Usage:
 *   <div class="tn-fragment tn-admin">
 *       ...
 *   </div>
 */

/* ============================================
   VARIABLES LOCALES ADMIN
   Définies dans le scope .tn-admin pour les badges
   ============================================ */

.tn-admin {
    --tna-badge-success-bg: var(--tn-success-light);
    --tna-badge-success-text: var(--tn-success);
    --tna-badge-danger-bg: var(--tn-danger-light);
    --tna-badge-danger-text: var(--tn-danger);
    --tna-badge-warning-bg: var(--tn-warning-light);
    --tna-badge-warning-text: var(--tn-warning);
    --tna-badge-info-bg: var(--tn-info-light);
    --tna-badge-info-text: var(--tn-info);
    --tna-badge-accent-bg: var(--tn-accent-light);
    --tna-badge-accent-text: var(--tn-accent);
}

[data-theme="dark"] .tn-admin {
    /* En dark mode, on utilise des fonds plus subtils */
    --tna-badge-success-bg: rgba(34, 197, 94, 0.15);
    --tna-badge-success-text: var(--tn-success);
    --tna-badge-danger-bg: rgba(239, 68, 68, 0.15);
    --tna-badge-danger-text: var(--tn-danger);
    --tna-badge-warning-bg: rgba(245, 158, 11, 0.15);
    --tna-badge-warning-text: var(--tn-warning);
    --tna-badge-info-bg: rgba(6, 182, 212, 0.15);
    --tna-badge-info-text: var(--tn-info);
    --tna-badge-accent-bg: rgba(59, 130, 246, 0.15);
    --tna-badge-accent-text: var(--tn-accent);
}

/* ============================================
   FILTRES
   Layout horizontal avec labels au-dessus
   ============================================ */

.tn-admin .tna-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.tn-admin .tna-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tn-admin .tna-filter-group label {
    font-size: 11px;
    color: var(--tn-text-3);
    font-weight: 500;
}

.tn-admin .tna-filter-group input,
.tn-admin .tna-filter-group select {
    min-width: 140px;
}

.tn-admin .tna-filter-group.stretch {
    flex: 1;
    min-width: 180px;
}

/* ============================================
   FORMULAIRES (modals)
   ============================================ */

.tn-admin .tna-form-group {
    margin-bottom: 12px;
}

.tn-admin .tna-form-group:last-child {
    margin-bottom: 0;
}

.tn-admin .tna-form-group > label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--tn-text-2);
}

.tn-admin .tna-form-group .required {
    color: var(--tn-danger);
}

.tn-admin .tna-form-group small,
.tn-admin .tna-form-group .tna-help {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--tn-text-3);
}

.tn-admin .tna-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tn-admin .tna-form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

/* Checkbox / Radio inline */
.tn-admin .tna-checkbox,
.tn-admin .tna-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--tn-text-1);
}

.tn-admin .tna-checkbox input,
.tn-admin .tna-radio input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--tn-accent);
}

/* ============================================
   BADGES
   ============================================ */

.tn-admin .tna-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--tn-radius);
    font-size: 11px;
    font-weight: 500;
    background: var(--tn-bg-tertiary);
    color: var(--tn-text-2);
}

/* Status badges */
.tn-admin .tna-badge.success,
.tn-admin .tna-badge.create,
.tn-admin .tna-badge.active { 
    background: var(--tna-badge-success-bg); 
    color: var(--tna-badge-success-text); 
}

.tn-admin .tna-badge.info,
.tn-admin .tna-badge.view { 
    background: var(--tna-badge-info-bg); 
    color: var(--tna-badge-info-text); 
}

.tn-admin .tna-badge.warning,
.tn-admin .tna-badge.pending { 
    background: var(--tna-badge-warning-bg); 
    color: var(--tna-badge-warning-text); 
}

.tn-admin .tna-badge.danger,
.tn-admin .tna-badge.delete,
.tn-admin .tna-badge.error { 
    background: var(--tna-badge-danger-bg); 
    color: var(--tna-badge-danger-text); 
}

.tn-admin .tna-badge.accent,
.tn-admin .tna-badge.update,
.tn-admin .tna-badge.login { 
    background: var(--tna-badge-accent-bg); 
    color: var(--tna-badge-accent-text); 
}

.tn-admin .tna-badge.secondary,
.tn-admin .tna-badge.inactive { 
    background: var(--tn-bg-tertiary); 
    color: var(--tn-text-3); 
}

/* ============================================
   INFO BOX / ALERT
   ============================================ */

.tn-admin .tna-info-box {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: var(--tn-radius);
    font-size: 12px;
}

.tn-admin .tna-info-box i {
    margin-top: 2px;
    flex-shrink: 0;
}

.tn-admin .tna-info-box.info {
    background: var(--tna-badge-info-bg);
    color: var(--tna-badge-info-text);
}

.tn-admin .tna-info-box.success {
    background: var(--tna-badge-success-bg);
    color: var(--tna-badge-success-text);
}

.tn-admin .tna-info-box.warning {
    background: var(--tna-badge-warning-bg);
    color: var(--tna-badge-warning-text);
}

.tn-admin .tna-info-box.danger {
    background: var(--tna-badge-danger-bg);
    color: var(--tna-badge-danger-text);
}

/* ============================================
   TABLE UTILITIES
   ============================================ */

.tn-admin .tna-table-wrap {
    overflow-x: auto;
}

/* Card body sans padding (pour tables pleine largeur) */
.tn-admin .tna-card-flush {
    padding: 0;
}

.tn-admin .tna-col-date {
    white-space: nowrap;
    font-family: var(--tn-font-mono);
    font-size: 12px;
}

.tn-admin .tna-col-mono {
    font-family: var(--tn-font-mono);
    font-size: 11px;
}

.tn-admin .tna-col-center {
    text-align: center;
}

.tn-admin .tna-col-right {
    text-align: right;
}

.tn-admin .tna-col-actions {
    white-space: nowrap;
    text-align: right;
}

.tn-admin .tna-col-truncate {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ligne cliquable */
.tn-admin .tna-clickable {
    cursor: pointer;
}

.tn-admin .tna-clickable:hover {
    background: var(--tn-bg-tertiary);
}

/* ============================================
   STATS / FOOTER
   ============================================ */

.tn-admin .tna-stats {
    font-size: 12px;
    color: var(--tn-text-3);
}

/* ============================================
   ACTIONS BAR
   ============================================ */

.tn-admin .tna-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* ============================================
   PAGINATION
   ============================================ */

.tn-admin .tna-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.tn-admin .tna-page-info {
    font-size: 12px;
    color: var(--tn-text-3);
}

/* ============================================
   DETAIL GRID (pour modals détail)
   ============================================ */

.tn-admin .tna-detail-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px 12px;
    font-size: 13px;
}

.tn-admin .tna-detail-label {
    color: var(--tn-text-3);
    font-weight: 500;
}

.tn-admin .tna-detail-value {
    color: var(--tn-text-1);
    word-break: break-word;
}

/* JSON viewer */
.tn-admin .tna-json-view {
    background: var(--tn-bg-tertiary);
    padding: 12px;
    border-radius: var(--tn-radius);
    font-family: var(--tn-font-mono);
    font-size: 12px;
    white-space: pre-wrap;
    max-height: 200px;
    overflow-y: auto;
    color: var(--tn-text-1);
}

/* ============================================
   ACTIONS GROUP (boutons inline)
   ============================================ */

.tn-admin .tna-actions-group {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

/* ============================================
   RESPONSIVE LABEL (visible uniquement en mobile)
   ============================================ */

.tn-admin .tna-responsive-label {
    display: none;
}

@media (max-width: 768px) {
    .tn-admin .tna-responsive-label {
        display: inline;
    }
}

/* ============================================
   RIGHTS CONTAINER (checkbox list scrollable)
   ============================================ */

.tn-admin .tna-rights-container {
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    padding: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.tn-admin .tna-rights-group {
    margin-bottom: 12px;
}

.tn-admin .tna-rights-group:last-child {
    margin-bottom: 0;
}

.tn-admin .tna-rights-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--tn-accent);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--tn-border-light);
}

.tn-admin .tna-rights-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 8px;
}

/* ============================================
   SECTION DIVIDER
   ============================================ */

.tn-admin .tna-section {
    border-top: 1px solid var(--tn-border);
    padding-top: 12px;
    margin-top: 12px;
}

.tn-admin .tna-section-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* ============================================
   CODE GRID (pour affichage droits en colonnes)
   ============================================ */

.tn-admin .tna-code-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px 16px;
    padding-left: 12px;
}

.tn-admin .tna-code-grid code {
    font-size: 11px;
}

/* ============================================
   APP GROUP (pour droits groupés par app)
   ============================================ */

.tn-admin .tna-app-group {
    margin-bottom: 10px;
}

.tn-admin .tna-app-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--tn-accent);
    margin-bottom: 4px;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.tn-admin .tna-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--tn-text-3);
}

.tn-admin .tna-empty i {
    display: block;
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.tn-admin .tna-empty p {
    margin: 0;
    font-size: 13px;
}

/* ============================================
   TABS
   ============================================ */

.tn-admin .tna-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 2px solid var(--tn-border-light);
}

.tn-admin .tna-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--tn-text-3);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}

.tn-admin .tna-tab:hover {
    color: var(--tn-text-1);
}

.tn-admin .tna-tab.active {
    color: var(--tn-text-1);
    border-bottom-color: var(--tn-accent);
}

.tn-admin .tna-tab-badge {
    display: inline-block;
    min-width: 18px;
    text-align: center;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    background: var(--tn-bg-tertiary);
    color: var(--tn-text-3);
}

.tn-admin .tna-tab-badge.warning {
    background: var(--tna-badge-warning-bg);
    color: var(--tna-badge-warning-text);
}

.tn-admin .tna-tab-badge.danger {
    background: var(--tna-badge-danger-bg);
    color: var(--tna-badge-danger-text);
}

.tn-admin .tna-tab-badge.accent {
    background: var(--tna-badge-accent-bg);
    color: var(--tna-badge-accent-text);
}

/* Panels */
.tn-admin .tna-panel {
    display: none;
}

.tn-admin .tna-panel.active {
    display: block;
}

/* ============================================
   INFO BAR (horizontal stats bar)
   ============================================ */

.tn-admin .tna-info-bar {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 16px;
    margin-bottom: 8px;
    background: var(--tn-bg-tertiary);
    border: 1px solid var(--tn-border-light);
    border-radius: var(--tn-radius);
    font-size: 11px;
    color: var(--tn-text-2);
}

.tn-admin .tna-info-bar strong {
    color: var(--tn-text-1);
}

/* ============================================
   STATUS COLORS (text)
   ============================================ */

.tn-admin .tna-status-ok {
    color: var(--tn-text-2);
}

.tn-admin .tna-status-warn {
    color: var(--tn-warning);
    font-weight: 600;
}

.tn-admin .tna-status-crit {
    color: var(--tn-danger);
    font-weight: 700;
}

.tn-admin .tna-status-success {
    color: var(--tn-success);
    font-weight: 600;
}

/* ============================================
   HEADER BADGES (inline stats)
   ============================================ */

.tn-admin .tna-header-badges {
    display: inline-flex;
    gap: 8px;
    margin-right: 12px;
}

.tn-admin .tna-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--tn-bg-tertiary);
    color: var(--tn-text-2);
}

.tn-admin .tna-header-badge.warning {
    background: var(--tna-badge-warning-bg);
    color: var(--tna-badge-warning-text);
}

.tn-admin .tna-header-badge.danger {
    background: var(--tna-badge-danger-bg);
    color: var(--tna-badge-danger-text);
}

.tn-admin .tna-header-badge.accent {
    background: var(--tna-badge-accent-bg);
    color: var(--tna-badge-accent-text);
}

/* ============================================
   TOGGLE BUTTON (on/off state)
   ============================================ */

.tn-admin .tna-toggle-on {
    background: var(--tna-badge-accent-bg);
    color: var(--tna-badge-accent-text);
    border: 1px solid var(--tn-accent);
}

.tn-admin .tna-toggle-off {
    background: var(--tn-bg-tertiary);
    color: var(--tn-text-3);
    border: 1px solid var(--tn-border);
}

/* ============================================
   MINI BADGE (inline code-like)
   ============================================ */

.tn-admin .tna-mini-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    font-family: var(--tn-font-mono);
    background: var(--tn-bg-tertiary);
    color: var(--tn-text-2);
}

.tn-admin .tna-mini-badge.success {
    background: var(--tna-badge-success-bg);
    color: var(--tna-badge-success-text);
}

.tn-admin .tna-mini-badge.warning {
    background: var(--tna-badge-warning-bg);
    color: var(--tna-badge-warning-text);
}

.tn-admin .tna-mini-badge.danger {
    background: var(--tna-badge-danger-bg);
    color: var(--tna-badge-danger-text);
}

.tn-admin .tna-mini-badge.accent {
    background: var(--tna-badge-accent-bg);
    color: var(--tna-badge-accent-text);
}

/* ============================================
   EXPAND BUTTON (icon only, for detail)
   ============================================ */

.tn-admin .tna-btn-expand {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tn-text-3);
    font-size: 12px;
    padding: 2px 6px;
}

.tn-admin .tna-btn-expand:hover {
    color: var(--tn-text-1);
}

/* ============================================
   DETAIL MODAL (JSON viewer style - always dark)
   ============================================ */

.tn-admin .tna-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 900;
}

.tn-admin .tna-modal-detail {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 900px;
    max-height: 80vh;
    background: #1e1e2e;
    border: 1px solid #3a3a5a;
    border-radius: var(--tn-radius);
    z-index: 901;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    color: #d4d4d4;
}

.tn-admin .tna-modal-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #3a3a5a;
    background: #262640;
    color: #e8e8f0;
}

.tn-admin .tna-modal-detail-head strong {
    color: #e8e8f0;
}

.tn-admin .tna-modal-detail-head button {
    color: #8a8aaa;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
}

.tn-admin .tna-modal-detail-head button:hover {
    color: #e8e8f0;
}

.tn-admin .tna-modal-detail-body {
    padding: 16px;
    overflow: auto;
    flex: 1;
    font-family: var(--tn-font-mono);
    font-size: 11px;
    line-height: 1.5;
    color: #d4d4d4;
    background: #1e1e2e;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* ============================================
   SPIN ANIMATION
   ============================================ */

.tn-admin .tna-spinning {
    animation: tna-spin 0.6s linear infinite;
}

@keyframes tna-spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   PROCESS PROFILER — styles spécifiques (pp-*)
   Conservés pour compatibilité JS existant
   ============================================ */

/* Debug toggle */
.tn-admin .pp-debug-on { 
    background: var(--tna-badge-accent-bg); 
    color: var(--tna-badge-accent-text); 
    border: 1px solid var(--tn-accent); 
}
.tn-admin .pp-debug-off { 
    background: var(--tn-bg-tertiary); 
    color: var(--tn-text-3); 
    border: 1px solid var(--tn-border); 
}

/* Badges stats header */
.tn-admin .pp-badges { 
    display: inline-flex; 
    gap: 8px; 
    margin-right: 12px; 
}
.tn-admin .pp-badge-item {
    display: inline-flex; 
    align-items: center; 
    gap: 4px;
    padding: 2px 8px; 
    border-radius: 10px;
    font-size: 10px; 
    font-weight: 600;
    background: var(--tn-bg-tertiary); 
    color: var(--tn-text-2);
}
.tn-admin .pp-badge-item.warn { 
    background: var(--tna-badge-warning-bg); 
    color: var(--tna-badge-warning-text); 
}
.tn-admin .pp-badge-item.err { 
    background: var(--tna-badge-danger-bg); 
    color: var(--tna-badge-danger-text); 
}
.tn-admin .pp-badge-item.dbg { 
    background: var(--tna-badge-accent-bg); 
    color: var(--tna-badge-accent-text); 
}

/* FPM bar */
.tn-admin .pp-fpm-bar {
    display: flex; 
    gap: 20px; 
    align-items: center; 
    flex-wrap: wrap;
    padding: 8px 16px; 
    margin-bottom: 8px;
    background: var(--tn-bg-tertiary); 
    border: 1px solid var(--tn-border-light);
    border-radius: var(--tn-radius); 
    font-size: 11px; 
    color: var(--tn-text-2);
}
.tn-admin .pp-fpm-bar strong { 
    color: var(--tn-text-1); 
}

/* Tabs */
.tn-admin .pp-tabs {
    display: flex; 
    gap: 0; 
    margin-bottom: 12px;
    border-bottom: 2px solid var(--tn-border-light);
}
.tn-admin .pp-tab {
    padding: 8px 16px; 
    border: none; 
    background: none; 
    cursor: pointer;
    font-size: 12px; 
    font-weight: 500; 
    color: var(--tn-text-3);
    border-bottom: 2px solid transparent; 
    margin-bottom: -2px;
    transition: all 0.15s;
}
.tn-admin .pp-tab:hover { 
    color: var(--tn-text-1); 
}
.tn-admin .pp-tab.active { 
    color: var(--tn-text-1); 
    border-bottom-color: var(--tn-accent); 
}

.tn-admin .pp-tab-badge {
    display: inline-block; 
    min-width: 18px; 
    text-align: center;
    padding: 0 5px; 
    margin-left: 4px; 
    border-radius: 9px;
    font-size: 10px; 
    font-weight: 700; 
    line-height: 18px;
    background: var(--tn-bg-tertiary); 
    color: var(--tn-text-3);
}
.tn-admin .pp-tab-badge-warn { 
    background: var(--tna-badge-warning-bg); 
    color: var(--tna-badge-warning-text); 
}
.tn-admin .pp-tab-badge-err { 
    background: var(--tna-badge-danger-bg); 
    color: var(--tna-badge-danger-text); 
}
.tn-admin .pp-tab-badge-dbg { 
    background: var(--tna-badge-accent-bg); 
    color: var(--tna-badge-accent-text); 
}

/* Panels */
.tn-admin .pp-panel { 
    display: none; 
}
.tn-admin .pp-panel.active { 
    display: block; 
}

/* Table */
.tn-admin .pp-table-wrap { 
    overflow-x: auto; 
}
.tn-admin .pp-empty { 
    text-align: center; 
    color: var(--tn-text-3); 
    padding: 24px !important; 
}

/* Duration color coding */
.tn-admin .pp-dur-ok { 
    color: var(--tn-text-2); 
}
.tn-admin .pp-dur-warn { 
    color: var(--tn-warning); 
    font-weight: 600; 
}
.tn-admin .pp-dur-crit { 
    color: var(--tn-danger); 
    font-weight: 700; 
}

/* HTTP status color */
.tn-admin .pp-http-ok { 
    color: var(--tn-text-2); 
}
.tn-admin .pp-http-err { 
    color: var(--tn-danger); 
    font-weight: 600; 
}

/* Error type badge */
.tn-admin .pp-err-type {
    display: inline-block; 
    padding: 1px 6px; 
    border-radius: 3px;
    font-size: 9px; 
    font-weight: 600; 
    font-family: var(--tn-font-mono);
}
.tn-admin .pp-err-type.stale { 
    background: var(--tna-badge-accent-bg); 
    color: var(--tna-badge-accent-text); 
}
.tn-admin .pp-err-type.error { 
    background: var(--tna-badge-danger-bg); 
    color: var(--tna-badge-danger-text); 
}
.tn-admin .pp-err-type.warning { 
    background: var(--tna-badge-warning-bg); 
    color: var(--tna-badge-warning-text); 
}

/* Detail modal - toujours dark */
.tn-admin .pp-overlay {
    position: fixed; 
    inset: 0; 
    background: rgba(0,0,0,0.85); 
    z-index: 900;
}
.tn-admin .pp-detail {
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 80%; 
    max-width: 900px; 
    max-height: 80vh;
    background: #1e1e2e; 
    border: 1px solid #3a3a5a;
    border-radius: var(--tn-radius); 
    z-index: 901;
    display: flex; 
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    color: #d4d4d4;
}
.tn-admin .pp-detail-head {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    padding: 12px 16px; 
    border-bottom: 1px solid #3a3a5a;
    background: #262640; 
    color: #e8e8f0;
}
.tn-admin .pp-detail-head strong { 
    color: #e8e8f0; 
}
.tn-admin .pp-detail-head .tn-btn-ghost { 
    color: #8a8aaa; 
}
.tn-admin .pp-detail-head .tn-btn-ghost:hover { 
    color: #e8e8f0; 
}
.tn-admin .pp-detail-body {
    padding: 16px; 
    overflow: auto; 
    flex: 1;
    font-family: var(--tn-font-mono); 
    font-size: 11px; 
    line-height: 1.5;
    color: #d4d4d4; 
    background: #1e1e2e;
    white-space: pre-wrap; 
    word-break: break-all;
    margin: 0;
}

/* Expand button */
.tn-admin .pp-btn-expand {
    background: none; 
    border: none; 
    cursor: pointer;
    color: var(--tn-text-3); 
    font-size: 12px; 
    padding: 2px 6px;
}
.tn-admin .pp-btn-expand:hover { 
    color: var(--tn-text-1); 
}

/* Spin refresh icon */
.tn-admin .pp-spinning { 
    animation: pp-spin 0.6s linear infinite; 
}
@keyframes pp-spin { 
    to { transform: rotate(360deg); } 
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .tn-admin .tna-filters {
        flex-direction: column;
    }
    
    .tn-admin .tna-filter-group,
    .tn-admin .tna-filter-group.stretch {
        width: 100%;
        min-width: 100%;
    }
    
    .tn-admin .tna-filter-group input,
    .tn-admin .tna-filter-group select {
        min-width: 0;
        width: 100%;
    }

    .tn-admin .tna-form-row,
    .tn-admin .tna-form-row-3 {
        grid-template-columns: 1fr;
    }

    .tn-admin .tna-detail-grid {
        grid-template-columns: 100px 1fr;
    }

    .tn-admin .tna-actions-bar {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .tn-admin .tna-detail-grid {
        grid-template-columns: 1fr;
    }
    
    .tn-admin .tna-detail-label {
        margin-top: 8px;
    }
    
    .tn-admin .tna-detail-label:first-child {
        margin-top: 0;
    }
}