/* ============================================================
   Mission Mangalam — Bento UI
   Plain CSS (no build step) layered on top of Bootstrap 5 CDN.
============================================================ */
:root {
    --mm-bg: #f4f6fb;
    --mm-surface: #ffffff;
    --mm-ink: #1f2937;
    --mm-muted: #6b7280;
    --mm-primary: #4f46e5;
    --mm-primary-2: #7c3aed;
    --mm-accent: #06b6d4;
    --mm-green: #10b981;
    --mm-amber: #f59e0b;
    --mm-rose: #f43f5e;
    --mm-radius: 18px;
    --mm-shadow: 0 6px 24px rgba(17, 24, 39, .06);
    --mm-shadow-hover: 0 12px 32px rgba(79, 70, 229, .16);
}

body {
    font-family: "Noto Sans Gujarati", "Noto Sans Devanagari", "Inter", system-ui, sans-serif;
    background: var(--mm-bg);
    color: var(--mm-ink);
}

a { text-decoration: none; }

/* ---------- App shell ---------- */
.mm-navbar {
    background: linear-gradient(90deg, var(--mm-primary), var(--mm-primary-2));
    box-shadow: var(--mm-shadow);
}
.mm-navbar .navbar-brand,
.mm-navbar .nav-link,
.mm-navbar .dropdown-toggle { color: #fff !important; }
.mm-brand-logo {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(255, 255, 255, .2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; margin-right: .5rem;
}

.mm-sidebar {
    background: var(--mm-surface);
    border-right: 1px solid #eef0f6;
    min-height: calc(100vh - 60px);
    padding: 1rem .75rem;
}
/* Keep the sidebar a fixed 250px on desktop so wide pages (e.g. Data Entry)
   can't squeeze it. Ignored on mobile where the sidebar is an offcanvas. */
@media (min-width: 992px) {
    .mm-sidebar {
        flex: 0 0 250px;
        width: 250px;
    }
}
.mm-sidebar .nav-link {
    color: var(--mm-ink);
    border-radius: 12px;
    padding: .65rem .9rem;
    margin-bottom: .25rem;
    font-weight: 500;
    display: flex; align-items: center; gap: .6rem;
    transition: all .15s ease;
}
.mm-sidebar .nav-link:hover { background: #f1f0fe; color: var(--mm-primary); }
.mm-sidebar .nav-link.active {
    background: linear-gradient(90deg, var(--mm-primary), var(--mm-primary-2));
    color: #fff;
    box-shadow: var(--mm-shadow-hover);
}
/* min-width:0 lets this flex child shrink so wide tables scroll INSIDE
   their .table-responsive wrapper instead of overflowing the whole page. */
.mm-content { padding: 1.5rem; min-width: 0; flex: 1 1 auto; }

/* ---------- Bento grid ---------- */
.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}
.bento > * { min-width: 0; }
.b-3  { grid-column: span 3; }
.b-4  { grid-column: span 4; }
.b-6  { grid-column: span 6; }
.b-8  { grid-column: span 8; }
.b-12 { grid-column: span 12; }

.bento-card {
    background: var(--mm-surface);
    border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow);
    padding: 1.1rem 1.25rem;
    transition: transform .15s ease, box-shadow .15s ease;
    border: 1px solid #eef0f6;
}
.bento-card.hoverable:hover { transform: translateY(-3px); box-shadow: var(--mm-shadow-hover); }

/* stat tiles */
.stat-tile { display: flex; align-items: center; gap: 1rem; }
.stat-ic {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff; flex: 0 0 auto;
}
.stat-tile .stat-value { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.stat-tile .stat-label { color: var(--mm-muted); font-size: .85rem; margin-top: .25rem; }
.bg-grad-1 { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.bg-grad-2 { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.bg-grad-3 { background: linear-gradient(135deg, #10b981, #22c55e); }
.bg-grad-4 { background: linear-gradient(135deg, #f59e0b, #f97316); }
.bg-grad-5 { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.bg-grad-6 { background: linear-gradient(135deg, #8b5cf6, #6366f1); }

.bento-card h6.card-kicker {
    text-transform: uppercase; letter-spacing: .04em;
    font-size: .72rem; color: var(--mm-muted); font-weight: 600;
    margin-bottom: .9rem;
}

/* shortcut tiles */
.shortcut-tile {
    display: flex; flex-direction: column; gap: .35rem;
    color: var(--mm-ink); height: 100%;
}
.shortcut-tile .s-ic {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.shortcut-tile .s-title { font-weight: 600; }
.shortcut-tile .s-sub { color: var(--mm-muted); font-size: .8rem; }
.kbd {
    display: inline-block; min-width: 22px; text-align: center;
    padding: .1rem .4rem; border-radius: 6px;
    background: #eef0f6; border: 1px solid #dfe3ee;
    font-family: ui-monospace, monospace; font-size: .8rem; font-weight: 600;
}

/* tables / cards */
.table thead th { background: #f3f4fb; color: var(--mm-ink); border-bottom: 2px solid #e7e9f5; }
.page-title { font-weight: 700; color: var(--mm-ink); }

.btn-mm {
    background: linear-gradient(90deg, var(--mm-primary), var(--mm-primary-2));
    border: none; color: #fff; font-weight: 600;
}
.btn-mm:hover { color: #fff; filter: brightness(1.05); }

/* login */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(1200px 600px at 10% 10%, #ede9fe, transparent),
                radial-gradient(1200px 600px at 90% 90%, #cffafe, transparent), var(--mm-bg);
    padding: 1rem;
}
.login-card {
    width: 100%; max-width: 400px;
    background: var(--mm-surface); border-radius: 22px;
    box-shadow: 0 20px 60px rgba(79, 70, 229, .18);
    padding: 2rem;
}
.login-logo {
    width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 1rem;
    background: linear-gradient(135deg, var(--mm-primary), var(--mm-primary-2));
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.8rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .b-3 { grid-column: span 6; }
    .b-4 { grid-column: span 6; }
    .b-8 { grid-column: span 12; }
    .b-6 { grid-column: span 12; }
}
@media (max-width: 576px) {
    .b-3, .b-4, .b-6, .b-8, .b-12 { grid-column: span 12; }
    .mm-content { padding: 1rem; }
    .stat-tile .stat-value { font-size: 1.4rem; }
}