/* ========================================
   DESKTOP LAYOUT - CENTERED 1240px
   Table: 1800px max-width
   REAL GLASSMORPHISM IMPLEMENTATION
   ======================================== */

/* ----------------------------------------
   REAL GLASSMORPHISM BASE CLASSES
   ---------------------------------------- */

.glass-card,
.swipe-card,
.block.glass,
.glass-modal {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    border-radius: 16px;
}

body.dark .glass-card,
body.dark .swipe-card,
body.dark .block.glass,
body.dark .glass-modal {
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Lighter glass variant */
.glass-light {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.08);
}

/* Desktop app container */
@media (min-width: 1024px) {
    .app {
        max-width: 1240px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* Table gets more space */
    body.full-mode .app {
        max-width: 1800px !important;
    }
}

/* ----------------------------------------
   TABS - Centered navigation
   ---------------------------------------- */

@media (min-width: 1024px) {
    .tabs {
        max-width: 700px !important;
        margin: 12px auto !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 14px !important;
        border: 1px solid rgba(200, 200, 200, 0.3) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
        position: relative !important;
        z-index: 50 !important;
    }

    body.dark .tabs {
        background: rgba(30, 41, 59, 0.95) !important;
    }

    .tab {
        padding: 10px 18px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        flex-direction: row !important;
        gap: 6px !important;
    }

    .tab.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: white !important;
        box-shadow: none !important;
    }

    .tab-small {
        background: rgba(102, 126, 234, 0.1) !important;
        color: #667eea !important;
        border: 1px solid rgba(102, 126, 234, 0.2) !important;
        border-radius: 10px !important;
    }
}

/* ----------------------------------------
   AUDITS SCREEN - CENTERED
   ---------------------------------------- */

@media (min-width: 1024px) {
    #screenAudits.active {
        padding: 24px 20px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
        height: 100% !important;
        display: block !important;
    }

    #screenAudits .revisions-container {
        max-width: 900px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Create card */
    #screenAudits .create-card {
        max-width: 100% !important;
        margin: 0 0 24px 0 !important;
        padding: 24px !important;
    }

    #screenAudits .section-title {
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }

    #screenAudits .form-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        margin-bottom: 16px !important;
    }

    #screenAudits .file-upload-zone {
        padding: 20px !important;
        margin-bottom: 16px !important;
    }

    #screenAudits .btn-create {
        max-width: 300px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Revisions list - single column centered */
    #screenAudits #revisionsList {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    #screenAudits .glass-card.revision-card {
        padding: 20px !important;
        margin-bottom: 0 !important;
    }

    /* Revision card actions in row */
    #screenAudits .revision-card .card-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
}

/* ----------------------------------------
   SETTINGS/OPTIONS - GLASSMORPHISM REDESIGN
   ---------------------------------------- */

