/* ========================================
   GLOBAL
======================================== */

body {
    font-family: var(--coffee-font-family);

    color: var(--coffee-text);

    background-color: var(--coffee-background);
}

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

.btn-coffee {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--coffee-primary);
    --bs-btn-border-color: var(--coffee-primary);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--coffee-primary-hover);
    --bs-btn-hover-border-color: var(--coffee-primary-hover);

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--coffee-primary-active);
    --bs-btn-active-border-color: var(--coffee-primary-active);

    --bs-btn-focus-shadow-rgb: 90, 59, 43;

    border-radius: var(--coffee-radius-sm);

    font-weight: 600;

    transition:
        background-color var(--coffee-transition-fast),
        border-color var(--coffee-transition-fast),
        transform var(--coffee-transition-fast);
}

.btn-coffee:hover {
    transform: translateY(-1px);
}

/* Secondary button */

.btn-coffee-light {
    --bs-btn-color: var(--coffee-primary);
    --bs-btn-bg: var(--coffee-soft);
    --bs-btn-border-color: var(--coffee-soft);

    --bs-btn-hover-color: var(--coffee-primary);
    --bs-btn-hover-bg: var(--coffee-soft-hover);
    --bs-btn-hover-border-color: var(--coffee-soft-hover);

    border-radius: var(--coffee-radius-sm);

    font-weight: 600;
}

/* ========================================
   CARD
======================================== */

.card {
    border-radius: var(--coffee-radius-md);
}

.card-coffee {
    background: var(--coffee-surface);

    border: 1px solid var(--coffee-border);

    border-radius: var(--coffee-radius-md);

    box-shadow: var(--coffee-shadow-sm);

    transition:
        box-shadow var(--coffee-transition),
        transform var(--coffee-transition);
}

.card-coffee:hover {
    box-shadow: var(--coffee-shadow-md);
}

/* ========================================
   FORM
======================================== */

.form-control,
.form-select {
    border-color: var(--coffee-border);

    border-radius: var(--coffee-radius-sm);

    color: var(--coffee-text);

    background-color: #ffffff;

    transition:
        border-color var(--coffee-transition-fast),
        box-shadow var(--coffee-transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--coffee-primary);

    box-shadow: 0 0 0 0.2rem rgba(90, 59, 43, 0.12);
}

.form-label {
    color: var(--coffee-text);

    font-size: var(--coffee-font-size-sm);

    font-weight: 600;

    margin-bottom: 0.5rem;
}

/* ========================================
   BADGE
======================================== */

.badge {
    font-weight: 600;

    border-radius: 999px;

    padding: 0.45em 0.75em;
}

/* Coffee */

.bg-coffee-soft {
    background-color: var(--coffee-soft) !important;

    color: var(--coffee-primary) !important;
}

/* Success */

.badge-success-soft {
    background-color: var(--coffee-success-soft);

    color: var(--coffee-success);
}

/* Danger */

.badge-danger-soft {
    background-color: var(--coffee-danger-soft);

    color: var(--coffee-danger);
}

/* Warning */

.badge-warning-soft {
    background-color: var(--coffee-warning-soft);

    color: var(--coffee-warning);
}

/* Info */

.badge-info-soft {
    background-color: var(--coffee-info-soft);

    color: var(--coffee-info);
}

/* ========================================
   AVATAR
======================================== */

.user-avatar {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background-color: var(--coffee-soft);

    color: var(--coffee-primary);

    font-size: 0.875rem;

    font-weight: 700;

    text-transform: uppercase;
}

.user-avatar-lg {
    width: 64px;
    height: 64px;

    flex-basis: 64px;

    font-size: 1.25rem;
}

/* ========================================
   DROPDOWN
======================================== */

.dropdown-menu {
    border: 1px solid var(--coffee-border);

    border-radius: var(--coffee-radius-md);

    box-shadow: var(--coffee-shadow-md);

    padding: 0.4rem;
}

.dropdown-item {
    border-radius: var(--coffee-radius-sm);

    padding: 0.55rem 0.75rem;

    color: var(--coffee-text);

    font-size: var(--coffee-font-size-sm);
}

.dropdown-item:hover {
    background-color: var(--coffee-soft);

    color: var(--coffee-primary);
}

.dropdown-item:active {
    background-color: var(--coffee-primary);

    color: #ffffff;
}

/* ========================================
   TABLE
======================================== */

.table {
    color: var(--coffee-text);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--coffee-border);
}

