/* Team module — Notion-style empty state (scoped; .empty-state is used globally on BOQ) */

.page-content.team-page,
.team-page {
    background: transparent;
    padding: 0;
    box-sizing: border-box;
    min-height: 0;
}

.team-page #team-app-state,
.team-page #ws-tasks-app-state {
    padding: 32px;
    box-sizing: border-box;
}

.team-page .sp-no-project {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px 40px;
    gap: 12px;
}

.team-page .sp-no-project__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary-dark, #1e293b);
    margin: 0;
}

.team-page .sp-no-project__hint {
    font-size: 14px;
    color: #64748b;
    max-width: 340px;
    margin: 0;
    line-height: 1.6;
}

.team-page .sp-no-project__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.team-page .sp-no-project__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    background: #2563eb;
    color: #fff;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

.team-page .sp-no-project__btn:hover {
    background: #1d4ed8;
}

.team-page .sp-no-project__btn--ghost {
    background: transparent;
    color: #2563eb;
    border-color: #93c5fd;
}

.team-page .sp-no-project__btn--ghost:hover {
    background: #eff6ff;
    border-color: #2563eb;
}

.team-page .page-header {
    margin: 0 0 8px 0;
}

.team-page .page-header .workspace-back {
    margin: 0 0 8px;
}

.team-page .page-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary-dark, #1e293b);
    margin: 0 0 6px 0;
    letter-spacing: -0.02em;
}

.team-page .page-header p {
    font-size: 15px;
    color: var(--color-text-secondary, #64748b);
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}

/* Overrides global .empty-state in style.css (BOQ table empty cells) */
.team-page .empty-state {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    max-width: 420px;
    padding: 0 !important;
    text-align: center !important;
    color: inherit !important;
    font-style: normal !important;
    font-size: inherit !important;
}

/* .empty-icon: global styles in layout.css (design tokens) */

.team-page .empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: #111827;
}

.team-page .empty-state p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.team-page #teamMembersEmpty[hidden],
.team-page #teamMembersListWrap[hidden] {
    display: none !important;
}

.team-members-list-wrap {
    margin-top: 8px;
}

.team-members-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px;
}

.team-members-toolbar__btn {
    flex-shrink: 0;
}

.team-table-scroll {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
}

.team-members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: left;
}

.team-members-table thead th {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

.team-members-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b;
    vertical-align: middle;
}

.team-members-table .member-name {
    min-width: 0;
    max-width: 100%;
}

.team-members-table .member-name .name {
    font-weight: 500;
}

.team-members-table .member-name .name.btool-text-truncate {
    display: block;
}

.team-members-table .member-name .email {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    line-height: 1.35;
    word-break: break-all;
}

.team-members-table .member-name__email--empty {
    color: #94a3b8;
}

.team-members-table tbody tr:last-child td {
    border-bottom: none;
}

.team-row {
    cursor: pointer;
    transition: background 0.2s ease;
}

.team-row:hover {
    background: #f9fafb;
}

.team-row:hover td {
    background: #f9fafb;
}

/* Owner row is not navigable — suppress pointer and hover highlight */
.team-row[data-is-owner="true"] {
    cursor: default;
}

.team-row[data-is-owner="true"]:hover,
.team-row[data-is-owner="true"]:hover td {
    background: transparent;
}

/* Owner row cell styles */
.team-owner-full-access {
    font-size: 0.8125rem;
    color: #9b9a97;
    font-style: italic;
}

.status-active {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #22a06b;
}

.team-owner-lock {
    font-size: 0.875rem;
    opacity: 0.35;
    cursor: default;
    user-select: none;
}

.team-members-table__cell--muted {
    color: #94a3b8;
}

.team-members-table__col-modules {
    vertical-align: middle;
    max-width: 280px;
}

.team-members-table__col-document {
    vertical-align: middle;
    white-space: nowrap;
}

.team-members-table .download-doc {
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #2563eb;
    cursor: pointer;
    text-decoration: none;
}

.team-members-table .download-doc:hover {
    text-decoration: underline;
}

.team-members-table .module-badge {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 6px;
    margin-right: 4px;
    margin-bottom: 4px;
    line-height: 1.3;
}

.team-members-table .module-more {
    font-size: 12px;
    color: #6b7280;
    margin-left: 6px;
    cursor: pointer;
    white-space: nowrap;
    vertical-align: middle;
}

