/* SERENICA mobile layer - applies only at phone width. */
@media (max-width: 767.98px) {

  /* --- Tables become cards. Only tables tagged .mcard by mobile.js, so a
         JS failure leaves the normal scrolling table instead of a broken one. --- */
  table.mcard { width: 100% !important; border: 0; }
  table.mcard thead { display: none; }
  table.mcard, table.mcard tbody, table.mcard tr, table.mcard td {
    display: block; width: auto !important;
  }
  table.mcard tbody tr {
    border: 1px solid #e0e6ed; border-radius: 10px;
    margin: 0 0 12px; padding: 4px 13px; background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
  }
  table.mcard tbody td {
    border: 0 !important; border-bottom: 1px solid #f3f5f9 !important;
    padding: 8px 0 !important; display: flex; align-items: flex-start;
    gap: 12px; font-size: 13px; line-height: 1.4; white-space: normal !important;
  }
  table.mcard tbody td:last-child { border-bottom: 0 !important; }
  table.mcard tbody td::before {
    content: attr(data-label); flex: 0 0 38%; max-width: 38%;
    color: #888ea8; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; padding-top: 2px;
  }
  table.mcard tbody td > * { min-width: 0; max-width: 100%; }
  table.mcard tbody td[data-label="#"] { display: none; }
  table.mcard tbody td.dataTables_empty {
    display: block; text-align: center; padding: 18px 0 !important;
  }
  table.mcard tbody td.dataTables_empty::before { content: none; }
  table.mcard .dropdown-menu { position: static !important; transform: none !important; }

  /* --- DataTables chrome stacks instead of floating --- */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important; width: 100%; text-align: left !important;
    margin: 0 0 10px !important;
  }
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important; margin: 6px 0 0 !important;
  }
  .dataTables_wrapper .dataTables_paginate { text-align: center !important; }
  .dt-buttons { flex-wrap: wrap; }

  /* --- Page furniture --- */
  .layout-px-spacing { padding: 0 12px !important; }
  .widget, .card, .statbox { margin-bottom: 14px; }
  .widget-content, .card-body { padding: 14px !important; }
  .page-header { padding-top: 14px; }
  .page-title h3, .page-header h3 { font-size: 19px; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* --- Forms: full-width controls, no cramped two-up rows --- */
  .form-group, .form-row > [class*="col-"] { margin-bottom: 12px; }
  .form-control, .custom-select, .select2-container { width: 100% !important; }
  .btn-block-mobile, form .btn[type="submit"] { width: 100%; }

  /* --- Tap targets --- */
  .btn, .page-link { min-height: 38px; }
  .table td .btn-sm { padding: 5px 11px; }
}

/* Long values (date badges, fee stacks, button groups) must wrap inside the
   card instead of being clipped by the value column. */
@media (max-width: 767.98px) {
  table.mcard tbody td { flex-wrap: wrap; }
  table.mcard tbody td::before { flex-basis: 34%; max-width: 34%; }
  table.mcard tbody td * {
    white-space: normal !important; word-break: break-word; max-width: 100%;
  }
  table.mcard tbody td .badge {
    display: inline-block; height: auto; line-height: 1.35; text-align: left;
  }
  table.mcard tbody td .dropdown,
  table.mcard tbody td .btn-group,
  table.mcard tbody td .input-group { max-width: 100%; }
}

/* ============================================================
   App shell: makes the phone view read as an application
   rather than a desktop admin page squeezed narrow.
   ============================================================ */
