/**
 * MYNTOS ENTERPRISE CORPORATE DESIGN SYSTEM & UNIVERSAL RESPONSIVE ENGINE
 * Applied globally to all 150+ pages across VGK, MNR, SaaS, CRM, Staff, Admin, Partner, and Service portals.
 * Tailored for 3 delivery representations: Web Desktop, /mobile Web, and Native Mobile App (Android/iOS).
 * ZERO DATABASE IMPACT — Strictly CSS/UI Layout & Viewport Optimization.
 */

:root {
    /* Corporate Color Tokens */
    --mynt-navy-dark: #0f172a;
    --mynt-navy: #1e293b;
    --mynt-slate: #334155;
    --mynt-muted: #64748b;
    --mynt-border: #e2e8f0;
    --mynt-canvas: #f8fafc;
    --mynt-surface: #ffffff;
    
    /* Primary & Semantic Brand Accents */
    --mynt-primary: #2563eb;
    --mynt-primary-hover: #1d4ed8;
    --mynt-primary-light: #eff6ff;
    --mynt-success: #059669;
    --mynt-success-light: #ecfdf5;
    --mynt-warning: #d97706;
    --mynt-warning-light: #fffbeb;
    --mynt-danger: #dc2626;
    --mynt-danger-light: #fef2f2;
    --mynt-info: #0284c7;
    --mynt-info-light: #f0f9ff;
    --mynt-purple: #7c3aed;
    --mynt-purple-light: #f5f3ff;

    /* Corporate Elevation & Radii */
    --mynt-radius-sm: 6px;
    --mynt-radius-md: 10px;
    --mynt-radius-lg: 14px;
    --mynt-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
    --mynt-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --mynt-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
}

/* ==========================================================================
   1. GLOBAL SYSTEM RESETS & FULL-WIDTH VIEWPORT CLAMPING
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--mynt-canvas) !important;
    color: var(--mynt-navy);
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Container & Wrapper Fluid Containment */
.main-content,
.content-area,
.container-fluid,
.wrapper,
.app-container,
.page-container {
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* Safe Area Insets for Native iOS/Android Notch & Home Indicator */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ==========================================================================
   2. CORPORATE CARDS, GRIDS & ZERO DEAD-SPACE CONTAINERS
   ========================================================================== */
.card, .dc-card, .section-card, .dashboard-card {
    background: var(--mynt-surface) !important;
    border: 1px solid var(--mynt-border) !important;
    border-radius: var(--mynt-radius-md) !important;
    box-shadow: var(--mynt-shadow-sm) !important;
    margin-bottom: 16px !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover, .dc-card:hover {
    box-shadow: var(--mynt-shadow-md) !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--mynt-border) !important;
    padding: 14px 18px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.card-header h5, .card-header h6, .card-title {
    font-weight: 700 !important;
    color: var(--mynt-navy-dark) !important;
    margin: 0 !important;
    font-size: 15px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 18px !important;
}

/* Self-Balancing KPI Status & Metric Grids */
.stats-grid,
.summary-row,
.kpi-grid,
#kpiCardsContainer,
.kpi-cards-grid,
.stat-cards-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

.stat-card, .kpi-card, .summary-card {
    background: var(--mynt-surface) !important;
    border: 1px solid var(--mynt-border) !important;
    border-radius: var(--mynt-radius-md) !important;
    padding: 12px 14px !important;
    box-shadow: var(--mynt-shadow-sm) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 72px;
}

.stat-card .value, .stat-value, .kpi-value {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--mynt-navy-dark) !important;
    line-height: 1.2 !important;
    font-variant-numeric: tabular-nums;
}

.stat-card .label, .stat-label, .kpi-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--mynt-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px !important;
}

/* ==========================================================================
   3. UNIVERSAL DATA TABLES & MATRIX SCROLL CONTAINMENT
   ========================================================================== */
.table-responsive,
.table-container,
.table-wrap,
.data-table-wrap,
.directory-table,
.user-table,
.breakdown-table,
.card-wrap,
#leadsTableContainer,
#teamLeadsTableContainer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
    border-radius: var(--mynt-radius-md);
    margin-bottom: 12px !important;
}

/* Ensure data tables don't wrap text aggressively, allowing clean horizontal swipe */
.table, .table-responsive > .table, .dataTable {
    width: 100% !important;
    min-width: max-content !important;
    margin-bottom: 0 !important;
    border-collapse: collapse !important;
}

