/**
 * Theme CSS Variables
 * 
 * This file defines all CSS variables for consistent theming across the application.
 * It MUST be imported AFTER Element Plus CSS to override their defaults.
 * 
 * Load order in main.js:
 *   1. Element Plus CSS
 *   2. This file (theme.css)
 *   3. Other styles
 */

:root {
  /* ========================================
   * BRAND COLORS
   * ======================================== */
  --gt-primary: #1b8bfb;/* #409eff;*/
  --gt-primarybg: #e6f2ff;
  --gt-primary2: #0167ab;
  --gt-primary2bg: rgb(236, 245, 255);
  --gt-primary3: #0284c7; /* Figma secondary blue */
  --gt-primary3bg: #eff7ff;
  --gt-new: #67c23a;
  --gt-newbg: rgb(240, 249, 235);
  --gt-primary-hover: #015a94;
  --gt-accent: #db812e;

  /* ========================================
   * FIGMA COLOR PALETTE
   * ======================================== */
  --fg-primary: #0167ab; /* Main primary blue */
  --fg-primary-hover: #0284c7; /* Lighter blue for hover */
  --fg-slate-900: #0f172a; /* Dark slate for headings */
  --fg-slate-600: #64748b; /* Medium slate for secondary text */
  --fg-slate-100: #f1f5f9; /* Light slate for backgrounds */
  --fg-slate-50: #f8fafc; /* Very light slate */
  --fg-surface: #ffffff; /* White for cards/panels */
  --fg-border: #e2e8f0; /* Border color */
  --fg-border-light: #cbd5e1; /* Lighter border */
  --fg-alert-bg: #fef2f2; /* Red tinted background for alerts */
  --fg-alert-border: #fecaca; /* Red border for alerts */

  /* ========================================
   * NEUTRAL SURFACE COLORS (Gray Scale)
   * ======================================== */
  --gt-white: #ffffff;
  --gt-surface-50: #f8f8f8;   /* Lightest - App background, cards */
  --gt-surface-100: #efefef;  /* Very Light - Hover backgrounds, subtle fills */
  --gt-surface-200: #ededee;  /* Light - Borders, dividers */
  --gt-surface-300: #e2e2e2;  /* Light-Medium - Input borders */
  --gt-surface-400: #b0b0b0;  /* Medium - Placeholders, disabled states, focus borders */
  --gt-surface-500: #818181;  /* Medium-Dark - Muted text, secondary labels */
  --gt-surface-600: #666666;  /* Dark - Secondary text */
  --gt-surface-700: #505050;  /* Darker - Form labels, important text */
  --gt-surface-800: #2f2f2f;  /* Very Dark */
  --gt-surface-900: #1a1a1a;  /* Darkest - Primary headings, body text */
 

  /* ========================================
   * SEMANTIC COLORS
   * ======================================== */
  --gt-success: #16a34a;
  --gt-success-light: #dcfce7;
  --gt-success-hover: #bbf7d0;

  --gt-warning: #ea580c;
  --gt-warning-light: #ffedd5;
  --gt-warning-hover: #fed7aa;

  --gt-error: #dc2626;
  --gt-error-light: #fee2e2;
  --gt-error-hover: #fecaca;

  /* ========================================
   * SPECIAL BACKGROUNDS
   * ======================================== */
  --gt-info-bg: #eff6ff;
  --gt-alert-bg: #fdf2f2;
  --gt-alert-border: #fecaca;

  /* ========================================
   * GENERAL TEXT
   * ======================================== */
  --gt-general-text: #333333;
  --gt-general-text-bold: #94a3b8;

  /* ========================================
   * BUTTON COLORS
   * ======================================== */
  --gt-button-pri-fg: var(--gt-general-text);
  --gt-button-pri-bg: #94a3b8;
  --gt-button-pri-border: yellow;
  --gt-button-sec-fg: white;
  --gt-button-sec-bg: #0167ab;
  --gt-button-sec-border: blue;

  /* ========================================
   * BREADCRUMBS
   * ======================================== */
  --gt-crumb-current: black;
  --gt-crumb-lower: #808080;
  --gt-crumb-separator: #ff0000;

  /* ========================================
   * LIST COLORS
   * ======================================== */
  --gt-list-selected-primary: #0167ab;
  --gt-list-selected-secondary: #64748b;
  --gt-primary-text: #0167ab;
  --gt-list-heading: black;
  --gt-list-primary: black;
  --gt-list-secondary: #64748b;
  --gt-list-label: #555555;
  --gt-list-value: #808080;
  --gt-list-border: #e2e8f0;
  --gt-list-hover: #f1f5f9;
  --gt-list-bg: #cccccc;

  /* ========================================
   * PAGINATION
   * ======================================== */
  --gt-pagination-selected-bg: #0167ab;
  --gt-pagination-selected-fg: #cccccc;

  /* ========================================
   * FORM COLORS
   * ======================================== */
  --gt-form-heading: #0167ab;
  --gt-form-field-label: #0284c7;
  --gt-form-field-placeholder: #94a3b8;
  --gt-form-field-bg: #f1f5f9;
  --gt-form-field-value: black;
  --gt-form-field-required: red;
  --gt-form-field-error: red;
  --gt-form-border: #cbd5e1;
  --gt-form-border-error: red;
  --gt-form-subhead: black;
  --gt-form-tag-fg: green;
  --gt-form-tag-bg: #f0f8f0;
  --gt-form-toggle-color: blue;

  /* ========================================
   * PLACEHOLDER
   * ======================================== */
  --gt-placeholder: #b4b6ba;
  --gt-button-background: white;

  /* ========================================
   * DETAIL DISPLAY
   * ======================================== */
  --gt-detail-heading: black;
  --gt-detail-sub-value: #666666;
  --gt-detail-sub-label: #aaaaaa;
  --gt-detail-label: #666666;
  --gt-detail-value: #aaaaaa;
  --gt-detail-highlight-bg: #fecaca;

  /* ========================================
   * CARD COLORS
   * ======================================== */
  --gt-card-highlight: white;
  --gt-card-label: purple;
  --gt-card-value: blue;
  --gt-card-chip-fg: brown;
  --gt-card-chip-bg: #ffff00;

  /* PrimeVue Global Colors - Using --gt-primary */
  --p-primary-color: var(--gt-primary);
  --p-primary-50: var(--gt-surface-50);
  --p-primary-100: var(--gt-surface-100);
  --p-primary-200: var(--gt-surface-200);
  --p-primary-300: var(--gt-surface-300);
  --p-primary-400: var(--gt-primary);
  --p-primary-500: var(--gt-primary);
  --p-primary-600: var(--gt-primary-hover);
  --p-primary-700: var(--gt-primary-hover);
  --p-primary-800: var(--gt-primary-hover);
  --p-primary-900: var(--gt-surface-900);
  --p-primary-contrast-color: #ffffff;

  /* Aliases for convenience */
  --gt-primary-500: var(--gt-primary);
  --gt-primary-600: var(--gt-primary-hover);
}

