/* ============================================
   COSSH Connect Mobile - v1.0
   全部样式在 @media (max-width: 768px) 内，
   桌面端零影响
   ============================================ */

@media (max-width: 768px) {

/* ==============================================
   0. CSS Variables
   ============================================== */
:root {
    --m-primary: #2c3e50;
    --m-accent: #0d9488;
    --m-bg: #f5f6fa;
    --m-card: #fff;
    --m-border: #e8e8e8;
    --m-text: #333;
    --m-text-muted: #999;
    --m-topbar-h: 48px;
    --m-bottombar-h: 56px;
}

/* ==============================================
   1. Global: hide sidebar, logo, full-width content
   ============================================== */
body {
    background: var(--m-bg) !important;
    padding-top: var(--m-topbar-h) !important;
    padding-bottom: calc(var(--m-bottombar-h) + 8px) !important;
}
.sidebar {
    display: none !important;
    position: fixed !important;
    top: 0; left: 0;
    width: 280px !important;
    height: 100vh !important;
    z-index: 2050;
    overflow-y: auto;
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
}
.sidebar.mobile-show {
    display: block !important;
}
.content-area {
    margin-left: 0 !important;
}
.logo-section {
    display: none !important;
}
.content-section {
    padding: 12px !important;
}


/* ==============================================
   2. Mobile Top Bar (injected by JS)
   ============================================== */
.m-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--m-topbar-h);
    background: var(--m-primary);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 12px;
    z-index: 2000;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.m-topbar-back {
    color: #fff;
    font-size: 18px;
    padding: 6px 10px 6px 2px;
    text-decoration: none;
    flex-shrink: 0;
}
.m-topbar-back:hover, .m-topbar-back:active { color: #fff; }
.m-topbar-menu {
    color: #fff;
    background: none;
    border: none;
    font-size: 18px;
    padding: 6px 10px 6px 2px;
    cursor: pointer;
    flex-shrink: 0;
}
.m-topbar-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-topbar-more {
    color: #fff;
    background: none;
    border: none;
    font-size: 20px;
    padding: 6px 2px 6px 10px;
    cursor: pointer;
    flex-shrink: 0;
}


/* ==============================================
   3. Mobile Overlay (sidebar backdrop)
   ============================================== */
.m-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 2040;
}
.m-overlay.active {
    display: block;
}


/* ==============================================
   4. Mobile Bottom Tab Bar (injected by JS)
   ============================================== */
