/* ═══════════════════════════════════════════════════════════════════
   MyTools — Design System
   All colour tokens follow the spec in memory/branding.md
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap');

/* ── CSS Custom Properties ───────────────────────────────────────── */
:root {
  --bg:            #F1F5F9;
  --surface:       #FFFFFF;
  --surface-alt:   #F8FAFC;
  --border:        #E2E8F0;
  --divider:       #E5E7EB;
  --text-ink:      #0F172A;
  --text-body:     #334155;
  --text-muted:    #64748B;
  --disabled-bg:   #CBD5E1;
  --disabled-text: #94A3B8;

  --primary-700:   #0B5ED7;
  --primary-600:   #1D6FEA;
  --primary-500:   #2F80FF;
  --primary-100:   #DCEBFF;

  --accent-600:    #F97316;
  --accent-500:    #FB8C3C;
  --accent-100:    #FFE7D6;

  --success-600:   #16A34A;
  --success-100:   #DCFCE7;
  --warning-700:   #B45309;
  --warning-100:   #FEF3C7;
  --error-600:     #DC2626;
  --error-100:     #FEE2E2;
  --info-700:      #1D4ED8;
  --info-100:      #DBEAFE;
}

/* ── Base ────────────────────────────────────────────────────────── */
body {
  background-color: var(--bg);
  color: var(--text-body);
  font-size: 0.92rem;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── MyTools Wordmark ────────────────────────────────────────────── */
.mt-wordmark {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.mt-my {
  background: linear-gradient(160deg, #FB8C3C 0%, #F97316 55%, #EA6B00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mt-tools { color: #1D6FBE; }
.mt-wordmark:hover .mt-tools { color: var(--primary-600); }

/* ── Navbar (light, branded) ─────────────────────────────────────── */
.navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}
.navbar .navbar-toggler { border-color: var(--border); }
.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230B5ED7' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Breadcrumb */
.navbar .breadcrumb-item a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.navbar .breadcrumb-item a:hover   { color: var(--primary-700); }
.navbar .breadcrumb-item.active    { color: var(--text-ink); font-weight: 600; }
.navbar .breadcrumb-item + .breadcrumb-item::before { color: var(--disabled-text); }

/* Nav links & dropdown */
.navbar .nav-link        { color: var(--text-body) !important; }
.navbar .nav-link:hover  { color: var(--primary-700) !important; }
.navbar .dropdown-menu   { border-color: var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.navbar .dropdown-item:hover               { background: var(--primary-100); color: var(--primary-700); }
.navbar .dropdown-item.text-danger:hover   { background: var(--error-100);   color: var(--error-600); }

/* SU viewing-as banner */
.su-banner {
  background: var(--warning-100);
  border-bottom: 1px solid #fde68a;
  color: var(--warning-700);
  padding: .3rem 1rem;
  font-size: .78rem;
  text-align: center;
}
.su-banner a { color: var(--warning-700); font-weight: 700; text-decoration: underline; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--primary-700);
  border-color:     var(--primary-700);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--primary-600);
  border-color:     var(--primary-600);
}
.btn-primary:active { background-color: #0849A8; border-color: #0849A8; }
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--disabled-bg);
  border-color:     var(--disabled-bg);
  color:            var(--disabled-text);
  cursor: not-allowed;
}
.btn-outline-primary { color: var(--primary-700); border-color: var(--primary-700); }
.btn-outline-primary:hover { background-color: var(--primary-700); border-color: var(--primary-700); }

/* Accent (use sparingly) */
.btn-accent       { background-color: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.btn-accent:hover { background-color: var(--accent-500); border-color: var(--accent-500); color: #fff; }

/* Legacy teal → primary */
.btn-teal         { background: var(--primary-700); color: #fff; border-color: var(--primary-700); }
.btn-teal:hover   { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.btn-outline-teal { color: var(--primary-700); border-color: var(--primary-700); }
.btn-outline-teal:hover { background: var(--primary-700); color: #fff; }
.text-teal        { color: var(--primary-700) !important; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  border-color: var(--border);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.card-header {
  background-color: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-ink);
}

/* ── Tables ──────────────────────────────────────────────────────── */
.table { color: var(--text-body); }
.table thead th {
  background: var(--surface-alt);
  border-bottom: 2px solid var(--border);
  color: var(--text-ink);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.table tbody tr:hover td { background-color: #EFF6FF; }
.table tbody tr.table-active td { background-color: var(--primary-100); }
.table a { color: var(--primary-700); }
.table a:hover { color: var(--primary-600); }
.text-warning-risk { color: var(--warning-700) !important; font-weight: 600; }

/* ── Forms ───────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: #CBD5E1;
  color: var(--text-ink);
  background-color: var(--surface);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary-700);
  box-shadow: 0 0 0 3px var(--primary-100);
  background-color: var(--surface);
}
.form-control.is-invalid { border-color: var(--error-600); }
.invalid-feedback { color: var(--error-600); }
.form-label { color: var(--text-ink); font-weight: 600; font-size: .82rem; }
.form-text  { color: var(--text-muted); }

/* ── Alerts ──────────────────────────────────────────────────────── */
.alert-success { background: var(--success-100); border-color: #86efac; color: #166534; }
.alert-warning { background: var(--warning-100); border-color: #fde68a; color: var(--warning-700); }
.alert-danger  { background: var(--error-100);   border-color: #fca5a5; color: #991b1b; }
.alert-info    { background: var(--info-100);    border-color: #93c5fd; color: var(--info-700); }

/* ── Badges ──────────────────────────────────────────────────────── */
.badge.bg-primary { background-color: var(--primary-700) !important; }
.badge.bg-success { background-color: var(--success-600) !important; }
.badge.bg-warning { background-color: var(--warning-700) !important; color: #fff !important; }
.badge.bg-danger  { background-color: var(--error-600)   !important; }

/* ── Metric cards (dashboard tiles) ─────────────────────────────── */
.metric-card       { border-left: 3px solid var(--primary-700); }
.metric-card.accent { border-left-color: var(--accent-600); }
.metric-val   { font-size: 2rem; font-weight: 800; color: var(--text-ink); line-height: 1; }
.metric-label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.delta-up   { color: var(--success-600); font-weight: 600; }
.delta-down { color: var(--error-600);   font-weight: 600; }
.delta-warn { color: var(--warning-700); font-weight: 600; }

/* ── Storman key-stats (existing tile classes kept) ──────────────── */
.ks-tile { transition: filter 0.15s; }
a.ks-tile:hover { filter: brightness(0.88); }
.ks-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ── Call list ───────────────────────────────────────────────────── */
.call-row:hover td { background-color: #EFF6FF; }

/* ── Transcript ──────────────────────────────────────────────────── */
.transcript-box {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 500px;
  overflow-y: auto;
}

.badge.fs-6 { font-size: 1rem !important; min-width: 2.5rem; }
.summary-content { line-height: 1.8; font-size: 0.95rem; }

/* ── Landing page tiles ──────────────────────────────────────────── */
.project-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  border: 1px solid var(--border) !important;
}
.project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.09) !important;
  border-color: var(--primary-100) !important;
}

/* ── Focus (accessibility) ───────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary-700);
  outline-offset: 2px;
}

/* ── Print ───────────────────────────────────────────────────────── */
@media print {
  .navbar, .btn, audio, .no-print { display: none !important; }
  .card { border: 1px solid #ccc !important; }
  body  { background: white; color: #000; }
}