/* ============================================
   MedProof — Bootstrap 5 Brand Overrides Only
   All layout uses Bootstrap classes in HTML.
   This file only adds brand colors & unique styles.
   ============================================ */

:root {
  --mp-navy: #0F2B4C;
  --mp-teal: #0D9488;
  --mp-teal-dark: #0b7f74;
  --mp-slate: #4A5568;
  --mp-bg: #FAFBFC;
}

body {
  font-family: 'Inter', 'Noto Sans TC', -apple-system, sans-serif;
  color: var(--mp-navy);
  background: var(--mp-bg);
  -webkit-font-smoothing: antialiased;
}

/* --- Bootstrap Overrides --- */
.btn-primary { background-color: var(--mp-teal); border-color: var(--mp-teal); }
.btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible { background-color: var(--mp-teal-dark); border-color: var(--mp-teal-dark); }
.btn-outline-primary { color: var(--mp-teal); border-color: var(--mp-teal); }
.btn-outline-primary:hover { background-color: var(--mp-teal); border-color: var(--mp-teal); }
.text-primary { color: var(--mp-teal) !important; }
.bg-primary { background-color: var(--mp-teal) !important; }
.accordion-button:not(.collapsed) { background-color: rgba(13,148,136,0.08); color: var(--mp-navy); box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); }
.accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(13,148,136,0.25); }
.form-control:focus, .form-select:focus { border-color: var(--mp-teal); box-shadow: 0 0 0 0.2rem rgba(13,148,136,0.25); }

/* --- Navbar --- */
.mp-nav { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid #dee2e6; }
.mp-nav .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.mp-nav .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.mp-nav .nav-brand-icon { width: 36px; height: 36px; background: var(--mp-navy); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; }
.mp-nav .nav-brand-text { font-size: 20px; font-weight: 700; color: var(--mp-navy); }
.mp-nav .nav-brand-sub { font-size: 13px; color: #6c757d; margin-left: 2px; }
.mp-nav .nav-menu { display: flex; align-items: center; gap: 28px; }
.mp-nav .nav-menu a { font-size: 14px; font-weight: 500; color: var(--mp-slate); text-decoration: none; }
.mp-nav .nav-menu a:hover, .mp-nav .nav-menu a.active { color: var(--mp-teal); }
.mp-nav .nav-actions { display: flex; align-items: center; gap: 16px; }
.mp-nav .nav-actions a { font-size: 14px; font-weight: 500; color: var(--mp-navy); text-decoration: none; }
@media (max-width: 991px) { .mp-nav .nav-menu { display: none; } }

/* --- Footer --- */
.mp-footer { background: var(--mp-navy); color: rgba(255,255,255,0.5); padding: 32px 0; font-size: 13px; }

/* --- Filter Chips --- */
.chip { display: inline-block; padding: 6px 16px; border-radius: 50px; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid #dee2e6; color: var(--mp-slate); background: #fff; transition: all .2s; text-decoration: none; }
.chip:hover { border-color: var(--mp-teal); color: var(--mp-teal); }
.chip.active { background: var(--mp-teal); color: #fff; border-color: var(--mp-teal); }