/* mobile-app.css — Light theme for phones (white background + blue buttons) */
@media (max-width: 768px) {
  :root{
    --bg:#ffffff;
    --card:#ffffff;
    --text:#0f172a;           /* slate-900 */
    --muted:#475569;          /* slate-600 */
    --brand:#2563eb;          /* brand blue */
    --brand-contrast:#ffffff; /* white text on blue buttons */
    --border:#e5e7eb;         /* light gray */
    --input:#ffffff;
    --link:#2563eb;
    --shadow:0 8px 20px rgba(0,0,0,0.08);
  }

  html, body{
    background:var(--bg) !important;
    color:var(--text) !important;
    -webkit-text-size-adjust:100%;
    text-rendering:optimizeLegibility;
  }

  body, #root{ min-height:100vh; }

  /* Links */
  a, .link{ color:var(--link) !important; }

  /* Buttons */
  .btn, button, [role="button"], .Button, .button{
    background:var(--brand) !important;
    color:var(--brand-contrast) !important;
    border:1px solid var(--brand) !important;
    border-radius:12px !important;
    padding:12px 14px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    box-shadow: var(--shadow);
  }
  /* Outline/ghost buttons (if your markup uses them) */
  .btn--ghost, .button--ghost, .outline, .secondary{
    background:#fff !important;
    color:var(--brand) !important;
    border:1px solid var(--brand) !important;
  }

  /* Inputs */
  input, select, textarea{
    background:var(--input) !important;
    color:var(--text) !important;
    border:1px solid var(--border) !important;
    border-radius:10px !important;
    padding:12px 14px !important;
    width:100% !important;
    box-sizing:border-box !important;
    box-shadow: var(--shadow);
  }
  input::placeholder, textarea::placeholder{ color:#64748b !important; opacity:0.9; }
  label{ color:var(--muted) !important; }

  /* Surfaces */
  .card, .panel, .sheet, .modal, .dialog, .container, .surface, .box{
    background:var(--card) !important;
    color:var(--text) !important;
    border:1px solid var(--border) !important;
    border-radius:16px !important;
    box-shadow: var(--shadow);
  }

  /* Headers & Nav */
  header, nav, .navbar, .topbar{
    background:#ffffff !important;
    color:var(--text) !important;
    border-bottom:1px solid var(--border) !important;
  }
  nav a, .nav a{ color:var(--text) !important; }

  /* Sections & spacing */
  .grid{ gap:12px !important; }
  .section{ padding:12px !important; }
  .hidden-on-mobile{ display:none !important; }

  /* Tables */
  table{ width:100% !important; border-collapse:collapse; }
  th, td{ border-bottom:1px solid var(--border); padding:10px 8px; color:var(--text) !important; }
  th{ color:#0f172a !important; text-align:left; }

  /* Utility */
  .muted{ color:var(--muted) !important; }
}