/* ============================================================
   Silvermist Bank — Design System Override
   Premium Banking UI built on Bootstrap 4 + Themesdesign base
   ============================================================ */

/* ------ Google Fonts ------ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

/* ------ Design Tokens ------ */
:root {
    --sm-primary: #0B1D3A;
    --sm-primary-light: #132E5B;
    --sm-primary-dark: #071326;
    --sm-accent: #B8860B;
    --sm-accent-light: #D4A843;
    --sm-accent-soft: rgba(184,134,11,0.1);
    --sm-success: #0D7C44;
    --sm-success-soft: rgba(13,124,68,0.1);
    --sm-danger: #C0392B;
    --sm-danger-soft: rgba(192,57,43,0.1);
    --sm-warning: #E67E22;
    --sm-info: #2980B9;
    --sm-bg: #F4F5F7;
    --sm-bg-card: #FFFFFF;
    --sm-text: #1A1D21;
    --sm-text-secondary: #5A6370;
    --sm-text-muted: #8B929A;
    --sm-border: #E2E5EA;
    --sm-border-light: #F0F1F3;
    --sm-shadow-sm: 0 1px 3px rgba(11,29,58,0.06);
    --sm-shadow: 0 2px 8px rgba(11,29,58,0.08);
    --sm-shadow-lg: 0 4px 20px rgba(11,29,58,0.1);
    --sm-shadow-card: 0 1px 4px rgba(11,29,58,0.06), 0 0 1px rgba(11,29,58,0.04);
    --sm-radius: 10px;
    --sm-radius-sm: 6px;
    --sm-radius-lg: 14px;
    --sm-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sm-font-heading: 'Playfair Display', Georgia, serif;
    --sm-transition: 0.2s ease;
}

/* ------ Base ------ */
body {
    font-family: var(--sm-font-body) !important;
    background-color: var(--sm-bg) !important;
    color: var(--sm-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

h1, h2, h3, .header-title {
    font-family: var(--sm-font-heading) !important;
    font-weight: 600;
    color: var(--sm-primary);
}

h4, h5, h6 {
    font-family: var(--sm-font-body) !important;
    font-weight: 600;
    color: var(--sm-text);
}

a {
    transition: color var(--sm-transition);
}

/* ------ Topbar / Header ------ */
#page-topbar {
    background: var(--sm-primary) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    height: 64px;
}

.navbar-header {
    height: 64px;
}

.navbar-brand-box {
    background: transparent !important;
    padding: 0 16px;
}

body[data-layout="horizontal"] .navbar-brand-box {
    width: auto !important;
}

.navbar-brand-box .logo img {
    border-radius: 6px !important;
    object-fit: cover;
}

.header-item {
    color: rgba(255,255,255,0.75) !important;
    transition: color var(--sm-transition);
}

.header-item:hover {
    color: #fff !important;
}

.header-profile-user {
    border: 2px solid rgba(255,255,255,0.2);
    transition: border-color var(--sm-transition);
}

.header-item:hover .header-profile-user {
    border-color: var(--sm-accent-light);
}

.noti-icon .badge {
    background: var(--sm-accent) !important;
    border: 2px solid var(--sm-primary);
}

.app-search .form-control {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border-radius: var(--sm-radius-sm);
}

.app-search .form-control::placeholder {
    color: rgba(255,255,255,0.45);
}

.app-search .form-control:focus {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.25) !important;
}

/* ------ Topnav (Horizontal Navigation) ------ */
.topnav {
    background: #fff !important;
    border-bottom: 1px solid var(--sm-border);
    box-shadow: var(--sm-shadow-sm);
}

.topnav-menu .nav-link {
    color: var(--sm-text-secondary) !important;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 14px 18px !important;
    transition: all var(--sm-transition);
    border-bottom: 2px solid transparent;
    letter-spacing: 0.01em;
}

.topnav-menu .nav-link:hover,
.topnav-menu .nav-link.active,
.topnav-menu .nav-item.active .nav-link {
    color: var(--sm-primary) !important;
    border-bottom-color: var(--sm-accent);
}

.topnav-menu .nav-link i {
    color: var(--sm-accent);
    font-size: 1.1rem;
    vertical-align: middle;
}

/* ------ Main Content ------ */
/* Vertical (admin) layout: keep content clear of the fixed 250px sidebar */
body[data-sidebar] .vertical-menu {
    top: 64px;
}

body[data-sidebar] .navbar-brand-box {
    width: 250px !important;
    text-align: center;
}

