/*
    Almas ERP - shared UI foundation: legacy layout, component and
    authentication styles.

    Since Wave 12A.2 the design tokens live in almas/tokens.css and the global
    base rules (body, headings, links, focus, selection) in almas/base.css.
    This file keeps the existing layout / component / authentication rules,
    pending their own later slices (layout, components, utilities). Load order
    (both master pages):

        Bootstrap 5.3.3  ->  almas/tokens.css  ->  almas/base.css
            ->  almas/components.css  ->  almas-ui.css

    (Site.master alone additionally loads almas/shell.css, after this file.)

    It layers on Bootstrap 5 (Content/vendor/bootstrap/bootstrap.min.css)
    rather than duplicating it: tokens.css re-points Bootstrap's own CSS
    custom properties (--bs-*) at the Almas tokens, and this file adds the few
    almas-* classes Bootstrap does not provide (the page wrapper, the split
    authentication layout, ...). Reusable components live in
    almas/components.css.

    RTL/LTR - what is and is not logical:
      * The rules AUTHORED in this file use CSS logical properties
        (margin-inline, padding-inline, border-inline, inset-inline,
        inline-size, block-size, text-align: start/end) instead of
        left/right, and never inspect a language code. Direction comes only
        from the html[dir] attribute, which the application resolves from its
        localization context.
      * Bootstrap itself is not direction-neutral, which is why BOTH of its
        builds are vendored: Content/vendor/bootstrap/bootstrap.min.css (LTR)
        and bootstrap.rtl.min.css (the official Bootstrap 5.3.3 RTL build).
        BaseMasterPage.BootstrapStylesheetVirtualPath picks one from the
        database-resolved direction (never from a language code), in the same
        place that writes html[dir], so the stylesheet and the dir attribute
        cannot disagree. Bootstrap's physical-property utilities
        (.ms-3 / .me-3 / .ps-3 / .text-start / .float-start ...) are therefore
        mirrored by the RTL build itself; no [dir] patch is needed or used.
        In new markup, prefer the Almas logical rules over ad-hoc left/right
        values.
*/

/* ==========================================================================
   1. Bootstrap component overrides - moved to almas/components.css
      (Wave 12A.5.2): buttons, text/select/textarea, checkbox/radio, input
      group addon, labels and help text.
   ========================================================================== */

/* ==========================================================================
   2. Typography helpers
      (the global element rules - body, headings, links, focus-visible,
      selection - live in almas/base.css; label/help typography in
      almas/components.css)
   ========================================================================== */
.almas-lede {
    color: var(--almas-color-text-muted);
    font-size: var(--almas-font-size-md);
    margin-block-end: var(--almas-space-4);
}

/* The former global "table" font-size rule is gone: tables are styled only
   through .almas-table (almas/components.css section 8, Wave 12A.6.2). */

/* ==========================================================================
   3. Layout primitives (reused across pages/master pages)
   ========================================================================== */
.almas-page {
    padding-block: var(--almas-space-4);
}

/* Page header, page actions, card, form section, badge and empty state moved
   to almas/components.css section 7 (Wave 12A.5.4). The table scroll wrapper
   (.almas-table-wrap, which replaces the unused .almas-table-container) is
   in section 8 (Wave 12A.6.2). */

.almas-shadow-lg {
    box-shadow: var(--almas-shadow-lg);
}

/* ==========================================================================
   4. Alerts (validation / error surfaces) - reuses Bootstrap's .alert, only
      the danger tint is nudged toward the Almas palette for consistency.
   ========================================================================== */
.alert-danger {
    background-color: var(--almas-color-danger-subtle);
    border-color: rgba(var(--almas-color-danger-rgb), .25);
    color: var(--almas-color-danger-text);
}

.alert-warning {
    background-color: var(--almas-color-warning-subtle);
    border-color: rgba(var(--almas-color-warning-rgb), .25);
    color: var(--almas-color-warning-text);
}

/* Root-cause fix for alert/label overlap: Web Forms' asp:Label renders as a
   <span> (inline by default). Bootstrap's compiled .alert rule sets
   padding/background/border/margin-bottom but never sets display - it
   assumes a block-level host element (typically a <div>). margin-bottom has
   no layout effect on an inline element, so a Label styled with "alert"
   alone visually collides with whatever block content follows it, no matter
   how large that margin is. This class forces genuine block-level flow so
   the margin actually reserves space. Apply alongside "alert alert-danger"
   (or alert-warning) on any Label used as an inline message - reusable by
   any future form, not Login-specific. */
.almas-alert {
    display: block;
    margin-block-end: var(--almas-space-4);
}

