:root {
  --ink: #1e3030;
  --muted: #718181;
  --surface: #ffffff;
  --canvas: #f6f7f3;
  --line: #e4e8e2;
  --deep: #0d3b37;
  --deep-2: #075d54;
  --lime: #cce86e;
  --lime-soft: #eff8cc;
  --sand: #fff5dc;
  --coral: #d45e51;
  --shadow: 0 10px 30px rgba(21, 52, 47, .06);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 14px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(80, 147, 119, .35); outline-offset: 2px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); }
.sidebar { padding: 24px 14px 16px; background: var(--deep); color: #e9f3ef; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 9px 32px; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--lime); color: var(--deep); font-weight: 800; font-size: 20px; font-family: Georgia, serif; }
.brand strong, .brand span { display: block; }
.brand strong { font-size: 15px; letter-spacing: -.2px; }
.brand span { color: #9fb9b3; font-size: 11px; margin-top: 2px; }
.nav-list { display: grid; gap: 4px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; color: #b7ccc7; text-align: left; padding: 11px 12px; border: none; border-radius: 10px; background: transparent; font-weight: 600; }
.nav-item span { font-size: 19px; width: 19px; line-height: 1; opacity: .95; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { color: var(--deep); background: var(--lime); }
.sidebar-bottom { margin-top: auto; }
.storage-badge { color: #a8c0ba; margin: 18px 10px 4px; font-size: 10px; line-height: 1.5; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #9ce0b6; margin-right: 5px; }

.main-content { min-width: 0; padding: 0 46px 44px; max-width: 1550px; width: 100%; margin: 0 auto; }
.topbar { min-height: 104px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.topbar h1 { margin: 4px 0 0; font-size: 21px; letter-spacing: -.6px; }
.eyebrow { color: #80908d; font-size: 10px; font-weight: 800; letter-spacing: .12em; margin: 0; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.avatar { color: #fff; background: #c06d50; border: 3px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.08); width: 36px; height: 36px; border-radius: 50%; font-size: 11px; font-weight: 800; }
.mobile-menu { display: none; }

.view { display: none; padding-top: 34px; }
.view.active-view { display: block; }
.intro-row, .section-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.intro-row h2, .section-toolbar h2 { font-size: 25px; letter-spacing: -1.05px; margin: 0 0 7px; }
.intro-row p, .section-toolbar p { margin: 0; color: var(--muted); }
.compact-select { color: var(--muted); font-size: 11px; font-weight: 700; display: grid; gap: 4px; }
.compact-select select { min-width: 143px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 8px 10px; color: var(--ink); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0 18px; }
.stat-card { position: relative; background: var(--surface); box-shadow: var(--shadow); border-radius: 14px; padding: 18px 18px 16px; min-height: 130px; overflow: hidden; }
.stat-card.lime { background: var(--lime); }.stat-card.dark { background: var(--deep); color: #fff; }.stat-card.sand { background: var(--sand); }
.stat-card .stat-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6e7b72; }.stat-card.dark .stat-label { color: #b7cbc5; }
.stat-card .stat-value { display: block; font-size: 27px; letter-spacing: -1.2px; font-weight: 800; margin: 14px 0 6px; }.stat-card .stat-note { color: #74827b; font-size: 11px; }.stat-card.dark .stat-note { color: #b7cbc5; }
.trend { font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 2px; }.trend.up { color: #18826b; }.trend.neutral { color: #7a8580; }.stat-card.dark .trend { color: var(--lime); }
.stat-accent { position: absolute; width: 72px; height: 72px; right: -20px; bottom: -28px; border-radius: 50%; background: rgba(255,255,255,.22); }

.dashboard-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: 18px; }
.panel { background: var(--surface); box-shadow: var(--shadow); border-radius: 14px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 19px 21px 14px; }.panel-heading h3 { margin: 0; font-size: 15px; letter-spacing: -.35px; }.panel-heading p { color: var(--muted); font-size: 11px; margin: 4px 0 0; }
.legend { display: flex; gap: 12px; color: var(--muted); font-size: 10px; white-space: nowrap; }.legend span { display: flex; align-items: center; gap: 4px; }.legend i { width: 8px; height: 8px; border-radius: 2px; }.legend-pale { background: #d7e7bd; }.legend-dark { background: var(--deep); }
.revenue-chart { height: 240px; display: flex; align-items: flex-end; gap: clamp(10px, 3vw, 30px); padding: 14px 28px 25px; position: relative; border-top: 1px solid #f4f4f1; }.revenue-chart::before, .revenue-chart::after { content: ""; height: 1px; background: #edf0eb; position: absolute; left: 18px; right: 18px; }.revenue-chart::before { top: 33%; }.revenue-chart::after { top: 66%; }
.chart-month { z-index: 1; flex: 1; height: 100%; min-width: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-items: end; position: relative; padding-bottom: 18px; }.chart-bar { min-height: 2px; border-radius: 5px 5px 2px 2px; transition: height .3s; }.chart-bar.expected { background: #d9e9b2; }.chart-bar.paid { background: var(--deep); }.chart-label { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); color: #8b9791; font-size: 10px; }
.donut-area { min-height: 240px; display: grid; grid-template-columns: 145px 1fr; align-items: center; gap: 10px; padding: 7px 20px 21px; }.donut { width: 132px; height: 132px; border-radius: 50%; display: grid; place-content: center; text-align: center; position: relative; background: conic-gradient(#dceeb0 0deg 120deg, #0d3b37 120deg 230deg, #e0a379 230deg 360deg); }.donut::after { content: ""; position: absolute; inset: 20px; border-radius: inherit; background: #fff; }.donut span, .donut small { position: relative; z-index: 1; }.donut span { font-weight: 800; letter-spacing: -.6px; font-size: 15px; }.donut small { font-size: 9px; color: var(--muted); }.composition-legend { display: grid; gap: 12px; }.composition-item { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }.composition-item span:first-child { display: flex; gap: 6px; align-items: center; color: #52625e; }.composition-dot { width: 8px; height: 8px; border-radius: 50%; }.composition-item strong { font-size: 11px; }
.upcoming-panel { margin-top: 18px; }.table-wrap { width: 100%; overflow-x: auto; } table { border-collapse: collapse; width: 100%; min-width: 720px; } th { text-align: left; color: #88958f; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 11px 21px; border-bottom: 1px solid var(--line); white-space: nowrap; } td { padding: 15px 21px; border-bottom: 1px solid #edf0eb; vertical-align: middle; font-size: 12px; } tr:last-child td { border-bottom: none; }.client-cell strong, .person-cell strong { display: block; font-size: 12px; }.client-cell small, .person-cell small { color: var(--muted); font-size: 10px; display: block; margin-top: 2px; }.amount-cell { font-weight: 800; white-space: nowrap; }.amount-cell small { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; font-weight: 500; }.empty-table { text-align: center; color: var(--muted); padding: 32px; }

.button { border: 1px solid transparent; border-radius: 9px; padding: 9px 13px; font-size: 12px; font-weight: 750; transition: transform .15s, background .15s, border-color .15s; }.button:hover { transform: translateY(-1px); }.button-primary { color: #fff; background: var(--deep); box-shadow: 0 4px 10px rgba(13,59,55,.15); }.button-primary:hover { background: var(--deep-2); }.button-secondary { color: var(--deep); background: #fff; border-color: #cfdad4; }.button-secondary:hover { border-color: var(--deep); }.button-quiet { background: transparent; color: var(--muted); border-color: #dfe5df; }.button-danger { color: #a12e24; border-color: #edc6c1; background: #fff7f6; }.text-button { color: var(--deep-2); background: transparent; border: 0; font-weight: 800; font-size: 11px; padding: 3px; }.text-button span { font-size: 16px; vertical-align: -1px; }

.section-toolbar { margin-bottom: 25px; }.filter-bar { background: #fff; border: 1px solid var(--line); padding: 10px; border-radius: 12px; display: flex; gap: 9px; align-items: center; margin-bottom: 16px; }.filter-bar select { height: 36px; border: 1px solid var(--line); background: #fff; border-radius: 7px; color: #596864; padding: 0 28px 0 9px; font-size: 11px; }.search-input { position: relative; min-width: 255px; flex: 1; }.search-input span { position: absolute; left: 10px; top: 7px; color: #8a9792; font-size: 18px; }.search-input input { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 7px; padding: 0 10px 0 31px; color: var(--ink); }.table-panel { box-shadow: none; border: 1px solid var(--line); }.practice-table td { padding-top: 14px; padding-bottom: 14px; }.product-pill, .status-pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border-radius: 20px; padding: 5px 8px; font-size: 10px; font-weight: 800; }.product-pill.mutuo { color: #126354; background: #e2f5e6; }.product-pill.cqs { color: #895317; background: #fff1cc; }.product-pill.polizza { color: #715187; background: #f0e6f6; }.status-pill { color: #596864; background: #f0f3ef; }.status-pill.pagata { color: #167157; background: #daf2e5; }.status-pill.erogata { color: #1c6386; background: #e1f1fb; }.status-pill.deliberata { color: #78589a; background: #f0e8f6; }.status-pill.annullata { color: #9a453d; background: #fce6e3; }.row-actions { display: flex; gap: 3px; justify-content: flex-end; }.action-button { color: #60716b; border: 0; background: transparent; width: 27px; height: 27px; border-radius: 6px; font-size: 16px; }.action-button:hover { color: var(--deep); background: #edf3ee; }.action-button.delete:hover { color: var(--coral); background: #fff0ee; }

.info-callout { background: var(--lime-soft); color: #476139; border-radius: 11px; padding: 12px 15px; display: flex; gap: 10px; align-items: center; margin-bottom: 18px; }.info-callout span { color: #799923; font-size: 17px; }.info-callout p { margin: 0; font-size: 12px; }
.bank-layout { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 2fr); gap: 18px; }.bank-list-panel { min-height: 410px; }.bank-list { border-top: 1px solid #edf0eb; padding: 9px; }.bank-row { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 10px; text-align: left; padding: 11px; display: flex; align-items: center; gap: 10px; color: var(--ink); }.bank-row:hover { background: #f5f8f5; }.bank-row.selected { background: #edf7e7; border-color: #dcebcf; }.bank-logo { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; background: #e5eeec; color: var(--deep); font-weight: 900; }.bank-row.selected .bank-logo { background: var(--lime); }.bank-row strong { font-size: 12px; }.bank-row small { display: block; color: var(--muted); margin-top: 2px; font-size: 10px; }.bank-row .bank-more { margin-left: auto; color: #9da9a3; }.rule-panel { min-height: 410px; }.rules-container { border-top: 1px solid #edf0eb; }.rule-card { margin: 12px 16px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; display: grid; grid-template-columns: 1.05fr 1fr 1fr 1fr auto; align-items: center; gap: 11px; }.rule-product { font-weight: 800; font-size: 12px; }.rule-product span { display: block; color: var(--muted); font-weight: 500; font-size: 10px; margin-top: 3px; }.rule-number { font-size: 14px; font-weight: 800; }.rule-number span { color: var(--muted); display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 9px; font-weight: 700; margin-bottom: 3px; }.empty-state { min-height: 290px; display: grid; place-content: center; text-align: center; color: var(--muted); padding: 25px; }.empty-state h3 { color: var(--ink); font-size: 14px; margin: 10px 0 4px; }.empty-state p { margin: 0; font-size: 12px; }.empty-icon { font-size: 33px; color: #a4c270; }

.team-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }.team-metric { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 15px 17px; }.team-metric span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: .05em; }.team-metric strong { font-size: 21px; letter-spacing: -.7px; display: block; margin-top: 7px; }.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.member-card { border: 1px solid var(--line); box-shadow: none; padding: 18px; }.member-top { display: flex; align-items: center; gap: 10px; }.member-avatar { width: 40px; height: 40px; display: grid; place-content: center; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; }.member-top h3 { margin: 0; font-size: 14px; }.member-top p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }.member-actions { margin-left: auto; }.member-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.member-stat { padding: 11px 0; }.member-stat + .member-stat { border-left: 1px solid var(--line); padding-left: 14px; }.member-stat span { color: var(--muted); font-size: 10px; display: block; }.member-stat strong { display: block; margin-top: 4px; font-size: 14px; }.member-footer { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; }.commission-badge { color: var(--deep); background: var(--lime-soft); border-radius: 20px; padding: 5px 8px; font-weight: 800; }

.reports-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.report-card { padding: 23px; min-height: 192px; }.report-card h3 { font-size: 15px; margin: 12px 0 7px; }.report-card p { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0 0 19px; max-width: 480px; }.report-icon { width: 34px; height: 34px; background: var(--lime-soft); border-radius: 9px; display: grid; place-items: center; color: var(--deep); font-size: 19px; }.file-label { display: inline-flex; align-items: center; }.file-label input { display: none; }.danger-zone { background: #fff7f6; border: 1px solid #f3d3ce; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; gap: 15px; margin-top: 18px; }.danger-zone h3 { margin: 0 0 4px; color: #78342d; font-size: 13px; }.danger-zone p { color: #9b615a; margin: 0; font-size: 11px; }

.modal-backdrop { position: fixed; z-index: 10; inset: 0; background: rgba(10, 32, 29, .48); display: grid; place-items: center; padding: 20px; }.modal-backdrop[hidden] { display: none; }.modal { width: min(700px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: 15px; box-shadow: 0 24px 70px rgba(0,0,0,.25); }.modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 21px 24px 17px; border-bottom: 1px solid var(--line); }.modal-header h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.6px; }.icon-button { width: 30px; height: 30px; border: 0; border-radius: 7px; font-size: 24px; line-height: 1; color: #64736e; background: transparent; }.icon-button:hover { background: #f0f3ef; color: var(--ink); }.form-body { padding: 21px 24px 5px; }.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 17px; }.form-grid.three { grid-template-columns: repeat(3, 1fr); }.field { display: grid; gap: 6px; }.field.full { grid-column: 1 / -1; }.field label, .field-label { color: #60716b; font-weight: 800; font-size: 11px; }.field input, .field select { height: 38px; border: 1px solid #d7dfd9; border-radius: 7px; color: var(--ink); padding: 0 10px; background: #fff; }.field input:focus, .field select:focus { border-color: #6da990; outline: none; }.field small { color: var(--muted); font-size: 10px; }.form-section { border-top: 1px solid var(--line); padding-top: 17px; margin-top: 19px; }.form-section h3 { margin: 0 0 5px; font-size: 13px; }.form-section p { color: var(--muted); margin: 0 0 15px; font-size: 11px; }.toggle-row { display: flex; align-items: center; gap: 8px; color: #53625e; font-size: 12px; }.toggle-row input { accent-color: var(--deep); }.form-preview { background: #f4f8ef; border-radius: 9px; margin-top: 17px; padding: 12px 14px; display: flex; gap: 12px; }.form-preview div { flex: 1; }.form-preview span { display: block; color: var(--muted); font-size: 10px; }.form-preview strong { display: block; margin-top: 4px; font-size: 15px; color: var(--deep); }.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding: 18px 24px 22px; }.form-error { color: #b23d34; font-size: 11px; min-height: 14px; padding: 0 24px; }.modal .inline-actions { display: flex; gap: 6px; }
.toast { position: fixed; z-index: 20; right: 22px; bottom: 22px; background: var(--deep); color: #fff; border-radius: 9px; box-shadow: 0 10px 35px rgba(0,0,0,.2); padding: 12px 15px; font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .25s; }.toast.show { opacity: 1; transform: translateY(0); }.toast.error { background: #a43d34; }

@media (max-width: 1050px) { .main-content { padding: 0 25px 35px; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.dashboard-grid, .bank-layout { grid-template-columns: 1fr; }.team-grid { grid-template-columns: repeat(2, 1fr); } .bank-list-panel { min-height: auto; }.bank-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }.rule-card { grid-template-columns: 1fr 1fr 1fr auto; }.rule-product { grid-column: span 1; }}
@media (max-width: 760px) { .app-shell { display: block; }.sidebar { z-index: 5; position: fixed; transform: translateX(-100%); width: 246px; transition: transform .25s; }.sidebar.open { transform: translateX(0); }.main-content { padding: 0 16px 30px; }.topbar { min-height: 84px; }.mobile-menu { display: block; border: none; background: transparent; color: var(--deep); font-size: 22px; margin-right: 10px; }.topbar > div:first-of-type { flex: 1; }.topbar h1 { font-size: 17px; }.topbar-actions .button { display: none; }.intro-row, .section-toolbar { align-items: flex-start; flex-direction: column; }.intro-row h2, .section-toolbar h2 { font-size: 22px; }.compact-select { width: 100%; }.compact-select select { width: 100%; }.stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }.stat-card { min-height: 116px; padding: 14px; }.stat-card .stat-value { font-size: 21px; margin: 10px 0 4px; }.stat-card .stat-label { font-size: 9px; }.stat-card .stat-note { font-size: 9px; }.donut-area { grid-template-columns: 140px 1fr; }.filter-bar { align-items: stretch; flex-wrap: wrap; }.search-input { min-width: 100%; }.filter-bar select { flex: 1; min-width: 130px; }.filter-bar .button { flex: 1; }.team-summary, .team-grid, .reports-grid { grid-template-columns: 1fr; }.rule-card { grid-template-columns: 1fr 1fr; }.rule-card .action-button { justify-self: end; }.danger-zone { align-items: flex-start; flex-direction: column; }.form-grid, .form-grid.three { grid-template-columns: 1fr; }.modal { max-height: 92vh; }.topbar { gap: 0; }.sidebar + .main-content { width: 100%; } }
@media print { .sidebar, .topbar-actions, .mobile-menu, .compact-select, .upcoming-panel .text-button { display: none !important; }.app-shell { display: block; }.main-content { padding: 0; max-width: none; }.topbar { min-height: 60px; }.view:not(#dashboard) { display: none !important; }.view#dashboard { display: block !important; padding-top: 20px; }.panel, .stat-card { box-shadow: none; border: 1px solid #ddd; }.dashboard-grid { grid-template-columns: 1.8fr 1fr; }.stats-grid { grid-template-columns: repeat(4,1fr); }.revenue-chart { height: 180px; } }

/* =========================================================
   NUOVA PRATICA — MODAL REDESIGN
   Solo popup creazione pratica
   ========================================================= */

.modal-backdrop {
  background: rgba(8, 31, 27, .58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 24px;
}

/* Contenitore */

.modal {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);

  background: #ffffff;

  border: 1px solid rgba(20, 72, 61, .08);
  border-radius: 18px;

  box-shadow:
    0 8px 20px rgba(8, 39, 33, .08),
    0 28px 75px rgba(5, 31, 27, .25);

  overflow: auto;
}

/* Header */

.modal-header {
  min-height: 78px;

  padding: 20px 25px 18px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdfb 100%
    );

  border-bottom: 1px solid #e7eeea;
}

.modal-header > div:first-child {
  min-width: 0;
}

.modal-header h2 {
  margin: 4px 0 0;

  color: #093f37;

  font-size: 21px;
  line-height: 1.15;

  font-weight: 850;

  letter-spacing: -.65px;
}

/* Kicker "GESTIONE PRATICA" */

.modal-header .modal-kicker,
.modal-header [id="modal-kicker"] {
  color: #79918a;

  font-size: 9px;
  line-height: 1;

  font-weight: 850;

  letter-spacing: .11em;

  text-transform: uppercase;
}

/* X */

.icon-button {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: grid;
  place-items: center;

  margin-top: -2px;

  border: 1px solid transparent;
  border-radius: 9px;

  background: transparent;

  color: #71817b;

  font-size: 22px;
  font-weight: 400;

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}

.icon-button:hover {
  background: #f0f5f2;

  border-color: #e1e9e5;

  color: #0a443b;
}

/* Corpo */

.form-body {
  padding: 25px 25px 8px;
}

/* Griglia */

.form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px 19px;
}

/* Singolo campo */

.field {
  min-width: 0;

  display: grid;

  gap: 7px;
}

.field label,
.field-label {
  color: #52645e;

  font-size: 10px;

  font-weight: 850;

  letter-spacing: .01em;
}

/* Input */

.field input,
.field select,
.field textarea,
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;

  min-height: 42px;

  padding: 0 12px;

  border: 1px solid #d9e3de;

  border-radius: 9px;

  background: #ffffff;

  color: #18322d;

  font-size: 11px;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

.field textarea,
.form-field textarea {
  min-height: 92px;

  padding-top: 11px;
  padding-bottom: 11px;

  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: #bdcec6;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;

  border-color: #6fa28d;

  box-shadow:
    0 0 0 3px rgba(111, 162, 141, .12);

  background: #fcfefd;
}

/* Select */

.field select,
.form-field select {
  cursor: pointer;
}

/* Campi importanti */

.field:has(select[name="product"]),
.field:has(select[name="collaboratorId"]) {
  padding: 14px;

  border: 1px solid #e2ebe6;

  border-radius: 11px;

  background: #f8faf9;
}

.field:has(select[name="product"]) select,
.field:has(select[name="collaboratorId"]) select {
  background: #fff;
}

/* Importi */

.field:has(input[name="financedAmount"]),
.field:has(input[name="payinTotal"]) {
  position: relative;
}

.field:has(input[name="financedAmount"]) input,
.field:has(input[name="payinTotal"]) input {
  font-size: 13px;

  font-weight: 750;
}

/* Pay-in totale evidenziato */

.field:has(input[name="payinTotal"]) {
  padding: 14px;

  border: 1px solid #d9e8d1;

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #f4f9ed,
      #f9fcf8
    );
}

.field:has(input[name="payinTotal"]) label {
  color: #47643b;
}

.field:has(input[name="payinTotal"]) input {
  border-color: #cbdcbd;

  color: #174f43;
}

/* Date */

.field:has(input[type="date"]) input {
  color: #405650;
}

/* Note */

.field.full:has(textarea),
.form-field-full:has(textarea) {
  margin-top: 2px;
}

/* Separatore naturale prima delle note */

.field.full:has(textarea) {
  padding-top: 19px;

  border-top: 1px solid #e8eeeb;
}

/* Errore */

.form-error {
  min-height: 18px;

  margin-top: 7px;

  padding: 0 25px;

  color: #b13e35;

  font-size: 10px;

  font-weight: 650;
}

/* Footer */

.form-actions {
  margin-top: 17px;

  padding: 17px 25px 21px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 9px;

  background: #fbfcfb;

  border-top: 1px solid #e6ece9;
}

/* Annulla */

.form-actions .button-quiet,
.form-actions .button-secondary {
  min-width: 100px;

  background: #ffffff;

  color: #60716b;

  border-color: #d8e1dc;
}

/* Salva */

.form-actions .button-primary {
  min-width: 145px;

  background: #08453e;

  border-color: #08453e;

  color: #ffffff;

  font-weight: 850;

  box-shadow:
    0 5px 13px rgba(8, 69, 62, .16);
}

.form-actions .button-primary:hover {
  background: #0b594f;

  border-color: #0b594f;

  transform: translateY(-1px);

  box-shadow:
    0 8px 18px rgba(8, 69, 62, .20);
}

/* Preview/calcoli */

.form-preview {
  margin-top: 20px;

  padding: 14px 16px;

  border: 1px solid #dce8df;

  border-radius: 11px;

  background: #f4f8ef;
}

/* Mobile */

@media (max-width: 760px) {

  .modal-backdrop {
    padding: 10px;

    align-items: flex-end;
  }

  .modal {
    width: 100%;

    max-height: 94vh;

    border-radius:
      18px 18px 11px 11px;
  }

  .modal-header {
    min-height: 70px;

    padding: 17px 18px 15px;
  }

  .modal-header h2 {
    font-size: 18px;
  }

  .form-body {
    padding: 20px 18px 5px;
  }

  .form-grid {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .field.full {
    grid-column: auto;
  }

  .form-actions {
    padding:
      14px 18px 17px;
  }

  .form-actions .button {
    min-height: 42px;

    flex: 1;
  }

  .form-error {
    padding: 0 18px;
  }
}


/* =========================================================
   NUOVA PRATICA — SPACING + BORDERS POLISH
   ========================================================= */

/* Contenitore del form */
.modal {
  width: min(780px, calc(100vw - 32px));
  border-radius: 18px;
}

/* Corpo più ordinato */
.modal .form-body {
  padding: 24px 28px 10px;
}

/* Griglia principale */
.modal .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 18px;
  align-items: start;
}

/* Ogni campo */
.modal .form-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Etichette */
.modal .form-field > label {
  margin: 0;
  color: #52645e;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 800;
}

/* Tutti gli input/select/textarea */
.modal .form-field > input,
.modal .form-field > select,
.modal .form-field > textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;

  border: 1px solid #d3dfd9;
  border-radius: 9px;

  background: #fff;
  color: #17332d;

  padding: 0 12px;

  font-size: 11px;

  box-shadow:
    inset 0 1px 1px rgba(15, 45, 38, .025);

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

/* Select */
.modal .form-field > select {
  cursor: pointer;
  padding-right: 34px;
}

/* Textarea */
.modal .form-field > textarea {
  min-height: 88px;
  padding: 11px 12px;
  resize: vertical;
  line-height: 1.45;
}

/* Hover */
.modal .form-field > input:hover,
.modal .form-field > select:hover,
.modal .form-field > textarea:hover {
  border-color: #b8cbc2;
}

/* Focus */
.modal .form-field > input:focus,
.modal .form-field > select:focus,
.modal .form-field > textarea:focus {
  outline: none;

  border-color: #659986;

  box-shadow:
    0 0 0 3px rgba(101, 153, 134, .11);
}

/* =========================================================
   CAMPI PRINCIPALI
   ========================================================= */

.modal .form-field:has(input[name="clientName"]),
.modal .form-field:has(select[name="bankId"]),
.modal .form-field:has(select[name="mediationTypeId"]),
.modal .form-field:has(select[name="collaboratorId"]) {
  padding: 0;
}

/* Cliente */
.modal .form-field:has(input[name="clientName"]) input {
  font-weight: 600;
}

/* =========================================================
   IMPORTI
   ========================================================= */

.modal .form-field:has(input[name="financedAmount"]),
.modal .form-field:has(input[name="polizzaAmount"]) {
  gap: 7px;
}

.modal .form-field:has(input[name="financedAmount"]) input,
.modal .form-field:has(input[name="polizzaAmount"]) input {
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   PAY-IN TOTALE
   ========================================================= */

.modal .form-preview {
  min-height: 92px;
  box-sizing: border-box;

  margin: 0;

  padding: 15px 17px;

  border: 1px solid #d9e5dc;
  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #f5f9f1 0%,
      #f8fbf7 100%
    );

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7);
}

.modal .form-preview span {
  color: #71837b;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.modal .form-preview strong {
  margin: 0;

  color: #104c41;

  font-size: 23px;
  line-height: 1;

  font-weight: 850;
  letter-spacing: -.6px;
}

/* =========================================================
   NOTE — LARGHEZZA COMPLETA
   ========================================================= */

.modal .form-field:has(textarea[name="notes"]) {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.modal .form-field:has(textarea[name="notes"]) textarea {
  min-height: 82px;
}

/* =========================================================
   DATE
   ========================================================= */

.modal .form-field:has(input[type="date"]) input {
  min-height: 42px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.modal .modal-actions,
.modal .form-actions {
  margin-top: 18px;

  padding: 16px 28px 20px;

  border-top: 1px solid #e6ece9;

  background: #fbfcfb;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 9px;
}

/* Pulsanti */
.modal .modal-actions .button,
.modal .form-actions .button {
  min-height: 40px;
  padding: 0 17px;

  border-radius: 9px;

  font-size: 10.5px;
  font-weight: 800;
}

/* Salva */
.modal .modal-actions .button-primary,
.modal .form-actions .button-primary {
  min-width: 125px;

  background: #08483f;
  border-color: #08483f;

  box-shadow:
    0 4px 10px rgba(8,72,63,.14);
}

/* Annulla */
.modal .modal-actions .button-quiet {
  min-width: 75px;

  background: #fff;

  border: 1px solid #d6e0db;

  color: #61716b;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .modal {
    width: calc(100vw - 20px);
    max-height: 94vh;
  }

  .modal .form-body {
    padding: 20px 18px 8px;
  }

  .modal .form-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 15px;
  }

  .modal .form-field:has(textarea[name="notes"]) {
    grid-column: auto;
  }

  .modal .form-preview {
    min-height: 86px;
  }

  .modal .modal-actions,
  .modal .form-actions {
    padding: 14px 18px 17px;
  }
}


/* =========================================================
   NUOVA PRATICA — SPACING + BORDERS POLISH
   ========================================================= */

/* Contenitore del form */
.modal {
  width: min(780px, calc(100vw - 32px));
  border-radius: 18px;
}

/* Corpo più ordinato */
.modal .form-body {
  padding: 24px 28px 10px;
}

/* Griglia principale */
.modal .form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 18px;
  align-items: start;
}

/* Ogni campo */
.modal .form-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Etichette */
.modal .form-field > label {
  margin: 0;
  color: #52645e;
  font-size: 10.5px;
  line-height: 1.2;
  font-weight: 800;
}

/* Tutti gli input/select/textarea */
.modal .form-field > input,
.modal .form-field > select,
.modal .form-field > textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;

  border: 1px solid #d3dfd9;
  border-radius: 9px;

  background: #fff;
  color: #17332d;

  padding: 0 12px;

  font-size: 11px;

  box-shadow:
    inset 0 1px 1px rgba(15, 45, 38, .025);

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

/* Select */
.modal .form-field > select {
  cursor: pointer;
  padding-right: 34px;
}

/* Textarea */
.modal .form-field > textarea {
  min-height: 88px;
  padding: 11px 12px;
  resize: vertical;
  line-height: 1.45;
}

/* Hover */
.modal .form-field > input:hover,
.modal .form-field > select:hover,
.modal .form-field > textarea:hover {
  border-color: #b8cbc2;
}

/* Focus */
.modal .form-field > input:focus,
.modal .form-field > select:focus,
.modal .form-field > textarea:focus {
  outline: none;

  border-color: #659986;

  box-shadow:
    0 0 0 3px rgba(101, 153, 134, .11);
}

/* =========================================================
   CAMPI PRINCIPALI
   ========================================================= */

.modal .form-field:has(input[name="clientName"]),
.modal .form-field:has(select[name="bankId"]),
.modal .form-field:has(select[name="mediationTypeId"]),
.modal .form-field:has(select[name="collaboratorId"]) {
  padding: 0;
}

/* Cliente */
.modal .form-field:has(input[name="clientName"]) input {
  font-weight: 600;
}

/* =========================================================
   IMPORTI
   ========================================================= */

.modal .form-field:has(input[name="financedAmount"]),
.modal .form-field:has(input[name="polizzaAmount"]) {
  gap: 7px;
}

.modal .form-field:has(input[name="financedAmount"]) input,
.modal .form-field:has(input[name="polizzaAmount"]) input {
  font-size: 12px;
  font-weight: 700;
}

/* =========================================================
   PAY-IN TOTALE
   ========================================================= */

.modal .form-preview {
  min-height: 92px;
  box-sizing: border-box;

  margin: 0;

  padding: 15px 17px;

  border: 1px solid #d9e5dc;
  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #f5f9f1 0%,
      #f8fbf7 100%
    );

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7);
}

.modal .form-preview span {
  color: #71837b;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.modal .form-preview strong {
  margin: 0;

  color: #104c41;

  font-size: 23px;
  line-height: 1;

  font-weight: 850;
  letter-spacing: -.6px;
}

/* =========================================================
   NOTE — LARGHEZZA COMPLETA
   ========================================================= */

.modal .form-field:has(textarea[name="notes"]) {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.modal .form-field:has(textarea[name="notes"]) textarea {
  min-height: 82px;
}

/* =========================================================
   DATE
   ========================================================= */

.modal .form-field:has(input[type="date"]) input {
  min-height: 42px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.modal .modal-actions,
.modal .form-actions {
  margin-top: 18px;

  padding: 16px 28px 20px;

  border-top: 1px solid #e6ece9;

  background: #fbfcfb;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 9px;
}

/* Pulsanti */
.modal .modal-actions .button,
.modal .form-actions .button {
  min-height: 40px;
  padding: 0 17px;

  border-radius: 9px;

  font-size: 10.5px;
  font-weight: 800;
}

/* Salva */
.modal .modal-actions .button-primary,
.modal .form-actions .button-primary {
  min-width: 125px;

  background: #08483f;
  border-color: #08483f;

  box-shadow:
    0 4px 10px rgba(8,72,63,.14);
}

/* Annulla */
.modal .modal-actions .button-quiet {
  min-width: 75px;

  background: #fff;

  border: 1px solid #d6e0db;

  color: #61716b;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .modal {
    width: calc(100vw - 20px);
    max-height: 94vh;
  }

  .modal .form-body {
    padding: 20px 18px 8px;
  }

  .modal .form-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 15px;
  }

  .modal .form-field:has(textarea[name="notes"]) {
    grid-column: auto;
  }

  .modal .form-preview {
    min-height: 86px;
  }

  .modal .modal-actions,
  .modal .form-actions {
    padding: 14px 18px 17px;
  }
}


/* =========================================================
   PAYIN MANAGER — NUOVA PRATICA
   FINAL LAYOUT OVERRIDE
   ========================================================= */

.modal-backdrop {
  padding: 18px !important;
  background: rgba(7, 30, 26, .62) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.modal {
  width: min(780px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - 36px) !important;
  border-radius: 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 1px solid #dfe8e3 !important;
  box-shadow:
    0 25px 70px rgba(4, 35, 29, .28),
    0 5px 18px rgba(4, 35, 29, .10) !important;
}

/* HEADER */

.modal-header {
  padding: 19px 24px 17px !important;
  border-bottom: 1px solid #e4ebe7 !important;
  background: #fff !important;
}

.modal-header h2 {
  margin: 3px 0 0 !important;
  font-size: 20px !important;
  font-weight: 850 !important;
  color: #0b4038 !important;
}

.modal-header .modal-kicker,
#modal-kicker {
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: .10em !important;
  color: #789089 !important;
}

/* X */

.modal .icon-button {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  font-size: 20px !important;
}

.modal .icon-button:hover {
  background: #f1f5f3 !important;
  border-color: #dce6e1 !important;
}

/* CORPO */

.modal .form-body {
  padding: 22px 24px 8px !important;
}

/* GRIGLIA */

.modal .form-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 15px 18px !important;
  align-items: start !important;
}

/* IMPORTANTISSIMO:
   i campi full width devono occupare entrambe le colonne */

.modal .form-field-full,
.modal .field.full {
  grid-column: 1 / -1 !important;
}

/* CAMPI */

.modal .form-field {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.modal .form-field > label {
  margin: 0 !important;
  color: #50635d !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

/* INPUT */

.modal .form-field > input,
.modal .form-field > select,
.modal .form-field > textarea {
  width: 100% !important;
  box-sizing: border-box !important;

  min-height: 41px !important;
  height: 41px;

  padding: 0 11px !important;

  border: 1px solid #cfdcd6 !important;
  border-radius: 9px !important;

  background: #fff !important;
  color: #18342e !important;

  font-size: 11px !important;

  box-shadow: none !important;

  transition:
    border-color .15s ease,
    box-shadow .15s ease !important;
}

.modal .form-field > input:hover,
.modal .form-field > select:hover,
.modal .form-field > textarea:hover {
  border-color: #afc4ba !important;
}

.modal .form-field > input:focus,
.modal .form-field > select:focus,
.modal .form-field > textarea:focus {
  outline: none !important;
  border-color: #5f947f !important;
  box-shadow: 0 0 0 3px rgba(95,148,127,.10) !important;
}

/* DATE */

.modal .form-field > input[type="date"] {
  padding-right: 10px !important;
}

/* IMPORTI */

.modal .form-field:has(
  input[name="financedAmount"]
),
.modal .form-field:has(
  input[name="polizzaAmount"]
) {
  gap: 6px !important;
}

.modal .form-field:has(
  input[name="financedAmount"]
) input,
.modal .form-field:has(
  input[name="polizzaAmount"]
) input {
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* PAY-IN PREVIEW */

.modal .form-preview {
  margin: 0 !important;
  min-height: 92px !important;
  box-sizing: border-box !important;

  padding: 14px 16px !important;

  border: 1px solid #d8e4dc !important;
  border-radius: 11px !important;

  background: linear-gradient(
    135deg,
    #f4f8ef 0%,
    #f8fbf7 100%
  ) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
}

.modal .form-preview span {
  font-size: 9px !important;
  color: #71837b !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.modal .form-preview strong {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  color: #104c42 !important;
  font-weight: 850 !important;
}

/* NOTE:
   deve essere veramente tutta la larghezza */

.modal .form-field-full:has(
  textarea[name="notes"]
) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin-top: 2px !important;
}

.modal .form-field-full textarea,
.modal textarea[name="notes"] {
  width: 100% !important;
  min-height: 76px !important;
  height: 76px !important;
  padding: 10px 11px !important;
  line-height: 1.4 !important;
  resize: vertical !important;
}

/* ERRORE */

.modal .form-error {
  min-height: 14px !important;
  margin-top: 5px !important;
  padding: 0 24px !important;
  font-size: 10px !important;
}

/* FOOTER */

.modal .modal-actions,
.modal .form-actions {
  margin-top: 15px !important;
  padding: 15px 24px 18px !important;

  border-top: 1px solid #e5ebe8 !important;

  background: #fbfcfb !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

/* BOTTONI */

.modal .modal-actions .button,
.modal .form-actions .button {
  min-height: 39px !important;
  height: 39px !important;

  padding: 0 16px !important;

  border-radius: 9px !important;

  font-size: 10px !important;
  font-weight: 800 !important;
}

.modal .modal-actions .button-quiet {
  min-width: 70px !important;
  background: #fff !important;
  border: 1px solid #d4dfda !important;
  color: #60716b !important;
}

.modal .modal-actions .button-primary {
  min-width: 120px !important;
  background: #08483f !important;
  border-color: #08483f !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(8,72,63,.14) !important;
}

/* MOBILE */

@media (max-width: 760px) {

  .modal-backdrop {
    padding: 10px !important;
    align-items: end !important;
  }

  .modal {
    width: calc(100vw - 20px) !important;
    max-height: 94vh !important;
    border-radius: 17px 17px 11px 11px !important;
  }

  .modal-header {
    padding: 17px 18px 15px !important;
  }

  .modal .form-body {
    padding: 18px 18px 7px !important;
  }

  .modal .form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .modal .form-field-full,
  .modal .field.full {
    grid-column: 1 !important;
  }

  .modal .form-preview {
    min-height: 82px !important;
  }

  .modal .modal-actions,
  .modal .form-actions {
    padding: 13px 18px 16px !important;
  }

  .modal .modal-actions .button,
  .modal .form-actions .button {
    flex: 1 !important;
  }
}


/* FIX: nasconde la scrollbar del popup */
.modal {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.modal::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


/* =========================================================
   NUOVA PRATICA — SPAZI INTERNI
   ========================================================= */

.modal .form-body {
  padding: 26px 32px 12px !important;
}

.modal .form-grid {
  column-gap: 24px !important;
  row-gap: 20px !important;
}

.modal .form-field {
  gap: 8px !important;
}

/* Spazio maggiore tra contenuto e footer */
.modal .form-actions,
.modal .modal-actions {
  padding: 18px 32px 22px !important;
}

/* Note a tutta larghezza */
.modal .form-field-full {
  width: 100% !important;
  grid-column: 1 / -1 !important;
}

/* Su desktop niente campi schiacciati */
@media (min-width: 761px) {
  .modal .form-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .modal .form-body {
    padding: 20px 20px 10px !important;
  }

  .modal .form-grid {
    gap: 16px !important;
  }

  .modal .form-actions,
  .modal .modal-actions {
    padding: 16px 20px 20px !important;
  }
}


/* SPAZIO LATERALE INTERNO DEL POPUP */
.modal .form-body {
  padding-left: 42px !important;
  padding-right: 42px !important;
}

.modal .form-actions,
.modal .modal-actions {
  padding-left: 42px !important;
  padding-right: 42px !important;
}


/* =========================================================
   NUOVA PRATICA — LAYOUT DEFINITIVO
   Spazio laterale interno del popup
   ========================================================= */

/* Contenitore del contenuto */
.modal .form-body {
  box-sizing: border-box !important;

  padding-left: 40px !important;
  padding-right: 40px !important;

  padding-top: 24px !important;
  padding-bottom: 10px !important;

  width: 100% !important;
}

/* Griglia dei campi */
.modal .form-grid {
  width: 100% !important;
  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  column-gap: 22px !important;
  row-gap: 18px !important;
}

/* I campi non devono uscire dalla griglia */
.modal .form-field {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Input perfettamente dentro la colonna */
.modal .form-field > input,
.modal .form-field > select,
.modal .form-field > textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Elementi a tutta larghezza */
.modal .form-field-full {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Pay-in totale */
.modal .form-preview {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Footer allineato agli stessi margini dei campi */
.modal .modal-actions,
.modal .form-actions {
  box-sizing: border-box !important;

  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .modal .form-body {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .modal .form-grid {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 16px !important;
  }

  .modal .form-field-full {
    grid-column: 1 !important;
  }

  .modal .modal-actions,
  .modal .form-actions {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* =========================================================
   NUOVA PRATICA — MARGINI LATERALI REALI
   ========================================================= */

/* Il form della Nuova pratica non usa .form-body.
   Spostiamo SOLO il contenuto della griglia dai bordi. */

.modal #modal-form > .form-grid {
  margin-left: 40px !important;
  margin-right: 40px !important;
  width: auto !important;
}

/* Mantieni le due colonne proporzionate */
.modal #modal-form > .form-grid {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  column-gap: 22px !important;
}

/* Pay-in e Note devono seguire gli stessi margini */
.modal #modal-form > .form-grid .form-preview {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Footer separato: non lo tocchiamo */
.modal #modal-form > .form-actions {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Mobile */
@media (max-width: 760px) {
  .modal #modal-form > .form-grid {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: auto !important;

    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   REPORT DASHBOARD — GRAFICI
   ========================================================= */

.report-filters {
  padding: 18px 20px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
}

.report-filter-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.report-period {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: .15s;
}

.report-period:hover {
  border-color: #a8b8b0;
  color: var(--deep);
}

.report-period.active {
  color: #fff;
  background: var(--deep);
  border-color: var(--deep);
}

.report-custom-dates {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.report-custom-dates label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.report-custom-dates input {
  height: 36px;
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
}

.report-period-label {
  margin-top: 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

/* KPI */

.report-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.report-kpi {
  position: relative;
  background: var(--surface);
  box-shadow: var(--shadow);
  border-radius: 14px;
  padding: 17px 18px 15px;
  min-height: 112px;
  overflow: hidden;
}

.report-kpi span {
  display: block;
  color: #6e7b72;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.report-kpi strong {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-size: 23px;
  line-height: 1;
  letter-spacing: -.8px;
}

.report-kpi small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
}

.report-kpi-accent {
  background: var(--deep);
}

.report-kpi-accent span,
.report-kpi-accent small,
.report-kpi-accent strong {
  color: #fff;
}

.report-kpi-accent::after {
  content: "";
  position: absolute;
  width: 75px;
  height: 75px;
  right: -25px;
  bottom: -30px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}

/* GRAFICI */

.report-charts-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.report-chart-wide {
  grid-row: span 2;
}

.report-chart-card {
  min-width: 0;
  overflow: hidden;
}

.report-chart {
  height: 285px;
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 2vw, 24px);
  padding: 18px 25px 30px;
  position: relative;
  border-top: 1px solid #f4f4f1;
}

.report-chart::before,
.report-chart::after {
  content: "";
  height: 1px;
  background: #edf0eb;
  position: absolute;
  left: 18px;
  right: 18px;
}

.report-chart::before {
  top: 33%;
}

.report-chart::after {
  top: 66%;
}

.report-month {
  z-index: 1;
  flex: 1;
  min-width: 30px;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 4px;
  position: relative;
  padding-bottom: 20px;
}

.report-month .chart-bar {
  min-height: 2px;
  border-radius: 5px 5px 2px 2px;
  transition: height .25s ease;
}

.report-month .chart-bar.expected {
  background: #d9e9b2;
}

.report-month .chart-bar.paid {
  background: var(--deep);
}

.report-month-label {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  color: #8b9791;
  font-size: 10px;
  white-space: nowrap;
}

/* Grafico confronto */

.report-comparison {
  height: 250px;
  padding: 18px 22px 24px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.report-comparison-month {
  flex: 1;
  min-width: 25px;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-items: end;
  position: relative;
  padding-bottom: 20px;
}

.report-comparison-bar {
  min-height: 2px;
  border-radius: 4px 4px 2px 2px;
}

.report-comparison-bar.financed {
  background: #d9e9b2;
}

.report-comparison-bar.payin {
  background: var(--deep);
}

.report-comparison-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--muted);
}

/* COMPOSIZIONE */

.report-donut {
  min-height: 240px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.report-donut-visual {
  width: 145px;
  height: 145px;
  flex: 0 0 145px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}

.report-donut-visual::after {
  content: "";
  position: absolute;
  inset: 25px;
  background: #fff;
  border-radius: 50%;
}

.report-donut-center {
  position: relative;
  z-index: 2;
  text-align: center;
}

.report-donut-center strong {
  display: block;
  color: var(--deep);
  font-size: 15px;
}

.report-donut-center span {
  color: var(--muted);
  font-size: 9px;
}

.report-donut-legend {
  flex: 1;
  display: grid;
  gap: 13px;
}

.report-donut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}

.report-donut-item > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.report-donut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.report-donut-item strong {
  font-size: 11px;
}

/* BARRE ORIZZONTALI */

.report-ranking {
  padding: 5px 22px 20px;
}

.report-ranking-row {
  margin-bottom: 15px;
}

.report-ranking-head {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 6px;
  font-size: 11px;
}

.report-ranking-head span {
  color: #52625e;
  font-weight: 700;
}

.report-ranking-head strong {
  color: var(--ink);
}

.report-ranking-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0eb;
}

.report-ranking-fill {
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: var(--deep);
  transition: width .25s ease;
}

/* TABELLE */

.report-tables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.report-table-card,
.report-monthly-table-card {
  min-width: 0;
  overflow: hidden;
}

.report-table-card .table-wrap,
.report-monthly-table-card .table-wrap {
  border-top: 1px solid #edf0eb;
}

.report-table {
  min-width: 620px;
}

.report-table th {
  padding-top: 10px;
  padding-bottom: 10px;
}

.report-table td {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* AZIONI IN FONDO */

.report-actions-grid {
  margin-top: 18px;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
  .report-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-charts-grid {
    grid-template-columns: 1fr;
  }

  .report-chart-wide {
    grid-row: auto;
  }

  .report-tables-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .report-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .report-filter-presets {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .report-custom-dates {
    flex-direction: column;
    align-items: stretch;
  }

  .report-custom-dates input {
    width: 100%;
  }

  .report-donut {
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .report-kpis {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   TARGET DASHBOARD - UI
   ========================================================= */

.dashboard-targets-panel {
  margin: 18px 0 22px;
  padding: 24px 26px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e5ebe7;
  box-shadow: 0 8px 24px rgba(16,55,50,.06);
}

.dashboard-targets-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.dashboard-targets-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #71807b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dashboard-targets-header h3 {
  margin: 0 0 5px;
  color: #123b36;
  font-size: 18px;
  font-weight: 800;
}

.dashboard-targets-header p {
  margin: 0;
  color: #71807b;
  font-size: 12px;
}

.dashboard-targets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.dashboard-target-item {
  padding: 20px;
  border: 1px solid #e8eeea;
  border-radius: 14px;
  background: #fafcfb;
}

.dashboard-target-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.dashboard-target-label {
  display: block;
  margin-bottom: 7px;
  color: #71807b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.dashboard-target-top strong {
  display: block;
  color: #173b37;
  font-size: 23px;
  line-height: 1.15;
  font-weight: 800;
}

.dashboard-target-top small {
  display: block;
  margin-top: 5px;
  color: #7b8783;
  font-size: 11px;
}

.dashboard-target-top > b {
  color: #0c4a43;
  font-size: 20px;
}

.dashboard-target-bar {
  width: 100%;
  height: 10px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ede8;
}

.dashboard-target-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: #0c4a43;
  transition: width .45s ease;
}

#targets {
  padding-bottom: 40px;
}

.target-manager-panel,
.target-collaborator-card {
  border: 1px solid #e5ebe7;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(16,55,50,.05);
}

.target-manager-panel {
  padding: 24px;
  margin-bottom: 18px;
}

.target-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.target-form-grid input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 13px;
  border: 1px solid #dfe6e1;
  border-radius: 9px;
  background: #fbfcfb;
  color: #183a36;
  font-size: 14px;
}

.target-form-grid input:focus {
  border-color: #0c4a43;
  box-shadow: 0 0 0 3px rgba(12,74,67,.08);
  outline: none;
}

#collaborator-targets {
  display: grid;
  gap: 16px;
}

.target-collaborator-card {
  padding: 22px 24px;
}

.target-collaborator-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.target-collaborator-heading h3 {
  margin: 0 0 4px;
  color: #173b37;
  font-size: 16px;
}

.target-collaborator-heading p {
  margin: 0;
  color: #7b8783;
  font-size: 11px;
}

@media (max-width: 800px) {
  .dashboard-targets-grid,
  .target-form-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-targets-header,
  .target-collaborator-heading {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   TARGET PAGE — REDESIGN
   ========================================================= */

#targets {
  max-width: 100%;
  padding-bottom: 50px;
}

#targets .section-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e6ebe7;
}

#targets .section-toolbar h2 {
  margin: 0 0 6px;
  color: #123b36;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 800;
}

#targets .section-toolbar p {
  margin: 0;
  color: #71807b;
  font-size: 13px;
}

#targets .compact-select {
  min-width: 145px;
}

/* ---------------------------------------------------------
   MANAGER CARD
   --------------------------------------------------------- */

#targets .target-manager-panel {
  position: relative;
  margin: 0 0 20px;
  padding: 26px 28px 28px;
  border: 1px solid #e5ebe7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(16,55,50,.055);
}

#targets .target-manager-panel .panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}

#targets .target-manager-panel .panel-heading h3 {
  margin: 0 0 5px;
  color: #123b36;
  font-size: 18px;
  font-weight: 800;
}

#targets .target-manager-panel .panel-heading p {
  margin: 0;
  color: #7a8782;
  font-size: 12px;
}

/* campi */

#targets .target-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0;
}

#targets .target-form-grid .form-field {
  display: block;
  min-width: 0;
}

#targets .target-form-grid .form-field span {
  display: block;
  margin: 0 0 7px;
  color: #53635e;
  font-size: 11px;
  font-weight: 800;
}

#targets .target-form-grid input {
  display: block;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid #dce5df;
  border-radius: 10px;
  background: #fafcfb;
  color: #173b37;
  font-size: 15px;
  font-weight: 700;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

#targets .target-form-grid input:hover {
  border-color: #cbd8d1;
}

#targets .target-form-grid input:focus {
  border-color: #0c4a43;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(12,74,67,.08);
}

/* ---------------------------------------------------------
   MANAGER PROGRESS
   --------------------------------------------------------- */

#targets #manager-target-progress,
#targets .target-progress {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #edf0ed;
}

#targets .target-progress-row {
  margin-bottom: 18px;
}

#targets .target-progress-row:last-child {
  margin-bottom: 0;
}

#targets .target-progress-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
}

#targets .target-progress-head > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#targets .target-progress-head strong {
  color: #173b37;
  font-size: 13px;
  font-weight: 800;
}

#targets .target-progress-head span {
  color: #7b8783;
  font-size: 11px;
}

