/* VeroTrust - Home page tab bar, aligned to the "VeroTrust OpenUI5" mock.
   Link AFTER verotrust-theme.css (and chat.css):
     <link rel="stylesheet" href="css/vt-tabs-inline.css" />
   All rules scoped to .vtHomeTabs - detail-page tabs are untouched.
   Home.view.xml: IconTabBar class="vtProjectTabBar vtHomeTabs"
   headerMode="Inline", each IconTabFilter has icon + count. */

/* Outer panel: ONE rounded card. White tab-strip header, grey body. */
.vtHomeTabs.vtProjectTabBar.sapMITB {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow:
    0 1px 3px rgba(27, 45, 62, 0.1),
    0 1px 2px rgba(27, 45, 62, 0.06) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
}

/* Tab strip header: WHITE, thin separator underneath */
.vtHomeTabs.vtProjectTabBar .sapMITBHead {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e9ee !important;
  padding: 4px 16px 0 16px !important;
  min-height: 0 !important;
}

/* Inline tabs keep their small icon + label + (count) - force row layout,
   auto height (theme's detail-tab rule pins 90px column with !important). */
.vtHomeTabs.vtProjectTabBar .sapMITBFilter {
  flex-direction: row !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 18px 0 18px !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  margin-bottom: 0 !important;
}
.vtHomeTabs.vtProjectTabBar .sapMITBText {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #6a7a8a !important;
}
.vtHomeTabs.vtProjectTabBar .sapMITBFilter .sapUiIcon {
  color: #6a7a8a !important;
  font-size: 1.05rem !important;
}
/* Selected: blue label + icon + underline */
.vtHomeTabs.vtProjectTabBar .sapMITBFilter.sapMITBSelected .sapMITBText,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter.sapMITBSelected .sapUiIcon {
  color: #0070f2 !important;
}
.vtHomeTabs.vtProjectTabBar .sapMITBFilter:hover .sapMITBText {
  color: #1d2d3e !important;
}

/* Kill the UI5 keyboard-focus rectangle (filter + inner wrapper/text) */
.vtHomeTabs.vtProjectTabBar .sapMITBFilter,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter:focus,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter:focus-visible,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter .sapMITBFilterWrapper,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter .sapMITBText,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter:focus .sapMITBFilterWrapper,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter:focus-visible .sapMITBFilterWrapper,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter:focus .sapMITBText,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter:focus-visible .sapMITBText {
  outline: none !important;
  box-shadow: none !important;
}
.vtHomeTabs.vtProjectTabBar .sapMITBFilter::before,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter::after,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter:focus::before,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter:focus::after,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter:focus-visible::before,
.vtHomeTabs.vtProjectTabBar .sapMITBFilter:focus-visible::after,
.vtHomeTabs.vtProjectTabBar .sapMITBFilterWrapper::before,
.vtHomeTabs.vtProjectTabBar .sapMITBFilterWrapper::after,
.vtHomeTabs.vtProjectTabBar
  .sapMITBFilter:focus-visible
  .sapMITBFilterWrapper::before,
