/* Easy Rent Design System Overrides */
/* This file contains the redesigned styles that override the default Ant Design theme */

/* ============= Font Imports ============= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');

/* ============= CSS Variables ============= */
:root {
  --er-primary: #184FEA;
  --er-primary-hover: #1444D0;
  --er-primary-light: rgba(24, 79, 234, 0.08);
  --er-text-primary: #000000;
  --er-text-secondary: #4B5563;
  --er-text-muted: #9CA3AF;
  --er-background: #F9FAFB;
  --er-border: #E5E7EB;
  --er-border-light: #F3F4F6;
  --er-success: #10B981;
  --er-warning: #F59E0B;
  --er-error: #EF4444;
  --er-radius-sm: 8px;
  --er-radius-md: 12px;
  --er-radius-lg: 16px;
  --er-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --er-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  
  /* Form Elements */
  --er-input-height: 48px;
  --er-input-height-sm: 40px;
  --er-input-height-lg: 56px;
  --er-input-border: #E2E8F0;
  --er-input-border-hover: #CBD5E1;
  --er-input-border-focus: #184FEA;
  --er-input-focus-shadow: 0 0 0 3px rgba(24, 79, 234, 0.1);
  --er-input-bg: #FFFFFF;
  --er-input-bg-disabled: #F8FAFC;
  --er-input-placeholder: rgba(114, 132, 154, 0.6);
  
  /* Search Card Tokens */
  --er-search-card-padding: 20px 24px;
  --er-search-card-padding-mobile: 16px;
  --er-search-form-gap: 16px;
  --er-search-form-gap-mobile: 12px;
  --er-element-height: 48px;
}

/* ============= Page Header - Universal ============= */
.er-page-header {
  margin: 0;
  padding: 0;
}

.er-page-header h1 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary, #000000) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

@media (max-width: 768px) {
  .er-page-header h1 {
    font-size: 24px !important;
  }
}

/* ============= Ant Card Margin Reset ============= */
.ant-card {
  margin-bottom: 0 !important;
}

/* ============= Ant Badge Scroll Number Fix ============= */
.ant-scroll-number-only,
.ant-scroll-number-only > p.ant-scroll-number-only-unit {
  height: auto !important;
}

/* ============= Base Typography ============= */
/* Override Poppins from compiled theme files - must use !important */
*,
*::before,
*::after {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.ant-card-head-title,
.ant-modal-title,
.ant-drawer-title {
  font-family: 'Outfit', sans-serif !important;
  color: var(--er-text-primary);
}

/* ============= Full Height Layout ============= */
.full-height-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: row;
}

.main-content-layout {
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Smooth content slide when sidebar toggles */
  transition: padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              padding-right 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.main-content-layout .app-content {
  flex: 1;
  padding: 32px;
  margin-top: 0 !important;
}

/* ============= Full Height Sidebar ============= */
.side-nav.full-height {
  position: fixed !important;
  left: 0;
  top: 0;
  bottom: 0;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex;
  flex-direction: column;
  z-index: 100;
  background-color: #FFFFFF !important;
  border-right: 1px solid var(--er-border) !important;
  box-shadow: none !important;
  /* Smooth sidebar width transition */
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ant Design Sider transition override */
.ant-layout-sider {
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              flex 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.side-nav.full-height .ant-layout-sider-children {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Sidebar Header (Logo) - no border */
.sidebar-header {
  padding: 20px 24px;
  border-bottom: none;
  flex-shrink: 0;
  transition: padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed sidebar header centering */
.ant-layout-sider-collapsed .sidebar-header {
  padding: 20px 16px;
  display: flex;
  justify-content: center;
}

.sidebar-header .logo {
  width: auto !important;
  height: auto;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
}

.sidebar-header .logo img {
  height: 22px;
  width: auto;
}

/* Sidebar Menu */
.sidebar-menu {
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Sidebar Footer (Profile) */
.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--er-border);
  flex-shrink: 0;
  background: #FAFAFA;
}

/* ============= Sidebar Profile ============= */
.sidebar-profile-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--er-radius-sm);
  cursor: pointer;
  transition: background 0.2s;
}

.sidebar-profile-trigger:hover {
  background: var(--er-primary-light);
}

.sidebar-profile-info {
  flex: 1;
  min-width: 0;
}

.sidebar-profile-name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--er-text-primary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-company {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--er-text-secondary);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-icon {
  color: var(--er-text-muted);
  flex-shrink: 0;
}

/* Sidebar Profile Dropdown */
.sidebar-profile-dropdown {
  background: #FFFFFF;
  border-radius: var(--er-radius-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  overflow: hidden;
}

.profile-dropdown-header {
  padding: 20px;
  border-bottom: 1px solid var(--er-border);
}

.profile-dropdown-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.profile-dropdown-text {
  flex: 1;
}

.profile-dropdown-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--er-text-primary);
  display: block;
}

.profile-dropdown-company {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary);
}

.profile-dropdown-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.profile-dropdown-plan .plan-badge {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--er-primary);
  background: var(--er-primary-light);
  padding: 4px 10px;
  border-radius: 4px;
}

.profile-dropdown-plan a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--er-primary);
}

.profile-dropdown-stats .stat-row {
  margin-bottom: 12px;
}

.profile-dropdown-stats .stat-row:last-child {
  margin-bottom: 0;
}

.profile-dropdown-stats .stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--er-text-secondary);
  display: block;
  margin-bottom: 6px;
}

.profile-dropdown-stats .stat-progress {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-dropdown-stats .progress-track {
  flex: 1;
  height: 6px;
  background: var(--er-border);
  border-radius: 3px;
  overflow: hidden;
}

.profile-dropdown-stats .progress-fill {
  height: 100%;
  background: var(--er-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.profile-dropdown-stats .stat-value {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--er-text-primary);
  min-width: 50px;
  text-align: right;
}

.profile-dropdown-body {
  padding: 8px;
}

.profile-dropdown-body .ant-menu {
  border: none !important;
  background: transparent !important;
}

.profile-dropdown-body .ant-menu-item {
  height: 40px !important;
  line-height: 40px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: var(--er-radius-sm) !important;
}

.profile-dropdown-body .ant-menu-item a,
.profile-dropdown-body .ant-menu-item > span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--er-text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.profile-dropdown-body .ant-menu-item:hover {
  background: var(--er-background) !important;
}

/* ============= Menu Styling ============= */
.ant-menu {
  font-family: 'Inter', sans-serif !important;
  background: transparent !important;
  border: none !important;
  /* Smooth menu transition */
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ant-menu-item-group-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #1F2937 !important;
  padding: 20px 16px 8px !important;
  /* Smooth fade out when collapsed */
  transition: opacity 0.2s ease, padding 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ant-menu-item,
.ant-menu-submenu-title {
  height: 44px !important;
  line-height: 44px !important;
  margin: 2px 8px !important;
  padding: 0 16px !important;
  border-radius: var(--er-radius-sm) !important;
  color: #111827 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  /* Smooth transitions for all states including collapse */
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.15s ease,
              color 0.15s ease,
              width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Nav text smooth fade */
.nav-text {
  transition: opacity 0.2s ease, width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap;
  overflow: hidden;
}

/* Menu icon wrapper for proper alignment */
.menu-icon-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  /* Smooth margin transition for collapse */
  transition: margin 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.menu-icon-wrapper .menu-icon {
  width: 20px !important;
  height: 20px !important;
  color: #374151 !important;
  transition: color 0.15s ease, transform 0.2s ease !important;
}

/* Subtle scale effect on hover */
.ant-menu-item:hover .menu-icon-wrapper .menu-icon {
  transform: scale(1.05);
}

/* Menu icons - Lucide React */
.ant-menu-item .menu-icon,
.ant-menu-submenu-title .menu-icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  color: #374151 !important;
  transition: color 0.15s ease !important;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
  font-size: 20px !important;
  margin-right: 12px !important;
  color: #374151 !important;
  transition: color 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

.ant-menu-item:hover,
.ant-menu-submenu-title:hover {
  background: #F3F4F6 !important;
  color: #111827 !important;
}

.ant-menu-item:hover .anticon,
.ant-menu-submenu-title:hover .anticon {
  color: #374151 !important;
}

.ant-menu-item-selected,
.ant-menu-item.ant-menu-item-selected {
  background: var(--er-primary-light) !important;
  color: var(--er-primary) !important;
  font-weight: 600 !important;
}

.ant-menu-item-selected .menu-icon,
.ant-menu-item.ant-menu-item-selected .menu-icon,
.ant-menu-item-selected .anticon,
.ant-menu-item.ant-menu-item-selected .anticon {
  color: var(--er-primary) !important;
}

.ant-menu-item-selected::after,
.ant-menu-item.ant-menu-item-selected::after {
  display: none !important;
}

/* Submenu */
.ant-menu-sub.ant-menu-inline {
  background: transparent !important;
}

.ant-menu-sub.ant-menu-inline .ant-menu-item {
  padding-left: 48px !important;
  font-size: 13px !important;
}

/* ============= Dashboard Styles ============= */
.dashboard {
  padding: 0;
}

.dashboard .dashboard-header {
  margin-bottom: 32px;
}

.dashboard .dashboard-header .welcome-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary) !important;
  margin: 0 0 4px 0 !important;
}

.dashboard .dashboard-header .welcome-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: var(--er-text-secondary) !important;
  margin: 0 !important;
}

/* Stats Cards Container */
.dashboard .top-data-display {
  width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

/* Dashboard Row Layouts */
.dashboard-row-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.dashboard-row-two-columns .ant-card {
  border-radius: var(--er-radius-md) !important;
  border: 1px solid var(--er-border) !important;
  box-shadow: var(--er-shadow-sm) !important;
}

.dashboard-row-two-columns .ant-card .ant-card-head {
  border-bottom: 1px solid var(--er-border-light) !important;
  padding: 16px 24px !important;
  min-height: auto !important;
}

.dashboard-row-two-columns .ant-card .ant-card-head-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary) !important;
  padding: 0 !important;
}

.dashboard-row-two-columns .ant-card .ant-card-body {
  padding: 12px 20px !important;
}

.dashboard-row-full-width {
  width: 100%;
}

.dashboard-row-full-width .ant-card {
  width: 100%;
  border-radius: var(--er-radius-md) !important;
  border: 1px solid var(--er-border) !important;
  box-shadow: var(--er-shadow-sm) !important;
}

.dashboard-row-full-width .ant-card .ant-card-head {
  border-bottom: 1px solid var(--er-border-light) !important;
  padding: 16px 24px !important;
  min-height: auto !important;
}

.dashboard-row-full-width .ant-card .ant-card-head-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary) !important;
  padding: 0 !important;
}

.dashboard-row-full-width .ant-card .ant-card-body {
  padding: 12px 20px !important;
}

/* Stats Cards (Numbers.js) */
.dashboard .top-data-display {
  margin-bottom: 24px;
}

.dashboard .top-data-display .ant-card {
  width: 25%;
  border-radius: var(--er-radius-md) !important;
  border: 1px solid var(--er-border) !important;
  box-shadow: var(--er-shadow-sm) !important;
  transition: all 0.2s ease !important;
}

.dashboard .top-data-display .ant-card:hover {
  box-shadow: var(--er-shadow-md) !important;
  transform: translateY(-2px);
}

.dashboard .top-data-display .ant-card .ant-card-body {
  padding: 18px !important;
}

/* Stat Card Content */
.dashboard .stat-card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.dashboard .stat-card-content .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 18px;
}

.dashboard .stat-card-content .stat-icon.green {
  background: rgba(16, 185, 129, 0.1);
  color: var(--er-success);
}

.dashboard .stat-card-content .stat-icon.blue {
  background: var(--er-primary-light);
  color: var(--er-primary);
}

.dashboard .stat-card-content .stat-icon.gold {
  background: rgba(245, 158, 11, 0.1);
  color: var(--er-warning);
}

.dashboard .stat-card-content .stat-icon.volcano,
.dashboard .stat-card-content .stat-icon.red {
  background: rgba(239, 68, 68, 0.1);
  color: var(--er-error);
}

.dashboard .stat-card-content .stat-value {
  font-family: 'Outfit', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--er-text-primary) !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
}

.dashboard .stat-card-content .stat-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--er-text-secondary) !important;
  font-weight: 400 !important;
}

/* Data Cards (Do akceptacji, W trakcie, Dostępne) */
.dashboard .bottom-data-display .ant-card {
  width: 33%;
  border-radius: var(--er-radius-md) !important;
  border: 1px solid var(--er-border) !important;
  box-shadow: var(--er-shadow-sm) !important;
}

.dashboard .bottom-data-display .ant-card .ant-card-head {
  border-bottom: 1px solid var(--er-border-light) !important;
  padding: 16px 24px !important;
  min-height: auto !important;
}

.dashboard .bottom-data-display .ant-card .ant-card-head-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary) !important;
  padding: 0 !important;
}

.dashboard .bottom-data-display .ant-card .ant-card-body {
  padding: 16px 24px !important;
}

