/* TheraConnect — mobile.css */
/* Mobile app shell — ALL styles scoped under #mobileApp */
/* Class names match exactly what JS files produce */

/* Hidden by default (desktop), shown on mobile */
#mobileApp {
    overflow-x: hidden; display: none; }

@media (max-width: 900px) {
    /* Show mobile shell */
    #mobileApp {
    overflow-x: hidden; display: block !important; }

    /* Hide ALL desktop chrome — every possible element */
    .main-header,
    .main-footer,
    .nav-overlay,
    .nav-drawer,
    .cookie-bar,
    .profile-pending-banner,
    .panel-layout,
    .panel-accordion,
    .panel-sidebar,
    .panel-content,
    .desktop-profile,
    .layout-dashboard,
    .layout-sidebar,
    .layout-single,
    .profile-header,
    .profile-tabs,
    .psych-panel,
    .admin-accordion,
    header.site-header,
    footer.site-footer,
    .site-header,
    .site-footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Strip container/main wrappers so mobileApp is full-viewport */
    body { margin: 0; padding: 0; }
    body > .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    main {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ═══════════════════════════════════════
   THEME VARIABLES (iOS Clean = default)
   ═══════════════════════════════════════ */
#mobileApp {
    overflow-x: hidden;
    --m-bg: #F2F2F7;
    --m-card: #FFFFFF;
    --m-primary: #1B5E3B;
    --m-primary-light: #2E7D52;
    --m-primary-soft: #EAF5EC;
    --m-accent: #D4A853;
    --m-accent-soft: #FFF8E7;
    --m-text: #1C1C1E;
    --m-text-sec: #636366;
    --m-text-muted: #AEAEB2;
    --m-border: #E5E5EA;
    --m-success: #34C759;
    --m-success-bg: #E3F9E5;
    --m-danger: #FF3B30;
    --m-danger-bg: #FFE5E5;
    --m-warning: #FFF8E1;
    --m-warning-border: #FFE082;
    --m-r: 14px;
    --m-r-sm: 10px;
    --m-shadow: 0 1px 4px rgba(0,0,0,0.06);
    --m-nav-bg: rgba(255,255,255,0.92);
    --m-nav-blur: blur(20px);
    --m-header-bg: #FFFFFF;
    --m-gradient: linear-gradient(135deg, #1B5E3B, #2E7D52);
    --m-btn-color: #fff;
    --m-star-fill: #D4A853;
}

/* ═══════════════════════════════════════
   GENERIC THEME SELECTOR
   [data-mobile-theme] vars live in mobile-theme-vars.css (loaded first).
   Do NOT duplicate here — it overrides dark/warm by cascade order.
   ═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   APP CONTAINER
   ═══════════════════════════════════════ */
#mobileApp {
    overflow-x: hidden;
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--m-bg);
    color: var(--m-text);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
#mobileApp *, #mobileApp *::before, #mobileApp *::after { box-sizing: border-box; }
#mobileApp input::placeholder { color: var(--m-text-muted); }
#mobileApp ::-webkit-scrollbar { width: 0; }

/* ═══════════════════════════════════════
   PAGE HEADER — sticky bar below topbar with icon + title + optional back
   ═══════════════════════════════════════ */
#mobileApp .m-page-header {
    padding: 12px 16px; display: flex; align-items: center; gap: 10px;
    background: var(--m-header-bg); border-bottom: 1px solid var(--m-border);
    position: sticky; top: 48px; z-index: 90;
}
#mobileApp .m-page-header-back {
    background: none; border: none; padding: 4px; cursor: pointer; display: flex;
    color: var(--m-text);
}
#mobileApp .m-page-header-icon { display: flex; align-items: center; color: var(--m-primary); }
#mobileApp .m-page-header-title {
    font-size: 17px; font-weight: 700; color: var(--m-text); margin: 0; flex: 1;
}

/* ═══════════════════════════════════════
   ANIMATION + PAGE CONTENT WRAPPER
   ═══════════════════════════════════════ */
@keyframes mFadeUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
#mobileApp .m-page-enter { animation: mFadeUp 0.3s ease; padding: 0 16px 100px; }

/* ═══════════════════════════════════════
   TOP BAR — shell: .m-topbar .m-topbar-left .m-topbar-logo .m-topbar-title .m-theme-switcher .m-theme-btn
   ═══════════════════════════════════════ */
#mobileApp .m-topbar {
    height: 48px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; background: var(--m-header-bg); border-bottom: 1px solid var(--m-border);
    position: sticky; top: 0; z-index: 100;
}
#mobileApp .m-topbar-left { display: flex; align-items: center; gap: 8px; }
#mobileApp .m-topbar-logo {
    width: 26px; height: 26px; border-radius: 7px; background: var(--m-gradient);
    display: flex; align-items: center; justify-content: center;
}
#mobileApp .m-topbar-title { font-size: 15px; font-weight: 700; color: var(--m-primary); }
#mobileApp .m-theme-switcher {
    display: flex; gap: 3px; background: var(--m-bg); border-radius: 20px; padding: 3px;
}
#mobileApp .m-theme-btn {
    padding: 4px 9px; border-radius: 16px; border: none; cursor: pointer;
    font-size: 10px; font-weight: 600; background: transparent; color: var(--m-text-sec);
    transition: all 0.2s; font-family: inherit;
}
#mobileApp .m-theme-btn.is-active { background: var(--m-primary); color: var(--m-btn-color); }

/* Lang switcher (topbar) */
#mobileApp .m-lang-switcher {
    display: flex; gap: 2px; background: var(--m-bg); border-radius: 16px; padding: 3px;
    margin-left: auto; flex-shrink: 0;
}
#mobileApp .m-lang-btn {
    border: none; background: transparent; cursor: pointer;
    padding: 4px 8px; border-radius: 14px; font-size: 10px; font-weight: 700;
    color: var(--m-text-sec); text-decoration: none; transition: all 0.2s;
    letter-spacing: 0.3px;
}
#mobileApp .m-lang-btn.is-active {
    background: var(--m-primary); color: var(--m-btn-color);
}

/* ═══════════════════════════════════════
   BOTTOM NAV — rendered OUTSIDE #mobileApp for bulletproof position:fixed.
   Uses #mobileBottomNav ID selector. Inherits theme via data-theme attribute.
   ═══════════════════════════════════════ */
/* Default (iOS Clean) variables — nav is outside #mobileApp so needs own vars */
#mobileBottomNav {
    --m-nav-bg: rgba(255,255,255,0.92);
    --m-nav-blur: blur(20px);
    --m-border: #E5E5EA;
    --m-text-muted: #AEAEB2;
    --m-primary: #1B5E3B;
    --m-btn-color: #fff;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-tap-highlight-color: transparent;
    position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto;
    max-width: 430px; background: var(--m-nav-bg);
    -webkit-backdrop-filter: var(--m-nav-blur); backdrop-filter: var(--m-nav-blur);
    border-top: 1px solid var(--m-border); display: flex;
    padding: 6px 0 env(safe-area-inset-bottom, 10px); z-index: 200;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.06);
}
#mobileBottomNav *, #mobileBottomNav *::before, #mobileBottomNav *::after { box-sizing: border-box; }
#mobileBottomNav .m-nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: none; border: none; cursor: pointer; padding: 5px 0;
    position: relative; font-family: inherit;
}
#mobileBottomNav .m-nav-icon { display: flex; align-items: center; justify-content: center; color: var(--m-text-muted); }
#mobileBottomNav .m-nav-label { font-size: 10px; font-weight: 400; color: var(--m-text-muted); }
#mobileBottomNav .m-nav-btn.is-active .m-nav-icon { color: var(--m-primary); }
#mobileBottomNav .m-nav-btn.is-active .m-nav-label { font-weight: 600; color: var(--m-primary); }
#mobileBottomNav .m-nav-btn.is-active::before {
    content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 20px; height: 3px; border-radius: 2px; background: var(--m-primary);
}
/* Unread message badge on nav icon */
.m-nav-unread {
    position: absolute; top: -4px; right: -6px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #FF3B30; color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 9px; display: flex; align-items: center; justify-content: center;
    line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Hide on desktop */
@media (min-width: 901px) { #mobileBottomNav { display: none !important; } }
/* Dark theme overrides for bottom nav */
#mobileBottomNav[data-theme="dark"] {
    --m-nav-bg: rgba(12,20,16,0.95); --m-nav-blur: blur(24px);
    --m-border: #243028; --m-text-muted: #4A6A4A; --m-primary: #4ADE80; --m-btn-color: #000;
}
/* Warm theme overrides for bottom nav */
#mobileBottomNav[data-theme="warm"] {
    --m-nav-bg: rgba(255,255,255,0.94); --m-nav-blur: blur(20px);
    --m-border: #E8E0D6; --m-text-muted: #7E7363; --m-primary: #5D4E37; --m-btn-color: #fff;
}

/* ═══════════════════════════════════════
   LOADING STATE — shell: .m-loading
   ═══════════════════════════════════════ */
#mobileApp .m-loading {
    padding: 40px 16px; text-align: center; font-size: 14px; color: var(--m-text-muted);
}

/* ═══════════════════════════════════════
   CARD — shared by all pages
   ═══════════════════════════════════════ */
#mobileApp .m-card {
    background: var(--m-card); border-radius: var(--m-r); padding: 14px;
    border: 1px solid var(--m-border); box-shadow: var(--m-shadow); margin-bottom: 10px;
}
#mobileApp .m-card-flush { padding: 0; }
#mobileApp .m-card-warning { background: var(--m-warning); border-color: var(--m-warning-border); }
#mobileApp .m-card-accent { background: var(--m-accent-soft); border-color: var(--m-accent); cursor: pointer; }
#mobileApp .m-card-gradient { background: var(--m-gradient); border-color: transparent; color: #fff; }
#mobileApp .m-card-menu { padding: 0; }
#mobileApp .m-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 6px; }
#mobileApp .m-card-title { font-size: 15px; font-weight: 600; color: var(--m-text); display: block; }
#mobileApp .m-card-warning .m-card-title { color: var(--m-text); }

/* ═══════════════════════════════════════
   BADGE — shared: .m-badge .m-badge-primary .m-badge-success .m-badge-warning .m-badge-soft
   ═══════════════════════════════════════ */
#mobileApp .m-badge {
    display: inline-flex; align-items: center; font-size: 10px; font-weight: 600;
    padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
}
#mobileApp .m-badge-primary { color: var(--m-btn-color); background: var(--m-primary); }
#mobileApp .m-badge-success { color: var(--m-success); background: var(--m-success-bg); }
#mobileApp .m-badge-warning { color: var(--m-accent); background: var(--m-accent-soft); }
#mobileApp .m-badge-soft { color: var(--m-primary); background: var(--m-primary-soft); }

/* ═══════════════════════════════════════
   STAT CARDS — home: .m-stats-grid .m-stat-card .m-stat-highlight .m-stat-dot .m-stat-label .m-stat-value .m-stat-sub
   ═══════════════════════════════════════ */