.m-bottombar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--m-bottombar-h);
    background: #fff;
    border-top: 1px solid var(--m-border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 2000;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.m-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #999;
    font-size: 10px;
    gap: 2px;
    padding: 4px 0;
    flex: 1;
    position: relative;
}
.m-tab i { font-size: 20px; }
.m-tab.active { color: var(--m-accent); }
.m-tab.active i { color: var(--m-accent); }
.m-tab-add { position: relative; top: -12px; }
.m-tab-add-circle {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--m-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(13,148,136,0.4);
}
.m-tab-add-circle i { font-size: 22px; color: #fff; }
.m-tab-add span { margin-top: 2px; }


/* ==============================================
   5. Hide original nav-tabs (replaced by bottom bar)
   ============================================== */
#datasetTabs { display: none !important; }


/* ==============================================
   6. Dataset Home Tab content
   ============================================== */
.content-section > h3 {
    font-size: 1.05rem !important;
    margin-bottom: 4px !important;
}
.content-section > p.text-muted.mb-3 {
    font-size: 0.78rem !important;
    margin-bottom: 8px !important;
}
.operation-card .card-body { padding: 10px !important; }
.operation-card .card-body i.fa-3x { font-size: 1.8rem !important; margin-bottom: 8px !important; }
.operation-card .card-body h6 { font-size: 0.78rem !important; }


/* ==============================================
   7. Subject List: table → card layout (JS creates cards)
   ============================================== */
.m-subject-cards {
    display: flex !important;
    flex-direction: column;
    gap: 0;
}
.m-subject-card {
    background: var(--m-card);
    border-bottom: 8px solid var(--m-bg);
    padding: 14px 16px;
    cursor: pointer;
    text-decoration: none;
    color: var(--m-text);
    display: block;
    position: relative;
}
.m-subject-card:active { background: #f0f0f0; }
.m-subject-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.m-subject-card-name { font-size: 1.05rem; font-weight: 600; color: var(--m-text); }
.m-subject-card-code { font-size: 1.05rem; font-weight: 400; color: var(--m-text); margin-left: 8px; }
.m-subject-card-status {
    font-size: 0.72rem; padding: 2px 8px; border-radius: 3px; border: 1px solid; flex-shrink: 0;
}
.m-subject-card-status.s-submitted { color: #0d9488; border-color: #0d9488; }
.m-subject-card-status.s-unsubmitted { color: #e67e22; border-color: #e67e22; }
.m-subject-card-meta { font-size: 0.82rem; color: #666; margin-bottom: 4px; }
.m-subject-card-date { font-size: 0.78rem; color: var(--m-text-muted); }

body.m-page-subjects #subjectsTable { display: none !important; }
body.m-page-subjects .table-responsive { display: none !important; }
body.m-page-subjects .d-flex.justify-content-between.align-items-center.mb-3 > h4 { display: none !important; }
/* Hide desktop add-subject button on mobile (use bottom + tab instead) */
body.m-page-subjects .d-flex.justify-content-between.align-items-center.mb-3 > a.btn-primary { display: none !important; }
body.m-page-subjects .pagination-sm .page-link { font-size: 0.72rem !important; padding: 3px 8px !important; }
body.m-page-subjects .d-flex.justify-content-between.align-items-center.mt-3 {
    flex-direction: column; gap: 8px; align-items: center !important;
}


/* ==============================================
   8. Visit Page: module grid & form
   ============================================== */
body.m-page-visit .module-sidebar { display: none !important; }

.m-module-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
}
.m-module-card {
    background: var(--m-card);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    text-align: center;
    padding: 18px 8px 14px;
    text-decoration: none;
    color: var(--m-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--m-border);
    position: relative;
}
.m-module-card:active { background: #f0f7f7; }
.m-module-card-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #e8f5f3;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--m-accent);
}
.m-module-card-name { font-size: 0.82rem; font-weight: 500; line-height: 1.2; }
.m-module-card-badge {
    font-size: 0.65rem; padding: 1px 6px; border-radius: 3px; border: 1px solid;
}
.m-module-card-badge.saved { color: #e67e22; border-color: #e67e22; }
.m-module-card-badge.done { color: #0d9488; border-color: #0d9488; }
.m-module-card-badge.empty { color: #999; border-color: #ccc; }

.visit-header { display: none !important; }

body.m-page-visit .row.g-0 {
    display: block !important;
    margin: 0 -12px -12px -12px !important;
}
body.m-page-visit .module-content { padding: 12px !important; }
body.m-page-visit .module-content > .d-flex.justify-content-between.align-items-center.mb-3 { display: none !important; }
body.m-page-visit .module-content > .nav.nav-tabs.mb-3 { display: none !important; }

.m-visit-photos {
    background: var(--m-card);
    border-bottom: 1px solid var(--m-border);
    padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
}
.m-visit-photos-label { font-size: 0.9rem; font-weight: 500; }
.m-visit-photos-action { font-size: 0.82rem; color: var(--m-accent); text-decoration: none; }


/* ==============================================
   9. Form fields: mobile-friendly single-column
   ============================================== */
.row > [class*="col-sm-"] { flex: 0 0 100% !important; max-width: 100% !important; }
.row > .col-md-6, .row > .col-md-8,
.col-md-8.offset-md-2 { flex: 0 0 100% !important; max-width: 100% !important; margin-left: 0 !important; }

.mb-2.row.align-items-center,
.mb-3.row.align-items-center {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 10px 0;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0;
}
.mb-2.row.align-items-center .col-form-label,
.mb-3.row.align-items-center .col-form-label {
    flex: 0 0 auto !important;
    max-width: 45% !important;
    width: auto !important;
    font-size: 0.88rem !important;
    padding: 0 !important;
    color: var(--m-text);
    white-space: normal;
}
.mb-2.row.align-items-center > [class*="col-sm-"],
.mb-3.row.align-items-center > [class*="col-sm-"] {
    flex: 1 1 0 !important;
    max-width: 55% !important;
    text-align: right;
}
.mb-2.row.align-items-center .form-control-sm,
.mb-3.row.align-items-center .form-control-sm {
    text-align: right;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    font-size: 0.88rem !important;
    padding: 0 !important;
    height: auto !important;
}
.mb-2.row.align-items-center .form-control-sm:focus,
.mb-3.row.align-items-center .form-control-sm:focus {
    border-bottom: 1px solid var(--m-accent) !important;
    border-radius: 0 !important;
}

.input-group.input-group-sm { justify-content: flex-end; }
.input-group.input-group-sm .form-control {
    text-align: right; border: none !important; box-shadow: none !important;
    background: transparent !important; font-size: 0.88rem !important;
    max-width: 80px; padding: 0 4px 0 0 !important;
}
.input-group.input-group-sm .form-control:focus {
    border-bottom: 1px solid var(--m-accent) !important; border-radius: 0 !important;
}
.input-group.input-group-sm .input-group-text {
    background: transparent !important; border: none !important;
    font-size: 0.82rem !important; color: var(--m-text-muted); padding: 0 !important;
}

.btn-group.btn-group-sm { justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
.btn-group.btn-group-sm .btn { font-size: 0.78rem !important; padding: 4px 12px !important; border-radius: 20px !important; }
.btn-group.btn-group-sm .btn-check:checked + .btn { border-radius: 20px !important; }
.btn-group-sm.flex-wrap { gap: 4px !important; }
.btn-group-sm.flex-wrap .btn { font-size: 0.72rem !important; padding: 3px 10px !important; border-radius: 16px !important; }

.form-check { padding-left: 1.5em; }
.form-check-label { font-size: 0.82rem !important; }
.form-check-inline { margin-right: 0.8rem !important; }
.col-form-label.ms-4 { margin-left: 0.5rem !important; }
label.ms-4 { margin-left: 0.5rem !important; }


/* ==============================================
   10. Lab tables
   ============================================== */
.table-bordered { font-size: 0.72rem !important; }
.table-bordered th, .table-bordered td { padding: 4px 5px !important; vertical-align: middle; }
.table-bordered input.form-control-sm,
.table-bordered input.form-control { font-size: 0.72rem !important; padding: 2px 4px !important; }
[data-nd-toggle] { font-size: 0.62rem !important; padding: 1px 4px !important; }
.clinical-group .btn { font-size: 0.6rem !important; padding: 1px 4px !important; }
.tree-branch, .tree-child { margin-left: 6px !important; padding-left: 6px !important; }


/* ==============================================
   11. Save/Submit buttons: fixed bottom bar
   ============================================== */
body.m-page-visit .d-flex.justify-content-end.gap-2 {
    position: fixed !important;
    bottom: 0; left: 0; right: 0;
    background: var(--m-accent);
    padding: 0 !important; margin: 0 !important;
    border-top: none; z-index: 1900; gap: 0 !important; display: flex !important;
}
body.m-page-visit .d-flex.justify-content-end.gap-2 .btn {
    flex: 1; border-radius: 0 !important; border: none !important;
    padding: 14px 0 !important; font-size: 0.95rem !important;
    color: #fff !important; background: var(--m-accent) !important;
}
body.m-page-visit .d-flex.justify-content-end.gap-2 .btn-save-draft {
    background: var(--m-accent) !important;
    border-right: 1px solid rgba(255,255,255,0.2) !important;
}
body.m-page-visit .d-flex.justify-content-end.gap-2 .btn i { color: #fff; }
body.m-page-visit .m-bottombar { display: none !important; }
body.m-page-visit { padding-bottom: 56px !important; }


/* ==============================================
   12. Add Subject page
   ============================================== */
body.m-page-add-subject .card { border: none !important; box-shadow: none !important; }
body.m-page-add-subject .card-header { display: none !important; }
body.m-page-add-subject .card-body { padding: 0 !important; }
body.m-page-add-subject .breadcrumb { display: none !important; }
body.m-page-add-subject .col-md-8.offset-md-2 { flex: 0 0 100% !important; max-width: 100% !important; margin-left: 0 !important; }
body.m-page-add-subject .row > .col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
body.m-page-add-subject .form-label { font-size: 0.88rem !important; }
body.m-page-add-subject .d-flex.justify-content-between {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--m-accent); padding: 0 !important; margin: 0 !important;
    z-index: 1900; gap: 0 !important;
}
body.m-page-add-subject .d-flex.justify-content-between .btn {
    flex: 1; border-radius: 0 !important; border: none !important;
    color: #fff !important; background: var(--m-accent) !important;
    padding: 14px 0 !important; font-size: 0.95rem !important;
}
body.m-page-add-subject .d-flex.justify-content-between .btn-secondary {
    background: #7f8c8d !important;
}
body.m-page-add-subject .m-bottombar { display: none !important; }
body.m-page-add-subject { padding-bottom: 56px !important; }


/* ==============================================
   13. Datasets list page
   ============================================== */
.col-md-3 { flex: 0 0 50% !important; max-width: 50% !important; }
.card .card-body { padding: 10px !important; }
.card .card-body h6 { font-size: 0.82rem !important; }
.d-flex.mb-3.gap-2 { flex-wrap: wrap; }
.d-flex.mb-3.gap-2 .btn { font-size: 0.82rem !important; padding: 6px 12px !important; }


/* ==============================================
   14. Modal dialogs
   ============================================== */
.modal-dialog { margin: 10px !important; max-width: calc(100% - 20px) !important; }


/* ==============================================
   15. Alert / flash messages
   ============================================== */
.alert { font-size: 0.82rem !important; padding: 8px 12px !important; }


/* ==============================================
   16. Headings
   ============================================== */
h3 { font-size: 1.1rem !important; }
h4 { font-size: 1rem !important; }
h5 { font-size: 0.92rem !important; }
h6 { font-size: 0.85rem !important; }


/* ==============================================
   17. More dropdown
   ============================================== */
.m-more-dropdown {
    position: fixed; top: var(--m-topbar-h); right: 8px;
    background: #fff; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 2060; min-width: 160px; display: none; overflow: hidden;
}
.m-more-dropdown.show { display: block; }
.m-more-dropdown a, .m-more-dropdown button {
    display: block; width: 100%; padding: 12px 16px; text-align: left;
    background: none; border: none; border-bottom: 1px solid #f0f0f0;
    font-size: 0.88rem; color: var(--m-text); text-decoration: none; cursor: pointer;
}
.m-more-dropdown a:last-child, .m-more-dropdown button:last-child { border-bottom: none; }
.m-more-dropdown a:active, .m-more-dropdown button:active { background: #f5f5f5; }
.m-more-dropdown .disabled { color: #ccc; pointer-events: none; }


/* ==============================================
   18. Module grid page: visit info header
   ============================================== */
.m-visit-info { background: #fff; padding: 10px 16px; border-bottom: 1px solid var(--m-border); }
.m-visit-info-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: #666; margin-bottom: 2px; }
.m-visit-info-row strong { color: var(--m-text); }


/* ==============================================
   19. Subject visit list (expanded under card)
   ============================================== */
.m-visit-list { display: flex; flex-direction: column; gap: 0; }
.m-visit-item {
    display: flex; align-items: center; padding: 16px; background: var(--m-card);
    border-bottom: 1px solid #f0f0f0; text-decoration: none; color: var(--m-text); gap: 12px;
}
.m-visit-item:active { background: #f8f8f8; }
.m-visit-icon {
    width: 42px; height: 42px; border-radius: 10px; background: #e8f5f3;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--m-accent); flex-shrink: 0;
}
.m-visit-info-text { flex: 1; }
.m-visit-name { font-size: 0.95rem; font-weight: 500; margin-bottom: 2px; }
.m-visit-date { font-size: 0.78rem; color: var(--m-text-muted); }
.m-visit-arrow { color: #ccc; font-size: 14px; flex-shrink: 0; }
.m-visit-badge {
    font-size: 0.65rem; padding: 1px 6px; border-radius: 3px;
    border: 1px solid; margin-top: 2px; display: inline-block;
}
.m-visit-badge.submitted { color: #0d9488; border-color: #0d9488; }
.m-visit-badge.progress { color: #e67e22; border-color: #e67e22; }
.m-visit-badge.unsubmitted { color: #e67e22; border-color: #e67e22; }

}  /* END @media max-width 768px */


/* === Desktop: hide all mobile-injected elements === */
@media (min-width: 769px) {
    .m-topbar, .m-bottombar, .m-overlay,
    .m-subject-cards, .m-module-grid, .m-visit-list,
    .m-more-dropdown, .m-visit-photos, .m-visit-info {
        display: none !important;
    }
}