/* =============================================================================
   Tu Mandado — Bento-Noir Sovereign Design System (css/custom.css)
   Mobile-First, Pure Dark Surface Hierarchy & High Contrast Ergonomics
   ============================================================================= */

/* --- Google Font Inter --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --- Design Tokens --- */
:root {
    /* Surfaces */
    --tm-bg:            #090a0f;
    --tm-surface-1:     #12141e;
    --tm-surface-2:     #191c2b;
    --tm-surface-3:     #222638;
    --tm-surface-hover: #2b3046;

    /* Primary Accent (Índigo Eléctrico) */
    --tm-accent:        #6366f1;
    --tm-accent-light:  #818cf8;
    --tm-accent-glow:   rgba(99, 102, 241, 0.28);

    /* Sovereign Action / Market Accent (Menta / Esmeralda) */
    --tm-mint:          #00f2b6;
    --tm-mint-dark:     #00b889;
    --tm-mint-soft:     rgba(0, 242, 182, 0.12);
    --tm-mint-glow:     rgba(0, 242, 182, 0.25);

    /* Semantic States */
    --tm-danger:        #ff5370;
    --tm-danger-dark:   #e03a56;
    --tm-danger-soft:   rgba(255, 83, 112, 0.14);
    --tm-danger-glow:   rgba(255, 83, 112, 0.25);

    --tm-warning:       #ffb86c;
    --tm-warning-soft:  rgba(255, 184, 108, 0.14);

    --tm-info:          #38bdf8;
    --tm-info-soft:     rgba(56, 189, 248, 0.14);

    /* Text Hierarchy */
    --tm-text:          #f1f3f9;
    --tm-text-muted:    #9aa0b8;
    --tm-text-subtle:   #626782;

    /* Borders & Glass */
    --tm-border:        rgba(255, 255, 255, 0.08);
    --tm-border-light:  rgba(255, 255, 255, 0.15);
    --tm-border-focus:  var(--tm-accent);

    /* Radii */
    --tm-radius-sm:     8px;
    --tm-radius:        14px;
    --tm-radius-lg:     20px;
    --tm-radius-pill:   9999px;

    /* Shadows */
    --tm-shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.3);
    --tm-shadow:        0 6px 24px rgba(0, 0, 0, 0.45);
    --tm-shadow-lg:     0 12px 44px rgba(0, 0, 0, 0.65);

    /* Transitions */
    --tm-transition:    0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Global Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

body {
    background-color: var(--tm-bg) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--tm-text) !important;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--tm-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--tm-surface-3);
    border-radius: var(--tm-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--tm-surface-hover);
}

