/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
Last Updated: 2025-01-08T01:10:00 - Force S3 refresh
*/

/* =============================================================================
   FULL-WIDTH LAYOUT CUSTOMIZATION
   Purpose: Maximize horizontal space for tables and content display
   Change ID: update-fullwidth-layout
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CONTAINER-FLUID - Reduce horizontal padding
   ----------------------------------------------------------------------------- */
.container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* -----------------------------------------------------------------------------
   2. PAGE-CONTENT - Reduce padding for all layouts
   ----------------------------------------------------------------------------- */
.page-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* -----------------------------------------------------------------------------
   3. SEMIBOX LAYOUT OVERRIDES - Full width, no margins
   Key fix: Remove all semibox margins and padding gaps
   ----------------------------------------------------------------------------- */

/* Override semibox main-content padding (default is 110px each side!) */
[data-layout=semibox] .main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Sidebar - Remove margin, make it touch the edge */
[data-layout=semibox] .navbar-menu {
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Topbar - Full width, no gaps */
[data-layout=semibox] #page-topbar {
    left: 0 !important;
    top: 0 !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Main content - Adjust margin for sidebar without extra gap */
[data-layout=semibox] .main-content {
    margin-right: var(--vz-vertical-menu-width) !important;
}

/* Footer - Full width */
[data-layout=semibox] .footer {
    left: 0 !important;
    right: var(--vz-vertical-menu-width) !important;
}

/* Desktop screens (1440px+) - Override semibox extra spacing */
@media (min-width: 1440px) {
    [data-layout=semibox] .main-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-right: var(--vz-vertical-menu-width) !important;
    }

    [data-layout=semibox] .page-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    [data-layout=semibox] #page-topbar {
        right: var(--vz-vertical-menu-width) !important;
        left: 0 !important;
        top: 0 !important;
    }

    [data-layout=semibox] .footer {
        right: var(--vz-vertical-menu-width) !important;
        left: 0 !important;
    }

    /* Different sidebar sizes */
    [data-layout=semibox][data-sidebar-size=md] .main-content {
        margin-right: var(--vz-vertical-menu-width-md) !important;
    }
    [data-layout=semibox][data-sidebar-size=md] #page-topbar,
    [data-layout=semibox][data-sidebar-size=md] .footer {
        right: var(--vz-vertical-menu-width-md) !important;
    }

    [data-layout=semibox][data-sidebar-size=sm] .main-content,
    [data-layout=semibox][data-sidebar-size=sm-hover] .main-content {
        margin-right: var(--vz-vertical-menu-width-sm) !important;
    }
    [data-layout=semibox][data-sidebar-size=sm] #page-topbar,
    [data-layout=semibox][data-sidebar-size=sm] .footer,
    [data-layout=semibox][data-sidebar-size=sm-hover] #page-topbar,
    [data-layout=semibox][data-sidebar-size=sm-hover] .footer {
        right: var(--vz-vertical-menu-width-sm) !important;
    }
}

/* Large desktop screens (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439.98px) {
    .main-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .page-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* -----------------------------------------------------------------------------
   4. CARD BODY - Reduce padding for table containers
   ----------------------------------------------------------------------------- */

/* Tables inside cards should have minimal padding */
.card-body:has(.table),
.card-body:has(.table-responsive) {
    padding: 12px !important;
}

/* Alternative for browsers that don't support :has() */
.card-body.table-card {
    padding: 12px !important;
}

/* -----------------------------------------------------------------------------
   5. TABLE RESPONSIVE - Full width optimization
   ----------------------------------------------------------------------------- */
.table-responsive {
    margin-left: 0;
    margin-right: 0;
}

/* -----------------------------------------------------------------------------
   6. RESPONSIVE BREAKPOINTS
   ----------------------------------------------------------------------------- */

/* Tablet (768px - 1023px) - Balanced padding */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .page-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .card-body:has(.table),
    .card-body:has(.table-responsive),
    .card-body.table-card {
        padding: 12px !important;
    }
}

/* Mobile (<768px) - Touch-friendly padding */
@media (max-width: 767.98px) {
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .page-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .card-body:has(.table),
    .card-body:has(.table-responsive),
    .card-body.table-card {
        padding: 10px !important;
    }
}

/* -----------------------------------------------------------------------------
   7. PAGE TITLE - Consistent with full-width layout
   ----------------------------------------------------------------------------- */
.page-title-box {
    padding-left: 0;
    padding-right: 0;
}

/* -----------------------------------------------------------------------------
   8. ROW GUTTERS - Reduce default Bootstrap gutters for tighter layout
   ----------------------------------------------------------------------------- */
.row {
    --bs-gutter-x: 1rem;
}

/* Tighter gutters for table rows */
.row.g-2 {
    --bs-gutter-x: 0.5rem;
}