/**
 * bela-module-contacts — contacts.css v2.0
 *
 * All classes use the bc- prefix (BEla Contacts).
 * bela-theme has ZERO bc-* rules → zero conflict possible.
 * No !important needed. No specificity hacks.
 *
 * Design tokens match JSX const C{} exactly.
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap');

/* ─── Tokens ─────────────────────────────────────────── */
:root {
  --bc-primary:   var(--bela-primary, #1B3A4B);
  --bc-secondary: var(--bela-secondary, #2D5F3E);
  --bc-accent:    var(--bela-accent, #C4973B);
  --bc-bg:        var(--bela-bg, #FEFCF8);
  --bc-bgAlt:     var(--bela-bg-alt, #F5F1EB);
  --bc-surface:   var(--bela-surface, #FFFFFF);
  --bc-border:    var(--bela-border, #E8E2D8);
  --bc-borderLt:  #EDE9E1;
  --bc-text:      var(--bela-text, #2A2520);
  --bc-sec:       var(--bela-text-secondary, #5C5549);
  --bc-muted:     var(--bela-text-muted, #8B7D6B);
  --bc-silver:    var(--bela-text-muted, #8BA4B0);
  --bc-fh: var(--bela-font-heading, 'Playfair Display', Georgia, serif);
  --bc-fb: var(--bela-font-body, 'Source Sans 3', 'Segoe UI', system-ui, sans-serif);
  --bc-fm: var(--bela-font-mono, 'JetBrains Mono', 'Fira Code', monospace);
}

/* ─── Page wrapper ───────────────────────────────────── */
.bc-page {
  background: var(--bc-bg);
  font-family: var(--bc-fb);
  color: var(--bc-text);
  line-height: 1.5;
}

/* ─── Header (JSX: background:C.primary, padding:"24px 32px 20px") */
/* ─── Toolbar (JSX: background:C.surface, borderBottom, padding:"14px 32px") */
.bc-toolbar {
  background: var(--bc-surface);
  border-bottom: 1px solid var(--bc-border);
  padding: 14px 32px;
}
.bc-toolbar-inner {
  max-width: var(--bela-container, 1400px);
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Search box */
.bc-search {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bc-bgAlt);
  border: 1px solid var(--bc-border);
  border-radius: 10px;
  padding: 8px 14px;
}
.bc-search svg { color: var(--bc-muted); flex-shrink: 0; }

.bc-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  font-family: var(--bc-fb);
  color: var(--bc-text);
  min-width: 0;
  padding: 0;
}
.bc-search input::placeholder { color: var(--bc-muted); }

.bc-search-clear {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--bc-muted);
  padding: 0;
  display: flex;
  align-items: center;
}
.bc-search-clear:hover { color: var(--bc-text); }

/* Building buttons */
.bc-btns { display: flex; gap: 4px; }

.bc-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--bc-border);
  background: var(--bc-surface);
  color: var(--bc-sec);
  font-size: 13px;
  font-family: var(--bc-fb);
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  line-height: 1;
}
.bc-btn:hover { border-color: var(--bc-primary); color: var(--bc-primary); }
.bc-btn.active {
  background: var(--bc-primary);
  border-color: var(--bc-primary);
  color: #fff;
}

.bc-status { font-size: 13px; color: var(--bc-muted); }

/* ─── Content area (JSX: maxWidth:1100, padding:"28px 32px") */
.bc-content {
  max-width: var(--bela-container, 1400px);
  margin: 0 auto;
  padding: 0 32px 28px;
}

/* ─── Building sections */
.bc-building[hidden] { display: none !important; }

.bc-building { margin-top: 24px; }

.bc-building-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bc-accent);
  margin-bottom: 18px;
}
.bc-building-label svg { color: var(--bc-silver); }

/* ─── Dept section (JSX: marginBottom:24) */
.bc-dept { margin-bottom: 20px; }
.bc-dept:last-child { margin-bottom: 0; }
.bc-dept[hidden] { display: none !important; }

.bc-dept-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

/* JSX: width:32, height:32, borderRadius:8, background:C.primary */
.bc-dept-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bc-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
}

.bc-dept-name {
  font-family: var(--bc-fh);
  font-size: 20px;
  font-weight: 700;
  color: var(--bc-primary);
  margin: 0;
  line-height: 1.2;
}

/* JSX: flex:1, height:1, background:C.borderLight */
.bc-dept-line { flex: 1; height: 1px; background: var(--bc-borderLt); }

.bc-dept-count { font-size: 12px; color: var(--bc-muted); white-space: nowrap; }

/* ─── Contact grid (JSX: repeat(auto-fill,minmax(220px,1fr)), gap:8) */
.bc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

/* ─── Contact card
   JSX: borderRadius:12, padding:"12px 14px", display:flex, gap:12
   Leader: borderLeft:3px solid C.primary, border:1px solid C.primary+"44"
   Default: border:1px solid C.border
*/
.bc-card {
  background: var(--bc-surface);
  border-radius: 12px;
  border: 1px solid var(--bc-border);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-sizing: border-box;
  transition: box-shadow .15s;
}
.bc-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
.bc-card--leader {
  border: 1px solid rgba(27,58,75,.27);
  border-left: 3px solid var(--bc-primary);
}
.bc-card[hidden] { display: none !important; }

/* JSX Avatar: width/height = size=40, borderRadius:50%
   Colors: AVBG[i] bg, AVTX[i] text (light bg / dark text from JSX) */
.bc-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  font-family: var(--bc-fb);
  letter-spacing: .03em;
}

.bc-body { flex: 1; min-width: 0; }

/* JSX: fontWeight:600, fontSize:14, color:C.text, lineHeight:1.3, marginBottom:1 */
.bc-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--bc-text);
  line-height: 1.3;
  margin-bottom: 1px;
  font-family: var(--bc-fb);
}

/* JSX: fontSize:12, color:C.muted, marginBottom:7, lineHeight:1.35 */
.bc-pos {
  font-size: 12px;
  color: var(--bc-muted);
  margin-bottom: 7px;
  line-height: 1.35;
  font-family: var(--bc-fb);
}

.bc-links { display: flex; flex-direction: column; gap: 3px; }

/* JSX: fontSize:12, color:C.primary, fontFamily:F.m */
.bc-phone {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--bc-primary);
  text-decoration: none;
  font-family: var(--bc-fm);
  white-space: nowrap;
}
.bc-phone svg { color: var(--bc-silver); flex-shrink: 0; }
/* phone2: opacity:.4 on icon, color:C.sec */
.bc-phone--sec { color: var(--bc-sec); }
.bc-phone--sec svg { opacity: .4; }

