/* =========================================================================
   console.css — "Calm operations console" global layer
   Loaded last (after the PrimeFaces theme, remix.css and layout.css), so it
   wins by source order. Everything derives from the theme's own tokens
   (--surface-*, --text-color*, --primary-color, --border-radius, --focus-ring)
   so it adapts to every theme, light or dark, automatically.

   Phase 1: global calm, no markup changes. Three rules —
     · colour is state, not chrome
     · one accent, spent once per view
     · content is the brightest thing
   ========================================================================= */

:root {
    /* Data face — IDs, timestamps, sizes, log lines, meter %. */
    --con-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* State palette — fixed hues legible on both grounds, shown as a dot or a
       tinted chip, never a saturated block. Separate from the accent. */
    --con-ok:   #3fae6f;
    --con-warn: #d9982f;
    --con-crit: #df5049;
    --con-info: var(--primary-color);
    --con-ok-bg:   color-mix(in srgb, var(--con-ok)   16%, transparent);
    --con-warn-bg: color-mix(in srgb, var(--con-warn) 18%, transparent);
    --con-crit-bg: color-mix(in srgb, var(--con-crit) 16%, transparent);
    --con-info-bg: color-mix(in srgb, var(--con-info) 15%, transparent);

    /* A neutral chip ground for classification labels (origin, type). */
    --con-neutral-bg: color-mix(in srgb, var(--text-color) 8%, transparent);
}

/* -------------------------------------------------------------------------
   1 · Pagination — PrimeFaces defaults paginatorPosition to "both", so every
   table renders a duplicate paginator on top. Remove it everywhere; quiet the
   one that remains.
   ------------------------------------------------------------------------- */
body .ui-paginator-top { display: none; }

body .ui-paginator {
    background: transparent;
    border: 0;
    padding: .5rem .25rem 0;
    color: var(--text-color-secondary);
}
body .ui-paginator .ui-paginator-current { color: var(--text-color-secondary); }
body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
    background: var(--con-info-bg);
    color: var(--primary-color);
}

/* -------------------------------------------------------------------------
   2 · Buttons — soften the default; reserve the loud filled look. Toolbar and
   per-row buttons recede so the data is the brightest thing.
   ------------------------------------------------------------------------- */
body .ui-button {
    font-weight: 500;
    box-shadow: none;
}
body .ui-button:enabled:focus { box-shadow: var(--focus-ring); }

/* Buttons inside a table's header toolbar (Export, Columns, Refresh, Assign)
   become quiet outlined controls — they frame the data, they aren't the data. */
body .ui-datatable .ui-datatable-header .ui-button,
body .ui-datalist .ui-datalist-header .ui-button {
    background: transparent;
    color: var(--text-color-secondary);
    border: 1px solid var(--surface-border);
    box-shadow: none;
}
body .ui-datatable .ui-datatable-header .ui-button:enabled:hover,
body .ui-datalist .ui-datalist-header .ui-button:enabled:hover {
    background: var(--surface-hover);
    color: var(--text-color);
    border-color: var(--surface-border);
}
/* Keep the split-button's menu trigger visually attached to its host. */
body .ui-datatable .ui-datatable-header .ui-splitbutton .ui-button { border-radius: 0; }

/* Opt-in: one primary action (e.g. Add) may sit in a toolbar and keep its fill,
   while the surrounding Export/Columns/Refresh stay quiet. */
