/**
 * HARIR NAV — Mobile First (phone → tablet → desktop)
 */
:root {
    --harir-primary: #0d9488;
    --harir-primary-dark: #0f766e;
    --harir-primary-light: #ccfbf1;
    --harir-success: #10b981;
    --harir-danger: #ef4444;
    --harir-warning: #f59e0b;
    --harir-bg: #f0f4f8;
    --harir-card: #ffffff;
    --harir-text: #0f172a;
    --harir-muted: #64748b;
    --harir-radius: 16px;
    --harir-touch: 48px;
    --bottom-nav-h: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
}

* { -webkit-tap-highlight-color: transparent; }

body.app-mobile {
    margin: 0;
    background: var(--harir-bg);
    color: var(--harir-text);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    overscroll-behavior: none;
}

/* Toast */
#toast-stack {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 12px;
    right: 12px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.harir-toast {
    pointer-events: auto;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--harir-card);
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    border-inline-start: 4px solid var(--harir-primary);
    animation: toastIn .3s ease;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}
.harir-toast__ico { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.harir-toast--success .harir-toast__ico { color: var(--harir-success); }
.harir-toast--error .harir-toast__ico { color: var(--harir-danger); }
.harir-toast--success { border-color: var(--harir-success); }
.harir-toast--error { border-color: var(--harir-danger); }
@keyframes toastIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.offline-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--harir-warning);
    color: #000;
    text-align: center;
    padding: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* App shell — mobile */
.app-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--harir-card);
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
}

.app-topbar__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.app-content {
    flex: 1;
    padding: 16px;
    max-width: 100%;
}

/* Bottom navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--harir-card);
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 -4px 24px rgba(0,0,0,.06);
}

.bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--harir-touch);
    color: var(--harir-muted);
    text-decoration: none;
    font-size: 0.65rem;
    font-weight: 600;
    transition: color .2s;
}

.bottom-nav__item i {
    font-size: 1.35rem;
}

.bottom-nav__item.active {
    color: var(--harir-primary);
}

/* Desktop sidebar */
.sidebar-desktop {
    position: fixed;
    top: 0;
    right: 0;
    width: 260px;
    height: 100dvh;
    background: linear-gradient(180deg, #0f766e, #134e4a);
    color: #fff;
    flex-direction: column;
    padding: 1rem;
    z-index: 200;
}

.sidebar-desktop__brand {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.15);
    margin-bottom: 1rem;
}

.sidebar-desktop__brand i { font-size: 2rem; }
.sidebar-desktop__brand small { opacity: .75; display: block; }

.sidebar-desktop__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-inline-end: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.sidebar-desktop__section-title {
    margin: 14px 0 4px;
    padding: 0 14px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}

.sidebar-desktop__section-title:first-child {
    margin-top: 0;
}

.sidebar-desktop__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: rgba(255,255,255,.88);
    text-decoration: none;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.92rem;
    min-height: 42px;
}

.sidebar-desktop__link span {
    flex: 1;
    min-width: 0;
}

.sidebar-desktop__link:hover,
.sidebar-desktop__link.active {
    background: rgba(255,255,255,.15);
    color: #fff;
}

.sidebar-desktop__link--external {
    opacity: 0.92;
}

.sidebar-desktop__ext-icon {
    font-size: 0.75rem;
    opacity: 0.55;
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .app-shell {
        margin-right: 260px;
        padding-bottom: 0;
    }
    .app-content { padding: 24px; max-width: 1200px; }
}

/* Touch buttons */
.btn, .form-control, .form-select {
    min-height: var(--harir-touch);
    border-radius: 12px;
    font-size: 1rem;
}

.btn-lg, .btn-mega {
    min-height: 56px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 14px;
    padding: 12px 24px;
}

.btn-mega { width: 100%; max-width: 400px; }

/* Stat cards */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .stat-grid { grid-template-columns: repeat(5, 1fr); }
}

