/**
 * @package     Gystiq.Template.CassiopeiaGystiq
 * @copyright   (C) 2026 GYSTiq
 * @license     GNU General Public License version 2 or later
 *
 * Command Center site kit: the Operation sidebar, the ccitems item lists, the
 * item card and the status badges, shared by every Command Center site. Every
 * color is a template variable (Joomla compiles Bootstrap with an EMPTY prefix),
 * so light/dark mode and each site's brand params apply. No color literals:
 * tests/KitContractTest.php fails on one. Do not fork this per site; add new
 * field option values to the value map below.
 */

/* ============================ Operation sidebar ============================
   Core mod_menu with Menu Class Suffix " operation-sidebar" (Cassiopeia puts it
   on the <ul>), inside the standard sidebar card whose header shows the module
   title. Icons are CSS masks keyed off each item's Link CSS Style
   (menu-anchor_css = "opsnav-ico opsnav-ico--*"); they take the text color. */
ul.operation-sidebar {
    list-style: none;
    margin: 0;
    padding: 0;
    position: sticky;
    top: 1rem;
    align-self: flex-start;
}
ul.operation-sidebar > li { margin: .125rem 0; }
ul.operation-sidebar > li > a {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    border-radius: var(--border-radius);
    color: var(--body-color);
    text-decoration: none;
}
ul.operation-sidebar > li > a:hover,
ul.operation-sidebar > li > a:focus-visible {
    color: var(--link-color);
    background: var(--tertiary-bg);
}
ul.operation-sidebar > li.current > a,
ul.operation-sidebar > li.active > a {
    color: var(--link-color);
    background: var(--secondary-bg);
    font-weight: 600;
}

/* Icons via CSS mask on the anchor's Link CSS Style class */
ul.operation-sidebar a[class*="opsnav-ico--"]::before {
    content: "";
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-inline-end: .75rem;
    background-color: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
ul.operation-sidebar a.opsnav-ico--grid::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--cubes::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--workflow::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='7' height='6' rx='1.5'/%3E%3Crect x='13.5' y='14' width='7' height='6' rx='1.5'/%3E%3Cpath d='M10.5 7h3.5a3 3 0 013 3v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='7' height='6' rx='1.5'/%3E%3Crect x='13.5' y='14' width='7' height='6' rx='1.5'/%3E%3Cpath d='M10.5 7h3.5a3 3 0 013 3v4'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--bolt::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--warning::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v3.8m0 3.7h.01M10.3 3.9 1.8 18a1.5 1.5 0 0 0 1.3 2.25h17.8A1.5 1.5 0 0 0 22.2 18L13.7 3.9a1.5 1.5 0 0 0-2.6 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v3.8m0 3.7h.01M10.3 3.9 1.8 18a1.5 1.5 0 0 0 1.3 2.25h17.8A1.5 1.5 0 0 0 22.2 18L13.7 3.9a1.5 1.5 0 0 0-2.6 0z'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--chart::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 13.5h4V21H3zM10 7.5h4V21h-4zM17 3.75h4V21h-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 13.5h4V21H3zM10 7.5h4V21h-4zM17 3.75h4V21h-4z'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--bulb::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--users::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--map::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4z'/%3E%3Cpath d='M8 2v16'/%3E%3Cpath d='M16 6v16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4z'/%3E%3Cpath d='M8 2v16'/%3E%3Cpath d='M16 6v16'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--route::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='19' r='3'/%3E%3Cpath d='M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15'/%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3C/svg%3E"); }

/* Constraints count (dynamic: real published-article count, via the mod_menu
   override). Same look as a Bootstrap .badge.rounded-pill.text-bg-secondary. */
ul.operation-sidebar a.opsnav-has-badge::after {
    content: attr(data-opsbadge);
    margin-inline-start: auto;
    min-width: 1.4rem;
    padding: .2rem .5rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: var(--white);
    background: var(--secondary);
    border-radius: var(--border-radius-pill);
}

/* ============================ System Profile buttons ============================
   Documentation/support URL fields shown as a primary and an outline button. */
.fields-container .field-entry.wfg-sysbtn { display: inline-block; margin: .4rem .5rem .1rem 0; }
.fields-container .field-entry.wfg-sysbtn .field-label { display: none; }
.fields-container .field-entry.wfg-sysbtn .field-value a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .375rem .75rem; line-height: 1.5;
    font-weight: 600; text-decoration: none;
    color: var(--btn-color, var(--white));
    background: var(--cassiopeia-color-primary);
    border: 1px solid var(--cassiopeia-color-primary);
    border-radius: var(--border-radius);
}
.fields-container .field-entry.wfg-sysbtn .field-value a:hover { background: var(--cassiopeia-color-hover); border-color: var(--cassiopeia-color-hover); }
/* URL field emits a generic "Visit Website"; replace with distinct button labels */
.fields-container .field-entry.documentation-url.wfg-sysbtn .field-value a,
.fields-container .field-entry.support-url.wfg-sysbtn .field-value a { font-size: 0; }
.fields-container .field-entry.documentation-url.wfg-sysbtn .field-value a::before { content: "Documentation"; font-size: 1rem; }
.fields-container .field-entry.support-url.wfg-sysbtn .field-value a::before { content: "Support"; font-size: 1rem; }
.fields-container .field-entry.support-url.wfg-sysbtn .field-value a { color: var(--link-color); background: transparent; border-color: var(--link-color); }
.fields-container .field-entry.support-url.wfg-sysbtn .field-value a:hover { color: var(--link-hover-color); background: var(--tertiary-bg); border-color: var(--link-hover-color); }

