/* Vishnumukham – mobile app warm theme */
:root {
    --vm-header-bg: #5C3D2E;
    --vm-nav-bg: #6B4A3A;
    --vm-body-bg: #F8F3EC;
    --vm-card-bg: #FFFFFF;
    --vm-brand: #C0392B;
    --vm-brand-hover: #A93226;
    --vm-section-strip: #2c5d53;
    --vm-text: #3d3d3d;
    --vm-text-muted: #6b5b4f;
    --vm-border: #e8e0d5;
    --vm-input-bg: #FFFEF9;
    --vm-btn-nav: #7D8B5A;
    --vm-btn-nav-hover: #6B7A4A;
    --vm-shadow: 0 2px 12px rgba(92, 61, 46, 0.08);
    --vm-shadow-card: 0 4px 16px rgba(92, 61, 46, 0.12);
}

body {
    background: var(--vm-body-bg);
    color: var(--vm-text);
    min-height: 100vh;
}

/* Navbar – dark brown header like mobile app */
.navbar-vm {
    background: var(--vm-header-bg) !important;
    border-bottom: none;
    box-shadow: var(--vm-shadow);
}
.navbar-vm .navbar-brand {
    color: #fff !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.navbar-vm .navbar-logo {
    height: 36px;
    width: auto;
    display: block;
}
.navbar-vm .btn-outline-light {
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}
.navbar-vm .btn-outline-light:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.6);
    color: #fff;
}
.navbar-vm .btn-nav-pill {
    background: var(--vm-btn-nav);
    border: 1px solid rgba(0,0,0,0.15);
    color: #fff;
    border-radius: 2rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.875rem;
}
.navbar-vm .btn-nav-pill:hover {
    background: var(--vm-btn-nav-hover);
    color: #fff;
    border-color: rgba(0,0,0,0.2);
}
.navbar-vm .btn-outline-secondary {
    border-color: rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.9);
}
.navbar-vm .btn-outline-secondary:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

/* Cards – white with shadow and rounded corners */
.card-vm {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border);
    border-radius: 12px;
    box-shadow: var(--vm-shadow-card);
}
.card-vm .card-header {
    background: var(--vm-section-strip);
    color: #fff;
    border-color: var(--vm-section-strip);
    border-radius: 12px 12px 0 0;
    font-weight: 600;
}

/* Table wrap – card style */
.table-wrap-vm {
    background: var(--vm-card-bg);
    border-radius: 12px;
    border: 1px solid var(--vm-border);
    overflow: hidden;
    box-shadow: var(--vm-shadow-card);
}
.table-vm {
    color: var(--vm-text);
    margin: 0;
}
.table-vm thead th {
    background: var(--vm-section-strip);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
    font-weight: 600;
    padding: 0.85rem 1rem;
}
.table-vm tbody td {
    border-color: var(--vm-border);
    vertical-align: middle;
    padding: 0.75rem 1rem;
}
.table-vm tbody tr:hover {
    background: #faf8f5;
}
.table-vm tbody tr:nth-of-type(even) {
    background: #fdfcf9;
}
.table-vm tbody tr:nth-of-type(even):hover {
    background: #faf8f5;
}

/* Primary actions – maroon like app title */
.btn-add, .btn-save, .btn-login {
    background: var(--vm-brand);
    border: none;
    color: #fff;
    font-weight: 600;
}
.btn-add:hover, .btn-save:hover, .btn-login:hover {
    background: var(--vm-brand-hover);
    color: #fff;
}
.btn-edit, .btn-delete {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.btn-outline-primary {
    border-color: #3498db;
    color: #2980b9;
}
.btn-outline-primary:hover {
    background: #ebf5fb;
    border-color: #2980b9;
    color: #2980b9;
}

/* Forms */
.form-control, .form-select {
    background: var(--vm-input-bg);
    border: 1px solid var(--vm-border);
    color: var(--vm-text);
}
.form-control:focus, .form-select:focus {
    background: var(--vm-input-bg);
    border-color: var(--vm-brand);
    color: var(--vm-text);
    box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.2);
}
.form-label {
    color: var(--vm-text-muted);
    font-weight: 500;
}

/* Login page */
.body-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--vm-body-bg);
}
.login-card-vm {
    max-width: 900px;
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border);
    border-radius: 16px;
    box-shadow: var(--vm-shadow-card);
}
.logo-wrap {
    padding: 1rem 0 0;
    text-align: center;
}
.logo-wrap img {
    max-height: 64px;
    width: auto;
}
.brand-name {
    color: var(--vm-brand);
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 0.5rem;
}
.page-title-vm {
    color: var(--vm-text);
    font-weight: 600;
}

/* Modals */
.modal-content {
    background: var(--vm-card-bg);
    border: 1px solid var(--vm-border);
    color: var(--vm-text);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(92, 61, 46, 0.2);
}
.modal-header {
    border-color: var(--vm-border);
    background: #faf8f5;
    border-radius: 12px 12px 0 0;
}
.modal-footer {
    border-color: var(--vm-border);
}
.btn-close {
    filter: none;
    opacity: 0.7;
}

/* Alerts and empty states */
.alert {
    border-radius: 10px;
}
.text-muted-vm {
    color: var(--vm-text-muted);
}
.table-vm .text-muted-vm a {
    color: var(--vm-brand);
    font-weight: 500;
}

.fes-img {
    max-width: 60px;
    max-height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--vm-border);
}

/* Cancel / secondary buttons on light background */
.btn-outline-secondary {
    border-color: #c9bfb0;
    color: var(--vm-text-muted);
}
.btn-outline-secondary:hover {
    background: #f0ebe3;
    border-color: #a89885;
    color: var(--vm-text);
}
.navbar-vm .btn-outline-secondary {
    border-color: rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.9);
}
.navbar-vm .btn-outline-secondary:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}