#mobileApp .m-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
#mobileApp .m-stat-card {
    background: var(--m-card); border-radius: var(--m-r); padding: 10px;
    border: 1px solid var(--m-border); box-shadow: var(--m-shadow); position: relative; min-width: 0;
}
#mobileApp .m-stat-highlight { border: 2px solid var(--m-accent); }
#mobileApp .m-stat-dot {
    position: absolute; top: 8px; right: 8px; width: 8px; height: 8px;
    border-radius: 4px; background: var(--m-accent);
}
#mobileApp .m-stat-label { font-size: 11px; color: var(--m-text-muted); margin: 0; text-transform: uppercase; letter-spacing: 0.5px; }
#mobileApp .m-stat-value { font-size: 20px; font-weight: 700; color: var(--m-text); margin: 4px 0 2px; }
#mobileApp .m-stat-sub { font-size: 11px; color: var(--m-text-sec); margin: 0; }

/* ═══════════════════════════════════════
   HOME PAGE — .m-home-greeting .m-greeting-sub .m-greeting-name .m-notif-btn .m-notif-dot .m-empty-box .m-appt-row .m-notif-item
   ═══════════════════════════════════════ */
#mobileApp .m-home-greeting {
    padding: 10px 0 8px; display: flex; justify-content: space-between; align-items: center;
}
#mobileApp .m-greeting-sub { font-size: 13px; color: var(--m-text-muted); margin: 0; }
#mobileApp .m-greeting-name { font-size: 20px; font-weight: 700; color: var(--m-text); margin: 2px 0 0; }
#mobileApp .m-notif-btn {
    width: 36px; height: 36px; border-radius: 18px; background: var(--m-primary-soft);
    display: flex; align-items: center; justify-content: center; position: relative;
    cursor: pointer; border: none; color: var(--m-primary);
}
#mobileApp .m-notif-dot {
    position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
    border-radius: 4px; background: var(--m-accent); border: 2px solid var(--m-card);
}
#mobileApp .m-empty-box {
    background: var(--m-bg); border-radius: var(--m-r-sm); padding: 14px 12px; text-align: center;
}
#mobileApp .m-empty-box p { font-size: 13px; color: var(--m-text-muted); margin: 0; }
#mobileApp .m-appt-row {
    display: grid; grid-template-columns: 1fr auto auto;
    gap: 2px 8px; align-items: center;
    padding: 8px 10px; margin-bottom: 6px;
    border-radius: var(--m-r-sm); background: var(--m-card);
    border: 1px solid var(--m-border); border-left: 3px solid var(--m-border);
}
#mobileApp .m-appt-row:last-child { margin-bottom: 0; }
/* Status left border colors */
#mobileApp .m-appt-pending { border-left-color: var(--m-accent); background: var(--m-warning); }
#mobileApp .m-appt-confirmed { border-left-color: var(--m-success); background: var(--m-success-bg); }
#mobileApp .m-appt-cancelled { border-left-color: var(--m-danger); background: var(--m-danger-bg); opacity: 0.7; }
#mobileApp .m-appt-completed { border-left-color: var(--m-text-muted); background: var(--m-bg); opacity: 0.7; }
#mobileApp .m-appt-rejected { border-left-color: var(--m-danger); background: var(--m-danger-bg); opacity: 0.7; }
/* Row 1: time + badge + video buttons (spans full width) */
#mobileApp .m-appt-top {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 6px;
}
#mobileApp .m-appt-time { font-size: 14px; font-weight: 700; color: var(--m-text); }
/* Status badges */
#mobileApp .m-appt-badge {
    font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: 10px; text-transform: capitalize; white-space: nowrap;
}
#mobileApp .m-appt-badge-pending { background: var(--m-accent-soft); color: var(--m-accent); }
#mobileApp .m-appt-badge-confirmed { background: var(--m-success-bg); color: var(--m-success); }
#mobileApp .m-appt-badge-cancelled,
#mobileApp .m-appt-badge-rejected { background: var(--m-danger-bg); color: var(--m-danger); }
#mobileApp .m-appt-badge-completed { background: var(--m-bg); color: var(--m-text-muted); }
/* Row 2: name, type, actions */
#mobileApp .m-appt-name {
    grid-column: 1; font-size: 13px; font-weight: 600; color: var(--m-text-sec);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
#mobileApp .m-appt-type { font-size: 11px; color: var(--m-text-muted); }
#mobileApp .m-appt-actions { display: flex; gap: 8px; align-items: center; justify-self: end; }
#mobileApp .m-appt-actions .m-btn-sm {
    min-width: 44px; min-height: 44px; padding: 10px 14px;
    font-size: 16px; border-radius: 12px;
}

#mobileApp .m-notif-item { font-size: 13px; color: var(--m-text-sec); margin: 6px 0 0; display: flex; align-items: center; gap: 6px; }

/* ═══════════════════════════════════════
   QUICK ACTIONS — home: .m-quick-grid .m-quick-btn
   ═══════════════════════════════════════ */
#mobileApp .m-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
#mobileApp .m-quick-btn {
    display: flex; align-items: center; gap: 6px; background: var(--m-primary-soft);
    border: none; border-radius: var(--m-r-sm); padding: 10px; cursor: pointer; font-family: inherit;
}
#mobileApp .m-quick-btn svg { color: var(--m-primary); }
#mobileApp .m-quick-btn span { font-size: 13px; font-weight: 500; color: var(--m-text); }

/* ═══════════════════════════════════════
   CALENDAR — .m-cal-config .m-cal-nav .m-cal-nav-btn .m-cal-nav-next .m-cal-month .m-cal-grid .m-cal-header
   .m-cal-day-label .m-cal-cell .m-cal-empty .m-cal-today .m-cal-past .m-cal-blocked .m-cal-free
   .m-cal-num .m-cal-slots .m-cal-legend .m-legend-item .m-legend-dot .m-dot-free .m-dot-booked .m-dot-today
   .m-cal-stats .m-cal-stat-item .m-cal-stat-num .m-cal-stat-label
   ═══════════════════════════════════════ */
#mobileApp .m-cal-config {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
#mobileApp .m-cal-nav {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
}
#mobileApp .m-cal-nav-btn {
    width: 32px; height: 32px; border-radius: 16px; border: 1px solid var(--m-border);
    background: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--m-text-sec);
}
#mobileApp .m-cal-nav-next { transform: rotate(180deg); }
#mobileApp .m-cal-month { font-size: 16px; font-weight: 700; color: var(--m-text); }
#mobileApp .m-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
#mobileApp .m-cal-header { margin-bottom: 6px; }
#mobileApp .m-cal-day-label { font-size: 11px; color: var(--m-text-muted); font-weight: 600; padding: 4px 0; }
#mobileApp .m-cal-cell {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; border-radius: var(--m-r-sm);
}
#mobileApp .m-cal-empty { opacity: 0.15; }
#mobileApp .m-cal-today { background: var(--m-primary); }
#mobileApp .m-cal-today .m-cal-num { font-weight: 700; color: var(--m-btn-color); }
#mobileApp .m-cal-past { opacity: 0.4; }
#mobileApp .m-cal-blocked { opacity: 0.3; background: var(--m-danger-bg); }
#mobileApp .m-cal-free { background: var(--m-success-bg); }
#mobileApp .m-cal-free .m-cal-num { color: var(--m-success); }
#mobileApp .m-cal-num { font-size: 14px; font-weight: 500; color: var(--m-text); }
#mobileApp .m-cal-slots { font-size: 8px; color: var(--m-success); }
#mobileApp .m-cal-legend { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
#mobileApp .m-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--m-text-muted); }
#mobileApp .m-legend-dot { width: 8px; height: 8px; border-radius: 4px; }
#mobileApp .m-dot-free { background: var(--m-border); }
#mobileApp .m-dot-booked { background: var(--m-accent); }
#mobileApp .m-dot-today { background: var(--m-primary); }
#mobileApp .m-cal-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px;
}
#mobileApp .m-cal-stat-item {
    background: var(--m-card); border-radius: var(--m-r-sm); padding: 10px 8px;
    text-align: center; border: 1px solid var(--m-border);
}
#mobileApp .m-cal-stat-num { font-size: 20px; font-weight: 700; color: var(--m-primary); margin: 0; }
#mobileApp .m-cal-stat-label { font-size: 10px; color: var(--m-text-muted); margin: 0; }

/* ═══════════════════════════════════════
   SEARCH — patients + messages: .m-search-wrap .m-search-icon .m-search-input
   ═══════════════════════════════════════ */
#mobileApp .m-search-wrap { position: relative; margin-bottom: 12px; }
#mobileApp .m-search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--m-text-muted); display: flex; align-items: center;
}
#mobileApp .m-search-input {
    width: 100%; padding: 12px 12px 12px 40px; border-radius: var(--m-r);
    border: 1px solid var(--m-border); background: var(--m-card);
    font-size: 15px; color: var(--m-text); outline: none; font-family: inherit;
}

/* ═══════════════════════════════════════
   PATIENTS — .m-request-row .m-request-badge .m-request-info .m-request-title
   .m-avatar-circle .m-patient-row .m-patient-info .m-patient-name .m-pat-count .m-note-btn .m-load-more
   ═══════════════════════════════════════ */
#mobileApp .m-request-row { display: flex; align-items: center; gap: 10px; }
#mobileApp .m-request-badge {
    width: 40px; height: 40px; border-radius: 20px; background: var(--m-accent);
    display: flex; align-items: center; justify-content: center;
}
#mobileApp .m-request-badge span { color: #fff; font-weight: 700; font-size: 16px; }
#mobileApp .m-request-info { flex: 1; }
#mobileApp .m-request-title { font-size: 14px; font-weight: 600; color: var(--m-text); margin: 0; }
#mobileApp .m-avatar-circle {
    width: 44px; height: 44px; border-radius: 22px; background: var(--m-primary-soft);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#mobileApp .m-avatar-circle span { font-weight: 700; color: var(--m-primary); font-size: 16px; }
#mobileApp .m-avatar-circle.m-avatar-support { background: var(--m-primary-soft); }
#mobileApp .m-avatar-circle.m-avatar-support span { color: var(--m-primary); }
#mobileApp .m-avatar-circle.m-avatar-sm { width: 34px; height: 34px; }
#mobileApp .m-avatar-circle.m-avatar-sm span { font-size: 12px; }
#mobileApp .m-patient-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer;

    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
    border-radius: 8px;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}
#mobileApp .m-patient-row:last-child { border-bottom: none; }
#mobileApp .m-patient-row:active { background: var(--m-primary-soft, rgba(30,106,78,0.06)); }
#mobileApp .m-patient-info { flex: 1; min-width: 0; }
#mobileApp .m-patient-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--m-primary);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--m-primary) 28%, transparent);
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
    transition: color 0.15s, text-decoration-color 0.15s, opacity 0.15s;
}
#mobileApp .m-patient-name::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
    opacity: 0.45;
    transition: transform 0.15s, opacity 0.15s;
}
#mobileApp .m-pat-profile-row:active .m-patient-name {
    opacity: 0.7;
    text-decoration-color: var(--m-primary);
}
#mobileApp .m-pat-profile-row:active .m-patient-name::after {
    transform: translateX(2px);
    opacity: 0.8;
}
#mobileApp .m-pat-count { font-size: 13px; color: var(--m-text-muted); display: block; margin-bottom: 10px; }
/* .m-note-btn moved to .m-pat-icon-btn below */

