/**
 * Dashboard Responsive & UI/UX Improvements
 * WEMARD Multi-tenant Translation Centers Platform
 * 
 * 1. Remove horizontal scrollbars
 * 2. Optimized table column widths
 * 3. Responsive analytics widgets
 * 4. Improved card/summary box layouts
 */

/* ============================================
   1. GLOBAL OVERFLOW & SCROLL CONTROL
   ============================================ */

/* Prevent horizontal scroll on main containers */
.dashboard-main,
.dashboard-main-body {
    overflow-x: hidden;
    max-width: 100%;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

/* Ensure cards don't cause overflow */
.card {
    overflow: hidden;
    max-width: 100%;
}

/* Remove default table min-width that causes horizontal scroll */
.bordered-table,
.table {
    min-width: auto !important;
    width: 100%;
    table-layout: auto;
}

/* Force table-responsive to hide scrollbar when not needed */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive::-webkit-scrollbar {
    height: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--neutral-300);
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

/* Hide scrollbar for tables that fit */
@media (min-width: 992px) {
    .table-responsive.scroll-sm {
        overflow-x: visible;
    }
}

/* ============================================
   2. TABLE COLUMN OPTIMIZATION
   ============================================ */

/* DO NOT use table-fixed - it breaks responsive layouts */
/* Instead, let table auto-size with max-width constraints */

/* Compact table cells */
.table-compact th,
.table-compact td,
.bordered-table.table-compact th,
.bordered-table.table-compact td {
    padding: 10px 12px !important;
    font-size: 0.8125rem;
}

/* Dashboard-specific compact tables */
.dashboard-main-body .bordered-table th,
.dashboard-main-body .bordered-table td {
    padding: 10px 12px !important;
}

/* Name column - flexible width */
.col-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

/* Location column - compact merged info */
.col-location {
    white-space: nowrap;
}

/* Type/Category column */
.col-type {
    text-align: center;
    white-space: nowrap;
}

/* Truncate long text in table cells */
.text-truncate-cell {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Merged info column style */
.cell-merged-info {
    min-width: 80px;
    max-width: 130px;
}

.cell-merged-info .cell-primary {
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--text-primary-light);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.cell-merged-info .cell-secondary {
    font-size: 0.6875rem;
    color: var(--text-secondary-light);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Compact badge styling for tables */
.badge-compact {
    padding: 4px 8px !important;
    font-size: 0.6875rem !important;
}

/* Narrow action column */
.col-action {
    text-align: center;
    white-space: nowrap;
}

/* Compact action buttons */
.action-btn-sm {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.8rem !important;
}

.action-btn-sm iconify-icon {
    font-size: 0.875rem !important;
}

/* Status column - compact */
.col-status {
    text-align: center;
    white-space: nowrap;
}

/* Status badge small */
.status-badge-sm {
    padding: 2px 8px !important;
    font-size: 0.6875rem !important;
    white-space: nowrap;
}

/* Amount/Price column - right aligned, compact */
.col-amount {
    text-align: right;
    white-space: nowrap;
}

.col-amount small {
    font-size: 0.6875rem;
    line-height: 1.4;
}

/* Date column - compact */
.col-date {
    white-space: nowrap;
}

/* ID/Number column - minimal */
.col-id {
    text-align: center;
    white-space: nowrap;
}

/* ============================================
   3. DASHBOARD STATS CARDS
   ============================================ */

/* Stat cards - responsive sizing */
.stat-card-compact {
    padding: 16px !important;
}

.stat-card-compact .card-body {
    padding: 0 !important;
}

/* Ensure stat values don't overflow */
.stat-value {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Compact icon containers */
.stat-icon-sm {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0;
}

.stat-icon-sm iconify-icon {
    font-size: 1.25rem;
}

/* Responsive stat cards grid */
@media (max-width: 575px) {
    .col-xxl-4.col-sm-6 .card.p-3 {
        padding: 12px !important;
    }
    
    .w-48-px {
        width: 40px !important;
        height: 40px !important;
    }
    
    .w-48-px iconify-icon {
        font-size: 1.25rem !important;
    }
}

/* ============================================
   4. ANALYTICS WIDGETS & CHARTS
   ============================================ */

/* Chart container - prevent overflow */
.chart-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* ApexCharts responsive fix */
.apexcharts-canvas {
    max-width: 100% !important;
}

.apexcharts-svg {
    max-width: 100%;
}

/* Sparkline charts - compact */
.sparkline-container {
    width: 80px;
    height: 50px;
    flex-shrink: 0;
}

/* Donut/Pie chart container */
.chart-donut-container {
    max-width: 180px;
    margin: 0 auto;
}

/* ============================================
   5. ROLE-SPECIFIC DASHBOARD WIDGETS
   ============================================ */

/* Performance table - compact */
.performance-table .table th,
.performance-table .table td {
    padding: 8px 10px !important;
    font-size: 0.8125rem;
}

/* Staff/Branch performance cards */
.performance-stat-box {
    padding: 12px !important;
}

.performance-stat-box h4,
.performance-stat-box h5 {
    font-size: clamp(1rem, 3vw, 1.25rem);
    margin-bottom: 2px;
}

.performance-stat-box small {
    font-size: 0.6875rem;
}

/* Owner/Admin overview grid */
@media (max-width: 767px) {
    .col-4 .performance-stat-box {
        padding: 10px !important;
    }
    
    .col-4 .performance-stat-box iconify-icon {
        font-size: 1.5rem !important;
    }
}

/* ============================================
   6. QUICK ACTIONS & BUTTONS
   ============================================ */

/* Quick action cards - responsive */
.quick-action-item {
    padding: 8px 16px 8px 8px !important;
    min-width: auto;
}

.quick-action-item .w-44-px {
    width: 36px !important;
    height: 36px !important;
}

@media (max-width: 767px) {
    .quick-action-item {
        padding: 8px !important;
        flex: 1 1 45%;
    }
    
    .quick-action-item > div:last-child {
        display: none;
    }
}

/* ============================================
   7. RECENT ORDERS TABLE - DASHBOARD
   ============================================ */

/* Compact recent orders table */
.recent-orders-table th,
.recent-orders-table td {
    padding: 10px 12px !important;
    font-size: 0.8125rem;
}

/* Customer info cell - merged */
.customer-cell {
    max-width: 150px;
}

.customer-cell .text-md {
    font-size: 0.8125rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-cell .text-sm {
    font-size: 0.6875rem !important;
}

/* Status badge - compact for dashboard */
.status-badge-sm {
    padding: 4px 10px !important;
    font-size: 0.6875rem !important;
    white-space: nowrap;
}

/* ============================================
   8. RESPONSIVE BREAKPOINTS
   ============================================ */

/* Large tablets and small desktops */
@media (max-width: 1199px) {
    .dashboard-main-body {
        padding: 12px !important;
    }
    
    .bordered-table th,
    .bordered-table td {
        padding: 10px 12px !important;
        font-size: 0.8125rem;
    }
}

/* Tablets */
@media (max-width: 991px) {
    /* Stack cards more efficiently */
    .col-xxl-8 .row .col-xxl-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* Reduce card padding */
    .card-body {
        padding: 16px !important;
    }
    
    .card-header {
        padding: 12px 16px !important;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .dashboard-main-body {
        padding: 10px !important;
    }
    
    /* Full width cards on mobile */
    .col-xxl-8 .row .col-xxl-4,
    .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Compact card padding */
    .card-body {
        padding: 12px !important;
    }
    
    /* Hide less important columns on mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Smaller fonts for mobile tables */
    .bordered-table th,
    .bordered-table td {
        padding: 8px 10px !important;
        font-size: 0.75rem;
    }
    
    /* Compact badges */
    .badge,
    [class*="px-24"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Stack button groups vertically */
    .btn-group {
        display: flex;
        flex-direction: column;
    }
    
    .btn-group .btn {
        width: 100%;
        border-radius: 0.375rem !important;
        margin-bottom: 0.5rem;
    }
    
    /* Full width form controls */
    .form-select,
    .form-control {
        width: 100% !important;
        max-width: 100%;
    }
    
    /* Filter bar mobile */
    .card .d-flex.align-items-center {
        flex-wrap: wrap !important;
    }
    
    .card .d-flex.align-items-center > * {
        margin-bottom: 0.5rem;
    }
    
    /* Modal full screen */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100%;
    }
    
    .modal-content {
        height: 100%;
        border-radius: 0 !important;
    }
    
    /* Header actions stack */
    .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 0.75rem;
    }
    
    /* Date inputs take full width */
    input[type="date"],
    input[type="datetime-local"] {
        width: 100% !important;
    }
    
    /* Reduce icon sizes */
    .w-48-px {
        width: 36px !important;
        height: 36px !important;
    }
    
    .w-32-px {
        width: 28px !important;
        height: 28px !important;
    }
    
    /* Compact dropdown */
    .dropdown-menu {
        font-size: 0.875rem;
        min-width: 150px !important;
    }
    
    /* Mobile table improvements */
    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .table thead,
    .table tbody,
    .table tr {
        display: table;
        width: 100%;
    }
    
    /* Customer/user display compact */
    .d-flex.align-items-center .text-sm {
        font-size: 0.75rem !important;
    }
    
    /* Pagination mobile */
    .pagination .page-link {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* ============================================
   9. UTILITY CLASSES FOR DASHBOARD
   ============================================ */

/* Text truncation utilities */
.truncate-120 {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate-150 {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate-200 {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* No wrap for numbers/amounts */
.nowrap {
    white-space: nowrap;
}

/* Compact gap utilities */
.gap-compact {
    gap: 4px !important;
}

/* Flex shrink control */
.flex-shrink-0 {
    flex-shrink: 0 !important;
}

/* Hide horizontal overflow per-element */
.no-h-scroll {
    overflow-x: hidden !important;
}

/* Width utilities for 40px sizing */
.w-40-px {
    width: 40px !important;
}

.h-40-px {
    height: 40px !important;
}

/* ============================================
   10. PRINT STYLES
   ============================================ */

@media print {
    .dashboard-main {
        margin-inline-start: 0 !important;
    }
    
    .sidebar,
    .navbar,
    .quick-action-item,
    .action-btn-sm {
        display: none !important;
    }
    
    .table-responsive {
        overflow: visible !important;
    }
}

/* ============================================
   11. ENHANCED MOBILE RESPONSIVENESS
   ============================================ */

/* Mobile-specific table handling */
@media (max-width: 767px) {
    /* Remove table horizontal scroll by making it stack-friendly */
    .table-responsive {
        border: 0;
    }
    
    /* Action button groups responsive */
    .btn-group-vertical-mobile {
        flex-direction: column !important;
        width: 100%;
    }
    
    .btn-group-vertical-mobile .btn {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }
    
    /* Filter forms responsive */
    form.d-flex.flex-wrap,
    .filter-form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    form.d-flex.flex-wrap > div,
    .filter-form > div {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.75rem;
    }
    
    form.d-flex.flex-wrap button,
    form.d-flex.flex-wrap a.btn,
    .filter-form button,
    .filter-form a.btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Card headers - only stack if they contain a header + action group pattern */
    .card-header.flex-wrap {
        flex-wrap: wrap !important;
    }
    
    /* Header-level justify-between only stacks explicitly */
    /* Do NOT force-stack all card-header d-flex elements */
    
    /* Stats cards mobile optimization */
    .col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Table action column - always visible on mobile */
    .col-action .dropdown {
        position: static;
    }
    
    .col-action .dropdown-menu {
        right: 0 !important;
        left: auto !important;
    }
    
    /* Badge text wrapping on mobile */
    .badge {
        white-space: normal !important;
        line-height: 1.3;
    }
    
    /* Chart responsive heights */
    #acquisitionChart,
    #revenueChart,
    [id$="Chart"] {
        min-height: 250px !important;
    }
}

/* Very small mobile devices */
@media (max-width: 375px) {
    .dashboard-main-body {
        padding: 8px !important;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 10px !important;
    }
    
    h5, .h5 {
        font-size: 1rem !important;
    }
    
    h6, .h6 {
        font-size: 0.9rem !important;
    }
    
    /* Ultra-compact action buttons */
    .action-btn-sm {
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
    }
    
    /* Compact table on very small screens */
    .bordered-table th,
    .bordered-table td {
        padding: 6px 8px !important;
        font-size: 0.7rem !important;
    }
}

/* ============================================
   12. TABLE IMPROVEMENTS FOR ALL SCREENS
   ============================================ */

/* Prevent table column header wrapping */
.table thead th {
    white-space: nowrap;
    font-weight: 600;
}

/* Better table cell padding */
.table th,
.table td {
    vertical-align: middle;
}

/* Table hover effect */
.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Striped tables */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.015);
}

/* Bordered tables without horizontal scroll */
.bordered-table {
    border-collapse: collapse;
    width: 100%;
}

.bordered-table th,
.bordered-table td {
    border: 1px solid #e4e7ec;
}

/* Table with colored rows - responsive */
.colored-row-table tbody tr td {
    padding: 12px !important;
}

@media (max-width: 575px) {
    .colored-row-table tbody tr td {
        padding: 8px !important;
    }
}

/* ============================================
   13. FORM IMPROVEMENTS
   ============================================ */

/* Form labels mobile */
@media (max-width: 575px) {
    .form-label {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }
    
    .form-control,
    .form-select {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* Modal forms */
    .modal-body .form-group,
    .modal-body .mb-3 {
        margin-bottom: 1rem !important;
    }
}

/* ============================================
   14. BREADCRUMB RESPONSIVE
   ============================================ */

@media (max-width: 575px) {
    .breadcrumb {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }
}

/* ============================================
   15. EXPORT BUTTONS RESPONSIVE
   ============================================ */

@media (max-width: 767px) {
    /* Export button group - only stack when they're action groups, not all flex+gap3 */
    .btn-export-group {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
}

/* ============================================
   16. PAGINATION IMPROVEMENTS
   ============================================ */

/* Pagination responsive */
@media (max-width: 575px) {
    .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .pagination .page-item {
        margin: 2px;
    }
    
    .pagination .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        min-width: 32px;
        text-align: center;
    }
    
    /* Hide page numbers on very small screens, keep prev/next */
    .pagination .page-item:not(.disabled):not(.active):not(:first-child):not(:last-child) {
        display: none;
    }
    
    .pagination .page-item.active {
        display: inline-block;
    }
}

/* ============================================
   17. DROPDOWN MENU IMPROVEMENTS
   ============================================ */

/* Dropdown menus on mobile */
@media (max-width: 575px) {
    .dropdown-menu {
        min-width: 200px !important;
        max-width: 90vw;
    }
    
    .dropdown-item {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
        white-space: normal;
    }
}

/* ============================================
   18. ALERT & MESSAGE RESPONSIVE
   ============================================ */

@media (max-width: 575px) {
    .messages-container {
        right: 10px !important;
        left: 10px !important;
        top: 70px !important;
        min-width: auto !important;
        max-width: none !important;
    }
    
    .alert {
        font-size: 0.875rem;
        padding: 0.75rem 1rem;
    }
}

/* ============================================
   19. CHART RESPONSIVE CONTAINERS
   ============================================ */

/* All chart containers should be responsive */
.chart-container,
[id$="Chart"],
[class*="chart"] {
    width: 100%;
    overflow: hidden;
}

@media (max-width: 767px) {
    .apexcharts-toolbar {
        display: none !important;
    }
}

/* ============================================
   20. UTILITY CLASSES - RESPONSIVE TEXT
   ============================================ */

/* Responsive text utilities */
.text-responsive {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

.text-responsive-sm {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
}

.text-responsive-lg {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
}

/* Hide text on mobile, show icon only */
@media (max-width: 575px) {
    .hide-text-mobile span:not(.badge) {
        display: none !important;
    }
    
    .hide-text-mobile iconify-icon {
        margin: 0 !important;
    }
}

/* ============================================
   21. SPECIFIC FIX FOR WIDE TABLES
   ============================================ */

/* Force tables to fit container without horizontal scroll */
.table-fit {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
}

.table-fit th,
.table-fit td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Allow specific columns to wrap */
.table-fit .allow-wrap {
    white-space: normal !important;
}

/* Responsive table wrapper improvement */
.table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 992px) {
    .table-responsive-custom {
        overflow-x: visible;
    }
}

/* ============================================
   22. ORDER DETAIL / EDIT — MOBILE
   ============================================ */

/* Order card header: action buttons wrap on small screens */
@media (max-width: 575px) {
    .card-header .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
        gap: 6px !important;
    }

    /* Print/export buttons shrink */
    .card-header .btn-sm {
        padding: 5px 10px !important;
        font-size: 0.75rem !important;
    }

    /* Status badge row */
    .card-header .badge {
        font-size: 0.7rem !important;
    }

    /* Price summary block stacks */
    .order-price-summary .col-sm-4 {
        width: 50% !important;
    }
}

/* Price breakdown table inside order card */
@media (max-width: 767px) {
    .bordered-table th,
    .bordered-table td {
        padding: 10px !important;
        font-size: 0.8rem !important;
    }

    /* tfoot grand total row */
    .bordered-table tfoot td {
        font-size: 0.9rem !important;
    }
}

/* ============================================
   23. REPORT PAGES — MOBILE
   ============================================ */

@media (max-width: 767px) {
    /* Filter bar wraps neatly */
    .report-filter-row .form-select,
    .report-filter-row .form-control {
        font-size: 0.875rem !important;
    }

    /* Metric cards: 2 per row on xs */
    .col-xxl-3.col-sm-6 {
        width: 50%;
    }

    /* Revenue/chart cards full width on mobile already via col-xxl-8 stacking */
    [class*="col-xxl-"] {
        width: 100%;
    }
}

/* ============================================
   24. ROLE FORM — MOBILE
   ============================================ */

@media (max-width: 767px) {
    /* Permission checkboxes: 2 columns instead of 3 */
    .permission-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Preset buttons: stack vertically */
    .role-presets .btn {
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
    }
}

/* ============================================
   25. AUTHENTICATION PAGES — MOBILE
   ============================================ */

@media (max-width: 575px) {
    .auth-card {
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100vh;
    }
}

/* ============================================
   26. SIDEBAR PROFILE / USER INFO — MOBILE
   ============================================ */

@media (max-width: 1199px) {
    /* Sidebar profile block */
    .sidebar-user {
        padding: 12px 16px !important;
    }

    .sidebar-user .user-name {
        font-size: 0.875rem !important;
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================
   27. MODALS on MOBILE — FULL SCREEN FEEL
   ============================================ */

@media (max-width: 575px) {
    .modal-dialog:not(.modal-sm) {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-header {
        padding: 12px 16px !important;
    }

    .modal-footer {
        padding: 10px 16px !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 80px;
    }
}

/* ============================================
   28. BREADCRUMB — TRUNCATE ON MOBILE
   ============================================ */

@media (max-width: 575px) {
    .breadcrumb {
        font-size: 0.75rem !important;
    }

    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 4px !important;
    }

    .page-title {
        font-size: 1.1rem !important;
    }

    .page-subtitle {
        font-size: 0.75rem !important;
    }
}

/* ============================================
   29. GENERAL CARD IMPROVEMENTS ON MOBILE
   ============================================ */

@media (max-width: 767px) {
    .card-body {
        padding: 14px !important;
    }

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

@media (max-width: 575px) {
    /* Stats row: allow xs wrapping */
    .row.gy-4 > [class*="col-sm-6"] {
        width: 50%;
    }

    .row.gy-4 > [class*="col-sm-4"] {
        width: 50%;
    }
}