/* ============================================================
   SAP Fiori Horizon Theme for Tenancy Management System
   Based on SAP Fiori 3 / Horizon Design Language
   ============================================================ */

/* --- SAP Fiori Horizon CSS Custom Properties --- */
:root {
  /* Shell - Horizon Light */
  --sapShellColor: #fff;
  --sapShell_Background: #fff;
  --sapShell_Hover: rgba(0,0,0,0.04);
  --sapShell_Active: rgba(0,0,0,0.08);
  --sapShell_TextColor: #1d2d3e;
  --sapShell_InteractiveTextColor: #0070f2;

  /* Brand */
  --sapBrandColor: #0070f2;
  --sapHighlightColor: #0070f2;
  --sapActiveColor: #0058c5;

  /* Content */
  --sapBackgroundColor: #f5f6f7;
  --sapBaseColor: #fff;
  --sapContent_ForegroundColor: #fff;
  --sapContent_ForegroundBorderColor: #e5e5e5;

  /* Text */
  --sapTextColor: #32363a;
  --sapTitleColor: #1d2d3e;
  --sapContent_LabelColor: #556b82;
  --sapLink_Color: #0070f2;

  /* Semantic */
  --sapPositiveColor: #188918;
  --sapCriticalColor: #df6e0c;
  --sapNegativeColor: #ee3939;
  --sapInformativeColor: #0070f2;
  --sapNeutralColor: #788fa6;

  /* Semantic Backgrounds */
  --sapPositiveBackground: #f5fae5;
  --sapCriticalBackground: #fff3b8;
  --sapNegativeBackground: #ffe0e0;
  --sapInformativeBackground: #e1f4ff;
  --sapNeutralBackground: #eff1f2;

  /* Semantic Borders */
  --sapPositiveBorderColor: #188918;
  --sapCriticalBorderColor: #df6e0c;
  --sapNegativeBorderColor: #ee3939;
  --sapInformativeBorderColor: #0070f2;

  /* Navigation */
  --sapNavigation_Background: #fff;
  --sapNavigation_TextColor: #1d2d3e;
  --sapNavigation_SelectedColor: #0070f2;
  --sapNavigation_HoverBackground: #eaeff5;

  /* List */
  --sapList_BorderColor: #e5e5e5;
  --sapList_HeaderBackground: #f5f6f7;
  --sapList_HoverBackground: #eaeff5;
  --sapList_SelectionBackgroundColor: #ebf5fe;

  /* Group */
  --sapGroup_TitleBorderColor: #e5e5e5;
  --sapGroup_ContentBorderColor: #e5e5e5;
  --sapGroup_ContentBackground: #fff;

  /* Toolbar */
  --sapToolbar_Background: #fff;

  /* Button */
  --sapButton_Background: transparent;
  --sapButton_BorderColor: #0070f2;
  --sapButton_TextColor: #0070f2;
  --sapButton_Hover_Background: #ebf5fe;
  --sapButton_Emphasized_Background: #0070f2;
  --sapButton_Emphasized_Hover: #0058c5;
  --sapButton_Emphasized_TextColor: #fff;

  /* Field */
  --sapField_Background: #fff;
  --sapField_BorderColor: #89919a;
  --sapField_Hover_BorderColor: #556b82;
  --sapField_Focus_BorderColor: #0070f2;
  --sapField_ReadOnly_Background: #f5f6f7;

  /* Fonts */
  --sapFontFamily: '72', '72full', Arial, Helvetica, sans-serif;
  --sapFontSize: 0.875rem;
  --sapFontSmallSize: 0.75rem;
  --sapFontLargeSize: 1rem;
  --sapFontHeader1Size: 2.25rem;
  --sapFontHeader2Size: 1.5rem;
  --sapFontHeader3Size: 1.25rem;
  --sapFontHeader4Size: 1.125rem;
  --sapFontHeader5Size: 1rem;

  /* Shadow - Fiori Horizon uses very subtle shadows */
  --sapContent_Shadow0: 0 0 0 0.0625rem rgba(85,107,130,0.12);
  --sapContent_Shadow1: 0 0.125rem 0.5rem 0 rgba(85,107,130,0.16);
  --sapContent_Shadow2: 0 0.625rem 1.875rem 0 rgba(85,107,130,0.15);

  /* Border Radius - Horizon uses larger radii */
  --sapElement_BorderCornerRadius: 0.75rem;
  --sapElement_BorderCornerRadius_Sm: 0.5rem;
  --sapPopover_BorderCornerRadius: 0.75rem;

  /* Tile */
  --sapTile_Background: #fff;
  --sapTile_BorderColor: transparent;

  /* Shell bar height */
  --sapShellBar_Height: 2.75rem;
  --sapSideNav_Width: 15rem;
}