.table thead th {
    background: #f1f5f9 !important;
    color: var(--mynt-slate) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 12px !important;
    border-bottom: 2px solid var(--mynt-border) !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.table tbody td {
    padding: 10px 12px !important;
    font-size: 13px !important;
    color: var(--mynt-navy) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.table tbody tr:hover td {
    background-color: #f8fafc !important;
}

/* ==========================================================================
   4. CORPORATE STATUS PILLS, BADGES & ACTION BUTTONS
   ========================================================================== */
.badge, .status-badge, .pill-badge {
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.3px;
}

.badge-success, .status-won, .status-active, .status-completed {
    background-color: var(--mynt-success-light) !important;
    color: var(--mynt-success) !important;
    border: 1px solid #a7f3d0 !important;
}

.badge-warning, .status-pending, .status-progress, .status-followup {
    background-color: var(--mynt-warning-light) !important;
    color: var(--mynt-warning) !important;
    border: 1px solid #fde68a !important;
}

.badge-danger, .status-lost, .status-rejected, .status-failed {
    background-color: var(--mynt-danger-light) !important;
    color: var(--mynt-danger) !important;
    border: 1px solid #fecaca !important;
}

.badge-info, .status-fresh, .status-new, .status-open {
    background-color: var(--mynt-info-light) !important;
    color: var(--mynt-info) !important;
    border: 1px solid #bae6fd !important;
}

.badge-purple, .status-verified, .badge-vgk {
    background-color: var(--mynt-purple-light) !important;
    color: var(--mynt-purple) !important;
    border: 1px solid #ddd6fe !important;
}

/* Corporate Buttons */
.btn {
    font-weight: 600 !important;
    border-radius: var(--mynt-radius-sm) !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease-in-out;
}

.btn-primary {
    background-color: var(--mynt-primary) !important;
    border-color: var(--mynt-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--mynt-primary-hover) !important;
    border-color: var(--mynt-primary-hover) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

.btn-outline-primary {
    border-color: var(--mynt-primary) !important;
    color: var(--mynt-primary) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--mynt-primary) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   5. FILTER TOOLBARS & SEARCH BARS AUTO-WRAP
   ========================================================================== */
.filters-bar, .filter-row, .filters-container, .search-container, .toolbar-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin-bottom: 14px !important;
    width: 100% !important;
}

.filter-group, .filter-item {
    flex: 1 1 auto;
    min-width: 140px;
}

.form-control, .form-select {
    border: 1px solid var(--mynt-border) !important;
    border-radius: var(--mynt-radius-sm) !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: var(--mynt-navy) !important;
    background-color: #ffffff !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    max-width: 100% !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--mynt-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
    outline: none !important;
}

/* ==========================================================================
   6. MOBILE & TABLET RESPONSIVE TUNING (≤991px)
   ========================================================================== */
@media (max-width: 991px) {
    .content-area, .main-content {
        padding: 12px 14px !important;
    }

    /* Page Banner / Header */
    .page-banner, .page-header {
        padding: 16px !important;
        margin-bottom: 14px !important;
        border-radius: var(--mynt-radius-md) !important;
    }

    .page-banner h1, .page-header h1 {
        font-size: 18px !important;
    }

    /* KPI Grids on Mobile: Clean 2-Column Symmetrical Grid */
    .summary-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stats-grid, #kpiCardsContainer, .kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Suppress duplicate floating mobile hamburger when top header is active */
    body:has(.top-header) .sidebar-mobile-toggle,
    body:has(#headerContainer) .sidebar-mobile-toggle,
    .top-header ~ .sidebar-mobile-toggle,
    #headerContainer ~ .sidebar-mobile-toggle {
        display: none !important;
    }

    .stat-card, .kpi-card {
        padding: 8px 10px !important;
        min-height: 60px;
    }

    .stat-card .value, .kpi-value {
        font-size: 16px !important;
    }

    .stat-card .label, .kpi-label {
        font-size: 9px !important;
    }

    /* Filter Inputs: Full-Width on Mobile */
    .filter-group, .filter-item, .filters-bar select, .filters-bar input {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    /* Modals on Mobile: Touch Bottom Sheet Format */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }

    .modal-content {
        border-radius: var(--mynt-radius-lg) !important;
    }

    /* Navigation & Tabs Scrolling */
    .nav-tabs, .nav-pills, .tab-headers {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
    }

    .nav-tabs .nav-link, .nav-pills .nav-link, .tab-header {
        white-space: nowrap !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* ============ PHONES (≤576px) ============ */
@media (max-width: 576px) {
    .content-area {
        padding: 8px 10px !important;
    }

    .card-header {
        padding: 10px 12px !important;
    }

    .card-body {
        padding: 12px !important;
    }

    .table thead th, .table tbody td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}