/**
 * ==========================================================================
 * VERIMUS DESIGN SYSTEM - ICON COMPONENTS
 * ==========================================================================
 * 
 * Icon wrapper classes and styling for SVG and font icons.
 * 
 * Icon Wrappers:
 * - .icon-verimus       = Fill-based SVG icons
 * - .icon-verimus-2     = Stroke-based SVG icons (DEFAULT)
 * - .icon-verimus-3     = Circle/line stroke SVG icons
 * 
 * Icon Sizes:
 * - .v-icon--xs  (12px)
 * - .v-icon--sm  (16px)
 * - .v-icon--md  (20px)
 * - .v-icon--lg  (24px) - Default
 * - .v-icon--xl  (32px)
 * - .v-icon--2xl (40px)
 * 
 * Icon Colors:
 * - Default: --icon-color-default (gray-400)
 * - Hover: --icon-color-hover (primary)
 * - Dark mode: white
 * 
 * Depends on: _variables.css
 * ==========================================================================
 */

/* ==========================================================================
   BASE ICON WRAPPER
   ========================================================================== */

.v-icon,
.icon-verimus,
.icon-verimus-2,
.icon-verimus-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  flex-shrink: 0;
  color: var(--icon-color-default);
  transition: color var(--transition-base) var(--ease-in-out);
}

.v-icon svg,
.icon-verimus svg,
.icon-verimus-2 svg,
.icon-verimus-3 svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   ICON TYPE - FILL (icon-verimus)
   ========================================================================== */

.icon-verimus>svg>path {
  fill: var(--icon-color-default);
  transition: fill var(--transition-base) var(--ease-in-out);
}

.icon-verimus:hover>svg>path {
  fill: var(--icon-color-hover);
}

/* Dark mode */
.dark-mode .icon-verimus>svg>path {
  fill: var(--icon-color-inverse);
}

.dark-mode .icon-verimus:hover>svg>path {
  fill: var(--icon-color-hover);
}

/* ==========================================================================
   ICON TYPE - STROKE (icon-verimus-2) - DEFAULT
   ========================================================================== */

.icon-verimus-2>svg>path {
  stroke: var(--icon-color-default);
  fill: none;
  transition: stroke var(--transition-base) var(--ease-in-out);
}

.icon-verimus-2:hover>svg>path {
  stroke: var(--icon-color-hover) !important;
  fill: none !important;
}

/* Dark mode */
.dark-mode .icon-verimus-2>svg>path {
  stroke: var(--icon-color-inverse);
  fill: none;
}

.dark-mode .icon-verimus-2:hover>svg>path {
  stroke: var(--icon-color-hover) !important;
}

/* ==========================================================================
   ICON TYPE - CIRCLE/LINE STROKE (icon-verimus-3)
   ========================================================================== */

.icon-verimus-3>svg>circle,
.icon-verimus-3>svg>line {
  stroke: var(--icon-color-default);
  fill: none;
  transition: stroke var(--transition-base) var(--ease-in-out);
}

.icon-verimus-3:hover>svg>circle,
.icon-verimus-3:hover>svg>line {
  stroke: var(--icon-color-hover) !important;
  fill: none !important;
}

/* Dark mode */
.dark-mode .icon-verimus-3>svg>circle,
.dark-mode .icon-verimus-3>svg>line {
  stroke: var(--icon-color-inverse);
  fill: none;
}

.dark-mode .icon-verimus-3:hover>svg>circle,
.dark-mode .icon-verimus-3:hover>svg>line {
  stroke: var(--icon-color-hover) !important;
}

/* ==========================================================================
   SIZE VARIANTS
   ========================================================================== */

