/* ═══════════════════════════════════════════════════════════════════════════
   Circl Directory — Material 3, ShapedSocial green, dense.
   ═══════════════════════════════════════════════════════════════════════════

   Loaded AFTER shared.css on every page, and only ever overriding it.
   shared.css is still a byte-for-byte copy of Platform Management's and stays
   that way: these five pages ARE PM's pages and carry PM's class names, so
   the moment this file edits the base instead of layering over it, a fix made
   on one side stops reaching the other.

   ── How this works ────────────────────────────────────────────────────────

   LAYER 1 repoints shared.css's OWN tokens - --bg, --s1, --border, --text,
   --blue, --grass - at Material roles. shared.css is written almost entirely
   against those, including the whole of its dark-mode block, so one remap
   carries hundreds of rules never named here.

   LAYER 2 is shape, density and typography: the things a token cannot fix.

   ⚠️ A rule here that looks redundant is almost certainly countering a
   hardcoded Fluent blue or a 2px radius still in the base file.

   ── Density ───────────────────────────────────────────────────────────────

   ⚠️ Material's DEFAULT metrics are wrong for this console and were tried.
   40px buttons, 56px drawer items, 72px list rows and a 64px app bar are
   specified for touch; on a 1400px admin page showing three hundred accounts
   they put roughly a third as much on screen and read as a blown-up mobile
   app. Material's own answer is the density scale, and this file sits at
   about -2: the SHAPES, state layers, tonal surfaces and type face are
   Material, the heights are desk heights.

   Every size that matters comes from the five variables below, so changing
   the density of the whole console means changing five numbers rather than
   hunting through the file.

   ── The palette ───────────────────────────────────────────────────────────

   A Material tonal scheme generated from ShapedSocial's #5BC174.

   Worth knowing: Material's tonal logic independently reproduces the pair the
   Launchpad arrived at by hand. Tone 40 lands near #2E8B4F, which is what the
   Launchpad uses for green text on a light surface, and tone 75 IS #5BC174,
   the mark itself, which is what it uses in dark mode. So the brand green is
   the dark-mode primary exactly, and its on-light darkening is the light-mode
   primary - not an approximation of the brand, the brand.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Density ────────────────────────────────────────────────────────── */
  --m-bar:  56px;   /* top app bar */
  --m-nav:  40px;   /* drawer destination */
  --m-row:  56px;   /* list row, two-line */
  --m-ctl:  34px;   /* buttons, icon buttons, text fields */
  --m-tab:  42px;   /* tab */
  --sidebar: 236px;

  /* ── Material 3 roles, from #5BC174 ─────────────────────────────────── */
  --m-primary:             #26704A;   /* tone 40 */
  --m-on-primary:          #FFFFFF;
  --m-primary-container:   #ADF2C3;   /* tone 90 */
  --m-on-primary-container:#00210F;   /* tone 10 */

  --m-secondary-container: #D3E8D7;
  --m-on-secondary-container:#101F15;

  --m-error:               #B3261E;
  --m-error-container:     #F9DEDC;
  --m-on-error-container:  #410E0B;

  /* Success is NOT a Material role - M3 ships primary, secondary, tertiary
     and error and nothing else. With a green primary there is no sense in
     inventing a second green beside it, so "enabled" and "qualified" use the
     primary container. The states that must not be confused with it - error
     and warning - keep their own roles, which is the part that matters. */
  --m-success:             #26704A;
  --m-success-container:   #ADF2C3;
  --m-on-success-container:#00210F;
  --m-warn:                #7A5900;
  --m-warn-container:      #FFDF99;
  --m-on-warn-container:   #2A1D00;

  --m-surface:             #F7FBF5;
  --m-on-surface:          #181D18;
  --m-on-surface-variant:  #404942;

  /* The five container tones. Material separates surfaces by TINT rather than
     by shadow, which is why a raised card here is a lighter green-grey and
     not a white box with a drop shadow. */
  --m-surf-lowest:         #FFFFFF;
  --m-surf-low:            #F1F7EF;
  --m-surf:                #EBF1E9;
  --m-surf-high:           #E5EBE3;
  --m-surf-highest:        #E0E6DE;

  --m-outline:             #707972;
  --m-outline-variant:     #C0C9C0;

  --m-inverse-surface:     #2C322D;
  --m-inverse-on-surface:  #EDF2EA;

  /* State layer: hover, focus and pressed are a translucent wash of the
     content colour over the container at fixed opacities - never a different
     background colour. */
  --m-state:        rgba(24,29,24,.08);
  --m-state-strong: rgba(24,29,24,.12);

  --m-e1: 0 1px 2px rgba(0,0,0,.22), 0 1px 3px 1px rgba(0,0,0,.10);
  --m-e2: 0 1px 2px rgba(0,0,0,.22), 0 2px 6px 2px rgba(0,0,0,.10);
  --m-e3: 0 4px 8px 3px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.22);

  /* ── Shape ──────────────────────────────────────────────────────────── */
  --m-r-xs:   4px;    /* text fields */
  --m-r-sm:   8px;    /* chips, menus */
  --m-r-md:  12px;    /* cards */
  --m-r-xl:  28px;    /* dialogs */
  --m-r-full: 999px;

  /* ── LAYER 1: shared.css's tokens, repointed ────────────────────────── */
  --bg:       var(--m-surface);
  --s1:       var(--m-surf-lowest);
  --s2:       var(--m-surf-low);
  --s3:       var(--m-surf);
  --border:   var(--m-outline-variant);
  --text:     var(--m-on-surface);
  --dim:      var(--m-on-surface-variant);
  --faint:    #707972;

  --blue:     var(--m-primary);
  --blue-bg:  var(--m-secondary-container);
  --blue-bdr: var(--m-outline-variant);
  --grass:    var(--m-primary);
  --grass-d:  #1C5B3B;
  --link:     var(--m-primary);
  --purple:   var(--m-primary);
  --purple-bg:var(--m-primary-container);
  --purple-bdr:var(--m-outline-variant);

  --red:      var(--m-error);
  --red-bg:   var(--m-error-container);
  --red-bdr:  #E6B4B0;
  --green:    var(--m-success);
  --green-d:  #1C5B3B;
  --green-bg: var(--m-success-container);
  --green-bdr:#8CD3A5;
  --amber:    var(--m-warn);
  --amber-bg: var(--m-warn-container);
  --amber-bdr:#E0C070;
  --teal:     #006A6A;
  --teal-bg:  #CFF1F0;
  --teal-bdr: #86CFCE;

  --olive:      var(--m-surf-low);
  --olive-d:    var(--m-surf);
  --panel-head: var(--m-surf-low);
  --row-alt:    var(--m-surf-low);
  --rail:       var(--m-surf-low);
  --rail-2:     var(--m-surf);
}