#mobileApp .m-load-more {
    width: 100%; padding: 12px; margin-top: 12px; border-radius: var(--m-r);
    background: var(--m-card); color: var(--m-primary); border: 1px solid var(--m-border);
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* ═══════════════════════════════════════
   MESSAGES — .m-thread-card .m-thread-row .m-thread-info .m-thread-top .m-thread-name .m-thread-time
   .m-thread-preview .m-unread-badge .m-chat-loading
   ═══════════════════════════════════════ */
#mobileApp .m-thread-card { cursor: pointer; }
#mobileApp .m-thread-row { display: flex; align-items: center; gap: 12px; }
#mobileApp .m-thread-info { flex: 1; min-width: 0; }
#mobileApp .m-thread-top { display: flex; justify-content: space-between; }
#mobileApp .m-thread-name { font-size: 15px; font-weight: 600; color: var(--m-text); }
#mobileApp .m-thread-time { font-size: 12px; }
#mobileApp .m-thread-preview {
    font-size: 13px; color: var(--m-text-sec); margin: 2px 0 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#mobileApp .m-unread-badge {
    min-width: 20px; height: 20px; border-radius: 10px; background: var(--m-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: #fff; padding: 0 5px; flex-shrink: 0;
}
#mobileApp .m-chat-loading { padding: 40px 16px; text-align: center; }

/* ═══════════════════════════════════════
   CHAT VIEW — .m-chat-view .m-chat-header .m-chat-back .m-chat-partner .m-chat-messages .m-chat-empty
   .m-chat-date .m-bubble .m-bubble-mine .m-bubble-theirs .m-bubble-text .m-bubble-time
   .m-chat-image .m-chat-composer .m-chat-input .m-chat-send
   ═══════════════════════════════════════ */
#mobileApp .m-chat-view {
    display: flex; flex-direction: column; height: 100vh; animation: mFadeUp 0.2s ease;
}
#mobileApp .m-chat-header {
    padding: 10px 16px; display: flex; align-items: center; gap: 10px;
    background: var(--m-header-bg); border-bottom: 1px solid var(--m-border);
}
#mobileApp .m-chat-back {
    background: none; border: none; cursor: pointer; display: flex; padding: 4px; color: var(--m-text);
}
#mobileApp .m-chat-partner { font-weight: 600; font-size: 15px; color: var(--m-text); flex: 1; }
#mobileApp .m-chat-messages { flex: 1; overflow-y: auto; padding: 12px 16px; }
#mobileApp .m-chat-empty { padding: 40px 0; text-align: center; }
#mobileApp .m-chat-date {
    text-align: center; margin: 12px 0 8px; font-size: 11px; color: var(--m-text-muted);
}
#mobileApp .m-bubble { max-width: 78%; padding: 10px 14px; border-radius: 18px; margin-bottom: 6px; line-height: 1.4; }
#mobileApp .m-bubble-mine {
    background: var(--m-primary); color: var(--m-btn-color);
    border-bottom-right-radius: 4px; margin-left: auto;
}
#mobileApp .m-bubble-theirs {
    background: var(--m-card); color: var(--m-text);
    border: 1px solid var(--m-border); border-bottom-left-radius: 4px;
}
#mobileApp .m-bubble-text { font-size: 14px; margin: 0; }
#mobileApp .m-bubble-time { font-size: 10px; margin: 4px 0 0; display: block; text-align: right; }
#mobileApp .m-bubble-mine .m-bubble-time { color: rgba(255,255,255,0.6); }
#mobileApp .m-bubble-theirs .m-bubble-time { color: var(--m-text-muted); }
#mobileApp .m-chat-image { max-width: 200px; border-radius: 12px; margin-bottom: 4px; cursor: pointer; }
#mobileApp .m-chat-composer {
    padding: 8px 16px 24px; display: flex; gap: 8px;
    background: var(--m-header-bg); border-top: 1px solid var(--m-border);
}
#mobileApp .m-chat-input {
    flex: 1; padding: 10px 14px; border-radius: 22px; border: 1px solid var(--m-border);
    background: var(--m-card); font-size: 14px; color: var(--m-text); outline: none; font-family: inherit;
}
#mobileApp .m-chat-send {
    width: 42px; height: 42px; border-radius: 21px; background: var(--m-primary);
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--m-btn-color); flex-shrink: 0;
}

/* ═══════════════════════════════════════
   MORE PAGE — .m-more-user .m-more-avatar .m-more-user-info .m-more-name .m-more-role
   .m-more-group .m-more-group-title .m-menu-item .m-menu-border .m-menu-icon .m-menu-label .m-menu-chev
   ═══════════════════════════════════════ */
#mobileApp .m-more-user { display: flex; align-items: center; gap: 14px; }
#mobileApp .m-more-avatar {
    width: 48px; height: 48px; border-radius: 24px; background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
}
#mobileApp .m-more-avatar span { font-size: 18px; font-weight: 700; color: #fff; }
#mobileApp .m-more-user-info { }
#mobileApp .m-more-name { font-size: 16px; font-weight: 600; color: #fff; margin: 0; }
#mobileApp .m-more-role { font-size: 12px; color: rgba(255,255,255,0.7); margin: 2px 0 0; }
#mobileApp .m-more-group { margin-bottom: 16px; }
#mobileApp .m-more-group-title {
    font-size: 11px; font-weight: 600; color: var(--m-text-muted);
    letter-spacing: 1px; margin-left: 4px; display: block; margin-bottom: 6px;
}
/* Menu items (used in More + Profile sub-page) */
#mobileApp .m-menu-item {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
}
#mobileApp .m-menu-border { border-bottom: 1px solid var(--m-border); }
/* More page icons: .m-menu-icon */
#mobileApp .m-menu-icon {
    width: 34px; height: 34px; border-radius: var(--m-r-sm); background: var(--m-primary-soft);
    display: flex; align-items: center; justify-content: center; color: var(--m-primary);
}
#mobileApp .m-menu-label { flex: 1; font-size: 15px; color: var(--m-text); }
#mobileApp .m-menu-chev { color: var(--m-text-muted); display: flex; }
/* Profile sub-page icons: .m-menu-item-icon (different class name) */
#mobileApp .m-menu-item-icon {
    width: 34px; height: 34px; border-radius: var(--m-r-sm); background: var(--m-primary-soft);
    display: flex; align-items: center; justify-content: center; color: var(--m-primary);
}
#mobileApp .m-menu-item-label { flex: 1; font-size: 15px; color: var(--m-text); }
#mobileApp .m-menu-item-chevron { color: var(--m-text-muted); display: flex; }

/* ═══════════════════════════════════════
   PROFILE SUB-PAGE — avatar card, menu, sub-headers, qualifications
   ═══════════════════════════════════════ */
#mobileApp .m-avatar {
    display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700;
}
#mobileApp .m-avatar-xl { width: 72px; height: 72px; font-size: 26px; }
/* Large gradient avatar circle (menu view) */
#mobileApp .m-prof-avatar-lg {
    width: 72px; height: 72px; border-radius: 36px; background: var(--m-gradient);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
    overflow: hidden;
}
#mobileApp .m-prof-avatar-lg span { font-size: 26px; font-weight: 700; color: #fff; }
#mobileApp .m-prof-avatar-img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
#mobileApp .m-prof-name { font-size: 18px; font-weight: 700; color: var(--m-text); margin: 0; }
#mobileApp .m-prof-role { font-size: 13px; color: var(--m-text-sec); margin: 4px 0 0; }
/* Sub-view back header */
#mobileApp .m-prof-sub-header {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: var(--m-header-bg); border-bottom: 1px solid var(--m-border);
    position: sticky; top: 48px; z-index: 90;
    margin: 0 -16px 16px;
}
#mobileApp .m-prof-back {
    background: none; border: none; cursor: pointer; display: flex; padding: 4px;
    color: var(--m-text); border-radius: 50%;
}
#mobileApp .m-prof-sub-title { font-size: 17px; font-weight: 700; color: var(--m-text); flex: 1; }
/* Qualifications read-only text */
#mobileApp .m-prof-qual-text {
    font-size: 14px; color: var(--m-text); margin: 8px 0 0; line-height: 1.5;
    white-space: pre-wrap;
}

/* ═══════════════════════════════════════
   TOGGLE (iOS switch) — hours + settings
   ═══════════════════════════════════════ */
#mobileApp .m-toggle {
    width: 48px; height: 28px; border-radius: 14px; border: none; cursor: pointer;
    background: var(--m-border); position: relative; transition: all 0.2s; flex-shrink: 0; padding: 0;
}
#mobileApp .m-toggle.is-on { background: var(--m-primary); }
#mobileApp .m-toggle-knob {
    width: 22px; height: 22px; border-radius: 11px; background: #fff;
    position: absolute; top: 3px; left: 3px; transition: all 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
#mobileApp .m-toggle.is-on .m-toggle-knob { left: 23px; }
/* ═══════════════════════════════════════
   WORKING HOURS — mockup-matching card layout
   ═══════════════════════════════════════ */
#mobileApp .m-wh-card {
    background: var(--m-card); border-radius: var(--m-r); border: 1px solid var(--m-border);
    box-shadow: var(--m-shadow); overflow: hidden;
}
#mobileApp .m-wh-day {
    display: flex; padding: 10px 12px; gap: 8px; align-items: flex-start;
 transition: background 0.2s;
}
#mobileApp .m-wh-day:last-child { border-bottom: none; }
#mobileApp .m-wh-day.is-off { background: var(--m-bg); }
#mobileApp .m-wh-left {
    display: flex; flex-direction: column; gap: 6px; padding-top: 2px;
    width: 80px; flex-shrink: 0;
}
#mobileApp .m-wh-label {
    font-size: 12px; font-weight: 700; color: var(--m-primary); line-height: 1; text-align: left;
}
#mobileApp .m-wh-label.is-off { color: var(--m-text-muted); }
#mobileApp .m-wh-right {
    flex: 1; display: flex; flex-direction: column; gap: 5px; padding-top: 2px;
}
#mobileApp .m-wh-add {
    display: flex; align-items: center; gap: 3px; margin-top: 1px;
    background: none; border: none; cursor: pointer; padding: 0;
    font-size: 10px; font-weight: 600; color: var(--m-primary); font-family: inherit;
    white-space: nowrap; text-align: left;
}
#mobileApp .m-wh-range { display: flex; align-items: center; gap: 4px; }
#mobileApp .m-wh-time-sel {
    appearance: none; -webkit-appearance: none; padding: 6px 6px; border-radius: 8px;
    border: 1.5px solid var(--m-border); background: var(--m-card); font-size: 13px;
    font-weight: 600; color: var(--m-text); cursor: pointer; font-family: inherit;
    outline: none; width: 66px; text-align: center; transition: border-color 0.2s;
}
#mobileApp .m-wh-time-sel:focus { border-color: var(--m-primary); }
#mobileApp .m-wh-sep { color: var(--m-text-muted); font-size: 11px; }
#mobileApp .m-wh-trash {
    width: 24px; height: 24px; border-radius: 12px; border: none;
    background: var(--m-danger-bg); cursor: pointer; display: flex;
    align-items: center; justify-content: center; flex-shrink: 0; padding: 0;
    color: var(--m-danger);
}
#mobileApp .m-wh-off-wrap { flex: 1; display: flex; align-items: center; height: 30px; padding-top: 2px; }
#mobileApp .m-wh-off-text { font-size: 13px; color: var(--m-text-muted); font-style: italic; }
#mobileApp .m-wh-save {
    width: 100%; padding: 14px; border-radius: var(--m-r); margin-top: 14px;
    font-size: 15px; font-weight: 600; border: none; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.2s; background: var(--m-primary); color: var(--m-btn-color);
}
#mobileApp .m-wh-save.is-saved { background: var(--m-success); color: #fff; }

