Files
Mimante/Mimante/wwwroot/css/app-wpf.css
T
Alby96 8befcb8abf Rework UI, log e strategie; fix selezione aste
- Interfaccia impostazioni più compatta e responsive, rimosse animazioni popup su hover, evidenziazione con colore
- Ottimizzazione visualizzazione puntate e statistiche, evidenza puntate proprie
- Rework sistema di log: eliminazione duplicati e info inutili, maggiore leggibilità
- Aggiunti nuovi stati e motivazioni per cui il bot non punta (fuori range, strategia, ecc)
- Fix critico: selezione aste ora sempre aggiornata e salvata correttamente
- Migliorata logica aggiunta puntate mancanti, niente duplicati
- Rimossa logica errata "Entry Point": limiti utente ora rigidi, usato solo per suggerimenti
- Aggiornata documentazione e guide per riflettere le nuove funzionalità
2026-02-03 10:50:51 +01:00

1671 lines
32 KiB
CSS

/* app-wpf.css - Modern Dark Theme */
:root {
/* Modern Dark Palette */
--bg-primary: #0f0f0f;
--bg-secondary: #171717;
--bg-tertiary: #1f1f1f;
--bg-card: #1a1a1a;
--bg-hover: #262626;
--bg-selected: #2d2d2d;
--border-color: rgba(255, 255, 255, 0.08);
--border-subtle: rgba(255, 255, 255, 0.04);
/* Text Colors */
--text-primary: #fafafa;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
/* Accent Colors */
--primary: #6366f1;
--primary-hover: #4f46e5;
--success: #22c55e;
--warning: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
/* Gradients */
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
--gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
--gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
/* Border Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
}
/* === GLOBAL RESET === */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
background: var(--bg-primary);
color: var(--text-secondary);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/* === SCROLLBAR === */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.15);
}
/* === LAYOUT (legacy support) === */
.page {
display: flex;
height: 100vh;
overflow: hidden;
}
/* === MODERN CARD COMPONENT === */
.card-modern {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
transition: all 0.2s ease;
}
.card-modern:hover {
border-color: rgba(255, 255, 255, 0.12);
}
.card-header-modern {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-subtle);
}
.card-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-title i {
color: var(--primary);
}
/* === MODERN BUTTON === */
.btn-modern {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: var(--radius-md);
border: none;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-primary-modern {
background: var(--gradient-primary);
color: white;
}
.btn-primary-modern:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}
.btn-success-modern {
background: var(--gradient-success);
color: white;
}
.btn-danger-modern {
background: var(--gradient-danger);
color: white;
}
.btn-ghost {
background: transparent;
border: 1px solid var(--border-color);
color: var(--text-secondary);
}
.btn-ghost:hover {
background: var(--bg-hover);
border-color: rgba(255, 255, 255, 0.15);
color: var(--text-primary);
}
/* === MODERN INPUT === */
.input-modern {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: var(--text-primary);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
transition: all 0.15s ease;
}
.input-modern:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.input-modern::placeholder {
color: var(--text-muted);
}
/* === BADGE === */
.badge-modern {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: 9999px;
}
.badge-success {
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
}
.badge-warning {
background: rgba(245, 158, 11, 0.15);
color: #fbbf24;
}
.badge-danger {
background: rgba(239, 68, 68, 0.15);
color: #f87171;
}
.badge-info {
background: rgba(59, 130, 246, 0.15);
color: #60a5fa;
}
/* === STAT CARD === */
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1.25rem;
}
.stat-card-label {
font-size: 0.8125rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.stat-card-value {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.stat-card-change {
font-size: 0.8125rem;
margin-top: 0.5rem;
}
.stat-card-change.positive {
color: var(--success);
}
.stat-card-change.negative {
color: var(--danger);
}
/* Sidebar Moderna - 260px */
.sidebar {
width: 260px;
height: 100vh;
position: fixed;
left: 0;
top: 0;
background: linear-gradient(180deg, #1a1d23 0%, #13151a 100%);
border-right: 1px solid var(--border-color);
z-index: 1000;
}
main {
margin-left: 260px;
flex: 1;
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
flex: 1;
overflow: hidden;
}
/* === AUCTION MONITOR === */
.auction-monitor {
display: flex;
flex-direction: column;
height: 100%;
padding: 0.5rem;
gap: 0.5rem;
}
.toolbar {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1rem 1.5rem;
background: var(--bg-secondary);
border-radius: 12px;
margin-bottom: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* User Info Card - Compatto in linea */
.toolbar-user-info {
flex-shrink: 0;
}
.user-card {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
background: var(--bg-tertiary);
border-radius: 8px;
border: 2px solid var(--border-color);
transition: all 0.3s ease;
height: 42px; /* Altezza fissa pari ai pulsanti */
}
.user-card.connected {
border-color: var(--success);
background: linear-gradient(90deg, rgba(0, 216, 0, 0.1) 0%, var(--bg-tertiary) 100%);
}
.user-card.disconnected {
border-color: var(--danger);
background: linear-gradient(90deg, rgba(248, 135, 113, 0.1) 0%, var(--bg-tertiary) 100%);
}
.user-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.user-icon {
font-size: 1.5rem;
color: var(--primary);
flex-shrink: 0;
}
.user-card.connected .user-icon {
color: var(--success);
}
.user-card.disconnected .user-icon {
color: var(--danger);
}
.user-name {
font-weight: 600;
font-size: 0.95rem;
color: var(--text-primary);
white-space: nowrap;
}
.divider {
width: 1px;
height: 24px;
background: var(--border-color);
opacity: 0.5;
}
.stat-compact {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.875rem;
}
.stat-compact i {
font-size: 1rem;
opacity: 0.8;
}
.stat-value {
font-weight: 700;
font-size: 1rem;
}
.bids-count.bids-high,
.stat-value.bids-high {
color: var(--success);
}
.bids-count.bids-medium,
.stat-value.bids-medium {
color: var(--warning);
}
.bids-count.bids-low,
.stat-value.bids-low {
color: var(--danger);
animation: pulse-bids 2s ease-in-out infinite;
}
@keyframes pulse-bids {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
}
.toolbar-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
flex: 1;
justify-content: flex-end;
}
.toolbar-actions .btn {
height: 42px; /* Altezza uguale al user-card */
}
/* === SESSION INFO === */
.session-info {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.4rem 1rem;
border-radius: 6px;
border: 2px solid;
transition: all 0.3s ease;
}
.session-info.connected {
background: rgba(0, 216, 0, 0.1);
border-color: var(--success-color);
}
.session-info.disconnected {
background: rgba(128, 128, 128, 0.1);
border-color: var(--text-muted);
}
.session-info i {
font-size: 1.125rem;
}
.session-info.connected i {
color: var(--success-color);
}
.session-info.disconnected i {
color: var(--text-muted);
}
.session-username {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
}
.session-bids {
font-size: 0.813rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
}
.session-bids i {
font-size: 0.875rem;
}
/* === MONITORING STATUS === */
.monitoring-status {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
border-radius: 6px;
border: 2px solid;
background: var(--bg-tertiary);
transition: all 0.3s ease;
}
.monitoring-status.active {
border-color: var(--success-color);
background: rgba(0, 216, 0, 0.1);
}
.monitoring-status.inactive {
border-color: var(--text-muted);
background: rgba(128, 128, 128, 0.1);
}
.status-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
}
.monitoring-status.active .status-indicator {
background: var(--success-color);
box-shadow: 0 0 8px var(--success-color);
animation: pulse-green 2s infinite;
}
.monitoring-status.inactive .status-indicator {
background: var(--text-muted);
}
@keyframes pulse-green {
0%, 100% {
box-shadow: 0 0 4px var(--success-color);
}
50% {
box-shadow: 0 0 16px var(--success-color);
}
}
.status-text {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.status-text strong {
font-size: 0.875rem;
font-weight: 700;
color: var(--text-primary);
}
.status-text small {
font-size: 0.75rem;
color: var(--text-muted);
}
/* === GRID LAYOUT NUOVO === */
/* Layout: Toolbar -> [Griglia Aste | Log Globale] -> Dettagli Asta (full width) */
.content-layout {
display: grid;
grid-template-columns: 1fr 4px 400px;
grid-template-rows: 1fr;
gap: 0;
flex: 1;
min-height: 0;
}
/* Griglia aste - colonna sinistra */
.auctions-grid-section {
grid-column: 1;
grid-row: 1;
border: 1px solid var(--border-color);
background: var(--bg-secondary);
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 300px;
}
.auctions-grid-section .table-responsive {
flex: 1;
overflow: auto;
}
/* Splitter verticale tra griglia e log */
.splitter-vertical {
grid-column: 2;
grid-row: 1;
background: var(--border-color);
cursor: col-resize;
position: relative;
transition: background 0.2s ease;
min-width: 6px;
width: 6px;
}
.splitter-vertical:hover {
background: var(--primary);
}
.splitter-vertical::before {
content: '⋮';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: var(--text-muted);
font-size: 16px;
opacity: 0.5;
}
.splitter-vertical:hover::before {
color: white;
opacity: 1;
}
/* Log globale - colonna destra */
.global-log {
grid-column: 3;
grid-row: 1;
border: 1px solid var(--border-color);
background: var(--bg-primary);
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 250px;
}
/* Splitter orizzontale tra top e dettagli */
.splitter-horizontal {
height: 6px;
background: var(--border-color);
cursor: row-resize;
position: relative;
transition: background 0.2s ease;
flex-shrink: 0;
}
.splitter-horizontal:hover {
background: var(--primary);
}
.splitter-horizontal::before {
content: '⋯';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: var(--text-muted);
font-size: 16px;
opacity: 0.5;
}
.splitter-horizontal:hover::before {
color: white;
opacity: 1;
}
/* Dettagli asta - sotto splitter orizzontale */
.auction-details-tabs {
border: 1px solid var(--border-color);
background: var(--bg-secondary);
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 200px;
flex: 1;
}
.auctions-grid-section h3,
.auction-details-tabs h3,
.global-log h4 {
color: var(--success-color);
font-weight: 600;
font-size: 0.9rem;
margin: 0;
padding: 0.5rem;
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-color);
flex-shrink: 0;
}
.auction-details-tabs h3 small {
font-size: 0.75rem;
font-weight: 400;
}
/* Indicatore resize visivo */
.auctions-grid-section::after,
.auction-details-tabs::after,
.global-log::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 16px;
height: 16px;
background: linear-gradient(135deg, transparent 50%, var(--border-color) 50%);
cursor: se-resize;
pointer-events: none;
}
/* === TABS === */
.nav-tabs {
background: var(--bg-tertiary);
border-bottom: 2px solid var(--border-color);
padding: 0 0.5rem;
}
.nav-tabs .nav-link {
color: var(--text-secondary);
border: none;
border-bottom: 3px solid transparent;
padding: 0.6rem 1rem;
font-size: 0.813rem;
font-weight: 600;
transition: all 0.2s ease;
}
.nav-tabs .nav-link:hover {
color: var(--text-primary);
background: var(--bg-hover);
border-bottom-color: var(--primary-color);
}
.nav-tabs .nav-link.active {
color: var(--primary-color);
background: var(--bg-secondary);
border-bottom-color: var(--primary-color);
}
.tab-content {
flex: 1;
overflow: auto;
}
.tab-pane {
height: 100%;
}
/* 🔥 COMPATTATO: Ridotto padding per massimizzare spazio */
.tab-panel-content {
padding: 0.5rem 0.75rem;
}
/* === GRADIENTS FOR CARDS === */
.bg-gradient-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, #005a99 100%);
}
.bg-gradient-success {
background: linear-gradient(135deg, var(--success-color) 0%, #00a000 100%);
}
.bg-gradient-warning {
background: linear-gradient(135deg, var(--warning-color) 0%, #cc9200 100%);
}
.bg-gradient-danger {
background: linear-gradient(135deg, var(--danger-color) 0%, #b00e1a 100%);
}
.bg-gradient-info {
background: linear-gradient(135deg, var(--info-color) 0%, #008c96 100%);
}
/* === LOG === */
.log-box {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 0.5rem;
background: var(--bg-primary);
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.75rem;
line-height: 1.4;
scroll-behavior: smooth;
}
.log-box.auto-scroll {
/* Scroll mantenuto al bottom automaticamente */
}
/* === VERSION BADGE === */
.version-badge {
position: fixed;
bottom: 10px;
right: 10px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
padding: 0.4rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
color: var(--text-muted);
z-index: 1000;
display: flex;
align-items: center;
gap: 0.375rem;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.version-badge:hover {
opacity: 1;
}
.version-badge i {
font-size: 0.875rem;
}
/* === FORMS === */
.form-control, .form-select {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-secondary);
font-size: 0.813rem;
padding: 0.3rem 0.5rem;
border-radius: 3px;
}
.form-control:focus, .form-select:focus {
background: var(--bg-primary);
border-color: var(--primary-color);
color: var(--text-primary);
box-shadow: 0 0 0 0.2rem rgba(0, 122, 204, 0.25);
}
.form-label {
color: var(--text-secondary);
font-weight: 500;
font-size: 0.813rem;
margin-bottom: 0.25rem;
}
.form-check-input {
background-color: var(--bg-tertiary);
border-color: var(--border-color);
}
.form-check-input:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
/* === BADGES === */
.badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 3px;
font-weight: 600;
}
.badge.bg-success {
background: var(--success-color) !important;
color: #000;
}
.badge.bg-warning {
background: var(--warning-color) !important;
color: #000;
}
.badge.bg-danger {
background: var(--danger-color) !important;
}
.badge.bg-info {
background: var(--info-color) !important;
color: #000;
}
.badge.bg-secondary {
background: var(--bg-hover) !important;
color: var(--text-secondary);
}
.badge.bg-primary {
background: var(--primary-color) !important;
}
/* === BUTTONS GROUP === */
.btn-group-sm .btn {
padding: 0.2rem 0.5rem;
font-size: 0.75rem;
}
/* === SPINNER === */
.spinner-border-sm {
width: 0.875rem;
height: 0.875rem;
border-width: 0.15em;
}
.spinner-border {
display: inline-block;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: spinner-border 0.75s linear infinite;
}
@keyframes spinner-border {
to { transform: rotate(360deg); }
}
/* === AUCTION DETAILS SECTIONS === */
.auction-info {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 0.5rem;
margin: 0.25rem;
}
/* 🔥 COMPATTATO: Ridotto margin e padding per info-group */
.info-group {
margin-bottom: 0.4rem;
}
.info-group label {
display: block;
font-weight: 600;
margin-bottom: 0.15rem;
color: var(--text-secondary);
font-size: 0.75rem;
}
/* 🔥 COMPATTATO: Input più piccoli */
.info-group input.form-control,
.info-group select.form-control {
padding: 0.25rem 0.5rem;
font-size: 0.85rem;
height: auto;
}
/* 🔥 GRIGLIA IMPOSTAZIONI COMPATTA */
.settings-grid-compact {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.settings-grid-compact .setting-item {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.settings-grid-compact .setting-item label {
font-size: 0.7rem;
color: var(--text-secondary);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.settings-grid-compact .setting-item label i {
margin-right: 0.2rem;
}
/* 🔥 Input stretti per valori numerici */
.input-narrow {
max-width: 90px !important;
text-align: center;
padding: 0.2rem 0.4rem !important;
font-size: 0.8rem !important;
}
/* Responsive: su schermi piccoli, 2 colonne */
@media (max-width: 768px) {
.settings-grid-compact {
grid-template-columns: repeat(2, 1fr);
}
.input-narrow {
max-width: 100% !important;
}
}
.auction-log, .bidders-stats {
margin: 0.25rem;
}
.auction-log h4, .bidders-stats h4 {
color: var(--success-color);
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.5rem;
padding-bottom: 0.25rem;
border-bottom: 1px solid var(--border-color);
}
/* === INPUT GROUPS === */
.input-group .form-control {
border-right: 1px solid var(--border-color);
}
.input-group-text {
background: var(--bg-tertiary);
border-color: var(--border-color);
color: var(--text-secondary);
font-size: 0.813rem;
}
/* === MODAL === */
.modal-content {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
color: var(--text-secondary);
}
.modal-header {
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-color);
}
.modal-footer {
background: var(--bg-tertiary);
border-top: 1px solid var(--border-color);
}
.btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* === ALERTS === */
.alert {
border-radius: 3px;
border: 1px solid;
font-size: 0.813rem;
padding: 0.5rem 0.75rem;
}
.alert-info {
background: rgba(0, 183, 195, 0.1);
border-color: var(--info-color);
color: var(--info-color);
}
.alert-success {
background: rgba(0, 216, 0, 0.1);
border-color: var(--success-color);
color: var(--success-color);
}
.alert-warning {
background: rgba(255, 183, 0, 0.1);
border-color: var(--warning-color);
color: var(--warning-color);
}
.alert-danger {
background: rgba(232, 17, 35, 0.1);
border-color: var(--danger-color);
color: var(--danger-color);
}
.alert-secondary {
background: rgba(62, 62, 66, 0.1);
border-color: var(--border-color);
color: var(--text-secondary);
}
/* === CARDS === */
.card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 3px;
color: var(--text-secondary);
}
.card-header {
background: var(--bg-tertiary);
border-bottom: 1px solid var(--border-color);
font-weight: 600;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.card-body {
padding: 0.75rem;
}
/* === SCROLLBAR === */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: var(--bg-hover);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* === TEXT COLORS === */
.text-success {
color: var(--success-color) !important;
}
.text-warning {
color: var(--warning-color) !important;
}
.text-danger {
color: var(--danger-color) !important;
}
.text-info {
color: var(--info-color) !important;
}
.text-muted {
color: var(--text-muted) !important;
}
.text-primary {
color: var(--text-primary) !important;
}
.fw-semibold {
font-weight: 600 !important;
}
/* === PRODUCT INFO NUOVO DESIGN === */
.product-header h5,
.product-calculations h5,
.product-totals h5 {
color: var(--success-color);
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--border-color);
}
.product-main-info {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 1rem;
}
.info-row {
display: grid;
grid-template-columns: 40px 1fr auto;
align-items: center;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-color);
}
.info-row:last-child {
border-bottom: none;
}
.info-icon {
font-size: 1.5rem;
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
.info-label {
font-size: 0.875rem;
color: var(--text-secondary);
font-weight: 500;
}
.info-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
text-align: right;
}
.info-value.primary {
color: var(--primary-color);
}
/* === CALCOLI GRID === */
.calc-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.calc-item {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
padding: 0.875rem;
transition: all 0.2s ease;
}
.calc-item:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
}
.calc-item.highlight {
border-color: var(--success-color);
background: rgba(0, 216, 0, 0.05);
}
.calc-label {
font-size: 0.75rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.calc-label i {
font-size: 0.875rem;
}
.calc-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
}
/* === TOTALI BOX === */
.totals-box {
background: var(--bg-tertiary);
border: 2px solid var(--border-color);
border-radius: 8px;
padding: 1.25rem;
}
.total-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
}
.total-label {
font-size: 0.938rem;
color: var(--text-secondary);
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
}
.total-value {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
}
.total-value.warning {
color: var(--warning-color);
}
.total-divider {
height: 2px;
background: var(--border-color);
margin: 0.5rem 0;
}
.total-row.final {
background: var(--bg-hover);
margin: 0.75rem -1.25rem 0;
padding: 1rem 1.25rem;
border-radius: 0 0 6px 6px;
}
.total-row.final .total-label,
.total-row.final .total-value {
font-size: 1.25rem;
}
.total-row.final.savings .total-value {
color: var(--success-color);
}
.total-row.final.loss .total-value {
color: var(--danger-color);
}
.verdict {
text-align: center;
padding: 0.75rem;
margin: 1rem -1.25rem -1.25rem;
border-radius: 0 0 6px 6px;
font-size: 1.125rem;
font-weight: 700;
}
.verdict.success {
background: linear-gradient(135deg, rgba(0, 216, 0, 0.2) 0%, rgba(0, 160, 0, 0.15) 100%);
color: var(--success-color);
}
.verdict.danger {
background: linear-gradient(135deg, rgba(232, 17, 35, 0.2) 0%, rgba(180, 14, 28, 0.15) 100%);
color: var(--danger-color);
}
.verdict i {
font-size: 1.25rem;
margin-right: 0.5rem;
}
/* === PRODUCT INFO COMPATTO === */
.product-info-compact {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Card info principali - orizzontali compatte */
.info-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.4rem;
}
.info-card {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.6rem;
border-radius: 4px;
border: 1px solid;
transition: background-color 0.2s ease;
}
.info-card:hover {
background: var(--bg-hover);
}
.info-card i {
font-size: 1.1rem;
flex-shrink: 0;
}
.info-card div {
display: flex;
flex-direction: column;
gap: 0;
}
.info-card small {
font-size: 0.6rem;
text-transform: uppercase;
letter-spacing: 0.3px;
color: var(--text-muted);
font-weight: 500;
}
.info-card strong {
font-size: 0.9rem;
font-weight: 700;
color: var(--text-primary);
}
.info-card.primary {
background: rgba(0, 122, 204, 0.08);
border-color: var(--primary-color);
}
.info-card.primary i {
color: var(--primary-color);
}
.info-card.info {
background: rgba(0, 183, 195, 0.08);
border-color: var(--info-color);
}
.info-card.info i {
color: var(--info-color);
}
/* Calcoli inline - 4 colonne compatte */
.calc-inline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.3rem;
padding: 0.4rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 4px;
}
.calc-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
padding: 0.25rem;
text-align: center;
border-radius: 3px;
transition: background-color 0.2s ease;
}
.calc-item:hover {
background: var(--bg-hover);
}
.calc-item.highlight {
background: rgba(0, 216, 0, 0.08);
border: 1px solid var(--success-color);
}
.calc-item i {
font-size: 0.9rem;
color: var(--primary-color);
}
.calc-item.highlight i {
color: var(--success-color);
}
.calc-item .label {
font-size: 0.6rem;
color: var(--text-muted);
font-weight: 500;
}
.calc-item .value {
font-size: 0.85rem;
font-weight: 700;
color: var(--text-primary);
}
/* Totali compatti - 3 colonne */
.totals-compact {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 0.4rem;
align-items: center;
}
.total-item {
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.4rem 0.6rem;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 4px;
}
.total-item span {
font-size: 0.65rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.2rem;
}
.total-item strong {
font-size: 0.9rem;
font-weight: 700;
}
.total-item.warning strong {
color: var(--warning-color);
}
.total-item.success strong {
color: var(--success-color);
}
.total-item.danger strong {
color: var(--danger-color);
}
.verdict-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.4rem 0.8rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
}
.verdict-badge.success {
background: linear-gradient(135deg, rgba(0, 216, 0, 0.15) 0%, rgba(0, 160, 0, 0.1) 100%);
color: var(--success-color);
border: 1px solid var(--success-color);
}
.verdict-badge.danger {
background: linear-gradient(135deg, rgba(232, 17, 35, 0.15) 0%, rgba(180, 14, 28, 0.1) 100%);
color: var(--danger-color);
border: 1px solid var(--danger-color);
}
.verdict-badge i {
font-size: 0.85rem;
}
/* === RESPONSIVE === */
@media (max-width: 1200px) {
.content-layout {
grid-template-columns: 1fr !important;
grid-template-rows: 1fr;
}
.auctions-grid-section {
grid-column: 1;
grid-row: 1;
min-width: auto;
}
.splitter-vertical {
display: none;
}
.global-log {
display: none; /* Nascosto su tablet */
}
.auction-details-tabs {
min-height: 300px;
}
.info-cards,
.calc-inline {
grid-template-columns: 1fr;
}
.totals-compact {
grid-template-columns: 1fr;
}
.verdict-badge {
justify-content: flex-start;
}
}
@media (max-width: 768px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
main {
margin-left: 0;
}
.toolbar {
flex-direction: column;
}
.toolbar .btn {
width: 100%;
}
.nav-tabs .nav-link {
padding: 0.4rem 0.6rem;
font-size: 0.75rem;
}
.calc-item .label {
font-size: 0.625rem;
}
.calc-item .value {
font-size: 0.875rem;
}
.info-card i {
font-size: 1.5rem;
}
.info-card strong {
font-size: 1rem;
}
}
/* === TABLE FIXED COLUMNS === */
.table-fixed {
table-layout: fixed;
width: 100%;
}
.table-fixed .col-stato { width: 100px; }
.table-fixed .col-nome { width: auto; min-width: 200px; }
.table-fixed .col-prezzo { width: 90px; }
.table-fixed .col-timer { width: 90px; }
.table-fixed .col-ultimo { width: 120px; }
.table-fixed .col-click { width: 90px; text-align: center; padding-right: 10px; }
.table-fixed .col-ping { width: 90px; padding-left: 10px; }
.table-fixed .col-azioni { width: 150px; }
.table-fixed td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table-fixed .col-nome {
white-space: normal;
word-wrap: break-word;
}
/* === LOG COLORS BY SEVERITY === */
.log-entry-error,
.log-box div:has-text("[ERROR]"),
.log-box div:has-text("Errore"),
.log-box div:has-text("FAIL") {
color: var(--log-error);
font-weight: 600;
}
.log-entry-warning,
.log-box div:has-text("[WARN]"),
.log-box div:has-text("Warning") {
color: var(--log-warning);
}
.log-entry-success,
.log-box div:has-text("[OK]"),
.log-box div:has-text("SUCCESS"),
.log-box div:has-text("Vinta") {
color: var(--log-success);
font-weight: 600;
}
.log-entry-info {
color: var(--log-info);
}
.log-entry-debug {
color: var(--log-debug);
}
/* LOG BOX con auto-scroll */
.log-box {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 0.5rem;
background: var(--bg-primary);
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.75rem;
line-height: 1.4;
scroll-behavior: smooth;
}
.log-box.auto-scroll {
/* Scroll mantenuto al bottom automaticamente */
}
/* === VERSION BADGE === */
.version-badge {
position: fixed;
bottom: 10px;
right: 10px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
padding: 0.4rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
color: var(--text-muted);
z-index: 1000;
display: flex;
align-items: center;
gap: 0.375rem;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.version-badge:hover {
opacity: 1;
}
.version-badge i {
font-size: 0.875rem;
}