/* Super Admin panel -- our own layer on top of the vendored theme
 * (app.min.css). Loaded LAST so every rule here wins on equal specificity.
 *
 * Two kinds of rule live here:
 *   1. brand bits the theme has no opinion about (the wordmark), and
 *   2. narrow overrides for places where the vendored theme's own CSS is
 *      wrong for a panel this small. Each of those carries a comment
 *      explaining what it is fixing -- do not "tidy" them away, they are
 *      load-bearing.
 */

/* ---------------------------------------------------------------- brand -- */

.pramukh-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    /* .logo sets line-height: 70px to vertically centre a plain <img>. That
     * would blow the wordmark's own text box wide open, so reset it here. */
    line-height: 1;
}

/* Hardcoded white (not a --theme-* var): the sidebar's logo well takes the
 * *topbar* background, and this panel pins the topbar to dark regardless of
 * the sidebar theme, so the wordmark always sits on a dark ground. The mark
 * itself is handled by brand.css. */
.pramukh-brand-text {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    color: #fff;
}

/* ------------------------------------------------------------ logo well -- */

/* The theme centres the logo with `line-height: var(--theme-topbar-height)`,
 * which only works for a single inline <img>. Our lockup is a flex box, so it
 * hangs off the text baseline instead and -- in condensed mode, where the
 * theme forces `.logo span.logo-sm { display: block }` -- the mark ends up
 * jammed into the top-left corner, clipped.
 * Make the well an actual flex row and the problem disappears in every
 * sidenav size. */
.sidenav-menu .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--theme-topbar-height);
    line-height: 1;
}

/* The theme sizes anything inside the logo well with `.logo-lg img { height:
 * var(--theme-logo-lg-height) }` (22px) -- built for a wide wordmark strip.
 * Our mark is a square tile, so that rule squashes it into a pill. Both
 * selectors below outrank it; keep the two dimensions equal. */
.sidenav-menu .logo img.brand-mark {
    width: 38px;
    height: 38px;
}

/* Restore the flex centring the condensed/on-hover rules clobber with
 * `display: block`. */
html[data-sidenav-size="condensed"] .sidenav-menu .logo span.logo-sm,
html[data-sidenav-size="on-hover"] .sidenav-menu:not(:hover) .logo .logo-sm {
    display: inline-flex;
}

/* In the default size the theme paints the logo well with the topbar colour so
 * it reads as one continuous bar; condensed resets it to the sidebar colour,
 * which leaves a white notch next to a dark topbar. Keep it dark throughout. */
html[data-menu-color="light"][data-topbar-color="dark"][data-sidenav-size="condensed"] .sidenav-menu .logo {
    background: var(--theme-topbar-bg);
}

/* --------------------------------------------------------------- topbar -- */

/* The theme's topbar items are centred by `.topbar-item { height: 70px }`, so
 * every direct child of .topbar-menu has to be one. This is a belt-and-braces
 * stretch for the wrappers around them. */
.app-topbar .topbar-menu {
    align-items: center;
    height: var(--theme-topbar-height);
}

/* ----------------------------------------------------------- page shell -- */

/* Theme bug: condensed mode hardcodes `min-height: 1900px` on the content
 * area. On a panel with one screen of content that invents ~1200px of dead
 * scroll below the fold -- and because condensed *also* switches the sidebar
 * to position:absolute, the sidebar scrolls away into it. Both fixed here. */
html[data-sidenav-size="condensed"] .content-page {
    min-height: calc(100vh - calc(var(--theme-topbar-height) + 1px));
}

html[data-sidenav-size="condensed"] .sidenav-menu {
    position: fixed;
}

/* .content-page is a flex column; let the page body absorb the slack so the
 * footer sits flush at the bottom. Without this the footer's `margin: auto`
 * splits the free space in half and leaves a stray band of page background
 * hanging below it. */
.content-page > .container-fluid {
    flex: 1 0 auto;
}