/* WH success toast — slide-down banner at top */
#mobileApp .m-wh-toast-success {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
    z-index: 1100; padding: 12px 16px; border-radius: var(--m-r);
    background: var(--m-success-bg); border: 1.5px solid var(--m-success);
    display: flex; align-items: center; gap: 10px;
    animation: mWhSlideDown 0.3s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); pointer-events: auto;
    max-width: 400px; width: calc(100% - 40px);
}
#mobileApp .m-wh-toast-check {
    width: 28px; height: 28px; border-radius: 14px; background: var(--m-success);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
}
#mobileApp .m-wh-toast-body { flex: 1; }
#mobileApp .m-wh-toast-title { font-size: 14px; font-weight: 600; color: var(--m-text); margin: 0; }
#mobileApp .m-wh-toast-msg { font-size: 12px; color: var(--m-text-sec); margin: 2px 0 0; }

/* WH error — bottom sheet modal */
#mobileApp .m-wh-err-overlay {
    position: fixed; inset: 0; z-index: 1100; display: flex;
    align-items: flex-end; justify-content: center; animation: mFadeIn 0.15s ease;
}
#mobileApp .m-wh-err-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
#mobileApp .m-wh-err-sheet {
    position: relative; width: 100%; max-width: 430px; background: var(--m-card);
    border-radius: 18px 18px 0 0; padding: 0 0 env(safe-area-inset-bottom, 20px);
    animation: mSlideUp 0.25s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
}
#mobileApp .m-wh-err-handle { display: flex; justify-content: center; padding: 10px 0 4px; }
#mobileApp .m-wh-err-handle-bar { width: 36px; height: 4px; border-radius: 2px; background: var(--m-border); }
#mobileApp .m-wh-err-content { padding: 8px 20px 14px; display: flex; align-items: flex-start; gap: 12px; }
#mobileApp .m-wh-err-icon {
    width: 40px; height: 40px; border-radius: 20px; background: var(--m-danger-bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px; color: var(--m-danger);
}
#mobileApp .m-wh-err-text { flex: 1; }
#mobileApp .m-wh-err-title { font-size: 16px; font-weight: 700; color: var(--m-text); margin: 0 0 4px; }
#mobileApp .m-wh-err-detail { font-size: 13px; color: var(--m-text-sec); margin: 0; line-height: 1.4; }
#mobileApp .m-wh-err-close {
    width: 30px; height: 30px; border-radius: 15px; background: var(--m-bg); border: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--m-text-muted);
}
#mobileApp .m-wh-err-action { padding: 0 20px 20px; }
#mobileApp .m-wh-err-btn {
    width: 100%; padding: 14px 0; border-radius: var(--m-r); font-size: 15px;
    font-weight: 600; border: none; background: var(--m-primary); color: var(--m-btn-color);
    cursor: pointer; font-family: inherit;
}
@keyframes mWhSlideDown {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ═══════════════════════════════════════
   PAYMENTS — .m-pay-summary .m-pay-summary-item .m-pay-summary-label .m-pay-summary-value
   .m-pay-actions .m-pay-action-btn .m-export-stub
   ═══════════════════════════════════════ */
#mobileApp .m-pay-summary { display: flex; gap: 8px; margin-bottom: 14px; }
#mobileApp .m-pay-summary-item { flex: 1; border-radius: var(--m-r); padding: 12px 10px; }
#mobileApp .m-pay-summary-label { font-size: 10px; color: var(--m-text-sec); margin: 0; }
#mobileApp .m-pay-summary-value { font-size: 20px; font-weight: 700; margin: 4px 0 0; }
#mobileApp .m-pay-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
#mobileApp .m-pay-action-btn {
    display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 20px;
    border: 1px solid var(--m-border); background: var(--m-card);
    font-size: 12px; color: var(--m-text-sec); cursor: pointer; font-family: inherit;
}

/* ═══════════════════════════════════════
   SETTINGS — .m-settings-heading .m-settings-row .m-settings-row-label .m-settings-row-value .m-input .m-btn-primary .m-btn-danger
   ═══════════════════════════════════════ */
#mobileApp .m-settings-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#mobileApp .m-settings-heading svg { color: var(--m-primary); }
#mobileApp .m-settings-heading span { font-size: 15px; font-weight: 600; color: var(--m-text); }
#mobileApp .m-settings-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--m-border);
}
#mobileApp .m-settings-row:last-child { border-bottom: none; }
#mobileApp .m-settings-row-label { font-size: 14px; color: var(--m-text); }
#mobileApp .m-settings-row-value { font-size: 14px; color: var(--m-text-sec); }

/* ═══════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════ */
#mobileApp .m-input {
    width: 100%; padding: 12px 14px; border-radius: var(--m-r-sm);
    border: 1px solid var(--m-border); background: var(--m-bg);
    font-size: 14px; color: var(--m-text); outline: none; font-family: inherit;
}
#mobileApp .m-input + .m-input { margin-top: 8px; }
#mobileApp .m-btn-primary {
    width: 100%; padding: 14px; border-radius: var(--m-r); background: var(--m-primary);
    color: var(--m-btn-color); font-weight: 600; font-size: 15px; border: none;
    cursor: pointer; font-family: inherit;
}
#mobileApp .m-btn-danger {
    width: 100%; padding: 14px; border-radius: var(--m-r); background: var(--m-danger-bg);
    color: var(--m-danger); font-weight: 600; font-size: 15px;
    border: 1px solid var(--m-danger); cursor: pointer; font-family: inherit;
}

/* ═══════════════════════════════════════
   RATINGS — .m-reply-btn, .m-empty (used in video + payments + ratings)
   ═══════════════════════════════════════ */
#mobileApp .m-reply-btn {
    margin-top: 8px; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--m-border);
    background: var(--m-card); font-size: 13px; color: var(--m-primary); cursor: pointer; font-family: inherit;
}
#mobileApp .m-export-stub { opacity: 0.6; cursor: default; }
#mobileApp .m-empty {
    background: var(--m-bg); border-radius: var(--m-r-sm); padding: 14px 12px; text-align: center;
}
#mobileApp .m-empty p { font-size: 13px; color: var(--m-text-muted); margin: 0; }

/* ═══════════════════════════════════════
   TEXT HELPERS — used across all JS files
   ═══════════════════════════════════════ */
#mobileApp .m-text-muted { font-size: 13px; color: var(--m-text-muted); margin: 0; }
#mobileApp .m-text-sec { font-size: 13px; color: var(--m-text-sec); }
#mobileApp .m-text-center { text-align: center; }

/* ═══════════════════════════════════════
   SPACING HELPERS
   ═══════════════════════════════════════ */
#mobileApp .m-mb-8  { margin-bottom: 8px; }
#mobileApp .m-mb-12 { margin-bottom: 12px; }
#mobileApp .m-mb-14 { margin-bottom: 14px; }
#mobileApp .m-mb-16 { margin-bottom: 16px; }
#mobileApp .m-mt-12 { margin-top: 12px; }
#mobileApp .m-mt-14 { margin-top: 14px; }

/* ═══════════════════════════════════════
   FLEX HELPERS
   ═══════════════════════════════════════ */
#mobileApp .m-flex { display: flex; }
#mobileApp .m-flex-between { display: flex; justify-content: space-between; align-items: center; }
#mobileApp .m-flex-center { display: flex; align-items: center; justify-content: center; }

/* ═══════════════════════════════════════
   SELECT / DROPDOWN
   ═══════════════════════════════════════ */
#mobileApp .m-select {
    padding: 10px 12px; border-radius: var(--m-r-sm); border: 1px solid var(--m-border);
    background: var(--m-bg); font-size: 14px; color: var(--m-text);
    outline: none; font-family: inherit; -webkit-appearance: none; appearance: none;
}

/* ═══════════════════════════════════════
   BUTTON VARIANTS
   ═══════════════════════════════════════ */
#mobileApp .m-btn-outline {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 16px; border-radius: var(--m-r); background: var(--m-card);
    color: var(--m-primary); font-weight: 600; font-size: 14px;
    border: 1px solid var(--m-border); cursor: pointer; font-family: inherit;
}
#mobileApp .m-btn-sm {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    min-width: 24px; min-height: 24px; border-radius: 20px; border: none;
    font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 8px;
    flex-shrink: 0; white-space: nowrap;
}
#mobileApp .m-btn-sm.m-btn-primary {
    background: var(--m-primary); color: var(--m-btn-color); font-size: 13px;
}

#mobileApp .m-btn-confirm { background: var(--m-success-bg); color: var(--m-success); }
#mobileApp .m-btn-reject { background: var(--m-danger-bg); color: var(--m-danger); }
#mobileApp .m-btn-video {
    background: var(--m-primary); color: var(--m-btn-color);
    display: inline-flex; align-items: center; gap: 4px;
    text-decoration: none; font-size: 11px; font-weight: 600;
    padding: 4px 8px; border-radius: 12px; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; width: auto; height: auto;
}

/* ═══════════════════════════════════════
   CALENDAR — slot config, clickable cells, day detail
   ═══════════════════════════════════════ */
#mobileApp .m-cal-config-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
}
#mobileApp .m-cal-config-row label { font-size: 13px; color: var(--m-text-sec); white-space: nowrap; }
#mobileApp .m-cal-config-row .m-select { flex: 1; min-width: 100px; }
#mobileApp .m-cal-clickable { cursor: pointer; }
#mobileApp .m-cal-selected { box-shadow: inset 0 0 0 2px var(--m-primary); }

