/* Layout CSS - Modern Tailwind Design System */

/* ============================================
   ROOT VARIABLES & DESIGN TOKENS
   ============================================ */
:root {
  /* Primary gradient colors */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --gradient-warning: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
  --gradient-danger: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
  --gradient-info: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-dark: linear-gradient(135deg, #434343 0%, #000000 100%);
  --gradient-hero: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 50%,
    #f093fb 100%
  );

  /* Glass effect */
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.2);

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.3);
  --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.3);

  /* Animation timing */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
}

/* Dark mode variables */
.dark {
  --glass-bg: rgba(31, 41, 55, 0.8);
  --glass-border: rgba(75, 85, 99, 0.3);
  --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.4);
}

/* ============================================
   BASE STYLES & TYPOGRAPHY
   ============================================ */
html {
  scroll-behavior: smooth;
}

body {
  font-feature-settings:
    "kern" 1,
    "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus states for accessibility */
*:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Selection colors */
::selection {
  background-color: rgba(99, 102, 241, 0.2);
  color: inherit;
}

/* ============================================
   CALENDAR STYLES
   ============================================ */
#seeker-calendar,
#provider-calendar,
#organization-calendar {
  max-height: 500px;
  font-size: 0.875rem;
}

#seeker-calendar .fc-toolbar-title,
#provider-calendar .fc-toolbar-title,
#organization-calendar .fc-toolbar-title {
  font-size: 1.1rem !important;
  font-weight: 600;
}

#seeker-calendar .fc-button,
#provider-calendar .fc-button,
#organization-calendar .fc-button {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  transition: all var(--transition-fast) ease;
}

#seeker-calendar .fc-button:hover,
#provider-calendar .fc-button:hover,
#organization-calendar .fc-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

#seeker-calendar .fc-daygrid-day,
#provider-calendar .fc-daygrid-day,
#organization-calendar .fc-daygrid-day {
  min-height: 80px;
}

.dark .fc-theme-standard td,
.dark .fc-theme-standard th,
.dark .fc-theme-standard .fc-scrollgrid {
  border-color: rgb(55, 65, 81);
}

.dark .fc .fc-daygrid-day-number,
.dark .fc .fc-col-header-cell-cushion {
  color: rgb(229, 231, 235);
}

.dark .fc .fc-button {
  background-color: rgb(55, 65, 81);
  border-color: rgb(75, 85, 99);
}

.dark .fc .fc-button-primary:not(:disabled).fc-button-active,
.dark .fc .fc-button-primary:not(:disabled):active {
  background-color: rgb(79, 70, 229);
}

/* FullCalendar navigation icon fix - replace broken Unicode with Font Awesome */
.fc .fc-icon,
.fc-toolbar .fc-icon,
.fc-button .fc-icon {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  speak: never;
}

.fc .fc-icon-chevron-left::before,
.fc-toolbar .fc-icon-chevron-left::before,
.fc-button .fc-icon-chevron-left::before {
  content: "\f053" !important; /* Font Awesome chevron-left */
}

.fc .fc-icon-chevron-right::before,
.fc-toolbar .fc-icon-chevron-right::before,
.fc-button .fc-icon-chevron-right::before {
  content: "\f054" !important; /* Font Awesome chevron-right */
}

.fc .fc-icon-chevrons-left::before,
.fc-toolbar .fc-icon-chevrons-left::before,
.fc-button .fc-icon-chevrons-left::before {
  content: "\f100" !important; /* Font Awesome angle-double-left */
}

.fc .fc-icon-chevrons-right::before,
.fc-toolbar .fc-icon-chevrons-right::before,
.fc-button .fc-icon-chevrons-right::before {
  content: "\f101" !important; /* Font Awesome angle-double-right */
}

/* Card header sizing */
.card-header h5 {
  font-size: 1rem;
  margin-bottom: 0;
}

/* ============================================
   MODERN FORM STYLES
   ============================================ */
.form-input-sm {
  @apply text-sm py-1.5 px-3;
}

