/*
 * VELO skin for the 6amMart admin theme.
 * Loaded after the theme files: brand colours (VELO primary gradient
 * #C322C7 -> #8353EE), the sidebar, header and sign-in pages, and the few
 * components the VELO views add. Everything else comes from the theme.
 */
:root {
    --velo-primary: #c322c7;
    --velo-secondary: #8353ee;
    --velo-gradient: linear-gradient(135deg, #c322c7 0%, #8353ee 100%);
    --velo-ink: #1d1433;
    --velo-text: #4d4664;
    --velo-muted: #7e7797;
    --velo-line: #ebe8f3;
    --velo-body-bg: #f6f5fb;
    --velo-sidebar-bg: #150b2b;
    --velo-sidebar-bg-2: #1f1240;
    --velo-sidebar-text: #d8cef0;
    --velo-sidebar-muted: #8b80b1;
    --velo-focus: rgba(131, 83, 238, 0.28);

    /* 6amMart theme variables */
    --primary-clr: #8353ee;
    --primary: #8353ee;
    --title-clr: #1d1433;
    --dark-clr: #150b2b;
    --base-clr: #c322c7;
    --base-clr-2: #f3c9f4;
}

/* ---------- Base ---------- */
body {
    background-color: var(--velo-body-bg);
    color: var(--velo-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-header-title,
.card-title,
.card-header-title {
    color: var(--velo-ink);
}

a {
    color: var(--velo-secondary);
}

a:hover {
    color: var(--velo-primary);
}

code,
pre,
kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

code {
    color: #9c1ca0;
    background-color: rgba(195, 34, 199, 0.07);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.78rem;
    word-break: break-all;
}

/* VELO copy is written in sentence case; the theme capitalises every word. */
.btn,
a[class*="btn--"],
button[class*="btn--"],
.card-title,
.form-label,
.toggle-switch,
.badge,
.empty--data h5,
.navbar .nav-link .text-truncate,
code {
    text-transform: none;
}

.text-velo {
    color: var(--velo-secondary) !important;
}

.bg-velo-gradient {
    background-image: var(--velo-gradient) !important;
}

.sr-only-focusable:focus {
    background: #fff;
    padding: 0.5rem 1rem;
    z-index: 200;
}

/* ---------- Brand ---------- */
.velo-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none !important;
    min-width: 0;
}

.velo-brand-mark {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    background-image: var(--velo-gradient);
    color: #fff;
    font-family: "Outfit", "Inter", sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(195, 34, 199, 0.35);
}

.velo-brand-text {
    font-family: "Outfit", "Inter", sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 0.06em;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.velo-brand-text span {
    font-family: "Outfit", "Inter", sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-inline-start: 0.3rem;
    color: var(--velo-sidebar-muted);
}

.velo-brand--light .velo-brand-text {
    color: var(--velo-ink);
}

.velo-brand--light .velo-brand-text span {
    color: var(--velo-muted);
}

/* ---------- Sidebar ---------- */
.navbar-vertical-aside.velo-aside {
    background-color: var(--velo-sidebar-bg);
    background-image: linear-gradient(180deg, var(--velo-sidebar-bg) 0%, var(--velo-sidebar-bg-2) 100%);
    border: 0;
    box-shadow: 4px 0 24px rgba(21, 11, 43, 0.12);
}

.velo-aside .navbar-vertical-container {
    height: 100%;
}

.velo-aside .navbar-brand-wrapper {
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-inline-start: 1.25rem;
    padding-inline-end: 1rem;
    justify-content: space-between;
}

.velo-aside .navbar-brand {
    padding: 0;
    margin: 0;
}

.velo-aside .navbar-vertical-content {
    background: transparent;
    padding: 1rem 0 2rem;
}

.velo-aside .navbar-vertical-content::-webkit-scrollbar-thumb {
    background-color: rgba(216, 206, 240, 0.25);
}

.velo-aside .nav-subtitle {
    color: var(--velo-sidebar-muted);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    padding: 0 1.75rem;
    margin-bottom: 0.25rem;
}

.velo-aside .nav-subtitle-replacer {
    color: var(--velo-sidebar-muted);
}

.velo-aside .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    color: var(--velo-sidebar-text) !important;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 2.5rem;
}

.velo-aside .navbar-nav .nav-link .nav-icon {
    color: var(--velo-sidebar-muted);
    font-size: 1.15rem;
    min-width: 1.75rem;
    opacity: 1;
    transition: color 0.2s ease;
}

.velo-aside .navbar-nav .nav-link .text-truncate {
    color: var(--velo-sidebar-text);
}

.velo-aside .navbar-nav .nav-link:hover .text-truncate,
.velo-aside .navbar-nav .nav-link:hover .nav-icon,
.velo-aside .navbar-nav .nav-link:focus-visible .text-truncate,
.velo-aside .navbar-nav .nav-link:focus-visible .nav-icon {
    color: #fff !important;
}

.velo-aside .navbar-nav .nav-link:focus-visible {
    outline: 2px solid rgba(243, 201, 244, 0.6);
    outline-offset: -2px;
    border-radius: 8px;
}

.velo-aside .navbar-nav.nav-tabs .active > .nav-link,
.velo-aside .navbar-nav.nav-tabs .active.nav-link {
    border-inline-start-color: transparent;
}

.velo-aside .navbar-nav.nav-tabs .active > .nav-link::before {
    inset: 0 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(195, 34, 199, 0.28) 0%, rgba(131, 83, 238, 0.28) 100%);
    box-shadow: inset 0 0 0 1px rgba(243, 201, 244, 0.12);
}

.velo-aside .navbar-nav.nav-tabs .active > .nav-link .text-truncate {
    color: #fff !important;
}

.velo-aside .navbar-nav.nav-tabs .active > .nav-link i {
    color: #f3a6f5 !important;
}

.velo-aside .navbar-nav.nav-tabs .active > .nav-link > * {
    position: relative;
}

/* Collapse (desktop) and close (mobile) buttons */
.velo-aside-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--velo-sidebar-text);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.velo-aside-toggle:hover,
.velo-aside-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    outline: none;
}

