/* =========================
   PROJECT NOTE
   Purpose: shared application theme for every DigiDoc Building frontend
   (web Client and MauiApp). Served from BlazorComponentsLibrary as
   _content/BlazorComponentsLibrary/css/app-theme.css and linked right after
   Bootstrap by each host, so both frontends share tokens, typography, the
   header/main/footer shell layout, color utilities and the button theme system.
   Host-specific rules (environment markers, print, editors, domain tables)
   stay in each host's own stylesheet.
   ========================= */


/* =========================
   COLOR TOKENS
   Purpose: define reusable global color variables shared across buttons,
   text utilities, border utilities and background utilities.
   ========================= */

:root {
    /* Main application primary color. */
    --color-primary: #1b6ec2;

    /* Custom theme palette. */
    --color-teal: #008080;
    --color-purple: #9370db;
    --color-cornflowerblue: #6495ed;
    --color-cerulean: #007ba7;
    --color-crayola: #1cac78;
}

/* =========================
   TYPOGRAPHY / PAGE ROOT
   Purpose: configure the root document element for base font sizing and the
   full-height flex layout required by the sticky footer of the application shell
   (header + main + footer), shared by every frontend host.
   ========================= */

html {
    /* Base typography scale. */
    font-size: 14px;
    /* Full height required for page flex layout. */
    height: 100%;
}

body {
    /* Enable vertical flex layout for header, content and footer. */
    display: flex;
    flex-direction: column;
    /* Ensure body fills the viewport. */
    min-height: 100%;
}

/* Main layout content container should expand to push footer down. */
.layout-main > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Main content should fill the available height inside the layout container. */
.layout-main main {
    flex: 1;
}

/* Footer stays at the bottom without absolute positioning. */
.footer {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
}


/* =========================
   BASE COLORS
   Purpose: provide sufficient contrast for links and primary actions.
   ========================= */

/* Provide sufficient contrast against white background. */
a {
    color: #0366d6;
}


/* =========================
   TEXT COLOR UTILITIES
   Purpose: provide reusable text color helpers aligned with the custom
   button theme palette.
   ========================= */

.text-primary {
    color: var(--color-primary) !important;
}

.text-teal {
    color: var(--color-teal) !important;
}

.text-purple {
    color: var(--color-purple) !important;
}

.text-cornflowerblue {
    color: var(--color-cornflowerblue) !important;
}

.text-cerulean {
    color: var(--color-cerulean) !important;
}

.text-crayola {
    color: var(--color-crayola) !important;
}


/* =========================
   BORDER COLOR UTILITIES
   Purpose: provide reusable border color helpers aligned with the custom
   button theme palette.
   Note: these classes only set border-color. A visible border still requires
   an existing border width/style (for example via Bootstrap's .border class).
   ========================= */

.border-primary {
    border-color: var(--color-primary) !important;
}

.border-teal {
    border-color: var(--color-teal) !important;
}

.border-purple {
    border-color: var(--color-purple) !important;
}

.border-cornflowerblue {
    border-color: var(--color-cornflowerblue) !important;
}

.border-cerulean {
    border-color: var(--color-cerulean) !important;
}

.border-crayola {
    border-color: var(--color-crayola) !important;
}


/* =========================
   BACKGROUND COLOR UTILITIES
   Purpose: provide reusable background color helpers aligned with the custom
   button theme palette.
   ========================= */

.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-teal {
    background-color: var(--color-teal) !important;
}

.bg-purple {
    background-color: var(--color-purple) !important;
}

.bg-cornflowerblue {
    background-color: var(--color-cornflowerblue) !important;
}

.bg-cerulean {
    background-color: var(--color-cerulean) !important;
}

.bg-crayola {
    background-color: var(--color-crayola) !important;
}


/* =========================
   RESPONSIVE BORDER UTILITIES
   Purpose: add Bootstrap-like responsive border side utilities that are not
   provided by default in Bootstrap 5.
   Behavior:
   - Each utility applies the corresponding border side only from the target
     breakpoint and above.
   - Below the breakpoint, no border is applied by these classes.
   ========================= */

