/*  Mobile Performance Optimizations  */
/* ============================================================
   MOBILE PERFORMANCE — TỐI ƯU HI— U SUẤT CHO ĐI— N THOẠI
   PC/Desktop: KH—NG thay ——"i gì (mọi thứ nằm trong max-width: 767px)
   ============================================================ */

@media (max-width: 767px) {

  /* ----------------------------------------------------------
     1. TẮT TẤT CẢ ANIMATION LI—`N TỤC (infinite)
        Đây là nguyên nhân chính gây lag/giật scroll trên mobile.
        Browser phải chạy animation ngay cả khi element không nhìn thấy.
     ---------------------------------------------------------- */
  .hero-svg {
    animation: none !important;
    filter: none !important;
    /* Xóa drop-shadow nặng */
  }

  .hero-orbit {
    animation: none !important;
    transform: none !important;
  }

  .node-pulse,
  .node-pulse:nth-child(2) {
    animation: none !important;
  }

  .hero-particles .p1,
  .hero-particles .p2,
  .hero-particles .p3,
  .hero-particles .p4 {
    animation: none !important;
    transform: none !important;
  }

  .cad-brackets {
    animation: none !important;
    opacity: 0.7;
  }

  /* Skeleton shimmer — thay bằng solid color (animation gây CPU spike) */
  .skeleton {
    animation: none !important;
    background: #dde8f0 !important;
  }

  /* ----------------------------------------------------------
     2. X—A BACKDROP-FILTER (Nguyên nhân giật mạnh nhất trên mobile)
        backdrop-filter bu—"c GPU composite toàn b—" layer phía sau.
        Trên mid-range Android gây giật rõ ràng.
     ---------------------------------------------------------- */

  /* Modal backdrop — thay bằng solid semi-transparent */
  .modal-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(17, 38, 54, 0.72) !important;
  }

  /* Services workflow step glassmorphism */
  .srv-wf-flow-step {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff !important;
  }

  /* Xóa tất cả backdrop-filter tiềm nĒng khác */
  .glass-element,
  [class*="glass"],
  [class*="blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* ----------------------------------------------------------
     3. ĐƠN GIẢN H—A BOX-SHADOW (144 box-shadow trong file này!)
        Multi-layer shadow bu—"c GPU repaint m—i lần scroll/hover.
        Thay thành shadow —ơn giản hơn.
     ---------------------------------------------------------- */

  /* Nav link active shadow — giảm từ 3 layer xu—ng 1 */
  .main-nav a:not(.upload-stl).active {
    box-shadow: 0 4px 12px rgba(22, 114, 230, 0.3) !important;
  }

  .main-nav a:not(.upload-stl):hover,
  .main-nav a:not(.upload-stl):focus-visible {
    box-shadow: none !important;
  }

  /* Upload STL button */
  .main-nav a.upload-stl:hover,
  .main-nav a.upload-stl:focus {
    box-shadow: 0 4px 16px rgba(22, 114, 230, 0.4) !important;
  }

  /* Chat toggle */
  .chat-toggle {
    box-shadow: 0 4px 12px rgba(22, 114, 230, 0.25) !important;
  }

  /* Portfolio item hover */
  .portfolio-grid .p-item:hover,
  .portfolio-grid .p-item:focus-within {
    box-shadow: 0 6px 20px rgba(22, 114, 230, 0.14) !important;
  }

  /* Admin sidebar active link */
  .side-link.active {
    box-shadow: 0 2px 8px rgba(22, 114, 230, 0.2) !important;
  }

  /* ----------------------------------------------------------
     4. ĐƠN GIẢN H—A TRANSITION
        Ch—0 giữ transform + opacity (GPU compositable).
        Xóa transition trên color/background/box-shadow/border-color
        vì chúng trigger repaint m—i frame.
     ---------------------------------------------------------- */

  /* Nav links — 5 property —  ch—0 còn transform */
  .main-nav a:not(.upload-stl) {
    transition: transform 0.2s ease !important;
  }

  .main-nav a:not(.upload-stl)::after {
    transition: transform 0.2s ease !important;
  }

  /* Portfolio item */
  .portfolio-grid .p-item {
    transition: transform 0.2s ease !important;
  }

  /* Fade-in scroll animation */
  .fade-in {
    transition: opacity 0.4s ease, transform 0.4s ease !important;
  }

  /* Portfolio topic box */
  .pf-topic-box {
    transition: transform 0.18s ease !important;
  }

  /* Edit icon */
  .pf-edit-ico {
    transition: transform 0.2s ease !important;
  }

  /* Service workflow step */
  .srv-wf-flow-step {
    transition: transform 0.2s ease, border-color 0.2s ease !important;
  }

  /* Report highlight card */
  .rpt-highlight-card {
    transition: transform 0.2s ease !important;
  }

  /* Srv price card */
  .srv-price-card {
    transition: transform 0.2s ease !important;
  }

  /* QC item */
  .srv-qc-item {
    transition: transform 0.2s ease !important;
  }

  /* Upload STL button */
  .main-nav a.upload-stl {
    transition: transform 0.18s ease !important;
  }

  /* Button */
  .btn {
    transition: transform 0.15s ease !important;
  }

  /* Filter dropdown  */
  .f-btn {
    transition: none !important;
  }

  /* Side link */
  .side-link {
    transition: background 0.15s ease !important;
  }

  /* Report feed item */
  .rpt-feed-item {
    transition: none !important;
  }

  /* MC table row */
  .mc-cases-table tbody tr {
    transition: none !important;
  }

  /* Modal close */
  .modal-close {
    transition: none !important;
  }

  /* ----------------------------------------------------------
     5. TH—`M will-change CHO NHỮNG G—R THỰC SỰ C—N ANIMATE
        will-change: transform báo browser promote element
        lên GPU layer trư—:c, tránh repaint khi animate.
     ---------------------------------------------------------- */

  .btn:hover {
    will-change: transform;
  }

  .fade-in {
    will-change: transform, opacity;
  }

  .chat-toggle {
    will-change: transform;
  }

  .admin-sidebar {
    will-change: transform;
    /* Slide-in sidebar */
  }

  /* ----------------------------------------------------------
     6. TẮT HOVER EFFECTS NẶNG TR—`N TOUCH SCREEN
        Hover không có ý nghĩa trên cảm ứng, nhưng :hover vẫn
        trigger sau khi tap —  gây layout jump + repaint.
     ---------------------------------------------------------- */

  /* Tắt bounce transform khi hover nav link */
  .main-nav a:not(.upload-stl):hover {
    transform: none !important;
  }

  /* Tắt portfolio hover scale */
  .portfolio-grid .p-item:hover,
  .portfolio-grid .p-item:focus-within {
    transform: none !important;
    z-index: auto !important;
  }

  /* Tắt portfolio topic box hover lift */
  .pf-topic-box:hover {
    transform: none !important;
  }

  /* Tắt workflow step hover slide */
  .srv-wf-flow-step:hover {
    transform: none !important;
  }

  /* Tắt workflow step number rotate khi hover */
  .srv-wf-flow-step:hover .srv-wf-flow-num {
    transform: none !important;
  }

  /* Tắt QC item hover lift */
  .srv-qc-item:hover {
    transform: none !important;
  }

  /* Tắt price card hover lift */
  .srv-price-card:hover {
    transform: none !important;
  }

  /* Tắt hero button lift */
  .btn:hover {
    transform: none;
  }

  /* pulseUpload animation khi hover Upload STL — tắt trên mobile */
  .main-nav a.upload-stl:hover,
  .main-nav a.upload-stl:focus {
    animation: none !important;
    transform: none !important;
  }

  /* rpt/dashboard card animation delay entry — ch—0 cần fade —ơn giản */
  .rpt-ranking-card,
  .rpt-recent-card {
    animation: none !important;
  }

}

