/* PettyCash — struttura DashQ + grafica/colori Chatzy (blu default, arrotondato, morbido). Le classi pc-* usano le variabili Bootstrap così il colore segue lo switcher e il dark mode. */ :root { /* Blu Chatzy-style come primario di default (poi lo switcher lo sovrascrive su ). */ --bs-primary: #2563eb; --bs-primary-rgb: 37, 99, 235; /* Verde/rosso in stile Chatzy */ --bs-success: #22c55e; --bs-success-rgb: 34, 197, 94; --bs-danger: #ee595c; --bs-danger-rgb: 238, 89, 92; --pc-radius: 16px; /* raggio generoso stile Chatzy */ --pc-radius-sm: 12px; } /* ---- Schermo pieno ---- Il layout DashQ imposta .app-wrapper come griglia "aside header rightbar" con corsie laterali fisse (80→120px a sinistra, 60px a destra) per elementi che NOI non usiamo: restavano due bande vuote. Qui la griglia torna a colonna singola, a tutta larghezza. Specificità body.layout-main (0,2,1) per battere le regole nei @media di layout-main.css. */ body.layout-main .app-wrapper { grid-template-columns: 1fr; grid-template-areas: "header" "main" "footer"; max-width: none; width: 100%; } body.layout-main .app-body { width: 100%; } /* Estetica Chatzy: superfici morbide, ombre leggere, angoli arrotondati */ body { background: var(--bs-app-body, #eef1f6); } .app-body.border, .app-wrapper header.border-bottom { border-color: rgba(0,0,0,.06) !important; } .btn { border-radius: 10px; } .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary-dark, #1d4ed8); --bs-btn-hover-border-color: var(--bs-primary-dark, #1d4ed8); } .dropdown-menu { border-radius: var(--pc-radius-sm); border-color: rgba(0,0,0,.08); } .badge { border-radius: 8px; } /* Periodo osservato (banner dashboard) */ .pc-period { background: rgba(var(--bs-primary-rgb), .07); border: 1px solid rgba(var(--bs-primary-rgb), .2); border-radius: var(--pc-radius); padding: .7rem 1rem; } .pc-period-badge { font-weight: 600; color: var(--bs-primary); } .pc-period-dates { font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; } /* Selettore colore (swatches) */ .pc-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; } .pc-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; } .pc-swatch.active { border-color: var(--bs-body-color); box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px currentColor; } /* ---- Sidebar verticale ---- */ .body-sidebar .sidebar-link { color: var(--bs-body-color); text-decoration: none; font-weight: 500; transition: all .15s ease-in-out; } .body-sidebar .sidebar-link i { font-size: 1.05rem; opacity: .85; } .body-sidebar .sidebar-link:hover { background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); } .body-sidebar .sidebar-link.active { background: var(--bs-primary); color: #fff; } .body-sidebar .sidebar-link.active i { opacity: 1; } .fs-12 { font-size: .75rem; letter-spacing: .04em; } /* ---- Titoli di pagina ---- */ .page-title { font-size: 1.35rem; font-weight: 700; margin-bottom: .25rem; } .page-sub { color: var(--bs-secondary-color); margin-bottom: 1.25rem; } /* ---- Card (pc-card / pc-cards KPI) ---- */ .pc-cards { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .pc-card { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.1rem 1.3rem; min-width: 190px; flex: 1 1 190px; box-shadow: 0 1px 2px rgba(0,0,0,.03); } .pc-card-label { display: block; color: var(--bs-secondary-color); font-size: .82rem; margin-bottom: .35rem; } .pc-card-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; } .pc-in { color: var(--bs-success); } .pc-out { color: var(--bs-danger); } /* ---- Contenitori a scheda per tabelle/sezioni ---- */ .pc-panel { background: var(--bs-card-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.25rem; margin-bottom: 1.5rem; } /* ---- Tabelle (pc-table) ---- Tipografia UNICA per tutte le tabelle del gestionale: stesso font ovunque, MAIUSCOLETTO (small-caps) e corpo 11px. Le cifre usano i numeri tabulari così le colonne di importi restano incolonnate. Vale anche per gli elementi annidati (small, badge), altrimenti erediterebbero corpi diversi. */ .pc-table { width: 100%; border-collapse: collapse; margin: .25rem 0 1rem; background: var(--bs-card-bg); } .pc-table, .pc-table th, .pc-table td, .pc-table small, .pc-table .badge, .pc-table input, .pc-table select, .pc-table label, .pc-table button, .pc-table a { font-family: "Segoe UI", var(--app-font-family), system-ui, -apple-system, sans-serif; font-size: 11px; font-variant-caps: small-caps; font-variant-numeric: tabular-nums; } .pc-table th, .pc-table td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid var(--bs-border-color); vertical-align: middle; } .pc-table thead th { text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); font-weight: 600; border-bottom: 2px solid var(--bs-border-color); } .pc-table tbody tr:hover { background: rgba(var(--bs-primary-rgb), .04); } .pc-right { text-align: right; } .pc-desc { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Form e filtri ---- */ .pc-filters { display: flex; gap: 1rem; align-items: end; margin: 0 0 1.25rem; flex-wrap: wrap; } .pc-form { display: flex; flex-direction: column; gap: .85rem; max-width: 520px; margin: 0 0 1rem; } .pc-filters label, .pc-form label { display: flex; flex-direction: column; font-size: .85rem; gap: .3rem; font-weight: 500; } .pc-filters input, .pc-filters select, .pc-form input, .pc-form select, .pc-inline input, .pc-inline select { padding: .5rem .7rem; border: 1px solid var(--bs-border-color); border-radius: .55rem; background: var(--bs-body-bg); color: var(--bs-body-color); font: inherit; } .pc-form input:focus, .pc-filters input:focus, .pc-form select:focus { outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2); } /* ---- Bottoni (bare