/**
 * Sofia Design System Tokens & Modern UI Components for Xpertica
 * Inspired by Flatlogic Sofia React Template
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand & Theme Colors with Brand Gradient */
  --xpertica-gradient: linear-gradient(90deg, #C22097 0%, #AE2C95 100%);
  --xpertica-gradient-hover: linear-gradient(90deg, #ad1b86 0%, #982482 100%);
  --xpertica-primary: #C22097;
  --xpertica-primary-hover: #AE2C95;
  --xpertica-primary-light: #fdf2fa;
  --xpertica-primary-glow: rgba(194, 32, 151, 0.25);
  --xpertica-shadow-btn: 0 4px 14px rgba(194, 32, 151, 0.28);
  --xpertica-shadow-btn-hover: 0 6px 20px rgba(194, 32, 151, 0.38);

  --sofia-primary: #C22097;
  --sofia-primary-hover: #AE2C95;
  --sofia-primary-light: #fdf2fa;
  --sofia-primary-glow: rgba(194, 32, 151, 0.25);

  --sofia-default: #16365f;
  --sofia-text-dark: #16365f;
  --sofia-text-muted: #6b859e;
  --sofia-text-subtle: #9cb0c3;

  --sofia-bg-body: #f7f8fb;
  --sofia-bg-card: #ffffff;
  --sofia-border: #e9edf2;
  --sofia-border-focus: #C22097;

  /* Semantic Status Colors */
  --sofia-success: #43bc13;
  --sofia-success-light: #edf9e7;
  --sofia-info: #00a5ff;
  --sofia-info-light: #e6f6ff;
  --sofia-warning: #ffa100;
  --sofia-warning-light: #fff6e6;
  --sofia-danger: #ff4b23;
  --sofia-danger-light: #ffede9;

  /* Typography */
  --sofia-font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sofia-font-weight-normal: 400;
  --sofia-font-weight-medium: 500;
  --sofia-font-weight-semibold: 600;
  --sofia-font-weight-bold: 700;

  /* Shadows & Elevations */
  --sofia-shadow-sm: 0 2px 4px rgba(22, 54, 95, 0.04);
  --sofia-shadow-md: 0 4px 16px 0 rgba(194, 32, 151, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --sofia-shadow-lg: 0 10px 30px 0 rgba(22, 54, 95, 0.08);
  --sofia-shadow-card: 4px 4px 16px 0 rgba(22, 54, 95, 0.06);

  /* Radii */
  --sofia-radius-sm: 6px;
  --sofia-radius-md: 8px;
  --sofia-radius-lg: 12px;
  --sofia-radius-pill: 50px;
}

/* Base Body Styling */
body {
  font-family: var(--sofia-font-family) !important;
  color: var(--sofia-text-dark);
  background-color: var(--sofia-bg-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Modern Sofia Cards & Widgets
   ========================================================================== */
.sofia-card,
.user-card-container-step,
.main-page-x .card,
.hotel-accomodation {
  background: var(--sofia-bg-card) !important;
  border-radius: var(--sofia-radius-lg) !important;
  box-shadow: var(--sofia-shadow-card) !important;
  border: 1px solid var(--sofia-border) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.user-react-container {
  border-radius: var(--sofia-radius-lg) !important;
  overflow: hidden;
  margin-bottom: 20px !important;
  background: var(--sofia-bg-card) !important;
  border: 1px solid var(--sofia-border) !important;
  box-shadow: var(--sofia-shadow-sm) !important;
}

.user-react-header {
  padding: 12px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  display: flex !important;
  align-items: center !important;
}

.user-react-header .row {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 !important;
}

.user-react-header h3 {
  font-family: var(--sofia-font-family) !important;
  font-weight: var(--sofia-font-weight-semibold) !important;
  font-size: 15px !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
  text-transform: uppercase !important;
  color: #ffffff !important;
}

/* Client-Side Header Titles - Comprehensive Explicit White Color */
.user-react-header,
.user-react-header h1,
.user-react-header h2,
.user-react-header h3,
.user-react-header h4,
.user-react-header h5,
.user-react-header h6,
.user-react-header p,
.user-react-header span,
.user-react-header small,
.user-react-header i,
.user-react-header b,
.user-react-header strong,
.user-react-header label,
.user-card-header,
.user-card-header h1,
.user-card-header h2,
.user-card-header h3,
.user-card-header h4,
.user-card-header h5,
.user-card-header h6,
.user-card-container-step .user-react-header h1,
.user-card-container-step .user-react-header h2,
.user-card-container-step .user-react-header h3,
.user-card-container-step .user-react-header h4,
.user-card-container-step .user-react-header h5,
.user-card-container-step .user-react-header h6,
.user-theme-background.user-react-header,
.user-theme-background.user-react-header *,
.header-strip,
.header-strip h1,
.header-strip h2,
.header-strip h3,
.header-strip h4,
.header-strip h5,
.header-strip h6,
.header-strip p,
.header-strip span,
.bank-details-header h5,
.form-header,
.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6,
.modal-header .modal-title,
.modal-header b,
.modal-header i {
  color: #ffffff !important;
}

.user-react-header .header-btn {
  padding: 5px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: var(--sofia-radius-sm) !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
}

.user-react-header .header-btn:hover {
  background-color: rgba(255, 255, 255, 0.35) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.user-react-content {
  padding: 10px 20px 14px !important;
  background: var(--sofia-bg-card) !important;
  box-sizing: border-box !important;
}

.user-react-content>.col-md-12,
.user-react-content .col-md-12.p-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.user-react-content .table-overflow {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.user-react-content .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 767px) {

  .user-react-header,
  .user-react-content {
    padding: 16px 20px !important;
  }
}

/* ==========================================================================
   Sofia Dynamic Multi-Step Wizard & Progress Bar
   ========================================================================== */
.sofia-wizard-container {
  background: var(--sofia-bg-card);
  border-radius: var(--sofia-radius-lg);
  box-shadow: var(--sofia-shadow-card);
  border: 1px solid var(--sofia-border);
  padding: 20px 24px 18px;
  margin-bottom: 24px;
}

.sofia-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

/* Background Connecting Line */
.sofia-step-nav::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 30px;
  right: 30px;
  height: 3px;
  background-color: var(--sofia-border);
  z-index: 1;
}

.sofia-step-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
}

.sofia-step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--sofia-border);
  color: var(--sofia-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.sofia-step-title {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sofia-text-muted);
  white-space: nowrap;
  transition: color 0.25s ease-in-out;
}

/* State: Active Step */
.sofia-step-item.is-active .sofia-step-circle {
  background: var(--sofia-primary);
  border-color: var(--sofia-primary);
  color: #ffffff;
  box-shadow: 0 0 0 4px var(--sofia-primary-glow);
  transform: scale(1.08);
}

.sofia-step-item.is-active .sofia-step-title {
  color: var(--sofia-primary);
  font-weight: 600;
}

/* State: Completed Step */
.sofia-step-item.is-completed .sofia-step-circle {
  background: var(--sofia-success);
  border-color: var(--sofia-success);
  color: #ffffff;
}

.sofia-step-item.is-completed .sofia-step-title {
  color: var(--sofia-text-dark);
  font-weight: 500;
}

/* State: Pending Step */
.sofia-step-item.is-pending .sofia-step-circle {
  background: #f8fafc;
  color: var(--sofia-text-subtle);
}

/* Responsive wizard for mobile */
@media (max-width: 767px) {
  .sofia-wizard-container {
    padding: 12px 14px;
    overflow-x: auto;
  }

  .sofia-step-nav {
    min-width: 480px;
  }

  .sofia-step-circle {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .sofia-step-title {
    font-size: 11px;
  }
}

/* ==========================================================================
   Modern Buttons & Action Controls with Brand Gradient
   ========================================================================== */
.btn-primary,
.btn-sofia-primary,
.btn-theme-3.user-theme-background-alt,
.btn-gradient-primary,
.btn-action-primary,
.open-event-task-modal-btn,
button[type="submit"]:not(.btn-link):not(.btn-danger):not(.btn-secondary):not(.btn-light),
input[type="submit"]:not(.btn-danger):not(.btn-secondary) {
  background-color: var(--xpertica-primary) !important;
  background-image: var(--xpertica-gradient) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--sofia-radius-md) !important;
  height: 35px;
  padding: 6px 20px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  box-shadow: var(--xpertica-shadow-btn) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-primary:hover,
.btn-sofia-primary:hover,
.btn-theme-3.user-theme-background-alt:hover,
.btn-gradient-primary:hover,
.btn-action-primary:hover,
.open-event-task-modal-btn:hover,
button[type="submit"]:hover:not(.btn-link):not(.btn-danger):not(.btn-secondary):not(.btn-light),
input[type="submit"]:hover:not(.btn-danger):not(.btn-secondary) {
  background-color: var(--xpertica-primary-hover) !important;
  background-image: var(--xpertica-gradient-hover) !important;
  box-shadow: var(--xpertica-shadow-btn-hover) !important;
  transform: translateY(-1.5px);
  color: #ffffff !important;
}

.btn-primary:active,
.btn-gradient-primary:active,
button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(194, 32, 151, 0.3) !important;
}

.btn-sofia-secondary,
.btn-theme-3.btn-light-gray {
  background-color: #f1f5f9 !important;
  color: var(--sofia-text-dark) !important;
  border: 1px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-md) !important;
  height: 35px;
  padding: 6px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-sofia-secondary:hover,
.btn-theme-3.btn-light-gray:hover {
  background-color: #e2e8f0 !important;
  color: var(--sofia-text-dark) !important;
}

.btn-sofia-outline,
.btn-theme-3.btn-bg-transparent {
  background: transparent !important;
  border: 1.5px solid var(--sofia-border) !important;
  color: var(--sofia-text-muted) !important;
  border-radius: var(--sofia-radius-md) !important;
  height: 35px;
  padding: 6px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out !important;
}

.btn-sofia-outline:hover,
.btn-theme-3.btn-bg-transparent:hover {
  border-color: var(--sofia-text-dark) !important;
  color: var(--sofia-text-dark) !important;
}

/* ==========================================================================
   Modernized Form Inputs & Select Controls (35px Height)
   ========================================================================== */
input.form-control,
.select-dropdown,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select.form-control {
  height: 35px !important;
  min-height: 35px !important;
  background-color: #ffffff !important;
  border: 1.5px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-md) !important;
  padding: 4px 12px !important;
  font-size: 13.5px !important;
  color: var(--sofia-text-dark) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Multi-line Textarea with smooth vertical drag-resizing */
textarea.form-control,
textarea {
  min-height: 85px !important;
  background-color: #ffffff !important;
  border: 1.5px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-md) !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--sofia-text-dark) !important;
  resize: vertical !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.form-control:focus,
.select-dropdown:focus,
textarea.form-control:focus,
textarea:focus,
input:focus {
  border-color: var(--sofia-primary) !important;
  box-shadow: 0 0 0 3px var(--sofia-primary-glow) !important;
  outline: none !important;
}

.form-group label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sofia-text-dark) !important;
  margin-bottom: 5px !important;
}