.velo-aside-toggle .tio-last-page,
.navbar-vertical-aside-mini-mode .velo-aside-toggle .tio-first-page {
    display: none;
}

.navbar-vertical-aside-mini-mode .velo-aside-toggle .tio-last-page {
    display: inline-block;
}

@media (max-width: 1199.98px) {
    .velo-aside-collapse {
        display: none !important;
    }

    body.velo-aside-open .navbar-vertical-aside.velo-aside {
        margin-inline-start: 0;
    }

    body.velo-aside-open .velo-aside-overlay {
        display: block;
    }
}

@media (min-width: 1200px) {
    .velo-aside-close {
        display: none !important;
    }
}

.velo-aside-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;
    background-color: rgba(21, 11, 43, 0.45);
}

/* Mini mode (desktop): icons only */
.navbar-vertical-aside-mini-mode .velo-aside .navbar-brand-wrapper {
    padding-inline-start: 0;
    padding-inline-end: 0;
}

.navbar-vertical-aside-mini-mode .velo-aside .navbar-nav .nav-link {
    justify-content: center;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}

.navbar-vertical-aside-mini-mode .velo-aside .navbar-nav .nav-link .nav-icon {
    min-width: 0;
}

.navbar-vertical-aside-mini-mode .velo-aside .nav-subtitle-replacer {
    text-align: center;
}

/* ---------- Header ---------- */
#header.velo-header {
    background-color: #fff;
    border-color: var(--velo-line);
    box-shadow: 0 2px 12px rgba(29, 20, 51, 0.04);
    padding-inline-start: 1.25rem;
    padding-inline-end: 1.25rem;
}

.velo-header .navbar-nav-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0.75rem;
}

.velo-header-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--velo-line);
    border-radius: 0.6rem;
    background: #fff;
    color: var(--velo-ink);
    font-size: 1.25rem;
    cursor: pointer;
}

.velo-header-open:hover,
.velo-header-open:focus-visible {
    border-color: rgba(131, 83, 238, 0.5);
    color: var(--velo-secondary);
    outline: none;
}