.module-tooltip {
    position: fixed;
    background: #111827;
    color: #fff;
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    display: none;
    z-index: 1000;
    white-space: normal;
    pointer-events: none;
    box-sizing: border-box;
    max-width: min(360px, calc(100vw - 16px));
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.team-members-table .text-muted {
    font-size: 13px;
    color: #94a3b8;
}

.team-members-table__th-actions {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

.team-members-table__col-actions {
    text-align: right;
    vertical-align: middle;
    width: 1%;
    white-space: nowrap;
}

.action-menu-host {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
}

.action-menu {
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    border-radius: 6px;
    color: #64748b;
    user-select: none;
}

.action-menu:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.dropdown {
    position: absolute;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    min-width: 188px;
    text-align: left;
}

.dropdown__item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 14px;
    color: #1e293b;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.dropdown__item:hover {
    background: #f3f4f6;
}

.dropdown__item--danger {
    color: #dc2626;
}

.dropdown__item--danger:hover {
    background: #fef2f2;
}

.team-members-table__col-status {
    min-width: 220px;
    vertical-align: middle;
}

.team-members-table .status-incomplete {
    font-size: 13px;
    color: #f59e0b;
}

.team-members-table .link-btn {
    background: none;
    border: none;
    color: #2563eb;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    font: inherit;
}

.team-members-table .complete-link {
    color: #2563eb;
    text-decoration: none;
    margin-left: 6px;
    font: inherit;
    cursor: pointer;
}

.team-members-table .complete-link:hover {
    text-decoration: underline;
}

/* —— Member details (Notion-style cards, BOQ-like spacing) —— */

.page-member-details .member-details-page {
    padding: 32px;
    max-width: 720px;
    margin: 0 auto;
    box-sizing: border-box;
}

.page-member-details .member-details-page-header {
    margin-bottom: 24px;
}

.page-member-details .member-details-page-header .workspace-back {
    margin: 0 0 6px;
}

.page-member-details .member-details-page-header .page-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    letter-spacing: -0.02em;
    color: #111827;
    line-height: 1.15;
}

.page-member-details .member-details-page-header .page-subtitle {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 2px;
    line-height: 1.45;
}

.member-details-empty {
    padding: 24px 0;
}

.member-details-empty .text-muted {
    margin: 0 0 12px 0;
    font-size: 15px;
}

.member-details-empty a {
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
}

.member-details-empty a:hover {
    text-decoration: underline;
}

/* Organization settings — SaaS section cards (settings.html) */
.page-member-details .org-settings-page .member-details-page-header {
    margin-bottom: 28px;
}

.page-member-details .org-settings-page {
    max-width: 1200px;
    margin-left: 0;
    margin-right: 0;
    padding: 24px 32px;
}

.page-member-details .org-settings-page .member-details-page-header .page-subtitle {
    font-size: 13px;
    color: #6b7280;
}

.page-member-details .org-settings-page #orgSettingsOwnerBanner {
    margin: 0 0 24px 0;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
}

.page-member-details .org-settings-page > .org-settings-section {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    padding: 24px;
    margin: 0 0 20px;
    max-width: 640px;
    box-sizing: border-box;
}

.page-member-details .org-settings-page > .org-settings-section:last-child {
    margin-bottom: 0;
}

.page-member-details .org-settings-page .org-settings-section__title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
    text-transform: none;
    border-bottom: none;
    padding: 0;
}

.page-member-details .org-settings-page .org-settings-section__desc {
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
    margin: 0 0 24px;
}

.page-member-details .org-settings-page .org-settings-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}

.page-member-details .org-settings-page .org-settings-info-banner[hidden] {
    display: none !important;
}

.page-member-details .org-settings-page .org-settings-info-banner__icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.4;
}

.page-member-details .org-settings-page .org-settings-info-banner__text {
    min-width: 0;
}

.page-member-details .org-settings-page .org-settings-info-banner__title {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    color: #334155;
}

.page-member-details .org-settings-page .org-settings-info-banner__desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #64748b;
}

.page-member-details .org-settings-page .org-settings-currency-hint {
    margin-top: 8px;
    margin-bottom: 0;
}

.page-member-details .org-settings-page .org-settings-section__actions {
    margin-bottom: 0;
}

/* Financial Preferences — compact density (Linear / Notion–style) */
.page-member-details .org-settings-page > .org-settings-section:has(#orgDefaultCurrency) {
    padding: 18px 22px 20px;
}

.page-member-details .org-settings-page > .org-settings-section:has(#orgDefaultCurrency) .org-settings-section__title {
    margin-bottom: 4px;
}

