/*******************************************************************************
 * Copyright 2026 - Raul Herreros - Amtiri SpA
 *
 * Theming layer of the Amtiri Workspace library, loaded after tokens.css,
 * j2w.css and fx2web.css.
 *
 * Everything here is expressed against the J2Web token scale, so a workspace
 * follows the page theme - including dark mode - instead of carrying the fixed
 * pastel hex colors the components used to declare inline. Applications may
 * still layer their own stylesheet on top; nothing in this file uses !important.
 *
 * @author Raul Herreros
 ******************************************************************************/

/*
 * Risk colors.
 *
 * The token set is blue/red only, but a workspace needs a third signal: an
 * action that commits work. Green commits, red discards or destroys, blue is
 * everything else. The -subtle and -text pairs mirror how tokens.css splits
 * --j2w-danger from --j2w-danger-subtle, so the three variants stay symmetric.
 */
:root {
    --wks-safe: light-dark(#16A34A, #22C55E);
    --wks-safe-subtle: light-dark(#F0FDF4, color-mix(in srgb, #22C55E 15%, transparent));
    --wks-safe-text: light-dark(#15803D, #4ADE80);
}

/*
 * Buttons are tinted, never filled.
 *
 * A solid fill makes every button shout, and with three meanings in play
 * (commit / discard / neutral) a toolbar of solid buttons reads as an alarm.
 * Each variant gets a light wash of its own hue, a border at the same hue, and
 * its text in the saturated version - so meaning is carried by color while the
 * visual weight stays even across the row.
 */
button.wks-safe,
button.wks-danger,
button.wks-danger-quiet {
    border-width: 1px;
    border-style: solid;
    box-shadow: none;
}

/* Commits the change: Save, Accept, Apply. */
button.wks-safe {
    background-color: var(--wks-safe-subtle);
    border-color: color-mix(in srgb, var(--wks-safe) 35%, transparent);
    color: var(--wks-safe-text);
}

button.wks-safe:hover {
    background-color: color-mix(in srgb, var(--wks-safe) 18%, transparent);
    border-color: color-mix(in srgb, var(--wks-safe) 55%, transparent);
}

/* Discards work or destroys a record: Cancel, Delete, Close with changes. */
button.wks-danger {
    background-color: var(--j2w-danger-subtle);
    border-color: color-mix(in srgb, var(--j2w-danger) 35%, transparent);
    color: var(--j2w-danger);
}

button.wks-danger:hover {
    background-color: color-mix(in srgb, var(--j2w-danger) 18%, transparent);
    border-color: color-mix(in srgb, var(--j2w-danger) 55%, transparent);
}

/*
 * Workspace header.
 *
 * One compact bar replacing the 64px logo band stacked over a separate toolbar
 * strip. The composition runs menu toggle / logo ... identity / account.
 *
 * The bar is tinted with the accent hue rather than left white: it is the only
 * band of chrome the application owns, so it is where the product's color
 * belongs. The wash stays at 6% - enough to read as deliberate against the
 * content below, low enough that body text on it keeps full contrast and the
 * brand logo is not fighting a colored field. The solid accent rule underneath
 * closes the bar and carries the saturated hue.
 *
 * The tint is mixed over --j2w-surface rather than declared as a hex pair, so
 * the bar paints its own ground in both themes instead of inheriting the
 * configured application background - a header must stay legible whatever
 * brand color is set; that color still shows through the content area below.
 */
.wks-header {
    background-color: color-mix(in srgb, var(--j2w-accent) 6%, var(--j2w-surface));
    border-bottom: 2px solid var(--j2w-accent);
    box-shadow: var(--j2w-shadow-1);
}

/*
 * Compact header, paired with the collapsed side menu.
 *
 * Collapsing is a request for screen, so the header gives some back instead of
 * only the sidebar doing the work. It drops to a single icon-height line: the
 * logo and the organisation eyebrow go, and the system name shrinks to body
 * weight so the bar still says which system you are looking at rather than
 * becoming an anonymous strip of glyphs.
 *
 * Height is driven by the 34px action chips, so the padding here is what sets
 * the final bar height.
 */
.wks-header-compact {
    padding-top: var(--j2w-space-1);
    padding-bottom: var(--j2w-space-1);
}

.wks-header-compact .wks-header-brand,
.wks-header-compact .wks-header-subtitle {
    display: none;
}

.wks-header-compact .wks-header-title {
    font-size: var(--j2w-text-md);
    font-weight: 600;
    letter-spacing: 0;
}

.wks-header-compact .wks-header-rule {
    height: 20px;
}

.wks-header-compact .wks-avatar {
    width: 24px;
    height: 24px;
}

/*
 * Identity block: the small line above is the organisation, the strong line
 * below is the system. The eyebrow is set as spaced small caps - typographic
 * hierarchy, not two competing font sizes like the old 32px/16px stack.
 */
.wks-header-subtitle {
    font-size: var(--j2w-text-xs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--j2w-text-muted);
    text-align: right;
}

.wks-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--j2w-text);
    text-align: right;
}

/*
 * Hairline separating the identity block from the account cluster. Tinted with
 * the accent hue: a neutral gray line reads as a stray artefact once the bar
 * around it is colored.
 */
.wks-header-rule {
    width: 1px;
    height: 30px;
    flex: none;
    align-self: center;
    background-color: color-mix(in srgb, var(--j2w-accent) 30%, transparent);
}

/*
 * Square hover chips for the header actions. The 34px box exists so the hover
 * state has a shape to paint and the hit target is bigger than the glyph.
 *
 * The hover fill is mixed against the bar's own tint rather than reusing
 * --j2w-accent-subtle: that token is calibrated for a plain surface and would
 * be almost invisible on top of the tinted header.
 */
.wks-header-chip {
    width: 34px;
    height: 34px;
    flex: none;
    /* A fixed-size box in a stretch row has to say where it sits: CSS resolves stretch to start
       once the size is definite, which would drop the chip to the top of the bar. */
    align-self: center;
    border-radius: var(--j2w-radius-md);
    color: var(--j2w-text-secondary);
    transition: background-color var(--j2w-duration-base) var(--j2w-ease),
                color var(--j2w-duration-base) var(--j2w-ease);
}

.wks-header-chip:hover {
    background-color: color-mix(in srgb, var(--j2w-accent) 16%, transparent);
    color: var(--j2w-accent);
}

/*
 * Identity avatar. Deliberately quiet: the account cluster is the least
 * important thing in the bar, so nothing in it may outweigh the brand or the
 * system title. A disc lifted back to the plain surface reads as a distinct
 * object on the tinted bar - the sunken gray it used to carry turns muddy
 * against a colored ground - while the muted glyph keeps its volume down.
 */
.wks-avatar {
    width: 28px;
    height: 28px;
    flex: none;
    align-self: center;
    border-radius: var(--j2w-radius-full);
    background-color: var(--j2w-surface);
    border: 1px solid color-mix(in srgb, var(--j2w-accent) 25%, transparent);
    color: var(--j2w-text-muted);
}

.wks-header-user {
    font-size: var(--j2w-text-sm);
    font-weight: 500;
    color: var(--j2w-text-secondary);
}

/*
 * Status bar at the foot of the workspace and of every tab. Sunken rather than
 * raised: it reports, it is not operated.
 */
.wks-status {
    min-height: var(--j2w-control-height);
    padding: var(--j2w-space-1) var(--j2w-space-2);
    font-size: var(--j2w-text-sm);
    color: var(--j2w-text-secondary);
    background-color: var(--j2w-surface-sunken);
    border-top: 1px solid var(--j2w-border);
}

/*
 * Panels that hold content - the tab bodies and the side menu - sit on the
 * surface with a hairline, so they separate from the application background
 * whatever color it is configured to.
 */
.wks-panel {
    background-color: var(--j2w-surface);
    border: 1px solid var(--j2w-border-strong);
    border-radius: var(--j2w-radius-md);
}

/* Toolbar strip above a table or a tab body. */
.wks-toolbar {
    background-color: var(--j2w-surface-sunken);
    border-bottom: 1px solid var(--j2w-border);
}

.wks-menu-content {
    padding: var(--j2w-space-2) var(--j2w-space-2) var(--j2w-space-2) var(--j2w-space-4);
}

/* Tab close button: chrome-free, so only the glyph reads as interactive. */
.wks-tab-close {
    color: var(--j2w-text-muted);
}

.wks-tab-close:hover {
    color: var(--j2w-danger);
}

/*
 * Console output. Monospace is load-bearing here - log lines are column
 * aligned - and tokens.css carries no mono family, so the stack is declared
 * locally rather than invented as a pseudo-token nothing else consumes.
 */
.wks-log-line {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--j2w-text-xs);
    line-height: 1.4;
    color: var(--j2w-text-secondary);
    white-space: pre-wrap;
}