@media (min-width: 1024px) {
    #screenSettings {
        padding: 24px 20px !important;
        align-items: center !important;
    }

    /* Center all blocks */
    #screenSettings>.block,
    #screenSettings>.accordion {
        max-width: 600px !important;
        width: 100% !important;
        margin: 0 auto 16px auto !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(200, 200, 200, 0.3) !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    }

    #screenSettings .audit-wizard {
        max-width: 600px !important;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.04) 100%) !important;
        border: 1px solid rgba(102, 126, 234, 0.2) !important;
    }

    /* Settings header */
    #screenSettings .settings-head .settings-title-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    #screenSettings .settings-head .settings-actions {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    #screenSettings .settings-head .theme-toggle {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #4b5563 !important;
        padding: 6px 10px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.7) !important;
        border: 1px solid rgba(200, 200, 200, 0.3) !important;
    }

    #screenSettings .settings-head .theme-toggle input {
        width: 34px !important;
        height: 18px !important;
        margin: 0 !important;
    }

    #screenSettings .block-title {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #333 !important;
    }

    /* Toggle switches styling */
    #screenSettings .mode-row {
        padding: 8px 0 !important;
    }

    /* Users block (accordion removed) */
    #screenSettings #usersBlock {
        overflow: visible !important;
        max-width: 600px !important;
        margin: 0 auto 16px auto !important;
        padding: 20px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(200, 200, 200, 0.3) !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #screenSettings #usersBlock .block.compact {
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 16px !important;
        background: rgba(255, 255, 255, 0.8) !important;
        border: 1px solid rgba(200, 200, 200, 0.3) !important;
        border-radius: 12px !important;
    }

    #screenSettings #usersBlock .row,
    #screenSettings #usersBlock .form-row {
        width: 100% !important;
        max-width: 420px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 10px !important;
    }

    #screenSettings #usersBlock input,
    #screenSettings #usersBlock select {
        text-align: left !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid rgba(200, 200, 200, 0.3) !important;
    }

    #screenSettings #usersBlock input {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    #screenSettings #usersBlock select#newProfileRole {
        width: 110px !important;
        flex: 0 0 110px !important;
    }

    #screenSettings #usersBlock button.ghost {
        flex: 0 0 44px !important;
        width: 44px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #screenSettings #usersBlock .row:last-of-type {
        margin-top: 20px !important;
    }

    #screenSettings #usersBlock .row button.btn {
        flex: 1 !important;
        width: auto !important;
    }

    /* Device cards */
    #screenSettings .audit-card {
        background: rgba(255, 255, 255, 0.8) !important;
        border: 1px solid rgba(200, 200, 200, 0.3) !important;
        border-radius: 12px !important;
    }

    /* Buttons */
    #screenSettings .btn {
        border-radius: 10px !important;
    }

    #screenSettings .btn.primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border: none !important;
    }

    #screenSettings .btn.ghost {
        background: rgba(102, 126, 234, 0.08) !important;
        border: 1px solid rgba(102, 126, 234, 0.2) !important;
        color: #667eea !important;
    }
}

/* ----------------------------------------
   STATS/INFO - CENTERED
   ---------------------------------------- */

@media (min-width: 1024px) {
    #screenStats {
        padding: 24px 20px !important;
        align-items: center !important;
    }

    #screenStats>.block {
        max-width: 500px !important;
        width: 100% !important;
        margin: 0 auto 16px auto !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(200, 200, 200, 0.3) !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
        padding: 20px !important;
    }

    /* Stats styling */
    #screenStats .stat-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    #screenStats .stat-box {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.04) 100%) !important;
        border: 1px solid rgba(102, 126, 234, 0.15) !important;
        border-radius: 12px !important;
        padding: 16px !important;
    }

    #screenStats .sb-val {
        font-size: 32px !important;
        font-weight: 800 !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    #screenStats .sb-lbl {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: var(--muted) !important;
        text-transform: uppercase !important;
    }

    /* Progress bar */
    #screenStats .progress-ring {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px !important;
        background: rgba(0, 0, 0, 0.02) !important;
        border-radius: 10px !important;
    }

    #screenStats .progress-bar {
        flex: 1 !important;
        height: 10px !important;
        background: rgba(0, 0, 0, 0.06) !important;
        border-radius: 10px !important;
    }

    #screenStats .progress-fill {
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
    }

    /* Leaderboard */
    #screenStats .leaderboard {
        margin-top: 12px !important;
    }

    #screenStats .leaderboard>div {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 12px !important;
        background: rgba(255, 255, 255, 0.6) !important;
        border-radius: 8px !important;
        margin-bottom: 6px !important;
    }
}

/* ----------------------------------------
   SEARCH - Centered
   ---------------------------------------- */

@media (min-width: 1024px) {
    #screenSearch {
        padding: 24px 20px !important;
        align-items: center !important;
    }

    #screenSearch>div:first-child {
        max-width: 600px !important;
        width: 100% !important;
        margin: 0 auto 16px auto !important;
    }

    #screenSearch #suggestList {
        max-width: 800px !important;
        width: 100% !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
        gap: 12px !important;
    }

    #screenSearch .search-item {
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(200, 200, 200, 0.3) !important;
        padding: 14px !important;
        margin: 0 !important;
    }
}

/* ----------------------------------------
   TABLE - 1800px max, SIMPLE CLEAN DESIGN
   ---------------------------------------- */