body[data-sidebar].vertical-collpsed .navbar-brand-box {
    width: 70px !important;
}

body[data-sidebar] .footer {
    position: relative;
    left: auto;
    right: auto;
    height: auto;
    margin-left: 250px;
}

body[data-sidebar].vertical-collpsed .footer {
    margin-left: 70px;
}

@media (max-width: 992px) {
    body[data-sidebar] .navbar-brand-box {
        width: auto !important;
    }
    body[data-sidebar] .footer {
        margin-left: 0;
    }
}

.page-content {
    padding: 24px 24px 60px;
}

/* ------ Page Title ------ */
.page-title-box {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sm-border-light);
    margin-bottom: 24px;
}

.page-title-box h4 {
    font-family: var(--sm-font-heading) !important;
    font-size: 1.5rem !important;
    font-weight: 600;
    color: var(--sm-primary);
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.breadcrumb-item {
    font-size: 0.8125rem;
    color: var(--sm-text-muted);
}

.breadcrumb-item.active {
    color: var(--sm-text-secondary);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--sm-text-muted);
}

/* ------ Cards ------ */
.card {
    border: 1px solid var(--sm-border) !important;
    border-radius: var(--sm-radius) !important;
    box-shadow: var(--sm-shadow-card) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--sm-shadow) !important;
}

.card-body {
    padding: 20px 24px;
}

.card .header-title,
.card h4.header-title {
    font-size: 1.125rem;
    color: var(--sm-primary);
    margin-bottom: 4px;
}

/* ------ Stat Cards ------ */
.card .media .avatar-xs {
    width: 42px;
    height: 42px;
}

.card .media .avatar-title {
    background: var(--sm-accent-soft) !important;
    color: var(--sm-accent) !important;
    font-size: 1.1rem;
}

.card .media-body h5.font-size-14 {
    font-size: 0.8125rem !important;
    font-weight: 500;
    color: var(--sm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card .media ~ h4 {
    font-size: 1.625rem !important;
    font-weight: 700;
    color: var(--sm-text);
    margin-top: 8px !important;
}

/* ------ Account Banner ------ */
.card.bg-primary {
    background: linear-gradient(135deg, var(--sm-primary) 0%, var(--sm-primary-light) 100%) !important;
    border: none !important;
    box-shadow: var(--sm-shadow-lg) !important;
}

.card.bg-primary .card-body {
    padding: 24px 28px;
}

.card.bg-primary h3 {
    font-family: var(--sm-font-body) !important;
    font-size: 1.375rem !important;
    letter-spacing: 0.02em;
}

.card.bg-primary h6.text-white-50 {
    font-size: 0.8125rem;
    opacity: 0.7;
}

.card.bg-primary .mdi-bank {
    font-size: 2.5rem !important;
    opacity: 0.3;
}

/* ------ Tables ------ */
.table {
    color: var(--sm-text);
}

.table thead th {
    background: var(--sm-bg);
    border-bottom: 2px solid var(--sm-border) !important;
    color: var(--sm-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    white-space: nowrap;
}

.table tbody td {
    padding: 14px 16px;
    border-color: var(--sm-border-light);
    vertical-align: middle;
    font-size: 0.875rem;
}

.table tbody tr {
    transition: background var(--sm-transition);
}

.table tbody tr:hover {
    background: rgba(11,29,58,0.015);
}

.table-centered td {
    vertical-align: middle;
}

/* Transaction row avatars */
.table .avatar-xs .avatar-title {
    font-weight: 600;
    font-size: 0.8125rem;
}

.bg-soft-primary {
    background: var(--sm-accent-soft) !important;
    color: var(--sm-accent) !important;
}

.text-primary {
    color: var(--sm-primary) !important;
}

/* ------ Buttons ------ */
.btn {
    font-family: var(--sm-font-body);
    font-weight: 500;
    border-radius: var(--sm-radius-sm);
    padding: 8px 20px;
    font-size: 0.875rem;
    transition: all var(--sm-transition);
    letter-spacing: 0.01em;
}

.btn-primary {
    background: var(--sm-primary) !important;
    border-color: var(--sm-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--sm-primary-light) !important;
    border-color: var(--sm-primary-light) !important;
    box-shadow: 0 4px 12px rgba(11,29,58,0.25) !important;
}

.btn-success {
    background: var(--sm-success) !important;
    border-color: var(--sm-success) !important;
}

.btn-success:hover,
.btn-success:focus {
    background: #0a6a3a !important;
    border-color: #0a6a3a !important;
    box-shadow: 0 4px 12px rgba(13,124,68,0.3) !important;
}

.btn-danger {
    background: var(--sm-danger) !important;
    border-color: var(--sm-danger) !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #a93226 !important;
    border-color: #a93226 !important;
}

.btn-secondary {
    background: #6c757d !important;
    border-color: #6c757d !important;
}

.btn-outline-primary {
    color: var(--sm-primary) !important;
    border-color: var(--sm-primary) !important;
}

.btn-outline-primary:hover {
    background: var(--sm-primary) !important;
    color: #fff !important;
}

/* ------ Forms ------ */
.form-control {
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-sm);
    padding: 10px 14px;
    font-size: 0.875rem;
    color: var(--sm-text);
    transition: border-color var(--sm-transition), box-shadow var(--sm-transition);
    background: #fff;
}

.form-control:focus {
    border-color: var(--sm-accent) !important;
    box-shadow: 0 0 0 3px var(--sm-accent-soft) !important;
}

.form-control::placeholder {
    color: var(--sm-text-muted);
}

.form-group label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sm-text-secondary);
    margin-bottom: 6px;
}

