/* ═══════════════════════════════════════════════════════════════
   PULUTIX — Custom Styles
   Extracted from base.html inline <style> block
   ═══════════════════════════════════════════════════════════════ */

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* Base body */
body {
    background-color: #0B0E11;
    color: #EAECEF;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow-x: hidden;
}

/* Prevent horizontal overflow */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Main container layout fix */
.flex.min-h-screen {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Scrollbar dark style */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1E2329; }
::-webkit-scrollbar-thumb { background: #2B3139; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #3B82F6; }

/* ─── Sidebar ─── */
.sidebar {
    width: 240px;
    transition: width 0.3s ease, transform 0.3s ease;
}
.sidebar.sidebar-closed { width: 64px; }
.sidebar.sidebar-closed .nav-text { display: none; }
.sidebar.sidebar-closed .nav-icon { margin-right: 0; }
.sidebar.sidebar-closed .logo-text { display: none; }

/* Desktop main content margins */
.desktop-ml-open { margin-left: 240px; max-width: calc(100vw - 240px); }
.desktop-ml-closed { margin-left: 64px; max-width: calc(100vw - 64px); }

/* Mobile overlay: hidden on desktop by default */
.mobile-overlay { display: none; }

/* Nav item */
.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #848E9C;
    text-decoration: none;
    transition: all 0.2s;
    border-radius: 4px;
    margin: 2px 8px;
}
.nav-item:hover { background: #2B3139; color: #EAECEF; }
.nav-item.active {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    border-left: 3px solid #3B82F6;
    margin-left: 5px;
}
.nav-icon { width: 20px; height: 20px; margin-right: 12px; flex-shrink: 0; }

/* ─── Cards ─── */
.card {
    background: #1E2329;
    border: 1px solid #2B3139;
    border-radius: 8px;
    overflow: hidden;
}
.card:hover { border-color: #3B4149; }
.card > div {
    overflow-x: auto;
}

/* ─── Status badges ─── */
.badge-green { background: rgba(14, 203, 129, 0.1); color: #0ECB81; }
.badge-red { background: rgba(246, 70, 93, 0.1); color: #F6465D; }
.badge-yellow { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
.badge-gray { background: rgba(132, 142, 156, 0.1); color: #848E9C; }

/* Pulse animation */
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(14, 203, 129, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(14, 203, 129, 0); }
}
.pulse-green { animation: pulse-dot 2s infinite; }

/* ─── Table styles ─── */
.binance-table th {
    background: #1E2329;
    color: #848E9C;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid #2B3139;
    white-space: nowrap;
}
.binance-table td { 
    border-bottom: 1px solid #2B3139; 
    color: #EAECEF;
}
.binance-table tr:hover td { background: #2B3139; }

/* Prevent table overflow */
.binance-table {
    width: 100%;
    table-layout: auto;
}

/* Responsive table wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ─── Buttons ─── */
.btn-primary { background: #3B82F6; color: #FFFFFF; font-weight: 600; }
.btn-primary:hover { background: #60A5FA; }
.btn-danger { background: #F6465D; color: white; }
.btn-danger:hover { background: #FF6B7D; }
.btn-success { background: #0ECB81; color: #0B0E11; }
.btn-success:hover { background: #2ED391; }

/* ─── Toast ─── */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    border-radius: 8px;
    z-index: 9999;
    animation: slideIn 0.3s ease;
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ─── Progress bar ─── */
.progress-bar {
    background: #2B3139;
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #3B82F6);
    transition: width 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — @media (max-width: 767px)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Mobile Sidebar: overlay slide-in ─── */
@media (max-width: 767px) {
    .sidebar {
        width: 260px !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: none;
    }
    .sidebar.sidebar-open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }
    .sidebar.sidebar-closed {
        width: 260px !important;
        transform: translateX(-100%) !important;
    }
    /* Override desktop margins on mobile */
    .desktop-ml-open,
    .desktop-ml-closed {
        margin-left: 0 !important;
        max-width: 100vw !important;
    }
    /* Main always full-width on mobile */
    .main-content {
        margin-left: 0 !important;
        max-width: 100vw !important;
        width: 100vw;
    }
    /* Show overlay on mobile */
    .mobile-overlay {
        display: block;
    }
}

/* ─── Mobile: Typography + spacing ─── */
@media (max-width: 767px) {
    /* Smaller cards */
    .card {
        border-radius: 6px;
    }
    .card > .p-6, .card .p-6 {
        padding: 12px !important;
    }
    .card > .p-4, .card .p-4 {
        padding: 10px !important;
    }
    
    /* Stat cards: smaller values */
    .text-3xl { font-size: 1.5rem !important; }
    .text-2xl { font-size: 1.15rem !important; }
    .text-xl { font-size: 1rem !important; }
    .text-lg { font-size: 0.9rem !important; }
    
    /* Icon containers smaller */
    .w-12.h-12 { width: 36px !important; height: 36px !important; }
    .w-12.h-12 .w-6 { width: 18px !important; height: 18px !important; }
    
    /* Grids: tighter gaps */
    .gap-6 { gap: 12px !important; }
    .gap-4 { gap: 8px !important; }
    .gap-3 { gap: 6px !important; }
    .mb-6 { margin-bottom: 12px !important; }
    
    /* Space-y on mobile */
    .space-y-6 > * + * { margin-top: 12px !important; }
    .space-y-4 > * + * { margin-top: 8px !important; }
}

/* ─── Mobile: Tables — horizontal scroll + compact ─── */
@media (max-width: 767px) {
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    
    .binance-table th,
    .binance-table td {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    .binance-table th {
        font-size: 10px !important;
    }
    
    /* Hint: scroll indicator */
    .overflow-x-auto {
        position: relative;
    }
    .overflow-x-auto::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, rgba(11, 14, 17, 0.8));
        pointer-events: none;
        z-index: 1;
    }
    
    /* Table min-width to enable scroll */
    .binance-table {
        min-width: 600px;
    }
}

/* ─── Mobile: Tab selectors ─── */
@media (max-width: 767px) {
    /* Tab buttons */
    .flex-wrap button,
    .flex.gap-2 button {
        font-size: 12px !important;
        padding: 8px 10px !important;
    }
    .min-w-\[100px\] {
        min-width: 70px !important;
    }
    .min-w-\[90px\] {
        min-width: 60px !important;
    }
    
    /* Period selector buttons */
    .flex.gap-2 .rounded-lg.text-sm {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* ─── Mobile: Filter bars ─── */
@media (max-width: 767px) {
    /* Stack filters vertically */
    .flex-wrap.items-center.gap-4 {
        flex-direction: column;
        align-items: stretch !important;
    }
    .flex-wrap.items-center.gap-4 > .flex {
        width: 100%;
    }
    .flex-wrap.items-center.gap-4 select,
    .flex-wrap.items-center.gap-4 input {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ─── Mobile: Charts ─── */
@media (max-width: 767px) {
    canvas {
        max-height: 200px !important;
    }
    /* SVG gauges (system monitor) */
    .w-24.h-24 {
        width: 64px !important;
        height: 64px !important;
    }
    .w-24.h-24 circle {
        r: 26;
        stroke-width: 6;
    }
}

/* ─── Mobile: Heatmap scroll ─── */
@media (max-width: 767px) {
    .min-w-\[800px\] {
        min-width: 600px !important;
    }
    .min-w-\[800px\] .w-10 {
        width: 24px !important;
        font-size: 9px !important;
    }
    .min-w-\[800px\] .h-10 {
        height: 24px !important;
    }
}

/* ─── Mobile: Forms (settings, ML) ─── */
@media (max-width: 767px) {
    .grid-cols-2.gap-4 input,
    .grid-cols-2.gap-4 select,
    .grid-cols-2.gap-2 select,
    .grid-cols-2.gap-2 input {
        font-size: 14px !important;
    }
}

/* ─── Mobile: Toast position ─── */
@media (max-width: 767px) {
    #toast-container {
        bottom: 8px !important;
        right: 8px !important;
        left: 8px !important;
    }
    .toast {
        font-size: 13px !important;
        padding: 10px 16px !important;
    }
}

/* ─── Mobile: Nav item click targets ─── */
@media (max-width: 767px) {
    .nav-item {
        padding: 14px 16px;
        font-size: 15px;
    }
}