.page-member-details .org-settings-page > .org-settings-section:has(#orgDefaultCurrency) .org-settings-section__desc {
    margin-bottom: 14px;
    line-height: 1.4;
}

.page-member-details .org-settings-page .md-field.md-field--full:has(#orgDefaultCurrency) {
    margin-bottom: 0;
}

.page-member-details .org-settings-page .md-field.md-field--full:has(#orgDefaultCurrency) .md-label {
    margin-bottom: 6px;
}

.page-member-details .org-settings-page .md-field.md-field--full:has(#orgDefaultCurrency) .md-input.md-select {
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
}

.page-member-details .org-settings-page > .org-settings-section:has(#orgDefaultCurrency) .org-settings-currency-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
}

.page-member-details .org-settings-page > .org-settings-section:has(#orgDefaultCurrency) .md-actions {
    margin-top: 10px;
    margin-bottom: 0;
    padding-top: 0;
    gap: 8px;
}

.page-member-details .org-settings-page > .org-settings-section:has(#orgStorageSection),
.page-member-details .org-settings-page > #orgStorageSection {
    padding: 18px 22px 20px;
}

.page-member-details .org-settings-page .org-storage-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
}

.page-member-details .org-settings-page .org-storage-hero {
    margin: 8px 0 20px;
}

.page-member-details .org-settings-page .org-storage-hero__label {
    margin: 0 0 6px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-member-details .org-settings-page .org-storage-hero__used {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.page-member-details .org-settings-page .org-storage-hero__of {
    margin: 6px 0 14px;
    font-size: 14px;
    color: #6b7280;
}

.page-member-details .org-settings-page .org-storage-hero__available {
    margin: 10px 0 0;
    font-size: 14px;
    color: #374151;
    font-weight: 600;
}

.page-member-details .org-settings-page .org-storage-skeleton {
    margin: 8px 0 4px;
}

.page-member-details .org-settings-page .org-storage-skeleton__used,
.page-member-details .org-settings-page .org-storage-skeleton__line,
.page-member-details .org-settings-page .org-storage-skeleton__bar {
    border-radius: 8px;
}

.page-member-details .org-settings-page .org-storage-skeleton__used {
    width: 140px;
    height: 32px;
    margin-bottom: 10px;
}

.page-member-details .org-settings-page .org-storage-skeleton__line {
    width: 180px;
    height: 12px;
    margin-bottom: 14px;
}

.page-member-details .org-settings-page .org-storage-skeleton__line--short {
    width: 120px;
    margin-top: 12px;
    margin-bottom: 0;
}

.page-member-details .org-settings-page .org-storage-skeleton__bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
}

.page-member-details .org-settings-page .org-storage-breakdown,
.page-member-details .org-settings-page .org-storage-top {
    margin-top: 4px;
}

.page-member-details .org-settings-page .org-storage-breakdown-list {
    display: flex;
    flex-direction: column;
}

.page-member-details .org-settings-page .org-storage-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #111827;
}

.page-member-details .org-settings-page .org-storage-breakdown-row:last-child {
    border-bottom: none;
}

.page-member-details .org-settings-page .org-storage-breakdown-row__label {
    min-width: 0;
}

.page-member-details .org-settings-page .org-storage-breakdown-row__value {
    font-weight: 600;
    white-space: nowrap;
    color: #374151;
}

.page-member-details .org-settings-page .org-storage-details-toggle {
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: none;
    color: #1d6ff2;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.page-member-details .org-settings-page .org-storage-details-toggle:hover,
.page-member-details .org-settings-page .org-storage-retry:hover {
    text-decoration: underline;
}

.page-member-details .org-settings-page .org-storage-retry {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: #1d6ff2;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.page-member-details .org-settings-page .org-storage-retry:hover {
    text-decoration: underline;
}

.page-member-details .org-settings-page .org-storage-details {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
}

.page-member-details .org-settings-page .org-storage-stat {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
}

.page-member-details .org-settings-page .org-storage-stat__label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.page-member-details .org-settings-page .org-storage-stat__value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
}

.page-member-details .org-settings-page .org-storage-meter {
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    margin: 0;
}

.page-member-details .org-settings-page .org-storage-meter__fill {
    height: 100%;
    width: 0;
    background: #1d6ff2;
    border-radius: 999px;
}

.page-member-details .org-settings-page .org-storage-meter__fill.is-warning {
    background: #d97706;
}

.page-member-details .org-settings-page .org-storage-meter__fill.is-critical,
.page-member-details .org-settings-page .org-storage-meter__fill.is-blocked,
.page-member-details .org-settings-page .org-storage-meter__fill.is-full {
    background: #dc2626;
}