/* ============================ status badges ============================
   Bases are neutral, so an option value the map does not know yet still renders
   as a gray pill. Known values use Bootstrap's subtle pairs (light and dark). */
.cc-badge, .cc-sbadge, .cc-cbadge, .cc-abadge {
    display: inline-block;
    padding: .2rem .55rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--secondary-text-emphasis);
    background: var(--secondary-bg-subtle);
    border-radius: var(--border-radius-pill);
}
.cc-tag { font-size: .75rem; color: var(--secondary-text-emphasis); background: var(--secondary-bg-subtle); padding: .12rem .5rem; border-radius: var(--border-radius); white-space: nowrap; }

/* value map (spec 3.2) */
.cc-sbadge--live, .cc-sbadge--active, .cc-badge--urgency-low, .cc-abadge--available
    { color: var(--success-text-emphasis); background: var(--success-bg-subtle); }
.cc-sbadge--setup, .cc-sbadge--gap, .cc-cbadge--important, .cc-badge--urgency-medium,
.cc-abadge--setup, .cc-abadge--partial
    { color: var(--warning-text-emphasis); background: var(--warning-bg-subtle); }
.cc-sbadge--planned, .cc-badge--importance-medium, .cc-badge--importance-high, .cc-abadge--planned
    { color: var(--info-text-emphasis); background: var(--info-bg-subtle); }
.cc-sbadge--retired, .cc-sbadge--legacy, .cc-cbadge--optional, .cc-badge--importance-low
    { color: var(--secondary-text-emphasis); background: var(--secondary-bg-subtle); }
.cc-cbadge--critical, .cc-badge--urgency-high, .cc-abadge--unavailable
    { color: var(--danger-text-emphasis); background: var(--danger-bg-subtle); }
.cc-badge--urgency-critical
    { color: var(--white); background: var(--danger); }
.cc-badge--importance-critical
    { color: var(--white); background: var(--primary); }

/* ============================ progress meter ============================ */
.cc-progress { display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle; }
.cc-progress-track { display: inline-block; width: 160px; height: .5rem; background: var(--secondary-bg); border-radius: var(--border-radius-pill); overflow: hidden; }
.cc-progress-fill { display: block; height: 100%; background: var(--primary-text-emphasis); border-radius: var(--border-radius-pill); }
.cc-progress-num { font-size: .875rem; font-weight: 600; color: var(--secondary-color); }