/* JSX: fontSize:12, color:C.secondary, overflow:hidden, textOverflow:ellipsis */
.bc-email {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--bc-secondary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-email svg { color: var(--bc-silver); flex-shrink: 0; }

.bc-phone:hover, .bc-email:hover { opacity: .75; }
.bc-room { font-size: 12px; color: var(--bc-muted); }

/* ─── Empty state */
.bc-empty { text-align: center; padding: 60px 20px; color: var(--bc-muted); }
.bc-empty-icon { font-size: 32px; margin-bottom: 12px; }
.bc-empty-title { font-size: 16px; font-weight: 600; color: var(--bc-sec); margin-bottom: 6px; }
.bc-empty-hint  { font-size: 14px; }

/* ─── Orgs section (JSX: marginTop:8, paddingTop:24, borderTop) */
.bc-orgs {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--bc-border);
}
.bc-orgs-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--bc-muted);
  text-transform: uppercase;
  margin-bottom: 16px;
  font-family: var(--bc-fb);
}
/* JSX topOrgs grid: max 2 columns */
.bc-orgs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
/* TS wrap: grid 1fr, gap:8 */
.bc-orgs-ts { display: grid; grid-template-columns: 1fr; gap: 8px; }

/* Child indent (JSX: paddingLeft:32) */
.bc-org-child { padding-left: 32px; }
.bc-org-connector {
  width: 2px;
  height: 12px;
  background: var(--bc-border);
  margin: 0 0 6px 15px;
}

