/* fluent.css — the Fluent 2 token layer for MME Field Ops.
 *
 * WHY THIS IS A SEPARATE FILE, SCOPED
 * -----------------------------------
 * The app already has a design system (tokens.css / components.css, Figtree +
 * Noto Sans, a v3-* token set). Thirty-odd templates depend on it. Swapping
 * the whole app to Fluent 2 in one move would mean re-testing every screen, so
 * instead everything here is scoped under `.fluent` and only pages that opt in
 * get it. Chat is the first. Converting the rest is then a page at a time,
 * with the old system untouched underneath.
 *
 * WHERE THE VALUES COME FROM
 * --------------------------
 * Not eyeballed. Taken from microsoft/fluentui packages/tokens:
 *   global/fonts.ts         — the type ramp and its paired line heights
 *   global/borderRadius.ts  — 2 / 4 / 6 / 8 / 12 / 16
 *   alias/lightColor.ts     — neutral foregrounds, backgrounds, strokes
 *   global/brandColors.ts   — the 16-step brand ramp SHAPE
 * plus fluent2.microsoft.design/elevation for which shadow goes where.
 *
 * THE BRAND RAMP
 * --------------
 * Fluent brands are 16 steps (10..160), not one colour, and step 80 is the
 * interactive one. Murtaja Navy #042C53 is dark — it lands on step 30, which
 * makes it an identity colour, not a button colour. The ramp below holds the
 * navy's own hue and saturation (210 degrees, 88%) and steps only lightness,
 * so every tint reads as Murtaja rather than Microsoft blue.
 *
 * Fluent's colour guidance is explicit that brand colour does not belong on
 * large surfaces — it dilutes hierarchy. So chrome here is neutral and brand
 * appears only on actions, the accent bar, and the tint behind live items.
 *
 * DARK THEME
 * ----------
 * Defined but dormant. It activates on [data-theme="dark"] ONLY, never on
 * prefers-color-scheme, because the rest of the app has no dark mode yet and a
 * single dark page inside a light app looks broken. When a theme switch is
 * added, this comes along for free.
 */

/* Tokens live on :root, not on .fluent.
 *
 * They are needed by the app SHELL (top bar, rail, tab bar, sheet), which
 * wraps every page including the ~77 still on the old v3 design. Scoping them
 * to .fluent would mean putting that class on <body> to reach the shell — and
 * .fluent also sets font-family and color, which would then cascade into every
 * legacy page and restyle text the conversion has not reached yet.
 *
 * Every name here is --f- prefixed, so it cannot collide with the --v3- set
 * the legacy pages read. Defining them globally costs those pages nothing.
 */