#targets .target-progress-head > b {
  color: #0c4a43;
  font-size: 18px;
  font-weight: 800;
}

#targets .target-progress-bar,
#targets .target-progress-track {
  width: 100%;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eee9;
}

#targets .target-progress-bar span,
#targets .target-progress-track span,
#targets .target-progress-fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: #0c4a43;
  transition: width .4s ease;
}

/* ---------------------------------------------------------
   COLLABORATOR SECTION
   --------------------------------------------------------- */

#targets #collaborator-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

#targets .target-collaborator-card {
  min-width: 0;
  padding: 23px 24px 25px;
  border: 1px solid #e5ebe7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(16,55,50,.05);
}

#targets .target-collaborator-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

#targets .target-collaborator-heading h3 {
  margin: 0 0 5px;
  color: #123b36;
  font-size: 17px;
  font-weight: 800;
}

#targets .target-collaborator-heading p {
  margin: 0;
  color: #7a8782;
  font-size: 11px;
}

#targets .target-collaborator-heading .button {
  flex: 0 0 auto;
}

/* campi collaboratore */

#targets .target-collaborator-card .target-form-grid {
  gap: 14px;
}

#targets .target-collaborator-card .target-form-grid input {
  height: 44px;
  font-size: 13px;
}

/* ---------------------------------------------------------
   PROGRESSI COLLABORATORI — fallback per le varie classi
   --------------------------------------------------------- */