.vtHomeTabs.vtProjectTabBar
  .sapMITBFilter:focus-visible
  .sapMITBFilterWrapper::after {
  display: none !important;
  content: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Body/content area: LIGHT GREY (contrasts the white header + white list) */
.vtHomeTabs .sapMITBContainerContent,
.vtHomeTabs .sapMITBContent {
  background: #f4f6f9 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 20px !important;
}

/* Header row inside the body: title/subtitle left, search+button right */
.vtHomeTabs .vtTabHeader {
  width: 100% !important;
  margin: 0 0 18px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}
.vtHomeTabs .vtTabHeader .vtTabHeaderText {
  flex: 0 0 auto !important;
}
.vtHomeTabs .vtTabHeader .vtPageTitle {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1d2d3e !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.vtHomeTabs .vtTabHeader .vtPageSubtitle {
  font-size: 0.9rem !important;
  color: #6a7a8a !important;
  margin-top: 6px !important;
}
.vtHomeTabs .vtProjectsToolbar {
  gap: 12px !important;
  margin: 0 !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

/* Search field height: match the login-page inputs (2.75rem).
   OpenUI5 1.120 SearchField DOM is .sapMSF > .sapMSFF (form) > .sapMSFI (input);
   the theme only targets .sapMSearchFieldInner (which doesn't exist here), so the
   inner box stays at its default 36px. Size the REAL elements. */
.vtHomeTabs .vtProjectsSearch.sapMSF,
.vtHomeTabs .vtProjectsSearch .sapMSFF,
.vtHomeTabs .vtProjectsSearch .sapMSFI {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  box-sizing: border-box !important;
}

/* Search field button: match height (square button) */
.vtHomeTabs .vtProjectsSearch .sapMSFB {
  width: 2.75rem !important;
  height: 2.75rem !important;
  line-height: 2.75rem !important;
}

/* Inner list card: WHITE, rounded, subtle shadow */
.vtHomeTabs .vtProjectsCard {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(27, 45, 62, 0.06) !important;
  border: 1px solid #edf0f3 !important;
  padding: 4px 4px !important;
  margin: 0 !important;
}

/* TEAM USERS & AUDIT LOG page styling
   Page layout: padding, header, and table card styling. */

/* Page container with consistent padding */
.vtUsersPage,
.vtAuditLogPage {
  padding: 28px 32px !important;
  gap: 0 !important;
}

/* Header: title + subtitle left, action button right */
.vtUsersHeader,
.vtAuditLogHeader {
  width: 100% !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.vtUsersHeader .vtHeaderText,
.vtAuditLogHeader .vtHeaderText {
  flex: 1 1 auto !important;
}

.vtPageTitle {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1d2d3e !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.vtPageSubtitle {
  font-size: 0.9rem !important;
  color: #6a7a8a !important;
  margin-top: 6px !important;
}

/* Table/card container: white, rounded, shadow */
.vtUsersCard,
.vtAuditLogCard {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow:
    0 1px 3px rgba(27, 45, 62, 0.1),
    0 1px 2px rgba(27, 45, 62, 0.06) !important;
  border: 1px solid #edf0f3 !important;
  overflow: hidden !important;
}

/* Super Admin tenants table: enhanced styling */
#tenantsCard.vtAppCard {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  /* padding: 24px 28px !important; */
  margin: 16px !important;
}

/* Table: subtle styling without borders */
.vtUsersCard .sapMTable,
.vtAuditLogCard .sapMTable {
  border-collapse: collapse !important;
}

/* Table header: dark text, no background */
.vtUsersCard .sapMListTblHeaderCell,
.vtAuditLogCard .sapMListTblHeaderCell {
  background: transparent !important;
  color: #1d2d3e !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 14px 10px !important;
  border-bottom: 1px solid #e5e9ee !important;
}

/* Table rows: light hover state, subtle separator */
.vtUsersCard .sapMListTblRow,
.vtAuditLogCard .sapMListTblRow {
  border-bottom: 1px solid #f4f6f9 !important;
}

.vtUsersCard .sapMListTblRow:hover,
.vtAuditLogCard .sapMListTblRow:hover {
  background-color: #f9fafc !important;
}

.vtUsersCard .sapMListTblRow > .sapMListTblCell,
.vtAuditLogCard .sapMListTblRow > .sapMListTblCell {
  padding: 12px 10px !important;
  vertical-align: middle !important;
}

/* Name cell: avatar + name layout */
.vtUsersCard .vtCellName {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Avatar: gradient background, white initials */
.vtAvatar {
  background: linear-gradient(135deg, #0070f2 0%, #36a420 100%) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vtAvatar .sapMText {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Large avatar (header) */
.vtAvatar:not(.vtAvatarSm) {
  width: 40px !important;
  height: 40px !important;
  font-size: 0.9rem !important;
}

/* Small avatar (table rows) */
.vtAvatarSm {
  width: 34px !important;
  height: 34px !important;
  font-size: 0.75rem !important;
  flex-shrink: 0 !important;
}

/* Name text styling */
.vtCellName .sapMText {
  color: #1d2d3e !important;
  font-weight: 600 !important;
}

/* Status badges: inherit default styling or color per state */
.vtUsersCard .sapMObjectStatus {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.vtUsersCard .sapMObjectStatus .sapUiIcon {
  font-size: 0.85rem !important;
}

/* Role indicator: blue pill-style badge */
.vtRoleTag {
  background: #e8f1ff !important;
  color: #0070f2 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* Action button: compact, clickable */
.vtActionButton.sapMBtn {
  height: 2rem !important;
  width: 2rem !important;
  min-width: 2rem !important;
  padding: 0 !important;
  background: #f0f3f7 !important;
  border: 1px solid #e5e9ee !important;
  border-radius: 6px !important;
}

.vtActionButton.sapMBtn .sapUiIcon {
  color: #0070f2 !important;
  font-size: 1rem !important;
}

.vtActionButton.sapMBtn:hover {
  background: #e8f1ff !important;
  border-color: #0070f2 !important;
}

.vtActionButton.sapMBtn:active {
  background: #d6e5ff !important;
}

/* No data state: center text, light grey */
.vtUsersCard .sapMLIBContent,
.vtAuditLogCard .sapMLIBContent {
  color: #6a7a8a !important;
  text-align: center !important;
  /* padding: 40px 20px !important; */
}

/* PROJECT DETAIL & PARTICIPANT DETAIL - grey tab-content container behind white cards
   .vtOverviewCard (chat.css) is the white card; its container .vtTabContent
   (verotrust-theme.css line 1401) is ALSO white - a white-on-white card, so no
   contrast. Make the container grey like the mock / home page. Higher
   specificity than the theme's .vtTabContent.sapMVBox, so this wins. The
   Messages/Documents tabs use a full-bleed white split panel, unaffected. */
.vtProjectContentCard .vtTabContent.sapMVBox {
  background-color: #f0f2f5 !important;
}

/* Give the white overview card breathing room inside the grey container */
.vtProjectContentCard .vtTabContent .vtOverviewCard.sapMVBox {
  margin: 4px 0 8px 0 !important;
}

/* DOCUMENTS / MESSAGES - grey participants sidebar (like the mock rail)
   The split-layout participant list was white; the mock uses a light-grey rail.
   Higher specificity than theme's .vtMessagesParticipantList so this wins. */
.vtMessagesSplitLayout .vtMessagesParticipantList {
  background-color: #fafbfd !important;
}

/* Round the Messages/Documents split-layout card (Overview's card is already
   rounded; this makes them consistent) and float it on the grey tab area. */
.vtProjectContentCard .vtMessagesSplitLayout {
  border-radius: 12px !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 2px 8px rgba(20, 35, 63, 0.07) !important;
  overflow: hidden !important;
  margin: 4px 0 8px 0 !important;
}

/* ADMIN PAGES ENHANCEMENT */

/* Admin page header styling - more prominent */
.vtUsersPage .sapMBar-CTX {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e9ee !important;
}

/* Message strip styling - info boxes */
.vtUsersPage .sapMMessageStrip {
  margin: 0 0 24px 0 !important;
  border-radius: 8px !important;
  border-left: 4px solid #0070f2 !important;
}

.vtUsersPage .sapMMessageStripIcon {
  color: #0070f2 !important;
}

/* Table styling improvements */
.vtUsersCard .sapMTable {
  margin: 0 !important;
}

.vtUsersCard .sapMListTblHeaderCell {
  background: #f5f7fa !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 0.8rem !important;
  color: #4a5a6a !important;
}

.vtUsersCard .sapMListTblRow {
  transition: background-color 0.15s ease !important;
}

.vtUsersCard .sapMListTblRow:hover {
  background-color: #f9fafc !important;
}

.vtUsersCard .sapMListTblRow > .sapMListTblCell {
  padding: 16px 12px !important;
  border-bottom: 1px solid #eef2f7 !important;
}

/* Action button improvements */
.vtActionGroup {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.vtActionButton.sapMBtn {
  height: 2.25rem !important;
  width: 2.25rem !important;
  min-width: 2.25rem !important;
  padding: 0 !important;
  background: #f5f7fa !important;
  border: 1px solid #e5e9ee !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.vtActionButton.sapMBtn .sapUiIcon {
  color: #6a7a8a !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
}

.vtActionButton.sapMBtn:hover {
  background: #e8f1ff !important;
  border-color: #0070f2 !important;
  box-shadow: 0 2px 6px rgba(0, 112, 242, 0.12) !important;
}

.vtActionButton.sapMBtn:hover .sapUiIcon {
  color: #0070f2 !important;
}

.vtActionButton.sapMBtn:active {
  background: #d6e5ff !important;
  box-shadow: 0 1px 3px rgba(0, 112, 242, 0.2) !important;
}

.vtActionButton.sapMBtn:disabled,
.vtActionButton.sapMBtn[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Status badge styling */
.vtUsersCard .sapMObjectStatus {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.85rem !important;
}

.vtUsersCard .sapMObjectStatus .sapUiIcon {
  font-size: 0.8rem !important;
}

/* Tenant list formatting */
.vtUsersCard .vtCellSub {
  font-size: 0.85rem !important;
  color: #6a7a8a !important;
  line-height: 1.4 !important;
}

/* Empty state styling */
.vtUsersCard .sapMLIBContent {
  /* padding: 48px 24px !important; */
  color: #8a97a6 !important;
  font-size: 0.95rem !important;
}

/* ===== FORM DIALOGS (New Tenant / Add Admin / Add User / Support User) =====
   Modern dialog styling with custom header, grouped fields, and improved spacing. */

/* Dialog container */
.vtFormDialog {
  border-radius: 12px !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.vtFormDialog .sapMDialogScroll,
.vtFormDialog .sapMDialogScrollCont {
  background: #ffffff !important;
  border-radius: 12px !important;
}

.vtFormDialog .sapMDialogBg {
  border-radius: 12px !important;
  background: #ffffff !important;
}

/* Dialog body with padding and layout */
.vtFormDialog .vtDialogBody {
  padding: 32px 28px 20px 28px !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Custom header with icon badge, title, subtitle */
.vtDialogHead {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding-bottom: 22px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid #eef2f7 !important;
}

.vtDialogIco {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #e8f1ff 0%, #eaf7f0 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  box-shadow: 0 2px 8px rgba(0, 112, 242, 0.08) !important;
}

.vtDialogIco .sapUiIcon {
  color: #0070f2 !important;
  font-size: 1.4rem !important;
}

.vtDialogHeadText {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
}

.vtDialogHeadText .sapMTitle {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #1d2d3e !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.vtDialogHeadText .sapMText {
  font-size: 0.85rem !important;
  color: #8a97a6 !important;
  font-weight: 500 !important;
}

/* Form field styling */
.vtFormDialog .vtField {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
}

.vtFormDialog .vtField .sapMLabel {
  font-weight: 600 !important;
  color: #45525f !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}

.vtFormDialog .vtField .sapMInputBase {
  width: 100% !important;
  height: 2.5rem !important;
  border-radius: 8px !important;
  border: 1px solid #e5e9ee !important;
  background: #ffffff !important;
  padding: 0 12px !important;
  font-size: 0.95rem !important;
  transition: all 0.2s ease !important;
}

.vtFormDialog .vtField .sapMInputBase:focus {
  border-color: #0070f2 !important;
  box-shadow: 0 0 0 3px rgba(0, 112, 242, 0.1) !important;
}

.vtFormDialog .vtField .sapMMultiComboBox {
  width: 100% !important;
  height: 2.5rem !important;
}

.vtFormDialog .vtField .sapMMultiComboBox .sapMMultiComboBoxInput {
  border-radius: 8px !important;
  border: 1px solid #e5e9ee !important;
  height: 2.5rem !important;
}

/* Checkbox styling */
.vtFormDialog .sapMCB {
  margin-top: 8px !important;
}

.vtFormDialog .sapMCB .sapMCbLabel {
  font-weight: 500 !important;
  color: #45525f !important;
  font-size: 0.9rem !important;
}

/* Tenant context pill */
.vtFormDialog .vtTenantPill {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  margin-bottom: 18px !important;
  background: linear-gradient(135deg, #f5f9ff 0%, #f8faf7 100%) !important;
  border: 1px solid #e5e9ee !important;
  border-radius: 8px !important;
  border-left: 3px solid #0070f2 !important;
}

.vtFormDialog .vtTenantPill .sapUiIcon {
  color: #0070f2 !important;
  font-size: 1rem !important;
}

.vtFormDialog .vtTenantPill .sapMText {
  font-weight: 600 !important;
  color: #45525f !important;
  font-family: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace !important;
  font-size: 0.85rem !important;
}

/* Error message styling */
.vtFormDialog .sapMMessageStrip {
  margin-bottom: 16px !important;
  border-radius: 8px !important;
  border-left: 4px solid #e53935 !important;
  background: #ffebee !important;
}

.vtFormDialog .sapMMessageStripIcon {
  color: #e53935 !important;
}

.vtFormDialog .sapMMessageStripText {
  color: #c62828 !important;
}

/* Dialog footer / button bar */
.vtFormDialog .sapMDialogFooter {
  background: #ffffff !important;
  border-top: 1px solid #eef2f7 !important;
  padding: 16px 28px !important;
  gap: 12px !important;
  display: flex !important;
  justify-content: flex-end !important;
}

.vtFormDialog .sapMBarPH {
  background: transparent !important;
  border: none !important;
}

/* Footer buttons */
.vtFormDialog .sapMDialogFooter .sapMBtn,
.vtFormDialog .sapMBarPH .sapMBtn {
  height: 2.5rem !important;
  padding: 0 24px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
}

/* Emphasized button (Create/Save) */
.vtFormDialog .sapMBtn.sapMBtnEmphasized {
  background: linear-gradient(135deg, #0070f2 0%, #0055cc 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 112, 242, 0.25) !important;
}

.vtFormDialog .sapMBtn.sapMBtnEmphasized:hover {
  background: linear-gradient(135deg, #0062dd 0%, #004bb3 100%) !important;
  box-shadow: 0 6px 16px rgba(0, 112, 242, 0.35) !important;
}

.vtFormDialog .sapMBtn.sapMBtnEmphasized:active {
  background: linear-gradient(135deg, #0055cc 0%, #0044a0 100%) !important;
}

/* Cancel button */
.vtFormDialog .sapMBtn.sapMBtnDefault {
  background: #f5f7fa !important;
  border: 1px solid #e5e9ee !important;
  color: #45525f !important;
}

.vtFormDialog .sapMBtn.sapMBtnDefault:hover {
  background: #eef2f7 !important;
  border-color: #d5dfe8 !important;
}

.vtFormDialog .sapMBtn.sapMBtnDefault:active {
  background: #e8ecf3 !important;
}

/* EXPANDABLE TENANT MEMBERS ===== */

/* Tenant expand/collapse icon */
.vtTenantExpandIcon {
  min-width: 3rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Expanded tenant row highlighting */
.vtTenantRowExpanded {
  background: #f9fafc !important;
}

/* Expanded members section row */
.vtTenantMembersRow {
  background: #f9fafc !important;
  border-top: 1px solid #eef2f7 !important;
  border-bottom: 1px solid #eef2f7 !important;
}

.vtTenantMembersRow > .sapMListTblCell {
  padding: 0 !important;
}

/* Members container with proper spacing */
.vtMembersContainer {
  width: 100% !important;
  gap: 20px !important;
  padding: 16px 20px !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Individual member section (admins or users) */
.vtMembersSection {
  gap: 12px !important;
  display: flex !important;
  flex-direction: column !important;
}

.vtMembersSection .sapMList {
  width: 100% !important;
}

/* Section title */
.vtMembersTitle {
  font-weight: 600 !important;
  color: #45525f !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}

/* Members list styling */
.vtMembersList.sapMList {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.vtMembersList .sapMListTblRow {
  border-bottom: 1px solid #f0f3f7 !important;
  background: transparent !important;
}

.vtMembersList .sapMListTblRow:hover {
  background: #ffffff !important;
  border-bottom-color: #eef2f7 !important;
}

.vtMembersList .sapMListTblRow > .sapMListTblCell {
  padding: 10px 0 10px 0 !important;
}

/* Member item text */
.vtMembersList .sapMListTblCell .sapMText,
.vtMembersList .sapMListTblCell .sapMLIBTitle {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #1d2d3e !important;
}

.vtMembersList .sapMListTblCell .sapMLIBDesc {
  font-size: 0.85rem !important;
  color: #8a97a6 !important;
  margin-top: 2px !important;
}

/* Tenant details card (shown after clicking a tenant) */
.vtTenantDetailsCard {
  margin-top: 5px !important;
  padding: 24px 28px !important;
}

/* SUPER-ADMIN member detail rows (avatar row cards, left-aligned) */
.vtMembersHead {
  gap: 8px !important;
  margin-bottom: 4px !important;
}

.vtMembersHead .vtMembersHeadIco {
  color: #0070f2 !important;
  font-size: 1rem !important;
}

.vtMembersHead .vtMembersTitle {
  font-weight: 700 !important;
  color: #1d2d3e !important;
  font-size: 0.95rem !important;
}

.vtMemberList {
  list-style: none !important;
}

.vtMemberList.sapMList {
  background: transparent !important;
  border: none !important;
}

.vtMemberList .sapMLIB {
  padding: 0 !important;
  border-bottom: 1px solid #f0f3f7 !important;
  background: transparent !important;
}

.vtMemberList .sapMLIB:last-child {
  border-bottom: none !important;
}

.vtMemberRow .vtMemberRowInner {
  gap: 12px !important;
  padding: 10px 8px !important;
  width: 100% !important;
}

.vtMemberRow .vtAvatarSm {
  width: 34px !important;
  height: 34px !important;
  flex: none !important;
}

.vtMemberRow .vtAvatar.sapMFlexBox,
.vtMemberRow .vtAvatar.sapMVBox {
  background: linear-gradient(135deg, #0070f2 0%, #36a420 100%) !important;
}

.vtMemberRow .vtAvatar .sapMText {
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
}

.vtMemberRow .vtMemberMain {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 1px !important;
  align-items: flex-start !important;
  text-align: left !important;
}
.vtMemberRow .vtMemberMain .sapMText,
.vtMemberRow .vtMemberMain .sapMText .sapMTextMaxWidth { text-align: left !important; width: 100% !important; }
.vtMemberRow .vtMemberRowInner { justify-content: flex-start !important; }

/* Tenant members card header */
.vtMembersCardHead { gap: 12px !important; padding: 4px 4px 14px 4px !important; margin-bottom: 8px !important; border-bottom: 1px solid #eef2f7 !important; }
.vtMembersCardHead .vtMembersCardHeadIco { color: #0070f2 !important; font-size: 1.4rem !important; }
.vtMembersCardTitle { font-weight: 700 !important; color: #0a2540 !important; font-size: 1.1rem !important; }
.vtMembersCardSub { font-size: 0.82rem !important; color: #8a97a6 !important; }
/* Section headers tinted: Admins (blue), Users (teal) */
.vtMembersSection .vtMembersHead .vtMembersTitle { font-weight: 700 !important; font-size: 0.95rem !important; color: #0070f2 !important; }
.vtMembersSection .vtMembersHead .vtMembersHeadIco { color: #0070f2 !important; }
.vtMembersSection ~ .vtMembersSection .vtMembersHead .vtMembersTitle { color: #148f6e !important; }
.vtMembersSection ~ .vtMembersSection .vtMembersHead .vtMembersHeadIco { color: #148f6e !important; }

.vtMemberRow .vtCellStrong {
  font-weight: 600 !important;
  color: #1d2d3e !important;
  font-size: 0.9rem !important;
}

.vtMemberRow .vtCellSub {
  font-size: 0.82rem !important;
  color: #8a97a6 !important;
}

/* Avatar circle must not collapse; pill sits flush right, never over the email */
.vtMemberRow .vtAvatar.vtAvatarSm {
  min-width: 34px !important;
  border-radius: 50% !important;
}

.vtMemberRow .vtMemberRowInner {
  justify-content: flex-start !important;
}

.vtMemberRow .vtMemberRowInner > .vtRoleTag {
  flex: none !important;
  margin-left: 12px !important;
}

.vtMembersSection {
  padding: 0 4px !important;
}

/* TENANT CHIP - Header display with building icon + name */
.vtTenantChip {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  margin: 0 12px !important;
  background: #f0f3f7 !important;
  border: 1px solid #d5dfe8 !important;
  border-radius: 20px !important;
}

.vtTenantChip .sapUiIcon {
  color: #4a5a6a !important;
  font-size: 0.9rem !important;
  margin-right: 2px !important;
}

.vtTenantChip .sapMText {
  color: #45525f !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  white-space: nowrap !important;
}

/* ââââ Remove row hover/select/active background on admin/tenant tables ââââ */
.vtUsersCard .sapMListTblRow:hover,
.vtUsersCard .sapMListTblRow:hover > .sapMListTblCell,
.vtUsersCard .sapMLIBHoverable:hover,
.vtUsersCard .sapMLIBHoverable:hover > .sapMListTblCell,
.vtUsersCard .sapMListTblRow.sapMLIBSelected,
.vtUsersCard .sapMListTblRow.sapMLIBSelected > .sapMListTblCell,
.vtUsersCard .sapMListTblRow.sapMLIBActive,
.vtUsersCard .sapMListTblRow.sapMLIBActive > .sapMListTblCell {
  background-color: transparent !important;
}

/* ADMIN SEARCH FIELD */
.vtAdminSearch.sapMSF {
  width: 250px !important;
  min-width: 200px !important;
  height: 2.75rem !important;
}

.vtAdminSearch.sapMSF .sapMSFF {
  height: 2.75rem !important;
  border-radius: 8px !important;
  border: 1px solid #e5e9ee !important;
  box-sizing: border-box !important;
  background: #fff !important;
}
.vtAdminSearch.sapMSF .sapMSFI {
  height: 2.55rem !important;
  border: none !important;
  background: transparent !important;
}

/* Search magnifier: flat, inside the field (no grey box) */
.vtAdminSearch.sapMSF .sapMSFR,
.vtAdminSearch.sapMSF .sapMSFS {
  height: 2.55rem !important;
  width: 2.4rem !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 0 !important;
}
.vtAdminSearch.sapMSF .sapMSFR .sapUiIcon,
.vtAdminSearch.sapMSF .sapMSFS .sapUiIcon {
  line-height: 2.55rem !important;
}
.vtAdminSearch.sapMSF .sapMSFR:hover,
.vtAdminSearch.sapMSF .sapMSFS:hover { background: transparent !important; }