/* Compact forms project-wide */
.page-content .form-label,
.auth-page .form-label,
.auth-card .form-label {
  margin-bottom: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--fc-muted);
}

.page-content .form-control,
.page-content .form-select,
.page-content textarea.form-control,
.auth-page .form-control,
.auth-page .form-select,
.auth-card .form-control,
.auth-card .form-select {
  min-height: 1.95rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  border-radius: 8px;
}

.page-content textarea.form-control,
.auth-page textarea.form-control,
.auth-card textarea.form-control {
  min-height: 4.25rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.page-content .form-control:focus,
.page-content .form-select:focus,
.auth-page .form-control:focus,
.auth-page .form-select:focus,
.auth-card .form-control:focus,
.auth-card .form-select:focus {
  box-shadow: 0 0 0 3px rgba(0, 175, 198, 0.12);
}

.page-content .form-select {
  padding-right: 2rem;
  background-position: right 0.45rem center;
}

.page-content .form-check-label {
  font-size: 0.8125rem;
}

.page-content .btn:not(.btn-sm):not(.btn-lg):not(.btn-icon):not(.user-chip):not(.notif-btn),
.auth-page .btn:not(.btn-sm):not(.btn-lg),
.auth-card .btn:not(.btn-sm):not(.btn-lg) {
  min-height: 1.95rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.page-content .btn-sm {
  min-height: 1.65rem;
  padding: 0.12rem 0.5rem;
  font-size: 0.75rem;
}

.page-content .input-group .form-control,
.page-content .input-group .form-select,
.page-content .input-group .btn {
  min-height: 1.95rem;
}

.fc-filter-bar {
  padding: 0.5rem 0.7rem !important;
}

/* Compact settings / editable field cards */
.fc-settings-card > .panel-header {
  padding: 0.55rem 0.75rem;
}
.fc-settings-card > .panel-header h5 {
  font-size: 0.9rem;
  font-weight: 650;
}
.fc-settings-card > .panel-body {
  padding: 0.65rem 0.75rem 0.75rem;
}
.fc-compact-form .form-label {
  margin-bottom: 0.12rem;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
}
.fc-compact-form .form-control,
.fc-compact-form .form-control-sm,
.fc-compact-form .form-select,
.fc-compact-form .form-select-sm {
  min-height: 1.7rem;
  padding: 0.18rem 0.5rem;
  font-size: 0.78rem;
  line-height: 1.3;
  border-radius: 6px;
}
.fc-compact-form .form-text {
  margin-top: 0.15rem;
  font-size: 0.68rem;
}
.fc-compact-form .fc-editable-actions .btn-fc {
  padding: 0.28rem 0.7rem;
  font-size: 0.74rem;
}

/* Status-colored table rows */
.page-content .table-fc tbody tr.fc-row-tone-paid > td {
  background: #F0FDF4;
}
.page-content .table-fc tbody tr.fc-row-tone-partial > td {
  background: #FFFBEB;
}
.page-content .table-fc tbody tr.fc-row-tone-overdue > td {
  background: #FEF2F2;
}
.page-content .table-fc tbody tr.fc-row-tone-unpaid > td,
.page-content .table-fc tbody tr.fc-row-tone-open > td {
  background: #F0F9FF;
}
.page-content .table-fc tbody tr.fc-row-tone-draft > td {
  background: #F8FAFC;
}
.page-content .table-fc tbody tr.fc-row-tone-muted > td {
  background: #F1F5F9;
  color: #64748B;
}
.page-content .table-fc tbody tr.fc-row-tone-paid:hover > td {
  background: #DCFCE7;
}
.page-content .table-fc tbody tr.fc-row-tone-partial:hover > td {
  background: #FEF3C7;
}
.page-content .table-fc tbody tr.fc-row-tone-overdue:hover > td {
  background: #FEE2E2;
}
.page-content .table-fc tbody tr.fc-row-tone-unpaid:hover > td,
.page-content .table-fc tbody tr.fc-row-tone-open:hover > td {
  background: #E0F2FE;
}
.page-content .table-fc tbody tr.fc-row-tone-draft:hover > td,
.page-content .table-fc tbody tr.fc-row-tone-muted:hover > td {
  background: #E2E8F0;
}
.page-content .table-fc tbody tr.fc-row-tone-paid > td:first-child { box-shadow: inset 3px 0 0 #16A34A; }
.page-content .table-fc tbody tr.fc-row-tone-partial > td:first-child { box-shadow: inset 3px 0 0 #D97706; }
.page-content .table-fc tbody tr.fc-row-tone-overdue > td:first-child { box-shadow: inset 3px 0 0 #DC2626; }
.page-content .table-fc tbody tr.fc-row-tone-unpaid > td:first-child,
.page-content .table-fc tbody tr.fc-row-tone-open > td:first-child { box-shadow: inset 3px 0 0 #0EA5E9; }
.page-content .table-fc tbody tr.fc-row-tone-draft > td:first-child,
.page-content .table-fc tbody tr.fc-row-tone-muted > td:first-child { box-shadow: inset 3px 0 0 #94A3B8; }

/* Thin table rows project-wide */
.page-content .table-fc {
  font-size: 0.8rem;
}
.page-content .table-fc thead th {
  padding: 0.4rem 0.65rem;
  font-size: 0.65rem;
  line-height: 1.2;
}
.page-content .table-fc td,
.page-content .table-fc tfoot td {
  padding: 0.35rem 0.65rem;
  line-height: 1.3;
}
.page-content .table-fc .badge-status {
  padding: 0.15rem 0.45rem;
  font-size: 0.68rem;
  line-height: 1.2;
}
.page-content .table-fc .btn-sm {
  min-height: 1.5rem;
  padding: 0.08rem 0.4rem;
  font-size: 0.72rem;
}
.page-content .table:not(.table-fc) > :not(caption) > * > * {
  padding: 0.35rem 0.65rem;
}
.page-content .table:not(.table-fc) {
  font-size: 0.8rem;
}

.badge-status.fc-badge-paid {
  background: #DCFCE7 !important;
  color: #15803D !important;
}
.badge-status.fc-badge-partial {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}
.table-fc td.num,
.table-fc th.num,
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cell-clip {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kpi-value {
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.fc-line-table td {
  vertical-align: middle;
}
.page-content .table-fc tbody tr.fc-row-link {
  cursor: pointer;
}
.page-content .table-fc tbody tr.fc-row-link:hover > td {
  filter: brightness(0.985);
}
.page-content .table-fc .fc-row-link-text {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.page-content .table-fc .fc-row-link-text:hover {
  color: var(--fc-primary);
}
.fc-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
}
.fc-pager-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
}
.fc-pager-count {
  font-size: 0.8125rem;
  color: var(--fc-muted, #6c757d);
}
.fc-pager-count strong {
  color: var(--fc-text, #212529);
  font-variant-numeric: tabular-nums;
}
.fc-pager-size {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.fc-pager-size-label {
  margin: 0;
  font-size: 0.75rem;
  color: var(--fc-muted, #6c757d);
  white-space: nowrap;
}
.fc-pager-size .form-select {
  width: auto;
  min-width: 4.25rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  font-size: 0.8125rem;
}
.fc-pager-nav .pagination {
  gap: 0.15rem;
}
.fc-pager-nav .page-link {
  min-width: 2rem;
  text-align: center;
  padding: 0.25rem 0.45rem;
  font-size: 0.8125rem;
}
.panel-header .fc-table-count {
  font-size: 0.8125rem;
  color: var(--fc-muted, #6c757d);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767.98px) {
  .fc-pager {
    flex-direction: column;
    align-items: stretch;
  }
  .fc-pager-nav .pagination {
    justify-content: center;
  }
}
.fc-line-table .form-control,
.fc-line-table .form-select {
  min-height: 1.8rem;
  padding: 0.18rem 0.45rem;
  font-size: 0.78rem;
}
@media (max-width: 767.98px) {
  .cell-clip {
    max-width: none;
    white-space: normal;
  }
  .page-content,
  .app-shell,
  .main-wrap {
    max-width: 100%;
  }
}

/*
 * Workflow UI kit — reuse for future approval / feature toggles.
 * Tokens live on .fc-workflow; switch + pipeline work inside or standalone.
 */
.fc-workflow,
.fc-approve-panel {
  --fc-flow-radius: 0.55rem;
  --fc-flow-pad-y: 0.55rem;
  --fc-flow-pad-x: 0.7rem;
  --fc-flow-gap: 0.45rem;
  --fc-flow-font: 0.78rem;
  --fc-flow-title: 0.92rem;
  --fc-flow-lead: 0.78rem;
  --fc-flow-border: rgba(15, 118, 110, 0.16);
  --fc-flow-accent: #0f766e;
  --fc-flow-accent-2: #14b8a6;
  border: 1px solid var(--fc-flow-border);
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.05);
}
.fc-workflow-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
}
.fc-workflow-heading {
  display: grid;
  gap: 0.25rem;
  min-width: min(100%, 18rem);
  flex: 1 1 14rem;
}
.fc-workflow-heading h5 {
  font-size: var(--fc-flow-title);
  font-weight: 650;
  line-height: 1.3;
}
.fc-workflow-lead {
  font-size: var(--fc-flow-lead);
  line-height: 1.45;
  color: var(--fc-muted, #6c757d);
  max-width: 42rem;
}
.fc-workflow-body {
  padding-top: 0.85rem;
}

/* Compact status pill */
.fc-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.fc-pill.is-on {
  color: #065f46;
  background: #d1fae5;
}
.fc-pill.is-off {
  color: #6b7280;
  background: #f3f4f6;
}

/* Compact feature switch */
.fc-switch-form {
  margin: 0;
}
.fc-switch {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  cursor: pointer;
  margin: 0;
  padding: var(--fc-flow-pad-y, 0.55rem) var(--fc-flow-pad-x, 0.7rem);
  border-radius: var(--fc-flow-radius, 0.55rem);
  background: #f8fffd;
  border: 1px solid #b6ebe3;
}
.fc-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.fc-switch-ui {
  position: relative;
  flex: 0 0 2.35rem;
  width: 2.35rem;
  height: 1.3rem;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
  transition: background 0.18s ease;
}
.fc-switch-knob {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
  transition: transform 0.18s ease;
}
.fc-switch.is-checked .fc-switch-ui,
.fc-switch input:checked + .fc-switch-ui {
  background: linear-gradient(135deg, var(--fc-flow-accent, #0f766e), var(--fc-flow-accent-2, #14b8a6));
}
.fc-switch.is-checked .fc-switch-knob,
.fc-switch input:checked + .fc-switch-ui .fc-switch-knob {
  transform: translateX(1.05rem);
}
.fc-switch-copy {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.fc-switch-copy strong {
  font-size: 0.84rem;
  font-weight: 650;
  color: #134e4a;
  line-height: 1.3;
}
.fc-switch-copy span {
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.35;
}

/* Process flow — Create → Pending approval → Approved → Done */
.fc-pipeline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: 0;
  width: 100%;
}
.fc-pipeline li {
  position: relative;
  flex: 1 1 0;
  min-width: 6.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  padding: 0.55rem 1.1rem 0.5rem 0.55rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-right: 0;
  color: #64748b;
  font-size: var(--fc-flow-font, 0.78rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.fc-pipeline li:first-child {
  border-radius: 0.45rem 0 0 0.45rem;
}
.fc-pipeline li:last-child {
  border-right: 1px solid #e2e8f0;
  border-radius: 0 0.45rem 0.45rem 0;
  padding-right: 0.55rem;
}
.fc-pipeline-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
}
.fc-pipeline-label {
  display: block;
}
.fc-pipeline-arrow {
  position: absolute;
  top: 50%;
  right: -0.45rem;
  z-index: 2;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.45rem;
  border-top: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
  background: #f8fafc;
  transform: rotate(45deg);
}
.fc-pipeline li.is-done {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.fc-pipeline li.is-done .fc-pipeline-index {
  background: #10b981;
  color: #fff;
}
.fc-pipeline li.is-done .fc-pipeline-arrow {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.fc-pipeline li.is-active {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}
.fc-pipeline li.is-active .fc-pipeline-index {
  background: #f97316;
  color: #fff;
}
.fc-pipeline li.is-active .fc-pipeline-arrow {
  background: #fff7ed;
  border-color: #fdba74;
}
.fc-pipeline li.is-rejected {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.fc-pipeline li.is-rejected .fc-pipeline-index {
  background: #ef4444;
  color: #fff;
}
.fc-pipeline li.is-rejected .fc-pipeline-arrow {
  background: #fef2f2;
  border-color: #fecaca;
}

/* Modern action buttons — professional scale */
.btn-fc {
  --fc-btn-bg: #0f766e;
  --fc-btn-bg-2: #0d9488;
  --fc-btn-fg: #fff;
  --fc-btn-border: transparent;
  --fc-btn-shadow: 0 4px 12px rgba(13, 148, 136, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border: 1px solid var(--fc-btn-border);
  border-radius: 0.45rem;
  padding: 0.4rem 0.85rem;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  line-height: 1.25;
  color: var(--fc-btn-fg);
  background: linear-gradient(135deg, var(--fc-btn-bg), var(--fc-btn-bg-2));
  box-shadow: var(--fc-btn-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn-fc:hover,
.btn-fc:focus {
  color: var(--fc-btn-fg);
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(13, 148, 136, 0.24);
}
.btn-fc:active {
  transform: translateY(0);
}
.btn-fc.btn-sm {
  padding: 0.28rem 0.65rem;
  font-size: 0.74rem;
  box-shadow: 0 3px 8px rgba(13, 148, 136, 0.16);
}
.btn-fc-primary {
  --fc-btn-bg: #0f766e;
  --fc-btn-bg-2: #14b8a6;
}
.btn-fc-approve {
  --fc-btn-bg: #047857;
  --fc-btn-bg-2: #10b981;
  --fc-btn-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}
.btn-fc-reject {
  --fc-btn-bg: #fff;
  --fc-btn-bg-2: #fff;
  --fc-btn-fg: #b91c1c;
  --fc-btn-border: #fecaca;
  --fc-btn-shadow: 0 3px 8px rgba(185, 28, 28, 0.08);
  background: #fff;
}
.btn-fc-reject:hover,
.btn-fc-reject:focus {
  background: #fef2f2;
  color: #991b1b;
}
.btn-fc-ghost {
  --fc-btn-bg: #fff;
  --fc-btn-bg-2: #fff;
  --fc-btn-fg: #0f766e;
  --fc-btn-border: #99f6e4;
  --fc-btn-shadow: 0 2px 8px rgba(15, 118, 110, 0.06);
  background: #fff;
}
.btn-fc-ghost:hover,
.btn-fc-ghost:focus {
  background: #f0fdfa;
  color: #0f766e;
}
.fc-action-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.fc-badge-pending {
  background: #fff7ed !important;
  color: #c2410c !important;
  border: 1px solid #fdba74;
}
.fc-badge-rejected {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca;
}
.table-fc tbody tr.fc-row-tone-pending > td {
  background: rgba(255, 237, 213, 0.45);
}
.table-fc tbody tr.fc-row-tone-rejected > td {
  background: rgba(254, 226, 226, 0.45);
}
@media (max-width: 767.98px) {
  .fc-pipeline {
    flex-direction: column;
  }
  .fc-pipeline li,
  .fc-pipeline li:first-child,
  .fc-pipeline li:last-child {
    border-right: 1px solid #e2e8f0;
    border-radius: 0;
    padding-right: 0.55rem;
    padding-bottom: 0.85rem;
  }
  .fc-pipeline li:first-child {
    border-radius: 0.45rem 0.45rem 0 0;
  }
  .fc-pipeline li:last-child {
    border-radius: 0 0 0.45rem 0.45rem;
    padding-bottom: 0.55rem;
  }
  .fc-pipeline li + li {
    border-top: 0;
  }
  .fc-pipeline-arrow {
    top: auto;
    bottom: -0.4rem;
    right: 50%;
    margin-top: 0;
    margin-right: -0.45rem;
    transform: rotate(135deg);
  }
}