/* ==========================================================================
   Hub theme for the admin portal
   --------------------------------------------------------------------------
   Makes the AdminLTE 3 / Bootstrap 4 portal look like hub.compira.com
   (HUB/webapp: Tailwind v4 + shadcn/ui "new-york", neutral base, purple
   primary). Loaded LAST in _Layout_backend.cshtml and _LoginLayout.cshtml, so
   it only overrides; the views' markup and JS are unchanged.

   Token values are the hub's own (HUB/webapp/src/app/globals.css), converted
   from oklch to hex.
   ========================================================================== */

:root {
    --hub-bg: #ffffff;
    --hub-page: #fbfbfb;            /* hub <main>: muted at 40% on white */
    --hub-fg: #0a0a0a;
    --hub-muted: #f5f5f5;
    --hub-muted-fg: #737373;
    --hub-border: #e5e5e5;
    --hub-ring: #a1a1a1;
    --hub-primary: #360062;
    --hub-primary-hover: #4a1a73;   /* primary at 90% on white */
    --hub-primary-tint: rgba(54, 0, 98, .10);
    --hub-primary-fg: #fafafa;
    --hub-destructive: #e7000b;
    --hub-success: #16a34a;
    --hub-radius-sm: 6px;
    --hub-radius-md: 8px;
    --hub-radius-lg: 10px;
    --hub-radius-xl: 14px;
    --hub-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05);
    --hub-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --hub-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --hub-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --hub-focus: 0 0 0 3px rgba(161, 161, 161, .5);
    --hub-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body,
.tooltip, .popover, .swal2-popup, #toast-container > div {
    font-family: var(--hub-font);
}
body {
    font-size: 14px;
    color: var(--hub-fg);
    background: var(--hub-page);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--hub-primary); }
a:hover { color: var(--hub-primary-hover); }
.text-primary { color: var(--hub-primary) !important; }
.text-muted, .adm-page-hint { color: var(--hub-muted-fg) !important; }
.text-dark { color: var(--hub-fg) !important; }
hr { border-top-color: var(--hub-border); }
code { color: #9d174d; }

/* One text size in the content area (replaces admin-redesign's 14.5px). */
.content-wrapper,
.content-wrapper .table,
.content-wrapper .tree,
.content-wrapper .form-control { font-size: 14px; }

/* ── Shell: content area, header, footer ─────────────────────────────── */
.content-wrapper { background: var(--hub-page); }
.content-wrapper > .content { padding: 0 24px 24px; }
.content-header { padding: 24px 24px 20px; }
.content-header .container-fluid,
.content-wrapper > .content > .container-fluid { padding-left: 0; padding-right: 0; }
.content-header h1,
.content-wrapper h1.m-0 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--hub-fg);
}
.breadcrumb { background: transparent; font-size: 13px; }
.breadcrumb-item.active { color: var(--hub-muted-fg); }

.main-header {
    height: 64px;
    border-bottom: 1px solid var(--hub-border) !important;
    background: var(--hub-bg);
    padding: 0 16px;
    align-items: center;
}
.main-header .nav-link { color: var(--hub-muted-fg); height: auto; }
.main-header .nav-link:hover { color: var(--hub-fg); }
/* Mobile/tablet: the logo centred in the header (the sidebar is hidden). */
.hub-header-logo {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center;
}
.hub-header-logo img { width: 120px; height: 25px; display: block; }

.hub-avatar {
    width: 36px; height: 36px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hub-primary-tint); color: var(--hub-primary);
    font-size: 14px; font-weight: 500; letter-spacing: 0;
}
.hub-user-toggle { display: flex; align-items: center; gap: 10px; padding: 0 !important; }
.hub-user-toggle::after { display: none; }
.hub-user-name { color: var(--hub-fg); font-weight: 500; }
.main-header .dropdown-menu { min-width: 220px; }
.hub-user-head { padding: 8px 12px 10px; border-bottom: 1px solid var(--hub-border); margin-bottom: 4px; }
.hub-user-head .hub-user-name { display: block; }
.hub-user-head small { color: var(--hub-muted-fg); }

.main-footer {
    background: var(--hub-page);
    border-top: 1px solid var(--hub-border);
    color: var(--hub-muted-fg);
    font-size: 13px;
    padding: 14px 24px;
}
.main-footer a { color: var(--hub-muted-fg); }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.main-sidebar,
.main-sidebar::before {
    background: var(--hub-bg);
    box-shadow: none !important;
    border-right: 1px solid var(--hub-border);
}
@media (min-width: 992px) {
    .main-sidebar, .main-sidebar::before { width: 256px; }
    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .main-header,
    body:not(.sidebar-collapse) .main-footer { margin-left: 256px; }
    .sidebar-mini.sidebar-collapse .main-sidebar:hover,
    .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused { width: 256px; }
}
.hub-brand {
    display: flex; align-items: center;
    height: 64px; padding: 0 24px;
    border-bottom: 1px solid var(--hub-border);
}
.hub-brand img { width: 120px; height: 25px; display: block; }
.hub-brand .hub-brand-mark { display: none; width: 25px; height: 25px; object-fit: cover; object-position: left; }
.sidebar { padding: 16px 12px; height: calc(100% - 64px); }
.sidebar nav.mt-2 { margin-top: 0 !important; }

.nav-sidebar .nav-item > .nav-link,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link {
    display: flex; align-items: center; gap: 12px;
    height: 36px; padding: 8px 12px; margin-bottom: 4px;
    border-radius: var(--hub-radius-md);
    color: var(--hub-muted-fg);
    font-size: 14px; font-weight: 400;
    white-space: nowrap;
}
.nav-sidebar .nav-link > .nav-icon {
    width: 16px !important; margin: 0 !important;
    font-size: 15px; text-align: center; flex-shrink: 0;
}
/* Lucide outline icons (data-lucide, drawn as <svg class="nav-icon …">).
   A 16px Lucide box draws a ~13px glyph (it has padding), about 80% of the
   old Font Awesome glyphs; the same size and 2px stroke as the hub. */
