/* Shared cross-device affordances. Keep page colours and component layouts intact. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid #0d9488;
    outline-offset: 3px;
}
@media (max-width: 1024px), (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea {
        font-size: 16px !important;
    }
    button, input[type="submit"], input[type="button"], [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    input, select, textarea { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 600px) {
    .store-header { gap: 8px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    .store-header .store-switcher, .store-header .store-logo { min-width: 0; flex: 1 1 auto; }
    .store-header .store-switcher-btn { max-width: 100%; min-width: 0; padding: 6px 8px; }
    .store-header .store-switcher-btn i { flex-shrink: 0; }
    .store-header .store-header-right { gap: 4px; }
    .store-header .store-name-text { max-width: 100%; }
    .store-header .btn-logout { min-width: 44px; min-height: 44px; justify-content: center; }
    .store-header .mobile-menu-toggle { flex: 0 0 44px; justify-content: center; }
    .store-header .store-switcher-dropdown { min-width: min(230px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
}

/* Keep wide dashboard tables scrollable at tablet and landscape widths too. */
.data-table-container{max-width:100%;overflow-x:auto}

@media(max-width:600px){.store-header .store-switcher{flex:1 1 0;width:0}.store-header .store-switcher-btn .ss-name{min-width:0}.store-header .store-header-right{flex:0 0 auto}}