:root {
    --app-border-color: var(--bs-border-color, #dee2e6);
}

/* SM ≥ 576px */
@media (min-width: 576px) {
    .border-sm-start {
        border-left: 1px solid var(--app-border-color) !important;
    }

    .border-sm-end {
        border-right: 1px solid var(--app-border-color) !important;
    }

    .border-sm-top {
        border-top: 1px solid var(--app-border-color) !important;
    }

    .border-sm-bottom {
        border-bottom: 1px solid var(--app-border-color) !important;
    }
}

/* MD ≥ 768px */
@media (min-width: 768px) {
    .border-md-start {
        border-left: 1px solid var(--app-border-color) !important;
    }

    .border-md-end {
        border-right: 1px solid var(--app-border-color) !important;
    }

    .border-md-top {
        border-top: 1px solid var(--app-border-color) !important;
    }

    .border-md-bottom {
        border-bottom: 1px solid var(--app-border-color) !important;
    }
}

/* LG ≥ 992px */
@media (min-width: 992px) {
    .border-lg-start {
        border-left: 1px solid var(--app-border-color) !important;
    }

    .border-lg-end {
        border-right: 1px solid var(--app-border-color) !important;
    }

    .border-lg-top {
        border-top: 1px solid var(--app-border-color) !important;
    }

    .border-lg-bottom {
        border-bottom: 1px solid var(--app-border-color) !important;
    }
}

/* XL ≥ 1200px */
@media (min-width: 1200px) {
    .border-xl-start {
        border-left: 1px solid var(--app-border-color) !important;
    }

    .border-xl-end {
        border-right: 1px solid var(--app-border-color) !important;
    }

    .border-xl-top {
        border-top: 1px solid var(--app-border-color) !important;
    }

    .border-xl-bottom {
        border-bottom: 1px solid var(--app-border-color) !important;
    }
}

/* XXL ≥ 1400px */
@media (min-width: 1400px) {
    .border-xxl-start {
        border-left: 1px solid var(--app-border-color) !important;
    }

    .border-xxl-end {
        border-right: 1px solid var(--app-border-color) !important;
    }

    .border-xxl-top {
        border-top: 1px solid var(--app-border-color) !important;
    }

    .border-xxl-bottom {
        border-bottom: 1px solid var(--app-border-color) !important;
    }
}


/* =========================
   APPLICATION SHELL UTILITIES
   Purpose: adjust container sizing and navbar behavior of the shared
   header / main / footer shell (body.layout-main).
   ========================= */

/* Increase container width compared to default Bootstrap container sizing. */
.layout-main header .navbar > .container,
.layout-main > .container,
.layout-main footer > .container {
    max-width: 90%;
}

/* Open dropdown menus on hover (desktop UX). */
.layout-main .navbar .navbar-nav li:hover > .dropdown-menu {
    display: block;
}


/* =========================
   BALANCED CARD HEADER
   Purpose: keep a card title centered while optional actions remain edge-aligned,
   without adding duplicated or invisible controls to the markup.
   ========================= */

.balanced-card-header {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
    align-items: center;
    column-gap: 1rem;
}

.balanced-card-header__title {
    grid-column: 2;
    min-width: 0;
    overflow-wrap: anywhere;
}

.balanced-card-header__action {
    grid-column: 3;
    justify-self: end;
}

.balanced-card-header__action--start {
    grid-column: 1;
    justify-self: start;
}

@media (max-width: 575.98px) {
    .balanced-card-header {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.75rem;
    }

    .balanced-card-header__title,
    .balanced-card-header__action {
        grid-column: 1;
    }
}


/* =========================
   MULTILINE TEXT DISPLAY
   Purpose: preserve newline characters (\n) when rendering plain text notes/details in HTML.
   ========================= */

/* Render line breaks from plain text content (for example notes shown in readonly views). */
.text-pre-wrap {
    white-space: pre-wrap;
}


/* =========================
   CUSTOM BUTTON THEMES
   Purpose: define reusable solid and outline button theme primitives based on
   shared CSS custom properties, then assign each color palette once.

   Usage:
   - Solid buttons:         btn btn-theme <color-class>
     Example:              class="btn btn-theme btn-teal"
   - Outline buttons:       btn btn-theme-outline <color-class>
     Example:              class="btn btn-theme-outline btn-teal"

   Notes:
   - .btn-theme and .btn-theme-outline provide the shared behavior for hover,
     focus, active and disabled states.
   - Color classes such as .btn-primary, .btn-warning, .btn-danger and
     .btn-teal assign one palette shared by both button variants.
   ========================= */

/* Shared default palette for solid and outline theme buttons. */
.btn-theme,
.btn-theme-outline {
    --btn-theme-base-color: #6c757d;
    --btn-theme-hover-color: #5c636a;
    --btn-theme-active-color: #565e64;
    --btn-theme-focus-rgb: 108, 117, 125;
    --btn-theme-foreground: #fff;
}

/* Base solid button behavior. */
.btn-theme {
    color: var(--btn-theme-foreground);
    background-color: var(--btn-theme-base-color);
    border-color: var(--btn-theme-base-color);
}

.btn-theme:hover {
    color: var(--btn-theme-foreground);
    background-color: var(--btn-theme-hover-color);
    border-color: var(--btn-theme-hover-color);
}

.btn-theme:focus,
.btn-theme.focus {
    color: var(--btn-theme-foreground);
    background-color: var(--btn-theme-hover-color);
    border-color: var(--btn-theme-hover-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--btn-theme-focus-rgb), 0.5);
}

