@import "tailwindcss";

/* Flowbite theme */
@import "flowbite/src/themes/default";

/* Flowbite plugin */
@plugin "flowbite/plugin";

/* Flowbite source files */
@source "../node_modules/flowbite";

/* Scan Django templates for Tailwind classes */
@source "../../templates";
@source "../../custom_codesystems/templates";
@source "../../custom_codesystems/templates/custom_codesystems";
@source "../../../../packages/careconekt-ui/src/careconekt_ui/templates";

/*
 * Custom Brand Colors - Override Flowbite defaults
 *
 * To customize your brand colors, replace the hex values below with your own colors.
 * These CSS variables will be available throughout your application.
 *
 * Usage in HTML:
 * - Tailwind classes: bg-brand, text-brand, border-brand, etc.
 * - CSS: var(--color-brand), var(--brand-primary), etc.
 */

:root {
  /* ============================================
   * Tailwind-compatible Brand Color Scale
   * ============================================
   * These follow Tailwind's color naming convention
   * and work with utility classes like bg-brand-500
   */

  /* Brand Color Scale (50-950) */
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;  /* Primary brand color */
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
  --color-brand-950: #172554;

  /* Semantic Brand Colors */
  --color-brand: var(--color-brand-500);
  --color-brand-strong: var(--color-brand-700);
  --color-brand-medium: var(--color-brand-400);
  --color-brand-subtle: var(--color-brand-100);

  /* Foreground/Text Colors */
  --color-fg-brand: var(--color-brand-700);
  --color-fg-brand-on-brand: #ffffff;

  /* Neutral Colors */
  --color-neutral-primary: #ffffff;
  --color-neutral-secondary: #f9fafb;

  /* Border Radius */
  --radius-base: 0.375rem;  /* 6px */
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  /* ============================================
   * Additional Brand Colors (Custom naming)
   * ============================================
   * Use these for more flexibility in your CSS
   */

  /* Primary Brand Colors */
  --brand-primary: #3b82f6;
  --brand-secondary: #8b5cf6;
  --brand-accent: #06b6d4;

  /* Brand States */
  --brand-hover: #2563eb;
  --brand-active: #1d4ed8;
  --brand-focus: #93c5fd;
  --brand-disabled: #9ca3af;

  /* Semantic Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-brand: var(--brand-primary);

  /* Text Colors */
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-brand: var(--brand-primary);

  /* Border Colors */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --border-brand: var(--brand-primary);
}