/* ── Typography ───────────────────────────────────────────────────────────
   Roboto, loaded by a <link> in each page's head rather than an @import,
   which would block first paint on a round trip to a second origin.

   The scale is Material's, stepped down one notch throughout to match the
   density above - 18px app-bar titles rather than 22, 13px body rather than
   14. The letter-spacings are NOT optional: Roboto's label and title styles
   are specified with them, and without them the face reads as Arial. */
html, body {
  font-family: Roboto, 'Helvetica Neue', -apple-system, BlinkMacSystemFont,
               'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .0107em;
  background: var(--m-surface);
  color: var(--m-on-surface);
  -webkit-font-smoothing: antialiased;
}

.topbar h1           { font-size:18px; font-weight:500; letter-spacing:0; line-height:24px; }
.entra-display-name  { font-size:22px; font-weight:400; letter-spacing:0; line-height:28px; margin-bottom:2px; }
.entra-section-title { font-size:14px; font-weight:500; letter-spacing:.009em; }
.section-header h2   { font-size:14px; font-weight:500; letter-spacing:.009em; color:var(--m-on-surface); }
.mono, .info-value.mono { font-family:'Roboto Mono','SF Mono',Consolas,monospace; font-size:12px; letter-spacing:0; }

/* ── Navigation drawer ────────────────────────────────────────────────────
   A tonal surface with fully-rounded destination pills, at 44px rather than
   Material's 56.

   ⚠️ This is where the console deliberately stopped matching the reference
   screenshot. A solid saturated rail is a Material 2 pattern; M3 moved
   navigation onto surface tones so the primary colour stays free to mean
   "this is the action". With the rail painted brand green, every green
   button on the page would have been competing with it. */
.sidebar {
  background: var(--m-surf-low);
  border-right: none;
  padding: 0 8px;
}

/* The brand block: wordmark over a small-caps label, which is the layout
   shared.css already expects. ⚠️ The logo is sized by WIDTH. Constraining
   its height instead - which was tried - renders a 400px-wide lockup at
   whatever width a 20px cap height implies, i.e. tiny. */
/* ⚠️ Every one of these is countering a value in shared.css, which sets
   `padding:14px 16px 12px` and a 3px gap on this block. Left alone, the
   drawer opens with roughly 30px of dead space above the first destination -
   the brand block's own padding, plus `nav`'s 4px, plus the flex gap. */
