/* TheraConnect — mobile-theme-vars.css */
/* Shared mobile theme variables — load on ANY page that needs mobile themes. */
/* Provides theme vars via [data-mobile-theme] attribute. */
/*
  Usage: add data-mobile-theme to your mobile container element.
  Theme is set via data-mobile-theme value: "" or "ios" = Clean, "dark", "warm".

  Example:
    <div id="myPageMobile" data-mobile-theme>         <!-- iOS Clean -->
    <div id="myPageMobile" data-mobile-theme="dark">  <!-- Dark Pro -->

  JS theme switching:
    el.setAttribute('data-mobile-theme', 'dark');
    // or: el.dataset.mobileTheme = 'dark';

  For pages that already use data-theme (e.g. index, profile), they can
  load this file + add data-mobile-theme to inherit shared vars, then
  override with page-specific vars via their own CSS.
*/

/* ═══════════════════════════════════════
   iOS CLEAN (default)
   ═══════════════════════════════════════ */
[data-mobile-theme] {
    --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-secondary: #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;
    --m-star-empty: #E0E0E0;
    --m-overlay: rgba(0,0,0,0.4);
}

/* ═══════════════════════════════════════
   DARK PRO
   ═══════════════════════════════════════ */
[data-mobile-theme="dark"] {
    --m-bg: #0C1410;
    --m-card: #162018;
    --m-primary: #4ADE80;
    --m-primary-light: #86EFAC;
    --m-primary-soft: rgba(74,222,128,0.1);
    --m-accent: #FBBF24;
    --m-accent-soft: rgba(251,191,36,0.1);
    --m-text: #E8F5E9;
    --m-text-sec: #8AAF8A;
    --m-text-secondary: #8AAF8A;
    --m-text-muted: #4A6A4A;
    --m-border: #243028;
    --m-success: #4ADE80;
    --m-success-bg: rgba(74,222,128,0.12);
    --m-danger: #F87171;
    --m-danger-bg: rgba(248,113,113,0.12);
    --m-warning: rgba(251,191,36,0.08);
    --m-warning-border: rgba(251,191,36,0.25);
    --m-r: 16px;
    --m-r-sm: 12px;
    --m-shadow: 0 2px 12px rgba(0,0,0,0.4);
    --m-nav-bg: rgba(12,20,16,0.95);
    --m-nav-blur: blur(24px);
    --m-header-bg: #0C1410;
    --m-gradient: linear-gradient(135deg, #065F46, #4ADE80);
    --m-btn-color: #000;
    --m-star-fill: #FBBF24;
    --m-star-empty: #243028;
    --m-overlay: rgba(0,0,0,0.7);
}
/* Dark Pro — component color fixes */
[data-mobile-theme="dark"] #mobileApp { color: var(--m-text); }
[data-mobile-theme="dark"] .m-card { color: var(--m-text); }
[data-mobile-theme="dark"] .m-stat-card { color: var(--m-text); }
[data-mobile-theme="dark"] .m-stat-label { color: var(--m-text-sec); }
[data-mobile-theme="dark"] .m-quick-btn { color: var(--m-primary); }
[data-mobile-theme="dark"] .m-menu-item { color: var(--m-text); }
[data-mobile-theme="dark"] .m-cal-cell { color: var(--m-text); }
[data-mobile-theme="dark"] .m-patient-row { color: var(--m-text); }
[data-mobile-theme="dark"] .m-cal-info-box { color: var(--m-text); }
[data-mobile-theme="dark"] .m-avatar-circle { color: var(--m-text); }
[data-mobile-theme="dark"] .m-text-muted { color: var(--m-text-sec); }
[data-mobile-theme="dark"] .m-th-card { color: var(--m-text); }
[data-mobile-theme="dark"] .m-appt-row { color: var(--m-text); }
[data-mobile-theme="dark"] .m-thread-row { color: var(--m-text); }
[data-mobile-theme="dark"] .m-home-greeting { color: var(--m-text); }
[data-mobile-theme="dark"] .m-page-header { color: var(--m-text); }
[data-mobile-theme="dark"] .m-card span { color: inherit; }
/* Dark Pro — badge overrides */
[data-mobile-theme="dark"] .badge-pending { background: rgba(251,191,36,0.15); color: #FBBF24; }
[data-mobile-theme="dark"] .badge-confirmed { background: rgba(74,222,128,0.15); color: #4ADE80; }
[data-mobile-theme="dark"] .badge-cancelled { background: rgba(248,113,113,0.15); color: #F87171; }
[data-mobile-theme="dark"] .badge-completed { background: rgba(96,165,250,0.15); color: #60A5FA; }
[data-mobile-theme="dark"] .badge-info { background: rgba(96,165,250,0.15); color: #60A5FA; }
[data-mobile-theme="dark"] .admin-badge-pending { background: rgba(251,191,36,0.15); color: #FBBF24; }
[data-mobile-theme="dark"] .admin-badge-approved { background: rgba(74,222,128,0.15); color: #4ADE80; }

/* ═══════════════════════════════════════
   WARM SAND
   ═══════════════════════════════════════ */
[data-mobile-theme="warm"] {
    --m-bg: #FAF6F1;
    --m-card: #FFFFFF;
    --m-primary: #5D4E37;
    --m-primary-light: #8B7355;
    --m-primary-soft: #F3EDE4;
    --m-accent: #C67A3C;
    --m-accent-soft: #FDF0E2;
    --m-text: #2C2416;
    --m-text-sec: #7A6E5D;
    --m-text-secondary: #7A6E5D;
    --m-text-muted: #7E7363;
    --m-border: #E8E0D6;
    --m-success: #6B9E5B;
    --m-success-bg: #EDF5EA;
    --m-danger: #C44D3E;
    --m-danger-bg: #FBEAE8;
    --m-warning: #FFF8EC;
    --m-warning-border: #E8D5B0;
    --m-r: 20px;
    --m-r-sm: 14px;
    --m-shadow: 0 2px 8px rgba(93,78,55,0.06);
    --m-nav-bg: rgba(255,255,255,0.94);
    --m-nav-blur: blur(20px);
    --m-header-bg: #FFFFFF;
    --m-gradient: linear-gradient(135deg, #5D4E37, #8B7355);
    --m-btn-color: #fff;
    --m-star-fill: #C67A3C;
    --m-star-empty: #E8E0D6;
    --m-overlay: rgba(44,36,22,0.45);
}

/* ═══════════════════════════════════════
   SHARED BOTTOM SHEET COMPONENTS
   Extracted from index.css — reusable by any page.
   ═══════════════════════════════════════ */

/* Sheet overlay + backdrop */
[data-mobile-theme] .m-sheet-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: flex-end; justify-content: center;
}
[data-mobile-theme] .m-sheet-backdrop {
    position: absolute; inset: 0; background: var(--m-overlay);
    animation: mtvFadeIn .15s ease;
}

/* Sheet container */
[data-mobile-theme] .m-sheet {
    position: relative; width: 100%; max-width: 430px;
    background: var(--m-card); border-radius: 18px 18px 0 0;
    max-height: 80vh; display: flex; flex-direction: column;
    animation: mtvSlideUp .25s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
}
[data-mobile-theme] .m-sheet-handle {
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--m-border); margin: 10px auto 4px;
}
[data-mobile-theme] .m-sheet-header {
    padding: 6px 20px 12px; display: flex;
    justify-content: space-between; align-items: center;
}
[data-mobile-theme] .m-sheet-header h3 {
    font-size: 17px; font-weight: 700; color: var(--m-text); margin: 0;
}
[data-mobile-theme] .m-sheet-close {
    width: 30px; height: 30px; border-radius: 15px;
    background: var(--m-bg); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
[data-mobile-theme] .m-sheet-body {
    overflow-y: auto; flex: 1; padding: 0 20px;
}
[data-mobile-theme] .m-sheet-footer {
    padding: 10px 20px 16px; flex-shrink: 0;
}
[data-mobile-theme] .m-sheet-apply {
    width: 100%; padding: 14px 0; border-radius: 14px;
    font-size: 15px; font-weight: 600; border: none;
    background: var(--m-primary); color: #fff;
    cursor: pointer; font-family: inherit;
}

/* Sheet chips (filter options) */
[data-mobile-theme] .m-sheet-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
}
[data-mobile-theme] .m-sheet-chip {
    padding: 7px 14px; border-radius: 20px;
    border: 1.5px solid var(--m-border); background: transparent;
    cursor: pointer; font-size: 13px; font-weight: 500;
    color: var(--m-text-secondary); font-family: inherit; transition: 0.2s;
}
[data-mobile-theme] .m-sheet-chip.on {
    border-color: var(--m-primary); background: var(--m-primary-soft);
    color: var(--m-primary);
}

/* Sheet toggle rows */
[data-mobile-theme] .m-sheet-tgl-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--m-border);
}
[data-mobile-theme] .m-sheet-tgl-row:last-child { border-bottom: none; }
[data-mobile-theme] .m-sheet-tgl-label {
    font-size: 14px; font-weight: 500; color: var(--m-text); display: block;
}
[data-mobile-theme] .m-sheet-tgl-sub {
    font-size: 11px; color: var(--m-text-secondary);
}

/* Toggle switch (iOS style) */
[data-mobile-theme] .m-sheet-tgl {
    width: 44px; height: 26px; border-radius: 13px; border: none;
    cursor: pointer; flex-shrink: 0; background: var(--m-border);
    position: relative; transition: all 0.2s;
}
[data-mobile-theme] .m-sheet-tgl.on { background: var(--m-primary); }
[data-mobile-theme] .m-sheet-tgl::after {
    content: ''; width: 20px; height: 20px; border-radius: 10px;
    background: #fff; position: absolute; top: 3px; left: 3px;
    transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
[data-mobile-theme] .m-sheet-tgl.on::after { left: 21px; }

/* ═══════════════════════════════════════
   SHARED THEME SWITCHER
   Compact pill switcher for mobile headers.
   ═══════════════════════════════════════ */
[data-mobile-theme] .m-theme-switcher {
    display: flex; gap: 3px; background: var(--m-bg);
    border-radius: 20px; padding: 3px;
}
[data-mobile-theme] .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;
}
[data-mobile-theme] .m-theme-btn.is-active {
    background: var(--m-primary); color: var(--m-btn-color);
}

/* ═══════════════════════════════════════
   SHARED LANG SWITCHER
   ═══════════════════════════════════════ */
[data-mobile-theme] .m-lang-switcher {
    display: flex; gap: 2px; background: var(--m-bg);
    border-radius: 16px; padding: 3px; margin-left: auto; flex-shrink: 0;
}
[data-mobile-theme] .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;
}
[data-mobile-theme] .m-lang-btn.is-active {
    background: var(--m-primary); color: var(--m-btn-color);
}

/* ═══════════════════════════════════════
   SHARED ANIMATIONS
   ═══════════════════════════════════════ */
@keyframes mtvSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mtvFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mtvFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }