/* =========================================
   IAM ICON ERP FIXED VERSION
========================================= */

.iam-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: currentColor; 
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ================= BUTTON ================= */

.iam-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid gray;
    background: transparent;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s;
}

    .iam-btn-icon:hover {
        background: rgba(0,0,0,0.05);
    }

    .iam-btn-icon .iam-icon {
        width: 24px;
        height: 24px;
    }

    .iam-btn-icon.icon-only {
        width: 36px;
        height: 36px;
        justify-content: center;
        padding: 0;
    }

    /* ================= STATUS BUTTON/ICON ================= */

    /* ---------- DANGER ---------- */
    .iam-btn-icon.danger {
        background-color: #e74c3c; /* merah */
        color: #ffffff; /* font putih */
        border-color: #c0392b; /* border gelap */
    }

        .iam-btn-icon.danger .iam-icon {
            background-color: #ffffff; /* icon putih */
        }

        .iam-btn-icon.danger:hover {
            background-color: #c0392b; /* hover lebih gelap */
        }

    /* ---------- SUCCESS ---------- */
    .iam-btn-icon.success {
        background-color: #27ae60; /* hijau */
        color: #ffffff; /* font putih */
        border-color: #1e8449;
    }

        .iam-btn-icon.success .iam-icon {
            background-color: #ffffff; /* icon putih */
        }

        .iam-btn-icon.success:hover {
            background-color: #1e8449;
        }

    /* ---------- WARNING ---------- */
    .iam-btn-icon.warning {
        background-color: #f39c12; /* oranye */
        color: #ffffff; /* font putih */
        border-color: #d68910;
    }

        .iam-btn-icon.warning .iam-icon {
            background-color: #ffffff; /* icon putih */
        }

        .iam-btn-icon.warning:hover {
            background-color: #d68910;
        }

    /* ---------- INFO ---------- */
    .iam-btn-icon.info {
        background-color: #3498db; /* biru */
        color: #ffffff; /* font putih */
        border-color: #2980b9;
    }

        .iam-btn-icon.info .iam-icon {
            background-color: #ffffff; /* icon putih */
        }

        .iam-btn-icon.info:hover {
            background-color: #2980b9;
        }
/* =========================================
   ICONS (ENCODED SVG)
========================================= */

/* ===== CORE ===== */
.icon-add {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.icon-edit {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M3 17l11-11 4 4-11 11H3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M3 17l11-11 4 4-11 11H3z'/%3E%3C/svg%3E");
}

.icon-delete {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M5 7h14M9 7v12M15 7v12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M5 7h14M9 7v12M15 7v12'/%3E%3C/svg%3E");
}

.icon-save {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M5 3h14v18H5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M5 3h14v18H5z'/%3E%3C/svg%3E");
}

.icon-search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' stroke='currentColor' stroke-width='2' fill='none'/%3E%3Cpath stroke='currentColor' stroke-width='2' d='M14 14l6 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' stroke='currentColor' stroke-width='2' fill='none'/%3E%3Cpath stroke='currentColor' stroke-width='2' d='M14 14l6 6'/%3E%3C/svg%3E");
}

.icon-refresh {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M4 12a8 8 0 111.5 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M4 12a8 8 0 111.5 4'/%3E%3C/svg%3E");
}

.icon-close {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M6 6l12 12M6 18L18 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M6 6l12 12M6 18L18 6'/%3E%3C/svg%3E");
}

.icon-check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
}

/* ===== EXPORT ===== */
.icon-download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M5 20h14v-2H5v2zm7-18v12l4-4h-3V2h-2v8H8l4 4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M5 20h14v-2H5v2zm7-18v12l4-4h-3V2h-2v8H8l4 4z'/%3E%3C/svg%3E");
}

/* ICON KEY */
.icon-key {    
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M15 7a4 4 0 1 0-4 4v1h-1v3h3v-1h1a4 4 0 0 0 1-7.874z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M15 7a4 4 0 1 0-4 4v1h-1v3h3v-1h1a4 4 0 0 0 1-7.874z'/%3E%3C/svg%3E");   
}

/* ICON KEY RESET */
.icon-key-reset {    
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M12 2v4m0 12v4m4-16l-4 4-4-4m0 12l4-4 4 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M12 2v4m0 12v4m4-16l-4 4-4-4m0 12l4-4 4 4'/%3E%3C/svg%3E");
}

/* ICON KEY BLOCK */
.icon-key-block {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M12 2a4 4 0 0 0-4 4v2h8V6a4 4 0 0 0-4-4zm0 10a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-width='2' d='M12 2a4 4 0 0 0-4 4v2h8V6a4 4 0 0 0-4-4zm0 10a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3C/svg%3E");
}