/* Base Styling */
:root {
    --app-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body {
    font-family: var(--app-font-family);
    -webkit-font-smoothing: antialiased;
}

.fs-xs {
    font-size: 0.75rem;
}

.fs-sm {
    font-size: 0.875rem;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

/* Brand */
.brand-icon {
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.25);
}

/* Metric Cards */
.metric-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    border-radius: 14px;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.metric-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

/* Table Styling */
.table thead th {
    font-weight: 600;
    letter-spacing: 0.04em;
    border-bottom-width: 1px;
}

.table tbody tr {
    transition: background-color 0.15s ease;
}

/* Avatars */
.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #0dcaf0);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.2);
}

.user-avatar-lg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6efd, #6610f2);
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Action Dropdown / Buttons */
.btn-action-group .btn {
    border-radius: 8px;
    padding: 0.28rem 0.6rem;
    font-size: 0.8rem;
}

/* Badges */
.badge-status {
    padding: 0.35rem 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.badge-status.active {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}

.badge-status.disabled {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

.badge-status.locked {
    background-color: #fff3cd;
    color: #664d03;
    border: 1px solid #ffecb5;
}

.badge-status.pending {
    background-color: #cff4fc;
    color: #055160;
    border: 1px solid #b6effb;
}

.badge-status.deleted {
    background-color: #e2e3e5;
    color: #41464b;
    border: 1px solid #d3d6d8;
}

/* Dark Mode Overrides for Status Badges */
[data-bs-theme="dark"] .badge-status.active {
    background-color: rgba(25, 135, 84, 0.2);
    color: #75b798;
    border-color: rgba(25, 135, 84, 0.35);
}

[data-bs-theme="dark"] .badge-status.disabled {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ea868f;
    border-color: rgba(220, 53, 69, 0.35);
}

[data-bs-theme="dark"] .badge-status.locked {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffda6a;
    border-color: rgba(255, 193, 7, 0.35);
}

[data-bs-theme="dark"] .badge-status.pending {
    background-color: rgba(13, 202, 240, 0.2);
    color: #6edff6;
    border-color: rgba(13, 202, 240, 0.35);
}

[data-bs-theme="dark"] .badge-status.deleted {
    background-color: rgba(108, 117, 125, 0.2);
    color: #adb5bd;
    border-color: rgba(108, 117, 125, 0.35);
}

/* Modals */
.modal-content {
    border-radius: 16px;
    overflow: hidden;
}

/* Smooth Focus */
.form-control:focus, .form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}