body .ui-datatable .ui-datatable-header .ui-button.con-primary,
body .ui-datatable .ui-datatable-header .ui-menubutton.con-primary > .ui-button {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color-text, #ffffff);
}
body .ui-datatable .ui-datatable-header .ui-button.con-primary:enabled:hover,
body .ui-datatable .ui-datatable-header .ui-menubutton.con-primary > .ui-button:enabled:hover {
    background: color-mix(in srgb, var(--primary-color) 88%, #000);
    border-color: color-mix(in srgb, var(--primary-color) 88%, #000);
    color: var(--primary-color-text, #ffffff);
}
/* The primary create action anchors to the end (far right) of its toolbar
   cluster on every page — via flex order, so no DOM reshuffle is needed. */
body .ui-button.con-primary,
body .ui-menubutton.con-primary { order: 10; }

/* Per-row action icons — quiet by default, reveal on row hover. The row is the
   content; its controls shouldn't shout on every line. */
body .ui-datatable .ui-datatable-data td .ui-button.ui-button-icon-only {
    background: transparent;
    border-color: transparent;
    color: var(--text-color-secondary);
    box-shadow: none;
    opacity: .5;
    transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}
body .ui-datatable .ui-datatable-data tr:hover td .ui-button.ui-button-icon-only,
body .ui-datatable .ui-datatable-data td .ui-button.ui-button-icon-only:focus {
    opacity: 1;
}
body .ui-datatable .ui-datatable-data td .ui-button.ui-button-icon-only:enabled:hover {
    background: var(--surface-hover);
    color: var(--text-color);
}
@media (prefers-reduced-motion: reduce) {
    body .ui-datatable .ui-datatable-data td .ui-button.ui-button-icon-only { transition: none; }
}

/* -------------------------------------------------------------------------
   3 · Tags & badges → chips. Colour means state here, so pills lose their
   saturated fill for a tinted-background, coloured-text chip.
   ------------------------------------------------------------------------- */
body .ui-tag {
    font-weight: 500;
    border-radius: 100px;
    padding: .15rem .6rem;
    background: var(--con-neutral-bg);
    color: var(--text-color-secondary);
}
body .ui-tag.ui-tag-success { background: var(--con-ok-bg);   color: var(--con-ok); }
body .ui-tag.ui-tag-info    { background: var(--con-info-bg); color: var(--con-info); }
body .ui-tag.ui-tag-warning { background: var(--con-warn-bg); color: var(--con-warn); }
body .ui-tag.ui-tag-danger  { background: var(--con-crit-bg); color: var(--con-crit); }

/* Status dot badge next to the entity title — a meaningful dot, state-coloured. */
body .ui-badge.ui-badge-success { background: var(--con-ok); }
body .ui-badge.ui-badge-info    { background: var(--con-info); }
body .ui-badge.ui-badge-warning { background: var(--con-warn); }
body .ui-badge.ui-badge-danger  { background: var(--con-crit); }

/* PrimeFlex utility pills used for status (bg-*-500 + text-white) become the
   same tinted chips. In this app these classes are only ever status pills. */
body .bg-green-500,
body .bg-teal-500  { background: var(--con-ok-bg);   color: var(--con-ok)   !important; border-radius: 100px; }
body .bg-blue-500,
body .bg-cyan-500  { background: var(--con-info-bg); color: var(--con-info) !important; border-radius: 100px; }
body .bg-yellow-500,
body .bg-orange-500{ background: var(--con-warn-bg); color: var(--con-warn) !important; border-radius: 100px; }
body .bg-red-500,
body .bg-pink-500  { background: var(--con-crit-bg); color: var(--con-crit) !important; border-radius: 100px; }

/* -------------------------------------------------------------------------
   4 · Tables — remove per-row heaviness; quiet, uppercase heads; comfortable
   rows; a subtle hover; digits that line up.
   ------------------------------------------------------------------------- */
body .ui-datatable .ui-datatable-thead > tr > th {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--surface-border);
    color: var(--text-color-secondary);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .6rem .75rem;
}
body .ui-datatable .ui-datatable-data > tr > td {
    border: 0;
    border-bottom: 1px solid var(--surface-border);
    padding: .7rem .75rem;
    color: var(--text-color);
}
body .ui-datatable .ui-datatable-data > tr { background: transparent; }
body .ui-datatable .ui-datatable-data > tr.ui-datatable-even { background: transparent; }
body .ui-datatable .ui-datatable-data > tr:hover {
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}
body .ui-datatable .ui-datatable-data > tr.ui-state-highlight {
    background: var(--con-info-bg);
    color: var(--text-color);
}
/* Numeric / identifier cells align and read as data. */
body .ui-datatable td.con-num,
body .con-mono { font-family: var(--con-mono); font-variant-numeric: tabular-nums; }
body .ui-datatable td.con-mono { font-size: .82rem; }

/* Event log — origin as a subtle left stripe in the source colour, not a column.
   Player is a faint neutral; server events carry the accent so they stand out;
   unknown is flagged. */
body .ui-datatable tr.evt-player  > td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--text-color) 22%, transparent); }
body .ui-datatable tr.evt-server  > td:first-child { box-shadow: inset 3px 0 0 var(--con-info); }
body .ui-datatable tr.evt-invalid > td:first-child { box-shadow: inset 3px 0 0 var(--con-crit); }

