/* App-level styles — loaded between css-zero/variables and css-zero/utilities */

/* ============================================================
   Typography
   ============================================================ */
a {
  color: var(--color-link);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

h2 {
  font-size: var(--text-fluid-xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

h3 {
  font-size: var(--text-fluid-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin-block-end: var(--size-2);
}

h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

code {
  background-color: var(--color-border-light);
  border-radius: var(--rounded-sm);
  font-size: var(--text-sm);
  padding: 0.125rem var(--size-1);
}

/* ============================================================
   Tables
   ============================================================ */
table {
  border-collapse: collapse;
  font-size: var(--text-sm);
  inline-size: 100%;
}

th {
  color: var(--color-text-subtle);
  font-weight: var(--font-medium);
  padding: var(--size-2) var(--size-3);
  text-align: start;
  border-block-end: 1px solid var(--color-border);
}

td {
  padding: var(--size-2) var(--size-3);
  border-block-end: 1px solid var(--color-border-light);
  vertical-align: top;
}

tbody tr:hover {
  background-color: var(--color-border-light);
}

.text-right {
  text-align: end;
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--rounded-lg);
  padding: var(--size-4);
}

/* ============================================================
   Forms — style form elements globally to match CSS-Zero
   ============================================================ */
input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  appearance: none;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--rounded-md);
  box-shadow: var(--shadow-xs);
  font-size: var(--text-sm);
  inline-size: 100%;
  padding: .375rem .75rem;
}

select:not([multiple], [size]) {
  background-image: url("/assets/chevron-down-zinc-500-e6dc6029.svg");
  background-position: center right var(--size-2);
  background-repeat: no-repeat;
  background-size: var(--size-4) auto;
  padding-inline-end: var(--size-8);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
  block-size: var(--size-4);
  inline-size: var(--size-4);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-selected-dark);
}

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-block-end: var(--size-1);
}

fieldset {
  border: 1px solid var(--color-border-light);
  border-radius: var(--rounded-md);
  padding: var(--size-3);
}

fieldset legend {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  padding-inline: var(--size-1);
}

fieldset label {
  font-weight: var(--font-normal);
  margin-block-end: var(--size-1);
}

.field_with_errors input,
.field_with_errors select,
.field_with_errors textarea {
  border-color: var(--color-negative);
}

/* ============================================================
   Definition Lists
   ============================================================ */
dl {
  display: grid;
  gap: var(--size-1);
  grid-template-columns: max-content 1fr;
}

dt {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding-inline-end: var(--size-4);
}

dd {
  font-size: var(--text-sm);
}

/* ============================================================
   Category Tree
   ============================================================ */
.category-tree {
  list-style: none;
  padding: 0;
}

.category-tree ul {
  list-style: none;
  padding-inline-start: var(--size-5);
  margin-block-start: var(--size-1);
}

.category-tree li {
  margin-block-end: var(--size-1);
}

.category-tree a {
  font-weight: var(--font-medium);
}

/* ============================================================
   Navigation
   ============================================================ */
#header nav a {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: var(--size-1) var(--size-2);
  border-radius: var(--rounded-md);
  text-decoration: none;

  &:hover {
    color: var(--color-text);
    background-color: var(--color-border-light);
    text-decoration: none;
  }
}

#header h1 a {
  color: var(--color-text);
  text-decoration: none;
}

/* ============================================================
   Amount colors
   ============================================================ */
.amount-positive { color: var(--color-positive); }
.amount-negative { color: var(--color-negative); }
.amount-warning { color: light-dark(var(--yellow-700), var(--yellow-400)); }

/* ============================================================
   Status badges
   ============================================================ */
.badge {
  border-radius: var(--rounded-full);
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  padding: var(--size-1) var(--size-2);
}

.badge--draft {
  background-color: var(--color-border-light);
  color: var(--color-text-subtle);
}

.badge--active {
  background-color: light-dark(var(--green-100), var(--green-900));
  color: var(--color-positive);
}

.badge--superseded {
  background-color: light-dark(var(--yellow-100), var(--yellow-900));
  color: light-dark(var(--yellow-700), var(--yellow-400));
}

.badge--archived {
  background-color: var(--color-border-light);
  color: var(--color-text-subtle);
}

.badge--scenario {
  background-color: light-dark(var(--blue-100), var(--blue-900));
  color: light-dark(var(--blue-700), var(--blue-400));
}

.badge--pending {
  background-color: light-dark(var(--orange-100), var(--orange-900));
  color: light-dark(var(--orange-700), var(--orange-400));
}

/* ============================================================
   Btn sizing
   ============================================================ */
.btn--sm {
  --btn-font-size: var(--text-xs);
  --btn-padding: .25rem .625rem;
}

/* ============================================================
   Hidden utility
   ============================================================ */
.hidden {
  display: none;
}

/* ============================================================
   Gap utilities (complement CSS-Zero's .gap which defaults to 0.5rem)
   ============================================================ */
.gap-2 { --column-gap: var(--size-2); --row-gap: var(--size-2); }
.gap-4 { --column-gap: var(--size-4); --row-gap: var(--size-4); }

/* ============================================================
   Table scroll wrapper (horizontal overflow for wide tables)
   ============================================================ */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Text size utilities
   ============================================================ */
.text-sm { font-size: var(--text-sm); }

/* ============================================================
   Tabs
   ============================================================ */
.tabs {
  display: flex;
  gap: var(--size-1);
  border-block-end: 1px solid var(--color-border);
}

.tab {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding: var(--size-2) var(--size-3);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
}

.tab:hover {
  color: var(--color-text);
  text-decoration: none;
}

.tab--active {
  color: var(--color-text);
  border-block-end-color: var(--color-primary);
}

/* ============================================================
   Sortable Table
   ============================================================ */
.sortable-table__th {
  cursor: pointer;
  user-select: none;

  &:hover {
    color: var(--color-text);
  }
}

.sort-indicator {
  color: var(--color-primary);
  font-size: var(--text-xs);
}

.sortable-table__filter {
  inline-size: auto;
  min-inline-size: 8rem;
}