.page-member-details .org-settings-page .org-storage-banner.is-warning {
    background: #fffbeb;
    border-color: #fde68a;
}

.page-member-details .org-settings-page .org-storage-banner.is-critical,
.page-member-details .org-settings-page .org-storage-banner.is-blocked,
.page-member-details .org-settings-page .org-storage-banner.is-full {
    background: #fef2f2;
    border-color: #fecaca;
}

.page-member-details .org-settings-page .org-storage-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.page-member-details .org-settings-page .org-storage-projects-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.page-member-details .org-settings-page .org-storage-projects {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-member-details .org-settings-page .org-storage-project-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #111827;
}

.page-member-details .org-settings-page .org-storage-project-row:last-child {
    border-bottom: none;
}

.page-member-details .org-settings-page .org-storage-project-row span:last-child {
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .page-member-details .org-settings-page .org-storage-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.page-member-details .org-settings-page .md-field.md-field--full:has(#orgNameInput) {
    margin-bottom: 20px;
}

.page-member-details .org-settings-page .md-actions {
    margin-top: 0;
    margin-bottom: 32px;
    padding-top: 0;
    padding-bottom: 0;
    gap: 10px;
}

.page-member-details .org-settings-page .md-field.md-field--full:has(#logoPreview) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
    row-gap: 12px;
    margin-bottom: 24px;
}

.page-member-details .org-settings-page .md-field.md-field--full:has(#logoPreview) > .md-label {
    flex: 1 1 100%;
    margin: 0 0 4px 0;
}

.page-member-details .org-settings-page .md-field.md-field--full:has(#logoPreview) > .md-doc-hint {
    flex: 1 1 100%;
    font-size: 13px;
    font-weight: 400;
    color: #6b7280;
    margin: 0 0 12px 0;
}

.page-member-details .org-settings-page .md-field.md-field--full:has(#logoPreview) > .file-upload {
    flex: 0 0 auto;
    margin-top: 0;
    align-items: center;
}

.page-member-details .org-settings-page .md-field.md-field--full:has(#logoPreview) .file-name {
    font-size: 13px;
    color: #9ca3af;
}

.page-member-details .org-settings-page
    .md-field.md-field--full:has(#logoPreview)
    > #logoPreviewWrapper.org-settings-logo-preview {
    flex: 0 0 auto;
    display: flex;
    align-self: center;
    margin-top: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #e5e7eb;
}

.page-member-details .org-settings-page .logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-member-details .org-settings-page .logo-fallback {
    font-size: 18px;
    font-weight: 600;
    color: #555;
}

.page-member-details .org-settings-page .hidden {
    display: none;
}

.page-member-details .org-settings-page .md-label {
    margin: 0 0 6px 0;
}

.page-member-details .org-settings-page .md-field.md-field--full .md-label {
    margin-bottom: 6px;
}

.page-member-details .org-settings-page .md-field.md-field--full:has(#orgNameInput) .md-label {
    margin-bottom: 6px;
}

/* Company Settings — label/input grouping + field-group rhythm */
.page-member-details .org-settings-page
    > .org-settings-section:has(#orgCompanySettingsHeading)
    .md-field.md-field--full:not(:has(#logoPreview)) {
    margin-bottom: 20px;
}

.page-member-details .org-settings-page
    > .org-settings-section:has(#orgCompanySettingsHeading)
    .md-field.md-field--full:not(:has(#logoPreview))
    .md-doc-hint {
    margin: 6px 0 0;
}

.page-member-details .org-settings-page
    > .org-settings-section:has(#orgCompanySettingsHeading)
    .md-actions.org-settings-section__actions {
    margin-top: 4px;
}

.page-member-details .org-settings-page .md-input,
.page-member-details .org-settings-page .md-textarea {
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.page-member-details .org-settings-page .md-input:focus,
.page-member-details .org-settings-page .md-textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
}

.page-member-details .org-settings-page .md-textarea[readonly] {
    background: #f9fafb;
    color: #6b7280;
}

.page-member-details .org-settings-page .md-actions .btn-primary.md-actions__primary {
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 13px;
    box-shadow: none;
    border: none;
    background: #2563eb;
}

.page-member-details .org-settings-page
    .md-actions
    .btn-primary.md-actions__primary:hover:not(:disabled) {
    background: #1d4ed8;
}

.page-member-details .org-settings-page #saveOrgNameBtn:disabled,
.page-member-details .org-settings-page #saveOrgCurrencyBtn:disabled,
.page-member-details .org-settings-page #saveOrgDetailsBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-member-details .org-settings-page .file-upload__btn.btn-secondary {
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 13px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
}

.page-member-details .org-settings-page .file-upload__btn.btn-secondary:hover:not(:disabled) {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

.md-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 20px 24px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.md-card__title {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f4f6;
}

.md-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.md-field--full {
    grid-column: 1 / -1;
}

.page-member-details .email-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}

.page-member-details .email-text {
    color: #111827;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-all;
    min-width: 0;
}

.page-member-details .link-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    padding: 0;
}

.page-member-details .link-btn:hover {
    text-decoration: underline;
}

#addMemberModal .email-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}

#addMemberModal .email-text {
    color: #111827;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-all;
    min-width: 0;
}

#addMemberModal .link-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    padding: 0;
}

#addMemberModal .link-btn:hover {
    text-decoration: underline;
}

#addMemberModal .add-member-email-error {
    margin-top: 6px;
}

.md-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin: 0 0 6px 0;
}