#targets .target-collaborator-card .target-progress,
#targets .target-collaborator-card .target-progress-container,
#targets .target-collaborator-card [class*="progress"] {
  margin-top: 20px;
}

#targets .target-collaborator-card .target-progress-row {
  margin-bottom: 14px;
}

/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

#targets #collaborator-targets .empty-state {
  grid-column: 1 / -1;
  padding: 45px 25px;
  border: 1px dashed #dce5df;
  border-radius: 16px;
  background: #fafcfb;
  text-align: center;
}

#targets #collaborator-targets .empty-state h3 {
  margin: 10px 0 5px;
  color: #173b37;
}

#targets #collaborator-targets .empty-state p {
  margin: 0;
  color: #7b8783;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 950px) {
  #targets #collaborator-targets {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  #targets .section-toolbar,
  #targets .target-manager-panel .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  #targets .target-form-grid {
    grid-template-columns: 1fr;
  }

  #targets .section-toolbar h2 {
    font-size: 24px;
  }

  #targets .target-manager-panel,
  #targets .target-collaborator-card {
    padding: 20px;
  }
}


/* =========================================================
   LOGIN PAGE — PAYIN MANAGER
   ========================================================= */

#loginScreen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(194, 163, 88, .14),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(194, 163, 88, .10),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #082f2b 0%,
      #0d4540 48%,
      #062b28 100%
    );
}

