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

/* Add grid-cols-24 utility class */
@layer utilities {
  .grid-cols-24 {
    grid-template-columns: repeat(24, minmax(0, 1fr));
  }

  /* Month/Year dropdown styles */
  .month-year-dropdown {
    max-height: 15rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-primary-400)) rgb(var(--color-border-100));
  }

  .month-year-dropdown::-webkit-scrollbar {
    width: 6px;
  }

  .month-year-dropdown::-webkit-scrollbar-track {
    background: rgb(var(--color-border-100));
    border-radius: 3px;
  }

  .month-year-dropdown::-webkit-scrollbar-thumb {
    background: rgb(var(--color-primary-400));
    border-radius: 3px;
  }

  .month-year-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-primary-600));
  }

  .month-year-option {
    transition: background-color 0.2s ease;
  }

  .month-year-option:hover {
    background-color: rgb(var(--color-primary-50)) !important;
  }

  .month-year-option.selected {
    background-color: rgb(var(--color-primary-100)) !important;
  }

  /* Sidebar scrollbar styles */
  .sidebar-nav {
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-border-300)) var(--color-sidebar-bg);
  }

  .sidebar-nav::-webkit-scrollbar {
    width: 6px;
  }

  .sidebar-nav::-webkit-scrollbar-track {
    background: var(--color-sidebar-bg);
  }

  .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgb(var(--color-border-300));
    border-radius: 4px;
  }

  .sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-border-400));
  }
}

@layer components {
  .spinner {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    border-radius: 9999px;
    border-color: rgb(var(--color-primary-500));
    border-top-color: rgb(var(--color-primary-100));
    animation: spinner-spin 0.9s linear infinite;
    background-color: transparent;
  }

  .spinner-inner {
    position: absolute;
    inset: 28%;
    border-radius: inherit;
    background: rgba(var(--color-primary-500), 0.2);
  }
}

@keyframes spinner-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

html,
body,
#__next {
    height: 100%;
    margin: 0;
}

body {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-text-900));
}

.dark .bg-white {
    background-color: rgb(var(--color-card)) !important;
}

.dark .bg-gray-50 {
    background-color: rgb(var(--color-border-50)) !important;
}

.dark .bg-gray-100 {
    background-color: rgb(var(--color-border-100)) !important;
}

.dark .bg-gray-200 {
    background-color: rgb(var(--color-border-200)) !important;
}

.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-slate-50:hover {
    background-color: rgb(var(--color-border-50)) !important;
}

.dark .hover\:bg-gray-100:hover,
.dark .hover\:bg-slate-100:hover {
    background-color: rgb(var(--color-border-100)) !important;
}

.dark .hover\:bg-gray-200:hover,
.dark .hover\:bg-slate-200:hover {
    background-color: rgb(var(--color-border-200)) !important;
}

.dark .focus\:bg-gray-100:focus,
.dark .focus\:bg-slate-100:focus {
    background-color: rgb(var(--color-border-100)) !important;
}

.dark .text-gray-900,
.dark .text-slate-900 {
    color: rgb(var(--color-text-900)) !important;
}

.dark .text-gray-800,
.dark .text-slate-800 {
    color: rgb(var(--color-text-800)) !important;
}

.dark .text-gray-700,
.dark .text-slate-700 {
    color: rgb(var(--color-text-700)) !important;
}

.dark .text-gray-600,
.dark .text-slate-600 {
    color: rgb(var(--color-text-600)) !important;
}

.dark .text-gray-500,
.dark .text-slate-500 {
    color: rgb(var(--color-text-500)) !important;
}

.dark .text-gray-400,
.dark .text-slate-400 {
    color: rgb(var(--color-text-400)) !important;
}

.dark .border-gray-300,
.dark .border-slate-300 {
    border-color: rgb(var(--color-border-300)) !important;
}

.dark .border-gray-200,
.dark .border-slate-200 {
    border-color: rgb(var(--color-border-200)) !important;
}

.dark .border-gray-100,
.dark .border-slate-100 {
    border-color: rgb(var(--color-border-100)) !important;
}

.dark .placeholder\:text-gray-400::placeholder {
    color: rgb(var(--color-text-400)) !important;
}

