/* Mike Bravo Consulting component styles (brand system v4.4).
   Plain CSS on top of tokens.css. Use these classes directly, or port the same values
   into the app's component framework. Values come only from tokens; do not add new ones. */

/* ---------- Layout ---------- */
.mbc-app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; background: var(--surface); }
.mbc-sidebar { border-right: 1px solid var(--line); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); }
.mbc-sidebar__logo { display: block; width: 160px; height: auto; }
.mbc-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.mbc-nav a { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.mbc-nav a:hover { background: var(--surface-sunken); }
.mbc-nav a[aria-current="page"] { background: var(--olive-soft); color: var(--olive); }
.mbc-main { padding: var(--space-8) var(--space-8) var(--space-16); max-width: var(--content-max); width: 100%; min-width: 0; box-sizing: border-box; }
.mbc-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.mbc-page-head .mbc-eyebrow { color: var(--olive); margin: 0 0 var(--space-2); }
.mbc-page-head h1 { margin: 0; }
.mbc-page-head .mbc-lead { margin: var(--space-2) 0 0; color: var(--ink); max-width: 64ch; }
.mbc-section { margin-top: var(--space-12); }
.mbc-section > h2 { margin: 0 0 var(--space-4); }
@media (max-width: 767px) {
  .mbc-app { grid-template-columns: 1fr; }
  .mbc-sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: var(--space-4) 20px; }
  .mbc-main { padding: var(--space-6) 20px var(--space-12); }
}

/* ---------- Buttons ---------- */
.mbc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 0 20px; border-radius: var(--radius-sm); font: 500 14px/20px var(--font-sans); cursor: pointer; text-decoration: none; transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
.mbc-btn--primary { background: var(--olive); color: var(--on-olive); border: 1px solid var(--olive); }
.mbc-btn--primary:hover { background: var(--olive-strong); border-color: var(--olive-strong); }
.mbc-btn--secondary { background: var(--surface-raised); color: var(--olive); border: 1px solid var(--olive); }
.mbc-btn--secondary:hover { background: var(--olive-soft); }
.mbc-btn--tertiary { background: transparent; color: var(--olive); border: 1px solid transparent; padding: 0 var(--space-2); }
.mbc-btn--tertiary:hover { text-decoration: underline; }
.mbc-btn--destructive { background: var(--surface-raised); color: var(--danger); border: 1px solid var(--danger); }
.mbc-btn:disabled, .mbc-btn[aria-disabled="true"] { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }
.mbc-btn[aria-busy="true"] { position: relative; color: transparent; }
.mbc-btn[aria-busy="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: currentColor; background: var(--on-olive); }

/* ---------- Links ---------- */
.mbc-link, .mbc-prose a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Forms ---------- */
.mbc-field { display: flex; flex-direction: column; gap: var(--space-2); max-width: 480px; }
.mbc-field label { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.mbc-input, .mbc-select, .mbc-textarea { min-height: 40px; box-sizing: border-box; width: 100%; padding: 8px 12px; background: var(--surface-sunken); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: 400 16px/24px var(--font-sans); }
.mbc-textarea { min-height: 96px; resize: vertical; }
.mbc-input:focus-visible, .mbc-select:focus-visible, .mbc-textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mbc-input[aria-invalid="true"] { border-color: var(--danger); }
.mbc-input:disabled { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--line); }
.mbc-input[readonly] { background: var(--surface); border-color: transparent; padding-left: 0; }
.mbc-help { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); margin: 0; }
.mbc-error { font: 400 14px/20px var(--font-sans); color: var(--danger); margin: 0; display: flex; gap: var(--space-1); }

/* ---------- Cards and tiles ---------- */
.mbc-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); }
.mbc-card--link:hover { border-color: var(--olive); }
.mbc-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mbc-tile { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); }
.mbc-tile__value { font: 500 28px/36px var(--font-sans); color: var(--ink); }
.mbc-tile__label { font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }

/* ---------- Badges (square, never pills) ---------- */
.mbc-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 8px; border-radius: var(--radius-sm); font: 500 12px/16px var(--font-sans); letter-spacing: 0.02em; background: var(--surface-sunken); color: var(--ink-muted); border: 1px solid var(--line); white-space: nowrap; }
.mbc-badge--active { background: var(--olive-soft); color: var(--olive); border-color: transparent; }
.mbc-badge--warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.mbc-badge--danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.mbc-badge--info { background: var(--info-soft); color: var(--info); border-color: transparent; }

/* Evidence labels: told apart by the word, not the color */
.mbc-evidence { display: inline-block; padding: 1px 6px; border-radius: var(--radius-sm); font: 500 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--ink-muted); background: transparent; }
.mbc-evidence--recommended { border-color: var(--olive); color: var(--olive); }

/* ---------- Tables ---------- */
.mbc-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.mbc-table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-sans); }
.mbc-table th { text-align: left; background: var(--surface-sunken); font-weight: 500; color: var(--ink); padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mbc-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mbc-table tr:last-child td { border-bottom: 0; }
.mbc-table tbody tr:hover { background: var(--surface); }

/* ---------- Alerts, toast, loading ---------- */
.mbc-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font: 400 14px/20px var(--font-sans); }
.mbc-alert strong { font-weight: 500; }
.mbc-alert--info { background: var(--info-soft); color: var(--info); }
.mbc-alert--warning { background: var(--warning-soft); color: var(--warning); }
.mbc-alert--danger { background: var(--danger-soft); color: var(--danger); }
.mbc-alert--success { background: var(--olive-soft); color: var(--olive); }
.mbc-toast { display: inline-flex; gap: var(--space-4); align-items: center; background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-raised); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font: 400 14px/20px var(--font-sans); }
.mbc-progress { height: 2px; background: var(--line); overflow: hidden; }
.mbc-progress > span { display: block; height: 100%; width: 40%; background: var(--olive); }

/* ---------- Modal ---------- */
.mbc-modal { background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); border: 1px solid var(--line); max-width: 480px; padding: var(--space-6); }
.mbc-modal h2 { margin: 0 0 var(--space-2); }
.mbc-modal__actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-6); }

/* ---------- Empty state ---------- */
.mbc-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.mbc-empty p { margin: 0; }

/* ---------- AI output ---------- */
.mbc-ai { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); padding: var(--space-6); }
.mbc-ai__tag { display: inline-flex; gap: var(--space-2); align-items: center; font: 500 12px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); }
.mbc-finding { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-2) var(--space-6); font: 400 14px/20px var(--font-sans); margin: 0; }
.mbc-finding dt { font-weight: 500; color: var(--ink-muted); }
.mbc-finding dd { margin: 0; }
@media (max-width: 599px) { .mbc-finding { grid-template-columns: 1fr; } }

/* ---------- Pillar marker ---------- */
.mbc-pillar { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 12px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--olive); }
.mbc-pillar img { width: 20px; height: 24px; display: block; }