/* MedMatch Theme — Lavender Care (v1.0)
   Load AFTER ui.css
   <link rel="stylesheet" href="/assets/ui.css">
   <link rel="stylesheet" href="/assets/theme-lavender.css">
*/

:root{
  /* Core palette */
  --lav-50:#faf5ff;
  --lav-100:#f3e8ff;
  --lav-200:#e9d5ff;
  --lav-300:#d8b4fe;
  --lav-400:#c084fc;
  --lav-500:#a855f7;
  --lav-600:#9333ea;
  --lav-700:#7e22ce;
  --lav-800:#6b21a8;
  --lav-900:#581c87;

  --gray-50:#f9fafb;
  --gray-100:#f3f4f6;
  --gray-200:#e5e7eb;
  --gray-300:#d1d5db;
  --gray-700:#374151;
  --gray-800:#1f2937;
  --white:#ffffff;

  /* Surface & text */
  --surface: var(--white);
  --surface-muted: var(--gray-50);
  --text: #1c1827;
  --muted: #6b7280;

  /* Components */
  --card-radius: 18px;
  --card-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 18px rgba(88,28,135,.07);

  /* Button override: make primary lavender */
  --btn-radius: 12px;
  --btn-shadow: 0 1px 2px rgba(0,0,0,.06), 0 3px 10px rgba(168,85,247,.12);
}

/* Page frame */
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--lav-100), transparent 60%),
    radial-gradient(800px 400px at -10% 10%, var(--lav-50), transparent 50%),
    var(--surface-muted);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* Header bar */
.mm-header{
  background: linear-gradient(135deg, var(--lav-500), var(--lav-600));
  color:#fff;
  padding:16px 20px;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 8px 20px rgba(88,28,135,.25);
}
.mm-header .title{
  font-weight:800; letter-spacing:.2px; font-size:1.25rem;
}
.mm-header .subtitle{
  opacity:.95; font-weight:500; font-size:.95rem;
}

/* Cards */
.card{
  background:var(--surface);
  border:1px solid var(--gray-200);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  padding:16px;
}
.card h3{ font-size:1.05rem; margin:0 0 10px; color:var(--gray-800); }

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--surface);
  border:1px solid var(--gray-200);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--card-shadow);
}
.table th{
  background: linear-gradient(180deg, var(--lav-100), var(--lav-50));
  color:#3b0764;
  text-align:left; font-weight:700; font-size:.85rem;
  padding:12px;
  border-bottom:1px solid var(--gray-200);
}
.table td{
  padding:12px;
  border-bottom:1px solid var(--gray-200);
  font-size:.92rem;
}
.table tr:last-child td{ border-bottom:none; }
.table tr:hover td{ background:rgba(233,213,255,.25); }

/* Buttons: make primary lavender */
.btn-primary{
  background: var(--lav-600);
  border-color: var(--lav-700);
}
.btn-primary:hover{ background: var(--lav-700); }
.btn-primary:focus{ outline:2px solid rgba(147,51,234,.35); }

/* Secondary: light lavender gray */
.btn-secondary{
  background: var(--lav-50);
  color:#3b0764;
  border-color: var(--lav-200);
}
.btn-secondary:hover{ background: var(--lav-100); }

/* Success/Warning/Danger keep contrasts but blend slightly */
.btn-success{ box-shadow: var(--btn-shadow); }
.btn-warning{ box-shadow: var(--btn-shadow); }
.btn-danger{ box-shadow: var(--btn-shadow); }

/* Outline primary */
.btn-outline.btn-primary{
  color: var(--lav-700);
  border-color: var(--lav-400);
}
.btn-outline.btn-primary:hover{ background: var(--lav-50); }

/* Filters & inputs */
.input, select, .select, .search{
  width:100%;
  border:1px solid var(--gray-300);
  background:#fff;
  border-radius:12px;
  padding:.55rem .8rem;
  font-size:.95rem;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.input:focus, select:focus, .select:focus, .search:focus{
  border-color: var(--lav-400);
  box-shadow: 0 0 0 4px rgba(168,85,247,.15);
}

/* Pills in lavender */
.pill.green{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.pill.gray{ background:#f3f4f6; color:#3f3f46; border-color:#e5e7eb; }
.pill.purple{ background:var(--lav-100); color:#6b21a8; border-color:var(--lav-300); }

/* Section titles */
.section-title{
  font-weight:800; font-size:1.05rem; margin:10px 0 8px;
  color:#3b0764;
}

/* Tiny helper for icon-only round buttons */
.btn-icon{
  width:36px; height:36px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
}

/* Responsive paddings for containers */
.container{
  max-width:1100px; margin:0 auto; padding: 10px 16px;
}

@media (max-width:640px){
  .mm-header{ border-radius: 0 0 14px 14px; padding:12px 14px; }
  .card{ border-radius:14px; padding:12px; }
  .table th, .table td{ padding:10px; }
}