/* ============================================================
   CUSTOM STYLES — Axiom Workforce Portal
   Desktop-first with targeted mobile/tablet overrides.
   MudBlazor breakpoints: xs<600, sm<960, md<1280, lg<1920, xl>1920
   ============================================================ */

/* === DESKTOP BASE === */

.card-hover {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
}

.mud-card { transition: box-shadow 0.2s ease; }

/* Smooth progress bars */
.mud-progress-linear,
.mud-progress-circular { transition: all 0.3s ease; }

/* MudSimpleTable — allow horizontal scroll on overflow */
.table-scroll-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* === PHONE (xs: <600px) === */

@media (max-width: 599.98px) {

    /* Container tighten */
    .mud-container { padding-left: 10px !important; padding-right: 10px !important; }
    .mud-container.mt-4 { margin-top: 8px !important; }

    /* Typography scale-down */
    .mud-typography-h4 { font-size: 1.35rem !important; }
    .mud-typography-h5 { font-size: 1.1rem !important; }
    .mud-typography-h6 { font-size: 1rem !important; }

    /* App bar */
    .appbar-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 40vw;
        font-size: 1rem !important;
    }

    /* Cards */
    .mud-card { margin-bottom: 8px; }
    .card-hover:hover { transform: none; }

    /* Touch targets — minimum 44px */
    .mud-icon-button { min-width: 44px; min-height: 44px; }
    .mud-list-item { min-height: 48px; }
    .mud-nav-link { min-height: 48px; }
    .mud-button { min-height: 40px; }

    /* Prevent double-tap zoom */
    .mud-button, .mud-icon-button, .mud-chip, .mud-fab,
    .mud-list-item, .mud-nav-link, .mud-tab,
    .mud-checkbox, .mud-switch, .mud-radio {
        touch-action: manipulation;
    }

    /* Dialogs — full screen on phones */
    .mud-dialog {
        margin: 0 !important;
        max-height: 100vh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }
    .mud-dialog-content { max-height: calc(100vh - 130px) !important; overflow-y: auto; }
    .mud-dialog-actions { padding: 12px 16px !important; }

    /* Tables */
    .mud-table-cell { font-size: 0.85rem; }
    .mud-table-container { max-height: 65vh !important; }
    .mud-table-pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }
    .mud-table-pagination .mud-select { min-width: 60px !important; }

    /* MudSimpleTable horizontal scroll */
    .mud-simple-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Tabs compact */
    .mud-tabs .mud-tab { min-width: auto !important; padding: 8px 10px !important; font-size: 0.8rem !important; }

    /* Form spacing */
    .mud-input-control { margin-bottom: 4px; }

    /* Breadcrumbs */
    .mud-breadcrumbs { font-size: 0.8rem; padding: 4px 0; }

    /* Chips compact */
    .mud-chip { font-size: 0.75rem !important; }

    /* Stack Row wrapping — utility class */
    .mobile-wrap { flex-wrap: wrap !important; gap: 8px; }

    /* Full-width buttons on phone — utility class */
    .mobile-full-btn { width: 100% !important; }
}

/* === TABLET (sm: 600-959px) === */

@media (min-width: 600px) and (max-width: 959.98px) {

    .mud-main-content { padding-left: 0 !important; }
    .mud-drawer { width: 240px !important; }

    /* Touch targets */
    .mud-icon-button { min-width: 42px; min-height: 42px; }
    .mud-button { min-height: 38px; }

    /* Dialogs — near full width */
    .mud-dialog { max-width: 95vw !important; }

    /* MudSimpleTable scroll */
    .mud-simple-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Prevent double-tap zoom */
    .mud-button, .mud-icon-button, .mud-chip, .mud-fab,
    .mud-list-item, .mud-nav-link {
        touch-action: manipulation;
    }
}

/* === TABLET + PHONE (below md: <960px) === */

@media (max-width: 959.98px) {

    .mud-main-content { padding-left: 0 !important; }

    /* Table containers scrollable */
    .mud-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* === LARGE TABLET (md: 960-1279px) === */

@media (min-width: 960px) and (max-width: 1279.98px) {
    .mud-main-content { padding-left: 0 !important; }
}