/*
 * ============================================================
 * WONDER APP - VENDOR APPLICATION
 * Main CSS Entry Point
 * ============================================================
 *
 * File:
 * /vendor_app/assets/css/main.css
 *
 * Purpose:
 * Central CSS loader for the complete Vendor Application.
 *
 * Load this file from HTML:
 * /vendor_app/assets/css/main.css
 *
 * ============================================================
 */


/* ============================================================
   01. DESIGN TOKENS / VARIABLES
   ============================================================ */

@import url("./variables.css");


/* ============================================================
   02. RESET
   ============================================================ */

@import url("./reset.css");


/* ============================================================
   03. BASE / TYPOGRAPHY
   ============================================================ */

@import url("./base.css");


/* ============================================================
   04. GLOBAL LAYOUT
   ============================================================ */

@import url("./layout.css");


/* ============================================================
   05. HEADER / TOPBAR / SIDEBAR / NAVIGATION
   ============================================================ */

@import url("./header.css");
@import url("./sidebar.css");
@import url("./navigation.css");


/* ============================================================
   06. FORMS / BUTTONS / CARDS / TABLES
   ============================================================ */

@import url("./forms.css");
@import url("./buttons.css");
@import url("./cards.css");
@import url("./tables.css");


/* ============================================================
   07. MODALS / ALERTS
   ============================================================ */

@import url("./modal.css");
@import url("./alerts.css");


/* ============================================================
   08. AUTHENTICATION
   ============================================================ */

@import url("./auth.css");


/* ============================================================
   09. DASHBOARD
   ============================================================ */

@import url("./dashboard.css");


/* ============================================================
   10. ONBOARDING
   ============================================================ */

@import url("./onboarding.css");


/* ============================================================
   11. BUSINESS
   ============================================================ */

@import url("./business.css");


/* ============================================================
   12. ENQUIRIES
   ============================================================ */

@import url("./enquiries.css");


/* ============================================================
   13. LEADS
   ============================================================ */

@import url("./leads.css");


/* ============================================================
   14. QUOTES
   ============================================================ */

@import url("./quotes.css");


/* ============================================================
   15. ORDERS
   ============================================================ */

@import url("./orders.css");


/* ============================================================
   16. CUSTOMERS
   ============================================================ */

@import url("./customers.css");


/* ============================================================
   17. SERVICES
   ============================================================ */

@import url("./services.css");


/* ============================================================
   18. PRODUCTS
   ============================================================ */

@import url("./products.css");


/* ============================================================
   19. TEAM
   ============================================================ */

@import url("./team.css");


/* ============================================================
   20. BILLING
   ============================================================ */

@import url("./billing.css");


/* ============================================================
   21. REVIEWS
   ============================================================ */

@import url("./reviews.css");


/* ============================================================
   22. MESSAGES
   ============================================================ */

@import url("./messages.css");


/* ============================================================
   23. NOTIFICATIONS
   ============================================================ */

@import url("./notifications.css");


/* ============================================================
   24. ANALYTICS
   ============================================================ */

@import url("./analytics.css");


/* ============================================================
   25. AI
   ============================================================ */

@import url("./ai.css");


/* ============================================================
   26. PROFILE
   ============================================================ */

@import url("./profile.css");


/* ============================================================
   27. SETTINGS
   ============================================================ */

@import url("./settings.css");


/* ============================================================
   28. SECURITY
   ============================================================ */

@import url("./security.css");


/* ============================================================
   29. SUPPORT
   ============================================================ */

@import url("./support.css");


/* ============================================================
   30. RESPONSIVE
   ============================================================ */

@import url("./responsive.css");


/* ============================================================
   GLOBAL VENDOR APP SAFETY / CONSISTENCY
   ============================================================ */

/*
 * Prevent accidental horizontal overflow.
 */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}


/*
 * Make media responsive.
 */

img,
svg,
video,
canvas {
    max-width: 100%;
}


/*
 * Buttons and form controls inherit the application font.
 */

button,
input,
select,
textarea {
    font: inherit;
}


/*
 * Links do not show browser default underline
 * unless a component specifically adds it.
 */

a {
    color: inherit;
    text-decoration: none;
}


/*
 * Better keyboard focus accessibility.
 */

:focus-visible {
    outline: 3px solid var(--color-focus, #2563eb);
    outline-offset: 2px;
}


/*
 * Prevent hidden elements from unexpectedly appearing.
 */

[hidden] {
    display: none !important;
}


/* ============================================================
   APPLICATION ROOT
   ============================================================ */

#app,
#vendor-app,
.vendor-app {
    width: 100%;
    min-height: 100vh;
}


/* ============================================================
   COMMON UTILITY CLASSES
   ============================================================ */

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.hidden {
    display: none !important;
}

.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.flex {
    display: flex !important;
}

.inline-flex {
    display: inline-flex !important;
}

.grid {
    display: grid !important;
}

.items-center {
    align-items: center !important;
}

.items-start {
    align-items: flex-start !important;
}

.items-end {
    align-items: flex-end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}


/* ============================================================
   SPACING UTILITIES
   ============================================================ */

.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.p-0 {
    padding: 0 !important;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

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


/* ============================================================
   PRINT
   ============================================================ */

@media print {

    .no-print,
    .sidebar,
    .vendor-sidebar,
    .topbar-actions,
    .header-actions,
    .mobile-menu-toggle {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .main-content,
    .page-content,
    .dashboard-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    a {
        text-decoration: none !important;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   DARK MODE FOUNDATION
   ============================================================ */

/*
 * Actual colors should normally come from variables.css.
 * This section only provides a safe application-level hook.
 */

[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="light"] {
    color-scheme: light;
}


/* ============================================================
   END OF MAIN.CSS
   ============================================================ */