/* decorazioni di sfondo */

#loginScreen::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -230px;
  top: -230px;
  border: 1px solid rgba(204, 177, 104, .20);
  border-radius: 50%;
  box-shadow:
    0 0 0 35px rgba(204, 177, 104, .035),
    0 0 0 70px rgba(204, 177, 104, .025),
    0 0 0 105px rgba(204, 177, 104, .018);
}

#loginScreen::after {
  content: "P";
  position: absolute;
  right: 7%;
  bottom: -13%;
  font-family: Georgia, serif;
  font-size: 420px;
  line-height: 1;
  font-weight: 700;
  color: rgba(255,255,255,.025);
  pointer-events: none;
}

/* CARD */

#loginScreen .login-box {
  position: relative;
  z-index: 2;

  width: min(440px, 100%);
  box-sizing: border-box;

  padding: 42px 44px 38px;

  background: rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 24px;

  box-shadow:
    0 30px 80px rgba(0,0,0,.24),
    0 8px 24px rgba(0,0,0,.10);

  animation: payinLoginAppear .45s ease-out;
}

@keyframes payinLoginAppear {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* BRAND */

#loginScreen .login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 30px;
}

#loginScreen .brand-mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;

  margin-bottom: 16px;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #14544d,
      #082f2b
    );

  border: 3px solid #c5a85f;

  box-shadow:
    0 8px 22px rgba(8,47,43,.22),
    inset 0 0 0 3px rgba(255,255,255,.12);

  color: #fff;

  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 700;
}

#loginScreen .login-brand strong {
  display: block;
  color: #0b3732;
  font-family: Georgia, serif;
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: -.02em;
}

#loginScreen .login-brand div:last-child::after {
  content: "MEDIATORE CREDITIZIO";
  display: block;

  margin-top: 8px;

  color: #b08d43;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

/* linea decorativa */

#loginScreen .login-brand::after {
  content: "";
  width: 150px;
  height: 1px;

  margin-top: 18px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #c5a85f,
      transparent
    );
}

/* FORM */

#loginScreen form {
  width: 100%;
}

#loginScreen .form-group,
#loginScreen .login-field {
  margin-bottom: 18px;
}

#loginScreen label {
  display: block;
  margin-bottom: 7px;

  color: #203d39;
  font-size: 12px;
  font-weight: 750;
}

#loginScreen input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;

  padding: 0 15px;

  border: 1px solid #d9e1de;
  border-radius: 10px;

  background: #fbfcfb;
  color: #173a35;

  font-family: inherit;
  font-size: 14px;

  outline: none;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

#loginScreen input:hover {
  border-color: #b9c9c4;
}

#loginScreen input:focus {
  background: #fff;
  border-color: #0d554d;

  box-shadow:
    0 0 0 3px rgba(13,85,77,.09);
}

#loginScreen input::placeholder {
  color: #9aa7a3;
}

/* ERRORE */

#loginScreen #loginError {
  min-height: 18px;
  margin: 5px 0 14px;

  color: #b33c32;
  font-size: 12px;
  font-weight: 600;
}

/* BOTTONE LOGIN */

#loginScreen button[type="submit"],
#loginScreen #loginButton,
#loginScreen .login-button {
  width: 100%;
  min-height: 50px;

  margin-top: 5px;

  border: 0;
  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      #14584f,
      #08342f
    );

  color: #fff;

  font-family: inherit;
  font-size: 14px;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 8px 18px rgba(8,52,47,.20);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

#loginScreen button[type="submit"]:hover,
#loginScreen #loginButton:hover,
#loginScreen .login-button:hover {
  background:
    linear-gradient(
      135deg,
      #17645a,
      #0a4039
    );

  transform: translateY(-1px);

  box-shadow:
    0 11px 24px rgba(8,52,47,.26);
}

#loginScreen button[type="submit"]:active,
#loginScreen #loginButton:active,
#loginScreen .login-button:active {
  transform: translateY(0);
}

/* TESTO SOTTO */

#loginScreen .login-footer {
  margin-top: 24px;
  padding-top: 20px;

  border-top: 1px solid #edf0ee;

  text-align: center;

  color: #7a8884;
  font-size: 11px;
}

/* eventuali link */

#loginScreen a {
  color: #0d554d;
  font-weight: 700;
  text-decoration: none;
}

#loginScreen a:hover {
  color: #092f2b;
  text-decoration: underline;
}

/* RESPONSIVE */

@media (max-width: 560px) {

  #loginScreen {
    padding: 18px;
  }

  #loginScreen .login-box {
    padding: 34px 25px 30px;
    border-radius: 20px;
  }

  #loginScreen .login-brand strong {
    font-size: 25px;
  }

  #loginScreen .brand-mark {
    width: 60px;
    height: 60px;
    font-size: 30px;
  }

  #loginScreen::after {
    font-size: 280px;
    right: -50px;
    bottom: -50px;
  }
}


/* =========================================================
   REPORT — FILTRO COLLABORATORE NEL RIQUADRO A DESTRA
   ========================================================= */

.report-filters {
  position: relative !important;
  min-height: 132px !important;
}

.report-filters #report-collaborator-filter {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  left: auto !important;
  width: 330px !important;
  height: 82px !important;
  display: block !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  box-sizing: border-box !important;
  background: #fafbf9 !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
}

.report-filters #report-collaborator-filter .report-collaborator-control {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.report-filters #report-collaborator-filter .report-filter-label {
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.report-filters #report-collaborator-filter .report-collaborator-select-wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 36px !important;
  margin: 0 !important;
}

.report-filters #report-collaborator-filter select#report-collaborator-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 38px 0 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
}

.report-filters #report-collaborator-filter .report-collaborator-select-wrap::after {
  content: "⌄" !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-55%) !important;
  color: var(--muted) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  pointer-events: none !important;
}

.report-filters #report-collaborator-filter select#report-collaborator-select:hover {
  border-color: #a8b8b0 !important;
}

