/* ═══════════════════════════════════════════════════════════
   Viziappz — Custom CSS on Bootstrap 5
   Minimal/clean design — topbar-only layout (no sidebar)
   ═══════════════════════════════════════════════════════════ */

/* ─── CSS VARIABLES ────────────────────────────────────────── */
:root {
    --vz-topbar-height: 56px;
    --vz-border-radius: 0.35rem;
    --vz-shadow: 0 1px 3px rgba(0,0,0,.08);
    --vz-shadow-lg: 0 4px 12px rgba(0,0,0,.1);
    --vz-font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vz-body-bg: #f4f6f9;
    --vz-primary: #4e73df;
    --vz-primary-dark: #3a5ec8;
}

/* ─── GLOBAL ───────────────────────────────────────────────── */
body {
    font-family: var(--vz-font-family);
    background-color: var(--vz-body-bg);
    color: #3a3b45;
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ─── PAGE LAYOUT (no sidebar) ─────────────────────────────── */
#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-x: hidden;
}

#content {
    flex: 1 0 auto;
}

/* ─── TOPBAR ───────────────────────────────────────────────── */
.topbar {
    height: var(--vz-topbar-height);
    z-index: 1020;
}

.topbar .navbar-brand {
    font-weight: 700;
    color: var(--vz-primary) !important;
    font-size: 1.1rem;
    white-space: nowrap;
}

.topbar .navbar-brand:hover {
    color: var(--vz-primary-dark) !important;
}

.topbar .nav-link {
    color: var(--vz-primary) !important;
    font-weight: 600;
}

.topbar .nav-link:hover {
    color: var(--vz-primary-dark) !important;
}

.topbar .navbar-search {
    width: 25rem;
}

.topbar .navbar-search .input-group {
    border-radius: var(--vz-border-radius);
    overflow: hidden;
}

.topbar-divider {
    width: 0;
    border-right: 1px solid #e3e6f0;
    height: calc(var(--vz-topbar-height) - 1.5rem);
    margin: auto 1rem;
}

/* User info in topbar */
.topbar .nav-item .nav-link .img-profile {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

/* ─── BADGE COUNTER ───────────────────────────────────────── */
.badge-counter {
    position: absolute;
    transform: scale(0.7);
    transform-origin: top right;
    right: 0.25rem;
    margin-top: -0.25rem;
}

/* ─── TCRUD TABLE HEADER (BS 5.3 fix) ─────────────────────────
   Bootstrap 5.3+ applies background-color via --bs-table-bg on
   every <th>/<td>, which covers bg-primary on <thead>.  Reset
   the table-bg variable so the thead background shows through. */
thead.bg-primary > tr > th,
thead.bg-primary > tr > th a {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    color: #fff !important;
}

/* ─── TCRUD ACTION BUTTONS ─────────────────────────────────── */
/* Keep action buttons in a single row — prevent wrapping */
td.text-nowrap .btn,
td .btn + .btn {
    display: inline-block;
    vertical-align: middle;
}

td.text-nowrap {
    white-space: nowrap !important;
}

/* ─── CARDS ────────────────────────────────────────────────── */
.card {
    border: none;
    border-radius: var(--vz-border-radius);
    box-shadow: var(--vz-shadow);
}

.card .card-header {
    background-color: #fff;
    border-bottom: 1px solid #edf0f5;
    font-weight: 600;
}

.card .card-header .card-title {
    margin-bottom: 0;
}

/* Card left border accent */
.border-left-primary { border-left: 4px solid var(--bs-primary) !important; }
.border-left-success { border-left: 4px solid var(--bs-success) !important; }
.border-left-warning { border-left: 4px solid var(--bs-warning) !important; }
.border-left-danger  { border-left: 4px solid var(--bs-danger) !important; }
.border-left-info    { border-left: 4px solid var(--bs-info) !important; }
.border-left-secondary { border-left: 4px solid var(--bs-secondary) !important; }
.border-left-light   { border-left: 4px solid #d1d3e2 !important; }
.border-left-dark    { border-left: 4px solid var(--bs-dark) !important; }

/* ─── TEXT GRAY UTILITIES ──────────────────────────────────── */
.text-gray-100 { color: #f8f9fc !important; }
.text-gray-200 { color: #eaecf4 !important; }
.text-gray-300 { color: #d1d3e2 !important; }
.text-gray-400 { color: #b7b9cc !important; }
.text-gray-500 { color: #a2a6b8 !important; }
.text-gray-600 { color: #858796 !important; }
.text-gray-700 { color: #6e707e !important; }
.text-gray-800 { color: #5a5c69 !important; }
.text-gray-900 { color: #3a3b45 !important; }

/* ─── GRADIENT BACKGROUNDS ─────────────────────────────────── */
.bg-gradient-primary   { background: linear-gradient(135deg, #4e73df 0%, #3a5ec8 100%) !important; }
.bg-gradient-secondary { background: linear-gradient(135deg, #858796 0%, #6c6e7e 100%) !important; }
.bg-gradient-success   { background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%) !important; }
.bg-gradient-info      { background: linear-gradient(135deg, #36b9cc 0%, #2a96a5 100%) !important; }
.bg-gradient-warning   { background: linear-gradient(135deg, #f6c23e 0%, #dda20a 100%) !important; }
.bg-gradient-danger    { background: linear-gradient(135deg, #e74a3b 0%, #c0392b 100%) !important; }
.bg-gradient-light     { background: linear-gradient(135deg, #f8f9fc 0%, #eaecf4 100%) !important; }
.bg-gradient-dark      { background: linear-gradient(135deg, #5a5c69 0%, #3a3b45 100%) !important; }

/* ─── TEXT SIZE UTILITY ────────────────────────────────────── */
.text-xs {
    font-size: .7rem;
}

/* ─── ICON CIRCLE ──────────────────────────────────────────── */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    color: #fff;
}

/* ─── ANIMATIONS ───────────────────────────────────────────── */
.animated--grow-in {
    animation: growIn 0.2s ease-out;
}

@keyframes growIn {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.animated--fade-in {
    animation: fadeIn 0.15s ease-in;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* ─── DROPDOWN LIST (alerts/messages) ──────────────────────── */
.dropdown-list {
    padding: 0;
    border: none;
    overflow: hidden;
    box-shadow: var(--vz-shadow-lg);
}

.dropdown-list .dropdown-header {
    background-color: var(--bs-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.75rem 1rem;
    border: none;
}

.dropdown-list .dropdown-item {
    white-space: normal;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #edf0f5;
    line-height: 1.3;
}

.dropdown-list .dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-list-image {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.status-indicator {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

/* ─── SCROLL TO TOP BUTTON ─────────────────────────────────── */
.scroll-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1040;
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(0,0,0,.4);
    color: #fff;
    text-align: center;
    line-height: 2.5rem;
    transition: background-color 0.2s;
}

.scroll-to-top:hover {
    background-color: rgba(0,0,0,.6);
    color: #fff;
}

.scroll-to-top i {
    font-size: 0.8rem;
}

/* ─── STICKY FOOTER ────────────────────────────────────────── */
.sticky-footer {
    flex-shrink: 0;
    padding: 1rem 0;
    border-top: 1px solid #edf0f5;
}

/* ─── LOGIN / AUTH PAGES ───────────────────────────────────── */
.o-hidden { overflow: hidden !important; }