:root {
  /* ---- brand ramp, derived from Murtaja Navy ---- */
  --f-brand-10:  #031527;
  --f-brand-20:  #04203C;
  --f-brand-30:  #042C53;   /* Murtaja Navy — the identity colour */
  --f-brand-40:  #063564;
  --f-brand-50:  #08427B;
  --f-brand-60:  #094E92;
  --f-brand-70:  #0B5AA9;
  --f-brand-80:  #0C66C0;   /* interactive: buttons, active state */
  --f-brand-90:  #1683F0;
  --f-brand-100: #499EF3;   /* brand foreground in dark theme */
  --f-brand-110: #62ACF5;
  --f-brand-120: #78B7F6;
  --f-brand-130: #97C8F8;
  --f-brand-140: #B4D7FA;   /* colorBrandStroke2 */
  --f-brand-150: #CDE5FC;
  --f-brand-160: #EBF4FC;   /* colorBrandBackground2 */

  /* ---- alias: brand ---- */
  --f-brand:        var(--f-brand-80);
  --f-brand-hover:  var(--f-brand-70);
  --f-brand-press:  var(--f-brand-60);
  --f-brand-fg:     var(--f-brand-70);
  --f-brand-bg2:    var(--f-brand-160);
  --f-brand-stroke: var(--f-brand-140);
  --f-on-brand:     #ffffff;

  /* ---- neutrals: alias/lightColor.ts ---- */
  --f-bg1:    #ffffff;
  --f-bg1-hover: #f5f5f5;
  --f-bg2:    #fafafa;
  --f-bg3:    #f5f5f5;
  --f-canvas: #f0f0f0;
  --f-bg5:    #ebebeb;
  --f-fg1:    #242424;
  --f-fg2:    #424242;
  --f-fg3:    #616161;
  --f-fg4:    #707070;
  --f-fg-disabled: #bdbdbd;
  --f-stroke1: #d1d1d1;
  --f-stroke2: #e0e0e0;
  --f-stroke3: #f0f0f0;

  /* ---- shared palette: status ---- */
  --f-ok:      #0e700e;
  --f-ok-bg:   #f1faf1;
  --f-warn:    #bc4b09;
  --f-warn-bg: #fff4ce;
  --f-danger:    #c50f1f;
  --f-danger-bg: #fdf3f4;

  /* ---- type ramp: global/fonts.ts. Sizes are paired with their line
         heights and must not be split apart. ---- */
  --f-font: "Segoe UI Variable Text", "Segoe UI",
            "Segoe UI Web (West European)", -apple-system,
            BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --f-caption2:      400 10px/14px var(--f-font);
  --f-caption1:      400 12px/16px var(--f-font);
  --f-caption1-str:  600 12px/16px var(--f-font);
  --f-body1:         400 14px/20px var(--f-font);
  --f-body1-str:     600 14px/20px var(--f-font);
  --f-body2:         400 16px/22px var(--f-font);
  --f-subtitle2:     600 16px/22px var(--f-font);
  --f-subtitle1:     600 20px/28px var(--f-font);
  --f-title3:        600 24px/32px var(--f-font);
  --f-title2:        600 28px/36px var(--f-font);

  /* ---- radius: global/borderRadius.ts ---- */
  --f-r-sm: 2px;   --f-r-md: 4px;   --f-r-lg: 6px;
  --f-r-xl: 8px;   --f-r-2xl: 12px; --f-r-3xl: 16px;
  --f-r-circle: 10000px;

  /* ---- spacing: 4px base ---- */
  --f-s-xxs: 2px; --f-s-xs: 4px;  --f-s-s: 8px;   --f-s-m: 12px;
  --f-s-l: 16px;  --f-s-xl: 20px; --f-s-xxl: 24px; --f-s-xxxl: 32px;

  /* ---- elevation: blur = n, y = n/2, key 14% + ambient 12% ---- */
  --f-sh-k: rgba(0,0,0,.14);
  --f-sh-a: rgba(0,0,0,.12);
  --f-shadow2:  0 0 2px var(--f-sh-a), 0 1px 2px var(--f-sh-k);
  --f-shadow4:  0 0 2px var(--f-sh-a), 0 2px 4px var(--f-sh-k);
  --f-shadow8:  0 0 2px var(--f-sh-a), 0 4px 8px var(--f-sh-k);
  --f-shadow16: 0 0 2px var(--f-sh-a), 0 8px 16px var(--f-sh-k);
  --f-shadow28: 0 0 8px rgba(0,0,0,.20), 0 14px 28px rgba(0,0,0,.24);
  --f-shadow64: 0 0 8px rgba(0,0,0,.20), 0 32px 64px rgba(0,0,0,.24);

  /* Fluent's own minimum target. Not 44 (Apple) or 48 (Material). */
  --f-target: 40px;

  /* ---- timer kinds ----
   * Not part of Fluent; added because this app has a fact no palette covers.
   * Every task runs three clocks — onsite_s, travel_s, offsite_s — and only
   * one of them is billable. Nothing on screen used to say which was running,
   * so the figure that reaches a customer's invoice depended on somebody
   * noticing. These are semantic: they mean money, not decoration.
   * See docs/design/04-task-interface-redesign.html.
   */
  --k-onsite:      #0e700e;   /* billable: on site, inside the geofence */
  --k-onsite-bg:   #f1faf1;
  --k-onsite-line: #9fd89f;
  --k-travel:      #0C66C0;   /* recorded, not billed as service */
  --k-travel-bg:   #EBF4FC;
  --k-travel-line: #B4D7FA;
  --k-hold:        #bc4b09;   /* costs money, earns none */
  --k-hold-bg:     #fff4ce;
  --k-hold-line:   #f0c36d;
}

/* The opt-in class. Only the typography and text colour live here now — a page
   adds `class="fluent"` to a wrapper to have its CONTENT rendered in Fluent.
   The tokens above are already global, so the shell gets them without this. */
.fluent {
  font-family: var(--f-font);
  color: var(--f-fg1);
}

/* Dormant until the app grows a theme switch — see the header note.
   Targets :root, matching where the tokens are now defined; as
   `[data-theme="dark"] .fluent` it would have overridden nothing. */
:root[data-theme="dark"] {
  --f-brand:        var(--f-brand-70);
  --f-brand-hover:  var(--f-brand-80);
  --f-brand-press:  var(--f-brand-90);
  --f-brand-fg:     var(--f-brand-100);
  --f-brand-bg2:    var(--f-brand-20);
  --f-brand-stroke: var(--f-brand-40);

  --f-bg1: #292929;  --f-bg1-hover: #313131;
  --f-bg2: #1f1f1f;  --f-bg3: #141414;
  --f-canvas: #141414; --f-bg5: #3d3d3d;
  --f-fg1: #ffffff;  --f-fg2: #d6d6d6;  --f-fg3: #adadad;  --f-fg4: #999999;
  --f-fg-disabled: #5c5c5c;
  --f-stroke1: #666666; --f-stroke2: #525252; --f-stroke3: #3d3d3d;

  --f-ok: #54b054;     --f-ok-bg: #0a2e0a;
  --f-warn: #e9835e;   --f-warn-bg: #3b2317;
  --f-danger: #f1707b; --f-danger-bg: #3b1f22;

  --f-sh-k: rgba(0,0,0,.28);
  --f-sh-a: rgba(0,0,0,.24);

  /* Timer kinds, dark. The hues hold their meaning; only the tints move, so
     "green means billable" still reads on a dark ground. */
  --k-onsite: #54b054;  --k-onsite-bg: #0a2e0a;  --k-onsite-line: #1d5c1d;
  --k-travel: #479EF3;  --k-travel-bg: #0b2942;  --k-travel-line: #1d5f9e;
  --k-hold:   #e9835e;  --k-hold-bg:   #3b2317;  --k-hold-line:   #7a4a2a;
}