.btn-theme.disabled,
.btn-theme:disabled {
    color: var(--btn-theme-foreground);
    background-color: var(--btn-theme-base-color);
    border-color: var(--btn-theme-base-color);
    opacity: 0.65;
}

.btn-theme:not(:disabled):not(.disabled):active,
.btn-theme:not(:disabled):not(.disabled).active,
.show > .btn-theme.dropdown-toggle {
    color: var(--btn-theme-foreground);
    background-color: var(--btn-theme-active-color);
    border-color: var(--btn-theme-active-color);
}

.btn-theme:not(:disabled):not(.disabled):active:focus,
.btn-theme:not(:disabled):not(.disabled).active:focus,
.show > .btn-theme.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--btn-theme-focus-rgb), 0.5);
}

/* Base outline button behavior. */
.btn-theme-outline {
    color: var(--btn-theme-base-color);
    background-color: transparent;
    border-color: var(--btn-theme-base-color);
}

.btn-theme-outline:hover {
    color: var(--btn-theme-foreground);
    background-color: var(--btn-theme-base-color);
    border-color: var(--btn-theme-base-color);
}

.btn-theme-outline:focus,
.btn-theme-outline.focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--btn-theme-focus-rgb), 0.5);
}

.btn-theme-outline.disabled,
.btn-theme-outline:disabled {
    color: var(--btn-theme-base-color);
    background-color: transparent;
    border-color: var(--btn-theme-base-color);
    opacity: 0.65;
}

.btn-theme-outline:not(:disabled):not(.disabled):active,
.btn-theme-outline:not(:disabled):not(.disabled).active,
.show > .btn-theme-outline.dropdown-toggle {
    color: var(--btn-theme-foreground);
    background-color: var(--btn-theme-active-color);
    border-color: var(--btn-theme-active-color);
}

.btn-theme-outline:not(:disabled):not(.disabled):active:focus,
.btn-theme-outline:not(:disabled):not(.disabled).active:focus,
.show > .btn-theme-outline.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--btn-theme-focus-rgb), 0.5);
}

/* Main application primary theme mapped to the shared button system. */
.btn-primary {
    --btn-theme-base-color: var(--color-primary);
    --btn-theme-hover-color: #155a9c;
    --btn-theme-active-color: #124a82;
    --btn-theme-focus-rgb: 27, 110, 194;
    --btn-theme-foreground: #fff;
}

/* Bootstrap-compatible warning theme palette. */
.btn-warning {
    --btn-theme-base-color: #ffc107;
    --btn-theme-hover-color: #ffca2c;
    --btn-theme-active-color: #ffcd39;
    --btn-theme-focus-rgb: 217, 164, 6;
    --btn-theme-foreground: #000;
}

/* Bootstrap-compatible danger theme palette. */
.btn-danger {
    --btn-theme-base-color: #dc3545;
    --btn-theme-hover-color: #bb2d3b;
    --btn-theme-active-color: #b02a37;
    --btn-theme-focus-rgb: 225, 83, 97;
    --btn-theme-foreground: #fff;
}

/* Teal theme palette. */
.btn-teal {
    --btn-theme-base-color: var(--color-teal);
    --btn-theme-hover-color: #006d6d;
    --btn-theme-active-color: #005c5c;
    --btn-theme-focus-rgb: 0, 128, 128;
    --btn-theme-foreground: #fff;
}

/* Purple theme palette. */
.btn-purple {
    --btn-theme-base-color: var(--color-purple);
    --btn-theme-hover-color: #7e5fc0;
    --btn-theme-active-color: #6f53aa;
    --btn-theme-focus-rgb: 147, 112, 219;
    --btn-theme-foreground: #fff;
}

/* Cornflower blue theme palette. */
.btn-cornflowerblue {
    --btn-theme-base-color: var(--color-cornflowerblue);
    --btn-theme-hover-color: #4f7fd6;
    --btn-theme-active-color: #416fbe;
    --btn-theme-focus-rgb: 100, 149, 237;
    --btn-theme-foreground: #fff;
}

/* Cerulean theme palette. */
.btn-cerulean {
    --btn-theme-base-color: var(--color-cerulean);
    --btn-theme-hover-color: #00678d;
    --btn-theme-active-color: #005874;
    --btn-theme-focus-rgb: 0, 123, 167;
    --btn-theme-foreground: #fff;
}

/* Crayola theme palette. */
.btn-crayola {
    --btn-theme-base-color: var(--color-crayola);
    --btn-theme-hover-color: #179464;
    --btn-theme-active-color: #137c54;
    --btn-theme-focus-rgb: 28, 172, 120;
    --btn-theme-foreground: #fff;
}


/* =========================
   FORM SELECT ALIGNMENT
   Purpose: center select text (including selected option rendering).
   ========================= */

select {
    text-align: center;
    text-align-last: center;
}