.sidebar-header {
  background: none;
  border-bottom: none;
  /* 64px, not 56: the wordmark is 24px at this width and the label under it
     is another 14px with its line-height. At 56px the label was being
     clipped by the block's own bounds. */
  height: 64px;
  /* 12px, matching .nav-item's inset, so the wordmark's left edge and the
     destination labels' icons sit on the same vertical line. */
  padding: 0 12px;
  justify-content: center;
  align-items: flex-start;
  gap: 3px;
  text-decoration: none;
}
/* 140px of a 308x53 trimmed lockup is 24px tall. Sized by WIDTH - setting a
   height on a wide lockup renders it at whatever width that cap height
   implies, which is how it ended up tiny two passes ago. */
.sidebar-header img { width: 140px; height: auto; display: block; }
.sidebar-header .rl-dark { display: none; }
.sidebar-header .app-sub {
  font-size: 10px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--m-on-surface-variant);
}

/* shared.css gives `nav` a `4px 0 12px` padding, which is a 12px strip of
   nothing at the bottom of a column that is already flex:1. */
nav { padding: 2px 0 0; }
.nav-section {
  font-size: 10.5px; font-weight: 500; letter-spacing: .09em;
  color: var(--m-on-surface-variant); padding: 10px 12px 3px;
}
.nav-item {
  height: var(--m-nav);
  padding: 0 12px;
  gap: 10px;
  border-left: none;
  border-radius: var(--m-r-full);
  color: var(--m-on-surface-variant);
  font-size: 13px; font-weight: 500; letter-spacing: .0071em;
  transition: background .12s;
}
.nav-item:hover  { background: var(--m-state); color: var(--m-on-surface); }
.nav-item:active { background: var(--m-state-strong); }
.nav-item.active {
  background: var(--m-secondary-container);
  color: var(--m-on-secondary-container);
  border-left: none;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ⚠️ The drawer has no footer. The session timer, the signed-in address and
   the sign-out button were removed on instruction - identity, theme and sign
   out are the account block in the app bar now. These rules stay as a
   belt-and-braces hide: shared.css still styles `.sidebar-footer`, and an
   empty one would otherwise draw a border across the bottom of the drawer if
   any page ever renders its own. */
.sidebar-footer { display: none; }

/* ── Top app bar ──────────────────────────────────────────────────────────
   Flat on the surface: Material's small top app bar carries no shadow until
   content scrolls under it, and nothing does here - `.content` is its own
   scroller. */
.topbar {
  min-height: var(--m-bar); height: var(--m-bar);
  padding: 0 12px 0 8px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-outline-variant);
  gap: 4px;
}
.hamburger-btn, .refresh-btn, .back-btn {
  height: var(--m-ctl);
  border-radius: var(--m-r-full);
  border: none; background: transparent;
  color: var(--m-on-surface-variant);
  font-size: 13px; font-weight: 500; letter-spacing: .0071em;
  padding: 0 12px;
  transition: background .12s;
}
.hamburger-btn { width: var(--m-ctl); padding: 0; justify-content: center; }
.hamburger-btn:hover, .refresh-btn:hover, .back-btn:hover {
  background: var(--m-state); border-color: transparent; color: var(--m-on-surface);
}
.refresh-btn svg, .back-btn svg { width: 16px; height: 16px; }
.breadcrumb { font-size: 13px; color: var(--m-on-surface-variant); }
#last-sync  { font-size: 11px; color: var(--m-on-surface-variant); }

/* ── The account block ────────────────────────────────────────────────────
   Name over role, the avatar, then theme and sign out. Sized to the 56px
   bar: a 32px avatar and two lines that fit inside it without crowding.

   ⚠️ Every property here is declared, including display and border-radius.
   An earlier pass set only the colours and sizes and relied on the previous
   version of this file for the rest - the avatar came out as an unrounded
   block with the initial sitting in its top-left corner, and the name and
   role ran together on one line. There is nothing underneath these rules to
   inherit from, so they state the whole box. */
