/* ═══ STUDIOHAUS PORTAL — Finance Styles ═══ */

    /* ─── FINANCE SECTION ─── */
    .finance-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-bottom: 24px;
    }

    .finance-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      padding: 20px 24px;
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
      gap: 10px;
      position: relative;
      overflow: hidden;
      transition: border-color 0.2s;
    }

    .finance-card:hover {
      border-color: var(--border-hover);
    }

    .finance-card .stat-value {
      font-size: 26px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.5px;
    }

    .finance-card .stat-label {
      font-size: 11px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-40);
    }

    .finance-card .card-indicator {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 500;
    }

    .finance-card .card-indicator.positive { color: #22c55e; }
    .finance-card .card-indicator.negative { color: #ef4444; }
    .finance-card .card-indicator.neutral { color: var(--text-40); }

    .finance-card-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(34, 197, 94, 0.08);
      border: 1px solid rgba(34, 197, 94, 0.15);
    }

    .finance-card-icon svg {
      width: 16px;
      height: 16px;
      stroke: #22c55e;
      fill: none;
      stroke-width: 2;
    }

    .quote-status-badge, .invoice-status-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      width: fit-content;
    }

    .quote-status-badge.draft, .invoice-status-badge.draft {
      background: rgba(156, 163, 175, 0.1);
      color: #9ca3af;
    }

    .quote-status-badge.pending-custom {
      background: rgba(251, 191, 36, 0.1);
      color: #fbbf24;
    }

    .quote-status-badge.sent, .invoice-status-badge.sent {
      background: rgba(59, 130, 246, 0.1);
      color: #3b82f6;
      box-shadow: 0 0 8px rgba(59, 130, 246, 0.12);
    }

    .quote-status-badge.approved, .invoice-status-badge.paid {
      background: rgba(34, 197, 94, 0.1);
      color: #22c55e;
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.12);
      animation: badgePulse 3s ease-in-out infinite;
    }
    @keyframes badgePulse {
      0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.12); }
      50% { box-shadow: 0 0 14px rgba(34, 197, 94, 0.25); }
    }

    .quote-status-badge.declined {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
    }

    .quote-status-badge.invoiced {
      background: rgba(107, 114, 128, 0.1);
      color: #6b7280;
    }

    .invoice-status-badge.overdue {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
      animation: overduePulse 2s ease-in-out infinite;
    }
    @keyframes overduePulse {
      0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.1); }
      50% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.3); }
    }

    .invoice-status-badge.void {
      background: rgba(107, 114, 128, 0.1);
      color: #6b7280;
    }

    .finance-chart {
      background: var(--bg-card);
      border: 1px solid var(--border);
      padding: 28px;
      border-radius: var(--radius);
      margin-bottom: 24px;
    }

    .finance-chart-title {
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
      color: var(--text-40);
    }

    .finance-chart-value {
      font-size: 28px;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.5px;
      margin-bottom: 20px;
    }

    .finance-chart-legend {
      display: flex;
      gap: 20px;
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .finance-chart-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text-40);
    }

    .finance-chart-legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 2px;
      display: inline-block;
    }

    .finance-detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 24px;
    }

    .finance-detail-panel {
      background: var(--bg-card);
      border: 1px solid var(--border);
      padding: 24px;
      border-radius: var(--radius);
    }

    .finance-detail-panel-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 20px;
    }

    .finance-metric-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
    }

    .finance-metric {
      padding: 14px;
      background: var(--bg);
      border-radius: var(--radius-sm);
    }

    .finance-metric-label {
      font-size: 10px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-40);
      margin-bottom: 6px;
    }

    .finance-metric-value {
      font-size: 1.3rem;
      font-weight: 600;
    }

    .finance-donut-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

    .finance-donut-label {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 600;
      color: var(--text);
    }

    .finance-donut-stats {
      display: flex;
      gap: 20px;
      margin-top: 16px;
      font-size: 12px;
    }

    .finance-donut-stat {
      text-align: center;
    }

    .finance-donut-stat-value {
      font-weight: 600;
      color: var(--text);
      font-size: 16px;
    }

    .finance-donut-stat-label {
      color: var(--text-40);
      margin-top: 2px;
    }

    .pending-custom-banner {
      background: rgba(251, 191, 36, 0.1);
      border: 1px solid rgba(251, 191, 36, 0.3);
      border-radius: var(--radius);
      padding: 16px 20px;
      margin-bottom: 24px;
      color: #fbbf24;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pending-custom-banner svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }


    /* ─── FINANCE ANIMATIONS ─── */
    @keyframes financeFadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes financeFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes chartLineDraw {
      from { stroke-dashoffset: 2000; }
      to { stroke-dashoffset: 0; }
    }

    @keyframes chartAreaReveal {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes pulseGlow {
      0%, 100% { filter: drop-shadow(0 0 4px rgba(34,197,94,0.3)); }
      50% { filter: drop-shadow(0 0 10px rgba(34,197,94,0.6)); }
    }

    @keyframes donutFill {
      from { stroke-dashoffset: 251.33; }
    }

    @keyframes countUp {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    @keyframes barGrow {
      from { transform: scaleY(0); }
      to { transform: scaleY(1); }
    }
    @keyframes barFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .fin-animate .finance-card {
      opacity: 0;
      animation: financeFadeUp 0.35s ease forwards;
    }
    .fin-animate .finance-card:nth-child(1) { animation-delay: 0s; }
    .fin-animate .finance-card:nth-child(2) { animation-delay: 0.05s; }
    .fin-animate .finance-card:nth-child(3) { animation-delay: 0.1s; }

    .fin-animate .finance-detail-grid {
      opacity: 0;
      animation: financeFadeUp 0.35s ease forwards;
    }
    .fin-animate .finance-detail-grid:nth-of-type(2) { animation-delay: 0.08s; }
    .fin-animate .finance-detail-grid:nth-of-type(3) { animation-delay: 0.12s; }
    .fin-animate .finance-detail-grid:nth-of-type(4) { animation-delay: 0.16s; }
    .fin-animate .finance-detail-grid:nth-of-type(5) { animation-delay: 0.2s; }

    /* Default hidden states to prevent flash before fin-animate is added */
    .chart-line-anim { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
    .chart-area-anim { opacity: 0; }
    .chart-dot-anim { opacity: 0; }
    .chart-tooltip-anim { opacity: 0; }

    .fin-animate .chart-line-anim {
      stroke-dasharray: 2000;
      stroke-dashoffset: 2000;
      animation: chartLineDraw 1s ease-out forwards;
      animation-delay: 0.2s;
    }

    .fin-animate .chart-area-anim {
      opacity: 0;
      animation: chartAreaReveal 0.6s ease forwards;
      animation-delay: 0.4s;
    }

    .fin-animate .chart-dot-anim {
      opacity: 0;
      animation: financeFadeIn 0.3s ease forwards;
      animation-delay: 0.7s;
    }

    .fin-animate .chart-tooltip-anim {
      opacity: 0;
      animation: financeFadeUp 0.3s ease forwards;
      animation-delay: 0.8s;
    }

    .fin-animate .donut-ring-anim {
      animation: donutFill 1.2s ease-out forwards;
      animation-delay: 0.5s;
    }

    .bar-anim {
      opacity: 1;
    }

    .bar-clip-reveal {
      clip-path: inset(100% 0 0 0);
    }
    .fin-animate .bar-clip-reveal {
      animation: clipReveal 0.8s ease-out forwards;
      animation-delay: 0.2s;
    }
    @keyframes clipReveal {
      from { clip-path: inset(100% 0 0 0); }
      to { clip-path: inset(0 0 0 0); }
    }

    .finance-card:hover {
      border-color: var(--border-hover);
      transform: translateY(-2px);
      transition: all 0.25s ease;
    }

    .finance-card {
      transition: all 0.25s ease;
    }

    .finance-card .stat-value {
      animation: countUp 0.4s ease forwards;
    }

    .finance-card-icon {
      transition: all 0.3s ease;
    }

    .finance-card:hover .finance-card-icon {
      transform: scale(1.1);
      box-shadow: 0 0 12px rgba(34,197,94,0.2);
    }

    .finance-detail-panel {
      transition: border-color 0.2s ease;
    }

    .finance-detail-panel:hover {
      border-color: var(--border-hover);
    }

    .finance-metric {
      transition: all 0.2s ease;
    }

    .finance-metric:hover {
      background: var(--bg-card);
      transform: translateY(-1px);
    }

    .quote-status-badge, .invoice-status-badge {
      transition: all 0.2s ease;
    }

    .quote-status-badge:hover, .invoice-status-badge:hover {
      transform: scale(1.05);
    }

    /* Glow pulse for active data points */
    .glow-dot {
      animation: pulseGlow 2.5s ease-in-out infinite;
    }

    /* Wave-style aging table */
    .aging-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    .aging-table th {
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      padding: 10px 14px;
      border-bottom: 2px solid var(--border);
    }

    .aging-table td {
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 300;
      color: var(--text);
      border-bottom: 1px solid var(--border);
    }

    .aging-table td:last-child {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .aging-table tr:hover td {
      background: var(--bg-card);
    }

    .aging-table .aging-overdue {
      color: #ef4444;
    }

    .aging-table .aging-current {
      color: #22c55e;
    }

    /* Overdue invoice list */
    .overdue-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .overdue-list li {
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      transition: padding-left 0.2s ease;
    }

    .overdue-list li:hover {
      padding-left: 6px;
    }

    .overdue-list li:last-child {
      border-bottom: none;
    }

    .overdue-list .overdue-client {
      color: var(--text);
      font-weight: 400;
    }

    .overdue-list .overdue-amount {
      color: #ef4444;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    .overdue-list .overdue-days {
      font-size: 11px;
      color: var(--text-40);
      margin-top: 2px;
    }

    /* Net Income table */
    .net-income-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
    }

    .net-income-table th {
      text-align: right;
      font-size: 11px;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--text-40);
      padding: 8px 14px;
      border-bottom: 2px solid var(--border);
    }

    .net-income-table th:first-child {
      text-align: left;
    }

    .net-income-table td {
      padding: 10px 14px;
      font-size: 13px;
      border-bottom: 1px solid var(--border);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .net-income-table td:first-child {
      text-align: left;
      color: var(--text);
      font-weight: 400;
    }

    .net-income-table .income-val { color: #22c55e; }
    .net-income-table .expense-val { color: #ef4444; }
    .net-income-table .net-val { color: var(--text); font-weight: 600; }

    .net-income-table tr:last-child td {
      border-bottom: none;
      border-top: 2px solid var(--border);
      padding-top: 12px;
    }