/* Microsoft 365 Admin Center & Azure Portal table and CRUD styles for Contacts. */
.contacts-page { display: flex; flex-direction: column; min-height: 100%; }

/* M365 / Azure Command Bar */
.fluent-command-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 6px 0; border-top: 1px solid #edebe9; border-bottom: 1px solid #edebe9; margin-bottom: 14px; background: #fff; }
.command-bar-primary, .command-bar-secondary { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.cmd-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #242424; font-size: 13px; font-weight: 400; white-space: nowrap; }
.cmd-btn svg { width: 16px; height: 16px; color: #0078d4; }
.cmd-btn .cmd-chevron { width: 12px; height: 12px; color: #605e5c; margin-left: 2px; }
.cmd-btn:hover:not(:disabled) { background: #f3f2f1; }
.cmd-btn:disabled { color: #a19f9d; cursor: not-allowed; }
.cmd-btn:disabled svg { color: #a19f9d; }
.cmd-btn-primary { font-weight: 600; }
.cmd-divider { width: 1px; height: 18px; background: #e1dfdd; margin: 0 4px; }

/* Command Bar Export Dropdown */
.cmd-dropdown { position: relative; display: inline-flex; }
.cmd-dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 190px; background: #fff; border: 1px solid #d2d0ce; border-radius: 4px; box-shadow: 0 6px 18px #0000001f; padding: 4px 0; z-index: 30; }
.cmd-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 7px 14px; border: 0; background: transparent; color: #242424; font-size: 13px; text-align: left; white-space: nowrap; }
.cmd-dropdown-item:hover { background: #f3f2f1; color: #0078d4; }
.cmd-dropdown-ext { font-size: 11px; font-weight: 600; color: #605e5c; background: #f3f2f1; padding: 1px 6px; border-radius: 3px; }

/* Search & Pill Filter Bar */
.contacts-filter-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.filter-pills-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.filter-label { font-size: 12px; font-weight: 600; color: #323130; margin-right: 4px; }
.filter-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border: 1px solid #d1d1d1; border-radius: 13px; background: #fff; color: #323130; font-size: 12px; white-space: nowrap; }
.filter-pill:hover { background: #f3f2f1; border-color: #8a8886; }
.filter-pill.is-active { background: #eff6fc; border-color: #0078d4; color: #005a9e; font-weight: 600; }
.filter-pill-count { font-size: 11px; color: inherit; opacity: .85; }
.contacts-search-group { display: flex; align-items: center; gap: 8px; }
.fluent-search-box { position: relative; display: flex; align-items: center; width: 250px; }
.fluent-search-box svg { position: absolute; left: 9px; width: 15px; height: 15px; color: #605e5c; pointer-events: none; }
.fluent-search-box input { width: 100%; height: 30px; padding: 0 28px 0 30px; border: 1px solid #8a8886; border-radius: 3px; font-size: 13px; color: #242424; background: #fff; }
.fluent-search-box input:focus { outline: 0; border-color: #0078d4; box-shadow: inset 0 0 0 1px #0078d4; }
.search-clear-btn { position: absolute; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; border: 0; background: transparent; color: #605e5c; border-radius: 2px; }
.search-clear-btn:hover { background: #f3f2f1; }
.search-clear-btn svg { position: static; width: 13px; height: 13px; pointer-events: auto; }
.fluent-status-select { height: 30px; padding: 0 24px 0 9px; border: 1px solid #8a8886; border-radius: 3px; font-size: 12px; color: #323130; background: #fff; }

.contacts-meta-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: #605e5c; margin-bottom: 6px; min-height: 22px; }
.contacts-toast { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 3px; background: #dff6dd; border: 1px solid #a7e3a5; color: #0f700f; font-size: 12px; font-weight: 600; }

/* Fluent Data Grid (M365 + Azure Portal style) */
.fluent-grid-wrap { overflow-x: auto; border-top: 1px solid #edebe9; background: #fff; }
.fluent-grid { width: 100%; border-collapse: collapse; font-size: 13px; color: #242424; }
.fluent-grid th, .fluent-grid td { padding: 8px 12px; border-bottom: 1px solid #edebe9; height: 42px; vertical-align: middle; text-align: left; white-space: nowrap; }
.fluent-grid thead th { font-size: 12px; font-weight: 600; color: #323130; height: 36px; background: #fff; border-bottom: 1px solid #d2d0ce; white-space: nowrap; user-select: none; }
.fluent-grid tbody tr:hover { background: #f3f2f1; }
.fluent-grid tbody tr.is-selected { background: #eff6fc; }
.fluent-grid tbody tr.is-selected:hover { background: #deecf9; }
.fluent-grid .col-check { width: 38px; padding: 0 4px 0 12px; text-align: center; }
.fluent-check { width: 16px; height: 16px; accent-color: #0078d4; cursor: pointer; vertical-align: middle; }
.fluent-grid .col-rank { text-align: center; }
.sort-header-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 600; color: #323130; }
.sort-header-btn:hover { color: #0078d4; }
.sort-indicator { font-size: 11px; color: #0078d4; }

/* Identity Cell */
.party-identity-cell { display: flex; align-items: center; gap: 10px; }
.party-name-btn { padding: 0; border: 0; background: transparent; color: #0078d4; font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; }
.party-name-btn:hover { color: #005a9e; text-decoration: underline; }

/* Email Cell with Copy Button */
.upn-cell { display: flex; align-items: center; gap: 6px; color: #323130; font-size: 12px; white-space: nowrap; }
.copy-inline-btn { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 2px; background: transparent; color: #0078d4; opacity: .75; }
.copy-inline-btn:hover { background: #e1dfdd; opacity: 1; }
.copy-inline-btn svg { width: 14px; height: 14px; }

/* Type, Scope, User Link, Status & Rank Badges */
.contact-type-badge, .contact-scope-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; background: #f3f2f1; color: #323130; border: 1px solid #e1dfdd; white-space: nowrap; }
.contact-type-badge.type-Organization { background: #eff6fc; color: #005a9e; border-color: #c7e0f4; }
.contact-type-badge.type-Person { background: #f3f0f9; color: #5c2d91; border-color: #dcd3ed; }

.contact-scope-badge.scope-Internal { background: #e8f5f5; color: #02686b; border-color: #b5e0e1; }
.contact-scope-badge.scope-External { background: #f3f2f1; color: #323130; border-color: #d2d0ce; }

.user-link-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.user-link-dot { width: 7px; height: 7px; border-radius: 50%; background: #c8c6c4; }
.user-link-badge.is-linked { color: #005a9e; font-weight: 600; }
.user-link-badge.is-linked .user-link-dot { background: #0078d4; }
.user-link-badge.is-unlinked { color: #8a8886; }

.signin-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #323130; white-space: nowrap; }
.signin-dot { width: 8px; height: 8px; border-radius: 50%; background: #8a8886; }
.signin-dot.status-Active { background: #239b56; }
.signin-dot.status-Onboarding { background: #ffb900; }
.signin-dot.status-Inactive { background: #8a8886; }

.rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 600; }
.rank-badge.is-zero { color: #a19f9d; font-weight: 400; }
.rank-badge.rank-customer { background: #eff6fc; color: #005a9e; border: 1px solid #c7e0f4; }
.rank-badge.rank-vendor { background: #fff4ce; color: #795600; border: 1px solid #f2d57e; }
.rank-badge.rank-partner { background: #f3f0f9; color: #5c2d91; border: 1px solid #dcd3ed; }

/* Inline Row Actions */
.row-actions-group { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.action-link-btn { padding: 0; border: 0; background: transparent; color: #0078d4; font-size: 12px; font-weight: 500; }
.action-link-btn:hover { text-decoration: underline; color: #005a9e; }
.action-link-btn.is-danger { color: #a4262c; }
.action-link-btn.is-danger:hover { color: #8e1f24; }
.action-sep { color: #c8c6c4; font-size: 12px; }

/* Slide-over Drawer (M365 / Azure Blade) for Create / Edit / View / Delete Confirmation */
.blade-backdrop { position: fixed; inset: var(--suite-height) 0 0; background: #00000040; z-index: 45; }
.fluent-blade { position: fixed; top: var(--suite-height); right: 0; bottom: 0; width: 460px; max-width: 100vw; background: #fff; border-left: 1px solid #d2d0ce; box-shadow: -6px 0 24px #00000024; z-index: 46; display: flex; flex-direction: column; }
.blade-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid #edebe9; }
.blade-header h2 { font-size: 20px; font-weight: 600; margin: 0; color: #242424; }
.blade-subtitle { font-size: 12px; color: #605e5c; margin: 3px 0 0; }
.blade-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.blade-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 24px; border-top: 1px solid #edebe9; background: #fafafa; }
.blade-footer-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.fluent-field { margin-bottom: 16px; }
.fluent-field label { display: block; font-size: 13px; font-weight: 600; color: #323130; margin-bottom: 5px; }
.fluent-field .req { color: #a4262c; }
.fluent-input, .fluent-select { width: 100%; min-height: 32px; padding: 5px 10px; border: 1px solid #8a8886; border-radius: 3px; font-size: 13px; color: #242424; background: #fff; }
.fluent-input:focus, .fluent-select:focus { outline: 0; border-color: #0078d4; box-shadow: inset 0 0 0 1px #0078d4; }
.fluent-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fluent-field-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.blade-detail-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: #fafafa; border: 1px solid #edebe9; border-radius: 4px; margin-bottom: 18px; }
.blade-detail-list { margin: 0; padding: 0; }
.blade-detail-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f3f2f1; font-size: 13px; }
.blade-detail-list dt { color: #605e5c; font-weight: 400; }
.blade-detail-list dd { margin: 0; font-weight: 600; color: #242424; text-align: right; }

/* Delete Confirmation in Right Off-Canvas Blade */
.blade-danger-box { padding: 14px 16px; background: #fdf3f4; border: 1px solid #f1bbbc; border-left: 4px solid #a4262c; border-radius: 4px; margin-bottom: 16px; color: #323130; font-size: 13px; }
.blade-danger-box strong { display: block; color: #a4262c; margin-bottom: 4px; font-size: 13px; }
.blade-danger-box p { margin: 0; line-height: 1.45; }
.blade-delete-list { display: flex; flex-direction: column; gap: 8px; }
.blade-delete-item { display: flex; flex-direction: column; gap: 6px; padding: 11px 14px; border: 1px solid #edebe9; border-radius: 4px; background: #fafafa; }
.blade-delete-main { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.blade-delete-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.btn-danger-fluent { background: #a4262c; color: #fff; border: 1px solid #a4262c; }
.btn-danger-fluent:hover { background: #8e1f24; color: #fff; }

@media (max-width: 767px) {
  .fluent-search-box { width: 100%; }
  .contacts-search-group { width: 100%; }
  .fluent-field-row, .fluent-field-row-3 { grid-template-columns: 1fr; }
}