/* EOM theme for the team.core components: maps the generic --tcc-* tokens to EOM's palette/shape so the components
   match the app's look without any component change. Loaded after teamcore-components.css (which holds the defaults).
   Mirrors the MudTheme/app.css values: gold primary #9A6D1C, marketplace red #f84c64, dark surfaces, uppercase Barlow. */
:root {
  --tcc-font-display: barlow-medium, barlow-extralight, sans-serif;
  --tcc-btn-radius: 6px;
  --tcc-btn-weight: 500;
  --tcc-btn-text-transform: uppercase;
  --tcc-btn-letter-spacing: .02857em;
  --tcc-btn-hover-lift: 0px;

  --tcc-btn-primary-bg: #9A6D1C;
  --tcc-btn-primary-fg: #ffffff;
  --tcc-btn-primary-bg-hover: #b9842a;
  --tcc-btn-secondary-bg: #1e2d3a;
  --tcc-btn-secondary-fg: #e9e3de;
  --tcc-btn-secondary-bg-hover: #26384a;
  --tcc-btn-ghost-fg: #c7c8c9;
  --tcc-btn-ghost-border: #2f3746;
  --tcc-btn-ghost-fg-hover: #ffffff;
  --tcc-btn-danger-bg: #f84c64;
  --tcc-btn-danger-fg: #ffffff;
  --tcc-btn-danger-bg-hover: #e23552;
  --tcc-btn-success-bg: rgba(11, 186, 131, 1);
  --tcc-btn-success-fg: #ffffff;
  --tcc-btn-success-bg-hover: rgba(10, 167, 118, 1);

  /* Drawer / nav menu — mirrors the old MudDrawer mini variant: dark translucent panel clipped below the app bar,
     56px icon rail closed (the old --mud-drawer-width-mini-left), 240px expanded, gold active entry. */
  --tcc-drawer-bg: rgba(25, 31, 42, .95);
  --tcc-drawer-top: calc(var(--mud-appbar-height) - var(--mud-appbar-height)/4); /* the Dense app bar is ¾ of the var — same calc Mud used for clipped drawers */
  --tcc-drawer-mini-width: 56px;
  --tcc-drawer-width: 240px;
  --tcc-nav-fg: #ffffff;
  --tcc-nav-divider: #2f3746;
  --tcc-nav-hover-bg: rgba(255, 255, 255, .08);
  --tcc-nav-active-fg: #c9b07a;
  --tcc-nav-active-bg: rgba(154, 109, 28, .15);
  --tcc-nav-active-accent: #9A6D1C;

  /* Standalone Icon tones — mirror the MudBlazor dark palette the icons used before the migration. */
  --tcc-icon-primary: #9A6D1C;
  --tcc-icon-secondary: #111720;
  --tcc-icon-tertiary: #067b9f;
  --tcc-icon-success: rgba(11, 186, 131, 1);
  --tcc-icon-warning: rgba(255, 168, 0, 1);
  --tcc-icon-danger: rgba(246, 78, 98, 1);

  --tcc-iconbtn-fg: #c7c8c9;
  --tcc-iconbtn-hover-bg: rgba(255, 255, 255, .08);
  --tcc-iconbtn-primary-bg: #9A6D1C;
  --tcc-iconbtn-primary-fg: #ffffff;
  --tcc-iconbtn-success: #19c37d;
  --tcc-iconbtn-danger: #f84c64;
  --tcc-iconbtn-disabled-fg: #6b7280;
  --tcc-iconbtn-disabled-bg: rgba(255, 255, 255, .07);

  /* Static chips (badges like the order market-side / type): dark surface, light text, gold-tinted accent. */
  --tcc-chip-bg: #1e2d3a;
  --tcc-chip-fg: #e9e3de;
  --tcc-chip-accent-bg: rgba(154, 109, 28, .25);
  --tcc-chip-accent-fg: #c9b07a;

  /* Card + dialogs: EOM's dark translucent gradient (mirrors the legacy SharedComponents Card). */
  --tcc-card-bg: linear-gradient(180deg, rgba(16, 15, 22, .43) 30%, rgba(12, 20, 25, .24) 70%);
  --tcc-card-border: transparent;

  --tcc-split-radius: 12px;
  --tcc-split-divider: rgba(0, 0, 0, .30);

  /* Selectable chips: unselected = dark secondary surface, selected = gold primary (mirrors the old Mud chips'
     Color.Secondary / SelectedColor.Primary). */
  --tcc-chipset-bg: #1e2d3a;
  --tcc-chipset-fg: #e9e3de;
  --tcc-chipset-hover-bg: #26384a;
  --tcc-chipset-selected-bg: #9A6D1C;
  --tcc-chipset-selected-fg: #ffffff;

  /* Menu: light hover wash over the dark popover surface. */
  --tcc-menu-hover-bg: rgba(255, 255, 255, .06);

  /* Tooltip: dark solid surface, light text. */
  --tcc-tooltip-bg: #2f3746;
  --tcc-tooltip-fg: #e9e3de;

  /* Popover: dark solid surface (same family as dialogs / autocomplete popovers). */
  --tcc-popover-surface: #182431;
  --tcc-popover-fg: #e9e3de;
  --tcc-popover-border: #2f3746;

  /* Banners (MudAlert replacement): dark tinted surfaces with the severity colour on the accent edge and icon —
     team.core's light pastel defaults would glare on the dark theme. */
  --tcc-banner-info-bg: rgba(59, 130, 246, .12);
  --tcc-banner-info-border: #3b82f6;
  --tcc-banner-info-fg: #cfe1fb;
  --tcc-banner-success-bg: rgba(16, 185, 129, .12);
  --tcc-banner-success-border: #10b981;
  --tcc-banner-success-fg: #c7f0e1;
  --tcc-banner-warning-bg: rgba(245, 158, 11, .12);
  --tcc-banner-warning-border: #f59e0b;
  --tcc-banner-warning-fg: #f3ddb0;
  --tcc-banner-urgent-bg: rgba(248, 76, 100, .12);
  --tcc-banner-urgent-border: #f84c64;
  --tcc-banner-urgent-fg: #f8c9d0;

  /* Expansion panels: mirrors the old MudExpansionPanel overrides — flush header/content (no gutters), 48px header,
     subtle dark divider, light hover. */
  --tcc-panel-line: #2f3746;
  --tcc-panel-header-hover-bg: rgba(255, 255, 255, .06);

  /* Tabs: light grey inactive (clearly brighter than the half-opacity disabled state), white on hover, gold active
     title over the gold accent underline (team.core's underline tab strip — mirrors the old MudTabs primary
     indicator on dark). */
  --tcc-tab-fg: #c7c8c9;
  --tcc-tab-fg-hover: #ffffff;
  --tcc-tab-fg-active: #c9b07a;
  --tcc-tab-accent: #9A6D1C;
  /* Readable nav-sized labels (the generic .875rem default reads as too small for top-level tabs) and even,
     content-sized padding — paired with the .tcc-tab override below that drops the wide/tall fixed boxes. */
  --tcc-tab-font-size: 1rem;
  --tcc-tab-padding: 9px 18px;

  /* Radio: muted ring unselected, gold dot selected (mirrors MudRadio Color.Primary on dark). */
  --tcc-radio-border: #5f6b78;
  --tcc-radio-checked: #9A6D1C;

  /* Checkbox: muted border unchecked, gold fill checked (mirrors MudCheckBox Color.Primary on dark). */
  --tcc-checkbox-border: #5f6b78;
  --tcc-checkbox-checked-bg: #9A6D1C;
  --tcc-checkbox-checked-fg: #ffffff;

  /* Switch: dark track off, gold track on (mirrors MudSwitch Color.Primary on dark). */
  --tcc-switch-track: #3a4a5a;
  --tcc-switch-track-on: #9A6D1C;
  --tcc-switch-thumb: #e9e3de;

  /* Native pickers (date/time inputs) render their chrome dark. */
  --tcc-field-scheme: dark;

  /* Text fields + AutoComplete: dark inputs, gold focus accent, dark popover. Square corners — no rounded tops. */
  --tcc-field-radius: 0;
  --tcc-field-bg: #1e2d3a;
  --tcc-field-bg-hover: #26384a;
  --tcc-field-fg: #e9e3de;
  --tcc-field-label: #9aa6b2;
  --tcc-field-placeholder: #6b7886;
  --tcc-field-line: #3a4a5a;
  --tcc-field-accent: #9A6D1C;
  --tcc-field-disabled-bg: #18222c;
  --tcc-ac-surface: #182431;
  --tcc-ac-fg: #e9e3de;
  --tcc-ac-hover: #26384a;
  --tcc-ac-border: #2f3746;

  --tcc-shadow-s: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  --tcc-shadow: 0 6px 10px -3px rgba(0,0,0,.4);

  /* DataGrid — EOM dark theme. Mirrors the old MudDataGrid look: dark surfaces (app background rgb(17,23,32) /
     card #182431), dim borders, striped rows, gold (#9A6D1C) hover + selection. */
  --tcc-grid-fg: #e9e3de;
  --tcc-grid-muted: #9aa0a6;
  --tcc-grid-line: #2f3746;                 /* --emsurge-container-border-dim-color */
  --tcc-grid-surface: #111720;              /* --emsurge-dark-background rgb(17,23,32) */
  --tcc-grid-head-bg: #182431;              /* --emsurge-card-background-color-darker */
  --tcc-grid-stripe: #182431;               /* striped rows */
  --tcc-grid-hover: rgba(154, 109, 28, .30);  /* gold hover (#9A6D1C) */
  --tcc-grid-selected: rgba(121, 86, 22, .5); /* gold selection (matches old MudDataGrid selected row) */
  --tcc-grid-accent: #9A6D1C;               /* gold primary — also colours the selected checkbox */
  --tcc-grid-totals-bg: #182431;
}

