/* UWP brand: red logo block on white header — matches uwpbooks.com */
.container-header {
    border-bottom: 1px solid #e9ecef;
}

.container-header .brand-logo {
    background-color: #c34032;
    padding: 14px 22px;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.container-header .brand-logo img {
    display: block;
    height: 56px;
    width: auto;
}

/* Menu reads on white */
.container-header .mod-menu .nav-link,
.container-header .mod-menu a {
    color: #212529;
}

.container-header .mod-menu .nav-link:hover,
.container-header .mod-menu .nav-link:focus,
.container-header .mod-menu .active > .nav-link {
    color: #c34032;
}


/* ============================================================
   Operation sidebar — core mod_menu, Menu Class Suffix
   " operation-sidebar" (Cassiopeia applies it to the <ul>).
   Icons are CSS masks keyed off each item's Link CSS Style
   (menu-anchor_css = "opsnav-ico opsnav-ico--*").
   ============================================================ */
ul.operation-sidebar {
    list-style: none;
    margin: 0;
    padding: 1.1rem 0.85rem 1.4rem;
    background: linear-gradient(180deg, #1f2a47 0%, #161f38 100%);
    border-radius: 14px;
    color: #aeb9d0;
}
ul.operation-sidebar::before {
    content: "Operation";
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7895;
    font-weight: 700;
    padding: 0 0.75rem 0.6rem;
}
ul.operation-sidebar > li { margin: 0.15rem 0; }
ul.operation-sidebar > li > a {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    color: #b8c2d8;
    text-decoration: none;
    font-size: 0.97rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
ul.operation-sidebar > li > a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
ul.operation-sidebar > li.current > a,
ul.operation-sidebar > li.active > a {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* 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: 22px;
    height: 22px;
    margin-right: 0.85rem;
    background-color: currentColor;
    opacity: 0.8;
    -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 li.current a[class*="opsnav-ico--"]::before,
ul.operation-sidebar li.active a[class*="opsnav-ico--"]::before { background-color: #36c6b2; opacity: 1; }

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"); }

/* Constraints badge (dynamic: real published-article count, via mod_menu override) */
ul.operation-sidebar a.opsnav-has-badge::after {
    content: attr(data-opsbadge);
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8632a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
}

/* Keep the operation sidebar in view while the page scrolls */
ul.operation-sidebar {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
}


/* === two-brand theme tokens: consume the active template style's CSS vars === */
.container-header .brand-logo { background-color: var(--btnbg, #c34032); }
.container-header .mod-menu .nav-link:hover,
.container-header .mod-menu .nav-link:focus,
.container-header .mod-menu .active > .nav-link { color: var(--link-hover-color, #c34032); }

ul.operation-sidebar {
    background: linear-gradient(180deg, var(--sidebarbg, #1f2a47) 0%,
        color-mix(in srgb, var(--sidebarbg, #1f2a47) 62%, #000) 100%);
}
ul.operation-sidebar li.current a[class*="opsnav-ico--"]::before,
ul.operation-sidebar li.active a[class*="opsnav-ico--"]::before { background-color: var(--sidebaractive, #36c6b2); }
ul.operation-sidebar a.opsnav-has-badge::after { background: var(--badgecolor, #e8632a); }


/* brandbox override: logo box color is independent of buttons; header menu follows header text color */
.container-header .brand-logo { background-color: var(--brandbox, var(--btnbg, #c34032)); }
.container-header .mod-menu .nav-link,
.container-header .mod-menu a { color: var(--headercolor, #212529); }

/* ---- System Profile: documentation/support URL fields as buttons ---- */
.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: .45rem 1rem; border-radius: 8px; line-height: 1;
    font-weight: 600; font-size: .9rem; text-decoration: none;
    background: #004a59; color: #fff; border: 1px solid #004a59;
}
.fields-container .field-entry.wfg-sysbtn .field-value a:hover { background: #00363f; border-color: #00363f; color:#fff; }
/* 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: .9rem; }
.fields-container .field-entry.support-url.wfg-sysbtn .field-value a::before { content: "Support"; font-size: .9rem; }
/* Support as an outline variant to differentiate from Documentation */
.fields-container .field-entry.support-url.wfg-sysbtn .field-value a { background: #fff; color: #004a59; }
.fields-container .field-entry.support-url.wfg-sysbtn .field-value a:hover { background: #eef5f6; color: #004a59; }

/* Insights icon (light bulb) */
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"); }

/* === Constraint tracking fields: progress meter + urgency/importance badges === */
.cc-progress { display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle; }
.cc-progress-track { display: inline-block; width: 160px; height: 10px; background: #e6e6e6; border-radius: 6px; overflow: hidden; }
.cc-progress-fill { display: block; height: 100%; background: #2bb7b2; border-radius: 6px; }
.cc-progress-num { font-size: .85rem; font-weight: 600; color: #555; }
.cc-badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.cc-badge--urgency-low { background: #e8f5e9; color: #2e7d32; }
.cc-badge--urgency-medium { background: #fff6df; color: #a67c00; }
.cc-badge--urgency-high { background: #fdecea; color: #c0392b; }
.cc-badge--urgency-critical { background: #c0392b; color: #fff; }
.cc-badge--importance-low { background: #eef2f7; color: #5b6b7c; }
.cc-badge--importance-medium { background: #e3f2fd; color: #1565c0; }
.cc-badge--importance-high { background: #e8eaf6; color: #3949ab; }
.cc-badge--importance-critical { background: #303751; color: #fff; }

/* === Content list rows (Systems / Constraints category list) === */
.cc-list { list-style: none; margin: 0; padding: 0; }
.cc-list-empty { color: #8a8a8a; padding: 1rem; }
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid #eee; }
.cc-row:last-child { border-bottom: 0; }
.cc-row-main { min-width: 0; }
.cc-row-title { font-weight: 600; color: #2b2b2b; text-decoration: none; }
.cc-row-title:hover { text-decoration: underline; }
.cc-row-desc { display: block; font-size: .82rem; color: #8a8a8a; margin-top: .15rem; }
.cc-row-meta { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.cc-tag { font-size: .72rem; color: #5b6b7c; background: #eef2f7; padding: .12rem .5rem; border-radius: 6px; white-space: nowrap; }
.cc-sbadge, .cc-cbadge { font-size: .72rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; white-space: nowrap; }
.cc-sbadge--live { background: #e8f5e9; color: #2e7d32; }
.cc-sbadge--setup { background: #fff6df; color: #a67c00; }
.cc-sbadge--planned { background: #e3f2fd; color: #1565c0; }
.cc-sbadge--retired { background: #ededed; color: #777; }
.cc-cbadge--critical { background: #fdecea; color: #c0392b; }
.cc-cbadge--important { background: #fff6df; color: #a67c00; }
.cc-cbadge--optional { background: #eef2f7; color: #5b6b7c; }
@media (max-width: 600px) { .cc-row { flex-direction: column; align-items: flex-start; } .cc-row-meta { justify-content: flex-start; } }
/* People tab — masked-SVG users icon (Feather "users", matches opsnav-ico--cubes/--bulb convention) */
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"); }

/* === ccitems category TABLE (header + fixed right-side columns) === */
.cc-table { width: 100%; border-collapse: collapse; }
.cc-table thead th { text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; font-weight: 700; padding: .55rem 1rem; border-bottom: 2px solid #ececec; white-space: nowrap; }
.cc-table tbody td { padding: .7rem 1rem; border-bottom: 1px solid #f1f1f1; vertical-align: middle; }
.cc-table tbody tr:last-child td { border-bottom: 0; }
.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: #5b6b7c; font-size: .85rem; }
.cc-abadge { font-size: .72rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; white-space: nowrap; }
.cc-abadge--available { background: #e8f5e9; color: #2e7d32; }
.cc-abadge--setup { background: #fff6df; color: #a67c00; }
.cc-abadge--planned { background: #eef2f7; color: #5b6b7c; }