.dark .hover\:text-gray-900:hover,
.dark .hover\:text-slate-900:hover {
    color: rgb(var(--color-text-900)) !important;
}

.dark .hover\:text-gray-800:hover,
.dark .hover\:text-slate-800:hover {
    color: rgb(var(--color-text-800)) !important;
}

.dark .hover\:text-gray-700:hover,
.dark .hover\:text-slate-700:hover {
    color: rgb(var(--color-text-700)) !important;
}

.dark .hover\:border-gray-300:hover {
    border-color: rgb(var(--color-border-300)) !important;
}

.dark .hover\:border-gray-200:hover {
    border-color: rgb(var(--color-border-200)) !important;
}

.dark header {
    background-color: rgb(var(--color-background)) !important;
    border-color: rgb(var(--color-border-200)) !important;
}

.dark main {
    background-color: rgb(var(--color-background));
}

.dark input,
.dark textarea,
.dark select {
    background-color: rgb(var(--color-border-50));
    color: rgb(var(--color-text-900));
    border-color: rgb(var(--color-border-200));
}

.dark input[type="checkbox"],
.dark input[type="radio"] {
    color-scheme: dark;
    accent-color: rgb(var(--color-primary-500));
}

/* Make Radix Theme wrapper transparent inside portaled surfaces (drawers,
   dialogs) so the parent's background shows through consistently */
.dark [role="dialog"] > .radix-themes,
.dark [role="dialog"] .radix-themes {
    background-color: transparent !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: rgb(var(--color-text-500));
}

/* Add placeholder styles */
::placeholder,
[data-placeholder] {
    color: rgb(var(--color-text-400)) !important;
}

.extension-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    border-radius: 0.75rem;
    border: 1px solid rgb(var(--color-border-200) / 0.9);
    background:
        linear-gradient(180deg,
            rgb(var(--color-primary-400) / 0.16) 0%,
            rgb(var(--color-secondary-400) / 0.12) 100%),
        rgb(var(--color-border-50) / 0.82);
    box-shadow: 0 24px 48px rgb(var(--color-primary-500) / 0.18);
    backdrop-filter: blur(10px);
    color: rgb(var(--color-text-600));
}

.extension-loading-indicator {
    gap: 0.75rem;
}

.extension-loading-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgb(var(--color-text-600));
}

.extension-loading-subtext {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: rgb(var(--color-text-400));
    max-width: 18rem;
}

.extension-loading-overlay--error {
    border-color: rgb(var(--color-destructive) / 0.45);
    background:
        linear-gradient(180deg,
            rgb(var(--color-destructive) / 0.15) 0%,
            rgb(var(--color-destructive) / 0.08) 100%),
        rgb(var(--color-border-50) / 0.9);
    box-shadow: 0 24px 48px rgb(var(--color-destructive) / 0.18);
}

.extension-loading-overlay--error .extension-loading-text {
    color: rgb(var(--color-destructive));
}

.extension-loading-overlay--error .extension-loading-subtext {
    color: rgb(var(--color-destructive-foreground));
}

.entra-status-panel {
    border-radius: 0.9rem;
    border: 1px solid rgb(var(--color-border-200) / 0.92);
    background:
        radial-gradient(120% 100% at 100% 0%,
            rgb(var(--color-primary-300) / 0.14) 0%,
            transparent 60%),
        linear-gradient(180deg,
            rgb(var(--color-border-50) / 0.9) 0%,
            rgb(var(--color-background) / 0.98) 100%);
    box-shadow: 0 12px 28px rgb(var(--color-primary-500) / 0.08);
}

.entra-status-section {
    border-radius: 0.7rem;
    border: 1px solid rgb(var(--color-border-200) / 0.86);
    background-color: rgb(var(--color-background) / 0.84);
    padding: 0.75rem 0.85rem;
}

.dark .entra-status-panel {
    border-color: rgb(var(--color-border-300) / 0.88);
    background:
        radial-gradient(130% 110% at 100% 0%,
            rgb(var(--color-primary-400) / 0.2) 0%,
            transparent 64%),
        linear-gradient(180deg,
            rgb(var(--color-border-100) / 0.88) 0%,
            rgb(var(--color-background) / 0.96) 100%);
    box-shadow: 0 16px 30px rgb(var(--color-primary-900) / 0.22);
}