/* PrimeVue Menu styling */
.p-menu-submenu-label {
  color: var(--gt-primary) !important;
  /* color: #5995ec !important; */
}
.p-menubar {
  border: none !important;
}
.btn-primary {
  background: var(--gt-primary2);
  color: var(--gt-white) !important;
}
.search-btn {
  padding: 10px 10px;
}
.action-btn {
  color: var(--gt-white) !important;
  padding: 12px 16px !important;
  background: var(--gt-primary2) !important;
  border: 1px solid var(--gt-primary2) !important;
  border-radius: 6px;
  transition: all 0.2s ease !important;
}
.action-btn:hover {
  color: var(--gt-primary2) !important;
  background: var(--gt-primary2bg) !important;
}
.new-btn {
  background: var(--gt-new) !important;
  color: var(--gt-newbg) !important;
  border: 1px solid var(--gt-new) !important;
  transition: all 0.2s ease !important;
}
.new-btn:hover {
  background: var(--gt-newbg) !important;
  color: var(--gt-new) !important;
}
.main-button {
  background: var(--gt-primary) !important;
  border-color: var(--gt-primary);
}
.p-multiselect-option-group {
  color: var(--gt-primary) !important;
}
/* High-Contrast/Dashed Error Indicators for PrimeVue */
.p-invalid, 
.p-invalid .p-inputtext, 
.p-invalid.p-select,
.p-invalid.p-datepicker,
.p-invalid.p-autocomplete,
.p-invalid.p-multiselect {
    border: 2px dashed #d32f2f !important;
    box-shadow: none !important; /* Remove glow to keep geometry flat */
    background-color: #fff8f8 !important;
}