/* Sign-in buttons under the form, one per provider that signs in elsewhere: as wide as the form above them. */
.wks-login-provider {
    width: 100%;
    min-width: 240px;
    justify-content: center;
}

/* Login card: the one raised element on an otherwise empty page. */
.wks-login-card {
    background-color: var(--j2w-surface);
    border: 1px solid var(--j2w-border);
    border-radius: var(--j2w-radius-xl);
    box-shadow: var(--j2w-shadow-3);
}

.wks-login-title {
    font-size: var(--j2w-text-xl);
    font-weight: 700;
    color: var(--j2w-text);
}

.wks-login-subtitle {
    font-size: var(--j2w-text-md);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--j2w-text-muted);
}

/* The overflow warning is a state lamp, so it keeps the full danger hue. */
.wks-overflow {
    color: var(--j2w-danger);
}

/*
 * A workspace showing one tab pane has a grip with nothing on the other side of it.
 *
 * The divider is the second separator, hence nth-last-child(2): the split's children run menu,
 * grip, tabs, grip, tabs. Its 8px track stays - only SplitPane writes the track list, and the
 * strip reads as padding at the window edge - but the handle is neither drawn nor draggable, so
 * nothing invites a drag that would reveal an empty panel.
 */
.wks-tabs-single > .separator-h:nth-last-child(2) {
    visibility: hidden;
    pointer-events: none;
}

/*
 * User settings dialog. Three unrelated settings in one form, so the headings
 * are what keep them apart - a run of six identical label/field rows would
 * read as one long questionnaire.
 */
.wks-settings-heading {
    font-size: var(--j2w-text-sm);
    font-weight: 600;
    color: var(--j2w-text);
    padding-top: var(--j2w-space-2);
}

/*
 * The note under the language. Quieter than the field it explains, but not so
 * quiet it goes unread: it carries the one thing about this dialog that is not
 * obvious, which is that the language does not change until the next sign-in.
 */
.wks-settings-note {
    font-size: var(--j2w-text-xs);
    color: var(--j2w-text-muted);
}