@use '@angular/material' as mat;
@use './node_modules/highlight.js/scss/dark' as *;

/* ---------------------------------------------------------------------------
   Material 3 theme — shared across both P3X demo apps so they feel tonally
   consistent. Adobe-Color complementary pair (~180° on HSL wheel) — the
   canonical dev-tool blue/orange combo (GitHub, VS Code, etc.):
     primary  : azure   (network / tech / trust)
     tertiary : orange  (warm accent)
   Dark theme, `mat.define-theme` (M3) — no M2 `m2-define-*` calls.
--------------------------------------------------------------------------- */

$workspace-theme: mat.define-theme((
    color: (
        theme-type: dark,
        primary: mat.$azure-palette,
        tertiary: mat.$orange-palette,
    ),
    density: (
        scale: 0,
    ),
));

html {
    @include mat.all-component-themes($workspace-theme);
    @include mat.elevation-classes();
}

/* ---------------------------------------------------------------------------
   Global page styles — explicit dark grey so no light surface token can
   leak through outside the content area.
--------------------------------------------------------------------------- */

html, body {
    height: 100%;
    background-color: #0a0a0a !important;
}

body {
    margin: 0;
    color: rgba(255, 255, 255, 0.87);
    overflow-x: hidden;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

/* Toolbar + card — all on the same near-black surface so there's no
   visible step or line between them. */
.mat-toolbar {
    background-color: #333333 !important;
    color: rgba(255, 255, 255, 0.87);
    box-shadow: none !important;
}

.mat-mdc-card {
    background-color: #161616 !important;
}

/* Tab nav bar sits between toolbar and card — darker than the lighter
   toolbar so the hierarchy body → tabs → toolbar inverts cleanly. */
.mat-mdc-tab-nav-bar,
.mat-mdc-tab-header,
.mat-mdc-tab-links {
    background-color: #262626 !important;
}

/* Tab labels — inactive tabs default to a dim dark blue that's hard to
   read on the dark tab bar. Force a super-light blue for the inactive
   label and pure white for the active one. */
.mat-mdc-tab-link .mdc-tab__text-label,
.mat-mdc-tab .mdc-tab__text-label {
    color: #bbdefb !important;
}

.mat-mdc-tab-link.mdc-tab--active .mdc-tab__text-label,
.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
    color: #ffffff !important;
}

/* Breathing room between adjacent MDC buttons — M3 renders them block-width
   inside flow containers, so siblings otherwise touch. */
.mat-mdc-button,
.mat-mdc-outlined-button,
.mat-mdc-unelevated-button,
.mat-mdc-raised-button {
    margin: 4px;
}

.p3x-ng-http-pre {
    overflow: auto;
}