/* ============================ item lists ============================ */
/* The list layout's wrapper. Its fixed status columns are wider than a phone,
   so the table scrolls inside the wrapper instead of widening the page. */
.cc-itemview { overflow-x: auto; }
.cc-list-empty { color: var(--secondary-color); padding: 1rem; }
.cc-list-pagination { margin-top: 1rem; }
.cc-row-title { font-weight: 600; color: var(--emphasis-color); text-decoration: none; }
.cc-row-title:hover { color: var(--link-color); text-decoration: underline; }
.cc-row-desc { display: block; margin-top: .15rem; font-size: .875rem; color: var(--secondary-color); }

/* ============================ ccitems category table ============================ */
.cc-table { width: 100%; border-collapse: collapse; }
.cc-table thead th { text-align: start; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary-color); font-weight: 700; padding: .55rem 1rem; border-bottom: 2px solid var(--border-color); white-space: nowrap; }
.cc-table tbody td { padding: .7rem 1rem; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.cc-table tbody tr:last-child td { border-bottom: 0; }
.cc-table tbody tr:hover td { background: var(--tertiary-bg); }
.cc-th-name, .cc-td-name { width: auto; }
.cc-th-meta, .cc-td-meta { width: 128px; }
.cc-th-progress, .cc-td-progress { width: 190px; }
.cc-td-meta, .cc-td-progress { white-space: nowrap; }
.cc-td-progress .cc-progress-track { width: 120px; }

/* Reports list columns (Source + Availability) */
.cc-th-source, .cc-td-source { width: 200px; color: var(--secondary-color); font-size: .875rem; }

/* ============================ item card (article override) ============================ */
.cc-article { max-width: 46rem; }
.cc-article__head { border-bottom: 2px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 1.5rem; }
.cc-article__cat { margin: 0 0 .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--link-color); }
.cc-article__title { margin: 0; font-size: 1.9rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--emphasis-color); }
.cc-article__meta { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .9rem; }
.cc-meta-item { display: inline-flex; align-items: center; gap: .4rem; }
.cc-meta-k { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary-color); }
.cc-article__body { font-size: 1rem; line-height: 1.65; }
.cc-article__body p { margin: 0 0 1rem; }
.cc-article__body h2, .cc-article__body h3 { color: var(--emphasis-color); margin: 1.6rem 0 .6rem; }
.cc-article__body ul, .cc-article__body ol { margin: 0 0 1rem 1.25rem; }
.cc-article__body li { margin-bottom: .35rem; }
.cc-article__body strong { color: var(--emphasis-color); }
.cc-article__body code { color: var(--emphasis-color); background: var(--tertiary-bg); padding: .1rem .35rem; border-radius: var(--border-radius-sm); font-size: .9em; }
.cc-article__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.cc-article__body th { text-align: start; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary-color); padding: .5rem .75rem; border-bottom: 2px solid var(--border-color); }
.cc-article__body td { padding: .5rem .75rem; border-bottom: 1px solid var(--border-color); }
.cc-article__body em { color: var(--secondary-color); }
.cc-article__back { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.cc-article__back a { color: var(--link-color); font-weight: 600; text-decoration: none; }
.cc-article__back a:hover { text-decoration: underline; }

/* ============================ Logo backdrop = plate (style param) ============================
   A white card behind a dark-ink logo so it reads on any brand header, in either
   scheme. The plate goes on the anchor only: Cassiopeia nests
   div.navbar-brand > a.brand-logo > img, and styling both draws a box in a box. */
.gystiq-logo-plate .container-header a.brand-logo {
    display: inline-flex;
    align-items: center;
    padding: .625rem 1.125rem;
    line-height: 0;
    background: var(--white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-sm);
}
@media (max-width: 600px) {
    .gystiq-logo-plate .container-header a.brand-logo { padding: .5rem .75rem; }
}