/* Project-specific styles (not covered by the Bulma SCSS build) */

/* =============================================================================
   Global fixes
   ============================================================================= */

/* =============================================================================
   Sticky-footer base
   body is a flex column that fills the full viewport height. Any element
   with .mpp-main will grow to consume leftover space, pushing the footer
   to the bottom regardless of content length or window size.
   ============================================================================= */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.mpp-main {
    flex: 1;
}

/* =============================================================================
   Global fixes
   ============================================================================= */

/* Slightly larger than Bulma's default 1.75rem cap for better symbol legibility */
.navbar-item img {
    max-height: 3.6rem;
}

/* Bulma's navbar link styles can win the specificity race against
   .button.is-primary in certain contexts. Pin white text explicitly. */
.button.is-primary {
    color: white;
}

/* =============================================================================
   Login — split-screen layout
   Left panel  : 1/3 width, white, vertically centred form
   Right panel : 2/3 width, full-bleed background image
   ============================================================================= */

.mpp-login-wrap {
    display: flex;
    flex: 1;
}

/* Left panel — grows equally up to 600px, then stays fixed while right panel expands */
.mpp-login-panel {
    flex: 1 0 0;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    padding: 2rem 2.5rem;
    background: #fff;
}

/* Push the form to the vertical centre of the remaining space */
.mpp-login-form-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpp-login-form-inner {
    width: 100%;
    max-width: 360px;
}

/* Right panel — equal share with left panel */
.mpp-login-image {
    flex: 1 0 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('/img/mpp-background.png');
    background-size: cover;
    background-position: center;
}

/* Logo layered on top of the photo.
   mix-blend-mode: multiply makes white areas transparent against the
   light background image, leaving only the coloured arcs visible. */
.mpp-login-image-logo {
    width: 100%;
    max-width: 600px;
    mix-blend-mode: multiply;
    filter: drop-shadow(0 4px 32px rgba(0, 0, 0, 0.12));
    pointer-events: none;
    user-select: none;
}

/* Collapse image panel on small screens */
@media (max-width: 768px) {
    .mpp-login-image {
        display: none;
    }
}

/* =============================================================================
   x-cloak — hide Alpine.js-controlled elements before Alpine initialises
   ============================================================================= */

[x-cloak] { display: none !important; }

/* =============================================================================
   Registration — multi-step form layout
   Replaces the login page's vertically-centred form wrappers with a
   top-aligned, slightly wider inner container.
   ============================================================================= */

.mpp-register-inner {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: 2rem 0;
}

/* Completed-tab indicator colour */
.mpp-tab-check {
    color: var(--bulma-primary);
}

/* =============================================================================
   Dashboard — sidebar + main layout
   ============================================================================= */

/*
 * Design tokens for the sidebar.  Keeping these as variables makes it easy to
 * swap to a dark/light variant or to a tenant-branded colour later.
 */
:root {
    --dash-sidebar-width:          240px;
    --dash-sidebar-collapsed-width: 56px;
    --dash-sidebar-bg:             hsl(200deg 65% 16%);
    --dash-sidebar-border:         rgba(255 255 255 / 0.07);
    --dash-sidebar-text:           rgba(255 255 255 / 0.68);
    --dash-sidebar-text-hover:     #ffffff;
    --dash-sidebar-active-bg:      hsl(200deg 76% 47% / 0.2);
    --dash-sidebar-active-text:    hsl(200deg 76% 65%);
    --dash-sidebar-active-border:  hsl(200deg 76% 47%);
    --dash-sidebar-section-text:   rgba(255 255 255 / 0.35);
    --dash-sidebar-transition:     0.22s ease;
    --dash-main-bg:                #f4f6f9;
}

/* ── Outer shell ───────────────────────────────────────────────────────────── */

/*
 * .mpp-dash-wrap fills the remaining body height (the navbar sits above it).
 * flex: 1 + min-height: 0 is the correct pattern for a flex child that must
 * scroll internally rather than expand the page.
 */
.mpp-dash-wrap {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    /* Positioning context for the mobile absolute sidebar,
       so it anchors to this element rather than the viewport,
       keeping it below the navbar. */
    position: relative;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */

.mpp-dash-sidebar {
    width: var(--dash-sidebar-width);
    min-width: var(--dash-sidebar-width);
    background: var(--dash-sidebar-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition:
        width               var(--dash-sidebar-transition),
        min-width           var(--dash-sidebar-transition);
}

.mpp-dash-sidebar.is-collapsed {
    width: var(--dash-sidebar-collapsed-width);
    min-width: var(--dash-sidebar-collapsed-width);
}

/* When collapsed only the toggle button remains in the brand row; centre it. */
.mpp-dash-sidebar.is-collapsed .mpp-dash-brand {
    justify-content: center;
    padding: 0;
}

/* Brand row */
.mpp-dash-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 56px;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--dash-sidebar-border);
    flex-shrink: 0;
}

.mpp-dash-logo {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.mpp-dash-brand-name {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toggle button (collapse / expand) */
.mpp-dash-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dash-sidebar-text);
    padding: 0.25rem;
    border-radius: 4px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.mpp-dash-toggle:hover {
    color: var(--dash-sidebar-text-hover);
    background: rgba(255 255 255 / 0.08);
}

.mpp-dash-toggle-icon {
    transition: transform var(--dash-sidebar-transition);
}

.mpp-dash-toggle-icon.is-flipped {
    transform: rotate(180deg);
}

/* ── Nav items ─────────────────────────────────────────────────────────────── */

.mpp-dash-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255 255 255 / 0.15) transparent;
}

