/* ---------------------------------------------------------- FlippingPRO – UI Kit Dark • style.css - Tipografia: Inter - Palette tokenizzata - Card/macOS style, KPI, tabelle, modali (mobile-ready) - Toast, FilterPill, Skeleton, Loader, Focus states ---------------------------------------------------------- */ /* Font (puoi spostare questo @import in se preferisci) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ===== Design Tokens ===== */ :root{ /* Spaziature */ --gap-1:4px; --gap-2:8px; --gap-3:12px; --gap-4:16px; --gap-5:20px; --gap-6:24px; --gap-8:32px; --gap-10:40px; /* Colori Base */ --bg-main:#021d3d; /* fondo app */ --bg-elev:#0f141a; /* card/modali */ --bg-soft:#101419; /* kpi soft */ --line:#252b33; /* bordo/linee */ /* Testo */ --text:#e9edf2; --text-dim:#c7cbd1; --text-muted:#a8b0bb; /* Accenti */ --primary:#0d6efd; --success:#22c55e; --danger:#ef4444; --warning:#facc15; --info:#38bdf8; /* Stati riga/etichetta */ --stato-acquistato:#cfe8ff; --stato-venduto:#baf7c1; --stato-rosso:#ffb4b4; --stato-listato:#ffe7b0; /* Ombre */ --shadow-1: 0 2px 8px rgba(0,0,0,.35); --shadow-2: 0 6px 20px rgba(0,0,0,.35); /* Raggi */ --radius-10:10px; --radius-12:12px; --radius-14:14px; --radius-16:16px; /* Focus ring */ --focus-ring: 0 0 0 2px rgba(13,110,253,.6); } /* ===== Base ===== */ html,body{ background:var(--bg-main); color:var(--text); font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body{ font-feature-settings:"tnum"; line-height:1.45; } a{ color: var(--text-dim); text-decoration: none; } a:hover{ color:#fff; } /* Focus visibile per accessibilità */ :focus-visible{ outline: none !important; box-shadow: var(--focus-ring) !important; border-radius: 8px; } /* ===== Sidebar / Header / Content ===== */ .sidebar{ position: fixed; inset: 0 auto 0 0; width: 240px; padding: 16px; background:#021d3d; border-right:1px solid var(--line); overflow-y:auto; } .sidebar h4{ color:#eaeef3; font-weight:800; margin:0 0 12px; letter-spacing:.2px; } .sidebar a{ display:block; padding:10px 12px; margin-bottom:6px; color:#cfd6df; border-radius: var(--radius-10); transition: .15s ease; } .sidebar a:hover, .sidebar a.active{ background: rgba(255,255,255,.06); color:#fff; } .header{ display:flex; align-items:center; justify-content:space-between; padding: var(--gap-4); margin-left:240px; border-bottom:1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); position: sticky; top: 0; z-index: 1020; backdrop-filter: blur(8px); } .header h1, .header h3{ margin:0; font-weight:800; letter-spacing:.2px; } .content{ margin-left:240px; padding:16px; } @media (max-width: 992px){ .sidebar{ position: static; width: 100%; height: auto; border-right:none; border-bottom:1px solid var(--line); } .header, .content{ margin-left:0; } .header{ flex-direction:column; align-items:flex-start; gap:var(--gap-2); } } /* ===== Cards / KPI ===== */ .card{ background:var(--bg-elev); border:1px solid var(--line); border-radius: var(--radius-14); padding: var(--gap-4); box-shadow: var(--shadow-1); } .card + .card{ margin-top: var(--gap-4); } .kpi-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gap-4); } @media (max-width: 1200px){ .kpi-grid{ grid-template-columns: repeat(3,1fr); } } @media (max-width: 768px){ .kpi-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 480px){ .kpi-grid{ grid-template-columns: 1fr; } } /* Card KPI stile dashboard originale */ .kpi-card { background-color: #2a2d31; /* box scuro */ border: 1px solid #444; border-radius: .5rem; padding: 1rem 1.25rem; color: #fff; min-height: 110px; display: flex; flex-direction: column; justify-content: flex-start; } .kpi-card h5 { color: #ffb74d; /* arancio titolo */ font-size: .9rem; font-weight: 600; margin: 0 0 .5rem 0; display: flex; align-items: center; gap: .4rem; } .kpi-card .kpi-value { font-size: 2rem; font-weight: 700; line-height: 1.2; color: #fff; margin: 0; } .kpi-card .kpi-sub { font-size: .8rem; color: #bbb; margin-top: .25rem; } /* evidenziazione del box "Saldo disponibile" */ .kpi-card.budget-ok { border: 2px solid #2e7d32; /* verde ok */ } .kpi-card.budget-warn { border: 2px solid #f9a825; /* giallo warning */ } .kpi-card.budget-bad { border: 2px solid #c62828; /* rosso bad */ } /* abilita il click stile bottone */ .kpi-card.clickable { cursor: pointer; } .kpi-card.clickable:hover { background-color: #34383d; } /* tabella nei modali dettaglio */ .table-dark.table-sm th, .table-dark.table-sm td { vertical-align: middle; font-size: .85rem; } @media (max-width: 992px){ .kpi-value{ font-size:1.6rem } } /* ===== Budget 3-col ===== */ .budget-block{ border-radius: var(--radius-16); background: var(--bg-elev); border:1px solid var(--line); padding: var(--gap-4); } .budget-cols{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap-3); } @media (max-width: 768px){ .budget-cols{ grid-template-columns: 1fr; } } .budget-col{ border-radius: var(--radius-12); padding: var(--gap-4); background: var(--bg-soft); border:1px solid var(--line); } .budget-col h6{ color:#cfd8dc; margin:0 0 var(--gap-2) } .budget-col .val{ font-weight:900; font-size:1.6rem; } .budget-true{ border-width:2px } .budget-ok{ border-color: var(--success) } .budget-warn{ border-color: var(--warning) } .budget-bad{ border-color: var(--danger) } @media (max-width: 576px){ .budget-col .val{ font-size:1.35rem } } /* ===== Tabelle ===== */ .table{ --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255,255,255,.02); --bs-table-striped-color: var(--text); color: var(--text); } .table thead th{ color:#eaeef3; background:#1b2027; border-bottom:1px solid var(--line); } .table td, .table th{ vertical-align: middle; border-color: var(--line); } .table tbody tr:hover{ background: rgba(255,255,255,.03); } /* Badge stato */ .stato-acquistato{ color: var(--stato-acquistato); font-weight:600 } .stato-venduto{ color: var(--stato-venduto); font-weight:600 } .stato-rosso{ color: var(--stato-rosso); font-weight:600 } .stato-listato{ color: var(--stato-listato); font-weight:600 } .stato-warning { color: #ffc107; font-weight: 600; } /* Header sort hint (se vuoi aggiungere frecce con JS) */ .th-sortable{ cursor: pointer; user-select:none; } .th-sortable:hover{ background: rgba(255,255,255,.03); } /* ===== Modali (desktop + mobile) ===== */ .modal-content{ background: var(--bg-elev); color: var(--text); border-radius: var(--radius-14); border: 1px solid var(--line); box-shadow: var(--shadow-2); } .modal-header{ border-color: var(--line); } .modal-footer{ border-color: var(--line); } /* Fullscreen su mobile: se non usi .modal-fullscreen-sm-down di Bootstrap */ @media (max-width: 576px){ .modal-dialog{ margin: 0; max-width: 100%; height: 100%; } .modal-content{ height: 100%; border-radius: 0; display:flex; flex-direction: column; } .modal-body{ overflow:auto; } } /* ===== Form / Input ===== */ .form-control, .form-select, .form-check-input{ background: #0f141a; color: var(--text); border: 1px solid var(--line); border-radius: 10px; } .form-control:focus, .form-select:focus{ background: #0f141a; color: var(--text); border-color: #3b82f6; box-shadow: var(--focus-ring); } /* Input con prefisso/suffisso (valuta/percentuale) */ .input-adorn{ position: relative; } .input-adorn input{ padding-left: 38px; /* spazio per prefisso */ } .input-adorn .prefix{ position:absolute; inset: 0 auto 0 10px; height:100%; display:flex; align-items:center; color: var(--text-muted); pointer-events:none; font-weight:700; } .input-adorn.suffix input{ padding-left: 12px; padding-right: 38px; } .input-adorn .suffix{ position:absolute; inset: 0 10px 0 auto; height:100%; display:flex; align-items:center; color: var(--text-muted); pointer-events:none; font-weight:700; } /* Pulsanti */ .btn{ border-radius: 10px; border:1px solid transparent; transition: transform .05s ease, background .15s ease, opacity .2s ease; } .btn:active{ transform: translateY(1px); } .btn-primary{ background: var(--primary); border-color: var(--primary); } .btn-outline-light{ border-color: #3b4653; color:#dbe3ec; } .btn-outline-light:hover{ background:#1d242c; } .btn-success{ background: var(--success); border-color: var(--success); } .btn-danger{ background: var(--danger); border-color: var(--danger); } .btn-warning{ background: #f59e0b; border-color: #f59e0b; color:#0a0d12; } /* Notifiche campanella */ #btnNotifiche{ position: relative; } #badgeNotifiche{ transform: translate(50%,-50%); font-weight:700; } /* Dropdown notifiche */ .dropdown-menu{ border:1px solid var(--line); background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-2); } .dropdown-item{ color: var(--text-dim) } .dropdown-item:hover{ background: rgba(255,255,255,.06); color: #fff } /* ===== Chart ===== */ canvas{ max-height: 160px !important } .chart-wrap{ border-top:1px solid var(--line); padding: var(--gap-3) } /* ===== Filter Pill ===== */ .filter-pill{ display:inline-flex; align-items:center; gap:6px; background:#1b2027; border:1px solid var(--line); color:#dbe3ec; padding:6px 10px; border-radius: 999px; font-size:.85rem; } .filter-pill .x{ background: rgba(255,255,255,.08); width:18px; height:18px; display:grid; place-items:center; border-radius:50%; cursor:pointer; } /* ===== Toast unificati ===== */ .toast-fixed{ position:fixed; right:16px; bottom:16px; z-index:1060 } .toast{ background: #0f141a; color: var(--text); border:1px solid var(--line); border-radius: 12px; } .toast-header{ background:#151a20; color: var(--text-dim); border-bottom:1px solid var(--line) } /* ===== Skeleton loader ===== */ .skeleton{ position:relative; overflow:hidden; background:#0f141a; border-radius: 8px; } .skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); animation:sheen 1.2s infinite; } .skeleton-row { height: 38px; background: #11151a; position: relative; overflow: hidden; } .skeleton-row::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent); animation:sheen 1.2s infinite; } /* Spinner semplice */ .loader{ width: 42px; height: 42px; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin:auto; } @keyframes spin{ to{ transform: rotate(360deg) } } /* ===== Utility ===== */ .mono{ font-feature-settings:"tnum"; } .text-dim{ color: var(--text-dim) } .text-muted{ color: var(--text-muted) } .hr{ height:1px; background: var(--line); border:0; margin: var(--gap-4) 0; } /* Piccoli affinamenti Bootstrap */ .table-dark{ --bs-table-bg: transparent; } .form-check-input:checked{ background-color: var(--primary); border-color: var(--primary); } .form-check-input:focus{ box-shadow: var(--focus-ring); border-color:#3b82f6; } /* ===== FlippingPRO • UI shared tweaks (applies to all pages) ===== */ :root{ /* accento leggibile sul dark */ --accent-orange: #ffb347; } /* KPI cards (riutilizzabili) */ .kpi-card{ border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); border-radius:14px; padding:18px; cursor:pointer; transition:.2s; } .kpi-card:hover{ background:rgba(255,255,255,.08); transform:translateY(-1px); } .kpi-title{ font-size:.95rem; color:var(--accent-orange); display:flex; align-items:center; gap:8px; } .kpi-title img{ height:22px; width:22px; object-fit:contain; filter:brightness(1.1); } .kpi-value{ font-size:2rem; font-weight:800; color:#fff; } /* Budget block (3 colonne) */ .budget-block{ border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:16px; } .budget-col{ border-radius:12px; padding:16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); } .budget-col h6{ color:var(--accent-orange); margin:0 0 8px; } .budget-col .val{ font-weight:800; font-size:1.6rem; } .budget-true{ border-width:2px; } .budget-ok{ border-color:#2e7d32; } .budget-warn{ border-color:#f9a825; } .budget-bad{ border-color:#c62828; } /* Titoletti card più leggibili su dark (senza toccare h1) */ .card > h5, .card h5{ color: var(--accent-orange); } /* Grafico compatto (usa .chart-wrap nel markup del grafico) */ .chart-wrap{ border-top:1px solid rgba(255,255,255,.08); padding:12px; } .chart-wrap canvas{ max-height:160px !important; } /* Numeri monospaziati per KPI/importi (aggiungi class="mono" dove serve) */ .mono{ font-feature-settings:"tnum"; } /* Accessibilità focus (tutti i bottoni/link) */ .kpi-card:focus, .btn:focus, a:focus { outline: 2px solid var(--accent-orange); outline-offset: 2px; } /* ===== UI Polish v2 – testo secondario, hint e modali ===== */ /* Colore sottotitoli e label */ :root { --accent-orange: #ffb347; --accent-orange-soft: #ffcb85; /* arancione tenue per testo minore */ } /* Testo secondario (label, intestazioni tabella, sottotitoli, filtri) */ label, .form-label, .table th, .small, .text-muted, .dropdown-header, .filter-label, .modal h6, .card small { color: var(--accent-orange-soft) !important; } /* Placeholder / hint uniformi (input, textarea, select) */ input::placeholder, textarea::placeholder, select:invalid, input[type="date"]::before { color: rgba(255,255,255,0.6) !important; opacity: 1 !important; } .form-select, input, textarea { color: #fff !important; } /* Dropdown e select coerenti */ .form-select option { background-color: #021d3d; color: #fff; } /* ===== Modali eleganti ===== */ .modal-content { background: linear-gradient(180deg, #1a1f27 0%, #101419 100%); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); overflow: hidden; } .modal-header { border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); } .modal-header .modal-title { font-weight: 700; color: var(--accent-orange); } .modal-body { padding: 1.5rem; } .modal-footer { border-top: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); } /* Bottoni nelle modali */ .modal .btn-primary { background-color: var(--accent-orange); border-color: var(--accent-orange); color: #111; font-weight: 600; transition: all .2s; } .modal .btn-primary:hover { background-color: #ffb347dd; transform: translateY(-1px); } .modal .btn-close-white { filter: invert(1) contrast(90%); } /* Overlay sfumato per modali */ .modal-backdrop.show { background: rgba(0,0,0,0.8); backdrop-filter: blur(3px); } /* Input dentro modali */ .modal input, .modal textarea, .modal select { background-color: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; } .modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--accent-orange); box-shadow: 0 0 0 0.2rem rgba(255,179,71,0.25); } /* Titoletti sezione (come “Filtri” o “Report mensile”) */ .card h5, .card-title, .section-title { color: var(--accent-orange); font-weight: 600; } .sidebar .discord-cta { padding: 1rem 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 1.5rem; } .btn-discord { background-color: #5865F2; border-color: #5865F2; color: #fff; border-radius: 999px; font-weight: 600; font-size: 0.9rem; } .btn-discord:hover { background-color: #4752c4; border-color: #4752c4; color: #fff; } footer { font-size: 0.9rem; } footer a { text-decoration: none; color: #d1d1d1; /* Colore dei link */ } footer a:hover { color: #f5a623; /* Colore dei link al passaggio del mouse */ } .plan-pill { cursor: pointer; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0.6rem; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: #f1f1f1; } .plan-pill.pro { background: #20c997; /* verde acqua */ color: #0b1f17; border-color: #20c997; } .plan-pill.free { background: transparent; color: #adb5bd; } .plan-pill:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,0.06); } #userEmail[role="button"] { display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .user-email-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,0.3); } .user-email-avatar-fallback { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; color: #0b1420; background: #f59e0b; border: 1px solid rgba(255,255,255,0.22); } .row-evidenziata { animation: highlightRow 2s ease-out; background-color: rgba(255, 193, 7, 0.25) !important; } @keyframes highlightRow { 0% { background-color: rgba(255, 193, 7, 0.8); } 100% { background-color: rgba(255, 193, 7, 0.0); } } .sidebar { width: 260px; flex-shrink: 0; background: #021d3d; /* stesso grigio di bg-dark */ border-right: 1px solid rgba(148, 163, 184, 0.3); padding: 1.5rem 1rem; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; } .header { padding: 0.75rem 1.5rem; border-bottom: 1px solid rgba(148, 163, 184, 0.3); background: #021d3d; /* uniforme al resto */ position: sticky; top: 0; z-index: 1030; } /* ===== Layout base app interna ===== */ .app-shell { display: flex; min-height: 100vh; } /* Sidebar layout */ .sidebar { width: 260px; flex-shrink: 0; background: #021d3d; border-right: 1px solid rgba(148, 163, 184, 0.3); padding: 1.5rem 1rem; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; } .sidebar-title { font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; margin-bottom: 1rem; } /* Link menu */ .sidebar a { display: flex; align-items: center; padding: 0.4rem 0.6rem; border-radius: 0.5rem; color: #e5e7eb; text-decoration: none; font-size: 0.9rem; margin-bottom: 0.25rem; } .sidebar a.active, .sidebar a:hover { background: rgba(56, 189, 248, 0.15); color: #f9fafb; } /* Main area */ .main-area { min-width: 0; } /* Header sopra la content */ .header { padding: 0.75rem 1.5rem; border-bottom: 1px solid rgba(148, 163, 184, 0.3); background: #021d3d; position: sticky; top: 0; z-index: 1030; } /* Content */ .content { padding: 1.5rem; } /* Backdrop mobile */ .sidebar-backdrop { display: block; } /* ===== MOBILE: sidebar come offcanvas da sinistra ===== */ @media (max-width: 991.98px) { .sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform 0.2s ease-out; z-index: 1040; } body.sidebar-open .sidebar { transform: translateX(0); } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.75); z-index: 1035; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out; } body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } /* Content più stretta su mobile */ .header { padding-inline: 1rem; } .content { padding: 1rem; } } /* ===== DESKTOP: sidebar collassabile ===== */ @media (min-width: 992px) { /* quando collassata: sidebar stretta */ body.sidebar-collapsed .sidebar { width: 70px; padding-inline: 0.5rem; } /* nascondo etichette testuali ma tengo le icone/emoji */ body.sidebar-collapsed .sidebar .sidebar-label { display: none; } body.sidebar-collapsed .sidebar-title, body.sidebar-collapsed .discord-cta { display: none; } } /* Override nuovo layout app-shell */ .app-shell .header { margin-left: 0; } .app-shell .content { margin-left: 0; } /* Mobile: tabella -> card stile app */ @media (max-width: 768px) { #tabProdotti thead { display: none; /* nascondi intestazioni */ } #tabProdotti { border-collapse: separate; border-spacing: 0 12px; /* spazio tra le card */ } #tabProdotti tbody tr { display: block; background: var(--bg-elev); border-radius: 16px; box-shadow: var(--shadow-1); padding: 12px 14px; } #tabProdotti tbody tr:hover { background: var(--bg-elev); /* niente highlight strano */ } #tabProdotti tbody td { display: block; border: none; padding: 2px 0; font-size: 0.9rem; } /* etichetta sopra al valore, tipo "Acquisto", "Profitto"... */ #tabProdotti tbody td::before { content: attr(data-label); display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: -2px; } /* prima riga (nome) più grande */ #tabProdotti tbody td:first-child { font-size: 1.1rem; font-weight: 600; } #tabProdotti tbody td:first-child::before { content: ''; /* niente etichetta "Nome" sulla prima riga */ } /* colonna azioni in basso allineata a destra */ #tabProdotti tbody td:last-child { margin-top: 8px; text-align: right; } } #kpiVenditeDestinazione { font-size: 1.2rem; /* Imposta una dimensione più piccola per il testo */ } /* ===== UI Pass Feb 2026 ===== */ .kpi-card { cursor: default; } .kpi-card.clickable { cursor: pointer; } .kpi-card .kpi-value { font-variant-numeric: tabular-nums; letter-spacing: 0.2px; } .kpi-card .kpi-sub { color: var(--text-muted); } .card > h5, .card h5 { margin-bottom: 0.65rem; } .card h6 { margin-bottom: 0.5rem; color: var(--text-dim); } .header h1 { font-size: 1.4rem; } @media (max-width: 576px) { .header h1 { font-size: 1.2rem; } } .content { width: 100%; max-width: none; margin-inline: 0; } .table td, .table th { padding: 0.55rem 0.75rem; } .table thead th { font-weight: 600; letter-spacing: 0.02em; } #kpiVenditeDestinazione { line-height: 1.35; } /* ===== Dashboard layout: sezioni + personalizzazione ===== */ .dash-section { padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.06); } .dash-section:first-of-type { border-top: none; } .dash-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .dash-title { font-size: 1.05rem; font-weight: 700; color: var(--accent-orange); margin: 0; } .dash-sub { font-size: 0.85rem; color: var(--text-muted); } .dash-mix-pill { margin-left: auto; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: #0b1420; background: #f59e0b; border-radius: 999px; padding: 2px 8px; font-weight: 700; } .dashboard-toolbar { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 10px 12px; } .dash-item { position: relative; } .dash-item.dragging { opacity: 0.6; } .dash-item.drag-over { outline: 2px dashed rgba(255,255,255,0.2); outline-offset: 4px; } .card-toggle { position: absolute; top: 10px; right: 10px; z-index: 2; } .widget-toggle-btn { border: 1px solid rgba(255,255,255,0.14); background: rgba(2, 29, 61, 0.88); color: #f8fafc; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; line-height: 1; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease; } .widget-toggle-btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.28); } .widget-toggle-btn[data-active="0"] { opacity: 0.45; background: rgba(15, 20, 26, 0.95); } .widget-toggle-btn:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 2px; } .kpi-scope { display: inline-block; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; padding: 2px 8px; margin-bottom: 6px; } .dash-item.is-hidden { display: none; } .dash-item.scope-mismatch .kpi-card { border-color: rgba(245, 158, 11, 0.65); box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.28); } .health-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; background: rgba(255,255,255,0.03); color: #f3f6fb; } .health-row + .health-row { margin-top: 8px; } .health-title { color: #ffffff; font-weight: 600; } .health-meta { font-size: 0.82rem; color: #cfd8e3; } .health-sev { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px; padding: 3px 8px; font-weight: 700; } .health-sev.crit { background: #ef4444; color: #fff; } .health-sev.warn { background: #f59e0b; color: #1f2937; } .health-sev.info { background: #38bdf8; color: #082f49; } @media (max-width: 576px) { .dash-section-head { flex-direction: column; align-items: flex-start; } .card-toggle { top: 8px; right: 8px; } }