/* --- Google Fonts fallback for SAP 72 --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --- Base / Global Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', var(--sapFontFamily);
  font-size: var(--sapFontSize);
  color: var(--sapTextColor);
  background-color: var(--sapBackgroundColor);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* ============================================================
   SHELL BAR (Top Header) - Fiori Horizon
   ============================================================ */
.fiori-shell-bar {
  background: var(--sapShell_Background);
  height: var(--sapShellBar_Height);
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  border-bottom: 1px solid var(--sapGroup_ContentBorderColor);
}

.fiori-shell-bar .shell-logo {
  color: var(--sapShell_TextColor);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0 0.25rem;
  letter-spacing: 0.01em;
}

.fiori-shell-bar .shell-logo:hover {
  color: var(--sapShell_TextColor);
  opacity: 0.92;
}

.fiori-shell-bar .shell-logo i {
  font-size: 1.125rem;
  color: var(--sapBrandColor);
}

.fiori-shell-bar .shell-spacer {
  flex: 1;
}

.fiori-shell-bar .shell-actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.fiori-shell-bar .shell-btn {
  background: transparent;
  border: none;
  color: var(--sapShell_TextColor);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.15s ease;
}

.fiori-shell-bar .shell-btn:hover {
  background: var(--sapShell_Hover);
  color: var(--sapShell_TextColor);
}

.fiori-shell-bar .shell-btn:active {
  background: var(--sapShell_Active);
}

.fiori-shell-bar .shell-btn .notif-badge {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  background: var(--sapNegativeColor);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  min-width: 0.875rem;
  height: 0.875rem;
  border-radius: 0.4375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.1875rem;
  line-height: 1;
  border: 1.5px solid #fff;
}

/* Shell User */
.fiori-shell-bar .shell-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sapShell_TextColor);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: var(--sapFontSize);
  text-decoration: none;
  transition: background 0.15s ease;
  margin-left: 0.25rem;
}

.fiori-shell-bar .shell-user:hover {
  background: var(--sapShell_Hover);
  color: var(--sapShell_TextColor);
}

.fiori-shell-bar .shell-user .user-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--sapBrandColor);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.fiori-shell-bar .shell-user > img {
  border: 1.5px solid var(--sapGroup_ContentBorderColor);
}

/* Shell Dropdown */
.fiori-shell-bar .dropdown-menu {
  border: none;
  border-radius: var(--sapPopover_BorderCornerRadius);
  box-shadow: var(--sapContent_Shadow2);
  padding: 0.375rem;
  margin-top: 0.375rem;
  min-width: 14rem;
}

.fiori-shell-bar .dropdown-item {
  font-size: var(--sapFontSize);
  padding: 0.5rem 0.75rem;
  color: var(--sapTextColor);
  border-radius: var(--sapElement_BorderCornerRadius_Sm);
}

.fiori-shell-bar .dropdown-item:hover {
  background: var(--sapNavigation_HoverBackground);
}

.fiori-shell-bar .dropdown-item i {
  width: 1.25rem;
  text-align: center;
  color: var(--sapContent_LabelColor);
}

.fiori-shell-bar .dropdown-item-text {
  padding: 0.375rem 0.75rem;
  font-size: var(--sapFontSmallSize);
}

.fiori-shell-bar .dropdown-divider {
  margin: 0.25rem 0;
  border-color: var(--sapList_BorderColor);
}

/* ============================================================
   SIDE NAVIGATION - Fiori Horizon
   ============================================================ */
.fiori-layout {
  display: flex;
  margin-top: var(--sapShellBar_Height);
  min-height: calc(100vh - var(--sapShellBar_Height));
}

.fiori-side-nav {
  width: var(--sapSideNav_Width);
  min-width: var(--sapSideNav_Width);
  background: var(--sapNavigation_Background);
  border-right: 1px solid var(--sapGroup_ContentBorderColor);
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  top: var(--sapShellBar_Height);
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 0.75rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(85,107,130,0.25) transparent;
}

.fiori-side-nav::-webkit-scrollbar {
  width: 0.25rem;
}

.fiori-side-nav::-webkit-scrollbar-track {
  background: transparent;
}

.fiori-side-nav::-webkit-scrollbar-thumb {
  background: rgba(85,107,130,0.25);
  border-radius: 0.125rem;
}

