/* Tailwind CSS directives */
/* Tailwind CSS directives */
/* stylelint-disable-next-line at-rule-no-unknown */
@tailwind base;
/* stylelint-disable-next-line at-rule-no-unknown */
@tailwind components;
/* stylelint-disable-next-line at-rule-no-unknown */
@tailwind utilities;

/* Custom base styles to match dashboard.css */
@layer base {
  html {
    font-size: 62.5%;
    /* 10px base for rem calculations */
  }

  body {
    font-size: 1.6rem;
    /* 16px */
    font-family: 'Segoe UI', Tahoma, sans-serif;
  }

  h3 {
    font-size: 2.2rem;
  }
}

/* Custom component classes */
@layer components {

  /* Dashboard-specific button styles */
  .dashboard-btn-primary {
    @apply bg-brand-red text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:bg-red-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-brand-red focus:ring-offset-2 transform hover:-translate-y-0.5;
  }

  .dashboard-btn-secondary {
    @apply bg-white text-gray-700 px-6 py-3 rounded-lg font-semibold border border-gray-300 transition-all duration-200 hover:bg-gray-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transform hover:-translate-y-0.5;
  }

  .dashboard-btn-success {
    @apply bg-brand-green text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:bg-green-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-brand-green focus:ring-offset-2 transform hover:-translate-y-0.5;
  }

  .dashboard-btn-info {
    @apply bg-brand-blue text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2 transform hover:-translate-y-0.5;
  }

  /* Legacy button support */
  .btn-primary {
    @apply bg-brand-red text-white px-4 py-2 rounded-md font-semibold transition-all duration-200 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-brand-red focus:ring-offset-2;
  }

  .btn-secondary {
    @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-md font-semibold transition-all duration-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2;
  }

  .btn-success {
    @apply bg-brand-green text-white px-4 py-2 rounded-md font-semibold transition-all duration-200 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-brand-green focus:ring-offset-2;
  }

  .btn-info {
    @apply bg-brand-blue text-white px-4 py-2 rounded-md font-semibold transition-all duration-200 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-brand-blue focus:ring-offset-2;
  }

  /* Form styles */
  .form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-red focus:border-transparent transition-all duration-200;
  }

  .form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-red focus:border-transparent transition-all duration-200 bg-white;
  }

  .form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brand-red focus:border-transparent transition-all duration-200 resize-vertical;
  }

  /* Dashboard card styles with clean white design */
  .dashboard-card {
    @apply bg-white dark:bg-dark-sidebar rounded-2xl p-8 transition-all duration-300 hover:shadow-xl;
    box-shadow: 0 0 1rem rgba(231, 231, 243, 0.6);
    border: 1px solid rgba(231, 231, 243, 0.3);
  }

  .dashboard-card-compact {
    @apply bg-white dark:bg-dark-sidebar rounded-xl p-6 transition-all duration-300 hover:shadow-lg;
    box-shadow: 0 0 0.5rem rgba(231, 231, 243, 0.4);
    border: 1px solid rgba(231, 231, 243, 0.2);
  }

  .dashboard-card-header {
    @apply border-b border-gray-100 dark:border-gray-700 pb-4 mb-6;
  }

  /* Legacy card support */
  .card {
    @apply bg-white dark:bg-dark-sidebar rounded-2xl p-8 transition-all duration-300;
    box-shadow: 0 0 1rem rgba(231, 231, 243, 0.6);
  }

  .card-header {
    @apply border-b border-gray-200 pb-4 mb-6;
  }

  /* Table styles matching dashboard.css */
  .table-primary {
    @apply w-full border-collapse;
  }

  .table-primary thead tr {
    @apply bg-gray-100;
  }

  .table-primary th,
  .table-primary td {
    @apply p-4 border-b border-gray-200 text-left;
  }

  .table-primary th {
    @apply font-semibold text-gray-700;
  }

  /* Entity cell for user/property listings */
  .entity-cell {
    @apply flex items-center;
  }

  .entity-avatar {
    @apply w-12 h-12 rounded-full object-cover mr-3;
  }

  .entity-name {
    @apply font-semibold text-gray-800;
  }

  .entity-value {
    @apply text-gray-600 font-semibold;
  }

  /* Dashboard table styles */
  .dashboard-table {
    @apply w-full border-collapse mb-4 bg-white dark:bg-dark-sidebar rounded-lg overflow-hidden;
    box-shadow: 0 0 0.5rem rgba(231, 231, 243, 0.3);
  }

  .dashboard-table thead tr {
    @apply bg-gray-50 dark:bg-gray-800;
  }

  .dashboard-table th,
  .dashboard-table td {
    @apply p-4 border-b border-gray-100 dark:border-gray-700;
  }

  .dashboard-table th {
    @apply text-left font-semibold text-gray-700 dark:text-gray-300 text-sm uppercase tracking-wider;
  }

  .dashboard-table td {
    @apply text-gray-600 dark:text-gray-400;
  }

  .dashboard-table tbody tr {
    @apply hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200;
  }

  /* Legacy table support */
  .lb-table {
    @apply w-full border-collapse mb-4;
  }

  .lb-table thead tr {
    @apply bg-gray-50;
  }

  .lb-table th,
  .lb-table td {
    @apply p-4 border-b border-gray-200;
  }

  .lb-table th {
    @apply text-left font-semibold text-gray-700;
  }

  .lb-table td {
    @apply text-gray-600;
  }

  /* Status styles */
  .status-pill {
    @apply px-3 py-1 rounded-full text-sm font-medium;
  }

  .status-paid {
    @apply bg-green-100 text-green-800;
  }

  .status-pending {
    @apply bg-yellow-100 text-yellow-800;
  }

  .status-expired {
    @apply text-red-600 font-medium;
  }

  .status-expiring {
    @apply text-orange-600 font-medium;
  }

  /* Empty cell styles */
  .empty-cell {
    @apply text-center text-gray-400 italic py-8;
  }

  /* See all link styles */
  .see-all {
    @apply flex items-center justify-end gap-2 text-blue-600 font-medium hover:opacity-70 transition-opacity;
  }

  /* Modal styles */
  .modal {
    @apply fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-40;
    backdrop-filter: blur(3px);
  }

  .modal-content {
    @apply bg-white w-full max-w-2xl max-h-screen overflow-y-auto p-10 rounded-2xl relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s ease;
  }

  .close-button {
    @apply absolute top-4 right-6 text-2xl text-gray-400 cursor-pointer transition-all duration-200 w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-100 hover:text-gray-800;
  }

  .modal-card {
    @apply grid grid-cols-1 md:grid-cols-[120px_1fr] gap-6 items-center mb-8 pb-6 border-b border-gray-200;
  }

  .modal-avatar {
    @apply w-30 h-30 rounded-full object-cover border-4 border-gray-200;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  }

  .modal-details {
    @apply w-full border-separate mt-4;
    border-spacing: 0;
  }

  .modal-details tr:not(:last-child) {
    @apply border-b border-gray-100;
  }

  .modal-details td {
    @apply py-4 px-2 align-top text-gray-700;
  }

  .modal-details td:first-child {
    @apply font-semibold text-gray-500 w-1/3 pl-0;
  }

  .modal-details td:last-child {
    @apply w-2/3 text-right pr-0;
    word-break: break-word;
  }

  /* Filter styles */
  .filter-section {
    @apply space-y-2;
  }

  .filter-section-title {
    @apply text-sm font-semibold text-gray-700 mb-2;
  }

  .filter-dropdown select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-brand-red focus:border-transparent;
  }

  .filter-actions {
    @apply flex gap-2 pt-4;
  }

  .filter-button {
    @apply bg-brand-red text-white px-4 py-2 rounded-md font-semibold transition-all duration-200 hover:bg-red-600;
  }

  .reset-button {
    @apply bg-gray-100 text-gray-700 px-4 py-2 rounded-md font-semibold transition-all duration-200 hover:bg-gray-200;
  }

  /* Dashboard stats styling */
  .dashboard-stats-container {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8;
  }

  .dashboard-stat-card {
    @apply bg-white dark:bg-dark-sidebar rounded-xl p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
    box-shadow: 0 0 0.5rem rgba(231, 231, 243, 0.4);
    border: 1px solid rgba(231, 231, 243, 0.2);
    min-height: 120px;
  }

  .dashboard-stat-header {
    @apply flex justify-between items-center mb-4;
  }

  .dashboard-stat-label {
    @apply text-sm font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider;
  }

  .dashboard-stat-icon {
    @apply w-10 h-10 opacity-70;
  }

  .dashboard-stat-value {
    @apply text-3xl font-bold text-brand-red;
  }

  /* Legacy stats support */
  .stats-bar {
    @apply flex flex-wrap gap-4 mb-6 p-4 bg-white rounded-lg;
    box-shadow: 0 0 0.5rem rgba(231, 231, 243, 0.3);
  }

  .stat-item {
    @apply flex flex-col items-center text-center;
  }

  .stat-label {
    @apply text-xs text-gray-500 uppercase tracking-wider;
  }

  .stat-value {
    @apply text-lg font-bold text-brand-red;
  }

  /* Date input styles */
  .datepicker-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md bg-white text-gray-900 focus:outline-none focus:ring-2 focus:ring-brand-red focus:border-transparent;
  }

  .date-input-group {
    @apply space-y-1;
  }

  .date-input-group label {
    @apply text-sm font-medium text-gray-700;
  }

  .filter-range-dates {
    @apply space-y-3;
  }

  /* Dashboard layout components */
  .dashboard-main-container {
    @apply w-full space-y-8;
  }

  .dashboard-section {
    @apply mb-8;
  }

  .dashboard-section-title {
    @apply text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6;
  }

  .dashboard-grid-2 {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
  }

  .dashboard-grid-3 {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }

  .dashboard-grid-4 {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
  }

  /* Dashboard chart containers */
  .dashboard-chart-container {
    @apply bg-white dark:bg-dark-sidebar rounded-xl p-6;
    box-shadow: 0 0 0.5rem rgba(231, 231, 243, 0.4);
    border: 1px solid rgba(231, 231, 243, 0.2);
  }

  .dashboard-chart-title {
    @apply text-xl font-semibold text-brand-red mb-6;
  }

  .dashboard-chart-content {
    @apply min-h-[300px];
  }

  /* Animation */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

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

  .fade-in {
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
  }

  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

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

  .dashboard-animate-in {
    animation: slideInUp 0.6s ease forwards;
  }

  /* Estate specific styles */
  .estate-link {
    @apply flex items-center no-underline text-inherit;
  }

  .estate-link:hover .entity-name {
    @apply text-brand-red;
  }

  .estate-type-badge {
    @apply inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800;
  }

  .occupancy-display {
    @apply space-y-1;
  }

  .occupancy-text {
    @apply text-sm font-medium;
  }

  .occupancy-bar {
    @apply w-full bg-gray-200 rounded-full h-2;
  }

  .progress-bar {
    @apply h-full rounded-full transition-all duration-300;
  }

  .bg-success {
    @apply bg-green-500;
  }

  .bg-warning {
    @apply bg-yellow-500;
  }

  .bg-danger {
    @apply bg-red-500;
  }

  /* Status indicators */
  .status-booked {
    @apply inline-flex items-center px-3 py-1 rounded-md text-sm font-semibold bg-brand-green text-white;
  }

  .status-available {
    @apply inline-flex items-center px-3 py-1 rounded-md text-sm font-semibold bg-brand-blue text-white;
  }

  /* Pagination styles */
  .pagination-container {
    @apply flex flex-wrap justify-end items-center gap-2 bg-gray-50 p-4 rounded-lg;
  }

  .pagination-link {
    @apply inline-block px-4 py-2 text-gray-700 bg-white border border-transparent rounded-lg transition-all duration-200 hover:bg-brand-red hover:text-white hover:border-brand-red transform hover:-translate-y-px;
  }

  .pagination-current {
    @apply inline-block px-4 py-2 text-white bg-red-600 border border-red-600 rounded-lg font-semibold;
  }

  .pagination-disabled {
    @apply pointer-events-none opacity-50;
  }

  /* Loading spinner */
  .spinner {
    @apply inline-block w-8 h-8 border-4 border-gray-200 border-t-brand-red rounded-full animate-spin;
  }

  /* Notification styles */
  .notification {
    @apply flex items-center justify-between p-4 mb-4 rounded-lg;
  }

  .notification.success {
    @apply bg-green-100 text-green-800 border border-green-200;
  }

  .notification.error {
    @apply bg-red-100 text-red-800 border border-red-200;
  }

  .notification.warning {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200;
  }

  .notification.info {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
  }
}

