myprojplanet_vite/src/components/pageris/pageris.scss

// ========================================
// CIRCUIT MANAGER - SCSS
// ========================================

// ========================================
// CSS Variables
// ========================================
:root {
  --cm-bg-primary: #f5f7fa;
  --cm-bg-card: #ffffff;
  --cm-bg-card-hover: #f8fafc;
  --cm-bg-dialog: #ffffff;

  --cm-border: rgba(0, 0, 0, 0.08);
  --cm-border-accent: rgba(102, 126, 234, 0.4);

  --cm-text-primary: #1e293b;
  --cm-text-secondary: #475569;
  --cm-text-muted: #64748b;
  --cm-text-hint: #94a3b8;

  --cm-accent: #667eea;
  --cm-accent-light: rgba(102, 126, 234, 0.1);
  --cm-positive: #10b981;
  --cm-negative: #ef4444;

  --cm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --cm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --cm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  --cm-nav-bg: rgba(255, 255, 255, 0.98);
}

.body--dark {
  --cm-bg-primary: #0f172a;
  --cm-bg-card: #1e293b;
  --cm-bg-card-hover: #334155;
  --cm-bg-dialog: #1e293b;

  --cm-border: rgba(255, 255, 255, 0.1);
  --cm-border-accent: rgba(102, 126, 234, 0.5);

  --cm-text-primary: #f8fafc;
  --cm-text-secondary: #e2e8f0;
  --cm-text-muted: #94a3b8;
  --cm-text-hint: #64748b;

  --cm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --cm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --cm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  --cm-nav-bg: rgba(15, 23, 42, 0.98);
}

// ========================================
// Variables
// ========================================
$gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$gradient-send: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
$gradient-receive: linear-gradient(135deg, #10b981 0%, #059669 100%);

$radius-sm: 8px;
$radius-md: 12px;
$radius-lg: 16px;
$radius-xl: 20px;

$space-xs: 4px;
$space-sm: 8px;
$space-md: 12px;
$space-lg: 16px;
$space-xl: 20px;
$space-xxl: 24px;

// ========================================
// Base
// ========================================
.circuit-manager-page {
  background: var(--cm-bg-primary);
  min-height: 100vh;
  padding: $space-md;
  max-width: 600px;
  margin: 0 auto;
}

// ========================================
// Header
// ========================================
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $space-md 0;
  margin-bottom: $space-lg;

  .header-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--cm-text-primary);
    margin: 0;
  }

  .header-btn {
    color: var(--cm-text-muted);
  }
}

// ========================================
// Tab Content
// ========================================
.tab-content {
  animation: fadeIn 0.3s ease-out;
}

.subtab-content {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

// ========================================
// Actions Section
// ========================================
.actions-section {
  margin-bottom: $space-sm;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: $space-md;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $space-sm;
  padding: $space-lg;
  min-height: 56px;
  border-radius: $radius-lg;
  font-size: 16px;
  font-weight: 700;
  text-transform: none;
  box-shadow: var(--cm-shadow-md);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--cm-shadow-lg);
  }

  &.send-btn {
    background: $gradient-send;
    color: white;
  }

  &.receive-btn {
    background: $gradient-receive;
    color: white;
  }
}

// ========================================
// Section Block
// ========================================
.section-block {
  margin-bottom: $space-xl;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: $space-xs;
  padding: $space-xs 0;

  &.collapsible {
    cursor: pointer;
    padding: $space-sm;
    margin: 0 (-$space-sm);
    border-radius: $radius-md;
    transition: background 0.2s ease;

    &:hover {
      background: var(--cm-accent-light);
    }
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: $space-sm;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cm-text-secondary);
  margin: 0;

  .section-icon {
    color: var(--cm-accent);
  }
}

.expand-icon {
  color: var(--cm-text-muted);
}

// ========================================
// Circuit Card - Main (Detailed)
// ========================================
.main-circuits-list {
  display: flex;
  flex-direction: column;
  gap: $space-md;
}