.fiori-side-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(85,107,130,0.4);
}

.fiori-nav-section {
  margin-bottom: 0.125rem;
}

.fiori-nav-header {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sapContent_LabelColor);
  padding: 0.625rem 1rem 0.3125rem;
  user-select: none;
}

.fiori-nav-item {
  display: flex;
  align-items: center;
  padding: 0.4375rem 1rem;
  color: var(--sapNavigation_TextColor);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 400;
  border-left: 0.1875rem solid transparent;
  transition: all 0.12s ease;
  gap: 0.625rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0.375rem;
  border-radius: 0 0.375rem 0.375rem 0;
}

.fiori-nav-item:hover {
  background: var(--sapNavigation_HoverBackground);
  color: var(--sapNavigation_TextColor);
  text-decoration: none;
}

.fiori-nav-item.active {
  background: var(--sapList_SelectionBackgroundColor);
  border-left-color: var(--sapNavigation_SelectedColor);
  color: var(--sapNavigation_SelectedColor);
  font-weight: 500;
}

.fiori-nav-item i {
  width: 1.125rem;
  text-align: center;
  font-size: 0.8125rem;
  flex-shrink: 0;
  opacity: 0.65;
}

.fiori-nav-item.active i {
  opacity: 1;
}

.fiori-nav-divider {
  height: 1px;
  background: var(--sapList_BorderColor);
  margin: 0.5rem 1rem;
  opacity: 0.6;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.fiori-content {
  flex: 1;
  margin-left: var(--sapSideNav_Width);
  padding: 1.25rem 1.5rem 2rem;
  min-height: calc(100vh - var(--sapShellBar_Height));
  background: var(--sapBackgroundColor);
}

/* ============================================================
   DYNAMIC PAGE HEADER (Object Page Style)
   ============================================================ */
.d-flex.justify-content-between.align-items-center.mb-4 {
  background: var(--sapBaseColor);
  margin: -1.25rem -1.5rem 1.25rem -1.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
}

.d-flex.justify-content-between.align-items-center.mb-4 h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sapTitleColor);
  margin: 0;
}

.d-flex.justify-content-between.align-items-center.mb-4 h4 i {
  color: var(--sapBrandColor);
  font-size: 1.125rem;
}

/* ============================================================
   CARDS (Fiori Horizon Card)
   ============================================================ */
.card {
  background: var(--sapBaseColor);
  border: none;
  border-radius: var(--sapElement_BorderCornerRadius);
  box-shadow: var(--sapContent_Shadow0);
  transition: box-shadow 0.2s ease;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--sapContent_Shadow1);
}

.card-header {
  background: var(--sapBaseColor) !important;
  border-bottom: 1px solid var(--sapList_BorderColor);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.875rem 1rem;
  color: var(--sapTitleColor) !important;
}

.card-header.bg-dark,
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-warning,
.card-header.bg-info,
.card-header.bg-secondary {
  background: var(--sapBaseColor) !important;
  color: var(--sapTitleColor) !important;
}

.card-header i {
  color: var(--sapBrandColor);
}

.card-body {
  padding: 1rem;
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--sapList_BorderColor);
  padding: 0.625rem 1rem;
}

/* ============================================================
   FIORI KPI TILE
   ============================================================ */
.fiori-tile {
  background: var(--sapTile_Background);
  border-radius: var(--sapElement_BorderCornerRadius);
  box-shadow: var(--sapContent_Shadow0);
  padding: 1rem 1.25rem;
  transition: box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.fiori-tile:hover {
  box-shadow: var(--sapContent_Shadow1);
}

.fiori-tile::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.25rem;
  border-radius: 0.25rem 0 0 0.25rem;
}

.fiori-tile.tile-info::before    { background: var(--sapInformativeColor); }
.fiori-tile.tile-success::before { background: var(--sapPositiveColor); }
.fiori-tile.tile-warning::before { background: var(--sapCriticalColor); }
.fiori-tile.tile-danger::before  { background: var(--sapNegativeColor); }
.fiori-tile.tile-neutral::before { background: var(--sapNeutralColor); }

.fiori-tile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.fiori-tile-title {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--sapContent_LabelColor);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fiori-tile-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.fiori-tile-icon.icon-info    { background: var(--sapInformativeBackground); color: var(--sapInformativeColor); }
.fiori-tile-icon.icon-success { background: var(--sapPositiveBackground); color: var(--sapPositiveColor); }
.fiori-tile-icon.icon-warning { background: var(--sapCriticalBackground); color: var(--sapCriticalColor); }
.fiori-tile-icon.icon-danger  { background: var(--sapNegativeBackground); color: var(--sapNegativeColor); }
.fiori-tile-icon.icon-neutral { background: var(--sapNeutralBackground); color: var(--sapNeutralColor); }

