/**
 * AIM.Shared.UI - Main Stylesheet
 * Version: 1.0.0
 * Created: February 9, 2026
 *
 * Consolidated CSS for AIM Razor Class Library components
 * Part of 6-week modularization project
 */

/* ============================================
   ROOT VARIABLES
   ============================================ */
:root {
    /* AIM Brand Colors — chained to derived system in theme-definitions.css */
    --aim-primary: var(--primary-color);
    --aim-primary-dark: var(--primary-hover);
    --aim-primary-light: var(--action);

    --aim-secondary: var(--secondary-color);
    --aim-success: var(--ok);
    --aim-danger: var(--bad);
    --aim-warning: var(--warn);
    --aim-info: var(--info);

    /* Layout Colors */
    --aim-bg-primary: var(--raised);
    --aim-bg-secondary: var(--ground);
    --aim-bg-dark: var(--color-neutral-darkest);

    /* Text Colors */
    --aim-text-primary: var(--ink);
    --aim-text-secondary: var(--secondary-light);
    --aim-text-light: var(--color-white);

    /* Border Colors */
    --aim-border: var(--line);
    --aim-border-dark: var(--line-strong);

    /* Spacing — alias to global scale */
    --aim-spacing-xs: var(--space-xs);
    --aim-spacing-sm: var(--space-sm);
    --aim-spacing-md: var(--space-md);
    --aim-spacing-lg: var(--space-lg);
    --aim-spacing-xl: var(--space-xl);

    /* Border Radius — alias to global scale */
    --aim-radius-sm: var(--radius-sm);
    --aim-radius-md: var(--radius-md);
    --aim-radius-lg: var(--radius-lg);

    /* Shadows — alias to global scale */
    --aim-shadow-sm: var(--lift-1);
    --aim-shadow-md: var(--lift-2);
    --aim-shadow-lg: var(--lift-3);

    /* Typography — the --aim-font-size-* alias family is RETIRED (responsive plan
       §3.2): it was a parallel escape from the --text-* scale, and its ≤768
       override silently shrank .aim-component text against the density tiers.
       Consumers use --text-* directly. */
    --aim-font-family: var(--font-primary);
}

/* Dark-mode redeclaration. The --aim-* brand/surface/text/border aliases
   above are declared only at :root and chain through theme-aware tokens
   (--surface-raised, --surface-base, --body-text-color, --border-subtle, etc.).
   Browsers snapshot-resolve those var() chains at :root using LIGHT-mode
   values, so every .aim-card / .aim-component descendant under
   [data-theme="aim-dark"] gets the light value via cascade. Same failure
   mode as the --wf-* and --am-* alias families. Redeclaring here pins each
   --aim-* token to its body-scoped theme target. Spacing/radius/shadow/font
   aliases are NOT redeclared because they're not theme-aware. */
[data-theme="aim-dark"] {
    --aim-primary: var(--primary-color);
    --aim-primary-dark: var(--primary-hover);
    --aim-primary-light: var(--action);

    --aim-secondary: var(--secondary-color);
    --aim-success: var(--ok);
    --aim-danger: var(--bad);
    --aim-warning: var(--warn);
    --aim-info: var(--info);

    --aim-bg-primary: var(--raised);
    --aim-bg-secondary: var(--ground);
    --aim-bg-dark: var(--color-neutral-darkest);

    --aim-text-primary: var(--ink);
    --aim-text-secondary: var(--secondary-light);

    --aim-border: var(--line);
    --aim-border-dark: var(--line-strong);
}

/* ============================================
   COMPONENT BASE STYLES
   ============================================ */

/* AIM Component Container */
.aim-component {
    font-family: var(--aim-font-family);
    font-size: var(--text-base);
    color: var(--ink);
}

