html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(241, 245, 249, 0.98)),
    radial-gradient(circle at 12% 0%, rgba(23, 107, 135, 0.12), transparent 28rem),
    #f3f6f9;
  color: #1f2933;
  font-feature-settings: "tnum";
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.app-container {
  max-width: 1180px;
}

.btn {
  border-radius: 6px;
  font-weight: 650;
}

.btn-primary {
  background: #176b87;
  border-color: #176b87;
}

.btn-primary:hover {
  background: #12556c;
  border-color: #12556c;
}

.work-context-form {
  align-items: center;
  display: flex;
  min-height: 100%;
}

.work-context-select {
  max-width: 270px;
  min-width: 210px;
}

.form-control,
.form-select {
  border-color: #d4dde7;
  border-radius: 6px;
  min-height: 38px;
}

.form-label {
  color: #263445;
  font-size: 0.86rem;
  font-weight: 650;
  margin-bottom: 6px;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #176b87;
  box-shadow: 0 0 0 0.2rem rgba(23, 107, 135, 0.16);
}

.metric,
.table-shell,
.edit-panel,
.login-panel {
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
}

.metric {
  min-height: 104px;
  padding: 18px;
}

.metric span {
  color: #667085;
  display: block;
  font-size: 0.86rem;
  margin-bottom: 10px;
}

.metric strong {
  color: #111827;
  display: block;
  font-size: 1.55rem;
  font-weight: 650;
}

.table-shell {
  overflow-x: auto;
}

.table-title {
  border-bottom: 1px solid #edf0f4;
  color: #344054;
  font-weight: 650;
  padding: 14px 16px;
}

.table > :not(caption) > * > * {
  padding: 0.82rem 1rem;
}

.edit-panel,
.login-panel {
  padding: 20px;
}

.login-panel {
  margin: 7vh auto 0;
  max-width: 420px;
}

.form-check-row {
  align-items: center;
  display: flex;
  gap: 10px;
  min-height: 38px;
  padding-left: 12px;
}

.app-alert {
  align-items: center;
  animation: alertSlide 0.22s ease-out;
  background: rgba(235, 249, 241, 0.94);
  border: 1px solid #a8dfbc;
  border-radius: 8px;
  color: #14532d;
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  max-width: 760px;
  padding: 12px 14px;
  box-shadow: 0 12px 26px rgba(20, 83, 45, 0.07);
}

.app-alert-icon {
  align-items: center;
  background: #198754;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.app-alert-danger {
  background: rgba(254, 242, 242, 0.96);
  border-color: #fecaca;
  color: #7f1d1d;
}

.app-alert-danger .app-alert-icon {
  background: #dc2626;
}

