@import 'tailwindcss';

@plugin 'tailwindcss-animate';
@plugin 'tailwind-scrollbar';

@import './rtl.css';
@import './template-preview.css';
@import './template-animations.css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@custom-variant dark (&:is(.dark *));

@theme {
    --font-sans:
        'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --color-background: var(--background);
    --color-foreground: var(--foreground);

    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);

    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.87 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.625rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.87 0 0);
}

.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.145 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.985 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.269 0 0);
    --sidebar-ring: oklch(0.439 0 0);
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }
    
    /* Custom thin scrollbar */
    * {
        scrollbar-width: thin;
        scrollbar-color: #9ca3af #f3f4f6;
    }
    
    *::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    *::-webkit-scrollbar-track {
        background: #f3f4f6;
        border-radius: 3px;
    }
    
    *::-webkit-scrollbar-thumb {
        background: #9ca3af;
        border-radius: 3px;
    }
    
    *::-webkit-scrollbar-thumb:hover {
        background: #6b7280;
    }
    
    /* Dark mode scrollbar */
    .dark * {
        scrollbar-color: #4b5563 #1f2937;
    }
    
    .dark *::-webkit-scrollbar-track {
        background: #1f2937;
    }
    
    .dark *::-webkit-scrollbar-thumb {
        background: #4b5563;
    }
    
    .dark *::-webkit-scrollbar-thumb:hover {
        background: #6b7280;
    }
    
    /* Ensure all text inputs have proper dark mode styling */
    .dark input[type="text"],
    .dark input[type="email"],
    .dark input[type="password"],
    .dark input[type="number"],
    .dark input[type="tel"],
    .dark input[type="url"],
    .dark input[type="search"],
    .dark textarea,
    .dark select {
        background-color: var(--color-card);
        color: var(--color-card-foreground);
        border-color: var(--color-border);
    }
    
    /* Ensure all SVG icons respect dark mode */
    .dark svg:not([fill="none"]) {
        fill: currentColor;
    }
}

/* Theme color variables */
:root {
  --theme-color: #3b82f6;
}

/* Apply theme color to various elements */
.theme-color {
  color: var(--theme-color);
}

.theme-bg {
  background-color: var(--theme-color);
}

.theme-border {
  border-color: var(--theme-color);
}

.theme-ring {
  --tw-ring-color: var(--theme-color);
}

/* Override primary colors with theme color */
:root {
  --primary: var(--theme-color);
  --chart-1: var(--theme-color);
}

.dark {
  --primary: var(--theme-color);
  --chart-1: var(--theme-color);
}

/* Apply theme color to buttons and interactive elements */
.btn-primary,
.bg-primary,
button[type="submit"],
.active-nav-item {
  background-color: var(--theme-color);
}

a:hover,
.text-primary {
  color: var(--theme-color);
}

.border-primary {
  border-color: var(--theme-color);
}

.ring-primary {
  --tw-ring-color: var(--theme-color);
}

/* Dark mode table styles */
.dark table {
  color: var(--foreground);
}

.dark thead tr {
  background-color: var(--secondary);
  border-color: var(--border);
}

.dark tbody tr {
  border-color: var(--border);
  background-color: var(--card);
}

.dark tbody tr:hover {
  background-color: var(--secondary);
}

.dark th,
.dark td {
  color: var(--foreground);
}

.dark th {
  color: var(--muted-foreground);
}

/* Ensure all tables in dark mode have proper styling */
.dark [role="table"],
.dark table {
  --tw-border-opacity: 1;
  border-color: rgba(55, 65, 81, var(--tw-border-opacity));
}

.dark [role="row"],
.dark tr {
  border-color: var(--border);
}

.dark [role="cell"],
.dark [role="columnheader"],
.dark td,
.dark th {
  color: var(--foreground);
}

.dark [role="cell"] p,
.dark td p {
  color: var(--foreground);
}

.dark [role="cell"] .text-muted-foreground,
.dark td .text-muted-foreground {
  color: var(--muted-foreground);
}

/* Dark mode pagination styles */
.dark .pagination-container {
  background-color: var(--card);
  border-color: var(--border);
}

.dark .pagination-text {
  color: var(--muted-foreground);
}

.dark .pagination-text span {
  color: var(--foreground);
}

.dark button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Iyzipay Checkout Form Styles */
.iyzipay-checkout-form {
  width: 100%;
  min-height: 400px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.iyzipay-checkout-form iframe {
  width: 100%;
  min-height: 600px;
  height: 600px;
  border: none;
  border-radius: 8px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .iyzipay-checkout-form {
    border-color: #374151;
    background-color: #1f2937;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .iyzipay-checkout-form {
    min-height: 500px;
  }
  
  .iyzipay-checkout-form iframe {
    min-height: 500px;
  }
}

/* Loading state */
.iyzipay-checkout-form.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8fafc;
}

.iyzipay-checkout-form.loading::before {
  content: '';
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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


/* ChatGPT Modal and Button - Always accessible */
[data-chatgpt-button],
[data-chatgpt-modal] {
  pointer-events: auto !important;
}

/* Remove inert from ChatGPT elements */
[data-chatgpt-button][inert],
[data-chatgpt-modal][inert] {
  pointer-events: auto !important;
  user-select: auto !important;
}

/* Ensure ChatGPT button is always clickable even when behind modal overlay */
[data-chatgpt-button] * {
  pointer-events: auto !important;
}