/* ═══════════════════════════════════════════════════════════
   VeroTrust Theme — shared across all pages
   ═══════════════════════════════════════════════════════════
   Drop-in replacement for webapp/css/verotrust-theme.css.

   • PART 1 (lines below up to "REFINEMENTS") is your EXISTING
     theme, unchanged — dark-mode overrides intact.
   • PART 2 ("VeroTrust UI refinements") ports the approved
     prototype polish. It targets only your existing vt* classes
     plus standard sap.m Horizon classes. Safe to remove wholesale
     to revert to your current look.

   Tuning: edit the tokens in the :root block — everything in
   PART 2 references them.
   ═══════════════════════════════════════════════════════════ */

:root {
  --vt-accent: #0070f2; /* brand blue / active            */
  --vt-accent-deep: #0064d9; /* hover / pressed                */
  --vt-accent-soft: rgba(0, 112, 242, 0.1);
  --vt-accent-ring: rgba(0, 112, 242, 0.22);
  --vt-green: #36a420; /* brand green (gradient end)     */
  --vt-brand-grad: linear-gradient(135deg, #0070f2 0%, #36a420 100%);

  --vt-text-1: #1d2d3e; /* primary                        */
  --vt-text-2: #32363a; /* labels / secondary             */
  --vt-text-3: #6a7a8a; /* hint / subtitle                */
  --vt-text-4: #8a9bae; /* inactive                       */
  --vt-separator: #e8e8e8;
  --vt-row-hover: #f5f7fa;

  --vt-good: #36a420;
  --vt-good-bg: #ebf7e8;
  --vt-warn: #e76500;
  --vt-warn-bg: #fdf0e3;
  --vt-error: #d20a0a;
  --vt-error-bg: #fbebec;
  --vt-info: #0070f2;
  --vt-info-bg: #e9f2ff;
}

/* Status badge styling */
.vtStatusBadge {
  background: rgba(54, 164, 32, 0.15) !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  color: #1d6b3d !important;
  font-weight: 600 !important;
}

/* Remove default focus outline and borders */
*:focus-visible {
  outline: none !important;
}
.sapMFocus {
  outline: none !important;
  box-shadow: none !important;
}
/* Remove table row selection border */
.sapMListTblRow,
.sapMLIB {
  border: none !important;
  box-shadow: none !important;
}
.sapMListTblRow:focus,
.sapMLIB:focus,
.sapMListTblRow.sapMFocus,
.sapMLIB.sapMFocus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ── Login page: dark gradient background ────────────────── */
.vtLoginPage,
.vtLoginPage > section.sapMPageSection {
  background:
    radial-gradient(
      circle at 86% 18%,
      rgba(54, 164, 32, 0.22),
      transparent 55%
    ),
    radial-gradient(circle at 8% 90%, rgba(0, 112, 242, 0.24), transparent 50%),
    linear-gradient(135deg, #14233f 0%, #16213e 45%, #0f3460 100%) !important;
  min-height: 100%;
}

/* ── Login card: white container ─────────────────────────── */
.vtLoginCard {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
  padding: 32px 36px !important;
  width: 480px !important;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}

/* ── Logo (login card) ───────────────────────────────────── */
.vtLogoImg {
  display: block !important;
  margin: 0 auto 4px auto !important;
}

.vtLogoImg > img {
  max-width: 180px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* ── Login card: force light mode for all UI5 controls ────── */
.vtLoginCard,
.vtLoginCard .sapMFlexBox,
.vtLoginCard .sapUiVlt,
.vtLoginCard .sapMVBox {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.vtLoginCard .sapMLabel {
  color: #32363a !important;
  font-size: 0.875rem;
}

.vtLoginCard .sapMTitle .sapMTitleStyle,
.vtLoginCard .sapMTitle {
  color: #1d2d3e !important;
}

.vtLoginCard .sapMText {
  color: #6a7a8a !important;
  font-size: 0.875rem;
}

/* ── Inputs (login card) ─────────────────────────────────── */
.vtLoginCard .sapMInputBase .sapMInputBaseInner {
  border-radius: 8px !important;
  background: #f0f2f5 !important;
  color: #1d2d3e !important;
  border: 1.5px solid #b0b9c4 !important;
  padding: 0 0.75rem !important;
}

.vtLoginCard .sapMInputBase .sapMInputBaseInner::placeholder {
  color: #7a8a9a !important;
}

.vtLoginCard .sapMInputFocused .sapMInputBaseInner,
.vtLoginCard .sapMInputBase .sapMInputBaseInner:focus {
  border-color: #0070f2 !important;
  box-shadow: 0 0 0 2px rgba(0, 112, 242, 0.2) !important;
  outline: none !important;
}

/* ── Buttons (login card) ────────────────────────────────── */
.vtLoginCard .sapMBtn .sapMBtnInner {
  border-radius: 8px !important;
  height: 2.75rem !important;
  font-size: 0.9rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
/* Button: override the VBox alignItems=Center constraint.
   align-self:stretch is the only reliable way to make a flex child
   fill full parent width when the container uses align-items:center. */
.vtLoginCard .sapMBtn {
  align-self: stretch !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
.vtLoginCard .sapMBtn .sapMBtnInner {
  width: 100% !important;
}

.vtLoginCard .sapMBtn.sapMBtnEmphasized .sapMBtnInner,
.vtLoginCard .sapMBtn.sapMBtnEmphasized .sapMBtnIcon,
.vtLoginCard .sapMBtn.sapMBtnEmphasized .sapMBtnText {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
   App pages (post-login)
   ═══════════════════════════════════════════════════════════ */

/* ── App page: light gray background ─────────────────────── */
.vtAppPage > section.sapMPageSection {
  background-color: #f0f2f5 !important;
}

/* ── App toolbar: white with bottom shadow ───────────────── */
.vtAppPage .sapMPageHeader,
.vtAppPage .sapMPageHeader .sapMBar,
.vtAppPage .sapMPageHeader .sapMBarLeft,
.vtAppPage .sapMPageHeader .sapMBarMiddle,
.vtAppPage .sapMPageHeader .sapMBarRight {
  background-color: #ffffff !important;
  box-shadow: none !important;
}

.vtAppPage .sapMPageHeader {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.vtAppPage .sapMPageHeader .sapMTitle,
.vtAppPage .sapMPageHeader .sapMTitle .sapMTitleStyle {
  color: #1d2d3e !important;
}

.vtAppPage .sapMPageHeader .sapMText {
  color: #32363a !important;
}

/* ── Toolbar logo ────────────────────────────────────────── */
.vtToolbarLogo {
  display: flex !important;
  align-items: center !important;
}

.vtToolbarLogo > img {
  height: 32px !important;
  width: auto !important;
  max-width: 120px !important;
  display: block;
}

/* ── App content card ────────────────────────────────────── */
.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;
}

/* ── App card: force light mode ──────────────────────────── */
.vtAppCard,
.vtAppCard .sapMFlexBox,
.vtAppCard .sapUiVlt,
.vtAppCard .sapMVBox:not(.vtMsgCard),
.vtAppCard .sapMHBox,
.vtAppCard .sapMScrollCont {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.vtAppCard .sapMList,
.vtAppCard .sapMListTbl,
.vtAppCard .sapMListTblRow,
.vtAppCard .sapMListTblCell {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.vtAppCard .sapMLabel {
  color: #32363a !important;
}

.vtAppCard .sapMTitle,
.vtAppCard .sapMTitle .sapMTitleStyle {
  color: #1d2d3e !important;
}

.vtAppCard .sapMText {
  color: #32363a !important;
}

/* Table header bold */
.vtAppCard .sapMListTblHeader .sapMText,
.vtAppCard .sapMListTblHeader .sapMLabel {
  font-weight: 600 !important;
  color: #32363a !important;
}

/* Table row separator */
.vtAppCard .sapMListTblRow {
  border-bottom: 1px solid #e8e8e8 !important;
}

/* Table row hover */
.vtAppCard .sapMLIBHovered,
.vtAppCard .sapMLIBHovered td {
  background-color: #f5f7fa !important;
}

/* ── Inputs (app card) ───────────────────────────────────── */
.vtAppCard .sapMInputBase .sapMInputBaseInner {
  border-radius: 8px !important;
  background: #f0f2f5 !important;
  color: #1d2d3e !important;
  border: 1.5px solid #b0b9c4 !important;
  padding: 0 0.75rem !important;
}

.vtAppCard .sapMInputBase .sapMInputBaseInner::placeholder {
  color: #7a8a9a !important;
}

.vtAppCard .sapMInputFocused .sapMInputBaseInner,
.vtAppCard .sapMInputBase .sapMInputBaseInner:focus {
  border-color: #0070f2 !important;
  box-shadow: 0 0 0 2px rgba(0, 112, 242, 0.2) !important;
  outline: none !important;
}

/* ── Buttons (app card) ──────────────────────────────────── */
.vtAppCard .sapMBtn .sapMBtnInner {
  border-radius: 8px !important;
}

.vtAppCard .sapMBtn.sapMBtnEmphasized .sapMBtnInner,
.vtAppCard .sapMBtn.sapMBtnEmphasized .sapMBtnIcon,
.vtAppCard .sapMBtn.sapMBtnEmphasized .sapMBtnText {
  color: #ffffff !important;
}

/* ── IconTabBar (app card) ───────────────────────────────── */
.vtAppCard .sapMITBHead,
.vtAppCard .sapMITBContent,
.vtAppCard .sapMIconTabHeader,
.vtAppCard .sapMITBContainerContent {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.vtAppCard .sapMITBFilter .sapUiIcon {
  color: #0070f2 !important;
}

.vtAppCard .sapMITBFilter:not(.sapMITBSelected) .sapUiIcon {
  color: #8a9bae !important;
}

.vtAppCard .sapMITBFilter:not(.sapMITBSelected) .sapMITBText {
  color: #8a9bae !important;
}

/* ── ObjectHeader (app card) ─────────────────────────────── */
.vtAppCard .sapMOH {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.vtAppCard .sapMOHTitle {
  color: #1d2d3e !important;
}
.vtAppCard .sapMOHIntro {
  color: #6a7a8a !important;
}

/* ── FeedInput (messages) ────────────────────────────────── */
.vtAppCard .sapMFeedInput {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* ── Message bubbles ─────────────────────────────────────── */
/* Message row separator */
.vtMsgRow {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

/* Message bubble styling - direct class targeting */
/* Message card styling - replaces old bubble styles */
.vtMsgSender {
  font-size: 0.75rem !important;
  margin-bottom: 2px !important;
}
.vtMsgTime {
  font-size: 0.7rem !important;
  opacity: 0.7;
  margin-top: 2px !important;
}

/* ── Toolbar inside card ─────────────────────────────────── */
.vtAppCard .sapMTB {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── SubHeader toolbar (New Project bar) ─────────────────── */
.vtAppPage .sapMPageSubHeader .sapMBar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e8e8e8 !important;
  box-shadow: none !important;
}

/* ╔═══════════════════════════════════════════════════════════╗
   ║  PART 2 · VeroTrust UI refinements (prototype polish)       ║
   ║  Remove this whole section to revert to the look above.     ║
   ╚═══════════════════════════════════════════════════════════╝ */

/* ── [Toolbar] taller, crisper app header ────────────────────
   Screens: Home, Users, AuditLog, ProjectDetail, ParticipantDetail */
.vtAppPage .sapMPageHeader {
  box-shadow: 0 2px 10px rgba(20, 35, 63, 0.08) !important;
}
.vtAppPage .sapMPageHeader .sapMBar {
  align-items: center !important;
}

/* ── [Brand avatar] blue→green gradient initials ─────────────
   Add class="vtBrandAvatar" to <Avatar> in member/participant/user lists.
   (Leaves default Horizon avatars untouched.) */
.vtBrandAvatar .sapFAvatarInitialsHolder,
.vtBrandAvatar.sapFAvatar {
  background: var(--vt-brand-grad) !important;
  color: #fff !important;
}

/* ── [IconTabBar] selected-tab accent underline + count badge ─
   Screens: ProjectDetail, ParticipantDetail.
   Your current theme only recolors text/icon; this adds the
   Horizon selection underline and a soft count badge. */
.vtAppCard .sapMITBFilter {
  transition:
    color 0.14s,
    box-shadow 0.14s;
}
.vtAppCard .sapMITBFilter.sapMITBSelected {
  box-shadow: inset 0 -3px 0 0 var(--vt-accent);
}
.vtAppCard .sapMITBFilter.sapMITBSelected .sapMITBText,
.vtAppCard .sapMITBFilter.sapMITBSelected .sapMITBCount {
  color: var(--vt-accent) !important;
  font-weight: 600 !important;
}
.vtAppCard .sapMITBFilter .sapMITBCount {
  border-radius: 9px;
  background: #eef1f5;
  color: var(--vt-text-3);
  font-weight: 700;
  min-width: 1.25rem;
  padding: 0 0.35rem;
}
.vtAppCard .sapMITBFilter.sapMITBSelected .sapMITBCount {
  background: var(--vt-accent-soft);
}
/* hide the default Horizon ITB bottom drop-shadow so the underline reads cleanly */
.vtAppCard .sapMITH {
  box-shadow: inset 0 -1px 0 0 var(--vt-separator) !important;
}

/* ── [Tables] uppercase headers, calmer separators, comfy rows ─
   Screens: every table (Participants, Members, Requests,
   Documents, Users, Audit Log). */
.vtAppCard .sapMListTblHeader .sapMText,
.vtAppCard .sapMListTblHeader .sapMLabel {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.76rem !important;
  color: var(--vt-text-3) !important;
}
.vtAppCard .sapMListTblHeaderCell {
  border-bottom: 1px solid var(--vt-separator) !important;
}
.vtAppCard .sapMListTblRow {
  border-bottom: 1px solid var(--vt-separator) !important;
}
.vtAppCard .sapMListTbl .sapMListTblRow:last-child {
  border-bottom: 0 !important;
}
.vtAppCard .sapMLIBHoverable:hover,
.vtAppCard .sapMLIBHoverable:hover > .sapMListTblCell {
  background-color: var(--vt-row-hover) !important;
}
/* primary cell emphasis — wrap the main column text in <Text class="vtCellStrong"> */
.vtAppCard .vtCellStrong {
  font-weight: 600 !important;
  color: var(--vt-text-1) !important;
}
.vtAppCard .vtCellSub {
  font-size: 0.75rem !important;
  color: #8a9bae !important;
  font-weight: 400 !important;
}

.vtCellSub.sapMText {
  font-size: 0.75rem !important;
  color: #8a9bae !important;
}

/* ── [ObjectStatus] firmer weight for status text ────────────
   Screens: invitation status, request status, scan status, user status.
   Colors already come from Horizon semantic states (Success/Warning/Error). */
.vtAppCard .sapMObjStatus {
  font-weight: 600 !important;
}
.vtAppCard .sapMObjStatusSuccess {
  color: var(--vt-good) !important;
}
.vtAppCard .sapMObjStatusWarning {
  color: var(--vt-warn) !important;
}
.vtAppCard .sapMObjStatusError {
  color: var(--vt-error) !important;
}
.vtAppCard .sapMObjStatusInformation {
  color: var(--vt-info) !important;
}

/* ── [MessageStrip] softer radius for the security banners ───
   Screens: Documents/Messages ("Encrypted & scanned",
   key-missing warning), Audit Log ("Tamper-evident"). */
.vtAppCard .sapMMsgStrip {
  border-radius: 8px !important;
  font-size: 0.86rem;
}

/* ── [ObjectHeader] uppercase intro + tidy attribute row ─────
   Screens: ProjectDetail, ParticipantDetail headers. */
.vtAppCard .sapMOHIntro {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--vt-text-4) !important;
}
.vtAppCard .sapMOHTitle {
  letter-spacing: -0.015em;
}
.vtAppCard .sapMObjectAttrTitle {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72rem !important;
  color: var(--vt-text-4) !important;
}
.vtAppCard .sapMObjectAttrText {
  font-weight: 600 !important;
  color: var(--vt-text-1) !important;
}

/* ── [Buttons] emphasized hover deepen + radius ──────────────
   Screens: all (New Project, Invite Participant, Add Request, Send…). */
.sapMBtn.sapMBtnEmphasized .sapMBtnInner {
  border-radius: 8px !important;
}
.sapMBtn.sapMBtnEmphasized:hover .sapMBtnInner {
  background: var(--vt-accent-deep) !important;
}

/* ── [Document progress] brand gradient bar (opt-in) ─────────
   Add class="vtDocProgress" to the <ProgressIndicator> that shows
   "X of Y document requests fulfilled". */
.vtDocProgress .sapMPIBar {
  background: var(--vt-brand-grad) !important;
  border-color: transparent !important;
}

/* ── [Messages] richer encrypted-chat bubbles ────────────────
   Removed - using card-based styling now */
/* give the message scroll area a distinct background (per design guide) */
.vtChatScroll .sapMScrollCont {
  background: #f0f2f5 !important;
  border-radius: 12px !important;
  border: 1px solid #e5e8ed !important;
  padding: 16px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Message input area styling */
.vtChatInput {
  width: 100% !important;
  padding: 16px 0 0 0 !important;
  gap: 12px !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.vtChatTextField.sapMInputBase {
  flex: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.vtChatTextField .sapMInputBaseInner {
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1.5px solid #d0d6de !important;
  width: 100% !important;
  height: 2.6rem !important;
  padding: 0 1rem !important;
}

.vtChatSendBtn {
  width: 2.6rem !important;
  min-width: 2.6rem !important;
  height: 2.6rem !important;
  min-height: 2.6rem !important;
  border-radius: 8px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* ── [Security helpers] for the new trust cues ───────────────
   Small custom classes used by the markup additions in the
   handoff notes (chat banner pill, file lock badge). */
.vtChatBanner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #226411;
  background: var(--vt-good-bg);
  border: 1px solid #bfe6b5;
  padding: 6px 14px;
  border-radius: 999px;
}
.vtLockBadge .sapUiIcon {
  color: var(--vt-good) !important;
  font-size: 0.8rem;
}
.vtRoleTag {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 6px;
  background: #eef1f5;
  color: var(--vt-text-2);
}
.vtRoleTagAdmin {
  background: var(--vt-accent-soft);
  color: var(--vt-accent);
}

/* ── Dark-mode safety for PART 2 additions ───────────────────
   Mirror your existing pattern: keep cards light regardless of OS theme. */
.vtAppCard .sapMITH,
.vtAppCard .sapMMsgStrip {
  background-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
   PART 3 — Direction A: Refined  (prototype faithful)
   Shared avatar chip + file cell, then A-specific login/home.
   ═══════════════════════════════════════════════════════════ */

/* ── User avatar chip (all app bars) ─────────────────────── */
.vtUserChip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 3px 8px 3px 3px !important;
  border-radius: 999px !important;
}
.vtAvatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0070f2 0%, #36a420 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}
.vtAvatar .sapMText {
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.vtUserChip .vtChipName .sapMText {
  font-size: 0.82rem !important;
  color: #32363a !important;
  font-weight: 600 !important;
}

/* ── Document file cell with encrypted lock badge ─────────── */
.vtFileCell {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.vtFileIco {
  position: relative !important;
  flex: none !important;
  width: 28px !important;
  height: 34px !important;
}
.vtFileIco .sapUiIcon {
  font-size: 1.8rem !important;
  color: #0070f2 !important;
}
.vtFileLock {
  position: absolute !important;
  right: -4px !important;
  bottom: -2px !important;
  width: 15px !important;
  height: 15px !important;
  border-radius: 50% !important;
  background: #36a420 !important;
  border: 1.5px solid #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.vtFileLock .sapUiIcon {
  font-size: 0.5rem !important;
  color: #fff !important;
}

/* ── Direction A: Login card refinements ──────────────────── */
.vtLoginCard {
  padding: 38px 40px 34px !important;
  border-radius: 18px !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38) !important;
}
.vtLogoImg > img {
  max-width: 160px !important;
  height: auto !important;
}
/* Trust strip below the submit button */
.vtTrustStrip {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  margin-top: 20px !important;
  flex-wrap: wrap;
  padding: 18px !important;
  border-top: 1px solid #e8e8e8 !important;
  border-bottom: 1px solid #e8e8e8 !important;
  width: 100%;
}
.vtTrustItem {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.vtTrustItem .sapUiIcon {
  color: #36a420 !important;
  font-size: 0.85rem !important;
}
.vtTrustItem .sapMText {
  font-size: 0.74rem !important;
  color: #6a7a8a !important;
  font-weight: 600 !important;
}

/* ── Direction A: MagicLinkSent mail icon circle ──────────── */
.vtSentCircle {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: rgba(0, 112, 242, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px auto !important;
}
.vtSentCircle .sapUiIcon {
  color: #0070f2 !important;
  font-size: 2rem !important;
}

/* ── Direction A: Home project list rows ──────────────────── */
.vtProjList .sapMListItems {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vtProjList .sapMLIB {
  display: flex !important;
  align-items: center !important;
  padding: 14px 22px !important;
  gap: 16px !important;
  border-bottom: 1px solid #e8e8e8 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background 0.12s !important;
}
.vtProjList .sapMLIB:last-child {
  border-bottom: none !important;
}
.vtProjList .sapMLIB:hover {
  background: #f5f8fc !important;
}
/* Project folder icon circle */
.vtProjIco {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  flex: none !important;
  background: rgba(0, 112, 242, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.vtProjIco .sapUiIcon {
  color: #0070f2 !important;
  font-size: 1.2rem !important;
}

/* ═══════════════════════════════════════════════════════════
   PART 3 FIXES — resist blanket white overrides + specificity
   ═══════════════════════════════════════════════════════════ */

/* Avatar initials: .vtAppPage .sapMPageHeader .sapMText (0,3,0) beats
   .vtAvatar .sapMText (0,2,0) — boost our rule to match, appear later */
.vtAppPage .vtAvatar .sapMText,
.vtUserChip .vtAvatar .sapMText {
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* vtSentCircle tinted circle — escape .vtLoginCard .sapMFlexBox white override
   (.vtLoginCard .vtSentCircle.sapMFlexBox = 0,3,0 beats 0,2,0) */
.vtLoginCard .vtSentCircle.sapMFlexBox,
.vtLoginCard .vtSentCircle.sapMVBox {
  background: rgba(0, 112, 242, 0.1) !important;
  background-color: rgba(0, 112, 242, 0.1) !important;
}

/* vtProjIco blue pill — escape .vtAppCard .sapMFlexBox white override */
.vtAppCard .vtProjIco.sapMFlexBox,
.vtAppCard .vtProjIco.sapMVBox {
  background: rgba(0, 112, 242, 0.1) !important;
  background-color: rgba(0, 112, 242, 0.1) !important;
}

/* vtFileLock green badge — escape .vtAppCard .sapMVBox white override */
.vtAppCard .vtFileLock.sapMFlexBox,
.vtAppCard .vtFileLock.sapMVBox {
  background: #36a420 !important;
  background-color: #36a420 !important;
}

/* Project list: CustomListItem wraps our HBox in div.sapMLIBContent —
   flex/gap/padding must live on that wrapper, not the outer <li> */
.vtProjList .sapMLIB {
  padding: 0 !important;
}
.vtProjList .sapMLIBContent {
  width: 100%;
}
.vtProjList .sapMLIBContent .sapMHBox {
  gap: 16px !important;
  padding: 14px 22px !important;
  width: 100% !important;
}

/* Toolbar inside card: bottom separator under the "New Project" bar */
.vtAppCard > .sapMTB {
  border-bottom: 1px solid #e3e7ec !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

/* Login labels: VBox alignItems=Center shrinks labels to content-width and
   centers them — make them full-width so text is left-aligned per prototype */
.vtLoginCard .sapMLabel {
  width: 100% !important;
  text-align: left !important;
}

/* Login card: stretch-align child elements (inputs, labels) to fill the card
   width. The image, title, subtitle, and button still center via their own
   style; only the form controls need left-alignment. */
.vtLoginCard .sapMInputBase {
  width: 100% !important;
}

/* Project list: text/description VBox should grow to fill remaining row space.
   width="100%" on a flex item conflicts with sibling flex items — flex:1 is correct */
.vtProjList .sapMLIBContent .sapMHBox > .sapMVBox:not(.vtProjIco) {
  flex: 1 !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Trust strip: ensure separator line always shows (needs explicit margin from button) */
.vtTrustStrip {
  margin-top: 22px !important;
}

/* ── Login input icon wrappers (mirrors prototype .input-wrap) ── */
.vtInputWrap.sapMVBox {
  position: relative !important;
  width: 100% !important;
}
/* The Icon renders as span.sapUiIcon — absolute inside the relative VBox.
   Use top:0/bottom:0/margin:auto for reliable vertical centering regardless
   of line-height (transform:translateY approach breaks on SAP icon glyphs). */
.vtInputIco.sapUiIcon {
  position: absolute !important;
  left: 12px !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 1em !important;
  margin: auto 0 !important;
  z-index: 2 !important;
  color: #8a9bae !important;
  font-size: 0.9rem !important;
  line-height: 1 !important;
  pointer-events: none !important;
}
/* Indent the input text to make room for the icon */
.vtInputWrap .sapMInputBase .sapMInputBaseInner {
  padding-left: 2.4rem !important;
}

/* ── Login inputs: taller fields + inline SVG icon ──────────
   Using background-image on the inner <input> element avoids
   all UI5 positioning issues with absolute-positioned overlays.
   Must appear AFTER the background:#f0f2f5 rule (same specificity
   0,3,0) so background-image wins via cascade order. */

/* Taller inputs — increase all three layers of the UI5 Input stack */
.vtLoginCard .sapMInputBase,
.vtLoginCard .sapMInputBase .sapMInputBaseContentWrapper,
.vtLoginCard .sapMInputBase .sapMInputBaseInner {
  height: 2.75rem !important;
}
.vtLoginCard .sapMInputBase .sapMInputBaseInner {
  line-height: 2.75rem !important;
}

/* Email field: envelope icon painted at 14px from left, vertically centered */
.vtLoginCard .vtEmailInput .sapMInputBaseInner {
  background-color: #f0f2f5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9bae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 16px 16px !important;
  padding-left: 2.5rem !important;
}

/* Organisation field: building icon */
.vtLoginCard .vtOrgInput .sapMInputBaseInner {
  background-color: #f0f2f5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9bae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 16px 16px !important;
  padding-left: 2.5rem !important;
}

/* ── Project list: status as colored pill badges ─────────── */
.vtProjList .sapMObjStatus {
  padding: 3px 11px !important;
  border-radius: 999px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  flex-shrink: 0 !important;
}
.vtProjList .sapMObjStatusSuccess {
  background: rgba(54, 164, 32, 0.12) !important;
  color: #36a420 !important;
}
.vtProjList .sapMObjStatusNone,
.vtProjList
  .sapMObjStatus:not(.sapMObjStatusSuccess):not(.sapMObjStatusWarning):not(
    .sapMObjStatusError
  ) {
  background: #eef1f5 !important;
  color: #5a6a7a !important;
}
.vtProjList .sapMObjStatusWarning {
  background: rgba(231, 101, 0, 0.1) !important;
  color: #e76500 !important;
}
.vtProjList .sapMObjStatusError {
  background: rgba(210, 10, 10, 0.1) !important;
  color: #d20a0a !important;
}

/* ══ Messages redesign — matches prototype chat UI ════════════ */

/* Strip default CustomListItem padding inside the message list */
.vtMsgList .sapMLIB {
  padding: 2px 0 !important;
  background: transparent !important;
  border: none !important;
}
.vtMsgList .sapMLIBContent {
  padding: 0 !important;
}

/* Message card styling */
.vtMsgCardItem.sapMLIB {
  background: transparent !important;
  border: none !important;
}
.vtMsgCard {
  border-radius: 12px !important;
  padding: 14px 18px !important;
  box-shadow: 0 2px 8px rgba(20, 35, 63, 0.12) !important;
  margin: 8px 0 !important;
  width: auto !important;
  max-width: 70% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Own messages - blue card */
.vtMsgCard.vtMsgCardOwn {
  background: #0070f2 !important;
  background-color: #0070f2 !important;
  border: none !important;
}
.vtMsgCard.vtMsgCardOwn .sapMLabel,
.vtMsgCard.vtMsgCardOwn .sapMText {
  color: #fff !important;
}
.vtMsgCard.vtMsgCardOwn .sapMLabel {
  font-weight: 700 !important;
}
/* Others' messages - white card */
.vtMsgCard.vtMsgCardOther {
  background: #fff !important;
  background-color: #fff !important;
  border: 1.5px solid #d0d3d8 !important;
}
.vtMsgCard.vtMsgCardOther .sapMLabel,
.vtMsgCard.vtMsgCardOther .sapMText {
  color: #1d2d3e !important;
}

/* Old bubble styles removed - using card-based styling now */

/* Sender name row */
.vtMsgSender {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  margin-bottom: 3px !important;
  opacity: 1 !important;
}

/* Timestamp row */
.vtMsgTime {
  font-size: 0.7rem !important;
  opacity: 1 !important;
  margin-top: 4px !important;
}
.vtMsgTime .sapMText {
  font-size: 0.7rem !important;
  display: block !important;
  text-align: right !important;
}

/* Message background for messages from others */
/* MessageStrip styling for messages and info boxes */
.sapMMessageStrip {
  margin-top: -2px !important;
  margin-bottom: -6px !important;
  padding: 8px 12px !important;
}
.sapMMessageStrip + .vtTabToolbar {
  margin-top: -4px !important;
}

.sapMMessageStripSuccess {
  background: rgba(54, 164, 32, 0.15) !important;
  border: 1px solid rgba(54, 164, 32, 0.3) !important;
}

.sapMMessageStrip.sapMMessageStripSuccess .sapMText {
  color: #1d6b3d !important;
}

/* Chat input row (replaces FeedInput) */
.vtChatInput.sapMHBox {
  width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 10px 0 0 0 !important;
  gap: 10px !important;
  align-items: center !important;
  display: flex !important;
}
.vtChatInput .sapMInputBase,
.vtChatInput .sapMInputBase .sapMInputBaseContentWrapper {
  flex: 1 !important;
  width: 100% !important;
  height: 2.6rem !important;
}
.vtChatInput .sapMInputBase .sapMInputBaseInner {
  border-radius: 24px !important;
  height: 2.6rem !important;
  line-height: 2.6rem !important;
  background-color: #f0f2f5 !important;
  border: 1.5px solid #d0d6de !important;
  padding: 0 1rem !important;
}
.vtChatInput .sapMInputFocused .sapMInputBaseInner,
.vtChatInput .sapMInputBase .sapMInputBaseInner:focus {
  border-color: #0070f2 !important;
  box-shadow: 0 0 0 3px rgba(0, 112, 242, 0.15) !important;
}
/* Circular send button */
.vtChatSendBtn.sapMBtn {
  width: 2.6rem !important;
  min-width: 2.6rem !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  align-self: auto !important;
}
.vtChatSendBtn .sapMBtnInner {
  border-radius: 50% !important;
  width: 2.6rem !important;
  height: 2.6rem !important;
  min-width: 2.6rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ══ Project page layout ══════════════════════════════════════
   White nav bar + project card with header + integrated tabs
   ══════════════════════════════════════════════════════════ */

/* White nav bar (project page only) */
.vtProjectPage .sapMPageHeader,
.vtProjectPage .sapMPageHeader .sapMBar {
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07) !important;
  border-bottom: 1px solid #e8e8e8 !important;
}
.vtProjectPage .sapMPageHeader .sapMTitle,
.vtProjectPage .sapMPageHeader .sapMTitle .sapMTitleStyle {
  color: #1d2d3e !important;
}
.vtProjectPage .sapMPageHeader .sapMBtn .sapMBtnInner {
  color: #32363a !important;
}

/* Page background */
.vtProjectPage,
.vtProjectPage > section.sapMPageSection {
  background-color: #f0f2f5 !important;
}

/* Outer container */
.vtProjectOuter {
  padding: 12px 24px 32px;
  width: 100%;
  box-sizing: border-box;
}

/* Breadcrumb */
.vtBreadcrumb {
  padding: 4px 0 8px;
  gap: 2px;
  align-items: center;
}
.vtBreadcrumbLink.sapMBtn {
  min-width: 0 !important;
  height: auto !important;
}
.vtBreadcrumbLink.sapMBtn .sapMBtnInner {
  color: #0070f2 !important;
  font-size: 0.84rem !important;
  padding: 0 4px !important;
  min-width: 0 !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.vtBreadcrumbSep.sapUiIcon {
  color: #8a9bae !important;
  font-size: 0.75rem !important;
}
.vtBreadcrumbCurrent.sapMText {
  font-size: 0.84rem !important;
  color: #32363a !important;
  font-weight: 500 !important;
  padding: 0 4px !important;
}

/* Card 1: Project header */
.vtProjectHeaderCard {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(20, 35, 63, 0.07) !important;
  overflow: hidden !important;
}

/* Card 2: Tabs + content */
.vtProjectContentCard {
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid #e0e0e0 !important;
  box-shadow: 0 2px 12px rgba(20, 35, 63, 0.07) !important;
  overflow: hidden !important;
  margin-top: 12px !important;
}

/* Card header section */
.vtProjectCardHeader.sapMHBox {
  padding: 28px 28px 20px !important;
  gap: 20px !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
}

/* Project icon box */
.vtProjectIconBox.sapMVBox {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 14px !important;
  background: rgba(0, 112, 242, 0.1) !important;
  flex-shrink: 0 !important;
}
.vtProjectIconLg.sapUiIcon {
  color: #0070f2 !important;
  font-size: 2rem !important;
}

/* Participant avatar (large circle for header) */
.vtParticipantAvatarBox.sapMVBox {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0070f2 0%, #36a420 100%) !important;
  flex-shrink: 0 !important;
}
.vtParticipantAvatarText.sapMText {
  color: #fff !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
}

/* Category label */
.vtProjectCategory.sapMText {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #8a9bae !important;
  margin-bottom: 4px !important;
}

/* Project title */
.vtProjectTitle.sapMTitle .sapMTitleStyle {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #1d2d3e !important;
  line-height: 1.25 !important;
}

/* Description */
.vtProjectDesc.sapMText {
  color: #6a7a8a !important;
  font-size: 0.875rem !important;
  margin-top: 4px !important;
}

/* Status badge */
.vtProjectStatusBadge .sapMObjStatusText {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  background: rgba(54, 164, 32, 0.1) !important;
  color: #36a420 !important;
}
.vtProjectStatusBadge.sapMObjStatus {
  flex-shrink: 0 !important;
  margin-left: 12px !important;
}

/* Stats row */
.vtProjectStats.sapMHBox {
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid #f0f2f5 !important;
  gap: 32px !important;
  align-items: center !important;
}
.vtStatItem.sapMVBox {
  flex-direction: column !important;
}
.vtStatLabel.sapMText {
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: #8a9bae !important;
  margin-bottom: 3px !important;
}
.vtStatValue.sapMText {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #1d2d3e !important;
}
.vtStatValueRow.sapMHBox {
  gap: 5px !important;
  align-items: center !important;
}
.vtStatIcon.sapUiIcon {
  color: #36a420 !important;
  font-size: 0.82rem !important;
}

/* Participant stats badges */
.vtParticipantStats.sapMHBox {
  gap: 24px !important;
  align-items: flex-start !important;
}

/* Tab bar inside the project card */
.vtProjectTabBar.sapMITB {
  border: none !important;
  background: transparent !important;
}
.vtProjectTabBar .sapMITBHead {
  background: #fff !important;
  border-bottom: none !important;
  padding: 0 8px !important;
  min-height: 90px !important;
}
.vtProjectTabBar .sapMITBFilter {
  padding: 12px 28px 0 28px !important;
  height: 90px !important;
  border: none !important;
  border-top: none !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -3px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  white-space: normal !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: transparent !important;
}
.vtProjectTabBar .sapMITBFilter::before,
.vtProjectTabBar .sapMITBFilter::after {
  display: none !important;
}
.vtProjectTabBar .sapMITBFilter {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}
.vtProjectTabBar .sapMITBSeparator,
.vtProjectTabBar .sapMITBSeparator::before,
.vtProjectTabBar .sapMITBSeparator::after {
  display: none !important;
}
.vtProjectTabBar .sapMITBFilter:not(:last-child)::after {
  display: none !important;
}
/* Icon styling */
.vtProjectTabBar .sapMITBFilter .sapUiIcon {
  font-size: 1.5rem !important;
}
/* Text styling */
.vtProjectTabBar .sapMITBText {
  font-size: 0.9rem !important;
  color: #6a7a8a !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Count badge for sections */
.vtCountBadge.sapMText {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #6a7a8a !important;
  background: #f0f2f5 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}

/* Selected tab */
.vtProjectTabBar .sapMITBFilter.sapMITBSelected .sapMITBText {
  color: #0070f2 !important;
  font-weight: 600 !important;
}
.vtProjectTabBar .sapMITBFilter.sapMITBSelected {
  background: transparent !important;
}
.vtProjectTabBar .sapMITBFilter:hover .sapMITBText {
  color: #1d2d3e !important;
}
.vtProjectTabBar .sapMITBContent,
.vtProjectTabBar .sapMITBContainerContent {
  /* background: #fff !important; */
  border: none !important;
  box-shadow: none !important;
}

/* Tab content padding */
.vtTabContent.sapMVBox {
  background-color: #ffffff !important;
}
.vtTabToolbar.sapMTB {
  background: transparent !important;
  padding: 0 !important;
  border-bottom: none !important;
  border-top: none !important;
  box-shadow: none !important;
}
.vtTabToolbar {
  border: none !important;
}

.vtMessages1Filter {
  margin: 0 !important;
  padding: 0 0 8px 0 !important;
}

#messages1ParticipantSelect {
  margin: 0 !important;
}

/* Messages Tab Split Layout */
.vtMessagesTabContent.sapMVBox {
  padding: 0 !important;
}

.vtDocumentsTabContent.sapMVBox {
  padding: 0 !important;
}

.vtDocumentsSplitLayout {
  background: white !important;
  overflow: hidden !important;
  height: clamp(420px, calc(100vh - 340px), 760px) !important;
  width: 100% !important;
}

.vtDocumentsSplitLayout .sapMList {
  padding: 0 5px !important;
  background: transparent !important;
}

.vtDocumentsSplitLayout .vtMessagesParticipantItems.sapMList {
  padding: 0 5px !important;
}

.vtMessagesContainer {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
}

.vtDocumentsContainer {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
}

.vtDocumentsWrapper {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.vtDocumentsScroll {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.vtDocumentsParticipantView {
  padding: 20px 28px !important;
}

/* ParticipantDetail Messages Tab - same split layout as ProjectDetail */
.vtProjectTabBar .sapMITBContainerContent .vtMessagesTabContent.sapMVBox {
  height: clamp(420px, calc(100vh - 340px), 760px) !important;
}

.vtMessagesTabContent .sapMList {
  padding: 0 5px !important;
  background: transparent !important;
}

.vtMessagesParticipantItems.sapMList {
  padding: 0 5px !important;
}

.vtMessagesSplitLayout {
  background: white !important;
  overflow: hidden !important;
  height: clamp(420px, calc(100vh - 340px), 760px) !important;
  width: 100% !important;
}

.vtMessagesParticipantList {
  background: white !important;
  border-right: 1px solid #e0e0e0 !important;
  overflow-y: auto !important;
  padding: 16px 0 !important;
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  flex-shrink: 0 !important;
}

.vtMessagesListTitle.sapMTitle {
  padding: 0 8px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #bbb !important;
  letter-spacing: 0.8px !important;
  margin: 0 0 16px 0 !important;
}

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

.vtMessagesParticipantItems.sapMList .sapMLIB {
  padding: 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.vtMessagesParticipantItems .sapMRB {
  display: none !important;
}

.vtMessagesParticipantItem {
  padding: 12px 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border-bottom: 1px solid #f0f0f0 !important;
  width: 100% !important;
}

.vtMessagesParticipantItem:hover {
  background: #fafafa !important;
}

.vtMessagesParticipantItems .sapMLISelected .vtMessagesParticipantItem {
  background: #f0f8ff !important;
  border-left: 3px solid #0070f2 !important;
  padding-left: 5px !important;
}

.vtMessagesParticipantItems .sapMLISelected {
  border-left: 3px solid #0070f2 !important;
}

.vtMessagesParticipantAvatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0070f2, #00d4ff) !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  margin-right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.vtMessagesParticipantName {
  font-weight: 500 !important;
  color: #1d2d3e !important;
  margin: 0 !important;
  font-size: 0.95rem !important;
}

.vtMessagesChatArea {
  background: white !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 28px !important;
  box-sizing: border-box !important;
  height: 100% !important;
  overflow: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* No participant sidebar (ParticipantDetail page: participant already selected) */
.vtMessagesChatArea.vtNoSidebarChatArea {
  padding: 0 !important;
}

/* Table row height */
.vtAppCard .sapMLIB,
.vtTabContent .sapMLIB,
.vtTabContent .sapMListTblRow {
  padding: 14px 16px !important;
  min-height: 56px !important;
}
.vtAppCard .sapMListTblCell,
.vtTabContent .sapMListTblCell {
  padding: 10px 6px !important;
}

/* Remove borders below Participants and Project Members toolbars */
.vtTabContent .sapMTB {
  border-bottom: none !important;
  box-shadow: none !important;
}
.vtTabContent .sapMList {
  border-top: none !important;
  border-bottom: none !important;
}
.vtTabContent .sapMList tbody tr,
.vtTabContent .sapMList thead tr {
  border: none !important;
}
.vtTabContent .sapMLIBShowSeparator {
  border-bottom: none !important;
}
.vtTabContent table tr {
  border-bottom: none !important;
}
.vtTabContent .sapMListTblRow {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.vtTabContent .sapMListTblHeaderRow {
  border: none !important;
}
.vtTabContent .sapMListTblHeaderCell {
  border: none !important;
}

/* Unified button styling for action buttons (New Project, Invite Participant, Add Member) */
.sapMBtn[type="Emphasized"],
.vtProjectsToolbar .sapMBtn,
.vtTabToolbar .sapMBtn[type="Emphasized"] {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  border-radius: 8px !important;
}
.vtTabToolbar .vtTabToolbarButton.sapMBtn {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  margin-top: -4px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 8px !important;
}
.vtTabToolbar .vtTabToolbarButton .sapMBtnInner {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  gap: 6px !important;
  font-size: 0.9rem !important;
}
.sapMBtn[type="Emphasized"] .sapMBtnInner,
.vtProjectsToolbar .sapMBtn .sapMBtnInner,
.vtTabToolbar .sapMBtn[type="Emphasized"] .sapMBtnInner {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
}

/* Participants and Project Members card styling (match "All projects" card) */
.vtProjectContentCard .vtTabToolbar {
  padding: 12px 16px !important;
  border-bottom: 1px solid #edf0f3 !important;
  background: transparent !important;
  align-items: center !important;
}
.vtProjectContentCard .vtTabToolbar .sapMBtn {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  border-radius: 8px !important;
}
.vtProjectContentCard .vtTabToolbar .sapMBtn .sapMBtnInner {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
}
.vtProjectContentCard .vtTabToolbar .sapMTitle {
  flex: 1 !important;
}
.vtProjectContentCard .vtTabToolbar .sapMTitle .sapMTitleStyle {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1d2d3e !important;
  margin: 0 !important;
}
.vtProjectContentCard .vtTabToolbar .sapMText {
  font-size: 0.875rem !important;
  color: #8a9bae !important;
  font-weight: 500 !important;
}
.vtProjectContentCard .sapMTB {
  margin: 0 !important;
  padding: 0 !important;
}
.vtProjectContentCard .sapMList {
  padding: 0 24px !important;
  background: transparent !important;
}

/* Override padding for messages tab participant list */
.vtMessagesSplitLayout .sapMList {
  padding: 0 5px !important;
}

.vtProjectContentCard .sapMLIB {
  padding: 10px 0 !important;
  margin: 0 !important;
}

/* ══ Home / Projects Page ══════════════════════════════════════
   White nav bar + Projects list with search + status badges
   ══════════════════════════════════════════════════════════ */

/* White nav bar on home page */
.vtHomePage .sapMPageHeader,
.vtHomePage .sapMPageHeader .sapMBar {
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07) !important;
  border-bottom: 1px solid #e8e8e8 !important;
}
.vtHomePage .sapMPageHeader .sapMTitle,
.vtHomePage .sapMPageHeader .sapMTitle .sapMTitleStyle {
  color: #1d2d3e !important;
}
.vtHomePage .sapMPageHeader .sapMBtn {
  color: #32363a !important;
}
.vtToolbarTitle.sapMTitle .sapMTitleStyle {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: #6a7a8a !important;
}

/* Page background */
.vtHomePage,
.vtHomePage > section.sapMPageSection {
  background-color: #f8f9fa !important;
}

/* Projects page outer container */
.vtProjectsPage {
  padding: 32px 28px;
  width: 100%;
  box-sizing: border-box;
}

/* Page header bar: title on left, search+button on right */
.vtPageHeaderBar.sapMHBox {
  gap: 24px !important;
  margin-bottom: 24px !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

/* Page header: title + subtitle */
.vtPageHeader {
  flex: 0 1 auto !important;
}
.vtPageTitle.sapMTitle .sapMTitleStyle {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: #1d2d3e !important;
  line-height: 1.2 !important;
  margin: 0 0 8px 0 !important;
}
.vtPageSubtitle.sapMText {
  font-size: 1rem !important;
  color: #6a7a8a !important;
  margin: 0 !important;
}

/* Search + New Project toolbar */
.vtProjectsToolbar.sapMHBox {
  gap: 12px !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}
.vtProjectsSearch.sapMSearchField {
  width: 280px !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vtProjectsSearch.sapMSearchField .sapMSearchFieldInner {
  background-color: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  padding: 0 !important;
}
.vtProjectsSearch.sapMSearchField .sapMInputBase {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vtProjectsSearch.sapMSearchField .sapMInputBaseInner {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  line-height: 2.75rem !important;
  padding-left: 2.5rem !important;
  padding-right: 12px !important;
  margin: 0 !important;
  background-color: #f0f2f5 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9bae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 14px center !important;
  background-size: 16px 16px !important;
  border: none !important;
  border-radius: 8px !important;
}
.vtProjectsSearch.sapMSearchField .sapMInputBase .sapMInputBaseContentWrapper {
  height: 2.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vtProjectsToolbar .sapMBtn {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.vtProjectsToolbar .sapMBtnInner {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
  line-height: 2.75rem !important;
}

/* Projects card */
.vtProjectsCard {
  width: 100% !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(20, 35, 63, 0.07) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Card header */
.vtProjectsCardHeader.sapMHBox {
  padding: 20px 24px !important;
  border-bottom: 1px solid #edf0f3 !important;
  gap: 12px !important;
}
.vtProjectsCardTitle.sapMTitle .sapMTitleStyle {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #1d2d3e !important;
  margin: 0 !important;
}
.vtProjectsCount.sapMText {
  font-size: 0.875rem !important;
  color: #8a9bae !important;
  font-weight: 500 !important;
}

/* Projects list */
.vtProjectsList.sapMList {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.vtProjectsList .sapMLIB {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #edf0f3 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  transition: background 0.12s !important;
}
.vtProjectsList .sapMLIB:last-child {
  border-bottom: none !important;
}
.vtProjectsList .sapMLIB:hover {
  background: #f8f9fa !important;
}

/* Project row */
.vtProjectRow.sapMHBox {
  padding: 16px 24px !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Project icon */
.vtProjectRowIcon.sapMVBox {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
  background: rgba(0, 112, 242, 0.1) !important;
}
.vtProjectRowIcon .sapUiIcon {
  color: #0070f2 !important;
  font-size: 1.3rem !important;
}

/* Project info */
.vtProjectRowInfo.sapMVBox {
  flex: 0 1 auto !important;
  min-width: 280px !important;
}
.vtProjectRowTitle.sapMTitle .sapMTitleStyle {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #1d2d3e !important;
  line-height: 1.3 !important;
  margin: 0 0 4px 0 !important;
}
.vtProjectRowDesc.sapMText {
  font-size: 0.8rem !important;
  color: #8a9bae !important;
  line-height: 1.4 !important;
  max-height: 2.4em !important;
  overflow: hidden !important;
}

/* Status badge */
.vtProjectRowStatus.sapMVBox {
  min-width: 100px !important;
}
.vtProjectRowStatus .sapMObjStatus {
  margin: 0 !important;
}
.vtProjectRowStatus .sapMObjStatusText {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 16px !important;
  white-space: nowrap !important;
}

/* Status badge colors */
.vtProjectRowStatus .sapMObjStatus.sapMObjStatusSuccess .sapMObjStatusText {
  background: rgba(54, 164, 32, 0.12) !important;
  color: #36a420 !important;
}
.vtProjectRowStatus .sapMObjStatus.sapMObjStatusWarning .sapMObjStatusText {
  background: rgba(255, 160, 0, 0.12) !important;
  color: #ffa000 !important;
}
.vtProjectRowStatus .sapMObjStatus.sapMObjStatusError .sapMObjStatusText {
  background: rgba(229, 57, 53, 0.12) !important;
  color: #e53935 !important;
}
.vtProjectRowStatus .sapMObjStatus.sapMObjStatusNone .sapMObjStatusText {
  background: rgba(100, 125, 155, 0.12) !important;
  color: #647d9b !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Project Documents — grey surface, white row-cards (matches mock)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Documents tab: GREY surface, white row-cards (matches mock) ── */
/* the fragment area is grey; only the data rows are white cards on top */
.vtDocumentsContainer {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  background: #eef1f5 !important;
  padding: 14px 16px 6px !important;
  box-sizing: border-box !important;
}
/* neutralise the white wrappers the fragment sits inside so grey fills the panel */
.vtTabContent.vtMessagesTabContent:has(.vtDocumentsContainer),
.vtMessagesChatArea:has(.vtDocumentsContainer),
.vtNoSidebarChatArea:has(.vtDocumentsContainer) {
  background: #eef1f5 !important;
  padding: 0 !important;
}
/* each doc SECTION is transparent — header sits on grey, only rows are white */
.vtDocCard.vtChatCard {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin-bottom: 10px !important;
}
.vtDocCard.vtChatCard:last-child { margin-bottom: 0 !important; }
.vtDocCardBody { padding: 2px 0 4px !important; box-sizing: border-box !important; }
/* tighter toolbar above each list */
.vtDocCardBody .vtTabToolbar { margin-bottom: 8px !important; }

/* section subtitle under the "Project Documents" title */
.vtSecSub.sapMText {
  font-size: .82rem;
  color: var(--sapContent_LabelColor, #5b6a7d);
  margin-top: 2px;
  display: block;
}

/* card rows */
.vtPdList .sapMLIB { padding: 0; background: transparent; border: 0; }
.vtPdList .sapMList, .vtPdList ul { background: transparent; }
.vtPdRow {
  border: 1px solid #e3e7ec !important;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(20, 35, 63, .06);
}
.vtPdRowInner { padding: 11px 14px; gap: 12px; width: 100%; box-sizing: border-box; }
.vtPdIco {
  color: var(--sapBrandColor, #0070f2);
  background: rgba(0, 112, 242, .10);
  width: 38px; height: 38px; line-height: 38px; font-size: 19px;
  border-radius: 10px; text-align: center; flex: none;
}
/* per-section icon tints so the three card lists read distinctly */
.vtPdIcoReq  { color: #7a5cff !important; background: rgba(122, 92, 255, .10) !important; }
.vtPdIcoFile { color: #2f9e6e !important; background: rgba(47, 158, 110, .10) !important; }
/* avatar variant of the row icon (Participants / Team Members) */
.vtPdAvatar {
  width: 38px !important; height: 38px !important;
  border-radius: 10px !important; flex: none;
  background: rgba(0, 112, 242, .10) !important;
  color: var(--sapBrandColor, #0070f2) !important;
  font-weight: 700; font-size: .82rem;
}
.vtPdAvatar .sapMText { color: inherit !important; }

/* ──── Overview tab: grey surface, white row-cards (match Tenant Documents) ──── */
.vtTabContent:has(.vtOverviewCard) { background: #eef1f5 !important; padding: 0 !important; }
.vtOverviewCard {
  background: #eef1f5 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 14px 16px 6px !important;
  box-sizing: border-box !important;
}
/* section headers/buttons sit on grey; the +N badge stays neutral */
.vtOverviewCard .vtTabToolbar { background: transparent !important; margin-bottom: 8px !important; }
/* second toolbar (Project Members) gets breathing room from the list above */
.vtOverviewCard .vtTabToolbar.sapUiMediumMarginTop { margin-top: 18px !important; }

/* per-section icon tints so the three card lists read distinctly */
.vtPdIcoReq  { color: #7a5cff !important; background: rgba(122, 92, 255, .10) !important; }
.vtPdIcoFile { color: #2f9e6e !important; background: rgba(47, 158, 110, .10) !important; }
.vtPdMain { flex: 1; min-width: 0; gap: 3px; }
.vtPdDesc.sapMText {
  font-size: .85rem;
  color: var(--sapContent_LabelColor, #5b6a7d);
  line-height: 1.4;
}
.vtPdFileRow { gap: 14px; margin-top: 2px; flex-wrap: wrap; }
.vtPdMeta.sapMText { font-size: .78rem; color: #8a9bae; position: relative; }
.vtPdFileRow .vtPdMeta + .vtPdMeta { margin-left: 14px; }
.vtPdFileRow .vtPdMeta + .vtPdMeta::before {
  content: '·'; position: absolute; left: -9px; color: #c3ccd6;
}
.vtPdPill { flex: none; margin-left: 8px; }
.vtPdActions { flex: none; margin-left: 14px; gap: 2px; }

/* ──── Upload dialog (mock-aligned) ──── */
.vtPdDlg { gap: 4px; padding: 4px 4px 8px; }
.vtPdDlgHint.sapMText {
  font-size: .85rem;
  color: var(--sapContent_LabelColor, #5b6a7d);
  line-height: 1.5;
  margin-bottom: 10px;
  display: block;
}
.vtPdDlgLbl { margin: 12px 0 4px; font-weight: 600; }
.vtPdDlgFileRow { gap: 10px; margin-top: 2px; }