/* Sistema di interazione condiviso: mantiene la palette, uniforma ritmo e feedback. */
:root {
  --ui-ease: cubic-bezier(.2, .8, .2, 1);
  --ui-fast: 160ms;
  --ui-base: 240ms;
  --ui-ring: 0 0 0 3px rgba(62, 107, 62, .18)
}

button,
a,
input,
textarea {
  transition: color var(--ui-fast) var(--ui-ease), background-color var(--ui-fast) var(--ui-ease), border-color var(--ui-fast) var(--ui-ease), box-shadow var(--ui-base) var(--ui-ease), transform var(--ui-fast) var(--ui-ease)
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 0;
  box-shadow: var(--ui-ring)
}

button:active {
  transform: translateY(1px) scale(.985)
}

/* Lo stato :active non deve scollegare la riga fattura dal dito durante lo swipe. */
button.recent-invoice-row:active {
  transform: translateX(var(--invoice-swipe-x, 0))
}

.primary:hover {
  background: var(--green);
  box-shadow: 0 9px 22px #3e6b3e4d;
  transform: translateY(-1px)
}

.outline:hover {
  background: rgba(124, 58, 237, 0.14);
  border-color: rgba(124, 58, 237, 0.38);
  color: #4c1d95;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.16);
  transform: translateY(-1px)
}

.outline:hover .ai-badge-circle {
  transform: scale(1.06);
  box-shadow: 0 4px 14px rgba(124, 77, 255, 0.45);
}

.pay:hover,
.deadline-actions button:hover,
.documents-drop button:hover {
  box-shadow: 0 5px 13px #3e6b3e1c;
  transform: translateY(-1px)
}

.nav-item {
  position: relative;
  overflow: hidden
}

.nav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--ui-fast) var(--ui-ease)
}

.nav-item:hover::after {
  opacity: .035
}

.nav-item>* {
  position: relative;
  z-index: 1
}

.bottom-nav button:not(.fab) {
  position: relative
}

.bottom-nav button.active b {
  animation: nav-icon-settle 320ms var(--ui-ease)
}

.card,
.deadline-row,
.mobile-deadline,
.opportunity,
.mini,
.forecast-hero,
.simulator-card,
.chart-card,
.history-card,
.filters-card,
.calendar-card,
.document-list,
.deadline-detail-list,
.assistant-card,
.deadlines-summary,
.late-card,
.documents-drop {
  backface-visibility: hidden
}

@media (hover:hover) and (pointer:fine) {

  .simulator-card:hover,
  .chart-card:hover,
  .history-card:hover,
  .filters-card:hover,
  .calendar-card:hover,
  .document-list:hover,
  .assistant-card:hover,
  .late-card:hover,
  .documents-drop:hover {
    box-shadow: 0 10px 28px #3c503217
  }

  .deadline-detail:hover {
    background: #fafcf8
  }

  .history-row:hover {
    background: #fafcf8;
    margin-inline: -8px;
    padding-inline: 8px
  }

  .quick-add button:hover,
  .filters-card button:hover {
    border-color: #b2cbb2;
    box-shadow: 0 3px 8px #3e6b3e14;
    transform: translateY(-1px)
  }

  .assistant-card button:hover {
    box-shadow: 0 5px 14px #6c44bf22;
    transform: translateY(-1px)
  }
}

.revenue-input:focus-within {
  border-color: #b2cbb2;
  box-shadow: var(--ui-ring)
}

.simulator-control input[type=range],
.late-card input[type=range] {
  touch-action: pan-x
}

.simulated-result {
  transition: box-shadow var(--ui-base) var(--ui-ease), transform var(--ui-base) var(--ui-ease)
}

.simulated-result:has(.simulated-delta.negative) {
  box-shadow: inset 0 0 0 1px #f7c5be
}

.forecast-hero .eyebrow b {
  display: inline-flex;
  align-items: center;
  gap: 4px
}

.forecast-hero .eyebrow b::first-letter {
  color: #3e6b3e
}

.bar-chart i {
  transform-origin: center bottom;
  will-change: transform
}



.modal.open .drawer-panel,
.modal.open .dialog {
  will-change: transform
}

.modal.open .drawer-panel {
  animation: drawer-enter 360ms var(--ui-ease)
}

.modal.open .dialog {
  animation: dialog-enter 300ms var(--ui-ease)
}