.dark .entra-status-section {
    border-color: rgb(var(--color-border-300) / 0.88);
    background-color: rgb(var(--color-border-50) / 0.74);
}

html.dark {
    --background: 0, 0, 0;
    --color-background: 0 0 0;
    --color-card: 22 28 48;

    /* Border radius tokens */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Animation duration tokens */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;

    /* SEMANTIC BADGE COLORS - not affected by branding */
    --badge-info-bg: 30 58 138;         /* blue-900 for dark mode */
    --badge-info-text: 191 219 254;     /* blue-200 */
    --badge-info-border: 30 64 175;     /* blue-800 */
    --badge-warning-bg: 55 38 6;         /* amber-950 — warm dark gold */
    --badge-warning-text: 253 224 71;   /* #FDE047 — yellow-300 */
    --badge-warning-border: 234 179 8;  /* #EAB308 — yellow-500 */
    --badge-success-bg: 20 83 45;       /* green-900 for dark mode */
    --badge-success-text: 134 239 172;  /* green-300 — muted */
    --badge-success-border: 22 101 52;  /* green-800 */
    --badge-error-bg: 127 29 29;        /* red-900 for dark mode */
    --badge-error-text: 254 202 202;    /* red-200 */
    --badge-error-border: 153 27 27;    /* red-800 */
    --badge-default-bg: 30 41 59;       /* slate-800 for dark mode */
    --badge-default-text: 203 213 225;  /* slate-300 */
    --badge-default-border: 51 65 85;   /* slate-700 */
    --badge-secondary-bg: 51 65 85;    /* slate-700 for dark mode */
    --badge-secondary-text: 226 232 240; /* slate-200 */
    --badge-secondary-border: 71 85 105; /* slate-600 */

    /* STATUS COLORS — muted for dark backgrounds */
    --color-status-success: 74 190 120; /* muted green */
    --color-status-success-foreground: 255 255 255;
    --color-status-warning: 235 180 50; /* bright amber */
    --color-status-warning-foreground: 255 255 255;
    --color-status-error: 210 100 100; /* muted red */
    --color-status-error-foreground: 255 255 255;

    /* BORDER COLOR */
    --color-border-base: 100 116 139;
    --color-border-50: 15 23 42;
    --color-border-100: 30 41 59;
    --color-border-200: 51 65 85;
    --color-border-300: 71 85 105;
    --color-border-400: 100 116 139;
    --color-border-500: 148 163 184;
    --color-border-600: 203 213 225;
    --color-border-700: 226 232 240;
    --color-border-800: 241 245 249;
    --color-border-900: 248 250 252;

    /* TEXT COLORS */
    --color-text-base: 100 116 139;
    --color-text-50: 15 23 42;
    --color-text-100: 30 41 59;
    --color-text-200: 51 65 85;
    --color-text-300: 71 85 105;
    --color-text-400: 100 116 139;
    --color-text-500: 148 163 184;
    --color-text-600: 203 213 225;
    --color-text-700: 226 232 240;
    --color-text-800: 241 245 249;
    --color-text-900: 248 250 252;

    /* Switch — muted in dark mode for softer contrast */
    --color-switch-thumb: 190 200 215;

    /* MAIN COLORS */
    /* Purple (#8a4dea) */
    --color-primary-50: 82 46 140;
    --color-primary-100: 96 54 164;
    --color-primary-200: 110 61 187;
    --color-primary-300: 124 69 211;
    --color-primary-400: 138 77 234;
    --color-primary-500: 152 85 238;
    --color-primary-600: 166 115 242;
    --color-primary-700: 184 145 245;
    --color-primary-800: 202 168 249;
    --color-primary-900: 220 197 251;

    /* Blue (#40cff9) */
    --color-secondary-50: 38 124 149;
    --color-secondary-100: 45 145 174;
    --color-secondary-200: 51 166 199;
    --color-secondary-300: 58 186 224;
    --color-secondary-400: 64 207 249;
    --color-secondary-500: 83 215 250;
    --color-secondary-600: 102 223 251;
    --color-secondary-700: 140 236 250;
    --color-secondary-800: 179 243 251;
    --color-secondary-900: 217 249 253;

    /* Orange (#ff9c30) */
    --color-accent-50: 45 30 12;
    --color-accent-100: 80 50 18;
    --color-accent-200: 204 125 38;
    --color-accent-300: 230 140 43;
    --color-accent-400: 255 156 48;
    --color-accent-500: 255 166 69;
    --color-accent-600: 255 176 89;
    --color-accent-700: 255 201 102;
    --color-accent-800: 255 219 153;
    --color-accent-900: 255 237 204;

    /* Destructive Colors — softened for dark backgrounds */
    --color-destructive: 239 68 68; /* red-500 (lighter than light-mode red-600) */
    --color-destructive-foreground: 254 202 202; /* red-200 */

    /* ALERT BACKGROUND COLORS — hardcoded dark tints (color-mix too subtle on dark surfaces) */
    --color-alert-destructive-bg: 50 20 20;   /* deep dark red */
    --color-alert-warning-bg: 50 40 8;         /* golden amber */
    --color-alert-success-bg: 15 40 25;       /* deep dark green */
    --color-alert-info-bg: 20 30 60;          /* deep dark blue */

    /* SCHEDULE EVENT COLORS — tuned per-theme for calendar backgrounds */
    --color-event-non-billable: 160 90 30;    /* warm amber, visible on dark bg */
    --color-event-non-billable-hover: 180 105 35;
    --color-event-interaction: 34 120 70;     /* muted green */
    --color-event-interaction-hover: 40 140 82;
    --color-event-appointment: 160 50 80;     /* muted rose */
    --color-event-appointment-hover: 180 60 90;

    /* TABLE ROW COLORS */
    --color-table-row-alt: 30 33 52;              /* dark slate with purple-blue tint */
    --color-table-hover: 32 22 46;               /* ~primary purple at 15% over dark bg */
    --color-table-selected: 43 27 58;            /* ~primary purple at 22% over dark bg */
    --color-table-status-approved: 10 30 20;     /* muted dark green */
    --color-table-status-warning: 50 35 18;      /* muted dark orange */

    /* Sidebar Colors  */
    --color-sidebar-bg: #0f172a;
    --color-sidebar-text: #f5f5f5;
    --color-sidebar-hover: #1e293b;
    --color-sidebar-icon: #94a3b8;


    /* SubMenu Colors  */
    --color-submenu-bg: #1e293b;
    --color-submenu-text: #f5f5f5;
    --color-submenu-hover: #808080;
    --color-submenu-icon: #909090;


    background: rgba(var(--background), 1);
}


