/* /equipes V2 — single global stylesheet for the page family.
 *
 * Lives in wwwroot/css (not a .razor.css) so the same selectors apply
 * across the page, sub-components and dialog modals without depending
 * on Blazor CSS isolation's ::deep combinator (which silently misses
 * descendants when the parent doesn't carry a scope attribute).
 *
 * Naming: BEM-ish with the rksam- prefix for shared primitives and
 * domain-specific prefixes (team-, person-, audit-) for things that
 * only the equipes page uses.
 */

/* ------------------------------------------------------------------
   Page layout
   ------------------------------------------------------------------ */

.equipes-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* Wrapper around the detail-side render branches so the header card and
 * the tabs card always sit together in the right grid cell. Without this,
 * Razor's two top-level <div class="rksam-card">s land as separate grid
 * children and the second one wraps under the sidebar. minmax(0, 1fr)
 * above + min-width:0 here let long titles / tab content shrink instead
 * of forcing the column wider than the viewport allows. */
.team-detail-pane {
    min-width: 0;
}

/* ------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------ */

.team-sidebar {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.team-sidebar__search {
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
}

.team-sidebar__search input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}

.team-sidebar__filter {
    display: flex;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid #eee;
    background: #FAFAFA;
    flex-wrap: wrap;
}

.team-sidebar__chip {
    padding: 4px 10px;
    border: 1px solid #d0d0d0;
    background: #fff;
    border-radius: 14px;
    font-size: 11px;
    cursor: pointer;
    color: #5F5E5A;
    line-height: 1.2;
    font-family: inherit;
}

.team-sidebar__chip--active {
    background: #185FA5;
    border-color: #185FA5;
    color: #fff;
    font-weight: 500;
}

.team-sidebar__rows {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

.team-sidebar__empty {
    padding: 24px;
    text-align: center;
    color: #888;
    font-size: 12px;
}

/* Reset the <button> element comprehensively. The page's first version
 * relied on Blazor CSS isolation to rewrite .team-item and silently
 * lost every property when the ::deep combinator did not match — every
 * row collapsed to inline-block (default <button> display) and four
 * buttons sat side-by-side each rendering its DIV children as a
 * vertical strip. Resetting all here makes the markup forgiving. */
.team-item {
    all: unset;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 14px;
    border-bottom: 1px solid #f5f5f5;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.12s;
    background: #fff;
    color: #1a1a1a;
    font-family: inherit;
    text-align: left;
}

.team-item:hover { background: #F5F8FB; }

.team-item--active {
    background: #E6F1FB;
    border-left-color: #185FA5;
}

.team-item--inactive .team-item__name {
    text-decoration: line-through;
    color: #999;
}

.team-item__name {
    font-weight: 600;
    font-size: 13px;
    color: #1a1a1a;
    line-height: 1.3;
}

.team-item__directorate {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    line-height: 1.3;
}

.team-item__manager {
    font-size: 11px;
    color: #5F5E5A;
    margin-top: 3px;
    font-style: italic;
    line-height: 1.3;
}

.team-item__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    gap: 8px;
}

.team-item__headcount {
    font-size: 11px;
    color: #185FA5;
    font-weight: 500;
}

.team-item__badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.team-item__badge--inactive {
    background: #EFEFEF;
    color: #6B6B6B;
}

/* ------------------------------------------------------------------
   Detail panel — header + status badge
   ------------------------------------------------------------------ */

.team-detail-header { margin-bottom: 16px; }

.team-detail-header__title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.team-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
}
.team-status-badge--active   { background: #E6F7E6; color: #1B6A1B; }
.team-status-badge--inactive { background: #EFEFEF; color: #6B6B6B; }
.team-status-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #1B6A1B;
}

/* ------------------------------------------------------------------
   Tabs
   ------------------------------------------------------------------ */

.team-tabs { padding: 0; }

.team-tabs__nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #eee;
    background: #FAFAFA;
    padding: 0 14px;
}

.team-tabs__tab {
    all: unset;
    padding: 10px 16px;
    font-size: 13px;
    color: #5F5E5A;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.12s, border-color 0.12s;
    font-family: inherit;
    line-height: 1.4;
}