.custom-select {
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius-sm);
    padding: 10px 14px;
    font-size: 0.875rem;
    color: var(--sm-text);
}

.custom-select:focus {
    border-color: var(--sm-accent) !important;
    box-shadow: 0 0 0 3px var(--sm-accent-soft) !important;
}

/* ------ Badges ------ */
.badge-primary {
    background: var(--sm-primary) !important;
}

.badge-success {
    background: var(--sm-success) !important;
}

.badge-danger {
    background: var(--sm-danger) !important;
}

.badge-warning {
    background: var(--sm-warning) !important;
}

.badge-pill {
    font-weight: 500;
    padding: 4px 10px;
    font-size: 0.6875rem;
}

/* ------ Dropdowns ------ */
.dropdown-menu {
    border: 1px solid var(--sm-border);
    border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow-lg);
    padding: 8px 0;
    animation: dropdownFade 0.15s ease;
}

@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    padding: 8px 20px;
    font-size: 0.875rem;
    color: var(--sm-text-secondary);
    transition: all var(--sm-transition);
}

.dropdown-item:hover {
    background: var(--sm-bg);
    color: var(--sm-primary);
}

.dropdown-item i {
    color: var(--sm-text-muted);
}

.dropdown-item:hover i {
    color: var(--sm-accent);
}

/* ------ Transaction Type Indicators ------ */
.text-success {
    color: var(--sm-success) !important;
}

.text-danger {
    color: var(--sm-danger) !important;
}

.text-muted {
    color: var(--sm-text-muted) !important;
}

.mdi-checkbox-blank-circle.text-success {
    color: var(--sm-success) !important;
}

.mdi-checkbox-blank-circle.text-danger {
    color: var(--sm-danger) !important;
}

/* ------ Custom Checkbox ------ */
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--sm-primary);
    background-color: var(--sm-primary);
}

/* ------ Alerts / SweetAlert ------ */
.swal2-popup {
    border-radius: var(--sm-radius-lg) !important;
    font-family: var(--sm-font-body) !important;
}

.swal2-title {
    font-family: var(--sm-font-heading) !important;
    color: var(--sm-primary) !important;
}

.swal2-confirm {
    background: var(--sm-primary) !important;
    border-radius: var(--sm-radius-sm) !important;
}

/* ------ Modals ------ */
.modal-content {
    border: none;
    border-radius: var(--sm-radius-lg);
    box-shadow: var(--sm-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--sm-border-light);
    padding: 20px 24px;
}

.modal-header .modal-title {
    font-family: var(--sm-font-heading);
    font-weight: 600;
    color: var(--sm-primary);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    border-top: 1px solid var(--sm-border-light);
    padding: 16px 24px;
}

/* ------ Scrollbar ------ */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--sm-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--sm-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sm-text-muted);
}

/* ------ Footer ------ */
.sm-footer {
    background: var(--sm-primary);
    color: rgba(255,255,255,0.6);
    padding: 24px 0;
    font-size: 0.8125rem;
}

.sm-footer a {
    color: var(--sm-accent-light);
    text-decoration: none;
}

.sm-footer a:hover {
    color: #fff;
}

.sm-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.sm-footer .footer-links li a {
    color: rgba(255,255,255,0.5);
    transition: color var(--sm-transition);
}

.sm-footer .footer-links li a:hover {
    color: var(--sm-accent-light);
}