/* ============= Booking Items - New Unified Layout ============= */
.booking-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--er-border-light);
}

.booking-item:last-child {
  border-bottom: none;
}

/* Clickable booking items */
.booking-item.clickable {
  cursor: pointer;
  transition: background 0.15s ease;
  margin: 0 -24px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--er-border-light);
  border-radius: 0;
}

.booking-item.clickable:first-child {
  border-radius: var(--er-radius-sm) var(--er-radius-sm) 0 0;
}

.booking-item.clickable:last-child {
  border-bottom: none;
  border-radius: 0 0 var(--er-radius-sm) var(--er-radius-sm);
}

.booking-item.clickable:only-child {
  border-radius: var(--er-radius-sm);
}

.booking-item.clickable:hover {
  background: var(--er-background);
}

.booking-item-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--er-background);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--er-text-secondary);
  flex-shrink: 0;
}

.booking-item-icon.available {
  background: rgba(16, 185, 129, 0.1);
  color: var(--er-success);
}

.booking-item-icon.late {
  background: rgba(239, 68, 68, 0.1);
  color: var(--er-error);
}

.booking-item-content {
  flex: 1;
  min-width: 0;
}

.booking-item-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.booking-item-main .car-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--er-text-primary);
}

.booking-item-main .plate {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary);
}

.booking-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.booking-item-meta span {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-muted);
}

.booking-item-meta .badge-late {
  background: rgba(239, 68, 68, 0.1);
  color: var(--er-error) !important;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px !important;
  font-weight: 500;
}

/* Arrow for clickable items */
.booking-item-arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--er-text-muted);
  background: #FFFFFF;
  border: 1px solid var(--er-border);
  border-radius: var(--er-radius-sm);
  transition: all 0.2s ease;
}

.booking-item.clickable:hover .booking-item-arrow {
  border-color: var(--er-primary);
  color: var(--er-primary);
  background: var(--er-primary-light);
}

.booking-item-action {
  flex-shrink: 0;
}

/* ============= Show More Pill ============= */
.show-more-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px auto 4px;
  padding: 8px 16px;
  background: #FFFFFF;
  border: 1px solid var(--er-border);
  border-radius: 20px;
  color: var(--er-text-primary);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  width: fit-content;
}

.show-more-pill:hover {
  background: var(--er-primary-light);
  border-color: var(--er-primary);
  color: var(--er-primary);
}

.show-more-pill .count {
  background: var(--er-primary-light);
  color: var(--er-primary);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12px;
}

/* Container for show-more-pill */
.dashboard-row-two-columns .ant-card-body,
.dashboard-row-full-width .ant-card-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.dashboard-row-two-columns .show-more-pill,
.dashboard-row-full-width .show-more-pill {
  align-self: center;
}

/* ============= Button Styles ============= */
.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--er-border) !important;
  color: var(--er-text-primary) !important;
  border-radius: var(--er-radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  height: 36px !important;
  padding: 0 16px !important;
  transition: all 0.2s ease !important;
}

.btn-ghost:hover {
  border-color: var(--er-primary) !important;
  color: var(--er-primary) !important;
  background: var(--er-primary-light) !important;
}

/* Global Primary Button */
.ant-btn-primary {
  background: var(--er-primary) !important;
  border-color: var(--er-primary) !important;
  border-radius: var(--er-radius-sm) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  height: 36px !important;
  padding: 0 16px !important;
}

.ant-btn-primary:hover,
.ant-btn-primary:focus {
  background: var(--er-primary-hover) !important;
  border-color: var(--er-primary-hover) !important;
}

/* Legacy show more link - hidden */
.dashboard .show-more {
  display: none;
}

/* ============= Global Color Consistency ============= */
/* Links */
a {
  color: var(--er-primary);
}

a:hover {
  color: var(--er-primary-hover);
}

/* Progress bars */
.ant-progress-bg {
  background: var(--er-primary) !important;
}

/* Switches */
.ant-switch-checked {
  background: var(--er-primary) !important;
}

/* Checkboxes */
.ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--er-primary) !important;
  border-color: var(--er-primary) !important;
}

/* Radio */
.ant-radio-checked .ant-radio-inner {
  border-color: var(--er-primary) !important;
}

.ant-radio-checked .ant-radio-inner::after {
  background-color: var(--er-primary) !important;
}

/* Input focus */
.ant-input:focus,
.ant-input-focused,
.ant-input:hover {
  border-color: var(--er-primary) !important;
}

.ant-input:focus,
.ant-input-focused {
  box-shadow: 0 0 0 2px rgba(24, 79, 234, 0.1) !important;
}

/* Select focus */
.ant-select-focused .ant-select-selector,
.ant-select:hover .ant-select-selector {
  border-color: var(--er-primary) !important;
}

.ant-select-focused .ant-select-selector {
  box-shadow: 0 0 0 2px rgba(24, 79, 234, 0.1) !important;
}

/* Tabs */
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--er-primary) !important;
}

.ant-tabs-ink-bar {
  background: var(--er-primary) !important;
}

/* ============= Global Card Styling ============= */
.ant-card {
  border-radius: var(--er-radius-md) !important;
}

/* ================================================================
   FORM COMPONENTS - GLOBAL DESIGN SYSTEM
   ================================================================ */

/* ============= Form Field Container ============= */
.er-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.er-form-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--er-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============= Global Input Styles ============= */
.ant-input {
  height: var(--er-input-height) !important;
  border-radius: 10px !important;
  border: 1px solid var(--er-input-border) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 0 16px !important;
  transition: all 0.2s ease !important;
}

.ant-input::placeholder {
  color: var(--er-input-placeholder) !important;
}

.ant-input:hover {
  border-color: var(--er-input-border-hover) !important;
}

.ant-input:focus,
.ant-input-focused {
  border-color: var(--er-input-border-focus) !important;
  box-shadow: var(--er-input-focus-shadow) !important;
}

.ant-input:disabled {
  background: var(--er-input-bg-disabled) !important;
  cursor: not-allowed;
}

/* Input with Prefix/Suffix */
.ant-input-affix-wrapper {
  height: var(--er-input-height) !important;
  border-radius: 10px !important;
  border: 1px solid var(--er-input-border) !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.ant-input-affix-wrapper:hover {
  border-color: var(--er-input-border-hover) !important;
}

.ant-input-affix-wrapper:focus,
.ant-input-affix-wrapper-focused {
  border-color: var(--er-input-border-focus) !important;
  box-shadow: var(--er-input-focus-shadow) !important;
}

.ant-input-affix-wrapper .ant-input-prefix {
  margin-right: 12px;
  color: var(--er-primary);
}

.ant-input-affix-wrapper .ant-input-suffix {
  margin-left: 12px;
  color: var(--er-text-muted);
}

.ant-input-affix-wrapper > input.ant-input {
  height: auto !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Textarea */
.ant-input-textarea textarea.ant-input {
  min-height: 100px !important;
  padding: 12px 16px !important;
  height: auto !important;
  resize: vertical;
}

/* ============= Global DatePicker & TimePicker Styles ============= */
.ant-picker {
  height: var(--er-input-height) !important;
  border-radius: 10px !important;
  border: 1px solid var(--er-input-border) !important;
  padding: 0 16px !important;
  font-family: 'Inter', sans-serif !important;
  width: 100%;
  transition: all 0.2s ease !important;
}

.ant-picker:hover {
  border-color: var(--er-input-border-hover) !important;
}

.ant-picker-focused,
.ant-picker:focus {
  border-color: var(--er-input-border-focus) !important;
  box-shadow: var(--er-input-focus-shadow) !important;
}

.ant-picker .ant-picker-input > input {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--er-text-primary) !important;
}

.ant-picker .ant-picker-input > input::placeholder {
  color: var(--er-input-placeholder) !important;
}

.ant-picker-suffix {
  color: var(--er-primary) !important;
  opacity: 0.8;
}

.ant-picker-clear {
  color: var(--er-text-muted) !important;
}

/* DatePicker Dropdown Panel */
.ant-picker-dropdown {
  z-index: 1050 !important;
}

.ant-picker-panel-container {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden;
}

.ant-picker-header {
  font-family: 'Inter', sans-serif !important;
  border-bottom: 1px solid var(--er-border-light) !important;
}

.ant-picker-header button {
  color: var(--er-text-secondary) !important;
}

.ant-picker-header button:hover {
  color: var(--er-primary) !important;
}

.ant-picker-content th {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--er-text-muted) !important;
}

.ant-picker-cell {
  font-family: 'Inter', sans-serif !important;
}

.ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
  border-color: var(--er-primary) !important;
}

.ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner {
  background: var(--er-primary) !important;
}

.ant-picker-today-btn {
  color: var(--er-primary) !important;
  font-family: 'Inter', sans-serif !important;
}

/* Time Picker Dropdown */
.ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
  background: var(--er-primary-light) !important;
  color: var(--er-primary) !important;
}

/* Range Picker */
.ant-picker-range {
  padding: 0 16px !important;
}

.ant-picker-range .ant-picker-active-bar {
  background: var(--er-primary) !important;
}

/* ============= Global Select Styles ============= */
.ant-select {
  font-family: 'Inter', sans-serif !important;
}

.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  height: var(--er-input-height) !important;
  border-radius: 10px !important;
  border: 1px solid var(--er-input-border) !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.2s ease !important;
}

.ant-select:hover:not(.ant-select-disabled) .ant-select-selector {
  border-color: var(--er-input-border-hover) !important;
}

.ant-select-focused:not(.ant-select-disabled) .ant-select-selector {
  border-color: var(--er-input-border-focus) !important;
  box-shadow: var(--er-input-focus-shadow) !important;
}

.ant-select-single .ant-select-selector .ant-select-selection-item,
.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
  line-height: calc(var(--er-input-height) - 2px) !important;
  font-size: 14px !important;
}

.ant-select-selection-placeholder {
  color: var(--er-input-placeholder) !important;
}

.ant-select-arrow {
  color: var(--er-text-muted) !important;
}

/* Select Dropdown */
.ant-select-dropdown {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
  padding: 8px !important;
  z-index: 1050 !important;
}

.ant-select-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background: var(--er-background) !important;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background: var(--er-primary-light) !important;
  color: var(--er-primary) !important;
  font-weight: 500 !important;
}

/* Multiple Select */
.ant-select-multiple .ant-select-selector {
  min-height: var(--er-input-height) !important;
  height: auto !important;
  padding: 4px 8px !important;
}

.ant-select-multiple .ant-select-selection-item {
  height: 28px !important;
  line-height: 26px !important;
  margin: 2px 4px 2px 0 !important;
  background: var(--er-primary-light) !important;
  border: none !important;
  border-radius: 6px !important;
  color: var(--er-primary) !important;
  font-weight: 500 !important;
}

.ant-select-multiple .ant-select-selection-item-remove {
  color: var(--er-primary) !important;
}

/* ============= Global Checkbox Styles ============= */
.ant-checkbox-wrapper {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--er-text-primary) !important;
  align-items: center !important;
}

.ant-checkbox {
  top: 0 !important;
}

.ant-checkbox-inner {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  border: 2px solid var(--er-input-border) !important;
  transition: all 0.2s ease !important;
}

.ant-checkbox:hover .ant-checkbox-inner {
  border-color: var(--er-primary) !important;
}

.ant-checkbox-checked .ant-checkbox-inner {
  background-color: var(--er-primary) !important;
  border-color: var(--er-primary) !important;
}

.ant-checkbox-checked .ant-checkbox-inner::after {
  border-color: #FFFFFF !important;
  width: 6px !important;
  height: 10px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -60%) rotate(45deg) !important;
  border-width: 2px !important;
}

.ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: var(--er-primary) !important;
  width: 10px !important;
  height: 10px !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Checkbox Group */
.ant-checkbox-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* ============= Global Radio Styles ============= */
.ant-radio-wrapper {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--er-text-primary) !important;
  align-items: center !important;
}

.ant-radio {
  top: 0 !important;
}

.ant-radio-inner {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--er-input-border) !important;
  transition: all 0.2s ease !important;
}

.ant-radio:hover .ant-radio-inner {
  border-color: var(--er-primary) !important;
}

.ant-radio-checked .ant-radio-inner {
  border-color: var(--er-primary) !important;
}

.ant-radio-checked .ant-radio-inner::after {
  background-color: var(--er-primary) !important;
  width: 10px !important;
  height: 10px !important;
  margin-top: -5px !important;
  margin-left: -5px !important;
}

/* Radio Button Group */
.ant-radio-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Radio Button Style */
.ant-radio-button-wrapper {
  height: var(--er-input-height) !important;
  line-height: calc(var(--er-input-height) - 2px) !important;
  padding: 0 20px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  border: 1px solid var(--er-input-border) !important;
}

.ant-radio-button-wrapper:first-child {
  border-radius: 10px !important;
}

.ant-radio-button-wrapper:last-child {
  border-radius: 10px !important;
}

.ant-radio-button-wrapper:not(:first-child)::before {
  display: none !important;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: var(--er-primary-light) !important;
  border-color: var(--er-primary) !important;
  color: var(--er-primary) !important;
}