/* The grid sits inside scrollable panels (overflow:auto) whose top edge clips an outset focus ring — so the search
   box's top border looked cut off on focus. Draw the focus ring inset instead (never clipped), and pull the toolbar
   flush to the left so the search aligns with the grid's left edge rather than sitting indented. */
.tcc-grid__toolbar { padding-left: 0; }
.tcc-grid__search:focus-visible { outline-offset: -2px; }

/* Embedded mode: the DataGrid fills a height-constrained parent (e.g. a 1fr grid cell in a full-screen view).
   Mirrors the fullscreen behaviour for scrollwrap/scroll without position:fixed. min-width:0 lets the grid shrink
   below its (wide) content so it clips horizontally instead of pushing the page wide — the parent grid cell must
   also be a minmax(0,1fr) column for this to take effect. */
.tcc-grid--embedded { height: 100%; min-width: 0; }
.tcc-grid--embedded .tcc-grid__scrollwrap { flex: 1 1 auto; min-height: 0; }
.tcc-grid--embedded .tcc-grid__scroll { max-height: none; overflow-y: auto; flex: 1 1 auto; min-height: 0; }

/* Tabs: comfortable EOM click targets sized to their content (the old min-width:10rem/min-height:4rem made wide, tall
   boxes around small labels — lots of dead space). Padding (--tcc-tab-padding) does the spacing now. No underline
   indicator and no baseline rail — the active tab reads from its gold-tinted pane alone. */