/* Dark mode styles */
@layer utilities {
  /* Dashboard component dark mode */
  .dark .dashboard-card,
  .dark .dashboard-card-compact,
  .dark .dashboard-chart-container,
  .dark .dashboard-stat-card {
    @apply bg-dark-sidebar;
    box-shadow: 0 0 1rem rgba(18, 19, 24, 0.8);
    border-color: rgba(75, 85, 99, 0.3);
  }

  .dark .dashboard-table {
    @apply bg-dark-sidebar;
    box-shadow: 0 0 0.5rem rgba(18, 19, 24, 0.6);
  }

  .dark .dashboard-stat-label,
  .dark .dashboard-chart-title,
  .dark .dashboard-section-title {
    @apply text-gray-300;
  }

  .dark .dashboard-stat-value {
    @apply text-brand-red;
  }

  /* Legacy card support */
  .dark .card {
    @apply bg-dark-sidebar;
    box-shadow: 0 0 1rem #121318;
  }

  .dark .form-input,
  .dark .form-select,
  .dark .form-textarea {
    @apply bg-dark-bg border-dark-border text-dark-text;
  }

  .dark .table-primary thead tr,
  .dark .lb-table thead tr {
    @apply bg-gray-800;
  }

  .dark .table-primary th,
  .dark .table-primary td,
  .dark .lb-table th,
  .dark .lb-table td {
    @apply border-dark-border text-dark-text;
  }

  .dark .entity-name {
    @apply text-gray-200;
  }

  .dark .entity-value {
    @apply text-gray-400;
  }

  .dark .status-paid {
    @apply bg-green-900 text-green-200;
  }

  .dark .status-pending {
    @apply bg-yellow-900 text-yellow-200;
  }

  .dark .status-expired {
    @apply text-red-400;
  }

  .dark .status-expiring {
    @apply text-orange-400;
  }

  .dark .empty-cell {
    @apply text-gray-500;
  }

  .dark .see-all {
    @apply text-blue-400;
  }

  .dark .modal-content {
    @apply bg-dark-sidebar;
  }

  .dark .close-button {
    @apply hover:bg-gray-700 hover:text-gray-200;
  }

  .dark .modal-card {
    @apply border-gray-700;
  }

  .dark .modal-avatar {
    @apply border-gray-600;
  }

  .dark .modal-details tr:not(:last-child) {
    @apply border-gray-700;
  }

  .dark .modal-details td {
    @apply text-gray-300;
  }

  .dark .modal-details td:first-child {
    @apply text-gray-400;
  }

  .dark .filter-section-title {
    @apply text-gray-300;
  }

  .dark .filter-dropdown select,
  .dark .datepicker-input {
    @apply bg-gray-700 border-gray-600 text-gray-100;
  }

  .dark .reset-button {
    @apply bg-gray-700 text-gray-300 hover:bg-gray-600;
  }

  .dark .stats-bar {
    @apply bg-gray-800;
  }

  .dark .stat-label {
    @apply text-gray-400;
  }

  .dark .date-input-group label {
    @apply text-gray-300;
  }

  .dark .pagination-container {
    @apply bg-dark-sidebar;
  }

  .dark .pagination-link {
    @apply bg-dark-bg text-dark-text border-dark-border;
  }

  .dark .estate-type-badge {
    @apply bg-blue-900 text-blue-200;
  }

  .dark .occupancy-bar {
    @apply bg-gray-700;
  }

  /* Dark mode notifications */
  .dark .notification.success {
    @apply bg-green-900 text-green-200 border-green-700;
  }

  .dark .notification.error {
    @apply bg-red-900 text-red-200 border-red-700;
  }

  .dark .notification.warning {
    @apply bg-yellow-900 text-yellow-200 border-yellow-700;
  }

  .dark .notification.info {
    @apply bg-blue-900 text-blue-200 border-blue-700;
  }

  /* Additional missing classes for proper styling */
  .lb-panel {
    @apply block;
  }

  .lb-panel.active {
    @apply block;
  }
}

/* Utility classes for specific dashboard elements */
@layer utilities {
  .sidebar-transition {
    @apply transition-sidebar duration-300 ease-in-out;
  }

  .hover-lift {
    @apply transition-all duration-300 hover:-translate-y-1 hover:scale-105 hover:shadow-hover;
  }

  .clickable-row {
    @apply cursor-pointer transition-colors duration-200 hover:bg-blue-50;
  }

  .text-brand {
    @apply text-brand-red;
  }

  .bg-brand {
    @apply bg-brand-red;
  }

  .border-brand {
    @apply border-brand-red;
  }
}