/**
 * ==========================================================================
 * SuperMikhmon - Unified Mobile Responsive Stylesheet
 * Fully optimized for mobile screens (<= 768px, <= 640px, and <= 380px)
 * ==========================================================================
 */

@media (max-width: 768px) {
    /* ─── 1. ROOT & GLOBAL RESET ─── */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-size: 0.84rem;
        line-height: 1.4;
    }

    /* ─── 2. TYPOGRAPHY SCALING (COMPACT & SLEEK) ─── */
    h1, .page-title {
        font-size: 1.22rem !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        letter-spacing: -0.02em !important;
    }

    h2, .panel-title {
        font-size: 1.02rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    h3, .modal-title {
        font-size: 0.92rem !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    .eyebrow {
        font-size: 0.68rem !important;
        letter-spacing: 0.06em !important;
        margin-bottom: 0.15rem !important;
    }

    .panel-subtitle,
    .page-copy .muted,
    .muted {
        font-size: 0.76rem !important;
        line-height: 1.35 !important;
    }

    /* ─── 3. SHELL & PAGE CONTAINERS ─── */
    .app-shell {
        min-height: 100vh;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .main-shell {
        padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .content-shell {
        min-width: 0 !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-bottom: 1rem !important;
    }

    .page {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 0.65rem 0.75rem !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }

    .page-header {
        margin-bottom: 0.5rem !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .page-heading {
        gap: 0.6rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .page-copy {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .page-copy .muted,
    .page-header .muted {
        white-space: normal !important;
        word-break: break-word !important;
    }

    .page-icon {
        width: 2.2rem !important;
        height: 2.2rem !important;
        min-width: 2.2rem !important;
        border-radius: 8px !important;
    }

    .page-icon .icon {
        width: 1.15rem !important;
        height: 1.15rem !important;
    }

    .panel {
        padding: 0.75rem 0.85rem !important;
        border-radius: 8px !important;
        margin-bottom: 0.65rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .panel-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        margin-bottom: 0.65rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .panel-head > div:first-child {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .panel-head .button-row {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* Collapse 2-column page layout */
    .page-layout-cols {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .col-main,
    .col-side {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* ─── 4. TOPBAR COMPACT HEADER ─── */
    .topbar {
        padding: 0.35rem 0.65rem !important;
        height: auto !important;
        min-height: 46px !important;
        gap: 0.35rem !important;
        width: 100%;
        box-sizing: border-box;
    }

    .topbar-title-group {
        gap: 0.4rem !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .topbar-title-group h2 {
        font-size: 0.92rem !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: clamp(90px, 28vw, 150px) !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }

    .topbar-eyebrow {
        display: none !important;
    }

    .sidebar-toggle {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
        display: inline-grid !important;
        place-items: center !important;
    }

    .topbar-actions {
        display: flex !important;
        align-items: center !important;
        gap: 0.3rem !important;
        flex-shrink: 0 !important;
    }

    .topbar-router-form {
        margin: 0 !important;
    }

    .topbar-router-select,
    select.topbar-router-select,
    select.input.topbar-router-select {
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        padding: 0.15rem 0.4rem !important;
        width: auto !important;
        max-width: clamp(90px, 28vw, 135px) !important;
        border-radius: 6px !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    .theme-switch {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    .theme-switch [data-theme-toggle-label] {
        display: none !important;
    }

    .theme-switch [data-theme-main-icon] {
        display: none !important;
    }

    .theme-switch .theme-switch-thumb {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        margin: 0 !important;
        position: static !important;
        transform: none !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .theme-switch .theme-switch-thumb span[data-theme-thumb-icon] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .theme-switch .theme-switch-thumb span[data-theme-thumb-icon][hidden] {
        display: none !important;
    }

    .theme-switch .theme-switch-thumb .icon,
    .theme-switch .theme-switch-thumb svg {
        display: block !important;
        width: 17px !important;
        height: 17px !important;
    }

    .user-menu-trigger {
        padding: 1px !important;
        gap: 2px !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }

    .user-chip-name {
        display: none !important;
    }

    .user-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.78rem !important;
    }

    /* ─── 5. SUMMARY & STATS CARDS (COMPACT 2-COLUMN) ─── */
    .grid-card-row,
    .summary-grid,
    .stat-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
        margin-bottom: 0.65rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .grid-card-row > a,
    .grid-card-row > *,
    .summary-grid > *,
    .stat-grid > * {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    .summary-card {
        padding: 0.55rem 0.65rem !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    .summary-card-title {
        font-size: 0.66rem !important;
        letter-spacing: 0.03em !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin-bottom: 0.15rem !important;
    }

    .summary-card-value {
        font-size: 1.25rem !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .summary-card.is-active {
        border-color: hsl(var(--primary)) !important;
        box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
    }
    .summary-card.success.is-active {
        border-color: hsl(var(--success)) !important;
        box-shadow: 0 0 0 2px hsl(var(--success) / 0.2) !important;
    }
    .summary-card.warning.is-active {
        border-color: hsl(var(--warning)) !important;
        box-shadow: 0 0 0 2px hsl(var(--warning) / 0.2) !important;
    }
    .summary-card.danger.is-active {
        border-color: hsl(var(--destructive)) !important;
        box-shadow: 0 0 0 2px hsl(var(--destructive) / 0.2) !important;
    }

    .mini-grid,
    .quick-stats-grid,
    .hero-status-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mini-card,
    .stat-card,
    .quick-stat-card,
    .hero-status-card {
        padding: 0.5rem 0.6rem !important;
        border-radius: 6px !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mini-card-value,
    .stat-value,
    .quick-stat-value {
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
    }

    /* ─── 6. FORMS, INPUTS & BUTTONS ─── */
    .form-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
        width: 100% !important;
    }

    .field-span-12,
    .field-span-10,
    .field-span-8,
    .field-span-6,
    .field-span-4,
    .field-span-3,
    .field-span-2 {
        grid-column: span 1 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .label {
        font-size: 0.74rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.2rem !important;
    }

    .input,
    input.input,
    select.input,
    textarea.input {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0.35rem 0.6rem !important;
        font-size: 0.84rem !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        touch-action: manipulation;
    }

    textarea.input {
        height: auto !important;
        min-height: 70px !important;
    }

    .button,
    button.button,
    a.button {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0.35rem 0.75rem !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
        font-weight: 700 !important;
        box-sizing: border-box !important;
    }

    .button-sm {
        height: 30px !important;
        min-height: 30px !important;
        padding: 0.2rem 0.55rem !important;
        font-size: 0.74rem !important;
    }

    .button-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        width: 100% !important;
    }

    /* ─── 7. HOTSPOT USERS COMPONENTS ─── */
    .user-actions-toolbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.4rem !important;
        width: 100% !important;
    }

    .user-actions-toolbar .print-filter-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.35rem !important;
        width: 100% !important;
    }

    .user-actions-toolbar .print-filter-group #print-template-select {
        flex: 0 0 auto !important;
        width: 110px !important;
    }

    .user-actions-toolbar .print-filter-group button {
        flex: 1 1 auto !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        padding: 0.35rem 0.5rem !important;
        font-size: 0.78rem !important;
    }

    .user-actions-toolbar button[onclick*="confirmDeleteAllFiltered"] {
        width: 100% !important;
        justify-content: center !important;
        height: 36px !important;
        font-size: 0.8rem !important;
    }

    .user-actions-toolbar a.button-primary {
        width: 100% !important;
        justify-content: center !important;
        height: 36px !important;
        font-size: 0.82rem !important;
    }

    .filter-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.3rem !important;
        width: 100% !important;
    }

    .filter-pill {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.72rem !important;
        border-radius: 999px !important;
    }

    .toggle-switch {
        transform: scale(0.9);
        transform-origin: left center;
    }

    #print-template-select {
        height: 34px !important;
        min-height: 34px !important;
        font-size: 0.76rem !important;
        padding: 0.2rem 0.45rem !important;
        width: auto !important;
    }

    button[onclick*="confirmDeleteAllFiltered"] {
        width: 100% !important;
        justify-content: center !important;
        height: 36px !important;
        font-size: 0.8rem !important;
        margin-top: 0.25rem !important;
    }

    .table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 6px !important;
        margin-top: 0.45rem !important;
        margin-bottom: 0.5rem !important;
    }

    table th,
    table td {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

    .badge {
        padding: 0.12rem 0.45rem !important;
        font-size: 0.68rem !important;
        border-radius: 999px !important;
    }

    .panel-footer,
    .table-footer,
    .pagination-footer {
        flex-direction: column !important;
        gap: 0.45rem !important;
        align-items: center !important;
        font-size: 0.76rem !important;
        padding: 0.6rem !important;
    }

    /* ─── 8. HOTSPOT GENERATE & RESULTS ─── */
    #hasil-generate {
        border-radius: 8px !important;
        padding: 0.75rem 0.85rem !important;
    }

    #hasil-generate .panel-head {
        gap: 0.4rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #hasil-generate .panel-title {
        font-size: 1.05rem !important;
    }

    #hasil-generate .button-row {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.4rem !important;
    }

    #hasil-generate .button-row button,
    #hasil-generate .button-row a {
        width: 100% !important;
        justify-content: center !important;
        font-size: 0.82rem !important;
        height: 38px !important;
    }

    .voucher-grid,
    #hasil-generate .voucher-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.35rem !important;
        max-height: 175px !important;
        padding: 0.4rem 0 !important;
    }

    .voucher-card,
    #hasil-generate .voucher-card {
        padding: 0.35rem 0.45rem !important;
        font-size: 0.75rem !important;
        border-radius: 6px !important;
    }

    .voucher-card strong {
        font-size: 0.84rem !important;
    }

    /* ─── 9. POPUP PRINT MODAL ─── */
    .modal-shell {
        padding: 0.5rem !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .modal-card {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        padding: 0.85rem 0.75rem !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        margin: auto !important;
    }

    .modal-head {
        padding-bottom: 0.55rem !important;
    }

    .modal-head .panel-title {
        font-size: 1.02rem !important;
    }

    .modal-card div[style*="repeat(auto-fit"],
    .modal-card div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 0.45rem !important;
    }

    .modal-card div[style*="repeat(auto-fit"] a.button,
    .modal-card div[style*="grid-template-columns"] a.button {
        padding: 0.65rem !important;
        font-size: 0.85rem !important;
        height: auto !important;
        min-height: 40px !important;
    }

    .modal-card div[style*="hsl(var(--muted) / 0.4)"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.4rem !important;
        padding: 0.6rem !important;
    }

    #modal-tpl-select {
        width: 100% !important;
    }

    #modal-btn-print-custom {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* ─── 10. MOBILE BOTTOM NAVIGATION BAR ─── */
    .mobile-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 95 !important;
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0.2rem 0.5rem !important;
        padding-bottom: calc(0.2rem + env(safe-area-inset-bottom, 0px)) !important;
        border-top: 1px solid hsl(var(--border) / 0.8) !important;
        background: hsl(var(--card) / 0.98) !important;
        backdrop-filter: blur(12px) !important;
        box-sizing: border-box !important;
    }

    .mobile-nav-link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.2rem !important;
        gap: 2px !important;
        height: 100% !important;
        border-radius: 0.5rem !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        color: hsl(var(--muted-foreground)) !important;
    }

    .mobile-nav-link .icon {
        width: 18px !important;
        height: 18px !important;
    }

    .mobile-nav-label {
        font-size: 0.66rem !important;
        font-weight: 600 !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ─── 11. LOGIN PAGE MOBILE ─── */
    .auth-layout .login-card {
        width: 92% !important;
        max-width: 350px !important;
        padding: 1.25rem 1rem !important;
        margin: 1.5rem auto !important;
        border-radius: 10px !important;
    }

    .login-brand-logo {
        max-width: 210px !important;
        height: auto !important;
        max-height: 85px !important;
    }

    .login-brand .auth-copy h1 {
        font-size: 1.2rem !important;
    }

    .auth-layout .input {
        height: 38px !important;
        font-size: 0.88rem !important;
    }

    .auth-layout .button-primary {
        height: 40px !important;
        font-size: 0.88rem !important;
    }
}

/* Small Screens (< 640px) */
@media (max-width: 640px) {
    .topbar-title-group .topbar-eyebrow,
    .topbar-eyebrow {
        display: none !important;
    }

    .user-menu-trigger {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }

    .user-menu-trigger .user-copy,
    .user-menu-trigger > .icon {
        display: none !important;
    }
}

/* Extra small mobile screens (e.g. 360px - 380px) */
@media (max-width: 380px) {
    .grid-card-row,
    .summary-grid,
    .stat-grid {
        grid-template-columns: 1fr !important;
    }

    .topbar-router-select {
        max-width: 85px !important;
        font-size: 0.7rem !important;
    }

    .summary-card-value {
        font-size: 1.15rem !important;
    }

    .voucher-grid {
        grid-template-columns: 1fr !important;
    }
}