/* Tablet: una colonna informativa alla volta, senza comprimere pannelli e CTA. */
@media (min-width:761px) and (max-width:1180px) {
  .right {
    display: none
  }

  .side {
    width: 216px
  }

  .main {
    padding: 28px
  }

  .tab-page {
    max-width: 820px
  }

  .forecast-hero {
    gap: 22px
  }

  .deadline-detail {
    grid-template-columns: auto minmax(180px, 1fr) auto
  }

  .deadline-actions {
    grid-column: 2/-1;
    justify-content: flex-end
  }

  .deadlines-summary {
    grid-template-columns: 1fr 1fr
  }

  .deadlines-summary button {
    grid-column: 1/-1;
    width: max-content
  }

  .filters-card {
    align-items: flex-start
  }

  .view-switch {
    margin-left: 0
  }
}

@media (min-width:761px) and (max-width:900px) {
  .side {
    width: 194px;
    padding-inline: 14px
  }

  .brand {
    font-size: 25px
  }

  .side .primary {
    font-size: 13px;
    padding: 12px
  }

  .nav-item {
    padding-inline: 10px
  }

  .main {
    padding: 24px 20px
  }

  .forecast-hero {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .forecast-breakdown {
    min-width: 0;
    padding-left: 20px
  }

  .tab-header h1 {
    font-size: 25px
  }

  .deadline-detail {
    grid-template-columns: auto minmax(150px, 1fr) auto
  }

  .deadline-detail p {
    max-width: 260px
  }

  .simulator-control {
    flex-wrap: wrap
  }

  .simulator-control>input {
    flex: 1;
    min-width: 250px
  }
}

/* Mobile: superfici e azioni rimangono leggibili anche con viewport stretti e landscape. */
@media(max-width:760px) {
  .mobile-content {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch
  }

  .tab-page {
    padding-bottom: 6px
  }

  .tab-header {
    gap: 10px
  }

  .tab-header h1 {
    letter-spacing: -.35px
  }

  .tab-header .compact-primary {
    flex: none
  }

  .tab-page .card-row {
    align-items: flex-start
  }

  .tab-page .card-row h2 {
    line-height: 1.3
  }

  .forecast-hero,
  .simulator-card,
  .chart-card,
  .history-card,
  .filters-card,
  .calendar-card,
  .document-list,
  .assistant-card,
  .late-card {
    box-shadow: 0 5px 16px #3c50320c
  }

  .deadline-detail {
    align-items: start
  }

  .deadline-detail .datebox {
    margin-top: 1px
  }

  .deadline-detail>strong {
    padding-top: 5px;
    white-space: nowrap
  }

  .deadline-actions {
    flex-wrap: wrap
  }

  .filters-card button {
    min-height: 32px
  }

  .calendar-grid {
    overflow: hidden
  }

  .calendar-grid b {
    font-size: 10px
  }

  .documents-drop {
    border-radius: 22px
  }

  .documents-drop p {
    font-size: 12px;
    line-height: 1.45
  }

  .modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: flex-end !important;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
  }

  .modal.open {
    display: flex !important;
  }

  .modal .backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 26, 15, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transform: translate3d(0, 0, 0);
    contain: strict;
  }

  .modal .drawer-panel,
  .modal .dialog {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    align-self: flex-end !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 28px 28px 0 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: 14px 20px max(24px, env(safe-area-inset-bottom, 24px)) !important;
    background: #ffffff !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.14) !important;
    display: flex;
    flex-direction: column;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
  }

  .modal.open .drawer-panel,
  .modal.open .dialog {
    animation: apple-sheet-enter 340ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
    will-change: transform;
  }

  .chat-panel {
    height: min(85dvh, 640px) !important;
    overflow: hidden !important;
  }

  .chat-panel .messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .chat-panel .chat-form {
    flex-shrink: 0;
    margin-top: 10px;
  }

  .modal #manual-invoice {
    overflow: visible;
    max-height: none;
    padding-right: 0;
  }

  .modal .settings-dialog {
    max-height: min(92dvh, calc(100dvh - 24px)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .modal .settings-dialog .dialog-header {
    flex-shrink: 0;
    margin-bottom: 14px;
  }

  .modal .settings-dialog .settings-form {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 4px;
    padding-bottom: 8px;
  }

  .modal .settings-dialog .dialog-foot {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 12px 0 4px;
    border-top: 1px solid #eef2eb;
    z-index: 2;
  }
}

@keyframes apple-sheet-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Drag-down dei soli bottom sheet che espongono la maniglia. */
@media (max-width: 760px) {
  [data-sheet-drag-handle] {
    position: relative;
    width: 64px;
    height: 44px;
    margin: -14px auto 0;
    border-radius: 22px;
    background: transparent;
    cursor: grab;
    touch-action: none;
  }

  [data-sheet-drag-handle]::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 5px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: rgba(0, 0, 0, .18);
    content: "";
  }

  .modal.open .drawer-panel.has-sheet-dragged,
  .modal.open .dialog.has-sheet-dragged {
    animation: none !important;
  }

  .modal.open .drawer-panel.is-sheet-dragging,
  .modal.open .dialog.is-sheet-dragging {
    transform: translate3d(0, var(--sheet-drag-y, 0), 0) !important;
    transition: none !important;
    will-change: transform;
  }

  .modal.open .drawer-panel.is-sheet-snapping,
  .modal.open .dialog.is-sheet-snapping,
  .modal.open .drawer-panel.is-sheet-dismissing,
  .modal.open .dialog.is-sheet-dismissing {
    transform: translate3d(0, var(--sheet-drag-y, 0), 0) !important;
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1) !important;
    will-change: transform;
  }

  .modal.is-sheet-dragging .backdrop,
  .modal.is-sheet-snapping .backdrop,
  .modal.is-sheet-dismissing .backdrop {
    opacity: var(--sheet-backdrop-opacity, 1);
    transition: opacity 220ms ease;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .modal.open .drawer-panel.is-sheet-snapping,
  .modal.open .dialog.is-sheet-snapping,
  .modal.open .drawer-panel.is-sheet-dismissing,
  .modal.open .dialog.is-sheet-dismissing,
  .modal.is-sheet-snapping .backdrop,
  .modal.is-sheet-dismissing .backdrop {
    transition-duration: .01ms !important;
  }
}