.report-filters #report-collaborator-filter select#report-collaborator-select:focus {
  border-color: var(--deep) !important;
  box-shadow: 0 0 0 2px rgba(13,59,55,.08) !important;
}

@media (max-width: 760px) {
  .report-filters {
    min-height: 210px !important;
  }

  .report-filters #report-collaborator-filter {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 14px !important;
  }
}


/* =========================================================
   BANCHE — ELIMINA BANCA
   ========================================================= */

.bank-row {
  position: relative;
}

.bank-row-info {
  min-width: 0;
  flex: 1;
}

.bank-row-delete {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;

  border: 1px solid transparent;
  border-radius: 7px;

  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;
  transition: .15s ease;
}

.bank-row-delete:hover {
  color: #b23b3b;
  background: #fff1f1;
  border-color: #f0cccc;
}

/* =========================================================
   BANCHE — PULSANTE ELIMINA
   ========================================================= */

.bank-row {
  position: relative;
  padding-right: 54px !important;
}

.bank-row-info {
  min-width: 0;
  flex: 1;
}

.bank-row-delete {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #e2e6e2;
  border-radius: 8px;

  background: #fff;
  color: #7b8580;

  font-size: 0;
  cursor: pointer;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}

.bank-row-delete::before {
  content: "🗑";
  font-size: 14px;
  line-height: 1;
}

.bank-row-delete:hover {
  background: #fff3f3;
  border-color: #e5bcbc;
  color: #b23b3b;

  transform: translateY(-50%) scale(1.04);
}

.bank-row-delete:active {
  transform: translateY(-50%) scale(.96);
}

.bank-row.selected .bank-row-delete {
  background: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.7);
  color: #7b8580;
}

.bank-row.selected .bank-row-delete:hover {
  background: #fff3f3;
  border-color: #e5bcbc;
  color: #b23b3b;
}

/* =========================================================
   TARGET — RESTYLING GRAFICO FINALE
   Solo CSS — nessuna modifica alla logica
   ========================================================= */

#targets {
  padding-bottom: 50px !important;
}

/* ---------------------------------------------------------
   TESTATA
   --------------------------------------------------------- */

#targets .section-toolbar {
  margin-bottom: 22px !important;
  padding: 4px 0 20px !important;
  border-bottom: 1px solid #e7ece9 !important;
}

#targets .section-toolbar h2 {
  font-size: 26px !important;
  letter-spacing: -.5px !important;
  color: #123b36 !important;
}

#targets .section-toolbar p {
  margin-top: 7px !important;
  color: #7a8782 !important;
  font-size: 12px !important;
}

/* Selettore anno */
#targets .compact-select {
  min-width: 155px !important;
  gap: 6px !important;
}

#targets .compact-select select {
  min-width: 155px !important;
  height: 42px !important;
  padding: 0 34px 0 13px !important;
  border: 1px solid #dce5df !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #173b37 !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 10px rgba(16,55,50,.04) !important;
}

/* ---------------------------------------------------------
   TARGET MANAGER
   --------------------------------------------------------- */

#targets .target-manager-panel {
  padding: 26px !important;
  margin-bottom: 22px !important;
  border: 1px solid #e3eae6 !important;
  border-radius: 16px !important;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdfc 100%
    ) !important;
  box-shadow:
    0 10px 28px rgba(16,55,50,.055) !important;
}

#targets .target-manager-panel .panel-heading {
  margin-bottom: 22px !important;
}

#targets .target-manager-panel .panel-heading h3 {
  font-size: 17px !important;
  letter-spacing: -.15px !important;
}

#targets .target-manager-panel .panel-heading p {
  font-size: 11px !important;
}

/* ---------------------------------------------------------
   CAMPI TARGET
   --------------------------------------------------------- */

#targets .target-form-grid {
  gap: 14px !important;
}

#targets .target-form-grid .form-field {
  padding: 15px 16px 16px !important;
  border: 1px solid #e6ece8 !important;
  border-radius: 12px !important;
  background: #f9fbfa !important;
}

#targets .target-form-grid .form-field span,
#targets .target-form-grid .form-field label {
  margin-bottom: 8px !important;
  color: #66756f !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

#targets .target-form-grid input {
  height: 46px !important;
  border: 1px solid #dce5df !important;
  border-radius: 9px !important;
  background: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #123b36 !important;
}

#targets .target-form-grid input:disabled {
  opacity: 1 !important;
  color: #123b36 !important;
  background: #fff !important;
  cursor: default !important;
}

/* ---------------------------------------------------------
   PROGRESSO MANAGER
   --------------------------------------------------------- */

#targets #manager-target-progress,
#targets .target-progress {
  margin-top: 22px !important;
  padding: 20px 0 0 !important;
  border-top: 1px solid #edf1ee !important;
}

#targets .target-progress-row {
  margin-bottom: 18px !important;
}

#targets .target-progress-head {
  margin-bottom: 9px !important;
}

#targets .target-progress-head strong {
  font-size: 12px !important;
}

#targets .target-progress-head span {
  color: #89948f !important;
  font-size: 10px !important;
}

#targets .target-progress-head > b {
  font-size: 16px !important;
  color: #0c4a43 !important;
}

#targets .target-progress-bar,
#targets .target-progress-track {
  height: 9px !important;
  border-radius: 999px !important;
  background: #e9efeb !important;
}

#targets .target-progress-bar span,
#targets .target-progress-track span,
#targets .target-progress-fill {
  border-radius: 999px !important;
  background:
    linear-gradient(
      90deg,
      #0c4a43,
      #18766b
    ) !important;
}

/* ---------------------------------------------------------
   SEZIONE COLLABORATORI
   --------------------------------------------------------- */

#targets .panel:has(#collaborator-targets) {
  padding: 24px !important;
  border-radius: 16px !important;
  border: 1px solid #e3eae6 !important;
  box-shadow: 0 8px 25px rgba(16,55,50,.045) !important;
}

#targets .panel:has(#collaborator-targets) > .panel-heading {
  margin-bottom: 20px !important;
}

#targets .panel:has(#collaborator-targets) > .panel-heading h3 {
  font-size: 17px !important;
}

#targets .panel:has(#collaborator-targets) > .panel-heading p {
  max-width: 620px !important;
  line-height: 1.5 !important;
}

/* ---------------------------------------------------------
   CARD COLLABORATORE
   --------------------------------------------------------- */

#targets #collaborator-targets {
  gap: 15px !important;
}

#targets .target-collaborator-card {
  padding: 20px !important;
  border: 1px solid #e3eae6 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 5px 18px rgba(16,55,50,.04) !important;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease !important;
}

#targets .target-collaborator-card:hover {
  transform: translateY(-2px) !important;
  border-color: #d4e0da !important;
  box-shadow: 0 9px 24px rgba(16,55,50,.07) !important;
}

#targets .target-collaborator-heading {
  margin-bottom: 17px !important;
}

#targets .target-collaborator-heading h3 {
  font-size: 15px !important;
  letter-spacing: -.15px !important;
}

#targets .target-collaborator-heading p {
  margin-top: 4px !important;
  font-size: 10px !important;
}

/* Campi collaboratore */

#targets .target-collaborator-card .target-form-grid {
  gap: 10px !important;
}

#targets .target-collaborator-card .target-form-grid .form-field {
  padding: 12px !important;
  border: 1px solid #edf1ee !important;
  border-radius: 10px !important;
  background: #fafcfb !important;
}

#targets .target-collaborator-card .target-form-grid input {
  height: 40px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* ---------------------------------------------------------
   BOTTONI TARGET
   --------------------------------------------------------- */

#targets .button {
  min-height: 38px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease !important;
}

#targets .button:hover {
  transform: translateY(-1px) !important;
}

#targets .button-primary {
  box-shadow: 0 4px 12px rgba(12,74,67,.12) !important;
}

/* ---------------------------------------------------------
   EMPTY STATE
   --------------------------------------------------------- */

#targets #collaborator-targets .empty-state {
  padding: 42px 25px !important;
  border: 1px dashed #d9e3dd !important;
  border-radius: 13px !important;
  background: #fafcfb !important;
}

#targets #collaborator-targets .empty-state .empty-icon {
  opacity: .55 !important;
}

#targets #collaborator-targets .empty-state h3 {
  margin-top: 9px !important;
  font-size: 15px !important;
}

#targets #collaborator-targets .empty-state p {
  font-size: 11px !important;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

  #targets .section-toolbar {
    gap: 16px !important;
  }

  #targets .target-manager-panel {
    padding: 20px !important;
  }

  #targets .panel:has(#collaborator-targets) {
    padding: 18px !important;
  }

  #targets .target-form-grid {
    gap: 10px !important;
  }

}

@media (max-width: 600px) {

  #targets .section-toolbar h2 {
    font-size: 23px !important;
  }

  #targets .compact-select,
  #targets .compact-select select {
    width: 100% !important;
  }

  #targets .target-manager-panel {
    padding: 17px !important;
  }

  #targets .target-collaborator-card {
    padding: 16px !important;
  }

}


/* =========================================================
   TARGET — SELECT ANNO MOBILE
   ========================================================= */

@media (max-width: 600px) {

  #targets .compact-select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #targets .compact-select label {
    display: block !important;
    margin-bottom: 6px !important;
  }

  #targets .compact-select select {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 44px !important;

    appearance: auto !important;
    -webkit-appearance: auto !important;

    pointer-events: auto !important;
    touch-action: manipulation !important;

    cursor: pointer !important;
    z-index: 10 !important;
  }
}

/* =========================================================
   FIX DEFINITIVO — TARGET YEAR SELECT MOBILE
   ========================================================= */

@media (max-width: 600px) {

  #targets .section-toolbar {
    position: relative !important;
    z-index: 20 !important;
  }

  #targets .section-toolbar .compact-select {
    position: relative !important;
    z-index: 30 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 12px 0 0 !important;
  }

  #targets .section-toolbar .compact-select select#target-year {
    position: relative !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 44px !important;

    margin: 0 !important;
    padding: 0 12px !important;

    background: #ffffff !important;
    color: #123b36 !important;

    border: 1px solid #dce5df !important;
    border-radius: 10px !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;

    pointer-events: auto !important;
    touch-action: manipulation !important;

    cursor: pointer !important;

    z-index: 50 !important;
  }

  #targets .section-toolbar .compact-select select#target-year:focus {
    outline: none !important;
    border-color: var(--deep) !important;
    box-shadow: 0 0 0 2px rgba(13,59,55,.08) !important;
  }

}

/* =========================================================
   TARGET — RESPONSIVE MOBILE FINALE
   ========================================================= */

@media (max-width: 760px) {

  /* Pagina */
  #targets {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* -------------------------------------------------------
     TESTATA TARGET
     ------------------------------------------------------- */

  #targets .section-toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 14px !important;

    margin: 0 0 18px !important;
    padding: 0 0 18px !important;

    box-sizing: border-box !important;
  }

  #targets .section-toolbar > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
  }

  #targets .section-toolbar h2 {
    margin: 0 !important;
    font-size: 23px !important;
    line-height: 1.15 !important;
  }

  #targets .section-toolbar p {
    max-width: 100% !important;
    margin: 6px 0 0 !important;
    line-height: 1.45 !important;
  }

  /* -------------------------------------------------------
     SELETTORE ANNO
     ------------------------------------------------------- */

  #targets .section-toolbar .compact-select {
    position: static !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 6px !important;

    box-sizing: border-box !important;

    z-index: auto !important;
  }

  #targets .section-toolbar .compact-select select,
  #targets .section-toolbar select#target-year {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 44px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    padding: 0 12px !important;

    border: 1px solid #dce5df !important;
    border-radius: 10px !important;

    background: #fff !important;
    color: #173b37 !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    /* comportamento nativo mobile */
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;

    pointer-events: auto !important;
    touch-action: auto !important;

    position: static !important;
    z-index: auto !important;
  }

  /* -------------------------------------------------------
     PANNELLO MANAGER
     ------------------------------------------------------- */

  #targets .target-manager-panel {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    padding: 18px !important;
    margin-bottom: 16px !important;

    overflow: hidden !important;
  }

  #targets .target-manager-panel .panel-heading {
    margin-bottom: 17px !important;
  }

  /* Campi target */
  #targets .target-form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;

    width: 100% !important;
    gap: 10px !important;
  }

  #targets .target-form-grid .form-field {
    width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  #targets .target-form-grid input {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }

  /* -------------------------------------------------------
     PROGRESSI
     ------------------------------------------------------- */

  #targets .target-progress,
  #targets #manager-target-progress {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #targets .target-progress-head {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  #targets .target-progress-track,
  #targets .target-progress-bar {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }

  /* -------------------------------------------------------
     COLLABORATORI
     ------------------------------------------------------- */

  #targets .panel:has(#collaborator-targets) {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    padding: 18px !important;

    overflow: hidden !important;
  }

  #targets #collaborator-targets {
    width: 100% !important;
    max-width: 100% !important;

    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 12px !important;
  }

  #targets .target-collaborator-card {
    width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    padding: 16px !important;
  }

  #targets .target-collaborator-card .target-form-grid {
    grid-template-columns: 1fr !important;
  }

}

/* ---------------------------------------------------------
   TELEFONI MOLTO PICCOLI
   --------------------------------------------------------- */

@media (max-width: 400px) {

  #targets .target-manager-panel,
  #targets .panel:has(#collaborator-targets) {
    padding: 14px !important;
  }

  #targets .section-toolbar h2 {
    font-size: 21px !important;
  }

  #targets .target-form-grid .form-field {
    padding: 11px !important;
  }

}

/* ===== REPORT REDESIGN 2026 ===== */


/* ===== REPORT REDESIGN 2026 ===== */

/* Filtri report */
.report-collaborator-control {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.report-collaborator-control > div {
  flex: 0 0 205px;
}

#report-collaborator-select,
#report-status-select {
  height: 38px !important;
  min-height: 38px;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 0 34px 0 13px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* KPI */
.report-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px !important;
  margin-bottom: 18px !important;
}

.report-kpi {
  min-width: 0;
  min-height: 112px;
  box-sizing: border-box;
}

/* Area grafici: niente colonne vuote */
.report-charts-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

.report-chart-card {
  min-width: 0;
  width: 100%;
}

.report-chart-wide {
  grid-row: auto !important;
}

/* Andamento mensile */
#report-monthly-chart {
  width: 100%;
  min-height: 240px;
}

/* Composizione Pay-in */
#report-composition-chart {
  min-height: 230px;
}

/* Confronto */
.report-comparison {
  width: 100%;
}

/* Tre pannelli inferiori */
.report-tables-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

.report-table-card,
.report-monthly-table-card {
  min-width: 0;
}

/* Ranking */
.report-ranking {
  padding: 14px 20px 20px !important;
  min-height: 260px;
  box-sizing: border-box;
}

.report-ranking-row {
  margin-bottom: 16px;
}

.report-ranking-head {
  min-width: 0;
}

.report-ranking-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tabelle */
.report-monthly-table-card {
  overflow-x: auto;
}

/* Riduce gli spazi vuoti dei contenitori */
.report-chart-card,
.report-table-card,
.report-monthly-table-card {
  align-self: start;
}