.team-tabs__tab:hover { color: #185FA5; }

.team-tabs__tab--active {
    color: #185FA5;
    font-weight: 600;
    border-bottom-color: #185FA5;
}

.team-tabs__body {
    min-height: 320px;
    padding: 16px;
}

/* ------------------------------------------------------------------
   Member rows + person avatars
   ------------------------------------------------------------------ */

.person-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
}
.person-row + .person-row { margin-top: 6px; }
.person-row--manager { background: #FFF8EE; border-color: #F4D9A6; }

.person-row__main {
    flex: 1;
    min-width: 0;
}

.person-row__name {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.person-row__sub {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}
.person-row__sub-mono { font-family: var(--font-mono, monospace); }

.person-row__previous {
    color: #185FA5;
    margin-left: 4px;
}

.person-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    background: #E6F1FB;
    color: #185FA5;
    flex-shrink: 0;
    user-select: none;
}
.person-avatar--manager { background: #FAEEDA; color: #854F0B; }

.person-row__badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #E6F1FB;
    color: #185FA5;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
}
.person-row__badge--manager { background: #FAEEDA; color: #854F0B; }

/* ------------------------------------------------------------------
   Audit timeline
   ------------------------------------------------------------------ */

.audit-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

.audit-row__icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F5F5F5;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.audit-row__main { flex: 1; min-width: 0; }

.audit-row__desc {
    font-size: 13px;
    color: #1a1a1a;
    line-height: 1.4;
}

.audit-row__when {
    font-size: 11px;
    color: #888;
    margin-top: 3px;
}

/* ------------------------------------------------------------------
   Tab toolbars (Membros header, Configurações sections)
   ------------------------------------------------------------------ */

.tab-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tab-toolbar__search {
    flex: 1;
    max-width: 320px;
}

.empty-state {
    padding: 32px;
    text-align: center;
    color: #888;
    font-size: 13px;
    background: #FAFAFA;
    border-radius: 6px;
}

.settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
}

.settings-form__row-2col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
}

.settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #FAFAFA;
    border-radius: 6px;
    margin-top: 4px;
    gap: 12px;
}

.settings-toggle__title {
    font-size: 13px;
    font-weight: 500;
}

.settings-toggle__hint {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.readonly-banner {
    padding: 10px 12px;
    background: #FAFAFA;
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: 12px;
    color: #5F5E5A;
    margin-bottom: 14px;
}

.grants-section { margin-top: 24px; }

/* ------------------------------------------------------------------
   Modal primitives (used by all 5 dialogs)
   ------------------------------------------------------------------ */

.rksam-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rksam-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.rksam-modal__header {
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.rksam-modal__title { font-weight: 600; font-size: 15px; color: #1a1a1a; }
.rksam-modal__close {
    background: none;
    border: 0;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.rksam-modal__body { padding: 18px; overflow: auto; }
.rksam-modal__footer {
    padding: 12px 18px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ------------------------------------------------------------------
   Form fields + picker rows
   ------------------------------------------------------------------ */

.rksam-field-label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.rksam-field-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
    font-family: inherit;
    color: #1a1a1a;
}
.rksam-field-input:focus {
    outline: 2px solid #185FA5;
    outline-offset: -1px;
    border-color: #185FA5;
}
.rksam-field-input:disabled {
    background: #FAFAFA;
    color: #5F5E5A;
    cursor: not-allowed;
}

.rksam-picker-row {
    all: unset;
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px;
    border-bottom: 1px solid #f5f5f5;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #1a1a1a;
    font-family: inherit;
    text-align: left;
}
.rksam-picker-row:hover { background: #F5F8FB; }
.rksam-picker-row:last-child { border-bottom: 0; }

.rksam-picker-row__name {
    font-weight: 500;
    color: #1a1a1a;
}
.rksam-picker-row__sub {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

/* ------------------------------------------------------------------
   Buttons (only the additions on top of rksam-app-shell.css)
   ------------------------------------------------------------------ */

.rksam-btn--danger {
    color: #fff;
    background: #DC2626;
}
.rksam-btn--danger:hover { background: #B91C1C; }

/* Inline alerts inside dialogs */
.rksam-alert {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    line-height: 1.4;
    margin-top: 12px;
}
.rksam-alert--error    { color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; }
.rksam-alert--warning  { color: #854F0B; background: #FAEEDA; border: 1px solid #F4D9A6; }
.rksam-alert--info     { color: #185FA5; background: #E6F1FB; border: 1px solid #BBD8EF; }

/* Selection callouts shown after picking a person in autocomplete dialogs */
.rksam-selection {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #E6F1FB;
}
.rksam-selection--manager { background: #FAEEDA; }
.rksam-selection__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.rksam-selection__hint {
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
}
.rksam-selection__hint--manager { color: #854F0B; }
.rksam-selection__hint--info { color: #185FA5; }

.rksam-picker-list {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-top: 6px;
    max-height: 240px;
    overflow-y: auto;
    background: #fff;
}