.circuit-card-main {
  display: flex;
  background: var(--cm-bg-card);
  border: 1px solid var(--cm-border);
  border-radius: $radius-lg;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--cm-shadow-sm);

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $space-sm;
    margin-bottom: $space-md;

    // Forza sempre 4 colonne, anche su schermi piccoli
    @media (max-width: 380px) {
      grid-template-columns: repeat(4, 1fr);
      gap: $space-xs;
    }
  }

  .stat-card {
    background: var(--cm-bg-primary);
    border: 1px solid var(--cm-border);
    border-radius: $radius-lg;
    padding: $space-md;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0; // Importante per evitare overflow

    .q-icon {
      font-size: 20px !important; // Riduci icona

      @media (max-width: 380px) {
        font-size: 16px !important;
      }
    }

    .stat-value {
      font-size: 20px;
      font-weight: 800;
      color: var(--cm-text-primary);
      line-height: 1.2;

      @media (max-width: 380px) {
        font-size: 14px;
      }
    }

    .stat-label {
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--cm-text-muted);
      white-space: nowrap;

      @media (max-width: 380px) {
        font-size: 12px;
      }
    }
  }

  &:hover {
    border-color: var(--cm-border-accent);
    box-shadow: var(--cm-shadow-md);
    transform: translateX(4px);
  }

  .card-accent {
    width: 4px;
    background: $gradient-primary;
    flex-shrink: 0;
  }

  .card-content {
    flex: 1;
    padding: $space-lg;
  }

  .card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $space-md;
  }

  .circuit-identity {
    display: flex;
    align-items: center;
    gap: $space-sm;

    .circuit-icon {
      color: var(--cm-accent);
    }

    .circuit-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--cm-text-primary);
    }
  }

  .circuit-type-badge {
    font-size: 10px;
    padding: 4px 8px;
  }

  .card-stats-row {
    display: flex;
    gap: $space-lg;
    margin-bottom: $space-md;
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .stat-label {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--cm-text-hint);
    }

    .stat-value {
      font-size: 18px;
      font-weight: 700;
      color: var(--cm-text-primary);

      small {
        font-size: 12px;
        font-weight: 400;
        color: var(--cm-text-muted);
      }
    }

    &.saldo .stat-value {
      color: var(--cm-accent);
      font-size: 22px;
    }

    &.fido .stat-value {
      color: var(--cm-negative);
    }

    &.max .stat-value {
      color: var(--cm-positive);
    }
  }

  .card-last-transaction {
    display: flex;
    align-items: center;
    gap: $space-sm;
    padding: $space-sm $space-md;
    background: var(--cm-bg-primary);
    border-radius: $radius-sm;
    font-size: 12px;
    color: var(--cm-text-muted);
  }

  &.with-bar {
    .balance-bar-container {
      margin-top: $space-md;
      padding-top: $space-md;
      border-top: 1px solid var(--cm-border);
    }
  }
}

.balance-bar-container {
  .balance-bar {
    height: 8px;
    background: linear-gradient(to right,
        rgba(239, 68, 68, 0.3) 0%,
        rgba(239, 68, 68, 0.1) 30%,
        rgba(16, 185, 129, 0.1) 70%,
        rgba(16, 185, 129, 0.3) 100%);
    border-radius: 4px;
    position: relative;
    margin-bottom: $space-xs;
  }

  .balance-indicator {
    position: absolute;
    top: -4px;
    width: 16px;
    height: 16px;
    background: var(--cm-accent);
    border: 3px solid var(--cm-bg-card);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
  }

  .balance-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--cm-text-hint);

    .label-fido {
      color: var(--cm-negative);
    }

    .label-zero {
      color: var(--cm-text-muted);
    }

    .label-max {
      color: var(--cm-positive);
    }
  }
}

// ========================================
// Circuit Card - Compact
// ========================================
.other-circuits-list {
  display: flex;
  flex-direction: column;
  gap: $space-sm;
}

.circuit-card-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cm-bg-card);
  border: 1px solid var(--cm-border);
  border-radius: $radius-md;
  padding: $space-md $space-lg;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: var(--cm-bg-card-hover);
    border-color: var(--cm-border-accent);
    transform: translateX(4px);
  }

  .compact-left {
    display: flex;
    align-items: center;
    gap: $space-md;
  }

  .circuit-icon-sm {
    color: var(--cm-accent);
  }

  .compact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .compact-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--cm-text-primary);
    }

    .compact-balance {
      font-size: 16px;
      font-weight: 700;
      color: var(--cm-accent);

      small {
        font-size: 11px;
        font-weight: 400;
        color: var(--cm-text-muted);
      }
    }
  }

  .compact-right {
    display: flex;
    align-items: center;
    gap: $space-md;

    .compact-range {
      font-size: 12px;
      color: var(--cm-text-muted);
    }

    .chevron {
      color: var(--cm-text-hint);
    }
  }
}