/* Responsive */
@media (max-width: 1100px) {
  .report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .report-tables-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 760px) {
  .report-kpis {
    grid-template-columns: 1fr 1fr !important;
  }

  .report-tables-grid {
    grid-template-columns: 1fr !important;
  }

  .report-collaborator-control > div {
    flex: 1 1 100%;
  }

  #report-collaborator-select,
  #report-status-select {
    width: 100% !important;
  }
}

/* =========================================================
   REPORT FINAL FIX
   ========================================================= */

#report-monthly-chart {
  position: relative;
  height: 300px;
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 48px 24px 34px;
  box-sizing: border-box;
  overflow: hidden;
}

.report-chart-legend {
  position: absolute;
  top: 12px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
  z-index: 5;
}

.report-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.financed {
  background: #d9e9b2;
}

.legend-dot.expected {
  background: #a8bf72;
}

.legend-dot.paid {
  background: var(--deep);
}

#report-monthly-chart .report-month {
  flex: 1 1 0;
  min-width: 28px;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(4px, 1fr));
  align-items: end;
  gap: 4px;
  position: relative;
  padding-bottom: 20px;
  z-index: 2;
}

#report-monthly-chart .chart-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 5px 5px 2px 2px;
  transition: height .25s ease;
}

#report-monthly-chart .chart-bar.financed {
  background: #d9e9b2;
}

#report-monthly-chart .chart-bar.expected {
  background: #a8bf72;
}

#report-monthly-chart .chart-bar.paid {
  background: var(--deep);
}

#report-monthly-chart .report-month-label {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}

#report-monthly-chart::before,
#report-monthly-chart::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  height: 1px;
  background: #edf0eb;
  z-index: 0;
}

#report-monthly-chart::before {
  top: 42%;
}

#report-monthly-chart::after {
  top: 70%;
}

#report-composition-chart {
  min-height: 250px;
  height: 250px;
  box-sizing: border-box;
}

#report-composition-chart .report-donut {
  min-height: 250px;
  height: 250px;
  padding: 18px 24px;
  box-sizing: border-box;
}

#report-composition-chart .report-donut-legend {
  display: grid;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

#report-composition-chart .report-donut-item {
  min-height: 20px;
}

.report-tables-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

.report-table-card,
.report-monthly-table-card {
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
}

.report-ranking {
  min-height: 0 !important;
  height: auto !important;
  max-height: 320px;
  overflow-y: auto;
}

.report-collaborator-control {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.report-collaborator-control > div {
  flex: 0 0 220px !important;
  width: 220px !important;
}

#report-collaborator-select,
#report-status-select {
  width: 220px !important;
  height: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--ink) !important;
  padding: 0 34px 0 13px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

@media (max-width: 1050px) {
  #report-monthly-chart {
    min-height: 280px;
    height: 280px;
  }

  .report-tables-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 760px) {
  .report-chart-legend {
    gap: 10px;
    flex-wrap: wrap;
  }

  #report-monthly-chart {
    padding-left: 12px;
    padding-right: 12px;
  }

  .report-tables-grid {
    grid-template-columns: 1fr !important;
  }

  .report-collaborator-control > div {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  #report-collaborator-select,
  #report-status-select {
    width: 100% !important;
  }
}


/* =========================================================
   REPORT - LAYOUT FINALE COMPATTO
   ========================================================= */

/* ---------------------------------------------------------
   STRUTTURA GENERALE
   --------------------------------------------------------- */

.report-charts-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 0 0 12px 0 !important;
}

.report-chart-card {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-self: start !important;
}

/* elimina gli enormi spazi verticali */
.report-chart-card > * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   ANDAMENTO MENSILE
   --------------------------------------------------------- */

.report-chart-card:has(#report-monthly-chart) {
  min-height: 0 !important;
}

#report-monthly-chart {
  height: 250px !important;
  min-height: 250px !important;
  padding: 16px 20px 28px !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   COMPOSIZIONE PAY-IN
   --------------------------------------------------------- */

.report-chart-card:has(#report-composition-chart) {
  min-height: 0 !important;
}

#report-composition-chart {
  min-height: 0 !important;
  height: auto !important;
}

.report-donut {
  min-height: 210px !important;
  height: 210px !important;
  padding: 16px 22px !important;
  box-sizing: border-box !important;
}

/* ---------------------------------------------------------
   STATI / COLLABORATORI / BANCHE
   --------------------------------------------------------- */

/*
 * I tre pannelli vengono compattati e allineati.
 */

.report-tables-grid {
  display: grid !important;
  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.2fr)
    minmax(0, 1.2fr) !important;

  gap: 12px !important;
  margin: 0 0 12px 0 !important;
  align-items: stretch !important;
}

/*
 * Tutte le card devono avere la stessa altezza
 * e nessun vuoto interno inutile.
 */

.report-table-card,
.report-monthly-table-card {
  min-width: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

/* ---------------------------------------------------------
   STATI
   --------------------------------------------------------- */

#report-status-chart {
  padding: 12px 16px 16px !important;
  min-height: 0 !important;
  height: auto !important;
}

.report-status-row {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    34px !important;

  grid-template-areas:
    "head count"
    "bar  value";

  column-gap: 8px !important;
  row-gap: 4px !important;

  padding: 7px 0 !important;
  margin: 0 !important;

  border-bottom: 1px solid #edf0eb;
}

.report-status-row:last-child {
  border-bottom: 0;
}

.report-status-head {
  grid-area: head;
  min-width: 0;
  display: flex !important;
  align-items: center !important;
}

.report-status-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.report-status-head strong {
  grid-area: count;
  font-size: 11px !important;
  text-align: right;
}

.report-status-row .report-ranking-track {
  grid-area: bar;
  width: 100%;
  height: 5px !important;
  margin: 0 !important;
}

.report-status-value {
  grid-area: value;
  text-align: right;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   COLLABORATORI / BANCHE
   --------------------------------------------------------- */

#report-collaborators,
#report-banks {
  width: 100% !important;
}

.report-table-card .table-wrap {
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid #edf0eb;
}

.report-table {
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
}

.report-table th {
  padding: 8px 9px !important;
  font-size: 8px !important;
  white-space: nowrap !important;
}

.report-table td {
  padding: 8px 9px !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.report-table tbody tr {
  height: 32px !important;
}

.report-table tbody tr + tr td {
  border-top: 1px solid #f0f2ef;
}

/* prima colonna più leggibile */
.report-table td:first-child,
.report-table th:first-child {
  text-align: left !important;
}

/* numeri allineati a destra */
.report-table td:not(:first-child),
.report-table th:not(:first-child) {
  text-align: right !important;
}

/* ---------------------------------------------------------
   RANKING COMPATTI
   --------------------------------------------------------- */

.report-ranking {
  padding: 8px 14px 12px !important;
  min-height: 0 !important;
}

.report-ranking-row {
  margin: 0 !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid #edf0eb;
}

.report-ranking-row:last-child {
  border-bottom: 0;
}

.report-ranking-head {
  margin-bottom: 4px !important;
  font-size: 9px !important;
}

.report-ranking-track {
  height: 5px !important;
}

/* ---------------------------------------------------------
   HEADER DELLE CARD
   --------------------------------------------------------- */

.report-chart-card > header,
.report-table-card > header,
.report-monthly-table-card > header {
  padding: 13px 16px !important;
}

.report-chart-card > header h3,
.report-table-card > header h3,
.report-monthly-table-card > header h3 {
  margin: 0 !important;
  font-size: 13px !important;
}

.report-chart-card > header p,
.report-table-card > header p,
.report-monthly-table-card > header p {
  margin: 3px 0 0 !important;
  font-size: 9px !important;
}

/* ---------------------------------------------------------
   RIDUZIONE SPAZI TRA LE SEZIONI
   --------------------------------------------------------- */

.report-charts-grid + .report-tables-grid {
  margin-top: 0 !important;
}

.report-tables-grid + .report-actions-grid {
  margin-top: 12px !important;
}

.report-card,
.report-chart-card,
.report-table-card,
.report-monthly-table-card {
  box-shadow: 0 8px 24px rgba(23, 33, 29, .055) !important;
}

/* ---------------------------------------------------------
   FILTRI REPORT
   --------------------------------------------------------- */

.report-collaborator-control {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

.report-collaborator-control > div {
  flex: 0 0 205px !important;
}

#report-collaborator-select,
#report-status-select {
  width: 205px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 9px !important;
  font-size: 11px !important;
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 1100px) {

  .report-tables-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
  }

  #report-status-chart {
    grid-column: 1 / -1;
  }

}

@media (max-width: 760px) {

  .report-charts-grid {
    gap: 10px !important;
  }

  .report-tables-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  #report-status-chart {
    grid-column: auto;
  }

  .report-collaborator-control {
    flex-wrap: wrap !important;
  }

  .report-collaborator-control > div {
    flex: 1 1 100% !important;
  }

  #report-collaborator-select,
  #report-status-select {
    width: 100% !important;
  }

}


/* =========================================================
   REPORT - COLLAGE FINALE
   ========================================================= */

/* CONTENITORE GENERALE */

.report-charts-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}


/* CARD GRAFICI */

.report-chart-card {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}


/* ANDAMENTO MENSILE */

#report-monthly-chart {
  height: 255px !important;
  min-height: 255px !important;
  box-sizing: border-box !important;
}


/* COMPOSIZIONE */

#report-composition-chart {
  min-height: 0 !important;
}

.report-donut {
  height: 215px !important;
  min-height: 215px !important;
  box-sizing: border-box !important;
}


/* =========================================================
   COLLAGE STATI / COLLABORATORI / BANCHE
   ========================================================= */

.report-tables-grid {
  display: grid !important;

  grid-template-columns:
    minmax(230px, .85fr)
    minmax(0, 1.25fr)
    minmax(0, 1.25fr) !important;

  gap: 12px !important;

  margin-top: 0 !important;
  margin-bottom: 12px !important;

  align-items: stretch !important;
}


/* CARD */

.report-table-card,
.report-monthly-table-card {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  align-self: stretch !important;
}


/* HEADER */

.report-table-card > header,
.report-monthly-table-card > header {
  padding: 13px 15px 10px !important;
  margin: 0 !important;
}

.report-table-card > header h3,
.report-monthly-table-card > header h3 {
  margin: 0 !important;
  font-size: 13px !important;
}

.report-table-card > header p,
.report-monthly-table-card > header p {
  margin: 3px 0 0 !important;
  font-size: 9px !important;
}


/* =========================================================
   STATI
   ========================================================= */

#report-status-chart {
  padding: 8px 15px 12px !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

.report-status-row {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    32px !important;

  grid-template-areas:
    "head count"
    "bar value";

  column-gap: 8px !important;
  row-gap: 4px !important;

  padding: 7px 0 !important;
  margin: 0 !important;

  border-bottom: 1px solid #edf0eb !important;
}

.report-status-row:last-child {
  border-bottom: 0 !important;
}

.report-status-head {
  grid-area: head !important;

  display: flex !important;
  align-items: center !important;

  min-width: 0 !important;
}

.report-status-head span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  font-size: 10px !important;
  font-weight: 800 !important;
}

.report-status-head strong {
  grid-area: count !important;

  font-size: 10px !important;
  text-align: right !important;
}

.report-status-row .report-ranking-track {
  grid-area: bar !important;

  width: 100% !important;
  height: 5px !important;

  margin: 0 !important;
}

.report-status-value {
  grid-area: value !important;

  font-size: 9px !important;
  font-weight: 800 !important;

  text-align: right !important;
  white-space: nowrap !important;
}


/* =========================================================
   TABELLE COLLABORATORI / BANCHE
   ========================================================= */

.report-table-card .table-wrap {
  margin: 0 !important;
  padding: 0 !important;

  border-top: 1px solid #edf0eb !important;

  overflow-x: auto !important;
}

.report-table {
  width: 100% !important;
  min-width: 0 !important;

  border-collapse: collapse !important;
}

.report-table th {
  padding: 8px 8px !important;

  font-size: 8px !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}

.report-table td {
  padding: 9px 8px !important;

  font-size: 9px !important;
  line-height: 1.15 !important;

  white-space: nowrap !important;
}

.report-table tbody tr {
  height: 32px !important;
}

.report-table tbody tr + tr td {
  border-top: 1px solid #f0f2ef !important;
}

.report-table th:first-child,
.report-table td:first-child {
  text-align: left !important;
}

.report-table th:not(:first-child),
.report-table td:not(:first-child) {
  text-align: right !important;
}


/* =========================================================
   RIDUZIONE SPAZI BIANCHI
   ========================================================= */

.report-chart-card,
.report-table-card,
.report-monthly-table-card {
  align-self: start !important;
}

.report-chart-card > *,
.report-table-card > *,
.report-monthly-table-card > * {
  box-sizing: border-box !important;
}

.report-tables-grid > * {
  margin: 0 !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

  .report-tables-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
  }

  .report-tables-grid > :first-child {
    grid-column: 1 / -1;
  }

}


@media (max-width: 760px) {

  .report-tables-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .report-tables-grid > :first-child {
    grid-column: auto;
  }

  #report-monthly-chart {
    height: 230px !important;
    min-height: 230px !important;
  }

  .report-donut {
    height: 220px !important;
    min-height: 220px !important;
  }

}


/* =========================================================
   REPORT — BARRA FILTRI DEFINITIVA
   ========================================================= */

#reports .report-filters.panel {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 360px)
    minmax(330px, 370px) !important;

  align-items: center !important;

  gap: 22px !important;

  width: 100% !important;
  min-width: 0 !important;

  min-height: 104px !important;

  padding: 18px 22px !important;

  box-sizing: border-box !important;

  position: relative !important;

  overflow: hidden !important;
}


/* ---------------------------------------------------------
   RESET TOTALE POSIZIONAMENTI PRECEDENTI
   --------------------------------------------------------- */

#reports .report-filters .report-filter-period-panel,
#reports .report-filters .report-filter-dates,
#reports .report-filters .report-filter-select-panel,
#reports .report-filters #report-collaborator-filter,
#reports .report-filters .report-filter-content,
#reports .report-filters .report-filter-selects,
#reports .report-filters .report-filter-select {
  position: static !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  transform: none !important;

  float: none !important;
}


/* ---------------------------------------------------------
   PERIODO
   --------------------------------------------------------- */

#reports .report-filter-period-panel {
  grid-column: 1 !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

#reports .report-filter-period-panel
.report-filter-title {
  display: block !important;

  margin: 0 0 7px 0 !important;
  padding: 0 !important;

  color: var(--muted) !important;

  font-size: 9px !important;
  line-height: 10px !important;

  font-weight: 900 !important;

  text-transform: uppercase !important;

  letter-spacing: .04em !important;
}