@theme {
  /* ============================================
   * Light Theme
   * ============================================ */
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-neutral-50);
  --color-on-surface: var(--color-neutral-600);
  --color-on-surface-strong: var(--color-neutral-900);
  --color-primary: var(--color-black);
  --color-on-primary: var(--color-neutral-100);
  --color-secondary: var(--color-neutral-800);
  --color-on-secondary: var(--color-white);
  --color-outline: var(--color-neutral-300);
  --color-outline-strong: var(--color-neutral-800);

  /* ============================================
   * Dark Theme
   * ============================================ */
  --color-surface-dark: var(--color-neutral-950);
  --color-surface-dark-alt: var(--color-neutral-900);
  --color-on-surface-dark: var(--color-neutral-300);
  --color-on-surface-dark-strong: var(--color-white);
  --color-primary-dark: var(--color-white);
  --color-on-primary-dark: var(--color-black);
  --color-secondary-dark: var(--color-neutral-300);
  --color-on-secondary-dark: var(--color-black);
  --color-outline-dark: var(--color-neutral-700);
  --color-outline-dark-strong: var(--color-neutral-300);

  /* ============================================
   * Shared Semantic Colors
   * ============================================ */
  --color-info: var(--color-sky-500);
  --color-on-info: var(--color-white);
  --color-success: var(--color-green-500);
  --color-on-success: var(--color-white);
  --color-warning: var(--color-amber-500);
  --color-on-warning: var(--color-white);
  --color-danger: var(--color-red-500);
  --color-on-danger: var(--color-white);

  /* ============================================
   * AWS Console-inspired Colors (cs-*)
   * Usage: bg-cs-surface, text-cs-accent, etc.
   * ============================================ */

  /* Surfaces */
  --color-cs-bg: #f2f3f3;
  --color-cs-surface: #ffffff;
  --color-cs-surface-alt: #fafafa;

  /* Navigation */
  --color-cs-nav: #232f3e;
  --color-cs-nav-dark: #1a242f;
  --color-cs-nav-hover: #2a3f54;
  --color-cs-nav-active: #ec7211;

  /* Interactive / Accent */
  --color-cs-accent: #0972d3;
  --color-cs-accent-hover: #065299;
  --color-cs-accent-light: #e9f3fe;
  --color-cs-accent-focus: #b6d8f8;

  /* Text */
  --color-cs-text: #000716;
  --color-cs-text-sec: #5f6b7a;
  --color-cs-text-dim: #8d99a8;
  --color-cs-text-link: #0972d3;
  --color-cs-text-inv: #ffffff;

  /* Borders */
  --color-cs-border: #d5dbdb;
  --color-cs-border-hover: #9ba7b6;
  --color-cs-border-focus: #0972d3;

  /* Status */
  --color-cs-success: #037f0c;
  --color-cs-success-bg: #f2fcf3;
  --color-cs-warning: #8d6605;
  --color-cs-warning-bg: #fffce9;
  --color-cs-error: #d91515;
  --color-cs-error-bg: #fff7f7;
  --color-cs-info: #0972d3;
  --color-cs-info-bg: #e9f3fe;

  /* Buttons */
  --color-cs-btn-primary: #0972d3;
  --color-cs-btn-primary-hover: #065299;
  --color-cs-btn-normal: #ffffff;
  --color-cs-btn-normal-hover: #fafafa;

  /* ============================================
   * Font Families
   * Usage: font-console, font-mono
   * ============================================ */
  --font-family-console: "Amazon Ember", "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-family-mono: "Amazon Ember Mono", Monaco, Menlo, "Courier New", monospace;

  /* ============================================
   * Font Sizes (size-cs-*)
   * Usage: text-size-cs-xs, text-size-cs-sm, etc.
   * Renamed to avoid collision with color utilities (text-cs-accent)
   * ============================================ */
  --text-size-cs-xs: 12px;
  --text-size-cs-xs--line-height: 16px;
  --text-size-cs-sm: 13px;
  --text-size-cs-sm--line-height: 18px;
  --text-size-cs-base: 14px;
  --text-size-cs-base--line-height: 20px;
  --text-size-cs-lg: 16px;
  --text-size-cs-lg--line-height: 22px;
  --text-size-cs-xl: 18px;
  --text-size-cs-xl--line-height: 24px;
  --text-size-cs-2xl: 20px;
  --text-size-cs-2xl--line-height: 26px;
  --text-size-cs-3xl: 24px;
  --text-size-cs-3xl--line-height: 30px;
  --text-size-cs-4xl: 28px;
  --text-size-cs-4xl--line-height: 36px;

  /* ============================================
   * Box Shadows (cs-*)
   * Usage: shadow-cs, shadow-cs-hover, etc.
   * ============================================ */
  --shadow-cs: 0 1px 1px 0 rgba(0,7,22,0.05), 0 1px 3px 0 rgba(0,7,22,0.15);
  --shadow-cs-hover: 0 1px 4px 0 rgba(0,7,22,0.15), 0 2px 6px 0 rgba(0,7,22,0.10);
  --shadow-cs-sticky: 0 2px 4px 0 rgba(0,7,22,0.15);
  --shadow-cs-modal: 0 4px 20px 0 rgba(0,7,22,0.25);

  /* ============================================
   * Border Radius (cs-*)
   * Usage: rounded-cs, rounded-cs-lg, rounded-cs-sm
   * ============================================ */
  --radius-cs: 8px;
  --radius-cs-lg: 12px;
  --radius-cs-sm: 4px;

  /* ============================================
   * Spacing (cs-*)
   * Usage: p-cs-xs, m-cs-sm, gap-cs-md, etc.
   * ============================================ */
  --spacing-cs-xs: 4px;
  --spacing-cs-sm: 8px;
  --spacing-cs-md: 12px;
  --spacing-cs-lg: 16px;
  --spacing-cs-xl: 20px;
  --spacing-cs-2xl: 24px;
}

/* ============================================
 * Dark Mode Overrides for cs-* Tokens
 * Applied when theme store adds .dark to <html>
 * ============================================ */
