/* ==============================================================
   Rabbit Accounts - Mobile-Responsive Enhancements
   Mobile-First Design Approach
   Breakpoints: 768px (tablet), 1024px (desktop)
   Touch Target Minimum: 44x44px (iOS/Android guidelines)
   Last Updated: October 3, 2025
   ============================================================== */

/* ==============================================================
   1. MOBILE-FIRST BASE STYLES (Default, < 768px)
   ============================================================== */

/* Touch Targets - Minimum 44x44px */
.btn,
.nav-link,
.card-header,
.nav-item a,
input[type="button"],
input[type="submit"],
button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
}

/* Card Spacing */
.card {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 8px;
}

.card-body {
    padding: 1rem;
}

/* Typography Scale - Mobile-First */
h1 {
    font-size: 24px;
    /* 1.5rem */
}

h2 {
    font-size: 20px;
    /* 1.25rem */
}

h3 {
    font-size: 18px;
    /* 1.125rem */
}

body,
p,
div {
    font-size: 16px;
    /* 1rem - minimum for mobile readability */
}

small,
.small-text {
    font-size: 14px;
    /* 0.875rem - minimum readable size */
}

/* Container Spacing */
.container,
.container-fluid {
    padding-left: 16px;
    padding-right: 16px;
}

/* Row Spacing */
.row {
    margin-left: -12px;
    margin-right: -12px;
}

.row>* {
    padding-left: 12px;
    padding-right: 12px;
}

/* Mobile Stack Utility - Force Vertical Stacking */
.mobile-stack>* {
    width: 100% !important;
    margin-bottom: 1rem;
}

/* Mobile Hide Utility */
.mobile-hide {
    display: none !important;
}

/* Forms - Full Width on Mobile */
input,
select,
textarea,
.form-control,
.form-select {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    /* Prevent zoom on iOS */
}

/* Buttons - Full Width on Mobile */
.btn-block,
.mobile-btn-block {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
}

/* Tables - Horizontal Scroll Already Applied via .table-responsive */
.table-responsive {
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
}

/* Charts - Responsive Wrapper */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
    margin-bottom: 1rem;
}

/* Cards - Vertical Stacking */
.metrics-section .row {
    display: flex;
    flex-direction: column;
}

.metrics-section .col-lg-3,
.metrics-section .col-md-6,
.metrics-section .col-md-3 {
    width: 100%;
    max-width: 100%;
}

/* KPI Cards */
.kpi-card {
    padding: 1rem;
    margin-bottom: 1rem;
}

/* Navigation - Mobile */
.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
}

/* ==============================================================
   2. TABLET BREAKPOINT (min-width: 768px)
   ============================================================== */
@media (min-width: 768px) {

    /* Typography */
    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

    /* Container */
    .container {
        max-width: 720px;
        margin: 0 auto;
    }

    /* Metrics Section - 2 Column */
    .metrics-section .row {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .metrics-section .col-md-6 {
        width: 50%;
        max-width: 50%;
    }

    .metrics-section .col-md-3 {
        width: 50%;
        /* Still 2-column on tablet */
        max-width: 50%;
    }

    /* Show Hidden Elements */
    .tablet-show {
        display: block !important;
    }

    /* Forms - Side by Side on Tablet */
    .form-row {
        display: flex;
        gap: 1rem;
    }

    .form-row>* {
        flex: 1;
    }

    /* Buttons - Inline on Tablet */
    .btn-group-tablet {
        display: flex;
        gap: 0.5rem;
    }

    .btn-group-tablet .btn {
        flex: 1;
        width: auto;
    }

    /* Charts */
    .chart-container {
        height: 350px;
    }
}

/* ==============================================================
   3. DESKTOP BREAKPOINT (min-width: 1024px)
   ============================================================== */
@media (min-width: 1024px) {

    /* Typography */
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 24px;
    }

    /* Container */
    .container {
        max-width: 1200px;
    }

    /* Metrics Section - 3 or 4 Column */
    .metrics-section .col-lg-3 {
        width: 25%;
        max-width: 25%;
    }

    .metrics-section .col-lg-4 {
        width: 33.333%;
        max-width: 33.333%;
    }

    .metrics-section .col-md-6 {
        width: 50%;
        max-width: 50%;
    }

    /* Show Hidden Elements */
    .desktop-show {
        display: block !important;
    }

    .mobile-hide {
        display: block !important;
    }

    /* Charts */
    .chart-container {
        height: 400px;
    }

    /* Sidebar Navigation */
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 280px;
        overflow-y: auto;
    }

    .main-content {
        margin-left: 280px;
    }
}