/* ------ Login / Auth Pages ------ */
.login-bg {
    background: linear-gradient(135deg, rgba(11,29,58,0.92) 0%, rgba(7,19,38,0.88) 100%),
                url("../images/login-bg.webp") no-repeat center center fixed !important;
    background-size: cover !important;
    min-height: 100vh;
}

.auth-card {
    background: #fff;
    border-radius: var(--sm-radius-lg);
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}

.auth-card .card-body {
    padding: 40px;
}

.auth-logo-section {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo-section img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.auth-logo-section .brand-name {
    font-family: var(--sm-font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--sm-primary);
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 4px;
}

.auth-logo-section .brand-tagline {
    font-size: 0.8125rem;
    color: var(--sm-text-muted);
    letter-spacing: 0.02em;
}

.auth-title {
    font-family: var(--sm-font-body) !important;
    font-size: 1rem !important;
    font-weight: 500;
    color: var(--sm-text-secondary);
    text-align: center;
    margin-bottom: 28px;
}

.auth-form .form-group {
    margin-bottom: 20px;
}

.auth-form .form-control {
    height: 46px;
    background: var(--sm-bg);
    border: 1px solid var(--sm-border);
}

.auth-form .form-control:focus {
    background: #fff;
}

.auth-form .btn-login {
    background: var(--sm-primary);
    border: none;
    height: 46px;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: var(--sm-radius-sm);
    letter-spacing: 0.02em;
    transition: all var(--sm-transition);
}

.auth-form .btn-login:hover {
    background: var(--sm-primary-light);
    box-shadow: 0 4px 16px rgba(11,29,58,0.3);
    transform: translateY(-1px);
}

.auth-footer-text {
    text-align: center;
    margin-top: 24px;
    color: rgba(255,255,255,0.5);
    font-size: 0.8125rem;
}

.auth-footer-text a {
    color: var(--sm-accent-light);
}

/* ------ Responsive ------ */
@media (max-width: 991.98px) {
    .topnav-menu .nav-link {
        padding: 10px 16px !important;
        border-bottom: none;
    }

    .topnav-menu .nav-link:hover,
    .topnav-menu .nav-link.active {
        background: var(--sm-bg);
        border-radius: var(--sm-radius-sm);
    }

    .page-content {
        padding: 20px 16px 60px;
    }

    .card-body {
        padding: 16px 20px;
    }
}

@media (max-width: 767.98px) {
    .page-title-box h4 {
        font-size: 1.25rem !important;
    }

    .card .media ~ h4 {
        font-size: 1.375rem !important;
    }

    .auth-card .card-body {
        padding: 28px 24px;
    }

    .sm-footer .footer-links {
        justify-content: center;
    }
}

/* ------ Utility Classes ------ */
.sm-text-accent {
    color: var(--sm-accent);
}

.sm-bg-accent-soft {
    background: var(--sm-accent-soft);
}

.sm-border-bottom {
    border-bottom: 1px solid var(--sm-border);
}

/* ------ Hide Right Sidebar (template leftover) ------ */
.right-bar,
.rightbar-overlay,
.right-bar-toggle {
    display: none !important;
}

/* ------ Hide non-functional template elements ------ */
.home-btn {
    display: none !important;
}

/* ------ Notification dropdown cleanup ------ */
.notification-item .media {
    padding: 10px 4px;
}

.notification-item:hover {
    background: var(--sm-bg);
}

/* ------ Progress bars ------ */
.progress {
    border-radius: 4px;
    background: var(--sm-border-light);
}

.progress-bar {
    border-radius: 4px;
}

/* ------ Pagination ------ */
.page-link {
    border-color: var(--sm-border);
    color: var(--sm-text-secondary);
}

.page-item.active .page-link {
    background-color: var(--sm-primary);
    border-color: var(--sm-primary);
}

/* ------ Wave effect override ------ */
.waves-effect .waves-ripple {
    background: rgba(184,134,11,0.15);
}

/* ------ Sidebar (Admin) ------ */
body[data-sidebar="dark"] .vertical-menu {
    background: var(--sm-primary) !important;
}

body[data-sidebar="dark"] .vertical-menu .metismenu > li > a {
    color: rgba(255,255,255,0.65);
}

body[data-sidebar="dark"] .vertical-menu .metismenu > li.mm-active > a,
body[data-sidebar="dark"] .vertical-menu .metismenu > li > a:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}

body[data-sidebar="dark"] .vertical-menu .metismenu > li.mm-active > a i,
body[data-sidebar="dark"] .vertical-menu .metismenu > li > a:hover i {
    color: var(--sm-accent-light);
}

