/* ==========================================================================
   USM Academic Calculator CSS - Strict Scroll & Flat Assets Structure
   ========================================================================== */

.usm-calc-wrapper, .usm-calc-tab-card {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 20px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Master Header Box */
.usm-calc-header-box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 2px solid #2563eb !important;
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.usm-calc-header-box h2 { margin: 0 !important; color: #0f172a !important; font-size: 22px !important; font-weight: 800 !important; }
.usm-calc-header-box p { margin: 3px 0 0 0 !important; color: #64748b !important; font-size: 13px !important; }

.usm-calc-badge {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
}

/* Top Navigation Bar */
.usm-calc-nav-bar {
    display: flex !important;
    gap: 8px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

.usm-nav-pill {
    background: #e2e8f0 !important;
    color: #334155 !important;
    text-decoration: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-block !important;
    border: none !important;
}

.usm-nav-pill:hover { background: #cbd5e1 !important; color: #0f172a !important; }
.usm-nav-pill.active { background: #2563eb !important; color: #ffffff !important; box-shadow: 0 2px 6px rgba(37,99,235,0.25) !important; }

/* Subhead & Inputs */
.usm-calc-subhead {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    border-bottom: 2px solid #e2e8f0 !important; padding-bottom: 12px !important; margin-bottom: 18px !important; flex-wrap: wrap !important; gap: 10px !important;
}
.usm-calc-subhead h3 { margin: 0 !important; color: #1e40af !important; font-size: 18px !important; font-weight: 800 !important; }
.usm-calc-subhead p { margin: 3px 0 0 0 !important; color: #64748b !important; font-size: 12.5px !important; }

.usm-sample-tag-box {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #1d4ed8 !important;
}

.usm-sample-tag-box a { color: #2563eb !important; text-decoration: none !important; font-weight: 800 !important; padding: 0 3px !important; }
.usm-sample-tag-box a:hover { text-decoration: underline !important; }

.usm-config-panel { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 18px !important; margin-bottom: 20px !important; }
.usm-ctrl-file, .usm-ctrl-input { width: 100% !important; padding: 8px 12px !important; border: 1px solid #cbd5e1 !important; border-radius: 5px !important; background: #ffffff !important; font-size: 13px !important; box-sizing: border-box !important; }

.usm-btn-primary { background: #2563eb !important; color: #ffffff !important; border: none !important; font-weight: 800 !important; padding: 10px 20px !important; border-radius: 6px !important; cursor: pointer !important; font-size: 13.5px !important; }

/* Sub-Navigation Pill Tabs */
.usm-sub-tabs-bar {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 15px !important;
}
.sub-tab-btn {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 8px 18px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: 0.2s ease !important;
}
.sub-tab-btn:hover { background: #e2e8f0 !important; color: #0f172a !important; }
.sub-tab-btn.active { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; box-shadow: 0 4px 6px rgba(37,99,235,0.2) !important; }

/* Export Bar */
.report-export-strip { display: flex !important; justify-content: space-between !important; align-items: center !important; background: #f8fafc !important; border: 1px solid #cbd5e1 !important; padding: 10px 14px !important; border-radius: 6px !important; margin-bottom: 15px !important; flex-wrap: wrap !important; gap: 10px !important; font-size: 13px !important; }
.export-btns button { border: none !important; padding: 6px 14px !important; border-radius: 4px !important; font-weight: 700 !important; cursor: pointer !important; font-size: 12px !important; color: #fff !important; margin-left: 6px !important; }
.btn-exp-p { background:#0f172a !important; } .btn-exp-x { background:#16a34a !important; } .btn-exp-c { background:#2563eb !important; } .btn-exp-j { background:#7c3aed !important; }

/* 🚀 GUARANTEED HORIZONTAL SCROLLER ENGINE */
.usm-canvas-outlet, .report-section-pane {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important; 
    box-sizing: border-box !important;
}

.usm-table-responsive-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    margin-bottom: 15px !important;
    box-sizing: border-box !important;
}

.usm-table-responsive-box::-webkit-scrollbar { height: 10px !important; background: #f1f5f9 !important; border-radius: 0 0 6px 6px !important; }
.usm-table-responsive-box::-webkit-scrollbar-thumb { background: #94a3b8 !important; border-radius: 10px !important; border: 2px solid #f1f5f9 !important; }

.usm-pro-table {
    width: 100% !important;
    min-width: 1200px !important;
    border-collapse: collapse !important;
    font-size: 12.5px !important;
    text-align: center !important;
    margin: 0 !important;
}
.usm-pro-table th, .usm-pro-table td {
    white-space: nowrap !important;
    padding: 10px 12px !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}
.usm-pro-table th { background: #f8fafc !important; color: #0f172a !important; font-weight: 800 !important; }
.usm-pro-table tr:hover td { background-color: #f0f9ff !important; }

.pill-pass { background: #dcfce7 !important; color: #15803d !important; padding: 3px 8px !important; border-radius: 4px !important; font-weight: 800; }
.pill-fail { background: #fee2e2 !important; color: #b91c1c !important; padding: 3px 8px !important; border-radius: 4px !important; font-weight: 800; }
.pill-abs  { background: #f1f5f9 !important; color: #64748b !important; padding: 3px 8px !important; border-radius: 4px !important; font-weight: 800; }