/* ============================================
   White-label skin "soft" — light & rounded, deliberately unlike the
   platform's Titanium look: no chamfers, stripes, mono caps or dark chrome;
   white surfaces, rounded cards, soft shadows, sentence-case Be Vietnam Pro.

   Opt-in per brand: "soft" in Brand.skins puts `skin-soft` on <body>, and every
   rule is scoped to `body.skin-soft` so it out-specifies page-level <style>
   blocks (sidebar.html, login.html…) that come after this file.

   Colours come from the brand's palette file, loaded right after this one:
     --wl-primary (+ -rgb, -hover, -soft)  buttons, links, active items — must be
                                           ≥4.5:1 on white
     --wl-secondary (+ -rgb)               icons, fills, large text only
     --wl-accent (+ -rgb, -soft)           highlight fills with dark text
   Status colours (online/error/warning) are semantic and stay untouched.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');

:root {
    --wl-bg: #F4F7FB;
    --wl-surface: #FFFFFF;
    --wl-border: #E3E8F0;
    --wl-ink: #14213D;
    --wl-ink-2: #475569;
    --wl-muted: #8A94A6;
    --wl-radius: 14px;
    --wl-radius-sm: 10px;
    --wl-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 16px rgba(16, 24, 40, 0.06);
    --wl-shadow-hover: 0 2px 4px rgba(16, 24, 40, 0.06), 0 10px 24px rgba(16, 24, 40, 0.10);
    --wl-font: 'Be Vietnam Pro', 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;

    /* Platform tokens re-pointed at the ATV palette */
    --cl-dark: var(--wl-ink);
    --cl-dark-navy: var(--wl-primary);
    --cl-bg-dark: var(--wl-surface);
    --cl-blue: var(--wl-primary);
    --cl-blue-secondary: var(--wl-secondary);
    --cl-blue-10: rgb(var(--wl-primary-rgb) / 0.1);
    --cl-bg-primary: var(--wl-bg);
    --cl-border-light: var(--wl-border);
    --cl-text-primary: var(--wl-ink);
    --cl-font-body: var(--wl-font);
    --cl-font-tech: var(--wl-font);
    --cl-status-info: var(--wl-secondary);
    --tc-black: var(--wl-ink);
    --tc-black-soft: var(--wl-ink-2);
    --tc-dark-gray: var(--wl-border);
    --tc-tech-blue: var(--wl-primary);
    --tc-tech-blue-glow: rgb(var(--wl-primary-rgb) / 0.2);
    --tc-tech-blue-10: rgb(var(--wl-primary-rgb) / 0.1);
    --tc-border-active: var(--wl-primary);
    --tc-border-default: var(--wl-border);
    --tc-border-strong: var(--wl-border);
    --tc-bg-base: var(--wl-bg);
    --tc-text-primary: var(--wl-ink);
    --tc-font-ui: var(--wl-font);
    --tc-font-data: var(--wl-font);
    --tc-shadow-sharp: var(--wl-shadow);
    --tc-shadow-hover: var(--wl-shadow-hover);
    --primary: var(--wl-primary);
    --primary-dark: var(--wl-primary-hover);
    --primary-light: var(--wl-primary-soft);
    --primary-10: rgb(var(--wl-primary-rgb) / 0.1);
    --bg-active: var(--wl-primary-soft);
}

/* ---------- Base: type, background, shapes ---------- */
body.skin-soft,
body.skin-soft *:not(code):not(pre):not(kbd):not(samp):not(.font-mono):not(.table-code) {
    font-family: var(--wl-font) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}
body.skin-soft .bi::before { font-family: bootstrap-icons !important; }
body.skin-soft { background: var(--wl-bg); color: var(--wl-ink); }
body.skin-soft main,
body.skin-soft .bg-tech-grid,
body.skin-soft .login-bg-grid {
    background: var(--wl-bg) !important;
    background-image: none !important;
}
/* Titanium chamfers are clip-path polygons everywhere; round instead. */
body.skin-soft * { clip-path: none !important; }
body.skin-soft .tech-overlay,
body.skin-soft .tech-lines,
body.skin-soft .corner-accent,
body.skin-soft .navbar::before,
body.skin-soft .navbar::after,
body.skin-soft .sidebar::before { display: none !important; }