/* Ensure the warning icon doesn't shift the label if needed */
.field-label.error-active {
    position: relative;
}
.field-label.error-active::after {
    content: " ⚠️";
    position: absolute;
    right: -20px;
}
/* ========================================
 * GLOBAL AUTOFILL STYLES
 * Browser autofill styling - must be global
 * ======================================== */

/* Chrome/Safari/Edge autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--gt-white) inset !important;
  -webkit-text-fill-color: var(--gt-surface-900) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Firefox autofill */
input:-internal-autofill-selected
/* ,
.el-input input:-internal-autofill-selected  */
{
  background-color: var(--gt-surface-100) !important;
  color: var(--gt-surface-900) !important;
}

/* ========================================
 * ELEMENT PLUS GLOBAL OVERRIDES
 * ======================================== */

/* Select wrapper borders */
.el-select__wrapper {
  box-shadow: 0 0 0 1px var(--gt-surface-300) inset !important;
}

.el-select__wrapper:hover {
  box-shadow: 0 0 0 1px var(--gt-surface-400) inset !important;
}

.el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px var(--gt-surface-400) inset !important;
} */

/* ========================================
 * FIGMA SPACING SYSTEM
 * ======================================== */
:root {
  --fg-gap-tight: 4px;
  --fg-gap-compact: 8px;
  --fg-gap-normal: 12px;
  --fg-gap-medium: 16px;
  --fg-gap-loose: 24px;
  --fg-gap-wide: 32px;

  --fg-padding-compact: 12px;
  --fg-padding-normal: 16px;
  --fg-padding-medium: 20px;
  --fg-padding-loose: 24px;

  --fg-margin-tight: 4px;
  --fg-margin-compact: 8px;
  --fg-margin-normal: 12px;
  --fg-margin-medium: 16px;
  --fg-margin-loose: 24px;

  /* ========================================
   * FIGMA TYPOGRAPHY
   * ======================================== */
  --fg-font-label: 11px;
  --fg-font-meta: 12px;
  --fg-font-body: 14px;
  --fg-font-title: 15px;
  --fg-font-header: 16px;
  --fg-font-heading: 18px;

  /* ========================================
   * FIGMA COMPONENT SIZES
   * ======================================== */
  --fg-border-radius-sm: 4px;
  --fg-border-radius-md: 6px;
  --fg-border-radius-lg: 12px; /* Vue uses 12px */
  --fg-card-shadow: 0 2px 4px rgba(0,0,0,0.04);
  --fg-card-shadow-hover: 0 4px 12px rgba(1, 103, 171, 0.08);
  --fg-card-shadow-active: 0 4px 12px rgba(1, 103, 171, 0.12);
  --fg-input-height: 40px;
  --fg-btn-height: 40px;
  --fg-action-btn-size: 32px;
}

/* ========================================
 * RESPONSIVE BREAKPOINTS & LAYOUT VARIABLES
 * ========================================
 *
 * Breakpoint Strategy:
 * - Desktop XL:       1920px+ - (large monitors)
 * - Desktop:          1280px  - 1919px (standard laptops/desktops)
 * - Tablet Landscape: 1024px  - 1279px (iPad landscape, small laptops)
 * - Tablet Portrait:  768px   - 1023px (iPad portrait, large tablets)
 * - Mobile:         < 768px   - (phones, small tablets)
 *
 * Usage: Use CSS variables for responsive values, or media queries for structural changes
 */

