/**
 * Global Base Stylesheet
 * Strictly adheres to HSL color specifications and accessible elevation hierarchy.
 */

/* ==========================================================================
   1. CSS Reset & Box Sizing
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Custom Cursor Reset: hides native cursor on fine pointer devices */
@media (pointer: fine) {
  body, a, button, input, textarea, select, label {
    cursor: none !important;
  }
}

/* ==========================================================================
   2. Elevation System (5 Predetermined Levels - HSL Shadows)
   ========================================================================== */
:root {
  /* Level 1: Minimal subtle lift for cards and input containers */
  --elevation-1: 0 1px 3px hsl(0, 0%, 0%, 0.12), 0 1px 2px hsl(0, 0%, 0%, 0.08);
  
  /* Level 2: Gentle rest state for interactive cards and pills */
  --elevation-2: 0 4px 6px -1px hsl(0, 0%, 0%, 0.16), 0 2px 4px -2px hsl(0, 0%, 0%, 0.12);
  
  /* Level 3: Elevated hover state, dropdowns, and floating badges */
  --elevation-3: 0 10px 15px -3px hsl(0, 0%, 0%, 0.22), 0 4px 6px -4px hsl(0, 0%, 0%, 0.16);
  
  /* Level 4: Sticky navigations, slide-overs, and elevated focus cards */
  --elevation-4: 0 20px 25px -5px hsl(0, 0%, 0%, 0.30), 0 8px 10px -6px hsl(0, 0%, 0%, 0.22);
  
  /* Level 5: Maximum modal elevation, popups, and dialog overlays */
  --elevation-5: 0 25px 50px -12px hsl(0, 0%, 0%, 0.40);

  /* Spacing Scale */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 6rem;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Micro Transitions */
  --transition-instant: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ==========================================================================
   3. Custom Cursor Architecture (Zero Lag SVG Cursor)
   ========================================================================== */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 99999;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
  display: none;
}

@media (pointer: fine) {
  .custom-cursor {
    display: block;
  }
}

.custom-cursor svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  overflow: visible;
  transition: opacity var(--transition-instant), transform var(--transition-instant);
}

.cursor-normal {
  display: block;
  opacity: 1;
}

.cursor-hover,
.cursor-loading {
  display: none;
  opacity: 0;
}

.custom-cursor.is-hover .cursor-normal {
  display: none;
  opacity: 0;
}
.custom-cursor.is-hover .cursor-hover {
  display: block;
  opacity: 1;
}

.custom-cursor.is-loading .cursor-normal,
.custom-cursor.is-loading .cursor-hover {
  display: none;
  opacity: 0;
}
.custom-cursor.is-loading .cursor-loading {
  display: block;
  opacity: 1;
}

.custom-cursor .cursor-spinner {
  transform-origin: 14px 14px;
  animation: cursorRotate 1s linear infinite;
}

@keyframes cursorRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   4. Typography & Title Capitalization Baseline
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.heading-capitalize,
label,
.btn {
  text-transform: capitalize;
  text-wrap: balance;
}

/* ==========================================================================
   5. Links & Animated Underline (Right to Left Transition)
   ========================================================================== */
a {
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: color var(--transition-smooth);
}

/* Animated right-to-left underline */
.animated-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
}

.animated-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background-color: var(--accent-main);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-smooth) ease-in-out;
}

.animated-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Logo links should never show an underline even on hover */
.logo,
a.logo,
.logo a {
  text-decoration: none !important;
  border-bottom: none !important;
}

.logo::after,
a.logo::after,
.logo a::after {
  display: none !important;
  content: none !important;
}

/* Icons should never have an underline even on hover */
i,
svg,
.icon-circle,
a i,
a svg {
  text-decoration: none !important;
}

a i::after,
a svg::after {
  display: none !important;
}

/* ==========================================================================
   6. Circular Icon Containers (Never scale raw icons directly)
   ========================================================================== */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: transform var(--transition-smooth), background-color var(--transition-smooth);
}

.icon-circle-sm {
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
}

.icon-circle-md {
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}

.icon-circle-lg {
  width: 58px;
  height: 58px;
  font-size: 1.4rem;
}

.icon-circle:hover {
  transform: scale(1.08);
}

/* ==========================================================================
   7. Dark Badges, Chips, Tags & Tooltips (Darker BG, Lighter Text)
   ========================================================================== */
.badge,
.chip,
.tag,
.tab-active {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background-color: var(--badge-bg);
  color: var(--badge-text);
  border: 1px solid var(--badge-border);
  box-shadow: var(--elevation-1);
}

/* ==========================================================================
   8. Form Inputs & Floating Icon Wrapper
   ========================================================================== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  position: relative;
}

.form-group label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.input-icon-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Fixed left icon inside input */
.input-icon-wrapper .input-leading-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-main);
  pointer-events: none;
  font-size: 1rem;
  z-index: 2;
}

.input-icon-wrapper input,
.input-icon-wrapper select,
.input-icon-wrapper textarea {
  width: 100%;
  padding: 0.9rem 1rem 0.9rem 2.8rem;
  background-color: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  caret-color: var(--accent-main);
  box-shadow: var(--elevation-1);
  transition: border-color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.input-icon-wrapper textarea {
  padding-top: 1rem;
  resize: vertical;
  min-height: 120px;
}

.input-icon-wrapper input:focus,
.input-icon-wrapper select:focus,
.input-icon-wrapper textarea:focus {
  outline: none;
  border-color: var(--accent-main);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Password Toggle Icon */
.password-toggle-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  z-index: 3;
}

.password-toggle-btn:hover {
  color: var(--accent-main);
}

.field-validation-error {
  font-size: 0.8rem;
  color: var(--semantic-red-base);
  margin-top: 0.25rem;
  display: none;
}

.field-validation-error.visible {
  display: block;
}

/* ==========================================================================
   9. Spinners & Loading States
   ========================================================================== */
.btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid hsl(0, 0%, 100%, 0.25);
  border-top-color: hsl(0, 0%, 100%, 0.95);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.btn.is-loading .btn-spinner {
  display: inline-block;
}

.btn.is-loading .btn-text {
  display: none;
}

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

/* ==========================================================================
   10. Accessible Table Responsiveness
   ========================================================================== */
.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-md) 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-2);
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

/* ==========================================================================
   11. Custom Semantic Popup / Modal
   ========================================================================== */
.custom-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: hsl(0, 0%, 0%, 0.65);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-smooth);
}

.custom-modal-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

.custom-modal-box {
  background-color: var(--modal-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-main);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  max-width: 480px;
  width: 100%;
  box-shadow: var(--elevation-5);
  transform: translateY(20px) scale(0.96);
  transition: transform var(--transition-spring);
}

.custom-modal-backdrop.is-active .custom-modal-box {
  transform: translateY(0) scale(1);
}

.custom-modal-box.modal-danger {
  border-top: 5px solid var(--semantic-red-base);
}
.custom-modal-box.modal-success {
  border-top: 5px solid var(--semantic-green-base);
}
.custom-modal-box.modal-warning {
  border-top: 5px solid var(--semantic-yellow-base);
}