.dir-who {
  display: flex; align-items: center; gap: 8px;
  padding-left: 8px; min-width: 0;
}
.dir-who-t {
  display: flex; flex-direction: column; justify-content: center;
  line-height: 1.25; min-width: 0; text-align: right;
}
.dir-who-n {
  font-size: 13px; font-weight: 500; color: var(--m-on-surface);
  letter-spacing: .0071em; max-width: 170px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dir-who-r {
  font-size: 11px; color: var(--m-on-surface-variant); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dir-who-av {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--m-primary-container); color: var(--m-on-primary-container);
  background-size: cover; background-position: center;
  font-size: 13px; font-weight: 500; line-height: 1;
  overflow: hidden;
}
.dir-who-sep {
  width: 1px; height: 20px; flex: none; margin: 0 2px;
  background: var(--m-outline-variant);
}
/* Theme and sign out: Material icon buttons, matching every other one in
   the console rather than inventing a third size for the bar. */
.dir-icn {
  width: var(--m-ctl); height: var(--m-ctl); flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent;
  color: var(--m-on-surface-variant); cursor: pointer;
  font-family: inherit; transition: background .12s, color .12s;
}
.dir-icn:hover { background: var(--m-state); color: var(--m-on-surface); }
.dir-icn svg { width: 17px; height: 17px; display: block; fill: none; stroke: currentColor; }
.dir-icn.dir-out:hover {
  background: color-mix(in srgb, var(--m-error) 10%, transparent);
  color: var(--m-error);
}
/* Below this the two lines go and the avatar carries the identity alone.
   The controls stay: they are the only way to sign out. */
@media (max-width: 760px) { .dir-who-t, .dir-who-sep { display: none; } }

.content { background: var(--m-surface); padding: 16px 20px 40px; }

/* ── Buttons ──────────────────────────────────────────────────────────────
     .fluent-btn / .fluent-ghost → text button   (no container until hovered)
     .fluent-btn-primary         → filled button (the one real action)
     .fluent-icn / .icon-btn     → icon button   (circle, state layer)

   Text buttons take 12px of side padding and filled ones 20px, which is why
   the two are not one rule with a background added. */
.fluent-btn, .fluent-ghost, .btn-cancel, .entra-action-btn, .section-hdr-btn {
  height: var(--m-ctl);
  padding: 0 12px;
  border: none;
  border-radius: var(--m-r-full);
  background: transparent;
  color: var(--m-primary);
  font-size: 13px; font-weight: 500; letter-spacing: .0071em;
  transition: background .12s;
}
.fluent-btn:hover, .fluent-ghost:hover:not(:disabled),
.btn-cancel:hover, .entra-action-btn:hover {
  background: color-mix(in srgb, var(--m-primary) 10%, transparent);
  border-color: transparent; color: var(--m-primary);
}
.fluent-btn svg, .fluent-ghost svg, .entra-action-btn svg { width: 16px; height: 16px; }

.fluent-btn-primary, .btn-primary, .btn-confirm, .fluent-split-main {
  height: var(--m-ctl); padding: 0 20px;
  background: var(--m-primary); color: var(--m-on-primary);
  border: none; border-radius: var(--m-r-full);
  font-size: 13px; font-weight: 500; letter-spacing: .0071em;
  box-shadow: none;
}
.fluent-btn-primary:hover, .btn-primary:hover:not(:disabled),
.btn-confirm:hover, .fluent-split-main:hover {
  background: var(--grass-d); border-color: transparent; box-shadow: var(--m-e1);
}
.btn-confirm.red, .btn-confirm.danger { background: var(--m-error); }
.btn-confirm.red:hover, .btn-confirm.danger:hover { background: #8E1F18; box-shadow: var(--m-e1); }
.btn-confirm.green, .btn-confirm.success { background: var(--m-success); }
.btn-confirm.amber { background: var(--m-warn); }
.btn-cancel { color: var(--m-primary); background: transparent; border: none; }

.entra-action-btn.danger        { color: var(--m-error); }
.entra-action-btn.danger:hover  { background: color-mix(in srgb, var(--m-error) 10%, transparent); }
.entra-action-btn.success       { color: var(--m-success); }
.entra-action-btn.success:hover { background: color-mix(in srgb, var(--m-success) 12%, transparent); }
.entra-action-btn.warn          { color: var(--m-warn); }
.entra-action-btn.warn:hover    { background: color-mix(in srgb, var(--m-warn) 14%, transparent); }
.entra-action-sep, .fluent-cmdbar-sep { background: var(--m-outline-variant); height: 18px; }

.fluent-icn, .icon-btn, .copy-btn {
  width: var(--m-ctl); height: var(--m-ctl);
  border: none; border-radius: 50%;
  background: transparent; color: var(--m-on-surface-variant);
  transition: background .12s;
}
.fluent-icn:hover, .icon-btn:hover, .copy-btn:hover {
  background: var(--m-state); border-color: transparent; color: var(--m-on-surface);
}
.fluent-icn svg, .icon-btn svg { width: 16px; height: 16px; }
.icon-btn.red   { color: var(--m-error); }
.icon-btn.red:hover   { background: color-mix(in srgb, var(--m-error) 10%, transparent); border-color: transparent; }
.icon-btn.green { color: var(--m-success); }
.icon-btn.green:hover { background: color-mix(in srgb, var(--m-success) 12%, transparent); border-color: transparent; }
.icon-btn.blue, .icon-btn.purple { color: var(--m-primary); }
.icon-btn.blue:hover, .icon-btn.purple:hover {
  background: color-mix(in srgb, var(--m-primary) 10%, transparent); border-color: transparent;
}

.fluent-cmdbar { border-bottom: none; padding-bottom: 8px; margin-bottom: 8px; gap: 2px; }
.fluent-split  { border-radius: var(--m-r-full); overflow: hidden; }
.fluent-split-caret { background: var(--m-primary); color: var(--m-on-primary); padding: 0 10px; }
.fluent-split-caret:hover { background: var(--grass-d); }
.fluent-split-div   { background: rgba(255,255,255,.28); }

/* ── Text fields ──────────────────────────────────────────────────────────
   Material OUTLINED: a 1px outline at rest becoming 2px primary on focus,
   4px corners. Fluent's single pixel merely changing colour gave no signal
   strong enough to find the focused field on a form the size of Create user,
   so the second pixel is drawn with an inset shadow rather than a border, to
   avoid the 1px reflow a border-width change would cause. */
.search-input, .fluent-search-wrap input, .fluent-select,
.cu-input, .comms-input, .comms-textarea, .modal select, .modal input,
.field input, .f input, .f select, .move-select, .bc-sort {
  height: var(--m-ctl);
  border: 1px solid var(--m-outline);
  border-radius: var(--m-r-xs);
  background: transparent;
  color: var(--m-on-surface);
  font-family: inherit; font-size: 13px;
  padding: 0 12px;
  transition: border-color .12s, box-shadow .12s;
}
.comms-textarea { height: auto; padding: 10px 12px; }
.search-input:focus, .fluent-search-wrap input:focus, .fluent-select:focus,
.cu-input:focus, .comms-input:focus, .comms-textarea:focus,
.modal select:focus, .modal input:focus, .field input:focus,
.f input:focus, .f select:focus {
  border-color: var(--m-primary);
  box-shadow: inset 0 0 0 1px var(--m-primary);
  outline: none;
}
.search-input::placeholder, .fluent-search-wrap input::placeholder,
.cu-input::placeholder { color: var(--m-on-surface-variant); }
.search-input { padding-left: 36px; background-position: 12px center; }
.fluent-search-wrap svg { left: 11px; width: 16px; height: 16px; color: var(--m-on-surface-variant); }
.fluent-search-wrap input { padding-left: 34px; }
.cu-label, .comms-label, .entra-prop-label, .f label, .ga-sect {
  font-size: 11px; font-weight: 500; letter-spacing: .03em;
  text-transform: none; color: var(--m-on-surface-variant);
}

/* ── Tabs ─────────────────────────────────────────────────────────────────
   Material primary tabs, with an active indicator that is a 3px bar with
   rounded top corners on the container's edge - not a 2px square rule. */
.fluent-pivot, .entra-detail-nav {
  border-bottom: 1px solid var(--m-outline-variant);
  background: transparent; gap: 0;
}
.fluent-pivot-item, .entra-detail-nav-item {
  height: var(--m-tab); padding: 0 12px;
  display: inline-flex; align-items: center; gap: 7px;
  border: none; border-bottom: none; background: transparent;
  color: var(--m-on-surface-variant);
  font-size: 13px; font-weight: 500; letter-spacing: .0071em;
  position: relative; margin-bottom: 0;
  transition: color .12s, background .12s;
}
/* Leading icons on the profile's tabs. Material's own icon-and-label tab,
   with the icon inheriting the label's colour so the active tab's primary
   carries both without a second rule. */
.entra-detail-nav-item svg, .fluent-pivot-item svg {
  width: 16px; height: 16px; flex: none; opacity: .9;
}
/* Nine tabs do not fit a narrow window. Scrolling them beats wrapping, which
   would push the panel below the fold and move the active indicator onto a
   second row away from the edge it is meant to sit on. */
.entra-detail-nav {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.entra-detail-nav::-webkit-scrollbar { height: 0; }
.entra-detail-nav-item { flex: none; }
.fluent-pivot-item:hover, .entra-detail-nav-item:hover {
  background: var(--m-state); color: var(--m-on-surface);
}
.fluent-pivot-item.active, .entra-detail-nav-item.active {
  color: var(--m-primary); border-bottom-color: transparent;
}
.fluent-pivot-item.active::after, .entra-detail-nav-item.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--m-primary); border-radius: 3px 3px 0 0;
}
.entra-tab-panel { padding-top: 16px; }

/* ── The users list ───────────────────────────────────────────────────────
   A Material two-line list in an elevated card, at 56px rather than
   Material's 72 - see the density note at the top.

   ⚠️ The GRID COLUMNS stay with the pages. Each page sets its own
   grid-template-columns on .entra-list-row; overriding it here would
   silently relay every list on the site. */
.entra-list {
  background: var(--m-surf-lowest);
  border: none; border-radius: var(--m-r-md);
  box-shadow: var(--m-e1); overflow: hidden;
}
.entra-list-header {
  height: 40px;
  background: var(--m-surf-low);
  border-bottom: 1px solid var(--m-outline-variant);
}
.entra-list-col-hdr {
  font-size: 11px; font-weight: 500; letter-spacing: .03em;
  text-transform: none; color: var(--m-on-surface-variant);
  padding: 0 14px;
}
.entra-list-row {
  min-height: var(--m-row);
  border-bottom: 1px solid var(--m-outline-variant);
  transition: background .12s;
}
.entra-list-row:hover    { background: var(--m-state); }
.entra-list-row.selected { background: var(--m-secondary-container); }
.entra-col-name   { padding: 6px 14px; gap: 12px; }
.entra-col-val, .entra-status-cell { padding: 0 14px; font-size: 13px; }
.entra-col-val    { color: var(--m-on-surface-variant); }
.entra-avatar-sm  { width: 32px; height: 32px; font-size: 13px; font-weight: 500; }
.entra-row-primary   { font-size: 13.5px; font-weight: 400; color: var(--m-on-surface); letter-spacing: .009em; }
.entra-row-secondary { font-size: 11.5px; color: var(--m-on-surface-variant); margin-top: 1px; }
.entra-status-dot          { width: 8px; height: 8px; }
.entra-status-dot.active   { background: var(--m-success); }
.entra-status-dot.disabled { background: var(--m-error); }
.entra-list-footer {
  padding: 9px 14px; font-size: 12px;
  color: var(--m-on-surface-variant);
  background: var(--m-surf-low);
  border-top: 1px solid var(--m-outline-variant);
}
.entra-sel-bar {
  background: var(--m-secondary-container);
  border: none; border-radius: var(--m-r-sm);
  padding: 7px 14px; margin-bottom: 10px;
}
.entra-sel-n, .entra-sel-clr { color: var(--m-on-secondary-container); font-size: 13px; }

/* ── The user profile ─────────────────────────────────────────────────────
   Material's account header: avatar, name in headline-small, address in
   body-medium, status as chips. The rule under it goes - the tab strip
   below already divides header from body, and two horizontal lines a few
   dozen pixels apart is a ladder. */
.entra-detail-header {
  gap: 18px; padding: 6px 0 18px;
  border-bottom: none; align-items: center;
}
.entra-avatar {
  width: 64px; height: 64px; font-size: 26px; font-weight: 400;
  background: var(--m-primary-container); color: var(--m-on-primary-container);
}
.entra-header-info { padding-top: 0; }
.entra-email  { font-size: 13px; color: var(--m-on-surface-variant); margin-bottom: 10px; }
.entra-badges { gap: 6px; }
.entra-action-bar { gap: 2px; padding: 0 0 10px; border-bottom: none; margin-bottom: 0; }

/* Filled tonal cards, 12px, no border - replacing the white-box-with-a-
   hairline that is the most recognisable thing about the Fluent look. */
.entra-props-section, .info-card, .action-card,
.bc-card, .bc-features, .bc-table-wrap, .pkg-status-box, .data-type-item {
  background: var(--m-surf-low);
  border: none; border-radius: var(--m-r-md);
  box-shadow: none;
}
.entra-props-section { padding: 16px 18px; margin-bottom: 12px; }
.entra-section-title { margin-bottom: 12px; padding-bottom: 0; border-bottom: none; color: var(--m-on-surface); }
.entra-props-grid    { gap: 14px 22px; }
.entra-prop-value    { font-size: 13px; color: var(--m-on-surface); }
.info-card-title, .action-card-title {
  color: var(--m-on-surface-variant); font-size: 11px;
  font-weight: 500; letter-spacing: .03em; text-transform: none;
  border-bottom: 1px solid var(--m-outline-variant);
}
.info-row   { border-bottom: 1px solid var(--m-outline-variant); padding: 9px 14px; }
.info-label { font-size: 11px; color: var(--m-on-surface-variant); }
.info-value { font-size: 13px; }
.entra-sched-bar {
  background: var(--m-warn-container); color: var(--m-on-warn-container);
  border: none; border-radius: var(--m-r-sm); padding: 10px 14px; font-size: 13px;
}
.entra-sched-bar-cancel {
  border: 1px solid var(--m-outline); border-radius: var(--m-r-full);
  color: var(--m-on-warn-container); height: 28px; padding: 0 14px;
  font-size: 12px; font-weight: 500;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--m-surf-lowest); border: none;
  border-radius: var(--m-r-md); box-shadow: var(--m-e1);
}
thead { background: var(--m-surf-low); }
th {
  height: 40px; padding: 0 14px;
  font-size: 11px; font-weight: 500; letter-spacing: .03em;
  text-transform: none; color: var(--m-on-surface-variant);
  border-bottom: 1px solid var(--m-outline-variant);
}
td { padding: 10px 14px; font-size: 13px; border-top: 1px solid var(--m-outline-variant); }
tr:hover td { background: var(--m-state); }