:root {
  /* Default: Desktop XL (1920px+) */
  --gt-content-max-width: 1400px;
  --gt-sidebar-width: 350px;
  --gt-sidebar-collapsed: 0px;
  --gt-header-height: 60px;
  --gt-padding: 20px;
  --gt-gap: 20px;
  --gt-font-base: 14px; /* 16px; */
  --gt-font-sm: 14px;
  --gt-font-lg: 18px;
  --gt-body-svg-size: 120px;
  --gt-tab-height: 48px;
  --gt-detail-grid-columns: 1fr 1fr;
  --gt-card-min-width: 300px;
  --gt-form-columns: 2;

  /* Figma layout variables */
  --fg-list-panel-width: 420px;
  --fg-sidebar-width: 188px;
  --fg-detail-panel-width: 380px;
  --fg-container-max-width: 1920px;
}

/* Desktop (1280px - 1919px) */
@media (max-width: 1919px) {
  :root {
    --gt-content-max-width: 1200px;
    --gt-sidebar-width: 320px;
    --gt-padding: 16px;
    --gt-gap: 16px;
  }
}

/* Tablet Landscape (1024px - 1279px) */
@media (max-width: 1279px) {
  :root {
    --gt-content-max-width: 100%;
    --gt-sidebar-width: 280px;
    --gt-padding: 12px;
    --gt-gap: 12px;
    --gt-font-base: 14px; /* 15px; */
    --gt-card-min-width: 260px;
  }
}

/* Tablet Portrait (768px - 1023px) */
@media (max-width: 1023px) {
  :root {
    --gt-sidebar-width: 0px;
    --gt-padding: 12px;
    --gt-gap: 12px;
    --gt-font-base: 14px; /* 15px; */
    --gt-body-svg-size: 100px;
    --gt-detail-grid-columns: 1fr;
    --gt-form-columns: 1;
    --gt-card-min-width: 100%;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  :root {
    --gt-header-height: 50px;
    --gt-padding: 10px;
    --gt-gap: 8px;
    --gt-font-base: 14px;
    --gt-font-sm: 12px;
    --gt-font-lg: 14px; /* 1*/
    --gt-body-svg-size: 80px;
    --gt-tab-height: 40px;
    --gt-detail-grid-columns: 1fr;
    --gt-form-columns: 1;
    --gt-card-min-width: 100%;
  }
}

/* ========================================
 * UTILITY CLASSES FOR RESPONSIVE LAYOUT
 * ========================================
 */

/* Container that respects max-width and centers content */
.gt-responsive-container {
  width: 100%;
  max-width: var(--gt-content-max-width);
  margin: 0 auto;
  padding: 0 var(--gt-padding);
}

/* Flex container that wraps on smaller screens */
.gt-flex-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gt-gap);
}

/* Grid that adapts columns based on screen size */
.gt-grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--gt-card-min-width), 1fr));
  gap: var(--gt-gap);
}

/* Two-column layout that stacks on tablet portrait and below */
.gt-two-column {
  display: grid;
  grid-template-columns: var(--gt-detail-grid-columns);
  gap: var(--gt-gap);
}

/* Hide on mobile */
@media (max-width: 767px) {
  .gt-hide-mobile {
    display: none !important;
  }
}

/* Hide on tablet and below */
@media (max-width: 1023px) {
  .gt-hide-tablet {
    display: none !important;
  }
}

/* Show only on mobile */
.gt-show-mobile {
  display: none !important;
}

@media (max-width: 767px) {
  .gt-show-mobile {
    display: block !important;
  }
}

/* ========================================
 * FORM FIELD BACKGROUND - Comprehensive Coverage
 * ======================================== */

/* All Element Plus and PrimeVue inputs */
.p-inputtext,
.p-select,
.p-multiselect,
.p-datepicker,
.p-autocomplete,
.p-inputnumber {
  background-color: var(--gt-surface-50) !important;
}

