/* WCSAM Dashboard UI Upgrade 2.2.0 */
:root {
    --wcsam-accent: #4f46e5;
    --wcsam-accent-rgb: 79 70 229;
    --wcsam-accent-hover: #3d35d3;
    --wcsam-bg: #f5f7fb;
    --wcsam-surface: #ffffff;
    --wcsam-surface-soft: #f8fafc;
    --wcsam-text: #111827;
    --wcsam-muted: #64748b;
    --wcsam-border: #e2e8f0;
    --wcsam-shadow: 0 18px 50px rgb(15 23 42 / .08);
    --wcsam-radius: 20px;
}

:root[data-theme="dark"] {
    --wcsam-bg: #080e1a;
    --wcsam-surface: #111827;
    --wcsam-surface-soft: #172033;
    --wcsam-text: #f8fafc;
    --wcsam-muted: #9aa9bf;
    --wcsam-border: #26334a;
    --wcsam-shadow: 0 22px 56px rgb(0 0 0 / .32);
}

body {
    background:
        radial-gradient(circle at 12% 8%, rgb(var(--wcsam-accent-rgb) / .10), transparent 30rem),
        var(--wcsam-bg);
    color: var(--wcsam-text);
    transition: background-color .2s ease, color .2s ease;
}

.btn-primary {
    --bs-btn-bg: var(--wcsam-accent);
    --bs-btn-border-color: var(--wcsam-accent);
    --bs-btn-hover-bg: var(--wcsam-accent-hover);
    --bs-btn-hover-border-color: var(--wcsam-accent-hover);
    --bs-btn-active-bg: var(--wcsam-accent-hover);
    --bs-btn-active-border-color: var(--wcsam-accent-hover);
    --bs-btn-disabled-bg: var(--wcsam-accent);
    --bs-btn-disabled-border-color: var(--wcsam-accent);
}

.text-primary { color: var(--wcsam-accent) !important; }
.bg-primary-subtle { background: rgb(var(--wcsam-accent-rgb) / .12) !important; }

.panel-card,
.stat-card,
.login-card {
    color: var(--wcsam-text);
    background: var(--wcsam-surface);
    background: color-mix(in srgb, var(--wcsam-surface) 94%, transparent);
    border: 1px solid var(--wcsam-border) !important;
    border-radius: var(--wcsam-radius);
    box-shadow: var(--wcsam-shadow);
    backdrop-filter: blur(14px);
}

.panel-card,
.stat-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.panel-card:hover,
.stat-card:hover {
    border-color: rgb(var(--wcsam-accent-rgb) / .28) !important;
    box-shadow: 0 22px 60px rgb(15 23 42 / .11);
}

:root[data-theme="dark"] .text-secondary,
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .panel-heading p,
:root[data-theme="dark"] .topbar p,
:root[data-theme="dark"] .login-help {
    color: var(--wcsam-muted) !important;
}

:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text,
:root[data-theme="dark"] .btn-light,
:root[data-theme="dark"] .btn-outline-secondary {
    color: var(--wcsam-text);
    background-color: var(--wcsam-surface-soft);
    border-color: var(--wcsam-border);
}

.form-control:focus,
.form-select:focus {
    border-color: rgb(var(--wcsam-accent-rgb) / .72);
    box-shadow: 0 0 0 .22rem rgb(var(--wcsam-accent-rgb) / .14);
}

.login-screen {
    background:
        radial-gradient(circle at 85% 16%, rgb(var(--wcsam-accent-rgb) / .22), transparent 28rem),
        radial-gradient(circle at 10% 88%, rgb(14 165 233 / .13), transparent 30rem),
        linear-gradient(145deg, #071225, #111827 56%, #0f172a);
}

.login-brand-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / .12);
    border-radius: 28px;
    background: linear-gradient(145deg, rgb(255 255 255 / .11), rgb(255 255 255 / .04));
    box-shadow: 0 28px 80px rgb(0 0 0 / .25);
    backdrop-filter: blur(18px);
}

.login-brand-panel::after {
    content: "";
    position: absolute;
    width: 16rem;
    height: 16rem;
    left: -6rem;
    bottom: -8rem;
    border-radius: 50%;
    background: rgb(var(--wcsam-accent-rgb) / .28);
    filter: blur(12px);
}

.login-server-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .65rem;
    min-height: 48px;
    margin-bottom: 1.1rem;
    padding: .72rem .8rem;
    border: 1px solid;
    border-radius: 14px;
    font-size: .9rem;
    transition: background-color .2s ease, border-color .2s ease;
}

.server-status-dot {
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    box-shadow: 0 0 0 .32rem currentColor;
}

.login-server-status.is-checking {
    color: #b77900;
    background: #fffbeb;
    border-color: #fde68a;
}

