/* ============================================================================
 * team-directory.css — Contact Directory modal + App Settings admin tab
 *
 * .td-*  public directory modal (team-directory.js)
 * .tda-* admin tab in App Settings (team-directory-admin.js)
 *
 * Layout mirrors expressfuneralfunding.com/team (sticky department nav left,
 * department sections right, circular cards with hover overlay) but rendered in
 * EFF brand green + Futura PT so it reads as part of the Hub, not a transplant.
 * ==========================================================================*/

/* ═══════════════ PUBLIC DIRECTORY MODAL ═══════════════ */

.td-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 32, 0.55);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
}

.td-modal {
    width: 90vw; height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: tdPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tdPop { from { opacity: 0; transform: scale(0.97) translateY(8px); } to { opacity: 1; transform: none; } }

/* ── header ── */
.td-head {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 16px 22px;
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%);
    color: #fff;
}
.td-head-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.td-head-title > i { font-size: 1.35rem; opacity: 0.9; }
.td-head-title h3 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.2px; }
.td-head-sub { font-size: 0.78rem; opacity: 0.78; }

.td-head-tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.td-search-wrap { position: relative; display: flex; align-items: center; }
.td-search-wrap > .fa-search {
    position: absolute; left: 12px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); pointer-events: none;
}
.td-search {
    width: 300px; height: 36px;
    padding: 0 34px 0 32px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff; font-size: 0.85rem; font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.td-search::placeholder { color: rgba(255, 255, 255, 0.6); }
.td-search:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}
.td-search-clear {
    position: absolute; right: 8px;
    width: 20px; height: 20px; display: none;
    align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, 0.25); color: #fff;
    font-size: 0.6rem; cursor: pointer;
}
.td-search-clear:hover { background: rgba(255, 255, 255, 0.4); }

.td-close {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, 0.14); color: #fff;
    cursor: pointer; transition: background 0.15s;
}
.td-close:hover { background: rgba(255, 255, 255, 0.28); }

/* ── body: nav + content ── */
.td-body { flex: 1; min-height: 0; display: flex; }

.td-nav-col {
    flex: 0 0 232px;
    border-right: 1px solid #ece7df;
    background: #faf8f5;
    overflow-y: auto;
    padding: 20px 0;
}
.td-nav { display: flex; flex-direction: column; }
.td-nav-link {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 22px;
    font-size: 0.9rem; color: #55605c; cursor: pointer;
    border-left: 3px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.td-nav-link:hover { color: var(--td-accent, #1E6332); background: rgba(30, 99, 50, 0.05); }
.td-nav-link.is-active {
    color: var(--td-accent, #1E6332); font-weight: 600;
    border-left-color: var(--td-accent, #1E6332);
    background: rgba(30, 99, 50, 0.07);
}
.td-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* small colour chip that ties the nav entry to its department heading */
.td-nav-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--td-accent, #1E6332);
    opacity: 0.35; transition: opacity 0.15s, transform 0.15s;
}
.td-nav-link:hover .td-nav-dot { opacity: 0.7; }
.td-nav-link.is-active .td-nav-dot { opacity: 1; transform: scale(1.25); }

.td-nav-count {
    font-size: 0.7rem; font-weight: 600;
    min-width: 22px; text-align: center;
    padding: 1px 6px; border-radius: 9px;
    background: #ece7df; color: #6b7671; flex-shrink: 0;
}
.td-nav-link.is-active .td-nav-count { background: var(--td-accent, #1E6332); color: #fff; }

/* No top padding here — the sticky department heading owns the top spacing so
   that when it pins there is no transparent strip above it for cards to show
   through. See .td-dept-head. */
.td-content { flex: 1; min-width: 0; overflow-y: auto; padding: 0 30px 60px; }

/* ── department heading + the stepped rule from the website ── */
.td-dept { scroll-margin-top: 0; }
/* the heading's own 24px padding-top supplies most of the separation */
.td-dept + .td-dept { margin-top: 18px; }

/* Sticky so you keep your bearings scrolling a 33-person department.
   The heading owns the top spacing (the scroller has no top padding) and a
   ::before bleeds the same background upward, so when it pins there is never a
   transparent strip above it for cards to show through. */
.td-dept-head {
    display: flex; align-items: center; gap: 0;
    margin-bottom: 22px;
    position: sticky; top: 0; z-index: 3;
    background: #fff;
    padding: 24px 0 12px;
}
.td-dept-head::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: 60px;
    background: inherit;
}
.td-dept-head h2 {
    margin: 0; flex-shrink: 0;
    font-size: 1.12rem; font-weight: 600; color: #1f2a26;
    padding: 6px 14px 6px 0;
    display: flex; align-items: center; gap: 10px;
}
/* accent bar tying the heading to its nav entry */
.td-dept-head h2::before {
    content: ''; width: 4px; height: 17px; border-radius: 2px;
    background: var(--td-accent, #1E6332);
}
.td-dept-tally {
    flex-shrink: 0; margin-right: 16px;
    font-size: 0.7rem; font-weight: 600;
    padding: 2px 9px; border-radius: 9px;
    background: var(--td-accent, #1E6332); color: #fff; opacity: 0.9;
}
.td-dept-rule {
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--td-accent, #1E6332) 0%, #d8d2c8 22%, #e6e1d8 100%);
    opacity: 0.5;
    position: relative; top: 12px;
}

.td-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 30px 20px;
}

/* ── card ── */
.td-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 6px 4px 12px;
    border-radius: 12px;
    transition: transform 0.16s, box-shadow 0.16s, background 0.16s;
    animation: tdCardIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tdCardIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.td-card.has-bio { cursor: pointer; }
.td-card.has-bio:hover {
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(30, 99, 50, 0.12);
}

.td-avatar {
    position: relative;
    width: 132px; height: 132px;
    border-radius: 50%; overflow: hidden;
    background: #f0ece5;
    margin-bottom: 14px;
}
/* fades up once decoded rather than snapping in mid-cascade */
.td-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: 0; transform: scale(1.04);
    transition: opacity 0.45s ease, transform 0.45s ease;
}
.td-avatar img.is-loaded { opacity: 1; transform: none; }
.td-avatar-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #b9b0a3; font-size: 2.2rem;
}
.td-avatar-hover {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 30, 22, 0.55);
    opacity: 0; transition: opacity 0.18s;
}
.td-card:hover .td-avatar-hover { opacity: 1; }
.td-avatar-links { display: flex; align-items: center; gap: 4px; }
.td-avatar-links a {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.95rem;
    border-radius: 50%;
    transition: background 0.15s, transform 0.15s;
}
.td-avatar-links a:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.1); }
/* thin divider between the icons, like the source site */
.td-avatar-links a + a { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.35); }

