/* ============================================
   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: #5B6779;          /* 5.6:1 on white, 5.1:1 on the page bg — helper text must stay AA */
    --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);
    /* Platform muted/status tokens (#94a3b8, neon #10b981/#ef4444/#f59e0b) → readable shades */
    --cl-text-muted: var(--wl-muted);
    --tc-text-muted: var(--wl-muted);
    --text-muted: var(--wl-muted);
    --c-muted: var(--wl-muted);
    --bs-secondary-color: var(--wl-muted);
    --cl-green: #15803D;
    --cl-red: #B91C1C;
    --cl-amber: #B45309;
    --cl-slate: var(--wl-muted);
    --cl-success: #15803D;
    --cl-danger: #B91C1C;
    --cl-warning: #B45309;
    --tc-status-error: #B91C1C;
    --tc-status-ok: #15803D;
    --tc-status-warn: #B45309;
    --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-ink-2) !important; font-size: 12.5px !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: #FFF1D6 !important; color: #8A5A00 !important; }
body.skin-soft .badge.bg-info { background: var(--wl-secondary) !important; color: #fff !important; }
body.skin-soft .badge.bg-success { background: #DDF5E6 !important; color: #0F6B3A !important; }
body.skin-soft .badge.bg-danger { background: #FCE4E4 !important; color: #9F1D1D !important; }
body.skin-soft .badge.bg-dark { background: #3F4A5C !important; color: #fff !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; }
}

/* ============================================
   Audit fixes (2026-11-04): muted text sinking into white, neon Titanium
   status colours on a light skin, terminal-style micro-labels, modal chrome,
   and phone-width overflow. Each group names the platform class it corrects.
   ============================================ */

/* ---- Muted / helper text: cleanlab .text-muted, logs-titanium .tech-label/.stat-label/
   .stat-sub/.breakdown-title, list-recipe .list-sub/.list-deck-label/.list-card-kv .k,
   product-list .product-sub, dashboard .org-alert-msg/.payment-bar-revenue/.ranking-* ---- */
body.skin-soft :is(.text-muted, .form-text, .list-sub, .list-card-kv .k, .list-deck-label, .list-money.is-zero,
    .product-sub, .product-price-sub, .stat-label, .stat-sub, .breakdown-title, .revenue-section-title,
    .header-subtitle, .org-field label, .org-field .hint, .org-stat .lbl, .ticket-description, .updated-date,
    .data-terminal-meta, .media-optin__title, .org-alert-msg, .payment-bar-revenue, .ranking-device-id,
    .ranking-sub, .diff-arrow, .floating-label) {
    color: var(--wl-muted) !important;
}
body.skin-soft .summary-card-body small { color: var(--wl-muted) !important; font-size: 12px !important; }
body.skin-soft .org-alert .org-alert-msg { color: #5B3A3A !important; } /* on the pink alert tint */
body.skin-soft .filter-section small.text-muted strong,
body.skin-soft .list-card-kv .v.list-sub { color: var(--wl-ink) !important; font-weight: 600 !important; }
/* 10px mono micro-labels → 12–13px sentence-case labels */
body.skin-soft :is(label.tech-label, .tech-label, .stat-label, .list-deck-label, .list-card-kv .k, .org-field label,
    .org-stat .lbl, .media-optin__title, .modal .form-label, .modal-titanium .modal-body .form-label, .wb-label) {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--wl-ink-2) !important;
}
body.skin-soft .stat-sub, body.skin-soft .form-text { font-size: 12px !important; }
body.skin-soft .modal-body :is(.text-muted, .form-text, small) { color: var(--wl-ink-2) !important; }
body.skin-soft :is(.breakdown-title, .revenue-section-title, .breakdown-panel-header span, .breakdown-panel-title,
    .gateway-table th, .status-breakdown-card .font-tech, .d-flex > span.font-tech.text-muted) {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--wl-ink) !important;
}
body.skin-soft .gateway-table th { color: var(--wl-ink-2) !important; font-size: 12px !important; background: var(--wl-bg) !important; }
body.skin-soft :is(.table thead th, .table-tech thead th, .table-header th) { font-size: 12px !important; }
body.skin-soft .code-mono { font-weight: 600 !important; color: var(--wl-ink-2) !important; }
body.skin-soft td .font-tech.text-muted { font-size: 12px !important; }

/* ---- Terminal footer / navbar: titanium-command footer .font-tech, .status-code chip ---- */
body.skin-soft footer, body.skin-soft footer * { color: var(--wl-muted) !important; font-size: 12px !important; font-weight: 500 !important; }
body.skin-soft .status-code::before { background: #15803D !important; box-shadow: none !important; }
body.skin-soft .status-code { box-shadow: none !important; }
body.skin-soft .font-tech { font-weight: 600; }

/* ---- Data-terminal titles: hide the terminal icon, humanise size ---- */
body.skin-soft .data-terminal-title i.bi-terminal { display: none !important; }
body.skin-soft .data-terminal-title { color: var(--wl-ink) !important; }

/* ---- Empty states: dashboard-titanium .empty-state-titanium, bars that look like 100% of nothing ---- */
body.skin-soft .empty-state-titanium .empty-title { font-weight: 600 !important; font-size: 14px !important; color: var(--wl-ink-2) !important; }
body.skin-soft .empty-state-titanium .empty-icon { background: var(--wl-bg) !important; border-radius: 999px !important; color: #94A3B8 !important; }
body.skin-soft :is(.breakdown-bar, #paymentBreakdownBar, .payment-breakdown-bar) { background: var(--wl-border) !important; border: 0 !important; border-radius: 999px !important; }
body.skin-soft .breakdown-bar > .breakdown-segment.bg-secondary:only-child,
body.skin-soft #paymentBreakdownBar .payment-segment:only-child,
body.skin-soft .skeleton-bar { background: var(--wl-border) !important; }
body.skin-soft .breakdown-bar:has(> .text-muted), body.skin-soft .breakdown-bar:empty { background: transparent !important; height: auto !important; }
body.skin-soft .breakdown-bar:empty::after { content: 'Chưa có dữ liệu'; display: block; color: var(--wl-muted); font-size: 13px; padding: 4px 0; }
body.skin-soft :is(.breakdown-bar, .breakdown-legend, .breakdown-panel-body, #paymentBreakdownLabels) .text-muted { font-size: 13px !important; color: var(--wl-muted) !important; }
body.skin-soft .breakdown-legend { font-size: 13px !important; color: var(--wl-ink-2) !important; }
body.skin-soft .breakdown-segment[style*="#f59e0b"] { background: #D9900B !important; }
body.skin-soft .breakdown-segment[style*="#3b82f6"] { background: var(--wl-secondary) !important; }
body.skin-soft .inline-note:empty { display: none !important; }
body.skin-soft .inline-note { border-radius: var(--wl-radius-sm) !important; border-left-width: 3px !important; }
body.skin-soft .modal-body:empty { display: none; }

/* ---- Status pills: dashboard-titanium .status-badge (white on neon) → tinted pills ---- */
body.skin-soft .status-badge { font-size: 11px !important; font-weight: 600 !important; border-radius: 999px !important; padding: 3px 10px !important; }
body.skin-soft .status-badge:is(.status-completed, .status-success) { background: #DDF5E6 !important; color: #0F6B3A !important; }
body.skin-soft .status-badge.status-pending { background: #FFF1D6 !important; color: #8A5A00 !important; }
body.skin-soft .status-badge:is(.status-failed, .status-error) { background: #FCE4E4 !important; color: #9F1D1D !important; }
/* invoices/tickets .badge-status-*, promo .promo-kind-badge, customer .badge-tier-none, org .org-badge-active */
body.skin-soft [class*='badge-status-'] { font-size: 12px !important; border-radius: 999px !important; padding: 3px 10px !important; border: 0 !important; }
body.skin-soft .badge-status-issued { background: #DDF5E6 !important; color: #0F6B3A !important; }
body.skin-soft .badge-status-failed, body.skin-soft .badge-status-escalated { background: #FCE4E4 !important; color: #9F1D1D !important; }
body.skin-soft .badge-status-pending { background: #FFF1D6 !important; color: #8A5A00 !important; }
body.skin-soft .badge-status-open { background: #FFF1D6 !important; color: #8A5A00 !important; }
body.skin-soft .badge-status-cancelled { background: #EEF1F5 !important; color: #3F4A5C !important; }
body.skin-soft .badge-status-in_progress { background: var(--wl-primary-soft) !important; color: var(--wl-primary) !important; }
body.skin-soft .promo-kind-badge { border: 0 !important; border-radius: 999px !important; padding: 2px 10px !important; font-size: 11px !important; font-weight: 600 !important; background: var(--wl-bg) !important; color: var(--wl-ink-2) !important; }
body.skin-soft .promo-kind-badge.kind-wallet { background: #DDF5E6 !important; color: #0F6B3A !important; }
body.skin-soft .promo-kind-badge.kind-code { background: #FFF1D6 !important; color: #8A5A00 !important; }
body.skin-soft .promo-kind-badge.kind-auto { background: var(--wl-primary-soft) !important; color: var(--wl-primary) !important; }
body.skin-soft .promo-kind-badge.kind-slot_price { background: #EFE9FE !important; color: #5B21B6 !important; }
body.skin-soft .badge-tier-none { background: var(--wl-bg) !important; color: var(--wl-ink-2) !important; border: 0 !important; font-weight: 600 !important; border-radius: 999px !important; }
body.skin-soft .org-badge-active { background: #DDF5E6 !important; color: #0F6B3A !important; border-radius: 999px !important; padding: 3px 10px !important; }
body.skin-soft .badge-titanium { border-radius: 999px !important; font-size: 11.5px !important; }
body.skin-soft .badge-titanium-warning { color: #8A5A00 !important; background: #FFF1D6 !important; }
body.skin-soft .table-tech .badge { font-size: 12px !important; padding: 3px 10px !important; }
/* activity-logs: 50 dark .badge.bg-secondary pills per page → quiet outlined chips */
body.skin-soft td > .badge.bg-secondary { background: var(--wl-bg) !important; color: var(--wl-ink-2) !important; border: 1px solid var(--wl-border) !important; font-weight: 500 !important; }
/* invoices header badges (inline-styled indigo/green) and payment provider badges */
body.skin-soft .logs-header-left .badge[style] { background: var(--wl-primary-soft) !important; color: var(--wl-primary) !important; border: 0 !important; font-size: 12px !important; padding: 4px 10px !important; }
body.skin-soft .logs-header-left .badge[style*='16, 185, 129'] { background: #DDF5E6 !important; color: #0F6B3A !important; }
body.skin-soft .table td .badge[style*='background-color'],
body.skin-soft .stat-card .badge { background-color: var(--wl-primary-soft) !important; background: var(--wl-primary-soft) !important; color: var(--wl-primary) !important; font-size: 12px !important; font-weight: 600 !important; padding: 4px 10px !important; }
body.skin-soft .table td code { color: var(--wl-ink-2) !important; background: var(--wl-bg); padding: 2px 6px; border-radius: 6px; font-size: 12px; }

/* ---- Device filter sheet: device-dashboard .status-chip.{info,success,...} (bright outline + glow) ---- */
body.skin-soft .status-chip { background: var(--wl-surface) !important; border: 1px solid var(--wl-border) !important; color: var(--wl-ink-2) !important; box-shadow: none !important; }
body.skin-soft .status-chip.info { border-color: #B6DDF2 !important; color: #0B5E8A !important; }
body.skin-soft .status-chip.success { border-color: #B7E4C7 !important; color: #0F6B3A !important; }
body.skin-soft .status-chip.warning { border-color: #F6D89A !important; color: #8A5A00 !important; }
body.skin-soft .status-chip.danger { border-color: #F3BDBD !important; color: #9F1D1D !important; }
body.skin-soft .status-chip:is(.secondary, .dark) { border-color: #D9DFE7 !important; color: #3F4A5C !important; }
body.skin-soft .status-chip.active { background: var(--wl-primary) !important; border-color: var(--wl-primary) !important; color: #fff !important; box-shadow: none !important; }
body.skin-soft .status-chip.active.success { background: #15803D !important; border-color: #15803D !important; }
body.skin-soft .status-chip.active.danger { background: #C0262C !important; border-color: #C0262C !important; }
body.skin-soft .status-chip.active.warning { background: #D9900B !important; border-color: #D9900B !important; }

/* ---- Filter chips: list-recipe .list-chip / product-list .pf-chip / device-slot .slot-chip
   (skin paled the chip but left the count white → invisible) ---- */
body.skin-soft :is(.list-chip, .pf-chip, .slot-chip) { font-size: 12.5px !important; border-radius: 999px !important; }
body.skin-soft :is(.list-chip, .pf-chip, .slot-chip):not(.active) .chip-count { background: var(--wl-surface) !important; color: var(--wl-primary) !important; border: 0 !important; }
body.skin-soft :is(.list-chip, .pf-chip, .slot-chip).active,
body.skin-soft .tag-color-opt:has(input:checked) { background: var(--wl-primary) !important; color: #fff !important; border-color: var(--wl-primary) !important; }
body.skin-soft :is(.list-chip, .pf-chip, .slot-chip).active .chip-count { background: rgba(255,255,255,.18) !important; color: #fff !important; border: 0 !important; }
body.skin-soft .filter-chips .filter-chip { font-size: 12px !important; color: var(--wl-ink) !important; background: var(--wl-surface) !important; border: 1px solid var(--wl-border) !important; }
body.skin-soft .filter-chip[style*="--cl-red"], body.skin-soft .filter-chip[id$="ClearAllFiltersChips"] { color: #B91C1C !important; background: #FCE4E4 !important; border-color: #F3BDBD !important; }

/* ---- Stat modules (logs-titanium .stat-module / .stat-bar / .stat-value-*): square tiles with
   6px neon stripe → rounded cards, dark semantic values ---- */
body.skin-soft .stat-module { border: 1px solid var(--wl-border) !important; border-radius: var(--wl-radius) !important; box-shadow: var(--wl-shadow) !important; background: var(--wl-surface) !important; }
body.skin-soft .stat-module:hover { transform: none !important; border-color: var(--wl-border) !important; box-shadow: var(--wl-shadow-hover) !important; }
body.skin-soft .stat-module .stat-bar { width: 4px !important; border-radius: 999px; margin: 10px 0 10px 10px; }
body.skin-soft .stat-module .stat-icon { color: var(--wl-primary) !important; opacity: .12 !important; }
body.skin-soft .stat-value { color: var(--wl-ink) !important; font-weight: 800 !important; }
body.skin-soft .stat-value-green { color: #0F6B3A !important; }
body.skin-soft .stat-value-red { color: #B91C1C !important; }
body.skin-soft .stat-value-amber { color: #B45309 !important; }
body.skin-soft .stat-value-teal { color: #0E7C73 !important; }
body.skin-soft .stat-value-blue { color: var(--wl-primary) !important; }
body.skin-soft .stat-bar-green { background: #15803D !important; }
body.skin-soft .stat-bar-amber { background: #B45309 !important; }
body.skin-soft .stat-bar-red { background: #B91C1C !important; }
body.skin-soft .stat-bar-slate { background: var(--wl-muted) !important; }
/* settings/payment .stat-card (dashboard-titanium) */
body.skin-soft .stat-card { background: var(--wl-surface) !important; border: 1px solid var(--wl-border) !important; border-left-width: 1px !important; border-radius: var(--wl-radius) !important; box-shadow: var(--wl-shadow) !important; }
body.skin-soft .stat-card::before { display: none !important; }
body.skin-soft .stat-card .stat-icon { opacity: .3; color: var(--wl-primary) !important; }
/* KPI cards: .summary-card-tech values in --cl-success/--cl-danger */
body.skin-soft .summary-card-tech .summary-value { color: var(--wl-ink) !important; }
body.skin-soft .summary-card-danger .summary-value { color: #B91C1C !important; }
body.skin-soft .summary-card-tech { border-top-color: var(--wl-secondary) !important; }
body.skin-soft .summary-card-tech::before { display: none !important; }
body.skin-soft .summary-card-tech :is(.status-code, .live-badge) { background: #DDF5E6 !important; color: #0F6B3A !important; border-radius: 999px !important; border: 0 !important; }
/* revenue-report / device-groups: the header holds a code chip or bare .font-tech that
   draws over the body label once the header is absolutely positioned */
body.skin-soft .summary-card-header .logs-code-badge,
body.skin-soft .summary-card-header > .font-tech,
body.skin-soft .map-card-header > .font-tech:first-child { display: none !important; }
body.skin-soft .summary-value.text-truncate { max-width: 100% !important; }
body.skin-soft .wallet-kpi .summary-icon-tech.text-success { background: #DDF5E6 !important; color: #0F6B3A !important; }
body.skin-soft .wallet-kpi .summary-icon-tech.text-danger { background: #FCE4E4 !important; color: #9F1D1D !important; }
body.skin-soft .wallet-kpi .summary-icon-tech i { color: inherit !important; }

/* ---- Device fleet cards (device-card-titanium): neon telemetry numbers on a light strip ---- */
body.skin-soft .device-card-titanium :is(.signal-value, .health-value, .cashbox-value, .recycler-value, .balance-value, .startup-time, .revenue-value, .revenue-value .text-muted) { color: var(--wl-ink) !important; font-weight: 600 !important; }
body.skin-soft .device-card-titanium :is(.signal-excellent, .signal-good, .health-good) :is(.signal-value, .health-value, i) { color: #15803D !important; }
body.skin-soft .device-card-titanium :is(.signal-fair, .health-warning) :is(.signal-value, .health-value, i) { color: #B45309 !important; }
body.skin-soft .device-card-titanium :is(.signal-weak, .signal-poor, .health-critical) :is(.signal-value, .health-value, i) { color: #B91C1C !important; }
body.skin-soft .device-card-titanium :is(.cashbox-stat, .balance-stat, .recycler-stat, .last-startup-info, .signal-icon) i { color: var(--wl-secondary) !important; }
body.skin-soft .device-card-titanium .revenue-label { font-size: 11px !important; font-weight: 500 !important; color: var(--wl-muted) !important; }
body.skin-soft .device-card-titanium :is(.ping-value, .heartbeat-info, .heartbeat-status, .heartbeat-time) { color: var(--wl-muted) !important; }

/* ---- Alerts (cleanlab/titanium .alert with [ERR]/[INFO] prefixes, 4px left bars) ---- */
body.skin-soft .alert::before { content: none !important; display: none !important; }
body.skin-soft .alert { border-radius: var(--wl-radius-sm) !important; border-width: 1px !important; border-left-width: 1px !important; font-weight: 500 !important; }
body.skin-soft .alert .font-tech.fw-bold { display: none !important; }
body.skin-soft .alert-danger { background: #FCE4E4 !important; border-color: #F3BDBD !important; color: #9F1D1D !important; }
body.skin-soft .alert-danger * { color: #9F1D1D !important; }
body.skin-soft .alert-success { background: #DDF5E6 !important; border-color: #B7E4C7 !important; color: #0F6B3A !important; }
body.skin-soft .alert-warning { background: #FFF1D6 !important; border-color: #F6D89A !important; color: #8A5A00 !important; }
body.skin-soft .alert-info { background: var(--wl-primary-soft) !important; border-color: rgb(var(--wl-primary-rgb) / 0.2) !important; color: var(--wl-ink-2) !important; }
body.skin-soft .alert-info strong { color: var(--wl-primary) !important; }
body.skin-soft .org-alert { background: #FFF7F7 !important; border: 1px solid #F3C7C7 !important; border-left: 4px solid var(--wl-accent) !important; border-radius: var(--wl-radius) !important; }
body.skin-soft .org-alert .btn { background: #fff !important; color: var(--wl-primary) !important; border: 1px solid var(--wl-primary) !important; box-shadow: none !important; }
body.skin-soft .refresh-indicator { background: var(--wl-primary) !important; color: #fff !important; border-radius: 999px !important; box-shadow: var(--wl-shadow-hover) !important; }

/* ---- Cards: titanium-command .card::before 3px accent line; map/ticket cards ---- */
body.skin-soft .card::before, body.skin-soft .card::after { display: none !important; content: none !important; }
body.skin-soft .modal .card { border: 1px solid var(--wl-border) !important; border-radius: var(--wl-radius-sm) !important; box-shadow: none !important; }
body.skin-soft .map-card-tech { border: 1px solid var(--wl-border) !important; border-radius: var(--wl-radius) !important; overflow: hidden; box-shadow: var(--wl-shadow) !important; }
body.skin-soft .map-card-header { background: var(--wl-surface) !important; border-bottom: 1px solid var(--wl-border) !important; }
body.skin-soft .map-card-header .font-tech { font-size: 13px !important; font-weight: 600 !important; color: var(--wl-ink) !important; }
body.skin-soft .ticket-card { 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 .ticket-card-warning { border-color: #F6D89A !important; box-shadow: inset 4px 0 0 #D9900B, var(--wl-shadow) !important; }
body.skin-soft .ticket-card-unread { border-left: 0 !important; box-shadow: inset 4px 0 0 var(--wl-primary), var(--wl-shadow) !important; }
body.skin-soft .ticket-number { color: var(--wl-primary) !important; text-decoration: none !important; }
body.skin-soft .ticket-card :is(.ticket-card-header, .ticket-card-footer) { border-color: var(--wl-border) !important; }
body.skin-soft .media-optin { border: 1px solid var(--wl-border) !important; border-left: 4px solid #B45309 !important; border-radius: var(--wl-radius) !important; box-shadow: var(--wl-shadow) !important; }
body.skin-soft .media-optin.is-on { border-left-color: #15803D !important; }
body.skin-soft .filter-deck-header small.text-muted { color: var(--wl-ink-2) !important; font-size: 12px !important; font-weight: 400 !important; }
/* revenue-report: emerald gradient cash-recon slab → white card with a green total row */
body.skin-soft .cash-recon-card { background: var(--wl-surface) !important; color: var(--wl-ink) !important; border: 1px solid var(--wl-border) !important; border-radius: var(--wl-radius) !important; box-shadow: var(--wl-shadow) !important; }
body.skin-soft .cash-recon-item { border-bottom: 1px solid var(--wl-border) !important; }
body.skin-soft .cash-recon-label { color: var(--wl-ink-2) !important; opacity: 1 !important; }
body.skin-soft .cash-recon-value { color: var(--wl-ink) !important; }
body.skin-soft .cash-recon-item:last-child .cash-recon-value { color: #0F6B3A !important; }
/* device-breakdown rows: bright green amount + pale rank/count */
body.skin-soft .device-breakdown-item .amount { color: #15803D !important; font-weight: 700 !important; font-size: 13px !important; }
body.skin-soft .device-breakdown-item .count { color: var(--wl-muted) !important; font-size: 12px !important; }
body.skin-soft .device-breakdown-item .rank { color: var(--wl-ink-2) !important; font-weight: 700 !important; font-size: 12px !important; }
body.skin-soft .payment-bar-fill { background: var(--wl-secondary) !important; box-shadow: none !important; }
/* settings/wallet balance hero: near-black red/brown gradients */
body.skin-soft .wallet-balance-card { background: linear-gradient(135deg, var(--wl-primary) 0%, var(--wl-secondary) 100%) !important; border-radius: var(--wl-radius) !important; }
body.skin-soft .wallet-balance-card.is-danger { background: linear-gradient(135deg, #7F1D1D 0%, #C0262C 100%) !important; }
body.skin-soft .wallet-balance-card.is-warning { background: linear-gradient(135deg, #92400E 0%, #D9900B 100%) !important; }
body.skin-soft .wallet-balance-card .wb-urgency { background: rgba(255,255,255,.16) !important; }
body.skin-soft .wallet-balance-card .wb-cta { border-radius: var(--wl-radius-sm) !important; color: var(--wl-primary) !important; }
body.skin-soft .wallet-balance-card.is-danger .wb-cta { color: #9F1D1D !important; }
body.skin-soft #walletTabs .nav-link { color: var(--wl-ink-2) !important; }
body.skin-soft #walletTabs .nav-link.active { color: var(--wl-primary) !important; border-color: var(--wl-border) !important; }
body.skin-soft .wallet-tab-content { border-color: var(--wl-border) !important; border-radius: 0 0 var(--wl-radius) var(--wl-radius) !important; }
body.skin-soft #goSimTabBtn, body.skin-soft #goSimTabBtn2 { white-space: nowrap; flex: 0 0 auto; padding: 8px 14px !important; font-size: 13px !important; }
body.skin-soft .org-wallet-hero .wb-btn { font-size: 13px !important; }
body.skin-soft .org-wallet-hero .wb-btn-ghost { background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.5) !important; }
body.skin-soft .org-stat .ico { border-radius: 10px !important; background: var(--wl-primary-soft) !important; color: var(--wl-primary) !important; }
body.skin-soft .org-stat .ico.owner { background: #FFF1D6 !important; color: #8A5A00 !important; }
body.skin-soft .org-field :is(input, textarea)[disabled] { background: var(--wl-bg) !important; color: var(--wl-ink-2) !important; }
/* activity-logs diff view */
body.skin-soft .diff-container { border-left: 3px solid var(--wl-primary) !important; background: var(--wl-bg) !important; border-radius: var(--wl-radius-sm) !important; }
body.skin-soft .diff-before { color: #B91C1C !important; opacity: 1 !important; }
body.skin-soft .diff-after { color: #0F6B3A !important; }
body.skin-soft .diff-field-name { color: var(--wl-ink-2) !important; }
/* promo: dimmed expired cards washed the primary button too */
body.skin-soft .list-card:is(.status-expired, .status-archived, .status-paused, .status-draft) { opacity: 1 !important; }
body.skin-soft .list-card:is(.status-expired, .status-archived) { background: var(--wl-bg) !important; }
body.skin-soft .list-card:is(.status-expired, .status-archived) :is(.list-card-title, .list-sub, .list-card-kv) { color: var(--wl-ink-2) !important; }

/* ---- Buttons: accessibility.css underlines anchors that are not .btn; neon .btn-danger/.btn-success;
   black-outlined .btn-outline-primary (cleanlab --cl-dark) ---- */
body.skin-soft a:is(.btn-titanium, .btn-titanium-primary, .btn-titanium-outline, .btn-titanium-ghost, .btn-titanium-sm,
    .btn-titanium-accent, .btn-chamfer, .chamfer-btn, .wb-btn, [class*='btn-titanium']),
body.skin-soft :is(.logs-header-actions, .list-actions, .list-card-foot, .product-card-actions) a { text-decoration: none !important; }
body.skin-soft .breadcrumb-item a { color: var(--wl-primary) !important; text-decoration: none !important; font-weight: 500; }
body.skin-soft .breadcrumb-item.active { color: var(--wl-ink-2) !important; }
body.skin-soft .btn-titanium-accent { background: var(--wl-surface) !important; border: 1px solid var(--wl-border) !important; color: var(--wl-ink-2) !important; border-radius: var(--wl-radius-sm) !important; padding: 8px 14px !important; }
body.skin-soft :is(.btn-danger, .btn-titanium-danger) { background: #C0262C !important; border-color: #C0262C !important; color: #fff !important; background-image: none !important; box-shadow: none !important; }
body.skin-soft :is(.btn-success, .btn-titanium-success) { background: #15803D !important; border-color: #15803D !important; color: #fff !important; background-image: none !important; box-shadow: none !important; }
body.skin-soft .btn-warning, body.skin-soft .table-tech .btn-warning { background: #FFF1D6 !important; border-color: #F6D89A !important; color: #8A5A00 !important; }
body.skin-soft :is(.btn-danger, .btn-success, .btn-titanium-danger, .btn-titanium-success, .btn-warning) { font-size: 13px !important; }
body.skin-soft td .btn-titanium-success { background: #DDF5E6 !important; color: #0F6B3A !important; border-color: #B7E4C7 !important; }
body.skin-soft td .btn-titanium-danger { background: #FCE4E4 !important; color: #9F1D1D !important; border-color: #F3BDBD !important; }
body.skin-soft .btn-outline-primary { border-color: rgb(var(--wl-primary-rgb) / 0.35) !important; color: var(--wl-primary) !important; background: var(--wl-surface) !important; }
body.skin-soft .btn-outline-primary:hover { background: var(--wl-primary-soft) !important; }
body.skin-soft .btn-outline-secondary.active, body.skin-soft .btn-check:checked + .btn { background: var(--wl-primary-soft) !important; color: var(--wl-primary) !important; border-color: var(--wl-primary) !important; }
body.skin-soft #mediaUploadBtn .badge-titanium-info { background: rgba(255,255,255,.18) !important; color: #fff !important; border: 0 !important; }

/* ---- Modals: white header, dark title, no top stripe, no grey footer band;
   bg-success/bg-danger headers + white close icon ---- */
body.skin-soft .modal-content::before { display: none !important; content: none !important; }
body.skin-soft .modal-header,
body.skin-soft .modal-header:is(.bg-success, .bg-primary, .bg-danger, .bg-dark, .bg-info, .text-white) {
    background: var(--wl-surface) !important;
    color: var(--wl-ink) !important;
    border-bottom: 1px solid var(--wl-border) !important;
    padding: 16px 20px !important;
}
body.skin-soft .modal .modal-title { color: var(--wl-ink) !important; font-size: 1.05rem !important; font-weight: 700 !important; }
body.skin-soft .modal .modal-title i { color: var(--wl-primary) !important; }
body.skin-soft .modal-header.bg-danger .modal-title { color: #9F1D1D !important; }
body.skin-soft .modal-header .btn-close { filter: none !important; opacity: .6; }
body.skin-soft .modal-body { color: var(--wl-ink); }
body.skin-soft .modal-footer { background: var(--wl-surface) !important; border-top: 1px solid var(--wl-border) !important; }

/* ---- Filter bottom sheets: skin's .filter-section overflow:hidden clipped the count badges;
   cleanlab .btn-outline-primary quick actions ---- */
body.skin-soft .bottom-sheet .filter-section { overflow: visible !important; padding: 12px 14px !important; box-shadow: none !important; }
body.skin-soft .bottom-sheet .filter-count-badge, body.skin-soft .bottom-sheet .device-count-info { flex-shrink: 0; font-size: 11px !important; padding: 2px 8px !important; border-radius: 999px !important; background: var(--wl-bg) !important; color: var(--wl-ink-2) !important; }
body.skin-soft .bottom-sheet .filter-count-badge.has-selection { background: var(--wl-primary) !important; color: #fff !important; }
body.skin-soft .bottom-sheet .quick-actions .btn { white-space: nowrap; border-radius: 999px !important; font-size: 12px !important; padding: 2px 10px !important; }
body.skin-soft .bottom-sheet .quick-actions .btn-outline-secondary { border-color: var(--wl-border) !important; color: var(--wl-ink-2) !important; }
body.skin-soft .bottom-sheet-header h6 { color: var(--wl-ink) !important; font-weight: 700 !important; }

/* ---- DataTables 2 (.dt-*) and legacy pager: platform only styled .dataTables_* ---- */
body.skin-soft .dt-container :is(.dt-length, .dt-search, .dt-info) { font-size: 13px !important; color: var(--wl-ink-2) !important; padding: 10px 16px !important; }
body.skin-soft .dt-container :is(.dt-length select, .dt-search input) { font-size: 13px !important; padding: 5px 10px !important; border: 1px solid var(--wl-border) !important; border-radius: var(--wl-radius-sm) !important; background: var(--wl-surface) !important; color: var(--wl-ink) !important; }
body.skin-soft .dt-container .dt-search input { min-width: 220px; }
body.skin-soft .dt-container .dt-paging { padding: 8px 16px !important; }
body.skin-soft :is(.dt-paging .page-link, .pagination .page-link, .paginate_button) { font-size: 13px !important; color: var(--wl-ink-2) !important; background: var(--wl-surface) !important; border: 1px solid var(--wl-border) !important; min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px !important; margin: 0 2px; }
body.skin-soft :is(.dt-paging .page-item.disabled .page-link, .pagination .page-item.disabled .page-link, .paginate_button.disabled) { color: #8E99A8 !important; background: var(--wl-bg) !important; opacity: 1 !important; }
body.skin-soft :is(.dt-paging .page-item.active .page-link, .pagination .page-item.active .page-link, .paginate_button.current) { background: var(--wl-primary) !important; border-color: var(--wl-primary) !important; color: #fff !important; }
/* cashbox-logs ships its own <colgroup>; DataTables 2 adds a second one → table drawn half-width */
body.skin-soft #cashboxLogsTable > colgroup:not(:last-of-type) { display: none; }
body.skin-soft #cashboxLogsTable { table-layout: auto !important; width: 100% !important; }
/* tables inside overflow:hidden cards must still scroll sideways */
body.skin-soft :is(.card, .data-terminal, .sysadmin-table) .table-responsive,
body.skin-soft #users-table.table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* ---- Phone width ---- */
@media (max-width: 767.98px) {
    /* logs-titanium forces nowrap+ellipsis on the title next to the code badge */
    body.skin-soft .logs-header-left { flex-wrap: wrap !important; gap: 8px !important; }
    body.skin-soft .logs-header-left .logs-title-group { flex: 1 1 100% !important; min-width: 0; }
    body.skin-soft .logs-header-left > .ms-3 { flex: 0 0 100%; margin-left: 0 !important; order: 3; }
    body.skin-soft :is(.logs-title, .logs-subtitle) { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; }
    body.skin-soft .logs-title { line-height: 1.25; }
    body.skin-soft .logs-header-actions { width: 100%; justify-content: flex-end; margin-top: 4px; }
    body.skin-soft .logs-header-actions > * { height: 38px; border-radius: 999px !important; }
    body.skin-soft .logs-header-actions .btn-group .btn { border-radius: 0 !important; }
    body.skin-soft .logs-header-actions .btn-group .btn:first-child { border-radius: 999px 0 0 999px !important; }
    body.skin-soft .logs-header-actions .btn-group .btn:last-child { border-radius: 0 999px 999px 0 !important; }
    body.skin-soft .logs-header-actions :is(.btn, .btn-titanium, .btn-titanium-primary) { padding: 0 14px !important; width: auto !important; }
    body.skin-soft .logs-header-actions :is(.btn, .btn-titanium) span.d-none,
    body.skin-soft #mediaUploadBtn > span.d-none { display: inline !important; }
    /* device-card-titanium: 2-col grid made the View button a tall navy slab */
    body.skin-soft .device-card-titanium { display: block !important; }
    body.skin-soft .device-card-titanium .card-footer-titanium { flex-direction: row !important; border-left: 0 !important; border-top: 1px solid var(--wl-border) !important; padding: 8px 10px !important; justify-content: flex-end !important; gap: 8px !important; }
    body.skin-soft .device-card-titanium .btn-titanium-primary { padding: 7px 14px !important; font-size: 12px !important; border-radius: 999px !important; height: auto !important; }
    body.skin-soft .device-card-titanium .btn-titanium-primary span { display: inline !important; }
    /* list-recipe .stack-table data-labels, hidden chip scroller, dense tables */
    body.skin-soft .stack-table td::before { color: var(--wl-ink-2) !important; font-size: 12px !important; font-weight: 600 !important; }
    body.skin-soft .stack-table tr { padding: .5rem 0 !important; }
    body.skin-soft .list-chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 28px; }
    body.skin-soft :is(.data-terminal .table, .table-tech) :is(td, th) { white-space: nowrap; font-size: 12px; padding: 6px 8px; }
    body.skin-soft .summary-card-header { min-height: 0; }
}

/* ============================================
   Round-2 fixes (2026-11-04): regressions from the audit pass, then the
   remaining per-page defects. Rules here out-specify the earlier groups on
   purpose (:not(#_) adds an id weight where an :is() list above outranks us).
   ============================================ */

/* ---- Regressions ---- */
/* Sidebar footer ("BUILD:v1.0.0", "ONLINE"): the global muted/.font-tech rules
   above reached into .sidebar; keep them readable in the soft sidebar and let
   skin-bold recolour them on its navy sidebar. */
body.skin-soft .sidebar .sidebar-footer :is(.text-muted, .font-tech, .d-flex > span.font-tech.text-muted) {
    color: var(--wl-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}
/* Gradient heroes keep their white labels */
body.skin-soft :is(.org-wallet-hero, .wallet-balance-card) .wb-label:not(#_) {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 12.5px !important;
}
/* Helper notes stay a note, never a pill (skin-bold sets --wl-radius-sm to 999px) */
body.skin-soft .inline-note { border-radius: 10px !important; }
/* #slotConfigModal at phone width: mobile-bottom-sheet zeroes .form-check padding,
   Bootstrap's -2.5em switch margin then clips the toggle off the left edge */
@media (max-width: 767.98px) {
    body.skin-soft .modal .form-check.form-switch { padding-left: 2.5em !important; min-height: 0; }
    body.skin-soft .modal .form-check.form-switch .form-check-input {
        margin-left: -2.5em !important;
        margin-right: 0.5rem !important;
        width: 2em;
        height: 1em;
        flex: 0 0 auto;
    }
}

/* ---- /media opt-in: switch next to the text at phone width; KPI icon tint ---- */
@media (max-width: 575.98px) {
    body.skin-soft .media-optin { flex-wrap: nowrap !important; align-items: flex-start !important; gap: 12px !important; }
    body.skin-soft .media-optin__text { flex: 1 1 auto !important; min-width: 0; }
}
body.skin-soft .summary-card-tech .summary-icon-tech { background: var(--wl-primary-soft) !important; color: var(--wl-primary) !important; box-shadow: none !important; }
body.skin-soft .summary-card-tech .summary-icon-tech i { color: inherit !important; }

/* ---- /promo list deck label on its own row at phone width ---- */
@media (max-width: 767.98px) {
    body.skin-soft .list-chips-row > .list-deck-label { flex: 0 0 100%; white-space: nowrap; margin-bottom: 4px; }
}

/* ---- /settings/payment provider count pills: dark text on a quiet tint ---- */
body.skin-soft :is(.stat-card, .stat-module) .d-flex.flex-wrap > .badge[style] {
    background: var(--wl-bg) !important;
    background-color: var(--wl-bg) !important;
    color: var(--wl-ink-2) !important;
    border: 1px solid var(--wl-border) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
}
body.skin-soft :is(.stat-card, .stat-module) .d-flex.flex-wrap > .badge[style*="#10b981"] { color: #15803D !important; }
body.skin-soft :is(.stat-card, .stat-module) .d-flex.flex-wrap > .badge[style*="#f59e0b"] { color: #B45309 !important; }
body.skin-soft :is(.stat-card, .stat-module) .d-flex.flex-wrap > .badge[style*="#d82d8b"] { color: #A61F5D !important; }
body.skin-soft :is(.stat-card, .stat-module) .d-flex.flex-wrap > .badge[style*="#005baa"] { color: var(--wl-primary) !important; }

/* ---- Leaflet attribution: light strip, readable ---- */
body.skin-soft .leaflet-control-attribution { background: rgba(255, 255, 255, 0.9) !important; color: var(--wl-muted) !important; font-size: 10px; }
body.skin-soft .leaflet-control-attribution a { color: var(--wl-primary) !important; }

/* ---- Empty-state cell inside a sideways-scrolling table: keep it on screen ---- */
@media (max-width: 767.98px) {
    body.skin-soft .table-responsive td[colspan] { text-align: left !important; }
    body.skin-soft .table-responsive td[colspan] > * { position: sticky; left: 16px; display: inline-block; max-width: calc(100vw - 96px); text-align: center; }
}

/* ---- Tabs scroll instead of wrapping on phones ---- */
@media (max-width: 767.98px) {
    body.skin-soft .nav-tabs { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
    body.skin-soft .nav-tabs::-webkit-scrollbar { display: none; }
    body.skin-soft .nav-tabs .nav-link { white-space: nowrap; }
}

/* ---- /settings/wallet danger balance: white card with a red accent, not a red slab ---- */
body.skin-soft .wallet-balance-card.is-danger {
    background: #fff !important;
    color: var(--wl-ink) !important;
    border: 1px solid #FECACA !important;
    box-shadow: inset 4px 0 0 #B91C1C, 0 1px 2px rgba(16, 24, 40, 0.06) !important;
}
body.skin-soft .wallet-balance-card.is-danger::after { display: none !important; }
body.skin-soft .wallet-balance-card.is-danger .wb-label:not(#_) { color: var(--wl-muted) !important; }
body.skin-soft .wallet-balance-card.is-danger :is(.wb-currency, .wb-amount) { color: #B91C1C !important; opacity: 1 !important; }
body.skin-soft .wallet-balance-card.is-danger :is(.wb-urgency, .wb-alert) { background: #FEF2F2 !important; color: #7F1D1D !important; border: 1px solid #FECACA !important; }
body.skin-soft .wallet-balance-card.is-danger :is(.wb-urgency, .wb-alert) * { color: #7F1D1D !important; }
body.skin-soft .wallet-balance-card.is-danger .wb-cta { background: #B91C1C !important; color: #fff !important; box-shadow: none !important; }
body.skin-soft .wallet-balance-card.is-danger .wb-refresh { background: #fff !important; color: #B91C1C !important; border: 1px solid #FECACA !important; }

/* ---- Icon-only filter buttons keep their width at phone width ---- */
@media (max-width: 767.98px) {
    body.skin-soft form .btn:has(> i.bi:only-child) { width: auto !important; flex: 0 0 auto !important; min-width: 44px; }
}

/* ---- Empty breakdown bars: no grey pill around "No data" ---- */
body.skin-soft :where(.breakdown-bar, #paymentBreakdownBar, .payment-breakdown-bar) { background: var(--wl-border) !important; border-radius: 999px !important; }
body.skin-soft .breakdown-bar:has(> .text-muted),
body.skin-soft .breakdown-bar:empty,
body.skin-soft [id$="BreakdownBar"]:has(> .text-muted) { background: transparent !important; height: auto !important; border-radius: 0 !important; }
body.skin-soft .breakdown-bar > .text-muted.small,
body.skin-soft [id$="BreakdownBar"] > .text-muted { font-size: 13px !important; color: var(--wl-muted) !important; padding: 4px 0; }

/* ---- DataTables pager: no underline, disabled arrows at AA ---- */
body.skin-soft :is(.dt-paging .page-link, .pagination .page-link, .paginate_button) { text-decoration: none !important; }
body.skin-soft :is(.dt-paging .page-item.disabled .page-link, .pagination .page-item.disabled .page-link, .paginate_button.disabled) {
    color: #6B7280 !important;
    background: #fff !important;
    border-color: var(--wl-border) !important;
    opacity: 1 !important;
}
body.skin-soft .dt-paging .ellipsis { color: var(--wl-ink-2) !important; }
@media (max-width: 767.98px) {
    body.skin-soft table.dataTable thead :is(th, td):is(.dt-orderable-asc, .dt-orderable-desc) { padding-right: 26px !important; white-space: nowrap; }
    body.skin-soft table.dataTable thead span.dt-column-order { right: 8px !important; }
    body.skin-soft .dt-container .dt-layout-row:first-child { display: flex !important; flex-wrap: nowrap; gap: 8px; padding: 8px 12px; }
    body.skin-soft .dt-container :is(.dt-length, .dt-search) { display: flex !important; align-items: center; gap: 6px; height: auto !important; margin: 0 !important; padding: 0 !important; }
    body.skin-soft .dt-container .dt-search { flex: 1; }
    body.skin-soft .dt-container .dt-search input { width: 100% !important; min-width: 0 !important; height: 36px !important; }
    body.skin-soft .dt-container .dt-length select { height: 36px !important; }
}

/* ---- /revenue-report quick links: cards, not underlined links ---- */
body.skin-soft a.quick-link-btn, body.skin-soft a.quick-link-btn * { text-decoration: none !important; }
body.skin-soft a.quick-link-btn {
    color: var(--wl-ink) !important;
    border: 1px solid var(--wl-border) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
body.skin-soft a.quick-link-btn > div > div:last-child { color: var(--wl-muted) !important; font-size: 12px !important; }
body.skin-soft a.quick-link-btn:hover { background: var(--wl-bg) !important; }

/* ---- Filter bottom sheets: one chip size, selected date as a pill, quick filters as tinted pills ---- */
body.skin-soft .bottom-sheet :is(.date-preset, .credit-date-preset, .cashbox-date-preset, .credit-action-chip, .payment-chip) {
    font-size: 12px !important;
    padding: 6px 12px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 32px;
}
body.skin-soft .bottom-sheet .date-presets { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
body.skin-soft .bottom-sheet .selected-date-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--wl-primary);
    background: var(--wl-primary-soft);
    border: 1px solid var(--wl-primary);
    border-radius: 999px;
    padding: 4px 10px;
    margin-top: 6px;
}
body.skin-soft .bottom-sheet .selected-date-display i { font-size: 12px; }
body.skin-soft .bottom-sheet .btn-link { text-decoration: none !important; font-size: 12px !important; font-weight: 600 !important; padding: 4px 10px !important; border-radius: 999px !important; }
body.skin-soft .bottom-sheet .btn-link.text-success { background: #E7F8EF; color: #15803D !important; }
body.skin-soft .bottom-sheet .btn-link.text-danger { background: #FDECEC; color: #B91C1C !important; }

/* ---- KPI "top device" id: smaller money font, breathing room at the edge ---- */
body.skin-soft .summary-card-body .summary-value.text-truncate { font-size: clamp(16px, 1.4vw, 22px) !important; padding-right: 8px; }

/* ---- Device detail: info rows, empty panels, inline code, duplicate code labels, header chip ---- */
body.skin-soft .info-row-label { color: var(--wl-ink-2) !important; font-size: 12.5px !important; font-weight: 600 !important; }
body.skin-soft .panel-empty-text { color: var(--wl-ink-2) !important; font-weight: 600 !important; }
body.skin-soft .modal code { color: var(--wl-ink-2) !important; background: var(--wl-bg); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
body.skin-soft .slot-config-header .code { display: none !important; }
body.skin-soft .data-terminal-header .font-tech:not(.data-terminal-title):not(.badge):not(.data-terminal-meta) { display: none !important; }
body.skin-soft .device-card-titanium::before { content: none !important; display: none !important; width: 0 !important; }
body.skin-soft .status-code { font-size: 11px !important; letter-spacing: .02em !important; padding: 3px 10px !important; }
body.skin-soft .modal-footer .btn-warning { background: #F59E0B !important; border-color: #F59E0B !important; color: #1F1B24 !important; }

/* ---- Dashboard recent-gateway table at phone width: scroll inside the card with a fade hint ---- */
@media (max-width: 767.98px) {
    body.skin-soft .data-terminal .table-responsive {
        overflow-x: auto !important;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    }
    body.skin-soft .data-terminal .table :is(td, th) { padding: 6px 6px; font-size: 11.5px; }
}

/* ---------- Navbar: calm SaaS header (owner review) ----------
   no centre clock / status string, hairline border + faint shadow, logo with
   breathing room, utilities as quiet icon buttons, user as a two-line card. */
body.skin-soft .navbar { border-bottom: 1px solid #EEF2F6 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important; }
body.skin-soft .navbar > .container-fluid > .d-none.d-md-flex { display: none !important; }
body.skin-soft .navbar-brand { padding: 10px 0 !important; }
body.skin-soft .navbar-logo { height: 34px !important; }
body.skin-soft .navbar .nav-org-label { display: none !important; }
body.skin-soft .navbar .nav-link:not(#userDropdown):not(#navMobileToggle) { width: 36px; height: 36px; border-radius: 999px; display: inline-flex !important; align-items: center; justify-content: center; }
body.skin-soft .navbar .nav-link:not(#userDropdown):not(#navMobileToggle):hover { background: var(--wl-bg) !important; }
body.skin-soft .navbar .nav-link.dropdown-toggle::after { display: none; }
body.skin-soft #langDropdown { width: auto !important; padding: 0 10px !important; gap: 4px !important; }
body.skin-soft #userDropdown { gap: 8px !important; padding: 3px 12px 3px 4px !important; height: 40px; border-radius: 999px; border: 1px solid var(--wl-border) !important; }
body.skin-soft #userDropdown > span:not(.nav-user-card) { display: none !important; }
body.skin-soft #userDropdown .nav-user-card { flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
body.skin-soft #userDropdown .nav-user-card strong { font-size: 13px; color: var(--wl-ink) !important; font-weight: 700; }
body.skin-soft #userDropdown .nav-user-card small { font-size: 11px; color: var(--wl-muted) !important; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.skin-soft #userDropdown .bi-person-circle { font-size: 1.6rem !important; color: var(--wl-primary) !important; }