.login-server-status.is-checking .server-status-dot { animation: server-pulse 1.15s ease-in-out infinite; }
.login-server-status.is-connected { color: #08783f; background: #ecfdf5; border-color: #a7f3d0; }
.login-server-status.is-disconnected { color: #b42318; background: #fff1f2; border-color: #fecdd3; }

:root[data-theme="dark"] .login-server-status.is-checking { color: #fbbf24; background: rgb(120 53 15 / .25); border-color: rgb(251 191 36 / .28); }
:root[data-theme="dark"] .login-server-status.is-connected { color: #34d399; background: rgb(6 78 59 / .28); border-color: rgb(52 211 153 / .26); }
:root[data-theme="dark"] .login-server-status.is-disconnected { color: #fb7185; background: rgb(127 29 29 / .28); border-color: rgb(251 113 133 / .27); }

.server-status-text { min-width: 0; font-weight: 700; }
.server-status-latency { direction: ltr; font-size: .76rem; opacity: .8; font-variant-numeric: tabular-nums; }
.login-connection-hint { color: var(--wcsam-muted); font-size: .78rem; text-align: center; }

#loginCredentialsFieldset { min-width: 0; }
#loginCredentialsFieldset:disabled { opacity: .68; }
#loginCredentialsFieldset:disabled .input-group { filter: grayscale(.15); }

@keyframes server-pulse {
    0%, 100% { opacity: .55; transform: scale(.86); }
    50% { opacity: 1; transform: scale(1); }
}

.sidebar {
    background: linear-gradient(180deg, #111827, #0b1220 70%);
    border-inline-start: 1px solid rgb(255 255 255 / .06);
}

.sidebar-nav .nav-item.active,
.sidebar-nav .nav-item:hover {
    background: linear-gradient(90deg, rgb(var(--wcsam-accent-rgb) / .28), rgb(var(--wcsam-accent-rgb) / .08));
    box-shadow: inset -3px 0 var(--wcsam-accent);
}

.topbar {
    background: var(--wcsam-surface);
    background: color-mix(in srgb, var(--wcsam-surface) 88%, transparent);
    border-bottom: 1px solid var(--wcsam-border);
    backdrop-filter: blur(18px);
}

.connection-state {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .48rem .72rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}
.connection-state.is-connected { color: #08783f; background: #dcfce7; }
.connection-state.is-checking { color: #a16207; background: #fef3c7; }
.connection-state.is-disconnected { color: #b42318; background: #ffe4e6; }
.connection-state i { font-size: .58rem; }

:root[data-theme="dark"] .connection-state.is-connected { color: #6ee7b7; background: rgb(6 78 59 / .38); }
:root[data-theme="dark"] .connection-state.is-checking { color: #fcd34d; background: rgb(120 53 15 / .35); }
:root[data-theme="dark"] .connection-state.is-disconnected { color: #fda4af; background: rgb(127 29 29 / .38); }

/* Product selection and cart */
.selectable-product {
    position: relative;
    cursor: pointer;
    outline: none;
    border: 1px solid var(--wcsam-border) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.selectable-product:hover,
.selectable-product:focus-visible {
    transform: translateY(-3px);
    border-color: rgb(var(--wcsam-accent-rgb) / .55) !important;
    box-shadow: 0 18px 42px rgb(var(--wcsam-accent-rgb) / .15);
}

.selectable-product.is-selected {
    border-color: var(--wcsam-accent) !important;
    box-shadow: 0 0 0 3px rgb(var(--wcsam-accent-rgb) / .13), 0 18px 42px rgb(var(--wcsam-accent-rgb) / .16);
}

.selectable-product.is-selected::before {
    content: "✓";
    position: absolute;
    top: .7rem;
    left: .7rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    color: #fff;
    background: var(--wcsam-accent);
    border-radius: 50%;
    font-weight: 900;
}

.product-click-hint {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .85rem;
    padding: .4rem .62rem;
    color: var(--wcsam-accent);
    background: rgb(var(--wcsam-accent-rgb) / .09);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    pointer-events: none;
}

.purchase-cart {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
    padding: .85rem;
    border: 1px solid rgb(var(--wcsam-accent-rgb) / .26);
    border-radius: 15px;
    background: linear-gradient(135deg, rgb(var(--wcsam-accent-rgb) / .10), rgb(var(--wcsam-accent-rgb) / .03));
}

.purchase-cart.is-empty { opacity: .68; border-style: dashed; }
.purchase-cart-icon { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; color: var(--wcsam-accent); background: rgb(var(--wcsam-accent-rgb) / .13); border-radius: 12px; font-size: 1.15rem; }
.purchase-cart-copy { display: grid; min-width: 0; gap: .12rem; }
.purchase-cart-copy span,
.purchase-cart-copy small { color: var(--wcsam-muted); font-size: .74rem; }
.purchase-cart-copy strong { overflow-wrap: anywhere; font-size: .88rem; }
.purchase-cart-total { color: var(--wcsam-accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Settings */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.settings-card { min-height: 230px; }
.segmented-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
    padding: .4rem;
    background: var(--wcsam-surface-soft);
    border: 1px solid var(--wcsam-border);
    border-radius: 15px;
}
.segmented-control button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 46px;
    color: var(--wcsam-muted);
    background: transparent;
    border: 0;
    border-radius: 11px;
    font-weight: 700;
}
.segmented-control button.active {
    color: #fff;
    background: var(--wcsam-accent);
    box-shadow: 0 8px 20px rgb(var(--wcsam-accent-rgb) / .24);
}

.accent-palette {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
}
.accent-palette > button,
.custom-accent {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 3px solid var(--wcsam-surface);
    border-radius: 50%;
    background: var(--swatch, var(--wcsam-accent));
    box-shadow: 0 0 0 1px var(--wcsam-border);
    cursor: pointer;
}
.accent-palette > button.active::after {
    content: "✓";
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
    text-shadow: 0 1px 5px rgb(0 0 0 / .4);
}
.custom-accent { color: var(--wcsam-text); background: conic-gradient(red, #ff0, lime, cyan, blue, magenta, red); overflow: hidden; }
.custom-accent::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--wcsam-surface); }
.custom-accent i { position: relative; z-index: 1; }
.custom-accent input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.setting-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: var(--wcsam-surface-soft);
    border: 1px solid var(--wcsam-border);
    border-radius: 15px;
}
.setting-switch-row > div { display: grid; gap: .2rem; }
.setting-switch-row span { color: var(--wcsam-muted); font-size: .78rem; }
.modern-switch { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.modern-switch input { position: absolute; opacity: 0; pointer-events: none; }
.modern-switch > span { position: relative; width: 3.1rem; height: 1.7rem; background: #cbd5e1; border-radius: 999px; transition: .2s ease; }
.modern-switch > span::after { content: ""; position: absolute; top: .2rem; right: .2rem; width: 1.3rem; height: 1.3rem; background: #fff; border-radius: 50%; box-shadow: 0 2px 7px rgb(15 23 42 / .25); transition: transform .2s ease; }
.modern-switch input:checked + span { background: var(--wcsam-accent); }
.modern-switch input:checked + span::after { transform: translateX(-1.4rem); }
.modern-switch em { color: var(--wcsam-muted); font-size: .76rem; font-style: normal; white-space: nowrap; }

.settings-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    padding: 1rem;
    background: var(--wcsam-surface-soft);
    border: 1px solid var(--wcsam-border);
    border-radius: 15px;
}
.preview-stat { display: grid; margin-inline-end: auto; }
.preview-stat span { color: var(--wcsam-muted); font-size: .72rem; }
.preview-stat strong { font-size: 1.25rem; }
.status-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .62rem; border-radius: 999px; font-size: .75rem; font-weight: 800; }
.status-pill.success { color: #08783f; background: #dcfce7; }

.upgrade-toast {
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: min(380px, calc(100vw - 2rem));
    margin-top: .55rem;
    padding: .85rem 1rem;
    color: var(--wcsam-text);
    background: var(--wcsam-surface);
    border: 1px solid var(--wcsam-border);
    border-radius: 14px;
    box-shadow: var(--wcsam-shadow);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
}
.upgrade-toast i { color: #16a34a; }
.upgrade-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 991.98px) {
    .settings-grid { grid-template-columns: minmax(0, 1fr); }
    .settings-card { min-height: 0; }
}

@media (max-width: 575.98px) {
    .login-server-status { grid-template-columns: auto minmax(0, 1fr) auto; }
    .login-server-status #retryConnectionButton { grid-column: 1 / -1; width: 100%; }
    .server-status-latency { grid-column: 3; }
    .purchase-cart { grid-template-columns: auto minmax(0, 1fr); }
    .purchase-cart-total { grid-column: 1 / -1; padding-top: .5rem; border-top: 1px solid var(--wcsam-border); text-align: center; }
    .segmented-control { grid-template-columns: minmax(0, 1fr); }
    .setting-switch-row { align-items: flex-start; flex-direction: column; }
    .modern-switch { width: 100%; justify-content: space-between; }
    .settings-preview { align-items: stretch; flex-direction: column; }
    .preview-stat { margin-inline-end: 0; }
    .settings-preview .btn,
    .settings-preview .status-pill { justify-content: center; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .login-server-status.is-checking .server-status-dot { animation: none; }
}