.fiori-tile-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--sapTitleColor);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.fiori-tile-subtitle {
  font-size: 0.75rem;
  color: var(--sapContent_LabelColor);
  margin-top: 0.25rem;
}

.fiori-tile-footer {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--sapContent_LabelColor);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.fiori-tile-footer .trend-up   { color: var(--sapPositiveColor); }
.fiori-tile-footer .trend-down { color: var(--sapNegativeColor); }

/* Compact stat card (Enhanced stats row) */
.fiori-stat-card {
  background: var(--sapTile_Background);
  border-radius: var(--sapElement_BorderCornerRadius);
  box-shadow: var(--sapContent_Shadow0);
  padding: 0.875rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  transition: box-shadow 0.2s ease;
}

.fiori-stat-card:hover {
  box-shadow: var(--sapContent_Shadow1);
}

.fiori-stat-card .stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.fiori-stat-card .stat-content {
  flex: 1;
  min-width: 0;
}

.fiori-stat-card .stat-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--sapContent_LabelColor);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fiori-stat-card .stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sapTitleColor);
  line-height: 1.3;
}

/* ============================================================
   TABLES (Fiori Analytical Table)
   ============================================================ */
.table {
  font-size: var(--sapFontSize);
  color: var(--sapTextColor);
  margin-bottom: 0;
}

.table > thead {
  background: var(--sapList_HeaderBackground);
}

.table > thead > tr > th,
.table-dark > thead > tr > th,
thead.table-dark > tr > th,
thead.table-light > tr > th {
  background: var(--sapList_HeaderBackground) !important;
  color: var(--sapContent_LabelColor) !important;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--sapGroup_TitleBorderColor) !important;
  padding: 0.625rem 0.875rem;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--sapList_BorderColor);
  vertical-align: middle;
}

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

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background: var(--sapList_HoverBackground) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(85,107,130,0.02);
}

/* Override table-dark */
.table-dark {
  --bs-table-bg: var(--sapList_HeaderBackground);
  --bs-table-color: var(--sapContent_LabelColor);
}

/* ============================================================
   BUTTONS (Fiori Horizon)
   ============================================================ */
.btn {
  font-family: inherit;
  font-size: var(--sapFontSize);
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.4375rem 0.875rem;
  transition: all 0.12s ease;
  border-width: 1px;
  letter-spacing: 0.01em;
}

/* Emphasized (Primary) */
.btn-primary {
  background: var(--sapButton_Emphasized_Background) !important;
  border-color: var(--sapButton_Emphasized_Background) !important;
  color: var(--sapButton_Emphasized_TextColor) !important;
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--sapButton_Emphasized_Hover) !important;
  border-color: var(--sapButton_Emphasized_Hover) !important;
  box-shadow: 0 0.125rem 0.5rem rgba(0,112,242,0.3);
}

/* Ghost (Outline Primary) */
.btn-outline-primary {
  color: var(--sapButton_TextColor);
  border-color: var(--sapButton_BorderColor);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--sapButton_Hover_Background);
  color: var(--sapButton_TextColor);
  border-color: var(--sapButton_BorderColor);
}

/* Transparent */
.btn-outline-secondary {
  color: var(--sapContent_LabelColor);
  border-color: var(--sapField_BorderColor);
  background: transparent;
}

.btn-outline-secondary:hover {
  background: var(--sapNeutralBackground);
  color: var(--sapTextColor);
  border-color: var(--sapField_Hover_BorderColor);
}

/* Positive */
.btn-success {
  background: var(--sapPositiveColor) !important;
  border-color: var(--sapPositiveColor) !important;
  color: #fff !important;
}

.btn-success:hover {
  background: #146d14 !important;
  border-color: #146d14 !important;
  box-shadow: 0 0.125rem 0.5rem rgba(24,137,24,0.3);
}

.btn-outline-success {
  color: var(--sapPositiveColor);
  border-color: var(--sapPositiveColor);
  background: transparent;
}

.btn-outline-success:hover {
  background: var(--sapPositiveBackground);
  color: var(--sapPositiveColor);
  border-color: var(--sapPositiveColor);
}