/* AIM Card — May 7 2026 design refresh.
   Page bg dialed to ~#F5F6F8 (5% brand mix) means colour contrast between
   page and card is now subtle. The correct compensation is on a different
   perceptual channel — edge contrast (border) + depth contrast (shadow).
   Tinting --surface-raised would solve the same problem on the same channel
   we just deliberately backed off from.

   - Border: slate at 10% (--primary-alpha-10) keeps every layer in the same
     hue family as the navbar. 10% is the sweet spot — below 6% disappears on
     retina, above 15% reads as 2014 framed-card.
   - Shadow: nearly-flat single layer at 4% slate-on-dark. Just enough to
     read as "lifted" without the 2-layer Material drop shadow weight.
   - Radius: 12px (--radius-lg). */
.aim-card {
    background-color: var(--aim-bg-primary);          /* keep #FFFFFF */
    border: 1px solid var(--primary-alpha-10);        /* slate at 10% */
    border-radius: var(--radius-lg);                  /* 12px */
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-neutral-darkest) 4%, transparent);
    padding: var(--aim-spacing-md);
    margin-bottom: var(--aim-spacing-md);
}

/* Hover lift — only on cards that are actually interactive. The default
   .aim-card is static; opt in to `.aim-card--interactive` (or `.aim-card.is-clickable`)
   for the lift. Stops every-card-on-screen breathing on mouse move. */
.aim-card--interactive:hover,
.aim-card.is-clickable:hover {
    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-neutral-darkest) 6%, transparent);
}

/* Card header — UNIFIED with table thead (May 8 2026). Flat slate@12% bg
   + inset groove, same padding + letter-spacing as .aim-th. Token name
   stays separate (--aim-card-header-bg) so cards can diverge later
   without breaking table consumers, but value is currently aliased to
   --aim-table-header-bg for a single coherent colour vision.

   Flex layout is built in: .aim-card-header__title (left) +
   .aim-card-header__actions (right). Mirrors the production
   .sm-card-header pattern used across Site Details / Estate Manager so
   consumers don't need inline style="display: flex" for every card. */
.aim-card-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 12px 14px;
    background: var(--aim-card-header-bg);
    color: var(--aim-table-header-color);
    box-shadow: var(--aim-table-header-groove);
    letter-spacing: 0.3px;
    font-weight: 600;
    /* Match parent card's top border-radius so the bg fills cleanly */
    border-top-left-radius: calc(var(--radius-lg) - 1px);
    border-top-right-radius: calc(var(--radius-lg) - 1px);
}

/* Title slot — icon + label + optional count badge. Flex so the count
   badge sits cleanly to the right of the label without breaking line. */
.aim-card-header__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aim-card-header__title i {
    flex-shrink: 0;
    color: var(--ink-muted);
}

/* Actions slot — buttons, toggles, refresh icons. Right-aligned by default
   because it sits at the end of a flex container with justify-content
   space-between. */
.aim-card-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* Header is itself the click target (collapse, navigate). Reset cursor
   on inner buttons so they don't inherit the wrong affordance. */
.aim-card-header.is-clickable {
    cursor: pointer;
}

.aim-card-header.is-clickable .aim-card-header__actions button,
.aim-card-header.is-clickable .aim-card-header__actions a {
    cursor: pointer;
}

.aim-card-body {
    padding: var(--aim-spacing-md);
}

