/* =============================================================================
   mot-soi-tra-brand.css — Một Sợi Trà Canonical Brand Stylesheet
   Linked last across desktop & mobile POS and Manage interfaces.
   Provides canonical purple/lavender/cream palette, resolves variable cycles,
   adapts table views to brand tokens, and styles official logo/wordmark assets.
   ============================================================================= */

@media screen {
  /* ---------------------------------------------------------------------------
     1. Canonical Palette & Variable Definitions
     Default purple/lavender/cream palette.
     Aliased to existing --bg, --cream, --terra, --primary, etc., ensuring
     dynamic styles injected by pos-shared-settings remain authoritative.
     --------------------------------------------------------------------------- */
  :root {
    /* Canonical Một Sợi Trà Brand Tokens */
    --mt-brand: #7135a5;
    --mt-brand-dark: #542078;
    --mt-brand-light: #f0e6fa;
    --mt-nav: #2e1741;
    --mt-nav-ink: #f0e6fa;
    --mt-nav-text: #f0e6fa;
    --mt-nav-muted: #94809f;
    --mt-nav-hover: rgba(255, 255, 255, 0.08);
    --mt-nav-active: #7135a5;
    --mt-bg: #faf7fc;
    --mt-bg-deep: #f2eaf8;
    --mt-surface: #fffefd;
    --mt-soft: #f6effb;
    --mt-cream: #f2eaf8;
    --mt-cream-soft: #f6effb;
    --mt-panel: #fffbf5;
    --mt-card: #fffefd;
    --mt-ink: #2d2036;
    --mt-ink-2: #51415e;
    --mt-muted: #73647e;
    --mt-muted-soft: #94809f;
    --mt-line: #e5d9ee;
    --mt-line-strong: #c7b3d7;
    --mt-price: #653096;
    --mt-accent: #7135a5;
    --mt-primary: #7135a5;
    --mt-primary-dark: #542078;
    --mt-primary-soft: #f0e6fa;
    --mt-terra: #7135a5;
    --mt-terra-dark: #542078;
    --mt-chip-on: #eadcf6;

    /* Base aliases: route existing variables directly to --mt-* tokens */
    --brand: var(--mt-brand);
    --brand-dark: var(--mt-brand-dark);
    --brand-light: var(--mt-brand-light);
    --nav: var(--mt-nav);
    --bg: var(--mt-bg);
    --cream: var(--mt-cream);
    --cream-soft: var(--mt-cream-soft);
    --panel: var(--mt-panel);
    --card: var(--mt-card);
    --ink: var(--mt-ink);
    --ink-2: var(--mt-ink-2);
    --muted: var(--mt-muted);
    --muted-soft: var(--mt-muted-soft);
    --line: var(--mt-line);
    --line-strong: var(--mt-line-strong);
    --price: var(--mt-price);
    --accent: var(--mt-accent);
    --primary: var(--mt-primary);
    --primary-dark: var(--mt-primary-dark);
    --primary-soft: var(--mt-primary-soft);
    --terra: var(--mt-terra);
    --terra-dark: var(--mt-terra-dark);
    --chip-on: var(--mt-chip-on);
  }

  /* ---------------------------------------------------------------------------
     2. Resolution of Manage & Mobile CSS Variable Cycles
     Explicitly bind manage tokens to concrete values so cyclic var(--bg)
     fallbacks from manage-native.css cannot invalidate properties at computed time.
     --------------------------------------------------------------------------- */
  :root {
    --mt-nav-text: #f0e6fa;
    --mt-nav-muted: #94809f;
    --mt-nav-hover: rgba(255, 255, 255, 0.08);
    --mt-nav-active: var(--mt-primary, #7135a5);
  }

  /* Focus semantics preservation */
  :focus-visible {
    outline: 2px solid var(--mt-brand, #7135a5);
    outline-offset: 2px;
  }

  /* ---------------------------------------------------------------------------
     3. Table View Brand Overrides
     Scoped to body.native-tables-page #pos-shell[data-view="tables"].
     Replaces teal --nt-* variables with --mt-* aliases while preserving
     geometry, layouts, and semantic busy/free status distinctions.
     --------------------------------------------------------------------------- */
  body.native-tables-page,
  body.native-tables-page #pos-shell[data-view="tables"] {
    --nt-accent: var(--mt-accent, #7135a5);
    --nt-dark: var(--mt-primary-dark, #542078);
    --nt-cream: var(--mt-bg, #faf7fc);
    --nt-panel: var(--mt-panel, #fffbf5);
    --nt-card: var(--mt-card, #fffefd);
    --nt-ink: var(--mt-ink, #2d2036);
    --nt-inksoft: var(--mt-ink-2, #51415e);
    --nt-muted: var(--mt-muted, #73647e);
    --nt-line: var(--mt-line, #e5d9ee);
    --nt-creamsoft: var(--mt-cream-soft, #f6effb);
    --nt-border-inactive: var(--mt-muted-soft, #94809f);
  }

  /* ---------------------------------------------------------------------------
     4. Logo Parent Containers (Pale Background, Contained)
     Styles existing mark containers in splash, auth, headers, sidebar, and buttons.
     --------------------------------------------------------------------------- */
  .splash-mark {
    background: #ffffff;
    border: 1px solid var(--mt-line);
    color: var(--mt-brand);
    box-shadow: 0 10px 24px rgba(113, 53, 165, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .login-mark,
  .auth-mark {
    background: #ffffff;
    border: 1px solid var(--mt-line);
    color: var(--mt-brand);
    box-shadow: 0 4px 12px rgba(113, 53, 165, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .mbrand-mark,
  body.mm .mbrand-mark {
    background: #ffffff;
    border: 1px solid var(--mt-line);
    color: var(--mt-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .brand-btn {
    background: #ffffff;
    border: 1px solid var(--mt-line);
    color: var(--mt-brand);
    box-shadow: 0 2px 6px rgba(113, 53, 165, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .brand-btn:active {
    background: var(--mt-chip-on);
  }

  .brand-btn > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .tab.brand .tab-icon,
  .tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }

  /* ---------------------------------------------------------------------------
     5. Real Image Markup: .mst-logo (Leaf) & .mst-wordmark (Wide Lettering)
     - .mst-logo: Leaf screenshot asset (192x102).
     - .mst-wordmark: Lettering asset (621x157).
     - object-fit: contain prevents distortion from poster crop edge artifacts.
     --------------------------------------------------------------------------- */
  img.mst-logo,
  .mst-logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    aspect-ratio: 1;
  }

  img.mst-wordmark,
  .mst-wordmark {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    aspect-ratio: 621 / 157;
  }

  /* Specific sizes across contexts */
  /* Header / Nav brand images (~28-32px) */
  .tab.brand .tab-icon .mst-logo,
  .tab.brand .mst-logo,
  .brand-btn .mst-logo,
  .brand-btn > span .mst-logo,
  .mbrand-mark .mst-logo {
    height: 34px;
    max-height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  /* Login / Auth brand images (~48px) */
  .login-mark .mst-logo,
  .auth-mark .mst-logo,
  .login-brand .mst-logo,
  .auth-brand .mst-logo {
    height: 48px;
    max-height: 48px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  /* Splash brand images (64px) */
  .splash-mark .mst-logo,
  .splash .mst-logo {
    height: 64px;
    max-height: 64px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  /* Wordmark: strictly for Login / Auth and Splash screens only */
  .splash .mst-wordmark,
  .splash-name .mst-wordmark {
    height: 44px;
    max-height: 48px;
    width: auto;
    max-width: min(280px, 80vw);
    margin: 0 auto;
    object-fit: contain;
  }

  .login-brand .mst-wordmark,
  .auth-brand .mst-wordmark,
  .login-card .mst-wordmark,
  .auth-card .mst-wordmark {
    height: 34px;
    max-height: 40px;
    width: auto;
    max-width: min(240px, 70vw);
    object-fit: contain;
  }

  /* Prevent wordmark from appearing in navigation / header / sidebar text */
  .tab .mst-wordmark,
  .brand-btn .mst-wordmark {
    display: none !important;
  }

  .mbrand-text .mst-wordmark {
    display: block;
    width: 140px;
    height: 32px;
    object-fit: contain;
    object-position: left center;
    /* A single-color counterpart on the dark navigation background. */
    filter: brightness(0) invert(1);
  }

  .splash-mark, .login-mark, .auth-mark,
  .mbrand-mark, body.mm .mbrand-mark, .brand-btn {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }

  .mbrand-mark .mst-logo {
    filter: brightness(0) invert(1);
  }

  .tab.brand.active .mst-logo,
  .tab.brand.is-active .mst-logo,
  .native-tables-page #pos-shell[data-view="tables"] .tab.brand .mst-logo {
    filter: brightness(0) invert(1);
  }

  /* Disallow fake :before text logos */
  .splash-mark::before,
  .login-mark::before,
  .auth-mark::before,
  .mbrand-mark::before,
  .brand-btn::before,
  .brand-btn > span::before,
  .tab-icon::before,
  .mst-logo::before,
  .mst-logo::after,
  .mst-wordmark::before,
  .mst-wordmark::after {
    content: none !important;
  }
}

/* -----------------------------------------------------------------------------
   6. Print Media Rules
   Hides only new brand images; preserves receipt and general print variables.
   ----------------------------------------------------------------------------- */
@media print {
  .mst-logo,
  .mst-wordmark {
    display: none !important;
  }
}