/* ==========================================================================
   Meyer Werft DCVE Toolbox — login page theme (caddy-security portal)

   Loaded by the built-in portal AFTER its own basic.css, so equal-specificity
   rules here win. Two techniques:

   1. Re-brand the theme's own CSS custom properties (--brand-*) so the
      built-in rules render in the Meyer Werft palette automatically.
   2. Target the known basic-theme classes (.app-container, .logo-img,
      .logo-txt, .app-inp-txt, .app-btn-pri, .brand-banner, …) for the
      layout/hero treatment, plus broad fallbacks (body, form, input,
      button, a, h1..h3) so the page stays themed if the template DOM
      changes in a future plugin version.

   Presentation only — no structural or behavioural changes.

   Palette (Meyer Werft board theme):
     navy #00385A, navy-deep #002c47, cyan #55c3d6,
     yellow #f1c232, white #f7fbfd, error red #e94f4f
   ========================================================================== */

:root {
    /* Meyer Werft design tokens */
    --mw-navy: #00385a;
    --mw-navy-deep: #002c47;
    --mw-cyan: #55c3d6;
    --mw-yellow: #f1c232;
    --mw-white: #f7fbfd;
    --mw-red: #e94f4f;
    --mw-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Re-brand the portal's basic theme to the Meyer Werft palette. */
    --brand-page: #002c47;
    --brand-surface: rgba(255, 255, 255, 0.06);
    --brand-soft: rgba(255, 255, 255, 0.09);
    --brand-ink: #f7fbfd;
    --brand-muted: rgba(247, 251, 253, 0.75);
    --brand-primary: #f1c232;
    --brand-on-primary: #002c47;
    --brand-primary-hover: #ffd04a;
    --brand-border: rgba(255, 255, 255, 0.13);
    --brand-control-border: rgba(255, 255, 255, 0.2);
    --brand-focus: #55c3d6;
    --brand-shadow: 0 18px 50px rgba(0, 20, 35, 0.45);
    --brand-page-image: none;
    --brand-banner-image: none;
    --brand-radius: 18px;
    --brand-logo-size: 132px;
}

html,
body {
    min-height: 100%;
}

/* Full-viewport dark navy background with a radial cyan glow (board style). */
body,
body.basic-theme {
    margin: 0;
    color-scheme: dark;
    font-family: var(--mw-font);
    color: var(--mw-white);
    background-color: #002c47;
    background-image:
        radial-gradient(55rem 38rem at 80% -12%, rgba(85, 195, 214, 0.16) 0%, rgba(85, 195, 214, 0) 62%),
        radial-gradient(42rem 30rem at 8% 112%, rgba(85, 195, 214, 0.1) 0%, rgba(85, 195, 214, 0) 58%),
        linear-gradient(145deg, #00385a 0%, #003553 52%, #002c47 100%);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */

.basic-theme .app-page {
    padding-top: calc(48px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* Card column: spec width min(420px, 92vw). */
.basic-theme .app-content {
    max-width: min(420px, 92vw);
}

/* Login card: translucent panel, 1px light border, 18px radius, blur. */
.basic-theme .app-container {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 18px 50px rgba(0, 20, 35, 0.45);
    overflow: hidden;
}

/* The form inside the card carries no panel of its own. */
.basic-theme .app-container form {
    margin: 0;
    padding: 0;
    max-width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Cyan→yellow accent strip along the top of the card. */
.basic-theme .brand-banner {
    background-image: linear-gradient(90deg, #55c3d6 0%, #f1c232 100%);
    background-size: 100% 100%;
}

/* --------------------------------------------------------------------------
   Header: eyebrow above the card, hero title in the card's logo box
   -------------------------------------------------------------------------- */

.basic-theme .app-content::before {
    content: "COST & VALUE ENGINEERING";
    display: block;
    margin: 0 0 18px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.34em;
    font-size: 11px;
    font-weight: 600;
    color: #9dd8e2;
}

.basic-theme .logo-box {
    text-align: center;
}

.basic-theme .logo-img {
    display: block;
    margin: 0 auto 16px;
    max-width: 260px;
    filter: drop-shadow(0 8px 22px rgba(0, 20, 35, 0.35));
}

/* Hero-style title (the portal renders this as the page heading). */
.basic-theme .logo-txt {
    margin: 0 0 28px;
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
    text-align: center;
    color: var(--mw-white);
}

h1,
h2,
h3 {
    color: var(--mw-white);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

label,
.basic-theme .app-inp-lbl {
    color: rgba(247, 251, 253, 0.75);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-align: left;
}

input,
.basic-theme .app-inp-txt,
.basic-theme .app-inp-sel,
.basic-theme .app-inp-code-txt {
    color: var(--mw-white);
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-family: var(--mw-font);
    font-size: 15px;
}

input::placeholder,
.basic-theme .app-inp-txt::placeholder,
.basic-theme .app-inp-sel::placeholder {
    color: rgba(247, 251, 253, 0.45);
}

input:focus,
.basic-theme .app-inp-txt:focus,
.basic-theme .app-inp-sel:focus,
.basic-theme .app-inp-code-txt:focus {
    border-color: var(--mw-cyan);
    box-shadow: 0 0 0 3px rgba(85, 195, 214, 0.18);
}

/* Icon prefix color inside the input box. */
.basic-theme .app-inp-prf-img {
    color: rgba(247, 251, 253, 0.55);
}

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */

button,
.basic-theme .app-btn-pri,
.basic-theme .app-btn-sec,
.basic-theme .app-gen-btn-txt {
    font-family: var(--mw-font);
    font-weight: 700;
}

.basic-theme .app-btn-pri,
.basic-theme .app-gen-btn-txt {
    color: #002c47;
    background: #f1c232;
}

.basic-theme .app-btn-pri:hover,
.basic-theme .app-gen-btn-txt:hover {
    background: #ffd04a;
}

.basic-theme .app-btn-sec {
    color: var(--mw-white);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
}

.basic-theme .app-btn-sec:hover {
    background: rgba(255, 255, 255, 0.14);
}

a {
    color: var(--mw-cyan);
    text-decoration: none;
}

a:hover {
    color: #82d6e4;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.error,
.alert,
.message,
[role="alert"],
[class*="error"],
[class*="Error"],
[class*="invalid"] {
    color: var(--mw-red);
    font-size: 14px;
}

/* --------------------------------------------------------------------------
   QR / bookmark widgets (portal extras)
   -------------------------------------------------------------------------- */

.basic-theme #bookmarks .app-qr-toggle {
    color: var(--mw-cyan);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 10px;
}

.basic-theme #bookmarks .app-qr-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

body::after {
    content: "MEYER WERFT · DCVE TOOLBOX\ACOST & VALUE ENGINEERING";
    white-space: pre;
    position: fixed;
    bottom: 12px;
    left: 0;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 10px;
    line-height: 1.7;
    color: rgba(247, 251, 253, 0.38);
    pointer-events: none;
}