/* McarePortal project-specific overrides. Most styling lives in AtlasPortal.UI
   (atlas-portal.css + atlas-bootstrap.css). This file is the seam for anything
   truly project-local. */

/* ---------------------------------------------------------------------------
   Brand palette override: Mcare Portal navy.
   ---------------------------------------------------------------------------
   The library defaults to a vivid royal blue (#2563eb / #0d6efd). For the
   Mcare rollout we override the primary token to the deep navy sampled
   from the brand reference (PA-keystone style): RGB(1, 62, 125) = #013E7D.

   Override BOTH the Atlas tokens (`--ap-primary*`, consumed by atlas-portal.css
   + most library components) and the Bootstrap tokens (`--bs-primary*`,
   consumed by Bootstrap utility classes like .text-primary / .bg-primary /
   .btn-primary). Also patches a couple of places where atlas-bootstrap.css
   embedded the old rgba(37,99,235,...) shadow inline. Keeping this in the
   project layer means other consumers of AtlasPortal.UI keep their own palette.
   --------------------------------------------------------------------------- */

:root {
    --ap-primary: #013E7D;
    --ap-primary-dark: #012C5A;
    --ap-focus-outline: 3px solid #012C5A;

    --bs-primary: #013E7D;
    --bs-primary-rgb: 1, 62, 125;
    --bs-primary-text-emphasis: #012C5A;
    --bs-primary-bg-subtle: #E6EEF7;
    --bs-primary-border-subtle: #B7CDE3;

    --bs-link-color: #013E7D;
    --bs-link-color-rgb: 1, 62, 125;
    --bs-link-hover-color: #012C5A;
    --bs-link-hover-color-rgb: 1, 44, 90;
}

/* Patch focus rings that atlas-bootstrap.css hardcoded with the old rgba. */
.form-control:focus,
.form-select:focus {
    border-color: var(--ap-primary);
    box-shadow: 0 0 0 0.2rem rgba(1, 62, 125, 0.25);
}

/* Atlas nav-pills hover hardcoded the old primary; restate it for the new one. */
.nav-pills .nav-link:hover {
    background-color: rgba(1, 62, 125, 0.1);
    color: var(--ap-primary);
}

/* ---------------------------------------------------------------------------
   Landing / Login: centered card on the cityscape background.
   ---------------------------------------------------------------------------
   The public layout doesn't render a top navbar, so the wrapper fills the
   viewport (min-height: 100vh) and acts as the background canvas. The card
   stays unchanged on top — Bootstrap d-flex centers it horizontally and
   vertically inside this wrapper.
   --------------------------------------------------------------------------- */