/* end @media (max-width: 767px) */


/* ============================================================
   PREFERS-REDUCED-MOTION — Kill switch toàn cục
   Người dùng bật "Reduce Motion" trên —i—!n thoại
   sẽ tắt mọi animation/transition ngay lập tức.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/*  Mobile Nav (bottom bar)  */
.mobile-nav {
  display: none;
}

@media (max-width: 700px) {
  .mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1.5px solid #e6e9ef;
    box-shadow: 0 -2px 12px #1672e610;
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    height: 58px;
  }

  .mnav-link {
    flex: 1 1 0;
    text-align: center;
    color: #1672E6;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: background .18s;
  }

  .mnav-link span:first-child {
    font-size: 22px;
    display: block;
    line-height: 1;
  }

  .mnav-link.active,
  .mnav-link:active {
    color: #0F74E6;
    background: #f3f8ff;
  }

  body {
    padding-bottom: 62px !important;
  }
}

@media (max-width: 700px) {
  .container {
    padding: 0 6px;
  }

  .hero-inner {
    flex-direction: column;
    gap: 18px;
    padding: 0;
  }

  .hero-content {
    min-width: 0;
    text-align: center;
  }

  .hero-image {
    margin: 0 auto;
    max-width: 90vw;
  }

  .section,
  .section.alt,
  .section-tight {
    padding: 24px 0;
  }

  .about-grid,
  .services-grid,
  .portfolio-grid,
  .tech-grid,
  .qc-grid,
  .scope-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .card,
  .service-card,
  .qc-card,
  .scope-card,
  .tech-card {
    padding: 14px 8px;
    border-radius: 12px;
  }

  .stat-item h3 {
    font-size: 22px;
  }

  .stat-item p {
    font-size: 13px;
  }

  .hero h1 {
    font-size: 22px;
  }

  .section-title {
    font-size: 18px;
  }

  .mini-cta-box,
  .cta-final-box {
    padding: 24px 8px;
    border-radius: 14px;
  }

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

  .plat-card {
    padding: 12px 8px;
    border-radius: 12px;
  }

  .workflow-diagram,
  .workflow-roadmap .roadmap {
    flex-direction: column !important;
    gap: 18px !important;
  }

  .rm-card,
  .wf-card {
    max-width: 100% !important;
    padding: 18px 8px !important;
  }

  .faq-q,
  .faq-a {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 700px) {
  .chat-widget {
    bottom: 80px !important;
    right: 16px;
  }

  .whatsapp-widget {
    bottom: 150px !important;
    right: 20px;
  }
}


/*  Mobile Widget Positions  */
@media (max-width: 700px) {
  .chat-widget {
    bottom: 80px !important;
    right: 16px;
  }

  .whatsapp-widget {
    bottom: 150px !important;
    right: 20px;
  }
}

/* ============================================================
   ADMIN MOBILE RESPONSIVE FIXES
   Ngăn tràn khung hình + tối ưu hiệu suất trên điện thoại
   ============================================================ */

/* ── Admin body overflow containment ── */
@media (max-width: 900px) {

  .admin-body,
  .admin-app {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .admin-main {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .admin-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* ── ALL tables: force horizontal scroll wrapper ── */
@media (max-width: 900px) {

  table,
  .m-table,
  .mc-cases-table,
  .mc-lines-table,
  .rpt-table,
  .upl-table,
  .pov-dt,
  .pm-table,
  .blm-table,
  #uplTable,
  #ctTable,
  #usrTable,
  #chatSessionsTable {
    font-size: 11px !important;
  }

  table th,
  table td,
  .m-table th,
  .m-table td,
  .mc-cases-table th,
  .mc-cases-table td,
  .rpt-table th,
  .rpt-table td,
  .upl-table th,
  .upl-table td,
  .blm-table th,
  .blm-table td {
    padding: 4px 6px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  /* Force scroll containers for all table wrappers */
  .mc-cases-scroll,
  .rpt-table-scroll,
  .upl-table-wrap,
  .mgr-table-wrap,
  .pm-wrap,
  .blm-table-wrap,
  .table-wrap-center {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* Any div wrapping a table that has overflow */
  div[style*="overflow-x:auto"],
  div[style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── Manage tabs: wrap on mobile ── */
@media (max-width: 900px) {

  .manage-tabs,
  .mgr-tabs {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .m-tab {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  .stg-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -12px !important;
    padding: 0 12px !important;
  }

  .stg-tab {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }
}

/* ── Manage split layouts: stack on mobile ── */
@media (max-width: 820px) {
  .mc-split-layout {
    grid-template-columns: 1fr !important;
  }

  .mc-form-panel {
    position: static !important;
  }

  .mgr-two-col {
    grid-template-columns: 1fr !important;
  }

  .mc-list-panel .mc-cases-scroll {
    max-height: 50vh !important;
  }
}

/* ── Card padding reduction on mobile ── */
@media (max-width: 600px) {
  .card {
    padding: 12px 10px !important;
    border-radius: 12px !important;
    gap: 6px !important;
  }

  .admin-content {
    padding: 0 6px 80px 6px !important;
    gap: 14px !important;
  }

  .view-panel {
    gap: 4px !important;
  }

  .view-title {
    font-size: 16px !important;
  }
}

/* ── Popups: full width on mobile ── */
@media (max-width: 520px) {
  .popup-content {
    min-width: auto !important;
    max-width: 92vw !important;
    width: 92vw !important;
    padding: 18px 12px 14px 12px !important;
    margin: 0 auto !important;
  }

  .popup-confirm {
    padding: 10px !important;
  }

  /* All inline popup dialogs */
  div[id*="Popup"][style*="position:fixed"]>div,
  div[id*="popup"][style*="position:fixed"]>div {
    min-width: auto !important;
    max-width: 92vw !important;
    width: 92vw !important;
    padding: 16px 12px 12px 12px !important;
  }

  /* Case edit popup */
  #caseEditPopup>div,
  #priceEditPopup>div,
  #doctorEditPopup>div,
  #invArchivePopup>div,
  #invRestorePopup>div,
  #invStatusPopup>div,
  #invConfirmPopup>div {
    min-width: auto !important;
    max-width: 92vw !important;
    width: 92vw !important;
    padding: 20px 14px 14px 14px !important;
  }
}

/* ── Dashboard metric cards: stack on mobile ── */
@media (max-width: 640px) {
  .rpt-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .rpt-charts-row {
    grid-template-columns: 1fr !important;
  }

  .rpt-bottom-row {
    grid-template-columns: 1fr !important;
  }

  .rpt-controls {
    padding: 8px 10px !important;
  }

  .rpt-ctrl-bottom {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .rpt-metric {
    padding: 10px 12px !important;
  }

  .rpt-metric-value {
    font-size: 18px !important;
  }
}

@media (max-width: 400px) {
  .rpt-metrics {
    grid-template-columns: 1fr !important;
  }
}

/* ── Upload status chips: scroll on mobile ── */
@media (max-width: 600px) {
  #uplStatusChips {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }

  .upl-chip {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
}

/* ── Invoice tabs: scroll on mobile ── */
@media (max-width: 600px) {

  .inv-tabs,
  #invoiceTabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .inv-tab {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
  }
}

/* ── Settings: stack on mobile ── */
@media (max-width: 900px) {
  .stg-two-col {
    grid-template-columns: 1fr !important;
  }

  .stg-single-col {
    max-width: 100% !important;
  }

  .stg-field-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── Form rows: stack on mobile ── */
@media (max-width: 600px) {
  .form-row-2 {
    grid-template-columns: 1fr !important;
  }

  .mc-form-row {
    grid-template-columns: 1fr !important;
  }

  .mc-add-row {
    flex-wrap: wrap !important;
  }

  .mc-qty-field {
    flex: 1 1 60px !important;
  }

  .product-form,
  .doctor-form,
  .price-form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .product-form .btn,
  .doctor-form .btn,
  .price-form .btn {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .product-form input,
  .product-form select,
  .doctor-form input,
  .doctor-form select {
    max-width: 100% !important;
  }
}

/* ── Admin sidebar: better mobile behavior ── */
@media (max-width: 900px) {
  .admin-sidebar {
    width: 75vw !important;
    max-width: 300px !important;
  }

  .side-link,
  .side-aux {
    font-size: 14px !important;
    padding: 10px 10px !important;
  }

  .side-brand .brand-mini {
    font-size: 18px !important;
  }

  /* Sidebar backdrop overlay */
  .admin-sidebar.open+.admin-sidebar-backdrop {
    display: block !important;
  }
}

/* ── Admin topbar: compact on mobile ── */
@media (max-width: 600px) {
  .admin-topbar {
    padding: 10px 12px 8px 48px !important;
  }

  .user-badge {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
}

/* ── Blog manager: table scroll ── */
@media (max-width: 900px) {
  .blm-table {
    font-size: 11px !important;
    min-width: 600px !important;
  }

  .blm-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .blm-header-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .blm-search-bar {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .blm-search-wrap {
    width: 100% !important;
  }

  .blm-search-input {
    width: 100% !important;
  }
}

/* ── Portfolio grid: tighter on mobile ── */
@media (max-width: 600px) {
  .pfo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .pfo-header-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .pfo-add-form {
    flex-direction: column !important;
    width: 100% !important;
  }

  .pfo-add-input-wrap {
    max-width: 100% !important;
    width: 100% !important;
  }

  .pfo-add-input {
    width: 100% !important;
  }
}

/* ── Showcase manager: grid adjustment ── */
@media (max-width: 600px) {
  .sc-mgr-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .sc-mgr-header-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  .sc-drop-inner {
    flex-direction: column !important;
    text-align: center !important;
  }

  .sc-drop-text {
    text-align: center !important;
  }
}

/* ── Contacts: table and layout fixes ── */
@media (max-width: 700px) {
  .ct-main-tab {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  #ctTable,
  #usrTable {
    font-size: 10px !important;
  }

  #ctTable th,
  #ctTable td,
  #usrTable th,
  #usrTable td {
    padding: 4px 5px !important;
    font-size: 10px !important;
  }

  #ctDetailModal>div {
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  #usrActivityPanel {
    width: 92vw !important;
    max-width: 360px !important;
  }
}

/* ── Welcome email modal: full width on mobile ── */
@media (max-width: 600px) {
  #welcomeEmailModal {
    width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* ── Price matrix: compact on mobile ── */
@media (max-width: 600px) {
  .pm-corner {
    min-width: 100px !important;
    font-size: 11px !important;
  }

  .pm-doc-th {
    min-width: 70px !important;
    font-size: 10px !important;
  }

  .pm-prod-cell {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  .pm-price-cell {
    padding: 4px 6px !important;
  }
}

/* ── Doctor price overview: compact on mobile ── */
@media (max-width: 600px) {
  .pov-statsbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  .pov-stat {
    padding: 0 8px !important;
    min-width: 50px !important;
  }

  .pov-stat-n {
    font-size: 16px !important;
  }

  .pov-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
}

/* ── Portfolio editor modal: mobile full-screen ── */
@media (max-width: 640px) {
  .pfe-overlay {
    padding: 0 !important;
  }

  .pfe-modal {
    width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  .pfe-header {
    padding: 12px 14px !important;
  }

  .pfe-toolbar {
    padding: 8px 14px !important;
  }

  .pfe-content-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Chat sessions: compact table ── */
@media (max-width: 600px) {
  #chatSessionsTable {
    font-size: 10px !important;
    min-width: 500px !important;
  }

  #chatSessionsTable th,
  #chatSessionsTable td {
    padding: 3px 4px !important;
    font-size: 10px !important;
  }
}

/* ── Fix all modals/lightboxes from being wider than screen ── */
@media (max-width: 520px) {

  div[id*="Modal"][style*="display"],
  div[id*="modal"][style*="display"],
  div[id*="Popup"][style*="display"] {
    max-width: 100vw !important;
  }

  /* Case edit form inputs */
  #caseEditForm input,
  #caseEditForm textarea,
  #caseEditForm select,
  #priceEditForm input,
  #priceEditForm select,
  #doctorEditForm input,
  #doctorEditForm select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Edit items table */
  #editItemsTable {
    width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
  }
}

/* ── mc-case-grid: stack on mobile ── */
@media (max-width: 860px) {
  .mgr-case-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .mgr-add-line-wrap {
    grid-column: span 2 !important;
  }
}

@media (max-width: 500px) {
  .mgr-case-grid {
    grid-template-columns: 1fr !important;
  }

  .mgr-add-line-wrap {
    grid-column: span 1 !important;
  }
}

/* ── Buttons: full width on very small screens ── */
@media (max-width: 400px) {
  .btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .mc-actions {
    flex-direction: column !important;
    width: 100% !important;
  }

  .mc-save-btn {
    width: 100% !important;
  }
}

/* --- Mobile Settings Dropdown --- */
@media (max-width: 900px) {
  .stg-mobile-tabs-wrap {
    display: block !important;
    margin: 16px 0;
  }

  .stg-mobile-tabs-select {
    width: 100%;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--card-bg, #fff);
    color: var(--text-main, #1e293b);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201L7%207L13%201%22%20stroke%3D%22%2364748B%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
  }

  .stg-tabs {
    display: none !important;
  }

  .dark .stg-mobile-tabs-select {
    border-color: #334155;
    background-color: #1e293b;
    color: #f1f5f9;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2214%22%20height%3D%228%22%20viewBox%3D%220%200%2014%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201L7%207L13%201%22%20stroke%3D%22%2394A3B8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  }
}