html.light {
    --background: 255, 255, 255;
    --color-background: 255 255 255;
    --color-card: 255 255 255;

    /* Border radius tokens */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Animation duration tokens */
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;

    /* SEMANTIC BADGE COLORS - not affected by branding */
    --badge-info-bg: 219 234 254;       /* blue-100 */
    --badge-info-text: 30 64 175;       /* blue-800 */
    --badge-info-border: 191 219 254;   /* blue-200 */
    --badge-warning-bg: 254 243 199;    /* amber-100 */
    --badge-warning-text: 146 64 14;    /* amber-800 */
    --badge-warning-border: 253 230 138; /* amber-200 */
    --badge-success-bg: 220 252 231;    /* green-100 */
    --badge-success-text: 22 101 52;    /* green-800 */
    --badge-success-border: 187 247 208; /* green-200 */
    --badge-error-bg: 254 226 226;      /* red-100 */
    --badge-error-text: 153 27 27;      /* red-800 */
    --badge-error-border: 254 202 202;  /* red-200 */
    --badge-default-bg: 241 245 249;    /* slate-100 */
    --badge-default-text: 51 65 85;     /* slate-700 */
    --badge-default-border: 226 232 240; /* slate-200 */
    --badge-secondary-bg: 226 232 240;  /* slate-200 — darker than default */
    --badge-secondary-text: 30 41 59;   /* slate-800 */
    --badge-secondary-border: 203 213 225; /* slate-300 */

    /* STATUS COLORS */
    --color-status-success: 34 197 94; /* green-500 */
    --color-status-success-foreground: 15 23 42;
    --color-status-warning: 245 158 11; /* amber-500 */
    --color-status-warning-foreground: 15 23 42;
    --color-status-error: 239 68 68; /* red-500 */
    --color-status-error-foreground: 15 23 42;

    /* BORDER COLOR */
    --color-border-base: 148 163 184;
    --color-border-50: 248 250 252;
    --color-border-100: 241 245 249;
    --color-border-200: 226 232 240;
    --color-border-300: 203 213 225;
    --color-border-400: 148 163 184;
    --color-border-500: 100 116 139;
    --color-border-600: 71 85 105;
    --color-border-700: 51 65 85;
    --color-border-800: 30 41 59;
    --color-border-900: 15 23 42;

    /* TEXT COLORS */
    --color-text-base: 148 163 184;
    --color-text-50: 248 250 252;
    --color-text-100: 241 245 249;
    --color-text-200: 226 232 240;
    --color-text-300: 203 213 225;
    --color-text-400: 148 163 184;
    --color-text-500: 100 116 139;
    --color-text-600: 71 85 105;
    --color-text-700: 51 65 85;
    --color-text-800: 30 41 59;
    --color-text-900: 15 23 42;

    /* Switch */
    --color-switch-thumb: 255 255 255;

    /* SCHEDULE EVENT COLORS */
    --color-event-non-billable: 255 237 204;  /* accent-900 light mode (pastel orange) */
    --color-event-non-billable-hover: 255 219 153;
    --color-event-interaction: 220 252 231;   /* green-100 */
    --color-event-interaction-hover: 187 247 208;
    --color-event-appointment: 254 205 211;   /* rose-200 */
    --color-event-appointment-hover: 253 164 175;

    /* TABLE ROW COLORS */
    --color-table-row-alt: 248 250 252;           /* slate-50, matches current */
    --color-table-hover: 246 240 254;             /* light purple, matches current primary-50 */
    --color-table-selected: 237 226 253;          /* primary-100 — slightly stronger purple than hover */
    --color-table-status-approved: 240 253 244;   /* green-50 */
    --color-table-status-warning: 255 237 213;    /* orange-100 */

    /* MAIN COLORS */
    /* Purple (#8a4dea) */
    --color-primary-50: 246 240 254;
    --color-primary-100: 237 226 253;
    --color-primary-200: 220 197 251;
    --color-primary-300: 202 168 249;
    --color-primary-400: 166 115 242;
    --color-primary-500: 138 77 234;
    --color-primary-600: 124 69 211;
    --color-primary-700: 110 61 187;
    --color-primary-800: 96 54 164;
    --color-primary-900: 82 46 140;

    /* Blue (#40cff9) */
    --color-secondary-50: 236 252 254;
    --color-secondary-100: 217 249 253;
    --color-secondary-200: 179 243 251;
    --color-secondary-300: 140 236 250;
    --color-secondary-400: 102 223 251;
    --color-secondary-500: 64 207 249;
    --color-secondary-600: 58 186 224;
    --color-secondary-700: 51 166 199;
    --color-secondary-800: 45 145 174;
    --color-secondary-900: 38 124 149;

    /* Orange (#ff9c30) */
    --color-accent-50: 255 246 230;
    --color-accent-100: 255 237 204;
    --color-accent-200: 255 219 153;
    --color-accent-300: 255 201 102;
    --color-accent-400: 255 176 89;
    --color-accent-500: 255 156 48;
    --color-accent-600: 230 140 43;
    --color-accent-700: 204 125 38;
    --color-accent-800: 179 109 33;
    --color-accent-900: 153 94 28;

    /* Destructive Colors */
    --color-destructive: 220 38 38; /* red-600 */
    --color-destructive-foreground: 153 27 27; /* red-800 */

    /* ALERT BACKGROUND COLORS — light tints for light surfaces */
    --color-alert-destructive-bg: 254 242 242;  /* red-50 */
    --color-alert-warning-bg: 255 251 235;      /* amber-50 */
    --color-alert-success-bg: 240 253 244;      /* green-50 */
    --color-alert-info-bg: 246 240 254;         /* primary-50 (light purple) */

    /* Sidebar Colors  */
    --color-sidebar-bg: #0C111D;
    --color-sidebar-text: #f5f5f5;
    --color-sidebar-hover: #808080;
    --color-sidebar-icon: #909090;


    /* SubMenu Colors  */
    --color-submenu-bg: #1b1a1a;
    --color-submenu-text: #f5f5f5;
    --color-submenu-hover: #808080;
    --color-submenu-icon: #909090;


    background: rgba(var(--background), 1);

}

