/* ================================================================
   mint-theme.css  –  MintPortal Custom Theme
   Primary colour: #1F3C78  (navy blue)
   ================================================================ */

/* ── CSS Variables ────────────────────────────────────────── */
:root {
    --mint-primary:    #1F3C78;
    --mint-primary-dk: #162c5a;
    --mint-primary-lt: #EBF4FF;
    --mint-success:    #1a7f4b;
    --mint-amber:      #92400e;
    --mint-amber-bg:   #fffbeb;
    --mint-green-bg:   #f0fdf4;
    --mint-blue-bg:    #eff6ff;
}

/* ── Body / Layout ────────────────────────────────────────── */
body {
    background: #f4f6fb;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.93rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Navbar ───────────────────────────────────────────────── */
.mint-navbar {
    background: var(--mint-primary) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.mint-navbar .navbar-brand { font-size: 1.15rem; letter-spacing: .02em; }
.mint-navbar .nav-link      { color: rgba(255,255,255,.85) !important; transition: color .15s; padding: .45rem .75rem; }
.mint-navbar .nav-link:hover { color: #fff !important; }
.mint-navbar .dropdown-menu  { border: none; box-shadow: 0 4px 20px rgba(0,0,0,.12); border-radius: .5rem; }

/* ── Primary button ───────────────────────────────────────── */
.mint-btn {
    background: var(--mint-primary);
    color: #fff;
    border: none;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background .2s;
}
.mint-btn:hover, .mint-btn:focus { background: var(--mint-primary-dk); color: #fff; }
.mint-btn:disabled { background: #7a95c0; }

/* ── Card header ──────────────────────────────────────────── */
.mint-card-header {
    background: var(--mint-primary);
    color: #fff;
    font-weight: 600;
    font-size: .92rem;
    padding: .6rem 1rem;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
    font-size: .82rem;
    padding: .4rem 1.5rem;
}

/* ── Login page ───────────────────────────────────────────── */
.login-bg {
    background: linear-gradient(135deg, #1F3C78 0%, #2d5aa0 50%, #1a2e5a 100%);
}
.login-card {
    border-radius: .85rem;
    overflow: hidden;
    position: relative;   /* lifts the card above the wallpaper layer */
    z-index: 1;
}
.login-card .card-header {
    background: var(--mint-primary);
}

/* Icon wallpaper. A fixed layer of glyphs that wraps across the whole viewport; the
   card and footer sit above it on their own stacking context. Kept faint on purpose —
   it should read as texture, never compete with the form for attention. */
.login-wall {
    position: fixed;
    inset: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 3.2rem 4.2rem;
    padding: 1.5rem;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;    /* never intercepts a click meant for the form */
    user-select: none;
    color: rgba(255, 255, 255, .18);
    font-size: 2.4rem;
    line-height: 1;
}
/* Size, tilt and weight are varied on prime-numbered strides so the grid the icons are
   really laid out on stops being readable and the field looks hand-scattered. */
.login-wall i { display: block; }
.login-wall i:nth-child(3n)  { font-size: 3.3rem; opacity: .8;  }
.login-wall i:nth-child(5n)  { font-size: 1.8rem; opacity: 1.2; }
.login-wall i:nth-child(7n)  { transform: rotate(-14deg); }
.login-wall i:nth-child(11n) { transform: rotate(12deg) translateY(12px); }
.login-wall i:nth-child(13n) { font-size: 4.2rem; opacity: .65; }
.login-wall i:nth-child(4n)  { transform: translateY(-15px); }
.login-wall i:nth-child(17n) { transform: rotate(24deg) translateY(9px); }

/* A gentle vignette: just enough to settle the icons immediately behind the card and to
   darken the far edges. Anything stronger turned the middle into a visible spotlight. */
.login-wall::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
                rgba(31,60,120,.34) 0%, rgba(31,60,120,.08) 45%, rgba(22,44,90,.38) 100%);
}

@media (max-width: 576px) {
    .login-wall { gap: 2.2rem 2.6rem; font-size: 1.75rem; }
}

/* ── Dashboard stat cards ─────────────────────────────────── */
.stat-card { transition: transform .15s, box-shadow .15s; border-radius: .6rem; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1) !important; }
.stat-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }

/* ── Tables ───────────────────────────────────────────────── */
.table-sm td, .table-sm th { vertical-align: middle; }

/* ── XIRR calculator ──────────────────────────────────────── */
.xirr-thead th {
    background: var(--mint-primary);
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.xirr-table { font-size: .83rem; }
.xirr-table tbody tr:hover td { background: #f0f4ff !important; }

/* Nature badges */
.badge.nature-opbal    { background: var(--mint-amber-bg); color: var(--mint-amber);  border: 1px solid #fcd34d; font-weight: 600; }
.badge.nature-currval  { background: var(--mint-green-bg); color: var(--mint-success); border: 1px solid #86efac; font-weight: 600; }
.badge.nature-cashflow { background: var(--mint-blue-bg);  color: var(--mint-primary); border: 1px solid #93c5fd; font-weight: 600; }

/* Person search dropdown */
.person-dropdown {
    position: absolute;
    z-index: 9999;
    max-height: 260px;
    overflow-y: auto;
    width: 100%;
    top: 100%;
    left: 0;
    margin-top: 2px;
}
.pd-item {
    padding: .4rem .85rem;
    cursor: pointer;
    font-size: .88rem;
    transition: background .1s;
}
.pd-item:hover, .pd-item.active { background: var(--mint-primary-lt); color: var(--mint-primary); }
.pd-item mark { background: #fef08a; padding: 0; border-radius: 2px; }
.pd-more {
    padding: .35rem .85rem;
    font-size: .8rem;
    color: #888;
    background: #f8f9fa;
    border-top: 1px solid #e5e7eb;
}

/* Person search wrapper needs relative */
#txtPersonSearch {
    position: relative;
}
.input-group {
    position: relative;
}
.input-group #personDropdown {
    left: 0;
    right: 0;
}

/* ── Permission matrix ────────────────────────────────────── */
.perm-table th { white-space: nowrap; font-size: .8rem; }
.perm-table td { font-size: .82rem; }
.perm-table .form-check-input { cursor: pointer; width: 1.05em; height: 1.05em; }

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb { font-size: .82rem; margin-bottom: 0; }
.breadcrumb-item + .breadcrumb-item::before { color: #adb5bd; }

/* ── Misc ─────────────────────────────────────────────────── */
.font-monospace { font-family: 'Courier New', monospace; }
.text-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Responsive tweaks ────────────────────────────────────── */
@media (max-width: 768px) {
    main { padding: .75rem !important; }
    .xirr-table { font-size: .75rem; }
    .display-6 { font-size: 1.5rem !important; }
}

/* ── DASHBOARD LAUNCH CARDS ─────────────────────────────────
   Compact module tiles. Each card carries a launch-a-* accent class that sets
   --accent / --accent-bg; the accent tints the icon and the hover border only,
   so the tiles read as one family while each module stays recognisable by its
   own colour. The old dashboard coloured whole buttons instead, which is what
   made seven modules look like seven unrelated products.

   Sizing is deliberately tight: six across on a wide screen, so modules added
   later drop into the grid without pushing the dashboard past one screen. */
.launch-section-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: .5rem;
}

/* Accent palette — muted, similar weight, all readable on their own tint. */
.launch-a-indigo { --accent: #4338ca; --accent-bg: #eef2ff; }
.launch-a-violet { --accent: #6d28d9; --accent-bg: #f3e8ff; }
.launch-a-teal   { --accent: #0f766e; --accent-bg: #d9f7f3; }
.launch-a-rose   { --accent: #be123c; --accent-bg: #ffe4e9; }
.launch-a-sky    { --accent: #0369a1; --accent-bg: #e0f2fe; }
.launch-a-green  { --accent: #15803d; --accent-bg: #dcfce7; }
.launch-a-amber  { --accent: #b45309; --accent-bg: #fef3c7; }
.launch-a-slate  { --accent: #334155; --accent-bg: #e5e9f0; }

/* h-100 on the card plus a fixed-height clamped description keeps every tile in
   a row the same size however long its text runs. */
.launch-card {
    border-radius: .5rem;
    color: inherit;
    border: 1px solid #e9edf3 !important;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.launch-card .card-body { padding: .85rem .9rem; }
.launch-card:hover,
.launch-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--accent, var(--mint-primary)) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .1) !important;
    color: inherit;
}

.launch-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-bg, var(--mint-primary-lt));
    color: var(--accent, var(--mint-primary));
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.launch-title {
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.25;
}

/* Clamped to two lines so a long description cannot make one tile taller. */
.launch-desc {
    font-size: .82rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Active nav item — makes the current page findable on the bar. */
.mint-navbar .nav-link.active {
    color: #fff !important;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .9);
}
.mint-navbar .dropdown-item.active {
    background: var(--mint-primary-lt);
    color: var(--mint-primary);
    font-weight: 600;
}