#reports .report-filter-period-panel
.report-filter-presets {
  display: flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  flex-wrap: wrap !important;

  gap: 5px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

#reports .report-filter-period-panel
.report-period {
  flex: 0 0 auto !important;

  height: 34px !important;
  min-height: 34px !important;

  margin: 0 !important;

  padding: 0 10px !important;

  box-sizing: border-box !important;

  border-radius: 8px !important;

  font-family: inherit !important;

  font-size: 9px !important;

  font-weight: 800 !important;

  white-space: nowrap !important;
}


/* ---------------------------------------------------------
   DATE
   --------------------------------------------------------- */

#reports .report-filter-dates {
  grid-column: 2 !important;

  width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

/* Nasconde PERIODO PERSONALIZZATO */
#reports .report-filter-dates
.report-filter-title {
  display: none !important;
}

#reports .report-filter-dates
.report-custom-dates {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    auto !important;

  align-items: end !important;

  gap: 7px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

#reports .report-filter-dates
.report-custom-dates label {
  display: flex !important;

  flex-direction: column !important;

  gap: 4px !important;

  min-width: 0 !important;

  margin: 0 !important;
}

#reports .report-filter-dates
.report-custom-dates label span {
  display: block !important;

  margin: 0 !important;

  color: var(--muted) !important;

  font-size: 8px !important;
  line-height: 9px !important;

  font-weight: 900 !important;

  text-transform: uppercase !important;
}

#reports .report-filter-dates
.report-custom-dates input[type="date"] {
  width: 100% !important;

  height: 36px !important;
  min-height: 36px !important;

  box-sizing: border-box !important;

  margin: 0 !important;
}

#reports .report-filter-dates
#apply-report-period {
  height: 36px !important;
  min-height: 36px !important;

  margin: 0 !important;

  white-space: nowrap !important;
}


/* ---------------------------------------------------------
   FILTRA PER
   --------------------------------------------------------- */

#reports .report-filter-select-panel {
  grid-column: 3 !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  align-items: stretch !important;

  width: 100% !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  box-sizing: border-box !important;
}

#reports .report-filter-select-panel
.report-filter-title {
  display: block !important;

  width: 100% !important;

  margin: 0 0 7px 0 !important;

  padding: 0 !important;

  color: var(--muted) !important;

  font-size: 9px !important;
  line-height: 10px !important;

  font-weight: 900 !important;

  text-transform: uppercase !important;

  letter-spacing: .04em !important;
}


/* ---------------------------------------------------------
   CONTENITORE GENERATO DAL JS
   --------------------------------------------------------- */

#reports .report-filter-select-panel
#report-collaborator-filter {
  display: block !important;

  width: 100% !important;

  min-width: 0 !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  box-sizing: border-box !important;

  opacity: 1 !important;

  visibility: visible !important;
}


/* ---------------------------------------------------------
   I DUE MENU
   --------------------------------------------------------- */

#reports .report-filter-select-panel
#report-collaborator-filter
.report-filter-content {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

#reports .report-filter-select-panel
#report-collaborator-filter
.report-filter-selects {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 8px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

#reports .report-filter-select-panel
#report-collaborator-filter
.report-filter-select {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;

  height: 36px !important;

  margin: 0 !important;
  padding: 0 !important;
}

#reports .report-filter-select-panel
#report-collaborator-filter
.report-filter-select
select {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 36px !important;
  min-height: 36px !important;

  box-sizing: border-box !important;

  margin: 0 !important;

  padding: 0 30px 0 12px !important;

  border: 1px solid var(--line) !important;

  border-radius: 8px !important;

  background: #fff !important;

  color: var(--ink) !important;

  font-family: inherit !important;

  font-size: 10px !important;

  font-weight: 800 !important;

  line-height: 34px !important;

  appearance: none !important;

  -webkit-appearance: none !important;

  outline: none !important;

  cursor: pointer !important;
}

#reports .report-filter-select-panel
#report-collaborator-filter
.report-filter-select::after {
  content: "⌄" !important;

  position: absolute !important;

  top: 50% !important;

  right: 10px !important;

  left: auto !important;
  bottom: auto !important;

  transform: translateY(-55%) !important;

  color: var(--muted) !important;

  font-size: 11px !important;

  font-weight: 900 !important;

  pointer-events: none !important;
}


/* ---------------------------------------------------------
   NASCONDE IL LABEL VECCHIO
   --------------------------------------------------------- */

#reports #report-period-label {
  display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  #reports .report-filters.panel {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 340px) !important;

    gap: 16px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

  #reports .report-filters.panel {
    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 12px !important;

    height: auto !important;

    min-height: 0 !important;
  }

  #reports .report-filter-period-panel,
  #reports .report-filter-dates,
  #reports .report-filter-select-panel {
    width: 100% !important;
  }

}

@media (max-width: 600px) {

  #reports .report-custom-dates {
    grid-template-columns:
      1fr 1fr !important;
  }

  #reports #apply-report-period {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  #reports .report-filter-selects {
    grid-template-columns: 1fr !important;
  }

}


/* =========================================================
   REPORT — RIMUOVE SOLO IL FILTRA PER DUPLICATO
   ========================================================= */

/*
 * Il titolo corretto è quello dentro
 * .report-filter-select-panel.
 *
 * La seconda scritta "FILTRA PER" viene
 * generata dal vecchio .report-filter-heading.
 */

#reports .report-filter-heading {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   DASHBOARD — OCCHIO IMPORTI
   ========================================================= */

.dashboard-amount-toggle {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;

  border: 1px solid var(--line) !important;
  border-radius: 9px !important;

  background: var(--surface) !important;
  color: var(--muted) !important;

  font-size: 16px !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

.dashboard-amount-toggle:hover {
  border-color: #a8b8b0 !important;
  color: var(--deep) !important;
}

.dashboard-amount-toggle[aria-pressed="true"] {
  background: var(--deep) !important;
  border-color: var(--deep) !important;
  color: #fff !important;
}

body.dashboard-amounts-hidden
#stats-grid .stat-value {
  font-size: 0 !important;
  color: transparent !important;
}

body.dashboard-amounts-hidden
#stats-grid .stat-value::after {
  content: "••••" !important;
  display: inline-block !important;

  color: var(--ink) !important;

  font-size: 28px !important;
  line-height: 1 !important;

  letter-spacing: 4px !important;
}


/* =========================================================
   SEGNALATORI — LAYOUT
   ========================================================= */

#segnalatori .bank-layout {
  display: grid !important;
  grid-template-columns:
    minmax(220px, .75fr)
    minmax(0, 2fr) !important;
  gap: 18px !important;
}

#segnalatori .bank-list-panel,
#segnalatori .rule-panel {
  min-height: 410px !important;
}

#segnalatori .bank-list {
  border-top: 1px solid #edf0eb !important;
  padding: 9px !important;
}

#segnalatori .bank-row {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 10px !important;
  text-align: left !important;
  padding: 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--ink) !important;
}

#segnalatori .bank-row:hover {
  background: #f5f8f5 !important;
}

#segnalatori .bank-row.selected {
  background: #edf7e7 !important;
  border-color: #dcebcf !important;
}

#segnalatori .bank-logo {
  width: 31px !important;
  height: 31px !important;
  flex: 0 0 31px !important;
  border-radius: 9px !important;
  display: grid !important;
  place-items: center !important;
  background: #e5eeec !important;
  color: var(--deep) !important;
  font-weight: 900 !important;
}

#segnalatori .bank-row.selected .bank-logo {
  background: var(--lime) !important;
}

#segnalatori .bank-row strong {
  font-size: 12px !important;
}

#segnalatori .bank-row small {
  display: block !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
  font-size: 10px !important;
}

#segnalatori .rule-panel {
  overflow: hidden !important;
}

#segnalatori .rules-container {
  border-top: 1px solid #edf0eb !important;
  padding: 0 0 10px !important;
}

#segnalatori .rule-card {
  margin: 12px 16px !important;
  padding: 15px !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  display: grid !important;
  grid-template-columns:
    1.05fr
    1fr
    1fr
    1fr
    auto !important;
  align-items: center !important;
  gap: 11px !important;
}

#segnalatori .rule-product {
  font-weight: 800 !important;
  font-size: 12px !important;
}

#segnalatori .rule-product span {
  display: block !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  margin-top: 3px !important;
}

#segnalatori .rule-number {
  font-size: 13px !important;
  font-weight: 800 !important;
}

#segnalatori .rule-number span {
  color: var(--muted) !important;
  display: block !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  margin-bottom: 3px !important;
}

#segnalatori .rule-card .button {
  margin: 2px !important;
}

#segnalatori .rules-container.empty-state {
  min-height: 290px !important;
}

@media (max-width: 900px) {

  #segnalatori .bank-layout {
    grid-template-columns: 1fr !important;
  }

  #segnalatori .rule-card {
    grid-template-columns: 1fr 1fr !important;
  }

}


/* =========================================================
   SEGNALATORI — LAYOUT
   ========================================================= */

#segnalatori .bank-layout {
  display: grid !important;
  grid-template-columns:
    minmax(220px, .75fr)
    minmax(0, 2fr) !important;
  gap: 18px !important;
}

#segnalatori .bank-list-panel,
#segnalatori .rule-panel {
  min-height: 410px !important;
}

#segnalatori .bank-list {
  border-top: 1px solid #edf0eb !important;
  padding: 9px !important;
}

#segnalatori .bank-row {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: 10px !important;
  text-align: left !important;
  padding: 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--ink) !important;
}

#segnalatori .bank-row:hover {
  background: #f5f8f5 !important;
}

#segnalatori .bank-row.selected {
  background: #edf7e7 !important;
  border-color: #dcebcf !important;
}

#segnalatori .bank-logo {
  width: 31px !important;
  height: 31px !important;
  flex: 0 0 31px !important;
  border-radius: 9px !important;
  display: grid !important;
  place-items: center !important;
  background: #e5eeec !important;
  color: var(--deep) !important;
  font-weight: 900 !important;
}

#segnalatori .bank-row.selected .bank-logo {
  background: var(--lime) !important;
}

#segnalatori .bank-row strong {
  font-size: 12px !important;
}

#segnalatori .bank-row small {
  display: block !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
  font-size: 10px !important;
}

#segnalatori .rule-panel {
  overflow: hidden !important;
}

#segnalatori .rules-container {
  border-top: 1px solid #edf0eb !important;
  padding: 0 0 10px !important;
}

#segnalatori .rule-card {
  margin: 12px 16px !important;
  padding: 15px !important;
  border: 1px solid var(--line) !important;
  border-radius: 11px !important;
  display: grid !important;
  grid-template-columns:
    1.05fr
    1fr
    1fr
    1fr
    auto !important;
  align-items: center !important;
  gap: 11px !important;
}

#segnalatori .rule-product {
  font-weight: 800 !important;
  font-size: 12px !important;
}

#segnalatori .rule-product span {
  display: block !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  margin-top: 3px !important;
}

#segnalatori .rule-number {
  font-size: 13px !important;
  font-weight: 800 !important;
}

#segnalatori .rule-number span {
  color: var(--muted) !important;
  display: block !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  margin-bottom: 3px !important;
}

#segnalatori .rule-card .button {
  margin: 2px !important;
}

#segnalatori .rules-container.empty-state {
  min-height: 290px !important;
}

@media (max-width: 900px) {

  #segnalatori .bank-layout {
    grid-template-columns: 1fr !important;
  }

  #segnalatori .rule-card {
    grid-template-columns: 1fr 1fr !important;
  }

}


/* =========================================================
   SEGNALATORI — POPUP
   ========================================================= */

.segnalatore-modal-form {
  width: 100%;
}

.segnalatore-modal-form .form-grid {
  width: 100%;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.segnalatore-modal-form .form-field {
  min-width: 0;
}

.segnalatore-modal-form input,
.segnalatore-modal-form select {
  width: 100%;
  box-sizing: border-box;
}


/* =========================================================
   SEGNALATORI — POPUP REGOLA
   ========================================================= */

.segnalatore-rule-help {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
  padding: 12px 14px;
  background: #f4f8ef;
  border: 1px solid #dce8df;
  border-radius: 10px;
}

.segnalatore-rule-help strong {
  color: var(--deep);
  font-size: 11px;
}

.segnalatore-rule-help span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.segnalatore-modal-form .modal-actions {
  margin-top: 0;
}

@media (max-width: 760px) {

  #segnalatori .rule-card {
    grid-template-columns: 1fr !important;
  }

  .segnalatore-rule-help {
    margin-top: 14px;
  }

}


/* =========================================================
   SEGNALATORI — POPUP DEFINITIVO
   ========================================================= */

#modal-form .modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  padding: 18px 25px 22px;
  margin-top: 4px;
  border-top: 1px solid #e7eeea;
}

#modal-form .modal-actions .button {
  min-width: 92px;
}

#modal-form .form-preview {
  margin-top: 18px;
}


/* =========================================================
   SEGNALATORI — DESIGN POPUP REGOLA
   ========================================================= */

#modal-form:has(.segnalatore-rule-form) {
  padding: 0;
}

#modal-form:has(.segnalatore-rule-form) .form-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 20px !important;
  padding: 24px 25px 4px !important;
}

#modal-form:has(.segnalatore-rule-form)
.form-field {
  min-width: 0;
}

#modal-form:has(.segnalatore-rule-form)
.form-field label {
  display: block;
  margin-bottom: 7px;
  color: #52645e;
  font-size: 10px;
  font-weight: 850;
}

#modal-form:has(.segnalatore-rule-form)
.form-field input,
#modal-form:has(.segnalatore-rule-form)
.form-field select {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid #d5dfd9;
  border-radius: 9px;
  padding: 0 12px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
}

#modal-form:has(.segnalatore-rule-form)
.form-field input:focus,
#modal-form:has(.segnalatore-rule-form)
.form-field select:focus {
  outline: none;
  border-color: #6da990;
  box-shadow: 0 0 0 3px rgba(109,169,144,.10);
}


/* Riquadro informativo molto più compatto */

#modal-form:has(.segnalatore-rule-form)
.form-preview {
  margin: 18px 25px 0 !important;
  padding: 11px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 30px !important;
  border-radius: 10px !important;
  background: #f4f8ef !important;
  border: 1px solid #dce8df !important;
}

#modal-form:has(.segnalatore-rule-form)
.form-preview div {
  flex: 0 0 auto !important;
}

#modal-form:has(.segnalatore-rule-form)
.form-preview span {
  font-size: 9px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
}

#modal-form:has(.segnalatore-rule-form)
.form-preview strong {
  margin-top: 2px !important;
  font-size: 13px !important;
}


/* Errore */

#modal-form:has(.segnalatore-rule-form)
.form-error {
  padding: 0 25px !important;
  margin-top: 8px;
}


/* Footer */

#modal-form:has(.segnalatore-rule-form)
.modal-actions {
  margin-top: 14px !important;
  padding: 18px 25px 20px !important;
  border-top: 1px solid #e7eeea;
}


/* Popup leggermente più compatto */

.modal:has(
  #modal-form .segnalatore-rule-form
) {
  width: min(680px, 100%);
}


/* Mobile */

@media (max-width: 760px) {

  #modal-form:has(.segnalatore-rule-form)
  .form-grid {
    grid-template-columns: 1fr !important;
    padding: 20px 18px 2px !important;
  }

  #modal-form:has(.segnalatore-rule-form)
  .form-preview {
    margin-left: 18px !important;
    margin-right: 18px !important;
    gap: 18px !important;
  }

  #modal-form:has(.segnalatore-rule-form)
  .modal-actions {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

}


/* =========================================================
   TYPOGRAPHY — REVISIONE GENERALE
   Più leggibile, mantenendo il tema attuale
   ========================================================= */

html,
body {
  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;
}

body {
  color: var(--ink);
  line-height: 1.45;
}

.main-content,
.main-content p,
.main-content span,
.main-content label,
.main-content input,
.main-content select,
.main-content button,
.main-content table {
  font-family: inherit;
}


/* Titoli delle sezioni */

.view h2 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.45px;
  font-weight: 800;
}