html.light,
html.dark {
    --alga-bg: rgb(var(--color-background));
    --alga-fg: rgb(var(--color-text-900));
    --alga-muted: rgb(var(--color-border-50));
    --alga-muted-fg: rgb(var(--color-text-500));
    --alga-primary: rgb(var(--color-primary-500));
    --alga-primary-foreground: rgb(var(--color-primary-50));
    --alga-primary-light: rgb(var(--color-primary-200));
    --alga-secondary: rgb(var(--color-secondary-500));
    --alga-secondary-foreground: rgb(var(--color-secondary-50));
    --alga-border: rgb(var(--color-border-200));
    --alga-ring: 0 0% 0%;
    --alga-radius: var(--radius-lg);
    --alga-accent: rgb(var(--color-accent-500));
    --alga-accent-foreground: rgb(var(--color-accent-50));
    --alga-primary-soft: rgb(var(--color-primary-50));
    --alga-primary-soft-fg: rgb(var(--color-primary-700));
    --alga-primary-soft-hover: rgb(var(--color-primary-100));
    --alga-primary-border: rgb(var(--color-primary-300));
    --alga-danger: rgb(var(--color-status-error));
    --alga-warning: rgb(var(--color-status-warning));
    --alga-success: rgb(var(--color-status-success));
}

