/* =========================================================================
   BUSINESS FINANCES — Professional financial tracking UI
   ========================================================================= */

/* Panel Layout */
.finances-panel{
  grid-column:1;grid-row:3;
  display:none;flex-direction:column;
  min-height:0;overflow-y:auto;padding:0 24px 28px;gap:20px;
}
.finances-panel.visible{
  display:flex;
}

/* Header */
.finances-header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
  margin-bottom:10px;
}

.finances-section-label{
  font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--faint);
  margin:0;font-weight:700;display:flex;align-items:center;gap:9px;
}

.finances-actions{
  display:flex;gap:10px;
}

.finances-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;font-size:13px;font-weight:var(--fw-sb);
  border-radius:var(--r-md);cursor:pointer;
  border:none;
  transition:transform var(--t-snap) var(--ease),background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}

.finances-btn:active{transform:scale(.97);}

.finances-btn svg{
  width:16px;height:16px;
}

.finances-btn-primary{
  background:var(--accent);
  color:#fff;box-shadow:var(--glow-accent);
}

.finances-btn-primary:hover{
  box-shadow:var(--glow-accent);
  transform:translateY(-1px);
}

/* Summary Cards Grid */
.finances-summary{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}

.finances-card{
  background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--sh-1);
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}

.finances-card:hover{
  border-color:var(--line-bright);
  box-shadow:var(--sh-2);
}

.finances-card-title{
  font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--faint);
  margin:0 0 12px;font-weight:700;
}

.finances-card-value{
  font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--text);line-height:1.1;
  margin-bottom:6px;
}

.finances-card-subtitle{
  font-size:11px;color:var(--muted);
}

/* Card variations */
.finances-card-total .finances-card-value{
  color:var(--accent-soft);
}

.finances-card-profit .finances-card-value{
  color:var(--accent2-soft);
}

.finances-card-cost .finances-card-value{
  color:var(--danger);
}

.finances-card-month .finances-card-value{
  color:var(--warn);
}

/* Section */
.finances-section{
  margin-top:24px;
}

.finances-section-header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;margin-bottom:16px;
}

.finances-section-header h3{
  margin:0;font-size:14px;font-weight:var(--fw-sb);color:var(--text);
}

.finances-filter{
  display:flex;gap:4px;background:var(--card);
  border:1px solid var(--line);border-radius:20px;padding:4px;
}

.finances-filter-btn{
  background:none;border:none;color:var(--muted);
  padding:6px 14px;font-size:12px;font-weight:var(--fw-m);cursor:pointer;
  border-radius:14px;transition:color var(--t-base) var(--ease),background var(--t-base) var(--ease);
}

.finances-filter-btn:hover{color:var(--text);}

.finances-filter-btn.active{
  color:var(--text);background:rgba(var(--accent-rgb),.12);
}

/* Transaction Table */
.finances-table{
  background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);
}

.finances-empty{
  padding:40px 20px;text-align:center;color:var(--faint);
  font-size:13px;
}

.finances-table-header{
  display:grid;grid-template-columns:40px 1fr 120px 120px 100px auto;
  padding:14px 18px;border-bottom:1px solid var(--line-soft);
  font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--faint);
  font-weight:600;
}

.finances-row{
  display:grid;grid-template-columns:40px 1fr 120px 120px 100px auto;
  padding:14px 18px;border-bottom:1px solid var(--line-soft);
  align-items:center;transition:background var(--t-base) var(--ease);
}

.finances-row:last-child{border-bottom:none;}

.finances-row:hover{background:rgba(var(--text-rgb),.03);}

.finances-row .type-indicator{
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}

.finances-row .type-profit{
  background:rgba(var(--accent2-rgb),.16);color:var(--accent2-soft);
}

.finances-row .type-cost{
  background:rgba(var(--danger-rgb),.16);color:var(--danger);
}

.finances-row .description{
  font-size:13px;color:var(--text);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}

.finances-row .category{
  font-size:11px;color:var(--muted);
}

.finances-row .amount{
  font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
  text-align:right;
}

.finances-row .amount-profit{color:var(--accent2-soft);}
.finances-row .amount-cost{color:var(--danger);}

.finances-row .date{
  font-size:11px;color:var(--faint);
}

.finances-row .actions{
  display:flex;gap:8px;justify-content:flex-end;
}

.finances-row .action-btn{
  background:none;border:none;cursor:pointer;
  padding:4px 8px;border-radius:6px;
  color:var(--faint);transition:color var(--t-base) var(--ease),background var(--t-base) var(--ease);
}