// ========================================
// Transactions Feed
// ========================================
.transactions-feed {
  .date-group {
    margin-bottom: $space-lg;
  }

  .date-divider {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cm-text-hint);
    padding: $space-sm 0;
    margin-bottom: $space-sm;
  }
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: $space-md;
  background: var(--cm-bg-card);
  border: 1px solid var(--cm-border);
  border-radius: $radius-md;
  padding: $space-md;
  margin-bottom: $space-sm;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: var(--cm-bg-card-hover);
    transform: translateX(4px);
  }

  .tx-icon {
    flex-shrink: 0;
  }

  .tx-content {
    flex: 1;
    min-width: 0;

    .tx-title {
      font-size: 14px;
      color: var(--cm-text-primary);
      margin-bottom: 2px;

      strong {
        font-weight: 600;
      }
    }

    .tx-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--cm-text-hint);

      .dot {
        opacity: 0.5;
      }
    }

    .tx-causal {
      font-size: 12px;
      color: var(--cm-text-muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .tx-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;

    .amount {
      font-size: 16px;
      font-weight: 700;
    }

    .currency {
      font-size: 10px;
      color: var(--cm-text-hint);
    }

    &.sent .amount {
      color: var(--cm-negative);
    }

    &.received .amount {
      color: var(--cm-positive);
    }
  }
}

// ========================================
// Circuits Toggle
// ========================================
.circuits-toggle-container {
  display: flex;
  justify-content: center;
  margin-bottom: $space-sm;
}

.circuits-toggle {
  background: var(--cm-bg-card);
  border: 1px solid var(--cm-border);
  border-radius: $radius-lg;
  padding: 4px;
  box-shadow: var(--cm-shadow-sm);
}

// ========================================
// Search Container
// ========================================
.search-container {
  margin-bottom: $space-lg;

  .search-input {
    background: var(--cm-bg-card);
    border-radius: $radius-md;
  }
}

// ========================================
// Explore Circuits
// ========================================
.explore-circuits-list {
  display: flex;
  flex-direction: column;
  gap: $space-sm;
}

.circuit-card-explore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cm-bg-card);
  border: 1px solid var(--cm-border);
  border-radius: $radius-md;
  padding: $space-md $space-lg;
  transition: all 0.2s ease;

  &:hover {
    background: var(--cm-bg-card-hover);
  }

  .explore-left {
    display: flex;
    align-items: center;
    gap: $space-md;
  }

  .circuit-icon-explore {
    color: var(--cm-accent);
  }

  .explore-info {
    display: flex;
    flex-direction: column;
    gap: 2px;

    .explore-name-row {
      display: flex;
      align-items: center;
      gap: $space-sm;
    }

    .explore-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--cm-text-primary);
    }

    .explore-meta {
      font-size: 12px;
      color: var(--cm-text-muted);
    }
  }

  .explore-right {
    .request-btn {
      text-transform: none;
      font-weight: 600;
    }

    .status-btn {
      text-transform: none;
    }
  }
}

// ========================================
// Settings
// ========================================
.settings-card {
  background: var(--cm-bg-card);
  border: 1px solid var(--cm-border);
  border-radius: $radius-xl;
  padding: $space-xl;
  box-shadow: var(--cm-shadow-sm);

  .settings-title {
    display: flex;
    align-items: center;
    gap: $space-sm;
    margin: 0 0 $space-xl 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--cm-text-primary);

    .q-icon {
      color: var(--cm-accent);
    }
  }
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: $space-sm;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--cm-bg-primary);
  border: 1px solid var(--cm-border);
  border-radius: $radius-md;
  padding: $space-md $space-lg;
  transition: all 0.2s ease;

  &.clickable {
    cursor: pointer;

    &:hover {
      background: var(--cm-bg-card-hover);
    }
  }

  .settings-item-left {
    display: flex;
    align-items: center;
    gap: $space-md;

    .q-icon {
      color: var(--cm-text-muted);
    }

    span {
      font-size: 15px;
      font-weight: 500;
      color: var(--cm-text-primary);
    }
  }
}

// ========================================
// Bottom Navigation
// ========================================
// ========================================
// Top Navigation (era Bottom Navigation)
// ========================================
.bottom-nav {
  top: 0; // Cambiato da bottom: 0
  left: 0;
  right: 0;
  background: var(--cm-nav-bg);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--cm-border); // Cambiato da border-top
  padding: $space-md $space-sm;
  padding-top: calc(#{$space-sm} + env(safe-area-inset-top)); // Cambiato da padding-bottom
  z-index: 1000;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); // Cambiato direzione ombra
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: $space-xs;
  max-width: 400px;
  margin: 0 auto;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: $space-sm;
  border-radius: $radius-md;
  min-height: 56px;
  min-width: 0; // Importante per evitare che si espanda

  // Forza il contenuto interno in colonna
  :deep(.q-btn__content) {
    flex-direction: column !important;
    gap: 2px;
  }

  .q-icon {
    color: var(--cm-text-muted);
  }

  span {
    font-size: 11px;
    font-weight: 600;
    color: var(--cm-text-muted);
    line-height: 1;
  }

  &.active {
    background-color: rgba(102, 126, 234, 0.4) !important;

    .q-icon,
    span {
      color: var(--cm-accent);
    }
  }
}