/* ------ Empty state ------ */
.sm-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--sm-text-muted);
}

.sm-empty-state i {
    font-size: 3rem;
    color: var(--sm-border);
    margin-bottom: 16px;
    display: block;
}

.sm-empty-state p {
    font-size: 0.9375rem;
    max-width: 320px;
    margin: 0 auto;
}

/* ------ Animation ------ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sm-fade-in {
    animation: fadeInUp 0.4s ease forwards;
}

.sm-fade-in-delay-1 { animation-delay: 0.05s; }
.sm-fade-in-delay-2 { animation-delay: 0.1s; }
.sm-fade-in-delay-3 { animation-delay: 0.15s; }
.sm-fade-in-delay-4 { animation-delay: 0.2s; }

/* ------ Admin Sidebar Styles ------ */
.vertical-menu {
    border-right: 1px solid rgba(255,255,255,0.06);
}

body[data-sidebar="dark"] .vertical-menu {
    background: var(--sm-primary) !important;
}

body[data-sidebar="dark"] #sidebar-menu ul li a {
    color: rgba(255,255,255,0.6);
    font-size: 0.875rem;
    padding: 10px 20px;
    transition: all var(--sm-transition);
}

body[data-sidebar="dark"] #sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a {
    color: #fff;
    background: rgba(255,255,255,0.06);
}

body[data-sidebar="dark"] #sidebar-menu ul li a i {
    color: rgba(255,255,255,0.4);
    min-width: 1.75rem;
    font-size: 1.125rem;
    transition: color var(--sm-transition);
}

body[data-sidebar="dark"] #sidebar-menu ul li a:hover i,
body[data-sidebar="dark"] #sidebar-menu ul li.mm-active > a i {
    color: var(--sm-accent-light);
}

body[data-sidebar="dark"] .navbar-brand-box {
    background: rgba(0,0,0,0.15) !important;
}

/* Admin sidebar menu title */
body[data-sidebar="dark"] #sidebar-menu .menu-title {
    color: rgba(255,255,255,0.3);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 16px 20px 8px;
}

/* ------ Admin Stats Cards ------ */
.mini-stats-wid .card-body {
    padding: 20px 24px;
}

/* ------ Status Badges ------ */
.badge-soft-success {
    background: var(--sm-success-soft);
    color: var(--sm-success);
}

.badge-soft-danger {
    background: var(--sm-danger-soft);
    color: var(--sm-danger);
}

.badge-soft-warning {
    background: rgba(230,126,34,0.1);
    color: var(--sm-warning);
}

.badge-soft-info {
    background: rgba(41,128,185,0.1);
    color: var(--sm-info);
}

/* ------ Admin Manage Accounts Table ------ */
.table .badge {
    font-size: 0.75rem;
    padding: 5px 12px;
    font-weight: 500;
    border-radius: 20px;
}

/* ------ FAQs Accordion ------ */
.accordion .card {
    border: 1px solid var(--sm-border) !important;
    margin-bottom: 8px;
}

.accordion .card-header {
    background: var(--sm-bg);
    padding: 14px 20px;
}

.accordion .card-header h5 a {
    color: var(--sm-text);
    font-family: var(--sm-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}

.accordion .card-header h5 a:hover {
    color: var(--sm-primary);
}

.accordion .card-body {
    font-size: 0.875rem;
    color: var(--sm-text-secondary);
    line-height: 1.7;
}

/* ------ Profile Page ------ */
.profile-card .card-body {
    text-align: center;
    padding: 32px;
}

.profile-card .avatar-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--sm-border);
    object-fit: cover;
}

/* ------ Feedback Form ------ */
.feedback-card textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

/* ------ Inbox / Messages ------ */
.message-list .message-item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--sm-border-light);
    transition: background var(--sm-transition);
}

.message-list .message-item:hover {
    background: var(--sm-bg);
}

/* ------ Focus states for accessibility ------ */
.btn:focus,
.form-control:focus,
.custom-select:focus,
.nav-link:focus {
    outline: none;
}

.btn:focus-visible,
.form-control:focus-visible,
.custom-select:focus-visible {
    box-shadow: 0 0 0 3px var(--sm-accent-soft) !important;
}

a:focus-visible {
    outline: 2px solid var(--sm-accent);
    outline-offset: 2px;
}

/* ------ Print styles ------ */
@media print {
    .topnav, #page-topbar, .sm-footer, .btn {
        display: none !important;
    }
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}