/* ==========================================================================
   Star Micronics — FluentUI-Blazor theme override
   --------------------------------------------------------------------------
   Drop into wwwroot/css/ and link AFTER the Fluent stylesheet:

     <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
     <link href="css/star-theme.css" rel="stylesheet" />

   This file maps Fluent's design tokens to the Star Micronics token system
   defined in colors_and_type.css. The accent ramp Fluent derives at runtime
   is overridden directly via :root vars so SSR + cold load look correct.
   ========================================================================== */

@import url('./colors_and_type.css');

/* --------------------------------------------------------------------------
   1. Global Fluent token overrides
   -------------------------------------------------------------------------- */
:root,
fluent-design-system-provider {
  /* Brand accent ---------------------------------------------------------- */
  --accent-base-color:         #0053a0;
  --accent-fill-rest:          var(--star-blue);
  --accent-fill-hover:         var(--star-blue-700);
  --accent-fill-active:        var(--star-blue-800);
  --accent-fill-focus:         var(--star-blue);
  --accent-foreground-rest:    #ffffff;
  --accent-foreground-hover:   #ffffff;
  --accent-foreground-active:  #ffffff;
  --accent-stroke-control-rest: var(--star-blue-700);

  /* Neutrals — light theme ----------------------------------------------- */
  --neutral-foreground-rest:   var(--ink-900);
  --neutral-foreground-hover:  var(--ink-900);
  --neutral-foreground-active: var(--ink-900);
  --neutral-foreground-hint:   var(--ink-500);

  --neutral-fill-rest:         #ffffff;
  --neutral-fill-hover:        var(--ink-050);
  --neutral-fill-active:       var(--ink-100);

  --neutral-fill-secondary-rest:   var(--ink-050);
  --neutral-fill-secondary-hover:  var(--ink-100);

  --neutral-fill-stealth-rest:   transparent;
  --neutral-fill-stealth-hover:  var(--ink-050);
  --neutral-fill-stealth-active: var(--ink-100);

  --neutral-stroke-rest:        var(--border);
  --neutral-stroke-hover:       var(--border-strong);
  --neutral-stroke-active:      var(--border-strong);
  --neutral-stroke-divider-rest: var(--divider);

  --neutral-layer-1:           var(--bg);              /* primary surface */
  --neutral-layer-2:           var(--bg-subtle);       /* card / panel */
  --neutral-layer-3:           var(--surface-elevated);
  --neutral-layer-4:           #ffffff;
  --neutral-layer-card-container: #ffffff;
  --neutral-layer-floating:    #ffffff;

  /* Type ----------------------------------------------------------------- */
  --body-font: Helvetica, Verdana, sans-serif;
  --type-ramp-base-font-size:  14px;
  --type-ramp-base-line-height: 20px;
  --type-ramp-minus-1-font-size: 12px;
  --type-ramp-minus-1-line-height: 16px;
  --type-ramp-plus-1-font-size: 16px;
  --type-ramp-plus-1-line-height: 24px;
  --type-ramp-plus-2-font-size: 18px;
  --type-ramp-plus-2-line-height: 26px;
  --type-ramp-plus-3-font-size: 20px;
  --type-ramp-plus-3-line-height: 28px;
  --type-ramp-plus-4-font-size: 24px;
  --type-ramp-plus-4-line-height: 32px;
  --type-ramp-plus-5-font-size: 30px;
  --type-ramp-plus-5-line-height: 38px;

  /* Density / shape / focus --------------------------------------------- */
  --design-unit: 4;              /* 4 px base — matches Star's --sp-1 */
  --corner-radius: 4;            /* matches --r-sm */
  --layer-corner-radius: 6;      /* matches --r-md (cards / panels) */
  --control-corner-radius: 4;    /* buttons / inputs */
  --focus-stroke-width: 2;
  --focus-stroke-outer:        var(--star-blue);
  --focus-stroke-inner:        #ffffff;
  --disabled-opacity: 0.4;

  /* Density: keep Fluent's "comfortable" default. Compact apps can set
     --density: -2 on the provider for tighter rows. */
  --density: 0;
}

/* --------------------------------------------------------------------------
   2. Dark theme overrides (system or user opt-in)
   -------------------------------------------------------------------------- */
[data-theme="dark"],
fluent-design-system-provider[mode="dark"],
:root.dark {
  --neutral-foreground-rest:   #F2F4F7;
  --neutral-foreground-hover:  #ffffff;
  --neutral-foreground-active: #ffffff;
  --neutral-foreground-hint:   #B4BCC6;

  --neutral-fill-rest:         #14191F;
  --neutral-fill-hover:        #1A2027;
  --neutral-fill-active:       #232A33;

  --neutral-fill-secondary-rest:  #11151B;
  --neutral-fill-secondary-hover: #1A2027;

  --neutral-fill-stealth-rest:   transparent;
  --neutral-fill-stealth-hover:  #1A2027;
  --neutral-fill-stealth-active: #232A33;

  --neutral-stroke-rest:        #2A323D;
  --neutral-stroke-hover:       #3A4452;
  --neutral-stroke-divider-rest: #1F252D;

  --neutral-layer-1:           #0B0E12;
  --neutral-layer-2:           #11151B;
  --neutral-layer-3:           #1A2027;
  --neutral-layer-card-container: #14191F;
  --neutral-layer-floating:    #1A2027;

  /* Accent lifts slightly to maintain AA on dark surfaces. */
  --accent-fill-rest:          #4D93D6;
  --accent-fill-hover:         #6FA4D4;
  --accent-fill-active:        #88B7DF;
}

/* --------------------------------------------------------------------------
   3. Component-level tweaks that the token system doesn't fully cover
   -------------------------------------------------------------------------- */

/* The brand title bar — used at the top of a desktop app window.
   Star Blue is the canonical variant (matches the existing Star RMA System).
   For utility / sub-app contexts use .star-titlebar.ink. */
.star-titlebar {
  background: var(--star-blue);
  color: #ffffff;
  height: 40px;
  padding: 0 4px 0 12px;
}
.star-titlebar.ink { background: var(--ink-900); }
.star-titlebar fluent-button,
.star-titlebar .title-btn {
  color: #ffffff;
}

/* Star-badge classes for status — paired with FluentBadge fill="lowlight" */
.star-badge--success { background: var(--success-soft); color: var(--success); }
.star-badge--warning { background: var(--warning-soft); color: var(--warning); }
.star-badge--danger  { background: var(--danger-soft);  color: var(--danger);  }
.star-badge--info    { background: var(--accent-soft);  color: var(--star-blue); }

/* Data grid — slightly larger row padding to match our table density */
fluent-data-grid-row {
  --row-height: 44px;
}
fluent-data-grid-cell {
  padding: 8px 12px;
}

/* Nav menu — use Star's left-rail blue accent on the active item */
fluent-nav-menu-item[selected]::before {
  background: var(--star-blue);
  width: 3px;
}

/* Inputs — bring radius down to 4 (Fluent defaults to 2 in some places) */
fluent-text-field, fluent-search, fluent-select, fluent-number-field,
fluent-text-area, fluent-combobox {
  --control-corner-radius: 4;
}

/* Buttons — match Star's slightly higher hover specificity */
fluent-button[appearance="accent"]:hover {
  background: var(--star-blue-700);
}
fluent-button[appearance="accent"]:active {
  background: var(--star-blue-800);
}

/* MessageBar — keep informational variant on brand blue */
fluent-message-bar[intent="info"] {
  border-left: 3px solid var(--star-blue);
  background: var(--accent-soft);
}