/* ---------- Navbar: white bar ---------- */
body.skin-soft .navbar {
    background: var(--wl-surface) !important;
    border-bottom: 1px solid var(--wl-border) !important;
    box-shadow: 0 1px 0 rgba(16, 24, 40, 0.02);
}
body.skin-soft .navbar :is(a, button, span, i, small):not(.badge):not(.dropdown-item):not(.dropdown-item *) {
    color: var(--wl-ink-2) !important;
}
body.skin-soft .navbar-logo {
    background: transparent;
    padding: 0;
    border-radius: 0;
    height: 40px;
}
body.skin-soft .navbar .status-code { display: none !important; }
body.skin-soft .navbar .btn-outline-light {
    border-color: var(--wl-border) !important;
    border-radius: 999px;
}

/* ---------- Sidebar: white, pill active item ---------- */
body.skin-soft .sidebar {
    background: var(--wl-surface) !important;
    border-right: 1px solid var(--wl-border) !important;
}
body.skin-soft .sidebar .sidebar-header,
body.skin-soft .sidebar .nav-number { display: none !important; }
body.skin-soft .sidebar .sidebar-footer {
    background: var(--wl-surface) !important;
    border-top: 1px solid var(--wl-border) !important;
}
body.skin-soft .sidebar .sidebar-footer * { color: var(--wl-muted) !important; border-color: var(--wl-border) !important; }
body.skin-soft .sidebar .nav-link,
body.skin-soft .sidebar .sidebar-section-toggle {
    color: var(--wl-ink-2) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 0 !important;
    border-radius: var(--wl-radius-sm) !important;
    margin: 2px 12px !important;
    padding: 10px 14px !important;
    text-decoration: none !important;
    background: transparent !important;
}
body.skin-soft .sidebar .nav-link i,
body.skin-soft .sidebar .sidebar-section-toggle i { color: var(--wl-muted) !important; }
body.skin-soft .sidebar .nav-link:hover:not(.active),
body.skin-soft .sidebar .sidebar-section-toggle:hover {
    background: var(--wl-bg) !important;
    color: var(--wl-ink) !important;
}
body.skin-soft .sidebar .nav-link.active {
    background: var(--wl-primary-soft) !important;
    color: var(--wl-primary) !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 var(--wl-accent);
}
body.skin-soft .sidebar .nav-link.active i { color: var(--wl-primary) !important; }
body.skin-soft .sidebar .nav-link.active::after { display: none !important; }
body.skin-soft .sidebar .sidebar-section-toggle[aria-expanded="true"] {
    color: var(--wl-ink) !important;
    font-weight: 600 !important;
}
body.skin-soft .sidebar .sidebar-section-toggle[aria-expanded="true"] i { color: var(--wl-ink-2) !important; }
body.skin-soft .sidebar .sidebar-submenu .nav-link { padding-left: 38px !important; font-size: 13.5px !important; }

/* ---------- Cards ---------- */
body.skin-soft :is(.card, .summary-card-tech, .data-terminal, .chart-card, .kpi-card, .chamfer-card,
    .info-panel-titanium, .stock-level-panel, .filter-section, .filter-deck-titanium, .status-breakdown-card,
    .sysadmin-stat-card, .table-titanium-wrapper, .revenue-section) {
    background: var(--wl-surface) !important;
    border: 1px solid var(--wl-border) !important;
    border-radius: var(--wl-radius) !important;
    box-shadow: var(--wl-shadow) !important;
    overflow: hidden;
}
body.skin-soft :is(.summary-card-tech, .kpi-card, .chart-card):hover {
    box-shadow: var(--wl-shadow-hover) !important;
    transform: translateY(-1px);
}
/* Dark striped headers → plain white headers with dark text */
body.skin-soft :is(.summary-card-header, .data-terminal-header, .card-header, .modal-header) {
    background: var(--wl-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--wl-border) !important;
    color: var(--wl-ink) !important;
}
body.skin-soft :is(.summary-card-header, .data-terminal-header, .card-header, .modal-header)
    :is(span, div, h1, h2, h3, h4, h5, h6, small, i, strong):not(.badge):not(.badge *):not(.btn):not(.btn *) {
    color: var(--wl-ink) !important;
}
body.skin-soft .summary-card-header { padding: 12px 16px !important; }
body.skin-soft .summary-card-header i,
body.skin-soft .data-terminal-header i { color: var(--wl-primary) !important; }
body.skin-soft .data-terminal-title { font-size: 15px !important; font-weight: 600 !important; }
body.skin-soft .data-terminal-meta { color: var(--wl-muted) !important; font-size: 12px !important; }
body.skin-soft .summary-label { color: var(--wl-muted) !important; font-weight: 500 !important; }
body.skin-soft .summary-value { color: var(--wl-ink) !important; font-weight: 700 !important; }
body.skin-soft .summary-icon-tech {
    background: var(--wl-primary-soft) !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: var(--wl-primary) !important;
}
body.skin-soft .summary-icon-tech i { color: var(--wl-primary) !important; }

