.tenant-directory-panel { position: relative; padding: 30px; overflow: hidden; }
.tenant-directory-panel::before { content: ""; position: absolute; right: -90px; top: -125px; width: 270px; height: 270px; border: 42px solid rgba(112, 82, 224, .045); border-radius: 50%; pointer-events: none; }
.directory-heading { position: relative; }
.directory-icon { display: flex; align-items: end; justify-content: center; gap: 3px; flex: 0 0 40px; width: 40px; height: 40px; padding: 10px 9px; border-radius: 13px; background: linear-gradient(145deg, #e3faf5, #eee9ff); box-shadow: inset 0 0 0 1px #d8e9e6; }
[data-theme="dark"] .directory-icon { background: linear-gradient(145deg, rgba(20,184,166,.2), rgba(139,92,246,.2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.directory-icon i { display: block; width: 5px; border-radius: 5px 5px 2px 2px; background: #0c9e87; }
.directory-icon i:nth-child(1) { height: 8px; }
.directory-icon i:nth-child(2) { height: 14px; }
.directory-icon i:nth-child(3) { height: 20px; background: #7659dc; }
.directory-toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.directory-search { position: relative; display: block; flex: 1; max-width: 480px; margin: 0 !important; }
.directory-search > span { position: absolute; z-index: 1; left: 16px; top: 50%; width: 13px; height: 13px; border: 2px solid #7b859e; border-radius: 50%; transform: translateY(-57%); }
.directory-search > span::after { content: ""; position: absolute; right: -5px; bottom: -3px; width: 6px; height: 2px; border-radius: 2px; background: #7b859e; transform: rotate(45deg); }
.directory-search input { width: 100%; height: 46px; padding: 0 15px 0 43px; border: 1px solid var(--input-border); border-radius: 13px; outline: none; color: var(--ink); background: var(--input-bg); font-size: 12px; transition: .18s ease; }
.directory-search input:focus { border-color: #1aa68f; background: var(--surface-solid); box-shadow: 0 0 0 4px #18a68f15; }
.tenant-count { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 7px 14px; color: var(--muted); font-size: 11px; font-weight: 750; }
[data-theme="dark"] .tenant-count { background: rgba(30, 41, 59, 0.6); }
.tenant-directory { position: relative; display: grid; gap: 20px; max-height: 480px; padding-right: 4px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c8cfdd transparent; }
[data-theme="dark"] .tenant-directory { scrollbar-color: #334155 transparent; }
.tenant-directory::-webkit-scrollbar { width: 7px; }
.tenant-directory::-webkit-scrollbar-thumb { border-radius: 99px; background: #c8cfdd; }
[data-theme="dark"] .tenant-directory::-webkit-scrollbar-thumb { background: #334155; }

.directory-section { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .45); }
.directory-section.active-section { border-color: rgba(20, 184, 166, .24); background: linear-gradient(145deg, rgba(20, 184, 166, .04), rgba(255, 255, 255, .6)); }
.directory-section.inactive-section { border-color: rgba(234, 179, 8, .28); background: linear-gradient(145deg, rgba(234, 179, 8, .04), rgba(255, 255, 255, .45)); }
[data-theme="dark"] .directory-section { background: rgba(255, 255, 255, .02); }
[data-theme="dark"] .directory-section.active-section { border-color: rgba(20, 184, 166, .22); background: linear-gradient(145deg, rgba(20, 184, 166, .05), rgba(17, 24, 39, .6)); }
[data-theme="dark"] .directory-section.inactive-section { border-color: rgba(234, 179, 8, .22); background: linear-gradient(145deg, rgba(234, 179, 8, .05), rgba(17, 24, 39, .6)); }

.directory-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 2px 4px 4px; }
.section-title-wrap { display: flex; align-items: center; gap: 8px; }
.section-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.section-status-dot.active { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .15); }
.section-status-dot.inactive { background: #eab308; box-shadow: 0 0 0 4px rgba(234, 179, 8, .15); }
.directory-section-header h3 { margin: 0; font-size: 13px; font-weight: 850; color: var(--ink-strong); letter-spacing: -.01em; }
.section-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 850; line-height: 1; }
.section-count-badge.active { background: #e1f7f1; color: #087c69; }
[data-theme="dark"] .section-count-badge.active { background: rgba(20, 184, 166, .2); color: #5eead4; }
.section-count-badge.inactive { background: #fff3cf; color: #855d08; }
[data-theme="dark"] .section-count-badge.inactive { background: rgba(234, 179, 8, .2); color: #fde047; }
.section-description { color: var(--muted); font-size: 11px; }

.directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.section-empty-note { grid-column: 1 / -1; margin: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); font-size: 11px; text-align: center; background: rgba(255, 255, 255, .3); }
[data-theme="dark"] .section-empty-note { background: rgba(0, 0, 0, .2); }

.tenant-card-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, var(--surface), var(--surface)); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.tenant-card-row:hover { border-color: #c9c0eb; box-shadow: 0 12px 28px #34266712; transform: translateY(-1px); }
[data-theme="dark"] .tenant-card-row:hover { border-color: rgba(139,92,246,.4); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.tenant-card-row.inactive { border-color: #ead9bf; background: linear-gradient(135deg, #fffaf2, #f8f6f3); }
[data-theme="dark"] .tenant-card-row.inactive { border-color: rgba(234,179,8,.2); background: linear-gradient(135deg, rgba(234,179,8,.06), rgba(20,30,48,.6)); }
.tenant-card-row.inactive .tenant-directory-monogram { filter: saturate(.45); opacity: .78; }
.tenant-directory-monogram { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: white; background: linear-gradient(145deg, #10ad94, #6d5ad6); box-shadow: 0 8px 19px #315a7840; font-size: 15px; font-weight: 900; text-transform: uppercase; }
.tenant-directory-copy { display: grid; min-width: 0; gap: 3px; }
.tenant-directory-copy strong { overflow: hidden; color: var(--ink-strong); font-size: 13px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.tenant-directory-copy small { overflow: hidden; color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tenant-directory-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.tenant-directory-meta span { border-radius: 999px; padding: 3px 6px; color: var(--muted); background: var(--soft); font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 7px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.tenant-directory-meta span.healthy { color: #087c69; background: #e1f7f1; }
[data-theme="dark"] .tenant-directory-meta span.healthy { color: #5eead4; background: rgba(20,184,166,.2); }
.tenant-directory-meta span.attention { color: #9b5b18; background: #fff1d9; }
[data-theme="dark"] .tenant-directory-meta span.attention { color: #fde047; background: rgba(234,179,8,.2); }
.tenant-directory-meta span.inactive { color: #8a5b19; background: #ffedca; }
[data-theme="dark"] .tenant-directory-meta span.inactive { color: #fde047; background: rgba(234,179,8,.2); }
.tenant-open-button { min-height: 36px; border: 1px solid #d1c9ed; border-radius: 10px; padding: 0 10px; color: #5f48bd; background: #f2efff; font-size: 9px; font-weight: 850; white-space: nowrap; }
.tenant-open-button:hover { border-color: #a99ce0; background: #e9e3ff; }
[data-theme="dark"] .tenant-open-button { border-color: rgba(139,92,246,.35); color: #c4b5fd; background: rgba(139,92,246,.15); }
[data-theme="dark"] .tenant-open-button:hover { border-color: rgba(139,92,246,.6); background: rgba(139,92,246,.25); }
.tenant-open-button:disabled { opacity: .6; cursor: wait; }
.tenant-directory-actions { display: grid; gap: 6px; min-width: 92px; }
.tenant-decommission-button { min-height: 30px; border: 0; border-radius: 9px; color: #a23f50; background: transparent; font-size: 8px; font-weight: 850; }
.tenant-decommission-button:hover { color: #8f2d40; background: #fff0f2; }
[data-theme="dark"] .tenant-decommission-button { color: #f87171; }
[data-theme="dark"] .tenant-decommission-button:hover { color: #fca5a5; background: rgba(239,68,68,.12); }
.tenant-reactivate-button { min-height: 38px; border: 1px solid #8ed3c3; border-radius: 10px; padding: 0 11px; color: #087968; background: #e7f8f3; font-size: 9px; font-weight: 850; white-space: nowrap; }
.tenant-reactivate-button:hover { border-color: #54b7a0; background: #d8f3eb; }
[data-theme="dark"] .tenant-reactivate-button { border-color: rgba(20,184,166,.35); color: #5eead4; background: rgba(20,184,166,.15); }
[data-theme="dark"] .tenant-reactivate-button:hover { border-color: rgba(20,184,166,.6); background: rgba(20,184,166,.25); }
.tenant-reactivate-button:disabled { opacity: .6; cursor: wait; }
.directory-empty { grid-column: 1 / -1; margin: 0; padding: 25px; border: 1px dashed var(--line); border-radius: 15px; color: var(--muted); background: var(--soft); font-size: 11px; line-height: 1.55; text-align: center; }
.directory-empty.error { border-color: rgba(239,68,68,.3); color: var(--danger); background: rgba(239,68,68,.08); }

@media (max-width: 720px) {
  .tenant-directory-panel { padding: 22px 17px; }
  .directory-heading { align-items: flex-start; }
  .directory-heading .secondary-button { flex: 0 0 auto; }
  .directory-toolbar { align-items: stretch; flex-direction: column; gap: 9px; }
  .directory-search { max-width: none; }
  .tenant-count { align-self: flex-start; }
  .tenant-directory { grid-template-columns: 1fr; max-height: 470px; }
}

@media (max-width: 440px) {
  .directory-heading { flex-direction: column; }
  .directory-heading .secondary-button { width: 100%; }
  .tenant-card-row { grid-template-columns: auto minmax(0, 1fr); }
  .tenant-directory-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; width: 100%; }
}