/* Margin utilities */
.mb-xs { margin-bottom: var(--wa-space-xs); }
.mb-s { margin-bottom: var(--wa-space-s); }
.mb-m { margin-bottom: var(--wa-space-m); }
.mb-l { margin-bottom: var(--wa-space-l); }
.mb-xl { margin-bottom: var(--wa-space-xl); }

.mt-xs { margin-top: var(--wa-space-xs); }
.mt-s { margin-top: var(--wa-space-s); }
.mt-m { margin-top: var(--wa-space-m); }
.mt-l { margin-top: var(--wa-space-l); }
.mt-xl { margin-top: var(--wa-space-xl); }

.mx-xs { margin-left: var(--wa-space-xs); margin-right: var(--wa-space-xs); }
.mx-s { margin-left: var(--wa-space-s); margin-right: var(--wa-space-s); }
.mx-m { margin-left: var(--wa-space-m); margin-right: var(--wa-space-m); }
.mx-l { margin-left: var(--wa-space-l); margin-right: var(--wa-space-l); }

.m-0 { margin: 0; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.mr-s { margin-right: var(--wa-space-s); }
.pl-l { padding-left: var(--wa-space-l); }

/* Text utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--wa-color-neutral-500); }
.text-mono { font-family: var(--wa-font-mono); }
.font-bold { font-weight: var(--wa-font-weight-bold); }

/* Form utilities */
.w-full { width: 100%; }
.form-label {
  display: block;
  margin-bottom: var(--wa-space-xs);
  font-weight: var(--wa-font-weight-semibold);
}

/* Table utilities */
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th,
.table td {
  padding: var(--wa-space-s) var(--wa-space-m);
  text-align: left;
}
.table th {
  font-weight: var(--wa-font-weight-semibold);
  border-bottom: 2px solid var(--wa-color-neutral-200);
}
.table td {
  border-bottom: 1px solid var(--wa-color-neutral-100);
}
.table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--wa-color-neutral-200);
}
.table .num {
  text-align: right;
  font-family: var(--wa-font-mono);
}
.table tbody tr:hover {
  background-color: var(--wa-color-neutral-90);
}
.table .col-shrink {
  width: min-content;
  white-space: nowrap;
}

/* Page header */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--wa-space-m);
  margin-bottom: var(--wa-space-l);
}

/* Grid utilities */
.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wa-space-m);
  align-items: stretch;
}
.half-width { max-width: 50%; }
@media (max-width: 768px) {
  .grid-2col { grid-template-columns: 1fr; }
  .half-width { max-width: 100%; }
}

/* Card stretch (push footer to bottom within grid) */
.grid-2col > wa-card {
  height: 100%;
}
.grid-2col > wa-card::part(body) {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.grid-2col > wa-card .summary-footer {
  margin-top: auto;
}

/* Flex utilities */
.flex { display: flex; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }

/* Filter utilities */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-m);
  align-items: flex-end;
}
.filter-row + .filter-row {
  margin-top: var(--wa-space-m);
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
  flex: 1;
}
.filter-field--auto {
  flex: none;
}
.filter-field label {
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-neutral-600);
}
.status-toggle-btn {
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.status-toggle-btn:has(:checked) {
  opacity: 1;
}
.ml-auto { margin-left: auto; }
.gap-s { gap: var(--wa-space-s); }
.gap-m { gap: var(--wa-space-m); }

/* Period form */
.period-form {
  display: flex;
  gap: var(--wa-space-m);
  align-items: center;
  flex-wrap: wrap;
}
.period-form label {
  font-weight: var(--wa-font-weight-semibold);
}
.period-form input[type="month"] {
  padding: var(--wa-space-s) var(--wa-space-m);
  border: 1px solid var(--wa-color-neutral-300);
  border-radius: var(--wa-border-radius-m);
  font-size: var(--wa-font-size-xl);
  font-weight: var(--wa-font-weight-semibold);
}

/* Chart utilities */
.chart-container {
  position: relative;
  width: 100%;
  height: 320px;
  padding: var(--wa-space-m);
  box-sizing: border-box;
  overflow: hidden;
}
.chart-container canvas {
  max-width: 100%;
}
.section-title {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  margin: 0;
  padding: var(--wa-space-m);
  font-size: var(--wa-font-size-l);
  font-weight: var(--wa-font-weight-semibold);
  border-bottom: 1px solid var(--wa-color-neutral-200);
}
.empty-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--wa-color-neutral-400);
}
.table-container {
  overflow-x: auto;
}

