/* Grid container */
.bill-grid__items,
.bill-grid__items turbo-frame { /* Turbo Frame, not <frame> */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

/* Card base */
.bill-grid__card {
  /* local var fallback; you pass --bill-accent inline */
  --bill-accent: var(--color-cobalt);

  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 12px;
  background: var(--color-white, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.08);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;

  /* clip the pseudo accent inside rounded corners */
  overflow: hidden;
}

/* NEW: Thin accent bar at top (clipped, no overflow) */
.bill-grid__card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--bill-accent);
}

/* Typography */
.bill-grid__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0.25rem 0 0.5rem;
  color: var(--color-black, #222);
}
.bill-grid__desc {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-gray, #666);
}
.bill-grid__amount { /* if you ever use it separately */
  font-size: 0.9rem;
  color: var(--color-gray-dark, #444);
}
.bill-grid__due {
  font-size: 0.9rem;
  color: var(--color-gray-dark, #444);
}

/* Link tone */
.bill-grid__link a {
  color: var(--color-cobalt);
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
.bill-grid__link a:hover { opacity: .9; }

/* Actions footer sticks to bottom */
.bill-grid__actions { margin-top: auto; }

/* Hover polish: subtle lift + accent-tinted border */
@media (hover:hover) {
  .bill-grid__card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--bill-accent) 30%, transparent);
  }
}


/* Lift card only when an action button is hovered (progressive) */
@supports selector(:has(*)) {
  .bill-grid__card:hover { transform: none; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
  .bill-grid__card:has(.bill-grid__actions .button:hover) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
  }
}

.bill-overdue {
  color: var(--color-coral);
}

.bill-upcoming {
  color: var(--color-purple);
}

.bill-paid {
  color: var(--color-green);
}

