/* =========================================
   RESCULANCE GLOBAL STYLESHEET
   Mobile-Optimized & Centralized
   ========================================= */

/* Base Typography & Background */
body { 
    font-family: 'Inter', sans-serif; 
    background-color: transparent; 
    padding: 1rem; 
    font-size: 1rem; /* Increased base size for mobile readability */
    color: #212529;
}

.font-mono { 
    font-family: 'JetBrains Mono', monospace; 
    font-weight: 500; /* Bolder by default for readability */
}

/* Cards & Containers (Mobile-first spacing) */
.card { 
    border: 1px solid #dee2e6; 
    border-radius: 10px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.04); 
    margin-bottom: 1rem;
}
.metric-card { 
    border-left: 5px solid; 
    padding: 1.5rem !important; /* Larger touch area */
}

/* Forms & Inputs (Optimized for Fingers) */
.form-control, .form-select { 
    background: #f8f9fa; 
    border: 1px solid #ced4da; 
    font-family: 'JetBrains Mono', monospace; 
    font-size: 0.95rem; /* Larger text inside inputs */
    padding: 0.75rem; /* Taller inputs for easier tapping */
    border-radius: 6px;
}
.form-control:focus, .form-select:focus { 
    background: #fff; 
    border-color: #0d6efd; 
    box-shadow: 0 0 0 3px rgba(13,110,253,0.25); 
}

/* Buttons (Larger touch targets) */
.btn {
    padding: 0.6rem 1.2rem;
    font-weight: 600;
    border-radius: 6px;
}
.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

/* Tables (Responsive Scrolling) */
.table-responsive {
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    border-radius: 8px;
}
.table th {
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap; /* Prevents header stacking */
}
.table td {
    font-size: 0.9rem;
    vertical-align: middle;
}

/* specific components from subdomains */
.json-editor { 
    height: 300px; font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; 
    background: #0d1117; color: #e6edf3; border: none; border-radius: 6px; padding: 1rem; 
}

.pulse-red { 
    display: inline-block; width: 12px; height: 12px; background: #dc3545; border-radius: 50%; 
    box-shadow: 0 0 0 rgba(220, 53, 69, 0.4); animation: pulse 2s infinite; 
}
@keyframes pulse { 
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); } 
    70% { box-shadow: 0 0 0 8px rgba(220, 53, 69, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } 
}

.qr-code-img { 
    width: 60px; height: 60px; /* Larger QR on mobile */
    border-radius: 4px; border: 1px solid #dee2e6; padding: 2px; background: #fff; 
    cursor: pointer; transition: transform 0.2s; 
}

/* Video Feed Containers */
.video-container { 
    background: #07090e; border-radius: 8px; aspect-ratio: 16/9; position: relative; 
    overflow: hidden; display: flex; align-items: center; justify-content: center; 
    border: 1px solid rgba(255,255,255,0.1); 
}
.stream-overlay { 
    position: absolute; top: 10px; left: 10px; right: 10px; 
    display: flex; justify-content: space-between; align-items: center; z-index: 10; 
}
.stream-badge { 
    background: rgba(0, 0, 0, 0.8); color: #fff; font-family: 'JetBrains Mono', monospace; 
    font-size: 0.75rem; padding: 0.3rem 0.6rem; border-radius: 4px; 
}
.live-dot { 
    width: 8px; height: 8px; background: #dc3545; border-radius: 50%; display: inline-block; margin-right: 5px; 
    box-shadow: 0 0 0 rgba(220, 53, 69, 0.4); animation: pulse 2s infinite; 
}

/* Provisioning Wizard Overrides */
.step-indicator { display: flex; justify-content: space-between; margin-bottom: 2rem; position: relative; }
.step-indicator::before { content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background: #dee2e6; z-index: 1; }
.step-dot { width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid #dee2e6; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem; z-index: 2; position: relative; color: #6c757d; }
.step-dot.active { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.step-dot.completed { background: #198754; border-color: #198754; color: #fff; }
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: fadeIn 0.4s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.console-window { background: #0d1117; color: #00ff00; border-radius: 6px; padding: 1rem; font-size: 0.85rem; height: 200px; overflow-y: auto; }
.diag-tile { cursor: pointer; transition: transform 0.2s; border: none; }
.diag-tile.status-pending { background-color: #ffc107; color: #000; }
.diag-tile.status-ok { background-color: #198754; color: #fff; }
.diag-tile.status-error { background-color: #dc3545; color: #fff; }

/* =========================================
   MOBILE SPECIFIC OVERRIDES (Smartphones)
   ========================================= */
@media (max-width: 768px) {
    body { padding: 0.5rem; }
    
    /* Ensure columns take full width on phone */
    .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8 {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    /* Stack buttons on mobile */
    .d-flex.gap-2 {
        flex-direction: column;
        width: 100%;
    }
    .d-flex.gap-2 .btn {
        width: 100%;
    }

    /* Make modal headers and text larger */
    .modal-title { font-size: 1.2rem; }
    .form-label, .small.text-muted { font-size: 0.85rem !important; }
    
    h4, h5 { font-size: 1.25rem !important; }
    
    /* Fix table truncation on tiny screens */
    .text-truncate { max-width: 150px !important; }
}