@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ════════════════════════════════════════════════════════════
   SURTONE PRO — Complete Responsive System
   Breakpoints: 320 | 375 | 425 | 768 | 1024 | 1366 | 1440 | 1920
   ════════════════════════════════════════════════════════════ */

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html  { font-size: 16px; overflow-x: hidden; scroll-behavior: smooth; }
body  { overflow-x: hidden; max-width: 100vw; -webkit-text-size-adjust: 100%; }
img, video, iframe, embed, object, canvas, svg {
    max-width: 100%; height: auto; display: block;
}

/* ── iOS INPUT ZOOM PREVENTION ── */
input, select, textarea, button {
    font-size: 16px !important;
    font-family: 'Poppins', sans-serif !important;
}

/* ════════════════════════════════
   SIDEBAR — Mobile Collapse
   ════════════════════════════════ */
@media (max-width: 1024px) {
    .sidebar {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        height: 100vh !important;
        width: 260px !important;
        transform: translateX(-100%) !important;
        z-index: 1001 !important;
        overflow-y: auto !important;
        transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
        box-shadow: 4px 0 20px rgba(0,0,0,0.4) !important;
    }
    .sidebar.active {
        transform: translateX(0) !important;
    }
    .sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,0.65) !important;
        backdrop-filter: blur(4px) !important;
        z-index: 1000 !important;
        display: none !important;
    }
    .sidebar.active ~ .sidebar-overlay,
    .sidebar.active + .sidebar-overlay {
        display: block !important;
    }
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 16px !important;
        padding-top: 80px !important;
    }
    .topbar {
        left: 0 !important;
        right: 0 !important;
        padding: 0 16px !important;
    }
    .menu-toggle-btn {
        display: flex !important;
    }
    .cr-footer { left: 0 !important; }
}

@media (max-width: 768px) {
    .main-content {
        padding: 12px !important;
        padding-top: 74px !important;
    }
    .topbar { height: 64px !important; padding: 0 12px !important; }
}

@media (max-width: 425px) {
    .main-content {
        padding: 10px !important;
        padding-top: 68px !important;
    }
    .topbar { height: 60px !important; padding: 0 10px !important; }
    .sidebar { width: 240px !important; }
}

/* ════════════════════════════════
   TOPBAR
   ════════════════════════════════ */
.topbar-left  { flex: 1; min-width: 0; overflow: hidden; }
.topbar-right { flex-shrink: 0; gap: 8px !important; }

@media (max-width: 640px) {
    .search-bar { display: none !important; }
    .topbar-left > div:not(.menu-toggle-btn):not(button) {
        font-size: 12px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px;
    }
}

@media (max-width: 375px) {
    .topbar-left > div:not(.menu-toggle-btn):not(button) {
        max-width: 110px;
        font-size: 11px !important;
    }
    .user-avatar { width: 34px !important; height: 34px !important; }
}

/* ════════════════════════════════
   STAT GRID — 4→2→1 columns
   ════════════════════════════════ */
.stat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}
@media (max-width: 1200px) { .stat-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 500px)  { .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } }
@media (max-width: 360px)  { .stat-grid { grid-template-columns: 1fr !important; } }

.mini-card  { flex-wrap: nowrap !important; align-items: center !important; }
@media (max-width: 400px) {
    .mini-card   { padding: 14px !important; gap: 10px !important; }
    .mini-icon   { width: 36px !important; height: 36px !important; font-size: 15px !important; flex-shrink: 0 !important; }
    .mini-info h4 { font-size: 9px !important; }
    .mini-info h2 { font-size: 17px !important; }
}

/* ════════════════════════════════
   TWO COLUMN GRID
   ════════════════════════════════ */
.two-column-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}
@media (min-width: 1200px) {
    .two-column-grid { grid-template-columns: 1fr 350px !important; }
}

/* ════════════════════════════════
   DETAILS CONTAINER (release details)
   ════════════════════════════════ */
.details-container {
    grid-template-columns: 1fr !important;
}
@media (min-width: 1100px) {
    .details-container { grid-template-columns: 300px 1fr !important; }
}