.td-name { margin: 0 0 4px; font-size: 0.98rem; font-weight: 600; color: #1f2a26; }
.td-title { margin: 0; font-size: 0.8rem; line-height: 1.4; color: #6b7671; }
.td-ext {
    display: inline-block; margin-top: 7px;
    padding: 2px 10px; border-radius: 10px;
    background: #F4F0E9; color: #8a6536;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.4px;
    text-decoration: none;
}
.td-ext:hover { background: #ece2d2; color: #6B4A28; }
.td-more {
    margin-top: 9px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.9px; text-transform: uppercase;
    color: #1E6332;
}
.td-card.has-bio:hover .td-more { text-decoration: underline; }

/* ── states ── */
.td-state {
    grid-column: 1 / -1; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 70px 20px; text-align: center; color: #6b7671;
}
.td-state p { margin: 0; font-size: 0.95rem; }
.td-state-sub { font-size: 0.8rem; color: #98a09c; }
.td-state-icon { font-size: 2.2rem; color: #c9c2b6; }
.td-spinner {
    width: 40px; height: 40px;
    border: 3px solid #e6e1d8; border-top-color: #1E6332;
    border-radius: 50%; animation: progressSpin 0.8s linear infinite;
}
.td-retry {
    margin-top: 4px; padding: 7px 18px;
    border: 1px solid #1E6332; border-radius: 20px;
    background: #fff; color: #1E6332; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.td-retry:hover { background: #1E6332; color: #fff; }

/* ── skeleton (loading) ── */
/* Mirrors the real geometry so the swap to content has no layout jump. */
.td-skel {
    display: block; height: 10px; border-radius: 6px;
    background: linear-gradient(90deg, #efeae2 0%, #f7f4ef 40%, #efeae2 80%);
    background-size: 220% 100%;
    animation: tdShimmer 1.25s ease-in-out infinite;
}
@keyframes tdShimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }

.td-skel-circle { width: 132px; height: 132px; border-radius: 50%; margin-bottom: 14px; }
.td-skel-nav { padding-top: 4px; }
.td-skel-nav-item { padding: 11px 22px; }
.td-skel-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 6px 4px 12px;
    animation: tdCardIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Respect users who ask for less motion: keep the fades, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    .td-card, .td-skel-card { animation-duration: 0.01ms; animation-delay: 0ms !important; }
    .td-modal, .td-bio { animation: none; }
    .td-avatar img { transform: none; transition: opacity 0.2s ease; }
    .td-skel { animation: none; }
}

/* ── bio modal ── */
.td-bio-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 32, 0.6);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.td-bio {
    position: relative;
    width: min(920px, 92vw); max-height: 86vh;
    display: flex; gap: 34px;
    padding: 38px 40px;
    background: #fff; border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    overflow-y: auto;
    animation: tdPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.td-bio-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: #f2efe9; color: #6b7671; cursor: pointer;
}
.td-bio-close:hover { background: #e6e1d8; color: #1f2a26; }

.td-bio-left {
    flex: 0 0 210px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    border-right: 1px solid #ece7df; padding-right: 30px;
}
.td-bio-avatar {
    width: 168px; height: 168px; border-radius: 50%;
    overflow: hidden; background: #f0ece5; margin-bottom: 16px;
}
.td-bio-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-bio-left h4 { margin: 0 0 5px; font-size: 1.05rem; font-weight: 600; color: #1f2a26; }
.td-bio-title { margin: 0; font-size: 0.82rem; line-height: 1.45; color: #6b7671; }
.td-bio-links { display: flex; gap: 10px; margin-top: 14px; }
.td-bio-links a {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #F4F0E9; color: #1E6332;
    font-size: 0.85rem; transition: background 0.15s, color 0.15s;
}
.td-bio-links a:hover { background: #1E6332; color: #fff; }

.td-bio-right { flex: 1; min-width: 0; }
.td-bio-right p {
    margin: 0 0 14px;
    font-size: 0.92rem; line-height: 1.72; color: #3f4a45;
}
.td-bio-right p:last-child { margin-bottom: 0; }

/* ── dark theme ── */
body.dark-theme .td-modal { background: #131c26; }
body.dark-theme .td-nav-col { background: #0f1720; border-right-color: #26313d; }
body.dark-theme .td-nav-link { color: #9fb0ab; }
body.dark-theme .td-nav-link:hover,
body.dark-theme .td-nav-link.is-active { color: #6ee7b7; background: rgba(110, 231, 183, 0.08); border-left-color: #6ee7b7; }
body.dark-theme .td-nav-count { background: #26313d; color: #9fb0ab; }
body.dark-theme .td-nav-link.is-active .td-nav-count { background: #6ee7b7; color: #0f1720; }
body.dark-theme .td-dept-head h2,
body.dark-theme .td-name { color: #e8eef0; }
body.dark-theme .td-dept-head { background: #131c26; }
body.dark-theme .td-dept-rule {
    background: linear-gradient(90deg, var(--td-accent, #6ee7b7) 0%, #2c3945 22%, #26313d 100%);
}
body.dark-theme .td-skel {
    background: linear-gradient(90deg, #1a2532 0%, #22303e 40%, #1a2532 80%);
    background-size: 220% 100%;
}
body.dark-theme .td-title,
body.dark-theme .td-state { color: #9fb0ab; }
body.dark-theme .td-card.has-bio:hover { background: #1a2532; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); }
body.dark-theme .td-avatar,
body.dark-theme .td-bio-avatar { background: #26313d; }
body.dark-theme .td-more { color: #6ee7b7; }
body.dark-theme .td-ext { background: #2a2318; color: #d9b58a; }
body.dark-theme .td-bio { background: #131c26; }
body.dark-theme .td-bio-left { border-right-color: #26313d; }
body.dark-theme .td-bio-left h4 { color: #e8eef0; }
body.dark-theme .td-bio-title { color: #9fb0ab; }
body.dark-theme .td-bio-right p { color: #c4d0cc; }
body.dark-theme .td-bio-links a { background: #1c2735; color: #6ee7b7; }
body.dark-theme .td-bio-links a:hover { background: #6ee7b7; color: #0f1720; }
body.dark-theme .td-bio-close { background: #1c2735; color: #9fb0ab; }
body.dark-theme .td-retry { background: transparent; border-color: #6ee7b7; color: #6ee7b7; }

/* ── responsive: nav becomes a horizontal strip ── */
@media (max-width: 900px) {
    .td-backdrop { padding: 0; }
    .td-modal { width: 100vw; height: 100dvh; border-radius: 0; }
    .td-head { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
    .td-head-tools { width: 100%; order: 3; }
    .td-search { width: 100%; }
    .td-search-wrap { flex: 1; }
    .td-body { flex-direction: column; }
    .td-nav-col {
        flex: 0 0 auto; width: 100%;
        border-right: none; border-bottom: 1px solid #ece7df;
        padding: 0; overflow-x: auto; overflow-y: hidden;
    }
    .td-nav { flex-direction: row; }
    .td-nav-link {
        white-space: nowrap; border-left: none; border-bottom: 3px solid transparent;
        padding: 12px 16px;
    }
    .td-nav-link.is-active { border-left-color: transparent; border-bottom-color: #1E6332; }
    .td-content { padding: 18px 16px 50px; }
    .td-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 22px 12px; }
    .td-avatar { width: 104px; height: 104px; }
    .td-bio { flex-direction: column; gap: 20px; padding: 30px 22px; }
    .td-bio-left { flex: 0 0 auto; border-right: none; border-bottom: 1px solid #ece7df; padding-right: 0; padding-bottom: 20px; }
    body.dark-theme .td-bio-left { border-bottom-color: #26313d; }
}


/* ═══════════════ ADMIN TAB (App Settings) ═══════════════ */

.tda-root { display: flex; flex-direction: column; gap: 18px; }

.tda-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-bottom: 14px; border-bottom: 1px solid #ece7df;
}
.tda-toolbar-spacer { flex: 1; }
.tda-count { font-size: 0.82rem; color: #6b7671; }

.tda-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px;
    border: 1px solid #1E6332; border-radius: 8px;
    background: #1E6332; color: #fff;
    font-size: 0.84rem; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: background 0.15s, transform 0.12s;
}
.tda-btn:hover { background: #214A3E; }
.tda-btn:active { transform: translateY(1px); }
.tda-btn.is-ghost { background: #fff; color: #1E6332; }
.tda-btn.is-ghost:hover { background: #F4F0E9; }
.tda-btn.is-danger { background: #fff; border-color: #dc2626; color: #dc2626; }
.tda-btn.is-danger:hover { background: #dc2626; color: #fff; }
.tda-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* two-column: departments | members */
.tda-cols { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }

.tda-panel {
    border: 1px solid #ece7df; border-radius: 12px;
    background: #fff; overflow: hidden;
}
.tda-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px;
    background: #F4F0E9; border-bottom: 1px solid #ece7df;
}
.tda-panel-head h5 { margin: 0; font-size: 0.9rem; font-weight: 600; color: #1E6332; }
.tda-head-tools-inline { display: flex; align-items: center; gap: 6px; }
.tda-panel-body { padding: 10px; max-height: 620px; overflow-y: auto; }

/* draggable rows */
.tda-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; margin-bottom: 6px;
    border: 1px solid #ece7df; border-radius: 9px;
    background: #fff; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tda-row:hover { border-color: #1E6332; box-shadow: 0 2px 8px rgba(30, 99, 50, 0.08); }
.tda-row.is-selected { border-color: #1E6332; background: rgba(30, 99, 50, 0.05); }
.tda-row.is-inactive { opacity: 0.55; }
.tda-row.is-dragging { opacity: 0.4; }
.tda-row.is-drop-target { border-color: #C19A6B; border-style: dashed; }

.tda-grip { color: #c2bcb1; cursor: grab; font-size: 0.8rem; flex-shrink: 0; }
.tda-grip:active { cursor: grabbing; }

.tda-row-photo {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; background: #f0ece5; flex-shrink: 0;
}
.tda-row-main { flex: 1; min-width: 0; }
.tda-row-name {
    font-size: 0.86rem; font-weight: 600; color: #1f2a26;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tda-row-sub {
    font-size: 0.74rem; color: #8a938f;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tda-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.tda-icon-btn {
    width: 27px; height: 27px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: #8a938f;
    font-size: 0.75rem; cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.tda-icon-btn:hover { background: #F4F0E9; color: #1E6332; }
.tda-icon-btn.is-danger:hover { background: #fee2e2; color: #dc2626; }

.tda-badge {
    font-size: 0.66rem; font-weight: 600;
    padding: 1px 7px; border-radius: 9px;
    background: #ece7df; color: #6b7671; flex-shrink: 0;
}
.tda-badge.is-count { background: #1E6332; color: #fff; }
.tda-badge.is-archived { background: #fee2e2; color: #b91c1c; }
.tda-badge.is-multi { background: #F4F0E9; color: #8a6536; }

.tda-empty { padding: 34px 16px; text-align: center; color: #98a09c; font-size: 0.84rem; }

.tda-search {
    width: 100%; height: 34px;
    padding: 0 12px; margin-bottom: 10px;
    border: 1px solid #e0dbd2; border-radius: 8px;
    font-size: 0.84rem; font-family: inherit; color: #1f2a26;
}
.tda-search:focus { outline: none; border-color: #1E6332; box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12); }

/* ── member editor drawer ── */
.tda-editor-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 32, 0.5);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    z-index: 10180;
}
.tda-editor {
    width: min(840px, 94vw); max-height: 92vh;
    background: #fff; border-radius: 14px;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
    animation: tdPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tda-editor-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, #1E6332 0%, #214A3E 100%); color: #fff;
}
.tda-editor-head h4 { margin: 0; font-size: 1rem; font-weight: 600; }
.tda-editor-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
.tda-editor-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 20px; border-top: 1px solid #ece7df; background: #faf8f5;
}
.tda-editor-foot .tda-toolbar-spacer { flex: 1; }

.tda-form-grid { display: grid; grid-template-columns: 190px 1fr; gap: 22px; }
.tda-photo-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tda-photo-preview {
    width: 150px; height: 150px; border-radius: 50%;
    overflow: hidden; background: #f0ece5;
    display: flex; align-items: center; justify-content: center;
    color: #b9b0a3; font-size: 2.4rem;
}
.tda-photo-preview img { width: 100%; height: 100%; object-fit: cover; }

.tda-field { margin-bottom: 14px; }
.tda-field label {
    display: block; margin-bottom: 5px;
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: #6b7671;
}
.tda-field input[type="text"],
.tda-field input[type="email"],
.tda-field input[type="url"],
.tda-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e0dbd2; border-radius: 8px;
    font-size: 0.86rem; font-family: inherit; color: #1f2a26;
    background: #fff;
}
.tda-field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.tda-field input:focus, .tda-field textarea:focus {
    outline: none; border-color: #1E6332; box-shadow: 0 0 0 3px rgba(30, 99, 50, 0.12);
}
.tda-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tda-hint { margin-top: 4px; font-size: 0.72rem; color: #98a09c; }

/* department multi-select chips */
.tda-dept-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tda-dept-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e0dbd2; border-radius: 18px;
    background: #fff; color: #6b7671;
    font-size: 0.79rem; font-family: inherit; cursor: pointer;
    transition: all 0.15s;
}
.tda-dept-chip:hover { border-color: #1E6332; color: #1E6332; }
.tda-dept-chip.is-on {
    background: #1E6332; border-color: #1E6332; color: #fff; font-weight: 600;
}

.tda-inline-confirm {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; margin-bottom: 6px;
    border: 1px solid #fca5a5; border-radius: 9px;
    background: #fef2f2; font-size: 0.8rem; color: #b91c1c;
}
.tda-inline-confirm .tda-btn { padding: 4px 12px; font-size: 0.76rem; }

body.dark-theme .tda-panel,
body.dark-theme .tda-row,
body.dark-theme .tda-editor { background: #131c26; border-color: #26313d; }
body.dark-theme .tda-panel-head { background: #0f1720; border-bottom-color: #26313d; }
body.dark-theme .tda-panel-head h5 { color: #6ee7b7; }
body.dark-theme .tda-row-name { color: #e8eef0; }
body.dark-theme .tda-row-sub, body.dark-theme .tda-count { color: #9fb0ab; }
body.dark-theme .tda-row:hover, body.dark-theme .tda-row.is-selected { border-color: #6ee7b7; }
body.dark-theme .tda-search,
body.dark-theme .tda-field input, body.dark-theme .tda-field textarea {
    background: #0f1720; border-color: #26313d; color: #e8eef0;
}
body.dark-theme .tda-editor-foot { background: #0f1720; border-top-color: #26313d; }
body.dark-theme .tda-btn.is-ghost { background: transparent; color: #6ee7b7; border-color: #6ee7b7; }
body.dark-theme .tda-dept-chip { background: transparent; border-color: #26313d; color: #9fb0ab; }

@media (max-width: 1100px) {
    .tda-cols { grid-template-columns: 1fr; }
    .tda-form-grid { grid-template-columns: 1fr; }
    .tda-photo-col { order: -1; }
}