.v-icon--xs {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.v-icon--sm {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.v-icon--md {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.v-icon--lg {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

.v-icon--xl {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
}

.v-icon--2xl {
  width: var(--icon-size-2xl);
  height: var(--icon-size-2xl);
}

.v-icon--3xl {
  width: var(--icon-size-3xl);
  height: var(--icon-size-3xl);
}

/* ==========================================================================
   COLOR VARIANTS
   ========================================================================== */

.v-icon--primary,
.v-icon--primary svg path {
  color: var(--color-primary);
  fill: var(--color-primary);
  stroke: var(--color-primary);
}

.v-icon--success,
.v-icon--success svg path {
  color: var(--icon-color-success);
  fill: var(--icon-color-success);
  stroke: var(--icon-color-success);
}

.v-icon--error,
.v-icon--error svg path {
  color: var(--icon-color-error);
  fill: var(--icon-color-error);
  stroke: var(--icon-color-error);
}

.v-icon--warning,
.v-icon--warning svg path {
  color: var(--icon-color-warning);
  fill: var(--icon-color-warning);
  stroke: var(--icon-color-warning);
}

.v-icon--info,
.v-icon--info svg path {
  color: var(--icon-color-info);
  fill: var(--icon-color-info);
  stroke: var(--icon-color-info);
}

.v-icon--muted,
.v-icon--muted svg path {
  color: var(--icon-color-muted);
  fill: var(--icon-color-muted);
  stroke: var(--icon-color-muted);
}

/* ==========================================================================
   ICON WRAP (for dark mode switching)
   ========================================================================== */

.icon-wrap {
  display: inline-flex;
}

.icon-wrap .icon {
  display: block;
}

.icon-wrap .icon-darkmode {
  display: none;
}

.dark-mode .icon-wrap .icon {
  display: none;
}

.dark-mode .icon-wrap .icon-darkmode {
  display: block;
}

/* Icon visibility classes */
.icon-whitemode {
  display: inline-block;
}

.icon-darkmode {
  display: none;
}

.dark-mode .icon-whitemode {
  display: none;
}

.dark-mode .icon-darkmode {
  display: block;
}

/* ==========================================================================
   SEARCH ICON (Special positioning)
   ========================================================================== */

.icon-search-wrapper {
  position: absolute;
  right: 10px;
  top: 20px;
  transform: translateY(-50%);
}

.icon-search-wrapper .icon-search {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  object-fit: contain;
  pointer-events: none;
}

.dark-mode .icon-search-wrapper .icon-search,
.icon-search-wrapper .icon-search-darkmode {
  display: none;
}

.dark-mode .icon-search-wrapper .icon-search-darkmode {
  display: block;
}

/* Header search - icon positioning */
#header-form-search .icon-search-wrapper {
  position: absolute;
  top: 27px;
  left: 4px;
}

#header-form-search .icon-search-wrapper .icon-search {
  left: 10px;
  right: auto;
}

/* ==========================================================================
   EYE ICON (Show/Hide Password)
   ========================================================================== */

.eye-white {
  display: none;
}

.eye-black {
  display: block;
}

.dark-mode .eye-white {
  display: block;
}

.dark-mode .eye-black {
  display: none;
}

/* In data table containers */
.dt-container .eye-white {
  display: none;
}

.dt-container .eye-black {
  display: block;
}

.dark-mode .dt-container .eye-white {
  display: block;
}

.dark-mode .dt-container .eye-black {
  display: none;
}

/* ==========================================================================
   FONTAWESOME ICON OVERRIDES
   ========================================================================== */

.fa,
.fas,
.far,
.fab {
  color: inherit;
}

/* Icon button with FontAwesome */
.v-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--icon-color-default);
  cursor: pointer;
  transition: background-color var(--transition-base) var(--ease-in-out),
    color var(--transition-base) var(--ease-in-out);
}

.v-icon-btn:hover {
  background-color: var(--gray-100);
  color: var(--icon-color-hover);
}

.dark-mode .v-icon-btn {
  color: var(--icon-color-inverse);
}

.dark-mode .v-icon-btn:hover {
  background-color: var(--dark-bg-tertiary);
  color: var(--icon-color-hover);
}

/* ==========================================================================
   SPINNING ICON (Loading)
   ========================================================================== */

.v-icon--spin,
.fa-spin {
  animation: v-icon-spin 1s linear infinite;
}

@keyframes v-icon-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 767px) {
  /* Slightly smaller icons on mobile if needed */
}