/* Modern input styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="date"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  transition: all var(--transition-fast) ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="date"]:focus,
.dark input[type="number"]:focus,
.dark input[type="search"]:focus,
.dark input[type="url"]:focus,
.dark textarea:focus,
.dark select:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}

/* ============================================
   BADGE SYSTEM
   ============================================ */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-all;
}

.badge-success {
  @apply bg-emerald-100 text-emerald-800 dark:bg-emerald-900/50 dark:text-emerald-300;
}

.badge-warning {
  @apply bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-300;
}

.badge-danger {
  @apply bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300;
}

.badge-info {
  @apply bg-sky-100 text-sky-800 dark:bg-sky-900/50 dark:text-sky-300;
}

.badge-secondary {
  @apply bg-slate-100 text-slate-700 dark:bg-slate-700/50 dark:text-slate-300;
}

.badge-primary {
  @apply bg-indigo-100 text-indigo-800 dark:bg-indigo-900/50 dark:text-indigo-300;
}

/* Gradient badges for premium feel */
.badge-gradient-primary {
  background: var(--gradient-primary);
  @apply text-white shadow-sm;
}

.badge-gradient-success {
  background: var(--gradient-success);
  @apply text-white shadow-sm;
}

/* ============================================
   MODERN BUTTON SYSTEM
   ============================================ */
.btn {
  @apply inline-flex items-center justify-center px-4 py-2.5 border border-transparent text-sm font-semibold rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all;
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  @apply bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500;
}

.btn-primary:hover {
  box-shadow: var(--shadow-glow);
}

.btn-secondary {
  @apply bg-slate-600 text-white hover:bg-slate-700 focus:ring-slate-500;
}

.btn-success {
  @apply bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-500;
}

.btn-success:hover {
  box-shadow: var(--shadow-glow-success);
}

.btn-danger {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-warning {
  @apply bg-amber-500 text-white hover:bg-amber-600 focus:ring-amber-500;
}

.btn-outline-primary {
  @apply border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white focus:ring-indigo-500 bg-transparent;
}

.btn-outline-secondary {
  @apply border-slate-300 text-slate-700 dark:text-slate-300 dark:border-slate-500 hover:bg-slate-100 dark:hover:bg-slate-700 focus:ring-slate-500 bg-transparent;
}

.btn-outline-danger {
  @apply border-red-500 text-red-600 hover:bg-red-600 hover:text-white focus:ring-red-500 bg-transparent;
}

.btn-sm {
  @apply px-3 py-1.5 text-xs rounded-lg;
}

.btn-lg {
  @apply px-6 py-3.5 text-base rounded-2xl;
}

/* Gradient buttons */
.btn-gradient-primary {
  background: var(--gradient-primary);
  @apply text-white border-0 shadow-md;
}

.btn-gradient-primary:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
  box-shadow: var(--shadow-glow);
}

.btn-gradient-success {
  background: var(--gradient-success);
  @apply text-white border-0 shadow-md;
}

/* Glass button */
.btn-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  @apply border border-white/20 text-slate-700 dark:text-white;
}

/* ============================================
   MODERN CARD SYSTEM
   ============================================ */
.card {
  @apply bg-white dark:bg-slate-800 rounded-2xl overflow-hidden transition-all duration-300;
  box-shadow: var(--shadow-md);
}

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

.card-hover-lift:hover {
  transform: translateY(-4px);
}

.card-header {
  @apply px-5 py-4 bg-slate-50 dark:bg-slate-700/50 border-b border-slate-200 dark:border-slate-600;
}

.card-body {
  @apply p-5;
}

.card-footer {
  @apply px-5 py-4 bg-slate-50 dark:bg-slate-700/50 border-t border-slate-200 dark:border-slate-600;
}

/* Glass card */
.card-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  @apply rounded-2xl overflow-hidden;
}

/* Gradient border card */
.card-gradient-border {
  position: relative;
  @apply bg-white dark:bg-slate-800 rounded-2xl overflow-hidden;
}

