/* ==========================================
   ICON STYLES
   Site-wide icon sizing classes
   ========================================== */

/* ===== Navigation Icons ===== */
.nav-icon {
    position: relative;
    transition: color 0.3s ease;
    cursor: pointer;
}

.nav-icon:hover {
    transform: scale(1.1);
}

.nav-icon:hover svg {
    color: var(--branding-gold);
    transition: color 0.3s ease;
}

.icon-svg {
    width: 20px;
    height: 20px;
}

/* ===== Dashboard Icons ===== */
.icon-close {
    height: 22px;
    width: 22px;
}

.icon-out {
    height: 22px;
    width: 22px;
}

.icon-in {
    height: 22px;
    width: 22px;
}

.icon-package {
    height: 60px;
    width: 60px;
}

.icon-search {
    height: 20px;
    width: 20px;
}

.icon-filter {
    height: 20px;
    width: 20px;
}

.icon-sort {
    height: 20px;
    width: 20px;
}

.icon-open {
    height: 20px;
    width: 20px;
}

.icon-status {
    height: 22px;
    width: 22px;
    transition: color 0.2s ease;
}

.icon-open-order-table {
    width: 22px;
    height: 22px;
}

.icon-edit-pen {
    height: 20px;
    width: 20px;
}

/* ===== User Role Icons ===== */
.icon-user-all {
    height: 22px;
    width: 22px;
    transition: color 0.2s ease;
}

.icon-user-client {
    height: 22px;
    width: 22px;
    color: var(--client);
    transition: color 0.2s ease;
}

.icon-user-manager {
    height: 22px;
    width: 22px;
    color: var(--manager);
    transition: color 0.2s ease;
}

.icon-user-operations {
    height: 22px;
    width: 22px;
    color: var(--operations);
    transition: color 0.2s ease;
}

/* ===== Status Icons ===== */
.status-icon {
    width: 22px;
    transition: color 0.2s ease;
}

.status-icon-pending { color: var(--pending); }
.status-icon-quoted { color: var(--quoted); }
.status-icon-accepted { color: var(--accepted); }
.status-icon-rejected { color: var(--rejected); }
.status-icon-in-progress { color: var(--in-progress); }
.status-icon-cancelled { color: var(--cancelled); }
.status-icon-completed { color: var(--completed); }
.status-icon-all-orders { color: var(--dark); }
.status-icon-new { color: var(--new); }
.status-icon-waiting { color: var(--waiting); }
.status-icon-closed { color: var(--closed); }

/* ===== Menu Page Icons ===== */
.menu-icon {
    width: 24px;
    height: 24px;
}

#icon-info {
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

#icon-cart {
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.custom-cart-icon {
    stroke: var(--light);
    fill: none;
    stroke-width: 1.5;
}

.custom-cart-icon:hover {
    stroke: var(--dark);
}

/* ===== Navbar Unread Dot ===== */
.nav-unread-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--branding-gold);
    border: 2px solid var(--bg, #fff);
    animation: nav-dot-pulse 2s infinite;
    pointer-events: none;
}

@keyframes nav-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.8); opacity: 0.65; }
}