.input-group-text {
  height: 35px !important;
  background-color: #f8fafc !important;
  border: 1.5px solid var(--sofia-border) !important;
  border-right: none !important;
  border-radius: var(--sofia-radius-md) 0 0 var(--sofia-radius-md) !important;
  color: var(--sofia-text-muted) !important;
  padding: 0 12px !important;
}

.input-group .form-control {
  border-radius: 0 var(--sofia-radius-md) var(--sofia-radius-md) 0 !important;
  height: 35px !important;
}

/* ==========================================================================
   Selectize Control & Dropdown Fixes (Full Width, No Inner White Space)
   ========================================================================== */
.selectize-control {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  z-index: 20 !important;
}

/* Neutralize if .form-control class gets copied to selectize-control */
.selectize-control.form-control {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}

.selectize-control.dropdown-active {
  z-index: 99999 !important;
}

.form-group:focus-within {
  z-index: 9999 !important;
  position: relative;
}

.selectize-input,
.selectize-control.single .selectize-input {
  width: 100% !important;
  max-width: 100% !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-md) !important;
  padding: 0 32px 0 12px !important;
  font-size: 13.5px !important;
  color: var(--sofia-text-dark) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  line-height: normal !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.selectize-input.focus,
.selectize-input.dropdown-active,
.selectize-control.single .selectize-input.focus,
.selectize-control.single .selectize-input.dropdown-active {
  border-color: var(--sofia-primary) !important;
  box-shadow: 0 0 0 3px var(--sofia-primary-glow) !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.selectize-input>.item,
.selectize-control.single .selectize-input>.item {
  color: var(--sofia-text-dark) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline-block !important;
  flex: 1 1 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
}

.selectize-input>input,
.selectize-control.single .selectize-input>input {
  font-size: 13.5px !important;
  color: var(--sofia-text-dark) !important;
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  line-height: normal !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Caret / Arrow icon */
.selectize-control.single .selectize-input:after {
  content: " " !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  margin-top: -3px !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-width: 5px 4px 0 4px !important;
  border-color: var(--sofia-text-muted) transparent transparent transparent !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.selectize-control.single .selectize-input.dropdown-active:after {
  margin-top: -3px !important;
  border-width: 0 4px 5px 4px !important;
  border-color: transparent transparent var(--sofia-primary) transparent !important;
}

/* Dropdown Popup Menu */
.selectize-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-md) !important;
  box-shadow: 0 10px 25px rgba(22, 54, 95, 0.15), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
  z-index: 99999 !important;
  margin-top: 4px !important;
  padding: 4px 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-sizing: border-box !important;
}

.selectize-dropdown-content {
  background: #ffffff !important;
  background-color: #ffffff !important;
  max-height: 220px !important;
  overflow-y: auto !important;
}

/* Dropdown Options */
.selectize-dropdown [data-selectable],
.selectize-dropdown .option {
  background: #ffffff !important;
  background-color: #ffffff !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  color: var(--sofia-text-dark) !important;
  cursor: pointer !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-weight: 500 !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Active & Hover state: only the currently hovered/navigated item gets highlighted */
.selectize-dropdown .active,
.selectize-dropdown .option:hover,
.selectize-dropdown [data-selectable]:hover {
  background-color: var(--sofia-primary-light) !important;
  background: var(--sofia-primary-light) !important;
  color: var(--sofia-primary) !important;
  font-weight: 600 !important;
}

/* Historical selected options MUST NOT stay highlighted in purple; reset to clean white */
.selectize-dropdown .option.selected:not(.active):not(:hover),
.selectize-dropdown [data-selectable].selected:not(.active):not(:hover) {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: var(--sofia-text-dark) !important;
  font-weight: 500 !important;
}

/* Unified Mobile & Dialing Code Group */
.unified-phone-group {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}

.unified-phone-group .phone-code-addon {
  width: auto !important;
  flex: 0 0 auto !important;
}

.unified-phone-group .phone-code-select {
  height: 35px !important;
  min-height: 35px !important;
  border-radius: var(--sofia-radius-md) 0 0 var(--sofia-radius-md) !important;
  border-right: none !important;
  background-color: #f8fafc !important;
  padding: 4px 10px !important;
  font-size: 13px !important;
  cursor: pointer;
}

.unified-phone-group .phone-number-input {
  height: 35px !important;
  min-height: 35px !important;
  border-radius: 0 var(--sofia-radius-md) var(--sofia-radius-md) 0 !important;
  flex: 1 1 auto !important;
}

.unified-phone-group:focus-within .phone-code-select,
.unified-phone-group:focus-within .phone-number-input {
  border-color: var(--sofia-primary) !important;
}

/* ==========================================================================
   Pill Badges & Status Indicators
   ========================================================================== */
.badge-pill-sofia {
  border-radius: var(--sofia-radius-pill) !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
}

.badge-soft-primary {
  background-color: var(--sofia-primary-light) !important;
  color: var(--sofia-primary) !important;
}

.badge-soft-success {
  background-color: var(--sofia-success-light) !important;
  color: var(--sofia-success) !important;
}

.badge-soft-warning {
  background-color: var(--sofia-warning-light) !important;
  color: var(--sofia-warning) !important;
}

.badge-soft-danger {
  background-color: var(--sofia-danger-light) !important;
  color: var(--sofia-danger) !important;
}

/* ==========================================================================
   Sticky Bottom Action Bar (Shifted inward from border edge)
   ========================================================================== */
.save-btn-container {
  padding: 20px 36px 20px !important;
  border-top: 1px solid var(--sofia-border);
  margin-top: 24px;
}

@media (max-width: 767px) {
  .save-btn-container {
    padding: 16px 20px 16px !important;
  }
}

.user-react-action-container .text-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-right: 0 !important;
}

/* ==========================================================================
   Step 1: Personal Details & Avatar Upload
   ========================================================================== */
.profile-thumb {
  background: #ffffff !important;
  border: 1.5px dashed var(--sofia-border) !important;
  border-radius: var(--sofia-radius-lg) !important;
  padding: 20px 16px !important;
  transition: all 0.25s ease-in-out !important;
  box-shadow: var(--sofia-shadow-sm) !important;
}

.profile-thumb:hover {
  border-color: var(--sofia-primary) !important;
  box-shadow: 0 4px 14px rgba(77, 83, 224, 0.12) !important;
}

.profile-thumb .thumb-holder img {
  width: 110px !important;
  height: 110px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(22, 54, 95, 0.1) !important;
  border: 3px solid #ffffff !important;
  margin-bottom: 12px !important;
  transition: transform 0.2s ease;
}

.profile-thumb .thumb-holder img:hover {
  transform: scale(1.03);
}

.profile-thumb .choose-file {
  background: #f1f5f9 !important;
  color: var(--sofia-text-dark) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border: 1px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-md) !important;
  padding: 6px 14px !important;
  transition: all 0.2s ease !important;
}

