@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* V2 Design System - CSS Variables */
    --v2-sidebar: #1e2240;
    --v2-sidebar-hover: #2a3050;
    --v2-sidebar-active: #3d4663;
    --v2-gold: #ac9c79;
    --v2-gold-rgb: 172, 156, 121;
    --v2-bg: #f5f5f7;
    --v2-card: #ffffff;
    --v2-purple: #8b5cf6;
    --v2-success: #22c55e;
    --v2-warning: #f97316;
    --v2-danger: #ef4444;
    --v2-text: #1f2937;
    --v2-text-muted: #6b7280;
    --v2-border: #e5e7eb;
  }
}

@layer components {
  /* ========================================
     V2 DESIGN SYSTEM
     ======================================== */

  /* ----------------------------------------
     LAYOUT
     ---------------------------------------- */
  .v2-layout {
    @apply flex min-h-screen bg-v2-bg;
  }

  .v2-main {
    @apply flex-1 p-6 overflow-auto;
    margin-left: calc(16rem + 2rem); /* sidebar width + floating gap */
  }

  /* ----------------------------------------
     SIDEBAR
     ---------------------------------------- */
  .v2-sidebar {
    @apply fixed w-64 bg-v2-sidebar text-white;
    @apply flex flex-col py-6;
    @apply rounded-3xl;
    top: 1rem;
    left: 1rem;
    bottom: 1rem;
    padding-left: 1rem;
    padding-right: 0;
    overflow: visible;
    border-right: 6px solid var(--v2-gold);
    box-shadow: 8px 0 32px rgba(var(--v2-gold-rgb), 0.35),
      4px 0 16px rgba(var(--v2-gold-rgb), 0.25);
    z-index: 40;
  }

  .v2-sidebar-logo {
    @apply flex items-center justify-center mb-8;
    padding-left: 0.5rem;
    padding-right: 1rem;
  }

  .v2-sidebar-logo img {
    @apply h-16 w-auto;
  }

  .v2-sidebar-nav {
    @apply flex-1 space-y-1 relative;
    padding-right: 1rem;
  }

  .v2-sidebar-link {
    @apply flex items-center px-4 py-3 text-white;
    @apply transition-all duration-300 relative;
    border-radius: 0.75rem;
  }

  .v2-sidebar-link:hover {
    @apply text-white;
    background: rgba(255, 255, 255, 0.05);
  }

  .v2-sidebar-link.active {
    @apply text-white;
    background: var(--v2-gold);
    border-radius: 2rem 0 0 2rem;
    margin-right: -1rem;
    padding-right: 1.5rem;
  }

  .v2-sidebar-link.active::before,
  .v2-sidebar-link.active::after {
    content: "";
    position: absolute;
    right: 0;
    width: 1rem;
    height: 1rem;
  }

  .v2-sidebar-link.active::before {
    bottom: 100%;
    background: radial-gradient(
      circle at top left,
      var(--v2-sidebar) 1rem,
      var(--v2-gold) 1rem
    );
  }

  .v2-sidebar-link.active::after {
    top: 100%;
    background: radial-gradient(
      circle at bottom left,
      var(--v2-sidebar) 1rem,
      var(--v2-gold) 1rem
    );
  }

  .v2-sidebar-link i {
    @apply w-5 text-center mr-3 text-lg;
  }

  /* ----------------------------------------
     PAGE HEADER
     ---------------------------------------- */
  .v2-page-header {
    @apply flex items-start justify-between mb-6;
  }

  .v2-page-title-section {
    @apply flex-shrink-0;
    margin-right: 10px;
  }

  .v2-page-title {
    @apply text-4xl font-bold text-v2-gold;
  }

  .v2-page-subtitle {
    @apply text-sm text-v2-gold font-bold mt-1;
    max-width: 320px;
  }

  .v2-header-right {
    @apply flex-1 flex items-stretch space-x-4;
  }

  .v2-search-box {
    @apply flex-1 flex items-center bg-white border border-v2-border rounded-xl px-4 py-2;
  }

  .v2-search-box:focus-within {
    @apply ring-2 ring-v2-purple/20 border-v2-purple;
  }

  .v2-search-box input {
    @apply flex-1 border-none outline-none bg-transparent text-v2-text placeholder-v2-text-light;
  }

  .v2-search-box i {
    @apply text-black mr-2;
  }

  .v2-user-info {
    @apply flex items-center space-x-3 bg-white px-3 py-1.5 rounded-xl border border-v2-border;
  }

  .v2-user-details {
    @apply text-right;
  }

  .v2-user-email {
    @apply text-sm font-semibold text-v2-text leading-tight;
  }

  .v2-user-status {
    @apply text-xs text-black leading-tight;
  }

  .v2-user-avatar {
    @apply w-8 h-8 rounded-lg overflow-hidden;
  }

  .v2-user-avatar img {
    @apply w-full h-full object-cover;
  }

  .v2-logout-btn {
    @apply flex items-center justify-center px-4 rounded-xl;
    @apply font-medium text-sm transition-colors duration-200;
    background-color: #b5b5b5;
    color: white;
  }

  .v2-logout-btn:hover {
    background-color: #9a9a9a;
    color: white;
  }

  .v2-logout-btn i {
    @apply mr-2;
  }

  /* ----------------------------------------
     CARDS
     ---------------------------------------- */
  .v2-card {
    @apply bg-v2-card rounded-xl border border-v2-card-border;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s;
  }

  .v2-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  .v2-card-header {
    @apply px-6 py-4 border-b border-v2-border;
  }

  .v2-card-body {
    @apply p-6;
  }

  .v2-card-title {
    @apply text-lg font-semibold text-v2-text;
  }

  /* ----------------------------------------
     SESSION CARDS
     ---------------------------------------- */
  .v2-session-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4;
  }

  .v2-session-card {
    @apply bg-v2-card rounded-xl border border-v2-card-border p-4;
    @apply transition-all duration-200 cursor-pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .v2-session-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  .v2-session-card.selected {
    @apply ring-2 ring-v2-purple border-v2-purple;
  }

  .v2-session-name {
    @apply text-base font-semibold text-v2-text mb-1;
  }

  .v2-session-time {
    @apply text-3xl font-bold text-v2-text;
  }

  .v2-session-stats {
    @apply text-right;
  }

  .v2-session-label {
    @apply text-xs text-black;
  }

  .v2-session-count {
    @apply text-lg font-bold text-v2-text;
  }

  .v2-session-actions {
    @apply flex items-center justify-between mt-4 pt-3 border-t border-v2-border;
  }

  /* ----------------------------------------
     PROGRESS BARS
     ---------------------------------------- */
  .v2-progress {
    @apply h-2 bg-v2-bg-alt rounded-full overflow-hidden;
  }

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

  .v2-progress-bar.success {
    @apply bg-v2-success;
  }

  .v2-progress-bar.warning {
    @apply bg-v2-warning;
  }

  .v2-progress-bar.danger {
    @apply bg-v2-danger;
  }

  .v2-progress-bar.full {
    @apply bg-v2-purple;
  }

  /* ----------------------------------------
     BADGES
     ---------------------------------------- */
  .v2-badge {
    @apply inline-flex items-center px-2 py-1 rounded text-xs font-medium;
  }

  .v2-badge.success {
    @apply bg-v2-success-bg text-v2-success;
  }

  .v2-badge.warning {
    @apply bg-v2-warning-bg text-v2-warning;
  }

  .v2-badge.danger {
    @apply bg-v2-danger-bg text-v2-danger;
  }

  .v2-badge.purple {
    @apply bg-v2-purple-bg text-v2-purple;
  }

  /* ----------------------------------------
     BUTTONS
     ---------------------------------------- */
  .v2-btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-xl;
    @apply font-medium text-sm transition-all duration-200;
  }

  .v2-btn:focus {
    @apply outline-none ring-2 ring-offset-2;
  }

  .v2-btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-xl;
    @apply font-medium text-sm transition-all duration-200;
    @apply bg-v2-purple text-white;
  }

  .v2-btn-primary:hover {
    @apply bg-v2-purple-dark;
  }

  .v2-btn-primary:focus {
    @apply outline-none ring-2 ring-offset-2 ring-v2-purple;
  }

  .v2-btn-secondary {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-xl;
    @apply font-medium text-sm transition-all duration-200;
    @apply bg-v2-bg text-v2-text border border-v2-border;
  }

  .v2-btn-secondary:hover {
    @apply bg-v2-bg-alt;
  }

  .v2-btn-secondary:focus {
    @apply outline-none ring-2 ring-offset-2 ring-v2-border;
  }

  .v2-btn-success {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-xl;
    @apply font-medium text-sm transition-all duration-200;
    @apply bg-v2-success-bg text-v2-success;
  }

  .v2-btn-success:hover {
    @apply bg-v2-success text-white;
  }

  .v2-btn-danger {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-xl;
    @apply font-medium text-sm transition-all duration-200;
    @apply bg-v2-danger-bg text-v2-danger;
  }

  .v2-btn-danger:hover {
    @apply bg-v2-danger text-white;
  }

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

  .v2-btn-lg {
    @apply px-6 py-3 text-base;
  }

  /* Action buttons */
  .v2-action-btn {
    @apply inline-flex items-center px-3 py-1.5 rounded text-sm transition-colors duration-200;
  }

  .v2-action-btn-details {
    @apply inline-flex items-center px-3 py-1.5 rounded text-sm transition-colors duration-200;
    @apply bg-v2-bg text-black;
  }

  .v2-action-btn-details:hover {
    @apply bg-v2-bg-alt text-v2-text;
  }

  .v2-action-btn-sale {
    @apply inline-flex items-center px-3 py-1.5 rounded text-sm transition-colors duration-200;
    @apply bg-v2-success-bg text-v2-success;
  }

  .v2-action-btn-sale:hover {
    @apply bg-v2-success text-white;
  }

  .v2-action-btn-comment {
    @apply inline-flex items-center px-3 py-1.5 rounded text-sm transition-colors duration-200;
    @apply bg-v2-purple-bg text-v2-purple;
  }

  .v2-action-btn-comment:hover {
    @apply bg-v2-purple text-white;
  }

  /* ----------------------------------------
     FORMS
     ---------------------------------------- */
  .v2-form-group {
    @apply mb-4;
  }

  .v2-label {
    @apply block text-xs font-medium text-black mb-1.5 uppercase tracking-wide;
  }

  .v2-input {
    @apply w-full px-4 py-2.5 bg-white border border-v2-border rounded-xl;
    @apply text-v2-text placeholder-v2-text-light;
    @apply transition-all duration-200;
  }

  .v2-input:focus {
    @apply outline-none ring-2 ring-v2-purple/20 border-v2-purple;
  }

  .v2-select {
    @apply w-full px-4 py-2.5 bg-white border border-v2-border rounded-xl;
    @apply text-v2-text placeholder-v2-text-light;
    @apply transition-all duration-200 appearance-none cursor-pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
  }

  .v2-select:focus {
    @apply outline-none ring-2 ring-v2-purple/20 border-v2-purple;
  }

  .v2-input-with-icon {
    @apply relative;
  }

  .v2-input-with-icon i {
    @apply absolute left-3 top-1/2 -translate-y-1/2 text-black;
  }

  .v2-input-with-icon input,
  .v2-input-with-icon select {
    @apply pl-10;
  }

  /* ----------------------------------------
     TABLES
     ---------------------------------------- */
  .v2-table {
    @apply w-full;
  }

  .v2-table th {
    @apply text-left px-4 py-3 text-sm font-semibold text-v2-text;
    @apply bg-gray-200;
  }

  .v2-table th:first-child {
    border-radius: 0.75rem 0 0 0.75rem;
  }

  .v2-table th:last-child {
    border-radius: 0 0.75rem 0.75rem 0;
  }

  .v2-table tbody tr:first-child td {
    @apply border-t-0;
  }

  .v2-table td {
    @apply px-4 py-3 text-sm text-v2-text border-b-2 border-gray-200;
  }

  .v2-table tbody tr:hover {
    @apply bg-v2-bg/50;
  }

  .v2-table tbody tr:last-child td {
    @apply border-b-0;
  }

  .v2-table-summary td,
  .v2-table-summary-row td {
    @apply font-semibold bg-gray-200 border-b-2 border-gray-300;
  }

  /* ----------------------------------------
     DISTRIBUTOR TEXT COLORS
     ---------------------------------------- */
  .v2-distributor-text-billetreduc {
    @apply text-red-500;
  }

  .v2-distributor-text-fever {
    @apply text-green-500;
  }

  .v2-distributor-text-ticketac {
    @apply text-pink-500;
  }

  .v2-distributor-text-billetweb {
    @apply text-blue-500;
  }

  .v2-distributor-text-shoptaplace {
    @apply text-orange-500;
  }

  .v2-distributor-text-fnac {
    @apply text-yellow-600;
  }

  .v2-distributor-text-thejoke {
    @apply text-violet-500;
  }

  .v2-distributor-text-surplace {
    @apply text-green-600;
  }

  .v2-distributor-text-invitations {
    @apply text-purple-500;
  }

  /* ----------------------------------------
     DONUT CHART
     ---------------------------------------- */
  .v2-donut-container {
    @apply relative flex items-center justify-center;
    width: 200px;
    height: 200px;
  }

  .v2-donut-chart {
    width: 100%;
    height: 100%;
  }

  .v2-donut-center {
    @apply absolute inset-0 flex items-center justify-center;
  }

  .v2-donut-percentage {
    @apply text-4xl font-bold;
  }

  .v2-donut-percentage.donut-success {
    color: #00DE23;
  }

  .v2-donut-percentage.donut-warning {
    color: #f97316;
  }

  .v2-donut-percentage.donut-danger {
    color: #ef4444;
  }

  /* ----------------------------------------
     ALERTS
     ---------------------------------------- */
  .v2-alert {
    @apply flex items-start p-4 rounded-xl mb-4;
  }

  .v2-alert-success {
    @apply flex items-start p-4 rounded-xl mb-4;
    @apply bg-v2-success-bg border border-v2-success/20;
  }

  .v2-alert-warning {
    @apply flex items-start p-4 rounded-xl mb-4;
    @apply bg-v2-warning-bg border border-v2-warning/20;
  }

  .v2-alert-danger {
    @apply flex items-start p-4 rounded-xl mb-4;
    @apply bg-v2-danger-bg border border-v2-danger/20;
  }

  .v2-alert-info {
    @apply flex items-start p-4 rounded-xl mb-4;
    @apply bg-v2-purple-bg border border-v2-purple/20;
  }

  .v2-alert i {
    @apply mr-3 mt-0.5;
  }

  .v2-alert-title {
    @apply font-medium;
  }

  .v2-alert-text {
    @apply text-sm mt-1 opacity-80;
  }

  /* ----------------------------------------
     FILTERS (legacy)
     ---------------------------------------- */
  .v2-filters {
    @apply flex flex-wrap items-stretch gap-4 mb-6;
  }

  .v2-filter-group {
    @apply flex flex-col;
  }

  /* ----------------------------------------
     SECTION TITLE
     ---------------------------------------- */
  .v2-section-title {
    @apply text-xl font-bold text-v2-text mb-4;
  }

  .v2-section-subtitle {
    @apply text-sm text-black;
  }

  /* ----------------------------------------
     COMMENT & INFO BOXES
     ---------------------------------------- */
  .v2-comment-box {
    @apply p-4 bg-v2-purple-bg/50 rounded-lg border border-v2-purple/10;
  }

  .v2-info-box {
    @apply p-4 bg-v2-bg rounded-lg border border-v2-border;
  }

  /* ----------------------------------------
     MODAL
     ---------------------------------------- */
  .v2-modal-overlay {
    @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
  }

  .v2-modal {
    @apply bg-white rounded-xl w-full max-w-lg mx-4;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -4px rgba(0, 0, 0, 0.1);
  }

  .v2-modal-header {
    @apply flex items-center justify-between px-6 py-4 border-b border-v2-border;
  }

  .v2-modal-title {
    @apply text-lg font-semibold text-v2-text;
  }

  .v2-modal-close {
    @apply text-black transition-colors;
  }

  .v2-modal-close:hover {
    @apply text-v2-text;
  }

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

  .v2-modal-footer {
    @apply flex items-center justify-end gap-3 px-6 py-4 border-t border-v2-border;
  }

  /* ----------------------------------------
     VIP MARKER
     ---------------------------------------- */
  .v2-vip-marker {
    @apply absolute top-0 right-0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 32px 32px 0;
    border-color: transparent #eab308 transparent transparent;
  }

  /* ----------------------------------------
     DISTRIBUTOR DOT
     ---------------------------------------- */
  .v2-distributor-dot {
    @apply w-2 h-2 rounded-full inline-block mr-2;
  }

  /* ----------------------------------------
     STAT CARDS
     ---------------------------------------- */
  .stat-card {
    @apply bg-v2-card rounded-xl border border-v2-card-border p-5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  /* ----------------------------------------
     LEGACY COMPATIBILITY
     ---------------------------------------- */
  .card {
    @apply bg-v2-card rounded-xl border border-v2-card-border;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-xl;
    @apply font-medium text-sm transition-all duration-200;
    @apply bg-v2-purple text-white;
  }

  .btn-primary:hover {
    @apply bg-v2-purple-dark;
  }

  .section-title {
    @apply text-xl font-bold text-v2-text mb-4;
  }

  .data-table {
    @apply w-full;
  }

  .data-table th {
    @apply text-left px-4 py-3 text-sm font-semibold text-v2-text;
    @apply bg-gray-200;
  }

  .data-table th:first-child {
    border-radius: 0.75rem 0 0 0.75rem;
  }

  .data-table th:last-child {
    border-radius: 0 0.75rem 0.75rem 0;
  }

  .data-table tbody tr:first-child td {
    @apply border-t-0;
  }

  .data-table td {
    @apply px-4 py-3 text-sm text-v2-text border-b-2 border-gray-200;
  }

  .data-table tbody tr:hover {
    @apply bg-v2-bg/50;
  }

  .data-table-summary-row td {
    @apply font-semibold bg-gray-200 border-b-2 border-gray-300;
  }

  .fill-rate {
    @apply h-2 bg-v2-bg-alt rounded-full overflow-hidden;
  }

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

  .fill-rate-low {
    @apply bg-v2-danger;
  }

  .fill-rate-medium {
    @apply bg-v2-warning;
  }

  .fill-rate-high {
    @apply bg-v2-success;
  }

  .fill-rate-full {
    @apply bg-v2-purple;
  }

  .fill-rate-overbooking {
    @apply bg-v2-purple-dark;
  }

  .session-card {
    @apply bg-v2-card rounded-xl border border-v2-card-border p-4;
    @apply transition-all duration-200 cursor-pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .session-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4;
  }

  .gradient-text {
    @apply text-v2-purple;
  }

  .event-badge {
    @apply px-2 py-0.5 text-xs rounded bg-v2-danger-bg text-v2-danger border border-v2-danger/20;
  }

  .alert-success {
    @apply flex items-start p-4 rounded-xl mb-4;
    @apply bg-v2-success-bg border border-v2-success/20;
  }

  .alert-error {
    @apply flex items-start p-4 rounded-xl mb-4;
    @apply bg-v2-danger-bg border border-v2-danger/20;
  }

  .sidebar-link {
    @apply flex items-center px-4 py-3 text-white transition-all duration-300 relative;
    border-radius: 0.75rem;
  }

  .sidebar-link:hover {
    @apply text-white;
    background: rgba(255, 255, 255, 0.05);
  }

  .sidebar-link.active {
    @apply text-white;
    background: var(--v2-gold);
    border-radius: 2rem 0 0 2rem;
    box-shadow: 6px 0 24px rgba(var(--v2-gold-rgb), 0.5),
      3px 0 12px rgba(var(--v2-gold-rgb), 0.4);
    margin-right: -1rem;
    padding-right: 1.5rem;
  }

  .sidebar-link i {
    @apply w-5 text-center mr-3 text-lg;
  }

  /* Day borders in program grid */
  .day-border {
    @apply border-r-2 border-blue-300;
  }

  /* Platform color classes */
  .distributor-the-joke {
    @apply text-violet-500;
  }

  .distributor-the-joke i {
    @apply text-violet-500;
  }

  .distributor-billetreduc {
    @apply text-red-500;
  }

  .distributor-billetreduc i {
    @apply text-red-500;
  }

  .distributor-fever {
    @apply text-green-500;
  }

  .distributor-fever i {
    @apply text-green-500;
  }

  .distributor-ticketac {
    @apply text-pink-500;
  }

  .distributor-ticketac i {
    @apply text-pink-500;
  }

  .distributor-billetweb {
    @apply text-blue-500;
  }

  .distributor-billetweb i {
    @apply text-blue-500;
  }

  .distributor-shop-ta-place {
    @apply text-orange-500;
  }

  .distributor-shop-ta-place i {
    @apply text-orange-500;
  }

  .distributor-fnac {
    @apply text-indigo-500;
  }

  .distributor-fnac i {
    @apply text-indigo-500;
  }

  .distributor-sur-place {
    @apply text-green-600;
  }

  .distributor-sur-place i {
    @apply text-green-600;
  }

  .distributor-invitations {
    @apply text-purple-500;
  }

  .distributor-invitations i {
    @apply text-purple-500;
  }

  /* Weather selector styles */
  .weather-selector {
    @apply transition-all duration-150 ease-in-out;
  }

  .weather-selector:hover {
    @apply scale-110;
  }

  /* ----------------------------------------
     PROGRAM GRID TABLE
     ---------------------------------------- */
  .program-grid-wrapper {
    @apply bg-white rounded-3xl p-6;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
  }

  .program-grid-shadow-box {
    @apply p-0 bg-white rounded-2xl relative;
    box-shadow: 
      5px 0 15px -3px rgba(0, 0, 0, 0.1),
      -5px 0 15px -3px rgba(0, 0, 0, 0.1),
      0 10px 15px -3px rgba(0, 0, 0, 0.15);
  }

  .program-grid-table-container {
    @apply overflow-x-auto;
    border-radius: 1rem;
    overflow: hidden;
  }

  .program-grid-table {
    @apply w-full;
    min-width: max-content;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Header label (first column) */
  .pg-header-label {
    @apply bg-gray-100 px-4 py-3 text-left text-sm font-medium text-black;
    @apply sticky left-0 z-10;
    min-width: 180px;
    border: 2px solid #D9D9D9;
    border-right: 3px solid #595959;
  }

  /* First header row - rounded top corners */
  thead tr:first-child .pg-header-label {
    border-top-left-radius: 1rem;
  }

  thead tr:first-child th:last-child {
    border-top-right-radius: 1rem;
  }

  /* Day border separator */
  .pg-day-border {
    border-right: 3px solid #595959 !important;
  }

  /* Cell border within same day */
  .pg-cell-border {
    border: 2px solid #D9D9D9;
  }

  /* Date header cells */
  .pg-date-cell {
    @apply bg-white px-4 py-2 text-center;
    border: 2px solid #D9D9D9;
  }

  .pg-date-title {
    @apply flex items-center justify-center gap-2 font-semibold text-black text-sm;
  }

  .weather-btn {
    @apply p-0.5 rounded hover:bg-gray-100 transition-colors;
  }

  .pg-date-progress {
    @apply flex items-center justify-center gap-2 mt-1.5;
  }

  .pg-progress-badge {
    @apply text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full;
  }

  /* Venue cells - filled background */
  .pg-venue-cell {
    @apply px-2 py-2 text-center text-xs font-bold;
    border: 2px solid #D9D9D9;
  }

  .pg-venue-tj {
    @apply bg-gray-300 text-gray-700;
  }

  .pg-venue-tjb {
    @apply text-white;
    background-color: #6b21a8;
  }

  /* Time cells with colored backgrounds */
  .pg-time-cell {
    @apply px-2 py-2 text-center text-sm font-semibold text-white;
    border: 2px solid #D9D9D9;
  }

  .pg-time-early {
    background-color: #6b7280;
  }

  .pg-time-evening {
    background-color: #0d9488;
  }

  .pg-time-late {
    background-color: #7c2d12;
  }

  .pg-time-tjb {
    background-color: #6b21a8;
  }

  /* Section rows */
  .program-grid-section-row {
    @apply bg-gray-50;
  }

  .program-grid-section-cell {
    @apply px-4 py-2 text-sm font-medium text-black;
    border: 2px solid #D9D9D9;
  }

  .program-grid-section-label-cell {
    @apply px-4 py-2 text-sm font-medium text-black bg-gray-50;
    border: 2px solid #D9D9D9;
    border-right: 3px solid #595959;
    @apply sticky left-0 z-10;
    min-width: 180px;
  }

  .program-grid-section-filler-cell {
    @apply bg-gray-50;
    border: 2px solid #D9D9D9;
    border-left: none;
  }

  .section-toggle {
    @apply cursor-pointer;
  }

  .section-arrow {
    @apply ml-2 text-gray-500;
  }

  /* Data rows */
  .program-grid-data-row {
    @apply hover:bg-gray-50/50 transition-colors;
  }

  .program-grid-label-cell {
    @apply px-4 py-2.5 text-sm bg-white;
    border-right: 3px solid #595959;
    border-bottom: 2px solid #D9D9D9;
    @apply sticky left-0 z-10;
  }

  .program-grid-data-cell {
    @apply px-3 py-2.5 text-center text-sm font-medium text-black;
    border-bottom: 2px solid #D9D9D9;
  }

  /* Summary rows */
  .program-grid-summary-row {
    @apply bg-gray-50/50;
  }

  .program-grid-summary-label {
    @apply px-4 py-2.5 text-sm bg-white;
    border-right: 3px solid #595959;
    border-bottom: 2px solid #D9D9D9;
    @apply sticky left-0 z-10;
  }

  .program-grid-summary-cell {
    @apply px-3 py-2.5 text-center text-sm text-black;
    @apply bg-gray-50;
    border-bottom: 2px solid #D9D9D9;
  }

  /* Remaining tickets cells */
  .program-grid-remaining-cell {
    @apply px-3 py-2.5 text-center text-sm font-semibold;
    border-bottom: 2px solid #D9D9D9;
  }

  .remaining-negative {
    @apply bg-red-200 text-red-800;
  }

  .remaining-critical {
    @apply bg-orange-200 text-orange-800;
  }

  .remaining-warning {
    @apply bg-green-200 text-green-800;
  }

  .remaining-ok {
    @apply bg-gray-50 text-black;
  }

  /* Fill rate cells */
  .program-grid-rate-cell {
    @apply px-3 py-2.5 text-center text-sm font-medium;
    border-bottom: 2px solid #D9D9D9;
  }

  .rate-excellent {
    @apply text-green-600;
  }

  .rate-good {
    @apply text-green-500;
  }

  .rate-medium {
    @apply text-orange-500;
  }

  .rate-low {
    @apply text-red-500;
  }

  /* Platform cell colors with intensity variations */
  /* Red (Billetréduc) */
  .platform-cell-red-100 { @apply bg-red-50; }
  .platform-cell-red-200 { @apply bg-red-100; }
  .platform-cell-red-300 { @apply bg-red-200; }
  .platform-cell-red-400 { @apply bg-red-300; }

  /* Green (Fever) */
  .platform-cell-green-100 { @apply bg-green-50; }
  .platform-cell-green-200 { @apply bg-green-100; }
  .platform-cell-green-300 { @apply bg-green-200; }
  .platform-cell-green-400 { @apply bg-green-300; }

  /* Pink (Ticketac) */
  .platform-cell-pink-100 { @apply bg-pink-50; }
  .platform-cell-pink-200 { @apply bg-pink-100; }
  .platform-cell-pink-300 { @apply bg-pink-200; }
  .platform-cell-pink-400 { @apply bg-pink-300; }

  /* Blue (Billetweb) */
  .platform-cell-blue-100 { @apply bg-blue-50; }
  .platform-cell-blue-200 { @apply bg-blue-100; }
  .platform-cell-blue-300 { @apply bg-blue-200; }
  .platform-cell-blue-400 { @apply bg-blue-300; }

  /* Orange (Shop Ta Place) */
  .platform-cell-orange-100 { @apply bg-orange-50; }
  .platform-cell-orange-200 { @apply bg-orange-100; }
  .platform-cell-orange-300 { @apply bg-orange-200; }
  .platform-cell-orange-400 { @apply bg-orange-300; }

  /* Yellow (FNAC) */
  .platform-cell-yellow-100 { @apply bg-yellow-50; }
  .platform-cell-yellow-200 { @apply bg-yellow-100; }
  .platform-cell-yellow-300 { @apply bg-yellow-200; }
  .platform-cell-yellow-400 { @apply bg-yellow-300; }

  /* Emerald (Sur place) */
  .platform-cell-emerald-100 { @apply bg-emerald-50; }
  .platform-cell-emerald-200 { @apply bg-emerald-100; }
  .platform-cell-emerald-300 { @apply bg-emerald-200; }
  .platform-cell-emerald-400 { @apply bg-emerald-300; }

  /* Purple (Invitations) */
  .platform-cell-purple-100 { @apply bg-purple-50; }
  .platform-cell-purple-200 { @apply bg-purple-100; }
  .platform-cell-purple-300 { @apply bg-purple-200; }
  .platform-cell-purple-400 { @apply bg-purple-300; }

  /* Gray (default) */
  .platform-cell-gray-100 { @apply bg-gray-50; }
  .platform-cell-gray-200 { @apply bg-gray-100; }
  .platform-cell-gray-300 { @apply bg-gray-200; }
  .platform-cell-gray-400 { @apply bg-gray-300; }

  /* Tooltip styles */
  [data-tooltip="tooltip"] {
    @apply relative cursor-help;
  }

  [data-tooltip="tooltip"]:hover::after {
    content: attr(title);
    @apply absolute z-50 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg shadow-lg;
    @apply bottom-full left-1/2 transform -translate-x-1/2 mb-2;
    @apply opacity-100 pointer-events-none;
    @apply whitespace-nowrap max-w-xs;
    min-width: max-content;
  }

  [data-tooltip="tooltip"]:hover::before {
    content: "";
    @apply absolute z-50 border-4 border-transparent border-t-gray-900;
    @apply bottom-full left-1/2 transform -translate-x-1/2 -mb-1;
  }

  /* Ensure tooltips are visible even in table cells */
  td [data-tooltip="tooltip"]:hover::after {
    @apply fixed;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  /* ----------------------------------------
     CUSTOM GOLDEN SCROLLBAR (always visible)
     ---------------------------------------- */
  .program-grid-custom-scrollbar {
    height: 18px;
    padding: 4px 12px;
    background: #ffffff;
    border-radius: 1rem 1rem 0 0;
    border-bottom: 1px solid #e5e5e5;
  }

  .program-grid-custom-scrollbar-track {
    height: 10px;
    background: #e8e8e8;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
  }

  .program-grid-custom-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 40px;
    background: linear-gradient(180deg, #d4c4a3 0%, #ac9c79 50%, #9a8a67 100%);
    border-radius: 5px;
    cursor: grab;
    transition: background 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .program-grid-custom-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #e0d0b0 0%, #b8a885 50%, #a69574 100%);
  }

  .program-grid-custom-scrollbar-thumb:active {
    cursor: grabbing;
    background: linear-gradient(180deg, #c9b896 0%, #9a8a67 50%, #887859 100%);
  }

  /* Hide the bottom scrollbar on the table container */
  .program-grid-table-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .program-grid-table-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }
}