// ========================================
// Empty States
// ========================================
.empty-state {
  text-align: center;
  padding: 48px 20px;

  .q-icon {
    opacity: 0.4;
    color: var(--cm-text-muted);
  }

  p {
    margin: $space-md 0;
    font-size: 15px;
    color: var(--cm-text-muted);
  }
}

.empty-state-small {
  text-align: center;
  padding: 32px 20px;

  .q-icon {
    opacity: 0.4;
    color: var(--cm-text-muted);
  }

  p {
    margin: $space-md 0;
    font-size: 14px;
    color: var(--cm-text-muted);
  }
}

.loading-spinner {
  display: flex;
  justify-content: center;
  padding: $space-xl;
}

// ========================================
// Circuit Stats Dialog
// ========================================
.circuit-stats-dialog {
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  border-radius: $radius-xl;
  overflow: hidden;

  @media (max-width: 599px) {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .stats-dialog-header {
    background: $gradient-primary;
    padding: $space-md;
    padding-top: calc(#{$space-md} + env(safe-area-inset-top));
    color: white;
    position: relative;

    .close-btn {
      position: absolute;
      top: $space-md;
      right: $space-md;
      margin-top: env(safe-area-inset-top);
    }

    .stats-header-content {
      padding-right: 40px;
    }

    .stats-circuit-info {
      display: flex;
      align-items: center;
      gap: $space-sm;
      margin-bottom: $space-sm;

      .stats-circuit-name {
        font-size: 18px;
        font-weight: 600;
        opacity: 0.95;
      }
    }

    .stats-balance-large {
      font-size: 40px;
      font-weight: 800;
      letter-spacing: -1px;

      .currency {
        font-size: 18px;
        font-weight: 400;
        opacity: 0.8;
        margin-left: 4px;
      }
    }
  }

  .stats-dialog-content {
    padding: $space-md;
    overflow-y: auto;
  }

  .stats-balance-bar {
    margin-bottom: $space-lg;
  }

  .stats-limits-section {
    margin-bottom: $space-lg;

    h4 {
      margin: 0 0 $space-md 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--cm-text-secondary);
    }
  }

  .limits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $space-md;
  }

  .limit-card {
    display: flex;
    align-items: center;
    gap: $space-md;
    background: var(--cm-bg-primary);
    border: 1px solid var(--cm-border);
    border-radius: $radius-lg;
    padding: $space-sm;

    .limit-info {
      display: flex;
      flex-direction: column;
      gap: 2px;

      .limit-label {
        font-size: 11px;
        color: var(--cm-text-muted);
      }

      .limit-value {
        font-size: 15px;
        font-weight: 700;
      }
    }

    &.fido {

      .q-icon,
      .limit-value {
        color: var(--cm-negative);
      }
    }

    &.max {

      .q-icon,
      .limit-value {
        color: var(--cm-positive);
      }
    }
  }

  .stats-actions {
    display: flex;
    flex-direction: column;
    gap: $space-sm;
  }

  .stats-action-btn {
    width: 100%;
    padding: $space-md;
    border-radius: $radius-lg;
    font-weight: 600;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: $space-sm;

    &.primary {
      background: $gradient-primary;
      color: white;
    }
  }
}

// ========================================
// Send/Receive/Confirm Dialogs
// ========================================
.send-dialog,
.confirm-dialog {
  max-width: 500px;
  width: 100%;
  border-radius: $radius-xl;
  overflow: hidden;

  @media (max-width: 599px) {
    max-width: 100%;
    border-radius: 0;
  }
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $space-lg $space-xl;
  color: white;

  &.send {
    background: $gradient-send;
  }

  &.receive {
    background: $gradient-receive;
  }

  .dialog-title {
    display: flex;
    align-items: center;
    gap: $space-sm;
    font-size: 18px;
    font-weight: 700;
  }
}

.dialog-content {
  padding: $space-xl;
}

.dialog-actions {
  padding: $space-md $space-xl $space-xl;
}

.info-banner {
  display: flex;
  gap: $space-md;
  align-items: flex-start;
  padding: $space-md;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: $radius-md;
  margin-bottom: $space-lg;

  p {
    margin: 0;
    font-size: 13px;
    color: #2563eb;
  }
}

// Contacts
.contacts-section {
  margin-bottom: $space-lg;

  .contacts-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cm-text-hint);
    margin-bottom: $space-md;
  }
}