.view h3 {
  font-weight: 800;
}


/* Testi descrittivi */

.section-toolbar p,
.intro-row p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
}


/* =========================================================
   REPORT — TIPOGRAFIA
   ========================================================= */

#reports h2 {
  font-size: 25px !important;
  font-weight: 820 !important;
  letter-spacing: -.5px !important;
}

#reports .section-toolbar p {
  font-size: 13px !important;
  line-height: 1.5 !important;
}


/* Card Report */

#reports .report-card {
  padding: 23px 24px !important;
}

#reports .report-card h3 {
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 820 !important;
  letter-spacing: -.25px !important;
  margin: 12px 0 8px !important;
}

#reports .report-card p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #61706b !important;
  max-width: 560px !important;
  margin-bottom: 20px !important;
}

#reports .report-icon {
  font-size: 20px !important;
}


/* Pulsanti dentro Report */

#reports .button {
  font-size: 12px !important;
  font-weight: 800 !important;
}


/* =========================================================
   TABELLE REPORT
   ========================================================= */

#reports table {
  font-size: 13px !important;
}

#reports th {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .065em !important;
  color: #718079 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

#reports td {
  font-size: 13px !important;
  line-height: 1.4 !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

#reports td strong {
  font-size: 13px !important;
  font-weight: 800 !important;
}

#reports td small {
  font-size: 10.5px !important;
  line-height: 1.35 !important;
}

#reports .amount-cell {
  font-size: 13px !important;
  font-weight: 820 !important;
}

#reports .amount-cell small {
  font-size: 10.5px !important;
}


/* =========================================================
   FILTRI REPORT
   ========================================================= */

#reports .filter-bar {
  gap: 10px !important;
  padding: 11px !important;
}

#reports .filter-bar select,
#reports .search-input input {
  height: 39px !important;
  font-size: 12px !important;
}

#reports .search-input input::placeholder {
  font-size: 12px !important;
}


/* =========================================================
   BADGE / STATO / PRODOTTO
   ========================================================= */

#reports .product-pill,
#reports .status-pill {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  padding: 6px 9px !important;
}


/* =========================================================
   TESTI SECONDARI
   ========================================================= */

#reports .empty-table,
#reports .empty-state {
  font-size: 13px !important;
}

#reports .empty-state p {
  font-size: 12px !important;
  line-height: 1.5 !important;
}


/* =========================================================
   DASHBOARD — LEGGIBILITÀ LEGGERMENTE MIGLIORATA
   ========================================================= */

#dashboard .stat-label {
  font-size: 10.5px !important;
  font-weight: 800 !important;
}

#dashboard .stat-note {
  font-size: 10px !important;
}

#dashboard .stat-value {
  font-weight: 820 !important;
}


/* =========================================================
   BANCHE / TEAM / SEGNALATORI
   ========================================================= */

.bank-row strong,
.member-top h3,
#segnalatori .bank-row strong {
  font-weight: 800 !important;
}

.bank-row small,
.member-top p,
#segnalatori .bank-row small {
  font-size: 10.5px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

  .view h2 {
    font-size: 22px !important;
  }

  #reports .report-card h3 {
    font-size: 16px !important;
  }

  #reports .report-card p {
    font-size: 12.5px !important;
  }

  #reports td {
    font-size: 12px !important;
  }

}


/* =========================================================
   SEGNALATORI — REPORT
   ========================================================= */

.segnalatori-view-switch {
  flex-shrink: 0;
}

.segnalatori-view-switch label {
  color: var(--text-muted, #667085);
}

#segnalatori-subview {
  min-width: 190px;
  height: 42px;
  border-radius: 12px;
  font-weight: 600;
}

.segnalatori-subview {
  width: 100%;
}

#segnalatori-subview-report {
  padding-top: 4px;
}

#segnalatori-subview-report .report-filters {
  padding: 22px;
  border-radius: 18px;
}

#segnalatori-subview-report .report-filters > div:first-child {
  align-items: end;
}

#segnalatori-subview-report .form-field {
  min-width: 0;
}

#segnalatori-subview-report .form-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-muted, #667085);
}

#segnalatori-subview-report input,
#segnalatori-subview-report select {
  width: 100%;
  min-width: 0;
}

#segnalatori-report-min,
#segnalatori-report-max {
  min-width: 0;
}

.segnalatori-report-summary {
  align-items: stretch;
}

.segnalatori-report-summary .panel {
  min-height: 118px;
  padding: 20px 22px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.segnalatori-report-summary .panel span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #667085);
  letter-spacing: .02em;
}

.segnalatori-report-summary .panel strong {
  display: block;
  margin-top: 12px;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
}

#segnalatori-report-table {
  padding-top: 2px;
}

#segnalatori-report-table h4 {
  font-size: 14px;
  font-weight: 750;
  color: var(--text, #101828);
}

#segnalatori-report-table .data-table {
  width: 100%;
  border-collapse: collapse;
}

#segnalatori-report-table .data-table th {
  padding: 12px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted, #667085);
  white-space: nowrap;
}

#segnalatori-report-table .data-table td {
  padding: 14px;
  vertical-align: middle;
  font-size: 13px;
  border-top: 1px solid var(--border, #e5e7eb);
}

#segnalatori-report-table .data-table tbody tr:last-child td {
  font-weight: 700;
}

#add-segnalatore {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .segnalatori-report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .segnalatori-report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  .segnalatori-report-summary {
    grid-template-columns: 1fr !important;
  }

  .segnalatori-report-grid {
    grid-template-columns: 1fr !important;
  }

  .segnalatori-view-switch {
    width: 100%;
    margin-top: 12px;
  }

  #segnalatori-subview {
    flex: 1;
    min-width: 0;
  }

  #segnalatori-subview-report .report-filters {
    padding: 16px;
  }
}


/* =========================================================
   SEGNALATORI
   UI / REPORT
   ========================================================= */

.segnalatori-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  background: var(--surface-soft, #f6f7f9);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.segnalatori-tab {
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-muted, #667085);
  border-radius: 10px;
  padding: 9px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition:
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.segnalatori-tab:hover {
  color: var(--text, #101828);
}

.segnalatori-tab.active {
  color: var(--text, #101828);
  background: var(--surface, #ffffff);
  box-shadow:
    0 1px 3px rgba(16, 24, 40, .10);
}


/* =========================================================
   REPORT
   ========================================================= */

#segnalatori-subview-report {
  padding-top: 6px;
}

#segnalatori-subview-report .report-filters {
  margin: 0;
  padding: 20px;
  border-radius: 18px;
}

#segnalatori-subview-report .report-filters > div:first-child {
  display: grid !important;
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(150px, 1fr)
    minmax(190px, 1.2fr)
    minmax(190px, 1.2fr) !important;
  gap: 14px !important;
  align-items: end;
}

#segnalatori-subview-report .form-field {
  min-width: 0;
}

#segnalatori-subview-report .form-field label {
  display: block;
  margin: 0 0 7px;
  color: var(--text-muted, #667085);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#segnalatori-subview-report input,
#segnalatori-subview-report select {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
}

#segnalatori-subview-report .report-filter-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e5e7eb);
}


/* KPI */

#segnalatori-subview-report .segnalatori-report-summary {
  display: grid !important;
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 14px !important;
}

#segnalatori-subview-report
.segnalatori-report-summary
.panel {
  position: relative;
  min-height: 110px;
  padding: 18px 20px;
  border-radius: 18px;
  overflow: hidden;
}

#segnalatori-subview-report
.segnalatori-report-summary
.panel::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: currentColor;
  opacity: .08;
}

#segnalatori-subview-report
.segnalatori-report-summary
.panel span {
  display: block;
  color: var(--text-muted, #667085);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

#segnalatori-subview-report
.segnalatori-report-summary
.panel strong {
  display: block;
  margin-top: 14px;
  color: var(--text, #101828);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
}


/* TABELLA */

#segnalatori-subview-report
.report-table-panel {
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
}

#segnalatori-report-table {
  padding: 0;
}

#segnalatori-report-table h4 {
  margin: 0;
  padding: 20px 20px 12px;
  color: var(--text, #101828);
  font-size: 14px;
  font-weight: 800;
}

#segnalatori-report-table .table-section {
  margin: 0;
  padding: 0 20px 20px;
}

#segnalatori-report-table .data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#segnalatori-report-table .data-table th {
  padding: 11px 13px;
  background: var(--surface-soft, #f7f8fa);
  border-bottom: 1px solid var(--border, #e5e7eb);
  color: var(--text-muted, #667085);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .045em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

#segnalatori-report-table .data-table th:first-child {
  border-radius: 10px 0 0 0;
}

#segnalatori-report-table .data-table th:last-child {
  border-radius: 0 10px 0 0;
}

#segnalatori-report-table .data-table td {
  padding: 13px;
  border-bottom: 1px solid var(--border, #edf0f3);
  color: var(--text, #344054);
  font-size: 13px;
  vertical-align: middle;
}

#segnalatori-report-table .data-table tbody tr:hover td {
  background: var(--surface-soft, #fafbfc);
}

#segnalatori-report-table
.data-table
tbody
tr:last-child
td {
  border-bottom: 0;
}

#segnalatori-report-table
.data-table
td:last-child {
  font-weight: 800;
}


/* EMPTY */

#segnalatori-subview-report .empty-state {
  padding: 46px 24px;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

  #segnalatori-subview-report .report-filters > div:first-child {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  #segnalatori-subview-report
  .segnalatori-report-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {

  .segnalatori-tabs {
    width: 100%;
  }

  .segnalatori-tab {
    flex: 1;
    padding-left: 10px;
    padding-right: 10px;
  }

  #segnalatori-subview-report .report-filters > div:first-child {
    grid-template-columns: 1fr !important;
  }

  #segnalatori-subview-report
  .segnalatori-report-summary {
    grid-template-columns: 1fr !important;
  }

  #segnalatori-report-table .table-section {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* =========================================================
   MONEY RAIN — BANCONOTE
   Override definitivo
   ========================================================= */

#money-rain-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  pointer-events: none;
  perspective: 900px;
}

.money-rain-note {
  position: absolute;
  top: -130px;
  left: var(--money-x);

  width: 118px;
  height: 58px;

  opacity: 0;

  transform:
    translate3d(0, -60px, 0)
    rotate(var(--money-rotate))
    rotateY(0deg)
    scale(var(--money-scale));

  animation:
    money-note-fall
    var(--money-duration)
    cubic-bezier(.12,.72,.25,1)
    var(--money-delay)
    forwards;
}

.money-note-inner {
  position: relative;

  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: 25px 1fr 25px;
  align-items: center;

  box-sizing: border-box;

  padding: 6px 8px;

  border: 2px solid rgba(91, 77, 24, .38);
  border-radius: 7px;

  background:
    linear-gradient(
      135deg,
      #d8e8b7 0%,
      #c5dfa1 45%,
      #b5d28d 100%
    );

  box-shadow:
    0 10px 22px rgba(16,24,40,.22),
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 0 14px rgba(255,255,255,.25);

  color: #40551f;

  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.money-note-inner::before {
  content: '';
  position: absolute;
  inset: 4px;

  border: 1px dashed rgba(64,85,31,.35);
  border-radius: 4px;

  pointer-events: none;
}

.money-note-inner::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  bottom: 7px;

  width: 1px;

  background: rgba(64,85,31,.20);
}

.money-note-side {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 1px;

  font-size: 9px;
  font-weight: 900;
}

.money-note-side strong {
  font-size: 15px;
  line-height: 1;
}

.money-note-euro {
  font-size: 12px;
  font-weight: 900;
}

.money-note-center {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 2px;

  text-align: center;
}

.money-note-portrait {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border: 1px solid rgba(64,85,31,.45);
  border-radius: 50%;

  font-size: 10px;
}

.money-note-brand {
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .12em;
}

.money-note-mini {
  font-size: 5px;
  letter-spacing: .08em;
}

.money-note-right {
  text-align: center;
}

@keyframes money-note-fall {

  0% {
    opacity: 0;

    transform:
      translate3d(0, -80px, 0)
      rotate(var(--money-rotate))
      rotateY(0deg)
      scale(var(--money-scale));
  }

  8% {
    opacity: 1;
  }

  48% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--money-drift),
        calc(100vh + 180px),
        0
      )
      rotate(
        calc(
          var(--money-rotate) + 260deg
        )
      )
      rotateY(
        var(--money-rotate-y)
      )
      scale(var(--money-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  #money-rain-overlay {
    display: none;
  }
}


/* =========================================================
   MONEY RAIN — REAL EURO BANKNOTES
   ========================================================= */

#money-rain-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  pointer-events: none;
  perspective: 1000px;
}

.money-rain-note {
  position: absolute;
  top: -140px;
  left: var(--money-x);

  width: 125px;
  height: auto;

  display: block;

  object-fit: contain;

  opacity: 0;

  user-select: none;
  pointer-events: none;

  filter:
    drop-shadow(
      0 8px 8px rgba(16, 24, 40, .18)
    );

  transform:
    translate3d(
      0,
      -100px,
      0
    )
    rotate(
      var(--money-rotate)
    )
    rotateY(0deg)
    scale(
      var(--money-scale)
    );

  transform-origin: center;

  animation:
    money-real-fall
    var(--money-duration)
    cubic-bezier(.16,.72,.28,1)
    var(--money-delay)
    forwards;
}

@keyframes money-real-fall {

  0% {
    opacity: 0;

    transform:
      translate3d(
        0,
        -100px,
        0
      )
      rotate(
        var(--money-rotate)
      )
      rotateY(0deg)
      scale(
        var(--money-scale)
      );
  }

  8% {
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--money-drift),
        calc(100vh + 180px),
        0
      )
      rotate(
        calc(
          var(--money-rotate) + 300deg
        )
      )
      rotateY(
        var(--money-rotate-y)
      )
      scale(
        var(--money-scale)
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  #money-rain-overlay {
    display: none;
  }
}


/* =========================================================
   MONEY RAIN — EMOJI
   ========================================================= */

#money-rain-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  pointer-events: none;
}

.money-rain-emoji {
  position: absolute;
  top: -80px;

  display: block;

  font-size: var(--money-size);
  line-height: 1;

  opacity: 0;

  user-select: none;
  pointer-events: none;

  filter:
    drop-shadow(
      0 5px 8px rgba(16,24,40,.18)
    );

  transform:
    translate3d(
      0,
      -80px,
      0
    )
    rotate(
      var(--money-rotate)
    );

  animation:
    money-emoji-fall
    var(--money-duration)
    cubic-bezier(.15,.70,.25,1)
    var(--money-delay)
    forwards;
}

@keyframes money-emoji-fall {

  0% {
    opacity: 0;

    transform:
      translate3d(
        0,
        -80px,
        0
      )
      rotate(
        var(--money-rotate)
      )
      scale(.7);
  }

  8% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--money-drift),
        calc(100vh + 120px),
        0
      )
      rotate(
        calc(
          var(--money-rotate) + 420deg
        )
      )
      scale(1);
  }
}