.stat-card-v2 {
    background: var(--harir-card);
    border-radius: var(--harir-radius);
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-card-v2__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.stat-card-v2__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.stat-card-v2__icon--primary { background: #ccfbf1; color: var(--harir-primary-dark); }
.stat-card-v2__icon--warning { background: #fef3c7; color: #b45309; }
.stat-card-v2__icon--success { background: #d1fae5; color: #047857; }
.stat-card-v2__icon--danger  { background: #fee2e2; color: #b91c1c; }
.stat-card-v2__icon--vip     { background: #fef9c3; color: #a16207; }

.stat-card-v2__value {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.1;
}

.stat-card-v2__label {
    font-size: 0.8rem;
    color: var(--harir-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* أيقونات عامة */
.harir-icon { vertical-align: -0.15em; }
.harir-icon--btn { margin-inline-end: 0.25rem; }
.harir-icon--success { color: var(--harir-success); }
.harir-icon--warning { color: var(--harir-warning); }
.harir-icon--danger  { color: var(--harir-danger); }
.harir-icon--primary { color: var(--harir-primary); }

.filter-chip i { font-size: 1rem; vertical-align: -0.12em; }
.filter-chip.active i { color: inherit; }

.badge-ready  { background: #fef3c7; color: #92400e; }
.badge-sent   { background: #d1fae5; color: #065f46; }
.badge-failed { background: #fee2e2; color: #991b1b; }
.badge .bi { vertical-align: -0.1em; margin-inline-end: 2px; }

.live-pulse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.live-pulse::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--harir-success);
    animation: livePulse 1.5s ease infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* Patient / result cards (mobile) */
.mobile-card-list { display: flex; flex-direction: column; gap: 12px; }

.mobile-card {
    background: var(--harir-card);
    border-radius: var(--harir-radius);
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    border: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
    display: block;
    min-height: var(--harir-touch);
}

.mobile-card:active { transform: scale(0.98); }

.mobile-card__title { font-weight: 700; font-size: 1.05rem; margin: 0 0 4px; }
.mobile-card__meta { font-size: 0.85rem; color: var(--harir-muted); }

.mobile-card--actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mobile-card--actions .mobile-card__link {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

/* Hide tables on mobile, show cards */
@media (max-width: 767px) {
    .table-desktop-only { display: none !important; }
    .cards-mobile-only { display: block !important; }
}
@media (min-width: 768px) {
    .cards-mobile-only { display: none !important; }
}

/* Skeleton shimmer */
.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: 8px;
    min-height: 20px;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-stat { height: 72px; border-radius: var(--harir-radius); }

/* Search */
.search-hero { position: relative; margin-bottom: 16px; }
.search-hero .bi-search {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--harir-muted);
    font-size: 1.2rem;
    pointer-events: none;
}
.search-hero .form-control {
    padding-right: 48px;
    font-size: 1.05rem;
    border: 2px solid #e2e8f0;
}

/* Filters */
.filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.filter-chips::-webkit-scrollbar { display: none; }

.filter-chip {
    flex-shrink: 0;
    padding: 10px 16px;
    min-height: 40px;
    border-radius: 999px;
    border: 2px solid #e2e8f0;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.filter-chip.active {
    border-color: var(--harir-primary);
    background: var(--harir-primary-light);
    color: var(--harir-primary-dark);
}

/* Quick form */
.quick-form {
    background: var(--harir-card);
    border-radius: var(--harir-radius);
    padding: 20px;
    box-shadow: 0 2px 16px rgba(0,0,0,.06);
}

/* FAB */
.fab {
    position: fixed;
    bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 16px);
    left: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--harir-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 20px rgba(13, 148, 136, .45);
    z-index: 900;
    text-decoration: none;
}
@media (min-width: 992px) {
    .fab { bottom: 24px; left: 24px; }
}

.badge-ready { background: #fef3c7; color: #b45309; }
.badge-sent { background: #d1fae5; color: #047857; }
.badge-failed { background: #fee2e2; color: #b91c1c; }

.import-hero {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1rem;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #fff;
    border-radius: var(--harir-radius);
    box-shadow: 0 8px 28px rgba(13, 148, 136, 0.35);
}

.import-hero__icon {
    font-size: 2.5rem;
    line-height: 1;
    opacity: 0.95;
}

.import-hero__body h2,
.import-hero__body p {
    color: #fff;
}

.import-hero__body .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.import-hero__btn {
    background: #fff !important;
    color: var(--harir-primary-dark) !important;
    border: none;
    font-weight: 700;
    min-height: 56px;
}

@media (min-width: 768px) {
    .import-hero {
        flex-direction: row;
        align-items: center;
        padding: 1.5rem 1.25rem;
    }
    .import-hero__body {
        flex: 1;
    }
    .import-hero__btn {
        flex-shrink: 0;
        min-width: 200px;
    }
}

.bulk-panel {
    text-align: center;
    padding: 24px 16px;
    background: linear-gradient(135deg, var(--harir-primary-light), #fff);
    border-radius: var(--harir-radius);
    border: 2px dashed var(--harir-primary);
}

.bulk-panel--send {
    border-color: var(--harir-success);
    background: linear-gradient(135deg, #ecfdf5, #fff);
}

.bulk-panel__hero {
    font-size: 3rem;
    line-height: 1;
    color: var(--harir-primary-dark);
    margin-bottom: 0.5rem;
}

.card-v2 {
    background: var(--harir-card);
    border-radius: var(--harir-radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.live-feed {
    max-height: 280px;
    overflow-y: auto;
}

.live-feed__item {
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}

.login-v2 {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(160deg, #0f766e, #134e4a 50%, #0d9488);
}

.login-v2 .card {
    border: none;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
}

/* ═══════════════════════════════════════════════════════════════
   صفحات الإدارة القديمة — توافق مع Bootstrap + تصميم harir
   ═══════════════════════════════════════════════════════════════ */

.app-content .card,
.app-content .card--accent {
    background: var(--harir-card);
    border-radius: var(--harir-radius);
    padding: 1.25rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
}

.app-content .card--accent {
    border-inline-start: 4px solid var(--harir-primary);
}

.app-content .card h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.app-content .card h2,
.app-content .card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.app-content .muted {
    color: var(--harir-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.app-content .form-group,
.app-content .field {
    margin-bottom: 1rem;
}

.app-content .form-group label,
.app-content .field__label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
    color: var(--harir-text);
}

.app-content .form-group input:not([type="checkbox"]):not([type="radio"]),
.app-content .form-group select,
.app-content .form-group textarea,
.app-content .field input:not([type="checkbox"]):not([type="radio"]),
.app-content .field select,
.app-content .field textarea {
    width: 100%;
    min-height: var(--harir-touch);
    padding: 0.55rem 0.85rem;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--harir-text);
}

.app-content .form-group input:focus,
.app-content .form-group select:focus,
.app-content .form-group textarea:focus,
.app-content .field input:focus,
.app-content .field select:focus,
.app-content .field textarea:focus {
    border-color: var(--harir-primary);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
    outline: none;
}

.app-content textarea {
    min-height: 100px;
    resize: vertical;
}

.app-content .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .app-content .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .app-content .api-settings-section .form-row {
        grid-template-columns: 1fr;
    }
}

.app-content .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.app-content .toolbar h1 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.app-content a.btn,
.app-content button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: var(--harir-touch);
    padding: 0.5rem 1.15rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}

.app-content a.btn:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-outline-primary):not(.btn-success):not(.btn-primary):not(.btn--ghost):not(.btn--sms):not(.btn--wa):not(.btn-sm):not(.btn-lg),
.app-content button.btn:not(.btn-secondary):not(.btn-outline-secondary):not(.btn-outline-primary):not(.btn-success):not(.btn-primary):not(.btn--ghost):not(.btn--sms):not(.btn--wa):not(.btn-sm):not(.btn-lg) {
    background: var(--harir-primary);
    color: #fff;
}

.app-content a.btn:hover,
.app-content button.btn:hover {
    opacity: 0.92;
}

.app-content .btn-secondary,
.app-content a.btn-secondary {
    background: #64748b !important;
    color: #fff !important;
}

.app-content .btn--ghost,
.app-content a.btn--ghost {
    background: #fff !important;
    color: var(--harir-primary-dark) !important;
    border: 2px solid #e2e8f0 !important;
}

.app-content .btn--sms {
    background: #2563eb !important;
    color: #fff !important;
}

.app-content .btn--wa {
    background: #16a34a !important;
    color: #fff !important;
}

.app-content .btn--sm {
    min-height: 40px;
    padding: 0.35rem 0.85rem;
    font-size: 0.9rem;
}

.app-content .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.app-content .table-wrap {
    overflow-x: auto;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    margin-top: 1rem;
}

.app-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    margin: 0;
}

.app-content table thead th {
    background: #f8fafc;
    padding: 0.75rem 1rem;
    text-align: right;
    font-weight: 600;
    color: var(--harir-muted);
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.app-content table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.app-content table tbody tr:hover {
    background: #f8fafc;
}

.app-content table tbody tr:last-child td {
    border-bottom: none;
}

.app-content table a {
    color: var(--harir-primary-dark);
    font-weight: 600;
    text-decoration: none;
}

.app-content table a:hover {
    text-decoration: underline;
}

.app-content .detail-table th {
    width: 38%;
    padding: 0.6rem 0.75rem;
    color: var(--harir-muted);
    font-weight: 600;
    vertical-align: top;
}

.app-content .detail-table td {
    padding: 0.6rem 0.75rem;
}

.app-content .alert-error {
    background: #fee2e2;
    color: #991b1b;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.app-content .alert-success {
    background: #d1fae5;
    color: #065f46;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.app-content .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.app-content .badge-progress {
    background: #e2e8f0;
    color: #475569;
}

.app-content .badge--vip {
    background: #fef9c3;
    color: #a16207;
}

.app-content .copy-box,
.app-content .token-box {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    word-break: break-all;
    direction: ltr;
    text-align: left;
}

.app-content .notify-hub {
    border: 2px solid var(--harir-primary-light);
}

.app-content .notify-hub__channels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.app-content .empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--harir-muted);
}

.app-content .api-settings-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.app-content .api-settings-section__head h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.app-content .api-settings-section .toggle {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    min-height: auto;
}

.app-content .api-settings-section .toggle input {
    width: 1.15rem;
    height: 1.15rem;
    min-height: auto;
    accent-color: var(--harir-primary);
}

.app-content .api-settings-section--wa .harir-icon {
    color: #16a34a;
}

.app-content code {
    background: #f1f5f9;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-size: 0.85em;
}

.app-content .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.app-content .page-actions .btn,
.app-content .page-actions a.btn {
    min-height: 44px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .stat-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

.cards-mobile-only {
    display: block;
}

.table-desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .cards-mobile-only {
        display: none;
    }
    .table-desktop-only {
        display: block;
    }
}