/* Page header ("Dashboard" tab + title) */
body.skin-soft .logs-header-titanium .logs-code-badge {
    background: var(--wl-accent-soft) !important;
    color: var(--wl-ink) !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-weight: 600 !important;
}
body.skin-soft .logs-header-titanium .logs-code-badge * { color: var(--wl-ink) !important; }
body.skin-soft .status-code {
    border: 0 !important;
    border-radius: 999px !important;
    background: #E7F8EF !important;
    color: #0F7A45 !important;
    font-weight: 600 !important;
}
body.skin-soft .logs-title { font-weight: 700 !important; color: var(--wl-ink) !important; }
body.skin-soft .logs-subtitle { color: var(--wl-muted) !important; }

/* ---------- Buttons, inputs, chips ---------- */
body.skin-soft :is(.btn, .btn-titanium, .chamfer-btn, .btn-chamfer, .btn-titanium-login) {
    border-radius: var(--wl-radius-sm) !important;
    font-weight: 600 !important;
}
body.skin-soft :is(.btn-primary, .btn-titanium-primary, .btn-titanium-login) {
    background: var(--wl-primary) !important;
    border-color: var(--wl-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgb(var(--wl-primary-rgb) / 0.25) !important;
}
body.skin-soft :is(.btn-primary, .btn-titanium-primary, .btn-titanium-login):hover {
    background: var(--wl-primary-hover) !important;
    border-color: var(--wl-primary-hover) !important;
}
body.skin-soft :is(.btn-titanium-outline, .btn-titanium-ghost, .btn-outline-secondary, .btn-secondary) {
    background: var(--wl-surface) !important;
    border: 1px solid var(--wl-border) !important;
    color: var(--wl-ink-2) !important;
}
body.skin-soft :is(.btn-titanium-outline, .btn-titanium-ghost, .btn-outline-secondary, .btn-secondary):hover {
    background: var(--wl-bg) !important;
    color: var(--wl-ink) !important;
}
body.skin-soft :is(.form-control, .form-select, .input-group-text, .ts-control) {
    border-radius: var(--wl-radius-sm) !important;
    border-color: var(--wl-border) !important;
}
body.skin-soft .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body.skin-soft .input-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body.skin-soft :is(.form-control, .form-select):focus {
    border-color: var(--wl-primary) !important;
    box-shadow: 0 0 0 3px rgb(var(--wl-primary-rgb) / 0.15) !important;
}
body.skin-soft :is(.badge, .filter-chip, .status-chip, .date-preset, .credit-action-chip, .logs-code-badge) {
    border-radius: 999px !important;
}
body.skin-soft .modal-content {
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.18) !important;
    overflow: hidden;
}
body.skin-soft .dropdown-menu {
    border: 1px solid var(--wl-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--wl-shadow-hover) !important;
}

/* Tables */
body.skin-soft .table > thead th,
body.skin-soft .table-header th {
    background: var(--wl-bg) !important;
    color: var(--wl-ink-2) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--wl-border) !important;
}
body.skin-soft .table td { border-color: var(--wl-border) !important; }