.md-input,
.md-select,
.md-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.45;
    color: #111827;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.md-textarea {
    resize: vertical;
    min-height: 88px;
}

.md-input:focus,
.md-select:focus,
.md-textarea:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.md-input[readonly] {
    background: #f9fafb;
    color: #6b7280;
    cursor: default;
}

.md-doc-hint {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin: 0 0 10px 0;
}

.page-member-details .file-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.page-member-details .file-upload__btn {
    flex-shrink: 0;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
}

.page-member-details .file-name {
    font-size: 13px;
    color: #6b7280;
    word-break: break-word;
    line-height: 1.4;
    min-width: 0;
}

.page-member-details .file-name__link {
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
}

.page-member-details .file-name__link:hover {
    text-decoration: underline;
}

.page-member-details .input-error {
    font-size: 12px;
    color: #e5484d;
    margin-top: 4px;
    line-height: 1.35;
}

.page-member-details .input-error.hidden {
    display: none;
}

.page-member-details .md-input.input-invalid {
    border-color: #e5484d;
}

.page-member-details .md-input.input-invalid:focus {
    border-color: #e5484d;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.15);
}

.md-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.md-file-empty {
    margin-top: 4px;
}

.md-file-existing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.md-file-name {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    word-break: break-word;
}

.md-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.md-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.md-btn--ghost {
    background: #fff;
    border-color: #e5e7eb;
    color: #374151;
}

.md-btn--ghost:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.md-btn--secondary {
    background: #fff;
    border-color: #e5e7eb;
    color: #374151;
}

.md-btn--secondary:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.md-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding-top: 8px;
}

.md-actions .md-actions__primary {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.page-member-details .md-actions .btn-primary:disabled,
.page-member-details .md-actions__primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .page-member-details .member-details-page {
        padding: 24px 16px;
    }

    .page-member-details .member-details-page:has(#orgNameInput) {
        padding: 24px 16px;
    }

    .md-field-grid {
        grid-template-columns: 1fr;
    }
}

.team-members-table .status-complete {
    color: #10b981;
    font-weight: 500;
}

.team-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.team-modal-overlay[hidden] {
    display: none !important;
}

.team-modal-overlay--extended {
    z-index: 10055;
}

#teamChangeEmailModal.team-modal-overlay {
    z-index: 10052;
}

.team-extended-placeholder {
    padding: 8px 20px 20px;
}

.team-extended-placeholder__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
}

.team-modal-footer--split {
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px 20px;
    margin-top: 0;
}

.team-modal-footer--split .team-modal-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.team-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    max-height: min(90vh, 720px);
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    outline: none;
}

/* Same ID-scoped panel sizing as #orgLogoCropModal; slightly wider for a data table.
   Flex column follows designation-manager-panel: header stays put, list scrolls. */
#orgStorageDetailsModal .team-modal-panel {
    max-width: 680px;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: min(90vh, 720px);
}

#orgStorageDetailsModal .team-modal-header {
    flex-shrink: 0;
}

#orgStorageDetailsModal .team-modal-form {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 16px;
}

#orgStorageDetailsModal .org-storage-details-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 10px;
}

#orgStorageDetailsModal .org-storage-projects-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    flex-shrink: 0;
}

#orgStorageDetailsModal .org-storage-drawer-search {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    flex-shrink: 0;
    height: 36px;
}

#orgStorageDetailsModal .org-storage-drawer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}