.mcare-public-bg {
    min-height: 100vh;
    background-image: url("../images/landing-bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Welcome card on /. Baseline min-height tuned for default content; ×1.2 = +20%. */
.mcare-landing-card {
    --mcare-landing-card-min-height-baseline: 290px;
    min-height: calc(var(--mcare-landing-card-min-height-baseline) * 1.2);
}

/* Match Bootstrap .p-5 horizontal padding; vertical padding +20% for a taller card. */
.mcare-landing-card-body {
    padding-top: calc(3rem * 1.2);
    padding-bottom: calc(3rem * 1.2);
}

/* Brand logo sitting above the welcome heading inside the card. */
.mcare-card-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 240px;
    width: 60%;
    height: auto;
}

/* ===========================================================================
   AUTHENTICATED APP SHELL
   ===========================================================================
     +----------+----------------------------------+
     | SIDEBAR  |  TOP NAV (navy, full width)      |
     | (white,  |                  ... UserMenu →  |
     | overlay) +----------------------------------+
     |          |                                  |
     |          |  MAIN CONTENT                    |
     |          |                                  |
     +----------+----------------------------------+

   The library renders the sidebar inside a flex row UNDER the navbar. To
   make the sidebar VISUALLY overlay the navbar's left edge, we:
     1) collapse the library's <nav class="sidebar-container"> to 0 width
        (its inline style="width: 280px" is overridden with !important);
     2) position our .mcare-sidebar fixed at left:0, top:0, bottom:0 with
        a z-index ABOVE the navbar;
     3) push the navbar content and the main content right by --mcare-sidebar-width.
   The navbar background still extends edge-to-edge; the sidebar covers it.
   =========================================================================== */

:root {
    --mcare-sidebar-width: 240px;
    --mcare-topnav-height: 56px;
}

/* (1) Collapse the library's sidebar row slot to 0 width. */
.sidebar-container {
    width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* (2) Top nav: full-width navy. Padding-left clears the fixed sidebar.
       Sticky so it stays visible during main-content scroll. */
.mcare-navbar {
    --mcare-navbar-height: var(--mcare-topnav-height);
    min-height: var(--mcare-topnav-height);
    padding-top: 0;
    padding-bottom: 0;
    padding-left: calc(var(--mcare-sidebar-width) + 1rem);
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* (3) Main content slides right by the sidebar width. The library renders
       <main class="flex-grow-1 p-4 bg-light"> — Bootstrap's .p-4 utility
       uses !important on padding-left, so we must also use !important here
       to actually win the cascade and prevent the page card from sliding
       under the fixed sidebar. */
.d-flex.flex-grow-1 > main {
    padding-left: var(--mcare-sidebar-width) !important;
}

/* ---------------------------------------------------------------------------
   Sidebar: white column overlaying the top nav's left edge.
   --------------------------------------------------------------------------- */

.mcare-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--mcare-sidebar-width);
    z-index: 1030; /* above .mcare-navbar (1020) so it visually overlays */
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    background-color: #ffffff;
    /* Right-edge shadow only (positive x-offset) — separates nav from main. */
    box-shadow: 10px 0 24px rgba(15, 23, 42, 0.12),
        2px 0 8px rgba(15, 23, 42, 0.08);
    overflow-y: auto;
}

/* Logo header. min-height keeps it visually aligned with the topnav; the row
   grows if the logo needs more vertical room. */
.mcare-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mcare-topnav-height);
    padding: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--ap-border);
    text-decoration: none;
}

/* Sidebar logo cap (50px × 1.2 = 60px). */
.mcare-sidebar-logo {
    display: block;
    max-height: 60px;
    max-width: 100%;
    height: auto;
    width: auto;
}

.mcare-sidebar-brand-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ap-primary);
    line-height: 1.2;
    text-align: center;
}

.mcare-sidebar-nav {
    gap: 0.25rem;
}

.mcare-sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #475569; /* slate-600: muted gray for inactive items */
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.25;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mcare-sidebar-nav .nav-link .bi {
    flex: 0 0 1.25rem;
    font-size: 1.25rem;
    line-height: 1;
    color: #64748b; /* slate-500: even lighter for the icon outline */
    text-align: center;
}

.mcare-sidebar-nav .nav-link .mcare-nav-label {
    flex: 1 1 auto;
    min-width: 0;
}

.mcare-sidebar-nav .nav-link:hover,
.mcare-sidebar-nav .nav-link:focus {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
}

.mcare-sidebar-nav .nav-link:hover .bi,
.mcare-sidebar-nav .nav-link:focus .bi {
    color: var(--bs-primary);
}

.mcare-sidebar-nav .nav-link.active {
    background-color: var(--bs-primary);
    color: #ffffff;
    font-weight: 600;
}

.mcare-sidebar-nav .nav-link.active .bi {
    color: #ffffff;
}

.mcare-sidebar-nav .nav-link.active:hover,
.mcare-sidebar-nav .nav-link.active:focus {
    background-color: var(--bs-primary-text-emphasis, #012C5A);
    color: #ffffff;
}

/* Right-aligned counter pill (e.g. unread notifications). The .badge utility
   handles colors via bg-* / text-*; this just positions and sizes it. */
.mcare-nav-badge {
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 1.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* When the row is active, the white-on-blue text needs a stronger contrast
   for the badge — keep it red but tighten the white outline so it pops. */
.mcare-sidebar-nav .nav-link.active .mcare-nav-badge {
    box-shadow: 0 0 0 2px #ffffff;
}

/* ===========================================================================
   MOBILE: the library hides the sidebar slot via .atlas-hide-on-mobile.
   When it's hidden, reclaim the left padding on the navbar + main content.
   =========================================================================== */
@media (max-width: 768px) {
    .mcare-navbar {
        padding-left: 1rem;
    }
    .d-flex.flex-grow-1 > main {
        padding-left: 0;
    }
    .mcare-sidebar {
        display: none;
    }
}