/* ── Chips ────────────────────────────────────────────────────────────────
   Material 3 chips: 8px corners. The fully-rounded lozenge is Material 2 -
   M3 moved chips to the small radius so they read as containers rather than
   as tags. */
.tag {
  height: 20px; padding: 0 8px;
  border-radius: var(--m-r-sm);
  border: none !important;
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
}
.tag.green  { background: var(--m-success-container); color: var(--m-on-success-container); }
.tag.red    { background: var(--m-error-container);   color: var(--m-on-error-container); }
.tag.amber  { background: var(--m-warn-container);    color: var(--m-on-warn-container); }
.tag.blue, .tag.purple { background: var(--m-secondary-container); color: var(--m-on-secondary-container); }
.tag.teal   { background: #CFF1F0; color: #002020; }

/* ── Menus ──────────────────────────────────────────────────────────────── */
.fluent-dd-menu {
  background: var(--m-surf);
  border: none; border-radius: var(--m-r-xs);
  box-shadow: var(--m-e2); padding: 6px 0;
}
.fluent-dd-item {
  min-height: 36px; padding: 0 12px;
  font-size: 13px; color: var(--m-on-surface); letter-spacing: .0071em;
}
.fluent-dd-item:hover { background: var(--m-state); }
.fluent-dd-item svg   { width: 18px; height: 18px; color: var(--m-on-surface-variant); }
.fluent-dd-item.dd-danger       { color: var(--m-error); }
.fluent-dd-item.dd-danger svg   { color: var(--m-error); }
.fluent-dd-item.dd-danger:hover { background: color-mix(in srgb, var(--m-error) 10%, transparent); }
.fluent-dd-item.dd-check input  { accent-color: var(--m-primary); }
.fluent-dd-sep { background: var(--m-outline-variant); margin: 6px 0; }
.fluent-dd-lbl {
  font-size: 11px; font-weight: 500; letter-spacing: .03em;
  text-transform: none; color: var(--m-on-surface-variant); padding: 8px 12px 3px;
}

/* ── Dialogs ──────────────────────────────────────────────────────────────
   28px corners on the surface-container-high tone - the single most Material
   thing in the file. Nothing else in any UI language has a 28px dialog. */
.modal-overlay { background: rgba(0,0,0,.32); backdrop-filter: none; }
.modal {
  background: var(--m-surf-high);
  border: none; border-radius: var(--m-r-xl);
  box-shadow: var(--m-e3); padding: 22px;
}
.modal h3 { font-size: 20px; font-weight: 400; letter-spacing: 0; line-height: 26px; margin-bottom: 12px; color: var(--m-on-surface); }
.modal p  { font-size: 13px; line-height: 19px; color: var(--m-on-surface-variant); margin-bottom: 18px; }
.modal-actions { gap: 8px; }

/* ── Snackbar ─────────────────────────────────────────────────────────────
   Material's inverse surface. This is the one component meant to invert: a
   notification has to be legible against whatever is behind it. */
#toast {
  background: var(--m-inverse-surface); color: var(--m-inverse-on-surface);
  border: none; border-radius: var(--m-r-xs);
  box-shadow: var(--m-e3); font-size: 13px; padding: 11px 14px;
}