.profile-thumb .choose-file:hover {
  background: var(--sofia-primary) !important;
  color: #ffffff !important;
  border-color: var(--sofia-primary) !important;
}

/* Personal Details Fields Grid (12-Column Symmetrical Balanced System) */
.profile-fields-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 18px 28px !important;
  width: 100% !important;
  margin: 0 !important;
}

.profile-fields-grid>[class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Row 1: Proportional Identity Fields (2 + 5 + 5 = 12 columns / 100%) */
.profile-fields-grid>.profile-field-title {
  grid-column: span 2 !important;
}

.profile-fields-grid>.profile-field-firstname {
  grid-column: span 5 !important;
}

.profile-fields-grid>.profile-field-lastname {
  grid-column: span 5 !important;
}

/* Rows 2+: Balanced 2-Column Fields (6 + 6 = 12 columns / 100%) */
.profile-fields-grid>.profile-data-field {
  grid-column: span 6 !important;
}

/* Full Width Fields (Textareas, Checkbox terms, etc.) */
.profile-fields-grid>.profile-full-field {
  grid-column: span 12 !important;
}

@media (max-width: 991px) and (min-width: 768px) {
  .profile-fields-grid>.profile-field-title {
    grid-column: span 3 !important;
  }

  .profile-fields-grid>.profile-field-firstname {
    grid-column: span 9 !important;
  }

  .profile-fields-grid>.profile-field-lastname {
    grid-column: span 12 !important;
  }

  .profile-fields-grid>.profile-data-field {
    grid-column: span 12 !important;
  }

  .profile-fields-grid>.profile-full-field {
    grid-column: span 12 !important;
  }
}

@media (max-width: 767px) {
  .profile-fields-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .profile-fields-grid>[class*="col-"],
  .profile-fields-grid>.profile-field-title,
  .profile-fields-grid>.profile-field-firstname,
  .profile-fields-grid>.profile-field-lastname,
  .profile-fields-grid>.profile-data-field,
  .profile-fields-grid>.profile-full-field {
    grid-column: span 1 !important;
  }
}

/* ==========================================================================
   Step 2: Category & Pricing Table
   ========================================================================== */
.currency-select {
  display: flex;
  align-items: center;
}

#radio_contant {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

#radio_contant .radio {
  margin: 0 !important;
}

#radio_contant .radio label {
  background: #ffffff;
  border: 1.5px solid var(--sofia-border);
  border-radius: var(--sofia-radius-md);
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sofia-text-dark);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
}

#radio_contant .radio input[type="radio"]:checked+label {
  background: var(--sofia-primary-light);
  border-color: var(--sofia-primary);
  color: var(--sofia-primary);
  box-shadow: 0 2px 8px rgba(77, 83, 224, 0.15);
}

/* ==========================================================================
   User Table / Accommodation Table Polish (No Horizontal Scrollbar)
   ========================================================================== */
.table-overflow {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  overflow-x: visible !important;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 767px) {
  .table-overflow {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

.user-table,
table.user-table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--sofia-radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--sofia-border) !important;
  box-shadow: var(--sofia-shadow-sm) !important;
  background-color: #ffffff !important;
  margin-bottom: 0 !important;
}

.user-table th,
.user-table thead th,
.user-table tr th {
  background-color: #f8fafc !important;
  color: var(--sofia-text-dark) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.01em !important;
  padding: 10px 10px !important;
  border-bottom: 2px solid var(--sofia-border) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: 1px solid var(--sofia-border) !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  text-align: left !important;
}

.user-table th:last-child {
  border-right: none !important;
  text-align: center !important;
}

.user-table td,
.user-table tbody td,
.user-table tr td {
  padding: 10px 10px !important;
  font-size: 13px !important;
  color: var(--sofia-text-dark) !important;
  vertical-align: middle !important;
  border-top: 1px solid var(--sofia-border) !important;
  border-left: none !important;
  border-right: 1px solid var(--sofia-border) !important;
  border-bottom: none !important;
  white-space: nowrap !important;
  line-height: 1.35 !important;
  transition: background-color 0.15s ease !important;
}

.user-table td:last-child {
  border-right: none !important;
  text-align: center !important;
}

.user-table tr:hover td {
  background-color: #f8fafc !important;
}