.velo-breadcrumb {
    font-size: 0.8125rem;
    color: var(--velo-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.velo-breadcrumb strong {
    color: var(--velo-ink);
    font-weight: 600;
}

.velo-account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-inline-start: auto;
    min-width: 0;
}

.velo-avatar {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-image: var(--velo-gradient);
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.velo-account-text {
    min-width: 0;
    line-height: 1.25;
}

.velo-account-name {
    display: block;
    color: var(--velo-ink);
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

.velo-account-roles {
    display: block;
    color: var(--velo-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

.velo-signout-form {
    margin: 0;
}

.velo-signout {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.25rem;
    padding: 0 0.85rem;
    border: 1px solid var(--velo-line);
    border-radius: 0.6rem;
    background: #fff;
    color: var(--velo-text);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.velo-signout:hover,
.velo-signout:focus-visible {
    border-color: rgba(195, 34, 199, 0.5);
    color: var(--velo-primary);
    outline: none;
}

.velo-signout i {
    font-size: 1rem;
}

@media (max-width: 575.98px) {
    #header.velo-header {
        padding-inline-start: 1rem;
        padding-inline-end: 1rem;
    }

    .velo-signout {
        width: 2.25rem;
        padding: 0;
        justify-content: center;
    }
}

/* ---------- Content ---------- */
.main .content {
    padding-top: 1.5rem;
}

.page-header {
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 0;
}

.page-header-title {
    font-size: 1.375rem;
    font-weight: 600;
    text-transform: none;
}

.page-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background-image: var(--velo-gradient);
    color: #fff;
    flex: 0 0 auto;
}

.page-header-title .page-header-icon i {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1;
}

.page-header-text {
    color: var(--velo-muted);
    margin-top: 0.35rem;
    margin-bottom: 0;
}

.card {
    border-color: var(--velo-line);
    border-radius: 0.75rem;
    box-shadow: 0 6px 18px rgba(29, 20, 51, 0.05);
}

.card-header {
    border-bottom-color: var(--velo-line);
}

.card-footer {
    background-color: #fcfbfe;
    border-top-color: var(--velo-line);
}

.card-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
}

.card-header-title i {
    color: var(--velo-secondary);
    font-size: 1.2rem;
}

/* ---------- Buttons ---------- */
.velo-filter .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2.8125rem;
}

.btn--primary,
.btn-primary {
    background-color: var(--velo-secondary);
    background-image: var(--velo-gradient);
    border: 0 !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 6px 14px rgba(131, 83, 238, 0.25) !important;
}

.btn--primary:hover,
.btn-primary:hover {
    color: #fff !important;
    filter: brightness(1.07);
}

.btn--primary:focus,
.btn-primary:focus,
.btn--primary:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--velo-focus) !important;
}

.btn-outline-velo {
    color: var(--velo-secondary);
    border: 1px solid rgba(131, 83, 238, 0.45);
    background: #fff;
    font-weight: 500;
}

.btn-outline-velo:hover,
.btn-outline-velo:focus-visible {
    color: #fff;
    background-image: var(--velo-gradient);
    border-color: transparent;
}

.btn--container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ---------- Forms ---------- */
.form-control:focus,
.custom-select:focus {
    border-color: rgba(131, 83, 238, 0.6);
    box-shadow: 0 0 0 0.2rem var(--velo-focus);
}

.input-label,
.form-label {
    color: var(--velo-ink);
    font-weight: 500;
    font-size: 0.8125rem;
    margin-bottom: 0.4rem;
}

.form-text {
    color: var(--velo-muted);
    font-size: 0.75rem;
}

.toggle-switch-input:checked + .toggle-switch-label {
    background-color: var(--velo-secondary);
    background-image: var(--velo-gradient);
}

.toggle-switch-input:focus-visible + .toggle-switch-label {
    box-shadow: 0 0 0 0.2rem var(--velo-focus);
}

/* One setting row with a switch (settings page) */
.velo-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
    min-height: 3.5rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--velo-line);
    border-radius: 0.6rem;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.velo-switch:hover {
    border-color: rgba(131, 83, 238, 0.4);
}

.velo-switch-text {
    min-width: 0;
}

.velo-switch-title {
    display: block;
    color: var(--velo-ink);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.35;
}

.velo-switch .toggle-switch-label {
    flex: 0 0 auto;
}

.velo-field-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.badge-soft-velo {
    color: var(--velo-secondary);
    background-color: rgba(131, 83, 238, 0.1);
}

/* ---------- Alerts and toasts ---------- */
.velo-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    border-radius: 0.6rem;
    font-size: 0.875rem;
}

.velo-alert > i {
    font-size: 1.1rem;
    line-height: 1.3;
}

.velo-alert ul {
    margin: 0;
    padding-inline-start: 1.1rem;
}

#toast-container.toast-top-right {
    top: 4.5rem;
    right: 1rem;
}

#toast-container > .toast-success {
    background-color: #1f9d6b;
}

#toast-container > div {
    opacity: 0.97;
    border-radius: 0.6rem;
    box-shadow: 0 10px 30px rgba(29, 20, 51, 0.18);
}

/* ---------- Tables ---------- */
.velo-table thead th {
    background-color: #f8f7fc;
    color: var(--velo-ink);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--velo-line) !important;
    white-space: nowrap;
}