/* Field-level validation (RequiredFieldValidator, and any future Web Forms
   validator using the same class): normal document flow, no reserved space
   when hidden (Display="Dynamic" toggles the browser's own display style;
   this class only supplies the "when shown" value), restrained danger tint,
   smaller than body text, sits directly below its field. Reusable by every
   future ERP form, not just Login. */
.almas-field-validation {
    display: block;
    color: var(--almas-color-danger-text);
    font-size: var(--almas-font-size-sm);
    line-height: 1.4;
    margin-block-start: var(--almas-space-1);
}

/* ==========================================================================
   5. Application shell - moved to almas/shell.css (Wave 12A.4.1), which only
      Site.master loads. No shell layout remains in this file.
   ========================================================================== */

/* ==========================================================================
   6. Authentication layout (Auth.master)
   ========================================================================== */
.almas-auth-body {
    background: var(--almas-color-bg);
}

.almas-auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .almas-auth-shell {
        flex-direction: row;
    }
}

.almas-auth-brand {
    position: relative;
    overflow: hidden;
    flex: 0 1 42%;
    background: linear-gradient(160deg, var(--almas-color-primary-deep), var(--almas-color-primary));
    color: var(--almas-color-on-primary);
    align-items: center;
    justify-content: center;
    padding: var(--almas-space-5);
}

/* Restrained, purely-geometric decoration: two faint rotated-square (diamond)
   outlines bleeding off the panel edges - no illustration, no downloaded
   image. Positioned with logical inset properties so they stay correct if
   this panel is ever mirrored. Sits behind .almas-auth-brand-inner via
   z-index, since generated content would otherwise interleave with it. */
.almas-auth-brand::before,
.almas-auth-brand::after {
    content: "";
    position: absolute;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12%;
    transform: rotate(45deg);
    pointer-events: none;
}

.almas-auth-brand::before {
    inline-size: 24rem;
    block-size: 24rem;
    inset-inline-end: -9rem;
    inset-block-start: -8rem;
}

.almas-auth-brand::after {
    inline-size: 15rem;
    block-size: 15rem;
    inset-inline-start: -6rem;
    inset-block-end: -5rem;
    border-color: rgba(255, 255, 255, .07);
}

.almas-auth-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 24rem;
}

/* Small CSS-only monogram (a rotated square / diamond outline with an
   upright letterform) - stands in for a logo asset until a real one exists.
   The diamond is a purely geometric mark; the letterform is the initial of the
   product name (MADARIX). */
.almas-monogram {
    inline-size: 3rem;
    block-size: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, .6);
    border-radius: 18%;
    transform: rotate(45deg);
    margin-block-end: var(--almas-space-4);
}

.almas-monogram span {
    display: inline-block;
    transform: rotate(-45deg);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--almas-color-on-primary);
}

.almas-brand-mark {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--almas-color-on-primary);
    letter-spacing: .01em;
}

.almas-brand-mark strong {
    font-weight: 700;
}

.almas-auth-brand-tagline {
    margin-block-start: var(--almas-space-2);
    color: rgba(255, 255, 255, .78);
    font-size: var(--almas-font-size-md);
}

.almas-auth-content {
    flex: 1 1 58%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--almas-space-4);
}

.almas-auth-card-wrap {
    width: 100%;
    max-width: 25rem;
}

.almas-auth-card-wrap .almas-brand-mark {
    color: var(--almas-color-primary-strong);
    display: block;
    text-align: center;
    margin-block-end: var(--almas-space-3);
    font-size: 1.125rem;
}

.almas-auth-card {
    background: var(--almas-color-surface);
    border: 1px solid var(--almas-color-border);
    border-radius: var(--almas-radius-lg);
    box-shadow: var(--almas-shadow-md);
    padding: var(--almas-space-5) var(--almas-space-4);
}

.almas-auth-card-title {
    margin-block-end: var(--almas-space-1);
}

.almas-auth-card-subtitle {
    color: var(--almas-color-text-muted);
    font-size: var(--almas-font-size-md);
    margin-block-end: var(--almas-space-4);
}

/* Mobile refinement: below the point the split brand panel is already
   hidden (matches the d-lg-* cutoff used in Auth.master), the page is a
   single centered column - keep it top-weighted instead of dead-center so
   short/keyboard-shrunk viewports don't read as mostly empty space above
   the card. The card can still grow arbitrarily tall (validation messages,
   the auth alert) since this only changes cross-axis alignment, not any
   fixed height. */
@media (max-width: 991.98px) {
    .almas-auth-content {
        align-items: flex-start;
        padding-block-start: var(--almas-space-4);
    }
}

/* Very narrow phones only: trim the card's own horizontal padding a little
   so more width goes to the controls themselves. Controls/targets are not
   reduced - only the surrounding whitespace. */