/* Hotel Name Column */
.user-table td:first-child {
  white-space: normal !important;
  font-weight: 600 !important;
  color: var(--sofia-text-dark) !important;
}

.user-table td small {
  display: inline-block !important;
  font-size: 11.5px !important;
  color: var(--sofia-primary) !important;
  font-weight: 500 !important;
  margin-left: 3px !important;
}

.user-table td small i {
  font-style: normal !important;
}

/* Dates, Numbers, and Price columns formatting */
.user-table td:nth-child(2),
.user-table td:nth-child(3) {
  white-space: nowrap !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--sofia-text-dark) !important;
}

.user-table td:nth-child(4),
.user-table td:nth-child(7) {
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--sofia-primary) !important;
}

.user-table td:nth-child(5),
.user-table td:nth-child(6),
.user-table th:nth-child(5),
.user-table th:nth-child(6) {
  text-align: center !important;
  font-size: 12.5px !important;
}

/* Action / Trash Button */
.user-table td.trash a,
.user-table td a .fa-trash {
  color: #ef4444 !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: var(--sofia-radius-sm) !important;
  background-color: #fee2e2 !important;
  transition: all 0.2s ease !important;
}

.user-table td.trash a:hover,
.user-table td a:hover .fa-trash {
  background-color: #fecaca !important;
  color: #b91c1c !important;
  transform: scale(1.08) !important;
}

/* ==========================================================================
   Step 3: Accommodation Cards & Controls
   ========================================================================== */
.accomodation-container {
  background: #ffffff !important;
  border: 1px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-lg) !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--sofia-shadow-card) !important;
  transition: all 0.25s ease-in-out !important;
}

.accomodation-container:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(77, 83, 224, 0.12) !important;
}

.accomodation-thumb {
  position: relative;
  border-radius: var(--sofia-radius-md);
  overflow: hidden;
}

.accomodation-thumb img.room-view {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: var(--sofia-radius-md);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.accomodation-thumb img.room-view:hover {
  transform: scale(1.02);
}

.accomodation-content .title h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--sofia-text-dark) !important;
  margin-bottom: 10px !important;
}

.accomodation-content .about-price b.price,
.accomodation-content .about-total-price b.total-price {
  color: var(--sofia-primary) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* ==========================================================================
   Step 3: Accommodation Controls (Exact Horizontal Line System)
   ========================================================================== */
.accomodation-controls {
  background: #ffffff !important;
  border: 1px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-lg) !important;
  padding: 14px 18px !important;
  box-shadow: var(--sofia-shadow-sm) !important;
  margin-bottom: 24px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.15fr 1.15fr 1.25fr !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

.accomodation-controls .accomodation-control-item,
.accomodation-control-item {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Datepicker 1 & 2: Single continuous horizontal input with inline icon */
.accomodation-controls .datepicker-wrapper,
.datepicker-wrapper {
  border: 1.5px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-md) !important;
  background: #ffffff !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.accomodation-controls .datepicker-wrapper:focus-within,
.datepicker-wrapper:focus-within {
  border-color: var(--sofia-primary) !important;
  box-shadow: 0 0 0 3px var(--sofia-primary-glow) !important;
}

.accomodation-controls .datepicker-wrapper .input-group,
.accomodation-controls .datepicker-wrapper .timepicker-input,
.datepicker-wrapper .input-group,
.datepicker-wrapper .timepicker-input {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.accomodation-controls .datepicker-wrapper .input-group-text,
.datepicker-wrapper .input-group-text {
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--sofia-text-muted) !important;
  padding: 0 4px 0 10px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

.accomodation-controls .datepicker-wrapper .form-control,
.accomodation-controls .datepicker-wrapper input[type="text"],
.datepicker-wrapper .form-control,
.datepicker-wrapper input[type="text"] {
  height: 100% !important;
  min-height: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  color: var(--sofia-text-dark) !important;
  padding: 0 8px !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Select dropdowns 3 & 4 */
.accomodation-controls .select-control .selectize-control {
  width: 100% !important;
  margin: 0 !important;
}

.accomodation-controls .select-control .selectize-input {
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  border: 1.5px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-md) !important;
  background: #ffffff !important;
  padding: 0 26px 0 10px !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

/* Search Action Button 5 */
.accomodation-controls .search-control {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.accomodation-controls .search-control .search-btn {
  width: 100% !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  padding: 0 14px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--sofia-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--sofia-primary) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(77, 83, 224, 0.25) !important;
  margin: 0 !important;
}

.accomodation-controls .search-control .search-btn:hover {
  background-color: var(--sofia-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(77, 83, 224, 0.35) !important;
}

@media (max-width: 991px) and (min-width: 768px) {
  .accomodation-controls {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  .accomodation-controls .search-control {
    grid-column: span 2 !important;
  }
}

@media (max-width: 767px) {
  .accomodation-controls {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ==========================================================================
   Step 4: Accompanying Person & Ticket Quantity Add-ons
   ========================================================================== */
.addon-counter-wrapper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--sofia-border);
  border-radius: var(--sofia-radius-md);
  overflow: hidden;
  background: #ffffff;
}

.addon-counter-wrapper button {
  background: #f1f5f9;
  border: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--sofia-text-dark);
  transition: background 0.15s ease;
}

.addon-counter-wrapper button:hover {
  background: var(--sofia-primary);
  color: #ffffff;
}

.addon-counter-wrapper input {
  width: 50px;
  text-align: center;
  border: none;
  font-weight: 600;
  color: var(--sofia-text-dark);
}

/* ==========================================================================
   Step 5: Payment Summary & Gateway Selector
   ========================================================================== */
.payment-summary-box {
  background: #ffffff;
  border: 1px solid var(--sofia-border);
  border-radius: var(--sofia-radius-lg);
  padding: 24px;
  box-shadow: var(--sofia-shadow-card);
  margin-bottom: 24px;
}

.payment-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--sofia-border);
  font-size: 14px;
}

.payment-summary-row:last-child {
  border-bottom: none;
  padding-top: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sofia-primary);
}

.payment-gateway-tile {
  background: #ffffff;
  border: 2px solid var(--sofia-border);
  border-radius: var(--sofia-radius-lg);
  padding: 16px 20px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.payment-gateway-tile:hover {
  border-color: var(--sofia-primary);
  box-shadow: 0 4px 14px rgba(77, 83, 224, 0.1);
  transform: translateY(-1px);
}

.payment-gateway-tile.is-selected {
  border-color: var(--sofia-primary);
  background-color: var(--sofia-primary-light);
}

/* ==========================================================================
   Step: Data & Field Dynamic Module Enhancements
   ========================================================================== */
.label-helper,
.label-helper.long-text {
  display: block !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--sofia-text-muted) !important;
  font-style: italic !important;
  line-height: 1.4 !important;
}

/* Data & Field Section Headings */
.user-react-content .user-react-header {
  background: #f8fafc !important;
  border-radius: var(--sofia-radius-md) !important;
  border: 1px solid var(--sofia-border) !important;
  padding: 14px 20px !important;
  margin: 18px 0 14px 0 !important;
}

.user-react-content .user-react-header h3 {
  color: var(--sofia-text-dark) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-react-content .user-react-header h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 18px;
  background-color: var(--sofia-primary);
  border-radius: 2px;
}

.user-react-content .user-react-header.user-theme-background {
  background-color: var(--sofia-primary) !important;
}

.user-react-content .user-react-header.user-theme-background h1,
.user-react-content .user-react-header.user-theme-background h2,
.user-react-content .user-react-header.user-theme-background h3,
.user-react-content .user-react-header.user-theme-background h4,
.user-react-content .user-react-header.user-theme-background h5,
.user-react-content .user-react-header.user-theme-background h6 {
  color: #ffffff !important;
}

.user-react-content .user-react-header.user-theme-background h3::before {
  display: none !important;
}

/* Form Group Spacing in Data & Field */
.user-react-content .form-group {
  margin-bottom: 20px !important;
}

/* Textareas in Data & Field */
.user-react-content textarea.form-control {
  min-height: 85px !important;
  border-radius: var(--sofia-radius-md) !important;
  padding: 10px 14px !important;
  line-height: 1.55 !important;
  resize: vertical !important;
}

/* Checkboxes and Radios in Data & Field */
.user-react-content .checkbox.checkbox-primary,
.user-react-content .radio.radio-primary {
  padding-left: 0 !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  display: flex;
  align-items: center;
}

.user-react-content .checkbox.checkbox-primary label,
.user-react-content .radio.radio-primary label {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--sofia-text-dark) !important;
  cursor: pointer;
  padding-left: 8px !important;
  margin-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
}

.user-react-content .checkbox.checkbox-primary input[type="checkbox"],
.user-react-content .radio.radio-primary input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--sofia-primary);
  cursor: pointer;
  margin: 0 !important;
}