/* Give a remote user a caret */
.collaboration-cursor__caret {
    border-left: 1px solid rgb(var(--color-text-900));
    border-right: 1px solid rgb(var(--color-text-900));
    margin-left: -1px;
    margin-right: -1px;
    pointer-events: none;
    position: relative;
    word-break: normal;
}

/* Render the username above the caret */
.collaboration-cursor__label {
    border-radius: 3px 3px 3px 0;
    color: rgb(var(--color-text-900));
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 600;
    left: -1px;
    line-height: normal;
    padding: 0.1rem 0.3rem;
    position: absolute;
    top: -1.4em;
    user-select: none;
    white-space: nowrap;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
}

.bg-dotted {
    background-image: radial-gradient(circle, rgb(var(--color-border-300) / 0.6) 1px, transparent 1px);
    background-size: 20px 20px;
}

.ProseMirror:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Add this to your globals.css file */

/* Table styles */
.radix-themes {
    --table-header-bg: transparent;
    --table-row-hover: rgb(var(--color-border-100) / 0.6);
    width: 100%;
}

/* Force tables to take full width */
.rt-TableRoot {
    width: 100% !important;
    table-layout: fixed !important;
}

.rt-ScrollAreaViewport > * {
    width: 100% !important;
}

.rt-TableCell,
.rt-TableColumnHeaderCell {
    width: auto !important;
}

.rt-TableHeader {
    background-color: transparent;
}

.rt-TableRoot {
    border: 1px solid rgb(var(--color-border-200));
    border-radius: 8px;
    overflow: hidden;
}

.rt-TableRow:hover {
    background-color: rgb(var(--color-border-100) / 0.6);
}

.rt-TableCell,
.rt-TableColumnHeaderCell {
    padding: 12px 16px;
    color: rgb(var(--color-text-700));
}

.rt-Button {
    font-weight: 500;
}

/* Adjust text colors */
.text-2xl {
    color: rgb(var(--color-text-900));
}

.radix-themes {
    --table-border-color: transparent !important;
  }
  
  .rt-TableRoot, .rt-TableHeader, .rt-TableBody, .rt-TableRow, .rt-TableCell, .rt-TableColumnHeaderCell {
    border-color: transparent !important;
  }

  thead tr,
  thead tr th,
  table th,
  .rt-TableHeader,
  .rt-TableRow,
  .rt-TableColumnHeaderCell {
    border: none !important;
    border-bottom: none !important;
    border-color: transparent !important;
  }

  /* Switch styles are handled by .switch-root and .switch-thumb classes below.
     The Radix SwitchPrimitives.Thumb component renders the actual thumb element,
     so no ::before pseudo-element is needed. */

.rt-SwitchThumb {
  box-shadow: none !important;
}