.card-gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  background: var(--gradient-primary);
  border-radius: 1rem;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ============================================
   ALERT SYSTEM
   ============================================ */
.alert {
  @apply p-4 rounded-xl mb-4 flex items-start gap-3;
}

.alert-icon {
  @apply flex-shrink-0 w-5 h-5 mt-0.5;
}

.alert-success {
  @apply bg-emerald-50 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800;
}

.alert-danger {
  @apply bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300 border border-red-200 dark:border-red-800;
}

.alert-warning {
  @apply bg-amber-50 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 border border-amber-200 dark:border-amber-800;
}

.alert-info {
  @apply bg-sky-50 text-sky-800 dark:bg-sky-900/30 dark:text-sky-300 border border-sky-200 dark:border-sky-800;
}

/* ============================================
   FORM CONTROLS
   ============================================ */
.form-control {
  @apply block w-full rounded-xl border-slate-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-slate-700 dark:text-white text-sm py-2.5 px-4 transition-all;
}

.form-control:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.form-control-sm {
  @apply py-2 text-xs rounded-lg;
}

.form-select {
  @apply block w-full rounded-xl border-slate-300 dark:border-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-slate-700 dark:text-white text-sm py-2.5 px-4 transition-all;
}

.form-select-sm {
  @apply py-2 text-xs rounded-lg;
}

.form-label {
  @apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5;
}

.form-check {
  @apply flex items-center;
}

.form-check-input {
  @apply h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded dark:border-slate-600 dark:bg-slate-700 transition-all;
}

.form-check-label {
  @apply ml-2 block text-sm text-slate-700 dark:text-slate-300;
}

/* Floating label effect */
.form-floating {
  position: relative;
}

.form-floating label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  transition: all var(--transition-fast) ease;
  pointer-events: none;
  @apply text-slate-500;
}

.form-floating input:focus ~ label,
.form-floating input:not(:placeholder-shown) ~ label {
  top: 0.25rem;
  transform: translateY(0);
  font-size: 0.75rem;
  @apply text-indigo-600;
}

/* ============================================
   TABLE SYSTEM
   ============================================ */
.table {
  @apply min-w-full divide-y divide-slate-200 dark:divide-slate-700;
}

.table thead {
  @apply bg-slate-50 dark:bg-slate-700/50;
}

.table th {
  @apply px-4 py-3 text-left text-xs font-semibold text-slate-600 dark:text-slate-300 uppercase tracking-wider;
}

.table td {
  @apply px-4 py-3.5 whitespace-nowrap text-sm text-slate-700 dark:text-slate-300;
}

.table tbody tr {
  @apply bg-white dark:bg-slate-800 transition-colors;
}

.table-striped tbody tr:nth-child(odd) {
  @apply bg-slate-50/50 dark:bg-slate-900/30;
}

.table-hover tbody tr:hover {
  @apply bg-indigo-50/50 dark:bg-indigo-900/20;
}

/* ============================================
   NAVIGATION TABS
   ============================================ */
.nav-tabs {
  @apply flex border-b border-slate-200 dark:border-slate-700 gap-1;
}

.nav-tabs .nav-link {
  @apply px-4 py-2.5 text-sm font-medium text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 border-b-2 border-transparent hover:border-slate-300 dark:hover:border-slate-600 transition-all rounded-t-lg;
}

.nav-tabs .nav-link.active {
  @apply text-indigo-600 dark:text-indigo-400 border-indigo-600 dark:border-indigo-400 bg-indigo-50/50 dark:bg-indigo-900/20;
}

/* Pills variant */
.nav-pills {
  @apply flex gap-2;
}

.nav-pills .nav-link {
  @apply px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 rounded-xl transition-all hover:bg-slate-100 dark:hover:bg-slate-700;
}

.nav-pills .nav-link.active {
  @apply bg-indigo-600 text-white;
}