.table thead th {
    background-color: #faf8f6;

    color: var(--coffee-muted);

    font-size: var(--coffee-font-size-xs);

    font-weight: 700;

    letter-spacing: 0.025em;

    text-transform: uppercase;

    white-space: nowrap;
}

.table tbody tr {
    transition: background-color var(--coffee-transition-fast);
}

.table tbody tr:hover {
    background-color: #fcfaf8;
}

/* ========================================
   ALERT
======================================== */

.alert {
    border-radius: var(--coffee-radius-md);
}

/* ========================================
   EMPTY STATE
======================================== */

.empty-state {
    padding: 3rem 1.5rem;

    text-align: center;

    color: var(--coffee-muted);
}

.empty-state-icon {
    width: 56px;
    height: 56px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 1rem;

    border-radius: 50%;

    background-color: var(--coffee-soft);

    color: var(--coffee-primary);

    font-size: 1.4rem;
}

/* ========================================
   PAGINATION
======================================== */

.pagination {
    margin-bottom: 0;
}

.page-link {
    color: var(--coffee-primary);

    border-color: var(--coffee-border);

    border-radius: var(--coffee-radius-sm) !important;

    margin: 0 2px;
}

.page-link:hover {
    color: var(--coffee-primary);

    background-color: var(--coffee-soft);

    border-color: var(--coffee-soft);
}

.page-item.active .page-link {
    color: #ffffff;

    background-color: var(--coffee-primary);

    border-color: var(--coffee-primary);
}

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

.btn-icon {
    width: 36px;
    height: 36px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border-radius: var(--coffee-radius-sm);
}

/* ========================================
   TEXT
======================================== */

.text-coffee {
    color: var(--coffee-primary) !important;
}

.text-muted {
    color: var(--coffee-muted) !important;
}

/* =========================================================
   CONFIRMATION MODAL
========================================================= */

.confirmation-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 1rem;
}

.confirmation-modal.is-open {
    display: flex;
}

/* =========================================================
   BACKDROP
========================================================= */

.confirmation-modal-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(20, 18, 16, 0.55);

    backdrop-filter: blur(3px);

    -webkit-backdrop-filter: blur(3px);
}

/* =========================================================
   DIALOG
========================================================= */

.confirmation-modal-dialog {
    position: relative;

    width: 100%;

    max-width: 420px;

    padding: 1.5rem;

    background: #ffffff;

    border: 1px solid var(--coffee-border);

    border-radius: 1rem;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);

    animation: confirmationModalShow 0.18s ease-out;
}

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

.confirmation-modal-icon {
    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 1rem;

    border-radius: 50%;

    background: var(--coffee-soft);

    color: var(--coffee-primary);

    font-size: 1.25rem;
}

/* =========================================================
   CONTENT
========================================================= */

.confirmation-modal-title {
    margin: 0 0 0.45rem;

    color: var(--coffee-text);

    font-size: 1.05rem;

    font-weight: 700;
}

.confirmation-modal-message {
    margin: 0;

    color: var(--coffee-muted);

    font-size: 0.9rem;

    line-height: 1.6;
}

/* =========================================================
   ACTIONS
========================================================= */

.confirmation-modal-actions {
    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 0.65rem;

    margin-top: 1.5rem;
}

.confirmation-modal-actions .btn {
    min-width: 100px;
}

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

.confirmation-modal.is-danger .confirmation-modal-icon {
    background: var(--coffee-danger-soft);

    color: var(--coffee-danger);
}

.confirmation-modal.is-danger .confirmation-modal-submit {
    background: var(--coffee-danger);

    border-color: var(--coffee-danger);

    color: #ffffff;
}

.confirmation-modal.is-danger .confirmation-modal-submit:hover {
    opacity: 0.9;
}

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

.confirmation-modal.is-warning .confirmation-modal-icon {
    background: #fff7e6;

    color: #b7791f;
}

.confirmation-modal.is-warning .confirmation-modal-submit {
    background: #b7791f;

    border-color: #b7791f;

    color: #ffffff;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes confirmationModalShow {
    from {
        opacity: 0;

        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;

        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {
    .confirmation-modal {
        padding: 0.75rem;
    }

    .confirmation-modal-dialog {
        padding: 1.25rem;

        border-radius: 0.85rem;
    }

    .confirmation-modal-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }

    .confirmation-modal-actions .btn {
        width: 100%;
    }
}