/* KPI summary cards */
.pl-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wa-space-m);
}
@media (max-width: 768px) {
  .pl-summary-cards { grid-template-columns: repeat(2, 1fr); }
}
.pl-summary-card {
  padding: var(--wa-space-m);
  border-radius: var(--wa-border-radius-m);
  text-align: center;
}
.pl-summary-card .label {
  font-size: var(--wa-font-size-xs);
  color: var(--wa-color-neutral-500);
}
.pl-summary-card .value {
  font-size: var(--wa-font-size-xl);
  font-weight: var(--wa-font-weight-bold);
  font-family: var(--wa-font-mono);
}
.pl-summary-card.income { background: rgba(34, 197, 94, 0.1); }
.pl-summary-card.income .value { color: rgb(34, 197, 94); }
.pl-summary-card.expense { background: rgba(239, 68, 68, 0.1); }
.pl-summary-card.expense .value { color: rgb(239, 68, 68); }
.pl-summary-card.labor { background: rgba(251, 146, 60, 0.1); }
.pl-summary-card.labor .value { color: rgb(251, 146, 60); }
.pl-summary-card.balance { background: rgba(59, 130, 246, 0.1); }
.pl-summary-card.balance .value.positive { color: rgb(59, 130, 246); }
.pl-summary-card.balance .value.negative { color: rgb(239, 68, 68); }
.pl-summary-card.profit { background: rgba(59, 130, 246, 0.1); }
.pl-summary-card.profit .value { color: rgb(59, 130, 246); }
.pl-summary-card.neutral { background: rgba(107, 114, 128, 0.1); }
.pl-summary-card.neutral .value { color: var(--wa-color-neutral-700); }

/* Card overflow (scoped to chart/analytics pages) */
.chart-container wa-card,
.grid-2col > wa-card {
  overflow: hidden;
  max-width: 100%;
}

/* Padding utilities */
.p-m { padding: var(--wa-space-m); }

/* Announcement list items */
.announcement-item {
  padding: var(--wa-space-m);
}
.announcement-body {
  margin: var(--wa-space-xs) 0 var(--wa-space-xs) 0;
  white-space: pre-wrap;
  color: var(--wa-color-neutral-700);
  font-size: var(--wa-font-size-s);
  line-height: 1.6;
}

/* Inline button (for button_to inside callouts etc.) */
.btn-inline input[type="submit"] {
  background: var(--wa-color-neutral-0);
  border: 1px solid var(--wa-color-neutral-300);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-2xs) var(--wa-space-m);
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-neutral-700);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-inline input[type="submit"]:hover {
  background: var(--wa-color-neutral-100);
}

/* Form actions */
.form-actions {
  margin-top: var(--wa-space-xl);
  display: flex;
  gap: var(--wa-space-s);
  justify-content: flex-end;
}

/* Summary footer (for totals display) */
.summary-footer {
  display: flex;
  justify-content: space-between;
  padding: var(--wa-space-m);
  background: var(--wa-color-neutral-80);
  border-top: 1px solid var(--wa-color-neutral-200);
}
.summary-stat {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
}
.summary-stat-label {
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-neutral-05);
}
.summary-stat-value {
  font-size: var(--wa-font-size-xl);
  font-weight: var(--wa-font-weight-bold);
  font-family: var(--wa-font-mono);
}

/* Color utilities for values */
.color-positive { color: rgb(34, 197, 94); }
.color-negative { color: rgb(239, 68, 68); }
.color-profit { color: rgb(59, 130, 246); }

/* Grid utilities (3col, 4col) */
.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wa-space-m);
  align-items: stretch;
}
.grid-3col > wa-card { height: 100%; }
.grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wa-space-m);
}
@media (max-width: 1024px) {
  .grid-3col { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .grid-4col { grid-template-columns: repeat(2, 1fr); }
}