/* --- Header Soberano --- */
.header {
    background: rgba(18, 20, 30, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 14px 0 !important;
    box-shadow: var(--tm-shadow-sm) !important;
    border-bottom: 1px solid var(--tm-border) !important;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header .logo {
    max-width: 125px !important;
    filter: drop-shadow(0 2px 8px var(--tm-accent-glow));
    transition: transform var(--tm-transition);
}

.header .logo:hover {
    transform: scale(1.03);
}

/* --- Typography Hierarchy --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--tm-text) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 1.35rem !important;
    color: var(--tm-text) !important;
    margin-bottom: 16px !important;
}

.text-muted {
    color: var(--tm-text-muted) !important;
}

.small, small {
    color: var(--tm-text-muted);
}

/* --- Bootstrap Card Overrides (Bento Foundation) --- */
.card {
    background-color: var(--tm-surface-1) !important;
    color: var(--tm-text) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: var(--tm-shadow-sm) !important;
    transition: border-color var(--tm-transition), box-shadow var(--tm-transition), transform var(--tm-transition);
}

.card-body {
    color: var(--tm-text) !important;
}

/* --- Buttons (Mobile First, Ergonomics & High Contrast) --- */
.btn {
    border-radius: var(--tm-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 10px 18px !important;
    min-height: 42px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all var(--tm-transition) !important;
    border: 1px solid transparent !important;
    letter-spacing: 0.01em;
    cursor: pointer;
    touch-action: manipulation;
}

.btn:active {
    transform: scale(0.98);
}

/* Primary Button (Indigo) */
.btn-primary {
    background: linear-gradient(135deg, var(--tm-accent) 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 14px var(--tm-accent-glow) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--tm-accent-light) 0%, var(--tm-accent) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-1px);
}

/* Success Button (Mint Soberana) */
.btn-success {
    background: linear-gradient(135deg, var(--tm-mint) 0%, var(--tm-mint-dark) 100%) !important;
    color: #04251d !important;
    font-weight: 700 !important;
    border: 1px solid rgba(0, 242, 182, 0.4) !important;
    box-shadow: 0 4px 14px var(--tm-mint-glow) !important;
}
.btn-success:hover, .btn-success:focus {
    background: linear-gradient(135deg, #26f6c2 0%, var(--tm-mint) 100%) !important;
    color: #04251d !important;
    box-shadow: 0 6px 20px rgba(0, 242, 182, 0.45) !important;
    transform: translateY(-1px);
}

/* Danger Button (Crimson) */
.btn-danger {
    background: linear-gradient(135deg, var(--tm-danger) 0%, var(--tm-danger-dark) 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 83, 112, 0.3) !important;
    box-shadow: 0 4px 14px var(--tm-danger-glow) !important;
}
.btn-danger:hover, .btn-danger:focus {
    background: linear-gradient(135deg, #ff6b84 0%, var(--tm-danger) 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(255, 83, 112, 0.4) !important;
    transform: translateY(-1px);
}

/* Secondary Button */
.btn-secondary {
    background: var(--tm-surface-2) !important;
    color: var(--tm-text) !important;
    border: 1px solid var(--tm-border) !important;
}
.btn-secondary:hover, .btn-secondary:focus {
    background: var(--tm-surface-3) !important;
    color: #ffffff !important;
    border-color: var(--tm-border-light) !important;
}

/* Outline Buttons (Bento Minimal) */
.btn-outline-primary {
    background: var(--tm-surface-2) !important;
    color: var(--tm-accent-light) !important;
    border: 1px solid var(--tm-border) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--tm-accent) !important;
    color: #ffffff !important;
    border-color: var(--tm-accent) !important;
    box-shadow: 0 4px 14px var(--tm-accent-glow) !important;
}

.btn-outline-info {
    background: var(--tm-surface-2) !important;
    color: var(--tm-info) !important;
    border: 1px solid var(--tm-border) !important;
}
.btn-outline-info:hover, .btn-outline-info:focus {
    background: var(--tm-info) !important;
    color: #052438 !important;
    border-color: var(--tm-info) !important;
}

.btn-outline-secondary {
    background: var(--tm-surface-2) !important;
    color: var(--tm-text-muted) !important;
    border: 1px solid var(--tm-border) !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: var(--tm-surface-3) !important;
    color: var(--tm-text) !important;
    border-color: var(--tm-border-light) !important;
}

.btn-outline-danger {
    background: var(--tm-surface-2) !important;
    color: var(--tm-danger) !important;
    border: 1px solid var(--tm-border) !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background: var(--tm-danger) !important;
    color: #ffffff !important;
    border-color: var(--tm-danger) !important;
    box-shadow: 0 4px 14px var(--tm-danger-glow) !important;
}

/* Small Button */
.btn-sm {
    padding: 6px 12px !important;
    font-size: 0.8125rem !important;
    min-height: 34px !important;
    border-radius: var(--tm-radius-sm) !important;
}

/* Header Navigation Button */
.btn-dashboard {
    background: var(--tm-surface-2) !important;
    color: var(--tm-accent-light) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-pill) !important;
    padding: 8px 18px !important;
    min-height: 38px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}
.btn-dashboard:hover {
    background: var(--tm-accent) !important;
    color: #ffffff !important;
    border-color: var(--tm-accent) !important;
    box-shadow: 0 4px 14px var(--tm-accent-glow) !important;
    transform: translateY(-1px);
}

/* --- List Items (Dashboard Bento Cards) --- */
.list-item {
    background: var(--tm-surface-1) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: var(--tm-shadow-sm) !important;
    padding: 16px 18px !important;
    transition: all var(--tm-transition) !important;
    margin-bottom: 12px !important;
}

.list-item:hover {
    background: var(--tm-surface-2) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    box-shadow: var(--tm-shadow) !important;
    transform: translateY(-2px);
}

.list-item .list-title {
    color: var(--tm-text) !important;
    font-size: 1.15rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--tm-transition);
}

.list-item .list-title:hover {
    color: var(--tm-accent-light) !important;
}

/* Action Button Grid in List Item */
.list-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Badges */
.badge {
    border-radius: var(--tm-radius-pill) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    padding: 5px 10px !important;
    letter-spacing: 0.02em;
}

.badge.bg-secondary {
    background-color: var(--tm-surface-3) !important;
    color: var(--tm-accent-light) !important;
    border: 1px solid var(--tm-border);
}

.badge.bg-success, .badge.bg-success-subtle {
    background-color: var(--tm-mint-soft) !important;
    color: var(--tm-mint) !important;
    border: 1px solid rgba(0, 242, 182, 0.25);
}

/* --- Segmented Pill Controls (Tabs for Shopping View) --- */
.nav-tabs {
    border-bottom: none !important;
    background: var(--tm-surface-1) !important;
    padding: 5px !important;
    border-radius: var(--tm-radius-pill) !important;
    border: 1px solid var(--tm-border) !important;
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
}

.nav-tabs .nav-item {
    flex: 1;
    text-align: center;
}

.nav-tabs .nav-link {
    color: var(--tm-text-muted) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--tm-radius-pill) !important;
    padding: 10px 14px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    transition: all var(--tm-transition) !important;
    width: 100%;
    min-height: 40px;
}