/* File Upload Controls in Data & Field */
.user-react-content input[type="file"] {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--sofia-text-dark);
  background-color: #f8fafc;
  border: 1.5px dashed var(--sofia-border);
  border-radius: var(--sofia-radius-md);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.user-react-content input[type="file"]:hover {
  border-color: var(--sofia-primary);
  background-color: var(--sofia-primary-light);
}

/* Datepicker Controls in Data & Field */
.user-react-content .datepicker-control {
  margin-bottom: 20px;
}

.user-react-content .datepicker-control .input-group {
  display: flex;
  align-items: stretch;
}

.user-react-content .datepicker-control .input-group-text {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background-color: #f8fafc;
  border: 1.5px solid var(--sofia-border);
  border-right: none;
  border-radius: var(--sofia-radius-md) 0 0 var(--sofia-radius-md);
  color: var(--sofia-text-muted);
}

.user-react-content .datepicker-control input.datepicker-2 {
  border-radius: 0 var(--sofia-radius-md) var(--sofia-radius-md) 0 !important;
  height: 35px !important;
}

/* ==========================================================================
   Phase 1: Admin Master Layout, Header Navbar & Sidebar Navigation
   ========================================================================== */

/* Page Container & Main Content Area */
.page-container {
  background-color: var(--sofia-bg-body) !important;
  min-height: 100vh;
  transition: all 0.2s ease;
}

.main-content.main-page-x {
  padding: 85px 28px 40px !important;
  background-color: var(--sofia-bg-body) !important;
}

/* --------------------------------------------------------------------------
   Top Navigation Header (.header.navbar)
   -------------------------------------------------------------------------- */
.header.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--sofia-border) !important;
  box-shadow: 0 2px 10px rgba(22, 54, 95, 0.04) !important;
  height: 65px !important;
  display: flex !important;
  align-items: center !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 280px !important;
  z-index: 999 !important;
  transition: all 0.2s ease !important;
}

@media (max-width: 992px) {
  .header.navbar {
    left: 0 !important;
  }
}

.header-container {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 28px !important;
}

.nav-left {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-grow: 1 !important;
}

.nav-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  list-style: none !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  float: none !important;
  gap: 12px !important;
}

.nav-left>li,
.nav-right>li {
  display: inline-flex !important;
  align-items: center !important;
}

/* Conference / Event Title Badge */
.conference-name-text {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  line-height: normal !important;
  padding: 0 16px !important;
  margin: 0 0 0 16px !important;
  background: var(--xpertica-primary-light) !important;
  border: 1px solid rgba(194, 32, 151, 0.25) !important;
  border-radius: var(--sofia-radius-pill) !important;
  color: var(--xpertica-primary-dark) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: -0.01em !important;
  font-family: var(--sofia-font-family) !important;
  box-shadow: 0 2px 6px rgba(194, 32, 151, 0.08) !important;
}

.conference-name-text:empty {
  display: none !important;
}

/* Header Top Action Buttons */
.user-top-btns {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.user-top-btns .btn-gradient-primary {
  height: 34px !important;
  padding: 0 16px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: var(--sofia-radius-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
}

.user-top-btns .dropdown-menu.preview-dropdown {
  background: #ffffff !important;
  border-radius: var(--sofia-radius-lg) !important;
  border: 1px solid var(--sofia-border) !important;
  box-shadow: var(--sofia-shadow-lg) !important;
  padding: 12px !important;
  min-width: 280px !important;
  margin-top: 8px !important;
}

.preview-dropdown .preview-dropdown-client {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--sofia-text-muted) !important;
  letter-spacing: 0.05em !important;
  padding: 4px 12px !important;
  display: block !important;
}

.preview-dropdown ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
}

.preview-dropdown ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: var(--sofia-radius-md) !important;
  color: var(--sofia-text-dark) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.preview-dropdown ul li a:hover {
  background: var(--xpertica-primary-light) !important;
  color: var(--xpertica-primary) !important;
}

.preview-dropdown ul li p {
  margin: 0 !important;
  padding: 0 12px 6px 34px !important;
  font-size: 11.5px !important;
  color: var(--sofia-text-muted) !important;
}

/* User Profile in Header */
.user-greeting {
  margin-left: 16px !important;
  margin-right: 12px !important;
}

.user-greeting-text {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--sofia-text-muted) !important;
  font-weight: 500 !important;
}

.user-profile.dropdown .dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px 4px 6px !important;
  border-radius: var(--sofia-radius-pill) !important;
  background: #f8fafc !important;
  border: 1px solid var(--sofia-border) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.user-profile.dropdown .dropdown-toggle:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.user-profile .profile-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 2px solid var(--xpertica-primary) !important;
}

.user-profile .user-info .name {
  font-weight: 600 !important;
  color: var(--sofia-text-dark) !important;
  font-size: 13px !important;
  font-family: var(--sofia-font-family) !important;
}

.user-profile .dropdown-menu {
  background: #ffffff !important;
  border-radius: var(--sofia-radius-md) !important;
  border: 1px solid var(--sofia-border) !important;
  box-shadow: var(--sofia-shadow-lg) !important;
  padding: 6px 0 !important;
  margin-top: 8px !important;
}