.tcc-tabs { box-shadow: none; }
.tcc-tab { min-height: 2.75rem; border-bottom: none; }

/* Selectable chips (the Recently Updated / All / Active / Archived filter set): the generic small size drops to
   .78rem which reads as too small — nudge it up while keeping the compact small-chip padding. */
.tcc-chipset--sm .tcc-chip--selectable { font-size: .9rem; }

/* Expansion panels: each panel reads as a distinct interactive surface (subtle fill, border, rounded corners, gold
   chevron) instead of bare text that only reveals itself on hover. 48px headers as in the old Mud overrides, with
   horizontal gutters on header and body so content doesn't sit flush against the panel edge. */
.tcc-panels { gap: var(--emsurge-reduced-padding); }
.tcc-panel, .tcc-panel:last-child { background: rgba(255, 255, 255, .02); border: 1px solid #2f3746; border-radius: var(--emsurge-border-radius); }
.tcc-panel__header { min-height: 48px; padding: var(--emsurge-standard-padding); font-size: 1rem; }
.tcc-panel__chevron { color: var(--emsurge-golden-bright-color); }
.tcc-panel__body { padding: var(--emsurge-standard-padding); }

/* Card: EOM shape — the app's standard padding and radius, no elevation (the gradient does the lifting). */
.tcc-card { padding: var(--emsurge-standard-padding); border-radius: var(--emsurge-border-radius); box-shadow: none; }

/* Dialogs need a solid dark surface (the translucent card gradient would let the backdrop bleed through). */
.tcc-dialog { background: #182431; border-color: #2f3746; color: #e9e3de; }

/* Radio groups: EOM spreads the options across the row, centres labels and turns the selected label gold
   (mirrors the old .mud-radio-group / .mud-checked overrides). */
.tcc-radiogroup { gap: var(--emsurge-standard-padding); justify-content: space-around; }
.tcc-radio__label { text-align: center; }
.tcc-radio__native:checked ~ .tcc-radio__label { color: var(--emsurge-golden-bright-color); }

/* Drawer rail: a slim gold scrollbar, always visible (also on the closed 56px rail) so long menus are obviously
   scrollable. The few pixels it takes from the rail are accepted. */
.tcc-drawer { scrollbar-width: thin; scrollbar-color: var(--emsurge-golden-dim-color, #6b5310) transparent; }
.tcc-drawer::-webkit-scrollbar { width: 6px; }
.tcc-drawer::-webkit-scrollbar-thumb { background-color: var(--emsurge-golden-dim-color, #6b5310); border-radius: 3px; }

/* AppBar drawer toggle (the gold menu button): same glyph size as the mini-drawer nav icons (1.5rem) and centred
   over their column — the button sits centred inside a box as wide as the rail (--tcc-drawer-mini-width), so its
   centre lands on the rail icons' centre by construction (and a 48px button in a 56px box gets exactly 4px margins). */
.appbar-menu-toggle { width: 3rem; height: 3rem; }
.appbar-menu-toggle .tcc-icon { width: 1.5rem; height: 1.5rem; }