/* ============= Global Switch Styles ============= */
.ant-switch {
  min-width: 44px !important;
  height: 24px !important;
  background: var(--er-input-border) !important;
}

.ant-switch-handle {
  width: 20px !important;
  height: 20px !important;
  top: 2px !important;
}

.ant-switch-handle::before {
  border-radius: 10px !important;
}

.ant-switch-checked {
  background: var(--er-primary) !important;
}

.ant-switch-checked .ant-switch-handle {
  left: calc(100% - 22px) !important;
}

/* ============= Global Button Styles ============= */
/* Primary Button with Gradient */
.er-btn-primary,
.ant-btn-primary {
  height: var(--er-input-height) !important;
  min-height: var(--er-input-height) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #184FEA 0%, #186DEA 100%) !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 0 24px !important;
  box-shadow: 0 4px 12px rgba(24, 79, 234, 0.25) !important;
  transition: all 0.2s ease !important;
}

.er-btn-primary:hover,
.ant-btn-primary:hover {
  background: linear-gradient(135deg, #1444D0 0%, #1460D0 100%) !important;
  box-shadow: 0 6px 16px rgba(24, 79, 234, 0.35) !important;
  transform: translateY(-1px);
}

.er-btn-primary:active,
.ant-btn-primary:active {
  transform: translateY(0);
}

/* Secondary/Ghost Button */
.er-btn-secondary,
.ant-btn-default {
  height: var(--er-input-height) !important;
  min-height: var(--er-input-height) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--er-input-border) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 0 20px !important;
  color: var(--er-text-primary) !important;
  transition: all 0.2s ease !important;
}

.er-btn-secondary:hover,
.ant-btn-default:hover {
  border-color: var(--er-primary) !important;
  color: var(--er-primary) !important;
  background: var(--er-primary-light) !important;
}

/* Text/Link Button */
.ant-btn-text,
.ant-btn-link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  color: var(--er-primary) !important;
}

.ant-btn-text:hover,
.ant-btn-link:hover {
  color: var(--er-primary-hover) !important;
  background: var(--er-primary-light) !important;
}

/* Danger Button */
.ant-btn-dangerous {
  background: var(--er-error) !important;
  border-color: var(--er-error) !important;
}

.ant-btn-dangerous:hover {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
}

/* Icon Button */
.er-btn-icon,
.ant-btn-icon-only {
  width: var(--er-input-height) !important;
  height: var(--er-input-height) !important;
  min-width: var(--er-input-height) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
}

/* Small Button */
.ant-btn-sm {
  height: var(--er-input-height-sm) !important;
  min-height: var(--er-input-height-sm) !important;
  font-size: 13px !important;
  padding: 0 16px !important;
}

/* Large Button */
.ant-btn-lg {
  height: var(--er-input-height-lg) !important;
  min-height: var(--er-input-height-lg) !important;
  font-size: 16px !important;
  padding: 0 32px !important;
}

/* ============= Form Validation States ============= */
.ant-form-item-has-error .ant-input,
.ant-form-item-has-error .ant-input-affix-wrapper,
.ant-form-item-has-error .ant-picker,
.ant-form-item-has-error .ant-select:not(.ant-select-disabled) .ant-select-selector {
  border-color: var(--er-error) !important;
}

.ant-form-item-has-error .ant-input:focus,
.ant-form-item-has-error .ant-input-affix-wrapper-focused,
.ant-form-item-has-error .ant-picker-focused,
.ant-form-item-has-error .ant-select-focused .ant-select-selector {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.ant-form-item-explain-error {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--er-error) !important;
  margin-top: 4px;
}

/* ============= Form Layout ============= */
.ant-form-item {
  margin-bottom: 20px !important;
}

.ant-form-item-label > label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--er-text-secondary) !important;
}

.ant-form-item-required::before {
  color: var(--er-error) !important;
}

/* ============= Dropdown Menu Global Styles ============= */
.ant-dropdown-menu {
  background: #FFFFFF !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
  padding: 8px !important;
  z-index: 1050 !important;
}

.ant-dropdown-menu-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.ant-dropdown-menu-item:hover {
  background: var(--er-background) !important;
}

.ant-dropdown-menu-item-selected {
  background: var(--er-primary-light) !important;
  color: var(--er-primary) !important;
}

/* ============= Modal Form Styling ============= */
.ant-modal-content {
  border-radius: var(--er-radius-lg) !important;
  overflow: hidden;
}

.ant-modal-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--er-border-light) !important;
}

.ant-modal-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.ant-modal-body {
  padding: 24px !important;
}

.ant-modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid var(--er-border-light) !important;
}

/* ============= Popover & Tooltip ============= */
.ant-popover-inner {
  border-radius: 10px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}

.ant-tooltip-inner {
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}

/* ============= Responsive ============= */
@media only screen and (max-width: 1200px) {
  .dashboard-row-two-columns {
    grid-template-columns: 1fr 1fr;
  }
  
  .dashboard .bottom-data-display {
    flex-wrap: wrap;
  }
  
  .dashboard .bottom-data-display .ant-card {
    width: 48%;
    margin-bottom: 16px;
  }
}

@media only screen and (max-width: 992px) {
  .dashboard-row-two-columns {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 768px) {
  .side-nav.full-height {
    display: none !important;
  }
  
  .main-content-layout {
    padding-left: 0 !important;
  }
  
  .main-content-layout .app-content {
    padding: 16px;
  }
  
  .dashboard .top-data-display {
    flex-wrap: wrap;
  }
  
  .dashboard .top-data-display .ant-card {
    width: 48%;
    margin-bottom: 16px;
  }

  .dashboard .bottom-data-display .ant-card {
    width: 100%;
  }
  
  .booking-item {
    flex-wrap: wrap;
  }
  
  .booking-item.clickable {
    margin: 0 -16px;
    padding: 16px;
  }
  
  .booking-item-arrow {
    width: 36px;
    height: 36px;
  }
}

@media only screen and (max-width: 500px) {
  .dashboard .dashboard-header .welcome-title {
    font-size: 24px !important;
  }

  .dashboard .top-data-display .ant-card {
    width: 100%;
  }
  
  .dashboard .stat-card-content .stat-value {
    font-size: 28px !important;
  }
  
  .show-more-pill {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* ============= Reports Section ============= */
.rentnetic-reports {
  border-radius: var(--er-radius-lg) !important;
  box-shadow: var(--er-shadow-sm) !important;
  border: 1px solid var(--er-border) !important;
}

.rentnetic-reports .ant-card-body {
  padding: 0 !important;
}

.rentnetic-reports > .ant-card-body > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--er-border);
  background: #FFFFFF;
  border-radius: var(--er-radius-lg) var(--er-radius-lg) 0 0;
}

.rentnetic-reports > .ant-card-body > header h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary) !important;
  margin: 0 !important;
}

.rentnetic-reports > .ant-card-body > header .selects {
  display: flex;
  gap: 12px;
}

.rentnetic-reports .ant-select {
  min-width: 140px;
}

.rentnetic-reports .ant-select .ant-select-selector {
  border-radius: var(--er-radius-sm) !important;
  border-color: var(--er-border) !important;
  height: 40px !important;
  display: flex;
  align-items: center;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

.rentnetic-reports .ant-select:hover .ant-select-selector,
.rentnetic-reports .ant-select-focused .ant-select-selector {
  border-color: var(--er-primary) !important;
}

/* Reports Table Styling */
.rentnetic-reports .reports-table {
  border-radius: 0 0 var(--er-radius-lg) var(--er-radius-lg);
  overflow: hidden;
}

.rentnetic-reports .reports-table .ant-table {
  border-radius: 0 !important;
}

.rentnetic-reports .reports-table .ant-table-thead > tr > th {
  background: var(--er-background) !important;
  border-bottom: 1px solid var(--er-border) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--er-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 14px 20px !important;
}

.rentnetic-reports .reports-table .ant-table-thead > tr > th:first-child {
  padding-left: 24px !important;
}

.rentnetic-reports .reports-table .ant-table-thead > tr > th:last-child {
  padding-right: 24px !important;
}

.rentnetic-reports .reports-table .ant-table-tbody > tr > td {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--er-text-primary) !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--er-border-light) !important;
  transition: background 0.2s ease;
}

.rentnetic-reports .reports-table .ant-table-tbody > tr > td:first-child {
  padding-left: 24px !important;
  font-weight: 500 !important;
}

.rentnetic-reports .reports-table .ant-table-tbody > tr > td:last-child {
  padding-right: 24px !important;
  font-weight: 600 !important;
  color: var(--er-primary) !important;
}

.rentnetic-reports .reports-table .ant-table-tbody > tr:hover > td {
  background: var(--er-primary-light) !important;
}

.rentnetic-reports .reports-table .ant-table-tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* Summary Row - neutral styling */
.rentnetic-reports .reports-table .ant-table-summary {
  background: var(--er-background) !important;
}

.rentnetic-reports .reports-table .ant-table-summary > tr > td {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary) !important;
  padding: 16px 20px !important;
  border-top: 1px solid var(--er-border) !important;
  border-bottom: none !important;
}

.rentnetic-reports .reports-table .ant-table-summary > tr > td:first-child {
  padding-left: 24px !important;
}

.rentnetic-reports .reports-table .ant-table-summary > tr > td:last-child {
  padding-right: 24px !important;
  font-size: 16px !important;
  color: var(--er-primary) !important;
}

/* Table container - remove bottom rounding */
.rentnetic-reports .reports-table .ant-table-container {
  border-radius: 0 !important;
}

.rentnetic-reports .reports-table .ant-table-content {
  border-radius: 0 !important;
}

/* Reports Page Layout */
.rentnetic-reports-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Page Header */
.reports-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.reports-page-header h1 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary) !important;
  margin: 0 !important;
}

.reports-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reports-header-controls .ant-select {
  min-width: 140px;
}

/* Stats Row */
.reports-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.reports-stat-card {
  border-radius: var(--er-radius-lg) !important;
  border: 1px solid var(--er-border) !important;
  box-shadow: var(--er-shadow-sm) !important;
}

.reports-stat-card .ant-card-body {
  padding: 18px !important;
}

.reports-stat-card .stat-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.reports-stat-card .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--er-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reports-stat-card .stat-icon.green {
  background: rgba(16, 185, 129, 0.12);
  color: var(--er-success);
}

.reports-stat-card .stat-icon.volcano {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
}

.reports-stat-card .stat-icon.gold {
  background: rgba(245, 158, 11, 0.12);
  color: var(--er-warning);
}

.reports-stat-card .stat-value {
  font-family: 'Outfit', sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary) !important;
  line-height: 1.2;
}

.reports-stat-card .stat-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--er-text-secondary) !important;
}

/* Chart Card */
.rentnetic-reports.reports-chart-card {
  border-radius: var(--er-radius-lg) !important;
  border: 1px solid var(--er-border) !important;
  box-shadow: var(--er-shadow-sm) !important;
  overflow: hidden;
}

.rentnetic-reports.reports-chart-card header {
  padding: 20px 24px 0;
}

.rentnetic-reports.reports-chart-card header h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary) !important;
  margin: 0 !important;
}

.rentnetic-reports.reports-chart-card .reports-chart {
  padding: 16px 24px 24px;
}

/* Table Card - no header variant */
.rentnetic-reports.reports-table-card.no-header {
  border-radius: var(--er-radius-lg) !important;
  border: 1px solid var(--er-border) !important;
  box-shadow: var(--er-shadow-sm) !important;
  overflow: hidden;
}

.rentnetic-reports.reports-table-card.no-header .ant-card-body {
  padding: 0 !important;
}

/* Table Actions Bar */
.rentnetic-reports .table-actions-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 24px;
  border-bottom: 1px solid var(--er-border-light);
}

/* Export Button */
.rentnetic-reports .export-button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: var(--er-radius-sm) !important;
  border: 1px solid var(--er-border) !important;
  background: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--er-text-primary) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.rentnetic-reports .export-button:hover {
  border-color: var(--er-primary) !important;
  color: var(--er-primary) !important;
  background: var(--er-primary-light) !important;
}

.rentnetic-reports .export-button .anticon,
.rentnetic-reports .export-button svg {
  flex-shrink: 0;
}

/* Standalone Pagination */
.rentnetic-reports .reports-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid var(--er-border);
  background: #FFFFFF;
}

.rentnetic-reports .pagination-info {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary);
}

.rentnetic-reports .pagination-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rentnetic-reports .pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--er-border);
  border-radius: var(--er-radius-sm);
  background: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--er-text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.rentnetic-reports .pagination-btn:hover:not(:disabled) {
  border-color: var(--er-primary);
  color: var(--er-primary);
}

.rentnetic-reports .pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rentnetic-reports .pagination-btn.active {
  background: var(--er-primary);
  border-color: var(--er-primary);
  color: #FFFFFF;
}

/* Empty state */
.rentnetic-reports .reports-table .ant-table-placeholder {
  padding: 48px 24px !important;
}