#orgStorageDetailsModal .org-storage-drawer-count {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
}

#orgStorageDetailsModal .org-storage-drawer-sort {
    margin: 0;
    flex: 0 0 auto;
    width: auto;
}

#orgStorageDetailsModal .org-storage-drawer-sort__select {
    width: auto;
    min-width: 7.5rem;
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
}

#orgStorageDetailsModal .org-storage-drawer-table-wrap {
    flex: 1 1 auto;
    min-height: 160px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#orgStorageDetailsModal .org-storage-drawer-table-wrap.is-loading {
    min-height: 280px;
}

#orgStorageDetailsModal .org-storage-drawer-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

#orgStorageDetailsModal .org-storage-drawer-table th,
#orgStorageDetailsModal .org-storage-drawer-table td {
    padding: 10px 8px;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

#orgStorageDetailsModal .org-storage-drawer-table th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

#orgStorageDetailsModal .org-storage-drawer-table .org-storage-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding-left: 20px;
}

#orgStorageDetailsModal .org-storage-drawer-table tbody tr:hover td {
    background: #f9fafb;
}

#orgStorageDetailsModal .org-storage-drawer-table tbody tr.org-storage-skel-row:hover td {
    background: transparent;
}

#orgStorageDetailsModal .org-storage-skel-line {
    height: 12px;
    max-width: 100%;
    border-radius: 6px;
}

#orgStorageDetailsModal .org-storage-skel-line--name {
    width: 58%;
}

#orgStorageDetailsModal .org-storage-skel-row:nth-child(2) .org-storage-skel-line--name { width: 46%; }
#orgStorageDetailsModal .org-storage-skel-row:nth-child(3) .org-storage-skel-line--name { width: 70%; }
#orgStorageDetailsModal .org-storage-skel-row:nth-child(4) .org-storage-skel-line--name { width: 52%; }
#orgStorageDetailsModal .org-storage-skel-row:nth-child(5) .org-storage-skel-line--name { width: 40%; }
#orgStorageDetailsModal .org-storage-skel-row:nth-child(6) .org-storage-skel-line--name { width: 64%; }
#orgStorageDetailsModal .org-storage-skel-row:nth-child(7) .org-storage-skel-line--name { width: 48%; }

#orgStorageDetailsModal .org-storage-skel-line--bytes {
    width: 4.5rem;
    margin-left: auto;
}

#orgStorageDetailsModal .org-storage-skel-line--share {
    width: 2.75rem;
    margin-left: auto;
}

#orgStorageDetailsModal .org-storage-skel-line--count {
    width: 5.5rem;
    height: 12px;
}

#orgStorageDetailsModal .org-storage-drawer-search:disabled,
#orgStorageDetailsModal .org-storage-drawer-sort__select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background: #f9fafb;
}

#orgStorageDetailsModal .org-storage-drawer-name {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #111827;
}

#orgStorageDetailsModal .org-storage-drawer-bytes {
    font-weight: 600;
    color: #374151;
}

#orgStorageDetailsModal .org-storage-drawer-share {
    font-weight: 400;
    color: #6b7280;
}

#orgStorageDetailsModal .btool-pagination-host {
    flex-shrink: 0;
}

#orgStorageDetailsModal .org-storage-drawer-state {
    padding: 4px 0 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

#orgStorageDetailsModal .org-storage-drawer-error__title,
#orgStorageDetailsModal .org-storage-drawer-empty__title {
    margin: 8px 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

#orgStorageDetailsModal .org-storage-drawer-empty {
    padding: 8px 0;
    flex-shrink: 0;
}

#orgStorageDetailsModal .org-storage-retry {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    color: #1d6ff2;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 720px) {
    #orgStorageDetailsModal .org-storage-drawer-toolbar {
        flex-wrap: wrap;
    }
}

.team-modal-panel input[type="checkbox"],
.team-modal-form input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    max-width: none;
    flex: 0 0 auto;
    padding: 0 !important;
    margin: 0;
    box-sizing: border-box;
    appearance: auto;
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    cursor: pointer;
    pointer-events: auto;
    accent-color: #2563eb;
}

.team-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 12px;
    border-bottom: 1px solid #f1f5f9;
}

.team-modal-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.02em;
}

.team-modal-close {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.team-modal-close:hover {
    color: #111827;
    background: #f1f5f9;
}

.team-modal-form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#memberModal {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.team-modal-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.team-modal-section[hidden] {
    display: none !important;
}