/* Tab content */
.tab-content > .tab-pane {
  @apply hidden;
}

.tab-content > .tab-pane.active {
  @apply block;
  animation: fadeIn 0.3s ease;
}

/* ============================================
   ACCORDION
   ============================================ */
.accordion {
  @apply divide-y divide-slate-200 dark:divide-slate-700 border border-slate-200 dark:border-slate-700 rounded-2xl overflow-hidden;
}

.accordion-item {
  @apply bg-white dark:bg-slate-800;
}

.accordion-button {
  @apply flex items-center justify-between w-full px-5 py-4 text-left text-sm font-medium text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 focus:outline-none transition-colors;
}

.accordion-button[aria-expanded="true"] {
  @apply bg-slate-50 dark:bg-slate-700;
}

.accordion-button i.fa-chevron-down {
  transition: transform var(--transition-fast) ease;
}

.accordion-button[aria-expanded="true"] i.fa-chevron-down {
  transform: rotate(180deg);
}

.accordion-body {
  @apply px-5 py-4 text-sm text-slate-600 dark:text-slate-300 bg-slate-50 dark:bg-slate-900/50;
}

/* ============================================
   MODAL SYSTEM
   ============================================ */
.modal {
  @apply fixed inset-0 z-50 overflow-y-auto hidden;
}

.modal.show {
  @apply block;
}