.rentnetic-reports .reports-table .ant-empty-description {
  font-family: 'Inter', sans-serif !important;
  color: var(--er-text-muted) !important;
}

/* Reports responsive */
@media only screen and (max-width: 768px) {
  .rentnetic-reports-page {
    gap: 16px;
  }

  .reports-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .reports-header-controls {
    width: 100%;
  }

  .reports-header-controls .ant-select {
    flex: 1;
    min-width: auto;
  }

  .reports-stats-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .reports-stat-card .stat-card-content {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 16px;
  }

  .reports-stat-card .stat-icon {
    flex-shrink: 0;
  }

  .rentnetic-reports.reports-chart-card header {
    padding: 16px 16px 0;
  }

  .rentnetic-reports.reports-chart-card .reports-chart {
    padding: 12px 16px 20px;
  }

  .rentnetic-reports .table-actions-bar {
    padding: 12px 16px;
  }

  .rentnetic-reports .reports-table .ant-table-thead > tr > th,
  .rentnetic-reports .reports-table .ant-table-tbody > tr > td {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }

  .rentnetic-reports .reports-table .ant-table-thead > tr > th:first-child,
  .rentnetic-reports .reports-table .ant-table-tbody > tr > td:first-child {
    padding-left: 16px !important;
  }

  .rentnetic-reports .reports-table .ant-table-thead > tr > th:last-child,
  .rentnetic-reports .reports-table .ant-table-tbody > tr > td:last-child {
    padding-right: 16px !important;
  }

  .rentnetic-reports .reports-pagination {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .rentnetic-reports .pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ================================================================
   AVAILABILITY PAGE STYLES
   ================================================================ */

.availability-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Page Header - Uses universal .er-page-header */

/* Search Card */
.availability-search-card {
  border-radius: var(--er-radius-lg, 12px);
  border: 1px solid var(--er-border, #E5E7EB);
  box-shadow: var(--er-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  background: #FFFFFF;
}

.availability-search-card .ant-card-body {
  padding: 20px 24px;
}

.availability-search-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.availability-search-form .er-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* Table Card - Uses universal .er-table-card */

.availability-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
  background: #FFFFFF;
}

.availability-table-header .result-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.availability-table-header .result-count {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  color: var(--er-text-secondary, #6B7280);
}

.availability-table-header .result-count strong {
  color: var(--er-text-primary, #1F2937);
  font-weight: 600;
}

.availability-table-header .result-period {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  color: var(--er-text-tertiary, #9CA3AF);
}

/* Table styles now use universal classes from ResponsiveTable.css:
   - .er-table-card__header (replaces .availability-table-header)
   - .er-pagination (replaces .availability-pagination)
   Table cell and header styles are inherited from the unified design tokens.
*/

/* Responsive Styles */
@media only screen and (max-width: 768px) {
  .availability-page {
    gap: 16px;
  }

  .availability-page-header h1 {
    font-size: 24px;
  }

  .availability-search-card .ant-card-body {
    padding: 16px;
  }

  .availability-search-form {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}

/* ============= Mobile Bottom Navigation Fix ============= */
.bottom-mobile-nav.ant-menu {
  background: #FFFFFF !important;
  border-top: 1px solid var(--er-border, #E5E7EB) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
}

.bottom-mobile-nav.ant-menu .ant-menu-item {
  background: transparent !important;
}

/* ============= Sidebar Horizontal Overflow Fix ============= */
.side-nav.full-height,
.side-nav.full-height .ant-layout-sider-children,
.sidebar-menu,
.sidebar-menu > div {
  overflow-x: hidden !important;
}

.side-nav .ant-menu {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.side-nav .ant-menu-item span,
.side-nav .ant-menu-submenu-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============= TopBar Integration ============= */
.top-bar + .app-content {
  margin-top: 0 !important;
}

/* ============= Collapsed Sidebar Menu ============= */
.ant-layout-sider-collapsed {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  flex: 0 0 80px !important;
}

/* Collapsed sidebar header - center logo */
.ant-layout-sider-collapsed .sidebar-header {
  padding: 20px 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 80px !important;
}

.ant-layout-sider-collapsed .sidebar-header .logo {
  width: 80px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ant-layout-sider-collapsed .sidebar-header .logo img {
  height: 32px !important;
  width: auto !important;
  margin: 0 auto !important;
}

/* ============= CRITICAL: Collapsed Sidebar Menu Centering Fix ============= */
/* Force all menu items to be centered from the START - no hover required */

/* Container width */
.ant-menu-inline-collapsed {
  width: 80px !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* Reset all group spacing */
.ant-menu-inline-collapsed .ant-menu-item-group {
  padding: 0 !important;
  margin: 0 !important;
}

/* Center items in group list */
.ant-menu-inline-collapsed .ant-menu-item-group > .ant-menu-item-group-list {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* MAIN FIX: Menu items - use !important on EVERYTHING to override Less styles */
.ant-menu-inline-collapsed .ant-menu-item {
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 4px auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
  border-radius: 8px !important;
  text-align: center !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  transition: background-color 0.2s ease !important;
}

/* Same for hover/active/focus/selected states */
.ant-menu-inline-collapsed .ant-menu-item:hover,
.ant-menu-inline-collapsed .ant-menu-item:active,
.ant-menu-inline-collapsed .ant-menu-item:focus,
.ant-menu-inline-collapsed .ant-menu-item-selected,
.ant-menu-inline-collapsed .ant-menu-item.ant-menu-item-selected {
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 4px auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  transform: none !important;
}

/* Submenu title same treatment */
.ant-menu-inline-collapsed .ant-menu-submenu-title {
  padding: 0 !important;
  margin: 4px auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Menu item link - always centered */
.ant-menu-inline-collapsed .menu-item-link {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

/* Hide text elements in collapsed menu */
.ant-menu-inline-collapsed .nav-text,
.ant-menu-inline-collapsed span.nav-text {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  visibility: hidden !important;
}

/* Hide group titles in collapsed */
.ant-menu-inline-collapsed .ant-menu-item-group-title {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Icon wrapper in collapsed - perfectly centered */
.ant-menu-inline-collapsed .menu-icon-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

.ant-menu-inline-collapsed .menu-icon-wrapper svg {
  display: block !important;
  margin: 0 !important;
}

.ant-menu-inline-collapsed .anticon {
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Submenu arrow hidden in collapsed */
.ant-menu-inline-collapsed .ant-menu-submenu-arrow {
  display: none !important;
}

/* Force center alignment on all child elements - BOTH default and hover */
.ant-menu-inline-collapsed .ant-menu-item > *,
.ant-menu-inline-collapsed .ant-menu-submenu-title > *,
.ant-menu-inline-collapsed .ant-menu-item:hover > *,
.ant-menu-inline-collapsed .ant-menu-submenu-title:hover > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure menu item link stays centered in all states */
.ant-menu-inline-collapsed .ant-menu-item .menu-item-link,
.ant-menu-inline-collapsed .ant-menu-item:hover .menu-item-link,
.ant-menu-inline-collapsed .ant-menu-item:active .menu-item-link,
.ant-menu-inline-collapsed .ant-menu-item-selected .menu-item-link {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Fix: Remove any transform or position changes on hover */
.ant-menu-inline-collapsed .ant-menu-item,
.ant-menu-inline-collapsed .ant-menu-item:hover,
.ant-menu-inline-collapsed .ant-menu-item:active,
.ant-menu-inline-collapsed .ant-menu-item-selected {
  transform: none !important;
  position: relative !important;
}

/* ============= Custom Collapsed Menu Tooltip ============= */
.collapsed-menu-tooltip .ant-tooltip-inner {
  background-color: #1F2937 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.collapsed-menu-tooltip .ant-tooltip-arrow-content {
  background-color: #1F2937 !important;
}

/* Hide default Ant Design collapsed menu tooltips */
.ant-menu-inline-collapsed-tooltip {
  display: none !important;
}

/* ============= Notification Dropdown ============= */
.ant-menu-inline .ant-menu-item,
.ant-menu-inline .ant-menu-submenu-title {
  overflow: visible !important;
}

/* Menu item link in expanded state */
.ant-menu-inline .menu-item-link {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  color: inherit !important;
}

.ant-menu-inline .menu-icon-wrapper {
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

.ant-menu-inline .nav-text {
  display: inline !important;
}

/* Fix menu item padding in expanded state */
.ant-menu-inline .ant-menu-item {
  padding-left: 16px !important;
}

/* ============= Notification Dropdown ============= */
.notification-dropdown {
  background: #FFFFFF;
  border-radius: var(--er-radius-md, 12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  min-width: 320px;
  max-width: 400px;
  overflow: hidden;
}

.notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--er-border, #E5E7EB);
}

.notification-dropdown-header h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--er-text-primary, #111827);
  margin: 0;
}

.notification-clear-btn {
  background: none;
  border: none;
  color: var(--er-primary, #184FEA);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--er-radius-sm, 8px);
  transition: background 0.15s ease;
}

.notification-clear-btn:hover {
  background: rgba(24, 79, 234, 0.08);
}

.notification-dropdown-body {
  max-height: 320px;
  overflow-y: auto;
}

.notification-dropdown-body .ant-list {
  padding: 0;
}

.notification-dropdown-body .ant-list-item {
  padding: 0 !important;
  border-bottom: 1px solid var(--er-border, #E5E7EB) !important;
}

.notification-dropdown-body .ant-list-item:last-child {
  border-bottom: none !important;
}

.notification-item-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  width: 100%;
  cursor: pointer;
  transition: background 0.15s ease;
}

.notification-item-content:hover {
  background: var(--er-background, #F9FAFB);
}

.notification-item-avatar {
  flex-shrink: 0;
}

.notification-icon-wrapper {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-icon-wrapper.notification-icon-primary {
  background: rgba(24, 79, 234, 0.1);
  color: var(--er-primary, #184FEA);
}

.notification-icon-wrapper.notification-icon-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}

.notification-icon-wrapper.notification-icon-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}

.notification-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notification-item-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--er-text-primary, #111827);
}

.notification-item-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary, #4B5563);
  line-height: 1.4;
}

.notification-item-time {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--er-text-muted, #9CA3AF);
}

.notification-empty {
  padding: 40px 20px;
  text-align: center;
}

.notification-empty img {
  width: 80px;
  height: 80px;
  opacity: 0.6;
}

.notification-empty p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--er-text-muted, #9CA3AF);
  margin-top: 16px;
  margin-bottom: 0;
}

.notification-dropdown-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--er-border, #E5E7EB);
  text-align: center;
}

.notification-dropdown-footer a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--er-primary, #184FEA);
  text-decoration: none;
}

.notification-dropdown-footer a:hover {
  text-decoration: underline;
}

/* ============= TopBar Icon Button ============= */
.top-bar__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  color: var(--er-text-secondary, #4B5563);
  transition: all 0.15s ease;
}

.top-bar__icon-btn:hover {
  background: var(--er-background, #F9FAFB);
  color: var(--er-text-primary, #111827);
}

.top-bar__icon-btn .ant-badge-count {
  background: var(--er-primary, #184FEA);
  box-shadow: none;
}

/* ============= Collapsed Sidebar Menu - FIX FOR ICON JUMPING ============= */
/* This section forces immediate layout calculation to prevent icons from jumping on hover */
/* Also includes smooth transition animations for collapse/expand */

.ant-menu-inline-collapsed {
  width: 80px !important;
  will-change: contents !important;
  contain: layout !important;
  /* Smooth width transition */
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hide group titles in collapsed state - with fade animation */
.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-title,
.ant-menu-inline-collapsed .ant-menu-item-group-title {
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  transition: opacity 0.15s ease, height 0.2s ease, padding 0.2s ease !important;
}

/* Item group list - center all children */
.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list,
.ant-menu-inline-collapsed .ant-menu-item-group > .ant-menu-item-group-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Base menu item styles - CRITICAL: same styles for ALL states */
.ant-menu-inline-collapsed .ant-menu-item,
.ant-menu-inline-collapsed > .ant-menu-item,
.ant-menu-inline-collapsed .ant-menu-item-group .ant-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 4px auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 8px !important;
  text-align: center !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  float: none !important;
  will-change: background-color, color !important;
  contain: layout style !important;
  overflow: visible !important;
}

/* Hover state - IDENTICAL layout, only colors change */
.ant-menu-inline-collapsed .ant-menu-item:hover,
.ant-menu-inline-collapsed > .ant-menu-item:hover,
.ant-menu-inline-collapsed .ant-menu-item-group .ant-menu-item:hover {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 4px auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #F3F4F6 !important;
}

/* Active/Focus state - IDENTICAL layout */
.ant-menu-inline-collapsed .ant-menu-item:active,
.ant-menu-inline-collapsed .ant-menu-item:focus,
.ant-menu-inline-collapsed .ant-menu-item.ant-menu-item-active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 4px auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Selected state - IDENTICAL layout */
.ant-menu-inline-collapsed .ant-menu-item-selected,
.ant-menu-inline-collapsed .ant-menu-item.ant-menu-item-selected {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 4px auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: var(--er-primary-light) !important;
}

/* Submenu title - same treatment */
.ant-menu-inline-collapsed .ant-menu-submenu-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 4px auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 8px !important;
  will-change: background-color, color !important;
  contain: layout style !important;
}

.ant-menu-inline-collapsed .ant-menu-submenu-title:hover {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 4px auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background: #F3F4F6 !important;
}

/* Menu item link inside - full area, centered */
.ant-menu-inline-collapsed .ant-menu-item .menu-item-link,
.ant-menu-inline-collapsed .ant-menu-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Icon wrapper - centered, no margin, smooth transition */
.ant-menu-inline-collapsed .menu-icon-wrapper,
.ant-menu-inline-collapsed .ant-menu-item .menu-icon-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  margin-right: 0 !important;
  width: 20px !important;
  height: 20px !important;
  transition: margin 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s ease !important;
}

/* Icon itself - with smooth color transition */
.ant-menu-inline-collapsed .menu-icon,
.ant-menu-inline-collapsed .ant-menu-item .menu-icon {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  color: #374151 !important;
  transition: color 0.15s ease, transform 0.2s ease !important;
}

.ant-menu-inline-collapsed .ant-menu-item:hover .menu-icon,
.ant-menu-inline-collapsed .ant-menu-item-selected .menu-icon {
  color: var(--er-primary) !important;
}

/* Anticon fallback */
.ant-menu-inline-collapsed .anticon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  margin-right: 0 !important;
  font-size: 20px !important;
}

/* Hide text completely - CRITICAL */
.ant-menu-inline-collapsed .nav-text,
.ant-menu-inline-collapsed .ant-menu-item .nav-text,
.ant-menu-inline-collapsed .ant-menu-item span.nav-text,
.ant-menu-inline-collapsed .ant-menu-submenu-title > span:not(.anticon):not(.menu-icon-wrapper) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide submenu arrow */
.ant-menu-inline-collapsed .ant-menu-submenu-arrow {
  display: none !important;
}

/* Disable default Ant Design collapsed tooltip */
.ant-menu-inline-collapsed-tooltip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Custom tooltip styling - text only, no icon */
.collapsed-menu-tooltip .ant-tooltip-inner {
  background-color: #1F2937 !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.collapsed-menu-tooltip .ant-tooltip-arrow-content {
  background-color: #1F2937 !important;
}

.collapsed-menu-tooltip .ant-tooltip-arrow::before {
  background-color: #1F2937 !important;
}

/* ============= Mobile Bottom Navigation - New Design System ============= */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72px;
  background: #FFFFFF;
  border-top: 1px solid var(--er-border, #E5E7EB);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 1000;
}

/* Nav Item */
.mobile-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 8px 4px;
  text-decoration: none;
  transition: all 0.2s ease;
  min-height: 56px;
  max-width: 80px;
}

.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item:focus {
  text-decoration: none;
}

.mobile-bottom-nav__item-icon {
  color: var(--er-text-muted, #9CA3AF);
  transition: color 0.2s ease, transform 0.2s ease;
}

.mobile-bottom-nav__item-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--er-text-muted, #9CA3AF);
  margin-top: 4px;
  transition: color 0.2s ease;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Active state */
.mobile-bottom-nav__item--active .mobile-bottom-nav__item-icon {
  color: var(--er-primary, #184FEA);
}

.mobile-bottom-nav__item--active .mobile-bottom-nav__item-label {
  color: var(--er-primary, #184FEA);
  font-weight: 600;
}

/* FAB Container */
.mobile-bottom-nav__fab-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 80px;
}

/* FAB Button */
.mobile-bottom-nav__fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #184FEA 0%, #186DEA 100%);
  box-shadow: 0 4px 16px rgba(24, 79, 234, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  top: -12px;
}

.mobile-bottom-nav__fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(24, 79, 234, 0.45);
}

.mobile-bottom-nav__fab:active {
  transform: scale(0.98);
}

.mobile-bottom-nav__fab-icon {
  color: #FFFFFF;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* FAB Open state - rotate icon 45deg to form X */
.mobile-bottom-nav__fab--open .mobile-bottom-nav__fab-icon {
  transform: rotate(45deg);
}

/* Dropdown */
.mobile-bottom-nav__dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  padding: 8px 0;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1001;
}

.mobile-bottom-nav__dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mobile-bottom-nav__dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-text-primary, #111827);
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
}

.mobile-bottom-nav__dropdown-item:hover {
  background: var(--er-background, #F9FAFB);
}

.mobile-bottom-nav__dropdown-item:active {
  background: var(--er-border-light, #F3F4F6);
}

.mobile-bottom-nav__dropdown-item-icon {
  color: var(--er-primary, #184FEA);
  flex-shrink: 0;
}

/* Hide old Ant Design mobile nav styles */
.bottom-mobile-nav {
  display: none !important;
}

/* Backdrop for dropdown (optional - adds subtle overlay when dropdown is open) */
.mobile-bottom-nav__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.mobile-bottom-nav__backdrop--open {
  opacity: 1;
  visibility: visible;
}

/* Responsive adjustments */
@media (max-width: 375px) {
  .mobile-bottom-nav {
    padding: 0 4px;
  }

  .mobile-bottom-nav__item {
    padding: 6px 2px;
  }

  .mobile-bottom-nav__item-label {
    font-size: 10px;
  }

  .mobile-bottom-nav__fab {
    width: 52px;
    height: 52px;
    top: -10px;
  }

  .mobile-bottom-nav__dropdown {
    min-width: 180px;
  }

  .mobile-bottom-nav__dropdown-item {
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* ================================================================
   PRIMARY & SECONDARY BUTTONS - GLOBAL FIX
   Fix text color and icon alignment
   ================================================================ */

/* Primary Button - White text + centered content */
.er-btn-primary,
.ant-btn.er-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 24px !important;
  background: linear-gradient(135deg, #184FEA 0%, #186DEA 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap;
  transition: all 0.2s ease !important;
}

.er-btn-primary:hover,
.er-btn-primary:focus,
.ant-btn.er-btn-primary:hover,
.ant-btn.er-btn-primary:focus {
  background: linear-gradient(135deg, #1545D4 0%, #155FD4 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(24, 79, 234, 0.3) !important;
}

.er-btn-primary span,
.ant-btn.er-btn-primary span {
  color: #FFFFFF !important;
}

.er-btn-primary svg,
.ant-btn.er-btn-primary svg {
  color: #FFFFFF !important;
  flex-shrink: 0;
}

/* Fix Ant Design icon wrapper in buttons */
.er-btn-primary .anticon,
.ant-btn.er-btn-primary .anticon {
  display: inline-flex !important;
  align-items: center !important;
  color: #FFFFFF !important;
}

/* Secondary Button */
.er-btn-secondary,
.ant-btn.er-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 24px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  color: #1F2937 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap;
  transition: all 0.2s ease !important;
}

.er-btn-secondary:hover,
.er-btn-secondary:focus,
.ant-btn.er-btn-secondary:hover,
.ant-btn.er-btn-secondary:focus {
  background: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #1F2937 !important;
}

.er-btn-secondary svg,
.ant-btn.er-btn-secondary svg {
  color: #64748B !important;
  flex-shrink: 0;
}

/* ================================================================
   ICON ALIGNMENT IN INPUTS - GLOBAL FIX
   ================================================================ */

/* Input prefix/suffix icon centering */
.ant-input-affix-wrapper .ant-input-prefix,
.ant-input-affix-wrapper .ant-input-suffix {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ant-input-affix-wrapper .ant-input-prefix svg,
.ant-input-affix-wrapper .ant-input-suffix svg {
  display: block;
}

/* Select suffixIcon alignment */
.ant-select .ant-select-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ant-select .ant-select-arrow svg {
  display: block;
}

/* DatePicker/TimePicker suffixIcon alignment */
.ant-picker .ant-picker-suffix {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ant-picker .ant-picker-suffix svg {
  display: block;
}

/* ================================================================
   RESERVATION MODAL - COMPLETE STYLING
   ================================================================ */

.reservation-modal .ant-modal-content {
  background: #FFFFFF !important;
  border-radius: 16px !important;
  overflow: hidden;
}

.reservation-modal .ant-modal-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  padding: 20px 24px !important;
}

.reservation-modal .ant-modal-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #000000 !important;
}

.reservation-modal .ant-modal-close {
  top: 16px;
  right: 16px;
}

.reservation-modal .ant-modal-close-x {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B !important;
  transition: color 0.2s ease;
}

.reservation-modal .ant-modal-close-x:hover {
  color: #1F2937 !important;
}

.reservation-modal .ant-modal-body {
  padding: 24px !important;
  background: #FFFFFF !important;
}

/* Form labels in modal */
.reservation-modal .er-form-label {
  color: #000000 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Form fields in modal */
.reservation-modal .er-form-field {
  margin-bottom: 16px;
}

.reservation-modal .er-form-field .ant-form-item {
  margin-bottom: 0 !important;
}

/* Input styling in modal */
.reservation-modal .ant-input,
.reservation-modal .ant-input-affix-wrapper {
  height: 48px !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
}

.reservation-modal .ant-input-affix-wrapper {
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
}

.reservation-modal .ant-input-affix-wrapper .ant-input-prefix,
.reservation-modal .ant-input-affix-wrapper .ant-input-suffix {
  display: flex !important;
  align-items: center !important;
}

/* Select styling in modal */
.reservation-modal .ant-select .ant-select-selector {
  height: 48px !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
}

.reservation-modal .ant-select .ant-select-arrow {
  display: flex !important;
  align-items: center !important;
}

/* DatePicker/TimePicker styling in modal */
.reservation-modal .ant-picker {
  height: 48px !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  padding: 0 16px !important;
}

.reservation-modal .ant-picker .ant-picker-suffix {
  display: flex !important;
  align-items: center !important;
}

/* Checkbox styling in modal - Gray instead of blue */
.reservation-modal .ant-checkbox-checked .ant-checkbox-inner {
  background-color: #64748B !important;
  border-color: #64748B !important;
}

.reservation-modal .ant-checkbox:hover .ant-checkbox-inner,
.reservation-modal .ant-checkbox-wrapper:hover .ant-checkbox-inner {
  border-color: #64748B !important;
}

.reservation-modal .ant-checkbox-checked::after {
  border-color: #64748B !important;
}

/* Switch (Slider) in modal - Gray when checked */
.reservation-modal .ant-switch-checked {
  background: #64748B !important;
}

.reservation-modal .ant-switch-checked:focus {
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.2) !important;
}

/* Alert styling in modal */
.reservation-modal .ant-alert {
  border-radius: 8px !important;
}

/* Footer buttons alignment */
.reservation-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding-top: 0 !important;
  border-top: none !important;
}

/* Add customer dropdown option */
.reservation-modal .default-select-option {
  padding: 12px 16px;
  color: #184FEA;
  font-weight: 500;
  cursor: pointer;
  border-top: 1px solid #E2E8F0;
  transition: background 0.15s ease;
}

.reservation-modal .default-select-option:hover {
  background: rgba(24, 79, 234, 0.05);
}

/* ================================================================
   UNIVERSAL SEARCH CARD SYSTEM
   Single Source of Truth for all search/filter cards
   ================================================================
   
   Variants:
   - .er-search-form--3col : Input + Select(200px) + Button
   - .er-search-form--4col : 4 equal columns (with labels)
   - .er-search-form--flex : Flexible layout with wrapping
   
   Usage:
   <Card className="er-search-card">
     <div className="er-search-form er-search-form--3col">
       <Input prefix={<Search />} />
       <Select className="er-search-select" />
       <Button className="er-btn-primary">Action</Button>
     </div>
   </Card>
   ================================================================ */

/* Base Search Card */
.er-search-card {
  background: #FFFFFF !important;
  border-radius: var(--er-radius-md, 12px) !important;
  border: 1px solid var(--er-border, #E5E7EB) !important;
  box-shadow: var(--er-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05)) !important;
}

.er-search-card .ant-card-body {
  padding: var(--er-search-card-padding, 20px 24px) !important;
}

/* ============================================
   TABLE CARD - UNIVERSAL SYSTEM
   ============================================ */
.er-table-card {
  background: #FFFFFF !important;
  border-radius: var(--er-radius-md, 12px) !important;
  border: 1px solid var(--er-border, #E5E7EB) !important;
  box-shadow: var(--er-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05)) !important;
  overflow: hidden;
}

.er-table-card .ant-card-body {
  padding: 0 !important;
}

/* Base Search Form */
.er-search-form {
  display: grid;
  gap: var(--er-search-form-gap, 16px);
  align-items: flex-end;
}

/* Variant: 3 columns (Input + Select 200px + Button) */
.er-search-form--3col {
  grid-template-columns: 1fr 200px auto;
}

/* Variant: 4 columns (4x equal, typically with labels) */
.er-search-form--4col {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Variant: Flex layout with wrapping */
.er-search-form--flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--er-search-form-gap, 16px);
  align-items: flex-end;
}

.er-search-form--flex > *:first-child {
  flex: 1;
  min-width: 200px;
}

.er-search-form--flex > .er-search-select {
  width: 200px;
  flex-shrink: 0;
}

/* ============================================
   Universal Element Heights (48px)
   ============================================ */

/* Input with prefix/suffix */
.er-search-form .ant-input-affix-wrapper {
  height: var(--er-element-height, 48px) !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.er-search-form .ant-input-affix-wrapper:hover {
  border-color: #CBD5E1 !important;
}

.er-search-form .ant-input-affix-wrapper:focus-within {
  border-color: var(--er-primary, #184FEA) !important;
  box-shadow: 0 0 0 3px rgba(24, 79, 234, 0.1) !important;
}

.er-search-form .ant-input-affix-wrapper input {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
}

.er-search-form .ant-input-affix-wrapper .ant-input-prefix {
  color: #9CA3AF !important;
  margin-right: 12px !important;
  display: flex !important;
  align-items: center !important;
}

/* Select */
.er-search-form .ant-select {
  height: var(--er-element-height, 48px) !important;
}

.er-search-form .ant-select .ant-select-selector {
  height: var(--er-element-height, 48px) !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.er-search-form .ant-select:hover .ant-select-selector {
  border-color: #CBD5E1 !important;
}

.er-search-form .ant-select-focused .ant-select-selector {
  border-color: var(--er-primary, #184FEA) !important;
  box-shadow: 0 0 0 3px rgba(24, 79, 234, 0.1) !important;
}

.er-search-form .ant-select .ant-select-selection-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: calc(var(--er-element-height, 48px) - 2px) !important;
}

.er-search-form .ant-select .ant-select-arrow {
  display: flex !important;
  align-items: center !important;
  color: #9CA3AF !important;
}

/* DatePicker & TimePicker */
.er-search-form .ant-picker {
  height: var(--er-element-height, 48px) !important;
  width: 100% !important;
  border-radius: 10px !important;
  border: 1px solid #E2E8F0 !important;
  padding: 0 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.er-search-form .ant-picker:hover {
  border-color: #CBD5E1 !important;
}

.er-search-form .ant-picker-focused {
  border-color: var(--er-primary, #184FEA) !important;
  box-shadow: 0 0 0 3px rgba(24, 79, 234, 0.1) !important;
}

.er-search-form .ant-picker input {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
}

.er-search-form .ant-picker-suffix {
  display: flex !important;
  align-items: center !important;
  color: #9CA3AF !important;
}

/* Primary Button in Search Form */
.er-search-form .er-btn-primary {
  height: var(--er-element-height, 48px) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #184FEA 0%, #186DEA 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(24, 79, 234, 0.25) !important;
  white-space: nowrap !important;
}

.er-search-form .er-btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(24, 79, 234, 0.35) !important;
}

.er-search-form .er-btn-primary svg {
  color: #FFFFFF !important;
  flex-shrink: 0 !important;
}

/* Form field with label */
.er-search-form .er-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
}

.er-search-form .er-form-label {
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1F2937 !important;
  line-height: 1.2 !important;
}

/* ============================================
   Tablet Responsive (769px - 1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .er-search-form--3col {
    grid-template-columns: 1fr 180px auto;
    gap: 12px;
  }

  .er-search-form--4col {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .er-search-card .ant-card-body {
    padding: 16px 20px !important;
  }
}

/* ============================================
   Mobile Responsive (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  .er-search-card .ant-card-body {
    padding: var(--er-search-card-padding-mobile, 16px) !important;
  }

  .er-search-form,
  .er-search-form--3col,
  .er-search-form--4col {
    grid-template-columns: 1fr !important;
    gap: var(--er-search-form-gap-mobile, 12px) !important;
  }

  .er-search-form--flex {
    flex-direction: column !important;
  }

  .er-search-form--flex > *,
  .er-search-form--flex > .er-search-select {
    width: 100% !important;
    min-width: unset !important;
  }

  .er-search-form .er-btn-primary {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================
   Plan Expiration Warning Banner
   ============================================ */
.er-plan-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--er-radius-md, 12px);
  margin-top: 8px;
  margin-bottom: 8px;
}

.er-plan-warning__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: #FEF3C7;
  border-radius: 50%;
  color: #D97706;
}

.er-plan-warning__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.er-plan-warning__title {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  font-weight: 600;
  color: #78350F;
  line-height: 1.4;
}

.er-plan-warning__description {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px;
  font-weight: 400;
  color: #92400E;
  line-height: 1.4;
}

.er-plan-warning__link {
  color: #B45309;
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
  transition: color 0.2s ease;
}

.er-plan-warning__link:hover {
  color: #92400E;
  text-decoration: underline;
}

/* Plan Warning Mobile */
@media (max-width: 576px) {
  .er-plan-warning {
    padding: 10px 12px;
    gap: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
  }
  
  .er-plan-warning__icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
  
  .er-plan-warning__icon svg {
    width: 16px;
    height: 16px;
  }
  
  .er-plan-warning__title {
    font-size: 13px;
  }
  
  .er-plan-warning__description {
    font-size: 12px;
  }
}

/* ============= Payment Page Styles ============= */

/* Payment status badge */
.er-payment-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Payment form with icon */
.er-payment-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary, #64748B);
}

.er-payment-form svg {
  color: var(--er-text-muted, #9CA3AF);
}

/* Payment link button */
.er-payment-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(24, 79, 234, 0.08);
  color: var(--er-primary, #184FEA);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.er-payment-link:hover {
  background: rgba(24, 79, 234, 0.15);
  color: var(--er-primary, #184FEA);
}

/* Amount styling */
.er-table-amount {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--er-text-primary, #1F2937);
}

/* ID styling - Unified across all tables */
.er-table-id {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--er-text-secondary, #64748B);
}

/* Muted text */
.er-text-muted {
  color: var(--er-text-muted, #9CA3AF);
}

/* Payments page specific */
.payments-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}

/* Payment mobile card status override */
.payments-page .er-mobile-card__status-badge {
  font-size: 11px !important;
}

/* ============= Settings Page Styles ============= */

/* Settings Layout */
.er-settings-layout {
  display: flex;
  gap: 24px;
  min-height: calc(100vh - 120px);
}

/* Settings Sidebar */
.er-settings-sidebar {
  width: 280px;
  min-width: 280px;
  background: #FFFFFF;
  border-radius: var(--er-radius-md, 12px);
  box-shadow: var(--er-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
  border: 1px solid var(--er-border-light, #F3F4F6);
  height: fit-content;
  position: sticky;
  top: 24px;
}

.er-settings-sidebar__header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-settings-sidebar__header h2 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary, #000) !important;
  margin: 0 !important;
}

/* Settings Navigation */
.er-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}

.er-settings-nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--er-radius-sm, 8px);
  font-family: 'Inter', sans-serif !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-text-secondary, #4B5563);
  text-decoration: none;
  transition: all 0.2s ease;
}

.er-settings-nav__item:hover {
  background: rgba(24, 79, 234, 0.04);
  color: var(--er-text-primary, #000);
}

.er-settings-nav__item--active {
  background: rgba(24, 79, 234, 0.08);
  color: var(--er-primary, #184FEA);
}

.er-settings-nav__item--active svg {
  color: var(--er-primary, #184FEA);
}

.er-settings-nav__item svg {
  flex-shrink: 0;
}

/* Settings Content */
.er-settings-content {
  flex: 1;
  min-width: 0;
}

/* Settings Page */
.er-settings-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Settings Header */
.er-settings-header h1 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary, #000) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.2 !important;
}

/* Settings Card */
.er-settings-card {
  background: #FFFFFF;
  border-radius: var(--er-radius-md, 12px) !important;
  box-shadow: var(--er-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04)) !important;
  border: 1px solid var(--er-border-light, #F3F4F6) !important;
}

.er-settings-card .ant-card-body {
  padding: 24px !important;
}

/* Settings Section */
.er-settings-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-settings-section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.er-settings-section__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.er-settings-section__header svg {
  color: var(--er-primary, #184FEA);
  flex-shrink: 0;
}

.er-settings-section__header h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary, #000) !important;
  margin: 0 !important;
}

/* Settings Form */
.er-settings-form .ant-form-item-label > label {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--er-text-secondary, #4B5563) !important;
}

.er-settings-form .ant-input,
.er-settings-form .ant-input-password,
.er-settings-form .ant-select-selector,
.er-settings-form .ant-input-number {
  height: 48px !important;
  border-radius: var(--er-radius-sm, 8px) !important;
}

.er-settings-form .ant-input-password .ant-input {
  height: auto !important;
}

.er-settings-form .ant-select-selector {
  display: flex !important;
  align-items: center !important;
}

/* Settings Actions */
.er-settings-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 24px;
  border-top: 1px solid var(--er-border-light, #F3F4F6);
  margin-top: 24px;
}

.er-settings-actions--inline {
  padding-top: 0;
  border-top: none;
  margin-top: 0;
  justify-content: flex-start;
  padding-bottom: 8px;
}

/* Settings Submit Button */
.er-settings-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 48px !important;
  padding: 0 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: var(--er-radius-sm, 8px) !important;
}

.er-settings-submit svg {
  flex-shrink: 0;
}

/* Info Box */
.er-info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: rgba(24, 79, 234, 0.04);
  border-radius: var(--er-radius-sm, 8px);
  border: 1px solid rgba(24, 79, 234, 0.1);
  margin-bottom: 20px;
}

.er-info-box__icon {
  color: var(--er-primary, #184FEA);
  flex-shrink: 0;
  margin-top: 2px;
}

.er-info-box__text {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--er-text-secondary, #4B5563) !important;
  margin: 0 !important;
}

.er-info-link {
  color: var(--er-primary, #184FEA);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.er-info-link:hover {
  text-decoration: underline;
  color: var(--er-primary-hover, #1444D0);
}

/* Code Box */
.er-code-box {
  background: #1E293B;
  border-radius: var(--er-radius-sm, 8px);
  padding: 16px;
  position: relative;
  margin-top: 16px;
  overflow-x: auto;
}

.er-code-box__copy {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  color: #E2E8F0;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.er-code-box__copy:hover {
  background: rgba(255, 255, 255, 0.2);
}

.er-code-box__content {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
  font-size: 12px !important;
  color: #E2E8F0 !important;
  margin: 0 !important;
  white-space: pre-wrap;
  word-break: break-all;
  padding-right: 40px;
}

/* Form Item */
.er-form-item {
  margin-bottom: 16px;
}

.er-form-item label {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--er-text-secondary, #4B5563) !important;
  margin-bottom: 8px !important;
}

/* Helper Text */
.er-helper-text {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--er-text-muted, #9CA3AF) !important;
  margin-top: 12px;
  line-height: 1.5;
}

.er-helper-text svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Switch List */
.er-switch-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Switch Item */
.er-switch-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #FAFBFC;
  border-radius: var(--er-radius-sm, 8px);
  border: 1px solid var(--er-border-light, #F3F4F6);
  gap: 16px;
}

.er-switch-item__label {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--er-text-primary, #1F2937) !important;
  flex: 1;
}

/* Settings Mobile Header */
.er-settings-mobile-header {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px 0;
}

.er-settings-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border: 1px solid var(--er-border, #E5E7EB);
  border-radius: var(--er-radius-sm, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
}

.er-settings-mobile-toggle:hover {
  background: var(--er-background, #F9FAFB);
}

.er-settings-mobile-toggle svg {
  color: var(--er-text-primary, #000);
}

.er-settings-mobile-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary, #000) !important;
  margin: 0 !important;
}

/* Settings Drawer */
.er-settings-drawer .ant-drawer-body {
  padding: 0 !important;
}

.er-settings-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.er-settings-drawer-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary, #000) !important;
}

.er-settings-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--er-text-secondary, #4B5563);
  transition: all 0.2s ease;
}

.er-settings-drawer-close:hover {
  background: var(--er-background, #F9FAFB);
  color: var(--er-text-primary, #000);
}

/* Settings Mobile Styles */
@media (max-width: 768px) {
  .er-settings-layout {
    flex-direction: column;
    gap: 0;
  }

  .er-settings-sidebar {
    display: none;
  }

  .er-settings-mobile-header {
    display: flex;
  }

  .er-settings-header--desktop {
    display: none;
  }

  .er-settings-header h1 {
    font-size: 24px !important;
  }

  .er-settings-card .ant-card-body {
    padding: 16px !important;
  }

  .er-settings-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
  }

  .er-settings-section__header {
    margin-bottom: 16px;
  }

  .er-settings-actions {
    padding-top: 20px;
    margin-top: 20px;
  }

  .er-settings-submit {
    width: 100%;
    justify-content: center !important;
  }

  .er-info-box {
    padding: 12px;
  }

  .er-info-box__text {
    font-size: 12px !important;
  }

  .er-switch-item {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .er-switch-item .ant-switch {
    align-self: flex-end;
  }

  .er-code-box {
    padding: 12px;
  }

  .er-code-box__content {
    font-size: 11px !important;
  }
}

/* ============= Contract Templates Styles ============= */

/* Contracts Page Layout */
.er-contracts-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Contract Editor Layout */
.er-contract-editor-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .er-contract-editor-layout {
    flex-direction: column;
    gap: 16px;
  }
}

/* Contract Editor Main Area */
.er-contract-editor {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Contract Card */
.er-contract-card {
  background: #FFFFFF;
  border-radius: var(--er-radius-md, 12px);
  box-shadow: var(--er-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
  border: 1px solid var(--er-border-light, #F3F4F6);
  padding: 24px;
}

@media (max-width: 768px) {
  .er-contract-card {
    padding: 16px;
  }
}

.er-contract-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-contract-card__header svg {
  color: var(--er-primary, #184FEA);
  flex-shrink: 0;
}

.er-contract-card__header h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary, #000) !important;
  margin: 0 !important;
  flex: 1;
}

.er-contract-card__variables-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08));
  color: var(--er-primary, #184FEA);
  border: none;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.er-contract-card__variables-btn:hover {
  background: rgba(24, 79, 234, 0.12);
}

/* Contract Sidebar */
.er-contract-sidebar {
  width: 320px;
  flex-shrink: 0;
  background: #FFFFFF;
  border-radius: var(--er-radius-md, 12px);
  box-shadow: var(--er-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
  border: 1px solid var(--er-border-light, #F3F4F6);
  padding: 20px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

@media (max-width: 768px) {
  .er-contract-sidebar {
    display: none;
  }
}

/* Variables Panel */
.er-variables__header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-variables__header h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary, #000) !important;
  margin: 0 0 4px 0 !important;
}

.er-variables__header p {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--er-text-muted, #9CA3AF);
  margin: 0;
}

/* Variable Section */
.er-variable-section {
  margin-bottom: 20px;
}

.er-variable-section:last-child {
  margin-bottom: 0;
}

.er-variable-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--er-text-secondary, #4B5563) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px !important;
}

.er-variable-section h4 svg {
  color: var(--er-text-muted, #9CA3AF);
}

/* Variable Chips Container */
.er-variable-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Variable Chip */
.er-variable-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1px solid var(--er-border, #E5E7EB);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--er-text-secondary, #4B5563);
  cursor: pointer;
  transition: all 0.2s ease;
}

.er-variable-chip:hover {
  background: #F1F5F9;
  border-color: var(--er-border, #E5E7EB);
}

.er-variable-chip--selected {
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08));
  border-color: var(--er-primary, #184FEA);
  color: var(--er-primary, #184FEA);
}

.er-variable-chip--selected:hover {
  background: rgba(24, 79, 234, 0.12);
  border-color: var(--er-primary, #184FEA);
}

.er-variable-chip--add {
  background: transparent;
  border-style: dashed;
  border-color: var(--er-primary, #184FEA);
  color: var(--er-primary, #184FEA);
}

.er-variable-chip--add:hover {
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08));
}

.er-variable-chip--own {
  position: relative;
  padding-right: 32px;
}

.er-variable-chip__delete {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--er-text-muted, #9CA3AF);
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
}

.er-variable-chip--own:hover .er-variable-chip__delete {
  opacity: 1;
}

.er-variable-chip__delete:hover {
  color: var(--er-error, #EF4444);
  background: rgba(239, 68, 68, 0.1);
}

/* Contract Actions */
.er-contract-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}

@media (max-width: 768px) {
  .er-contract-actions {
    flex-direction: column-reverse;
  }

  .er-contract-actions .ant-btn {
    width: 100%;
    justify-content: center !important;
  }
}

.er-contract-actions .ant-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--er-input-height, 48px);
  padding: 0 24px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--er-radius-sm, 8px);
}

.er-contract-actions .ant-btn a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}

/* WYSIWYG Editor Overrides */
.er-contract-editor-wrapper {
  border: 1px solid var(--er-border, #E5E7EB);
  border-radius: var(--er-radius-sm, 8px);
  overflow: hidden;
}

.er-wysiwyg-toolbar {
  border: none !important;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6) !important;
  background: #FAFBFC !important;
  padding: 8px 12px !important;
  margin: 0 !important;
}

.er-wysiwyg-toolbar .rdw-option-wrapper {
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  background: transparent !important;
  min-width: 28px;
  height: 28px;
}

.er-wysiwyg-toolbar .rdw-option-wrapper:hover {
  background: #FFFFFF !important;
  border-color: var(--er-border, #E5E7EB) !important;
}

.er-wysiwyg-toolbar .rdw-option-active {
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08)) !important;
  border-color: var(--er-primary, #184FEA) !important;
}

.er-wysiwyg-editor {
  min-height: 400px !important;
  padding: 16px !important;
  background: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--er-text-primary, #000) !important;
}

@media (max-width: 768px) {
  .er-wysiwyg-editor {
    min-height: 300px !important;
    padding: 12px !important;
  }
}

/* Variables Drawer */
.er-variables-drawer .ant-drawer-body {
  padding: 0 !important;
}

.er-variables-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-variables-drawer__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--er-text-primary, #000);
}

.er-variables-drawer__title svg {
  color: var(--er-primary, #184FEA);
}

.er-variables-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--er-text-secondary, #4B5563);
  cursor: pointer;
  transition: all 0.2s ease;
}

.er-variables-drawer__close:hover {
  background: var(--er-background, #F9FAFB);
  color: var(--er-text-primary, #000);
}

.er-variables-drawer__content {
  padding: 20px;
}

.er-variables-drawer__content .er-variables__header {
  display: none;
}

/* New Variable Popover */
.er-new-variable-popover-overlay .ant-popover-inner {
  padding: 16px;
  border-radius: var(--er-radius-md, 12px);
  box-shadow: var(--er-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.er-new-variable-popover {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 280px;
}

.er-new-variable-popover__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.er-new-variable-popover__field label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--er-text-secondary, #4B5563);
}

.er-new-variable-popover__field .er-input {
  height: var(--er-input-height, 48px);
}

.er-new-variable-popover__error {
  margin-top: 4px;
}

.er-new-variable-popover__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--er-input-height, 48px);
  margin-top: 4px;
}

/* Table Title with Icon */
.er-table-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.er-table-title__icon {
  color: var(--er-text-muted, #9CA3AF);
  flex-shrink: 0;
}

/* Table Date with Icon */
.er-table-date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--er-text-secondary, #4B5563);
  font-size: 13px;
}

.er-table-date__icon {
  color: var(--er-text-muted, #9CA3AF);
}

/* Table Actions */
.er-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.er-table-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--er-border, #E5E7EB);
  border-radius: 8px;
  color: var(--er-text-secondary, #4B5563);
  cursor: pointer;
  transition: all 0.2s ease;
}

.er-table-action-btn:hover {
  background: var(--er-background, #F9FAFB);
  border-color: var(--er-primary, #184FEA);
  color: var(--er-primary, #184FEA);
}

.er-table-action-btn--danger:hover {
  background: rgba(239, 68, 68, 0.05);
  border-color: var(--er-error, #EF4444);
  color: var(--er-error, #EF4444);
}

/* ============= RESERVATION DETAILS ============= */

/* Main Layout */
.er-reservation-details {
  padding: 0;
}

.er-reservation-details .er-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-reservation-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.er-reservation-header__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--er-border, #E5E7EB);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--er-text-secondary, #4B5563);
}

.er-reservation-header__back:hover {
  background: var(--er-background, #F9FAFB);
  border-color: var(--er-primary, #184FEA);
  color: var(--er-primary, #184FEA);
}

.er-reservation-header__title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.er-reservation-header__title h1 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary, #000) !important;
  margin: 0 !important;
}

.er-reservation-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Status Badge */
.er-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.er-status-badge--oczekujacy {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}

.er-status-badge--zarezerwowano {
  background: rgba(24, 79, 234, 0.1);
  color: #184FEA;
}

.er-status-badge--w-trakcie {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.er-status-badge--zakończono,
.er-status-badge--zakonczone {
  background: rgba(107, 114, 128, 0.1);
  color: #6B7280;
}

.er-status-badge--late {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

/* Content Grid */
.er-reservation-content {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
}

.er-details-main,
.er-details-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Details Card */
.er-details-card {
  background: #FFFFFF;
  border-radius: var(--er-radius-md, 12px);
  box-shadow: var(--er-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
  border: 1px solid var(--er-border-light, #F3F4F6);
  overflow: hidden;
}

.er-details-card .ant-card-body {
  padding: 0;
}

.er-details-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-details-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.er-details-card__title svg {
  color: var(--er-primary, #184FEA);
}

.er-details-card__title h3 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary, #000) !important;
  margin: 0 !important;
}

.er-details-card__content {
  padding: 20px;
}

/* Data Section */
.er-data-section {
  margin-bottom: 20px;
}

.er-data-section:last-child {
  margin-bottom: 0;
}

.er-data-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--er-text-secondary, #4B5563);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.er-data-section__header svg {
  color: var(--er-text-muted, #9CA3AF);
}

.er-data-section__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Data Rows */
.er-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.er-data-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary, #4B5563);
}

.er-data-value {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-text-primary, #000);
  text-align: right;
}

/* Customer Data Grid */
.er-customer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Contact Actions */
.er-contact-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--er-border-light, #F3F4F6);
}

.er-contact-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08));
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--er-primary, #184FEA);
  text-decoration: none;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.er-contact-btn:hover {
  background: rgba(24, 79, 234, 0.12);
  color: var(--er-primary, #184FEA);
}

/* Hidden Element */
.er-hidden-element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--er-background, #F9FAFB);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.er-hidden-element:last-child {
  margin-bottom: 0;
}

.er-hidden-element:hover {
  background: #F3F4F6;
}

.er-hidden-element__label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary, #4B5563);
}

.er-hidden-element__value {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-text-primary, #000);
}

.er-hidden-element__placeholder {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--er-primary, #184FEA);
}

/* Booking Summary */
.er-booking-summary {
  padding: 20px;
}

.er-booking-car {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-booking-car__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08));
  border-radius: 10px;
  color: var(--er-primary, #184FEA);
}

.er-booking-car__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.er-booking-car__name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--er-text-primary, #000);
}

.er-booking-car__plate {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary, #4B5563);
}

.er-booking-dates {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.er-booking-date {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.er-booking-date__label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--er-text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.er-booking-date__value {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-text-primary, #000);
}

.er-booking-dates__arrow {
  color: var(--er-text-muted, #9CA3AF);
  flex-shrink: 0;
}

.er-booking-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--er-border-light, #F3F4F6);
}

.er-booking-amount__label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary, #4B5563);
}

.er-booking-amount__value {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--er-text-primary, #000);
}

/* Status Card */
.er-status-card {
  background: #FFFFFF;
  border-radius: var(--er-radius-md, 12px);
  box-shadow: var(--er-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
  border: 1px solid var(--er-border-light, #F3F4F6);
  overflow: hidden;
}

.er-status-card .ant-card-body {
  padding: 0;
}

.er-status-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-status-card__header h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--er-text-primary, #000);
  margin: 0;
}

.er-status-card__content {
  padding: 20px;
}

.er-status-dates {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.er-status-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--er-background, #F9FAFB);
  border-radius: 8px;
}

.er-status-date__label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary, #4B5563);
}

.er-status-date__value {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-text-primary, #000);
}

.er-status-card__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.er-status-card__actions .er-btn-primary,
.er-status-card__actions .er-btn-danger-outline {
  width: 100%;
  justify-content: center;
}

.er-status-card__actions .er-link-button {
  text-align: center;
}

.er-btn-danger-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  background: transparent;
  border: 1px solid var(--er-error, #EF4444);
  border-radius: var(--er-radius-sm, 8px);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-error, #EF4444);
  cursor: pointer;
  transition: all 0.2s;
}

.er-btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.05);
}

/* Payments List */
.er-payments-list {
  padding: 0 20px;
}

.er-payment-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-payment-item:last-child {
  border-bottom: none;
}

.er-payment-item__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.er-payment-item__type {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-text-primary, #000);
}

.er-payment-item__date {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--er-text-muted, #9CA3AF);
}

.er-payment-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
}

.er-payment-status--finish {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.er-payment-status--pending {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}

.er-payment-status--error {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

.er-payments-summary {
  padding: 16px 20px;
  background: var(--er-background, #F9FAFB);
  border-top: 1px solid var(--er-border-light, #F3F4F6);
}

.er-payments-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary, #4B5563);
}

.er-payments-summary__row--total {
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--er-border-light, #F3F4F6);
  font-weight: 600;
  font-size: 15px;
  color: var(--er-text-primary, #000);
}

/* Notifications List */
.er-notifications-list {
  padding: 0 20px;
}

.er-notification-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-notification-item:last-child {
  border-bottom: none;
}

.er-notification-item__type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-text-primary, #000);
}

.er-notification-item__type svg {
  color: var(--er-text-muted, #9CA3AF);
}

.er-notification-item__date {
  margin-left: auto;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-muted, #9CA3AF);
}

/* Documents List */
.er-documents-list {
  padding: 0 20px 20px;
}

.er-document-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--er-background, #F9FAFB);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.er-document-item:hover {
  background: #F3F4F6;
}

.er-document-item svg {
  color: var(--er-primary, #184FEA);
}

.er-document-item span {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-text-primary, #000);
}

.er-document-item .er-icon-button {
  margin-left: auto;
}

/* Empty State */
.er-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
}

.er-empty-state span {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--er-text-muted, #9CA3AF);
}

/* Mobile Layout */
.er-reservation-details--mobile {
  padding: 0;
}

.er-reservation-mobile-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

.er-reservation-mobile-header__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.er-reservation-mobile-header__title {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--er-text-primary, #000);
}

.er-reservation-mobile-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.er-reservation-mobile-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
}

.er-reservation-mobile-status__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.er-reservation-mobile-status__right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.er-reservation-mobile-status::-webkit-scrollbar {
  display: none;
}

.er-mobile-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--er-background, #F9FAFB);
  border: 1px solid var(--er-border, #E5E7EB);
  border-radius: 8px;
  color: var(--er-text-secondary, #4B5563);
  text-decoration: none;
  transition: all 0.2s;
}

.er-mobile-contact-btn:hover {
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08));
  border-color: var(--er-primary, #184FEA);
  color: var(--er-primary, #184FEA);
}

.er-reservation-mobile-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.er-reservation-mobile-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  padding: 16px;
  border-top: 1px solid var(--er-border-light, #F3F4F6);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  z-index: 100;
}

/* Responsive */
@media (max-width: 1024px) {
  .er-reservation-content {
    grid-template-columns: 1fr;
  }
  
  .er-customer-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .er-reservation-details .er-page-header {
    padding: 16px 0;
    margin-bottom: 16px;
  }
  
  .er-reservation-header__title h1 {
    font-size: 20px !important;
  }
  
  .er-booking-dates {
    flex-direction: column;
    gap: 12px;
  }
  
  .er-booking-dates__arrow {
    transform: rotate(90deg);
  }
  
  .er-contact-actions {
    flex-direction: column;
  }
  
  .er-contact-btn {
    justify-content: center;
  }
  
  .er-payment-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .er-payment-item__status {
    justify-self: start;
  }
}

/* Modal Styles */
.er-modal .ant-modal-content {
  border-radius: var(--er-radius-md, 12px);
  overflow: hidden;
}

.er-modal .ant-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
  background: #FFFFFF;
}

.er-modal .ant-modal-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--er-text-primary, #000) !important;
}

.er-modal .ant-modal-body {
  padding: 24px;
}

.er-modal .ant-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--er-border-light, #F3F4F6);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.er-modal .ant-modal-close {
  top: 16px;
  right: 16px;
}

.er-modal .ant-modal-close-x {
  width: 36px;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
}

/* Late Return Warning */
.er-late-warning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #DC2626;
}

.er-late-warning svg {
  width: 14px;
  height: 14px;
}

/* ========================================= */
/* UX AUDIT FIXES - Button & Icon Alignment */
/* ========================================= */

/* Icon Button */
.er-icon-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid var(--er-border, #E5E7EB) !important;
  border-radius: 8px !important;
  color: var(--er-text-secondary, #4B5563) !important;
  cursor: pointer;
  transition: all 0.2s;
}

.er-icon-button:hover {
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08)) !important;
  border-color: var(--er-primary, #184FEA) !important;
  color: var(--er-primary, #184FEA) !important;
}

.er-icon-button svg {
  flex-shrink: 0;
}

/* Link Button */
.er-link-button {
  height: auto !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--er-primary, #184FEA) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.er-link-button:hover,
.er-link-button:focus {
  color: #1342C4 !important;
  background: transparent !important;
}

.er-link-button svg {
  flex-shrink: 0;
}

/* Button Icon Centering Fix */
.er-btn-primary,
.er-btn-secondary,
.er-btn-danger-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.er-btn-primary svg,
.er-btn-secondary svg,
.er-btn-danger-outline svg {
  flex-shrink: 0;
  vertical-align: middle;
}

/* Fix Ant Design Button icon wrapper */
.er-btn-primary .anticon,
.er-btn-secondary .anticon,
.er-btn-danger-outline .anticon,
.er-link-button .anticon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Tap feedback for mobile */
.er-contact-btn:active,
.er-mobile-contact-btn:active,
.er-icon-button:active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* Status Card Header with Icon */
.er-status-card__header .er-details-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.er-status-card__header .er-details-card__title svg {
  color: var(--er-primary, #184FEA);
}

.er-status-card__header .er-details-card__title h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--er-text-primary, #000);
  margin: 0;
}

/* Data Section with Header */
.er-data-section {
  margin-bottom: 16px;
}

.er-data-section:last-child {
  margin-bottom: 0;
}

.er-data-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-data-section__header svg {
  color: var(--er-text-muted, #9CA3AF);
  flex-shrink: 0;
}

.er-data-section__header span {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--er-text-muted, #9CA3AF);
  white-space: nowrap;
}

/* Sensitive Data Section */
.er-sensitive-section {
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}

.er-sensitive-section .er-data-section__header {
  border-bottom-color: rgba(245, 158, 11, 0.2);
}

.er-sensitive-section .er-data-section__header svg {
  color: #D97706;
}

.er-sensitive-section .er-data-section__header span {
  color: #D97706;
}

/* Select/Picker Icon Centering Fix */
.ant-select-arrow,
.ant-picker-suffix {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ant-select-arrow svg,
.ant-picker-suffix svg {
  vertical-align: middle;
}

/* Form Field Styling */
.er-form-field {
  margin-bottom: 16px;
}

.er-form-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--er-text-primary, #000);
  margin-bottom: 8px;
}

/* Modal Form Inputs - 48px height */
.er-modal .ant-input,
.er-modal .ant-select-selector,
.er-modal .ant-picker {
  height: 48px !important;
  border-radius: 8px !important;
}

.er-modal .ant-select-selector {
  display: flex !important;
  align-items: center !important;
}

.er-modal .ant-input-affix-wrapper {
  height: 48px !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
}

.er-modal .ant-input-affix-wrapper .ant-input {
  height: auto !important;
}

.er-modal .ant-input-prefix {
  display: flex !important;
  align-items: center !important;
  margin-right: 10px;
}

.er-modal .ant-input-prefix svg {
  vertical-align: middle;
}

/* Reservation Modal Specific */
.reservation-modal,
.er-modal {
  font-family: 'Inter', sans-serif;
}

.reservation-modal .ant-modal-header,
.er-modal .ant-modal-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6) !important;
  background: #FFFFFF !important;
}

.reservation-modal .ant-modal-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.reservation-modal .ant-modal-body,
.er-modal .ant-modal-body {
  padding: 24px !important;
}

.reservation-modal .ant-modal-content,
.er-modal .ant-modal-content {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Reservation Modal Footer */
.reservation-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--er-border-light, #F3F4F6);
  margin-top: 8px;
}

/* Customer Modal Styling */
.customer-modal .ant-modal-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6) !important;
}

.customer-modal .ant-modal-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

.customer-modal .ant-modal-body {
  padding: 24px !important;
}

/* Payment Modal Styling */
.payment-modal .ant-modal-header {
  padding: 20px 24px !important;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6) !important;
}

.payment-modal .ant-modal-title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* Mobile Responsive Fixes */
@media (max-width: 768px) {
  /* Remove padding from app-content on reservation details mobile */
  .er-reservation-details--mobile .app-content,
  .er-reservation-details--mobile > .app-content {
    padding: 0 !important;
  }
  
  .er-reservation-mobile-content {
    padding: 0 !important;
  }
  
  .er-booking-dates {
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }
  
  .er-booking-dates__arrow {
    display: none !important;
  }
  
  .er-booking-date {
    flex: 1;
    text-align: center;
  }
  
  .er-booking-date__values {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  
  .er-booking-date__date {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--er-text-primary, #000);
  }
  
  .er-booking-date__time {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--er-text-secondary, #4B5563);
  }
  
  .er-payment-item {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }
  
  .er-payment-item__info {
    flex: 1 1 100% !important;
  }
  
  .er-payment-item__status {
    order: 1;
  }
  
  .er-payment-item .er-table-amount {
    order: 2;
    margin-left: auto;
  }
  
  .er-contact-actions {
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  
  .er-contact-btn {
    flex: 1;
    min-width: 0;
    justify-content: center !important;
    white-space: nowrap !important;
  }
  
  .er-contact-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Mobile status bar with left/right layout */
  .er-reservation-mobile-status {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  
  .er-reservation-mobile-status__left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .er-reservation-mobile-status__right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
}

/* Document item styling */
.er-document-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #FFFFFF;
  cursor: pointer;
  transition: background 0.2s;
}

.er-document-item:hover {
  background: var(--er-background, #F9FAFB);
}

.er-document-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08));
  border-radius: 8px;
  color: var(--er-primary, #184FEA);
}

.er-document-item__name {
  flex: 1;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-text-primary, #000);
}

.er-document-download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #FFFFFF;
  border: 1px solid var(--er-border, #E5E7EB);
  border-radius: 8px;
  color: var(--er-text-secondary, #4B5563);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
}

.er-document-download-btn:hover,
.er-document-download-btn:focus {
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08));
  border-color: var(--er-primary, #184FEA);
  color: var(--er-primary, #184FEA);
}

.er-document-download-btn:active {
  transform: scale(0.95);
}

/* Checkbox alignment in forms */
.centered-column {
  display: flex;
  align-items: center;
}

.centered-column .ant-checkbox-wrapper {
  display: flex;
  align-items: center;
}

/* Hidden Element styling */
.er-hidden-element {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--er-border-light, #F3F4F6);
}

.er-hidden-element:last-child {
  border-bottom: none;
}

.er-hidden-element__label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary, #4B5563);
}

.er-hidden-element__value {
  display: flex;
  align-items: center;
  gap: 8px;
}

.er-hidden-element__text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-text-primary, #000);
}

.er-hidden-element__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--er-text-muted, #9CA3AF);
  cursor: pointer;
  transition: all 0.2s;
}

.er-hidden-element__toggle:hover {
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08));
  color: var(--er-primary, #184FEA);
}

/* ========================================= */
/* DROPDOWN & SELECT ALIGNMENT FIXES */
/* ========================================= */

/* Globalne wyrównanie ikon w Select */
.ant-select-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-top: 0 !important;
}

.ant-select-arrow svg {
  vertical-align: middle !important;
  display: block !important;
}

/* Wyrównanie selectora */
.ant-select-selector {
  display: flex !important;
  align-items: center !important;
}

.ant-select-selection-item {
  display: flex !important;
  align-items: center !important;
  line-height: 1.5 !important;
}

/* Modalne - szczególna uwaga */
.er-modal .ant-select-selector,
.payment-modal .ant-select-selector,
.customer-modal .ant-select-selector,
.ant-modal .ant-select-selector {
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
}

.er-modal .ant-select-selection-search,
.payment-modal .ant-select-selection-search,
.customer-modal .ant-select-selection-search,
.ant-modal .ant-select-selection-search {
  display: flex !important;
  align-items: center !important;
}

/* DatePicker/TimePicker suffix icon fix */
.ant-picker-suffix {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Prefix icons w Input */
.ant-input-prefix {
  display: flex !important;
  align-items: center !important;
  margin-right: 8px;
}

.ant-input-prefix svg {
  vertical-align: middle !important;
}

/* ========================================= */
/* NOTES SECTION */
/* ========================================= */

.er-notes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.er-note-item {
  padding: 12px 16px;
  background: var(--er-background, #F9FAFB);
  border-radius: 8px;
  border-left: 3px solid var(--er-primary, #184FEA);
}

.er-note-item__text {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--er-text-primary, #1F2937);
  margin: 0 0 8px 0;
  line-height: 1.5;
  white-space: pre-wrap;
}

.er-note-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.er-note-item__date {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--er-text-muted, #9CA3AF);
}

.er-note-item__badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--er-primary-light, rgba(24, 79, 234, 0.08));
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--er-primary, #184FEA);
}

/* Notes form */
.er-notes-form {
  padding-top: 16px;
  border-top: 1px solid var(--er-border-light, #F3F4F6);
}

.er-notes-textarea {
  width: 100%;
  min-height: 100px;
  border: 1px solid var(--er-border, #E5E7EB) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  resize: vertical;
}

.er-notes-textarea:focus {
  border-color: var(--er-primary, #184FEA) !important;
  box-shadow: 0 0 0 2px rgba(24, 79, 234, 0.1) !important;
}

.er-notes-form__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 12px;
}

.er-notes-form__actions .ant-checkbox-wrapper {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--er-text-secondary, #4B5563);
}

/* Mobile adjustments for notes */
@media (max-width: 768px) {
  .er-notes-form__actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .er-notes-form__actions .ant-checkbox-wrapper {
    order: 1;
  }
  
  .er-notes-form__actions .er-btn-primary {
    order: 2;
    width: 100%;
  }
}