.dark {
  /* Surfaces */
  --color-cs-bg: #0f1419;
  --color-cs-surface: #1a2028;
  --color-cs-surface-alt: #212830;

  /* Navigation (stays dark in both themes) */
  --color-cs-nav: #0d1117;
  --color-cs-nav-dark: #090d12;
  --color-cs-nav-hover: #1c2736;

  /* Interactive / Accent */
  --color-cs-accent: #539fe5;
  --color-cs-accent-hover: #89bfed;
  --color-cs-accent-light: #172334;
  --color-cs-accent-focus: #1a3a5c;

  /* Text */
  --color-cs-text: #d1d5db;
  --color-cs-text-sec: #9ca3af;
  --color-cs-text-dim: #6b7280;
  --color-cs-text-link: #539fe5;
  --color-cs-text-inv: #ffffff;

  /* Borders */
  --color-cs-border: #30363d;
  --color-cs-border-hover: #484f58;
  --color-cs-border-focus: #539fe5;

  /* Status */
  --color-cs-success: #3fb950;
  --color-cs-success-bg: #0d2818;
  --color-cs-warning: #d29922;
  --color-cs-warning-bg: #2a1f04;
  --color-cs-error: #f85149;
  --color-cs-error-bg: #2d0b0b;
  --color-cs-info: #539fe5;
  --color-cs-info-bg: #0d1f3c;

  /* Buttons */
  --color-cs-btn-primary: #539fe5;
  --color-cs-btn-primary-hover: #89bfed;
  --color-cs-btn-normal: #21262d;
  --color-cs-btn-normal-hover: #30363d;

  /* Shadows (lighter for dark backgrounds) */
  --shadow-cs: 0 1px 1px 0 rgba(0,0,0,0.3), 0 1px 3px 0 rgba(0,0,0,0.2);
  --shadow-cs-hover: 0 1px 4px 0 rgba(0,0,0,0.3), 0 2px 6px 0 rgba(0,0,0,0.2);
  --shadow-cs-sticky: 0 2px 4px 0 rgba(0,0,0,0.3);
  --shadow-cs-modal: 0 4px 20px 0 rgba(0,0,0,0.5);
}

/* ============================================
 * Utility Classes for Brand Colors
 * ============================================
 * Pre-defined classes you can use directly
 */

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

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

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

.text-fg-brand {
  color: var(--color-fg-brand);
}

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

.hover\:bg-brand-strong:hover {
  background-color: var(--color-brand-strong);
}

.focus\:ring-brand-medium:focus {
  --tw-ring-color: var(--color-brand-medium);
}

.focus\:ring-brand-subtle:focus {
  --tw-ring-color: var(--color-brand-subtle);
}

.rounded-base {
  border-radius: var(--radius-base);
}

.shadow-xs {
  box-shadow: var(--shadow-xs);
}

/* ============================================
 * Bulk Action Confirmation Styles
 * ============================================
 * Used in admin bulk action confirmation pages
 */

/* Warning variant (amber) - Light mode */
.bulk-action-card-warning {
  @apply bg-amber-50 border-amber-300;
}
.bulk-action-card-warning .card-title {
  @apply text-amber-900;
}
.bulk-action-card-warning .card-text {
  @apply text-amber-800;
}
.bulk-action-card-warning .warning-box {
  @apply bg-amber-100;
}
.bulk-action-card-warning .warning-box p {
  @apply text-amber-900;
}
.bulk-action-card-warning .org-dot {
  @apply bg-amber-500;
}

/* Destructive variant (red) - Light mode */
.bulk-action-card-destructive {
  @apply bg-red-50 border-red-300;
}
.bulk-action-card-destructive .card-title {
  @apply text-red-900;
}
.bulk-action-card-destructive .card-text {
  @apply text-red-800;
}
.bulk-action-card-destructive .warning-box {
  @apply bg-red-100;
}
.bulk-action-card-destructive .warning-box p {
  @apply text-red-900;
}
.bulk-action-card-destructive .org-dot {
  @apply bg-red-500;
}

/* Warning variant (amber) - Dark mode */
.dark .bulk-action-card-warning {
  @apply bg-amber-950 border-amber-700;
}
.dark .bulk-action-card-warning .card-title {
  @apply text-amber-100;
}
.dark .bulk-action-card-warning .card-text {
  @apply text-amber-200;
}
.dark .bulk-action-card-warning .warning-box {
  @apply bg-amber-900;
}
.dark .bulk-action-card-warning .warning-box p {
  @apply text-amber-100;
}

/* Destructive variant (red) - Dark mode */
.dark .bulk-action-card-destructive {
  @apply bg-red-950 border-red-700;
}
.dark .bulk-action-card-destructive .card-title {
  @apply text-red-100;
}
.dark .bulk-action-card-destructive .card-text {
  @apply text-red-200;
}
.dark .bulk-action-card-destructive .warning-box {
  @apply bg-red-900;
}
.dark .bulk-action-card-destructive .warning-box p {
  @apply text-red-100;
}

/* Organization list container */
.bulk-action-org-list {
  @apply bg-white border-gray-200;
}
.dark .bulk-action-org-list {
  @apply bg-gray-800 border-gray-600;
}

/* Organization list item text */
.bulk-action-org-name {
  @apply text-gray-900;
}
.dark .bulk-action-org-name {
  @apply text-gray-100;
}

