@use '../modules/side-nav/side-nav.theme' as sideNav;
@use '../modules/form-builder/form-builder.theme' as fb;
@use '../modules/filter-table-selector/filter-table-selector.theme' as fts;
@use '../modules/time-picker/time-picker.theme' as tp;
@import 'quill/dist/quill.snow.css';
@import './utilities.scss';

:root {
  @include sideNav.side-nav-theme();
  @include fb.form-builder-theme();
  @include tp.time-picker-theme();
  --cc-card-bg: #ffffff;
  --cc-card-border-color: #e0e0e0;
  --cc-card-border-radius: 8px;
  --cc-card-padding: 16px;
  --cc-card-shadow: none;

  @include fts.filter-table-selector-theme();

  /* Text Colors */
  --text-color: #333333;
  --text-muted: #666666;
  --text-muted-2: #888888;
  --text-light: #6c757d;
  --text-on-primary: #ffffff;

  /* Borders & Icons */
  --border-color: #dee2e6;
  --icon-bg: rgba(0, 0, 0, 0.05);

  /* Components */
  --primary-color: #c21e25;
  /* Default Base Primary */
  --btn-primary-bg: var(--primary-color);
  --btn-primary-text: #ffffff;
  --card-bg: #ffffff;
  --input-bg: #fcfcfc;
  --sidenav-bg: #ffffff;
  --sidenav-active-bg: #fff0f0;
  --sidenav-active-text: #ff0000;

  /* Status & Chips */
  --status-active-bg: #f6ffed;
  --status-active-text: #52c41a;
  --status-inactive-bg: #fffbe6;
  --status-inactive-text: #faad14;

  --chip-blue-bg: #e6f7ff;
  --chip-blue-text: #1890ff;
  --chip-green-bg: #f6ffed;
  --chip-green-text: #52c41a;

  /* Form Fields */
  --field-label-color: #202124;
  --field-label-height: 27px;
  --field-input-bg: #fefefe;
  --field-input-border: #bdc1c6;
  --field-input-height: 40px;
  --field-input-radius: 7px;
  --field-hint-color: #5f6368;

  /* Smart Table Inline Edit Controls */
  --st-cell-input-border: 1px solid var(--field-input-border, #dee2e6);
  --st-cell-input-focus-outline-color: var(--primary-color, #c21e25);
  --st-cell-input-bg: var(--field-input-bg, #fcfcfc);
  --st-cell-select-bg: var(--field-input-bg, #fcfcfc);

  /* Smart Table Inline Edit Controls (Mirrored) */
  --st-edit-actions-gap: 0.75rem;
  --st-action-btn-size: 32px;
  --st-action-btn-icon-size: 16px;
  --st-tick-btn-bg: transparent;
  --st-cross-btn-bg: #ffffff;
  --st-cross-btn-border: 1px solid #e8eaed;
  --st-cross-btn-hover-bg: #f8f9fa;
  --st-top-add-btn-bg: #4d89eb;
  --st-top-add-btn-hover-bg: #295eb7;

  /* MultiSave (Card Repeater) */
  --ms-card-bg: #ffffff;
  --ms-card-border: #e8eaed;
  --ms-card-radius: 10px;
  --ms-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  --ms-card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.08);
  --ms-title-color: #111827;
  --ms-desc-color: #6b7280;
  --ms-btn-add-color: #3b82f6;
  --ms-btn-add-hover: #2563eb;

  /* Link List */
  --cc-sf-link-item-bg: #ffffff;
  --cc-sf-link-item-border: #e8eaed;
  --cc-sf-link-item-text: #111827;
  --cc-sf-link-delete-color: #ef4444;
  --cc-sf-link-edit-color: #4b5563;
  --cc-sf-link-save-color: #16a34a;

  @include sideNav.side-nav-theme();
}

/* ----------------------------------------------------
   Theme 2 - Aesthetic Midnight (Dark/Neon)
   ---------------------------------------------------- */
body.theme-2 {
  --primary-color: #00d4ff;
  /* Neon Cyan */
  --secondary-color: #2b52ff;
  /* Bright Blue */

  /* Layout Backgrounds */
  --header-bg: rgba(15, 28, 63, 0.95);
  /* Deep Indigo */
  --footer-bg-start: #0a1128;
  --footer-bg-end: #0f1c3f;
  --sidebar-bg: #0a1128;
  --content-bg: #0f1c3f;

  /* Text Colors */
  --text-color: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.7);
  --text-muted-2: rgba(255, 255, 255, 0.6);
  --text-light: #aaaaaa;
  --text-on-primary: #000000;

  /* Borders & Icons */
  --border-color: rgba(255, 255, 255, 0.1);
  --icon-bg: rgba(255, 255, 255, 0.1);
  /* Typography */
  --cc-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  --cc-text-color-primary: #000000;
  --cc-text-color-secondary: #757575;
  --cc-text-size-label: 12px;
  --cc-text-size-value: 24px;
  --cc-text-weight-bold: 700;
  --cc-text-weight-medium: 500;

  /* Theme 1 - Screenshot Match */
  --cc-theme-1-padding: 20px;
  --cc-theme-1-border-radius: 6px;
  --cc-theme-1-border: 1px solid #eeeeee;
  --cc-theme-1-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  /* Theme 2 - Aesthetic */
  --cc-theme-2-padding: 32px;
  --cc-theme-2-border-radius: 16px;
  --cc-theme-2-border: none;
  --cc-theme-2-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
  --cc-theme-2-bg: #ffffff;

}

/* Global Reset/Base */
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--content-bg);
  /* Use content-bg, not generic bg-color */
  color: var(--text-color);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}