.modal-backdrop {
  @apply fixed inset-0 bg-slate-900/60 transition-opacity;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal-dialog {
  @apply flex items-center justify-center min-h-screen p-4;
}

.modal-dialog-centered {
  @apply flex items-center;
}

.modal-content {
  @apply bg-white dark:bg-slate-800 rounded-2xl shadow-2xl max-w-lg w-full mx-auto overflow-hidden transform transition-all;
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  @apply flex items-center justify-between px-6 py-4 border-b border-slate-200 dark:border-slate-700;
}

.modal-title {
  @apply text-lg font-semibold text-slate-900 dark:text-slate-100;
}

.modal-body {
  @apply px-6 py-5;
}

.modal-footer {
  @apply flex justify-end gap-3 px-6 py-4 bg-slate-50 dark:bg-slate-700/50;
}

.btn-close {
  @apply p-2 rounded-lg text-slate-400 hover:text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-700 focus:outline-none transition-colors;
}

/* ============================================
   DROPDOWN MENU
   ============================================ */
.dropdown-menu {
  @apply absolute z-50 mt-2 w-48 origin-top-right rounded-xl bg-white dark:bg-slate-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10 focus:outline-none hidden overflow-hidden;
  animation: dropdownSlideIn 0.15s ease;
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.dropdown-menu.show {
  @apply block;
}

.dropdown-item {
  @apply block px-4 py-2.5 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors;
}

.dropdown-item:first-child {
  @apply rounded-t-lg;
}

.dropdown-item:last-child {
  @apply rounded-b-lg;
}

/* ============================================
   CONTAINER & LAYOUT
   ============================================ */
.container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Modern section spacing */
.section {
  @apply py-12 md:py-16 lg:py-20;
}

.section-sm {
  @apply py-8 md:py-10;
}

/* ============================================
   SPACING HELPERS
   ============================================ */
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.mb-3 {
  margin-bottom: 1rem !important;
}
.mb-4 {
  margin-bottom: 1.5rem !important;
}
.mb-5 {
  margin-bottom: 2rem !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: 0.25rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-3 {
  margin-top: 1rem !important;
}
.mt-4 {
  margin-top: 1.5rem !important;
}
.mt-5 {
  margin-top: 2rem !important;
}
.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.my-5 {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}
.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.pt-3 {
  padding-top: 1rem !important;
}
.pb-3 {
  padding-bottom: 1rem !important;
}

/* ============================================
   TEXT HELPERS
   ============================================ */
.text-muted {
  @apply text-slate-500 dark:text-slate-400;
}

.small {
  @apply text-sm;
}

.fw-bold {
  @apply font-semibold;
}

.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================
   VISIBILITY & DISPLAY
   ============================================ */
.d-none {
  display: none !important;
}
.d-block {
  display: block !important;
}
.d-flex {
  display: flex !important;
}
.d-inline {
  display: inline !important;
}
.d-inline-block {
  display: inline-block !important;
}
.d-inline-flex {
  display: inline-flex !important;
}

/* Flex helpers */
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-grow-1 {
  flex-grow: 1 !important;
}
.align-items-center {
  align-items: center !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
.gap-2 {
  gap: 0.5rem !important;
}
.gap-3 {
  gap: 0.75rem !important;
}
.gap-4 {
  gap: 1rem !important;
}

/* ============================================
   SHADOW SYSTEM
   ============================================ */
.shadow-soft {
  box-shadow:
    0 2px 15px -3px rgba(0, 0, 0, 0.07),
    0 10px 20px -2px rgba(0, 0, 0, 0.04);
}

.shadow-medium {
  box-shadow:
    0 4px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 25px -5px rgba(0, 0, 0, 0.04);
}

.shadow-glow-primary {
  box-shadow: var(--shadow-glow);
}

.dark .shadow-soft {
  box-shadow:
    0 2px 15px -3px rgba(0, 0, 0, 0.2),
    0 10px 20px -2px rgba(0, 0, 0, 0.15);
}

/* ============================================
   GRID HELPERS
   ============================================ */
.row {
  @apply flex flex-wrap -mx-3;
}

.col-md-2 {
  @apply w-full md:w-1/6 px-3;
}

.col-md-4 {
  @apply w-full md:w-1/3 px-3;
}

.col-md-6 {
  @apply w-full md:w-1/2 px-3;
}

.col-md-8 {
  @apply w-full md:w-2/3 px-3;
}

.col-md-12 {
  @apply w-full px-3;
}

.col-sm-6 {
  @apply w-full sm:w-1/2 px-3;
}

/* ============================================
   BUTTON GROUP
   ============================================ */
.btn-group {
  @apply inline-flex rounded-xl shadow-sm overflow-hidden;
}

.btn-group .btn {
  @apply rounded-none border-r border-white/20;
}

.btn-group .btn:first-child {
  @apply rounded-l-xl;
}

.btn-group .btn:last-child {
  @apply rounded-r-xl border-r-0;
}

.btn-group-sm .btn {
  @apply px-2.5 py-1.5 text-xs;
}

/* ============================================
   LIST GROUP
   ============================================ */
.list-group {
  @apply divide-y divide-slate-200 dark:divide-slate-700 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden;
}

.list-group-item {
  @apply px-4 py-3.5 bg-white dark:bg-slate-800 text-sm text-slate-700 dark:text-slate-300 transition-colors;
}

.list-group-item:hover {
  @apply bg-slate-50 dark:bg-slate-700;
}

.list-group-item.active {
  @apply bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 border-l-4 border-l-indigo-500;
}

/* ============================================
   INPUT GROUP
   ============================================ */
.input-group {
  @apply flex;
}

.input-group .form-control {
  @apply rounded-none;
}

.input-group .form-control:first-child {
  @apply rounded-l-xl;
}

.input-group .form-control:last-child {
  @apply rounded-r-xl;
}

.input-group-text {
  @apply inline-flex items-center px-4 rounded-l-xl border border-r-0 border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-700 text-slate-500 dark:text-slate-400 text-sm;
}

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
  @apply flex items-center gap-1;
}

.page-item {
  @apply inline-block;
}

.page-link {
  @apply px-3.5 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors;
}

.page-item.active .page-link {
  @apply bg-indigo-600 text-white border-indigo-600 hover:bg-indigo-700;
  box-shadow: var(--shadow-glow);
}

.page-item.disabled .page-link {
  @apply opacity-50 cursor-not-allowed;
}

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
  background: var(--gradient-hero);
  @apply relative overflow-hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

.hero-collage {
  @apply relative py-16 md:py-24;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.1) 0%,
    rgba(168, 85, 247, 0.1) 50%,
    rgba(236, 72, 153, 0.1) 100%
  );
}

.dark .hero-collage {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.2) 0%,
    rgba(168, 85, 247, 0.15) 50%,
    rgba(236, 72, 153, 0.1) 100%
  );
}