.team-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.team-modal-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 560px) {
    .team-modal-row--split {
        grid-template-columns: 1fr;
    }
}

.team-modal-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.team-modal-legend {
    padding: 0;
    margin: 0 0 8px 0;
}

.team-modal-input {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: #111827;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.team-modal-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.team-modal-input--error {
    border-color: #dc2626 !important;
}

.team-modal-input--error:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.team-modal-field-error {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #dc2626;
}

/* Notion-style inline validation — Add Member email */
#addMemberModal .input-error {
    color: #d92d20;
    font-size: 12px;
    margin-top: 6px;
    font-weight: 500;
    display: none;
    line-height: 1.4;
}

#addMemberModal .input-error.visible {
    display: block;
}

#addMemberModal input.team-modal-input.error {
    border-color: #d92d20 !important;
    background: #fff5f5;
}

#addMemberModal input.team-modal-input.error:focus {
    border-color: #d92d20 !important;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.team-modal-input::placeholder {
    color: #94a3b8;
}

.team-modal-select {
    cursor: pointer;
    appearance: auto;
}

.team-modal-fieldset {
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.module-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    padding: 4px 0;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

.module-select-all__input {
    flex-shrink: 0;
}

.team-module-access-scroll {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 8px 4px 0;
    margin: 0 -4px 0 0;
    border-radius: 8px;
    scrollbar-gutter: stable;
}

.team-module-access-inner {
    display: flex;
    flex-direction: column;
}

.module-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
    color: #374151;
    user-select: none;
}

.module-item label {
    cursor: pointer;
    display: inline;
}

.module-item input[type="checkbox"] {
    flex-shrink: 0;
    pointer-events: auto;
    cursor: pointer;
}

.team-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    padding-top: 4px;
}

.team-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    border: 1.5px solid transparent;
}

.team-modal-btn--secondary {
    background: #fff;
    color: #374151;
    border-color: #e2e8f0;
}

.team-modal-btn--secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.team-modal-btn--primary {
    background: #2563eb;
    color: #fff;
    border-color: transparent;
}

.team-modal-btn--primary:hover {
    background: #1d4ed8;
}

/* Organization settings — square logo crop modal (Cropper.js, settings.html only) */
#orgLogoCropModal .org-settings-crop-panel {
    max-width: 420px;
}

#orgLogoCropModal .org-settings-crop-body {
    padding: 0 20px 16px;
    box-sizing: border-box;
}

#orgLogoCropModal .org-settings-crop-hint {
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.45;
    color: #6b7280;
    font-weight: 400;
}

#orgLogoCropModal .org-settings-crop-stage {
    width: 100%;
    min-height: 280px;
    max-height: min(52vh, 380px);
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

#orgLogoCropModal .org-settings-crop-img {
    display: block;
    max-width: 100%;
}

#orgLogoCropModal .org-settings-crop-footer {
    margin-top: 0;
    padding: 16px 20px 20px;
    border-top: 1px solid #f1f5f9;
}

#orgLogoCropModal .cropper-modal {
    background-color: rgba(17, 24, 39, 0.45);
}

#orgLogoCropModal .cropper-view-box,
#orgLogoCropModal .cropper-face {
    border-radius: 0;
}

/* Hybrid designation: input + dropdown + add modal */
.designation-combobox .designation-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    position: relative;
}

.designation-combobox .designation-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.designation-combobox .add-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 1;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    color: #374151;
    font-family: inherit;
}

.designation-combobox .add-btn:hover {
    background: #f3f4f6;
}

.designation-combobox .dropdown-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    margin-top: 4px;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    z-index: 40;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.designation-combobox .dropdown-list.hidden {
    display: none;
}

.designation-combobox .dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
    color: #111827;
}

.designation-combobox .dropdown-item:hover {
    background: #f3f4f6;
}

.team-modal-overlay.designation-add-modal {
    z-index: 10058;
}

.team-modal-overlay.designation-manager-modal {
    z-index: 10060;
}

/* Manage designations — Notion-style panel */
.team-modal-panel.designation-manager-panel {
    max-width: 420px;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 640px);
}

.designation-manager-panel .team-modal-header {
    margin: 0;
    padding: 18px 20px 16px;
    border-bottom: 1px solid #e8eaed;
    flex-shrink: 0;
}

.designation-manager-panel .team-modal-title {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.03em;
}