.contacts-scrollable {
  max-height: 300px;
  overflow-y: auto;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: $space-md;
  padding: $space-md;
  background: var(--cm-bg-primary);
  border: 1px solid var(--cm-border);
  border-radius: $radius-lg;
  margin-bottom: $space-sm;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: var(--cm-bg-card-hover);
    border-color: var(--cm-border-accent);
  }

  &.recent {
    background: var(--cm-accent-light);
    border-color: rgba(102, 126, 234, 0.2);
  }

  .contact-info {
    flex: 1;
    min-width: 0;

    .contact-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--cm-text-primary);
      margin-bottom: 2px;
    }

    .contact-username {
      font-size: 13px;
      color: var(--cm-text-muted);
    }
  }
}

.no-results {
  text-align: center;
  padding: 40px 20px;

  .q-icon {
    opacity: 0.4;
    color: var(--cm-text-muted);
  }

  p {
    margin-top: $space-md;
    color: var(--cm-text-muted);
  }
}

// Confirm Dialog specifics
.confirm-details {
  background: var(--cm-bg-primary);
  border-radius: $radius-lg;
  padding: $space-lg;
  margin-bottom: $space-lg;

  .confirm-row {
    display: flex;
    justify-content: space-between;
    padding: $space-sm 0;
    border-bottom: 1px solid var(--cm-border);

    &:last-child {
      border-bottom: none;
    }

    .confirm-label {
      color: var(--cm-text-muted);
      font-size: 14px;
    }

    .confirm-value {
      font-weight: 600;
      color: var(--cm-text-primary);
    }
  }
}

.amount-input,
.description-input {
  margin-bottom: $space-md;
}

.input-currency {
  font-weight: 600;
  color: var(--cm-text-muted);
}

.receive-note {
  display: flex;
  align-items: center;
  gap: $space-sm;
  padding: $space-md;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: $radius-md;
  font-size: 12px;
  color: var(--cm-text-secondary);

  .q-icon {
    color: #d97706;
    flex-shrink: 0;
  }
}

// ========================================
// FIX DIALOGS TRASPARENTI - LIGHT MODE
// ========================================
.q-dialog__inner>.circuit-stats-dialog {
  background: #ffffff !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);

  .stats-dialog-content {
    background: #ffffff !important;
  }

  .stat-card,
  .limit-card {
    background: #f5f7fa !important;
  }
}

// ========================================
// FIX DIALOGS TRASPARENTI - DARK MODE
// ========================================
.body--dark {
  .q-dialog__inner>.circuit-stats-dialog {
    background: #1e293b !important;

    .stats-dialog-content {
      background: #1e293b !important;
    }

    .stat-card,
    .limit-card {
      background: #0f172a !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .stat-value {
      color: #f8fafc !important;
    }

    .stat-label,
    .limit-label {
      color: #94a3b8 !important;
    }

    .stats-limits-section h4 {
      color: #e2e8f0 !important;
    }
  }

  .q-dialog__inner>.send-dialog,
  .q-dialog__inner>.confirm-dialog {
    background: #1e293b !important;

    .q-card__section {
      background: #1e293b !important;
    }

    .dialog-content {
      background: #1e293b !important;
    }

    .dialog-actions {
      background: #1e293b !important;
    }

    // Testi visibili dark
    .contacts-title {
      color: #94a3b8 !important;
    }

    .contact-item {
      background: #0f172a !important;
      border-color: rgba(255, 255, 255, 0.1) !important;

      .contact-name {
        color: #f8fafc !important;
      }

      .contact-username {
        color: #94a3b8 !important;
      }

      &.recent {
        background: rgba(102, 126, 234, 0.2) !important;
      }
    }

    .no-results {
      p {
        color: #94a3b8 !important;
      }
    }

    .confirm-details {
      background: #0f172a !important;
      border-color: rgba(255, 255, 255, 0.1) !important;

      .confirm-label {
        color: #94a3b8 !important;
      }

      .confirm-value {
        color: #f8fafc !important;
      }

      .confirm-row {
        border-color: rgba(255, 255, 255, 0.1) !important;
      }
    }

    .info-banner {
      background: rgba(59, 130, 246, 0.2) !important;
      border-color: rgba(59, 130, 246, 0.3) !important;

      p {
        color: #93c5fd !important;
      }
    }

    .receive-note {
      background: rgba(251, 191, 36, 0.15) !important;
      border-color: rgba(251, 191, 36, 0.25) !important;
      color: #fcd34d !important;

      .q-icon {
        color: #fbbf24 !important;
      }
    }
  }
}