/* Status as a left row-stripe (e.g. zone members) — the state colour on the row
   edge instead of a saturated badge in its own column. */
body .ui-datatable tr.row-ok   > td:first-child { box-shadow: inset 3px 0 0 var(--con-ok); }
body .ui-datatable tr.row-warn > td:first-child { box-shadow: inset 3px 0 0 var(--con-warn); }
body .ui-datatable tr.row-crit > td:first-child { box-shadow: inset 3px 0 0 var(--con-crit); }
body .ui-datatable tr.row-info > td:first-child { box-shadow: inset 3px 0 0 var(--con-info); }

body .ui-datatable {
    background: transparent;
    border: 0;
}
body .ui-datatable .ui-datatable-header {
    background: transparent;
    border: 0;
    padding: 0 0 .75rem;
}

/* -------------------------------------------------------------------------
   5 · Tabs, panels, cards — reduce enclosure. A tab already frames its
   content; don't wrap it in another bordered card.
   ------------------------------------------------------------------------- */
body .ui-tabview .ui-tabview-nav {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--surface-border);
}
body .ui-tabview .ui-tabview-nav li .ui-tabview-nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-color-secondary);
    font-weight: 500;
    padding: .75rem 1rem;
}
body .ui-tabview .ui-tabview-nav li.ui-state-active .ui-tabview-nav-link {
    color: var(--text-color);
    border-bottom-color: var(--primary-color);
}
body .ui-tabview .ui-tabview-panels {
    background: transparent;
    border: 0;
    padding: 1.25rem 0;
}

body .ui-panel,
body .ui-card {
    border: 1px solid var(--surface-border);
    box-shadow: none;
    border-radius: var(--border-radius);
}
body .ui-panel .ui-panel-titlebar { background: transparent; border: 0; }

/* Fieldsets → coherent labeled sections, not separate bordered boxes with a
   floating legend chip. The box border drops away and the legend becomes the
   same quiet underlined header the status/detail def-lists use, so a form
   reads as one surface with grouped fields rather than a stack of islands. */
body .ui-fieldset {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin-bottom: 1.75rem;
    min-width: 0;
}
body .ui-fieldset > .ui-fieldset-legend {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--surface-border);
    padding: 0 0 .5rem;
    margin: 0 0 1rem;
    color: var(--text-color-secondary);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
body .ui-fieldset > .ui-fieldset-content { padding: 0; }

/* A tab panel's immediate panel/card is redundant enclosure — flatten it. */
body .ui-tabview-panel > .ui-panel,
body .ui-tabview-panel > .ui-card {
    border: 0;
    background: transparent;
}
body .ui-tabview-panel > .ui-panel > .ui-panel-content { padding: 0; }

/* -------------------------------------------------------------------------
   6 · Inputs & dialogs — align to tokens, soften.
   ------------------------------------------------------------------------- */
/* Solid surface on the whole dialog so the titlebar/footer (below) can stay
   transparent without showing the dark modal mask through them. */
