/* ============================================================
   Icon Styles — Hosting CRM Theme
   ============================================================
   Styles for inline SVG icons via IconService.
   Import AFTER tokens.css.
   ============================================================ */

/* ============================================================
   BASE ICON
   ============================================================ */
.ui-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    transition: color var(--duration) var(--ease);
}

/* Ensure SVG fills properly */
.ui-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ============================================================
   ICON SIZES
   ============================================================ */
.ui-icon--xs {
    width: 12px;
    height: 12px;
}

.ui-icon--sm {
    width: 16px;
    height: 16px;
}

.ui-icon--md {
    width: 20px;
    height: 20px;
}

.ui-icon--lg {
    width: 24px;
    height: 24px;
}

.ui-icon--xl {
    width: 32px;
    height: 32px;
}

.ui-icon--2xl {
    width: 48px;
    height: 48px;
}

/* ============================================================
   ICON COLORS — Semantic
   ============================================================ */
.ui-icon--color-primary {
    color: var(--color-primary);
}

.ui-icon--color-primary-hover {
    color: var(--color-primary-hover);
}

.ui-icon--color-secondary {
    color: var(--color-secondary);
}

.ui-icon--color-success {
    color: var(--color-success);
}

.ui-icon--color-warning {
    color: var(--color-warning);
}

.ui-icon--color-danger {
    color: var(--color-danger);
}

.ui-icon--color-info {
    color: var(--color-info);
}

.ui-icon--color-muted {
    color: var(--text-muted);
}

.ui-icon--color-secondary-text {
    color: var(--text-secondary);
}

.ui-icon--color-inverse {
    color: var(--text-inverse);
}

.ui-icon--color-current {
    color: currentColor;
}

/* ============================================================
   ICON CONTAINER
   ============================================================ */
.ui-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

/* Container sizes */
.ui-icon-wrap--xs {
    width: 12px;
    height: 12px;
}

.ui-icon-wrap--sm {
    width: 16px;
    height: 16px;
}

.ui-icon-wrap--md {
    width: 20px;
    height: 20px;
}

.ui-icon-wrap--lg {
    width: 24px;
    height: 24px;
}

.ui-icon-wrap--xl {
    width: 32px;
    height: 32px;
}

.ui-icon-wrap--2xl {
    width: 48px;
    height: 48px;
}

/* ============================================================
   ICON + TEXT COMBINATIONS
   ============================================================ */
.ui-icon-container {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.ui-icon-text {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.ui-icon-text__label {
    line-height: 1;
}

/* Gap variants */
.ui-icon-text--gap-xs {
    gap: var(--space-1);
}

.ui-icon-text--gap-sm {
    gap: var(--space-1\.5);
}

.ui-icon-text--gap-md {
    gap: var(--space-2);
}

.ui-icon-text--gap-lg {
    gap: var(--space-3);
}

.ui-icon-text--gap-xl {
    gap: var(--space-4);
}

/* ============================================================
   ICON IN BUTTONS
   ============================================================ */
/* When icon is first child of a button */
button > .ui-icon:first-child,
.btn > .ui-icon:first-child {
    margin-right: var(--space-1\.5);
}

/* When icon is last child of a button */
button > .ui-icon:last-child,
.btn > .ui-icon:last-child {
    margin-left: var(--space-1\.5);
}

/* Icon-only button */
button.icon-only,
.btn.icon-only {
    padding: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button.icon-only > .ui-icon,
.btn.icon-only > .ui-icon {
    margin: 0;
}

/* ============================================================
   ICON IN LISTS & TABLES
   ============================================================ */
/* Table cell icons */
td .ui-icon,
.table td .ui-icon {
    vertical-align: middle;
    margin-right: var(--space-1\.5);
}

/* List item icons */
li .ui-icon,
.list-item .ui-icon {
    flex-shrink: 0;
}

/* ============================================================
   ICON WITH BADGE/DOT
   ============================================================ */
.ui-icon-badge {
    position: relative;
    display: inline-flex;
}

.ui-icon-badge .ui-icon {
    position: relative;
    z-index: 1;
}

.ui-icon-badge__dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-danger);
    border: 2px solid var(--bg-base);
    z-index: 2;
}

/* ============================================================
   ICON ANIMATIONS
   ============================================================ */
/* Spin animation for loaders */
.ui-icon--spin {
    animation: icon-spin 1s linear infinite;
}

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

/* Pulse animation */
.ui-icon--pulse {
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Bounce animation */
.ui-icon--bounce {
    animation: icon-bounce 1s ease infinite;
}

@keyframes icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ============================================================
   HOVER EFFECTS
   ============================================================ */
/* Interactive icon hover */
a .ui-icon,
button .ui-icon,
[role="button"] .ui-icon {
    transition: color var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease);
}

a:hover .ui-icon,
button:hover .ui-icon,
[role="button"]:hover .ui-icon {
    transform: scale(1.1);
}

/* Icon in nav items */
.nav-item .ui-icon,
.sidebar-item .ui-icon {
    transition: color var(--duration-fast) var(--ease);
}

/* ============================================================
   SIDEBAR ICONS
   ============================================================ */
.sidebar .ui-icon {
    width: 20px;
    height: 20px;
}

.sidebar-item .ui-icon {
    width: 20px;
    height: 20px;
    color: var(--sidebar-text);
    transition: color var(--duration-fast) var(--ease);
}

.sidebar-item:hover .ui-icon,
.sidebar-item.active .ui-icon {
    color: var(--sidebar-text-active);
}

/* ============================================================
   HEADER ICONS
   ============================================================ */
.header .ui-icon,
.navbar .ui-icon {
    color: var(--header-text);
}

/* ============================================================
   RESPONSIVE ICONS
   ============================================================ */
@media (max-width: 639px) {
    .ui-icon--responsive-sm {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 767px) {
    .ui-icon--responsive-md {
        width: 20px;
        height: 20px;
    }
}

/* ============================================================
   DARK MODE ADJUSTMENTS
   ============================================================ */
[data-theme="dark"] .ui-icon--color-muted {
    color: var(--text-muted);
}

[data-theme="dark"] .ui-icon-badge__dot {
    border-color: var(--bg-surface);
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .ui-icon--spin,
    .ui-icon--pulse,
    .ui-icon--bounce {
        animation: none;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ui-icon--spin,
    .ui-icon--pulse,
    .ui-icon--bounce {
        animation: none;
    }

    .ui-icon {
        transition: none;
    }

    a:hover .ui-icon,
    button:hover .ui-icon,
    [role="button"]:hover .ui-icon {
        transform: none;
    }
}