/* ============================================================
   Super Admin Custom Styles — "Users Are Idiots" Principle
   ============================================================ */

/* ─── Stat Cards (shared across all pages) ─── */
.sa-stats { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.sa-stat-card {
    flex: 1; min-width: 160px;
    border-radius: 10px;
    padding: 20px 24px;
    position: relative; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    color: #fff;
}
.sa-stat-card .sa-num { font-size: 32px; font-weight: 800; line-height: 1.2; }
.sa-stat-card .sa-label { font-size: 13px; opacity: 0.9; margin-top: 4px; }
.sa-stat-card .sa-icon {
    position: absolute; right: 18px; top: 18px;
    font-size: 48px; opacity: 0.25;
}
.sa-stat-card.bg-red    { background: linear-gradient(135deg,#ff6b6b,#e03131); }
.sa-stat-card.bg-green  { background: linear-gradient(135deg,#51cf66,#2f9e44); }
.sa-stat-card.bg-orange { background: linear-gradient(135deg,#fcc419,#e8590c); }
.sa-stat-card.bg-blue   { background: linear-gradient(135deg,#339af0,#1864ab); }
.sa-stat-card.bg-purple { background: linear-gradient(135deg,#845ef7,#5f3dc4); }
.sa-stat-card.bg-gray   { background: linear-gradient(135deg,#868e96,#495057); }
.sa-stat-card.bg-teal   { background: linear-gradient(135deg,#38d9a9,#0ca678); }
.sa-stat-card.bg-orange .sa-num,
.sa-stat-card.bg-orange .sa-label { color: #333; }

/* Pulsing animation for urgent numbers */
@keyframes sa-pulse {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.sa-stat-card.sa-urgent .sa-num { animation: sa-pulse 1.5s ease-in-out infinite; }

/* ─── Dashboard Specifics ─── */
.sa-dashboard-section { margin-bottom: 24px; }
.sa-dashboard-section .section-title {
    font-size: 15px; font-weight: 700; color: #495057;
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

/* Emergency banner */
.sa-emergency-banner {
    border: 2px solid #e03131; border-radius: 10px;
    padding: 16px 20px; margin-bottom: 20px;
    background: linear-gradient(135deg,#fff5f5,#ffe3e3);
}
.sa-emergency-banner .banner-title {
    font-size: 15px; font-weight: 700; color: #c92a2a;
    margin-bottom: 12px;
}
.sa-emergency-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 8px; margin-bottom: 8px;
    background: #fff;
}
.sa-emergency-row:last-child { margin-bottom: 0; }
.sa-status-dot {
    width: 12px; height: 12px; border-radius: 50%;
    display: inline-block; margin-right: 10px;
}
.sa-status-dot.active { background: #40c057; box-shadow: 0 0 8px rgba(64,192,87,0.5); }
.sa-status-dot.halted {
    background: #e03131; box-shadow: 0 0 8px rgba(224,49,49,0.5);
    animation: sa-dot-pulse 1.5s infinite;
}
@keyframes sa-dot-pulse { 0%,100%{opacity:1}50%{opacity:0.4} }

/* ─── Sensitivity Dots (for audit rows) ─── */
.sa-sensitivity-dot {
    width: 12px; height: 12px; border-radius: 50%;
    display: inline-block; vertical-align: middle; margin-right: 6px;
}
.sa-sensitivity-dot.low      { background: #868e96; }
.sa-sensitivity-dot.medium   { background: #339af0; }
.sa-sensitivity-dot.high     { background: #fcc419; }
.sa-sensitivity-dot.critical { background: #e03131; box-shadow: 0 0 6px rgba(224,49,49,0.5); }

/* High-sensitivity row highlight */
tr.sa-row-critical { background: rgba(224,49,49,0.06) !important; }
tr.sa-row-high     { background: rgba(252,196,25,0.06) !important; }

/* ─── Action Buttons (inline) ─── */
.sa-action-group { display: flex; gap: 4px; flex-wrap: wrap; }
.sa-action-group .btn-sm {
    padding: 3px 10px; font-size: 12px; font-weight: 600;
    border-radius: 4px; white-space: nowrap;
}

/* ─── Amount Display ─── */
.sa-amount {
    font-size: 15px; font-weight: 700; color: #212529;
    white-space: nowrap;
}

/* ─── Address Display ─── */
.sa-address {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px; color: #495057;
    cursor: pointer;
}
.sa-address:hover { color: #228be6; }

/* ─── Human Time Display ─── */
.sa-time { font-size: 12px; color: #868e96; }

/* ─── Node Cards (for ManagedBackend) ─── */
.sa-node-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sa-node-card {
    border: 1px solid #e9ecef; border-radius: 10px;
    padding: 20px; background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.sa-node-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
.sa-node-card .node-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sa-node-card .node-name { font-size: 16px; font-weight: 700; color: #212529; }
.sa-node-card .node-status {
    width: 10px; height: 10px; border-radius: 50%;
}
.sa-node-card .node-status.healthy    { background: #40c057; box-shadow: 0 0 6px rgba(64,192,87,0.5); }
.sa-node-card .node-status.degraded   { background: #fab005; box-shadow: 0 0 6px rgba(250,176,5,0.5); }
.sa-node-card .node-status.unreachable { background: #e03131; box-shadow: 0 0 6px rgba(224,49,49,0.5); }
.sa-node-card .node-status.inactive   { background: #adb5bd; }
.sa-node-card .node-meta { font-size: 13px; color: #868e96; line-height: 1.8; }
.sa-node-card .node-meta strong { color: #495057; }

/* ─── Emergency Toggle Switches ─── */
.sa-toggle-panel {
    display: flex; flex-wrap: wrap; gap: 24px; justify-content: center;
    padding: 30px 20px;
}
.sa-toggle-item {
    text-align: center; padding: 30px 40px;
    border: 2px solid #dee2e6; border-radius: 16px;
    background: #fff; min-width: 280px;
    transition: all 0.3s;
}
.sa-toggle-item.halted { border-color: #e03131; background: #fff5f5; }
.sa-toggle-item.active { border-color: #40c057; background: #f0fff4; }
.sa-toggle-item .toggle-label {
    font-size: 18px; font-weight: 700; margin-bottom: 12px;
}
.sa-toggle-item .toggle-status {
    font-size: 14px; margin-bottom: 16px;
}
.sa-toggle-item .btn-lg {
    padding: 12px 32px; font-size: 16px; font-weight: 700;
    border-radius: 8px;
}

/* ─── Alert History Mini List ─── */
.sa-alert-item {
    border-left: 3px solid #e03131;
    background: #fff5f5; padding: 8px 14px;
    border-radius: 0 4px 4px 0; margin-bottom: 6px;
    font-size: 13px; color: #842029;
}
.sa-alert-item:last-child { margin-bottom: 0; }
.sa-alert-item .alert-time { font-size: 11px; color: #999; margin-top: 3px; }

/* ─── Auto Refresh Indicator ─── */
.sa-auto-refresh {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: #868e96;
    padding: 4px 10px; background: #f8f9fa;
    border-radius: 4px; float: right;
}
.sa-auto-refresh .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #40c057; animation: sa-dot-pulse 2s infinite;
}

/* ─── Batch Toolbar ─── */
.sa-batch-bar {
    padding: 10px 16px;
    background: #f5f7fa;
    border-bottom: 1px solid #e4e7ed;
    display: flex; align-items: center; gap: 10px;
}
.sa-batch-bar .batch-info { font-size: 13px; color: #666; }

/* ─── Grid Overrides ─── */
.dcat-box .grid-table td { vertical-align: middle; }

/* ─── Status Labels (override Dcat defaults for consistent coloring) ─── */
.label-sa-pending { background: #ff9800 !important; color: #fff !important; }
.label-sa-approved { background: #4caf50 !important; color: #fff !important; }
.label-sa-rejected { background: #f44336 !important; color: #fff !important; }
.label-sa-auto { background: #2196f3 !important; color: #fff !important; }
.label-sa-executing { background: #ff9800 !important; color: #fff !important; }
.label-sa-executed { background: #4caf50 !important; color: #fff !important; }
.label-sa-failed { background: #f44336 !important; color: #fff !important; }
.label-sa-intercepted { background: #e65100 !important; color: #fff !important; }

/* ─── Copy Button ─── */
.sa-copy-btn {
    cursor: pointer; display: inline-flex;
    align-items: center; gap: 4px;
    padding: 1px 6px; border-radius: 3px;
    font-size: 11px; color: #868e96;
    border: 1px solid #dee2e6; background: #fff;
    transition: all 0.15s;
}
.sa-copy-btn:hover { background: #f1f3f5; color: #495057; border-color: #adb5bd; }
.sa-copy-btn.copied { color: #40c057; border-color: #40c057; }