@media(max-width:360px) {
  .tab-header h1 {
    font-size: 22px
  }

  .compact-primary {
    padding-inline: 8px !important
  }

  .forecast-breakdown span {
    font-size: 9.5px
  }

  .simulated-result {
    display: grid
  }

  .simulated-result p {
    text-align: left
  }

  .deadline-detail {
    grid-template-columns: auto minmax(0, 1fr)
  }

  .deadline-detail>strong {
    grid-column: 2;
    grid-row: 2;
    padding: 0
  }

  .deadline-actions {
    grid-column: 1/-1;
    justify-content: stretch
  }

  .deadline-actions button {
    flex: 1
  }

  .range-labels span:nth-child(2) {
    display: none
  }
}

@media(max-height:620px) and (max-width:760px) {
  .phone {
    min-height: 0
  }

  .mobile-content {
    padding-bottom: 104px
  }


}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes nav-icon-settle {
  0% {
    transform: scale(.78)
  }

  65% {
    transform: scale(1.12)
  }

  100% {
    transform: scale(1)
  }
}

@keyframes fab-action-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.86)
  }

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

@keyframes drawer-enter {
  from {
    opacity: 0;
    transform: translateX(34px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media (prefers-reduced-motion:no-preference) {
  .tab-page>* {
    animation: page-enter 380ms var(--ui-ease) both
  }

  .tab-page>*:nth-child(2) {
    animation-delay: 35ms
  }

  .tab-page>*:nth-child(3) {
    animation-delay: 70ms
  }

  .tab-page>*:nth-child(4) {
    animation-delay: 105ms
  }

  .tab-page>*:nth-child(5) {
    animation-delay: 140ms
  }

  .bar-chart i {
    animation: bar-grow 560ms var(--ui-ease) both
  }

  .bar-chart div:nth-child(2) i {
    animation-delay: 35ms
  }

  .bar-chart div:nth-child(3) i {
    animation-delay: 70ms
  }

  .bar-chart div:nth-child(4) i {
    animation-delay: 105ms
  }

  .bar-chart div:nth-child(5) i {
    animation-delay: 140ms
  }

  .bar-chart div:nth-child(6) i {
    animation-delay: 175ms
  }

  .bar-chart div:nth-child(7) i {
    animation-delay: 210ms
  }

  .bar-chart div:nth-child(8) i {
    animation-delay: 245ms
  }

  .bar-chart div:nth-child(9) i {
    animation-delay: 280ms
  }

  .bar-chart div:nth-child(10) i {
    animation-delay: 315ms
  }

  .bar-chart div:nth-child(11) i {
    animation-delay: 350ms
  }

  .bar-chart div:nth-child(12) i {
    animation-delay: 385ms
  }
}

@keyframes bar-grow {
  from {
    transform: scaleY(.05)
  }

  to {
    transform: scaleY(1)
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important
  }
}