:root {
--ts-primary: #3b82f6;
--ts-primary-rgb: 59, 130, 246;
--ts-primary-light: #60a5fa;
--ts-primary-dark: #2563eb;
--ts-accent: #22d3ee;
--ts-accent-rgb: 34, 211, 238;
--ts-purple: #8b5cf6;
--ts-purple-rgb: 139, 92, 246;
--ts-pink: #ec4899;
--ts-pink-rgb: 236, 72, 153;
--ts-success: #10b981;
--ts-success-rgb: 16, 185, 129;
--ts-warning: #f59e0b;
--ts-warning-rgb: 245, 158, 11;
--ts-danger: #ef4444;
--ts-danger-rgb: 239, 68, 68;
--ts-info: #06b6d4;
--ts-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--ts-radius-sm: 8px;
--ts-radius-md: 12px;
--ts-radius-lg: 16px;
--ts-radius-xl: 24px;
--ts-radius-full: 9999px;
--ts-sidebar-width: 280px;
--ts-header-height: 72px;
--ts-ease: cubic-bezier(0.4, 0, 0.2, 1);
--ts-duration: 200ms;
--ts-duration-slow: 400ms;
}
[data-bs-theme="dark"] {
--ts-bg-base: #0f172a;
--ts-bg-surface: #1e293b;
--ts-surface-rgb: 30, 41, 59;
--ts-glass-bg: rgba(30, 41, 59, 0.75);
--ts-bg-elevated: #334155;
--ts-bg-hover: #475569;
--ts-text-primary: #f8fafc;
--ts-text-secondary: #94a3b8;
--ts-text-muted: #64748b;
--ts-border: rgba(148, 163, 184, 0.1);
--ts-border-color: var(--ts-border);
--ts-border-hover: rgba(148, 163, 184, 0.2);
--ts-border-hover: rgba(148, 163, 184, 0.2);
--ts-border-active: rgba(59, 130, 246, 0.5);
--ts-glass-bg: rgba(15, 23, 42, 0.8);
--ts-glass-border: rgba(148, 163, 184, 0.08);
--ts-glass-blur: 20px;
--ts-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--ts-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
--ts-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
--ts-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
--ts-glow-primary: 0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2);
--ts-glow-accent: 0 0 20px rgba(34, 211, 238, 0.4), 0 0 40px rgba(34, 211, 238, 0.2);
--ts-glow-purple: 0 0 20px rgba(139, 92, 246, 0.4), 0 0 40px rgba(139, 92, 246, 0.2);
}
[data-theme="spotify-dark"][data-bs-theme="dark"] {
--ts-primary: #1DB954;
--ts-primary-rgb: 29, 185, 84;
--ts-primary-light: #1ed760;
--ts-primary-dark: #169c46;
--ts-accent: #1ed760;
--ts-accent-rgb: 30, 215, 96;
--ts-bg-base: #000000;
--ts-bg-surface: #121212;
--ts-surface-rgb: 18, 18, 18;
--ts-bg-elevated: #181818;
--ts-bg-hover: #282828;
--ts-text-primary: #ffffff;
--ts-text-secondary: #b3b3b3;
--ts-text-muted: #727272;
--ts-border: rgba(255, 255, 255, 0.06);
--ts-border-color: var(--ts-border);
--ts-border-hover: rgba(255, 255, 255, 0.12);
--ts-border-active: rgba(29, 185, 84, 0.5);
--ts-glass-bg: rgba(18, 18, 18, 0.85);
--ts-glass-border: rgba(255, 255, 255, 0.04);
--ts-glow-primary: 0 0 20px rgba(29, 185, 84, 0.4), 0 0 40px rgba(29, 185, 84, 0.2);
--ts-glow-accent: 0 0 20px rgba(30, 215, 96, 0.4), 0 0 40px rgba(30, 215, 96, 0.2);
--bs-primary: #1DB954;
--bs-primary-rgb: 29, 185, 84;
}
[data-theme="spotify-dark"][data-bs-theme="light"] {
--ts-primary: #169c46;
--ts-primary-rgb: 22, 156, 70;
--ts-primary-light: #1DB954;
--ts-primary-dark: #0e6e32;
--ts-accent: #169c46;
--ts-accent-rgb: 22, 156, 70;
--ts-border-active: rgba(22, 156, 70, 0.5);
--ts-glow-primary: 0 0 20px rgba(22, 156, 70, 0.15), 0 0 40px rgba(22, 156, 70, 0.08);
--ts-glow-accent: 0 0 20px rgba(22, 156, 70, 0.15), 0 0 40px rgba(22, 156, 70, 0.08);
--bs-primary: #169c46;
--bs-primary-rgb: 22, 156, 70;
}
[data-bs-theme="light"] {
--ts-primary: #2563eb;
--ts-primary-rgb: 37, 99, 235;
--ts-secondary: #0ea5e9;
--ts-secondary-rgb: 14, 165, 233;
--ts-accent: #0891b2;
--ts-accent-rgb: 8, 145, 178;
--ts-purple: #7c3aed;
--ts-purple-rgb: 124, 58, 237;
--ts-pink: #ec4899;
--ts-pink-rgb: 236, 72, 153;
--bs-primary: #2563eb;
--bs-primary-rgb: 37, 99, 235;
--ts-bg-body: #f8fafc;
--ts-bg-base: #f8fafc;
--ts-bg-surface: #ffffff;
--ts-surface-rgb: 255, 255, 255;
--ts-bg-elevated: #f1f5f9;
--ts-bg-hover: #e2e8f0;
--ts-glass-bg: rgba(255, 255, 255, 0.92);
--ts-glass-blur: 16px;
--ts-sidebar-bg: #ffffff;
--ts-navbar-bg: #ffffff;
--ts-footer-bg: #f8fafc;
--ts-card-bg: #ffffff;
--ts-text-primary: #0f172a;
--ts-text-secondary: #334155;
--ts-text-muted: #64748b;
--bs-body-color: #0f172a;
--bs-body-bg: #f8fafc;
--ts-border: rgba(148, 163, 184, 0.2);
--ts-border-color: var(--ts-border);
--ts-border-hover: rgba(148, 163, 184, 0.4);
--ts-border-active: rgba(37, 99, 235, 0.5);
--ts-glass-border: rgba(15, 23, 42, 0.08);
--ts-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--ts-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--ts-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--ts-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--ts-glow-primary: 0 0 20px rgba(37, 99, 235, 0.15), 0 0 40px rgba(37, 99, 235, 0.08);
--ts-glow-accent: 0 0 20px rgba(8, 145, 178, 0.15), 0 0 40px rgba(8, 145, 178, 0.08);
--ts-glow-purple: 0 0 20px rgba(124, 58, 237, 0.15), 0 0 40px rgba(124, 58, 237, 0.08);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body,
.ts-body {
font-family: var(--ts-font);
background: var(--ts-bg-base);
color: var(--ts-text-primary);
min-height: 100vh;
line-height: 1.6;
overflow-x: hidden;
}
.ts-bg-gradient {
position: fixed;
inset: 0;
z-index: -2;
background: var(--ts-bg-base);
overflow: hidden;
}
.ts-bg-gradient::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse 80% 50% at 20% -20%, rgba(var(--ts-primary-rgb), 0.15), transparent),
radial-gradient(ellipse 60% 40% at 80% 0%, rgba(var(--ts-purple-rgb), 0.12), transparent),
radial-gradient(ellipse 50% 50% at 0% 100%, rgba(var(--ts-accent-rgb), 0.08), transparent),
radial-gradient(ellipse 40% 40% at 100% 100%, rgba(var(--ts-pink-rgb), 0.06), transparent);
animation: meshGradient 20s ease-in-out infinite;
}
@keyframes meshGradient {
0%,
100% {
opacity: 1;
}
33% {
opacity: 0.8;
}
66% {
opacity: 0.9;
}
}
[data-bs-theme="light"] .ts-bg-gradient {
background: var(--ts-bg-body, #f8fafc);
}
[data-bs-theme="light"] .ts-bg-gradient::before {
display: none;
}
[data-bs-theme="light"] .ts-bg-noise {
display: none;
}
.ts-bg-noise {
position: fixed;
inset: 0;
z-index: -1;
opacity: 0.02;
background-image:
linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
background-size: 50px 50px;
pointer-events: none;
}
.ts-app-wrapper {
display: flex;
min-height: 100vh;
}
.ts-sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: var(--ts-sidebar-width);
background: var(--ts-sidebar-bg, var(--ts-glass-bg));
backdrop-filter: blur(var(--ts-glass-blur));
-webkit-backdrop-filter: blur(var(--ts-glass-blur));
border-right: 1px solid var(--ts-glass-border);
display: flex;
flex-direction: column;
z-index: 100;
transition: transform var(--ts-duration-slow) var(--ts-ease);
}
@media (max-width: 991.98px) {
.ts-sidebar {
transform: translateX(-100%);
box-shadow: var(--ts-shadow-xl);
}
.ts-sidebar.open {
transform: translateX(0);
}
}
.ts-sidebar-header {
padding: 24px;
border-bottom: 1px solid var(--ts-glass-border);
}
.ts-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--ts-text-primary);
}
.ts-logo-icon {
width: 44px;
height: 44px;
background: linear-gradient(135deg, var(--ts-primary), var(--ts-purple));
border-radius: var(--ts-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
box-shadow: var(--ts-glow-primary);
transition: transform var(--ts-duration) var(--ts-ease);
}
.ts-logo:hover .ts-logo-icon {
transform: scale(1.05);
}
.ts-logo-text {
font-weight: 700;
font-size: 1.25rem;
background: linear-gradient(135deg, var(--ts-text-primary), var(--ts-text-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ts-logo-badge {
font-size: 0.625rem;
font-weight: 600;
padding: 2px 6px;
background: linear-gradient(135deg, var(--ts-accent), var(--ts-primary));
border-radius: var(--ts-radius-full);
color: white;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ts-sidebar,
.ts-sidebar-nav {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
transition: scrollbar-color 0.3s ease;
}
.ts-sidebar:hover,
.ts-sidebar-nav:hover {
scrollbar-color: rgba(var(--ts-primary-rgb), 0.35) transparent;
}
.ts-sidebar::-webkit-scrollbar,
.ts-sidebar-nav::-webkit-scrollbar {
width: 5px;
}
.ts-sidebar::-webkit-scrollbar-track,
.ts-sidebar-nav::-webkit-scrollbar-track {
background: transparent;
}
.ts-sidebar::-webkit-scrollbar-thumb,
.ts-sidebar-nav::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 10px;
transition: background 0.3s ease;
}
.ts-sidebar:hover::-webkit-scrollbar-thumb,
.ts-sidebar-nav:hover::-webkit-scrollbar-thumb {
background: rgba(var(--ts-primary-rgb), 0.3);
}
.ts-sidebar:hover::-webkit-scrollbar-thumb:hover,
.ts-sidebar-nav:hover::-webkit-scrollbar-thumb:hover {
background: rgba(var(--ts-primary-rgb), 0.55);
}
.ts-sidebar:hover::-webkit-scrollbar-thumb:active,
.ts-sidebar-nav:hover::-webkit-scrollbar-thumb:active {
background: rgba(var(--ts-primary-rgb), 0.7);
}
.ts-sidebar-nav {
flex: 1;
padding: 16px;
overflow-y: auto;
}
.ts-nav-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.ts-nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--ts-radius-md);
color: var(--ts-text-secondary);
text-decoration: none;
font-weight: 500;
font-size: 0.9375rem;
transition: all var(--ts-duration) var(--ts-ease);
position: relative;
overflow: hidden;
}
.ts-nav-link::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 0;
background: linear-gradient(135deg, var(--ts-primary), var(--ts-accent));
border-radius: 0 2px 2px 0;
transition: height var(--ts-duration) var(--ts-ease);
}
.ts-nav-link:hover {
color: var(--ts-text-primary);
background: var(--ts-bg-hover);
}
.ts-nav-link.active {
color: var(--ts-primary-light);
background: rgba(var(--ts-primary-rgb), 0.1);
}
.ts-nav-link.active::before {
height: 24px;
}
.ts-nav-link i {
font-size: 1.25rem;
width: 24px;
text-align: center;
transition: transform var(--ts-duration) var(--ts-ease);
}
.ts-nav-link:hover i {
transform: scale(1.1);
}
.ts-nav-link.active i {
filter: drop-shadow(0 0 8px rgba(var(--ts-primary-rgb), 0.5));
}
.ts-nav-divider {
padding: 16px 16px 8px;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ts-text-muted);
}
.ts-sidebar-footer {
padding: 16px;
border-top: 1px solid var(--ts-glass-border);
}
.ts-user-credits {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: linear-gradient(135deg, rgba(var(--ts-accent-rgb), 0.1), rgba(var(--ts-primary-rgb), 0.05));
border: 1px solid rgba(var(--ts-accent-rgb), 0.2);
border-radius: var(--ts-radius-lg);
transition: all var(--ts-duration) var(--ts-ease);
}
.ts-user-credits:hover {
border-color: rgba(var(--ts-accent-rgb), 0.4);
box-shadow: var(--ts-glow-accent);
}
.ts-credits-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--ts-accent), var(--ts-primary));
border-radius: var(--ts-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: white;
}
.ts-credits-info {
flex: 1;
}
.ts-credits-label {
font-size: 0.75rem;
color: var(--ts-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ts-credits-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--ts-accent);
}
.ts-main {
flex: 1;
margin-left: var(--ts-sidebar-width);
display: flex;
flex-direction: column;
min-height: 100vh;
transition: margin-left 0.25s ease, max-width 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
.ts-main { transition: none; }
}
@media (max-width: 991.98px) {
.ts-main {
margin-left: 0;
}
}
@media (max-width: 1399.98px) {
.ts-main {
overflow-x: clip;
max-width: calc(100vw - var(--ts-sidebar-width));
}
.ts-main main.flex-grow-1.p-4 {
padding: 1rem !important;
}
}
@media (max-width: 991.98px) {
.ts-main {
max-width: 100vw;
}
}
.ts-header {
position: sticky;
top: 0;
height: var(--ts-header-height);
--ts-glass-bg: rgba(15, 23, 42, 0.88);
background: var(--ts-glass-bg);
-webkit-backdrop-filter: blur(var(--ts-glass-blur));
backdrop-filter: blur(var(--ts-glass-blur));
border-bottom: 1px solid var(--ts-glass-border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
gap: 16px;
z-index: 50;
}
[data-bs-theme="light"] .ts-header {
--ts-glass-bg: rgba(255, 255, 255, 0.95);
}
.ts-sidebar-toggle {
display: none;
width: 40px;
height: 40px;
background: var(--ts-bg-elevated);
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius-md);
color: var(--ts-text-secondary);
font-size: 1.25rem;
cursor: pointer;
transition: all var(--ts-duration) var(--ts-ease);
}
.ts-sidebar-toggle:hover {
color: var(--ts-text-primary);
border-color: var(--ts-primary);
}
@media (max-width: 991.98px) {
.ts-sidebar-toggle {
display: flex;
align-items: center;
justify-content: center;
}
}
.ts-header-search {
position: relative;
flex: 1;
max-width: 480px;
}
.ts-header-search i {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--ts-text-muted);
font-size: 1.125rem;
}
.ts-search-input {
width: 100%;
height: 44px;
padding: 0 16px 0 48px;
background: var(--ts-bg-elevated);
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius-lg);
color: var(--ts-text-primary);
font-size: 0.9375rem;
transition: all var(--ts-duration) var(--ts-ease);
}
.ts-search-input::placeholder {
color: var(--ts-text-muted);
}
.ts-search-input:focus {
outline: none;
border-color: var(--ts-primary);
box-shadow: 0 0 0 3px rgba(var(--ts-primary-rgb), 0.15);
}
.ts-header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.ts-header-btn {
position: relative;
width: 44px;
height: 44px;
background: var(--ts-bg-elevated);
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius-md);
color: var(--ts-text-secondary);
font-size: 1.125rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--ts-duration) var(--ts-ease);
}
.ts-header-btn:hover {
color: var(--ts-text-primary);
border-color: var(--ts-primary);
background: rgba(var(--ts-primary-rgb), 0.1);
}
.ts-navbar-actions {
gap: 4px;
align-items: center;
}
.ts-nav-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--ts-text-secondary);
font-size: 1.05rem;
line-height: 1;
padding: 0;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
}
.ts-nav-btn > i,
.ts-nav-btn > svg {
line-height: 1;
display: block;
}
.ts-nav-btn:hover {
background: rgba(255,255,255,0.06);
color: var(--ts-text-primary);
transform: translateY(-1px);
}
[data-bs-theme="light"] .ts-nav-btn:hover {
background: rgba(0,0,0,0.05);
}
.ts-nav-btn:active {
transform: translateY(0) scale(0.95);
}
.ts-nav-search-form {
align-items: center;
position: relative;
}
.ts-nav-search-icon {
position: absolute;
left: 12px;
color: var(--ts-text-muted);
font-size: 0.85rem;
pointer-events: none;
z-index: 1;
}
.ts-nav-search-input {
height: 36px;
width: 200px;
padding: 0 14px 0 34px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
color: var(--ts-text-primary);
font-size: 0.8rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-bs-theme="light"] .ts-nav-search-input {
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.1);
}
.ts-nav-search-input::placeholder { color: var(--ts-text-muted); }
.ts-nav-search-input:focus {
outline: none;
width: 260px;
background: rgba(255,255,255,0.08);
border-color: rgba(var(--ts-primary-rgb), 0.5);
box-shadow: 0 0 0 3px rgba(var(--ts-primary-rgb), 0.1), 0 4px 12px rgba(0,0,0,0.1);
}
[data-bs-theme="light"] .ts-nav-search-input:focus {
background: #fff;
border-color: var(--ts-primary);
box-shadow: 0 0 0 3px rgba(var(--ts-primary-rgb), 0.1), 0 4px 12px rgba(0,0,0,0.05);
}
.ts-lang-trigger {
gap: 6px;
width: auto !important;
padding: 0 10px !important;
height: 36px;
}
.ts-flag-img {
border-radius: 3px;
object-fit: cover;
box-shadow: 0 1px 4px rgba(0,0,0,0.25);
flex-shrink: 0;
display: block;
}
.ts-lang-chevron {
font-size: 0.5rem;
opacity: 0.4;
transition: transform 0.25s ease;
}
.ts-lang-trigger[aria-expanded="true"] .ts-lang-chevron {
transform: rotate(180deg);
}
.ts-lang-dropdown {
min-width: 210px;
padding: 8px;
border-radius: 14px;
background: #0f172a;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset;
margin-top: 10px !important;
animation: tsDropIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-bs-theme="light"] .ts-lang-dropdown {
background: #ffffff;
border-color: rgba(0,0,0,0.08);
box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04) inset;
}
@keyframes tsDropIn {
from { opacity: 0; transform: translateY(-8px) scale(0.96); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ts-lang-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-radius: 10px;
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255,255,255,0.7);
transition: all 0.15s ease;
}
[data-bs-theme="light"] .ts-lang-item {
color: #475569;
}
.ts-lang-item:hover {
background: rgba(255,255,255,0.06);
color: #fff;
}
[data-bs-theme="light"] .ts-lang-item:hover {
background: rgba(0,0,0,0.04);
color: #0f172a;
}
.ts-lang-item.active {
background: rgba(var(--ts-primary-rgb), 0.15);
color: var(--ts-primary);
font-weight: 600;
}
.ts-lang-item .ts-flag-img {
width: 26px;
height: 18px;
}
.ts-lang-item .bi-check2 {
font-size: 1rem;
}
.ts-theme-toggle i {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ts-theme-toggle:hover i {
color: #f59e0b;
transform: rotate(25deg);
}
.ts-notif-trigger {
font-size: 1.05rem;
}
.ts-notif-trigger:hover {
color: var(--ts-primary) !important;
}
.ts-notif-dropdown {
width: 380px;
border-radius: 16px !important;
border: 1px solid rgba(255,255,255,0.08) !important;
animation: tsDropIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-bs-theme="light"] .ts-notif-dropdown {
border-color: rgba(0,0,0,0.08) !important;
}
.ts-nav-user {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 10px 4px 4px;
border-radius: 12px;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--ts-text-primary);
text-decoration: none;
}
.ts-nav-user:hover {
background: rgba(255,255,255,0.06);
}
[data-bs-theme="light"] .ts-nav-user:hover {
background: rgba(0,0,0,0.04);
}
.ts-nav-avatar {
border-radius: 10px;
object-fit: cover;
border: 2px solid rgba(255,255,255,0.12);
transition: all 0.25s ease;
}
[data-bs-theme="light"] .ts-nav-avatar {
border-color: rgba(0,0,0,0.1);
}
.ts-nav-user:hover .ts-nav-avatar {
border-color: var(--ts-primary);
box-shadow: 0 0 12px rgba(var(--ts-primary-rgb), 0.3);
}
.ts-nav-user-info {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.ts-nav-user-name {
font-size: 0.8125rem;
font-weight: 600;
color: var(--ts-text-primary);
white-space: nowrap;
}
.ts-nav-user-role {
font-size: 0.6rem;
color: var(--ts-text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
font-weight: 600;
}
@media (max-width: 767.98px) {
.ts-navbar-actions { gap: 2px; }
.ts-nav-btn { width: 32px; height: 32px; font-size: 0.9rem; }
.ts-nav-avatar { width: 30px !important; height: 30px !important; }
.ts-lang-trigger { padding: 0 6px !important; }
}
.ts-notification-badge {
position: absolute;
top: 6px;
right: 6px;
min-width: 18px;
height: 18px;
background: linear-gradient(135deg, var(--ts-danger), #f97316);
border-radius: var(--ts-radius-full);
font-size: 0.625rem;
font-weight: 700;
color: white;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.8;
}
}
.ts-notification-dropdown {
width: min(380px, calc(100vw - 2rem));
background: var(--ts-card-bg, rgba(255, 255, 255, 0.97)) !important;
border: 1px solid rgba(var(--ts-primary-rgb, 59, 130, 246), 0.1) !important;
border-radius: var(--ts-radius-lg, 12px) !important;
overflow: hidden;
}
[data-bs-theme="dark"] .ts-notification-dropdown {
background: rgba(15, 23, 42, 0.97) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
}
.ts-notif-header {
border-bottom: 1px solid rgba(var(--ts-primary-rgb, 59, 130, 246), 0.1);
}
.ts-notif-footer {
border-top: 1px solid rgba(var(--ts-primary-rgb, 59, 130, 246), 0.1);
background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.03);
}
.ts-notification-dropdown .notification-item-link:hover > div {
background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.06) !important;
}
[data-bs-theme="dark"] .ts-notification-dropdown .notification-item-link:hover > div {
background: rgba(255, 255, 255, 0.04) !important;
}
@media (max-width: 576px) {
.ts-notification-dropdown {
width: calc(100vw - 1rem) !important;
position: fixed !important;
top: 60px !important;
right: 0.5rem !important;
left: 0.5rem !important;
}
}
.ts-theme-toggle .ts-icon-light,
.ts-theme-toggle .ts-icon-dark {
display: none;
}
[data-bs-theme="dark"] .ts-theme-toggle .ts-icon-light {
display: block;
}
[data-bs-theme="light"] .ts-theme-toggle .ts-icon-dark {
display: block;
}
.ts-user-menu {
display: flex;
align-items: center;
gap: 12px;
height: 44px;
padding: 4px 16px 4px 4px;
background: var(--ts-bg-elevated);
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius-lg);
color: var(--ts-text-primary);
font-weight: 500;
font-size: 0.9375rem;
cursor: pointer;
transition: all var(--ts-duration) var(--ts-ease);
}
.ts-user-menu:hover {
border-color: var(--ts-primary);
}
.ts-avatar {
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--ts-primary), var(--ts-purple));
border-radius: var(--ts-radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 0.875rem;
}
.ts-dropdown {
background: var(--ts-bg-surface);
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius-lg);
box-shadow: var(--ts-shadow-xl);
padding: 8px;
min-width: 200px;
}
.ts-dropdown .dropdown-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--ts-radius-sm);
color: var(--ts-text-secondary);
font-size: 0.9375rem;
transition: all var(--ts-duration) var(--ts-ease);
}
.ts-dropdown .dropdown-item:hover {
background: var(--ts-bg-hover);
color: var(--ts-text-primary);
}
.ts-dropdown .dropdown-divider {
margin: 8px 0;
border-color: var(--ts-border);
}
.ts-content {
flex: 1;
padding: 24px;
}
@media (min-width: 1200px) {
.ts-content {
padding: 32px;
}
}
.ts-card {
background: var(--ts-bg-surface);
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius-xl);
padding: 24px;
transition: all var(--ts-duration) var(--ts-ease);
}
.ts-card:hover {
border-color: var(--ts-border-hover);
box-shadow: var(--ts-shadow-lg);
}
.ts-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--ts-border);
}
.ts-card-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--ts-text-primary);
display: flex;
align-items: center;
gap: 10px;
margin: 0;
}
.ts-card-title i {
color: var(--ts-primary);
}
.ts-card-gradient {
position: relative;
background: var(--ts-bg-surface);
border: none;
border-radius: var(--ts-radius-xl);
padding: 1px;
}
.ts-card-gradient::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--ts-primary), var(--ts-purple), var(--ts-accent));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.5;
transition: opacity var(--ts-duration) var(--ts-ease);
}
.ts-card-gradient:hover::before {
opacity: 1;
}
.ts-card-gradient>* {
position: relative;
background: var(--ts-bg-surface);
border-radius: calc(var(--ts-radius-xl) - 1px);
padding: 24px;
}
.ts-stat-card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 20px;
}
.ts-stat-icon {
width: 56px;
height: 56px;
border-radius: var(--ts-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
flex-shrink: 0;
}
.ts-stat-icon.primary {
background: linear-gradient(135deg, var(--ts-primary), var(--ts-primary-dark));
box-shadow: var(--ts-glow-primary);
}
.ts-stat-icon.success {
background: linear-gradient(135deg, var(--ts-success), #059669);
box-shadow: 0 0 20px rgba(var(--ts-success-rgb), 0.4);
}
.ts-stat-icon.warning {
background: linear-gradient(135deg, var(--ts-warning), #d97706);
box-shadow: 0 0 20px rgba(var(--ts-warning-rgb), 0.4);
}
.ts-stat-icon.accent {
background: linear-gradient(135deg, var(--ts-accent), var(--ts-primary));
box-shadow: var(--ts-glow-accent);
}
.ts-stat-info h3 {
font-size: 1.75rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 4px;
background: linear-gradient(135deg, var(--ts-text-primary), var(--ts-text-secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ts-stat-info p {
color: var(--ts-text-muted);
font-size: 0.875rem;
margin: 0;
}
.ts-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 44px;
padding: 0 20px;
font-family: inherit;
font-weight: 600;
font-size: 0.9375rem;
border-radius: var(--ts-radius-md);
border: none;
cursor: pointer;
transition: all var(--ts-duration) var(--ts-ease);
text-decoration: none;
white-space: nowrap;
}
.ts-btn-primary {
background: linear-gradient(135deg, var(--ts-primary), var(--ts-primary-dark));
color: white;
box-shadow: 0 4px 14px rgba(var(--ts-primary-rgb), 0.4);
}
.ts-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--ts-primary-rgb), 0.5);
color: white;
}
.ts-btn-primary:active {
transform: translateY(0);
}
.ts-btn-glow {
background: linear-gradient(135deg, var(--ts-primary), var(--ts-purple));
color: white;
box-shadow: var(--ts-glow-primary);
animation: btnGlow 3s ease-in-out infinite;
}
@keyframes btnGlow {
0%,
100% {
box-shadow: var(--ts-glow-primary);
}
50% {
box-shadow: var(--ts-glow-purple);
}
}
.ts-btn-glow:hover {
transform: translateY(-2px) scale(1.02);
color: white;
}
.ts-btn-secondary {
background: var(--ts-bg-elevated);
color: var(--ts-text-primary);
border: 1px solid var(--ts-border);
}
.ts-btn-secondary:hover {
background: var(--ts-bg-hover);
border-color: var(--ts-primary);
color: var(--ts-primary);
}
.ts-btn-success {
background: linear-gradient(135deg, var(--ts-success), #059669);
color: white;
box-shadow: 0 4px 14px rgba(var(--ts-success-rgb), 0.4);
}
.ts-btn-success:hover {
transform: translateY(-2px);
color: white;
}
.ts-btn-danger {
background: linear-gradient(135deg, var(--ts-danger), #dc2626);
color: white;
}
.ts-btn-sm {
height: 36px;
padding: 0 14px;
font-size: 0.875rem;
}
.ts-btn-lg {
height: 52px;
padding: 0 28px;
font-size: 1rem;
}
.ts-btn-warning {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
.ts-btn-warning:hover { transform: translateY(-2px); color: white; box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5); }
.ts-btn-warning:active { transform: translateY(0); }
.ts-btn-ghost {
background: rgba(255, 255, 255, 0.04);
color: var(--ts-text-primary);
border: 1px solid var(--ts-border);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.ts-btn-ghost:hover {
background: rgba(var(--ts-primary-rgb), 0.08);
border-color: rgba(var(--ts-primary-rgb), 0.35);
color: var(--ts-primary);
}
.ts-btn-link {
background: transparent;
color: var(--ts-text-muted);
padding: 0 8px;
border: none;
height: auto;
text-decoration: none;
}
.ts-btn-link:hover { color: var(--ts-primary); text-decoration: underline; }
.ts-btn-icon {
width: 44px;
padding: 0;
flex-shrink: 0;
}
.ts-btn-icon.ts-btn-sm { width: 36px; }
.ts-btn-icon.ts-btn-lg { width: 52px; }
.ts-btn[aria-busy="true"],
.ts-btn.is-loading {
color: transparent !important;
pointer-events: none;
position: relative;
}
.ts-btn[aria-busy="true"]::after,
.ts-btn.is-loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
color: white;
animation: ts-btn-spin 700ms linear infinite;
}
@keyframes ts-btn-spin { to { transform: rotate(360deg); } }
.ts-btn:disabled,
.ts-btn.is-disabled,
.ts-btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.ts-btn-primary,
.ts-btn-success,
.ts-btn-warning,
.ts-btn-danger {
position: relative;
overflow: hidden;
isolation: isolate;
}
.ts-btn-primary::after,
.ts-btn-success::after,
.ts-btn-warning::after,
.ts-btn-danger::after {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.32) 50%, transparent 65%);
transform: translateX(-150%) skewX(-18deg);
transition: transform 700ms ease;
pointer-events: none;
z-index: 1;
}
.ts-btn-primary > *,
.ts-btn-success > *,
.ts-btn-warning > *,
.ts-btn-danger > * { position: relative; z-index: 2; }
.ts-btn-primary:hover::after,
.ts-btn-success:hover::after,
.ts-btn-warning:hover::after,
.ts-btn-danger:hover::after {
transform: translateX(150%) skewX(-18deg);
}
.ts-btn:focus-visible {
outline: 2px solid var(--ts-primary);
outline-offset: 2px;
}
[data-bs-theme="light"] .ts-btn-secondary {
background: #ffffff;
border-color: #e2e8f0;
color: #0f172a;
}
[data-bs-theme="light"] .ts-btn-secondary:hover {
background: rgba(var(--ts-primary-rgb), 0.06);
}
[data-bs-theme="light"] .ts-btn-ghost {
background: rgba(15, 23, 42, 0.04);
border-color: rgba(15, 23, 42, 0.10);
color: #0f172a;
}
[data-bs-theme="light"] .ts-btn-ghost:hover {
background: rgba(var(--ts-primary-rgb), 0.08);
color: var(--ts-primary);
}
[data-bs-theme="light"] .ts-btn-link { color: #475569; }
@media (prefers-reduced-motion: reduce) {
.ts-btn-primary::after,
.ts-btn-success::after,
.ts-btn-warning::after,
.ts-btn-danger::after { display: none; }
.ts-btn-primary:hover,
.ts-btn-success:hover,
.ts-btn-warning:hover,
.ts-btn-danger:hover,
.ts-btn-secondary:hover { transform: none; }
}
body[data-perf-tier="saver"] .ts-btn::after,
body[data-perf-feature-hover_fx="false"] .ts-btn::after { display: none !important; }
body[data-perf-tier="saver"] .ts-btn:hover,
body[data-perf-feature-hover_fx="false"] .ts-btn:hover { transform: none !important; box-shadow: none !important; }
body[data-perf-tier="saver"] .ts-btn-primary,
body[data-perf-tier="saver"] .ts-btn-success,
body[data-perf-tier="saver"] .ts-btn-warning,
body[data-perf-tier="saver"] .ts-btn-danger { background: var(--ts-primary); box-shadow: none; }
body[data-perf-tier="saver"] .ts-btn-success { background: var(--ts-success); }
body[data-perf-tier="saver"] .ts-btn-warning { background: #d97706; }
body[data-perf-tier="saver"] .ts-btn-danger  { background: var(--ts-danger); }
body[data-perf-tier="saver"] .btn,
body[data-perf-feature-hover_fx="false"] .btn {
transition: none !important;
}
body[data-perf-tier="saver"] .btn:hover,
body[data-perf-feature-hover_fx="false"] .btn:hover {
transform: none !important;
box-shadow: none !important;
}
body[data-perf-tier="saver"] .btn::after,
body[data-perf-tier="saver"] .btn::before,
body[data-perf-feature-hover_fx="false"] .btn::after,
body[data-perf-feature-hover_fx="false"] .btn::before {
animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
.btn,
.btn:hover {
transition: none !important;
transform: none !important;
}
}
body[data-perf-tier="ultra"] .ts-btn-primary,
body:not([data-perf-tier]) .ts-btn-primary {
background:
linear-gradient(135deg, var(--ts-primary) 0%, var(--ts-purple, #8b5cf6) 55%, var(--ts-primary-dark) 100%);
background-size: 200% 200%;
animation: ts-btn-bg-shift 6s ease-in-out infinite;
box-shadow:
0 4px 18px rgba(var(--ts-primary-rgb), 0.45),
0 0 0 1px rgba(255, 255, 255, 0.12) inset,
0 -1px 0 0 rgba(0, 0, 0, 0.18) inset;
}
body[data-perf-tier="ultra"] .ts-btn-success,
body:not([data-perf-tier]) .ts-btn-success {
background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
background-size: 200% 200%;
animation: ts-btn-bg-shift 6s ease-in-out infinite;
box-shadow:
0 4px 18px rgba(16, 185, 129, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
body[data-perf-tier="ultra"] .ts-btn-warning,
body:not([data-perf-tier]) .ts-btn-warning {
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
background-size: 200% 200%;
animation: ts-btn-bg-shift 6s ease-in-out infinite;
box-shadow:
0 4px 18px rgba(245, 158, 11, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
body[data-perf-tier="ultra"] .ts-btn-danger,
body:not([data-perf-tier]) .ts-btn-danger {
background: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
background-size: 200% 200%;
animation: ts-btn-bg-shift 6s ease-in-out infinite;
box-shadow:
0 4px 18px rgba(239, 68, 68, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
@keyframes ts-btn-bg-shift {
0%, 100% { background-position: 0% 50%; }
50%      { background-position: 100% 50%; }
}
body[data-perf-tier="ultra"] .ts-btn-primary:hover,
body[data-perf-tier="ultra"] .ts-btn-success:hover,
body[data-perf-tier="ultra"] .ts-btn-warning:hover,
body[data-perf-tier="ultra"] .ts-btn-danger:hover,
body:not([data-perf-tier]) .ts-btn-primary:hover,
body:not([data-perf-tier]) .ts-btn-success:hover,
body:not([data-perf-tier]) .ts-btn-warning:hover,
body:not([data-perf-tier]) .ts-btn-danger:hover {
transform: translateY(-2px) scale(1.02);
}
body[data-perf-tier="ultra"] .ts-btn-primary:hover,
body:not([data-perf-tier]) .ts-btn-primary:hover {
box-shadow:
0 10px 30px rgba(var(--ts-primary-rgb), 0.55),
0 0 24px rgba(139, 92, 246, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
body[data-perf-tier="ultra"] .ts-btn-success:hover,
body:not([data-perf-tier]) .ts-btn-success:hover {
box-shadow:
0 10px 30px rgba(16, 185, 129, 0.55),
0 0 24px rgba(52, 211, 153, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
body[data-perf-tier="ultra"] .ts-btn-warning:hover,
body:not([data-perf-tier]) .ts-btn-warning:hover {
box-shadow:
0 10px 30px rgba(245, 158, 11, 0.55),
0 0 24px rgba(251, 191, 36, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
body[data-perf-tier="ultra"] .ts-btn-danger:hover,
body:not([data-perf-tier]) .ts-btn-danger:hover {
box-shadow:
0 10px 30px rgba(239, 68, 68, 0.55),
0 0 24px rgba(248, 113, 113, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
body[data-perf-tier="ultra"] .ts-btn-primary,
body[data-perf-tier="ultra"] .ts-btn-success,
body[data-perf-tier="ultra"] .ts-btn-warning,
body[data-perf-tier="ultra"] .ts-btn-danger,
body:not([data-perf-tier]) .ts-btn-primary,
body:not([data-perf-tier]) .ts-btn-success,
body:not([data-perf-tier]) .ts-btn-warning,
body:not([data-perf-tier]) .ts-btn-danger {
position: relative;
}
body[data-perf-tier="ultra"] .ts-btn-primary::before,
body[data-perf-tier="ultra"] .ts-btn-success::before,
body[data-perf-tier="ultra"] .ts-btn-warning::before,
body[data-perf-tier="ultra"] .ts-btn-danger::before,
body:not([data-perf-tier]) .ts-btn-primary::before,
body:not([data-perf-tier]) .ts-btn-success::before,
body:not([data-perf-tier]) .ts-btn-warning::before,
body:not([data-perf-tier]) .ts-btn-danger::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 35%, transparent 65%, rgba(255,255,255,.10));
pointer-events: none;
z-index: 0;
}
body[data-perf-tier="ultra"] .ts-btn-primary > *,
body[data-perf-tier="ultra"] .ts-btn-success > *,
body[data-perf-tier="ultra"] .ts-btn-warning > *,
body[data-perf-tier="ultra"] .ts-btn-danger > *,
body:not([data-perf-tier]) .ts-btn-primary > *,
body:not([data-perf-tier]) .ts-btn-success > *,
body:not([data-perf-tier]) .ts-btn-warning > *,
body:not([data-perf-tier]) .ts-btn-danger > * { position: relative; z-index: 2; }
body[data-perf-tier="ultra"] .ts-btn-ghost,
body:not([data-perf-tier]) .ts-btn-ghost {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}
body[data-perf-tier="ultra"] .ts-btn-ghost:hover,
body:not([data-perf-tier]) .ts-btn-ghost:hover {
background: linear-gradient(135deg, rgba(var(--ts-primary-rgb), 0.12), rgba(var(--ts-primary-rgb), 0.06));
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(var(--ts-primary-rgb), 0.18);
}
body[data-perf-feature-glows="false"] .ts-btn-primary,
body[data-perf-feature-glows="false"] .ts-btn-success,
body[data-perf-feature-glows="false"] .ts-btn-warning,
body[data-perf-feature-glows="false"] .ts-btn-danger {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
animation: none !important;
}
body[data-perf-feature-animations="false"] .ts-btn-primary,
body[data-perf-feature-animations="false"] .ts-btn-success,
body[data-perf-feature-animations="false"] .ts-btn-warning,
body[data-perf-feature-animations="false"] .ts-btn-danger {
animation: none !important;
background-size: 100% 100% !important;
}
.ts-form-group {
margin-bottom: 20px;
}
.ts-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
font-size: 0.875rem;
color: var(--ts-text-primary);
}
.ts-input,
.ts-select,
.ts-textarea {
width: 100%;
height: 48px;
padding: 0 16px;
background: var(--ts-bg-elevated);
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius-md);
color: var(--ts-text-primary);
font-family: inherit;
font-size: 0.9375rem;
transition: all var(--ts-duration) var(--ts-ease);
}
.input-group > .ts-input,
.input-group > .ts-select,
.input-group > .ts-textarea {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
.input-group > .ts-input:not(:last-child),
.input-group > .ts-select:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > .ts-input:not(:first-child),
.input-group > .ts-select:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group > .ts-btn:not(:first-child) {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
margin-left: -1px;
}
.input-group > .ts-btn:not(:last-child) {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.ts-textarea {
height: auto;
padding: 12px 16px;
resize: vertical;
min-height: 120px;
}
.ts-input:focus,
.ts-select:focus,
.ts-textarea:focus {
outline: none;
border-color: var(--ts-primary);
box-shadow: 0 0 0 3px rgba(var(--ts-primary-rgb), 0.15);
}
.ts-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='m7.247 11.14 5-5.893c.565-.645.105-1.647-.753-1.647H2.506a1 1 0 0 0-.753 1.659l4.796 5.48a1 1 0 0 0 1.698 0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 48px;
}
.ts-wizard-steps {
display: flex;
justify-content: center;
gap: 0;
margin-bottom: 32px;
padding: 0 20px;
}
.ts-wizard-step {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.ts-wizard-step:not(:last-child)::after {
content: '';
width: 60px;
height: 2px;
background: var(--ts-border);
margin: 0 8px;
transition: background var(--ts-duration) var(--ts-ease);
}
.ts-wizard-step.completed:not(:last-child)::after {
background: linear-gradient(90deg, var(--ts-primary), var(--ts-accent));
}
.ts-step-number {
width: 44px;
height: 44px;
background: var(--ts-bg-elevated);
border: 2px solid var(--ts-border);
border-radius: var(--ts-radius-full);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9375rem;
color: var(--ts-text-muted);
transition: all var(--ts-duration) var(--ts-ease);
}
.ts-wizard-step.active .ts-step-number {
background: linear-gradient(135deg, var(--ts-primary), var(--ts-primary-dark));
border-color: var(--ts-primary);
color: white;
box-shadow: var(--ts-glow-primary);
}
.ts-wizard-step.completed .ts-step-number {
background: linear-gradient(135deg, var(--ts-success), #059669);
border-color: var(--ts-success);
color: white;
}
.ts-step-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--ts-text-muted);
transition: color var(--ts-duration) var(--ts-ease);
}
.ts-wizard-step.active .ts-step-label {
color: var(--ts-primary);
}
.ts-wizard-step.completed .ts-step-label {
color: var(--ts-success);
}
@media (max-width: 768px) {
.ts-wizard-step:not(:last-child)::after {
width: 24px;
}
.ts-step-label {
display: none;
}
}
.table,
.ts-table {
width: 100%;
margin-bottom: 0;
border-collapse: collapse;
background-color: transparent;
}
.table thead th,
.ts-table thead th {
background-color: var(--ts-bg-elevated);
color: var(--ts-text-secondary);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 16px 24px;
border-bottom: 2px solid var(--ts-border);
white-space: nowrap;
vertical-align: middle;
}
.table tbody td,
.ts-table tbody td {
padding: 16px 24px;
color: var(--ts-text-primary);
border-bottom: 1px solid var(--ts-border);
vertical-align: middle;
font-size: 0.9375rem;
background-color: transparent;
transition: background-color 0.2s ease;
}
.table-hover tbody tr:hover,
.ts-table tbody tr:hover {
background-color: rgba(var(--ts-primary-rgb), 0.05) !important;
}
.ts-table--sticky-actions {
table-layout: auto;
}
.ts-table--sticky-actions th:last-child,
.ts-table--sticky-actions td:last-child {
position: sticky;
right: 0;
z-index: 2;
background: var(--ts-bg-surface);
box-shadow: -8px 0 14px -10px rgba(0, 0, 0, 0.45);
}
[data-bs-theme="light"] .ts-table--sticky-actions th:last-child,
[data-bs-theme="light"] .ts-table--sticky-actions td:last-child {
background: #ffffff;
box-shadow: -8px 0 14px -10px rgba(15, 23, 42, 0.15);
}
.ts-table--sticky-actions tbody tr:hover td:last-child {
background: rgba(var(--ts-primary-rgb), 0.05);
}
[data-bs-theme="light"] .ts-table--sticky-actions tbody tr:hover td:last-child {
background: #f8fafc;
}
.ts-truncate-cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ts-truncate-cell.ts-truncate-sm { max-width: 140px; }
.ts-truncate-cell.ts-truncate-md { max-width: 220px; }
.ts-truncate-cell.ts-truncate-lg { max-width: 320px; }
.ts-truncate-cell.ts-truncate-xl { max-width: 420px; }
@media (max-width: 1399.98px) {
.ts-truncate-cell.ts-truncate-lg { max-width: 240px; }
.ts-truncate-cell.ts-truncate-xl { max-width: 320px; }
}
@media (max-width: 991.98px) {
.ts-truncate-cell.ts-truncate-md { max-width: 160px; }
.ts-truncate-cell.ts-truncate-lg { max-width: 200px; }
.ts-truncate-cell.ts-truncate-xl { max-width: 240px; }
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.01);
}
[data-bs-theme="light"] .table thead th {
background-color: #f1f5f9;
color: #475569;
border-bottom-color: #e2e8f0;
}
[data-bs-theme="light"] .table tbody td {
border-bottom-color: #f1f5f9;
}
[data-bs-theme="light"] .table-hover tbody tr:hover {
background-color: #f8fafc !important;
}
.table> :not(caption)>*>* {
border-bottom-width: 1px;
box-shadow: none;
}
.badge {
font-weight: 500;
padding: 4px 10px;
border-radius: var(--ts-radius-full);
font-size: 0.75rem;
}
.bg-primary {
background: linear-gradient(135deg, var(--ts-primary), var(--ts-primary-dark)) !important;
}
.bg-success {
background: linear-gradient(135deg, var(--ts-success), #059669) !important;
}
.bg-warning {
background: linear-gradient(135deg, var(--ts-warning), #d97706) !important;
color: #000 !important;
}
.bg-primary[class*="bg-opacity"] {
background: rgba(var(--ts-primary-rgb), var(--bs-bg-opacity, 0.1)) !important;
}
.bg-success[class*="bg-opacity"] {
background: rgba(var(--ts-success-rgb), var(--bs-bg-opacity, 0.1)) !important;
}
.bg-warning[class*="bg-opacity"] {
background: rgba(var(--ts-warning-rgb), var(--bs-bg-opacity, 0.1)) !important;
color: inherit !important;
}
.bg-danger[class*="bg-opacity"] {
background: rgba(var(--ts-danger-rgb), var(--bs-bg-opacity, 0.1)) !important;
}
.bg-danger {
background: linear-gradient(135deg, var(--ts-danger), #dc2626) !important;
}
.bg-info {
background: linear-gradient(135deg, var(--ts-info), #0891b2) !important;
}
.bg-secondary {
background: var(--ts-bg-hover) !important;
color: var(--ts-text-secondary) !important;
}
.ts-text-gradient {
background: linear-gradient(135deg, var(--ts-primary), var(--ts-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.ts-text-gradient-purple {
background: linear-gradient(135deg, var(--ts-purple), var(--ts-pink));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ts-fade-in {
animation: fadeInUp 0.4s var(--ts-ease) forwards;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.ts-slide-in {
animation: slideIn 0.3s var(--ts-ease) forwards;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.ts-skeleton {
background: linear-gradient(90deg, var(--ts-bg-elevated) 25%, var(--ts-bg-hover) 50%, var(--ts-bg-elevated) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--ts-radius-sm);
}
.ts-quick-action {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: var(--ts-bg-elevated);
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius-lg);
color: var(--ts-text-primary);
text-decoration: none;
transition: all var(--ts-duration) var(--ts-ease);
}
.ts-quick-action:hover {
background: linear-gradient(135deg, rgba(var(--ts-primary-rgb), 0.1), rgba(var(--ts-purple-rgb), 0.05));
border-color: var(--ts-primary);
transform: translateX(8px);
color: var(--ts-primary);
}
.ts-quick-action i {
font-size: 1.25rem;
width: 24px;
text-align: center;
}
.ts-engine-card {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
background: var(--ts-bg-elevated);
border: 2px solid var(--ts-border);
border-radius: var(--ts-radius-lg);
cursor: pointer;
transition: all var(--ts-duration) var(--ts-ease);
}
.ts-engine-card:hover {
border-color: var(--ts-primary);
background: rgba(var(--ts-primary-rgb), 0.05);
}
.ts-engine-card.selected {
border-color: var(--ts-primary);
background: rgba(var(--ts-primary-rgb), 0.1);
box-shadow: var(--ts-glow-primary);
}
.ts-engine-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--ts-primary), var(--ts-purple));
border-radius: var(--ts-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: white;
}
.ts-engine-info h5 {
margin: 0 0 8px;
font-weight: 600;
}
.ts-mod-chip {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--ts-bg-elevated);
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius-md);
cursor: pointer;
transition: all var(--ts-duration) var(--ts-ease);
}
.ts-mod-chip:hover {
border-color: var(--ts-primary);
background: rgba(var(--ts-primary-rgb), 0.05);
}
.ts-mod-chip.selected {
border-color: var(--ts-primary);
background: rgba(var(--ts-primary-rgb), 0.1);
}
.ts-mod-chip.selected .ts-mod-check {
color: var(--ts-primary);
}
.ts-mod-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.ts-mod-name {
font-weight: 500;
font-size: 0.9375rem;
}
.ts-mod-cost {
font-size: 0.8125rem;
color: var(--ts-text-muted);
}
.ts-upload-zone {
border: 2px dashed var(--ts-border);
border-radius: var(--ts-radius-xl);
padding: 48px 24px;
text-align: center;
transition: all var(--ts-duration) var(--ts-ease);
cursor: pointer;
}
.ts-upload-zone:hover {
border-color: var(--ts-primary);
background: rgba(var(--ts-primary-rgb), 0.03);
}
.ts-upload-label {
display: block;
cursor: pointer;
}
.ts-upload-zone i {
font-size: 3rem;
color: var(--ts-primary);
margin-bottom: 16px;
}
.ts-credit-summary {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: linear-gradient(135deg, rgba(var(--ts-primary-rgb), 0.1), rgba(var(--ts-purple-rgb), 0.05));
border: 1px solid rgba(var(--ts-primary-rgb), 0.2);
border-radius: var(--ts-radius-lg);
font-size: 1.125rem;
}
.ts-credit-summary strong {
font-size: 1.5rem;
}
.ts-summary {
background: var(--ts-bg-elevated);
border-radius: var(--ts-radius-lg);
padding: 20px;
}
.ts-summary table {
width: 100%;
margin: 0;
}
.ts-summary td {
padding: 8px 0;
border: none;
}
.ts-info-banner {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 16px;
border-radius: 12px;
background: linear-gradient(135deg,
rgba(56, 189, 248, 0.10),
rgba(99, 102, 241, 0.06));
border: 1px solid rgba(56, 189, 248, 0.22);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ts-info-banner-icon {
flex-shrink: 0;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
border-radius: 10px;
background: rgba(56, 189, 248, 0.16);
color: #38bdf8;
font-size: 0.95rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.ts-info-banner-body { flex: 1; min-width: 0; }
.ts-info-banner-title {
font-size: 0.86rem;
font-weight: 700;
color: var(--ts-text-primary, #e2e8f0);
margin-bottom: 2px;
}
.ts-info-banner-sub {
font-size: 0.78rem;
color: var(--ts-text-secondary, rgba(226, 232, 240, 0.62));
line-height: 1.45;
}
.ts-info-banner.is-success {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(5, 150, 105, 0.06));
border-color: rgba(34, 197, 94, 0.30);
}
.ts-info-banner.is-success .ts-info-banner-icon { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.ts-info-banner.is-warning {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(217, 119, 6, 0.06));
border-color: rgba(245, 158, 11, 0.32);
}
.ts-info-banner.is-warning .ts-info-banner-icon { background: rgba(245, 158, 11, 0.20); color: #fbbf24; }
.ts-info-banner.is-danger {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(185, 28, 28, 0.06));
border-color: rgba(239, 68, 68, 0.30);
}
.ts-info-banner.is-danger .ts-info-banner-icon { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
.ts-info-banner.is-neutral {
background: linear-gradient(135deg, rgba(148, 163, 184, 0.10), rgba(100, 116, 139, 0.05));
border-color: rgba(148, 163, 184, 0.22);
}
.ts-info-banner.is-neutral .ts-info-banner-icon { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; }
[data-bs-theme="light"] .ts-info-banner {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(99, 102, 241, 0.04));
border-color: rgba(56, 189, 248, 0.30);
}
[data-bs-theme="light"] .ts-info-banner-icon { color: #0284c7; background: rgba(56, 189, 248, 0.14); }
[data-bs-theme="light"] .ts-info-banner-title { color: #0f172a; }
[data-bs-theme="light"] .ts-info-banner-sub { color: #475569; }
[data-bs-theme="light"] .ts-info-banner.is-success { background: linear-gradient(135deg, rgba(34, 197, 94, 0.10), rgba(5, 150, 105, 0.05)); border-color: rgba(34, 197, 94, 0.40); }
[data-bs-theme="light"] .ts-info-banner.is-success .ts-info-banner-icon { color: #166534; background: rgba(34, 197, 94, 0.14); }
[data-bs-theme="light"] .ts-info-banner.is-warning { background: linear-gradient(135deg, rgba(245, 158, 11, 0.10), rgba(217, 119, 6, 0.05)); border-color: rgba(245, 158, 11, 0.40); }
[data-bs-theme="light"] .ts-info-banner.is-warning .ts-info-banner-icon { color: #92400e; background: rgba(245, 158, 11, 0.16); }
[data-bs-theme="light"] .ts-info-banner.is-danger { background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(185, 28, 28, 0.05)); border-color: rgba(239, 68, 68, 0.40); }
[data-bs-theme="light"] .ts-info-banner.is-danger .ts-info-banner-icon { color: #991b1b; background: rgba(239, 68, 68, 0.14); }
[data-bs-theme="light"] .ts-info-banner.is-neutral { background: linear-gradient(135deg, rgba(148, 163, 184, 0.08), rgba(100, 116, 139, 0.04)); border-color: rgba(148, 163, 184, 0.30); }
[data-bs-theme="light"] .ts-info-banner.is-neutral .ts-info-banner-icon { color: #475569; background: rgba(148, 163, 184, 0.14); }
.ts-info-banner.has-action { align-items: center; }
.ts-info-banner-action {
flex-shrink: 0;
margin-left: auto;
align-self: center;
display: flex;
align-items: center;
gap: 8px;
}
@media (max-width: 575px) {
.ts-info-banner.has-action { flex-direction: column; align-items: flex-start; }
.ts-info-banner-action { margin-left: 0; width: 100%; }
.ts-info-banner-action > .ts-btn,
.ts-info-banner-action > form { flex: 1 1 auto; width: 100%; }
}
.btn-primary,
.ts-btn-primary {
background:
linear-gradient(135deg,
rgba(var(--ts-primary-rgb), 0.22),
rgba(var(--ts-primary-rgb), 0.10)) !important;
color: var(--ts-primary-light, #93c5fd) !important;
border: 1px solid rgba(var(--ts-primary-rgb), 0.40) !important;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
font-weight: 600 !important;
letter-spacing: 0.02em !important;
box-shadow:
0 4px 18px -6px rgba(var(--ts-primary-rgb), 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease !important;
}
.btn-primary:hover,
.ts-btn-primary:hover {
background:
linear-gradient(135deg,
rgba(var(--ts-primary-rgb), 0.34),
rgba(var(--ts-primary-rgb), 0.18)) !important;
border-color: rgba(var(--ts-primary-rgb), 0.65) !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
box-shadow:
0 8px 28px -8px rgba(var(--ts-primary-rgb), 0.60),
inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
filter: none;
}
.btn-secondary,
.btn-outline-secondary,
.ts-btn-secondary {
background: rgba(148, 163, 184, 0.08) !important;
color: var(--ts-text-primary) !important;
border: 1px solid rgba(148, 163, 184, 0.22) !important;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
font-weight: 500 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
transition: all 0.2s ease !important;
}
.btn-secondary:hover,
.btn-outline-secondary:hover,
.ts-btn-secondary:hover {
background: rgba(var(--ts-primary-rgb), 0.12) !important;
border-color: rgba(var(--ts-primary-rgb), 0.45) !important;
color: var(--ts-text-primary) !important;
transform: translateY(-1px);
box-shadow:
0 4px 14px -6px rgba(var(--ts-primary-rgb), 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
.btn-success,
.ts-btn-success {
background:
linear-gradient(135deg,
rgba(34, 197, 94, 0.22),
rgba(5, 150, 105, 0.12)) !important;
color: #4ade80 !important;
border: 1px solid rgba(34, 197, 94, 0.40) !important;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
font-weight: 600 !important;
box-shadow:
0 4px 18px -6px rgba(34, 197, 94, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.btn-success:hover,
.ts-btn-success:hover {
background:
linear-gradient(135deg,
rgba(34, 197, 94, 0.34),
rgba(5, 150, 105, 0.20)) !important;
border-color: rgba(34, 197, 94, 0.65) !important;
color: #86efac !important;
transform: translateY(-2px) !important;
box-shadow:
0 8px 28px -8px rgba(34, 197, 94, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
filter: none;
}
.btn-danger,
.ts-btn-danger {
background:
linear-gradient(135deg,
rgba(239, 68, 68, 0.22),
rgba(185, 28, 28, 0.12)) !important;
color: #fca5a5 !important;
border: 1px solid rgba(239, 68, 68, 0.40) !important;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
font-weight: 600 !important;
box-shadow:
0 4px 18px -6px rgba(239, 68, 68, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
.btn-danger:hover,
.ts-btn-danger:hover {
background:
linear-gradient(135deg,
rgba(239, 68, 68, 0.34),
rgba(185, 28, 28, 0.20)) !important;
border-color: rgba(239, 68, 68, 0.65) !important;
color: #fecaca !important;
transform: translateY(-2px) !important;
box-shadow:
0 8px 28px -8px rgba(239, 68, 68, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
filter: none;
}
.btn-warning,
.ts-btn-warning {
background:
linear-gradient(135deg,
rgba(245, 158, 11, 0.22),
rgba(217, 119, 6, 0.12)) !important;
color: #fbbf24 !important;
border: 1px solid rgba(245, 158, 11, 0.45) !important;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
font-weight: 600 !important;
text-shadow: none !important;
box-shadow:
0 4px 18px -6px rgba(245, 158, 11, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}
.btn-warning:hover,
.ts-btn-warning:hover {
background:
linear-gradient(135deg,
rgba(245, 158, 11, 0.36),
rgba(217, 119, 6, 0.22)) !important;
border-color: rgba(245, 158, 11, 0.70) !important;
color: #fde68a !important;
transform: translateY(-2px) !important;
box-shadow:
0 8px 28px -8px rgba(245, 158, 11, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
filter: none;
}
[data-bs-theme="light"] .btn-primary,
[data-bs-theme="light"] .ts-btn-primary {
background: linear-gradient(135deg, rgba(var(--ts-primary-rgb), 0.16), rgba(var(--ts-primary-rgb), 0.08)) !important;
color: var(--ts-primary, #2563eb) !important;
border-color: rgba(var(--ts-primary-rgb), 0.45) !important;
}
[data-bs-theme="light"] .btn-primary:hover,
[data-bs-theme="light"] .ts-btn-primary:hover {
background: var(--ts-primary, #2563eb) !important;
color: #ffffff !important;
border-color: var(--ts-primary, #2563eb) !important;
}
[data-bs-theme="light"] .btn-success,
[data-bs-theme="light"] .ts-btn-success {
color: #166534 !important;
border-color: rgba(34, 197, 94, 0.55) !important;
}
[data-bs-theme="light"] .btn-success:hover,
[data-bs-theme="light"] .ts-btn-success:hover {
color: #14532d !important;
}
[data-bs-theme="light"] .btn-danger,
[data-bs-theme="light"] .ts-btn-danger {
color: #991b1b !important;
border-color: rgba(239, 68, 68, 0.55) !important;
}
[data-bs-theme="light"] .btn-danger:hover,
[data-bs-theme="light"] .ts-btn-danger:hover {
color: #7f1d1d !important;
}
[data-bs-theme="light"] .btn-warning,
[data-bs-theme="light"] .ts-btn-warning {
color: #92400e !important;
border-color: rgba(245, 158, 11, 0.55) !important;
}
[data-bs-theme="light"] .btn-warning:hover,
[data-bs-theme="light"] .ts-btn-warning:hover {
color: #78350f !important;
}
[data-bs-theme="light"] .btn-secondary,
[data-bs-theme="light"] .btn-outline-secondary,
[data-bs-theme="light"] .ts-btn-secondary {
background: rgba(15, 23, 42, 0.04) !important;
color: #1e293b !important;
border-color: rgba(15, 23, 42, 0.14) !important;
}
.btn {
border-radius: var(--ts-radius-md) !important;
padding: 0.5rem 1.25rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.btn-sm {
padding: 0.375rem 1rem !important;
font-size: 0.875rem !important;
}
.btn-lg {
padding: 0.75rem 1.5rem !important;
font-size: 1.1rem !important;
}
.rounded-pill {
border-radius: 9999px !important;
}
.glass-card {
backdrop-filter: blur(var(--ts-glass-blur));
-webkit-backdrop-filter: blur(var(--ts-glass-blur));
border-radius: var(--ts-radius-lg, 1rem);
box-shadow: var(--ts-shadow-md);
transition: all 0.3s ease;
}
[data-bs-theme="light"] .glass-card {
background: var(--ts-glass-bg, rgba(255, 255, 255, 0.95)) !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
color: var(--ts-text-primary, #0f172a);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}
[data-bs-theme="dark"] .glass-card {
background: var(--ts-glass-bg, rgba(15, 23, 42, 0.9)) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
color: var(--ts-text-primary, #f8fafc);
}
[data-bs-theme="light"] .text-info {
color: #0284c7 !important;
}
[data-bs-theme="light"] .text-primary {
color: var(--ts-primary, #2563eb) !important;
}
[data-bs-theme="light"] .text-cyan,
[data-bs-theme="light"] .text-turbo-cyan {
color: #0891b2 !important;
}
[data-bs-theme="light"] .badge.bg-info {
background-color: rgba(2, 132, 199, 0.15) !important;
color: #0284c7 !important;
}
[data-bs-theme="light"] .badge.bg-primary {
background-color: rgba(37, 99, 235, 0.15) !important;
color: #2563eb !important;
}
.form-label {
font-size: 0.8125rem !important;
font-weight: 600 !important;
letter-spacing: 0.025em !important;
text-transform: uppercase !important;
margin-bottom: 0.5rem !important;
display: inline-block !important;
transition: color 0.2s ease !important;
}
[data-bs-theme="dark"] .form-label {
color: var(--ts-text-secondary, #94a3b8) !important;
}
[data-bs-theme="dark"] .form-label:hover {
color: var(--ts-text-primary, #f8fafc) !important;
}
[data-bs-theme="light"] .form-label {
color: #64748b !important;
}
[data-bs-theme="light"] .form-label:hover {
color: #334155 !important;
}
.form-label.required::after,
.form-label[required]::after {
content: "*";
color: var(--ts-danger, #ef4444);
margin-left: 0.25rem;
}
.form-label-lg {
font-size: 0.875rem !important;
}
.form-label-sm {
font-size: 0.75rem !important;
}
.form-control:focus+.form-label,
.form-select:focus+.form-label {
color: var(--ts-primary, #3b82f6) !important;
}
.badge {
padding: 0.35rem 0.75rem !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
border-radius: 6px !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.25rem !important;
transition: all 0.2s ease !important;
}
.badge.rounded-pill {
border-radius: 50rem !important;
padding: 0.35rem 0.85rem !important;
}
.badge.bg-primary {
background-color: rgba(59, 130, 246, 1) !important;
color: #ffffff !important;
border: 1px solid rgba(59, 130, 246, 0.3) !important;
}
[data-bs-theme="light"] .badge.bg-primary {
background-color: rgba(37, 99, 235, 0.12) !important;
color: #2563eb !important;
border: 1px solid rgba(37, 99, 235, 0.3) !important;
}
.badge.bg-success {
background-color: rgba(16, 185, 129, 1) !important;
color: #ffffff !important;
border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
[data-bs-theme="light"] .badge.bg-success {
background-color: rgba(16, 185, 129, 0.12) !important;
color: #059669 !important;
border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
.badge.bg-warning {
background-color: rgba(245, 158, 11, 1) !important;
color: #000000 !important;
border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
[data-bs-theme="light"] .badge.bg-warning {
background-color: rgba(245, 158, 11, 0.15) !important;
color: #d97706 !important;
border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
.badge.bg-danger {
background-color: rgba(239, 68, 68, 1) !important;
color: #ffffff !important;
border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
[data-bs-theme="light"] .badge.bg-danger {
background-color: rgba(239, 68, 68, 0.12) !important;
color: #dc2626 !important;
border: 1px solid rgba(239, 68, 68, 0.3) !important;
}
.badge.bg-info {
background-color: rgba(6, 182, 212, 1) !important;
color: #ffffff !important;
border: 1px solid rgba(6, 182, 212, 0.3) !important;
}
[data-bs-theme="light"] .badge.bg-info {
background-color: rgba(6, 182, 212, 0.12) !important;
color: #0891b2 !important;
border: 1px solid rgba(6, 182, 212, 0.3) !important;
}
.badge.bg-secondary {
background-color: rgba(100, 116, 139, 1) !important;
color: #ffffff !important;
border: 1px solid rgba(100, 116, 139, 0.3) !important;
}
[data-bs-theme="light"] .badge.bg-secondary {
background-color: rgba(100, 116, 139, 0.12) !important;
color: #475569 !important;
border: 1px solid rgba(100, 116, 139, 0.3) !important;
}
.badge.bg-dark {
background-color: rgba(30, 41, 59, 1) !important;
color: #ffffff !important;
border: 1px solid rgba(148, 163, 184, 0.2) !important;
}
[data-bs-theme="light"] .badge.bg-dark {
background-color: rgba(15, 23, 42, 0.08) !important;
color: #0f172a !important;
border: 1px solid rgba(15, 23, 42, 0.2) !important;
}
.badge.bg-light {
background-color: rgba(248, 250, 252, 0.1) !important;
color: var(--ts-text-primary, #f8fafc) !important;
border: 1px solid rgba(148, 163, 184, 0.2) !important;
}
[data-bs-theme="light"] .badge.bg-light {
background-color: rgba(241, 245, 249, 1) !important;
color: #475569 !important;
border: 1px solid rgba(148, 163, 184, 0.2) !important;
}
a.badge:hover,
button.badge:hover,
.badge.clickable:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
opacity: 0.9 !important;
}
@media (max-width: 576px) {
.btn {
padding: 0.5rem 0.75rem !important;
font-size: 0.875rem !important;
white-space: normal !important;
height: auto !important;
}
.fs-4 {
font-size: 1.25rem !important;
}
}
:root {
--ts-glass-bg: rgba(20, 20, 22, 0.4);
--ts-glass-border: rgba(255, 255, 255, 0.1);
--ts-watermark-opacity: 0.05;
--ts-glass-blur: 20px;
--ts-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.dark {
--ts-glass-bg: rgba(15, 23, 42, 0.7);
--ts-glass-border: rgba(255, 255, 255, 0.05);
--ts-watermark-opacity: 0.035;
}
.ts-watermark {
opacity: var(--ts-watermark-opacity) !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
filter: blur(1px) grayscale(0.5);
z-index: 0;
}
.ts-glass-input {
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.05);
color: var(--ts-text-primary) !important;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.ts-glass-input:focus {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(59, 130, 246, 0.3);
box-shadow: 0 0 30px rgba(59, 130, 246, 0.1);
}
[data-bs-theme="light"] .ts-glass-input {
background: #ffffff;
border: 1px solid #e2e8f0;
backdrop-filter: none;
}
[data-bs-theme="light"] .ts-glass-input:focus {
background: #ffffff;
border-color: var(--ts-primary);
box-shadow: 0 0 0 3px rgba(var(--ts-primary-rgb), 0.1);
}
.dark .ts-glass-input,
[data-bs-theme="dark"] .ts-glass-input {
background: rgba(15, 23, 42, 0.4);
}
.ts-modal-label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ts-gray-500);
margin-bottom: 0.5rem;
}
[data-bs-theme="light"] {
--ts-glass-bg: rgba(255, 255, 255, 0.65);
--ts-glass-border: rgba(255, 255, 255, 0.4);
--ts-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}
.glass-card {
background: var(--ts-glass-bg);
backdrop-filter: blur(var(--ts-glass-blur));
-webkit-backdrop-filter: blur(var(--ts-glass-blur));
border: 1px solid var(--ts-glass-border);
border-top: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: var(--ts-card-shadow);
border-radius: 16px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-bs-theme="dark"] .glass-card {
background: var(--ts-glass-bg);
border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.glass-panel {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
}
[data-bs-theme="light"] .glass-panel {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.05);
}
.glass-alert {
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border-radius: 12px;
padding: 1rem;
}
.glass-alert-success {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
border-color: rgba(16, 185, 129, 0.25);
color: #34d399;
}
[data-bs-theme="light"] .glass-alert-success {
color: #059669;
}
.glass-alert-info {
background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%);
border-color: rgba(6, 182, 212, 0.25);
color: #22d3ee;
}
[data-bs-theme="light"] .glass-alert-info {
color: #0891b2;
}
.glass-alert-warning {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.1) 100%);
border-color: rgba(245, 158, 11, 0.25);
color: #fbbf24;
}
[data-bs-theme="light"] .glass-alert-warning {
color: #d97706;
}
.glass-input {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--ts-text-primary);
backdrop-filter: blur(10px);
border-radius: 8px;
}
.glass-input:focus {
background: rgba(0, 0, 0, 0.3);
border-color: var(--ts-primary);
box-shadow: 0 0 0 4px rgba(var(--ts-primary-rgb), 0.1);
color: var(--ts-text-primary);
}
[data-bs-theme="light"] .glass-input {
background: rgba(255, 255, 255, 0.5);
border-color: rgba(0, 0, 0, 0.1);
color: var(--ts-text-primary);
}
.admin-text-primary {
color: var(--ts-text-primary);
}
.admin-text-secondary {
color: var(--ts-text-secondary);
}
.admin-text-muted {
color: var(--ts-text-muted);
}
.glass-panel {
background: var(--ts-bg-surface);
border: 1px solid var(--ts-border);
border-radius: 16px;
box-shadow: var(--ts-shadow-md);
}
.glass-panel:hover {
border-color: var(--ts-border-hover);
}
.content-card {
background: var(--ts-bg-surface);
border: 1px solid var(--ts-border);
border-radius: 16px;
box-shadow: var(--ts-shadow-md);
transition: transform 0.2s, box-shadow 0.2s;
}
.content-card:hover {
border-color: var(--ts-border-hover);
}
.ts-footer {
background: var(--ts-glass-bg) !important;
backdrop-filter: blur(var(--ts-glass-blur));
-webkit-backdrop-filter: blur(var(--ts-glass-blur));
border-top: 1px solid var(--ts-glass-border) !important;
color: var(--ts-text-secondary);
}
.ts-footer .text-muted {
color: var(--ts-text-muted) !important;
}
.gradient-neural {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
border: none !important;
transition: all 0.3s ease;
}
.gradient-neural:hover {
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.45);
transform: translateY(-1px);
}
.letter-spacing-1 {
letter-spacing: 0.025em;
}
.ls-1 {
letter-spacing: 0.05em;
}
[data-bs-theme="dark"] .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-secondary,
[data-bs-theme="dark"] .badge.bg-success,
[data-bs-theme="dark"] .badge.bg-danger,
[data-bs-theme="dark"] .badge.bg-info,
[data-bs-theme="dark"] .badge.bg-dark {
color: #ffffff !important;
}
.badge.bg-light,
.badge.bg-white {
color: #1e293b !important;
}
.badge.badge-neural {
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="light"] .badge.text-white {
color: #ffffff !important;
}
[data-bs-theme="light"] .badge.text-dark {
color: #0f172a !important;
}
[data-bs-theme="light"] .badge.text-primary,
[data-bs-theme="light"] .badge.text-secondary,
[data-bs-theme="light"] .badge.text-success,
[data-bs-theme="light"] .badge.text-danger,
[data-bs-theme="light"] .badge.text-info {
font-weight: 700 !important;
}
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05) !important; }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }
.bg-white\/50 { background-color: rgba(255, 255, 255, 0.5) !important; }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8) !important; }
.border-white\/5 { border-color: rgba(255, 255, 255, 0.05) !important; }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }
[data-bs-theme="light"] .bg-white\/5 { background-color: rgba(0, 0, 0, 0.03) !important; }
[data-bs-theme="light"] .bg-white\/10 { background-color: rgba(0, 0, 0, 0.05) !important; }
[data-bs-theme="light"] .bg-white\/50 { background-color: rgba(0, 0, 0, 0.04) !important; }
[data-bs-theme="light"] .bg-white\/80 { background-color: rgba(0, 0, 0, 0.06) !important; }
[data-bs-theme="light"] .border-white\/5 { border-color: rgba(0, 0, 0, 0.06) !important; }
[data-bs-theme="light"] .border-white\/10 { border-color: rgba(0, 0, 0, 0.08) !important; }
[data-bs-theme="light"] .ts-glass-input {
background: rgba(0, 0, 0, 0.03) !important;
border-color: rgba(0, 0, 0, 0.1) !important;
color: var(--ts-text-primary, #0f172a) !important;
}
[data-bs-theme="light"] .ts-glass-input:focus {
background: rgba(0, 0, 0, 0.02) !important;
border-color: var(--ts-primary) !important;
}
[data-bs-theme="light"] .btn-secondary:hover,
[data-bs-theme="light"] .btn-outline-secondary:hover {
background: rgba(0, 0, 0, 0.06) !important;
color: var(--ts-text-primary, #0f172a) !important;
}
[data-bs-theme="light"] .glass-sidebar {
background: var(--ts-sidebar-bg, #ffffff) !important;
border-right-color: rgba(0, 0, 0, 0.08) !important;
}
[data-bs-theme="light"] .glass-card > .text-white,
[data-bs-theme="light"] .glass-card > * > .text-white:not(.badge):not(.btn):not(i):not([class*="bg-"]):not([class*="ts-stat"]) {
color: var(--ts-text-primary, #0f172a) !important;
}
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select {
background-color: #ffffff;
border-color: rgba(0, 0, 0, 0.12);
color: var(--ts-text-primary, #0f172a);
}
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus {
background-color: #ffffff;
border-color: var(--ts-primary);
box-shadow: 0 0 0 3px rgba(var(--ts-primary-rgb), 0.1);
}
[data-bs-theme="light"] .modal-content {
background: #ffffff;
border-color: rgba(0, 0, 0, 0.08);
color: var(--ts-text-primary, #0f172a);
}
[data-bs-theme="light"] .modal-header {
border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-bs-theme="light"] .modal-footer {
border-top-color: rgba(0, 0, 0, 0.08);
}
.ts-bg-gradient::before,
.ambient-glow,
.ts-notification-badge,
.sr-dino-emoji {
will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
.ts-bg-gradient::before,
.ambient-glow,
.ts-notification-badge,
.ts-btn-glow,
.sr-dino-emoji,
.sr-version-badge,
.ts-nav-alert-subtle,
.ts-nav-alert-subtle::after,
.ts-fade-in,
.ts-slide-in,
.ts-skeleton,
.ts-lang-dropdown,
.ts-notif-badge-ultra.pulse,
.ts-notif-dropdown {
animation: none !important;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
[data-bs-theme="light"] .position-absolute.opacity-10,
[data-bs-theme="light"] .invoice-hero .opacity-10 {
opacity: 0.035 !important;
}
[data-bs-theme="light"] .bg-opacity-10 {
--bs-bg-opacity: 0.07 !important;
}
[data-bs-theme="light"] .bg-opacity-5 {
--bs-bg-opacity: 0.04 !important;
}
[data-bs-theme="light"] .bg-opacity-25 {
--bs-bg-opacity: 0.1 !important;
}
[data-bs-theme="light"] .border-opacity-10 {
--bs-border-opacity: 0.15 !important;
}
[data-bs-theme="light"] .border-opacity-25 {
--bs-border-opacity: 0.2 !important;
}
[data-bs-theme="light"] .badge.bg-primary.bg-opacity-10,
[data-bs-theme="light"] .badge.bg-primary[class*="bg-opacity"] {
background-color: rgba(37, 99, 235, 0.08) !important;
color: #1d4ed8 !important;
}
[data-bs-theme="light"] .badge.bg-success.bg-opacity-10,
[data-bs-theme="light"] .badge.bg-success[class*="bg-opacity"] {
background-color: rgba(22, 163, 74, 0.08) !important;
color: #15803d !important;
}
[data-bs-theme="light"] .badge.bg-info.bg-opacity-10,
[data-bs-theme="light"] .badge.bg-info[class*="bg-opacity"] {
background-color: rgba(14, 165, 233, 0.08) !important;
color: #0369a1 !important;
}
[data-bs-theme="light"] .badge.bg-warning.bg-opacity-10,
[data-bs-theme="light"] .badge.bg-warning[class*="bg-opacity"] {
background-color: rgba(245, 158, 11, 0.08) !important;
color: #b45309 !important;
}
[data-bs-theme="light"] .badge.bg-danger.bg-opacity-10,
[data-bs-theme="light"] .badge.bg-danger[class*="bg-opacity"] {
background-color: rgba(239, 68, 68, 0.08) !important;
color: #b91c1c !important;
}
[data-bs-theme="light"] .badge.border-primary {
border-color: rgba(37, 99, 235, 0.2) !important;
}
[data-bs-theme="light"] .badge.border-success {
border-color: rgba(22, 163, 74, 0.2) !important;
}
[data-bs-theme="light"] .badge.border-info {
border-color: rgba(14, 165, 233, 0.2) !important;
}
[data-bs-theme="light"] .badge.border-warning {
border-color: rgba(245, 158, 11, 0.2) !important;
}
[data-bs-theme="light"] .badge.border-danger {
border-color: rgba(239, 68, 68, 0.2) !important;
}
.invoice-stat-card .rounded-3[style*="48px"],
.glass-card .rounded-3[style*="48px"],
.glass-card .rounded-3[style*="64px"] {
border-radius: 50% !important;
width: 42px !important;
height: 42px !important;
font-size: 1.1rem !important;
}
.invoice-stat-card .rounded-3[style*="48px"] i,
.glass-card .rounded-3[style*="48px"] i,
.glass-card .rounded-3[style*="64px"] i {
font-size: 1.1rem !important;
}
[data-bs-theme="light"] code,
[data-bs-theme="light"] .invoice-txid {
color: #475569 !important;
background: rgba(0, 0, 0, 0.04) !important;
padding: 0.15em 0.45em;
border-radius: 4px;
}
[data-bs-theme="light"] .table-hover tbody tr:hover,
[data-bs-theme="light"] .invoice-table-row:hover {
background: rgba(37, 99, 235, 0.025) !important;
}
[data-bs-theme="light"] .invoice-revenue-card {
background: rgba(0, 0, 0, 0.025) !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
[data-bs-theme="light"] code.placeholder-tag,
[data-bs-theme="light"] .bg-dark.bg-opacity-25 {
background-color: rgba(0, 0, 0, 0.06) !important;
color: #1e293b !important;
}
[data-bs-theme="light"] .accordion-button.bg-transparent {
color: #0f172a !important;
}
[data-bs-theme="light"] .accordion-button.bg-transparent::after {
filter: none !important;
}
[data-bs-theme="light"] .bi-funnel.text-primary {
color: #64748b !important;
}
[data-bs-theme="light"] .ts-btn-primary,
[data-bs-theme="light"] .btn-primary {
box-shadow: 0 2px 8px rgba(var(--ts-primary-rgb), 0.25) !important;
}
[data-bs-theme="light"] .ts-btn-secondary,
[data-bs-theme="light"] .btn-secondary,
[data-bs-theme="light"] .btn-outline-secondary {
background: #f8fafc !important;
color: #334155 !important;
border: 1px solid #e2e8f0 !important;
}
[data-bs-theme="light"] .ts-btn-secondary:hover,
[data-bs-theme="light"] .btn-secondary:hover,
[data-bs-theme="light"] .btn-outline-secondary:hover {
background: #e2e8f0 !important;
color: #0f172a !important;
border-color: #cbd5e1 !important;
transform: translateY(-1px);
}
[data-bs-theme="light"] .glass-card {
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
[data-bs-theme="light"] .ts-card {
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
[data-bs-theme="light"] .progress {
background-color: #f1f5f9 !important;
}
[data-bs-theme="light"] .alert-success {
background: rgba(22, 163, 74, 0.06) !important;
color: #15803d !important;
border-color: rgba(22, 163, 74, 0.15) !important;
}
[data-bs-theme="light"] .alert-danger {
background: rgba(239, 68, 68, 0.06) !important;
color: #b91c1c !important;
border-color: rgba(239, 68, 68, 0.15) !important;
}
@media (max-width: 767.98px) {
.display-5 { font-size: 1.5rem !important; }
.display-6 { font-size: 1.25rem !important; }
.lead { font-size: 0.9rem !important; }
.p-5 { padding: 1.25rem !important; }
.p-lg-5 { padding: 1.25rem !important; }
.position-absolute.opacity-10,
.position-absolute[style*="font-size: 8rem"] {
display: none !important;
}
.invoice-revenue-card { display: none !important; }
.d-flex.flex-wrap.gap-3 > .ts-btn,
.d-flex.flex-wrap.gap-3 > .btn,
.d-flex.flex-wrap.gap-3 > a.ts-btn,
.d-flex.flex-wrap.gap-2 > .ts-btn,
.d-flex.flex-wrap.gap-2 > .btn {
width: 100% !important;
justify-content: center !important;
}
.row.g-3 > [class*="col-md-2"],
.row.g-3 > [class*="col-md-3"] {
flex: 0 0 50% !important;
max-width: 50% !important;
}
.row.g-3 > .col-md-3 {
flex: 0 0 50% !important;
max-width: 50% !important;
}
.table thead th,
.ts-table thead th {
padding: 10px 12px !important;
font-size: 0.65rem !important;
}
.table tbody td,
.ts-table tbody td {
padding: 10px 12px !important;
font-size: 0.8125rem !important;
}
.glass-card.p-4 { padding: 1rem !important; }
.glass-card.p-5 { padding: 1.25rem !important; }
.ts-card.p-4 { padding: 1rem !important; }
.h3, h3 { font-size: 1.1rem !important; }
.h5, h5 { font-size: 0.95rem !important; }
.h6, h6 { font-size: 0.85rem !important; }
}
@media (max-width: 576px) {
.container-fluid.py-4 { padding: 0.75rem !important; }
.container.py-4 { padding: 0.75rem !important; }
.display-5 { font-size: 1.3rem !important; }
.mb-5 { margin-bottom: 1.5rem !important; }
.rounded-4 { border-radius: 0.75rem !important; }
.ts-btn:not(.ts-btn-sm),
.btn:not(.btn-sm):not(.btn-close):not(.accordion-button):not([data-bs-toggle]) {
width: 100% !important;
justify-content: center !important;
}
.d-flex.gap-2 > .ts-btn,
.d-flex.gap-3 > .ts-btn,
.d-flex.gap-2 > .btn,
.d-flex.gap-3 > .btn,
.d-flex.gap-2 > a.ts-btn,
.d-flex.gap-3 > a.ts-btn {
width: 100% !important;
}
.d-flex.flex-wrap.gap-2,
.d-flex.flex-wrap.gap-3 {
flex-direction: column !important;
}
.ts-btn-sm,
.btn-sm {
width: auto !important;
min-width: 36px;
}
td .d-flex.gap-2 {
flex-direction: row !important;
}
.row.g-3 > [class*="col-sm-6"],
.row.g-3 > [class*="col-sm-4"],
.row.g-3 > [class*="col-md-2"],
.row.g-3 > [class*="col-md-3"],
.row.g-3 > [class*="col-6"] {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.row.g-3 > .col-sm-6,
.row.g-3 > .col-md-3 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.glass-card.p-4, .ts-card.p-4 { padding: 0.875rem !important; }
.badge {
font-size: 0.65rem !important;
padding: 0.25em 0.5em !important;
}
.col-xl-3.col-lg-4:last-child > .glass-card:has(.accordion) {
display: none;
}
.pagination { gap: 2px !important; }
.pagination .page-link {
padding: 0.3rem 0.6rem !important;
font-size: 0.75rem !important;
}
.invoice-mobile-card {
padding: 0.875rem !important;
}
.row.g-3 > .col-auto {
width: 50% !important;
flex: 0 0 50% !important;
}
.form-label {
font-size: 0.75rem !important;
}
.ts-input, .ts-select, .form-control, .form-select {
min-height: 44px !important;
font-size: 16px !important; 
}
.table-responsive {
-webkit-overflow-scrolling: touch;
}
.table-responsive::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 30px;
background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
pointer-events: none;
z-index: 1;
}
[data-bs-theme="dark"] .table-responsive::after {
background: linear-gradient(to left, rgba(15,23,42,0.9), transparent);
}
.row.g-4 { --bs-gutter-y: 0.75rem !important; --bs-gutter-x: 0.75rem !important; }
.row.g-3 { --bs-gutter-y: 0.5rem !important; --bs-gutter-x: 0.5rem !important; }
}
@media (max-width: 390px) {
.display-5 { font-size: 1.15rem !important; }
.container-fluid.py-4, .container.py-4 { padding: 0.5rem !important; }
.glass-card.p-4, .ts-card.p-4 { padding: 0.75rem !important; }
.ts-btn { height: 40px; padding: 0 14px; font-size: 0.8125rem !important; }
.ts-btn-lg { height: 44px; padding: 0 18px; }
}
.glass-card,
.glass-panel,
.glass-sidebar,
.glass-alert {
contain: layout style;
}
.ts-header {
contain: layout;
}
.ts-sidebar {
contain: layout style;
-webkit-overflow-scrolling: touch;
}
[data-bs-theme="light"] .glass-card .text-white:not(.text-white-50),
[data-bs-theme="light"] .ts-card .text-white:not(.text-white-50),
[data-bs-theme="light"] .card .text-white:not(.text-white-50),
[data-bs-theme="light"] .modal-content .text-white:not(.text-white-50),
[data-bs-theme="light"] .dropdown-menu .text-white:not(.text-white-50) {
color: var(--bs-body-color, #0f172a);
}
[data-bs-theme="light"] .glass-card .text-white-50,
[data-bs-theme="light"] .ts-card .text-white-50,
[data-bs-theme="light"] .card .text-white-50 {
color: var(--ts-text-muted, #64748b);
}
.ds-field:focus-visible,
.ds-input:focus-visible,
.ep-price-field:focus-visible,
.wfw-input:focus-visible,
.wfw-textarea:focus-visible,
.wfw-select:focus-visible,
.ts-input:focus-visible,
.ts-select:focus-visible,
.ts-textarea:focus-visible {
outline: 2px solid var(--ts-primary, #6366f1);
outline-offset: 2px;
border-color: var(--ts-primary, #6366f1);
}
@media (max-width: 767.98px) {
.ts-header {
--ts-glass-bg: rgba(12, 18, 32, 0.93) !important;
}
[data-bs-theme="light"] .ts-header {
--ts-glass-bg: rgba(255, 255, 255, 0.97) !important;
}
.ts-sidebar {
background: rgba(12, 18, 32, 0.96) !important;
}
[data-bs-theme="light"] .ts-sidebar {
background: rgba(255, 255, 255, 0.98) !important;
}
.ts-sidebar-overlay {
background: rgba(0, 0, 0, 0.55) !important;
}
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.ts-header {
--ts-glass-bg: rgba(12, 18, 32, 0.97) !important;
}
[data-bs-theme="light"] .ts-header {
--ts-glass-bg: rgba(255, 255, 255, 0.99) !important;
}
.ts-sidebar {
background: rgba(12, 18, 32, 0.99) !important;
}
[data-bs-theme="light"] .ts-sidebar {
background: rgba(255, 255, 255, 1) !important;
}
}
[data-palette="emerald"][data-bs-theme="dark"] {
--ts-primary: #10b981;
--ts-primary-rgb: 16, 185, 129;
--ts-primary-light: #34d399;
--ts-primary-dark: #059669;
--ts-accent: #06b6d4;
--ts-accent-rgb: 6, 182, 212;
--ts-purple: #f59e0b;
--ts-bg-base: #0c1a14;
--ts-bg-surface: #162b22;
--ts-surface-rgb: 22, 43, 34;
--ts-bg-elevated: #1e3a2e;
--ts-bg-hover: #2a4d3c;
--ts-border: rgba(16, 185, 129, 0.1);
--ts-border-hover: rgba(16, 185, 129, 0.2);
--ts-glass-bg: rgba(12, 26, 20, 0.8);
--ts-glow-primary: 0 0 20px rgba(16, 185, 129, 0.4), 0 0 40px rgba(16, 185, 129, 0.2);
}
[data-palette="emerald"][data-bs-theme="light"] {
--ts-primary: #059669;
--ts-primary-rgb: 5, 150, 105;
--ts-primary-light: #10b981;
--ts-primary-dark: #047857;
--ts-accent: #0891b2;
--ts-accent-rgb: 8, 145, 178;
--ts-purple: #d97706;
--ts-bg-base: #f0fdf4;
--ts-bg-surface: #ffffff;
--ts-surface-rgb: 255, 255, 255;
--ts-bg-elevated: #ecfdf5;
--ts-bg-hover: #d1fae5;
--ts-border: rgba(5, 150, 105, 0.12);
--ts-glass-bg: rgba(240, 253, 244, 0.92);
}
[data-palette="amber"][data-bs-theme="dark"] {
--ts-primary: #f59e0b;
--ts-primary-rgb: 245, 158, 11;
--ts-primary-light: #fbbf24;
--ts-primary-dark: #d97706;
--ts-accent: #ef4444;
--ts-accent-rgb: 239, 68, 68;
--ts-purple: #8b5cf6;
--ts-bg-base: #1a1207;
--ts-bg-surface: #2b2010;
--ts-surface-rgb: 43, 32, 16;
--ts-bg-elevated: #3d2e18;
--ts-bg-hover: #4f3c20;
--ts-border: rgba(245, 158, 11, 0.1);
--ts-border-hover: rgba(245, 158, 11, 0.2);
--ts-glass-bg: rgba(26, 18, 7, 0.8);
--ts-glow-primary: 0 0 20px rgba(245, 158, 11, 0.4), 0 0 40px rgba(245, 158, 11, 0.2);
}
[data-palette="amber"][data-bs-theme="light"] {
--ts-primary: #d97706;
--ts-primary-rgb: 217, 119, 6;
--ts-primary-light: #f59e0b;
--ts-primary-dark: #b45309;
--ts-accent: #dc2626;
--ts-accent-rgb: 220, 38, 38;
--ts-purple: #7c3aed;
--ts-bg-base: #fffbeb;
--ts-bg-surface: #ffffff;
--ts-surface-rgb: 255, 255, 255;
--ts-bg-elevated: #fef3c7;
--ts-bg-hover: #fde68a;
--ts-border: rgba(217, 119, 6, 0.12);
--ts-glass-bg: rgba(255, 251, 235, 0.92);
}
[data-palette="slate"][data-bs-theme="dark"] {
--ts-primary: #94a3b8;
--ts-primary-rgb: 148, 163, 184;
--ts-primary-light: #cbd5e1;
--ts-primary-dark: #64748b;
--ts-accent: #3b82f6;
--ts-accent-rgb: 59, 130, 246;
--ts-purple: #a78bfa;
--ts-bg-base: #0f172a;
--ts-bg-surface: #1e293b;
--ts-surface-rgb: 30, 41, 59;
--ts-bg-elevated: #334155;
--ts-bg-hover: #475569;
--ts-border: rgba(148, 163, 184, 0.08);
--ts-border-hover: rgba(148, 163, 184, 0.15);
--ts-glass-bg: rgba(15, 23, 42, 0.85);
--ts-glow-primary: 0 0 20px rgba(148, 163, 184, 0.2), 0 0 40px rgba(148, 163, 184, 0.1);
}
[data-palette="slate"][data-bs-theme="light"] {
--ts-primary: #475569;
--ts-primary-rgb: 71, 85, 105;
--ts-primary-light: #64748b;
--ts-primary-dark: #334155;
--ts-accent: #2563eb;
--ts-accent-rgb: 37, 99, 235;
--ts-purple: #7c3aed;
--ts-bg-base: #f8fafc;
--ts-bg-surface: #ffffff;
--ts-surface-rgb: 255, 255, 255;
--ts-bg-elevated: #f1f5f9;
--ts-bg-hover: #e2e8f0;
--ts-border: rgba(71, 85, 105, 0.1);
--ts-glass-bg: rgba(248, 250, 252, 0.95);
}
.min-width-0 {
min-width: 0 !important;
}
@media (max-width: 767.98px) {
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input:not([type]),
select,
textarea,
.form-control,
.form-select,
.ts-input,
.ts-select,
.qpq-select,
.ts-vehicle-search-input,
.ts-smart-pick-input {
font-size: 16px !important;
}
.ts-btn-icon.ts-btn-sm {
width: 44px;
height: 44px;
}
}
@media (max-width: 575.98px) {
.container, .container-fluid, .container-lg, .container-xl {
padding-left: 12px !important;
padding-right: 12px !important;
}
main, .main-content {
padding-left: 4px;
padding-right: 4px;
}
.glass-card,
.ts-card,
.frs-glass-card {
border-radius: 12px;
}
.glass-card.p-4,
.glass-card.p-5,
.ts-card.p-4,
.ts-card.p-5,
.frs-glass-card.p-4,
.frs-glass-card.p-5 {
padding: 14px !important;
}
.glass-card.p-3,
.ts-card.p-3 {
padding: 12px !important;
}
.row-mobile-2up > [class*="col-"] {
flex: 0 0 50% !important;
max-width: 50% !important;
padding-left: 6px !important;
padding-right: 6px !important;
margin-bottom: 8px;
}
.glass-card > .table,
.ts-card > .table,
table.ts-table:not(.table-responsive table) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.modal-body { padding: 16px !important; }
.modal-header { padding: 12px 16px !important; }
.modal-footer { padding: 12px 16px !important; gap: 8px; }
.modal-footer .btn { width: auto; flex: 1 1 auto; min-width: 0; }
.modal-dialog { margin: 8px; max-width: calc(100% - 16px); }
.ts-sidebar.is-open,
.ts-mobile-drawer.is-open {
background: rgba(12, 18, 32, 0.96) !important;
}
[data-bs-theme="light"] .ts-sidebar.is-open,
[data-bs-theme="light"] .ts-mobile-drawer.is-open {
background: rgba(248, 250, 252, 0.98) !important;
}
.page-hero,
.ts-hero,
.admin-hero {
padding: 16px !important;
border-radius: 12px;
}
.page-hero .stats-row,
.ts-hero .stats-row,
.admin-hero .stats-row {
flex-wrap: wrap;
gap: 8px;
}
.page-hero .stat-card,
.ts-hero .stat-card,
.admin-hero .stat-card {
flex: 1 1 calc(50% - 4px);
min-width: 0;
padding: 8px !important;
}
.has-sticky-cta {
padding-bottom: 6rem !important;
}
.action-buttons,
.form-actions,
.modal-footer .btn-group {
flex-direction: column !important;
width: 100%;
gap: 8px;
}
.action-buttons > *,
.form-actions > * {
width: 100%;
min-height: 44px;
}
h1, .h1 { font-size: 1.5rem !important; line-height: 1.25; }
h2, .h2 { font-size: 1.25rem !important; line-height: 1.3; }
h3, .h3 { font-size: 1.1rem !important; }
h4, .h4 { font-size: 1rem !important; }
.badge, .chip, .ts-tag {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tawk-min-container,
#tawkchat-container,
.ts-help-bubble,
.ts-chat-bubble {
transform: scale(0.85);
transform-origin: bottom right;
}
.form-row-inline {
flex-direction: column !important;
align-items: stretch !important;
gap: 6px;
}
.form-row-inline > label {
margin-bottom: 0;
}
.pagination {
justify-content: center;
flex-wrap: nowrap;
overflow-x: auto;
max-width: 100%;
padding-bottom: 4px;
}
.page-item .page-link {
min-width: 36px;
padding: 6px 10px;
font-size: 0.85rem;
}
.avatar-md, .ts-avatar-md { width: 36px !important; height: 36px !important; }
.nav-tabs, .nav-pills {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.nav-tabs .nav-link, .nav-pills .nav-link {
white-space: nowrap;
flex-shrink: 0;
}
}
:root {
--ts-z-base: 1;
--ts-z-sticky: 1020;
--ts-z-overlay: 1030;
--ts-z-sidebar: 1035;
--ts-z-header: 1040;       
--ts-z-header-mobile: 1028;
--ts-z-dropdown: 1050;
--ts-z-modal: 1060;
--ts-z-toast: 1080;
--ts-z-banner: 2000;
}
nav.ts-header {
z-index: var(--ts-z-header);
}
@media (max-width: 991.98px) {
nav.ts-header {
z-index: var(--ts-z-header-mobile);
}
}
@media (max-width: 991.98px) {
.ts-sidebar {
z-index: var(--ts-z-sidebar);
max-width: 88vw;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
will-change: transform;
background: var(--ts-bg-surface) !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
[data-bs-theme="dark"] .ts-sidebar {
background: var(--ts-sidebar-bg, #0f172a) !important;
}
[data-bs-theme="light"] .ts-sidebar {
background: var(--ts-sidebar-bg, #ffffff) !important;
}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.ts-sidebar { background: var(--ts-bg-surface) !important; }
[data-bs-theme="dark"] .ts-sidebar { background: #0f172a !important; }
[data-bs-theme="light"] .ts-sidebar { background: #ffffff !important; }
}
html.ts-sidebar-open,
html.ts-sidebar-open body {
overflow: hidden !important;
overscroll-behavior: contain;
touch-action: none;
}
@media (min-width: 992px) {
html.ts-sidebar-open,
html.ts-sidebar-open body {
overflow: auto !important;
touch-action: auto;
}
}
.ts-sidebar-overlay {
z-index: var(--ts-z-overlay) !important;
}
@media (max-width: 991.98px) {
.ts-sidebar-overlay {
background: rgba(0, 0, 0, 0.65) !important;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
}
@media (max-width: 991.98px) {
.ts-sidebar > a:first-child,
.glass-sidebar > a:first-child {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.ts-sidebar > a:first-child img.img-fluid,
.glass-sidebar > a:first-child img.img-fluid {
max-height: 38px !important;
}
.ts-sidebar > a:first-child .fs-5,
.glass-sidebar > a:first-child .fs-5 {
font-size: 1.05rem !important;
}
}
.ts-nav-more {
display: none;
}
@media (max-width: 991.98px) {
.ts-nav-more {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.ts-navbar-actions .ts-collapsible-action {
display: none !important;
}
}
.ts-nav-more-dropdown {
min-width: 240px;
padding: 6px;
max-height: calc(100vh - 80px);
overflow-y: auto;
overscroll-behavior: contain;
}
.ts-nav-more-dropdown::-webkit-scrollbar {
width: 5px;
}
.ts-nav-more-dropdown::-webkit-scrollbar-thumb {
background: rgba(var(--ts-primary-rgb), 0.35);
border-radius: 10px;
}
.ts-nav-more-dropdown .ts-more-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 12px;
border: none;
background: transparent;
color: var(--ts-text-primary);
border-radius: 8px;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background-color var(--ts-duration) var(--ts-ease);
text-align: left;
}
.ts-nav-more-dropdown .ts-more-item:hover,
.ts-nav-more-dropdown .ts-more-item:focus-visible {
background: rgba(var(--ts-primary-rgb), 0.1);
outline: none;
}
[data-bs-theme="light"] .ts-nav-more-dropdown .ts-more-item:hover,
[data-bs-theme="light"] .ts-nav-more-dropdown .ts-more-item:focus-visible {
background: rgba(var(--ts-primary-rgb), 0.07);
}
.ts-nav-more-dropdown .ts-more-item i.bi {
font-size: 1.1rem;
color: var(--ts-text-secondary);
width: 22px;
text-align: center;
flex-shrink: 0;
}
.ts-nav-more-dropdown .ts-more-item .ts-flag-img {
width: 22px;
height: 16px;
object-fit: cover;
border-radius: 2px;
flex-shrink: 0;
}
.ts-nav-more-dropdown .ts-more-item.active {
background: rgba(var(--ts-primary-rgb), 0.12);
color: var(--ts-primary);
}
.ts-nav-more-dropdown hr.dropdown-divider {
margin: 6px 4px;
border-color: var(--ts-glass-border);
opacity: 0.5;
}
.ts-nav-more-dropdown .ts-more-section-label {
padding: 8px 12px 4px;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--ts-text-muted);
font-weight: 700;
}
.ts-nav-more-dropdown .ts-more-meta {
margin-left: auto;
font-size: 0.7rem;
color: var(--ts-text-muted);
}
@media (max-width: 991.98px) {
.ts-navbar-actions .ts-nav-btn,
.ts-navbar-actions .ts-nav-more,
.ts-sidebar-toggle {
width: 40px !important;
height: 40px !important;
font-size: 1rem !important;
}
.ts-navbar-actions .ts-nav-btn::before,
.ts-navbar-actions .ts-nav-more::before {
content: '';
position: absolute;
inset: -4px;
z-index: -1;
}
.ts-navbar-actions {
gap: 4px !important;
}
}
@media (max-width: 374.98px) {
.ts-navbar-actions .ts-nav-btn,
.ts-navbar-actions .ts-nav-more,
.ts-sidebar-toggle {
width: 38px !important;
height: 38px !important;
}
.ts-nav-avatar {
width: 36px !important;
height: 36px !important;
}
}
.glass-card .row > [class*="col-"],
.row > [class*="col-"] > .glass-card {
min-width: 0;
}
.glass-card h1, .glass-card h2, .glass-card h3,
.glass-card h4, .glass-card h5, .glass-card h6,
.glass-card .display-4, .glass-card .display-5, .glass-card .display-6 {
overflow-wrap: anywhere;
word-break: break-word;
}
@media (max-width: 374.98px) {
.glass-card {
padding: 0.875rem !important;
}
.display-4 { font-size: 1.5rem !important; }
.display-5 { font-size: 1.375rem !important; }
.display-6 { font-size: 1.25rem !important; }
main.flex-grow-1.p-4 {
padding: 0.625rem !important;
}
}
#chartPeriodToggle,
.ts-period-toggle {
flex-shrink: 0;
flex-wrap: nowrap;
}
@media (max-width: 575.98px) {
.glass-card .d-flex.justify-content-between:has(#chartPeriodToggle),
.glass-card .d-flex.justify-content-between:has(.ts-period-toggle) {
flex-wrap: wrap;
gap: 0.75rem;
}
#chartPeriodToggle .btn,
.ts-period-toggle .btn {
padding: 0.25rem 0.625rem !important;
font-size: 0.75rem !important;
}
}
@media (max-width: 575.98px) {
.ts-header h5 {
font-size: 0.95rem !important;
line-height: 1.2;
}
.navbar.ts-header {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
main.flex-grow-1.p-4 {
padding: 0.875rem !important;
}
}
.ts-nav-more:focus-visible {
outline: 2px solid var(--ts-primary);
outline-offset: 2px;
border-radius: 10px;
}
@media (max-width: 991.98px) {
.table-responsive {
max-height: 70vh;
overflow-y: auto;
position: relative;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > table > thead > tr > th {
position: sticky;
top: 0;
z-index: 2;
background: var(--ts-bg-surface);
}
[data-bs-theme="dark"] .table-responsive > .table > thead > tr > th,
[data-bs-theme="dark"] .table-responsive > table > thead > tr > th {
background: var(--ts-bg-elevated, #334155);
}
[data-bs-theme="light"] .table-responsive > .table > thead > tr > th,
[data-bs-theme="light"] .table-responsive > table > thead > tr > th {
background: var(--ts-bg-elevated, #f1f5f9);
}
}
@media (max-width: 991.98px) {
.table-responsive {
background-image:
linear-gradient(to right, var(--ts-bg-surface, #1e293b) 30%, rgba(30, 41, 59, 0)),
linear-gradient(to right, rgba(30, 41, 59, 0), var(--ts-bg-surface, #1e293b) 70%) 100% 0;
background-repeat: no-repeat;
background-color: var(--ts-bg-surface, #1e293b);
background-size: 24px 100%, 24px 100%;
background-attachment: local, local;
}
[data-bs-theme="light"] .table-responsive {
background-image:
linear-gradient(to right, var(--ts-bg-surface, #ffffff) 30%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), var(--ts-bg-surface, #ffffff) 70%) 100% 0;
background-color: var(--ts-bg-surface, #ffffff);
}
}
@media (max-width: 767.98px) {
.table-responsive td code,
.table-responsive td samp,
.table-responsive td .text-monospace,
.table-responsive td .font-monospace {
word-break: break-all;
overflow-wrap: anywhere;
}
.table-responsive td {
max-width: 240px;
}
}
@media (max-width: 575.98px) {
.modal-dialog:not(.modal-dialog-scrollable):not(.modal-fullscreen-sm-down):not(.modal-sm) {
margin: 0;
max-width: 100vw;
min-height: 100vh;
}
.modal-dialog .modal-content {
border-radius: 0;
border-left: 0;
border-right: 0;
min-height: 100vh;
}
}
@media (max-width: 575.98px) {
.pagination {
flex-wrap: wrap;
justify-content: center;
row-gap: 4px;
}
.pagination .page-link {
min-width: 36px;
min-height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 575.98px) {
.dropdown-menu {
max-width: calc(100vw - 1rem);
overflow-wrap: anywhere;
}
}
@media (max-width: 575.98px) {
.ep-bulk-dock,
.sh-floating-save,
[class*="floating-save"],
[class*="bulk-dock"] {
left: 0.5rem !important;
right: 0.5rem !important;
transform: none !important;
max-width: calc(100vw - 1rem) !important;
min-width: 0 !important;
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
}
form#settingsForm,
form#mainForm,
.ts-form-with-floating-cta {
padding-bottom: 6rem;
}
}
@media (max-width: 575.98px) {
.btn-group:not(.btn-group-toggle):not([role="tablist"]) {
flex-wrap: wrap;
gap: 2px;
}
.btn-group:not(.btn-group-toggle):not([role="tablist"]) > .btn {
border-radius: var(--ts-radius-md) !important;
}
}
@media (max-width: 374.98px) {
.col-xl-2.col-md-4.col-sm-6.col-6 {
flex: 0 0 100%;
max-width: 100%;
}
.col-sm-6.col-12,
.col-6.col-md-4 {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (max-width: 374.98px) {
.glass-card.p-4,
.glass-card.p-3 {
padding: 0.75rem !important;
}
.card-body.p-4,
.card-body.p-3 {
padding: 0.75rem !important;
}
}
@media (max-width: 374.98px) {
:root {
--ts-sidebar-width: 260px;
}
}
@media (max-width: 575.98px) {
.nav-tabs, .nav-pills {
position: relative;
}
.nav-tabs::after,
.nav-pills::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 16px;
background: linear-gradient(to right, transparent, var(--ts-bg-base, #0f172a));
pointer-events: none;
}
[data-bs-theme="light"] .nav-tabs::after,
[data-bs-theme="light"] .nav-pills::after {
background: linear-gradient(to right, transparent, var(--ts-bg-base, #f8fafc));
}
}
@media (max-width: 575.98px) {
.breadcrumb {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.breadcrumb::-webkit-scrollbar {
display: none;
}
.breadcrumb-item {
flex-shrink: 0;
white-space: nowrap;
}
}
@media (max-width: 575.98px) {
.input-group > * {
min-width: 0;
}
.input-group:has(> :nth-child(4)) {
flex-wrap: wrap;
}
}
.btn:not(.btn-link):not(.btn-close):not(.page-link):not(.accordion-button):not(.navbar-toggler) {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1.2;
font-weight: 500;
transition: transform var(--ts-duration, 200ms) var(--ts-ease, cubic-bezier(0.4, 0, 0.2, 1)),
box-shadow var(--ts-duration, 200ms) var(--ts-ease, cubic-bezier(0.4, 0, 0.2, 1)),
background-color var(--ts-duration, 200ms) var(--ts-ease, cubic-bezier(0.4, 0, 0.2, 1)),
color var(--ts-duration, 200ms) var(--ts-ease, cubic-bezier(0.4, 0, 0.2, 1)),
border-color var(--ts-duration, 200ms) var(--ts-ease, cubic-bezier(0.4, 0, 0.2, 1));
}
.btn-sm:not(.btn-link):not(.btn-close):not(.page-link) {
min-height: 32px;
font-size: 0.8125rem;
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.btn-lg:not(.btn-link):not(.btn-close) {
min-height: 48px;
font-size: 1rem;
}
.btn-icon, .ts-btn-icon {
width: 40px;
min-width: 40px;
padding: 0 !important;
flex-shrink: 0;
}
.btn-icon.btn-sm, .ts-btn-icon.ts-btn-sm,
.btn-sm.btn-icon, .ts-btn-sm.ts-btn-icon {
width: 32px;
min-width: 32px;
height: 32px;
}
.btn:not(.btn-link):not(.btn-close):not(.accordion-button):not(.page-link):not(:disabled):not(.disabled):hover,
.ts-btn:not(.ts-btn-link):not(:disabled):not(.disabled):hover {
transform: translateY(-1px);
}
.btn:not(.btn-link):not(.btn-close):not(.accordion-button):not(.page-link):not(:disabled):not(.disabled):active,
.ts-btn:not(.ts-btn-link):not(:disabled):not(.disabled):active {
transform: translateY(0);
}
.btn:disabled, .btn.disabled,
.ts-btn:disabled, .ts-btn.disabled,
button:disabled, input:disabled, select:disabled, textarea:disabled,
.form-control:disabled, .ts-input:disabled {
opacity: 0.55;
cursor: not-allowed !important;
pointer-events: none;
}
.btn:focus-visible,
.ts-btn:focus-visible,
.form-control:focus-visible,
.ts-input:focus-visible,
.ts-select:focus-visible,
.ts-textarea:focus-visible,
a:focus-visible,
.nav-link:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
outline: 2px solid var(--ts-primary, #3b82f6);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(var(--ts-primary-rgb, 59, 130, 246), 0.15);
}
[data-bs-theme="light"] .btn:focus-visible,
[data-bs-theme="light"] .ts-btn:focus-visible,
[data-bs-theme="light"] .form-control:focus-visible,
[data-bs-theme="light"] .ts-input:focus-visible {
box-shadow: 0 0 0 4px rgba(var(--ts-primary-rgb, 37, 99, 235), 0.2);
}
.btn, .ts-btn, [role="button"], [data-bs-toggle="dropdown"],
[data-bs-toggle="modal"], [data-bs-toggle="collapse"],
[data-bs-toggle="tab"], summary, .nav-link, .accordion-button,
label[for], .form-check-label {
cursor: pointer;
}
[disabled], .disabled { cursor: not-allowed !important; }
.form-control:not(textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.form-control-sm):not(.form-control-lg) {
min-height: 44px;
}
.form-control-sm:not(textarea) { min-height: 32px; }
.form-control-lg:not(textarea) { min-height: 52px; }
.form-select:not(.form-select-sm):not(.form-select-lg) { min-height: 44px; }
.form-select-sm { min-height: 32px; }
.form-select-lg { min-height: 52px; }
@media (max-width: 575.98px) {
.form-control,
.ts-input, .ts-select, .ts-textarea,
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="time"],
textarea, select {
font-size: max(16px, 0.9375rem) !important;
}
}
.form-control:focus,
.ts-input:focus, .ts-select:focus, .ts-textarea:focus {
border-color: var(--ts-primary, #3b82f6);
box-shadow: 0 0 0 3px rgba(var(--ts-primary-rgb, 59, 130, 246), 0.12);
outline: none;
}
.form-control.is-invalid, .ts-input.is-invalid {
border-color: var(--ts-danger, #ef4444) !important;
}
.form-control.is-invalid:focus, .ts-input.is-invalid:focus {
box-shadow: 0 0 0 3px rgba(var(--ts-danger-rgb, 239, 68, 68), 0.15) !important;
}
.form-control.is-valid, .ts-input.is-valid {
border-color: var(--ts-success, #10b981) !important;
}
.form-control.is-valid:focus, .ts-input.is-valid:focus {
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}
.invalid-feedback {
display: block;
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--ts-danger, #ef4444);
}
.form-label, label.form-label, label:not(.form-check-label):not(.btn) {
margin-bottom: 0.375rem;
font-weight: 500;
font-size: 0.875rem;
color: var(--ts-text-primary);
}
.form-text {
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--ts-text-muted);
}
form .mb-3 { margin-bottom: 1rem; }
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.02em;
}
.badge .bi {
font-size: 0.875em;
line-height: 1;
}
.btn .bi, .ts-btn .bi {
font-size: 1em;
line-height: 1;
vertical-align: -0.05em;
}
.nav-link .bi, .dropdown-item .bi {
font-size: 1.05em;
line-height: 1;
}
.glass-card.is-clickable,
.ts-card.is-clickable,
.card.is-clickable {
cursor: pointer;
transition: transform var(--ts-duration, 200ms) var(--ts-ease),
box-shadow var(--ts-duration, 200ms) var(--ts-ease),
border-color var(--ts-duration, 200ms) var(--ts-ease);
}
.glass-card.is-clickable:hover,
.ts-card.is-clickable:hover,
.card.is-clickable:hover {
transform: translateY(-2px);
box-shadow: var(--ts-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.5));
border-color: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.3);
}
.empty-state,
.ts-empty,
.no-data,
.rq-empty,
.no-results {
text-align: center;
padding: 2.5rem 1.5rem;
color: var(--ts-text-muted);
}
.empty-state-icon,
.ts-empty-icon,
.rq-empty-icon,
.no-data-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
opacity: 0.45;
color: var(--ts-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
}
.empty-state-title,
.ts-empty-title,
.rq-empty-title {
font-size: 1rem;
font-weight: 600;
color: var(--ts-text-primary);
margin-bottom: 0.375rem;
}
.empty-state-text,
.ts-empty-text,
.rq-empty-text,
.no-data-text {
font-size: 0.875rem;
color: var(--ts-text-muted);
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.empty-state-action {
margin-top: 1rem;
}
.spinner-border {
border-width: 0.18em;
}
.spinner-border-sm {
width: 1rem;
height: 1rem;
}
.spinner-border.text-primary,
.spinner-border:not([class*="text-"]) {
color: var(--ts-primary) !important;
}
.ts-skeleton {
background: linear-gradient(90deg,
var(--ts-bg-elevated, rgba(255,255,255,0.04)) 25%,
var(--ts-bg-hover, rgba(255,255,255,0.08)) 50%,
var(--ts-bg-elevated, rgba(255,255,255,0.04)) 75%);
background-size: 200% 100%;
animation: ts-skeleton-shimmer 1.4s ease-in-out infinite;
border-radius: var(--ts-radius-sm, 8px);
}
@keyframes ts-skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
hr, .dropdown-divider {
border: none;
border-top: 1px solid var(--ts-border, rgba(148, 163, 184, 0.1));
margin: 1rem 0;
opacity: 1;
}
[data-bs-theme="light"] hr,
[data-bs-theme="light"] .dropdown-divider {
border-top-color: rgba(15, 23, 42, 0.08);
}
::selection {
background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.25);
color: var(--ts-text-primary, inherit);
}
::-moz-selection {
background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.25);
color: var(--ts-text-primary, inherit);
}
html {
scrollbar-width: thin;
scrollbar-color: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.3) transparent;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
[class*="overflow-auto"]::-webkit-scrollbar,
[class*="overflow-y-auto"]::-webkit-scrollbar,
[class*="overflow-x-auto"]::-webkit-scrollbar {
width: 8px;
height: 8px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
[class*="overflow-auto"]::-webkit-scrollbar-thumb,
[class*="overflow-y-auto"]::-webkit-scrollbar-thumb,
[class*="overflow-x-auto"]::-webkit-scrollbar-thumb {
background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.3);
border-radius: 4px;
border: 1px solid transparent;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.55);
}
a:not(.btn):not(.ts-btn):not(.nav-link):not(.dropdown-item):not(.breadcrumb-item a):not(.page-link):not([class*="text-"]) {
color: var(--ts-primary, #3b82f6);
text-decoration: none;
transition: color var(--ts-duration, 200ms) var(--ts-ease);
}
a:not(.btn):not(.ts-btn):not(.nav-link):not(.dropdown-item):not(.breadcrumb-item a):not(.page-link):not([class*="text-"]):hover {
color: var(--ts-primary-dark, var(--ts-primary));
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.dropdown-menu {
border: 1px solid var(--ts-border, rgba(148, 163, 184, 0.1));
box-shadow: var(--ts-shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.5));
padding: 0.375rem;
}
.dropdown-item {
border-radius: var(--ts-radius-sm, 8px);
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 8px;
transition: background-color var(--ts-duration, 200ms) var(--ts-ease);
}
.dropdown-item:hover, .dropdown-item:focus {
background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.08);
color: var(--ts-text-primary);
}
.dropdown-item.active, .dropdown-item:active {
background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.15);
color: var(--ts-primary);
}
[data-bs-theme="light"] .dropdown-item:hover,
[data-bs-theme="light"] .dropdown-item:focus {
background: rgba(var(--ts-primary-rgb, 37, 99, 235), 0.06);
}
.input-group > .form-control:focus,
.input-group > .ts-input:focus {
z-index: 3;
}
.alert {
border-radius: var(--ts-radius-md, 12px);
padding: 0.875rem 1.125rem;
border-width: 1px;
display: flex;
align-items: flex-start;
gap: 0.625rem;
font-size: 0.875rem;
}
.alert > .bi:first-child {
font-size: 1.125rem;
flex-shrink: 0;
margin-top: 1px;
}
.table-hover > tbody > tr:hover > * {
background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.04);
--bs-table-bg-state: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.04);
}
[data-bs-theme="light"] .table-hover > tbody > tr:hover > * {
background: rgba(var(--ts-primary-rgb, 37, 99, 235), 0.04);
}
.modal-header, .modal-footer {
padding: 1rem 1.25rem;
border-color: var(--ts-border, rgba(148, 163, 184, 0.1));
}
.modal-body { padding: 1.25rem; }
.modal-title {
font-size: 1.125rem;
font-weight: 600;
}
.pagination .page-link {
border-color: var(--ts-border, rgba(148, 163, 184, 0.1));
background: transparent;
color: var(--ts-text-secondary);
transition: all var(--ts-duration, 200ms) var(--ts-ease);
}
.pagination .page-link:hover {
background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.08);
border-color: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.3);
color: var(--ts-primary);
}
.pagination .page-item.active .page-link {
background: var(--ts-primary);
border-color: var(--ts-primary);
color: white;
}
.pagination .page-item.disabled .page-link {
opacity: 0.4;
background: transparent;
}
.breadcrumb-item + .breadcrumb-item {
padding-left: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
padding-right: 0.5rem;
}
@media print {
.ts-sidebar, .ts-header, .ts-sidebar-overlay,
.ts-nav-more-dropdown, .dropdown-menu, .modal,
.di-notch-container, [class*="floating"], .toast {
display: none !important;
}
.ts-main { margin-left: 0 !important; max-width: 100% !important; }
.glass-card, .ts-card { box-shadow: none !important; border: 1px solid #ccc !important; }
body { background: white !important; color: black !important; }
}
.rq-avatar-network {
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%) !important;
box-shadow: 0 0 14px rgba(168, 85, 247, 0.4);
color: #fff !important;
}
.rq-avatar-network i { font-size: 1rem; line-height: 1; }
.rq-customer-name-network {
background: linear-gradient(135deg, #c4b5fd 0%, #e9d5ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: filter 0.15s ease;
}
.rq-customer-name-network:hover { filter: brightness(1.2); text-decoration: none; }
[data-bs-theme="light"] .rq-customer-name-network {
background: linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);
-webkit-background-clip: text;
background-clip: text;
}
.rq-network-via {
display: inline-flex;
align-items: center;
padding: 1px 8px;
border-radius: 10px;
font-size: 0.66rem;
font-weight: 700;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(99, 102, 241, 0.16));
color: rgb(196, 181, 253);
border: 1px solid rgba(168, 85, 247, 0.34);
transition: all 0.15s ease;
letter-spacing: 0.2px;
line-height: 1.6;
}
.rq-network-via:hover {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.32), rgba(99, 102, 241, 0.28));
color: rgb(216, 201, 253);
text-decoration: none;
transform: translateY(-1px);
}
[data-bs-theme="light"] .rq-network-via {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.10), rgba(99, 102, 241, 0.08));
color: rgb(91, 33, 182);
border-color: rgba(168, 85, 247, 0.24);
}
.rq-network-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.66rem;
font-weight: 600;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(168, 85, 247, 0.18));
color: rgb(196, 181, 253);
border: 1px solid rgba(168, 85, 247, 0.32);
transition: all 0.15s ease;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rq-network-badge:hover {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.32), rgba(168, 85, 247, 0.32));
color: rgb(216, 201, 253);
transform: translateY(-1px);
text-decoration: none;
}
.rq-network-badge i { font-size: 0.66rem; }
[data-bs-theme="light"] .rq-network-badge {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(168, 85, 247, 0.10));
color: rgb(91, 33, 182);
border-color: rgba(168, 85, 247, 0.24);
}
[data-bs-theme="light"] .rq-network-badge:hover { color: rgb(76, 29, 149); }
.rq-slave-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--ts-text-muted, #64748b);
flex-shrink: 0;
}
.rq-slave-dot.online {
background: rgb(34, 197, 94);
box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
animation: rq-slave-pulse 2.4s ease-in-out infinite;
}
.rq-slave-dot.offline { background: rgb(100, 116, 139); }
.rq-slave-dot.blocked { background: rgb(239, 68, 68); animation: none; }
@keyframes rq-slave-pulse {
0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }
50% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.9); }
}
.ts-network-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.ts-slave-card {
position: relative;
padding: 1.25rem;
border-radius: 14px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.4));
border: 1px solid rgba(168, 85, 247, 0.22);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
overflow: hidden;
}
.ts-slave-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
}
.ts-slave-card:hover {
transform: translateY(-3px);
border-color: rgba(168, 85, 247, 0.45);
box-shadow: 0 12px 32px rgba(168, 85, 247, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.ts-slave-card.is-blocked { border-color: rgba(239, 68, 68, 0.35); opacity: 0.78; }
.ts-slave-card.is-blocked::before { background: linear-gradient(90deg, #ef4444, #f59e0b, #ef4444); }
[data-bs-theme="light"] .ts-slave-card {
background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.85));
border-color: rgba(168, 85, 247, 0.28);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.ts-slave-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.ts-slave-card-title {
font-weight: 700;
font-size: 0.95rem;
color: var(--ts-text-primary, #f8fafc);
background: linear-gradient(135deg, #c4b5fd, #e9d5ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
margin: 0;
}
[data-bs-theme="light"] .ts-slave-card-title {
background: linear-gradient(135deg, #6d28d9, #a855f7);
-webkit-background-clip: text;
background-clip: text;
}
.ts-slave-card-host {
font-size: 0.7rem;
color: var(--ts-text-muted, #94a3b8);
margin-top: 2px;
word-break: break-all;
}
.ts-slave-card-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 12px;
font-size: 0.66rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.ts-slave-card-status.online {
background: rgba(34, 197, 94, 0.15);
color: rgb(74, 222, 128);
border: 1px solid rgba(34, 197, 94, 0.3);
}
.ts-slave-card-status.offline {
background: rgba(100, 116, 139, 0.15);
color: rgb(148, 163, 184);
border: 1px solid rgba(100, 116, 139, 0.3);
}
.ts-slave-card-status.blocked {
background: rgba(239, 68, 68, 0.15);
color: rgb(248, 113, 113);
border: 1px solid rgba(239, 68, 68, 0.35);
}
.ts-slave-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
margin: 0.75rem 0;
}
.ts-slave-stat {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
padding: 0.5rem;
text-align: center;
}
.ts-slave-stat-value {
font-weight: 700;
font-size: 1.15rem;
color: var(--ts-text-primary, #f8fafc);
line-height: 1.1;
}
.ts-slave-stat-label {
font-size: 0.6rem;
color: var(--ts-text-muted, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 2px;
}
[data-bs-theme="light"] .ts-slave-stat {
background: rgba(0, 0, 0, 0.025);
border-color: rgba(0, 0, 0, 0.06);
}
.ts-slave-card-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
flex-wrap: wrap;
}
.ts-slave-card-actions .ts-btn {
flex: 1;
min-width: 0;
font-size: 0.74rem;
padding: 6px 10px;
}
.ts-slave-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.66rem;
color: var(--ts-text-muted, #94a3b8);
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
[data-bs-theme="light"] .ts-slave-meta { border-top-color: rgba(0, 0, 0, 0.08); }
.ts-network-hero {
position: relative;
padding: 1.5rem;
border-radius: 16px;
background:
radial-gradient(ellipse at top left, rgba(168, 85, 247, 0.18), transparent 60%),
radial-gradient(ellipse at bottom right, rgba(99, 102, 241, 0.15), transparent 60%),
linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(30, 41, 59, 0.5));
border: 1px solid rgba(168, 85, 247, 0.25);
margin-bottom: 1.25rem;
overflow: hidden;
}
.ts-network-hero::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.ts-network-hero-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--ts-text-primary, #f8fafc);
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.25rem;
}
.ts-network-hero-title i {
background: linear-gradient(135deg, #a855f7, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.4rem;
}
.ts-network-hero-sub {
font-size: 0.8rem;
color: var(--ts-text-muted, #94a3b8);
margin: 0;
}
.ts-network-hero-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.75rem;
margin-top: 1rem;
position: relative;
z-index: 1;
}
.ts-network-hero-stat {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 10px;
padding: 0.65rem 0.85rem;
}
[data-bs-theme="light"] .ts-network-hero {
background:
radial-gradient(ellipse at top left, rgba(168, 85, 247, 0.10), transparent 60%),
radial-gradient(ellipse at bottom right, rgba(99, 102, 241, 0.08), transparent 60%),
linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
border-color: rgba(168, 85, 247, 0.22);
}
[data-bs-theme="light"] .ts-network-hero-stat {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(0, 0, 0, 0.06);
}
.ts-network-hero-stat-value {
font-size: 1.4rem;
font-weight: 700;
color: var(--ts-text-primary, #f8fafc);
line-height: 1;
}
.ts-network-hero-stat-label {
font-size: 0.66rem;
color: var(--ts-text-muted, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 4px;
}
.ts-network-hero-stat-value.is-positive { color: rgb(74, 222, 128); }
.ts-network-hero-stat-value.is-warn { color: rgb(251, 191, 36); }
.tw-stat-mini.tw-stat-mini--slaves .tw-stat-mini-dot { background: rgb(168, 85, 247); box-shadow: 0 0 0 3px rgba(168,85,247,0.16); }
.tw-stat-mini.tw-stat-mini--online .tw-stat-mini-dot { background: rgb(34, 197, 94); box-shadow: 0 0 0 3px rgba(34,197,94,0.16); }
.tw-stat-mini.tw-stat-mini--today  .tw-stat-mini-dot { background: rgb(59, 130, 246); box-shadow: 0 0 0 3px rgba(59,130,246,0.16); }
.tw-stat-mini.tw-stat-mini--pending .tw-stat-mini-dot { background: rgb(251, 191, 36); box-shadow: 0 0 0 3px rgba(251,191,36,0.16); }
.tw-stat-mini.tw-stat-mini--pending.is-warn .tw-stat-mini-value { color: rgb(251, 191, 36); }
.tw-stat-mini.tw-stat-mini--volume .tw-stat-mini-dot { background: rgb(244, 114, 182); box-shadow: 0 0 0 3px rgba(244,114,182,0.16); }
.ts-slave-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 8px;
font-size: 0.66rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
color: var(--ts-text-muted, #cbd5e1);
}
.ts-slave-chip i { font-size: 0.66rem; }
.ts-slave-chip-money { background: rgba(168, 85, 247, 0.14); border-color: rgba(168, 85, 247, 0.30); color: rgb(216, 180, 254); }
.ts-slave-chip-ok    { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.30); color: rgb(134, 239, 172); }
.ts-slave-chip-warn  { background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.30); color: rgb(253, 224, 71); }
.ts-slave-chip-bad   { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.30); color: rgb(252, 165, 165); }
[data-bs-theme="light"] .ts-slave-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: #475569; }
[data-bs-theme="light"] .ts-slave-chip-money { background: rgba(168,85,247,0.10); color: rgb(91,33,182); border-color: rgba(168,85,247,0.30); }
[data-bs-theme="light"] .ts-slave-chip-ok { background: rgba(34,197,94,0.10); color: rgb(22,101,52); border-color: rgba(34,197,94,0.30); }
[data-bs-theme="light"] .ts-slave-chip-warn { background: rgba(251,191,36,0.10); color: rgb(146,64,14); border-color: rgba(251,191,36,0.30); }
[data-bs-theme="light"] .ts-slave-chip-bad { background: rgba(239,68,68,0.10); color: rgb(153,27,27); border-color: rgba(239,68,68,0.30); }
.ts-net-activity {
display: flex;
flex-direction: column;
gap: 4px;
}
.ts-net-activity-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
transition: background 0.15s ease;
color: inherit;
}
.ts-net-activity-row:hover {
background: rgba(168, 85, 247, 0.08);
text-decoration: none;
}
.ts-net-activity-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.ts-net-activity-dot.is-ok { background: rgb(34, 197, 94); box-shadow: 0 0 6px rgba(34,197,94,0.6); }
.ts-net-activity-dot.is-fail { background: rgb(239, 68, 68); }
.ts-net-activity-dot.is-pending { background: rgb(251, 191, 36); animation: rq-slave-pulse 2s ease-in-out infinite; }
.ts-net-workstation { position: relative; }
.ts-net-workstation::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
z-index: 1;
}
.ts-slave-detail-hero {
position: relative;
padding: 1.75rem;
border-radius: 18px;
background:
radial-gradient(ellipse at top left, rgba(168, 85, 247, 0.25), transparent 60%),
radial-gradient(ellipse at bottom right, rgba(99, 102, 241, 0.22), transparent 60%),
linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
border: 1px solid rgba(168, 85, 247, 0.3);
margin-bottom: 1.5rem;
overflow: hidden;
}
.ts-slave-detail-hero h1 {
font-size: 1.65rem;
font-weight: 800;
background: linear-gradient(135deg, #e9d5ff, #c4b5fd, #93c5fd);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 0.25rem;
letter-spacing: -0.02em;
}
[data-bs-theme="light"] .ts-slave-detail-hero h1 {
background: linear-gradient(135deg, #6d28d9, #a855f7, #3b82f6);
-webkit-background-clip: text;
background-clip: text;
}
[data-bs-theme="light"] .ts-slave-detail-hero {
background:
radial-gradient(ellipse at top left, rgba(168, 85, 247, 0.14), transparent 60%),
radial-gradient(ellipse at bottom right, rgba(99, 102, 241, 0.10), transparent 60%),
linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.92));
border-color: rgba(168, 85, 247, 0.25);
}
.ts-billing-card {
border: 1px solid rgba(245, 158, 11, 0.18);
background: linear-gradient(135deg, rgba(245, 158, 11, 0.04), transparent 60%);
}
.ts-billing-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(245, 158, 11, 0.14);
color: #fbbf24;
font-size: 1.05rem;
flex-shrink: 0;
}
.ts-billing-mode-card {
display: block;
padding: 0.75rem;
border: 1.5px solid var(--ts-border, rgba(148, 163, 184, 0.18));
border-radius: 10px;
cursor: pointer;
background: var(--ts-bg-elevated, rgba(15, 23, 42, 0.25));
transition: all 180ms ease;
position: relative;
height: 100%;
margin: 0;
}
.ts-billing-mode-card:hover {
border-color: rgba(245, 158, 11, 0.45);
transform: translateY(-1px);
}
.ts-billing-mode-card.is-active {
border-color: rgba(245, 158, 11, 0.6);
background: rgba(245, 158, 11, 0.06);
border-width: 2px;
padding: calc(0.75rem - 0.5px);
}
.ts-billing-mode-icon {
width: 30px;
height: 30px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(148, 163, 184, 0.15);
color: #94a3b8;
font-size: 0.9rem;
flex-shrink: 0;
}
.ts-billing-mode-card.is-active .ts-billing-mode-icon {
background: rgba(245, 158, 11, 0.2);
color: #fbbf24;
}
.ts-billing-mode-check {
position: absolute;
top: 0.45rem;
right: 0.5rem;
color: #fbbf24;
font-size: 0.95rem;
}
.ts-billing-json {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.82rem;
line-height: 1.5;
}
.ts-billing-aggregate {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(168, 85, 247, 0.06));
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
}
.ts-billing-stat {
text-align: center;
padding: 0.5rem 0.25rem;
}
.ts-billing-stat-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ts-text-muted, #94a3b8);
margin-bottom: 0.15rem;
}
.ts-billing-stat-value {
font-size: 1.15rem;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.ts-billing-recent {
max-height: 220px;
overflow-y: auto;
border-radius: 8px;
}
[data-bs-theme="light"] .ts-billing-card {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(255, 255, 255, 0.4));
border-color: rgba(245, 158, 11, 0.25);
}
[data-bs-theme="light"] .ts-billing-mode-card {
background: rgba(255, 255, 255, 0.6);
border-color: rgba(15, 23, 42, 0.08);
}
[data-bs-theme="light"] .ts-billing-mode-card.is-active {
background: rgba(245, 158, 11, 0.08);
border-color: rgba(245, 158, 11, 0.5);
}
[data-bs-theme="light"] .ts-billing-aggregate {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(168, 85, 247, 0.04));
border-color: rgba(15, 23, 42, 0.08);
}
.rq-row.is-network,
tr.is-network {
background: linear-gradient(90deg, rgba(168, 85, 247, 0.10) 0%, rgba(168, 85, 247, 0.04) 30%, transparent 70%) !important;
box-shadow: inset 3px 0 0 0 rgba(168, 85, 247, 0.5);
transition: background 200ms ease, box-shadow 200ms ease;
}
.rq-row.is-network:hover,
tr.is-network:hover {
background: linear-gradient(90deg, rgba(168, 85, 247, 0.18) 0%, rgba(168, 85, 247, 0.08) 40%, rgba(168, 85, 247, 0.02) 80%) !important;
box-shadow: inset 3px 0 0 0 rgba(168, 85, 247, 0.85);
}
.rq-card.is-network {
position: relative;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(168, 85, 247, 0.02) 50%, transparent);
border-color: rgba(168, 85, 247, 0.3);
}
.rq-card.is-network::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #a855f7, rgba(168, 85, 247, 0));
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.rq-card.is-network:hover {
border-color: rgba(168, 85, 247, 0.55);
box-shadow: 0 8px 24px -8px rgba(168, 85, 247, 0.25);
}
.rq-compact-row.is-network {
background: linear-gradient(90deg, rgba(168, 85, 247, 0.10), rgba(168, 85, 247, 0.02) 60%, transparent);
box-shadow: inset 3px 0 0 0 rgba(168, 85, 247, 0.5);
}
[data-bs-theme="light"] .rq-row.is-network,
[data-bs-theme="light"] tr.is-network {
background: linear-gradient(90deg, rgba(168, 85, 247, 0.10) 0%, rgba(168, 85, 247, 0.04) 30%, transparent 70%) !important;
}
[data-bs-theme="light"] .rq-card.is-network {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.6));
border-color: rgba(168, 85, 247, 0.25);
}
.ts-network-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1rem;
}
.ts-network-card {
position: relative;
background:
radial-gradient(ellipse at top right, rgba(168, 85, 247, 0.06), transparent 60%),
linear-gradient(135deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.35));
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 14px;
padding: 1rem 1rem 0.85rem;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.ts-network-card::before {
content: '';
position: absolute;
top: 0; left: 14px; right: 14px;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), transparent);
border-radius: 2px;
opacity: 0.75;
transition: opacity 200ms ease, background 200ms ease;
}
.ts-network-card:hover {
transform: translateY(-2px);
border-color: rgba(168, 85, 247, 0.45);
box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(168, 85, 247, 0.15);
}
.ts-network-card:hover::before { opacity: 1; }
.ts-network-card.state-active::before { background: linear-gradient(90deg, transparent, #34d399, transparent); }
.ts-network-card.state-recent::before { background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.7), transparent); }
.ts-network-card.state-idle::before { background: linear-gradient(90deg, transparent, #fbbf24, transparent); }
.ts-network-card.state-dormant::before { background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.6), transparent); }
.ts-network-card.is-blocked { border-color: rgba(239, 68, 68, 0.45); opacity: 0.85; }
.ts-network-card.is-blocked::before { background: linear-gradient(90deg, transparent, #ef4444, transparent); }
.ts-network-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
}
.ts-network-card-identity { min-width: 0; flex: 1; }
.ts-network-card-title {
font-size: 1.02rem;
font-weight: 700;
background: linear-gradient(135deg, #a855f7, #6366f1);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: block;
line-height: 1.2;
letter-spacing: -0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ts-network-card-host {
font-size: 0.72rem;
color: var(--ts-text-muted, #94a3b8);
margin-top: 0.15rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ts-network-card-pulse {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px solid transparent;
background: rgba(148, 163, 184, 0.12);
color: #cbd5e1;
white-space: nowrap;
}
.ts-network-card-pulse-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 0 currentColor;
}
.ts-network-card-pulse.pulse-active {
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.4);
color: #34d399;
}
.ts-network-card-pulse.pulse-active .ts-network-card-pulse-dot { animation: tsPulseRing 2s ease-in-out infinite; }
.ts-network-card-pulse.pulse-recent {
background: rgba(16, 185, 129, 0.06);
border-color: rgba(16, 185, 129, 0.25);
color: rgba(52, 211, 153, 0.85);
}
.ts-network-card-pulse.pulse-idle {
background: rgba(245, 158, 11, 0.1);
border-color: rgba(245, 158, 11, 0.3);
color: #fbbf24;
}
.ts-network-card-pulse.pulse-dormant {
background: rgba(148, 163, 184, 0.1);
border-color: rgba(148, 163, 184, 0.25);
color: #94a3b8;
}
.ts-network-card-pulse.pulse-blocked {
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.35);
color: #f87171;
}
@keyframes tsPulseRing { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 6px transparent; } }
.ts-network-card-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem;
background: rgba(15, 23, 42, 0.35);
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: 10px;
padding: 0.6rem 0.4rem;
}
.ts-network-card-stat { text-align: center; }
.ts-network-card-stat-value {
font-size: 1.4rem;
font-weight: 700;
line-height: 1;
color: var(--ts-text-body, #e2e8f0);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.ts-network-card-stat-label {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--ts-text-muted, #94a3b8);
margin-top: 0.2rem;
}
.ts-network-card-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ts-network-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.18rem 0.55rem;
border-radius: 999px;
background: rgba(148, 163, 184, 0.1);
border: 1px solid rgba(148, 163, 184, 0.18);
color: var(--ts-text-body, #e2e8f0);
font-size: 0.72rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.ts-network-chip-money { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.3); color: #a5b4fc; }
.ts-network-chip-ok { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: #34d399; }
.ts-network-chip-warn { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: #fbbf24; }
.ts-network-chip-bad { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: #f87171; }
.ts-network-card-actions { display: flex; gap: 0.4rem; }
.ts-network-card-meta {
display: flex;
justify-content: space-between;
gap: 0.5rem;
flex-wrap: wrap;
font-size: 0.7rem;
color: var(--ts-text-muted, #94a3b8);
padding-top: 0.6rem;
border-top: 1px dashed rgba(148, 163, 184, 0.15);
}
[data-bs-theme="light"] .ts-network-card {
background:
radial-gradient(ellipse at top right, rgba(168, 85, 247, 0.08), transparent 60%),
linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(241, 245, 249, 0.7));
border-color: rgba(15, 23, 42, 0.08);
}
[data-bs-theme="light"] .ts-network-card-title {
background: linear-gradient(135deg, #7c3aed, #4f46e5);
-webkit-background-clip: text;
background-clip: text;
}
[data-bs-theme="light"] .ts-network-card-stats {
background: rgba(255, 255, 255, 0.5);
border-color: rgba(15, 23, 42, 0.06);
}
[data-bs-theme="light"] .ts-network-card-stat-value { color: #0f172a; }
[data-bs-theme="light"] .ts-network-chip {
background: rgba(15, 23, 42, 0.04);
border-color: rgba(15, 23, 42, 0.1);
color: #475569;
}
@media (prefers-reduced-motion: reduce) {
.ts-network-card, .ts-network-card-pulse-dot { transition: none !important; animation: none !important; }
.rq-row.is-network, tr.is-network { transition: none !important; }
}
.ts-demo-perspective {
position: relative;
display: inline-flex;
align-items: center;
}
.ts-demo-trigger {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 4px 14px 4px 4px;
background: transparent;
border: 1px solid var(--ts-border);
border-radius: var(--ts-radius-full);
color: var(--ts-text-primary);
cursor: pointer;
text-decoration: none;
transition: background var(--ts-duration) var(--ts-ease),
border-color var(--ts-duration) var(--ts-ease),
box-shadow var(--ts-duration) var(--ts-ease);
}
.ts-demo-trigger:hover {
background: rgba(var(--ts-accent-rgb), 0.06);
border-color: rgba(var(--ts-accent-rgb), 0.3);
}
.ts-demo-trigger[aria-expanded="true"] {
background: rgba(var(--ts-accent-rgb), 0.08);
border-color: var(--ts-accent);
box-shadow: 0 0 0 1px rgba(var(--ts-accent-rgb), 0.15),
0 8px 24px rgba(0, 0, 0, 0.2);
}
.ts-demo-trigger:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--ts-accent-rgb), 0.25);
border-color: rgba(var(--ts-accent-rgb), 0.55);
}
.ts-demo-trigger .ts-nav-user-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--ts-text-primary);
letter-spacing: -0.005em;
line-height: 1.2;
}
.ts-demo-trigger .ts-nav-user-role {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 3px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ts-text-secondary);
line-height: 1.1;
}
.ts-demo-trigger .ts-nav-user-role i.bi-eye-fill {
font-size: 0.78rem;
opacity: 1;
}
.ts-demo-trigger[data-mode="standalone"] .ts-nav-user-role { color: #60a5fa; }
.ts-demo-trigger[data-mode="standalone"] .ts-nav-user-role i.bi-eye-fill { color: #60a5fa; }
.ts-demo-trigger[data-mode="master"] .ts-nav-user-role     { color: #a78bfa; }
.ts-demo-trigger[data-mode="master"] .ts-nav-user-role i.bi-eye-fill { color: #a78bfa; }
.ts-demo-trigger[data-mode="slave"] .ts-nav-user-role      { color: #22d3ee; }
.ts-demo-trigger[data-mode="slave"] .ts-nav-user-role i.bi-eye-fill { color: #22d3ee; }
.ts-demo-trigger[data-mode="standalone"][aria-expanded="true"] {
border-color: #3b82f6;
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2), 0 8px 24px rgba(0, 0, 0, 0.2);
}
.ts-demo-trigger[data-mode="master"][aria-expanded="true"] {
border-color: #8b5cf6;
box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.2), 0 8px 24px rgba(0, 0, 0, 0.2);
}
.ts-demo-trigger[data-mode="slave"][aria-expanded="true"] {
border-color: #06b6d4;
box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.2), 0 8px 24px rgba(0, 0, 0, 0.2);
}
[data-bs-theme="light"] .ts-demo-trigger .ts-nav-user-role {
color: var(--ts-text-secondary);
}
[data-bs-theme="light"] .ts-demo-trigger[data-mode="standalone"] .ts-nav-user-role { color: #2563eb; }
[data-bs-theme="light"] .ts-demo-trigger[data-mode="master"] .ts-nav-user-role     { color: #7c3aed; }
[data-bs-theme="light"] .ts-demo-trigger[data-mode="slave"] .ts-nav-user-role      { color: #0891b2; }
.ts-demo-trigger::after {
display: none;
}
.ts-demo-caret {
font-size: 0.75rem;
opacity: 0.6;
transition: transform var(--ts-duration) var(--ts-ease);
}
.ts-demo-trigger[aria-expanded="true"] .ts-demo-caret {
transform: rotate(180deg);
opacity: 1;
}
.ts-demo-menu {
min-width: 320px;
padding: 10px !important;
margin-top: 12px !important;
background: #0f172a !important;
background-image: linear-gradient(180deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8)) !important;
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(148, 163, 184, 0.2) !important;
border-radius: var(--ts-radius-lg);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
[data-bs-theme="light"] .ts-demo-menu {
background: #ffffff !important;
background-image: none !important;
border-color: rgba(15, 23, 42, 0.1) !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
@media (max-width: 767.98px) {
.ts-demo-menu {
background: #0f172a !important;
background-image: none !important;
}
}
.ts-demo-menu-header {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 12px 10px;
margin-bottom: 6px;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ts-text-muted);
border-bottom: 1px solid var(--ts-border);
}
.ts-demo-menu-header i {
color: var(--ts-accent);
}
.ts-demo-form {
margin: 0;
}
.ts-demo-item {
display: flex !important;
align-items: center !important;
gap: 12px !important;
width: 100% !important;
padding: 10px 12px !important;
background: transparent !important;
border: 0 !important;
border-radius: var(--ts-radius-md) !important;
color: #f8fafc !important;
text-align: left !important;
cursor: pointer !important;
transition: all var(--ts-duration) var(--ts-ease) !important;
}
.ts-demo-item:hover,
.ts-demo-item:focus-visible {
background: rgba(148, 163, 184, 0.12) !important;
transform: translateX(2px);
outline: none !important;
}
.ts-demo-item.is-active {
background: rgba(var(--ts-primary-rgb), 0.12) !important;
box-shadow: inset 3px 0 0 var(--ts-primary) !important;
}
[data-bs-theme="light"] .ts-demo-item {
color: var(--ts-text-primary) !important;
}
[data-bs-theme="light"] .ts-demo-item:hover {
background: rgba(15, 23, 42, 0.06) !important;
}
.ts-demo-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--ts-radius-md);
background: rgba(var(--ts-primary-rgb), 0.1);
color: var(--ts-primary-light);
font-size: 1rem;
transition: background var(--ts-duration) var(--ts-ease),
color var(--ts-duration) var(--ts-ease);
}
.ts-demo-item.is-active .ts-demo-item-icon {
background: var(--ts-primary);
color: #fff;
}
.ts-demo-item--client .ts-demo-item-icon  { background: rgba(16, 185, 129, 0.15);  color: #10b981; }
.ts-demo-item--tuner  .ts-demo-item-icon  { background: rgba(245, 158, 11, 0.15);  color: #f59e0b; }
.ts-demo-item--admin  .ts-demo-item-icon  { background: rgba(59, 130, 246, 0.15);  color: #60a5fa; }
.ts-demo-item--master .ts-demo-item-icon  { background: rgba(139, 92, 246, 0.15);  color: #a78bfa; }
.ts-demo-item--slave  .ts-demo-item-icon  { background: rgba(34, 211, 238, 0.15);  color: #22d3ee; }
.ts-demo-item.is-active.ts-demo-item--client  .ts-demo-item-icon { background: #10b981; color: #fff; }
.ts-demo-item.is-active.ts-demo-item--tuner   .ts-demo-item-icon { background: #f59e0b; color: #fff; }
.ts-demo-item.is-active.ts-demo-item--admin   .ts-demo-item-icon { background: #3b82f6; color: #fff; }
.ts-demo-item.is-active.ts-demo-item--master  .ts-demo-item-icon { background: #8b5cf6; color: #fff; }
.ts-demo-item.is-active.ts-demo-item--slave   .ts-demo-item-icon { background: #06b6d4; color: #fff; }
.ts-demo-item.is-active.ts-demo-item--client  { box-shadow: inset 3px 0 0 #10b981; background: rgba(16, 185, 129, 0.08); }
.ts-demo-item.is-active.ts-demo-item--tuner   { box-shadow: inset 3px 0 0 #f59e0b; background: rgba(245, 158, 11, 0.08); }
.ts-demo-item.is-active.ts-demo-item--admin   { box-shadow: inset 3px 0 0 #3b82f6; background: rgba(59, 130, 246, 0.08); }
.ts-demo-item.is-active.ts-demo-item--master  { box-shadow: inset 3px 0 0 #8b5cf6; background: rgba(139, 92, 246, 0.08); }
.ts-demo-item.is-active.ts-demo-item--slave   { box-shadow: inset 3px 0 0 #06b6d4; background: rgba(6, 182, 212, 0.08); }
.ts-demo-item-spinner {
display: none;
margin-left: auto;
width: 1rem;
height: 1rem;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: ts-demo-spin 0.6s linear infinite;
color: var(--ts-text-secondary);
}
.ts-demo-item.is-submitting .ts-demo-item-spinner { display: inline-block; }
.ts-demo-item.is-submitting .ts-demo-item-check { display: none; }
.ts-demo-item.is-submitting { pointer-events: none; opacity: 0.75; }
@keyframes ts-demo-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ts-demo-item-spinner { animation: none; }
}
.ts-demo-item-text {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.ts-demo-item-label {
font-weight: 600;
font-size: 0.9375rem;
line-height: 1.2;
}
.ts-demo-item-hint {
margin-top: 2px;
font-size: 0.75rem;
color: var(--ts-text-muted);
}
.ts-demo-item-check {
margin-left: auto;
color: var(--ts-success);
font-size: 1rem;
}
.ts-demo-secondary {
display: flex;
align-items: center;
width: 100%;
padding: 8px 12px;
background: transparent;
border: 0;
border-radius: var(--ts-radius-sm);
color: var(--ts-text-secondary);
text-align: left;
text-decoration: none;
font-size: 0.875rem;
cursor: pointer;
}
.ts-demo-secondary:hover,
.ts-demo-secondary:focus-visible {
background: var(--ts-bg-elevated);
color: var(--ts-text-primary);
outline: none;
}
.popover.ts-demo-popover {
max-width: 320px;
background: var(--ts-glass-bg);
-webkit-backdrop-filter: blur(var(--ts-glass-blur));
backdrop-filter: blur(var(--ts-glass-blur));
border: 1px solid rgba(var(--ts-accent-rgb), 0.3);
border-radius: var(--ts-radius-lg);
box-shadow: var(--ts-shadow-lg), 0 0 24px rgba(var(--ts-accent-rgb), 0.18);
}
.popover.ts-demo-popover .popover-header {
background: transparent;
border-bottom: 1px solid var(--ts-border);
color: var(--ts-text-primary);
font-weight: 600;
font-size: 0.9375rem;
}
.popover.ts-demo-popover .popover-body {
color: var(--ts-text-secondary);
font-size: 0.875rem;
line-height: 1.5;
}
.popover.ts-demo-popover .popover-arrow::after {
border-bottom-color: var(--ts-glass-bg);
}
.ts-demo-popover-actions {
display: flex;
justify-content: flex-end;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--ts-border);
}
[data-bs-theme="light"] .ts-demo-menu {
background: rgba(255, 255, 255, 0.95);
}
[data-bs-theme="light"] .ts-demo-item.is-active {
background: rgba(var(--ts-primary-rgb), 0.08);
}
[data-bs-theme="light"] .popover.ts-demo-popover {
background: rgba(255, 255, 255, 0.96);
}
@media (prefers-reduced-motion: reduce) {
.ts-demo-trigger,
.ts-demo-caret,
.ts-demo-item,
.ts-demo-secondary {
transition: none !important;
}
}
.ts-demo-menu-section {
padding: 10px 4px 8px;
}
.ts-demo-menu-divider {
height: 1px;
background: rgba(148, 163, 184, 0.15);
margin: 6px 4px;
}
.ts-demo-menu-section > .ts-demo-menu-header {
padding: 2px 8px 10px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.9);
}
.ts-demo-menu-section > .ts-demo-menu-header i {
color: var(--ts-accent);
font-size: 0.85rem;
}
.ts-demo-mode-pills {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-top: 4px;
}
.ts-demo-mode-form {
margin: 0;
}
.ts-demo-mode-pill {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 14px 8px !important;
width: 100% !important;
background: rgba(148, 163, 184, 0.08) !important;
border: 1.5px solid rgba(148, 163, 184, 0.2) !important;
border-radius: var(--ts-radius-md) !important;
color: rgba(248, 250, 252, 0.85) !important;
opacity: 1 !important;
cursor: pointer !important;
font-size: 0.75rem !important;
font-weight: 600 !important;
line-height: 1.1 !important;
text-align: center !important;
transition: all var(--ts-duration) var(--ts-ease) !important;
}
.ts-demo-mode-pill i {
font-size: 1.25rem !important;
}
.ts-demo-mode-pill:hover,
.ts-demo-mode-pill:focus-visible {
background: rgba(148, 163, 184, 0.16) !important;
color: #ffffff !important;
transform: translateY(-1px);
outline: none !important;
}
.ts-demo-mode-pill:focus-visible {
box-shadow: 0 0 0 3px rgba(var(--ts-accent-rgb), 0.35) !important;
}
.ts-demo-mode-pill.is-active {
color: #ffffff !important;
transform: translateY(-2px) !important;
font-weight: 700 !important;
border-width: 1.5px !important;
}
.ts-demo-mode-pill.is-active i {
color: #ffffff !important;
}
[data-bs-theme="light"] .ts-demo-mode-pill {
background: rgba(15, 23, 42, 0.04) !important;
border-color: rgba(15, 23, 42, 0.15) !important;
color: rgba(15, 23, 42, 0.75) !important;
}
[data-bs-theme="light"] .ts-demo-mode-pill:hover {
background: rgba(15, 23, 42, 0.08) !important;
color: rgba(15, 23, 42, 1) !important;
}
.ts-demo-mode-pill.is-submitting {
pointer-events: none;
opacity: 0.6;
}
.ts-demo-mode-pill--standalone.is-active {
background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
border-color: #60a5fa !important;
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.ts-demo-mode-pill--master.is-active {
background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
border-color: #c4b5fd !important;
box-shadow: 0 8px 20px rgba(139, 92, 246, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.ts-demo-mode-pill--slave.is-active {
background: linear-gradient(135deg, #22d3ee, #0891b2) !important;
border-color: #67e8f9 !important;
box-shadow: 0 8px 20px rgba(6, 182, 212, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.ts-demo-mode-pill--standalone:not(.is-active):hover {
border-color: rgba(59, 130, 246, 0.6) !important;
background: rgba(59, 130, 246, 0.12) !important;
color: #93c5fd !important;
}
.ts-demo-mode-pill--master:not(.is-active):hover {
border-color: rgba(139, 92, 246, 0.6) !important;
background: rgba(139, 92, 246, 0.12) !important;
color: #c4b5fd !important;
}
.ts-demo-mode-pill--slave:not(.is-active):hover {
border-color: rgba(6, 182, 212, 0.6) !important;
background: rgba(6, 182, 212, 0.12) !important;
color: #67e8f9 !important;
}
[data-bs-theme="light"] .ts-demo-mode-pill {
background: transparent;
border-color: #cbd5e1;
color: var(--ts-text-secondary);
}
[data-bs-theme="light"] .ts-demo-mode-pill:hover {
background: #f1f5f9;
}
[data-bs-theme="light"] .ts-demo-mode-pill--standalone.is-active {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #ffffff !important;
border-color: #1d4ed8;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
[data-bs-theme="light"] .ts-demo-mode-pill--master.is-active {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: #ffffff !important;
border-color: #6d28d9;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
[data-bs-theme="light"] .ts-demo-mode-pill--slave.is-active {
background: linear-gradient(135deg, #06b6d4, #0891b2);
color: #ffffff !important;
border-color: #0e7490;
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}
@media (prefers-reduced-motion: reduce) {
.ts-demo-mode-pill,
.ts-demo-mode-pill.is-active {
transition: none;
transform: none;
}
}

/* ============================================================
   FILE-REQUEST WIZARD - light-mode + photo-background parity (v2.8.270).
   The wizard (@livewire file-upload-wizard) has no .glass-card wrapper, so the
   photo-bg treatment + near-white wash skip it. Its .*-adaptive surfaces use
   semi-transparent light values (rgba(255,255,255,0.5), rgba(0,0,0,0.03)...),
   so with a photo background active the 40%-opacity photo bleeds through =
   "everything grey" + washed-out icons in light mode. Wash the photo near-white
   on this page + make the wizard surfaces solid. Scoped to :has(.ts-app-bg) so
   non-photo installs keep the wizard's own light overrides. Extra :has()
   specificity + !important beat the inline @push !important rules.
   ============================================================ */
[data-bs-theme="light"]:has(.ts-app-bg):has(.wizard-breadcrumb-options) .ts-app-bg__dim,
[data-bs-theme="light"]:has(.ts-app-bg):has(.vehicle-search-wrap) .ts-app-bg__dim {
    background: radial-gradient(ellipse at center, rgba(248,250,252,0.86) 0%, rgba(248,250,252,0.93) 55%, rgba(248,250,252,0.98) 100%) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .stats-box-adaptive,
[data-bs-theme="light"]:has(.ts-app-bg) .specs-panel-adaptive,
[data-bs-theme="light"]:has(.ts-app-bg) .hw-sw-panel-adaptive,
[data-bs-theme="light"]:has(.ts-app-bg) .fso-card {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .input-bg-adaptive,
[data-bs-theme="light"]:has(.ts-app-bg) .select-adaptive {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #0f172a !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .wizard-bop-pill {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
[data-bs-theme="light"]:has(.ts-app-bg) .premium-glass.tm-simple .category-wrapper[data-is-exclusive="true"] .mod-wrapper .mod-card {
    background: rgba(255, 255, 255, 0.90) !important;
}
@media (max-width:991.98px){.ts-sidebar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--ts-sidebar-bg,#0f172a)!important}[data-bs-theme="light"] .ts-sidebar{background:var(--ts-sidebar-bg,#fff)!important}}
/* ═══ RQ-NETWORK TOKEN RECOLOR (2026-06-10) ═══════════════════════════════
   Network chips (avatar / "via slave" pill / badge / slave-name link) now
   follow the operator's theme palette (--ts-primary / --ts-accent, which the
   layout injects theme-scoped for BOTH dark and light) instead of hardcoded
   purple. Also kills the gradient-text transparent-fill bug that rendered
   the "via <slave>" pill as an EMPTY bar (background shorthand reset
   background-clip while -webkit-text-fill-color stayed transparent). */
.rq-avatar-network {
    background: linear-gradient(135deg, var(--ts-primary, #3b82f6) 0%, var(--ts-accent, #22d3ee) 100%) !important;
    box-shadow: 0 0 14px rgba(var(--ts-primary-rgb, 59, 130, 246), 0.35) !important;
}
.rq-customer-name-network,
[data-bs-theme="light"] .rq-customer-name-network {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--ts-primary, #3b82f6) !important;
}
.rq-network-via {
    background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.14) !important;
    color: var(--ts-primary, #3b82f6) !important;
    border-color: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.34) !important;
}
.rq-network-via:hover,
.rq-network-badge:hover {
    background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.26) !important;
    color: var(--ts-text-primary, #f8fafc) !important;
}
.rq-network-badge {
    background: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.14) !important;
    color: var(--ts-primary, #3b82f6) !important;
    border-color: rgba(var(--ts-primary-rgb, 59, 130, 246), 0.32) !important;
}
[data-bs-theme="light"] .rq-network-via,
[data-bs-theme="light"] .rq-network-badge {
    background: rgba(var(--ts-primary-rgb, 37, 99, 235), 0.08) !important;
    color: var(--ts-primary, #2563eb) !important;
    border-color: rgba(var(--ts-primary-rgb, 37, 99, 235), 0.22) !important;
}