body .ui-dialog { background: var(--surface-overlay, var(--surface-card)); }
body .ui-dialog .ui-dialog-titlebar {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--surface-border);
}
body .ui-dialog .ui-dialog-content { background: var(--surface-overlay, var(--surface-card)); }
body .ui-dialog .ui-dialog-footer {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--surface-border);
    padding-top: .9rem;
}

/* Global search / filter fields read as quiet chrome. */
body .ui-inputtext:enabled:focus { box-shadow: var(--focus-ring); }

/* -------------------------------------------------------------------------
   7 · Accessibility floor.
   ------------------------------------------------------------------------- */
body a:focus-visible,
body .ui-link:focus-visible,
body .ui-button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* -------------------------------------------------------------------------
   Utilities for the per-page phases (opt-in).
   ------------------------------------------------------------------------- */
.con-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; font-weight: 500; line-height: 1;
    padding: .28rem .6rem .28rem .5rem; border-radius: 100px;
    /* Neutral chip is outlined with full-strength text so it reads on a light
       ground; state chips below fill with a tint instead. */
    background: transparent; color: var(--text-color);
    border: 1px solid var(--surface-border);
}
.con-chip .con-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.con-chip.con-ok   { background: var(--con-ok-bg);   color: var(--con-ok);   border-color: transparent; }
.con-chip.con-warn { background: var(--con-warn-bg); color: var(--con-warn); border-color: transparent; }
.con-chip.con-crit { background: var(--con-crit-bg); color: var(--con-crit); border-color: transparent; }
.con-chip.con-info { background: var(--con-info-bg); color: var(--con-info); border-color: transparent; }

/* Row-group header (e.g. zones on the Players list): reserve a fixed gutter for
   the expander so groups with no children line up with expandable ones. */
body .ui-datatable .ui-rowgroup-header > td { position: relative; padding-left: 2.75rem; }
body .ui-datatable .ui-rowgroup-header > td .ui-row-toggler {
    position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); margin: 0;
}

/* Bare status dot (list rows) — colour by state modifier. */
.con-statusdot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--text-color-secondary); vertical-align: middle;
}
.con-statusdot.con-ok   { background: var(--con-ok); }
.con-statusdot.con-warn { background: var(--con-warn); }
.con-statusdot.con-crit { background: var(--con-crit); }
.con-statusdot.con-info { background: var(--con-info); }

/* Appearance picker — highlight the active light/dark tile. */
.con-appearance-active img { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 6px; }

/* Segmented switch (e.g. Music / Marketing on the Schedules page). */
.con-segmented { display: inline-flex; border: 1px solid var(--surface-border); border-radius: 8px; overflow: hidden; }
.con-segmented .ui-button.con-seg,
.con-segmented .ui-button.con-seg:enabled:hover {
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    color: var(--text-color-secondary); font-weight: 500;
}
.con-segmented .ui-button.con-seg:enabled:hover { background: var(--surface-hover); color: var(--text-color); }
.con-segmented .ui-button.con-seg.con-seg-active {
    background: var(--con-info-bg); color: var(--primary-color);
}

.con-meter { display: inline-flex; align-items: center; gap: .55rem; }
.con-meter .con-track { width: 120px; height: 5px; border-radius: 100px; background: var(--con-neutral-bg); overflow: hidden; }
.con-meter .con-fill { height: 100%; border-radius: 100px; background: var(--con-ok); }
.con-meter .con-fill.con-warn { background: var(--con-warn); }
.con-meter .con-fill.con-crit { background: var(--con-crit); }
.con-meter .con-pct { font-family: var(--con-mono); font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--text-color-secondary); min-width: 2.5rem; text-align: right; }

/* -------------------------------------------------------------------------
   Page action bar — one sticky cluster per detail/editor page, replacing the
   duplicated top+bottom Save/Close bars. It sticks to the top of the scroll
   container (#content_container) as the page scrolls, so the page-level
   controls stay reachable through long tabbed content without a second bar at
   the foot of the page. Primary action sits right; a page-scoped extra (e.g.
   Lodge issue) can sit left via .con-action-secondary.
   ------------------------------------------------------------------------- */
