/* ===== CSS block 1 from original index.html ===== */
:root {
--bg: #f5f1f3;
--card: #ffffff;
--primary: #5f1830;
--primary-light: #8a2f4d;
--accent: #183d35;
--text: #21181c;
--text-muted: #6b7280;
--border: #e5e7eb;
--success: #059669;
--danger: #dc2626;
--sidebar-w: 220px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); display: flex; height: 100vh; overflow: hidden; }
/* SIDEBAR */
#sidebar {
width: var(--sidebar-w); background: var(--primary); color: #fff;
display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto;
}
#sidebar .logo { padding: 20px 16px 12px; border-bottom: 1px solid rgba(255,255,255,0.15); }
#sidebar .logo h1 { font-size: 1.3rem; font-weight: 700; letter-spacing: 1px; }
#sidebar .logo p { font-size: 0.72rem; opacity: 0.7; margin-top: 2px; }
#sidebar nav { flex: 1; padding: 12px 0; }
#sidebar nav a {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px; font-size: 0.88rem; cursor: pointer;
color: rgba(255,255,255,0.82); text-decoration: none; border-left: 3px solid transparent;
transition: background 0.15s;
}
#sidebar nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
#sidebar nav a.active { background: rgba(255,255,255,0.14); color: #fff; border-left-color: var(--accent); }
#sidebar nav a .icon { font-size: 1.1rem; width: 20px; text-align: center; }
/* MAIN */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
#topbar {
background: var(--card); border-bottom: 1px solid var(--border);
padding: 12px 24px; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
#topbar h2 { font-size: 1.1rem; font-weight: 600; flex: 1; }
#topbar input[type=search] {
padding: 7px 12px; border: 1px solid var(--border); border-radius: 6px;
font-size: 0.85rem; width: 240px; outline: none;
}
#topbar input[type=search]:focus { border-color: var(--primary); }
#content { flex: 1; overflow-y: auto; padding: 24px; }
/* CARDS */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card {
background: var(--card); border-radius: 10px; padding: 16px 20px;
border-left: 4px solid var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.stat-card .label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card .value { font-size: 1.6rem; font-weight: 700; margin-top: 4px; }
.stat-card .sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
/* TABLE CARD */
.card { background: var(--card); border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 20px; overflow: hidden; }
.card-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.card-header h3 { font-size: 0.95rem; font-weight: 600; flex: 1; }
.card-header .badge { background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; font-size: 0.75rem; color: var(--text-muted); }
.card-body { padding: 0; }
/* FILTERS */
.filters { padding: 12px 20px; background: #fafafa; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters select, .filters input {
padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
font-size: 0.82rem; outline: none; background: #fff;
}
.filters select:focus, .filters input:focus { border-color: var(--primary); }
.filters label { font-size: 0.82rem; color: var(--text-muted); }
/* TABLE */
.tbl-wrap { overflow-x: auto; max-height: 480px; overflow-y: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
thead th { background: #f9fafb; padding: 9px 12px; text-align: left; font-weight: 600; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.4px; position: sticky; top: 0; border-bottom: 1px solid var(--border); }
tbody tr { border-bottom: 1px solid #f3f4f6; }
tbody tr:hover { background: #fafbfc; }
tbody td { padding: 8px 12px; }
/* BADGES */
.badge-tipo { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 0.72rem; font-weight: 500; background: #e0e7ff; color: #3730a3; }
.badge-entrata { background: #d1fae5; color: #065f46; padding: 2px 8px; border-radius: 12px; font-size: 0.72rem; font-weight: 500; }
.badge-uscita { background: #fee2e2; color: #991b1b; padding: 2px 8px; border-radius: 12px; font-size: 0.72rem; font-weight: 500; }
.badge-banca { background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 12px; font-size: 0.72rem; }
.badge-cassa { background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 12px; font-size: 0.72rem; }
/* FORM */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
.form-group input, .form-group select, .form-group textarea {
padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
font-size: 0.85rem; outline: none; font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); }
.form-actions { padding: 12px 20px 20px; display: flex; gap: 10px; border-top: 1px solid var(--border); }
/* BUTTONS */
.btn { padding: 8px 16px; border: none; border-radius: 6px; font-size: 0.85rem; cursor: pointer; font-family: inherit; font-weight: 500; transition: opacity 0.15s; }
.btn:hover { opacity: 0.87; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; font-size: 0.78rem; padding: 5px 10px; }
.btn-sm { padding: 4px 10px; font-size: 0.78rem; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
/* PAGINAZIONE */
.pagination { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted); }
.pagination .pag-btns { display: flex; gap: 6px; }
.pagination button { padding: 4px 10px; border: 1px solid var(--border); background: #fff; border-radius: 5px; cursor: pointer; font-size: 0.8rem; }
.pagination button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination button:hover:not(.active) { background: var(--bg); }
/* MODAL */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 1rem; font-weight: 600; }
.modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-muted); line-height: 1; }
/* DETTAGLIO SOCIO */
.socio-detail { padding: 20px; }
.socio-detail .row { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin-bottom: 4px; font-size: 0.85rem; }
.socio-detail .row .lbl { color: var(--text-muted); font-weight: 500; }
.section-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; margin: 16px 0 8px; }
/* CHART */
.chart-area { padding: 20px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.82rem; }
.bar-row .bar-label { width: 160px; text-align: right; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bar-track { flex: 1; background: #f3f4f6; border-radius: 4px; height: 18px; }
.bar-row .bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s; }
.bar-row .bar-val { width: 80px; font-weight: 600; text-align: right; }
/* YEAR SELECTOR */
.year-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--border); }
.year-tab { padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: 0.82rem; }
.year-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* EMPTY */
.empty { text-align: center; padding: 40px; color: var(--text-muted); font-size: 0.9rem; }
/* NOTIFICATION */
.notif { position: fixed; top: 16px; right: 16px; background: var(--success); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 0.85rem; z-index: 999; display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
/* RESPONSIVE */
@media (max-width: 900px) {
#sidebar { display: none; }
.stats-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.stats-row { grid-template-columns: 1fr; }
.form-grid { grid-template-columns: 1fr; }
}
/* ── LOGIN SCREEN ── */
#login-screen {
position: fixed; inset: 0; z-index: 10000;
background: linear-gradient(135deg, #5f1830 0%, #35101f 100%);
display: flex; align-items: center; justify-content: center;
}
.login-box {
background: #fff; border-radius: 16px; padding: 40px 36px; width: 360px;
box-shadow: 0 24px 80px rgba(0,0,0,0.35); text-align: center;
}
.login-logo { font-size: 2.2rem; margin-bottom: 6px; }
.login-title { font-size: 1.3rem; font-weight: 700; color: #5f1830; letter-spacing: 1px; }
.login-sub { font-size: 0.8rem; color: #9ca3af; margin-bottom: 28px; margin-top: 2px; }
.login-field { margin-bottom: 14px; text-align: left; }
.login-field label { display: block; font-size: 0.75rem; font-weight: 600; color: #6b7280; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.login-field input {
width: 100%; padding: 10px 14px; border: 1.5px solid #e5e7eb; border-radius: 8px;
font-size: 0.95rem; outline: none; transition: border 0.15s; font-family: inherit;
}
.login-field input:focus { border-color: #5f1830; }
.login-btn {
width: 100%; padding: 11px; background: #5f1830; color: #fff;
border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600;
cursor: pointer; margin-top: 6px; font-family: inherit; transition: background 0.15s;
}
.login-btn:hover { background: #8a2f4d; }
.login-btn:active { background: #35101f; }
.login-bio-btn {
width: 100%; padding: 10px; background: transparent; color: #5f1830;
border: 1.5px solid #5f1830; border-radius: 8px; font-size: 0.88rem; font-weight: 600;
cursor: pointer; margin-top: 10px; font-family: inherit; transition: all 0.15s;
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.login-bio-btn:hover { background: #5f1830; color: #fff; }
.login-error { color: #dc2626; font-size: 0.8rem; margin-top: 8px; min-height: 20px; }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; }
.login-divider span { font-size: 0.75rem; color: #d1d5db; }
.login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:#e5e7eb; }
.login-footer { font-size: 0.7rem; color: #d1d5db; margin-top: 22px; }
/* MODERN APP REFRESH - solo presentazione, struttura invariata */
:root {
--bg: #f7f2f4;
--card: #ffffff;
--primary: #5f1830;
--primary-light: #8a2f4d;
--primary-ink: #35101f;
--accent: #183d35;
--accent-2: #b48b2c;
--accent-soft: #f4e4ea;
--text: #22171c;
--text-muted: #74656b;
--border: #e5d9de;
--success: #16834a;
--danger: #b42318;
--sidebar-w: 248px;
--surface: rgba(255,255,255,0.78);
--ring: 0 0 0 4px rgba(138,47,77,0.14);
--shadow-sm: 0 1px 2px rgba(53,16,31,0.06);
--shadow-md: 0 12px 32px rgba(53,16,31,0.13);
--shadow-lg: 0 28px 90px rgba(53,16,31,0.24);
}
* { scrollbar-width: thin; scrollbar-color: #b8c5be transparent; }
::selection { background: rgba(138,47,77,0.28); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: #b8c5be;
border: 3px solid transparent;
border-radius: 999px;
background-clip: padding-box;
}
body {
background:
linear-gradient(120deg, rgba(95,24,48,0.06), transparent 34%),
radial-gradient(circle at 18% 10%, rgba(95,24,48,0.16), transparent 24%),
radial-gradient(circle at 100% 0%, rgba(47,128,237,0.09), transparent 28%),
linear-gradient(135deg, #fbfbf7 0%, #eef4f0 100%);
color: var(--text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
letter-spacing: 0;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(95,24,48,0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(95,24,48,0.028) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), transparent 72%);
}
#sidebar {
position: relative;
background:
linear-gradient(180deg, rgba(255,255,255,0.05), transparent 24%),
linear-gradient(180deg, #5f1830 0%, #35101f 100%);
border-right: 1px solid rgba(255,255,255,0.08);
box-shadow: 18px 0 50px rgba(53,16,31,0.22);
}
#sidebar::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 22% 8%, rgba(95,24,48,0.22), transparent 24%),
linear-gradient(90deg, rgba(255,255,255,0.06), transparent 42%);
}
#sidebar .logo {
position: relative;
padding: 24px 20px 18px;
border-bottom: 1px solid rgba(255,255,255,0.10);
}
#sidebar .logo h1 {
display: flex;
align-items: center;
gap: 9px;
font-size: 1.18rem;
letter-spacing: 0.10em;
line-height: 1;
text-shadow: 0 1px 16px rgba(95,24,48,0.20);
}
#sidebar .logo p {
margin-top: 8px;
color: rgba(255,255,255,0.58);
opacity: 1;
}
#sidebar nav {
position: relative;
padding: 16px 12px;
}
#sidebar nav a {
position: relative;
margin: 4px 0;
padding: 11px 12px;
border-left: 0;
border-radius: 10px;
color: rgba(255,255,255,0.76);
font-weight: 650;
letter-spacing: 0;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#sidebar nav a:hover {
background: rgba(255,255,255,0.095);
color: #fff;
transform: translateX(2px);
}
#sidebar nav a.active {
background:
linear-gradient(90deg, rgba(95,24,48,0.24), rgba(255,255,255,0.08));
color: #fff;
box-shadow:
inset 3px 0 0 var(--accent),
0 10px 22px rgba(0,0,0,0.12);
}
#sidebar nav a .icon {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(255,255,255,0.08);
opacity: 1;
font-size: 1rem;
}
#sidebar nav a.active .icon { background: rgba(95,24,48,0.22); }
#sidebar nav .nav-group-label {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 0 4px;
padding: 11px 12px 7px;
color: rgba(255,255,255,0.90);
font-size: 0.84rem;
font-weight: 800;
letter-spacing: 0.02em;
cursor: pointer;
user-select: none;
border-radius: 10px;
transition: background 0.18s ease, color 0.18s ease;
}
#sidebar nav .nav-group-label:hover {
background: rgba(255,255,255,0.08);
color: #fff;
}
#sidebar nav .nav-group-label .icon {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 8px;
background: rgba(255,255,255,0.08);
}
#sidebar nav .nav-group-label .chev {
margin-left: auto;
color: rgba(255,255,255,0.62);
font-size: 0.74rem;
transition: transform 0.18s ease;
}
#sidebar nav .nav-group-label:not(.open) .chev {
transform: rotate(-90deg);
}
#sidebar nav .nav-submenu {
display: none;
}
#sidebar nav .nav-submenu.open {
display: block;
}
#sidebar nav a.nav-subitem {
display: flex;
align-items: center;
gap: 10px;
margin-left: 18px;
padding: 8px 10px;
font-size: 0.80rem;
color: rgba(255,255,255,0.66);
}
#sidebar nav a.nav-subitem .icon {
width: 20px;
height: 20px;
background: transparent;
color: rgba(95,24,48,0.82);
}
#main { background: transparent; }
#topbar {
position: relative;
z-index: 5;
background: rgba(255,255,255,0.82);
border-bottom: 1px solid rgba(220,228,223,0.82);
padding: 16px 28px;
backdrop-filter: blur(20px);
box-shadow: 0 1px 0 rgba(255,255,255,0.75), 0 12px 26px rgba(53,16,31,0.05);
}
#topbar h2 {
font-size: 1.22rem;
font-weight: 800;
color: var(--primary);
letter-spacing: 0;
}
#topbar input[type=search] {
width: min(360px, 38vw);
padding: 10px 14px;
border: 1px solid rgba(205,216,210,0.95);
border-radius: 999px;
background: rgba(255,255,255,0.92);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), var(--shadow-sm);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
#topbar input[type=search]:focus {
border-color: var(--primary-light);
box-shadow: var(--ring), var(--shadow-sm);
}
#content {
position: relative;
padding: 30px;
scroll-behavior: smooth;
}
#content > div:first-child[style*="display:flex"] {
background: rgba(255,255,255,0.70);
border: 1px solid rgba(220,228,223,0.78);
border-radius: 12px;
padding: 10px 12px !important;
box-shadow: var(--shadow-sm);
backdrop-filter: blur(14px);
}
#content > div[style*="grid-template-columns:1fr 340px"] {
grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr) !important;
align-items: stretch;
}
.card,
.stat-card {
border: 1px solid rgba(220,228,223,0.86);
box-shadow: var(--shadow-sm);
}
.card {
position: relative;
border-radius: 12px;
overflow: hidden;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(12px);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover {
border-color: rgba(197,210,202,0.96);
box-shadow: var(--shadow-md);
}
.card-header {
min-height: 58px;
padding: 16px 20px;
background:
linear-gradient(90deg, rgba(95,24,48,0.045), transparent 44%),
linear-gradient(180deg, #fff 0%, #fbfcfb 100%);
border-bottom: 1px solid rgba(220,228,223,0.92);
}
.card-header h3 {
font-size: 1rem;
color: var(--primary);
font-weight: 800;
}
.card-header .badge,
.badge {
background: #eff5f1;
border-color: #d7e2dc;
color: #465a53;
border-radius: 999px;
font-weight: 700;
}
.stats-row {
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
}
.stat-card {
position: relative;
border-left: 0;
border-radius: 14px;
padding: 20px 22px;
overflow: hidden;
background:
radial-gradient(circle at 100% 0%, rgba(95,24,48,0.16), transparent 32%),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.86));
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.stat-card:hover {
transform: translateY(-2px);
border-color: rgba(197,210,202,0.98);
box-shadow: var(--shadow-md);
}
.stat-card::before {
content: "";
position: absolute;
inset: auto 18px 16px 18px;
height: 4px;
width: auto;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent), rgba(95,24,48,0.08));
}
.stat-card::after {
content: "";
position: absolute;
top: 16px;
right: 16px;
width: 38px;
height: 38px;
border-radius: 12px;
background: rgba(95,24,48,0.06);
}
.stat-card .label {
color: var(--text-muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.stat-card .value {
position: relative;
z-index: 1;
font-size: clamp(1.35rem, 2vw, 1.95rem);
line-height: 1.15;
color: var(--text);
margin-top: 7px;
}
.stat-card .sub { margin-top: 8px; }
.filters {
background: linear-gradient(180deg, #f8faf8, #f3f7f4);
padding: 14px 20px;
gap: 10px 12px;
}
.filters label,
.form-group label {
color: #52635d;
font-weight: 800;
}
input,
select,
textarea,
.filters select,
.filters input,
.form-group input,
.form-group select,
.form-group textarea {
border-radius: 10px;
border-color: var(--border);
background: #fff;
color: var(--text);
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
input:focus,
select:focus,
textarea:focus,
.filters select:focus,
.filters input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--primary-light);
box-shadow: var(--ring);
}
.form-grid {
gap: 16px;
padding: 24px;
}
.form-group { gap: 7px; }
.form-actions {
background: #fbfcfb;
padding: 16px 24px 22px;
}
.tbl-wrap { background: #fff; }
table { font-size: 0.84rem; }
thead th {
background: linear-gradient(180deg, #f8faf8, #eef4f0);
color: #586b64;
font-weight: 800;
letter-spacing: 0.06em;
box-shadow: 0 1px 0 rgba(220,228,223,0.8);
}
tbody tr {
border-bottom-color: #eef2ef;
transition: background 0.14s ease, box-shadow 0.14s ease;
}
tbody tr:nth-child(even) { background: rgba(248,250,248,0.46); }
tbody tr:hover {
background: #f3f8f5;
box-shadow: inset 3px 0 0 rgba(95,24,48,0.72);
}
tbody td { padding: 10px 12px; }
tfoot tr { background: #f7faf8 !important; }
.badge-tipo,
.badge-entrata,
.badge-uscita,
.badge-banca,
.badge-cassa {
border-radius: 999px;
font-weight: 700;
letter-spacing: 0;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
}
.badge-tipo { background: #e8f0ff; color: #1d4f91; }
.badge-entrata { background: #dff8e9; color: #11623a; }
.badge-uscita { background: #fee8e6; color: #912018; }
.badge-banca { background: #e2f0ff; color: #17447e; }
.badge-cassa { background: var(--accent-soft); color: #5f1830; }
.pn-amount-field {
padding: 14px 16px;
border: 1px solid rgba(95,24,48,0.36);
border-radius: 12px;
background: linear-gradient(180deg, #fffdf5, #fff8df);
}
.pn-amount-field label {
color: #5f1830;
}
.pn-amount-field input {
min-height: 52px;
font-size: 1.45rem !important;
font-weight: 850;
text-align: right;
border-color: rgba(95,24,48,0.58) !important;
background: #fff !important;
}
.association-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 22px;
align-items: start;
max-width: 1040px;
}
.association-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.association-preview {
border: 1px solid rgba(220,228,223,0.9);
border-radius: 12px;
background: linear-gradient(180deg, #fff, #f7faf8);
box-shadow: var(--shadow-sm);
padding: 22px;
}
.association-preview-title {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 12px;
}
.association-preview-name {
font-size: 1.28rem;
font-weight: 850;
color: var(--primary);
line-height: 1.15;
}
.association-preview-line {
margin-top: 8px;
color: var(--text-muted);
font-size: 0.88rem;
line-height: 1.45;
}
.association-preview-grid {
display: grid;
grid-template-columns: 84px 1fr;
gap: 9px 12px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--border);
font-size: 0.84rem;
}
.association-preview-grid span {
color: var(--text-muted);
font-weight: 800;
}
.association-preview-grid strong {
color: var(--text);
text-align: right;
}
.report-workspace {
max-width: 1160px;
}
.report-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
padding: 14px 16px;
border: 1px solid rgba(220,228,223,0.86);
border-radius: 12px;
background: rgba(255,255,255,0.82);
box-shadow: var(--shadow-sm);
}
.report-toolbar-years {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.report-toolbar-years > span {
font-size: 0.78rem;
font-weight: 850;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.report-toolbar-years > div {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.ledger-report {
background: #fff;
border: 1px solid #d9e2dd;
border-radius: 10px;
box-shadow: 0 18px 45px rgba(26, 45, 40, 0.10);
overflow: hidden;
}
.ledger-head {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 28px;
padding: 30px 34px;
background:
linear-gradient(90deg, rgba(95,24,48,0.98), rgba(51,82,73,0.94)),
#5f1830;
color: #fff;
}
.ledger-kicker {
font-size: 0.72rem;
font-weight: 850;
letter-spacing: 0.11em;
text-transform: uppercase;
color: rgba(255,255,255,0.68);
margin-bottom: 8px;
}
.ledger-head h2 {
margin: 0 0 12px;
font-size: 2rem;
line-height: 1.05;
letter-spacing: 0;
}
.ledger-head p {
margin: 3px 0;
color: rgba(255,255,255,0.78);
font-size: 0.9rem;
}
.ledger-meta {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
align-content: start;
padding: 16px;
border: 1px solid rgba(255,255,255,0.18);
border-radius: 8px;
background: rgba(255,255,255,0.08);
}
.ledger-meta span {
color: rgba(255,255,255,0.62);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ledger-meta strong {
color: #fff;
font-size: 0.92rem;
margin-bottom: 7px;
}
.ledger-summary {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
border-bottom: 1px solid var(--border);
background: #fbfcfb;
}
.ledger-summary > div,
.ledger-close > div {
padding: 17px 18px;
border-right: 1px solid var(--border);
}
.ledger-summary > div:last-child,
.ledger-close > div:last-child { border-right: 0; }
.ledger-summary span,
.ledger-close span {
display: block;
color: var(--text-muted);
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 7px;
}
.ledger-summary strong,
.ledger-close strong {
display: block;
font-size: 1.05rem;
color: var(--text);
text-align: right;
white-space: nowrap;
}
.ledger-summary .positive strong { color: #047857; }
.ledger-summary .negative strong { color: #b91c1c; }
.ledger-summary .primary {
background: #eef6f1;
}
.ledger-summary .primary strong {
color: var(--primary);
font-size: 1.16rem;
}
.ledger-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.ledger-split section {
padding: 24px 28px 26px;
}
.ledger-split section:first-child {
border-right: 1px solid var(--border);
}
.ledger-section-title {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: baseline;
padding-bottom: 10px;
border-bottom: 2px solid var(--border);
font-weight: 850;
}
.ledger-section-title span {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--text-muted);
}
.ledger-section-title strong { font-size: 1.08rem; }
.ledger-section-title.income strong { color: #047857; }
.ledger-section-title.expense strong { color: #b91c1c; }
.ledger-note {
margin: 10px 0 14px;
color: var(--text-muted);
font-size: 0.78rem;
text-align: right;
}
.ledger-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.ledger-table tr {
border-bottom: 1px solid #edf1ee;
}
.ledger-table td {
padding: 9px 0;
vertical-align: top;
}
.ledger-table td:first-child {
color: #31463f;
padding-right: 16px;
}
.ledger-table td:last-child {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 750;
white-space: nowrap;
}
.ledger-close {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--border);
background: #f7faf8;
}
.ledger-close strong {
color: var(--primary);
font-size: 1.16rem;
}
@media (max-width: 980px) {
.association-layout,
.ledger-head,
.ledger-split {
grid-template-columns: 1fr;
}
.association-preview { order: -1; }
.ledger-summary,
.ledger-close {
grid-template-columns: 1fr;
}
.ledger-split section:first-child,
.ledger-summary > div,
.ledger-close > div {
border-right: 0;
border-bottom: 1px solid var(--border);
}
}
.btn {
border-radius: 10px;
font-weight: 700;
letter-spacing: 0;
transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, opacity 0.16s ease, border-color 0.16s ease;
}
.btn:hover {
opacity: 1;
transform: translateY(-1px);
}
.btn-primary {
background: var(--primary);
box-shadow: 0 10px 20px rgba(95,24,48,0.20);
}
.btn-accent {
background: var(--accent);
color: #1f2d2a;
box-shadow: 0 10px 20px rgba(95,24,48,0.22);
}
.btn-danger { background: var(--danger); }
.btn-ghost {
background: rgba(255,255,255,0.84);
border-color: var(--border);
color: var(--primary);
}
.btn-ghost:hover { background: #f4f7f5; }
.btn-sm {
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pagination {
background: #fbfcfb;
border-top-color: var(--border);
}
.pagination button,
.year-tab {
border-radius: 999px;
border-color: var(--border);
background: rgba(255,255,255,0.92);
color: var(--primary);
font-weight: 750;
transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.pagination button:hover:not(.active),
.year-tab:hover {
transform: translateY(-1px);
background: #f4f8f5;
}
.pagination button.active,
.year-tab.active {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-color: var(--primary);
color: #fff;
}
.year-tabs {
background: rgba(255,255,255,0.78);
border: 1px solid rgba(220,228,223,0.82);
border-radius: 12px;
margin-bottom: 20px;
padding: 10px !important;
box-shadow: var(--shadow-sm);
}
.modal-overlay {
background: rgba(53,16,31,0.52);
backdrop-filter: blur(10px);
}
.modal {
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.70);
box-shadow: var(--shadow-lg);
background: rgba(255,255,255,0.96);
}
.modal-header {
background:
linear-gradient(90deg, rgba(95,24,48,0.06), transparent 46%),
#fbfcfb;
border-bottom-color: var(--border);
}
.modal-header h3 { color: var(--primary); }
.modal-close {
width: 34px;
height: 34px;
border-radius: 10px;
transition: background 0.16s ease, color 0.16s ease;
}
.modal-close:hover {
background: #eef2ef;
color: var(--primary);
}
.bar-row .bar-track {
background: #edf2ef;
border-radius: 999px;
height: 20px;
overflow: hidden;
}
.bar-row .bar-fill {
border-radius: 999px;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.10);
}
.bar-row .bar-label { color: #566861; }
.empty { color: var(--text-muted); }
.notif {
border-radius: 12px;
box-shadow: var(--shadow-md);
}
#login-screen {
background:
radial-gradient(circle at 22% 18%, rgba(95,24,48,0.28), transparent 24%),
radial-gradient(circle at 82% 22%, rgba(47,128,237,0.14), transparent 26%),
linear-gradient(135deg, #35101f 0%, #5f1830 54%, #0f1f1c 100%) !important;
}
#login-screen::before {
content: "";
position: absolute;
inset: 28px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 28px;
pointer-events: none;
}
.login-box {
position: relative;
width: min(410px, calc(100vw - 36px));
border-radius: 18px;
border: 1px solid rgba(255,255,255,0.68);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.login-box::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
background: linear-gradient(90deg, var(--accent), #d8b8c5, var(--accent-2));
}
.login-logo {
display: inline-grid;
place-items: center;
width: 60px;
height: 60px;
margin-bottom: 12px;
border-radius: 18px;
color: var(--accent);
background: rgba(95,24,48,0.07);
box-shadow: inset 0 0 0 1px rgba(95,24,48,0.06);
}
.login-title {
color: var(--primary);
letter-spacing: 0.12em;
}
.login-sub { color: #7b8580; }
.login-field input {
border-radius: 12px;
border-color: var(--border);
padding: 12px 14px;
}
.login-field input:focus {
border-color: var(--primary-light);
box-shadow: var(--ring);
}
.login-btn {
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: 12px;
box-shadow: 0 14px 28px rgba(95,24,48,0.28);
padding: 12px;
}
.login-btn:hover { background: var(--primary-light); }
.login-bio-btn {
border-color: var(--primary);
color: var(--primary);
border-radius: 12px;
}
.login-bio-btn:hover { background: var(--primary); }
#loading-screen {
background:
radial-gradient(circle at 24% 20%, rgba(95,24,48,0.22), transparent 25%),
linear-gradient(135deg, #35101f 0%, #5f1830 100%) !important;
}
@media (min-width: 1100px) {
.card[style*="max-width:700px"] { max-width: 820px !important; }
}
@media (max-width: 900px) {
body { display: block; }
#topbar { padding: 12px 16px; }
#topbar input[type=search] { width: min(260px, 46vw); }
#content { padding: 18px; }
#content > div[style*="grid-template-columns:1fr 340px"] {
grid-template-columns: 1fr !important;
}
.modal {
width: min(94vw, 640px) !important;
max-height: 88vh;
}
}
@media (max-width: 600px) {
#topbar {
align-items: stretch;
flex-wrap: wrap;
}
#topbar h2 { width: 100%; }
#topbar input[type=search] { width: 100%; }
.pagination {
align-items: flex-start;
gap: 10px;
flex-direction: column;
}
.form-grid { padding: 18px; }
.card-header {
align-items: flex-start;
flex-wrap: wrap;
}
.filters > span[style*="margin-left:auto"] {
width: 100%;
margin-left: 0 !important;
}
.socio-detail .row {
grid-template-columns: 1fr;
gap: 2px;
padding: 7px 0;
border-bottom: 1px solid #eef2ef;
}
}
/* ===== CSS block 2 from original index.html ===== */
@keyframes loadbar{0%{width:0%}60%{width:85%}100%{width:100%}}
/* ===== CSS block 3 from original index.html ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; color: #1a1a1a; padding: 0; background: #fff; }
@page { size: A4; margin: 18mm 15mm 18mm 15mm; }
@media print {
.no-print { display: none !important; }
body { padding: 0; }
}
/* INTESTAZIONE */
.header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 2.5px solid #5f1830; margin-bottom: 18px; }
.header .org { }
.header .org h1 { font-size: 16pt; font-weight: 800; color: #5f1830; letter-spacing: 1px; }
.header .org p { font-size: 8pt; color: #888; margin-top: 2px; }
.header .meta { text-align: right; font-size: 8pt; color: #888; line-height: 1.6; }
/* PIE DI PAGINA */
.footer { margin-top: 28px; padding-top: 10px; border-top: 1px solid #d1d5db; font-size: 7.5pt; color: #aaa; display: flex; justify-content: space-between; }
/* PRINT BUTTON */
.print-bar { background: #5f1830; color: #fff; padding: 12px 20px; display: flex; gap: 12px; align-items: center; font-size: 0.9rem; }
.print-bar button { background: #fff; color: #5f1830; border: none; padding: 8px 20px; border-radius: 5px; font-weight: 700; cursor: pointer; font-size: 0.9rem; }
.print-bar button:hover { background: #f3f4f6; }
.content { padding: 20px 22px; }