/* Negative */
.btn-danger {
  background: var(--sapNegativeColor) !important;
  border-color: var(--sapNegativeColor) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: #cc2d2d !important;
  border-color: #cc2d2d !important;
  box-shadow: 0 0.125rem 0.5rem rgba(238,57,57,0.3);
}

.btn-outline-danger {
  color: var(--sapNegativeColor);
  border-color: var(--sapNegativeColor);
  background: transparent;
}

.btn-outline-danger:hover {
  background: var(--sapNegativeBackground);
  color: var(--sapNegativeColor);
  border-color: var(--sapNegativeColor);
}

/* Warning / Critical */
.btn-warning {
  background: var(--sapCriticalColor) !important;
  border-color: var(--sapCriticalColor) !important;
  color: #fff !important;
}

.btn-warning:hover {
  background: #c75e0a !important;
  border-color: #c75e0a !important;
}

/* Info / Informative */
.btn-info {
  background: #1a9898 !important;
  border-color: #1a9898 !important;
  color: #fff !important;
}

/* Secondary / Default */
.btn-secondary {
  background: transparent !important;
  border-color: var(--sapField_BorderColor) !important;
  color: var(--sapTextColor) !important;
}

.btn-secondary:hover {
  background: var(--sapNeutralBackground) !important;
  border-color: var(--sapField_Hover_BorderColor) !important;
}

/* Small button */
.btn-sm {
  font-size: 0.8125rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
}

/* ============================================================
   BADGES (Fiori Object Status / Info Labels)
   ============================================================ */
.badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.badge.bg-primary { background: var(--sapInformativeBackground) !important; color: var(--sapInformativeColor) !important; border-color: rgba(0,112,242,0.25); }
.badge.bg-success { background: var(--sapPositiveBackground) !important; color: var(--sapPositiveColor) !important; border-color: rgba(24,137,24,0.25); }
.badge.bg-danger  { background: var(--sapNegativeBackground) !important; color: var(--sapNegativeColor) !important; border-color: rgba(238,57,57,0.25); }
.badge.bg-warning { background: var(--sapCriticalBackground) !important; color: #8a4b06 !important; border-color: rgba(223,110,12,0.25); }
.badge.bg-info    { background: #e6f6f6 !important; color: #1a7a7a !important; border-color: rgba(26,152,152,0.25); }
.badge.bg-secondary { background: var(--sapNeutralBackground) !important; color: var(--sapNeutralColor) !important; border-color: rgba(85,107,130,0.2); }
.badge.bg-dark    { background: #e8eaed !important; color: #32363a !important; border-color: rgba(50,54,58,0.2); }

/* Legacy custom colors */
.bg-orange {
  background: var(--sapCriticalBackground) !important;
  color: #8a4b06 !important;
  border: 1px solid rgba(223,110,12,0.25);
}

.bg-pink {
  background: #fce8f3 !important;
  color: #a12d82 !important;
  border: 1px solid rgba(161,45,130,0.25);
}

.bg-purple {
  background: #f0e8ff !important;
  color: #6c32a9 !important;
  border: 1px solid rgba(108,50,169,0.25);
}

.bg-teal {
  background: #e6f6f6 !important;
  color: #157a5b !important;
  border: 1px solid rgba(21,122,91,0.25);
}

.bg-indigo {
  background: #ece8ff !important;
  color: #5b2db5 !important;
  border: 1px solid rgba(91,45,181,0.25);
}

/* ============================================================
   FORMS (Fiori Horizon)
   ============================================================ */
.form-control,
.form-select {
  font-size: var(--sapFontSize);
  border: 1px solid var(--sapField_BorderColor);
  border-radius: 0.5rem;
  padding: 0.4375rem 0.75rem;
  color: var(--sapTextColor);
  background: var(--sapField_Background);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:hover,
.form-select:hover {
  border-color: var(--sapField_Hover_BorderColor);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sapField_Focus_BorderColor);
  box-shadow: 0 0 0 0.125rem rgba(0, 112, 242, 0.16);
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--sapField_ReadOnly_Background);
  border-color: var(--sapList_BorderColor);
  color: var(--sapContent_LabelColor);
}

.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sapContent_LabelColor);
  margin-bottom: 0.3125rem;
}

.form-text {
  font-size: var(--sapFontSmallSize);
  color: var(--sapContent_LabelColor);
}

.form-check-input:checked {
  background-color: var(--sapBrandColor);
  border-color: var(--sapBrandColor);
}

.input-group-text {
  background: var(--sapList_HeaderBackground);
  border-color: var(--sapField_BorderColor);
  color: var(--sapContent_LabelColor);
  font-size: var(--sapFontSize);
  border-radius: 0.5rem;
}