// Box causale
.causale-box {
  border-radius: 8px;
  font-style: italic;
  color: darkblue;
  font-size: 0.9rem;
  line-height: 1.3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.causale-icon {
  position: absolute;
  left: 10px;
  top: 12px;
  color: #ff9800;
}

.causale-text {
  font-weight: normal;
}

// ========================================
// Transaction Detail Dialog
// ========================================
.transaction-detail-dialog {
  width: 100%;
  max-width: 480px;
  border-radius: $radius-xl;
  overflow: hidden;

  @media (max-width: 599px) {
    max-width: 100%;
    height: 100%;
    border-radius: 0;
  }
}

.detail-dialog-header {
  background: $gradient-primary;
  padding: $space-xl;
  padding-top: calc(#{$space-xl} + env(safe-area-inset-top));
  color: white;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .header-content {
    display: flex;
    align-items: center;
    gap: $space-lg;
  }

  .header-info {
    display: flex;
    flex-direction: column;
    gap: $space-xs;
  }

  .header-type {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
  }

  .header-amount {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;

    &.sent {
      color: #fecaca;
    }

    &.received {
      color: #bbf7d0;
    }

    small {
      font-size: 16px;
      font-weight: 400;
      opacity: 0.8;
      margin-left: 4px;
    }
  }

  .close-btn {
    position: absolute;
    top: $space-md;
    right: $space-md;
    margin-top: env(safe-area-inset-top);
  }
}

.detail-dialog-content {
  padding: $space-xl;
  background: var(--cm-bg-card);

  @media (max-width: 599px) {
    padding: $space-lg;
  }
}

.detail-row {
  display: flex;
  align-items: center;
  gap: $space-lg;

  &.user-row {
    padding: $space-md 0;
  }

  .detail-icon {
    flex-shrink: 0;
  }

  .detail-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .detail-label {
    font-size: 12px;
    color: var(--cm-text-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .detail-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--cm-text-primary);
  }

  .detail-username {
    font-size: 13px;
    color: var(--cm-text-muted);
  }
}

.detail-divider {
  height: 1px;
  background: var(--cm-border);
  margin: $space-lg 0;
}

.detail-grid {
  display: flex;
  flex-direction: column;
  gap: $space-md;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: $space-md;
  padding: $space-sm 0;

  .detail-item-icon {
    color: var(--cm-text-muted);
    margin-top: 2px;

    &.success {
      color: var(--cm-positive);
    }
  }

  .detail-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }

  .detail-item-label {
    font-size: 11px;
    color: var(--cm-text-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .detail-item-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--cm-text-primary);
    display: flex;
    align-items: center;
    gap: $space-sm;
    flex-wrap: wrap;

    &.mono {
      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
      font-size: 13px;
    }

    .circuit-badge {
      font-size: 9px;
      padding: 2px 6px;
    }
  }
}

.detail-causal {
  margin-top: $space-lg;
  padding: $space-md;
  background: var(--cm-bg-primary);
  border: 1px solid var(--cm-border);
  border-radius: $radius-md;

  .causal-header {
    display: flex;
    align-items: center;
    gap: $space-sm;
    font-size: 12px;
    font-weight: 600;
    color: var(--cm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: $space-sm;

    .q-icon {
      color: var(--cm-accent);
    }
  }

  .causal-text {
    margin: 0;
    font-size: 14px;
    color: var(--cm-text-primary);
    line-height: 1.5;
  }
}

.original-component {
  margin-top: $space-lg;
  padding-top: $space-lg;
  border-top: 1px solid var(--cm-border);

  // Nascondi se non vuoi mostrare il componente originale
  // display: none;
}

.detail-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: $space-sm;
  padding: $space-lg $space-xl;
  padding-bottom: calc(#{$space-xl} + env(safe-area-inset-bottom));
  background: var(--cm-bg-card);
  border-top: 1px solid var(--cm-border);

  .action-btn {
    width: 100%;
    padding: $space-md;
    border-radius: $radius-md;
    font-weight: 600;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: $space-sm;

    &:not(.secondary) {
      border-color: var(--cm-accent);
      color: var(--cm-accent);
    }

    &.secondary {
      color: var(--cm-text-muted);
    }
  }
}

// ========================================
// Fix Dialog Trasparente - Transaction Detail
// ========================================
.q-dialog__inner>.transaction-detail-dialog {
  background: #ffffff !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);

  .detail-dialog-content,
  .detail-dialog-actions {
    background: #ffffff !important;
  }

  .detail-causal {
    background: #f5f7fa !important;
  }
}

.body--dark {
  .q-dialog__inner>.transaction-detail-dialog {
    background: #1e293b !important;

    .detail-dialog-content,
    .detail-dialog-actions {
      background: #1e293b !important;
    }

    .detail-causal {
      background: #0f172a !important;
      border-color: rgba(255, 255, 255, 0.1) !important;

      .causal-text {
        color: #f8fafc !important;
      }
    }

    .detail-label,
    .detail-item-label {
      color: #64748b !important;
    }

    .detail-value,
    .detail-item-value {
      color: #f8fafc !important;
    }

    .detail-username {
      color: #94a3b8 !important;
    }

    .detail-divider {
      background: rgba(255, 255, 255, 0.1) !important;
    }

    .detail-dialog-actions {
      border-color: rgba(255, 255, 255, 0.1) !important;
    }
  }
}

// ========================================
// Guide Tab
// ========================================
.guide-card {
  background: var(--cm-bg-card);
  border: 1px solid var(--cm-border);
  border-radius: $radius-xl;
  padding: $space-xl;
  box-shadow: var(--cm-shadow-sm);
}

.guide-header {
  text-align: center;
  margin-bottom: $space-xl;

  .guide-header-icon {
    color: var(--cm-accent);
    margin-bottom: $space-md;
  }

  .guide-title {
    margin: 0 0 $space-xs 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--cm-text-primary);
  }

  .guide-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--cm-text-muted);
  }
}