.velo-table td {
    vertical-align: top;
    font-size: 0.8125rem;
    border-color: var(--velo-line);
}

.velo-table .velo-json {
    margin: 0;
    max-width: 22rem;
    min-width: 10rem;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.75rem;
    color: var(--velo-text);
    background: #faf9fd;
    border: 1px solid var(--velo-line);
    border-radius: 0.4rem;
    padding: 0.35rem 0.5rem;
}

.page-area {
    padding: 0.75rem 1.25rem;
}

.page-area .pagination {
    margin: 0;
    flex-wrap: wrap;
}

.page-item.active .page-link {
    background-image: var(--velo-gradient);
    background-color: var(--velo-secondary);
    border-color: transparent;
    color: #fff;
}

.page-link {
    color: var(--velo-secondary);
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem var(--velo-focus);
}

.empty--data {
    text-align: center;
    padding: 2.5rem 1rem;
}

.empty--data img {
    width: 7rem;
    margin-bottom: 1rem;
}

/* ---------- Dashboard ---------- */
.velo-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.25rem;
}

.velo-stat-icon {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--velo-secondary);
    background-color: rgba(131, 83, 238, 0.1);
}

.velo-stat-label {
    display: block;
    color: var(--velo-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.velo-stat-value {
    display: block;
    color: var(--velo-ink);
    font-weight: 600;
    font-size: 1rem;
    margin-top: 0.15rem;
}

/* User-written words in any script (content filter terms): Arabic and Urdu
   fall back to a system font with readable Arabic letters. */
.velo-script-text {
    font-family: "Inter", "Geeza Pro", "Noto Naskh Arabic", Tahoma, sans-serif;
    font-size: 1.35em;
    line-height: 1.3;
}

/* An empty table section on detail pages, without the large illustration. */
.velo-none {
    margin: 0;
    padding: 1rem 1.5rem;
    color: var(--velo-muted);
    font-size: 0.875rem;
}

/* Dashboard numbers. */
.velo-stat-value--lg {
    font-size: 1.5rem;
    line-height: 1.2;
}

.velo-link-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    color: var(--velo-text);
    text-decoration: none !important;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.velo-link-card:hover,
.velo-link-card:focus-visible {
    border-color: rgba(131, 83, 238, 0.45);
    transform: translateY(-1px);
    color: var(--velo-text);
}

.velo-link-card .tio-chevron-right {
    margin-inline-start: auto;
    color: var(--velo-muted);
    font-size: 1.25rem;
}

.velo-welcome {
    position: relative;
    overflow: hidden;
    color: #fff;
    background-color: var(--velo-sidebar-bg);
    background-image:
        radial-gradient(circle at 85% 20%, rgba(195, 34, 199, 0.55) 0, rgba(195, 34, 199, 0) 45%),
        radial-gradient(circle at 60% 120%, rgba(131, 83, 238, 0.6) 0, rgba(131, 83, 238, 0) 50%);
    border: 0;
}

.velo-welcome .card-body {
    padding: 1.75rem;
}

.velo-welcome h2 {
    color: #fff;
    font-family: "Outfit", "Inter", sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 0.35rem;
}

.velo-welcome p {
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    max-width: 40rem;
}

/* ---------- Footer ---------- */
.footer.velo-footer {
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    border-top: 1px solid var(--velo-line);
    background: #fff;
    font-size: 0.8125rem;
    color: var(--velo-muted);
}

.velo-footer p,
.velo-footer ul {
    white-space: nowrap;
}

.velo-footer > div {
    gap: 1rem;
}

@media (max-width: 575.98px) {
    .footer.velo-footer {
        padding: 0 1rem;
        font-size: 0.75rem;
    }

    .footer.velo-footer .list-separator {
        width: auto;
    }

    .footer.velo-footer .list-inline-item:last-child {
        display: inline-block;
        margin: 0;
    }
}

.velo-footer .list-separator-link {
    color: var(--velo-muted);
}

.velo-footer .list-separator-link:hover {
    color: var(--velo-secondary);
}

/* ---------- Sign-in pages ---------- */
.auth-wrapper * {
    font-family: "Inter", sans-serif;
}

.auth-wrapper .velo-brand-text,
.auth-wrapper .velo-brand-text span,
.auth-wrapper .velo-brand-mark,
.auth-wrapper .auth-left-cont .title {
    font-family: "Outfit", "Inter", sans-serif;
}

.auth-wrapper code,
.auth-wrapper .velo-secret {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.auth-wrapper-left.velo-auth-panel {
    background-color: var(--velo-sidebar-bg);
    background-image:
        radial-gradient(circle at 18% 22%, rgba(195, 34, 199, 0.55) 0, rgba(195, 34, 199, 0) 42%),
        radial-gradient(circle at 82% 78%, rgba(131, 83, 238, 0.65) 0, rgba(131, 83, 238, 0) 46%),
        linear-gradient(160deg, #150b2b 0%, #241449 100%);
}

.velo-auth-panel .auth-left-cont {
    margin: 0 auto;
    padding: 3rem;
    max-width: 34rem;
}

.velo-auth-panel .auth-left-cont .title {
    color: #fff;
    font-weight: 300;
    margin: 1.75rem 0 1rem;
}

.velo-auth-panel .auth-left-cont .title span {
    display: block;
}

.velo-auth-panel .auth-left-cont .title strong {
    background-image: linear-gradient(90deg, #f39cf5 0%, #b79bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.velo-auth-panel .velo-brand-mark {
    width: 3rem;
    height: 3rem;
    font-size: 1.6rem;
    border-radius: 0.9rem;
}

.velo-auth-panel .velo-brand-text {
    font-size: 1.75rem;
}

.velo-auth-panel .velo-auth-note {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    max-width: 26rem;
}

.auth-wrapper-right .auth-header .title {
    color: var(--velo-ink);
}

.auth-wrapper-right .auth-header {
    color: var(--velo-muted);
    font-weight: 400;
}

.auth-wrapper-right .btn--primary {
    background-color: var(--velo-secondary);
    background-image: var(--velo-gradient);
}

.auth-wrapper-right .form-control {
    border-radius: 0.6rem;
}

.velo-login-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--velo-secondary);
    background-color: rgba(131, 83, 238, 0.1);
    border-radius: 1rem;
    padding: 0.35rem 0.75rem;
}

.velo-auth-mobile-brand {
    margin-bottom: 1.75rem;
}

@media (min-width: 992px) {
    .velo-auth-mobile-brand {
        display: none;
    }
}

.velo-password {
    position: relative;
}

.velo-password .form-control {
    padding-inline-end: 3rem;
}

.velo-password-toggle {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    height: 100%;
    width: 3rem;
    border: 0;
    background: transparent;
    color: var(--velo-muted);
    font-size: 1.1rem;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.velo-js .velo-password-toggle {
    display: inline-flex;
}

.velo-password-toggle:hover,
.velo-password-toggle:focus-visible {
    color: var(--velo-secondary);
    outline: none;
}

.velo-qr {
    display: inline-block;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid var(--velo-line);
    border-radius: 0.9rem;
    box-shadow: 0 6px 18px rgba(29, 20, 51, 0.06);
    line-height: 0;
}

.velo-qr svg {
    width: 11rem;
    height: 11rem;
}

.velo-secret {
    display: inline-block;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    word-break: break-all;
}

.velo-steps {
    counter-reset: velo-step;
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
}

.velo-steps li {
    counter-increment: velo-step;
    position: relative;
    padding-inline-start: 2.1rem;
    margin-bottom: 0.6rem;
    font-size: 0.875rem;
    color: var(--velo-text);
}

.velo-steps li::before {
    content: counter(velo-step);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-image: var(--velo-gradient);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.velo-code-input {
    font-size: 1.25rem !important;
    letter-spacing: 0.4em;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}

.velo-code-input::placeholder {
    letter-spacing: 0.4em;
    color: #c9c3da;
}

/* ---------- Error pages (resources/views/errors) ---------- */
.velo-error-body {
    min-height: 100vh;
    background: #f6f4fb;
}

.velo-error {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
}

.velo-error-card {
    width: 100%;
    max-width: 30rem;
    text-align: center;
}

.velo-error-card .card-body {
    padding: 2.5rem 2rem;
}

.velo-error-code {
    margin: 0 0 0.5rem;
    font-family: "Outfit", "Inter", sans-serif;
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    background-image: var(--velo-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.velo-error-title {
    font-size: 1.35rem;
    color: var(--velo-ink);
    margin-bottom: 0.5rem;
}

.velo-error-text {
    color: var(--velo-muted);
    margin-bottom: 1.5rem;
}

/* Room log: keep event details readable instead of one word per line. */
.velo-log-details {
    min-width: 13rem;
    overflow-wrap: anywhere;
}

/* Confirmation dialog (partials/confirm). */
.velo-confirm-icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.6rem;
}