/* Day detail slots */
#mobileApp .m-slot-row {
    display: flex; align-items: center; gap: 8px; padding: 8px 0;
 flex-wrap: wrap;
}
#mobileApp .m-slot-row:last-child { border-bottom: none; }
#mobileApp .m-slot-time {
    font-size: 13px; font-weight: 600; color: var(--m-text); min-width: 44px;
}
#mobileApp .m-slot-name { font-size: 13px; color: var(--m-text); flex: 1; }
#mobileApp .m-slot-free { opacity: 0.5; }
#mobileApp .m-slot-booked .m-slot-time { color: var(--m-primary); }

/* ═══════════════════════════════════════
   PROFILE EDITOR — form labels, specialties grid, checkbox
   ═══════════════════════════════════════ */
#mobileApp .m-form-label {
    display: block; font-size: 13px; font-weight: 600; color: var(--m-text-sec);
    margin: 14px 0 6px;
}
#mobileApp .m-specialty-grid {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
#mobileApp .m-checkbox-label {
    display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--m-text);
}
#mobileApp .m-card-flush { padding: 0; }
#mobileApp .m-card-flush .m-menu-item { padding: 14px 16px; }
#mobileApp textarea.m-input { resize: vertical; min-height: 60px; }

/* ═══════════════════════════════════════
   CHAT — booking context bar
   ═══════════════════════════════════════ */
#mobileApp .m-chat-context {
    display: flex; align-items: center; gap: 6px; padding: 8px 16px;
    background: var(--m-success-bg); font-size: 12px; color: var(--m-text-sec);

}

/* Calendar config — summary + collapsible editor */
#mobileApp .m-cal-config-label { font-size: 13px; color: var(--m-text-sec); }
#mobileApp .m-cal-edit-btn { cursor: pointer; border: none; font-family: inherit; padding: 3px 8px; }
#mobileApp .m-cal-config-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--m-border); }
#mobileApp .m-select-compact { width: auto; min-width: 80px; }
/* ============================================================
   Calendar Redesign — CSS Additions for mobile.css
   All selectors scoped under #mobileApp
   ============================================================ */

/* ------------------------------------------------------------
   1. Info Boxes Row
   ------------------------------------------------------------ */

#mobileApp .m-cal-info-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

#mobileApp .m-cal-info-box {
  flex: 1;
  background: var(--m-card);
  border-radius: var(--m-r-sm);
  padding: 10px 12px;
  border: 1px solid var(--m-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

#mobileApp .m-cal-info-box-highlight {
  flex: 1;
  background: var(--m-primary-soft);
  border-radius: var(--m-r-sm);
  padding: 10px 12px;
  border: 1px solid var(--m-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

#mobileApp .m-cal-info-label {
  font-size: 10px;
  color: var(--m-text-muted);
  display: block;
  line-height: 1.2;
}

#mobileApp .m-cal-info-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--m-text);
  display: block;
}

#mobileApp .m-cal-info-value-primary {
  font-size: 15px;
  font-weight: 700;
  color: var(--m-primary);
  display: block;
}

#mobileApp .m-cal-gear-btn {
  width: 46px;
  flex-shrink: 0;
  border-radius: var(--m-r-sm);
  border: 1px solid var(--m-border);
  background: var(--m-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------
   2. Calendar Card — Month Navigation
   ------------------------------------------------------------ */

#mobileApp .m-cal-nav {
  padding: 14px 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

#mobileApp .m-cal-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  border: 1px solid var(--m-border);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--m-text-sec);
}

#mobileApp .m-cal-nav-next {
  transform: rotate(180deg);
}

#mobileApp .m-cal-month {
  font-size: 17px;
  font-weight: 700;
  color: var(--m-text);
}

/* ------------------------------------------------------------
   2b. Calendar Card — Weekday Headers
   ------------------------------------------------------------ */

#mobileApp .m-cal-weekdays {
  padding: 0 12px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  margin-bottom: 4px;
}

#mobileApp .m-cal-day-label {
  font-size: 11px;
  color: var(--m-text-muted);
  font-weight: 600;
  padding: 4px 0;
}

/* ------------------------------------------------------------
   2c. Calendar Card — Days Grid
   ------------------------------------------------------------ */

#mobileApp .m-cal-grid {
  padding: 0 10px 8px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

#mobileApp .m-cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--m-r-sm);
  transition: all 0.15s;
  border: 2px solid transparent;
}

/* Day number & slot count (base) */

#mobileApp .m-cal-num {
  font-size: 14px;
  font-weight: 500;
  color: var(--m-text);
  line-height: 1;
}

#mobileApp .m-cal-slots {
  font-size: 8px;
  margin-top: 1px;
}

#mobileApp .m-cal-block-x {
  font-size: 8px;
  margin-top: 1px;
  color: var(--m-danger);
}

/* Day states */

#mobileApp .m-cal-empty {
  opacity: 0.15;
}

#mobileApp .m-cal-past {
  opacity: 0.35;
}

#mobileApp .m-cal-today {
  background: var(--m-primary);
}

#mobileApp .m-cal-today .m-cal-num {
  font-weight: 700;
  color: var(--m-btn-color);
}

#mobileApp .m-cal-future {
  background: var(--m-success-bg);
}

#mobileApp .m-cal-future .m-cal-num {
  color: var(--m-success);
}

#mobileApp .m-cal-future.m-cal-selected {
  background: var(--m-primary-soft);
  border-color: var(--m-primary);
}

#mobileApp .m-cal-future.m-cal-selected .m-cal-num {
  color: var(--m-primary);
}

#mobileApp .m-cal-blocked {
  background: var(--m-danger-bg);
}

#mobileApp .m-cal-blocked .m-cal-num {
  color: var(--m-danger);
}

#mobileApp .m-cal-blocked.m-cal-selected {
  border-color: var(--m-danger);
}

#mobileApp .m-cal-inactive {
  opacity: 0.5;
}

#mobileApp .m-cal-clickable {
  cursor: pointer;
}

#mobileApp .m-cal-selected {
  /* base selected — specific combos above override background/border */
}

/* ------------------------------------------------------------
   3. Merged Legend + Stats Footer
   ------------------------------------------------------------ */

#mobileApp .m-cal-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--m-border);
  background: var(--m-bg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

#mobileApp .m-cal-footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

#mobileApp .m-cal-footer-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

#mobileApp .m-cal-footer-dot {
  width: 7px;
  height: 7px;
  border-radius: 4px;
}

#mobileApp .m-cal-footer-text {
  font-size: 10px;
  color: var(--m-text-muted);
}

#mobileApp .m-cal-footer-val {
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

#mobileApp .m-cal-footer-val-success {
  color: var(--m-success);
}

#mobileApp .m-cal-footer-val-accent {
  color: var(--m-accent);
}

#mobileApp .m-cal-footer-val-primary {
  color: var(--m-primary);
}

#mobileApp .m-cal-footer-val-danger {
  color: var(--m-danger);
}

/* ------------------------------------------------------------
   4. Info Line (below calendar card)
   ------------------------------------------------------------ */

#mobileApp .m-cal-info-line {
  padding: 5px 14px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  color: var(--m-text-muted);
}

/* ------------------------------------------------------------
   5. Selected Day Detail Card
   ------------------------------------------------------------ */

#mobileApp .m-cal-detail-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--m-border);
}

#mobileApp .m-cal-detail-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

#mobileApp .m-cal-detail-date {
  font-size: 17px;
  font-weight: 700;
  color: var(--m-text);
}

#mobileApp .m-cal-detail-day {
  font-size: 12px;
  color: var(--m-text-muted);
  background: var(--m-bg);
  padding: 2px 8px;
  border-radius: 6px;
}

/* Block / Unblock pill buttons */

#mobileApp .m-cal-btn-block {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--m-danger);
  background: transparent;
  color: var(--m-danger);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

#mobileApp .m-cal-btn-unblock {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--m-success);
  background: var(--m-success-bg);
  color: var(--m-success);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* Blocked day state */

#mobileApp .m-cal-blocked-state {
  padding: 20px 16px;
  text-align: center;
}

#mobileApp .m-cal-blocked-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--m-danger-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}

#mobileApp .m-cal-blocked-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--m-text);
  margin: 0 0 2px;
}

#mobileApp .m-cal-blocked-reason {
  font-size: 12px;
  color: var(--m-text-sec);
  margin: 0;
}

/* Free slots */

#mobileApp .m-cal-slots-wrap {
  padding: 10px 14px 12px;
}

#mobileApp .m-cal-slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#mobileApp .m-cal-slot-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border-radius: var(--m-r-sm);
  flex: 0 0 calc(50% - 3px);
}

#mobileApp .m-cal-slot-free {
  background: var(--m-primary-soft);
  border: 1px solid var(--m-success-bg);
}

#mobileApp .m-cal-slot-free .m-cal-slot-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--m-primary);
}

#mobileApp .m-cal-slot-free .m-cal-slot-status {
  font-size: 11px;
  color: var(--m-text-muted);
}

/* Booked slot: CSS grid, 2 rows x 2 columns
   Row 1: .m-cal-slot-top (time + badge) spans both cols
   Row 2: .m-cal-slot-patient (col 1) + .m-cal-slot-actions (col 2)  */
#mobileApp .m-cal-slot-booked {
  background: var(--m-card);
  border: 1px solid var(--m-border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  padding: 10px 12px;
  flex: 0 0 100%;
  border-left: 3px solid var(--m-border);
  align-items: center;
}

/* Row 1: time + badge — spans full width */
#mobileApp .m-cal-slot-booked .m-cal-slot-top {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mobileApp .m-cal-slot-booked .m-cal-slot-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--m-text);
}

#mobileApp .m-cal-slot-booked .m-cal-slot-status {
  font-size: 11px;
  color: var(--m-text-muted);
}

/* Booked pill status variants (left border color) */
#mobileApp .m-cal-slot-pending {
  border-left-color: var(--m-accent);
  background: var(--m-warning);
}
#mobileApp .m-cal-slot-confirmed {
  border-left-color: var(--m-success);
  background: var(--m-success-bg);
}
#mobileApp .m-cal-slot-completed {
  border-left-color: var(--m-text-muted);
  background: var(--m-bg);
}
#mobileApp .m-cal-slot-cancelled,
#mobileApp .m-cal-slot-rejected {
  border-left-color: var(--m-danger);
  background: var(--m-danger-bg);
  opacity: 0.7;
}

/* .m-cal-slot-row — if used as wrapper, act as transparent grid pass-through */
#mobileApp .m-cal-slot-row {
  display: contents;
}

/* Status badges */
#mobileApp .m-cal-slot-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: capitalize;
  white-space: nowrap;
}
#mobileApp .m-cal-badge-pending {
  background: var(--m-accent-soft);
  color: var(--m-accent);
  border: 1px solid var(--m-warning-border);
}
#mobileApp .m-cal-badge-confirmed {
  background: var(--m-success-bg);
  color: var(--m-success);
}
#mobileApp .m-cal-badge-completed {
  background: var(--m-bg);
  color: var(--m-text-muted);
}
#mobileApp .m-cal-badge-cancelled,
#mobileApp .m-cal-badge-rejected {
  background: var(--m-danger-bg);
  color: var(--m-danger);
}