.guide-buttons {
  display: flex;
  flex-direction: column;
  gap: $space-md;
  margin-bottom: $space-xl;
}

.guide-btn {
  width: 100%;
  padding: $space-lg;
  border-radius: $radius-lg;
  text-transform: none;
  justify-content: space-between;
  min-height: 80px;

  &.primary {
    background: $gradient-primary;
    color: white;

    .guide-btn-icon {
      background: rgba(255, 255, 255, 0.2);
    }

    .guide-btn-desc {
      color: rgba(255, 255, 255, 0.8);
    }

    .guide-btn-arrow {
      color: rgba(255, 255, 255, 0.7);
    }
  }

  &.secondary {
    background: var(--cm-bg-primary);
    border: 1px solid var(--cm-border);
    color: var(--cm-text-primary);

    .guide-btn-icon {
      background: var(--cm-accent-light);
      color: var(--cm-accent);
    }

    .guide-btn-desc {
      color: var(--cm-text-muted);
    }

    .guide-btn-arrow {
      color: var(--cm-text-hint);
    }

    &:hover {
      border-color: var(--cm-border-accent);
      background: var(--cm-bg-card-hover);
    }
  }

  .guide-btn-content {
    display: flex;
    align-items: center;
    gap: $space-md;
    text-align: left;
  }

  .guide-btn-icon {
    width: 48px;
    height: 48px;
    border-radius: $radius-md;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .guide-btn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .guide-btn-title {
    font-size: 16px;
    font-weight: 600;
  }

  .guide-btn-desc {
    font-size: 12px;
    font-weight: 400;
  }

  .guide-btn-arrow {
    flex-shrink: 0;
  }
}

.guide-links {
  display: flex;
  justify-content: center;
  gap: $space-sm;
  padding-top: $space-lg;
  border-top: 1px solid var(--cm-border);

  .guide-link {
    display: flex;
    align-items: center;
    gap: $space-xs;
    padding: $space-sm $space-md;
    border-radius: $radius-md;
    font-size: 13px;
    font-weight: 500;
    color: var(--cm-text-muted);
    text-transform: none;

    &:hover {
      background: var(--cm-accent-light);
      color: var(--cm-accent);
    }

    .q-icon {
      font-size: 18px;
    }
  }
}

// ========================================
// Fix Light/Dark Mode per Guide
// ========================================
.q-dialog__inner>.guide-card,
.guide-card {
  background: #ffffff;
}

.body--dark {
  .guide-card {
    background: #1e293b;

    .guide-title {
      color: #f8fafc;
    }

    .guide-subtitle {
      color: #94a3b8;
    }
  }

  .guide-btn.secondary {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;

    .guide-btn-icon {
      background: rgba(102, 126, 234, 0.2);
    }

    .guide-btn-desc {
      color: #94a3b8;
    }

    &:hover {
      background: #1e293b;
      border-color: rgba(102, 126, 234, 0.4);
    }
  }

  .guide-links {
    border-color: rgba(255, 255, 255, 0.1);

    .guide-link {
      color: #94a3b8;

      &:hover {
        background: rgba(102, 126, 234, 0.2);
        color: #a78bfa;
      }
    }
  }
}

.balance-bar-container {
  margin-top: $space-md;
  padding: $space-sm;
  background: rgba(0, 0, 0, 0.03);
  border-radius: $radius-md;

  .balance-bar {
    height: 8px;
    background: linear-gradient(
      to right,
      rgba(239, 68, 68, 0.4) 0%,
      rgba(239, 68, 68, 0.2) 30%,
      rgba(16, 185, 129, 0.2) 70%,
      rgba(16, 185, 129, 0.4) 100%
    );
    border-radius: 4px;
    position: relative;
    margin-bottom: $space-sm;
  }

  // Linea verticale per lo zero
  .zero-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--cm-text-muted);
    transform: translateX(-50%);
    border-radius: 1px;
    opacity: 0.6;
  }

  // Indicatore del saldo corrente
  .balance-indicator {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: var(--cm-accent);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    transition: left 0.3s ease;
    z-index: 1;
  }

  .balance-bar-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    position: relative;
    padding: 0 2px;

    .label-fido {
      color: var(--cm-negative);
    }

    .label-zero {
      position: absolute;
      transform: translateX(-50%);
      color: var(--cm-text-muted);
      font-size: 9px;
    }

    .label-max {
      color: var(--cm-positive);
    }
  }
}

