﻿/* wwwroot/css/site.min.css */
:root {
    --vh: 1vh
}

html, body {
    height: 100%
}

.page {
    min-height: 100%;
    display: flex;
    flex-direction: column
}

.page-wrapper {
    flex: 1 0 auto
}

.navbar .navbar-brand {
    font-weight: 600
}

.navbar .nav-link {
    font-weight: 500
}

.theme-toggle svg {
    transition: transform .2s,opacity .2s,color .2s;
    opacity: .85
}

.theme-toggle:hover svg {
    opacity: 1;
    transform: scale(1.1);
    color: #f5c542
}

html[data-bs-theme="dark"] .theme-toggle #icon-sun {
    color: #f5c542
}

html[data-bs-theme="light"] .theme-toggle #icon-moon {
    color: #4a5568
}

.footer {
    padding: 2rem 0;
    border-top: 1px solid rgba(0,0,0,.05)
}

html[data-bs-theme="dark"] .footer {
    border-top-color: rgba(255,255,255,.08)
}

.card .display-6 {
    line-height: 1.1
}

.list-unstyled li {
    margin: .25rem 0
}

.btn-outline-primary {
    --tblr-btn-hover-bg: transparent
}

.table-nowrap td, .table-nowrap th {
    white-space: nowrap
}

.badge-soft {
    background-color: rgba(13,110,253,.08);
    color: #0d6efd;
    border: 1px solid rgba(13,110,253,.15)
}

.badge-soft-success {
    background-color: rgba(25,135,84,.08);
    color: #198754;
    border: 1px solid rgba(25,135,84,.15)
}

.badge-soft-danger {
    background-color: rgba(220,53,69,.08);
    color: #dc3545;
    border: 1px solid rgba(220,53,69,.15)
}

.form-control::placeholder {
    opacity: .7
}

.form-check-input:focus {
    box-shadow: none
}

.alert {
    margin-bottom: 1rem
}

.navbar .btn {
    vertical-align: middle
}

.navbar .btn-outline-primary {
    --tblr-btn-hover-bg: transparent
}

.dropdown-menu .dropdown-header {
    font-size: .75rem;
    color: var(--tblr-secondary)
}
/* pricing cards */
.pricing .card {
    transition: transform .15s ease,box-shadow .15s ease
}

    .pricing .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,.08)
    }

.pricing .price {
    font-weight: 700
}

.pricing .unit {
    font-size: .875rem;
    color: var(--tblr-secondary)
}
/* featured grid gaps */
.row.row-cards > .col, .row.g-3 > .col, .row.g-3 > [class^="col-"] {
    display: flex
}

    .row.row-cards > .col > .card, .row.g-3 > [class^="col-"] > .card {
        width: 100%
    }
/* admin table tweaks */
.card-table th {
    font-weight: 600
}

.card-table td, .card-table th {
    vertical-align: middle
}

.table thead th {
    border-bottom: 1px solid rgba(0,0,0,.06)
}

html[data-bs-theme="dark"] .table thead th {
    border-bottom-color: rgba(255,255,255,.08)
}
/* avatar initials */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#6ea8fe,#b197fc);
    color: #fff;
    font-weight: 700
}
/* utilities */
.text-muted-70 {
    color: rgba(108,117,125,.7) !important
}

.opacity-70 {
    opacity: .7
}

.rounded-2xl {
    border-radius: 1rem
}
/* header spacing small screens */
@media (max-width:767.98px) {
    .navbar .nav-link {
        padding: .5rem .75rem
    }
}



/* Notifications bell + badge theme-safe */
.vril-notify-toggle {
    color: rgba(255, 255, 255, .92); /* icon uses currentColor */
}

    .vril-notify-toggle svg {
        display: block;
    }

/* Default badge colors (works on your purple header) */
.vril-notify-badge {
    background: rgba(20, 20, 24, .85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* If you’re using Bootstrap 5.3 theme switching via data-bs-theme */
html[data-bs-theme="light"] .vril-notify-badge {
    background: rgba(0, 0, 0, .55); /* keep dark pill so white text is always readable */
    color: #fff;
    border-color: rgba(0, 0, 0, .12);
}

html[data-bs-theme="dark"] .vril-notify-badge {
    background: rgba(0, 0, 0, .55);
    color: #fff;
    border-color: rgba(255, 255, 255, .16);
}