/* Row 2, col 1: patient name (left) */
#mobileApp .m-cal-slot-patient {
  grid-column: 1;
  font-size: 13px;
  color: var(--m-text-sec);
  margin: 0;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mobileApp .m-cal-slot-patient.m-cal-slot-tap {
  color: var(--m-primary);
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 13px;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--m-primary) 30%, transparent);
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  transition: color 0.15s, text-decoration-color 0.15s, opacity 0.15s;
}
#mobileApp .m-cal-slot-patient.m-cal-slot-tap::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.15s, transform 0.15s;
}
#mobileApp .m-cal-slot-patient.m-cal-slot-tap:active {
  opacity: 0.6;
  text-decoration-color: var(--m-primary);
}
#mobileApp .m-cal-slot-patient.m-cal-slot-tap:active::after {
  opacity: 0.8;
  transform: translateX(2px);
}

/* Row 2, col 2: action buttons (right, same row as patient name) */
#mobileApp .m-cal-slot-actions {
  grid-column: 2;
  display: flex;
  gap: 6px;
  justify-self: end;
  align-items: center;
}

/* Action button base */
#mobileApp .m-cal-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
#mobileApp .m-cal-action-btn:active {
  transform: scale(0.96);
}
#mobileApp .m-cal-action-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Accept (green solid) */
#mobileApp .m-cal-action-accept {
  background: var(--m-success);
  color: #fff;
  border-color: var(--m-success);
}
#mobileApp .m-cal-action-accept:active {
  opacity: 0.8;
}

/* Reject (red solid) */
#mobileApp .m-cal-action-reject {
  background: var(--m-danger);
  color: #fff;
  border-color: var(--m-danger);
}
#mobileApp .m-cal-action-reject:active {
  opacity: 0.8;
}

/* Cancel (red outline) */
#mobileApp .m-cal-action-cancel {
  background: var(--m-danger-bg);
  color: var(--m-danger);
  border-color: var(--m-danger);
}
#mobileApp .m-cal-action-cancel:active {
  background: var(--m-danger);
  color: #fff;
}

/* Modal textarea (reason field in booking action sheets) */
#mobileApp .m-modal-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--m-border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--m-text);
  background: var(--m-card);
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.15s;
  outline: none;
}
#mobileApp .m-modal-textarea:focus {
  border-color: var(--m-primary);
}
#mobileApp .m-modal-textarea::placeholder {
  color: var(--m-text-muted);
}

#mobileApp .m-cal-slot-time {
  font-size: 14px;
  font-weight: 600;
  color: var(--m-text);
}

#mobileApp .m-cal-slot-name {
  font-size: 11px;
  color: var(--m-text-sec);
}

#mobileApp .m-cal-slot-status {
  font-size: 11px;
  color: var(--m-text-muted);
}

#mobileApp .m-cal-slots-info {
  font-size: 10px;
  color: var(--m-text-muted);
  margin: 8px 0 0;
  text-align: center;
}

/* ------------------------------------------------------------
   6. No Selection State
   ------------------------------------------------------------ */

#mobileApp .m-cal-no-selection {
  padding: 24px 16px;
  text-align: center;
}

#mobileApp .m-cal-no-sel-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--m-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}

#mobileApp .m-cal-no-sel-title {
  font-size: 14px;
  color: var(--m-text-sec);
  margin: 0 0 2px;
}

#mobileApp .m-cal-no-sel-sub {
  font-size: 12px;
  color: var(--m-text-muted);
  margin: 0;
}

/* ------------------------------------------------------------
   7. Bottom Sheet Modal
   ------------------------------------------------------------ */

#mobileApp .m-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: mFadeIn 0.15s ease;
}

#mobileApp .m-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

#mobileApp .m-modal-sheet {
  position: relative;
  width: 100%;
  max-width: 430px;
  background: var(--m-card);
  border-radius: 18px 18px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 20px);
  animation: mSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
}

/* Drag handle */

#mobileApp .m-modal-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}

#mobileApp .m-modal-handle-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--m-border);
}

/* Modal header */

#mobileApp .m-modal-header {
  padding: 8px 20px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#mobileApp .m-modal-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

#mobileApp .m-modal-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mobileApp .m-modal-header-icon-danger {
  background: var(--m-danger-bg);
}

#mobileApp .m-modal-header-icon-primary {
  background: var(--m-primary-soft);
}

#mobileApp .m-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--m-text);
  margin: 0;
}

#mobileApp .m-modal-subtitle {
  font-size: 13px;
  color: var(--m-text-sec);
  margin: 2px 0 0;
}

#mobileApp .m-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--m-bg);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal body elements */

#mobileApp .m-modal-warning {
  background: var(--m-bg);
  border-radius: var(--m-r-sm);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--m-text-sec);
  margin-bottom: 10px;
}

#mobileApp .m-modal-info {
  background: var(--m-primary-soft);
  border-radius: var(--m-r-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--m-text);
}

/* Modal form elements */

#mobileApp .m-modal-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--m-text);
  display: block;
  margin-bottom: 6px;
}

#mobileApp .m-modal-label-sub {
  font-weight: 400;
  color: var(--m-text-muted);
}

#mobileApp .m-modal-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--m-r-sm);
  border: 1.5px solid var(--m-border);
  background: var(--m-bg);
  font-size: 14px;
  color: var(--m-text);
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
}

#mobileApp .m-modal-input:focus {
  border-color: var(--m-primary);
}

/* Modal settings rows */

#mobileApp .m-modal-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

#mobileApp .m-modal-setting-row-border {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--m-border);
}

#mobileApp .m-modal-setting-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--m-text);
  display: block;
}

#mobileApp .m-modal-setting-sub {
  font-size: 12px;
  color: var(--m-text-muted);
}

#mobileApp .m-modal-select {
  appearance: none;
  padding: 10px 34px 10px 14px;
  border-radius: var(--m-r-sm);
  border: 1.5px solid var(--m-border);
  background: var(--m-card);
  font-size: 15px;
  font-weight: 600;
  color: var(--m-text);
  cursor: pointer;
  font-family: inherit;
  outline: none;
  min-width: 105px;
}

#mobileApp .m-modal-select:focus {
  border-color: var(--m-primary);
}

/* Modal footer buttons */

#mobileApp .m-modal-footer {
  padding: 0 20px 20px;
  display: flex;
  gap: 10px;
}

#mobileApp .m-modal-btn-cancel {
  flex: 1;
  padding: 14px 0;
  border-radius: var(--m-r);
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid var(--m-border);
  background: transparent;
  color: var(--m-text);
  cursor: pointer;
  font-family: inherit;
}

#mobileApp .m-modal-btn-danger {
  flex: 1.3;
  padding: 14px 0;
  border-radius: var(--m-r);
  font-size: 15px;
  font-weight: 600;
  border: none;
  background: var(--m-danger);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#mobileApp .m-modal-btn-primary {
  flex: 1.3;
  padding: 14px 0;
  border-radius: var(--m-r);
  font-size: 15px;
  font-weight: 600;
  border: none;
  background: var(--m-primary);
  color: var(--m-btn-color);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Filter pills — horizontal scrollable status filters (admin therapists + bookings) */
#mobileApp .m-filter-pills { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#mobileApp .m-filter-pills::-webkit-scrollbar { display: none; }
#mobileApp .m-filter-pill {
  padding: 6px 16px; border-radius: 20px; background: var(--m-surface, var(--m-card));
  color: var(--m-text-sec); font-size: 13px; white-space: nowrap;
  border: 1px solid var(--m-border); cursor: pointer; transition: all .2s;
  flex-shrink: 0;
}
#mobileApp .m-filter-pill.is-active {
  background: var(--m-accent); color: #fff; border-color: var(--m-accent);
}

/* Payment log cards — error highlight + checksum badges */
#mobileApp .m-card-error { border-left: 3px solid var(--m-danger, #c0392b); }
#mobileApp .pl-checksum-ok { color: var(--m-success, #1e6a4e); font-size: 13px; }
#mobileApp .pl-checksum-fail { color: var(--m-danger, #c0392b); font-size: 13px; }

/* ------------------------------------------------------------
   8. Animations
   ------------------------------------------------------------ */

@keyframes mSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mScaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#mobileApp .m-anim-scale {
  animation: mScaleIn 0.2s ease;
}
/* ═══ Patient therapist cards ═══ */
#mobileApp .m-therapist-card { cursor: pointer; }
#mobileApp .m-therapist-card:active { opacity: 0.85; }
#mobileApp .m-therapist-row { display: flex; align-items: center; gap: 12px; }
#mobileApp .m-therapist-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
#mobileApp .m-therapist-avatar-init { background: var(--m-accent); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 16px; }
#mobileApp .m-therapist-info { flex: 1; min-width: 0; }
#mobileApp .m-therapist-name { font-weight: 600; font-size: 15px; color: var(--m-text); margin: 0; }
#mobileApp .m-therapist-city { font-size: 12px; color: var(--m-text-muted); margin: 2px 0 0; display: flex; align-items: center; gap: 4px; }
#mobileApp .m-therapist-rating { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; }
#mobileApp .m-therapist-price { text-align: right; flex-shrink: 0; }
#mobileApp .m-price-value { font-weight: 700; font-size: 16px; color: var(--m-accent); }
#mobileApp .m-therapist-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
#mobileApp .m-tag { padding: 2px 8px; border-radius: 12px; font-size: 11px; background: var(--m-surface); color: var(--m-text-muted); }
#mobileApp .m-tag-accent { background: var(--m-accent); color: #fff; }
#mobileApp .m-pagination { display: flex; align-items: center; justify-content: center; padding: 16px 0; gap: 8px; }
/* ═══════════════════════════════════════
   PATIENT ACTIONS — action column, icon buttons, note preview, note indicator
   ═══════════════════════════════════════ */
#mobileApp .m-pat-actions {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0;
}
#mobileApp .m-pat-btns {
    display: flex; gap: 8px;
}
#mobileApp .m-pat-icon-btn {
    width: 44px; height: 44px; border-radius: 22px;
    border: 1.5px solid var(--m-border); background: var(--m-card);
    display: flex; align-items: center; justify-content: center;
    color: var(--m-text-sec); flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
#mobileApp .m-pat-icon-btn:active {
    background: var(--m-primary-soft); border-color: var(--m-primary); color: var(--m-primary);
    transform: scale(0.92); transition: transform 0.1s ease;
}
#mobileApp .m-pat-icon-btn.m-msg-btn {
    color: var(--m-primary);
}
#mobileApp .m-pat-icon-btn.m-msg-btn:active {
    background: var(--m-primary); color: #fff; border-color: var(--m-primary);
}
#mobileApp .m-pat-icon-btn.has-note {
    background: var(--m-primary-soft); border-color: var(--m-primary); color: var(--m-primary);
}
#mobileApp .m-pat-icon-btn.has-note:active {
    background: var(--m-primary); color: #fff;
}
#mobileApp .m-note-preview {
    font-size: 12px; line-height: 1.4; color: var(--m-text-muted);
    margin: 3px 0 0; max-width: 180px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Multi-Note Modal — notes list, items, composer, empty state ── */