.user-profile .dropdown-menu li a {
  display: flex !important;
  align-items: center !important;
  padding: 8px 18px !important;
  color: var(--sofia-text-dark) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.user-profile .dropdown-menu li a:hover {
  background: var(--xpertica-primary-light) !important;
  color: var(--xpertica-primary) !important;
}

/* Sign Out Button */
.user-logout {
  margin-left: 12px !important;
}

.user-logout .logout-btn {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: var(--sofia-radius-pill) !important;
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border: 1px solid #ffe4e6 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: var(--sofia-font-family) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.user-logout .logout-btn:hover {
  background: #e11d48 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(225, 29, 72, 0.25) !important;
}

/* --------------------------------------------------------------------------
   Modern Sidebar Navigation (.side-nav)
   -------------------------------------------------------------------------- */
.side-nav {
  width: 280px !important;
  background-color: #191c2b !important;
  z-index: 1000 !important;
  top: 0 !important;
  bottom: 0 !important;
  position: fixed !important;
  overflow: hidden !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease !important;
}

.side-nav .side-nav-inner {
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.side-nav .side-nav-inner .side-nav-logo {
  height: 65px !important;
  min-height: 65px !important;
  background: #151724 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-right: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
}

.side-nav .side-nav-inner .side-nav-logo>a {
  display: inline-block !important;
  max-width: 150px !important;
  width: 100% !important;
}

.side-nav .side-nav-inner .side-nav-menu {
  background: #191c2b !important;
  border-right: none !important;
  padding: 16px 0 !important;
  height: calc(100vh - 65px) !important;
  overflow-y: auto !important;
  list-style: none !important;
  margin: 0 !important;
}

.side-nav .side-nav-inner .side-nav-menu>li {
  position: relative !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.side-nav .side-nav-inner .side-nav-menu>li>a {
  padding: 10px 18px !important;
  margin: 2px 14px !important;
  border-radius: 10px !important;
  color: #9da8be !important;
  font-family: var(--sofia-font-family) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.side-nav .side-nav-inner .side-nav-menu>li>a .icon-holder {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  font-size: 15px !important;
  margin-right: 12px !important;
  border-radius: 8px !important;
  color: #9da8be !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: all 0.2s ease !important;
}

.side-nav .side-nav-inner .side-nav-menu>li>a .title {
  flex: 1 !important;
  font-weight: 500 !important;
}

.side-nav .side-nav-inner .side-nav-menu>li>a .arrow {
  position: static !important;
  line-height: normal !important;
  font-size: 11px !important;
  color: #717d96 !important;
  transition: transform 0.2s ease !important;
}

/* Active State with Brand Gradient */
.side-nav .side-nav-inner .side-nav-menu li.active>a,
.side-nav .side-nav-inner .side-nav-menu>li>a:hover {
  background-color: var(--xpertica-primary) !important;
  background-image: var(--xpertica-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(194, 32, 151, 0.35) !important;
  font-weight: 600 !important;
}

.side-nav .side-nav-inner .side-nav-menu li.active>a .icon-holder,
.side-nav .side-nav-inner .side-nav-menu>li>a:hover .icon-holder {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

.side-nav .side-nav-inner .side-nav-menu li.active>a .arrow,
.side-nav .side-nav-inner .side-nav-menu>li>a:hover .arrow {
  color: #ffffff !important;
}

/* Submenu Dropdowns */
.side-nav .side-nav-inner .side-nav-menu>li.dropdown ul.dropdown-menu {
  background-color: #151724 !important;
  border-radius: 10px !important;
  margin: 4px 14px !important;
  padding: 6px 8px !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  position: static !important;
  float: none !important;
}

.side-nav .side-nav-inner .side-nav-menu>li.dropdown ul.dropdown-menu>li>a {
  padding: 8px 14px !important;
  border-radius: 6px !important;
  color: #8c9cb5 !important;
  font-size: 12.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.side-nav .side-nav-inner .side-nav-menu>li.dropdown ul.dropdown-menu>li>a:hover {
  background: rgba(194, 32, 151, 0.18) !important;
  color: #ffffff !important;
}

.side-nav .side-nav-inner .side-nav-menu>li.dropdown ul.dropdown-menu>li>a .fa {
  font-size: 9px !important;
  color: var(--xpertica-primary) !important;
}

/* Footer Styling */
.content-footer {
  padding: 20px 28px !important;
  background: #ffffff !important;
  border-top: 1px solid var(--sofia-border) !important;
  margin-top: auto;
}

.content-footer .footer .copyright {
  font-size: 12.5px !important;
  color: var(--sofia-text-muted) !important;
}

/* ==========================================================================
   Phase 2: Main Admin Dashboards & KPI Analytics Cards
   ========================================================================== */

/* Page Section Headings */
.page-heading .page-title {
  font-family: var(--sofia-font-family) !important;
  font-weight: 700 !important;
  color: var(--sofia-text-dark) !important;
  font-size: 18px !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Single Event Card Container (Upcoming & My Events) */
.event-card,
.main-page-x .card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: var(--sofia-radius-lg) !important;
  border: 1px solid var(--sofia-border) !important;
  box-shadow: var(--sofia-shadow-card) !important;
  margin-bottom: 16px !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
}

/* Event Card Hover: Light pink background (#fdf2fa) + subtle lift and pink-accented border */
.event-card:hover,
.main-page-x .card:hover,
table.event-list tbody tr:hover .event-card,
#event tbody tr:hover .event-card,
#event_list tbody tr:hover .event-card {
  background: var(--xpertica-primary-light) !important;
  background-color: var(--xpertica-primary-light) !important;
  border-color: rgba(194, 32, 151, 0.3) !important;
  box-shadow: 0 6px 18px rgba(194, 32, 151, 0.08) !important;
  transform: translateY(-2px) !important;
}

/* Upcoming Event Inner Content Block */
.upcoming-event-block,
.main-page-x .upcoming-event-block {
  padding: 18px 24px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  display: flex !important;
  width: 100% !important;
}

.upcoming-event-thumb img {
  width: 65px !important;
  height: 65px !important;
  object-fit: contain !important;
  border-radius: var(--sofia-radius-md) !important;
}

.upcoming-event-info h4 a {
  color: var(--sofia-text-dark) !important;
  font-family: var(--sofia-font-family) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.upcoming-event-info h4 a:hover {
  color: var(--xpertica-primary) !important;
}

.upcoming-event-schedule {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
}

.upcoming-event-schedule p {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--sofia-text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.upcoming-event-schedule p i {
  color: var(--xpertica-primary) !important;
}

/* My Events List Inner Content Block */
.my-event-block,
.main-page-x .my-event-block {
  padding: 22px 24px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.my-event-info h4 {
  font-family: var(--sofia-font-family) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--sofia-text-dark) !important;
  margin: 0 0 6px !important;
}

.my-event-info p {
  font-size: 12.5px !important;
  color: var(--sofia-text-muted) !important;
  margin: 0 !important;
}

.my-event-block .btn-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 16px !important;
}

.my-event-block .btn-wrapper .btn-gradient-primary {
  margin-top: 0 !important;
  height: 32px !important;
  padding: 0 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: var(--sofia-radius-pill) !important;
}

/* Event Actions & Settings Icons (Same Line Layout) */
.my-event-actions-col {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.my-event-actions-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

.event-mode-badge-wrap {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.btn-event-live,
.btn-event-close,
.btn-event-test {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: var(--sofia-radius-pill) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  margin: 0 !important;
  float: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.btn-event-live {
  background-color: #35b525 !important;
  color: #ffffff !important;
}

.btn-event-close {
  background-color: #da1b1b !important;
  color: #ffffff !important;
}

.btn-event-test {
  background-color: #00c0ef !important;
  color: #ffffff !important;
}

.event-icons {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
}

.event-icons a,
.event-icons button,
.event-icons form {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--sofia-radius-md) !important;
  background: #f8fafc !important;
  border: 1px solid var(--sofia-border) !important;
  color: var(--sofia-text-dark) !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.event-icons form button {
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  height: 100% !important;
  color: inherit !important;
}

.event-icons a:hover,
.event-icons button:hover,
.event-icons form button:hover {
  background: var(--xpertica-primary-light) !important;
  color: var(--xpertica-primary) !important;
  border-color: rgba(194, 32, 151, 0.3) !important;
  transform: translateY(-1.5px) !important;
}

.event-icons a[title*="Delete"]:hover,
.event-icons button[title*="Delete"]:hover {
  background: #fff1f2 !important;
  color: #e11d48 !important;
  border-color: #ffe4e6 !important;
}

/* --------------------------------------------------------------------------
   Registration & Analytics Dashboard KPI Cards
   -------------------------------------------------------------------------- */
.stat-metric-card {
  background: #ffffff !important;
  border-radius: var(--sofia-radius-lg) !important;
  border: 1px solid var(--sofia-border) !important;
  box-shadow: var(--sofia-shadow-card) !important;
  padding: 22px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  height: calc(100% - 24px) !important;
}

.stat-metric-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--sofia-shadow-md) !important;
}

.stat-icon-wrapper {
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--sofia-radius-lg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.stat-icon-self {
  background: rgba(194, 32, 151, 0.12) !important;
}

.stat-icon-corporate {
  background: rgba(174, 44, 149, 0.12) !important;
}

.stat-icon-offline {
  background: rgba(255, 161, 0, 0.12) !important;
}

.stat-icon-total {
  background: rgba(67, 188, 19, 0.12) !important;
}

.stat-metric-value {
  font-size: 26px !important;
  font-weight: 800 !important;
  font-family: var(--sofia-font-family) !important;
  line-height: 1 !important;
  padding: 8px 16px !important;
  border-radius: var(--sofia-radius-pill) !important;
  text-align: center !important;
  min-width: 54px !important;
}

.stat-val-self {
  color: #C22097 !important;
  background: rgba(194, 32, 151, 0.1) !important;
}

.stat-val-corporate {
  color: #AE2C95 !important;
  background: rgba(174, 44, 149, 0.1) !important;
}

.stat-val-offline {
  color: #ffa100 !important;
  background: rgba(255, 161, 0, 0.1) !important;
}

.stat-val-total {
  color: #43bc13 !important;
  background: rgba(67, 188, 19, 0.1) !important;
}

/* Dashboard Chart Cards */
.dashboard-chart-card {
  border-radius: var(--sofia-radius-lg) !important;
  border: 1px solid var(--sofia-border) !important;
  box-shadow: var(--sofia-shadow-card) !important;
  margin-bottom: 24px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.dashboard-chart-card .card-heading {
  padding: 16px 22px !important;
  border-bottom: 1px solid var(--sofia-border) !important;
  background: #ffffff !important;
}

.dashboard-chart-card .card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--sofia-font-family) !important;
  color: var(--sofia-text-dark) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dashboard-chart-card .card-title i {
  color: var(--xpertica-primary) !important;
}

/* ==========================================================================
   Phase 3: Event Management, Gateway Settings & Module Access Forms
   ========================================================================== */

/* Modern Sofia Modal Architecture & Anti-Flicker Hardware Acceleration */
.modal-backdrop {
  z-index: 1040 !important;
  background-color: rgba(22, 54, 95, 0.5) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: opacity !important;
}

.modal {
  z-index: 1050 !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  -webkit-perspective: 1000px !important;
  perspective: 1000px !important;
}

.modal.modal-x {
  position: fixed !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.modal.fade .modal-dialog {
  z-index: 1060 !important;
  position: relative !important;
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-out !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease-out !important;
  -webkit-transform: translate3d(0, -15px, 0) scale(0.98) !important;
  transform: translate3d(0, -15px, 0) scale(0.98) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity !important;
}

.modal.in .modal-dialog,
.modal.show .modal-dialog {
  -webkit-transform: translate3d(0, 0, 0) scale(1) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.modal-x .modal-content,
.modal.modal-x .modal-content {
  background: #ffffff !important;
  border-radius: var(--sofia-radius-lg) !important;
  border: 1px solid var(--sofia-border) !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
}

/* Prevent nested card reflow transitions from triggering flicker */
.modal .card,
.modal-x .card {
  transition: none !important;
  transform: none !important;
}

.modal-x .model-header,
.modal-x .modal-header {
  background-color: var(--xpertica-primary) !important;
  background-image: var(--xpertica-gradient) !important;
  padding: 16px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-x .model-header h3,
.modal-x .modal-header .modal-title,
.modal-x .modal-header h3 {
  color: #ffffff !important;
  font-family: var(--sofia-font-family) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.modal-x .model-header .close,
.modal-x .modal-header .close {
  color: #ffffff !important;
  opacity: 0.85 !important;
  text-shadow: none !important;
  font-size: 18px !important;
  transition: opacity 0.15s ease !important;
}

.modal-x .model-header .close:hover,
.modal-x .modal-header .close:hover {
  opacity: 1 !important;
}

.modal-x .modal-body {
  padding: 24px 28px !important;
  background: #ffffff !important;
}

/* Event Creation & Edit Form Elements */
.event-form-card {
  background: #ffffff !important;
  border-radius: var(--sofia-radius-lg) !important;
  border: 1px solid var(--sofia-border) !important;
  box-shadow: var(--sofia-shadow-card) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

.event-form-card .card-heading {
  padding: 18px 26px !important;
  border-bottom: 1px solid var(--sofia-border) !important;
  background: #ffffff !important;
}

.event-form-card .card-heading .card-title {
  font-family: var(--sofia-font-family) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--sofia-text-dark) !important;
  margin: 0 !important;
}

.event-form-card .card-block {
  padding: 26px 28px !important;
}

/* Input Group Calendar addon */
.datepicker-wrapper .timepicker-input.input-group,
.input-group.timepicker-input {
  display: flex !important;
  align-items: stretch !important;
}

.input-group-text,
.timepicker-input .input-group-text {
  background-color: #f8fafc !important;
  border: 1.5px solid var(--sofia-border) !important;
  border-right: none !important;
  border-radius: var(--sofia-radius-md) 0 0 var(--sofia-radius-md) !important;
  color: var(--sofia-text-muted) !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
}

.datepicker-wrapper input.form-control,
.timepicker-input input.form-control {
  border-radius: 0 var(--sofia-radius-md) var(--sofia-radius-md) 0 !important;
  height: 35px !important;
}

/* Form Group Labels & Validation */
.form-group label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sofia-text-dark) !important;
  font-family: var(--sofia-font-family) !important;
  margin-bottom: 6px !important;
}

.help-block.text-danger,
span.help-block {
  font-size: 12px !important;
  color: #e11d48 !important;
  margin-top: 4px !important;
  display: block;
}

/* Secondary Ghost / Exit Buttons */
.btn-bg-transparent,
.btn-bg-transparent-alt {
  background-color: #f1f5f9 !important;
  color: var(--sofia-text-dark) !important;
  border: 1.5px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-md) !important;
  height: 35px !important;
  padding: 6px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--sofia-font-family) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.btn-bg-transparent:hover,
.btn-bg-transparent-alt:hover {
  background-color: #e2e8f0 !important;
  color: var(--sofia-text-dark) !important;
  border-color: #cbd5e1 !important;
}

/* Gateway & Module Access Table Polish */
.gateway-settings-scroll-wrap {
  border: 1px solid var(--sofia-border) !important;
  border-radius: var(--sofia-radius-md) !important;
  background: #ffffff !important;
}

.gateway-table thead tr th {
  background: #f8fafc !important;
  color: var(--sofia-text-dark) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  border-bottom: 1px solid var(--sofia-border) !important;
  padding: 10px 14px !important;
}

.gateway-table tbody tr td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--sofia-border) !important;
  font-size: 13px !important;
}

.gateway-table tbody tr:hover {
  background-color: var(--xpertica-primary-light) !important;
}

/* ==========================================================================
   Phase 4: Registration Subsystem & Sofia Data Tables Architecture
   ========================================================================== */

/* Modern Data Table Containers & Wrappers */
.ad-table-wrapper,
.table-overflow,
.modern-attendee-card,
.datatable-card {
  background: #ffffff !important;
  border-radius: var(--sofia-radius-lg) !important;
  border: 1px solid var(--sofia-border) !important;
  box-shadow: var(--sofia-shadow-card) !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}

/* Data Table Headings */
table.dataTable thead th,
table.ad-table thead th,
table.modern-table thead th,
.table thead th {
  background-color: #f8fafc !important;
  color: var(--sofia-text-dark) !important;
  font-family: var(--sofia-font-family) !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1.5px solid var(--sofia-border) !important;
  border-top: none !important;
  padding: 12px 16px !important;
  vertical-align: middle !important;
}

/* Data Table Rows & Cells */
table.dataTable tbody td,
table.ad-table tbody td,
table.modern-table tbody td,
.table tbody td {
  padding: 12px 16px !important;
  border-top: 1px solid var(--sofia-border) !important;
  vertical-align: middle !important;
  font-size: 13.5px !important;
  color: var(--sofia-text-dark) !important;
  font-family: var(--sofia-font-family) !important;
  transition: background-color 0.15s ease !important;
}

table.dataTable tbody tr:hover,
table.ad-table tbody tr:hover,
table.modern-table tbody tr:hover,
.table-hover tbody tr:hover {
  background-color: var(--xpertica-primary-light) !important;
}

/* DataTables Search & Length Controls */
.dataTables_wrapper .dataTables_filter {
  margin-bottom: 14px !important;
}

.dataTables_wrapper .dataTables_filter input {
  height: 35px !important;
  border-radius: var(--sofia-radius-md) !important;
  border: 1.5px solid var(--sofia-border) !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  font-family: var(--sofia-font-family) !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--xpertica-primary) !important;
  box-shadow: 0 0 0 3px var(--xpertica-primary-glow) !important;
}

.dataTables_wrapper .dataTables_length select {
  height: 32px !important;
  border-radius: var(--sofia-radius-sm) !important;
  border: 1.5px solid var(--sofia-border) !important;
  padding: 2px 8px !important;
  font-size: 13px !important;
}

/* DataTables Modern Pagination */
.dataTables_wrapper .dataTables_paginate {
  margin-top: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--sofia-radius-md) !important;
  padding: 6px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: var(--sofia-font-family) !important;
  border: 1px solid var(--sofia-border) !important;
  background: #ffffff !important;
  color: var(--sofia-text-dark) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--xpertica-primary-light) !important;
  color: var(--xpertica-primary) !important;
  border-color: rgba(194, 32, 151, 0.3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--xpertica-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(194, 32, 151, 0.3) !important;
}

/* Modern Status Badges & Pills */
.status-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: var(--sofia-radius-pill) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.status-pill.status-paid,
.badge-status-paid {
  background: #edf9e7 !important;
  color: #43bc13 !important;
  border: 1px solid #d4f2c5 !important;
}

.status-pill.status-pending,
.badge-status-pending {
  background: #fff6e6 !important;
  color: #ffa100 !important;
  border: 1px solid #ffe7b8 !important;
}

.status-pill.status-unpaid,
.status-pill.status-failed,
.badge-status-unpaid {
  background: #ffede9 !important;
  color: #ff4b23 !important;
  border: 1px solid #ffd4cc !important;
}

/* Attendee & Report Action Buttons in Tables */
.table-action-btn,
.btn-plain-blue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: var(--sofia-radius-md) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: #f8fafc !important;
  color: var(--sofia-text-dark) !important;
  border: 1px solid var(--sofia-border) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.table-action-btn:hover,
.btn-plain-blue:hover {
  background: var(--xpertica-gradient) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(194, 32, 151, 0.25) !important;
}

/* Export & Tool Buttons (Excel, Print, Filter) */
.btn-header-tool,
.btn-excel-export {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: var(--sofia-radius-pill) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  font-family: var(--sofia-font-family) !important;
  background: #ffffff !important;
  color: var(--sofia-text-dark) !important;
  border: 1px solid var(--sofia-border) !important;
  box-shadow: var(--sofia-shadow-sm) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.btn-header-tool:hover,
.btn-excel-export:hover {
  background: var(--xpertica-primary-light) !important;
  color: var(--xpertica-primary) !important;
  border-color: rgba(194, 32, 151, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   DASHBOARD EVENT LIST TABLE OVERRIDES (TRANSPARENT TABLE & ROW WRAPPERS)
   ========================================================================== */
#event,
#event_list,
.table.event-list,
table.dataTable.event-list,
table.event-list,
.table-responsive.event-list {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#event thead,
#event thead tr,
#event thead th,
#event thead td,
#event_list thead,
#event_list thead tr,
#event_list thead th,
#event_list thead td,
.table.event-list thead,
.table.event-list thead tr,
.table.event-list thead th,
.table.event-list thead td {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 12px 0 !important;
}

#event tbody,
#event tbody tr,
#event tbody tr td,
#event tbody tr:hover,
#event tbody tr:hover td,
#event tbody tr.odd,
#event tbody tr.odd td,
#event tbody tr.even,
#event tbody tr.even td,
#event_list tbody,
#event_list tbody tr,
#event_list tbody tr td,
#event_list tbody tr:hover,
#event_list tbody tr:hover td,
#event_list tbody tr.odd,
#event_list tbody tr.odd td,
#event_list tbody tr.even,
#event_list tbody tr.even td,
table.event-list tbody,
table.event-list tbody tr,
table.event-list tbody tr td,
table.event-list tbody tr:hover,
table.event-list tbody tr:hover td,
table.event-list tbody tr.odd,
table.event-list tbody tr.odd td,
table.event-list tbody tr.even,
table.event-list tbody tr.even td,
table.dataTable.event-list tbody tr,
table.dataTable.event-list tbody tr td,
table.dataTable.event-list tbody tr:hover,
table.dataTable.event-list tbody tr:hover td {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure 100% full width and consistent minimum height on Dashboard Event cards */
#event,
#event_list,
#event_wrapper,
#event_list_wrapper,
.table-responsive.event-list,
table.dataTable.event-list {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#event tbody tr td,
#event_list tbody tr td,
table.event-list tbody tr td {
  width: 100% !important;
  box-sizing: border-box !important;
}

.event-card.my-event-card,
.event-card.upcoming-event-card {
  min-height: 102px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.my-event-block,
.main-page-x .my-event-block {
  padding: 18px 24px !important;
  align-items: center !important;
  width: 100% !important;
}

.my-event-thumb img {
  width: 65px !important;
  height: 65px !important;
  object-fit: contain !important;
  border-radius: var(--sofia-radius-md) !important;
}

.my-event-actions-col {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.my-event-actions-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.my-event-actions-wrapper .btn-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}

.my-event-actions-wrapper .btn-wrapper .btn-gradient-primary {
  margin-top: 0 !important;
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: var(--sofia-radius-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}