.bc-org-wrap { display: flex; flex-direction: column; }
.bc-org-wrap[hidden] { display: none !important; }

/* JSX OrgCard: borderRadius:12, padding:"14px 16px", flexDirection:column, gap:10 */
.bc-org {
  background: var(--bc-surface);
  border-radius: 12px;
  border: 1px solid var(--bc-border);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow .15s;
  box-sizing: border-box;
  height: 100%;
}
.bc-org:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }

.bc-org-head { display: flex; align-items: flex-start; gap: 10px; }

/* JSX: fontSize:22, lineHeight:1, flexShrink:0, marginTop:1 */
.bc-org-icon { font-size: 22px; line-height: 1; flex-shrink: 0; margin-top: 1px; }

.bc-org-meta { flex: 1; min-width: 0; }

/* JSX: fontWeight:700, fontSize:14, color:C.text, lineHeight:1.3 */
.bc-org-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--bc-text);
  line-height: 1.3;
  margin: 0 0 2px;
  font-family: var(--bc-fb);
}
.bc-org-addr { font-size: 11px; color: var(--bc-muted); margin-top: 2px; }

/* JSX ext link: fontSize:11, color:C.secondary, flexShrink:0 */
.bc-org-web {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--bc-secondary);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.bc-org-web:hover { text-decoration: underline; }

/* JSX divider: borderTop:1px solid C.borderLight */
.bc-org-divider { border-top: 1px solid var(--bc-borderLt); }

/* JSX director block: display:flex, gap:10 */
.bc-org-dir { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }

/* JSX director avatar: 32x32, borderRadius:50%, background:C.bgAlt, border:1px solid C.border */
.bc-org-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bc-bgAlt);
  border: 1px solid var(--bc-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--bc-muted);
  flex-shrink: 0;
  font-family: var(--bc-fb);
}

.bc-org-dir-info { flex: 1; min-width: 0; }

/* JSX: fontSize:13, fontWeight:600, color:C.text */
.bc-org-dir-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--bc-text);
  line-height: 1.3;
  font-family: var(--bc-fb);
}
/* JSX: fontSize:11, color:C.muted, marginBottom:5 */
.bc-org-dir-title {
  font-size: 11px;
  color: var(--bc-muted);
  margin-bottom: 5px;
  font-family: var(--bc-fb);
}

.bc-org-contacts { display: flex; flex-direction: column; gap: 3px; }

.bc-org-phone {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--bc-primary);
  text-decoration: none;
  font-family: var(--bc-fm);
  white-space: nowrap;
}
.bc-org-phone svg { color: var(--bc-silver); flex-shrink: 0; }
.bc-org-phone--main { color: var(--bc-sec); }
.bc-org-phone-note { font-size: 10px; color: var(--bc-muted); font-family: var(--bc-fb); }