#mobileApp .m-notes-list {
    max-height: 40vh; overflow-y: auto; padding: 0 20px;
    -webkit-overflow-scrolling: touch;
}
#mobileApp .m-note-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 0; border-bottom: 1px solid var(--m-border);
}
#mobileApp .m-note-item:last-child { border-bottom: none; }
#mobileApp .m-note-item-body { flex: 1; min-width: 0; }
#mobileApp .m-note-item-text {
    font-size: 14px; line-height: 1.5; color: var(--m-text);
    margin: 0; word-wrap: break-word;
}
#mobileApp .m-note-item-date {
    font-size: 11px; color: var(--m-text-muted); display: block; margin-top: 4px;
}
#mobileApp .m-note-item-del {
    width: 32px; height: 32px; border-radius: 16px; flex-shrink: 0;
    border: none; background: none; color: var(--m-text-muted);
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background 0.15s ease;
}
#mobileApp .m-note-item-del:active {
    background: var(--m-danger-bg); color: var(--m-danger);
}
#mobileApp .m-notes-empty {
    padding: 30px 20px; text-align: center; color: var(--m-text-muted);
}
#mobileApp .m-notes-empty svg { margin-bottom: 8px; opacity: 0.4; }
#mobileApp .m-notes-empty p { font-size: 14px; margin: 0; }
#mobileApp .m-notes-composer {
    padding: 12px 20px env(safe-area-inset-bottom, 16px);
    border-top: 1px solid var(--m-border);
    display: flex; gap: 10px; align-items: flex-end;
}
#mobileApp .m-notes-composer textarea {
    flex: 1; min-height: 40px; max-height: 100px; resize: none;
}
#mobileApp .m-notes-add-btn { flex-shrink: 0; white-space: nowrap; }

/* Stacked variant: textarea full-width, button below */
#mobileApp .m-notes-composer.m-notes-composer-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    position: sticky;
    bottom: 0;
    background: var(--m-card);
    z-index: 2;
}
#mobileApp .m-notes-composer-stack textarea {
    width: 100%;
    min-height: 44px;
    max-height: 40vh;
    resize: none;
    flex: none;
}
#mobileApp .m-notes-composer-stack .m-notes-add-btn {
    width: 100%;
    flex-shrink: 0;
}
/* Auto-grow textarea: JS sets height via scrollHeight */
#mobileApp .m-note-autogrow {
    overflow: hidden;
    resize: none;
    min-height: 60px;
    max-height: 200px;
    transition: height 0.1s ease;
}
#mobileApp .m-note-count {
    position: absolute; top: -4px; right: -4px;
    background: var(--m-primary); color: #fff;
    font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    padding: 0 4px; line-height: 1;
}
#mobileApp .m-pat-icon-btn { position: relative; }

/* ═══════════════════════════════════════
   QUALIFICATIONS FORM — editable textareas
   ═══════════════════════════════════════ */
#mobileApp .m-qual-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#mobileApp .m-qual-field {
    background: var(--m-card);
    border-radius: var(--m-r);
    border: 1px solid var(--m-border);
    padding: 14px 16px;
    box-shadow: var(--m-shadow);
}

#mobileApp .m-qual-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 10px;
}

#mobileApp .m-qual-label i {
    color: var(--m-primary);
    font-size: 14px;
}

#mobileApp .m-qual-hint {
    font-size: 12px;
    font-weight: 400;
    color: var(--m-text-muted);
    margin-left: auto;
}

#mobileApp .m-qual-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--m-r-sm);
    border: 1.5px solid var(--m-border);
    background: var(--m-bg);
    font-size: 15px;
    line-height: 1.5;
    color: var(--m-text);
    outline: none;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
}

#mobileApp .m-qual-textarea:focus {
    border-color: var(--m-primary);
    box-shadow: 0 0 0 3px rgba(27, 94, 59, 0.1);
}

#mobileApp .m-qual-textarea::placeholder {
    color: var(--m-text-muted);
    font-size: 14px;
}

#mobileApp .m-qual-char-count {
    text-align: right;
    font-size: 11px;
    color: var(--m-text-muted);
    margin-top: 4px;
}

#mobileApp .m-qual-save {
    width: 100%;
    padding: 15px;
    border-radius: var(--m-r);
    background: var(--m-primary);
    color: var(--m-btn-color);
    font-weight: 700;
    font-size: 16px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    box-shadow: 0 4px 16px rgba(27, 94, 59, 0.2);
    transition: background 0.15s, transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}

#mobileApp .m-qual-save:active {
    transform: scale(0.98);
    background: var(--m-primary-light);
}

#mobileApp .m-qual-save:disabled {
    opacity: 0.6;
    pointer-events: none;
}

#mobileApp .m-qual-save i {
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   PATIENT PROFILE MODAL — mobile (.mpp-*)
   All colors via --m-* vars for iOS Clean / Dark Pro / Warm Sand
   ═══════════════════════════════════════════════════════════════ */

/* Header with gradient */
#mobileApp .mpp-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--m-gradient);
    border-radius: 18px 18px 0 0;
    margin: -1px;
}

#mobileApp .mpp-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
}

#mobileApp .mpp-avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

#mobileApp .mpp-header-info {
    flex: 1;
    min-width: 0;
}

#mobileApp .mpp-name {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 3px;
    line-height: 1.2;
}

#mobileApp .mpp-contact {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.5;
}

#mobileApp .mpp-contact svg {
    flex-shrink: 0;
    opacity: 0.6;
}

#mobileApp .mpp-member-since {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

#mobileApp .mpp-member-since svg {
    flex-shrink: 0;
    opacity: 0.5;
}

/* Stats row */
#mobileApp .mpp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px 20px;

}

#mobileApp .mpp-stat-card {
    flex: 1;
    background: var(--m-bg);
    border-radius: var(--m-r-sm);
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--m-border);
}

#mobileApp .mpp-stat-num {
    font-size: 20px;
    font-weight: 700;
    color: var(--m-primary);
    margin: 0;
    line-height: 1.2;
}

#mobileApp .mpp-stat-status {
    font-size: 12px;
    font-weight: 700;
    color: var(--m-primary);
    margin: 0;
    line-height: 1.3;
}

#mobileApp .mpp-stat-label {
    font-size: 11px;
    color: var(--m-text-muted);
    margin: 2px 0 0;
}

/* Sections */
#mobileApp .mpp-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--m-text);
    margin: 0 0 10px;
    padding: 14px 20px 0;
    display: flex;
    align-items: center;
    gap: 7px;
}

#mobileApp .mpp-section-title svg {
    color: var(--m-primary);
    flex-shrink: 0;
}

/* Booking history list */
#mobileApp .mpp-bookings-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 0 20px;
    scrollbar-width: none;
}

#mobileApp .mpp-bookings-list::-webkit-scrollbar {
    display: none;
}

#mobileApp .mpp-booking-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;

}

#mobileApp .mpp-booking-row:last-child {
    border-bottom: none;
}

#mobileApp .mpp-booking-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--m-text);
    min-width: 85px;
    flex-shrink: 0;
}

#mobileApp .mpp-booking-time {
    font-size: 13px;
    color: var(--m-text-sec);
    flex: 1;
    min-width: 0;
}

/* Empty state */
#mobileApp .mpp-no-data {
    text-align: center;
    padding: 20px;
    font-size: 13px;
    color: var(--m-text-muted);
    font-style: italic;
}

#mobileApp .mpp-no-data svg {
    display: block;
    margin: 0 auto 8px;
    opacity: 0.35;
}

/* Actions footer */
#mobileApp .mpp-actions {
    display: flex;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--m-border);
}

#mobileApp .mpp-action-btn {
    flex: 1;
    padding: 12px 0;
    border-radius: var(--m-r);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.15s;
    border: none;
}

#mobileApp .mpp-action-btn:active {
    opacity: 0.8;
}

#mobileApp .mpp-action-btn.mpp-btn-primary {
    background: var(--m-primary);
    color: var(--m-btn-color);
}

#mobileApp .mpp-action-btn.mpp-btn-outline {
    background: transparent;
    color: var(--m-primary);
    border: 1.5px solid var(--m-border);
}

#mobileApp .mpp-action-btn.mpp-btn-danger {
    background: transparent;
    color: var(--m-danger);
    border: 1.5px solid var(--m-danger);
}

/* Calendar slot tap target */
#mobileApp .m-cal-slot-tap {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--m-accent-soft);
    border: 1px solid var(--m-accent);
    font-size: 10px;
    font-weight: 600;
    color: var(--m-accent);
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

#mobileApp .m-cal-slot-tap:active {
    background: var(--m-accent);
    color: #fff;
}

/* ── Therapist "Book for patient" button on free mobile slots ── */
#mobileApp .m-cal-action-book {
    background: var(--m-primary);
    color: var(--m-btn-color, #fff);
    border-color: var(--m-primary);
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 8px;
}
#mobileApp .m-cal-action-book:active {
    opacity: 0.8;
}

/* Disabled state for modal primary button */
#mobileApp .m-modal-btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── "Booked by me" tag on therapist-created bookings (mobile) ── */
#mobileApp .m-cal-booked-by-me {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--m-primary-soft, #eff3ff);
    color: var(--m-primary);
    border: 1px solid var(--m-border);
    letter-spacing: 0.2px;
    white-space: nowrap;
    margin-left: 4px;
}

/* ── Session timer buttons (mobile dashboard) ── */

/* "Patient is waiting!" — urgent pulsing state */
#mobileApp .m-btn-waiting {
    width: auto; height: auto; border-radius: 12px;
    background: #e74c3c;
    color: #fff;
    animation: mPulseUrgent 1.2s ease-in-out infinite;
}
@keyframes mPulseUrgent {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
}

/* Session expired — disabled/muted */
#mobileApp .m-btn-expired {
    width: auto; height: auto; border-radius: 12px;
    background: var(--m-border);
    color: var(--m-text-muted);
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}

/* Countdown pill — subtle timer badge */
#mobileApp .m-btn-countdown {
    width: auto; height: auto;
    background: var(--m-surface, var(--m-bg));
    color: var(--m-text-sec);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid var(--m-border);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: default;
    white-space: nowrap;
}
#mobileApp .m-btn-countdown svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.6;
}
#mobileApp .m-countdown-text {
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   SPECIALTY GROUP ACCORDION — Mobile profile editor + auth
   ═══════════════════════════════════════════════════════════════ */