/* Base item style — shared by <a> and <button> items */
.mpp-dash-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 1rem;
    color: var(--dash-sidebar-text);
    font-size: 0.85rem;
    white-space: nowrap;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.mpp-dash-item:hover {
    color: var(--dash-sidebar-text-hover);
    background: rgba(255 255 255 / 0.06);
}

.mpp-dash-item.is-active {
    color: var(--dash-sidebar-active-text);
    background: var(--dash-sidebar-active-bg);
    border-left-color: var(--dash-sidebar-active-border);
}

/* SVG icon within items */
.mpp-dash-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Text label — hidden when collapsed */
.mpp-dash-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Centre icons when collapsed */
.mpp-dash-sidebar.is-collapsed .mpp-dash-item {
    justify-content: center;
    padding: 0.6rem;
    border-left-color: transparent;
}

.mpp-dash-sidebar.is-collapsed .mpp-dash-item.is-active {
    background: var(--dash-sidebar-active-bg);
    color: var(--dash-sidebar-active-text);
}

/* ── Management section ─────────────────────────────────────────────────────── */

/* Section heading button */
.mpp-dash-section-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dash-sidebar-section-text);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s;
}

.mpp-dash-section-hd:hover {
    color: rgba(255 255 255 / 0.55);
}

/* Chevron inside the section header */
.mpp-dash-chevron {
    transition: transform var(--dash-sidebar-transition);
}

.mpp-dash-chevron.is-flipped {
    transform: rotate(-180deg);
}

/* Management items get a subtle indent when sidebar is expanded */
.mpp-dash-mgmt .mpp-dash-item {
    padding-left: 1.5rem;
}

.mpp-dash-sidebar.is-collapsed .mpp-dash-mgmt .mpp-dash-item {
    padding-left: 0.6rem;
}

/* ── Sidebar footer ─────────────────────────────────────────────────────────── */

.mpp-dash-footer {
    border-top: 1px solid var(--dash-sidebar-border);
    padding: 0.5rem 0;
    flex-shrink: 0;
}

/* The logout form should fill the sidebar width like a nav item */
.mpp-dash-logout-form {
    display: contents; /* lets the <button> participate directly in flex layout */
}

/* ── Main content ───────────────────────────────────────────────────────────── */

.mpp-dash-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: var(--dash-main-bg);
}

/* ── Mobile: collapse sidebar on small screens ──────────────────────────────── */

@media (max-width: 768px) {
    /*
     * Sidebar is absolutely positioned so it can overlay content when expanded.
     * Auto-collapse is handled by Alpine (sidebar: window.innerWidth >= 769).
     */
    .mpp-dash-sidebar {
        position: absolute;
        z-index: 30;
        top: 0;
        left: 0;
        height: 100%;
    }
    /*
     * Reserve exactly the collapsed-sidebar width so that the main content
     * is never obscured when the sidebar is contracted.  When the sidebar
     * expands (hover or toggle) it overlays content — which is intentional.
     */
    .mpp-dash-main {
        margin-left: var(--dash-sidebar-collapsed-width);
    }
}

/* =============================================================================
   Dashboard — content area (rendered by HTMX into #main-content)
   ============================================================================= */

.mpp-dash-content {
    padding: 1.5rem;
}

.mpp-dash-content-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

/* ── Stat cards ──────────────────────────────────────────────────────────── */

.mpp-stat-card {
    text-align: center;
    border-top: 3px solid hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l));
}

/* ── Compliance donut dial ───────────────────────────────────────────────── */

.mpp-compliance-box {
    height: 100%;
}

/*
 * CSS-only donut chart via conic-gradient.
 * The --pct custom property (0–100) is set inline by the Hiccup renderer.
 * ::after punches the centre hole to create the donut shape.
 */
.mpp-compliance-dial {
    --pct: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(
        currentColor 0% calc(var(--pct) * 1%),
        #dde3ea     calc(var(--pct) * 1%) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto 1rem;
    /* Default colour: brand primary */
    color: hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l));
}

.mpp-compliance-dial.is-ok {
    color: hsl(var(--bulma-warning-h) var(--bulma-warning-s) var(--bulma-warning-l));
}

.mpp-compliance-dial.is-poor {
    color: hsl(var(--bulma-danger-h) var(--bulma-danger-s) var(--bulma-danger-l));
}

/* The white inner disc that creates the donut hole */
.mpp-compliance-dial::after {
    content: '';
    position: absolute;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #ffffff;
}

/* Percentage label sits above the ::after disc via z-index */
.mpp-compliance-pct {
    position: relative;
    z-index: 1;
    font-size: 1.4rem;
    font-weight: 700;
    color: currentColor;
}

/* =============================================================================
   Dropdown — fullwidth fix
   Bulma's .dropdown is inline-flex by default, so width: 100% alone doesn't
   stretch it to fill its container. Switching to flex and propagating the full
   width down to the trigger corrects this.
   ============================================================================= */

.dropdown.is-fullwidth {
    display: flex;
    flex-direction: column;
}

.dropdown.is-fullwidth .dropdown-trigger,
.dropdown.is-fullwidth .dropdown-trigger .input {
    width: 100%;
}