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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:14px 24px;

    border:none;
    border-radius:16px;

    cursor:pointer;
    text-decoration:none;

    font-size:15px;
    font-weight:600;

    transition:.25s ease;
}

/* ===========================
PRIMARY
=========================== */

.btn-primary{

    background:var(--primary);
    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(51,102,255,.25);

}

/* ===========================
SUCCESS
=========================== */

.btn-success{

    background:var(--success);
    color:#fff;

}

.btn-success:hover{

    filter:brightness(.92);
    transform:translateY(-2px);

}

/* ===========================
WARNING
=========================== */

.btn-warning{

    background:var(--warning);
    color:#fff;

}

.btn-warning:hover{

    filter:brightness(.92);

}

/* ===========================
DANGER
=========================== */

.btn-danger{

    background:var(--danger);
    color:#fff;

}

.btn-danger:hover{

    filter:brightness(.92);

}

/* ===========================
SECONDARY
=========================== */

.btn-secondary{

    background:#94a3b8;
    color:#fff;

}

.btn-secondary:hover{

    background:#64748b;

}

/* ===========================
OUTLINE
=========================== */

.btn-outline{

    background:#fff;
    color:var(--primary);

    border:2px solid var(--primary);

}

.btn-outline:hover{

    background:var(--primary);
    color:#fff;

}

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

.btn-icon{

    width:42px;
    height:42px;

    padding:0;

    border-radius:12px;

}

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

.btn-sm{

    padding:10px 16px;
    font-size:13px;

}

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

.btn-lg{

    padding:16px 30px;
    font-size:16px;

}

/* ===========================
FULL WIDTH
=========================== */

.btn-block{

    width:100%;

}

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

.btn-group{

    display:flex;
    gap:12px;
    flex-wrap:wrap;

    margin-top:25px;

}

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

@media(max-width:768px){

    .btn{

        width:100%;

    }

    .btn-group{

        flex-direction:column;

    }

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:130px;

    height:42px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

}
.aksi-group{

    display:flex;

    flex-direction:column;

    gap:8px;

    align-items:center;

}
.aksi-group{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:nowrap;

}
.aksi-group{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.aksi-group form{
    display:inline-flex;
    margin:0;
}

.form-inline{
    display:flex;
    margin:0;
}

.aksi-group{
    display:flex;
    gap:10px;
    justify-content:center;
    align-items:center;
}

/* ==========================================
   MODERN ACTION BUTTONS (for tables)
========================================== */

.action-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.btn-action i {
    font-size: 14px;
    line-height: 1;
}

.btn-action:hover {
    transform: translateY(-2px);
}

.btn-action-edit {
    background: #2563eb;
}

.btn-action-edit:hover {
    background: #1d4ed8;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}

.btn-action-delete {
    background: #ef4444;
}

.btn-action-delete:hover {
    background: #dc2626;
    box-shadow: 0 10px 18px rgba(239, 68, 68, 0.20);
}

.btn-action-detail {
    background: #64748b;
}

.btn-action-detail:hover {
    background: #475569;
    box-shadow: 0 10px 18px rgba(100, 116, 139, 0.18);
}

.btn-action-download {
    background: #10b981;
}

.btn-action-download:hover {
    background: #059669;
    box-shadow: 0 10px 18px rgba(16, 185, 129, 0.18);
}

.btn-action-print {
    background: #f59e0b;
}

.btn-action-print:hover {
    background: #d97706;
    box-shadow: 0 10px 18px rgba(245, 158, 11, 0.18);
}

.btn-action-restore {
    background: #10b981;
}

.btn-action-restore:hover {
    background: #059669;
    box-shadow: 0 10px 18px rgba(16, 185, 129, 0.18);
}

.btn-action-disposisi {
    background: #8b5cf6;
}

.btn-action-disposisi:hover {
    background: #7c3aed;
    box-shadow: 0 10px 18px rgba(139, 92, 246, 0.18);
}

/* For text-labeled action buttons */
.btn-action-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.btn-action-text i {
    font-size: 13px;
    line-height: 1;
}

.btn-action-text:hover {
    transform: translateY(-2px);
}

.btn-action-text.btn-action-edit {
    background: #2563eb;
}

.btn-action-text.btn-action-edit:hover {
    background: #1d4ed8;
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.18);
}

.btn-action-text.btn-action-delete {
    background: #ef4444;
}

.btn-action-text.btn-action-delete:hover {
    background: #dc2626;
    box-shadow: 0 10px 18px rgba(239, 68, 68, 0.20);
}

.btn-action-text.btn-action-detail {
    background: #64748b;
}

.btn-action-text.btn-action-detail:hover {
    background: #475569;
    box-shadow: 0 10px 18px rgba(100, 116, 139, 0.18);
}

.btn-action-text.btn-action-restore {
    background: #10b981;
}

.btn-action-text.btn-action-restore:hover {
    background: #059669;
    box-shadow: 0 10px 18px rgba(16, 185, 129, 0.18);
}

.btn-action-text.btn-action-print {
    background: #f59e0b;
}

.btn-action-text.btn-action-print:hover {
    background: #d97706;
    box-shadow: 0 10px 18px rgba(245, 158, 11, 0.18);
}

.btn-action-text.btn-action-disposisi {
    background: #8b5cf6;
}

.btn-action-text.btn-action-disposisi:hover {
    background: #7c3aed;
    box-shadow: 0 10px 18px rgba(139, 92, 246, 0.18);
}