.nav-tabs .nav-link:hover {
    color: var(--tm-text) !important;
    background: var(--tm-surface-2) !important;
}

.nav-tabs .nav-link.active {
    color: #ffffff !important;
    background: var(--tm-accent) !important;
    box-shadow: 0 4px 14px var(--tm-accent-glow) !important;
}

/* Tab Counters inside Navigation */
#pending-count {
    color: var(--tm-warning) !important;
    font-weight: 700;
    margin-left: 4px;
}

.nav-link.active #pending-count {
    color: #ffffff !important;
}

#bought-count {
    color: var(--tm-mint) !important;
    font-weight: 700;
    margin-left: 4px;
}

.nav-link.active #bought-count {
    color: #ffffff !important;
}

#participants-count {
    color: var(--tm-info) !important;
    font-weight: 700;
    margin-left: 4px;
}

.nav-link.active #participants-count {
    color: #ffffff !important;
}

/* --- Product Cards Grid (Comprar View) --- */
.cards-container {
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    padding: 4px 0 !important;
}

.tab-content {
    border: none !important;
}

/* Product Card Bento */
.product-card {
    background: var(--tm-surface-1) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius) !important;
    box-shadow: var(--tm-shadow-sm) !important;
    transition: all var(--tm-transition) !important;
    overflow: hidden;
}

.product-card:hover {
    border-color: rgba(99, 102, 241, 0.25) !important;
    box-shadow: var(--tm-shadow) !important;
    transform: translateY(-1px);
}

.product-card .card-body {
    padding: 16px !important;
}

/* Product Checkbox (Large Touch Target for Shopping) */
.product-card .form-check {
    min-height: 32px;
    margin-bottom: 0;
}

.product-card .form-check-input {
    width: 24px !important;
    height: 24px !important;
    margin-top: 0 !important;
    background-color: var(--tm-surface-2) !important;
    border: 2px solid var(--tm-border-light) !important;
    border-radius: 6px !important;
    cursor: pointer;
    transition: all var(--tm-transition) !important;
    accent-color: var(--tm-mint) !important;
}

.product-card .form-check-input:checked {
    background-color: var(--tm-mint) !important;
    border-color: var(--tm-mint) !important;
    box-shadow: 0 0 10px var(--tm-mint-glow) !important;
}