.finances-row .action-btn:hover{
  color:var(--text);background:rgba(var(--text-rgb),.06);
}

.finances-row .action-btn.delete:hover{color:var(--danger);}

.finances-row .action-btn svg{
  width:14px;height:14px;
}

/* Stats Grid */
.finances-stats-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
}

.finances-stat-item{
  background:linear-gradient(160deg,var(--card),var(--card-2));
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--sh-1);
}

.finances-stat-label{
  font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--faint);
  margin:0 0 8px;font-weight:600;
}

.finances-stat-value{
  font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--text);
}

/* Modal Styles */
.finances-modal{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-xl);padding:28px 32px;max-width:500px;width:90%;
  box-shadow:var(--sh-3);color:var(--text);
}

.finances-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;
}

.finances-modal-header h2{
  margin:0;font-size:18px;font-weight:var(--fw-b);
}

.finances-modal-close{
  background:none;border:none;cursor:pointer;
  padding:8px;color:var(--muted);border-radius:var(--r-md);
  transition:color var(--t-base) var(--ease),background var(--t-base) var(--ease);
}

.finances-modal-close:hover{
  color:var(--text);background:rgba(var(--text-rgb),.06);
}

.finances-modal-close svg{
  width:18px;height:18px;
}

.finances-form{
  display:flex;flex-direction:column;gap:18px;
}

.finances-form-group{
  display:flex;flex-direction:column;gap:6px;
}

.finances-form-group label{
  font-size:12px;color:var(--muted);font-weight:var(--fw-sb);
}

.finances-form-group input,
.finances-form-group select,
.finances-form-group textarea{
  background:var(--card);border:1px solid var(--line);
  color:var(--text);border-radius:var(--r-md);padding:12px 14px;
  font-size:13px;font-family:inherit;
  transition:border-color var(--t-base) var(--ease);
}

.finances-form-group input:focus,
.finances-form-group select:focus,
.finances-form-group textarea:focus{
  outline:none;border-color:var(--accent);
}

.finances-form-group input::placeholder,
.finances-form-group textarea::placeholder{
  color:var(--faint);
}

.finances-form-group textarea{
  min-height:80px;resize:vertical;
}

.finances-form-row{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}

.finances-form-actions{
  display:flex;gap:12px;justify-content:flex-end;
  margin-top:24px;
}

.finances-form-actions .finances-btn{
  min-width:100px;
}

.finances-btn-secondary{
  background:var(--card);border:1px solid var(--line);color:var(--muted);
}

.finances-btn-secondary:hover{
  border-color:var(--line-bright);color:var(--text);
  background:var(--card-hover);
}

/* Type Toggle */
.finances-type-toggle{
  display:flex;gap:8px;margin-bottom:20px;
}

.finances-type-btn{
  flex:1;display:flex;align-items:center;gap:8px;justify-content:center;
  padding:12px 16px;font-size:14px;font-weight:var(--fw-sb);
  border:1px solid var(--line);border-radius:var(--r-md);
  cursor:pointer;transition:all var(--t-base) var(--ease);
}

.finances-type-btn svg{
  width:18px;height:18px;
}

.finances-type-btn.profit{
  color:var(--accent2-soft);
}

.finances-type-btn.cost{
  color:var(--danger);
}

.finances-type-btn.active{
  border-color:var(--accent);
  background:rgba(var(--accent-rgb),.12);
}

.finances-type-btn.active.profit{
  background:rgba(var(--accent2-rgb),.12);
  border-color:var(--accent2);
}

.finances-type-btn.active.cost{
  background:rgba(var(--danger-rgb),.12);
  border-color:var(--danger);
}

/* Responsive adjustments */
@media (max-width: 1000px) {
  .finances-summary{
    grid-template-columns:1fr 1fr;
  }
  .finances-form-row{
    grid-template-columns:1fr;
  }
  .finances-row{
    grid-template-columns:40px 1fr auto auto;
  }
  .finances-row .date{display:none;}
  .finances-table-header{
    grid-template-columns:40px 1fr auto auto;
  }
}

@media (max-width: 600px) {
  .finances-summary{
    grid-template-columns:1fr;
  }
  .finances-header{
    flex-direction:column;align-items:flex-start;
  }
  .finances-actions{
    width:100%;
  }
  .finances-actions .finances-btn{
    flex:1;justify-content:center;
  }
  .finances-form-row{
    grid-template-columns:1fr;
  }
}