.aim-card-footer {
    padding: var(--aim-spacing-md);
    border-top: 1px solid var(--line);
    background-color: var(--aim-bg-secondary);
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */

/* Navbar (will be populated when component is extracted) */
.aim-navbar {
    /* Styles will be added during navbar extraction in Week 2 */
}

/* Sidebar */
.aim-sidebar {
    /* Styles will be added during sidebar extraction */
}

/* Footer */
.aim-footer {
    padding: var(--aim-spacing-lg);
    background-color: var(--aim-bg-dark);
    color: var(--aim-text-light);
    text-align: center;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing Utilities */
.aim-m-0 { margin: 0; }
.aim-m-1 { margin: var(--aim-spacing-xs); }
.aim-m-2 { margin: var(--aim-spacing-sm); }
.aim-m-3 { margin: var(--aim-spacing-md); }
.aim-m-4 { margin: var(--aim-spacing-lg); }
.aim-m-5 { margin: var(--aim-spacing-xl); }

.aim-p-0 { padding: 0; }
.aim-p-1 { padding: var(--aim-spacing-xs); }
.aim-p-2 { padding: var(--aim-spacing-sm); }
.aim-p-3 { padding: var(--aim-spacing-md); }
.aim-p-4 { padding: var(--aim-spacing-lg); }
.aim-p-5 { padding: var(--aim-spacing-xl); }

/* Display Utilities */
.aim-d-none { display: none; }
.aim-d-block { display: block; }
.aim-d-flex { display: flex; }
.aim-d-grid { display: grid; }

/* Flex Utilities */
.aim-flex-row { flex-direction: row; }
.aim-flex-column { flex-direction: column; }
.aim-justify-start { justify-content: flex-start; }
.aim-justify-center { justify-content: center; }
.aim-justify-end { justify-content: flex-end; }
.aim-justify-between { justify-content: space-between; }
.aim-align-start { align-items: flex-start; }
.aim-align-center { align-items: center; }
.aim-align-end { align-items: flex-end; }

/* Text Utilities */
.aim-text-left { text-align: left; }
.aim-text-center { text-align: center; }
.aim-text-right { text-align: right; }
.aim-text-primary { color: var(--action); }
.aim-text-secondary { color: var(--ink-muted); }
.aim-text-success { color: var(--ok); }
.aim-text-danger { color: var(--bad); }
.aim-text-warning { color: var(--warn); }

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Canonical 767 tier (responsive plan §4.1). The old --aim-font-size-base
   override is gone with the alias family — mobile text stays at the 14px
   baseline for touch legibility; layout reflows instead of shrinking. */
@media (max-width: 767px) {
    .aim-card {
        padding: var(--aim-spacing-sm);
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus Styles — DELIBERATELY EMPTY (2026-08-03).
   This file used to carry:

       *:focus { outline: 2px solid var(--action); outline-offset: 2px; }

   Three problems, and it was the app's dominant focus style because this
   sheet loads AFTER aim-consolidated.css in both layouts and `*:focus`
   ties it on specificity (0,1,0), so source order decided it:

     · `*:focus`, not `:focus-visible` — fires on MOUSE CLICK, so clicking
       any control left a hard box stuck on it until you clicked elsewhere.
     · --aim-primary resolves to --brand-primary, the FILL token. CSS11
       reserves --brand-border-on-surface for outlines precisely because
       --brand-primary vanishes on an aim-dark card and reads as a navy
       slab on white.
     · `outline-offset: 2px` at AIM density puts the ring on the neighbour.

   The focus system now lives in ONE place: wwwroot/css/aim-consolidated.css
   § Focus (ring tier + halo tier), on the --focus-ring-* tokens defined in
   theme-definitions.css. Do not reintroduce a rule here — a universal
   selector in this sheet silently overrides that system app-wide. */

/* Skip Navigation */
.aim-skip-nav {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--action);
    color: var(--aim-text-light);
    padding: var(--aim-spacing-sm) var(--aim-spacing-md);
    text-decoration: none;
    z-index: 10000;
}

.aim-skip-nav:focus {
    top: 0;
}

/* Screen Reader Only */
.aim-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .aim-navbar,
    .aim-sidebar,
    .aim-footer {
        display: none;
    }

    .aim-card {
        box-shadow: none;
        border: 1px solid var(--color-black);
    }
}

/* ============================================================================
   Global site-search dropdown
   ----------------------------------------------------------------------------
   The dropdown is appended to document.body by GlobalSiteSearch.ts so it can
   escape the navbar's transform-based stacking context (.navbar-center-slot
   uses translateX(-50%) which would otherwise trap a position: absolute child
   inside the navbar's box). Position is computed in JS via
   getBoundingClientRect() and set via inline top/left/width.

   The wrapper / input / icon / spinner styles that DO sit inside the navbar
   stay in AimNavbar.razor.css (they need the navbar's --mainnav-text-color
   tinting). Everything below applies to the body-attached dropdown only.
   ============================================================================ */

.global-search-results {
    position: fixed;
    /* top / left / width set by JS — see GlobalSiteSearch.ts positionResults(), which sizes
       the panel to a readable minimum rather than to the (narrow) navbar input. The clamp
       below is the belt-and-braces version of the same rule for any viewport the JS hasn't
       recomputed for yet (responsive.md §3). */
    max-width: calc(100vw - 32px);
    background: var(--raised);
    border: 1px solid color-mix(in srgb, var(--color-black) 12%, transparent);
    border-radius: 8px;
    box-shadow: var(--lift-2);
    max-height: 400px;
    overflow-y: auto;
    z-index: 99999;
    color: var(--ink);
}

.global-search-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid color-mix(in srgb, var(--color-black) 5%, transparent);
    transition: background 0.15s ease;
}

.global-search-result-item:last-child {
    border-bottom: none;
}

.global-search-result-item:hover,
.global-search-result-item.highlighted {
    background: color-mix(in srgb, var(--color-black) 4%, transparent);
}

/* Both columns truncate rather than wrap. A result is a one-glance identity, so a long
   address must cost an ellipsis, not four extra lines of row height — and min-width: 0 is
   what actually lets a flex child shrink below its content width (without it, text-overflow
   on the children never fires). Identity (ref + name) gets the elastic column; the meta
   column is capped so it can never squeeze the identity out. */
.global-search-result-item .result-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.global-search-result-item .result-ref,
.global-search-result-item .result-name,
.global-search-result-item .result-ids,
.global-search-result-item .result-Project,
.global-search-result-item .result-location {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.global-search-result-item .result-ref {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--brand-on-surface);
}

.global-search-result-item .result-name {
    font-size: 0.78rem;
    color: var(--ink-muted);
}

/* The identifier a hit came through when the reference does not show it (2026-10-06) - a VF
   number held only in its own column. Quiet, like the secondary line (§20.2); the <mark> inside
   carries the signal. */
.global-search-result-item .result-ids {
    font-size: var(--text-xs);
    color: var(--ink-faint);
}

.global-search-result-item .result-meta {
    text-align: right;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 45%;
    margin-left: 1rem;
}

.global-search-result-item .result-Project {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ink);
}