/* ---------- Auth pages ---------- */
body.skin-soft .login-page { background: linear-gradient(160deg, var(--wl-primary-soft) 0%, var(--wl-bg) 55%) !important; }
body.skin-soft .login-card {
    border: 1px solid var(--wl-border) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 48px rgb(var(--wl-primary-rgb) / 0.12) !important;
    overflow: hidden;
    animation: none !important;
}
body.skin-soft .card-status-bar { display: none !important; }
body.skin-soft .login-header .login-logo-img { width: 220px; height: 72px; }
body.skin-soft .login-header .login-logo-img .pwa-logo { border-radius: 0; }
body.skin-soft .login-title { color: var(--wl-ink) !important; font-weight: 700 !important; }
body.skin-soft .login-title .accent { color: var(--wl-primary) !important; }
body.skin-soft .login-version {
    border: 0 !important;
    background: var(--wl-accent-soft) !important;
    color: var(--wl-ink) !important;
    border-radius: 999px;
}
body.skin-soft .card-footer-status { background: var(--wl-bg) !important; border-top: 1px solid var(--wl-border) !important; }
body.skin-soft .floating-label { color: var(--wl-muted) !important; }

/* ---------- Device cards (fleet page): dark telemetry strips → soft panels ---------- */
body.skin-soft .device-card-titanium {
    border: 1px solid var(--wl-border) !important;
    border-radius: var(--wl-radius) !important;
    box-shadow: var(--wl-shadow) !important;
    overflow: hidden;
}
body.skin-soft .device-card-titanium :is(.card-header-titanium, .revenue-panel) {
    background: var(--wl-surface) !important;
    border-color: var(--wl-border) !important;
}
body.skin-soft .device-card-titanium .revenue-panel { background: var(--wl-bg) !important; border-radius: var(--wl-radius-sm) !important; }
body.skin-soft .device-card-titanium :is(.last-startup-info, .realtime-stats-row, .realtime-stats-row-cash, .stock-progress-row) {
    background: var(--wl-bg) !important;
    border: 1px solid var(--wl-border) !important;
    border-radius: var(--wl-radius-sm) !important;
}
body.skin-soft .device-card-titanium :is(.last-startup-info, .realtime-stats-row, .realtime-stats-row-cash, .stock-progress-row)
    :is(.stat-item, .stat-label, .stat-unit, .startup-desc, .startup-version, .stock-progress-label, .stock-progress-value) {
    color: var(--wl-ink-2) !important;
}
body.skin-soft .device-card-titanium .stock-progress-bar { background: var(--wl-border) !important; border-radius: 999px !important; }
body.skin-soft .device-card-titanium .stock-progress-fill { border-radius: 999px !important; }
body.skin-soft .device-card-titanium :is(.device-id-badge, .group-badge-titanium) {
    border-radius: 999px !important;
    background: var(--wl-primary-soft) !important;
    color: var(--wl-primary) !important;
    border: 0 !important;
}
body.skin-soft .device-card-titanium .btn-titanium-primary { background: var(--wl-primary) !important; color: #fff !important; }

/* Titanium "//" terminal prefixes */
body.skin-soft :is(.table thead th, .sidebar-section-title, .kpi-code)::before { content: none !important; }

/* Settings pages: `.sysadmin-table` panels with striped dark headers */
body.skin-soft .sysadmin-table {
    background: var(--wl-surface) !important;
    border: 1px solid var(--wl-border) !important;
    border-radius: var(--wl-radius) !important;
    box-shadow: var(--wl-shadow) !important;
    overflow: hidden;
}
body.skin-soft .sysadmin-table .table-header {
    background: var(--wl-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--wl-border) !important;
}
body.skin-soft .sysadmin-table .table-header :is(h1, h2, h3, h4, h5, h6, span, div, i):not(.badge):not(.btn):not(.btn *) {
    color: var(--wl-ink) !important;
}
/* "ORG.DETAILS"-style codes above a real title are platform flavour */
body.skin-soft .sysadmin-table .table-header .table-code { display: none !important; }
body.skin-soft .org-wallet-hero {
    border-radius: var(--wl-radius) !important;
    background: linear-gradient(135deg, var(--wl-primary) 0%, var(--wl-secondary) 100%) !important;
    box-shadow: 0 10px 24px rgb(var(--wl-primary-rgb) / 0.25) !important;
}
body.skin-soft .org-wallet-hero .wb-btn { border-radius: var(--wl-radius-sm) !important; }

/* ---------- KPI cards: one title, not two ----------
   The header repeats the body label in hard-coded capitals ("TỔNG THIẾT BỊ" over
   "Tổng thiết bị"); drop the header text, keep its arrow/badges in the corner
   and let the translated label be the title. */
body.skin-soft .summary-card-tech { position: relative; }
body.skin-soft .summary-card-header {
    position: absolute !important;
    top: 10px; right: 10px; left: auto;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 1;
}
body.skin-soft .summary-card-header > .d-flex > :is(i, .font-tech) { display: none !important; }
body.skin-soft .summary-card-header .summary-card-arrow { color: var(--wl-muted) !important; font-size: 1.25rem; }
body.skin-soft .summary-card-body { padding: 20px !important; }
body.skin-soft .summary-icon-tech { width: 48px !important; height: 48px !important; flex: 0 0 48px; font-size: 1.3rem; }
body.skin-soft .summary-label { font-size: 13px !important; color: var(--wl-ink-2) !important; font-weight: 600 !important; margin-bottom: 2px !important; }
body.skin-soft .summary-value { font-size: 1.75rem !important; line-height: 1.15; }

/* Chart cards: drop the capitalised code line above the real title */
body.skin-soft .chart-card .chart-code { display: none !important; }
body.skin-soft .chart-card .chart-title { font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; color: var(--wl-ink) !important; }
body.skin-soft .chart-card .card-header { padding: 16px 20px !important; }
body.skin-soft .btn-chart-menu { border-radius: 999px !important; border: 0 !important; background: var(--wl-bg) !important; }
body.skin-soft .logs-header-titanium { margin-top: 14px !important; }

/* ---------- Every other striped/dark panel header in the Titanium CSS ---------- */
body.skin-soft :is(.panel-header-titanium, .panel-header-dark, .slot-config-header, .table-header-titanium,
    .filter-deck-header, .breakdown-panel-header, .plan-header-bar, .meters-header, .alert-group-header,
    .modal-titanium .modal-header, .session-timeline-modal .modal-header, #alertsModalToolbar, .slot-action-bar,
    .chart-card > .card-header) {
    background: var(--wl-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--wl-border) !important;
    color: var(--wl-ink) !important;
}
body.skin-soft :is(.panel-header-titanium, .panel-header-dark, .slot-config-header, .table-header-titanium,
    .filter-deck-header, .breakdown-panel-header, .plan-header-bar, .meters-header, .alert-group-header,
    .modal-titanium .modal-header, .session-timeline-modal .modal-header, #alertsModalToolbar, .slot-action-bar)
    :is(span, div, h1, h2, h3, h4, h5, h6, small, i, strong, label, a):not(.badge):not(.badge *):not(.btn):not(.btn *) {
    color: var(--wl-ink) !important;
}
body.skin-soft :is(.breakdown-panel, .usage-meters-card, .subscription-plan-card, .filter-summary-panel, .alert-group) {
    background: var(--wl-surface) !important;
    border: 1px solid var(--wl-border) !important;
    border-radius: var(--wl-radius) !important;
    box-shadow: var(--wl-shadow) !important;
    overflow: hidden;
}
body.skin-soft .modal-titanium .modal-content { border: 0 !important; }
body.skin-soft :is(.logs-code-badge, .list-chip, .pf-chip, .slot-chip .chip-count) {
    background: var(--wl-primary-soft) !important;
    color: var(--wl-primary) !important;
    border: 0 !important;
}
body.skin-soft .modal .modal-header .logs-code-badge { background: var(--wl-primary-soft) !important; color: var(--wl-primary) !important; }
body.skin-soft :is(.pagination .page-item.active .page-link, .paginate_button.current, .filter-chip.active) {
    background: var(--wl-primary) !important;
    border-color: var(--wl-primary) !important;
    color: #fff !important;
}
body.skin-soft :is(.flatpickr-day.selected, .ts-dropdown .option.active) { background: var(--wl-primary) !important; border-color: var(--wl-primary) !important; }

/* ---------- Tinted labels: dark text on a pale tint (the platform pairs a 10%
   tint with the same bright hue as text, which fails contrast) ---------- */
body.skin-soft :is(.badge-titanium, .status-chip, .payment-status-chip, .system-event-chip, .sa-event-chip, .credit-action-chip, .filter-chip) {
    font-weight: 600 !important;
    border-width: 1px !important;
}
body.skin-soft :is(.badge-titanium-success, .badge.bg-success-subtle, .text-bg-success-subtle, .status-chip.status-success, .status-chip.online) {
    background: #DDF5E6 !important; color: #0F6B3A !important; border-color: #B7E4C7 !important;
}
body.skin-soft :is(.badge-titanium-danger, .badge.bg-danger-subtle, .status-chip.status-danger, .status-chip.offline) {
    background: #FCE4E4 !important; color: #9F1D1D !important; border-color: #F3BDBD !important;
}
body.skin-soft :is(.badge-titanium-warning, .badge.bg-warning-subtle, .status-chip.status-warning) {
    background: #FFF1D6 !important; color: #8A5A00 !important; border-color: #F6D89A !important;
}
body.skin-soft :is(.badge-titanium-info, .badge.bg-info-subtle, .status-chip.status-info) {
    background: var(--wl-primary-soft) !important; color: var(--wl-primary) !important; border-color: rgb(var(--wl-primary-rgb) / 0.25) !important;
}
body.skin-soft :is(.badge-titanium-secondary, .badge.bg-secondary-subtle, .badge.bg-light) {
    background: #EEF1F5 !important; color: #3F4A5C !important; border-color: #D9DFE7 !important;
}
/* Solid Bootstrap badges: keep the semantic colour but a darker, readable shade */
body.skin-soft .badge.bg-warning { background: #D9900B !important; color: #fff !important; }
body.skin-soft .badge.bg-info { background: var(--wl-secondary) !important; color: #fff !important; }
body.skin-soft .badge.bg-success { background: #15803D !important; }
body.skin-soft .badge.bg-danger { background: #C0262C !important; }
body.skin-soft .badge.bg-primary { background: var(--wl-primary) !important; }
/* Money deltas and status words set in the bright palette */
body.skin-soft :is(.text-success, .amount-positive, .delta-positive) { color: #15803D !important; }
body.skin-soft :is(.text-danger, .amount-negative, .delta-negative) { color: #B91C1C !important; }
body.skin-soft .text-warning { color: #B45309 !important; }
body.skin-soft .text-info { color: var(--wl-secondary) !important; }

/* ---------- Small screens: KPI cards in two columns ---------- */
@media (max-width: 767.98px) {
    /* header back in normal flow so its chips/arrow never sit on the body text */
    body.skin-soft .summary-card-header {
        position: static !important;
        padding: 10px 14px 0 !important;
        justify-content: flex-end !important;
        min-height: 0;
    }
    body.skin-soft .summary-card-header:empty { display: none !important; }
    body.skin-soft .summary-card-body { padding: 6px 14px 14px !important; }
    body.skin-soft .summary-card-body > .d-flex { flex-direction: column; align-items: flex-start !important; gap: 8px; }
    body.skin-soft .summary-card-body > .d-flex > .ms-3 { margin-left: 0 !important; min-width: 0; width: 100%; }
    body.skin-soft .summary-icon-tech { width: 36px !important; height: 36px !important; flex-basis: 36px; font-size: 1rem; }
    body.skin-soft .summary-label { font-size: 12px !important; }
    body.skin-soft .summary-value { font-size: 1.35rem !important; overflow-wrap: anywhere; }
    body.skin-soft .summary-card-body small { font-size: 11px; }
    /* page header: title under the badge, actions wrap */
    body.skin-soft .logs-header-titanium { flex-wrap: wrap; gap: 8px; }
    body.skin-soft .logs-title { font-size: 1.25rem !important; }
    body.skin-soft .logs-header-actions { flex-wrap: wrap; }
    /* big stat numbers (balance, revenue) must not overflow a half-width card */
    body.skin-soft .card :is(h1, h2, h3, h4, .stat-value, .kpi-value, .summary-value) { overflow-wrap: anywhere; font-size: clamp(1rem, 6vw, 1.5rem) !important; }
}