/* ════════════════════════════════
   DASHBOARD GRID (wallet)
   ════════════════════════════════ */
.dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
}
@media (min-width: 1024px) {
    .dashboard-grid { grid-template-columns: 1fr 300px !important; }
}

/* ════════════════════════════════
   CARDS
   ════════════════════════════════ */
.details-card {
    padding: 20px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}
@media (max-width: 640px) { .details-card { padding: 14px !important; border-radius: 12px !important; } }
@media (max-width: 375px) { .details-card { padding: 12px !important; } }

.card-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
}
@media (max-width: 560px) {
    .card-header { flex-direction: column !important; align-items: flex-start !important; }
    .card-header h3 { font-size: 12px !important; }
}

/* ════════════════════════════════
   WELCOME SECTION
   ════════════════════════════════ */
.welcome-section {
    flex-direction: column !important;
    padding: 24px 20px !important;
    gap: 16px !important;
}
.welcome-section h1 {
    font-size: clamp(20px, 5vw, 36px) !important;
    letter-spacing: -1px !important;
}
.welcome-section p { font-size: 13px !important; max-width: 100% !important; }
.welcome-section .hero-cta,
.welcome-section > div > div[style*="flex"] {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 10px !important;
}
@media (max-width: 425px) {
    .welcome-section { padding: 18px 14px !important; }
    .welcome-section h1 { font-size: 20px !important; }
    .welcome-section .btn-premium,
    .welcome-section .btn-secondary-premium {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ════════════════════════════════
   PAGE HEADER ACTIONS
   ════════════════════════════════ */
.page-header-actions {
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: flex-start !important;
}
@media (max-width: 640px) {
    .page-header-actions { flex-direction: column !important; }
    .action-btns { flex-wrap: wrap !important; width: 100% !important; }
    .action-btns .btn-premium,
    .action-btns .btn-secondary-premium {
        flex: 1 !important;
        min-width: 100px !important;
        justify-content: center !important;
        text-align: center !important;
    }
}
@media (max-width: 375px) {
    .action-btns .btn-premium,
    .action-btns .btn-secondary-premium {
        width: 100% !important;
    }
}

/* ════════════════════════════════
   BUTTONS
   ════════════════════════════════ */
.btn-premium, .btn-secondary-premium {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 10px 16px !important;
}
@media (max-width: 375px) {
    .btn-premium, .btn-secondary-premium {
        font-size: 11px !important;
        padding: 9px 12px !important;
    }
}

/* ════════════════════════════════
   TABLES — Full Responsive
   ════════════════════════════════ */
.table-responsive,
.table-container,
.details-card > .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
}
table { width: 100% !important; border-collapse: collapse !important; }
.catalog-table { min-width: 560px !important; }

th {
    white-space: nowrap !important;
    padding: 12px 14px !important;
    font-size: 11px !important;
}
td {
    padding: 12px 14px !important;
    font-size: 13px !important;
    word-break: break-word !important;
    max-width: 200px !important;
}
@media (max-width: 768px) {
    th { padding: 10px 10px !important; font-size: 10px !important; }
    td { padding: 10px 10px !important; font-size: 12px !important; max-width: 150px !important; }
}
@media (max-width: 425px) {
    th { padding: 8px !important; font-size: 9px !important; }
    td { padding: 8px !important; font-size: 11px !important; }
}

/* ════════════════════════════════
   FORMS
   ════════════════════════════════ */
.form-grid {
    grid-template-columns: 1fr !important;
}
@media (min-width: 640px) {
    .form-grid { grid-template-columns: 1fr 1fr !important; }
}
.fl-row.fl-2 { grid-template-columns: 1fr !important; }
.fl-row.fl-3 { grid-template-columns: 1fr !important; }
@media (min-width: 640px) {
    .fl-row.fl-2 { grid-template-columns: 1fr 1fr !important; }
    .fl-row.fl-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (min-width: 900px) {
    .fl-row.fl-3 { grid-template-columns: 1fr 1fr 1fr !important; }
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input[type="date"],
input[type="tel"], select, textarea,
.form-input, .modern-input, .field-input, .f-inp, .mi,
.info-value, .field-input-custom {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
}

/* ════════════════════════════════
   MODALS
   ════════════════════════════════ */
.custom-modal-overlay {
    padding: 12px !important;
    align-items: center !important;
}
.custom-modal-content {
    width: 100% !important;
    max-width: min(520px, calc(100vw - 24px)) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: 24px 18px !important;
    border-radius: 18px !important;
}
@media (max-width: 425px) {
    .custom-modal-content { padding: 18px 14px !important; border-radius: 14px !important; }
}
@media (max-width: 375px) {
    .custom-modal-content { padding: 14px 12px !important; }
}

/* ════════════════════════════════
   SECTION HEADER
   ════════════════════════════════ */
.section-header {
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}
.section-header h2 {
    font-size: clamp(16px, 4vw, 26px) !important;
}

/* ════════════════════════════════
   PROFILE PAGE
   ════════════════════════════════ */
.profile-grid {
    grid-template-columns: 1fr !important;
}
@media (min-width: 900px) {
    .profile-grid { grid-template-columns: 360px 1fr !important; }
}
.profile-photo-container { width: min(160px, 40vw) !important; height: min(160px, 40vw) !important; }

/* ════════════════════════════════
   SETTINGS PAGE
   ════════════════════════════════ */
.settings-grid {
    grid-template-columns: 1fr !important;
}
@media (min-width: 768px) {
    .settings-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
}
.settings-container { max-width: 100% !important; }
.color-picker-group { flex-wrap: wrap !important; }

/* ════════════════════════════════
   TABS (Todos, Settings)
   ════════════════════════════════ */
.todo-tabs, .t-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    padding-bottom: 2px !important;
    gap: 6px !important;
    scrollbar-width: none !important;
}
.todo-tabs::-webkit-scrollbar, .t-tabs::-webkit-scrollbar { display: none !important; }
.todo-tab, .t-tab {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
}
@media (max-width: 375px) {
    .todo-tab, .t-tab { padding: 7px 10px !important; font-size: 11px !important; }
}

/* ════════════════════════════════
   LIST ITEMS
   ════════════════════════════════ */
.list-item {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 14px 16px !important;
}
@media (max-width: 425px) {
    .list-item { flex-direction: column !important; align-items: flex-start !important; }
}

/* ════════════════════════════════
   TRACK ROW (Release Details)
   ════════════════════════════════ */
.track-row-modern {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 16px !important;
}
@media (max-width: 640px) {
    .track-stats { display: none !important; }
    .track-title { font-size: 14px !important; }
    .track-meta  { font-size: 10px !important; }
}

/* ════════════════════════════════
   CREATE RELEASE
   ════════════════════════════════ */
.cr-steps {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
}
.cr-steps::-webkit-scrollbar { display: none !important; }
.cr-step { min-width: 100px !important; font-size: 10px !important; padding: 11px 8px !important; white-space: nowrap !important; }
.cr-footer { left: 0 !important; padding: 10px 16px !important; }
.art-box { margin: 0 auto !important; }

@media (max-width: 768px) {
    .art-box { width: 150px !important; height: 150px !important; }
    .cr-section { padding: 18px 16px !important; }
    .cr-step { min-width: 90px !important; font-size: 9px !important; }
}
@media (max-width: 425px) {
    .art-box { width: 120px !important; height: 120px !important; }
    .cr-section { padding: 14px !important; }
}

/* ════════════════════════════════
   ANALYTICS / CHARTS
   ════════════════════════════════ */
@media (max-width: 768px) {
    .stat-card { padding: 20px 14px !important; }
    .stat-num  { font-size: 32px !important; }
    .stat-lbl  { font-size: 10px !important; }
}

/* ════════════════════════════════
   DROPDOWN MENU
   ════════════════════════════════ */
.dropdown-menu {
    right: 0 !important;
    left: auto !important;
    width: min(240px, 90vw) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* ════════════════════════════════
   ADMIN SUBUSERS TABLE
   ════════════════════════════════ */
@media (max-width: 900px) {
    .subuser-grid, .su-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 640px) {
    .subuser-grid, .su-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
    }
}

/* ════════════════════════════════
   MASTER ADMIN
   ════════════════════════════════ */
#master-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
}
@media (max-width: 640px) {
    #master-stats-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ════════════════════════════════
   MASTER ADMIN — Config/Platform
   ════════════════════════════════ */
.perm-grid, .config-grid {
    grid-template-columns: 1fr !important;
}
@media (min-width: 768px) {
    .perm-grid   { grid-template-columns: 1fr 1fr !important; }
    .config-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; }
}

/* ════════════════════════════════
   LOGIN / REGISTER
   ════════════════════════════════ */
.login-card {
    width: calc(100% - 24px) !important;
    max-width: 440px !important;
    padding: 28px 22px !important;
    margin: 12px auto !important;
}
@media (max-width: 375px) {
    .login-card { padding: 22px 16px !important; }
}

/* ════════════════════════════════
   LANDING PAGE (index.html)
   ════════════════════════════════ */
@media (max-width: 992px) {
    .hero-split { grid-template-columns: 1fr !important; }
    .hero-right  { display: none !important; }
    .hero { padding: 130px 0 60px !important; min-height: auto !important; }
    .hero-h1 { font-size: clamp(26px, 7vw, 50px) !important; letter-spacing: -1px !important; }
    .hero-sub { font-size: 14px !important; max-width: 100% !important; }
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    .hero-cta-group { gap: 10px !important; }
}
@media (max-width: 640px) {
    .hero { padding: 100px 0 50px !important; }
    .hero-cta-group { flex-direction: column !important; }
    .btn-primary-cta, .btn-secondary-cta {
        width: 100% !important;
        justify-content: center !important;
    }
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    .stat-num   { font-size: 32px !important; }
    .dsp-slide  { width: 52px !important; height: 52px !important; }
    .feature-card { padding: 28px 20px !important; }
    .pricing-card { padding: 30px 20px !important; }
    .testi-card   { padding: 24px 18px !important; }
    .footer-cta-title { font-size: clamp(22px, 5vw, 38px) !important; }
    .process-strip { padding: 28px 16px !important; }
}
@media (max-width: 425px) {
    .hero-h1 { font-size: 22px !important; }
    .stats-grid { grid-template-columns: 1fr !important; }
    .badge-hero { font-size: 10px !important; padding: 7px 14px !important; }
    .section-title { font-size: clamp(22px, 6vw, 44px) !important; }
}
@media (max-width: 375px) {
    .hero-h1 { font-size: 20px !important; }
    .btn-primary-cta, .btn-secondary-cta {
        padding: 13px 20px !important; font-size: 12px !important;
    }
}

/* ════════════════════════════════
   ENCRYPTION GRID (Profile)
   ════════════════════════════════ */
.encryption-grid {
    grid-template-columns: 1fr !important;
}
@media (min-width: 640px) {
    .encryption-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ════════════════════════════════
   INFO GRID (Release Details)
   ════════════════════════════════ */
.info-grid-modern {
    grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 480px) {
    .info-grid-modern { grid-template-columns: 1fr !important; }
    .info-grid-modern > [style*="grid-column: span 4"],
    .info-grid-modern > [style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }
}

/* ════════════════════════════════
   USER SPLITS / LABELS
   ════════════════════════════════ */
@media (max-width: 768px) {
    [style*="grid-template-columns"][style*="500px"],
    [style*="grid-template-columns"][style*="600px"] {
        grid-template-columns: 1fr !important;
    }
}

/* ════════════════════════════════
   SUPPORT PAGE
   ════════════════════════════════ */
.support-card { flex-wrap: wrap !important; }

/* ════════════════════════════════
   ADMIN SETTINGS — Save Button
   ════════════════════════════════ */
@media (max-width: 640px) {
    .save-btn { width: 100% !important; justify-content: center !important; }
    .save-sync-btn { width: 100% !important; }
}

/* ════════════════════════════════
   WALLET PAGE
   ════════════════════════════════ */
@media (max-width: 768px) {
    .main-column > div[style*="font-size: 52px"],
    .main-column > div[style*="font-size:52px"] {
        font-size: 36px !important;
    }
}

/* ════════════════════════════════
   ADMIN TODOS — Payment/Label cards
   ════════════════════════════════ */
.t-foot { flex-wrap: wrap !important; gap: 8px !important; }
@media (max-width: 640px) {
    .t-card { padding: 16px !important; }
}

/* ════════════════════════════════
   ADMIN RELEASES FILTER BAR
   ════════════════════════════════ */
.filter-bar {
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.filter-bar > div { flex: 1 !important; min-width: 200px !important; }
@media (max-width: 640px) {
    .filter-bar > div { min-width: 100% !important; }
    .filter-bar > select { width: 100% !important; }
}

/* ════════════════════════════════
   BULK IMPORT MODAL
   ════════════════════════════════ */
#bulk-import-modal > div {
    max-height: 95vh !important;
    overflow-y: auto !important;
}
@media (max-width: 640px) {
    #bulk-import-modal > div {
        border-radius: 16px !important;
        padding: 0 !important;
    }
}

/* ════════════════════════════════
   ADMIN RELEASE DETAILS
   ════════════════════════════════ */
@media (max-width: 768px) {
    .section-header[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    #status-select { width: 100% !important; }
    #save-status-btn { width: 100% !important; justify-content: center !important; }
    #header-status  { width: 100% !important; text-align: center !important; }
}

/* ════════════════════════════════
   OVERFLOW SAFETY NET
   ════════════════════════════════ */
@media (max-width: 768px) {
    [style*="max-width: 450px"]:not(.custom-modal-content):not(input):not(select) { max-width: 100% !important; }
    [style*="max-width: 500px"]:not(.custom-modal-content):not(input):not(select) { max-width: 100% !important; }
    [style*="max-width: 600px"]:not(.custom-modal-content):not(input):not(select) { max-width: 100% !important; }
    [style*="width: 180px"][class*="search"]  { width: 100% !important; }
    [style*="width: 220px"][class*="search"]  { width: 100% !important; }
    [style*="min-width: 800px"]               { min-width: 0 !important; }
}

/* ════════════════════════════════
   PADDING SCALE ON SMALL SCREENS
   ════════════════════════════════ */
@media (max-width: 480px) {
    [style*="padding: 40px"]:not(input):not(button)    { padding: 20px !important; }
    [style*="padding: 50px"]:not(input):not(button)    { padding: 22px !important; }
    [style*="padding: 30px"]:not(input):not(button)    { padding: 16px !important; }
    [style*="gap: 30px"]                               { gap: 16px !important; }
    [style*="gap: 25px"]                               { gap: 14px !important; }
}

/* ════════════════════════════════
   SIDEBAR FOOTER ON SMALL PHONES
   ════════════════════════════════ */
@media (max-width: 375px) {
    .sidebar-footer       { padding: 10px 12px !important; }
    .sidebar-user-card    { padding: 8px 10px !important; }
    .sidebar-user-avatar  { width: 30px !important; height: 30px !important; font-size: 12px !important; }
    .sidebar-user-name    { font-size: 12px !important; }
    .sidebar-user-role    { font-size: 9px !important; }
    .sidebar-logo         { padding: 16px 14px !important; }
    .sidebar-logo h3      { font-size: 13px !important; }
    .nav-link             { padding: 9px 12px !important; font-size: 12px !important; }
    .menu-label           { font-size: 9px !important; margin: 16px 0 6px 10px !important; }
}

/* ════════════════════════════════
   TEXT OVERFLOW PREVENTION
   ════════════════════════════════ */
.sidebar-user-name, .sidebar-user-role,
.user-name, .user-role,
.mini-info h4 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ════════════════════════════════
   LARGE SCREENS (1440px+)
   ════════════════════════════════ */
@media (min-width: 1440px) {
    .main-content {
        padding: 28px 48px !important;
        padding-top: 100px !important;
    }
    .stat-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (min-width: 1920px) {
    .main-content { max-width: 1600px !important; margin: 0 auto !important; margin-left: 260px !important; }
}

/* ════════════════════════════════
   PRINT
   ════════════════════════════════ */
@media print {
    .sidebar, .topbar, .sidebar-overlay, .menu-toggle-btn { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; padding-top: 0 !important; }
    * { box-shadow: none !important; }
}