@media (min-width: 1024px) {

    /* GRID LAYOUT FOR TABLE SCREEN */
    #screenTable.active {
        padding: 20px !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 24px !important;
        height: calc(100vh - 20px) !important;
        overflow: hidden !important;
        align-items: flex-start !important;
    }

    /* Left side: Toolbar + Table */
    .table-left-col {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-width: 0 !important;
    }

    /* Toolbar - Glassy */
    #screenTable .table-toolbar {
        width: 100% !important;
        margin-bottom: 12px !important;
        flex-shrink: 0 !important;
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
        border-radius: 16px !important;
    }

    /* Table Container - Glassy Background */
    #screenTable .table-body {
        max-width: 100% !important;
        flex: 1 !important;
        overflow-y: auto !important;
        background: rgba(255, 255, 255, 0.4) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05) !important;
        padding: 0 12px 12px 12px !important;
        /* Padding for floating rows shadows */
    }

    /* Table Styling - Floating Rows */
    .data-table {
        width: 100% !important;
        min-width: 900px !important;
        border-collapse: separate !important;
        /* Critical for spacing */
        border-spacing: 0 8px !important;
        /* Gap between rows */
        table-layout: fixed !important;
        border: none !important;
        margin-top: -8px !important;
        /* Offset for first spacing */
    }

    .data-table th {
        position: sticky !important;
        top: 0 !important;
        z-index: 20 !important;
        background: rgba(241, 245, 249, 0.95) !important;
        /* Almost opaque for readability */
        backdrop-filter: blur(5px) !important;
        color: #334155 !important;
        /* Darker text */
        font-size: 12px !important;
        /* Larger font */
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
        padding: 16px 12px !important;
        border: none !important;
        white-space: nowrap !important;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08) !important;
        /* Stronger separator */
    }

    /* Specific Column Widths */
    .data-table th.col-row {
        width: 50px !important;
    }

    .data-table th[data-sort="sku"] {
        width: 120px !important;
    }

    .data-table th[data-sort="name"] {
        width: auto !important;
    }

    .data-table th.col-num {
        width: 90px !important;
        text-align: center !important;
    }

    .data-table th.col-place-hdr {
        width: 70px !important;
    }

    .data-table th.col-input-hdr {
        width: 154px !important;
        text-align: center !important;
    }

    .data-table th:last-child {
        width: 110px !important;
    }


    /* INPUT STEPPER STYLES - HUGE */
    .input-stepper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 !important;
        width: 100%;
    }

    .input-stepper input {
        width: 60px !important;
        text-align: center !important;
        padding: 0 !important;
        height: 44px !important;
        border: 1px solid #cbd5e1 !important;
        border-left: none !important;
        border-right: none !important;
        background: #fff !important;
        border-radius: 0 !important;
        font-weight: 800 !important;
        font-size: 16px !important;
        color: #1e293b !important;
        z-index: 1;
    }

    .input-stepper input:focus {
        border-color: #3b82f6 !important;
        box-shadow: inset 0 0 0 1px #3b82f6 !important;
        z-index: 2;
    }

    .btn-step {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8fafc;
        border: 1px solid #cbd5e1;
        color: #475569;
        font-size: 24px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        user-select: none;
        padding: 0;
        z-index: 1;
    }

    .btn-step:hover {
        background: #f1f5f9;
        color: #0f172a;
        z-index: 2;
    }

    /* Connect the buttons visually */
    .btn-step.minus {
        border-radius: 8px 0 0 8px !important;
        border-right: 1px solid #cbd5e1;
    }

    .btn-step.plus {
        border-radius: 0 8px 8px 0 !important;
        border-left: 1px solid #cbd5e1;
    }

    .btn-step.plus {
        color: #10b981;
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

    .btn-step.plus:hover {
        background: #dcfce7;
        border-color: #86efac;
    }

    .btn-step.minus {
        color: #ef4444;
        background: #fef2f2;
        border-color: #fecaca;
    }

    .btn-step.minus:hover {
        background: #fee2e2;
        border-color: #fca5a5;
    }

    .input-stepper input {
        border-color: #cbd5e1 !important;
    }

    /* Row Cards Style */
    .data-table tbody tr {
        background: rgba(255, 255, 255, 0.85) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
        /* Unified shadow on ROW */
        border-radius: 12px !important;
    }

    .data-table tbody tr:hover {
        background: #fff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
        /* Unified hover shadow */
        z-index: 5 !important;
        position: relative !important;
    }

    /* Remove styles from TD to prevent segmentation */
    .data-table tbody tr:hover td {
        background: transparent !important;
        transform: none !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }

    .data-table td {
        background: transparent !important;
        /* Transparent so TR background shows */
        padding: 10px 12px !important;
        border: none !important;
        /* No borders between cells */
        vertical-align: middle !important;
        font-size: 13px !important;
        height: 48px !important;
        box-shadow: none !important;
        /* CRITICAL: No shadow on cells */
    }

    /* Rounded Corners for Rows - applied to first/last cells for clipping */
    .data-table td:first-child {
        border-top-left-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
    }

    .data-table td:last-child {
        border-top-right-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    .data-table td.col-name {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 0 !important;
        font-weight: 600 !important;
        color: #1e293b !important;
    }

    .data-table td.col-num {
        text-align: center !important;
        font-weight: 700 !important;
        font-family: 'Manrope', monospace !important;
        color: #334155 !important;
    }

    /* Right side: Activity/Logs */
    .logs-panel {
        width: 320px !important;
        min-width: 320px !important;
        height: 100% !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        background: rgba(255, 255, 255, 0.8) !important;
        backdrop-filter: blur(12px) !important;
        border-radius: 16px !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
        overflow: hidden !important;
    }


    .logs-list {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 10px !important;
    }

    .logs-head {
        background: #f3f4f6 !important;
        padding: 12px 16px !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
}

/* Fix green input highlight - use green BACKGROUND not border */
.tbl-inp.saved {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
    font-weight: 700 !important;
}

.data-table .col-input {
    background: rgba(102, 126, 234, 0.04) !important;
}

/* Deviation column coloring: + green, - red */
.col-diff.positive,
.diff-val.positive,
.deviation.positive {
    color: #16a34a !important;
    font-weight: 700;
}

.col-diff.negative,
.diff-val.negative,
.deviation.negative {
    color: #dc2626 !important;
    font-weight: 700;
}

/* Status badge improvements */
.status-badge.done {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none !important;
}

/* ----------------------------------------
   WORK - Clean
   ---------------------------------------- */

@media (min-width: 1024px) {
    #screenWork {
        padding: 20px !important;
    }
}

/* ----------------------------------------
   SETTINGS ACCORDION FIX - No cutoff
   ---------------------------------------- */

#screenSettings .accordion {
    overflow: visible !important;
}