/* ============================================
   FEATURE CARDS
   ============================================ */
.feature-card {
  @apply bg-white dark:bg-slate-800 rounded-2xl p-6 transition-all duration-300;
  box-shadow: var(--shadow-md);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.feature-icon {
  @apply w-14 h-14 rounded-xl flex items-center justify-center text-2xl mb-4;
  background: var(--gradient-primary);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.5s ease-out;
}

/* Fly-in animations */
.fly-in {
  opacity: 0;
  transform: translateY(30px);
  animation: flyIn 0.6s ease forwards;
}

@keyframes flyIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fly-in-delay-1 {
  animation-delay: 0.1s;
}
.fly-in-delay-2 {
  animation-delay: 0.2s;
}
.fly-in-delay-3 {
  animation-delay: 0.3s;
}
.fly-in-delay-4 {
  animation-delay: 0.4s;
}
.fly-in-delay-5 {
  animation-delay: 0.5s;
}

/* Stagger animation for lists */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.5s ease forwards;
}

.stagger-children > *:nth-child(1) {
  animation-delay: 0.05s;
}
.stagger-children > *:nth-child(2) {
  animation-delay: 0.1s;
}
.stagger-children > *:nth-child(3) {
  animation-delay: 0.15s;
}
.stagger-children > *:nth-child(4) {
  animation-delay: 0.2s;
}
.stagger-children > *:nth-child(5) {
  animation-delay: 0.25s;
}
.stagger-children > *:nth-child(6) {
  animation-delay: 0.3s;
}

/* ============================================
   EXPIRING CARD HIGHLIGHT
   ============================================ */
.expiring-card {
  @apply border-2 border-amber-400 dark:border-amber-500;
  animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(251, 191, 36, 0);
  }
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-slate-100 dark:bg-slate-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-slate-300 dark:bg-slate-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-slate-400 dark:bg-slate-500;
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 640px) {
  .btn {
    @apply w-full justify-center;
  }

  .btn-group {
    @apply flex-col w-full;
  }

  .btn-group .btn {
    @apply w-full rounded-none border-r-0 border-b border-white/20;
  }

  .btn-group .btn:first-child {
    @apply rounded-t-xl rounded-b-none;
  }

  .btn-group .btn:last-child {
    @apply rounded-b-xl rounded-t-none border-b-0;
  }

  .nav-tabs {
    @apply overflow-x-auto flex-nowrap pb-2 -mx-4 px-4;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .card-body {
    @apply p-4;
  }

  .modal-content {
    @apply mx-2 rounded-xl;
  }

  /* Touch-friendly targets */
  .btn,
  .nav-link,
  .dropdown-item,
  .list-group-item {
    min-height: 44px;
  }
}

/* ============================================
   STICKY ELEMENTS
   ============================================ */
.sticky-sidebar {
  @apply sticky top-4;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* ============================================
   LOADING STATES
   ============================================ */
.skeleton {
  @apply bg-slate-200 dark:bg-slate-700 rounded animate-pulse;
}

.skeleton-text {
  @apply h-4 rounded;
}

.skeleton-title {
  @apply h-6 rounded w-3/4;
}

.skeleton-button {
  @apply h-10 rounded-xl w-24;
}

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
  @apply text-center py-12 px-6;
}

.empty-state-icon {
  @apply w-16 h-16 mx-auto mb-4 text-slate-300 dark:text-slate-600;
}

.empty-state-title {
  @apply text-lg font-semibold text-slate-700 dark:text-slate-300 mb-2;
}

.empty-state-description {
  @apply text-slate-500 dark:text-slate-400 mb-6 max-w-md mx-auto;
}