.product-card .product-name {
    color: var(--tm-text) !important;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    transition: color var(--tm-transition);
}

/* Completed Card Styling */
#checked-products-cards .product-card {
    background: rgba(18, 20, 30, 0.6) !important;
    border-color: rgba(0, 242, 182, 0.15) !important;
    opacity: 0.85;
}

#checked-products-cards .product-card .product-name {
    color: var(--tm-text-muted) !important;
    text-decoration: line-through;
}

.product-card .precio-total {
    color: var(--tm-mint) !important;
    font-weight: 700 !important;
    font-size: 1.05rem;
}

/* --- Form Controls & Inputs --- */
.form-control {
    background-color: var(--tm-surface-2) !important;
    color: var(--tm-text) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    transition: all var(--tm-transition) !important;
}

.form-control:focus {
    background-color: var(--tm-surface-3) !important;
    color: #ffffff !important;
    border-color: var(--tm-accent) !important;
    box-shadow: 0 0 0 3px var(--tm-accent-glow) !important;
}

.form-control::placeholder {
    color: var(--tm-text-subtle) !important;
}

.form-label {
    color: var(--tm-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-control-sm {
    padding: 6px 10px !important;
    font-size: 0.875rem !important;
    border-radius: var(--tm-radius-sm) !important;
}

/* --- Modals (Sovereign Frosted Glass) --- */
.modal-content {
    background: var(--tm-surface-1) !important;
    color: var(--tm-text) !important;
    border: 1px solid var(--tm-border-light) !important;
    border-radius: var(--tm-radius-lg) !important;
    box-shadow: var(--tm-shadow-lg) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.modal-header {
    border-bottom: 1px solid var(--tm-border) !important;
    padding: 18px 24px !important;
}

.modal-body {
    padding: 24px !important;
}

.modal-footer {
    border-top: 1px solid var(--tm-border) !important;
    padding: 16px 24px !important;
}

.modal-title {
    color: var(--tm-text) !important;
    font-weight: 600 !important;
    font-size: 1.15rem !important;
}

.btn-close {
    filter: invert(1) brightness(0.9) !important;
    opacity: 0.7;
    transition: opacity var(--tm-transition);
}
.btn-close:hover {
    opacity: 1;
}

.modal-backdrop.show {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background-color: rgba(9, 10, 15, 0.75) !important;
}

/* --- Alerts & Notifications --- */
.alert {
    border-radius: var(--tm-radius-sm) !important;
    border: 1px solid transparent !important;
    font-weight: 500;
    font-size: 0.9rem;
}

.alert-danger {
    background-color: var(--tm-danger-soft) !important;
    color: #ff859b !important;
    border-color: rgba(255, 83, 112, 0.3) !important;
}

.alert-info {
    background-color: var(--tm-info-soft) !important;
    color: #7dd3fc !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

.alert-success {
    background-color: var(--tm-mint-soft) !important;
    color: var(--tm-mint) !important;
    border-color: rgba(0, 242, 182, 0.3) !important;
}

.notification-item {
    background: var(--tm-surface-2) !important;
    border: 1px solid var(--tm-border) !important;
    border-radius: var(--tm-radius-sm) !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    transition: all var(--tm-transition);
}

.notification-item.unread {
    background: var(--tm-surface-3) !important;
    border-left: 3px solid var(--tm-accent) !important;
}

.btn-mark-read {
    background: var(--tm-surface-1) !important;
    color: var(--tm-accent-light) !important;
    border: 1px solid var(--tm-border) !important;
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
    min-height: 30px !important;
    border-radius: var(--tm-radius-sm) !important;
}
.btn-mark-read:hover {
    background: var(--tm-accent) !important;
    color: #ffffff !important;
}

/* --- Floating Total Widget --- */
#floatingTotal {
    background: rgba(18, 20, 30, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--tm-text) !important;
    border: 1px solid rgba(0, 242, 182, 0.35) !important;
    padding: 10px 20px !important;
    border-radius: var(--tm-radius-pill) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 16px var(--tm-mint-glow) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    user-select: none;
    z-index: 999;
    transition: box-shadow var(--tm-transition);
}

#floatingTotal #totalComprado {
    color: var(--tm-mint) !important;
    font-weight: 700;
    margin-left: 4px;
}

/* --- Status Toast --- */
#statusMessage {
    background: rgba(9, 10, 15, 0.9) !important;
    color: #ffffff !important;
    padding: 12px 24px !important;
    border-radius: var(--tm-radius-pill) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border: 1px solid var(--tm-border-light);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--tm-shadow);
}

