/* ============================================================
   assets/responsive.css
   Төслийн бүх хуудас мобайл/таблет дээр зөв харагдах нийтлэг стиль.
   Хуадас бүр <head> дээр <meta name="viewport"> + энэ файлыг холбоно.
   ============================================================ */

/* ── iOS дээр инпут фокус үед автомат томролтоос сэргийлэх ── */
input, select, textarea {
    font-size: 16px !important; /* 16px-ээс бага бол iOS томордог */
}

/* ── Хүснэгт бүхий карт: мобайл дээр хэвтээ скролл ── */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-wrap table {
    min-width: 640px; /* баганалууд шахагдахгүй */
}

/* ── Том товч дарах талбай (thumb-friendly) ── */
@media (hover: none) {
    a, button, [role="button"], input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ── Телефон дээр padding-ийг багасгах ── */
@media (max-width: 600px) {
    body {
        padding: 12px !important;
    }
    .container {
        padding: 0;
    }
    header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }
    header .user-nav,
    header .nav-links {
        flex-wrap: wrap;
        width: 100%;
    }
    h1 { font-size: 18px !important; }
    h2 { font-size: 15px !important; }

    /* Картууд дүүргэлт багасгах */
    .card,
    .table-card,
    .patient-card,
    .post-card {
        padding: 14px !important;
    }

    /* Grid хоёр багана → нэг багана (minmax(0,1fr) = багана доторх
       өргөн элементүүд grid-ийг хэтрүүлэхээс сэргийлнэ) */
    .grid,
    .stats-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    .grid > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Нэвтрийн/бүртгэлийн карт */
    .card[style*="max-width"] {
        max-width: 100% !important;
    }
}

/* ── Нарийн дэлгэцэд (.form-grid гэх мэт) ── */
@media (max-width: 900px) {
    .form-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}
@media (max-width: 480px) {
    .form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Эмчийн самбарын өвчтөний хуудас (patient-card) ── */
@media (max-width: 600px) {
    .patient-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }
    .doctor-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }
    /* Графикийн шүүлтүүрийн мөр (filter-row) */
    .filter-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
    }
    .filter-row form {
        width: 100%;
    }
    .filter-row select {
        width: 100% !important;
    }
    /* Нийтийн анхааруулгын баннер */
    .notice-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px;
    }
    /* Видеоны хэмжээ */
    video {
        max-height: 220px !important;
    }
    /* Дашбордын нэгж картауд дүүргэлт */
    .stat-card {
        padding: 14px !important;
    }
    .stat-card h3 {
        font-size: 22px !important;
    }
    /* Инлайн форм (төлбөр сунгах мөр) хэвтээгээс босоо болгох */
    .inline-form {
        flex-wrap: wrap;
    }
    .inline-form .input-sm {
        width: 90px !important;
    }
    /* Том div.mini-пробелуудыг багасгах */
    canvas {
        max-height: 260px !important;
    }
}

/* ── Чатын хуудас: мобайл/таблет дээр мессенджерийн загварт шилжинэ ──
   Sidebar → дээр нь хэвтээ гүйлгэх чипсүүдийн мөр, чат дэлгэцийн гол хэсгийг авна.
   body:has(.chat-area) — зөвхөн чатны хуудсанд (бусад хуудасанд нөлөөгүй) */
@media (max-width: 768px) {
    /* Бие: бүтэн дэлгэц (padding-gүй), гар нээхэд өндөр нь дүрживх болно (dvh) */
    body:has(.chat-area) {
        padding: 0 !important;
        height: 100vh !important;          /* fallback — dvh дэмждэггүй хөтөч */
        height: 100dvh !important;         /* iOS 15.4+/Chrome 108+: гар нээгдэхэд багасна */
    }

    /* Дээд меню: нэг мөр, нягт — чатад өндөр зай үлдээх */
    body:has(.chat-area) > header {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px;
        padding: 8px 12px !important;
    }
    body:has(.chat-area) > header h1 {
        font-size: 13px !important;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body:has(.chat-area) > header .nav-links {
        flex-wrap: nowrap;
        width: auto !important;
    }
    body:has(.chat-area) > header .nav-links a {
        margin-left: 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .layout {
        flex-direction: column;
        min-height: 0;
    }

    /* Sidebar → хэвтээ чипсүүдийн мөр (босоо жагсаалт дэлгэцийн 38vh-ийг идэхийн оронд) */
    .sidebar {
        width: 100% !important;
        max-height: none !important;
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    .sidebar-header {
        padding: 8px 12px 0 !important;
    }
    .contact-list {
        display: flex;
        flex-direction: row;
        gap: 8px;
        padding: 8px 12px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }
    .contact-list .contact-item {
        flex: 0 0 auto;
        width: 150px;
        border: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 8px 10px;
    }
    .contact-list .contact-item .name {
        font-size: 13px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .contact-list .contact-item .last-msg {
        max-width: 100% !important;
    }

    /* Чат талбар: үлдсэн өндрийг бүхэлд нь авна (flex шахалтын gotcha засвар) */
    .layout > .chat-area {
        flex: 1;
        min-height: 0;
    }

    /* Чатын толгой: урт нэр таслагдана, "Үзүүлэлт харах" холбоос шахагдахгүй */
    .chat-header {
        padding: 10px 12px !important;
        font-size: 14px !important;
        gap: 8px;
    }
    .chat-header > div:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .chat-header a {
        flex-shrink: 0;
    }

    .chat-messages {
        padding: 12px !important;
        overscroll-behavior: contain; /* чат дуусахад ард нь хуудас гүйлгэгдэхгүй */
    }
    .bubble {
        max-width: 85% !important;
    }

    /* Оролтын мөр: input зөв шахагдаж, файл/илгээх товч хөөрдөггүй */
    .chat-input-bar {
        padding: 8px 10px !important;
    }
    .chat-form {
        gap: 6px;
    }
    .chat-form input[type="text"] {
        flex: 1;
        min-width: 0; /* flex дотор тэгш шахагдана — товч мөрөөс гарчихдаггүй */
        font-size: 16px !important; /* iOS автомат томролтоос сэргийлнэ */
        padding: 10px 12px !important;
        border-radius: 10px;
    }
    .file-label {
        flex-shrink: 0;
        padding: 10px 11px !important;
    }
    .btn-send {
        flex-shrink: 0;
        padding: 10px 14px !important;
        font-size: 14px !important;
    }
}

/* ── Маш жижиг дэлгэц (≤480px): bubble өргөсч, нягтран ── */
@media (max-width: 480px) {
    .chat-messages {
        padding: 10px !important;
        gap: 8px;
    }
    .bubble {
        max-width: 88% !important;
        padding: 9px 12px !important;
    }
    .sys-bubble {
        max-width: 94% !important;
    }
    .contact-list .contact-item {
        width: 136px;
    }
    .chat-form input[type="text"] {
        padding: 9px 10px !important;
    }
    .btn-send {
        padding: 9px 12px !important;
    }
}

/* ── Хэвтээ (landscape) утас: чипсийн мөрийг цааш нягтруулна ── */
@media (max-width: 768px) and (orientation: landscape) {
    .sidebar-header {
        display: none;
    }
    .contact-list {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .contact-list .contact-item {
        width: 120px;
        padding: 6px 9px;
    }
}