#screenSettings .accordion-body {
    overflow: visible !important;
}

#screenSettings .accordion.open .accordion-body {
    max-height: none !important;
    padding: 12px !important;
}

/* ----------------------------------------
   MOBILE AUDITS - Fix content visibility
   ---------------------------------------- */

@media (max-width: 1023px) {
    #screenAudits {
        padding: 12px !important;
        overflow-y: auto !important;
    }

    #screenAudits .revisions-container {
        width: 100% !important;
        padding: 0 !important;
    }

    #screenAudits .create-card {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    #screenAudits .form-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #screenAudits #revisionsList {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #screenAudits .glass-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    #screenAudits .section-title {
        font-size: 16px !important;
    }
}

/* ----------------------------------------
   GLASS CARD (Audits)
   ---------------------------------------- */

#screenAudits .glass-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    border: 1px solid rgba(200, 200, 200, 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    padding: 20px;
    margin-bottom: 16px;
}

body.dark #screenAudits .glass-card {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

#screenAudits .create-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.04) 100%) !important;
    border: 1px solid rgba(102, 126, 234, 0.2) !important;
}

#screenAudits .glass-input {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(200, 200, 200, 0.4);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text);
    width: 100%;
}

#screenAudits .glass-input:focus {
    outline: none;
    border-color: #667eea;
}

#screenAudits .section-title {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

/* Мои ревизии title */
#screenAudits h3.section-title {
    font-size: 20px;
    margin-top: 8px;
    margin-bottom: 16px;
}

/* ----------------------------------------
   BUTTONS (Audits)
   ---------------------------------------- */

#screenAudits .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

#screenAudits .btn-secondary {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

#screenAudits .btn-warning {
    background: rgba(251, 191, 36, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

#screenAudits .btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
}

#screenAudits .btn-danger:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

#screenAudits .btn-create {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
}

/* ----------------------------------------
   FILE UPLOAD (Audits)
   ---------------------------------------- */

#screenAudits .file-upload-zone {
    border: 2px dashed rgba(102, 126, 234, 0.3) !important;
    border-radius: 12px !important;
    background: rgba(102, 126, 234, 0.03) !important;
    text-align: center !important;
    padding: 20px !important;
}