.content-page > .footer {
    margin-top: auto;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- cards -- */

/* Permission bundles print their codes as a run of <code> chips. Left as
 * inline text they wrap mid-run and the rows lose their alignment; a flex row
 * wraps them as whole chips instead. */
.perm-code-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
}

/* The bundle editor groups permissions by module into a 2-column grid. With
 * Bootstrap columns a short group (FINANCE, 2 items) leaves a tall hole beside
 * a long one (FACILITIES, 5 items). CSS columns pack them instead. */
.perm-module-grid {
    column-count: 2;
    column-gap: 1.5rem;
}

.perm-module {
    /* Never let a module's heading strand itself at the foot of a column. */
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1.25rem;
}

@media (max-width: 767.98px) {
    .perm-module-grid {
        column-count: 1;
    }
}

/* Role names ("Building Assistant Manager") are the narrowest column in the
 * bundles table and wrap to three lines while the codes column has room to
 * spare. Give the name column a floor. */
.role-name-cell {
    min-width: 190px;
}

/* ==========================================================================
 * The Pramukh brand layer + Console dashboard
 * --------------------------------------------------------------------------
 * Brand violet is #5546E0 -- the mobile app's AppColors.primary
 * (lib/app/theme/app_theme.dart), so web and app read as one brand. We paint
 * the sidebar with it (app-shell look) across every area
 * -- console, resident, gate, panel -- and the console dashboard is built from
 * the .dash-* components below. All light-theme only (the areas pin
 * data-bs-theme="light").
 * ====================================================================== */

:root {
    --pramukh-violet: #5546E0;
    --pramukh-violet-2: #3a2ba8;
    --pramukh-violet-soft: rgba(85, 70, 224, 0.10);
    --pramukh-ink: #241F3D;
}

/* ---- branded sidebar ---------------------------------------------------- */
/* Override the vendored theme's sidenav vars. `html[data-menu-color]` scores
 * (0,1,1) and outranks the theme's own `[data-menu-color=light]` (0,1,0); the
 * areas run light-theme only, so no dark-theme combo can outrank it. */