/* ============================================================
   MODALS (Fiori Horizon Dialog)
   ============================================================ */
.modal-content {
  border: none;
  border-radius: var(--sapPopover_BorderCornerRadius);
  box-shadow: var(--sapContent_Shadow2);
  overflow: hidden;
}

.modal-header {
  background: var(--sapBaseColor);
  border-bottom: 1px solid var(--sapList_BorderColor);
  padding: 1rem 1.25rem;
}

.modal-header.bg-primary,
.modal-header.bg-success,
.modal-header.bg-danger,
.modal-header.bg-warning,
.modal-header.bg-info,
.modal-header.bg-dark,
.modal-header.bg-secondary {
  background: var(--sapBaseColor) !important;
  color: var(--sapTitleColor) !important;
}

.modal-header.bg-primary .modal-title,
.modal-header.bg-success .modal-title,
.modal-header.bg-danger .modal-title,
.modal-header.bg-warning .modal-title,
.modal-header.bg-info .modal-title,
.modal-header.bg-dark .modal-title,
.modal-header.bg-secondary .modal-title {
  color: var(--sapTitleColor) !important;
}

.modal-header.bg-primary .btn-close-white,
.modal-header.bg-success .btn-close-white,
.modal-header.bg-danger .btn-close-white,
.modal-header.bg-warning .btn-close-white,
.modal-header.bg-info .btn-close-white {
  filter: none;
}

.modal-header.bg-primary .modal-title i,
.modal-header.bg-success .modal-title i,
.modal-header.bg-danger .modal-title i,
.modal-header.bg-warning .modal-title i,
.modal-header.bg-info .modal-title i {
  color: var(--sapBrandColor);
}

.modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sapTitleColor);
}

.modal-title i {
  color: var(--sapBrandColor);
}

.modal-body {
  padding: 1.25rem;
}

.modal-footer {
  background: var(--sapList_HeaderBackground);
  border-top: 1px solid var(--sapList_BorderColor);
  padding: 0.75rem 1.25rem;
}

.modal-backdrop.show {
  opacity: 0.5;
  background: #1d2d3e;
}

/* ============================================================
   ALERTS (Fiori Message Strip)
   ============================================================ */
.alert {
  border-radius: 0.5rem;
  font-size: var(--sapFontSize);
  padding: 0.75rem 1rem;
  border: none;
  border-left: 0.25rem solid;
}

.alert-danger {
  background: var(--sapNegativeBackground);
  border-left-color: var(--sapNegativeColor);
  color: #8a1e1e;
}

.alert-success {
  background: var(--sapPositiveBackground);
  border-left-color: var(--sapPositiveColor);
  color: #0d5e0d;
}

.alert-warning {
  background: var(--sapCriticalBackground);
  border-left-color: var(--sapCriticalColor);
  color: #8a4b06;
}

.alert-info {
  background: var(--sapInformativeBackground);
  border-left-color: var(--sapInformativeColor);
  color: #004da0;
}

/* ============================================================
   KPI CARDS (Dashboard - Legacy support)
   ============================================================ */
.card.border-primary { border: none !important; box-shadow: var(--sapContent_Shadow0); }
.card.border-info    { border: none !important; box-shadow: var(--sapContent_Shadow0); }
.card.border-success { border: none !important; box-shadow: var(--sapContent_Shadow0); }
.card.border-dark    { border: none !important; box-shadow: var(--sapContent_Shadow0); }
.card.border-warning { border: none !important; box-shadow: var(--sapContent_Shadow0); }
.card.border-danger  { border: none !important; box-shadow: var(--sapContent_Shadow0); }