@media (max-width: 420px) {
    .almas-auth-card {
        padding: var(--almas-space-4) var(--almas-space-3);
    }
}

/* ==========================================================================
   7. Password visibility toggle - a compact icon control INSIDE the field,
      not an attached button. Positioned with logical inset properties so it
      sits at the inline-end side (right in LTR, left in RTL) automatically.
   ========================================================================== */
.almas-input-icon-group {
    position: relative;
}

.almas-input-icon-group .form-control {
    padding-inline-end: 2.75rem;
}

.almas-password-toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--almas-color-text-muted);
    border-radius: var(--almas-radius-md);
    cursor: pointer;
}

.almas-password-toggle:hover {
    color: var(--almas-color-primary);
}

.almas-password-toggle svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
}

.almas-password-toggle .almas-icon-eye-off {
    display: none;
}

.almas-password-toggle.is-visible .almas-icon-eye {
    display: none;
}

.almas-password-toggle.is-visible .almas-icon-eye-off {
    display: inline-flex;
}

/* ------------------------------------------------------------------ 15. Holding overview (Holding Edition V1): key figures + structure tree. Tokens only; logical properties so RTL needs no override. */
.almas-figure-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--almas-space-4); list-style: none; margin: 0 0 var(--almas-space-5); padding: 0; }
.almas-figure { background: var(--almas-color-surface); border: 1px solid var(--almas-color-border); border-radius: var(--almas-radius-lg); padding: var(--almas-space-4); display: flex; flex-direction: column; gap: var(--almas-space-1); }
.almas-figure-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--almas-color-primary-strong); }
.almas-figure-label { color: var(--almas-color-text); font-weight: 600; }
.almas-figure-note { color: var(--almas-color-text-muted); font-size: var(--almas-font-size-sm); }
.almas-tree, .almas-tree ul { list-style: none; margin: 0; padding-inline-start: var(--almas-space-5); border-inline-start: 1px solid var(--almas-color-border); }
.almas-tree { padding-inline-start: 0; border-inline-start: 0; }
.almas-tree-node { padding-block: var(--almas-space-1); }
.almas-tree-label { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--almas-space-2); }
.almas-tree-kind { color: var(--almas-color-text-muted); font-size: var(--almas-font-size-sm); }
.almas-tree-code { color: var(--almas-color-text-muted); font-size: var(--almas-font-size-sm); }
.almas-tree-holding > .almas-tree-label { font-weight: 700; }
.almas-tree-company > .almas-tree-label { font-weight: 600; }
.almas-result-links { display: flex; flex-wrap: wrap; gap: var(--almas-space-2); }
/* ------------------------------------------------------------------ 16. Catalog / supplier management (Step 13.1): section tabs, readiness findings, key/value rows. Tokens only; logical properties so RTL needs no override. */
.almas-subnav { display: flex; flex-wrap: wrap; gap: var(--almas-space-1); margin: 0 0 var(--almas-space-4); padding: 0; list-style: none; border-block-end: 1px solid var(--almas-color-border); }
.almas-subnav a { display: inline-block; padding: var(--almas-space-2) var(--almas-space-4); border: 1px solid transparent; border-block-end: 0; border-start-start-radius: var(--almas-radius-md); border-start-end-radius: var(--almas-radius-md); color: var(--almas-color-text-muted); text-decoration: none; font-weight: 600; }
.almas-subnav a:hover { color: var(--almas-color-primary); }
.almas-subnav a[aria-current="page"] { color: var(--almas-color-primary-strong); background: var(--almas-color-surface); border-color: var(--almas-color-border); margin-block-end: -1px; }
.almas-readiness { list-style: none; margin: 0 0 var(--almas-space-4); padding: 0; display: grid; gap: var(--almas-space-2); }
.almas-readiness li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--almas-space-2); padding: var(--almas-space-2) var(--almas-space-3); border: 1px solid var(--almas-color-border); border-radius: var(--almas-radius-md); background: var(--almas-color-surface); }
.almas-readiness-error { border-inline-start: 4px solid var(--almas-color-danger, #b3261e); }
.almas-readiness-warning { border-inline-start: 4px solid var(--almas-color-warning, #b26a00); }
.almas-readiness-ok { border-inline-start: 4px solid var(--almas-color-success, #1b7f3b); }
.almas-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--almas-space-3) var(--almas-space-5); margin: 0 0 var(--almas-space-4); }
.almas-kv dt { color: var(--almas-color-text-muted); font-size: var(--almas-font-size-sm); }
.almas-kv dd { margin: 0; font-weight: 600; }
.almas-check-row { display: flex; flex-wrap: wrap; gap: var(--almas-space-4); }