/* QT Vending (Điện lạnh Quang Thái) palette for the soft+bold skins.
   The logo is loud (red, sky blue, yellow); the UI stays calm: deep navy
   chrome for sidebar/active states, the logo red only as a small accent,
   no yellow — a red sidebar with yellow badges was rejected as garish. */
:root {
    --wl-primary: #163B6B;        /* navy — 9.8:1 on white */
    --wl-primary-rgb: 22 59 107;
    --wl-primary-hover: #0F2A4E;
    --wl-primary-soft: #E9EFF7;
    --wl-secondary: #0A8FD1;      /* logo sky blue, darkened for fills/icons */
    --wl-secondary-rgb: 10 143 209;
    --wl-accent: #D42A28;         /* logo red, as a thin accent only */
    --wl-accent-rgb: 212 42 40;
    --wl-accent-soft: #FBECEB;
    --wl-bg: #F5F7FA;             /* cool grey instead of bold's warm cream */
    --wl-border: #E4E9F0;
}

/* The Quang Thái logo is nearly square: give it more height than the skin's default. */
body.skin-soft:not(.skin-bold) .navbar-logo { height: 48px; }
body.skin-soft .login-header .login-logo-img { width: 180px; height: 98px; }

/* Red only as a small mark: page badge text and the active item's edge */
body.skin-bold .logs-header-titanium .logs-code-badge {
    background: var(--wl-accent-soft) !important;
    color: var(--wl-accent) !important;
    box-shadow: none !important;
}
body.skin-bold .logs-header-titanium .logs-code-badge * { color: var(--wl-accent) !important; }
body.skin-bold .navbar { border-image: linear-gradient(90deg, var(--wl-primary) 0 250px, var(--wl-secondary) 250px 100%) 1 !important; }
body.skin-bold .summary-icon-tech { background: var(--wl-secondary) !important; box-shadow: 0 6px 14px rgb(var(--wl-secondary-rgb) / 0.3) !important; }
body.skin-bold .device-card-titanium { box-shadow: inset 0 4px 0 var(--wl-secondary), var(--wl-shadow) !important; }
body.skin-bold .sidebar .nav-link.active { box-shadow: inset 3px 0 0 var(--wl-accent) !important; }
body.skin-bold .sidebar .nav-link.active i { color: #fff !important; }