.card.border-left-primary { border: none !important; border-left: 0.25rem solid var(--sapBrandColor) !important; box-shadow: var(--sapContent_Shadow0); }
.card.border-left-success { border: none !important; border-left: 0.25rem solid var(--sapPositiveColor) !important; box-shadow: var(--sapContent_Shadow0); }
.card.border-left-info    { border: none !important; border-left: 0.25rem solid #1a9898 !important; box-shadow: var(--sapContent_Shadow0); }
.card.border-left-warning { border: none !important; border-left: 0.25rem solid var(--sapCriticalColor) !important; box-shadow: var(--sapContent_Shadow0); }
.card.border-left-danger  { border: none !important; border-left: 0.25rem solid var(--sapNegativeColor) !important; box-shadow: var(--sapContent_Shadow0); }

.card.bg-success { background: var(--sapPositiveBackground) !important; border: none !important; }
.card.bg-danger  { background: var(--sapNegativeBackground) !important; border: none !important; }
.card.bg-warning { background: var(--sapCriticalBackground) !important; border: none !important; }
.card.bg-info    { background: #e6f6f6 !important; border: none !important; }
.card.bg-primary { background: var(--sapInformativeBackground) !important; border: none !important; }

.card.bg-success .card-body { color: #0d5e0d; }
.card.bg-danger .card-body  { color: #8a1e1e; }
.card.bg-warning .card-body { color: #8a4b06; }
.card.bg-info .card-body    { color: #1a7a7a; }
.card.bg-primary .card-body { color: #004da0; }

.card.bg-success .card-body h3,
.card.bg-danger .card-body h3,
.card.bg-warning .card-body h3,
.card.bg-info .card-body h3,
.card.bg-primary .card-body h3 {
  color: inherit;
}

.card.bg-success .card-header,
.card.bg-danger .card-header,
.card.bg-warning .card-header,
.card.bg-info .card-header,
.card.bg-primary .card-header {
  background: transparent !important;
  border-bottom-color: rgba(0,0,0,0.08) !important;
  color: inherit !important;
}

.card.bg-success .card-header i,
.card.bg-danger .card-header i,
.card.bg-warning .card-header i,
.card.bg-info .card-header i,
.card.bg-primary .card-header i {
  color: inherit;
}

/* ============================================================
   SPINNER / LOADING
   ============================================================ */
.spinner-border {
  color: var(--sapBrandColor);
}

.spinner-border.text-primary {
  color: var(--sapBrandColor) !important;
}

/* ============================================================
   PROGRESS BARS (Fiori Horizon)
   ============================================================ */
.progress {
  background: var(--sapNeutralBackground);
  border-radius: 0.375rem;
  overflow: hidden;
  height: 0.5rem;
}

.progress-bar {
  border-radius: 0.375rem;
}

.progress-bar.bg-success {
  background: var(--sapPositiveColor) !important;
}

/* ============================================================
   LINKS
   ============================================================ */
a {
  color: var(--sapLink_Color);
  text-decoration: none;
}

a:hover {
  color: var(--sapActiveColor);
  text-decoration: underline;
}

.text-decoration-none {
  color: var(--sapLink_Color);
}

.text-decoration-none:hover {
  text-decoration: none !important;
}

/* ============================================================
   TEXT UTILITIES (Fiori Semantic Colors)
   ============================================================ */
.text-primary  { color: var(--sapBrandColor) !important; }
.text-success  { color: var(--sapPositiveColor) !important; }
.text-danger   { color: var(--sapNegativeColor) !important; }
.text-warning  { color: var(--sapCriticalColor) !important; }
.text-info     { color: #1a9898 !important; }
.text-muted    { color: var(--sapContent_LabelColor) !important; }
.text-dark     { color: var(--sapTitleColor) !important; }

/* ============================================================
   BACKGROUNDS
   ============================================================ */
.bg-light { background: var(--sapBackgroundColor) !important; }

/* ============================================================
   DROPDOWN
   ============================================================ */
.dropdown-menu {
  border: none;
  border-radius: var(--sapPopover_BorderCornerRadius);
  box-shadow: var(--sapContent_Shadow2);
  padding: 0.375rem;
  font-size: var(--sapFontSize);
}

.dropdown-item {
  padding: 0.4375rem 0.75rem;
  font-size: var(--sapFontSize);
  color: var(--sapTextColor);
  border-radius: var(--sapElement_BorderCornerRadius_Sm);
}

.dropdown-item:hover {
  background: var(--sapNavigation_HoverBackground);
  color: var(--sapTextColor);
}

.dropdown-divider {
  border-color: var(--sapList_BorderColor);
  margin: 0.25rem 0;
}

/* ============================================================
   LIST GROUP (Fiori List)
   ============================================================ */
.list-group-item {
  border-color: var(--sapList_BorderColor);
  padding: 0.625rem 1rem;
  font-size: var(--sapFontSize);
  color: var(--sapTextColor);
}

.list-group-item-action:hover {
  background: var(--sapList_HoverBackground);
  color: var(--sapTextColor);
}

/* ============================================================
   PAGINATION
   ============================================================ */
.page-link {
  color: var(--sapBrandColor);
  border-color: var(--sapContent_ForegroundBorderColor);
  font-size: var(--sapFontSize);
  border-radius: 0.375rem;
}

.page-link:hover {
  background: var(--sapNavigation_HoverBackground);
  color: var(--sapActiveColor);
}

.page-item.active .page-link {
  background: var(--sapBrandColor);
  border-color: var(--sapBrandColor);
}

/* ============================================================
   SORTABLE TABLE HEADERS
   ============================================================ */
.sorting {
  cursor: pointer;
  position: relative;
  padding-right: 1.5rem !important;
  user-select: none;
}

.sorting::after {
  content: '\f0dc';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  right: 0.5rem;
  opacity: 0.25;
  font-size: 0.6875rem;
}

.sorting:hover {
  background: var(--sapList_HoverBackground) !important;
}

.sorting_asc::after {
  content: '\f0de';
  opacity: 1;
  color: var(--sapBrandColor);
}

.sorting_desc::after {
  content: '\f0dd';
  opacity: 1;
  color: var(--sapBrandColor);
}

/* ============================================================
   FOOTER (Fiori Info Bar)
   ============================================================ */
footer,
footer.bg-light {
  background: var(--sapBaseColor) !important;
  border-top: 1px solid var(--sapList_BorderColor);
  padding: 0.75rem 0 !important;
  margin-top: 0 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .fiori-layout {
    flex-direction: column;
  }

  .fiori-side-nav {
    width: 100%;
    min-width: 100%;
    position: relative;
    top: 0;
    border-right: none;
    border-bottom: 1px solid var(--sapGroup_ContentBorderColor);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  .fiori-side-nav.show {
    max-height: 100vh;
    padding: 0.5rem 0;
    overflow-y: auto;
  }

  .fiori-content {
    margin-left: 0;
    padding: 1rem;
  }

  .fiori-shell-bar .shell-menu-toggle {
    display: flex;
  }

  .d-flex.justify-content-between.align-items-center.mb-4 {
    margin: -1rem -1rem 1rem -1rem;
    padding: 0.875rem 1rem;
  }
}

@media (min-width: 992px) {
  .fiori-shell-bar .shell-menu-toggle {
    display: none;
  }
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
  width: 0.375rem;
  height: 0.375rem;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(85,107,130,0.2);
  border-radius: 0.1875rem;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(85,107,130,0.35);
}

/* ============================================================
   NOTIFICATIONS (Toast)
   ============================================================ */
.dmx-notification {
  border-radius: var(--sapElement_BorderCornerRadius) !important;
  box-shadow: var(--sapContent_Shadow2) !important;
  font-family: inherit !important;
  border: none !important;
}

/* ============================================================
   MISC UTILITIES
   ============================================================ */
/* Section title */
.fiori-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sapTitleColor);
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--sapBrandColor);
  margin-bottom: 1rem;
}

/* Heading defaults */
h3 {
  font-weight: 700;
  color: var(--sapTitleColor);
}

h4 {
  font-weight: 600;
  color: var(--sapTitleColor);
}

h5 {
  font-weight: 600;
  color: var(--sapTitleColor);
}

/* Navbar toggler override */
.navbar-toggler {
  border: none;
  padding: 0;
}

/* Table-responsive border radius */
.card > .table-responsive:first-child {
  border-radius: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0;
  overflow: hidden;
}

/* Empty state */
.text-center.py-4 .text-muted,
.text-center.py-3 .text-muted {
  font-size: 0.8125rem;
}

/* ============================================================
   FIORI-STYLE HORIZONTAL TABS (for card headers)
   ============================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--sapList_BorderColor);
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--sapContent_LabelColor);
  font-size: var(--sapFontSize);
  font-weight: 500;
  padding: 0.625rem 1rem;
  border-radius: 0;
}

.nav-tabs .nav-link:hover {
  border-color: transparent;
  border-bottom-color: var(--sapContent_LabelColor);
  color: var(--sapTextColor);
  background: transparent;
}

.nav-tabs .nav-link.active {
  border-color: transparent;
  border-bottom-color: var(--sapBrandColor);
  color: var(--sapBrandColor);
  background: transparent;
  font-weight: 600;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
  font-size: var(--sapFontSmallSize);
}

.breadcrumb-item a {
  color: var(--sapLink_Color);
}

.breadcrumb-item.active {
  color: var(--sapContent_LabelColor);
}

/* ============================================================
   TOOLTIP
   ============================================================ */
.tooltip-inner {
  background: #1d2d3e;
  border-radius: 0.375rem;
  font-size: var(--sapFontSmallSize);
  padding: 0.375rem 0.625rem;
}