.nav-sidebar .nav-link > svg.nav-icon {
    width: 16px !important; height: 16px;
    stroke-width: 2;
}
.nav-sidebar .nav-link p { margin: 0; font-size: 14px; font-weight: inherit; }
.nav-sidebar .nav-item > .nav-link:hover {
    background: var(--hub-muted);
    color: var(--hub-fg);
}
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background: var(--hub-primary-tint) !important;
    color: var(--hub-primary) !important;
    box-shadow: none !important;
}
.nav-sidebar .nav-header,
.sidebar-light-primary .nav-header {
    padding: 16px 12px 6px !important;
    font-size: 12px !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none !important;
    color: var(--hub-muted-fg) !important;
    background: transparent;
}
/* Collapsed (icon-only) sidebar on tablets/when toggled: centre the icons. */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .hub-brand { padding: 0 19px; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .hub-brand img:not(.hub-brand-mark) { display: none; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .hub-brand .hub-brand-mark { display: block; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .sidebar { padding: 16px 8px; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link { justify-content: center; padding: 8px; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-header { display: none; }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card {
    background: var(--hub-bg);
    border: 1px solid var(--hub-border) !important;
    border-radius: var(--hub-radius-xl);
    box-shadow: none !important;
    margin-bottom: 24px;
}
.card.shadow-lg, .card.shadow, .card.shadow-sm, .card.elevation-1, .card.elevation-2 { box-shadow: none !important; }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--hub-border);
    padding: 16px 24px;
    border-top-left-radius: var(--hub-radius-xl) !important;
    border-top-right-radius: var(--hub-radius-xl) !important;
}
.card-title, .card-header h3, .card-header h4 {
    font-size: 16px; font-weight: 500; color: var(--hub-fg); line-height: 1.5;
}
.card-header > .card-title { margin: 0; }
.card-body { padding: 24px; }
.card-footer {
    background: transparent;
    border-top: 1px solid var(--hub-border);
    padding: 16px 24px;
    border-bottom-left-radius: var(--hub-radius-xl) !important;
    border-bottom-right-radius: var(--hub-radius-xl) !important;
}
/* AdminLTE colour cards (card-primary, card-outline …): neutral like the hub. */
.card[class*="card-outline"] { border-top: 1px solid var(--hub-border) !important; }
.card[class*="card-primary"]:not(.card-outline) > .card-header,
.card[class*="card-info"]:not(.card-outline) > .card-header,
.card[class*="card-success"]:not(.card-outline) > .card-header,
.card[class*="card-secondary"]:not(.card-outline) > .card-header {
    background: transparent; color: var(--hub-fg);
}
.md-sidebar, .md-main { border-color: var(--hub-border); border-radius: var(--hub-radius-xl); box-shadow: none; }

/* Dashboard stat boxes → hub stat cards (white, label + big number). */
.small-box {
    background: var(--hub-bg) !important;
    color: var(--hub-fg) !important;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius-xl);
    box-shadow: none;
    margin-bottom: 24px;
}
.small-box > .inner { padding: 20px 24px; }
.small-box h3 { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; color: var(--hub-fg); margin: 0 0 4px; }
.small-box h3 sup { font-size: 14px !important; font-weight: 500; color: var(--hub-muted-fg); top: -.9em; margin-left: 4px; }
.small-box p { color: var(--hub-muted-fg); font-size: 14px; font-weight: 500; margin: 0; }
/* Stat icons: small Lucide outline icon in the top-right corner, muted
   (replaces AdminLTE's big faded solid glyph). */
.small-box > .icon {
    position: absolute; top: 20px; right: 20px;
    width: 20px; height: 20px; line-height: 0;
    color: var(--hub-muted-fg);
}
.small-box > .icon > svg { width: 20px; height: 20px; stroke-width: 2; position: static; opacity: 1; }
.small-box > .icon > i { display: none; }  /* until Lucide has drawn the svg */
.small-box > .small-box-footer {
    background: transparent !important;
    color: var(--hub-muted-fg) !important;
    border-top: 1px solid var(--hub-border);
    border-bottom-left-radius: var(--hub-radius-xl);
    border-bottom-right-radius: var(--hub-radius-xl);
    padding: 8px 0;
}
/* The dashboard's footers are empty placeholders (<div>&nbsp;</div>); only
   real footer links are kept. */
.small-box > div.small-box-footer { display: none; }
.small-box > .small-box-footer:hover { color: var(--hub-fg) !important; background: var(--hub-muted) !important; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 36px; padding: 0 16px;
    border-radius: var(--hub-radius-md);
    font-size: 14px; font-weight: 500; line-height: 1;
    box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn.btn-block { display: flex; }
/* Bootstrap's display utilities (d-inline-block, d-sm-inline-block …) are
   !important and would undo the flex centring of icon + text. */
.btn.d-inline-block { display: inline-flex !important; }
@media (min-width: 576px) { .btn.d-sm-inline-block { display: inline-flex !important; } }
@media (min-width: 768px) { .btn.d-md-inline-block { display: inline-flex !important; } }
@media (min-width: 992px) { .btn.d-lg-inline-block { display: inline-flex !important; } }
.btn i, .btn .fa, .btn .fas, .btn .far { margin: 0 !important; }
.btn:focus, .btn.focus { box-shadow: var(--hub-focus) !important; }
.btn-sm, .btn-group-sm > .btn { height: 32px; padding: 0 12px; font-size: 14px; border-radius: var(--hub-radius-md); }
.btn-xs, .btn-group-xs > .btn { height: 28px; min-width: 28px; padding: 0 8px; font-size: 13px; border-radius: var(--hub-radius-sm); }
.btn-lg, .btn-group-lg > .btn { height: 40px; padding: 0 24px; font-size: 14px; }

.btn-primary, .btn-success, .btn-info {
    background: var(--hub-primary); border-color: var(--hub-primary); color: var(--hub-primary-fg);
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled):active {
    background: var(--hub-primary-hover); border-color: var(--hub-primary-hover); color: var(--hub-primary-fg);
}
/* Disabled buttons keep their own colour at 50% (Bootstrap swapped in its
   green/red/blue for :disabled). */
.btn-primary:disabled, .btn-primary.disabled,
.btn-success:disabled, .btn-success.disabled,
.btn-info:disabled, .btn-info.disabled { background: var(--hub-primary); border-color: var(--hub-primary); color: var(--hub-primary-fg); opacity: .5; }
.btn-danger:disabled, .btn-danger.disabled { background: var(--hub-destructive); border-color: var(--hub-destructive); color: #fff; opacity: .5; }
[class*="btn-outline-"]:disabled, [class*="btn-outline-"].disabled,
.btn-default:disabled, .btn-default.disabled {
    background: var(--hub-bg); border-color: var(--hub-border); color: var(--hub-fg); opacity: .5;
}
/* A label that wraps onto two lines gets room instead of 36px with line-height 1. */
.btn { white-space: normal; text-align: center; }
.btn-block { height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; line-height: 1.3; }
.btn-danger { background: var(--hub-destructive); border-color: var(--hub-destructive); color: #fff; }
.btn-danger:hover, .btn-danger:not(:disabled):not(.disabled):active { background: #c80009; border-color: #c80009; color: #fff; }
.btn-warning { background: #fef3c7; border-color: #fde68a; color: #7b3306; }
.btn-warning:hover { background: #fde68a; border-color: #fcd34d; color: #7b3306; }
.btn-secondary { background: var(--hub-muted); border-color: var(--hub-muted); color: #171717; }
.btn-secondary:hover, .btn-secondary:not(:disabled):not(.disabled):active { background: #ebebeb; border-color: #ebebeb; color: #171717; }

/* Outline / default → the hub's "outline" button. */
.btn-default, .btn-light,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-outline-dark {
    background: var(--hub-bg);
    border: 1px solid var(--hub-border);
    color: var(--hub-fg);
    box-shadow: var(--hub-shadow-xs);
}
.btn-default:hover, .btn-light:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-info:hover,
.btn-outline-success:hover, .btn-outline-dark:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled):active {
    background: var(--hub-muted);
    border-color: var(--hub-border);
    color: var(--hub-fg);
}
.btn-outline-danger { background: var(--hub-bg); border: 1px solid var(--hub-border); color: var(--hub-destructive); box-shadow: var(--hub-shadow-xs); }
.btn-outline-danger:hover { background: #fef2f2; border-color: #ffc9c9; color: var(--hub-destructive); }
.btn-link { color: var(--hub-primary); height: auto; padding: 0; }
.btn-link:hover { color: var(--hub-primary); text-decoration: underline; text-underline-offset: 4px; }

/* Bootstrap defines .d-none before .d-flex/.d-block, so an element with
   both (Pipeline's per-tab tools: "ml-auto d-flex … d-none") stayed visible.
   Hidden must win. */
.d-flex.d-none, .d-inline-flex.d-none, .d-block.d-none, .d-inline-block.d-none { display: none !important; }

/* Filter button groups in a card header (Pipeline: All / Active / Failed …)
   → the same segmented control as the toggles below. */
.card-header .btn-group:not(.btn-group-vertical) {
    background: var(--hub-muted); padding: 3px; border-radius: var(--hub-radius-lg); gap: 2px;
}
.card-header .btn-group:not(.btn-group-vertical) > .btn {
    height: 28px; padding: 0 10px; border: 0 !important; background: transparent !important;
    color: rgba(10, 10, 10, .6) !important; box-shadow: none !important;
    border-radius: var(--hub-radius-md) !important; font-size: 13px;
}
.card-header .btn-group:not(.btn-group-vertical) > .btn:hover { color: var(--hub-fg) !important; }
.card-header .btn-group:not(.btn-group-vertical) > .btn.active {
    background: var(--hub-bg) !important; color: var(--hub-fg) !important; box-shadow: var(--hub-shadow-sm) !important;
}
.btn .badge { font-size: 11px; padding: 1px 6px; margin-left: 2px; }
.badge-light { background: rgba(10, 10, 10, .06); color: var(--hub-fg); }
/* Pills used as tabs in a card header: the hub's tab look. */
.card-header .nav-pills .nav-link {
    height: 32px; display: inline-flex; align-items: center; gap: 6px;
    padding: 0 12px !important; border-radius: var(--hub-radius-md);
    color: var(--hub-muted-fg); font-weight: 500; font-size: 14px;
}
.card-header .nav-pills .nav-link:hover { color: var(--hub-fg); background: var(--hub-muted); }
.card-header .nav-pills .nav-link.active { background: var(--hub-primary-tint) !important; color: var(--hub-primary) !important; }
/* Bootstrap's grey thead-light → the hub's plain header row (white, so a
   sticky header still covers the rows under it). */
.table .thead-light th, .table thead.thead-light th { background: var(--hub-bg); color: var(--hub-fg); border-color: var(--hub-border); }

/* Segmented toggles (dashboard Monthly/Weekly/Daily) → the hub's tabs. */
.btn-group-toggle {
    background: var(--hub-muted); padding: 3px; border-radius: var(--hub-radius-lg);
}
.btn-group-toggle > .btn {
    height: 30px; padding: 0 10px; border: 0 !important; background: transparent !important;
    color: rgba(10, 10, 10, .6) !important; box-shadow: none !important;
    border-radius: var(--hub-radius-md) !important;
}
.btn-group-toggle > .btn:hover { color: var(--hub-fg) !important; }
.btn-group-toggle > .btn.active {
    background: var(--hub-bg) !important; color: var(--hub-fg) !important; box-shadow: var(--hub-shadow-sm) !important;
}

/* ── Form fields ──────────────────────────────────────────────────────── */
.form-control,
.custom-select,
.input-group-text {
    height: 36px;
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius-md);
    font-size: 14px;
    color: var(--hub-fg);
    box-shadow: var(--hub-shadow-xs);
}
.form-control { padding: 4px 12px; background-color: var(--hub-bg); }
textarea.form-control { height: auto; min-height: 64px; padding: 8px 12px; }
select.form-control[multiple], select.form-control[size] { height: auto; }
.form-control-sm, .custom-select-sm { height: 32px; font-size: 14px; }
.form-control::placeholder { color: var(--hub-muted-fg); }
.form-control:focus, .custom-select:focus {
    border-color: var(--hub-ring);
    box-shadow: var(--hub-focus);
    color: var(--hub-fg);
}
.form-control.is-invalid { border-color: var(--hub-destructive); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(231, 0, 11, .2); }
.form-control:disabled, .form-control[readonly] { background: var(--hub-muted); }
label, .col-form-label { font-size: 14px; font-weight: 500; color: var(--hub-fg); }
.form-group { margin-bottom: 16px; }
.form-text, small.form-text { color: var(--hub-muted-fg); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--hub-primary); border-color: var(--hub-primary); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--hub-primary); }

/* Input groups: a muted label cell attached to the field, like the hub's
   bordered inputs (keeps Bootstrap's joined corners). */
.input-group-text { background: var(--hub-muted); color: var(--hub-muted-fg); font-weight: 500; box-shadow: none; }
.input-group > .form-control, .input-group > .custom-select { box-shadow: none; }
.input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .input-group-prepend > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* Select2 (bootstrap4 theme and default) */
.select2-container--bootstrap4 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 36px;
    border: 1px solid var(--hub-border) !important;
    border-radius: var(--hub-radius-md) !important;
    box-shadow: var(--hub-shadow-xs);
    font-size: 14px;
}
.select2-selection { height: auto !important; min-height: 36px; }
.select2-container--bootstrap4 .select2-selection--single,
.select2-container--default .select2-selection--single { height: 36px !important; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    /* The bootstrap4 theme puts the arrow at top:50%, which with our 34px
       arrow box hangs below the 36px field. */
    top: 1px !important; height: 34px !important;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b { top: 50% !important; margin-top: -2px; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px; padding-left: 12px; color: var(--hub-fg);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; }
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--hub-ring) !important; box-shadow: var(--hub-focus);
}
.select2-dropdown {
    border: 1px solid var(--hub-border) !important;
    border-radius: var(--hub-radius-md) !important;
    box-shadow: var(--hub-shadow-md);
    overflow: hidden;
}
.select2-results__option { padding: 6px 8px; font-size: 14px; }
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--hub-muted) !important; color: var(--hub-fg) !important;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--hub-muted); border: 1px solid var(--hub-border); color: var(--hub-fg);
    border-radius: 9999px; font-size: 12px; font-weight: 500;
}
/* site.css forces every select2 to 350px; inside an input group the field
   should fill the remaining width like the inputs around it. */
.input-group > .select2-container { flex: 1 1 auto; width: auto !important; }
.input-group > .input-group-prepend + select + .select2-container .select2-selection {
    border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
}

/* ── Tables + DataTables ─────────────────────────────────────────────── */
.table { color: var(--hub-fg); font-size: 14px; margin-bottom: 0; }
.table thead th, .table th {
    height: 40px;
    padding: 0 8px;
    vertical-align: middle;
    font-weight: 500;
    color: var(--hub-fg);
    background: transparent;
    border-top: 0;
    border-bottom: 1px solid var(--hub-border) !important;
}
.table td { padding: 8px; vertical-align: middle; border-top: 1px solid var(--hub-border); }
.table thead + tbody tr:first-child td { border-top: 0; }
.table-sm td, .table-sm th { padding: 6px 8px; }
/* The hub's tables have row lines only, no grid. */
.table-bordered, .table-bordered td, .table-bordered th { border-left: 0 !important; border-right: 0 !important; }
.table-bordered { border-top: 0; border-bottom: 0; }
.table-bordered thead td, .table-bordered thead th { border-bottom-width: 1px; }
.table-hover tbody tr:hover, .table.table-hover tbody tr:hover { background: rgba(245, 245, 245, .5); color: var(--hub-fg); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(245, 245, 245, .5); }
tr.selected, .table tbody tr.selected { background: var(--hub-muted) !important; }
.table thead th .fa-sort, .table thead th .fas { color: var(--hub-muted-fg); }
/* Row actions (edit/delete) side by side, never stacked. */
.content-wrapper table td:last-child { white-space: nowrap; }
.content-wrapper table td:last-child .btn + .btn { margin-left: 4px; }

/* Page titles some views put inside the card header (Brands/Edit …). */
.card-header h1, .card-header .h1 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
.card-header h1.h3, .card-header .h3 { font-size: 20px; line-height: 28px; font-weight: 600; }

/* DataTables: no extra outer padding, quiet sort arrows, hub pager. */
table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Long URLs and e-mails may wrap, so a table fits next to the open sidebar
   instead of DataTables Responsive folding columns (and the row actions)
   away behind "+". */
table.dataTable td { overflow-wrap: break-word; }
/* Columns that can hold very long values (tracking links, e-mails): one
   line, cut with an ellipsis, full text on hover (title). Keeps the other
   columns from being squeezed into mid-word breaks. */
table.dataTable td.dt-truncate {
    max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Per-column search fields in table headers/footers (Manual Products …). */
table.dataTable thead input, table.dataTable tfoot input,
table.dataTable thead select, table.dataTable tfoot select,
table.dataTable tbody tr td > input[type="text"]:only-child {
    width: 100%; height: 32px; padding: 4px 8px;
    border: 1px solid var(--hub-border); border-radius: var(--hub-radius-md);
    font-size: 13px; font-weight: 400; color: var(--hub-fg); background: var(--hub-bg);
    box-shadow: var(--hub-shadow-xs);
}
table.dataTable thead input:focus, table.dataTable tfoot input:focus,
table.dataTable tbody tr td > input[type="text"]:only-child:focus { outline: 0; border-color: var(--hub-ring); box-shadow: var(--hub-focus); }
/* DataTables Responsive's expand control: neutral instead of Bootstrap blue. */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before {
    background-color: var(--hub-bg) !important;
    color: var(--hub-fg) !important;
    border: 1px solid var(--hub-border) !important;
    box-shadow: none !important;
}
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after {
    bottom: .7em; opacity: .25;
}
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_desc::after { opacity: .7; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info { color: var(--hub-muted-fg); font-size: 14px; }
.dataTables_wrapper .dataTables_info { padding-top: 16px !important; }
.dataTables_wrapper .dataTables_length select { width: auto; display: inline-block; margin: 0 6px; }
/* The table's own search box: label + field on one flex row; the field
   shrinks with the card (side-by-side cards on Manual Products were pushing
   it outside) and never grows past 240px. */
.dataTables_wrapper .dataTables_filter label {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    width: 100%; margin: 0; font-weight: 500;
}
.dataTables_wrapper .dataTables_filter input {
    margin-left: 0 !important; flex: 1 1 auto; min-width: 0; max-width: 240px; width: auto !important;
}
.dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.dataTables_wrapper .dataTables_length select { margin: 0 !important; }
.dataTables_wrapper > .row:first-child { margin-bottom: 12px; }
.dataTables_wrapper > .row:last-child { margin-top: 4px; }

.pagination { gap: 4px; margin: 0; }
.page-item .page-link {
    min-width: 32px; height: 32px; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--hub-border) !important;
    border-radius: var(--hub-radius-md) !important;
    color: var(--hub-fg); background: var(--hub-bg);
    font-size: 14px; font-weight: 500;
    box-shadow: var(--hub-shadow-xs);
    margin: 0 !important;
}
.page-item .page-link:hover { background: var(--hub-muted); color: var(--hub-fg); }
.page-item.active .page-link { background: var(--hub-primary); border-color: var(--hub-primary) !important; color: var(--hub-primary-fg); }
.page-item.disabled .page-link { color: var(--hub-muted-fg); opacity: .5; box-shadow: none; }
.page-link:focus { box-shadow: var(--hub-focus); }

/* ── Badges, alerts ──────────────────────────────────────────────────── */
.badge {
    border-radius: 9999px; padding: 3px 8px;
    font-size: 12px; font-weight: 500; line-height: 1.3;
    border: 1px solid transparent;
}
.badge-primary, .badge-info { background: var(--hub-primary); color: var(--hub-primary-fg); }
.badge-secondary, .badge-light { background: var(--hub-muted); color: #171717; }
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #7b3306; }
.badge-danger { background: #fee2e2; color: #82181a; }
.badge-dark { background: #171717; color: #fafafa; }

.alert {
    border-radius: var(--hub-radius-md);
    font-size: 14px;
    padding: 12px 16px;
    border: 1px solid;
}
.alert-danger { background: #fef2f2; border-color: #ffc9c9; color: #82181a; }
.alert-success { background: #f0fdf4; border-color: #b9f8cf; color: #14532d; }
.alert-warning { background: #fffbeb; border-color: #fee685; color: #7b3306; }
.alert-info, .alert-primary, .alert-secondary, .alert-light { background: var(--hub-muted); border-color: var(--hub-border); color: var(--hub-fg); }
.alert .close { color: inherit; opacity: .6; text-shadow: none; }
.alert a { color: inherit; text-decoration: underline; }
.callout { border-radius: var(--hub-radius-md); box-shadow: none; border: 1px solid var(--hub-border); border-left-width: 4px; }

/* ── Modals, dropdowns, toasts ───────────────────────────────────────── */
.modal-backdrop.show { opacity: .5; }
.modal-content {
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius-lg);
    box-shadow: var(--hub-shadow-lg);
}
.modal-header { border-bottom: 0; padding: 24px 24px 8px; }
.modal-title { font-size: 18px; font-weight: 600; line-height: 1.3; }
.modal-body { padding: 8px 24px 16px; }
.modal-footer { border-top: 0; padding: 8px 24px 24px; gap: 8px; }
.modal-header .close { opacity: .7; text-shadow: none; font-weight: 400; }

.dropdown-menu {
    border: 1px solid var(--hub-border);
    border-radius: var(--hub-radius-md);
    box-shadow: var(--hub-shadow-md);
    padding: 4px;
    font-size: 14px;
}
.dropdown-item { border-radius: var(--hub-radius-sm); padding: 6px 8px; color: var(--hub-fg); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--hub-muted); color: var(--hub-fg); }
.dropdown-item.active, .dropdown-item:active { background: var(--hub-primary-tint); color: var(--hub-primary); }
.dropdown-divider { border-top-color: var(--hub-border); margin: 4px 0; }

.swal2-popup { border-radius: var(--hub-radius-lg) !important; box-shadow: var(--hub-shadow-lg) !important; }
.swal2-popup.swal2-toast { border: 1px solid var(--hub-border); }
.swal2-styled.swal2-confirm { background: var(--hub-primary) !important; border-radius: var(--hub-radius-md) !important; }
#toast-container > div {
    border-radius: var(--hub-radius-lg); box-shadow: var(--hub-shadow-lg); opacity: 1;
}
.tooltip-inner { background: var(--hub-fg); border-radius: var(--hub-radius-sm); font-size: 12px; padding: 4px 8px; }

/* Nav tabs used inside cards → the hub's "line" tabs. */
.nav-tabs { border-bottom: 1px solid var(--hub-border); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--hub-muted-fg); font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--hub-fg); border-bottom-color: var(--hub-border); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--hub-fg); background: transparent; border-bottom-color: var(--hub-fg);
}

/* Quill editor (Brands): same border and radius as the other fields. */
.ql-toolbar.ql-snow { border-color: var(--hub-border) !important; border-radius: var(--hub-radius-md) var(--hub-radius-md) 0 0; font-family: var(--hub-font); }
.ql-container.ql-snow { border-color: var(--hub-border) !important; border-radius: 0 0 var(--hub-radius-md) var(--hub-radius-md); font-family: var(--hub-font); font-size: 14px; }

/* site.css's file input ("Upload", hard-coded #007bff) → hub outline button. */
/* A .card-body used without a .card around it (App Settings) has no frame,
   so its padding only indented the cards inside it: line them up with the
   other cards on the page instead. */
/* Only when it wraps cards of its own - a bare .card-body with plain
   content (Pipeline's Maintenance tab) keeps its padding. */
.content-wrapper :not(.card) > .card-body:has(> .row > [class*="col"] > .card) { padding-left: 0; padding-right: 0; }

/* Tables placed straight in a card (not inside .card-body, e.g. Pipeline's
   Jobs/Stores tabs): first and last column line up with the card header's
   24px instead of starting 8px from the edge. */
.card > :not(.card-body):not(.card-header):not(.card-footer) .table th:first-child,
.card > :not(.card-body):not(.card-header):not(.card-footer) .table td:first-child,
.card > .table th:first-child, .card > .table td:first-child { padding-left: 24px; }
.card > :not(.card-body):not(.card-header):not(.card-footer) .table th:last-child,
.card > :not(.card-body):not(.card-header):not(.card-footer) .table td:last-child,
.card > .table th:last-child, .card > .table td:last-child { padding-right: 24px; }
@media (max-width: 991.98px) {
    .card > :not(.card-body):not(.card-header):not(.card-footer) .table th:first-child,
    .card > :not(.card-body):not(.card-header):not(.card-footer) .table td:first-child { padding-left: 16px; }
    .card > :not(.card-body):not(.card-header):not(.card-footer) .table th:last-child,
    .card > :not(.card-body):not(.card-header):not(.card-footer) .table td:last-child { padding-right: 16px; }
}
/* Full-width segmented toggles share the width instead of overflowing. */
.btn-group-toggle.w-100 { display: flex; }
.btn-group-toggle.w-100 > .btn { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.custom-input-file { height: auto; min-height: 36px; padding: 0; border: 0; overflow: visible; display: block; }
.custom-input-file::before {
    display: block !important;
    box-sizing: border-box;
    height: 36px;
    line-height: 20px;
    background: var(--hub-bg) !important;
    color: var(--hub-fg) !important;
    border: 1px solid var(--hub-border) !important;
    border-radius: var(--hub-radius-md) !important;
    box-shadow: var(--hub-shadow-xs);
    text-shadow: none !important;
    font-family: var(--hub-font);
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
}
.custom-input-file:hover::before { background: var(--hub-muted) !important; border-color: var(--hub-border) !important; }

/* ── Login page ──────────────────────────────────────────────────────── */
body.hub-login {
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--hub-page);
    padding: 16px;
}
.hub-login-box { width: 100%; max-width: 448px; }
.hub-login-logo { display: flex; justify-content: center; margin-bottom: 24px; }
.hub-login-logo img { width: 144px; height: 30px; }
.hub-login .card { margin: 0; }
.hub-login .card-body { padding: 24px; }
.hub-login h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
.hub-login .hub-login-sub { color: var(--hub-muted-fg); margin-bottom: 24px; }
.hub-login .form-group { margin-bottom: 16px; }
.hub-login label { display: block; margin-bottom: 8px; line-height: 1; }
.hub-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hub-label-row label { margin: 0; }
.hub-label-row a { font-size: 14px; color: var(--hub-muted-fg); }
.hub-label-row a:hover { color: var(--hub-fg); text-decoration: underline; text-underline-offset: 4px; }
.hub-login .hub-login-error { color: var(--hub-destructive); font-size: 14px; margin: 8px 0 0; }
.hub-login .hub-login-foot { text-align: center; margin-top: 16px; font-size: 14px; color: var(--hub-muted-fg); }
.hub-login .hub-login-foot a { color: var(--hub-muted-fg); text-decoration: underline; text-underline-offset: 4px; }

/* ── Small screens ───────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .main-header { padding: 0 12px; }
    .content-header { padding: 16px 16px 12px; }
    .content-wrapper > .content { padding: 0 16px 16px; }
    .card-body { padding: 16px; }
    .card-header, .card-footer { padding: 12px 16px; }
    .sidebar-open .main-sidebar { box-shadow: var(--hub-shadow-lg) !important; }
    /* Wide tables scroll inside their card instead of widening the page. */
    .card-body .table:not(.dataTable) { display: block; overflow-x: auto; }
    .dataTables_wrapper { overflow-x: auto; }
    /* Toolbars (filters, segmented buttons, search) wrap onto more lines
       instead of pushing the page sideways. */
    .content-wrapper .card-header .d-flex,
    .content-wrapper .ml-auto.d-flex { flex-wrap: wrap; gap: 8px; }
    .content-wrapper .btn-group { flex-wrap: wrap; }
    .content-wrapper .card-header .form-control { min-width: 0; max-width: 100%; }
    .content-wrapper canvas { max-width: 100% !important; height: auto !important; }
}

/* Phones: forms use the full card width. The views nest grid columns
   (row > col-10 > row > col-md-4 > form-group row > col-sm-12) and every
   level adds its own gutter, so fields ended up ~60% of the screen. Inside
   forms and tab panes every column becomes full width and the nested
   gutters go; the card's own padding is the only side spacing. */
@media (max-width: 575.98px) {
    .content-wrapper form [class*="col-"]:not(.col-form-label),
    .content-wrapper .tab-content [class*="col-"]:not(.col-form-label) {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .content-wrapper form .row,
    .content-wrapper .tab-content .row { margin-left: 0; margin-right: 0; }
    .content-wrapper form .d-flex,
    .content-wrapper .tab-content .d-flex { flex-wrap: wrap; }
    .content-wrapper form .col-form-label,
    .content-wrapper .tab-content .col-form-label { padding-left: 0 !important; padding-right: 0; }
    .content-wrapper .tab-content > .tab-pane { padding-left: 0; padding-right: 0; }
    .content-wrapper .nav-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .content-wrapper .nav-tabs .nav-link { white-space: nowrap; }
    /* A card inside a card (App Settings, Brands …): no second frame or
       padding, so its fields line up with the outer card's. */
    .content-wrapper .card-body .card { border: 0 !important; border-radius: 0; margin-bottom: 16px; }
    .content-wrapper .card-body .card > .card-header,
    .content-wrapper .card-body .card > .card-body,
    .content-wrapper .card-body .card > .card-footer { padding-left: 0; padding-right: 0; }
    .content-wrapper .form-group.row { margin-left: 0; margin-right: 0; }
    /* App Settings nests a .form-group.row inside another: let it fill the row. */
    .content-wrapper .form-group.row > .form-group.row { flex: 1 1 100%; width: 100%; }
    /* Header actions and DataTables export buttons (Groups, Users …): when
       they wrap, keep 8px between rows and columns and line them up left
       instead of a ragged right edge. */
    .content-wrapper .card-tools,
    .content-wrapper .card-tools > form,
    .content-wrapper .dt-buttons {
        display: flex; flex-wrap: wrap; gap: 8px;
        justify-content: flex-start; text-align: left; float: none;
    }
    .content-wrapper .card-tools { margin: 8px 0 0; }
    .content-wrapper .card-tools .btn,
    .content-wrapper .dt-buttons .btn { margin: 0 !important; border-radius: var(--hub-radius-md) !important; }
    .content-wrapper .dt-buttons { margin-bottom: 12px; }
    .content-wrapper .dataTables_filter { text-align: left; }
    .content-wrapper .dataTables_filter label { justify-content: flex-start; }
    .content-wrapper .dataTables_filter input { max-width: none; }
    /* site.css fixes every select2 at 350px, wider than a phone's card:
       fill the width instead (native selects with w-auto too). */
    .content-wrapper .select2-container { width: 100% !important; max-width: 100%; }
    .content-wrapper select.form-control.w-auto { width: 100% !important; max-width: 100%; }
}

/* Phones and small tablets: the page title gets its own row, and the page's
   action buttons (Reload ML cache, New category …) go on the row below,
   left-aligned, instead of squeezing the title onto two lines. Covers both
   header patterns the views use: a flex container-fluid (title + toolbar)
   and row > col-sm-6 (title + breadcrumb/actions). */
@media (max-width: 767.98px) {
    .content-header > .container-fluid.d-flex {
        flex-wrap: wrap;
        gap: 12px;
        justify-content: flex-start !important;
    }
    .content-header > .container-fluid.d-flex > * { flex: 0 1 auto; max-width: 100%; }
    /* The last part is the action toolbar: its own full-width row. The title
       and anything beside it (a status badge) stay together on the first. */
    .content-header > .container-fluid.d-flex > :last-child:not(:first-child) {
        flex: 1 1 100%;
        display: flex; flex-wrap: wrap; gap: 8px;
        justify-content: flex-start; text-align: left; margin-left: 0 !important;
    }
    .content-header > .container-fluid.d-flex .btn { margin: 0 !important; }
    .content-header .row.mb-2 > [class*="col-sm-6"] { flex: 0 0 100%; max-width: 100%; }
    .content-header .row.mb-2 > [class*="col-sm-6"] + [class*="col-sm-6"] { margin-top: 8px; }
    .content-header .float-sm-right { float: none !important; }
    .content-header .breadcrumb { justify-content: flex-start; padding-left: 0; }
}

/* Stores list: the store's logo in a small framed square (initial letter
   when there is no logo or it fails to load). */
/* Logo and name in one cell, 12px apart; the header starts above the logo. */
.store-cell { display: flex; align-items: center; gap: 12px; }
.store-logo {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--hub-border); border-radius: var(--hub-radius-md);
    background: var(--hub-bg); overflow: hidden;
    font-size: 14px; font-weight: 600; color: var(--hub-muted-fg);
}
.store-logo img { max-width: 32px; max-height: 32px; object-fit: contain; }

/* The portal's own pager (admin-pager.js, styled blue in admin-redesign.css):
   hub outline buttons, purple current page, hub "Go to" field. */
.adm-pager { gap: 4px; font-size: 14px; }
.adm-pager-btn {
    min-width: 32px; height: 32px; padding: 0 10px;
    border: 1px solid var(--hub-border); border-radius: var(--hub-radius-md);
    background: var(--hub-bg); color: var(--hub-fg);
    font-family: var(--hub-font); font-size: 14px; font-weight: 500;
    box-shadow: var(--hub-shadow-xs);
}
.adm-pager-btn:hover:not(.is-disabled):not(.is-current) { background: var(--hub-muted); border-color: var(--hub-border); }
.adm-pager-btn.is-current { background: var(--hub-primary); border-color: var(--hub-primary); color: var(--hub-primary-fg); font-weight: 500; }
.adm-pager-btn.is-disabled { color: var(--hub-muted-fg); opacity: .5; box-shadow: none; }
.adm-pager-gap { color: var(--hub-muted-fg); }
.adm-pager-sep { background: var(--hub-border); margin: 4px 6px; }
.adm-pager-go-label, .adm-pager-total { color: var(--hub-muted-fg); }
.adm-pager-go-input {
    width: 56px; height: 32px; padding: 0 8px;
    border: 1px solid var(--hub-border); border-radius: var(--hub-radius-md);
    color: var(--hub-fg); font-family: var(--hub-font); font-size: 14px;
    box-shadow: var(--hub-shadow-xs);
}
.adm-pager-go-input:focus { outline: 0; border-color: var(--hub-ring); box-shadow: var(--hub-focus); }

/* A line under the last row, separating the rows from the
   "Showing x of y" / page buttons below (every DataTable). */
table.dataTable > tbody > tr:last-child > td { border-bottom: 1px solid var(--hub-border); }

/* Space between a tab bar and its content (Store form: Info / Setup / …). */
.content-wrapper .tab-content { padding-top: 20px; }

/* Form labels with Bootstrap's pl-3 sat 9px right of their field (the field
   is in a col-sm-12 with a 7.5px gutter). Same indent as the field. */
.form-group > label.col-form-label.pl-3 { padding-left: 7.5px !important; }
@media (max-width: 575.98px) {
    .content-wrapper form .form-group > label.col-form-label.pl-3,
    .content-wrapper .tab-content .form-group > label.col-form-label.pl-3 { padding-left: 0 !important; }
}

/* Segmented controls: the options are <label>s, which AdminLTE makes bold.
   Normal weight; the selected one 500. */
.btn-group-toggle > .btn,
.card-header .btn-group:not(.btn-group-vertical) > .btn { font-weight: 400 !important; }
.btn-group-toggle > .btn.active,
.card-header .btn-group:not(.btn-group-vertical) > .btn.active { font-weight: 500 !important; }

/* Some views wrap a card title in <strong>/<b> (Manual Products …): keep
   the title's own weight instead of bold. */
.card-title strong, .card-title b,
.card-header h3 strong, .card-header h4 strong, .card-header h5 strong { font-weight: inherit; }

/* Small input groups (tree search, toolbars): field, icon box and buttons
   all 32px, so the icon box and the field are the same height. */
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
    height: 32px; font-size: 14px; border-radius: var(--hub-radius-md);
}
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-prepend > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-append > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-sm > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-sm > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group.input-group-sm > .form-control { height: 32px !important; min-height: 32px; }

/* Tables using the full DataTables bundle with its own core theme
   (Groups: class "display", Buttons, scrollY): no stripes or shaded sort
   column, hub header line and weight, hub outline buttons. */
table.dataTable.display tbody tr,
table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.even,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_1 { background-color: transparent !important; box-shadow: none !important; }
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr:hover > .sorting_1 { background-color: rgba(245, 245, 245, .5) !important; }
table.dataTable thead th, table.dataTable thead td,
table.dataTable.no-footer, .dataTables_scrollBody {
    border-bottom: 1px solid var(--hub-border) !important;
}
/* One line under the header, not the header's and the scroll head's. */
.dataTables_scrollHead { border-bottom: 0 !important; }
.dataTables_scrollHead table.dataTable.no-footer { border-bottom: 0 !important; }
table.dataTable thead th, table.dataTable thead td { font-weight: 500; padding: 0 8px; height: 40px; }
table.dataTable.display tbody td,
table.dataTable.display tbody th { border-top: 0 !important; border-bottom: 1px solid var(--hub-border) !important; padding: 8px; }
table.dataTable.display tbody tr:last-child td { border-bottom: 0 !important; }
.dataTables_scrollBody table.dataTable thead th { border-bottom: 0 !important; }
table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting {
    background-image: none !important;
}
.dataTables_scroll { border: 0; }

div.dt-buttons { gap: 8px; display: inline-flex; flex-wrap: wrap; float: left; margin-bottom: 12px; }
button.dt-button, div.dt-button, a.dt-button, input.dt-button {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 12px; margin: 0 !important;
    background: var(--hub-bg) !important; background-image: none !important;
    border: 1px solid var(--hub-border) !important; border-radius: var(--hub-radius-md) !important;
    color: var(--hub-fg) !important; font-family: var(--hub-font); font-size: 14px; font-weight: 500;
    box-shadow: var(--hub-shadow-xs);
}
button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled) {
    background: var(--hub-muted) !important; border-color: var(--hub-border) !important;
}
button.dt-button:focus, a.dt-button:focus { outline: 0; box-shadow: var(--hub-focus) !important; }
.dataTables_wrapper .dataTables_filter input { border: 1px solid var(--hub-border); border-radius: var(--hub-radius-md); height: 32px; padding: 0 10px; box-shadow: var(--hub-shadow-xs); }

/* Groups: the ticks (columns 2-5) are centred by groupright.js; centre their
   headings over them. */
#tbl_group-right_wrapper thead th:nth-child(n+2):nth-child(-n+5) { text-align: center; }