/* Switch with Label styles */
.switch-with-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Switch base styles */
.switch-root {
  width: 42px;
  height: 25px;
  background-color: rgb(var(--color-border-400));
  border-radius: 9999px;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  outline: none;
}

/* When on - using your primary color */
.switch-root[data-state="checked"] {
  background-color: rgb(var(--color-primary-500));
}

.switch-root[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Switch thumb/circle styles */
.switch-thumb {
  display: block;
  width: 21px;
  height: 21px;
  background-color: rgb(var(--color-switch-thumb));
  border-radius: 9999px;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.switch-root[data-state="checked"] .switch-thumb {
  transform: translateX(17px);
}

/* Label styles */
.switch-label {
  color: rgb(var(--color-text-700));
  font-size: 14px;
  user-select: none;
}

/* Schedule grid styles */
.schedule-grid {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.schedule-grid::-webkit-scrollbar {
  height: 8px;
}

.schedule-grid::-webkit-scrollbar-track {
  background: rgb(var(--color-border-100));
  border-radius: 4px;
}

.schedule-grid::-webkit-scrollbar-thumb {
  background: rgb(var(--color-border-300));
  border-radius: 4px;
}

.schedule-grid::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-border-400));
}

/* Time slot styles */
.time-slot {
  min-width: 60px;
  text-align: center;
  padding: 4px;
  font-size: 0.75rem;
  border-right: 1px solid rgb(var(--color-border-200));
}

.time-slot:last-child {
  border-right: none;
}

/* Working hours styles */
.time-slot-working {
  background-color: rgb(var(--color-card));
}

.time-slot-non-working {
  background-color: rgb(var(--color-border-100));
}

/* Time header styles */
.time-header-working {
  color: rgb(var(--color-text-900));
  font-weight: 600;
}

.time-header-non-working {
  color: rgb(var(--color-text-500));
}

/* Add drag and drop styles */
[data-dragging="true"] {
  opacity: 0.9 !important;
  cursor: grabbing !important;
}

/* Hide the ghost image */
[data-dragging="true"]::after {
  content: none !important;
}

.draggable {
  cursor: grab;
  user-select: none;
}

.draggable:active {
  cursor: grabbing;
}

.drag-over {
  background-color: rgba(var(--color-primary-100), 0.2);
}

/* Override react-day-picker default styles */
.rdp {
  --rdp-accent-color: rgb(var(--color-primary-100)) !important;
  --rdp-background-color: rgb(var(--color-primary-50)) !important;
  margin: 0 !important;
}

.dark .rdp {
  --rdp-accent-color: rgb(var(--color-primary-400)) !important;
  --rdp-background-color: rgb(var(--color-border-50)) !important;
  background-color: rgb(var(--color-border-50));
  color: rgb(var(--color-text-900));
}

.dark .rdp button {
  color: rgb(var(--color-text-700));
}

.dark .rdp .rdp-day_selected,
.dark .rdp .rdp-day_selected:focus-visible,
.dark .rdp .rdp-day_selected:hover {
  background-color: rgb(var(--color-primary-500));
  color: rgb(var(--color-text-50));
}

/* react-big-calendar dark overrides */
.dark .rbc-calendar {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-text-700));
}

.dark .rbc-toolbar button {
  background-color: transparent;
  color: rgb(var(--color-text-700));
  border-color: rgb(var(--color-border-200));
}

.dark .rbc-toolbar button.rbc-active,
.dark .rbc-toolbar button:hover {
  background-color: rgb(var(--color-border-100));
  color: rgb(var(--color-text-900));
}

.dark .rbc-header,
.dark .rbc-time-header-content,
.dark .rbc-time-content,
.dark .rbc-time-view,
.dark .rbc-month-view,
.dark .rbc-agenda-view {
  border-color: rgb(var(--color-border-200));
}

.dark .rbc-off-range-bg {
  background-color: rgb(var(--color-border-50));
}

.dark .rbc-today {
  background-color: rgb(var(--color-primary-500) / 0.1);
}

.dark .rbc-header {
  background-color: rgb(var(--color-card));
}

.dark .rbc-time-header {
  background-color: rgb(var(--color-card));
}

.dark .rbc-toolbar {
  background-color: rgb(var(--color-background));
}