/* ==============================================================
   4. TOUCH-SPECIFIC ENHANCEMENTS
   ============================================================== */
@media (hover: none) and (pointer: coarse) {

    /* Increase Touch Targets */
    .btn,
    .nav-link,
    a {
        min-height: 48px;
        min-width: 48px;
    }

    /* Card Click Areas */
    .card-clickable {
        cursor: pointer;
        transition: transform 0.2s;
    }

    .card-clickable:active {
        transform: scale(0.98);
    }

    /* Remove Hover Effects on Touch */
    .btn:hover,
    .card:hover {
        transform: none;
    }

    /* Increase Spacing for Touch */
    .btn {
        margin-bottom: 0.75rem;
    }
}

/* ==============================================================
   5. BUSINESS INTELLIGENCE PAGE-SPECIFIC
   ============================================================== */

/* Dashboard (Home.razor) */
.dashboard-header {
    padding: 1rem 0;
}

.business-health-indicator {
    margin-bottom: 1rem;
}

/* Sales Performance */
.sales-performance .summary-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .sales-performance .summary-cards {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sales-performance .summary-cards>* {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

@media (min-width: 1024px) {
    .sales-performance .summary-cards>* {
        flex: 1 1 calc(25% - 0.75rem);
    }
}

/* Vendor Performance Scorecard */
.vendor-performance .scorecard-grid {
    overflow-x: auto;
}

/* Customer Credit & Aging */
.customer-credit .aging-table {
    overflow-x: auto;
}

.customer-credit .risk-card {
    margin-bottom: 1rem;
}

/* Low Stock Alerts */
.low-stock-alerts .alert-card {
    padding: 1rem;
    margin-bottom: 1rem;
}

/* ==============================================================
   7. UTILITY CLASSES
   ============================================================== */

/* Spacing Utilities */
.mb-mobile-2 {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .mb-mobile-2 {
        margin-bottom: 0;
    }
}

/* Flex Utilities */
.flex-column-mobile {
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .flex-column-mobile {
        flex-direction: row;
    }
}

/* Gap Utilities */
.gap-mobile-1 {
    gap: 0.5rem;
}

.gap-mobile-2 {
    gap: 1rem;
}

.gap-mobile-3 {
    gap: 1.5rem;
}

/* Width Utilities */
.w-100-mobile {
    width: 100%;
}

@media (min-width: 768px) {
    .w-100-mobile {
        width: auto;
    }
}

/* ==============================================================
   8. ACCESSIBILITY ENHANCEMENTS
   ============================================================== */

/* Focus Visible */
*:focus-visible {
    outline: 2px solid #258cfb;
    outline-offset: 2px;
}

/* Skip to Main Content */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 100;
}

.skip-to-main:focus {
    top: 0;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==============================================================
   9. PRINT STYLES
   ============================================================== */
@media print {

    .no-print,
    .nav,
    .navbar,
    .sidebar,
    .btn,
    button {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    .card {
        border: 1px solid #000;
        page-break-inside: avoid;
    }

    .chart-container {
        page-break-inside: avoid;
    }
}

/* ==============================================================
   END OF RESPONSIVE.CSS
   ============================================================== */