/* ==========================================================================
   Primitives
   ========================================================================== */
.fluent *, .fluent *::before, .fluent *::after { box-sizing: border-box; }

.f-card {
  background: var(--f-bg1);
  border: 1px solid var(--f-stroke2);
  border-radius: var(--f-r-xl);
  box-shadow: var(--f-shadow4);        /* elevation guidance: cards = shadow4 */
}

/* Fluent's list idiom: ONE surface with inset hairlines, not a stack of
   floating cards. Denser, and it reads as a single object. */
.f-list { background: var(--f-bg1); border: 1px solid var(--f-stroke2);
          border-radius: var(--f-r-xl); box-shadow: var(--f-shadow4);
          overflow: hidden; }
.f-list > * { position: relative; min-height: 48px; }
.f-list > * + *::before {
  content: ""; position: absolute; top: 0; left: var(--f-s-m); right: 0;
  height: 1px; background: var(--f-stroke2);
}

.f-btn {
  min-height: var(--f-target);
  border: 1px solid transparent;
  border-radius: var(--f-r-md);
  padding: var(--f-s-s) var(--f-s-m);
  font: var(--f-body1-str);
  cursor: pointer;
  transition: background .1s ease;
}
.f-btn-primary { background: var(--f-brand); color: var(--f-on-brand); }
.f-btn-primary:hover:not(:disabled) { background: var(--f-brand-hover); }
.f-btn-primary:active:not(:disabled) { background: var(--f-brand-press); }
.f-btn-subtle { background: var(--f-bg1); color: var(--f-fg1);
                border-color: var(--f-stroke1); }
.f-btn-subtle:hover:not(:disabled) { background: var(--f-bg3); }
.f-btn-transparent { background: transparent; color: var(--f-fg2); }
.f-btn-transparent:hover:not(:disabled) { background: var(--f-bg3); }
.f-btn:disabled { background: var(--f-bg5); color: var(--f-fg-disabled);
                  border-color: transparent; cursor: default; }

/* Keyboard focus must stay visible — Fluent uses a dark ring, not the
   browser's blue, so it reads on both brand and neutral surfaces. */
.fluent :focus-visible { outline: 2px solid var(--f-fg1); outline-offset: 1px;
                         border-radius: var(--f-r-md); }

.f-input {
  width: 100%; min-height: var(--f-target);
  background: var(--f-bg1);
  border: 1px solid var(--f-stroke1);
  border-bottom-color: var(--f-fg4);   /* Fluent's heavier bottom edge */
  border-radius: var(--f-r-md);
  padding: var(--f-s-s) var(--f-s-m);
  font: var(--f-body1);
  color: var(--f-fg1);
}
.f-input::placeholder { color: var(--f-fg4); }
.f-input:focus { outline: none; border-color: var(--f-stroke1);
                 border-bottom: 2px solid var(--f-brand);
                 padding-bottom: calc(var(--f-s-s) - 1px); }

.f-badge {
  display: inline-block; font: var(--f-caption1-str);
  padding: 2px var(--f-s-s); border-radius: var(--f-r-md); white-space: nowrap;
}
.f-badge-brand  { background: var(--f-brand-150); color: var(--f-brand-fg); }
.f-badge-subtle { background: var(--f-bg3);      color: var(--f-fg3); }
.f-badge-ok     { background: var(--f-ok-bg);    color: var(--f-ok); }
.f-badge-warn   { background: var(--f-warn-bg);  color: var(--f-warn); }
.f-badge-danger { background: var(--f-danger-bg);color: var(--f-danger); }

/* Counter pill — circular, brand filled. Used for unread. */
.f-count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--f-brand); color: var(--f-on-brand);
  border-radius: var(--f-r-circle); font: var(--f-caption1-str);
  font-variant-numeric: tabular-nums;
}

.f-avatar {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--f-r-circle);
  display: grid; place-items: center;
  background: var(--f-brand-140); color: var(--f-brand-30);
  font: var(--f-caption1-str); text-transform: uppercase;
  overflow: hidden; position: relative;
}
.f-avatar img { width: 100%; height: 100%; object-fit: cover; }
.f-avatar-lg { width: 40px; height: 40px; font: var(--f-body1-str); }

/* Presence dot, Fluent's ring-on-avatar treatment */
.f-presence {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: var(--f-r-circle);
  border: 2px solid var(--f-bg1); background: var(--f-fg-disabled);
}
.f-presence.is-online { background: var(--f-ok); }

.f-divider { height: 1px; background: var(--f-stroke2); border: 0; margin: 0; }

.f-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--f-stroke1); border-top-color: var(--f-brand);
  animation: f-spin .7s linear infinite;
}
@keyframes f-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .f-spinner { animation: none; }
  .fluent * { transition: none !important; }
}