/* Icon Button Styles - Generic classes for all icon buttons */

/* Base icon button style */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* View button (eye icon) - Primary color hover */
.view-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.view-icon-btn:hover {
    background-color: #f3f4f6 !important;
}

/* Edit button (edit icon) - Secondary color hover */
.edit-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.edit-icon-btn:hover {
    background-color: #f3f4f6 !important;
}

/* Delete button (trash icon) */
.delete-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.delete-icon-btn:hover {
    background-color: #fef2f2 !important; /* red-50 */
}

/* Power button - Active state (green hover) */
.power-icon-btn-active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.power-icon-btn-active:hover {
    background-color: #f0fdf4 !important; /* green-50 */
}

/* Power button - Inactive state (gray hover) */
.power-icon-btn-inactive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.power-icon-btn-inactive:hover {
    background-color: #f3f4f6 !important; /* gray-100 */
}

/* Icon image inside buttons - Standard 18x18px */
.icon-btn img,
.view-icon-btn img,
.edit-icon-btn img,
.delete-icon-btn img,
.power-icon-btn-active img,
.power-icon-btn-inactive img {
    width: 18px;
    height: 18px;
    display: block;
}

/* Filter colors for icons */
.icon-primary {
    filter: brightness(0) saturate(100%) invert(40%) sepia(18%) saturate(1084%) hue-rotate(260deg) brightness(92%) contrast(85%);
}

.icon-secondary {
    filter: brightness(0) saturate(100%) invert(56%) sepia(28%) saturate(1249%) hue-rotate(326deg) brightness(93%) contrast(88%);
}

.icon-green {
    filter: brightness(0) saturate(100%) invert(68%) sepia(53%) saturate(434%) hue-rotate(94deg) brightness(96%) contrast(86%);
}

.icon-gray {
    filter: brightness(0) saturate(100%) invert(72%) sepia(1%) saturate(767%) hue-rotate(183deg) brightness(89%) contrast(84%);
}

.icon-red {
    filter: brightness(0) saturate(100%) invert(27%) sepia(93%) saturate(7471%) hue-rotate(4deg) brightness(97%) contrast(118%);
}