/* --- Animations --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.list-item,
.product-card,
.notification-item {
    animation: fadeInUp 0.25s ease-out both;
}

/* --- Modern Number Inputs (No spinners, Tabular Nums) --- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
.input-num-modern {
    font-variant-numeric: tabular-nums;
    font-weight: 600 !important;
}

/* --- Quick Add Bar (Erradicación del modal de carga) --- */
.quick-add-card {
    background: var(--tm-surface-1);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    padding: 6px;
    box-shadow: var(--tm-shadow-sm);
    transition: all var(--tm-transition);
}
.quick-add-card:focus-within {
    border-color: var(--tm-mint);
    box-shadow: 0 0 16px var(--tm-mint-glow);
}
.quick-add-group {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.quick-add-icon {
    background: transparent !important;
    border: none !important;
    color: var(--tm-mint) !important;
    font-size: 1.25rem !important;
    padding-left: 10px !important;
    padding-right: 0 !important;
}
.quick-add-input {
    background: transparent !important;
    border: none !important;
    color: var(--tm-text) !important;
    font-size: 0.95rem !important;
    padding: 10px 12px !important;
    box-shadow: none !important;
    flex: 1;
}
.quick-add-input:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.quick-add-btn {
    border-radius: var(--tm-radius-sm) !important;
    white-space: nowrap !important;
    padding: 8px 18px !important;
    font-weight: 700 !important;
    min-height: 40px !important;
}

/* --- Header WebSocket Status Badge (Semáforo en Vivo) --- */
.ws-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--tm-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    transition: all var(--tm-transition);
}
.ws-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.ws-status-badge.ws-online {
    color: var(--tm-mint);
    border-color: rgba(0, 242, 182, 0.3);
}
.ws-status-badge.ws-online .ws-dot {
    background-color: var(--tm-mint);
    box-shadow: 0 0 8px var(--tm-mint);
    animation: wsPulse 2s infinite;
}
.ws-status-badge.ws-connecting {
    color: var(--tm-warning);
    border-color: rgba(255, 184, 108, 0.3);
}
.ws-status-badge.ws-connecting .ws-dot {
    background-color: var(--tm-warning);
    box-shadow: 0 0 8px var(--tm-warning);
    animation: wsPulse 1s infinite;
}
.ws-status-badge.ws-offline {
    color: var(--tm-danger);
    border-color: rgba(255, 83, 112, 0.3);
}
.ws-status-badge.ws-offline .ws-dot {
    background-color: var(--tm-danger);
    box-shadow: 0 0 6px var(--tm-danger);
}
@keyframes wsPulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.95); opacity: 0.8; }
}

/* =============================================================================
   MOBILE RESPONSIVENESS & ERGONOMICS (≤576px)
   ============================================================================= */
@media (max-width: 576px) {
    .header {
        padding: 10px 0 !important;
    }

    .header .logo {
        max-width: 100px !important;
    }

    /* List Item stacks actions vertically or comfortably */
    .list-item {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    .list-item-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100%;
    }

    .list-item-actions .btn {
        width: 100% !important;
        padding: 8px 10px !important;
        font-size: 0.8125rem !important;
    }

    .cards-container {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .nav-tabs .nav-link {
        font-size: 0.8rem !important;
        padding: 8px 6px !important;
    }

    #floatingTotal {
        padding: 8px 16px !important;
        font-size: 0.875rem !important;
    }
}