/* Ensure input stays grey on focus, hover, active */
.p-inputtext:enabled:focus,
.p-inputtext:enabled:hover,
.p-select:not(.p-disabled):hover,
.p-select:not(.p-disabled).p-focus,
.p-multiselect:not(.p-disabled):hover,
.p-multiselect:not(.p-disabled).p-focus,
.p-datepicker:not(.p-disabled):hover,
.p-datepicker:not(.p-disabled).p-focus,
.p-autocomplete:not(.p-disabled):hover,
.p-autocomplete:not(.p-disabled).p-focus,
.p-inputnumber:not(.p-disabled):hover,
.p-inputnumber:not(.p-disabled).p-focus {
  background-color: var(--gt-surface-50) !important;
  border-color: var(--gt-primary) !important;
  box-shadow: 0 0 0 1px var(--gt-primary) !important;
}

/* Input text color - dark for actual text */
.el-input__inner,
.el-textarea__inner,
.el-input__wrapper input {
  color: var(--gt-surface-800) !important;
  font-weight: 500;
}

/* Select selected item text - dark color for actual values */
.el-select__wrapper .el-select__selected-item,
.el-select__wrapper .el-select__selection .el-select__selected-item,
.el-select__wrapper .el-select__selection span,
.el-select__wrapper .el-select__selection .el-select__tags-text,
.el-select__input {
  color: var(--gt-surface-800) !important;
  font-weight: 500;
  font-style: normal;
}

/* Checkbox and Radio backgrounds */
.el-checkbox__inner,
.el-radio__inner {
  background-color: var(--gt-surface-100) !important;
  border-color: var(--gt-surface-400) !important;
}

/* Toggle/Switch */
.el-switch__core {
  background-color: var(--gt-surface-300) !important;
  border-color: var(--gt-surface-400) !important;
}

.p-toggleswitch {
  background-color: transparent !important;
  border-color: transparent !important;
}

.p-toggleswitch .p-toggleswitch-slider {
  background-color: var(--gt-surface-300) !important;
  border: 1px solid var(--gt-surface-400) !important;
}

/* .el-switch.is-checked .el-switch__core, */

.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
  background-color: var(--gt-primary) !important;
  border-color: var(--gt-primary) !important;
}

/* Select dropdown input */
select:placeholder {
  color: var(--gt-surface-300); 
}

/* ========================================
 * MOBILE RESPONSIVE OVERRIDES
 * Ensure components work below 500px
 * ======================================== */

/* ========================================
 * PRIMEVUE DROPDOWN SELECTED OPTION STYLES
 * ======================================== */

/* PrimeVue Select - selected option in dropdown */
.p-select-option.p-select-option-selected {
  background: var(--gt-primarybg) !important;
  color: var(--gt-primary) !important;
}

.p-select-option.p-select-option-selected:hover,
.p-select-option.p-select-option-selected:focus {
  background: var(--gt-primarybg) !important;
  color: var(--gt-primary) !important;
}

/* PrimeVue MultiSelect - selected option in dropdown */
.p-multiselect-option.p-multiselect-option-selected {
  background: var(--gt-primarybg) !important;
  color: var(--gt-primary) !important;
}

.p-multiselect-option.p-multiselect-option-selected:hover,
.p-multiselect-option.p-multiselect-option-selected:focus {
  background: var(--gt-primarybg) !important;
  color: var(--gt-primary) !important;
}

/* PrimeVue MultiSelect checkbox checked state */
.p-multiselect .p-checkbox-box.p-highlight,
.p-multiselect .p-checkbox-checked .p-checkbox-box {
  background: var(--gt-primary) !important;
  border-color: var(--gt-primary) !important;
}

.p-multiselect .p-checkbox-box.p-highlight .p-checkbox-icon,
.p-multiselect .p-checkbox-checked .p-checkbox-box .p-checkbox-icon {
  color: #fff !important;
}