.dark .rbc-timeslot-group,
.dark .rbc-time-slot,
.dark .rbc-day-slot .rbc-time-slot,
.dark .rbc-time-column,
.dark .rbc-time-content,
.dark .rbc-time-content > * + * > *,
.dark .rbc-time-view,
.dark .rbc-allday-cell,
.dark .rbc-time-header.rbc-overflowing,
.dark .rbc-time-header-content {
  border-color: rgb(var(--color-border-200)) !important;
}

.dark .rbc-day-slot::after {
  background: rgb(var(--color-border-200)) !important;
}

/* Paper-feel background for text editors (light + dark) */
.editor-paper {
  background-color: #fefefe;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.03);
}

.dark .editor-paper {
  background:
    radial-gradient(ellipse 80% 60% at 15% 85%, rgb(45 30 70 / 0.25) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgb(20 50 65 / 0.2) 0%, transparent 50%),
    rgb(var(--color-border-100));
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.3), inset 0 0 0 1px rgb(255 255 255 / 0.06);
}

/* Expression editor placeholder (Monaco inline decoration) */
.expression-editor-placeholder {
  color: #9ca3af;
  font-style: italic;
  pointer-events: none;
}

.dark .expression-editor-placeholder {
  color: #6b7280;
}

/* ReactFlow dark mode overrides */
.dark .react-flow__minimap {
  background-color: #334155;
  border: 1px solid #475569;
  border-radius: 6px;
}

.dark .react-flow__controls {
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.dark .react-flow__controls-button {
  background: #1e293b;
  border-bottom: 1px solid #334155;
  fill: #cbd5e1;
}

.dark .react-flow__controls-button:last-child {
  border-bottom: none;
}

.dark .react-flow__controls-button:hover {
  background: #334155;
}

/* Override BlockNote theme so parent background shows through (light + dark) */
.bn-container,
.bn-container[data-color-scheme="light"],
.bn-container[data-color-scheme="dark"] {
  --bn-colors-editor-background: transparent !important;
  background-color: transparent !important;
  background: transparent !important;
}

.bn-editor,
.bn-container .bn-editor,
.tiptap,
.ProseMirror,
[class*="bnEditor"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* Tiptap / ProseMirror text color */
.tiptap,
.ProseMirror {
  color: rgb(var(--color-text-700));
}

.dark .tiptap,
.dark .ProseMirror {
  background-color: transparent;
  color: rgb(var(--color-text-900));
}

.rdp-button:focus:not([disabled]) {
  background-color: rgb(var(--color-primary-50)) !important;
  border: none !important;
  box-shadow: 0 0 0 2px rgb(var(--color-primary-100)) !important;
}

.rdp-day_selected:not([disabled]) {
  background-color: rgb(var(--color-primary-100)) !important;
  color: rgb(var(--color-text-700)) !important;
}

.rdp-day_selected:hover:not([disabled]) {
  background-color: rgb(var(--color-primary-200)) !important;
}

.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
  background-color: rgb(var(--color-primary-50)) !important;
  color: rgb(var(--color-text-700)) !important;
}

/* Navigation arrows */
.rdp-nav_button {
  color: rgb(var(--color-primary-400)) !important;
  background: none !important;
  border: none !important;
}

.rdp-nav_button:hover {
  color: rgb(var(--color-primary-600)) !important;
  background-color: rgb(var(--color-primary-50)) !important;
}

.rdp-nav_button:focus-visible {
  color: rgb(var(--color-primary-600)) !important;
  background-color: rgb(var(--color-primary-50)) !important;
  box-shadow: 0 0 0 2px rgb(var(--color-primary-100)) !important;
}

/* Selected date circle */
.rdp-day_selected {
  color: rgb(var(--color-text-700)) !important;
  border: none !important;
  outline: none !important;
  background-color: rgb(var(--color-primary-100)) !important;
}

.rdp-day_today {
  color: rgb(var(--color-primary-600)) !important;
  font-weight: 500 !important;
}


/* Wider drawer for ticket documents */
.ticket-document-drawer {
  min-width: 40vw !important;
  max-width: 60vw !important;
}

/* Smooth focus treatment for custom checkboxes */
.alga-checkbox {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.alga-checkbox:focus,
.alga-checkbox:focus-visible {
  outline: none !important;
}