html[data-menu-color] {
    --theme-sidenav-bg: linear-gradient(190deg, #5546E0 0%, #3a2ba8 100%);
    --theme-sidenav-border-color: rgba(255, 255, 255, 0.08);
    --theme-sidenav-item-color: rgba(255, 255, 255, 0.80);
    --theme-sidenav-item-hover-color: #ffffff;
    --theme-sidenav-item-hover-bg: rgba(255, 255, 255, 0.12);
    --theme-sidenav-item-active-color: var(--pramukh-violet);
    --theme-sidenav-item-active-bg: #ffffff;
}

.sidenav-menu .menu-title {
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sidenav-menu .side-nav-link {
    color: rgba(255, 255, 255, 0.80);
    margin-inline: 10px;
    border-radius: 9px;
}
.sidenav-menu .side-nav-link .menu-icon {
    color: rgba(255, 255, 255, 0.72);
}
.sidenav-menu .side-nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
}
/* Active = crisp white pill with violet text (matches the reference shell). */
.sidenav-menu .side-nav-link.active {
    color: var(--pramukh-violet);
    background: #ffffff;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}
.sidenav-menu .side-nav-link.active .menu-icon {
    color: var(--pramukh-violet);
}

/* ---- collapsed (condensed) sidebar: hover = highlight the icon only ------ */
/* When collapsed to icons, the vendored theme WIDENS the hovered link into a
 * fly-out label that spills OUTSIDE the bar (over the page). Owner wants no
 * fly-out at all -- just the icon highlighting in place. So pin the hovered
 * link to the collapsed width and hide its label / badge / any sub-menu. */
html[data-menu-color][data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item:hover > .side-nav-link {
    width: var(--theme-sidenav-width-sm) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}
html[data-menu-color][data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item:hover > .side-nav-link .menu-icon {
    color: #ffffff !important;
}
html[data-menu-color][data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item:hover > .side-nav-link .menu-text,
html[data-menu-color][data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item:hover > .side-nav-link .badge,
html[data-menu-color][data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item:hover > .collapse,
html[data-menu-color][data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item:hover > .collapsing {
    display: none !important;
}
/* The active item keeps its white pill (violet icon) on hover too. */
html[data-menu-color][data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item:hover > .side-nav-link.active {
    background: #ffffff !important;
}
html[data-menu-color][data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item:hover > .side-nav-link.active .menu-icon {
    color: var(--pramukh-violet) !important;
}
/* Active item when collapsed: the vendored theme leaves it a full-width, sharp
 * white block edge-to-edge (looks blocky). Make it a centred, rounded white
 * square around the icon instead. */
html[data-menu-color][data-sidenav-size="condensed"] .sidenav-menu .side-nav > .side-nav-item > .side-nav-link.active {
    width: 46px !important;
    min-height: 46px !important;
    margin: 4px auto !important;
    padding: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(20, 16, 45, 0.28) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ---- KPI stat cards ----------------------------------------------------- */
.dash-stat {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(27, 22, 48, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(27, 22, 48, 0.12);
}
.dash-stat .card-body {
    padding: 1.1rem 1.25rem;
}
.dash-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a91a3;
    font-weight: 600;
}
.dash-stat-value {
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0.15rem 0 0.1rem;
    color: var(--pramukh-ink);
    line-height: 1.1;
}
.dash-stat-sub {
    font-size: 0.74rem;
    color: #9aa0b0;
}
.dash-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.dash-stat--violet { border-top: 3px solid #5546E0; }
.dash-stat--violet .dash-stat-icon { background: rgba(85, 70, 224, 0.12); color: #5546E0; }
.dash-stat--blue { border-top: 3px solid #2f6fed; }
.dash-stat--blue .dash-stat-icon { background: rgba(47, 111, 237, 0.12); color: #2f6fed; }
.dash-stat--green { border-top: 3px solid #17a673; }
.dash-stat--green .dash-stat-icon { background: rgba(23, 166, 115, 0.12); color: #17a673; }
.dash-stat--amber { border-top: 3px solid #e08a1e; }
.dash-stat--amber .dash-stat-icon { background: rgba(224, 138, 30, 0.14); color: #e08a1e; }

/* ---- Total Balance ------------------------------------------------------ */
.dash-balance {
    border: none;
    border-radius: 16px;
    background: linear-gradient(120deg, #ffffff 0%, #faf9ff 100%);
    box-shadow: 0 3px 14px rgba(27, 22, 48, 0.07);
}
.dash-chip {
    background: var(--pramukh-violet-soft);
    color: var(--pramukh-violet);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
}
.dash-metric {
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: #f6f7fb;
    height: 100%;
}
.dash-metric-label {
    display: block;
    font-size: 0.72rem;
    color: #8a91a3;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.3rem;
}
.dash-metric-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--pramukh-ink);
}
.dash-metric--current {
    background: linear-gradient(120deg, #5546E0, #7a6cf0);
    box-shadow: 0 6px 16px rgba(85, 70, 224, 0.28);
}
.dash-metric--current .dash-metric-label { color: rgba(255, 255, 255, 0.82); }
.dash-metric--current .dash-metric-value { color: #ffffff; }

/* Total Balance headline -- the current balance shown big, right under the
 * card title, with the "Opening + Collection − Expenses" makeup as a caption.
 * The three metric boxes below are those components. */
.dash-balance-hero {
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--pramukh-ink);
    margin: 0.1rem 0 0.25rem;
}
.dash-balance-formula {
    font-size: 0.75rem;
    font-weight: 500;
    color: #9aa0b0;
}

/* ---- section title ------------------------------------------------------ */
.dash-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--pramukh-ink);
    margin: 1.5rem 0 0.25rem;
}
.dash-section-title .fa-solid { color: var(--pramukh-violet); }

/* ---- summary meters ----------------------------------------------------- */
.dash-summary {
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(27, 22, 48, 0.06);
}
.dash-summary-title { font-size: 0.82rem; font-weight: 600; color: #6b7280; }
.dash-summary-amount {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--pramukh-ink);
    margin-top: 0.25rem;
}
.dash-meter {
    height: 8px;
    border-radius: 999px;
    background: #eceef4;
    overflow: hidden;
}
.dash-meter > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
}
.dash-meter--in { background: linear-gradient(90deg, #17a673, #2fce93); }
.dash-meter--out { background: linear-gradient(90deg, #e5484d, #f4726f); }
.dash-meter--due { background: linear-gradient(90deg, #2f6fed, #5b93f5); }
.dash-meter-cap {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: #8a91a3;
    margin-top: 0.5rem;
}

/* ---- CSS/SVG-free bar chart -------------------------------------------- */
.dash-legend { display: flex; gap: 1rem; font-size: 0.76rem; color: #8a91a3; }
.dash-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.dash-dot--in { background: #17a673; }
.dash-dot--out { background: #e5484d; }
.dash-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    height: 220px;
    padding-top: 10px;
}
.dash-chart-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
.dash-chart-bars {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
}
.dash-bar {
    width: 26%;
    max-width: 22px;
    border-radius: 6px 6px 0 0;
    min-height: 3px;
    transition: height 0.5s ease;
}
.dash-bar--in { background: linear-gradient(180deg, #2fce93, #17a673); }
.dash-bar--out { background: linear-gradient(180deg, #f4726f, #e5484d); }
.dash-chart-label { font-size: 0.74rem; color: #8a91a3; margin-top: 0.5rem; }

/* ---- badges + roles list ----------------------------------------------- */
.dash-badge-violet {
    background: var(--pramukh-violet-soft);
    color: var(--pramukh-violet);
    font-weight: 600;
}
.dash-badge-soft { background: #eef0f6; color: #5b6472; font-weight: 600; }
.dash-role {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f0f1f5;
}
.dash-role:last-child { border-bottom: none; }

/* ---- auth screens (login / join / no-access / choose-area) -------------- */
/* The vendored .auth-box is a bare white field -- a card floating on nothing,
 * which reads as "unfinished". Give every entry screen the same branded violet
 * ground the app shell (sidebar) already uses, so signing in feels like part
 * of the product. Scoped to .auth-box, which ONLY the auth templates render --
 * the dashboards use .content-page and are untouched. One rule beautifies the
 * portal, console and panel logins together, so they all match. */
.auth-box {
    background:
        radial-gradient(1100px 600px at 12% 8%, rgba(122, 108, 240, 0.55), transparent 60%),
        radial-gradient(900px 520px at 88% 96%, rgba(58, 43, 168, 0.60), transparent 55%),
        linear-gradient(160deg, var(--pramukh-violet) 0%, var(--pramukh-violet-2) 100%);
}

/* Lift the card off the violet ground: a real drop shadow and a hairline so
 * its white edge doesn't dissolve into the lighter part of the gradient. The
 * theme already gives .auth-box .card border-radius:15px. */
.auth-box .card {
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 24px 60px -18px rgba(20, 16, 45, 0.55),
        0 8px 22px -12px rgba(20, 16, 45, 0.38);
}

/* A hair more presence for the wordmark on the card (it caps at 210px/70%). */
.auth-box .auth-brand .brand-lockup {
    width: 190px;
}

/* Sign-in button: match the branded gradient instead of the flat theme violet,
 * so the primary action carries the same finish as the sidebar. */
.auth-box .btn-primary {
    background: linear-gradient(120deg, var(--pramukh-violet), #7a6cf0);
    border: none;
    box-shadow: 0 8px 18px -8px rgba(85, 70, 224, 0.65);
}
.auth-box .btn-primary:hover,
.auth-box .btn-primary:focus {
    background: linear-gradient(120deg, #4a3cd0, #6d5ff0);
}