.m-sg-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.m-sg-group {
    border: 1.5px solid var(--m-border, #E5E5EA);
    border-radius: var(--m-r, 14px);
    background: var(--m-card, #fff);
    overflow: hidden;
    box-shadow: var(--m-shadow, 0 1px 4px rgba(0,0,0,0.06));
    transition: border-color 0.2s;
}

.m-sg-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    min-height: 52px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: background 0.15s;
}
.m-sg-header:active {
    background: var(--m-bg, #F2F2F7);
}

.m-sg-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.m-sg-header-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--m-text, #1C1C1E);
    line-height: 1.3;
}

.m-sg-header-count {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--m-bg, #F2F2F7);
    color: var(--m-text-muted, #AEAEB2);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.m-sg-header-count.has-selected {
    background: var(--m-primary-soft, #EAF5EC);
    color: var(--m-primary, #1B5E3B);
}

.m-sg-header-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--m-text-muted, #AEAEB2);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s;
    font-size: 11px;
}
.m-sg-group.is-open .m-sg-header-chevron {
    transform: rotate(180deg);
    color: var(--m-primary, #1B5E3B);
}

.m-sg-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 14px;
}
.m-sg-group.is-open .m-sg-body {
    max-height: 800px;
    padding: 0 14px 14px;
}

.m-sg-body .m-spec-grid {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-height: none;
    overflow-y: visible;
}

.m-sg-body .am-spec-grid {
    margin-top: 0;
}

.m-sg-group.is-open[data-group="clinical"]   { border-left: 3px solid #2563EB; }
.m-sg-group.is-open[data-group="counseling"] { border-left: 3px solid #059669; }
.m-sg-group.is-open[data-group="child"]      { border-left: 3px solid #D97706; }
.m-sg-group.is-open[data-group="addiction"] { border-left: 3px solid #DC2626; }

.m-sg-group.is-open[data-group="clinical"]   .m-sg-header { background: #EFF6FF; }
.m-sg-group.is-open[data-group="counseling"] .m-sg-header { background: #ECFDF5; }
.m-sg-group.is-open[data-group="child"]      .m-sg-header { background: #FFFBEB; }
.m-sg-group.is-open[data-group="addiction"] .m-sg-header { background: #FEF2F2; }

.m-sg-accordion .m-sg-group {
    animation: sgFadeInM 0.25s ease both;
}
.m-sg-accordion .m-sg-group:nth-child(2) { animation-delay: 0.04s; }
.m-sg-accordion .m-sg-group:nth-child(3) { animation-delay: 0.08s; }
.m-sg-accordion .m-sg-group:nth-child(4) { animation-delay: 0.12s; }

@keyframes sgFadeInM {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   SPECIALTY GROUP ACCORDION — Mobile filter bottom sheet
   ═══════════════════════════════════════════════════════════════ */

.m-sg-filter-accordion {
    display: flex;
    flex-direction: column;
}

.m-sg-filter-group {
    position: relative;
    border-bottom: 1px solid var(--m-border, #E5E5EA);
}
.m-sg-filter-group:last-child {
    border-bottom: none;
}

.m-sg-filter-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: background 0.15s;
    min-height: 44px;
}
.m-sg-filter-dot { display: none; }
/* Icon — unified green theme, matches .therapist-view-sec-icon / .sec-ico design */
.m-sg-filter-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--m-primary-soft, #EAF5EC);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.m-sg-filter-icon svg {
    stroke: var(--m-primary, #1B5E3B);
}
.m-sg-filter-group.is-open .m-sg-filter-icon {
    background: var(--m-primary, #1B5E3B);
}
.m-sg-filter-group.is-open .m-sg-filter-icon svg {
    stroke: var(--m-btn-color, #fff);
}
.m-sg-filter-header:active {
    background: var(--m-bg, #F2F2F7);
}

.m-sg-filter-title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--m-text-sec, #636366);
    line-height: 1.3;
}
.m-sg-filter-group.is-open .m-sg-filter-title {
    color: var(--m-text, #1C1C1E);
    font-weight: 600;
}

/* Count badge -- green pill, hidden until active, pop animation */
.m-sg-filter-count {
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--m-primary, #1B5E3B);
    color: #fff;
    padding: 2px 7px;
    flex-shrink: 0;
}
.m-sg-filter-count.has-active {
    display: inline-flex;
    animation: m-sg-count-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes m-sg-count-pop {
    0%   { transform: scale(0.7); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.m-sg-filter-chevron {
    display: flex;
    align-items: center;
    font-size: 10px;
    color: var(--m-text-muted, #AEAEB2);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s ease;
}
.m-sg-filter-group.is-open .m-sg-filter-chevron {
    transform: rotate(180deg);
    color: var(--m-text-sec, #636366);
}

/* Body -- grid-rows for smooth height animation */
.m-sg-filter-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}
.m-sg-filter-group.is-open .m-sg-filter-body {
    grid-template-rows: 1fr;
}
.m-sg-filter-body > .idx-m-sheet-chips {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 0 12px;
    transition: padding 0.28s ease;
}
.m-sg-filter-group.is-open .m-sg-filter-body > .idx-m-sheet-chips {
    padding: 2px 12px 14px;
}

/* Chip overrides inside accordion -- clean pill style */
.m-sg-filter-body .idx-m-sheet-chip {
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12.5px;
}
.m-sg-filter-body .idx-m-sheet-chip.on {
    background: var(--m-primary, #1B5E3B);
    color: #fff;
    border-color: var(--m-primary, #1B5E3B);
}
/* ═══════════════════════════════════════════════════════════════
   SPECIALTY GROUP — Dark Pro theme overrides
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"] .m-sg-group.is-open[data-group="clinical"] .m-sg-header,
[data-mobile-theme="dark"] .m-sg-group.is-open[data-group="clinical"] .m-sg-header     { background: rgba(37,99,235,0.08); }
[data-theme="dark"] .m-sg-group.is-open[data-group="counseling"] .m-sg-header,
[data-mobile-theme="dark"] .m-sg-group.is-open[data-group="counseling"] .m-sg-header   { background: rgba(5,150,105,0.08); }
[data-theme="dark"] .m-sg-group.is-open[data-group="child"] .m-sg-header,
[data-mobile-theme="dark"] .m-sg-group.is-open[data-group="child"] .m-sg-header         { background: rgba(217,119,6,0.08); }
[data-theme="dark"] .m-sg-group.is-open[data-group="addiction"] .m-sg-header,
[data-mobile-theme="dark"] .m-sg-group.is-open[data-group="addiction"] .m-sg-header     { background: rgba(220,38,38,0.08); }

[data-theme="dark"] .m-sg-group.is-open[data-group="clinical"],
[data-mobile-theme="dark"] .m-sg-group.is-open[data-group="clinical"]     { border-left-color: #60A5FA; }
[data-theme="dark"] .m-sg-group.is-open[data-group="counseling"],
[data-mobile-theme="dark"] .m-sg-group.is-open[data-group="counseling"]   { border-left-color: #34D399; }
[data-theme="dark"] .m-sg-group.is-open[data-group="child"],
[data-mobile-theme="dark"] .m-sg-group.is-open[data-group="child"]         { border-left-color: #FBBF24; }
[data-theme="dark"] .m-sg-group.is-open[data-group="addiction"],
[data-mobile-theme="dark"] .m-sg-group.is-open[data-group="addiction"]     { border-left-color: #F87171; }

[data-theme="dark"] .m-sg-filter-count,
[data-mobile-theme="dark"] .m-sg-filter-count { background: #34D399; color: #1C1C1E; }
[data-theme="dark"] .m-sg-filter-title,
[data-mobile-theme="dark"] .m-sg-filter-title { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .m-sg-filter-group.is-open .m-sg-filter-title,
[data-mobile-theme="dark"] .m-sg-filter-group.is-open .m-sg-filter-title { color: #F5F5F5; }
[data-theme="dark"] .m-sg-filter-group,
[data-mobile-theme="dark"] .m-sg-filter-group { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .m-sg-filter-header:active,
[data-mobile-theme="dark"] .m-sg-filter-header:active { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .m-sg-filter-body .idx-m-sheet-chip.on,
[data-mobile-theme="dark"] .m-sg-filter-body .idx-m-sheet-chip.on { background: #34D399; color: #1C1C1E; border-color: #34D399; }

/* ═══════════════════════════════════════════════════════════════
   SPECIALTY GROUP — Warm Sand theme overrides
   ═══════════════════════════════════════════════════════════════ */

[data-theme="warm"] .m-sg-group.is-open[data-group="clinical"] .m-sg-header,
[data-mobile-theme="warm"] .m-sg-group.is-open[data-group="clinical"] .m-sg-header     { background: #EDE9FE; }
[data-theme="warm"] .m-sg-group.is-open[data-group="counseling"] .m-sg-header,
[data-mobile-theme="warm"] .m-sg-group.is-open[data-group="counseling"] .m-sg-header   { background: #F3EDE4; }
[data-theme="warm"] .m-sg-group.is-open[data-group="child"] .m-sg-header,
[data-mobile-theme="warm"] .m-sg-group.is-open[data-group="child"] .m-sg-header         { background: #FDF0E2; }
[data-theme="warm"] .m-sg-group.is-open[data-group="addiction"] .m-sg-header,
[data-mobile-theme="warm"] .m-sg-group.is-open[data-group="addiction"] .m-sg-header     { background: #FBEAE8; }

[data-theme="warm"] .m-sg-group.is-open[data-group="clinical"],
[data-mobile-theme="warm"] .m-sg-group.is-open[data-group="clinical"]     { border-left-color: #6D28D9; }
[data-theme="warm"] .m-sg-group.is-open[data-group="counseling"],
[data-mobile-theme="warm"] .m-sg-group.is-open[data-group="counseling"]   { border-left-color: #5D4E37; }
[data-theme="warm"] .m-sg-group.is-open[data-group="child"],
[data-mobile-theme="warm"] .m-sg-group.is-open[data-group="child"]         { border-left-color: #C67A3C; }
[data-theme="warm"] .m-sg-group.is-open[data-group="addiction"],
[data-mobile-theme="warm"] .m-sg-group.is-open[data-group="addiction"]     { border-left-color: #C44D3E; }

[data-theme="warm"] .m-sg-filter-count,
[data-mobile-theme="warm"] .m-sg-filter-count { background: #5D4E37; color: #FFF; }
[data-theme="warm"] .m-sg-filter-title,
[data-mobile-theme="warm"] .m-sg-filter-title { color: #8B7E6A; }
[data-theme="warm"] .m-sg-filter-group.is-open .m-sg-filter-title,
[data-mobile-theme="warm"] .m-sg-filter-group.is-open .m-sg-filter-title { color: #3D3425; }
[data-theme="warm"] .m-sg-filter-group,
[data-mobile-theme="warm"] .m-sg-filter-group { border-bottom-color: #E5DDD0; }
[data-theme="warm"] .m-sg-filter-header:active,
[data-mobile-theme="warm"] .m-sg-filter-header:active { background: #F3EDE4; }
[data-theme="warm"] .m-sg-filter-body .idx-m-sheet-chip.on,
[data-mobile-theme="warm"] .m-sg-filter-body .idx-m-sheet-chip.on { background: #5D4E37; color: #FFF; border-color: #5D4E37; }

}