/* ── Progress, empty states, odds and ends ──────────────────────────────── */
.spinner, .spinner-lg { border-color: var(--m-outline-variant); border-top-color: var(--m-primary); }
.empty, .loading { font-size: 13px; color: var(--m-on-surface-variant); padding: 36px 20px; }
.cu-step-num { border-color: var(--m-outline); color: var(--m-on-surface-variant); background: transparent; }
.cu-step-item.active .cu-step-num { background: var(--m-primary); border-color: var(--m-primary); color: var(--m-on-primary); }
.cu-step-item.active .cu-step-lbl { color: var(--m-on-surface); }
.cu-toggle-slider { background: var(--m-outline); }
.bulk-dropzone { border: 2px dashed var(--m-outline-variant); border-radius: var(--m-r-md); }
.bulk-dropzone:hover, .bulk-dropzone-over {
  border-color: var(--m-primary);
  background: color-mix(in srgb, var(--m-primary) 7%, transparent);
}
.section-hdr-btn.green { background: var(--m-success); color: #fff; }
.section-hdr-btn.blue  { background: var(--m-primary); color: var(--m-on-primary); }
.cg-foot { color: var(--m-on-surface-variant); font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════════════
   DARK — the Material dark scheme, same source colour
   ═══════════════════════════════════════════════════════════════════════════
   Only the tokens. Every rule above reads them, and so does the whole of
   shared.css's own dark block, which is written against --s1/--s2/--border
   and therefore lands on Material tones untouched.

   ⚠️ Dark Material inverts the tonal direction: primary becomes the LIGHT
   #5BC174 - the brand mark exactly - on a dark container, rather than the
   light scheme's deep green on a pale one. Carrying #26704A into dark mode
   gives 2.0:1 against the surface and is the usual way a dark theme ends up
   unreadable. */
:root[data-theme="dark"], html[data-theme="dark"] {
  --m-primary:             #5BC174;   /* the ShapedSocial mark */
  --m-on-primary:          #00391F;
  --m-primary-container:   #0A5330;
  --m-on-primary-container:#ADF2C3;

  --m-secondary-container: #394B3D;
  --m-on-secondary-container:#D3E8D7;

  --m-error:               #F2B8B5;
  --m-error-container:     #8C1D18;
  --m-on-error-container:  #F9DEDC;

  --m-success:             #5BC174;
  --m-success-container:   #0A5330;
  --m-on-success-container:#ADF2C3;
  --m-warn:                #F0C048;
  --m-warn-container:      #4A3800;
  --m-on-warn-container:   #FFDF99;

  --m-surface:             #101410;
  --m-on-surface:          #E0E4DD;
  --m-on-surface-variant:  #C0C9C0;

  --m-surf-lowest:         #0B0F0B;
  --m-surf-low:            #181D18;
  --m-surf:                #1C211C;
  --m-surf-high:           #262B26;
  --m-surf-highest:        #313631;

  --m-outline:             #8A938B;
  --m-outline-variant:     #404942;

  --m-inverse-surface:     #E0E4DD;
  --m-inverse-on-surface:  #2C322D;

  --m-state:        rgba(224,228,221,.08);
  --m-state-strong: rgba(224,228,221,.12);

  /* LAYER 1 again: shared.css's dark block redefines these, and this file has
     to come after it. Same mapping as light - the roles above are what moved. */
  --bg:       var(--m-surface);
  --s1:       var(--m-surf-low);
  --s2:       var(--m-surf);
  --s3:       var(--m-surf-high);
  --border:   var(--m-outline-variant);
  --text:     var(--m-on-surface);
  --dim:      var(--m-on-surface-variant);
  --faint:    #8A938B;
  --blue:     var(--m-primary);
  --blue-bg:  var(--m-secondary-container);
  --blue-bdr: var(--m-outline-variant);
  --grass:    var(--m-primary);
  --grass-d:  #7AD48F;
  --link:     var(--m-primary);
  --purple:   var(--m-primary);
  --purple-bg:var(--m-primary-container);
  --red:      var(--m-error);
  --red-bg:   var(--m-error-container);
  --green:    var(--m-success);
  --green-bg: var(--m-success-container);
  --amber:    var(--m-warn);
  --amber-bg: var(--m-warn-container);
  --olive:    var(--m-surf-low);
  --panel-head: var(--m-surf);
  --row-alt:  var(--m-surf);
  --rail:     var(--m-surf-low);
}

/* The wordmark, swapped by theme. Both files ship; neither survives the
   other's ground. */
[data-theme="dark"] .sidebar-header .rl-light { display: none; }
[data-theme="dark"] .sidebar-header .rl-dark  { display: block; }

/* shared.css's dark block names these surfaces explicitly rather than by
   token, at a specificity this file has to match to win. */
[data-theme="dark"] .sidebar    { background: var(--m-surf-low); }
[data-theme="dark"] .topbar     { background: var(--m-surface); }
[data-theme="dark"] .entra-list,
[data-theme="dark"] .table-wrap { background: var(--m-surf-low); box-shadow: none; }
[data-theme="dark"] .entra-props-section,
[data-theme="dark"] .info-card,
[data-theme="dark"] .action-card { background: var(--m-surf); }
[data-theme="dark"] .modal       { background: var(--m-surf-high); }
[data-theme="dark"] thead,
[data-theme="dark"] .entra-list-header,
[data-theme="dark"] .entra-list-footer { background: var(--m-surf); }
[data-theme="dark"] .entra-list-row:hover,
[data-theme="dark"] tr:hover td  { background: var(--m-state); }
[data-theme="dark"] .entra-list-row.selected { background: var(--m-secondary-container); }
[data-theme="dark"] .nav-item.active { background: var(--m-secondary-container); }
[data-theme="dark"] .fluent-dd-menu  { background: var(--m-surf); border-color: transparent; box-shadow: var(--m-e2); }
[data-theme="dark"] .fluent-search-wrap input,
[data-theme="dark"] .fluent-select,
[data-theme="dark"] .field input,
[data-theme="dark"] .modal select { background: transparent; border-color: var(--m-outline); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar.mobile-open { box-shadow: var(--m-e3); border-radius: 0 16px 16px 0; }
  .content { padding: 14px 14px 32px; }
  .topbar  { padding: 0 8px; }
  .entra-avatar { width: 52px; height: 52px; font-size: 21px; }
  .entra-display-name { font-size: 19px; line-height: 25px; }
}