#screenAudits .file-label {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

#screenAudits .file-input {
    display: none;
}

#screenAudits .file-name {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
}

/* ----------------------------------------
   PROGRESS (Audits)
   ---------------------------------------- */

#screenAudits .progress-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    overflow: hidden;
    flex: 1;
}

#screenAudits .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    transition: width 0.3s;
}

/* ----------------------------------------
   BADGES (Audits)
   ---------------------------------------- */

#screenAudits .badge-active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

#screenAudits .badge-finished {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* ----------------------------------------
   INPUT GROUP (Audits)
   ---------------------------------------- */

#screenAudits .input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#screenAudits .input-group label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ----------------------------------------
   REVISION CARD (Audits)
   ---------------------------------------- */

#screenAudits .revision-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

#screenAudits .revision-card .card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

#screenAudits .revision-card .card-badges {
    display: flex;
    gap: 8px;
}

#screenAudits .revision-card .card-info {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--muted);
    flex-wrap: wrap;
}

#screenAudits .revision-card .card-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

#screenAudits .revision-card .progress-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
    min-width: 45px;
    text-align: right;
}

#screenAudits .revision-card .card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ----------------------------------------
   MOBILE
   ---------------------------------------- */

@media (max-width: 1023px) {
    #screenAudits .glass-card {
        padding: 16px;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    #screenAudits .section-title {
        font-size: 18px;
    }

    #screenAudits .form-grid {
        grid-template-columns: 1fr;
    }

    #screenAudits .revision-card .card-actions {
        flex-direction: column;
    }

    #screenAudits .revision-card .card-actions button {
        width: 100%;
    }
}

/* ----------------------------------------
   MODAL OVERLAY & SETTINGS MODAL
   ---------------------------------------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.modal-overlay.visible {
    display: flex !important;
}

.glass-modal {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 20px;
    border: 1px solid rgba(200, 200, 200, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.dark .glass-modal {
    background: rgba(30, 41, 59, 0.98);
    border-color: rgba(255, 255, 255, 0.1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(200, 200, 200, 0.3);
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

.btn-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(200, 200, 200, 0.3);
}

.settings-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(200, 200, 200, 0.2);
}

.settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.settings-section h4 {
    font-size: 15px;
    font-weight: 700;
    color: #667eea;
    margin: 0 0 14px 0;
}

.btn-full {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 10px;
}

.btn-full.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.btn-full.btn-secondary {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.backups-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.backup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    font-size: 13px;
}

.backup-item button {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

/* INPUT STEPPER STYLES - Unified/Modern/Large */
.input-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    width: 100%;
}

.input-stepper input {
    width: 50px !important;
    /* Wider input */
    text-align: center !important;
    padding: 0 !important;
    height: 38px !important;
    /* Taller */
    border: 1px solid #cbd5e1 !important;
    border-left: none !important;
    border-right: none !important;
    background: #fff !important;
    border-radius: 0 !important;
    font-weight: 800 !important;
    /* Bolder text */
    font-size: 15px !important;
    color: #1e293b !important;
    z-index: 1;
}

.input-stepper input:focus {
    border-color: #3b82f6 !important;
    box-shadow: inset 0 0 0 1px #3b82f6 !important;
    z-index: 2;
}

.btn-step {
    width: 40px;
    /* Wider buttons */
    height: 38px;
    /* Taller buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
    font-size: 20px;
    /* Larger +/- icons */
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    padding: 0;
    z-index: 1;
}

.btn-step:hover {
    background: #f1f5f9;
    color: #0f172a;
    z-index: 2;
}

/* Connect the buttons visually */
.btn-step.minus {
    border-radius: 8px 0 0 8px !important;
    border-right: 1px solid #cbd5e1;
}

.btn-step.plus {
    border-radius: 0 8px 8px 0 !important;
    border-left: 1px solid #cbd5e1;
}

.btn-step.plus {
    color: #10b981;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.btn-step.plus:hover {
    background: #dcfce7;
    border-color: #86efac;
}

.btn-step.minus {
    color: #ef4444;
    background: #fef2f2;
    border-color: #fecaca;
}

.btn-step.minus:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.input-stepper input {
    border-color: #cbd5e1 !important;
}