.global-search-result-item .result-location {
    font-size: 0.72rem;
    color: var(--ink-muted);
}

/* The matched substring. Tints the text and its bed rather than painting a block of
   colour — the search results are a dense list, and a solid highlighter fill on every
   row would spend the panel's whole colour budget on "a row exists" (§20.6). */
.global-search-result-item mark.global-search-hit {
    background: var(--action-wash);
    color: inherit;
    font-weight: 700;
    border-radius: 2px;
    padding: 0 1px;
}

.global-search-no-results,
.global-search-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--ink-muted);
    font-size: 0.85rem;
}

.global-search-error {
    color: var(--bad);
}

/* ============================================
   COMPACT SCROLLBARS (app-wide, 2026-05-08)
   ============================================
   User asked for thin, almost-invisible scrollbars throughout the app.
   Track stays transparent; thumb is a faint tertiary-text mix that darkens
   on hover. Tokens stay theme-aware so dark mode auto-tones. Firefox uses
   the standard scrollbar-* properties; Chromium/WebKit needs the pseudo
   selectors.

   Scoped via :root so it cascades across every surface (page chrome,
   panels, tables, modals) without each component opting in. Components that
   need a beefier scrollbar can override locally. */
:root {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--ink-faint) 35%, transparent) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--ink-faint) 30%, transparent);
    border-radius: var(--radius-full, 9999px);
    transition: background 150ms ease;
}

*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--ink-faint) 65%, transparent);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}