/* Skeletons (unchanged) */
.skeleton {
  background-color: #ccc;
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
}
.shimmer {
  background: linear-gradient(90deg, #ccc 0%, #e0e0e0 50%, #ccc 100%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
  height: 100%; width: 100%;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}


.status-label {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  color: white;
}

.status-label--past-due {
  background-color: var(--color-coral); /* red */
}

.occurrence-status-label {
  font-weight: 600;
  color: #FFF;
  border-radius: 1rem;
}


.status-label--due-soon {
  background-color: var(--color-yellow); /* orange/yellow */
  color: var(--color-black);
}

.status-label--on-track {
  background-color: var(--color-green); /* green */
}

.status-label--none {
  background-color: #6c757d; /* gray */
}

.occurrence-status-label--none {
  background-color: #6c757d; /* gray */
}

.occurrence-status-label--past-due {
  background-color: var(--color-coral);
  color: var(--color-white);
}

.occurrence-status-label--due-soon {
  background-color: var(--color-purple);
  color: var(--color-white);
}

.occurrence-status-label--on-track, 
.occurrence-status-label--paid {
  background-color: var(--color-green); /* green */
  color: var(--color-white);
}

.bill-occurrence-table th {
  text-align: left;
  padding: 0.5em;
  border-bottom: 2px solid var(--input-border-color, #888);
  font-size: var(--font-size-small);
  color: var(--label-color, #555);
}

.bill-occurrence-table th.text-center {
  text-align: center;
}

.bill-occurrence-table {
  width: 100%;
  border-collapse: collapse;
}

.bill-occurrence-table td {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.5em;
  /* border-bottom: 1px solid #ccc; */
}

.bill-occurrence-table tr:nth-child(even) {
  background-color: var(--color-stone-light);
  color: var(--color-black);
}

.bill-occurrence-table .text-center {
  text-align: center;
}

.bill-occurrence-table .text-muted {
  color: var(--label-color, #888);
}


/* ===== Bills 3-column layout ===== */
.bill-columns {
  --surface: #fff;
  --surface-2: #fafafa;
  --border: #e6e6f0;
  --muted: #6b7280;        /* gray-500 */
  --muted-2: #9ca3af;      /* gray-400 */

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;

  @media (max-width: 1100px) { grid-template-columns: 1fr 1fr; }
  @media (max-width: 720px)  { grid-template-columns: 1fr; }
}

.bill-column {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.75rem;
  box-shadow:
    0 1px 1px rgba(0,0,0,.03),
    0 8px 24px rgba(0,0,0,.06);
}

.bill-column__header {
  display: flex; align-items: center; justify-content: space-between;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.25rem;

  h3 {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .2px;
    margin: 0;
  }

  .count {
    color: var(--muted);
    font-size: .9rem;
    margin-left: .375rem;
    font-weight: 600;
  }
}

.bill-column__controls { display: flex; align-items: center; gap: .5rem; }
.collapse-btn {
  display: inline-flex; 
  align-items: center; 
  justify-content: center;
  width: 28px; 
  height: 28px; border-radius: 999px;
  border: 1px solid #e5e7eb; 
  background: #fff; 
  cursor: pointer;
}
.collapse-btn:hover {
  opacity: 0.8;
  border: 2px solid #d6d8dd;
}
/* Collapsible content animation */
.collapsible {
  overflow: hidden;
  transition: max-height .22s ease;
  max-height: 2000px; /* large enough for open state */
}
.collapsible.is-collapsed {
  display: none !important;
}


.bill-list {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-top: .25rem;
}

/* Row/link */
.bill-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  text-decoration: none;
  color: inherit;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;

  &:hover {
    transform: translateY(-1px);
    background: #f5f7fb;
    border-color: #d9dce8;
  }

  &:active { transform: translateY(0); }
}

.bill-row__name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bill-row__date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
  padding: .125rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
}

/* Column accent colors */
.bill-column--overdue   .bill-row__date { color: #b00020; border-color: #f2c1c8; background: #fff5f6; }
.bill-column--due_soon  .bill-row__date { color: #8a4b00; border-color: #f0d4a7; background: #fff9f0; }
.bill-column--upcoming  .bill-row__date { color: #1d4ed8; border-color: #c9d6fb; background: #f5f8ff; }
/* Paid this month = green */
.bill-column--paid .bill-row__date {
  color: #15803d;             /* green-700 */
  border-color: #bbf7d0;      /* green-200 */
  background: #f0fdf4;        /* green-50 */
}

.bill-list__empty {
  color: var(--muted-2);
  padding: .5rem .25rem;
  font-weight: 500;
}

/* Optional: tighten default link look inside the section */
.bill-column a { text-decoration: none; }

/* column backgrounds */
.bill-column--overdue {
  background: #fff5f5;   /* light red */
}
.bill-column--due_soon {
  background: #fffbea;   /* light yellow */
}
.bill-column--upcoming {
  background: #f9f5ff;   /* light purple */
}
/* Paid column: light green */
.bill-column--paid {
  background: #f0fdf4;   /* green-50 */
}
/* Non-table version */

.bo-row {
  display: grid;
  grid-template-columns: 1fr 140px 60px; /* name | due | checkbox */
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  border: 1px solid var(--border, #e5e7eb);
  border-left: 6px solid var(--bill-color, #3b82f6); /* fallback blue */
  border-radius: 12px;
  background: var(--surface, #fff);
  margin-bottom: .5rem;
  transition: background .15s ease, box-shadow .15s ease;

  &:hover {
    background: #f9fafb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
}

.bo-col { min-width: 0; }

.bo-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bo-due {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
  color: #374151; /* gray-700 */
}

.bo-check {
  text-align: center;
}

/* Mobile stacking */
@media (max-width: 640px) {
  .bo-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }

  .bo-name {
    grid-column: 1 / -1;
    margin-bottom: .25rem;
  }

  .bo-due { justify-self: start; }
  .bo-check { justify-self: end; }
}

/** ================= */
/** Monthly summary */
/** ================= */

.monthly-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;

  @media (max-width: 720px) { grid-template-columns: 1fr; }
}

.summary-card {
  background: #fff;
  border: 1px solid #ececf2;
  border-radius: 14px;
  padding: .75rem 1rem;
  box-shadow: 0 1px 1px rgba(0,0,0,.03), 0 8px 22px rgba(0,0,0,.04);

  .summary-label {
    font-size: .9rem;
    color: #6b7280;
    margin-bottom: .25rem;
  }
  .summary-value {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: .2px;
  }
}

/* Optional color accents */
.summary-card--planned   { background: #f8fbff; border-color: #dce8ff; }
.summary-card--paid      { background: #f5fff8; border-color: #cfeedd; }
.summary-card--remaining { background: #fff8f5; border-color: #ffd9cc; }