@keyframes alertSlide {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.invoice-page-head {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  max-width: 100%;
}

.invoice-page-head h1 {
  color: #111827;
  font-size: 1.55rem;
  font-weight: 760;
  letter-spacing: 0;
  margin: 0;
}

.invoice-subtitle {
  color: #64748b;
  display: flex;
  gap: 8px;
  margin-top: 3px;
}

.invoice-status-pill {
  background: linear-gradient(180deg, #ecf7fb, #dff0f6);
  border: 1px solid #b9dbe6;
  border-radius: 999px;
  color: #176b87;
  font-size: 0.82rem;
  font-weight: 760;
  padding: 5px 11px;
  text-transform: uppercase;
}

.invoice-panel {
  border-color: #d5e0ea;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.055);
  max-width: 100%;
}

.invoice-section-title {
  color: #176b87;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.invoice-form-grid {
  row-gap: 13px !important;
}

.invoice-panel .form-label {
  margin-bottom: 4px;
}

.invoice-panel .form-control,
.invoice-panel .form-select {
  min-height: 34px;
  padding-bottom: 0.34rem;
  padding-top: 0.34rem;
}

.invoice-note {
  min-height: 70px;
  resize: vertical;
}

.compact-note {
  min-height: 64px;
  resize: vertical;
}

.subtle-note {
  color: #64748b;
  font-size: 0.86rem;
}

.portal-account-status {
  display: grid;
  gap: 2px;
}

.portal-account-status strong {
  color: #111827;
  font-size: 0.92rem;
}

.portal-account-status span {
  color: #64748b;
  font-size: 0.84rem;
}

.empty-state {
  color: #64748b;
  padding: 10px 0;
}

.mail-error {
  color: #b42318;
  display: block;
  font-size: 0.84rem;
  margin-top: 2px;
}

.invoice-lines-panel {
  padding-bottom: 18px;
}

.invoice-lines-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.invoice-lines-toolbar h2 {
  color: #111827;
  font-size: 1rem;
  font-weight: 760;
  margin: 0;
}

.invoice-lines-toolbar span {
  color: #64748b;
  display: block;
  font-size: 0.84rem;
  margin-top: 1px;
}

.invoice-lines-shell {
  border-color: #d8e2ea;
  overflow-x: auto;
}

.invoice-lines {
  min-width: 980px;
  table-layout: fixed;
}

.invoice-lines th {
  background: #f6f9fc;
  border-bottom-color: #dce5ee;
  color: #42526a;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.invoice-lines td,
.invoice-lines th {
  padding: 0.58rem 0.72rem;
}

.invoice-lines td,
.invoice-lines th {
  vertical-align: middle;
}

.invoice-lines .form-control,
.invoice-lines .form-select {
  background-color: #fff;
  border-color: #d7e0ea;
  min-height: 32px;
  padding-bottom: 0.25rem;
  padding-top: 0.25rem;
}

.line-catalog-col {
  width: 230px;
}

.line-description-col {
  width: 300px;
}

.line-unit-col {
  width: 90px;
}

.line-amount-col {
  width: 130px;
}

.line-net span,
.total-amount {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  min-width: 86px;
  white-space: nowrap;
}

.line-net span {
  color: #0f172a;
  font-weight: 760;
}

.total-label,
.total-amount {
  background: #f9fbfd !important;
  border-top-color: #dde6ef !important;
  color: #0f172a !important;
  font-weight: 760;
}

.invoice-lines tbody tr:hover td {
  background: #fbfdff;
}

.list-page-head {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.list-page-head h1 {
  color: #111827;
  font-size: 1.55rem;
  font-weight: 760;
  letter-spacing: 0;
  margin: 0;
}

.list-page-head p {
  color: #64748b;
  margin: 3px 0 0;
}

.list-filter-panel,
.empty-state-panel,
.year-panel {
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.list-filter-panel {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 120px minmax(280px, 520px);
  margin-bottom: 14px;
  padding: 14px 16px;
}

.list-filter-panel label {
  color: #176b87;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.partner-filter-panel {
  background: #fff;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  margin-bottom: 14px;
  padding: 14px 16px;
}

.partner-filter-panel label {
  color: #176b87;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.partner-list-table th {
  background: #f8fafc;
  color: #42526a;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.partner-list-table td,
.partner-list-table th {
  padding: 0.72rem 1rem;
}

.year-stack {
  display: grid;
  gap: 12px;
}

.year-panel {
  overflow: hidden;
}

.year-panel summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: auto 110px 1fr auto;
  list-style: none;
  padding: 14px 16px;
}

.year-panel summary::-webkit-details-marker {
  display: none;
}

.year-panel summary::before {
  color: #176b87;
  content: "›";
  font-size: 1.25rem;
  font-weight: 800;
  margin-right: 4px;
  transform: rotate(0deg);
  transition: transform 0.16s ease;
}

.year-panel[open] summary::before {
  transform: rotate(90deg);
}

.year-title {
  color: #111827;
  font-size: 1.04rem;
  font-weight: 780;
}

.year-meta {
  color: #64748b;
  font-size: 0.9rem;
}

.year-total {
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  font-weight: 780;
  white-space: nowrap;
}

.invoice-list-shell {
  border: 0;
  border-radius: 0;
  border-top: 1px solid #e2e8f0;
  box-shadow: none;
}

.invoice-list-table th {
  background: #f8fafc;
  color: #42526a;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.invoice-list-table td,
.invoice-list-table th {
  padding: 0.62rem 0.9rem;
}

.amount-cell {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.amount-strong {
  color: #0f172a;
  font-weight: 760;
}

.status-badge {
  background: #eef6f9;
  border: 1px solid #cde5ed;
  border-radius: 999px;
  color: #176b87;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 720;
  padding: 4px 9px;
}

.empty-state-panel {
  color: #64748b;
  display: grid;
  gap: 3px;
  padding: 18px;
}

.empty-state-panel strong {
  color: #111827;
}

@media (max-width: 720px) {
  .list-filter-panel,
  .partner-filter-panel,
  .year-panel summary {
    grid-template-columns: 1fr;
  }
}

.form-actions {
  align-items: center;
}

.save-flash {
  animation: savePulse 1.4s ease-out;
}

@keyframes savePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.34);
    border-color: #8fd4aa;
  }
  45% {
    box-shadow: 0 0 0 5px rgba(25, 135, 84, 0.12);
    border-color: #56b77c;
  }
  100% {
    box-shadow: none;
  }
}