@media (max-width: 767.98px) {

  body { background: #f4f7fa; }

  /* --- Brand app bar (Meeting Matters blue) --- */
  .header-container.fixed-top {
    background: linear-gradient(135deg, #0E4C73 0%, #0090D8 100%) !important;
    box-shadow: 0 2px 10px rgba(14,76,115,.25);
    padding-top: env(safe-area-inset-top, 0px);
    border: 0 !important;
  }
  .header-container .navbar {
    background: transparent !important; box-shadow: none !important;
    margin: 0 !important; border-radius: 0 !important;
    min-height: 54px !important; padding: 4px 8px !important;
  }
  .header-container .navbar .navbar-item,
  .header-container .navbar .navbar-brand { background: transparent !important; }
  .header-container .navbar a,
  .header-container .navbar span,
  .header-container .navbar p { color: #fff !important; }
  .header-container .navbar svg { color: #fff !important; stroke: #fff !important; }
  .header-container .navbar .nav-link { color: #fff !important; }

  /* The theme renders a second mobile header with the same bell. One bar is enough. */
  .mobile-header.d-lg-none { display: none !important; }

  /* --- Stat tiles: two across, compact --- */
  .row.layout-top-spacing > [class*="col-"] {
    flex: 0 0 50% !important; max-width: 50% !important;
    padding-left: 6px !important; padding-right: 6px !important;
  }
  .row.layout-top-spacing > [class*="col-"] .widget-card-four {
    min-height: 0 !important; padding: 14px 13px !important; border-radius: 12px;
  }
  .widget-card-four .w-icon,
  .widget-card-four .wallet-icon { transform: scale(.8); }
  .widget-card-four .w-numeric-value { margin-top: 2px !important; }
  .widget-card-four h5, .widget-card-four .w-title { font-size: 12px !important; line-height:1.3; }
  .widget-card-four .w-value, .widget-card-four h6 { font-size: 22px !important; }

  /* --- Bottom tab bar, injected by mobile.js --- */
  .mm-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; background: #fff;
    border-top: 1px solid #e4e9f0;
    box-shadow: 0 -2px 12px rgba(16,42,66,.07);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mm-tabbar a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 8px 2px 7px; text-decoration: none;
    color: #8a94a6; font-size: 10.5px; font-weight: 600; letter-spacing: .2px;
    min-height: 56px; justify-content: center;
  }
  .mm-tabbar a svg { width: 22px; height: 22px; stroke: currentColor; fill: none;
                     stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .mm-tabbar a.is-active { color: #0090D8; }
  .mm-tabbar a.is-active svg { stroke: #0090D8; }
  .mm-tabbar { display: flex !important; }

  /* keep content clear of the bar */
  body.mm-has-tabbar { padding-bottom: 68px; }
  body.mm-has-tabbar .footer-wrapper { display: none; }
}

/* Stat tiles, corrected: in this theme the TITLE is an h6 and the number is
   p.value, so sizing h6 as the number made every title huge. */
@media (max-width: 767.98px) {
  .widget-card-four { position: relative; min-height: 0 !important; padding: 13px 12px !important; }
  .widget-card-four .widget-content { padding: 0 !important; }
  .widget-card-four .w-content,
  .widget-card-four .w-info { display: block !important; height: auto !important; }
  .widget-card-four .w-info h6 {
    font-size: 11.5px !important; line-height: 1.3 !important; font-weight: 600 !important;
    color: #6b7280 !important; margin: 0 0 5px !important; padding-right: 34px;
    min-height: 30px; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .widget-card-four .w-info p.value {
    font-size: 25px !important; font-weight: 700 !important; margin: 0 !important;
    line-height: 1.1 !important;
  }
  .widget-card-four .d-flex.justify-content-end {
    position: absolute !important; top: 10px; right: 10px; height: auto !important;
  }
  .widget-card-four .w-icon { width: 30px !important; height: 30px !important; transform: none !important; }
  .widget-card-four .w-icon svg { width: 15px !important; height: 15px !important; }
  .row.layout-top-spacing > [class*="col-"] { margin-bottom: 10px !important; }
  .row.layout-top-spacing > [class*="col-"] .layout-spacing { margin-bottom: 0 !important; }
}

/* Bootstrap rows carry negative side margins, which pushed the page 3px wider
   than the viewport. Neutralise them inside the content area on phones. */
@media (max-width: 767.98px) {
  .layout-px-spacing .row { margin-left: 0 !important; margin-right: 0 !important; }
  .layout-px-spacing .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  .row.layout-top-spacing > [class*="col-"] { padding-left: 5px !important; padding-right: 5px !important; }

  /* Table controls: one compact block each, nothing hanging off the edge */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter { width: 100% !important; margin: 0 0 10px !important; }
  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label {
    display: block; width: 100%; font-size: 13px; color: #6b7280;
  }
  .dataTables_wrapper .dataTables_filter input {
    display: block; width: 100% !important; box-sizing: border-box;
    margin: 6px 0 0 !important; height: 40px;
  }
  .dataTables_wrapper .dataTables_length label { display: flex; align-items: center; gap: 10px; }
  .dataTables_wrapper .dataTables_length select { width: auto !important; min-width: 72px; height: 36px; }
  .dataTables_wrapper .dataTables_info { font-size: 12.5px; color: #8a94a6; }

  /* Filter / Reset pair reads as a row of buttons, not overlapping blocks */
  .btn + .btn { margin-top: 8px; }
}

/* DataTables wraps the input inside the label, so a 100% width input starts
   after the label text and runs off the card. Stack them instead. */
@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label {
    display: flex !important; flex-direction: column; align-items: stretch;
    gap: 6px; margin: 0;
  }
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin: 0 !important; }
  .dataTables_wrapper .dataTables_length select { width: 100% !important; min-width: 0; }
  .dataTables_wrapper .dataTables_length { max-width: 150px; }
  .dataTables_wrapper > .row:first-child { padding: 12px 12px 0; }
  .dataTables_wrapper > .row:first-child > [class*="col-"] { margin-bottom: 0; }
}

/* "Show 10 entries" costs three stacked lines on a phone and earns little:
   pagination still works. Hide it and give the search the full width. */
@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_length { display: none !important; }
  .dataTables_wrapper > .row:first-child { padding: 12px 12px 4px; }
  .dataTables_wrapper .dataTables_filter { margin: 0 !important; }
  .dataTables_wrapper .dataTables_filter label { gap: 5px; }
  .dataTables_wrapper .dataTables_filter input { height: 42px; border-radius: 9px; }
  table.mcard { margin-top: 4px !important; }
  .widget .widget-content, .card .card-body { padding-top: 10px !important; }
}

/* The doctor dashboard uses its own .kpi-* tiles (not widget-card-four),
   with a 34px value. Give them the same two-up compact treatment. */
@media (max-width: 767.98px) {
  .kpi-value { font-size: 23px !important; line-height: 1.1 !important; }
  .kpi-label { font-size: 11.5px !important; line-height: 1.3 !important; color: #6b7280 !important; }
  .kpi-body { min-width: 0 !important; }
  .kpi-icon { transform: scale(.82); }
  .kpi-arrow { display: none !important; }
  .kpi-card, .kpi-item, .kpi-tile { padding: 13px 12px !important; border-radius: 12px !important; }
}

/* The two-up rule was hitting every column in the row, so panels like
   Notifications got squeezed into half a screen. Narrow it to columns that
   actually contain a stat tile. Written so that if :has() is unsupported,
   everything simply falls back to full width rather than breaking. */
@media (max-width: 767.98px) {
  .row.layout-top-spacing > [class*="col-"] {
    flex: 0 0 100% !important; max-width: 100% !important;
  }
  .row.layout-top-spacing > [class*="col-"]:has(.widget-card-four),
  .row.layout-top-spacing > [class*="col-"]:has(.kpi-value) {
    flex: 0 0 50% !important; max-width: 50% !important;
  }
}

/* ============================================================
   Phone performance. The admin shell ships ~1.1MB of CSS/JS and the
   card transform turns each table row into a dozen flex boxes with a
   pseudo-element, so long lists cost a lot of layout and paint.
   Everything below is phone-only and purely additive.
   ============================================================ */
@media (max-width: 767.98px) {

  /* Let the browser skip layout and paint for rows that are off screen.
     contain-intrinsic-size keeps the scrollbar honest while they are skipped. */
  table.mcard tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 230px;
    box-shadow: none;
  }

  /* One shadow per widget is enough; the theme stacks several. */
  .widget, .card, .statbox { box-shadow: 0 1px 3px rgba(16,42,66,.08) !important; }

  /* Panels the theme hands to perfect-scrollbar: scroll them natively.
     The JS scrollbar is what makes inner panels feel stuck on touch. */
  .mt-container, .mail-sidebar-scroll, .chat-conversation-box,
  .inv-list-container, .invoice-inbox, .mailbox-inbox, .ps {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .ps__rail-x, .ps__rail-y, .ps__thumb-x, .ps__thumb-y { display: none !important; }

  /* Animations on a phone CPU buy nothing here and cost a frame each. */
  .widget, .card, .mm-tabbar a, .btn { transition: none !important; }
}

/* Return path from a desktop panel to the phone application. */
@media (max-width: 767.98px) {
  .mm-toapp {
    display: flex !important;
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); z-index: 2000;
    align-items: center; gap: 8px;
    background: linear-gradient(135deg, #0E4C73, #0090D8);
    color: #fff !important; text-decoration: none !important;
    padding: 11px 18px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; line-height: 1;
    box-shadow: 0 6px 20px rgba(14,76,115,.35);
  }
  .mm-toapp svg {
    width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  body.mm-has-tabbar { padding-bottom: 0; }
}