// Dark mode
.body--dark {
  .balance-bar-container {
    background: rgba(255, 255, 255, 0.05);

    .balance-indicator {
      border-color: var(--cm-bg-card);
    }

    .zero-marker {
      background: var(--cm-text-hint);
    }
  }
}

// ============================================
// RECEIVE DIALOG
// ============================================
.receive-dialog {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &.mobile-fullheight {
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
}

// Header
.receive-gradient {
  background: linear-gradient(135deg, #2e7d32 0%, #4caf50 50%, #66bb6a 100%);
  padding-bottom: 0;
}

.header-gradient {
  padding: 16px 16px 0;

  .header-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .header-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .receive-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .header-title {
    font-size: 20px;
    font-weight: 600;
    color: white;
  }

  .close-btn {
    background: rgba(255, 255, 255, 0.15);

    &:hover {
      background: rgba(255, 255, 255, 0.25);
    }
  }
}

// Tabs
.receive-tabs {
  margin: 0 -16px;

  .receive-tabs-inner {
    :deep(.q-tab) {
      color: rgba(255, 255, 255, 0.7);
      text-transform: none;
      font-weight: 500;

      &.q-tab--active {
        color: white;
      }
    }

    :deep(.q-tab__indicator) {
      height: 3px;
      border-radius: 3px 3px 0 0;
    }
  }
}

// Content
.dialog-content.scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.receive-panels {
  background: transparent;
  min-height: 400px;

  :deep(.q-panel) {
    overflow: visible;
  }
}

// Info Banner
.info-banner {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border-radius: 12px;
  border-left: 4px solid #2196f3;
}

// Link Panel
.link-panel {
  .panel-description {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    background: #fff8e1;
    border-radius: 12px;
    font-size: 14px;
    color: #5d4037;
    line-height: 1.5;
  }

  .request-form {
    margin-top: 16px;
  }

  .amount-section {
    .amount-label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: #666;
      margin-bottom: 8px;
    }
  }

  .amount-input-wrapper {
    .amount-input {
      max-width: 200px;

      .currency-symbol {
        font-size: 18px;
        font-weight: 600;
        color: #333;
      }

      .coin-badge {
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        color: white;
      }
    }
  }

  .generated-link-section {
    .section-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }

    .link-preview {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 16px;
      background: #f5f5f5;
      border-radius: 12px;
      border: 1px solid #e0e0e0;

      .link-text {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        font-size: 13px;
        color: #666;

        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .copy-btn {
        flex-shrink: 0;
      }
    }

    .share-buttons {
      display: flex;
      gap: 12px;

      .share-btn,
      .whatsapp-btn {
        flex: 1;
        border-radius: 10px;
        text-transform: none;
        font-weight: 500;
      }
    }
  }
}

// QR Code Panel
.qrcode-panel {
  display: flex;
  flex-direction: column;
  align-items: center;

  .qr-description {
    max-width: 280px;
  }

  .qr-code-wrapper {
    display: flex;
    justify-content: center;
  }

  .quick-amounts {
    width: 100%;

    .section-label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: #666;
      margin-bottom: 12px;
    }

    .amount-chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;

      .q-chip {
        font-weight: 500;
      }
    }
  }
}

// Vetrina Panel
.showonlist-panel {
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
  }
}

// ============================================
// RESPONSIVE
// ============================================
@media (max-width: 599px) {
  .receive-dialog {
    .link-panel {
      .share-buttons {
        flex-direction: column;

        .share-btn,
        .whatsapp-btn {
          width: 100%;
        }
      }
    }
  }
}