.bc-org-email {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--bc-secondary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-org-email svg { color: var(--bc-silver); flex-shrink: 0; }

/* Staff list (repeater) — inline after director */
.bc-org-staff { display: flex; flex-wrap: wrap; gap: 0; }
.bc-org-person { display: flex; gap: 8px; align-items: flex-start; padding: 0 16px; border-left: 1px solid var(--bc-border); }
.bc-org-avatar--sm { width: 28px; height: 28px; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; background: #E0F2FE; color: #0C4A6E; flex-shrink: 0; }

/* JSX IČO+DS footer */
.bc-org-ids {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--bc-borderLt);
}
.bc-org-id { font-size: 11px; color: var(--bc-muted); font-family: var(--bc-fm); }
.bc-org-id b { font-weight: 600; margin-right: 3px; font-family: var(--bc-fb); }

/* ─── Responsive: tablet ────────────────────────── */
@media (max-width: 960px) {
  .bc-grid         { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ─── Responsive: mobile ───────────────────────── */
@media (max-width: 768px) {
  .bc-toolbar        { padding: 12px 16px; }
  .bc-content        { padding: 0 16px 20px; }

  /* Toolbar stacks vertically */
  .bc-toolbar-inner  { flex-direction: column; align-items: stretch; gap: 10px; }
  .bc-search         { min-width: 0; }
  .bc-btns           { justify-content: stretch; }
  .bc-btn            { flex: 1; text-align: center; padding: 9px 10px; }

  /* Buildings */
  .bc-building       { margin-top: 16px; }
  .bc-building-label { margin-bottom: 12px; font-size: 10px; }

  /* Cards full width */
  .bc-grid           { grid-template-columns: 1fr; gap: 6px; }
  .bc-orgs-grid      { grid-template-columns: 1fr; gap: 8px; }

  /* Org director + staff: stack vertically on mobile */
  .bc-org-dir        { flex-direction: column; gap: 0; }
  .bc-org-person     { border-left: none; border-top: 1px solid var(--bc-borderLt); padding: 10px 0 0; margin-top: 8px; }
  .bc-org-dir > .bc-org-avatar { margin-bottom: 4px; }
  .bc-org-dir-name   { font-size: 12px; }
  .bc-org-child      { padding-left: 20px; }
  .bc-org-ids        { flex-wrap: wrap; gap: 6px; }

  /* Contact card compact */
  .bc-card           { padding: 10px 12px; gap: 10px; }
  .bc-avatar         { width: 34px; height: 34px; font-size: 11px; }
  .bc-name           { font-size: 13px; }
  .bc-pos            { font-size: 11px; }
  .bc-phone,
  .bc-email          { font-size: 11px; }
  .bc-room           { font-size: 10px; }

  /* Dept header compact */
  .bc-dept-head      { margin-bottom: 8px; }
  .bc-dept-name      { font-size: 15px; }
  .bc-dept-count     { font-size: 11px; }
  .bc-dept-icon      { font-size: 16px; }

  /* Org card compact */
  .bc-org            { padding: 12px 14px; }
  .bc-org-name       { font-size: 13px; }
  .bc-org-web        { font-size: 10px; }
  .bc-org-phone,
  .bc-org-email      { font-size: 11px; }
}

/* ─── Responsive: small phone ──────────────────── */
/* ─── Responsive: phone (480px) ─────────────────── */
@media (max-width: 480px) {
  .bc-toolbar        { padding: 10px 14px; }
  .bc-content        { padding: 0 14px 16px; }
  .bc-building       { margin-top: 16px; }
  .bc-card           { padding: 10px 12px; gap: 8px; }
  .bc-avatar         { width: 32px; height: 32px; font-size: 11px; }
  .bc-name           { font-size: 13px; }
  .bc-org            { padding: 12px 14px; }
  .bc-org-dir        { flex-direction: column; gap: 0; }
  .bc-org-person     { border-left: none; border-top: 1px solid var(--bc-borderLt); padding: 8px 0 0; margin-top: 6px; }
}

/* ─── Responsive: small phone (420px) ──────────── */
@media (max-width: 420px) {
  .bc-toolbar        { padding: 10px 12px; }
  .bc-content        { padding: 0 12px 14px; }
  .bc-building       { margin-top: 12px; }
  .bc-avatar         { width: 30px; height: 30px; font-size: 10px; }
  .bc-card           { padding: 8px 10px; gap: 8px; }
  .bc-org            { padding: 12px; }
  .bc-org-avatar     { width: 26px; height: 26px; font-size: 9px; }
  .bc-org-avatar--sm { width: 24px; height: 24px; font-size: 9px; }
  .bc-org-child      { padding-left: 14px; }
  .bc-dept-head      { flex-wrap: wrap; }
}

/* ─── Reduced motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bc-card, .bc-org, .bc-btn { transition: none; }
}

/* ─── Print ────────────────────────────────────── */
@media print {
  .bc-toolbar        { display: none; }
  .bc-card           { break-inside: avoid; border: 1px solid #ccc; }
  .bc-org            { break-inside: avoid; border: 1px solid #ccc; }
  .bc-dept           { break-inside: avoid; }
  .bc-grid           { grid-template-columns: repeat(2, 1fr); }
}