/* Safetech Hub – sidebar section titles and home dashboard */

/* Sidebar section titles */
.nav-sidebar .nav-header.hub-nav-header {
  font-size: .72rem;
  letter-spacing: .08em;
  font-weight: 600;
  opacity: .7;
  padding: 1rem 1rem .35rem;
}
.nav-sidebar .nav-header.hub-nav-header:first-child { padding-top: .5rem; }
.sidebar-collapse .main-sidebar:not(:hover) .nav-header.hub-nav-header { display: none; }

/* Dashboard */
.hub-dash { padding: .25rem 0 2rem; }
.hub-hero {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end;
  margin-bottom: 1.25rem;
}
.hub-hero h1 { font-size: 1.6rem; font-weight: 600; margin: 0; }
.hub-date { color: #6c757d; margin: .15rem 0 .6rem; }
.hub-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.hub-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #e9f2fb; color: #17507f; border-radius: 999px; padding: .2rem .7rem; font-size: .85rem;
}
.hub-chip-muted { background: #f1f1f1; color: #666; }
.hub-viewas { display: flex; flex-direction: column; gap: .25rem; min-width: 200px; }
.hub-viewas label { font-size: .8rem; color: #6c757d; margin: 0; }
.hub-viewas small { color: #a15c00; max-width: 240px; }

.hub-card { height: calc(100% - 1rem); }
.hub-card .card-title { font-size: 1rem; font-weight: 600; }
.hub-card .card-title i { color: #6c757d; margin-right: .25rem; }
.hub-card .card-tools { display: flex; align-items: center; gap: .35rem; }
.hub-source { font-weight: 500; font-size: .7rem; }
.hub-card .btn-tool { font-size: .8rem; }

.hub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; }
.hub-stats .info-box { margin: 0; min-height: 72px; box-shadow: none; border: 1px solid rgba(0,0,0,.08); }
.hub-stats .info-box .info-box-icon { width: 48px; font-size: 1.25rem; }
.hub-stats .info-box-text { white-space: normal; }
.hub-stats .info-box-number { font-size: 1.25rem; white-space: nowrap; }
.hub-stat-sub { display: block; font-size: .75rem; color: #6c757d; }
.hub-card .hub-stats + .table-responsive { margin-top: .75rem; }

.hub-table { margin: 0; font-size: .88rem; }
.hub-table th { font-weight: 600; color: #6c757d; border-top: 0; white-space: nowrap; }
.hub-table td { word-break: break-word; }
.hub-empty { color: #6c757d; margin: 0; }
.hub-error { color: #b02a37; margin: .4rem 0 0; }
.hub-note { color: #6c757d; font-size: .85rem; margin: .5rem 0 0; }
.hub-big { font-size: 1.25rem; font-weight: 600; margin: 0; }
.hub-sub { font-size: .9rem; font-weight: 600; margin: 1rem 0 .4rem; }
.hub-dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 .75rem; font-size: .9rem; }
.hub-dl dt { font-weight: 500; color: #6c757d; }
.hub-dl dd { margin: 0; word-break: break-word; }

.hub-tools { margin-top: 1rem; }
.hub-tools h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: .75rem; }
.hub-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.hub-tools-group { background: #fff; border-radius: .35rem; box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); padding: .9rem 1rem; }
.hub-tools-group h3 { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #6c757d; margin: 0 0 .5rem; font-weight: 600; }
.hub-tools-group ul { list-style: none; margin: 0; padding: 0; }
.hub-tools-group li { padding: .3rem 0; border-top: 1px solid #f0f0f0; }
.hub-tools-group li:first-child { border-top: 0; }
.hub-tools-group a { font-weight: 500; }
.hub-tools-group a i { width: 1.25rem; color: #6c757d; }
.hub-tools-group small { display: block; color: #6c757d; margin-left: 1.25rem; }

/* Access page */
.hub-access th, .hub-access td { font-size: .82rem; vertical-align: middle; }
.hub-access .hub-yes { background: #e6f4ea; text-align: center; color: #1e7e34; font-weight: 600; }
.hub-access .hub-no { color: #ccc; text-align: center; }
.hub-access .hub-sec td { background: #f4f6f9; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.hub-access-wrap { overflow-x: auto; }

@media (max-width: 575px) {
  .hub-hero h1 { font-size: 1.3rem; }
  .hub-viewas { width: 100%; }
}

.dark-mode .hub-tools-group { background: #343a40; }
.dark-mode .hub-tools-group li { border-color: #454d55; }
.dark-mode .hub-chip { background: #1f3b57; color: #cfe3f7; }
.hub-names { margin: .75rem 0 0; font-size: .85rem; color: #495057; line-height: 1.6; }

/* ---------- Hub template (Bootstrap 5): top bar, sidebar, page ---------- */
.hub-body { background: var(--bs-tertiary-bg, #f4f6f9); }
.hub-topbar { min-height: 56px; z-index: 1030; }
.hub-topbar .navbar-brand span { font-weight: 600; }
.hub-shell { display: flex; flex: 1 0 auto; align-items: stretch; min-width: 0; }
.hub-main { flex: 1 1 auto; min-width: 0; }
.hub-pagehead h1 { font-weight: 600; }
.hub-footer { background: var(--bs-body-bg, #fff); }
.hub-sidebar { background: #212529; color: #cfd4da; }
.hub-sidebar .offcanvas-header { background: #212529; color: #fff; border-color: #343a40 !important; }
.hub-sidebar .offcanvas-header .btn-close { filter: invert(1); }
.hub-sidebar .form-control { background: #2b3035; border-color: #3d444b; color: #fff; }
.hub-sidebar .form-control::placeholder { color: #8a939c; }
@media (min-width: 992px) {
  .hub-sidebar { width: 250px; flex: 0 0 250px; position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; }
}
.hub-nav { padding: 0 .5rem 1rem; }
.hub-nav-title { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #8a939c; padding: .9rem .6rem .3rem; }
.hub-nav-link { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: .375rem; color: #cfd4da; text-decoration: none; font-size: .92rem; }
.hub-nav-link i { width: 1.1rem; text-align: center; color: #8a939c; }
.hub-nav-link:hover, .hub-nav-link:focus { background: #2b3035; color: #fff; }
.hub-nav-link:hover i { color: #fff; }
.hub-nav-link.active { background: var(--bs-primary, #0d6efd); color: #fff; }
.hub-nav-link.active i { color: #fff; }
.hub-nav-link .badge { margin-left: auto; }

/* ---------- Access manager grid ---------- */
.hub-mx-wrap { overflow: auto; max-height: 75vh; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: .375rem; background: var(--bs-body-bg, #fff); }
.hub-mx { margin: 0; font-size: .82rem; }
.hub-mx thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg, #fff); vertical-align: bottom; }
.hub-mx .hub-mx-first { position: sticky; left: 0; z-index: 1; background: var(--bs-body-bg, #fff); min-width: 220px; font-weight: 500; }
.hub-mx thead .hub-mx-first { z-index: 3; }
.hub-mx-col { text-align: center; min-width: 74px; }
.hub-mx-col span { display: block; font-weight: 600; }
.hub-mx-col small { display: block; font-weight: 400; color: #6c757d; font-size: .7rem; }
.hub-mx-col.hub-kind-full { background: #fff4e5 !important; }
.hub-mx-col.hub-kind-person { background: #fdecea !important; }
.hub-mx-cell { text-align: center; }
.hub-mx-na { background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,.03) 4px, rgba(0,0,0,.03) 8px); }
.hub-mx .hub-sec th { background: #f1f3f5; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; position: sticky; left: 0; }
.hub-mx-collapsed .hub-mx-row { display: none; }
.hub-mx code { font-size: .72rem; }

/* ---------- Integrations ---------- */
.hub-int-pill { min-width: 88px; }
.hub-int-cmd { display: block; white-space: pre-wrap; word-break: break-all; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: .25rem; padding: .25rem .5rem; margin-top: .25rem; font-size: .78rem; color: #333; }

/* ---------- Reviews ---------- */
.hub-rv-big { font-size: 1.8rem; font-weight: 700; line-height: 1.1; }
.hub-rv-stars { color: #f5a623; letter-spacing: .05em; white-space: nowrap; }
.hub-rv-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.hub-rv-body { white-space: normal; }
.hub-ann { border-left: 4px solid var(--bs-primary, #0d6efd); }

/* Wide tables scroll inside the page instead of spilling past it */
.hub-main .dataTables_wrapper [class*="col-"]:has(> table) { overflow-x: auto; }
.hub-main .pn-table-wrap { overflow-x: auto; }

/* IT Help */
.hub-ih-text { white-space: normal; overflow-wrap: anywhere; }
.hub-ih-meta dd { margin-bottom: .25rem; }
.hub-ih-internal { background: var(--bs-warning-bg-subtle, #fff3cd); }

/* Cancellation tracker */
.hub-ct-bars { display: grid; gap: .35rem; }
.hub-ct-bar { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr 2.5rem; gap: .5rem; align-items: center; font-size: .875rem; }
.hub-ct-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-ct-bar-track { background: var(--bs-secondary-bg, #e9ecef); border-radius: .25rem; height: .75rem; overflow: hidden; }
.hub-ct-bar-fill { display: block; height: 100%; background: var(--bs-primary, #0d6efd); border-radius: .25rem; }
.hub-ct-bar-n { text-align: right; font-variant-numeric: tabular-nums; }
.hub-ct-months { display: flex; align-items: flex-end; gap: .4rem; height: 11rem; }
.hub-ct-month { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; text-align: center; }
.hub-ct-month-stack { display: flex; flex-direction: column-reverse; min-height: 2px; border-radius: .25rem .25rem 0 0; overflow: hidden; background: var(--bs-secondary-bg, #e9ecef); }
.hub-ct-month-stack span { display: block; min-height: 0; }
.hub-ct-month-n { font-size: .8rem; font-weight: 600; }
.hub-ct-month-l { font-size: .75rem; color: var(--bs-secondary-color, #6c757d); }

/* "What is this?" help panel */
.hub-help { border-left: 4px solid var(--bs-info, #0dcaf0); background: var(--bs-body-bg, #fff); }
.hub-help h2 { font-size: .9rem; }
.hub-help-btn { white-space: nowrap; }

/* Learning */
.hub-ln-card:hover { border-color: var(--bs-primary, #0d6efd); }

/* Visitors kiosk */
.hub-vs-kiosk { max-width: 1200px; margin: 0 auto; }

/* Printing: no menus, and the fire list prints only who is on site */
@media print {
  .hub-topbar, #hubSidebar, .hub-sidebar, .hub-help-btn, #hubHelp, .hub-no-print, .dt-buttons, .dataTables_filter, .dataTables_paginate { display: none !important; }
  .hub-main { margin: 0 !important; padding: 0 !important; }
  body.hub-print-fire .hub-vs form, body.hub-print-fire .hub-vs .btn { display: none !important; }
}

/* Phones and small tablets */
@media (max-width: 575.98px) {
  .hub-main > .container-fluid { padding-left: .75rem; padding-right: .75rem; }
  .hub-pagehead h1 { font-size: 1.15rem; }
  .hub-pagehead .breadcrumb { display: none; }
  .card-header { flex-wrap: wrap; }
  .dataTables_wrapper .dt-buttons { margin-bottom: .5rem; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  .nav-tabs .nav-link { white-space: nowrap; }
  .hub-hero { flex-direction: column; align-items: stretch; }
}
@media (max-width: 991.98px) {
  .hub-main .table-responsive, .hub-main .card-body > .table { display: block; overflow-x: auto; }
}

/* Tabs scroll sideways on phones instead of being cut off (26 Sept 2026) */
@media (max-width: 575.98px) {
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
  .nav-tabs .nav-link { white-space: nowrap; }
}
input.text-uppercase::placeholder { text-transform: none; }

/* Linked tools, Digital Team Wallboard (26 Sept 2026) */
.hub-link-icon { width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center;
  background: var(--bs-primary-bg-subtle, #e7f1ff); color: var(--bs-primary, #0d6efd); font-size: 1.2rem; }
.hub-link-frame { --bs-aspect-ratio: 62%; min-height: 28rem; }
.hub-link-frame iframe { border: 0; background: #fff; }
.hub-dw-num { font-size: 2.5rem; line-height: 1.1; }
@media (max-width: 575.98px) { .hub-dw-num { font-size: 2rem; } .hub-link-frame { --bs-aspect-ratio: 140%; } }

/* Copywriting (27 Sept 2026) */
/* Copywriting – uses projectnotes/assets/project-notes.css (.pn-*) plus these */
.pn-app.hub-cw-wide { max-width: 1200px; }
.hub-cw .pn-top { margin-top: 4px; }
.hub-cw .pn-top a:not(.pn-btn) { color: #fff; text-decoration: underline; }
.hub-cw-search { display: flex; gap: 8px; }
.hub-cw-search .form-control { max-width: 32rem; }
.hub-cw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.hub-cw-tile { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--pn-border); border-left: 4px solid var(--pn-navy); border-radius: var(--pn-radius); padding: 10px 12px; color: var(--pn-text); text-decoration: none; }
a.hub-cw-tile:hover { background: #f8fafd; color: var(--pn-text); text-decoration: none; }
.hub-cw-tile-n { font-size: 1.5rem; font-weight: 700; color: var(--pn-navy); line-height: 1.1; }
.hub-cw-tile-l { font-size: .8rem; color: var(--pn-muted); font-weight: 600; }
.hub-cw-tile.is-week { border-left-color: #e0a800; }
.hub-cw-tile.is-month { border-left-color: var(--pn-red); }
.hub-cw-tile.is-quarter { border-left-color: #212529; }
.hub-cw-tile.is-pending { border-left-color: #e0a800; background: #fff8e6; }
.hub-cw-tile.is-done { border-left-color: var(--pn-green); }
.hub-cw-filters .pn-label { font-size: .8rem; }
.hub-cw-table tr.hub-cw-old > td:first-child { box-shadow: inset 3px 0 0 var(--pn-red, #b3261e); }
.hub-cw .pn-table td { vertical-align: top; }
.hub-cw .pn-table td .badge { font-weight: 600; }
.hub-cw-type { background: #eef2f7; color: #0f2540; border: 1px solid #d8dee6; }
.hub-cw-type-seo { background: #e8f1fd; border-color: #c8dcf5; }
.hub-cw-type-dev { background: #efe9fb; border-color: #d9ccf3; }
.hub-cw-type-product { background: #e6f4ea; border-color: #b7dfc3; }
.hub-cw-type-blog { background: #fff6e0; border-color: #f0d9a1; }
.hub-cw-type-brochure, .hub-cw-type-social { background: #fbeceb; border-color: #efc5c1; }
.hub-cw-done { color: var(--pn-muted); text-decoration: line-through; }
.hub-cw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 14px; margin-top: 8px; }
.hub-cw-cards .pn-section-head h2 a { color: var(--pn-navy); }
.hub-cw-pieces { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
.hub-cw-pieces li { padding: 3px 0 3px 22px; position: relative; border-bottom: 1px solid var(--pn-line); }
.hub-cw-pieces li:last-child { border-bottom: 0; }
.hub-cw-pieces li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #a0abb8; }
.hub-cw-pieces li.is-done { color: var(--pn-muted); text-decoration: line-through; }
.hub-cw-pieces li.is-done::before { border-color: var(--pn-green); background: var(--pn-green); }
.hub-cw .collapse.pn-section { margin-top: 0; }

/* ---- shared page parts (28 Sept 2026): wide pages, bars, small grids ---- */
/* .pn-app.hub-wide { max-width: 1200px;  } */
.pn-app.hub-wide { max-width: unset;  }
.hub-wide .pn-top a:not(.pn-btn) { color: #fff; text-decoration: underline; }
.hub-bar { height: 10px; background: #eef2f7; border-radius: 6px; overflow: hidden; min-width: 60px; }
.hub-bar > span { display: block; height: 100%; background: var(--pn-navy); border-radius: 6px; }
.hub-bar.hub-bar-2 > span { background: #3d7fc4; }
.hub-bar.hub-bar-ok > span { background: var(--pn-green); }
.hub-kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.hub-kv dt { font-weight: 600; color: var(--pn-muted); font-size: .85rem; }
.hub-kv dd { margin: 0; word-break: break-word; }
.hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.hub-tabs a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--pn-border); background: #fff; color: var(--pn-text); text-decoration: none; font-weight: 600; font-size: .9rem; }
.hub-tabs a.is-active { background: var(--pn-navy); border-color: var(--pn-navy); color: #fff; }


/* ---- Legacy page skin (28 Sept 2026) ----------------------------------------------------------
   Older pages (AdminLTE / Bootstrap 3–4 markup: centred h1, breadcrumb menus, info-boxes, cards, DataTables)
   get the same look as the Project Notes-style pages without changing their code. New pages use .pn-app. */
:root { --hub-navy: #0f2540; --hub-border: #dde3ea; --hub-muted: #5f6b7a; --hub-soft: #f5f7fa; }
/* new-style pages have their own title banner, so hide the small template title above it */
.hub-main:has(.pn-app .pn-top) .hub-pagehead h1 { display: none; }
.hub-main:has(.pn-app .pn-top) .hub-pagehead { justify-content: flex-end !important; }
/* centred page title → banner */
.hub-main h1.h2.text-center { background: var(--hub-navy); color: #fff; text-align: left !important; font-size: 1.35rem; font-weight: 700;
  padding: 16px 20px; border-radius: 12px; margin: 0 0 14px !important; }
/* breadcrumb-style menus (people, months, sub-pages) → chips */
.hub-main ol.breadcrumb.mb-3 { background: transparent; padding: 0; gap: 6px; display: flex; flex-wrap: wrap; align-items: center; }
.hub-main ol.breadcrumb.mb-3 .breadcrumb-item + .breadcrumb-item::before { display: none; }
.hub-main ol.breadcrumb.mb-3 .breadcrumb-item { padding: 0; }
.hub-main ol.breadcrumb.mb-3 .breadcrumb-item > a { display: inline-block; padding: 5px 12px; border: 1px solid var(--hub-border); border-radius: 999px; background: #fff;
  color: #1f2d3d; text-decoration: none; font-weight: 600; font-size: .85rem; }
.hub-main ol.breadcrumb.mb-3 .breadcrumb-item > a:hover { background: var(--hub-soft); }
.hub-main ol.breadcrumb.mb-3 .breadcrumb-item.active > a:not([href]), .hub-main ol.breadcrumb.mb-3 .breadcrumb-item:first-child > a:not([href]) {
  border: 0; background: transparent; color: var(--hub-muted); padding-left: 0; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
.hub-main ol.breadcrumb.mb-3 .breadcrumb-item.active > a[href] { background: var(--hub-navy); border-color: var(--hub-navy); color: #fff; }
/* AdminLTE info-box / small-box → tiles */
.hub-main .info-box { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--hub-border); border-left: 4px solid var(--hub-navy);
  border-radius: 10px; box-shadow: none; padding: 10px 12px; min-height: 0; margin-bottom: 12px; }
.hub-main .info-box .info-box-icon { width: 42px; height: 42px; border-radius: 10px; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.hub-main .info-box .info-box-text { display: block; font-size: .78rem; font-weight: 600; color: var(--hub-muted); text-transform: none; white-space: normal; }
.hub-main .info-box .info-box-number { display: block; font-size: 1.35rem; font-weight: 700; color: var(--hub-navy); }
.hub-main .small-box { background: #fff !important; color: #1f2d3d !important; border: 1px solid var(--hub-border); border-left: 4px solid var(--hub-navy); border-radius: 10px; padding: 10px 12px; position: relative; }
.hub-main .small-box .inner h3 { font-size: 1.6rem; font-weight: 700; color: var(--hub-navy); margin: 0; }
.hub-main .small-box .inner p { margin: 0; color: var(--hub-muted); font-weight: 600; font-size: .85rem; }
.hub-main .small-box .icon { position: absolute; right: 12px; top: 10px; opacity: .15; font-size: 2rem; }
/* cards */
.hub-main .card { border: 1px solid var(--hub-border); border-radius: 12px; box-shadow: none; }
.hub-main .card > .card-header { background: var(--hub-soft); border-bottom: 1px solid var(--hub-border); font-weight: 700; color: var(--hub-navy); border-radius: 12px 12px 0 0; }
.hub-main .card.border-danger, .hub-main .card.border-indigo { border-color: var(--hub-border) !important; }
/* tables (incl. DataTables) */
.hub-main table.table { font-size: .9rem; background: #fff; }
.hub-main table.table > thead > tr > th { background: var(--hub-soft); color: var(--hub-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; border-bottom-width: 1px; white-space: nowrap; }
.hub-main table.table-bordered, .hub-main table.table-bordered td, .hub-main table.table-bordered th { border-color: var(--hub-border); }
.hub-main .dataTables_wrapper .dt-buttons .btn, .hub-main .dt-button { border-radius: 999px !important; padding: 4px 12px; font-size: .8rem; font-weight: 600; border: 1px solid var(--hub-border) !important; background: #fff !important; color: #1f2d3d !important; }
.hub-main .dataTables_wrapper .dataTables_filter input, .hub-main .dataTables_wrapper .dataTables_length select { border: 1px solid var(--hub-border); border-radius: 8px; padding: 4px 8px; }
.hub-main table.dataTable tfoot input { border: 1px solid var(--hub-border); border-radius: 6px; padding: 2px 6px; font-size: .8rem; }
@media (max-width: 767px) { .hub-main h1.h2.text-center { font-size: 1.1rem; padding: 12px 14px; } .hub-main table.table { font-size: .82rem; } }

/* Approvals waiting (hub/includes/hub_approvals.php) – 28 Sept 2026 */
.hub-appr { border: 1px solid #f0ad4e; border-left: 4px solid #f0ad4e; background: #fffaf0; border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; }
.hub-appr-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.hub-appr-head .fa-bell { color: #d9822b; }
.hub-appr-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 18px; }
.hub-appr-title { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.hub-appr-all { margin-left: auto; font-weight: 400; font-size: .82rem; white-space: nowrap; }
.hub-appr ul { list-style: none; margin: 4px 0 0; padding: 0; }
.hub-appr li { font-size: .85rem; padding: 3px 0; border-top: 1px dashed #f3d9a8; }
.hub-appr li:first-child { border-top: 0; }
.hub-appr-detail { color: #6c757d; }
.hub-appr-age { float: right; color: #a0522d; font-size: .78rem; margin-left: 8px; }
.hub-appr-panel { margin: 0 0 18px; }
.hub-appr-bell { position: relative; }
.hub-appr-bell .badge { position: absolute; top: 2px; right: -2px; font-size: .62rem; padding: 2px 5px; }
@media (max-width: 575px) { .hub-appr-age { float: none; } .hub-appr-groups { grid-template-columns: 1fr; } }

/* Collapsible menu sections and section tabs (hub/includes/hub_nav.php) – 28 Sept 2026 */
button.hub-nav-title { display: flex; align-items: center; width: 100%; background: none; border: 0; text-align: left; cursor: pointer; border-radius: .375rem; }
button.hub-nav-title:hover, button.hub-nav-title:focus-visible { color: #fff; background: #2b3035; outline: none; }
.hub-nav-caret { margin-left: auto; font-size: .65rem; transition: transform .15s ease; }
.hub-nav-section.is-open .hub-nav-caret { transform: rotate(180deg); }
.hub-nav-items { display: none; }
.hub-nav-section.is-open .hub-nav-items, .hub-nav-section.is-filtering .hub-nav-items { display: block; }
.hub-nav-section.is-current > .hub-nav-title { color: #fff; }
.hub-section-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; padding: 6px; background: #fff; border: 1px solid var(--hub-border, #dde3ea); border-radius: 10px; }
.hub-section-tabs-title { font-weight: 700; color: var(--hub-navy, #0f2540); padding: 4px 8px; margin-right: 4px; }
.hub-section-tab { padding: 5px 12px; border-radius: 999px; color: var(--hub-navy, #0f2540); text-decoration: none; font-size: .9rem; border: 1px solid transparent; }
.hub-section-tab:hover { background: var(--hub-soft, #f5f7fa); border-color: var(--hub-border, #dde3ea); }
.hub-section-tab.active { background: var(--hub-navy, #0f2540); color: #fff; }
@media print { .hub-section-tabs { display: none !important; } }

/* Bootstrap's offcanvas-lg clears the background on large screens; keep the dark menu so the links stay readable. */
.hub-sidebar.offcanvas-lg, .hub-sidebar.offcanvas-lg .offcanvas-body { background-color: #212529 !important; }

/* Cancellations – every figure links to its cases */
.hub-ct-tile { color: inherit; text-decoration: none; transition: box-shadow .15s; }
.hub-ct-tile:hover, .hub-ct-tile:focus { box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd); color: inherit; }
a.hub-ct-bar { color: inherit; text-decoration: none; border-radius: .25rem; padding: .1rem .25rem; margin: 0 -.25rem; }
a.hub-ct-bar:hover, a.hub-ct-bar:focus { background: var(--bs-tertiary-bg, #f1f3f5); color: inherit; }
a.hub-ct-bar:hover .hub-ct-bar-label { text-decoration: underline; }
a.hub-ct-month { color: inherit; text-decoration: none; }
a.hub-ct-month:hover .hub-ct-month-stack, a.hub-ct-month:focus .hub-ct-month-stack { outline: 2px solid var(--bs-primary, #0d6efd); }
tr[data-href] { cursor: pointer; }

/* Master Report */
.hub-mr-card { color: inherit; text-decoration: none; }
.hub-mr-card:hover, .hub-mr-card:focus { box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd); color: inherit; }
.hub-mr-bar { position: sticky; top: 0; z-index: 5; background: var(--bs-body-bg, #fff); padding: .4rem 0; }
.hub-mr-sec summary { cursor: pointer; list-style: none; }
.hub-mr-sec summary::-webkit-details-marker { display: none; }
.hub-mr-sec summary::after { content: '\25BE'; margin-left: auto; color: var(--bs-secondary-color, #6c757d); }
.hub-mr-sec details:not([open]) summary::after { content: '\25B8'; }
.hub-mr-scroll { overflow-x: auto; }
.hub-mr-table { font-size: .85rem; font-variant-numeric: tabular-nums; }
.hub-mr-table th, .hub-mr-table td { white-space: nowrap; }
.hub-mr-table .hub-mr-name { position: sticky; left: 0; z-index: 1; background: var(--bs-body-bg, #fff); min-width: 15rem; max-width: 22rem; white-space: normal; font-weight: 500; }
.hub-mr-table thead th { background: var(--bs-tertiary-bg, #f8f9fa); }
.hub-mr-table thead .hub-mr-name { background: var(--bs-tertiary-bg, #f8f9fa); }
.hub-mr-table th a, .hub-mr-table td a { color: inherit; text-decoration: none; }
.hub-mr-table td a:hover, .hub-mr-table th a:hover { text-decoration: underline; }
.hub-mr-table .is-sel { background: rgba(13, 110, 253, .08); font-weight: 600; }
.hub-mr-table td.is-up { color: #198754; }
.hub-mr-table td.is-down { color: #dc3545; }
.hub-mr-table tr.is-flash > * { background: rgba(255, 193, 7, .25) !important; transition: background .6s; }
.hub-mr-src { display: inline-block; font-size: .68rem; font-weight: 500; line-height: 1.3; padding: 0 .35rem; border-radius: .6rem; margin-left: .25rem; vertical-align: middle;
  background: #e9ecef; color: #495057; white-space: nowrap; }
.hub-mr-src.is-kpi { background: #e7f1ff; color: #0a58ca; }
.hub-mr-src.is-billing { background: #e6f4ea; color: #146c43; }
.hub-mr-src.is-rules { background: #f3e8ff; color: #6f42c1; }
.hub-mr-src.is-signins, .hub-mr-src.is-staff { background: #e0f7fa; color: #087990; }
.hub-mr-src.is-manual { background: #fff3cd; color: #997404; }
.hub-mr-how { display: none; font-weight: 400; margin-top: .15rem; }
.hub-mr.show-how .hub-mr-how { display: block; }
.hub-mr-man { font-size: .6rem; color: #997404; }
.hub-mr-key { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: middle; }
.hub-mr-key.is-up { background: #198754; } .hub-mr-key.is-down { background: #dc3545; }

/* Training */
.hub-tn-matrix th { vertical-align: bottom; }
.hub-tn-matrix select.hub-tn-st { min-width: 8.5rem; font-size: .78rem; padding-top: .1rem; padding-bottom: .1rem; }
.hub-tn-st.is-booked { background-color: #e7f1ff; }
.hub-tn-st.is-done { background-color: #fff3cd; }
.hub-tn-st.is-signed { background-color: #e6f4ea; }

/* ---- One standard gap between page sections (29 Sept 2026) ----------------------------------
   Every block on a page (title banner, tabs, sections, cards) is followed by the same 1rem gap. */
:root { --hub-gap: 1rem; }
.hub-main .pn-top { margin-bottom: var(--hub-gap); }
.hub-main .pn-section { margin-bottom: var(--hub-gap); }
.hub-main .hub-tabs { margin-bottom: var(--hub-gap); }
.hub-main .hub-tabs + .pn-top, .hub-main .hub-tabs + header.pn-top { margin-top: 0; }
.hub-main .pn-app > .collapse.pn-section:not(.show) { margin-bottom: 0; }
.hub-main .hub-cw-tiles, .hub-main .hub-section-tabs, .hub-main .pn-app > .pn-alert, .hub-main .pn-app > .pn-nav, .hub-main .pn-app > .pn-help, .hub-main .pn-app > .pn-archive-tools { margin-bottom: var(--hub-gap); }
.hub-main .pn-app > .pn-section + .pn-help { margin-top: 0; }

/* ---- Rebuilt pages (29 Sept 2026): KPI Tracker, commission, Hosting Clients, letters ------------------------------ */
.hub-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.hub-filters .form-control, .hub-filters .form-select { width: auto; flex: 1 1 180px; max-width: 320px; }
.hub-filters .form-check { margin: 0 6px 0 0; }
th.hub-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.hub-sortable::after { content: " \2195"; opacity: .35; font-size: .8em; }
th.hub-sortable[aria-sort="ascending"]::after { content: " \2191"; opacity: .9; }
th.hub-sortable[aria-sort="descending"]::after { content: " \2193"; opacity: .9; }
.hub-sortlink { color: inherit; text-decoration: underline dotted; white-space: nowrap; }
.hub-kpi-period { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hub-kpi-period .form-select { width: auto; min-width: 200px; }
.hub-kpi-blind { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--pn-border, #d8dee6); border-radius: 8px; padding: 10px 14px; margin-bottom: var(--hub-gap, 1rem); font-size: .92rem; }
.hub-kpi-blind.is-on { background: #fff4e5; border-color: #f0c36d; }
.hub-kpi-blind .fas { margin-right: 6px; }
.hub-kpi-table td, .hub-kpi-table th { vertical-align: top; }
.hub-kpi-table tr.is-cancelled td { background: #fdecea; }
.hub-kpi-table tr.is-cancelled td:not(.hub-kpi-type) { color: #7a2a24; }
.hub-kpi-table tr.is-unlinked td { background: #fff8e1; }
.hub-kpi-notes { min-width: 180px; max-width: 320px; }
.hub-kpi-ok { color: #1a6b3c; font-weight: 600; }
.hub-kpi-wait { color: #5b6b7c; }
.hub-kpi-type { width: 18px; padding-right: 0 !important; }
.hub-kpi-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; border: 1px solid rgba(0,0,0,.15); }
.hub-kpi-swatch.is-unlinked { background: #fff8e1; }
.hub-kpi-swatch.is-cancelled { background: #fdecea; }
.hub-kpi-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .8rem; color: #5b6b7c; }
.hub-kpi-legend .hub-kpi-swatch { margin-right: 5px; }
.hub-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; min-height: 4px; }
.hub-picker .hub-chip { display: inline-flex; align-items: center; gap: 4px; background: #eef2f7; border: 1px solid #d8dee6; border-radius: 999px; padding: 2px 4px 2px 10px; font-size: .88rem; }
.hub-picker .hub-chip button { border: 0; background: transparent; font-size: 1.1rem; line-height: 1; padding: 0 6px; color: #5b6b7c; border-radius: 999px; }
.hub-picker .hub-chip button:hover, .hub-picker .hub-chip button:focus { background: #d8dee6; color: #1c2733; }
.hub-cm-people { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-cm-people a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--pn-border, #d8dee6); background: #fff; color: var(--pn-text, #1c2733); text-decoration: none; font-size: .9rem; }
.hub-cm-people a.is-active { background: var(--pn-navy, #0f2540); border-color: var(--pn-navy, #0f2540); color: #fff; }
.hub-cm-brackets td.is-reached { background: #e8f5ee; font-weight: 600; }
tr.hub-cm-cancelled td { background: #fdecea; color: #7a2a24; }
.hub-ht-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: 0; margin-right: 5px; border: 1px solid rgba(0,0,0,.2); }
.pn-app .pn-table.hub-ht-table td, .pn-app .pn-table.hub-kpi-table td { vertical-align: top; }
.hub-ht-table tr.hub-ht-suspended td { background: #fdf3f2; }
.hub-ht-table img.hub-ht-fav { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.hub-ht-more summary { cursor: pointer; color: var(--pn-blue, #1f6feb); font-size: .82rem; }
.hub-ht-table td:first-child { min-width: 260px; max-width: 360px; }
.hub-ht-more dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 6px 0 0; font-size: .82rem; }
.hub-ht-more dd { margin: 0 0 4px; }
.hub-ht-more dt { font-weight: 600; color: #5b6b7c; }
.hub-ht-more dd { margin: 0; word-break: break-word; }
.pn-table-wrap { position: relative; } /* keeps screen-reader-only labels inside the scrolling table (no sideways page scroll on phones) */
.hub-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: .9rem; }
@media (max-width: 575.98px) {
  .hub-filters .form-control, .hub-filters .form-select { max-width: none; flex-basis: 100%; }
  .hub-kpi-period .form-select { min-width: 0; flex: 1 1 140px; }
}

/* ---- Websites (30 Sept 2026): cards with a preview ------------------------------------------------------------- */
.hub-ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--hub-gap, 1rem); margin-bottom: var(--hub-gap, 1rem); }
.hub-ws-card { background: #fff; border: 1px solid var(--pn-border, #d8dee6); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.hub-ws-shot { position: relative; display: block; aspect-ratio: 16 / 10; background: #eef2f7; overflow: hidden; border-bottom: 1px solid var(--pn-border, #d8dee6); }
.hub-ws-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .25s ease; }
.hub-ws-shot:hover img, .hub-ws-shot:focus img { transform: scale(1.03); }
.hub-ws-noshot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #5b6b7c; font-size: .85rem; }
.hub-ws-flag { position: absolute; top: 8px; left: 8px; background: #1a8f4c; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.hub-ws-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.hub-ws-name { font-size: 1rem; font-weight: 700; margin: 0; color: var(--pn-navy, #0f2540); line-height: 1.3; }
.hub-ws-url { margin: 0; font-size: .88rem; display: flex; align-items: center; gap: 6px; word-break: break-all; }
.hub-ws-url img { flex: none; }
.hub-ws-title { margin: 0; font-size: .82rem; color: #5b6b7c; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-ws-facts { margin: 6px 0 0; font-size: .8rem; display: grid; gap: 2px; }
.hub-ws-facts div { display: flex; gap: 6px; }
.hub-ws-facts dt { font-weight: 600; color: #5b6b7c; min-width: 72px; }
.hub-ws-facts dd { margin: 0; }
.hub-ws-share { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hub-ws-share form { display: inline-flex; gap: 6px; flex-wrap: wrap; }