.bulk-action-org-client {
  @apply text-gray-500;
}
.dark .bulk-action-org-client {
  @apply text-gray-400;
}

/* ============================================
 * HTMX Indicator Styles
 * ============================================
 * Loading spinner shown during HTMX requests
 */

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: flex;
}

.htmx-indicator.htmx-request + * {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/*
 * Cloudscape-Cotton Utility Styles
 * ==================================
 * Minimal CSS for behaviors that Tailwind utility classes can't cover.
 * Include alongside Tailwind output.
 */

/* Loading skeleton pulse */
.cs-loading {
  position: relative;
  pointer-events: none;
}
.cs-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 10;
}
.cs-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid var(--color-cs-border);
  border-top-color: var(--color-cs-btn-primary);
  border-radius: 50%;
  animation: cs-spin 0.6s linear infinite;
  z-index: 11;
}
.dark .cs-loading::after {
  background: rgba(15, 20, 25, 0.6);
}

@keyframes cs-spin {
  to { transform: rotate(360deg); }
}
.cs-loading [data-cs-skeleton] {
  background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: cs-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
  color: transparent !important;
}

@keyframes cs-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Smooth Alpine transitions */
[x-cloak] { display: none !important; }

/* Split panel resize cursor */
.cs-resize-handle {
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.cs-resize-handle-horizontal {
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

/* Focus ring for keyboard navigation */
.cs-focus-ring:focus-visible {
  outline: 2px solid #0972d3;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Form input base class for cs-* design system */
.cs-input {
  @apply w-full rounded-cs-sm border border-cs-border bg-cs-surface
         px-3 py-1.5 text-size-cs-sm text-cs-text
         placeholder:text-cs-text-dim
         focus:outline-none focus:border-cs-border-focus focus:ring-1 focus:ring-cs-accent
         disabled:bg-gray-50 disabled:text-cs-text-dim disabled:cursor-not-allowed;
}

.cs-field-error .cs-input {
  @apply border-cs-error focus:border-cs-error focus:ring-cs-error;
}

/* Scrollbar styling for sidebar and panels */
.cs-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.cs-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.cs-scrollbar::-webkit-scrollbar-thumb {
  background: #d5dbdb;
  border-radius: 3px;
}
.cs-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #9ba7b6;
}

/* Table sticky header */
.cs-table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: var(--color-cs-surface-alt);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cs-table-sticky.is-scrolled thead th {
  background-color: var(--color-cs-nav);
  color: var(--color-cs-surface-alt);
}

/* Row hover + selection states */
.cs-table-row:hover {
  background-color: #fafafa;
}
.cs-table-row-selected {
  background-color: #e9f3fe !important;
}
.dark .cs-table-row:hover {
  background-color: #1e252d;
}
.dark .cs-table-row-selected {
  background-color: #1a2a3e !important;
}

/* SweetAlert2 — design system overrides */
.cs-swal-popup {
  background-color: var(--color-cs-surface);
  color: var(--color-cs-text);
  border: 1px solid var(--color-cs-border);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-cs-modal);
}
.cs-swal-title {
  color: var(--color-cs-text);
  font-size: 1rem;
  font-weight: 600;
}
.cs-swal-html {
  color: var(--color-cs-text-sec);
  font-size: 0.875rem;
}
.cs-swal-actions {
  gap: 0.5rem;
}
.cs-swal-confirm {
  background-color: var(--color-cs-btn-primary);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
}
.cs-swal-confirm:hover {
  background-color: var(--color-cs-btn-primary-hover);
}
.cs-swal-cancel {
  background-color: var(--color-cs-btn-normal);
  color: var(--color-cs-text);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid var(--color-cs-border);
  transition: background-color 0.15s ease;
}
.cs-swal-cancel:hover {
  background-color: var(--color-cs-btn-normal-hover);
}
/* Override SweetAlert2 icon colors to match design system */
.cs-swal-popup .swal2-icon.swal2-warning {
  border-color: var(--color-cs-warning);
  color: var(--color-cs-warning);
}
.cs-swal-popup .swal2-icon.swal2-error {
  border-color: var(--color-cs-error);
}
.cs-swal-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--color-cs-error);
}
.cs-swal-popup .swal2-icon.swal2-question {
  border-color: var(--color-cs-btn-primary);
  color: var(--color-cs-btn-primary);
}

/* Button loading spinner */
.cs-btn-loading {
  position: relative;
  color: transparent !important;
}
.cs-btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cs-spin 0.6s linear infinite;
}

@keyframes cs-spin {
  to { transform: rotate(360deg); }
}