.con-actionbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .6rem 0;
    background: var(--surface-ground);
    border-bottom: 1px solid var(--surface-border);
}
.con-actionbar .con-action-secondary { margin-right: auto; }

/* -------------------------------------------------------------------------
   List toolbar — one consistent controls row above a table: filters on the
   left, actions/utilities on the right, wrapping on narrow screens. The
   table's own search + Columns stay in its header facet (PrimeFaces binds the
   global filter and column toggler to the table), so a list reads as two
   aligned tiers: [ filters | actions ] then [ search | Columns ] + the rows.
   ------------------------------------------------------------------------- */
.con-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}
.con-toolbar .con-toolbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-right: auto;
}
.con-toolbar .con-toolbar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* -------------------------------------------------------------------------
   Status ribbon — the signature element. Sits above the tabs and answers
   "is it healthy / what's it doing" before any tab is opened: a state dot,
   the state in words, and (when playing) now / up-next.
   ------------------------------------------------------------------------- */
.con-ribbon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.5rem;
    padding: .65rem .9rem;
    margin: .25rem 0 0;
    border: 1px solid var(--surface-border);
    border-radius: var(--border-radius);
    background: var(--surface-card);
    /* Hug the content rather than stretch edge-to-edge, so the band clears the
       right-anchored platform image in the header instead of running under it. */
    width: fit-content;
    max-width: 100%;
}
.con-ribbon .con-ribbon-item { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.con-ribbon .con-ribbon-state { font-weight: 600; }
.con-ribbon .con-ribbon-label { color: var(--text-color-secondary); }
.con-ribbon .con-ribbon-track { color: var(--text-color); font-weight: 500; }
.con-ribbon .con-ribbon-sub { color: var(--text-color-secondary); }
.con-ribbon i { color: var(--text-color-secondary); font-size: .85rem; }

/* -------------------------------------------------------------------------
   Grouped definition list — the calm replacement for the flat status/detail
   lists. Sections carry an uppercase label; rows are a quiet label + value.
   ------------------------------------------------------------------------- */
.con-deflist { display: grid; gap: 1.75rem; margin: 0; }
.con-deflist .con-group-label {
    font-size: .72rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-color-secondary);
    padding-bottom: .5rem; margin: 0 0 .5rem;
    border-bottom: 1px solid var(--surface-border);
}
.con-deflist dl { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: 0 1.5rem; margin: 0; }
.con-deflist dt { color: var(--text-color-secondary); padding: .4rem 0; }
.con-deflist dd { color: var(--text-color); padding: .4rem 0; margin: 0; }
@media (max-width: 640px) {
    .con-deflist dl { grid-template-columns: 1fr; }
    .con-deflist dt { padding-bottom: 0; }
    .con-deflist dd { padding-top: 0; padding-bottom: .6rem; }
}

/* Inline storage meters — one row per filesystem, replacing the per-device
   tab + table. Green under 70%, amber 70–90%, red over 90%. */
.con-storage-device + .con-storage-device { margin-top: 1.1rem; }
.con-storage-model { font-size: .8rem; color: var(--text-color-secondary); margin-bottom: .45rem; }
.con-storage-fs { display: flex; align-items: center; gap: .85rem; padding: .28rem 0; flex-wrap: wrap; }
.con-storage-fs .con-fs-mount { min-width: 5rem; font-family: var(--con-mono); font-size: .82rem; }
.con-storage-fs .con-fs-detail { font-size: .8rem; color: var(--text-color-secondary); }
/* The Cancel/Close companion recedes to a quiet outline — one primary per view. */
.con-actionbar .ui-button.ui-button-outlined {
    background: transparent;
    color: var(--text-color-secondary);
    border: 1px solid var(--surface-border);
    box-shadow: none;
}
.con-actionbar .ui-button.ui-button-outlined:enabled:hover {
    background: var(--surface-hover);
    color: var(--text-color);
}