@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #4F46E5;
}

:root,
[data-bs-theme=light] {
    --status-padding-y: 0.12rem;
    --status-padding-x: 0.4rem;
    --status-font-size: 0.75rem;
    --status-font-weight: 500;
    --status-border-radius: 0.375rem;
    --status-border-width: 1px;
    /* Light mode colors */
    --status-delivered-bg: #D1FAE5;
    --status-delivered-text: #065F46;
    --status-delivered-border: rgba(16, 185, 129, 0.4);

    --status-pending-bg: #FEF3C7;
    --status-pending-text: #92400E;
    --status-pending-border: rgba(202, 138, 4, 0.4);

    --status-return-bg: #FECACA;
    --status-return-text: #B91C1C;
    --status-return-border: rgba(239, 68, 68, 0.4);

    --status-in-progress-bg: #DBEAFE;
    --status-in-progress-text: #1E3A8A;
    --status-in-progress-border: rgba(59, 130, 246, 0.4);

    --status-archived-bg: #f3f4f6;
    --status-archived-text: #6b7280;
    --status-archived-border: #d1d5db;
}

[data-bs-theme="dark"] {
    --status-delivered-bg: rgba(16, 185, 129, 0.2);
    --status-delivered-text: #A7F3D0;
    --status-delivered-border: rgba(16, 185, 129, 0.6);

    --status-pending-bg: rgba(202, 138, 4, 0.2);
    --status-pending-text: #FCD34D;
    --status-pending-border: rgba(202, 138, 4, 0.6);

    --status-return-bg: rgba(239, 68, 68, 0.2);
    --status-return-text: #FCA5A5;
    --status-return-border: rgba(239, 68, 68, 0.6);

    --status-in-progress-bg: rgba(59, 130, 246, 0.2);
    --status-in-progress-text: #93C5FD;
    --status-in-progress-border: rgba(59, 130, 246, 0.8);

    --status-archived-bg: #374151;
    --status-archived-text: #d1d5db;
    --status-archived-border: #4b5563;
}

.status {
    display: inline-flex;
    align-items: center;
    padding: var(--status-padding-y) var(--status-padding-x);
    font-size: var(--status-font-size);
    font-weight: var(--status-font-weight);
    border-radius: var(--status-border-radius);
    border: var(--status-border-width) solid;
    border-style: inset;
}

    .status.delivered {
        background-color: var(--status-delivered-bg);
        color: var(--status-delivered-text);
        border-color: var(--status-delivered-border);
    }

    .status.pending {
        background-color: var(--status-pending-bg);
        color: var(--status-pending-text);
        border-color: var(--status-pending-border);
    }

    .status.return {
        background-color: var(--status-return-bg);
        color: var(--status-return-text);
        border-color: var(--status-return-border);
    }

    .status.inProgress {
        background-color: var(--status-in-progress-bg);
        color: var(--status-in-progress-text);
        border-color: var(--status-in-progress-border);
    }

    .status.archived {
        background-color: var(--status-archived-bg);
        color: var(--status-archived-text);
        border-color: var(--status-archived-border);
    }


#loadingSpinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1060;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-border {
    width: 4rem;
    height: 4rem;
}