.designation-combobox .manage-link {
    align-self: flex-end;
    margin-top: 6px;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    color: #2563eb;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}

.designation-combobox .manage-link:hover {
    text-decoration: underline;
}

.designation-manager-body {
    padding: 16px 20px 4px;
    flex: 1;
    min-height: 0;
    max-height: min(56vh, 400px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.designation-manager-hint {
    margin: 0 0 14px 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}

.designation-manager-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 0 8px;
    margin: 0;
    border: none;
    background: transparent;
    -webkit-overflow-scrolling: touch;
}

.designation-manager-empty {
    margin: 0;
    padding: 20px 8px;
    font-size: 13px;
    color: #9ca3af;
    text-align: center;
    line-height: 1.45;
}

.designation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fafafa;
    font-size: 14px;
    line-height: 1.4;
    border: none;
    transition: background 0.12s ease;
}

.designation-item:hover {
    background: #f9fafb;
}

.designation-item__label {
    min-width: 0;
    flex: 1;
    color: #111827;
    font-weight: 500;
    word-break: break-word;
}

.designation-item__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.designation-item__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    font-family: inherit;
    color: #6b7280;
    transition: background 0.12s ease, color 0.12s ease;
}

.designation-item__icon-btn:hover:not(:disabled) {
    background: #e5e7eb;
    color: #374151;
}

.designation-item__icon-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: transparent;
}

.designation-item__icon-btn--danger {
    color: #9ca3af;
}

.designation-item__icon-btn--danger:hover:not(:disabled) {
    background: #fee2e2;
    color: #b91c1c;
}

.designation-manager-panel .team-modal-footer {
    margin-top: 12px;
    padding: 16px 20px 20px;
    border-top: 1px solid #f1f3f4;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 0;
}

/* Protected delete — muted control; aria-disabled keeps clicks for toast feedback */
.designation-manager-list .designation-item__icon-btn--danger:disabled,
.designation-manager-list .designation-item__icon-btn--danger.is-protected-delete,
.designation-manager-list .designation-item__icon-btn--danger[aria-disabled='true'] {
    opacity: 0.32;
    color: #cbd5e1;
    cursor: not-allowed;
}

.designation-manager-list .designation-item__icon-btn--danger:disabled:hover,
.designation-manager-list .designation-item__icon-btn--danger.is-protected-delete:hover,
.designation-manager-list .designation-item__icon-btn--danger[aria-disabled='true']:hover {
    background: transparent;
    color: #cbd5e1;
}

/* Designation delete confirmation */
.custom-modal.designation-delete-confirm {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10062;
    padding: 20px;
    box-sizing: border-box;
}

.custom-modal.designation-delete-confirm.hidden {
    display: none !important;
}

.custom-modal.designation-delete-confirm:not(.hidden) {
    display: flex;
}

.custom-modal.designation-delete-confirm .modal-box.small {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border: 1px solid #e5e7eb;
}

.custom-modal.designation-delete-confirm .modal-box.small h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.custom-modal.designation-delete-confirm .designation-delete-confirm__text {
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
}

.custom-modal.designation-delete-confirm .modal-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.custom-modal.designation-delete-confirm .btn-secondary {
    background: #fff;
    color: #374151;
    border: 1px solid #e2e8f0;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.custom-modal.designation-delete-confirm .btn-secondary:hover {
    background: #f8fafc;
}

.custom-modal.designation-delete-confirm .btn-danger {
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}

.custom-modal.designation-delete-confirm .btn-danger:hover {
    background: #dc2626;
}

/* Designation rename modal */
.custom-modal.designation-rename-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10063;
    padding: 20px;
    box-sizing: border-box;
}

.custom-modal.designation-rename-modal.hidden {
    display: none !important;
}

.custom-modal.designation-rename-modal:not(.hidden) {
    display: flex;
}

.custom-modal.designation-rename-modal .modal-box.small {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border: 1px solid #e5e7eb;
}

.custom-modal.designation-rename-modal .modal-box.small h3 {
    margin: 0 0 0 0;
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
}

.custom-modal.designation-rename-modal .input-field {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 14px;
    font-family: inherit;
}

.custom-modal.designation-rename-modal .input-field:focus {
    outline: none;
    border-color: #2563eb;
}

.custom-modal.designation-rename-modal .modal-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.custom-modal.designation-rename-modal .btn-secondary {
    background: #fff;
    color: #374151;
    border: 1px solid #e2e8f0;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.custom-modal.designation-rename-modal .btn-secondary:hover {
    background: #f8fafc;
}

.custom-modal.designation-rename-modal .btn-primary {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}

.custom-modal.designation-rename-modal .btn-primary:hover {
    background: #1d4ed8;
}