/* ============================================================
   UpTaskPro Expense Tracker — Phase 1
   All rules scoped under .uptp-expense-tracker
   ============================================================ */

/* ---- CSS Variables ---- */
.uptp-expense-tracker {
  --et-pink:         #EA1361;
  --et-slate:        #6A7C8B;
  --et-purple:       #7B5C8B;
  --et-bg:           #F9F6F2;
  --et-border:       #E2D6CC;
  --et-summary-bg:   #FFF7EF;
  --et-total-bg:     #F3E8B5;
  --et-total-border: #D4C47A;
  --et-green:        #8CBF75;
  --et-green-text:   #4a7a36;
  --et-text:         #252525;
  --et-text-muted:   #6A7C8B;
  --et-white:        #ffffff;
  --et-radius:       12px;
  --et-shadow:       0 1px 4px rgba(0,0,0,0.08);
  font-family: inherit;
  box-sizing: border-box;
  position: relative; /* needed so docked action bar (position:absolute) is contained */
}

.uptp-expense-tracker *,
.uptp-expense-tracker *::before,
.uptp-expense-tracker *::after {
  box-sizing: inherit;
}

/* ================================================================
   HERO HEADER
   ================================================================ */
.uptp-expense-tracker .uptp-et-header {
  background: linear-gradient(135deg, var(--et-slate) 0%, #3d5060 100%);
  color: var(--et-white);
  padding: 36px 24px;
}

.uptp-expense-tracker .uptp-et-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.uptp-expense-tracker .uptp-et-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--et-white);
  line-height: 1.2;
}

.uptp-expense-tracker .uptp-et-subtitle {
  font-size: 15px;
  margin: 0;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
}

.uptp-expense-tracker .uptp-et-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--et-pink);
  margin: 0 0 10px;
}

.uptp-expense-tracker .uptp-et-header-intro {
  font-size: 14px;
  color: rgba(255,255,255,0.80);
  margin: 12px 0 0;
  line-height: 1.6;
  max-width: 560px;
}

.uptp-expense-tracker .uptp-et-header-links {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  margin: 10px 0 0;
  line-height: 1.5;
  max-width: 560px;
}

.uptp-expense-tracker .uptp-et-header-links a {
  color: var(--et-pink);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.uptp-expense-tracker .uptp-et-header-links a:hover {
  color: var(--et-white);
}

.uptp-expense-tracker .uptp-et-logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--et-white);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.uptp-expense-tracker .uptp-et-logo-dot {
  color: var(--et-pink);
}

/* ================================================================
   PROJECT SUMMARY BAR
   ================================================================ */
.uptp-expense-tracker .uptp-et-summary-bar {
  background: var(--et-summary-bg);
  border-bottom: 1px solid var(--et-border);
  padding: 16px 24px;
}

.uptp-expense-tracker .uptp-et-summary-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.uptp-expense-tracker .uptp-et-summary-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--et-text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.uptp-expense-tracker .uptp-et-summary-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--et-text);
}

.uptp-expense-tracker .uptp-et-summary-actual {
  transition: color 0.2s;
}

.uptp-expense-tracker .uptp-et-summary-actual.uptp-et-over {
  color: var(--et-pink);
}

/* ================================================================
   MAIN TWO-COLUMN LAYOUT
   ================================================================ */
.uptp-expense-tracker .uptp-et-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
  background: var(--et-bg);
  min-height: 400px;
}

/* ================================================================
   TABLE CARD (LEFT COLUMN)
   ================================================================ */
.uptp-expense-tracker .uptp-et-table-card {
  background: var(--et-white);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
  box-shadow: var(--et-shadow);
  overflow: hidden;
}

/* ---- Column header row (desktop only) ---- */
.uptp-expense-tracker .uptp-et-col-header {
  display: grid;
  grid-template-columns: 4fr 2fr 2fr 2fr 2fr;
  gap: 8px;
  padding: 10px 16px;
  background: #f4f6f8;
  border-bottom: 1px solid var(--et-border);
}

.uptp-expense-tracker .uptp-et-ch {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--et-text-muted);
}

.uptp-expense-tracker .uptp-et-ch-est,
.uptp-expense-tracker .uptp-et-ch-act,
.uptp-expense-tracker .uptp-et-ch-diff,
.uptp-expense-tracker .uptp-et-ch-status {
  text-align: right;
}

/* ---- Section header row ---- */
.uptp-expense-tracker .uptp-et-sect-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  gap: 8px;
}

.uptp-expense-tracker .uptp-et-sect-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--et-white);
}

.uptp-expense-tracker .uptp-et-sect-num {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}

/* ---- Line-item rows ---- */
.uptp-expense-tracker .uptp-et-item-row {
  display: grid;
  grid-template-columns: 4fr 2fr 2fr 2fr 2fr;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.uptp-expense-tracker .uptp-et-item-row:hover {
  background: #fafbfc;
}

.uptp-expense-tracker .uptp-et-cell {
  font-size: 13px;
  color: var(--et-text);
}

.uptp-expense-tracker .uptp-et-cell-est,
.uptp-expense-tracker .uptp-et-cell-diff,
.uptp-expense-tracker .uptp-et-cell-status {
  text-align: right;
}

.uptp-expense-tracker .uptp-et-cell-act {
  text-align: right;
}

.uptp-expense-tracker .uptp-et-item-name {
  display: block;
  font-size: 13px;
  color: var(--et-text);
}

/* Mobile labels (hidden on desktop) */
.uptp-expense-tracker .uptp-et-mob-label {
  display: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--et-text-muted);
  margin-bottom: 2px;
}

/* ---- Actual cost input ---- */
.uptp-expense-tracker .uptp-et-input-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 100px;
  float: right;
}

.uptp-expense-tracker .uptp-et-dollar-prefix {
  position: absolute;
  left: 8px;
  font-size: 12px;
  color: var(--et-text-muted);
  pointer-events: none;
  z-index: 1;
}

.uptp-expense-tracker .uptp-et-actual {
  width: 100%;
  padding: 5px 6px 5px 20px;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--et-text);
  text-align: right;
  transition: border-color 0.15s, background 0.15s;
  appearance: textfield;
  -moz-appearance: textfield;
}

.uptp-expense-tracker .uptp-et-actual::-webkit-inner-spin-button,
.uptp-expense-tracker .uptp-et-actual::-webkit-outer-spin-button {
  opacity: 0;
}

.uptp-expense-tracker .uptp-et-actual:hover {
  border-color: var(--et-border);
}

.uptp-expense-tracker .uptp-et-actual:focus {
  outline: none;
  border-color: var(--et-pink);
  background: var(--et-white);
  box-shadow: 0 0 0 3px rgba(234,19,97,0.1);
}

/* ---- Diff colors ---- */
.uptp-expense-tracker .uptp-et-item-diff {
  font-size: 13px;
  font-weight: 500;
}

.uptp-expense-tracker .uptp-et-under {
  color: var(--et-green-text);
}

.uptp-expense-tracker .uptp-et-over {
  color: var(--et-pink);
}

.uptp-expense-tracker .uptp-et-neutral {
  color: var(--et-text-muted);
}

/* ---- Status badges ---- */
.uptp-expense-tracker .uptp-et-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.uptp-expense-tracker .uptp-et-badge-under {
  background: rgba(140,191,117,0.18);
  color: var(--et-green-text);
  border: 1px solid rgba(140,191,117,0.35);
}

.uptp-expense-tracker .uptp-et-badge-over {
  background: rgba(234,19,97,0.1);
  color: var(--et-pink);
  border: 1px solid rgba(234,19,97,0.2);
}

/* ---- Section subtotal row ---- */
/* 5-column grid matches item rows (4fr 2fr 2fr 2fr 2fr).
   4 children occupy cols 1-4; col 5 (Status) is intentionally empty. */
.uptp-expense-tracker .uptp-et-sect-subtotal {
  display: grid;
  grid-template-columns: 4fr 2fr 2fr 2fr 2fr;
  gap: 8px;
  align-items: center;
  padding: 10px 16px;
  background: rgba(226,214,204,0.18);
  border-top: 2px solid var(--et-border);
  border-bottom: 1px solid var(--et-border);
}

.uptp-expense-tracker .uptp-et-subt-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--et-text-muted);
  text-transform: uppercase;
}

.uptp-expense-tracker .uptp-et-subt-col {
  font-size: 13px;
  font-weight: 600;
  color: var(--et-text);
  text-align: right;
}

.uptp-expense-tracker .uptp-et-sect-act,
.uptp-expense-tracker .uptp-et-sect-diff {
  font-weight: 600;
}

/* ================================================================
   GRAND TOTAL PANEL
   Rendered as a sibling card below .uptp-et-table-card (not inside it).
   overflow:hidden ensures border-radius clips inner content cleanly.
   ================================================================ */
.uptp-expense-tracker .uptp-et-grand-total {
  background: var(--et-total-bg);
  border: 1px solid var(--et-total-border);
  border-radius: var(--et-radius);
  box-shadow: 0 2px 10px rgba(0,0,0,0.09);
  overflow: hidden;
  padding: 24px 20px 20px;
  margin-top: 28px;
}

.uptp-expense-tracker .uptp-et-gt-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--et-text);
  margin-bottom: 20px;
}

.uptp-expense-tracker .uptp-et-gt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--et-pink);
  color: var(--et-white);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.uptp-expense-tracker .uptp-et-gt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.uptp-expense-tracker .uptp-et-gt-col {
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(212,196,122,0.5);
  border-radius: 8px;
  padding: 14px 16px;
}

.uptp-expense-tracker .uptp-et-gt-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--et-text-muted);
  margin-bottom: 4px;
}

.uptp-expense-tracker .uptp-et-gt-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--et-text);
  line-height: 1.2;
}

.uptp-expense-tracker .uptp-et-gt-diff.uptp-et-under {
  color: var(--et-green-text);
}

.uptp-expense-tracker .uptp-et-gt-diff.uptp-et-over {
  color: var(--et-pink);
}

/* Status banner — inset within the card, rounded corners */
.uptp-expense-tracker .uptp-et-status-banner {
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--et-white);
  transition: background 0.25s;
  border-radius: 8px;
}

.uptp-expense-tracker .uptp-et-banner-under {
  background: var(--et-green);
}

.uptp-expense-tracker .uptp-et-banner-over {
  background: var(--et-pink);
}

/* ================================================================
   RIGHT PANEL
   ================================================================ */
/* Sticky applied to the grid column, not the card inside it.
   The grid item's containing block spans the full row height,
   giving the sticky element room to scroll. */
.uptp-expense-tracker .uptp-et-right {
  position: sticky;
  top: 130px;
}

.uptp-expense-tracker .uptp-et-panel-card {
  background: var(--et-white);
  border: 1px solid var(--et-border);
  border-radius: var(--et-radius);
  box-shadow: var(--et-shadow);
  padding: 20px;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(106,124,139,0.45) rgba(226,214,204,0.28);
}

/* WebKit scrollbar — scoped to this card only, does not affect page scrollbar */
.uptp-expense-tracker .uptp-et-panel-card::-webkit-scrollbar {
  width: 8px;
}

/* Hide up/down arrow buttons — clean modern scrollbar with no step buttons */
.uptp-expense-tracker .uptp-et-panel-card::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.uptp-expense-tracker .uptp-et-panel-card::-webkit-scrollbar-track {
  background: rgba(226,214,204,0.28);
  border-radius: 999px;
}

.uptp-expense-tracker .uptp-et-panel-card::-webkit-scrollbar-thumb {
  background: rgba(106,124,139,0.45);
  border-radius: 999px;
}

.uptp-expense-tracker .uptp-et-panel-card::-webkit-scrollbar-thumb:hover {
  background: rgba(106,124,139,0.65);
}

.uptp-expense-tracker .uptp-et-panel-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--et-text);
  margin: 0 0 16px;
}

/* Chart placeholder */
.uptp-expense-tracker .uptp-et-chart-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--et-border);
  border-radius: 8px;
  height: 140px;
  margin-bottom: 20px;
}

.uptp-expense-tracker .uptp-et-chart-placeholder p {
  font-size: 12px;
  color: var(--et-text-muted);
  font-style: italic;
  margin: 0;
  text-align: center;
}

/* Progress section */
.uptp-expense-tracker .uptp-et-progress-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--et-text-muted);
  margin: 0 0 12px;
}

.uptp-expense-tracker .uptp-et-prog-item {
  margin-bottom: 12px;
}

.uptp-expense-tracker .uptp-et-prog-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}

.uptp-expense-tracker .uptp-et-prog-label {
  font-size: 12px;
  color: var(--et-text-muted);
  font-weight: 500;
}

.uptp-expense-tracker .uptp-et-prog-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--et-text);
}

.uptp-expense-tracker .uptp-et-prog-track {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
}

.uptp-expense-tracker .uptp-et-prog-fill {
  height: 100%;
  border-radius: 99px;
  width: 0%;
  transition: width 0.4s ease, background-color 0.3s;
}

/* ================================================================
   DESKTOP HEIGHT-AWARE STICKY PANEL
   Applied only on desktop (≥1025px) where the panel is sticky.
   Tablet/mobile panels are static/in-flow and unaffected.
   ================================================================ */

/* All desktop sizes: cap the panel height so it never overflows
   the viewport or slides under the action bar.
   Formula: 100vh − top-offset (130px) − action-bar (50px) − breathing room (10px) */
@media (min-width: 1025px) {
  .uptp-expense-tracker .uptp-et-panel-card {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
  }
}

/* Short desktop/laptop screens (height ≤ 800px): reduce top offset
   and shrink the donut so the panel fits without internal scroll pressure.
   Formula: 100vh − top-offset (100px) − action-bar (50px) − breathing room (20px) */
@media (min-width: 1025px) and (max-height: 800px) {
  .uptp-expense-tracker .uptp-et-right {
    top: 100px;
  }

  .uptp-expense-tracker .uptp-et-panel-card {
    max-height: calc(100vh - 170px);
  }

  .uptp-expense-tracker .uptp-et-donut-container {
    width: 130px;
    height: 130px;
  }
}

/* ================================================================
   RESPONSIVE — Tablet (≤1024px)
   ================================================================ */
@media (max-width: 1024px) {
  .uptp-expense-tracker .uptp-et-main {
    grid-template-columns: 1fr;
  }

  .uptp-expense-tracker .uptp-et-right {
    position: static;
  }

  .uptp-expense-tracker .uptp-et-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ================================================================
   RESPONSIVE — Mobile (≤640px)
   ================================================================ */
@media (max-width: 640px) {
  .uptp-expense-tracker .uptp-et-header {
    padding: 24px 16px;
  }

  .uptp-expense-tracker .uptp-et-header-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .uptp-expense-tracker .uptp-et-main {
    padding: 16px 12px;
  }

  .uptp-expense-tracker .uptp-et-col-header {
    display: none;
  }

  /* Stacked card rows on mobile */
  .uptp-expense-tracker .uptp-et-item-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    padding: 12px 12px;
    gap: 6px;
  }

  .uptp-expense-tracker .uptp-et-cell-name {
    grid-column: 1 / -1;
    font-weight: 600;
  }

  .uptp-expense-tracker .uptp-et-mob-label {
    display: block;
  }

  .uptp-expense-tracker .uptp-et-cell-est,
  .uptp-expense-tracker .uptp-et-cell-act,
  .uptp-expense-tracker .uptp-et-cell-diff,
  .uptp-expense-tracker .uptp-et-cell-status {
    text-align: left;
  }

  .uptp-expense-tracker .uptp-et-input-wrap {
    float: none;
    max-width: 120px;
  }

  /* Subtotal row stacked */
  .uptp-expense-tracker .uptp-et-sect-subtotal {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .uptp-expense-tracker .uptp-et-subt-label {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }

  .uptp-expense-tracker .uptp-et-subt-col {
    text-align: left;
  }

  /* Grand total */
  .uptp-expense-tracker .uptp-et-gt-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .uptp-expense-tracker .uptp-et-gt-value {
    font-size: 18px;
  }

  .uptp-expense-tracker .uptp-et-summary-bar {
    padding: 12px 16px;
  }
}

/* ================================================================
   DONUT CHART
   ================================================================ */
.uptp-expense-tracker .uptp-et-donut-wrap {
  margin-bottom: 20px;
}

.uptp-expense-tracker .uptp-et-donut-container {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 12px;
}

.uptp-expense-tracker .uptp-et-donut-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.uptp-expense-tracker .uptp-et-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

.uptp-expense-tracker .uptp-et-donut-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--et-text-muted);
  line-height: 1.4;
}

.uptp-expense-tracker .uptp-et-donut-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--et-text);
  line-height: 1.2;
}

.uptp-expense-tracker .uptp-et-donut-legend {
  padding: 0 4px;
}

.uptp-expense-tracker .uptp-et-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 11px;
}

.uptp-expense-tracker .uptp-et-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.uptp-expense-tracker .uptp-et-legend-label {
  flex: 1;
  color: var(--et-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uptp-expense-tracker .uptp-et-legend-pct {
  font-weight: 600;
  color: var(--et-text);
  flex-shrink: 0;
}

/* ================================================================
   ACTION BAR
   Desktop: fixed at viewport bottom while tracker is in view (JS-controlled).
   Mobile: always in-flow, no fixed positioning.
   ================================================================ */
.uptp-expense-tracker .uptp-et-action-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--et-summary-bg);
  border-top: 1px solid var(--et-border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}

/* JS adds this when tracker is actively in the viewport (fixed state) */
.uptp-expense-tracker .uptp-et-action-bar.uptp-et-bar-visible {
  display: block;
}

/* Docked: tracker bottom has reached viewport — settle bar at tracker bottom */
.uptp-expense-tracker .uptp-et-action-bar.uptp-et-bar-docked {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: none;
}

/* Prevent the fixed/docked bar from covering the grand total area.
   80px = ~bar height (50px) + ~30px visible breathing room above the bar. */
.uptp-expense-tracker.uptp-et-has-bar .uptp-et-main {
  padding-bottom: 80px;
}

.uptp-expense-tracker .uptp-et-action-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Left group: saved-state message + clear button */
.uptp-expense-tracker .uptp-et-action-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.uptp-expense-tracker .uptp-et-action-saved {
  font-size: 12px;
  color: var(--et-text-muted);
  white-space: nowrap;
}

/* Clear Saved Values — text-link style, no native button chrome */
.uptp-expense-tracker .uptp-et-action-clear {
  font-size: 11px;
  font-weight: 500;
  color: var(--et-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.uptp-expense-tracker .uptp-et-action-clear:hover {
  color: var(--et-pink);
}

.uptp-expense-tracker .uptp-et-action-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Base button — secondary/outlined style (Export CSV) */
.uptp-expense-tracker .uptp-et-action-btn {
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--et-border);
  background: transparent;
  color: var(--et-slate);
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

/* Primary button — Download Expense Report (first button in the group) */
.uptp-expense-tracker .uptp-et-action-btns button:first-child {
  background: var(--et-pink);
  color: #fff;
  border-color: var(--et-pink);
}

.uptp-expense-tracker .uptp-et-action-btn:disabled {
  pointer-events: none;
  opacity: 0.55;
}

/* Primary button hover (Print / Save Expense Report) */
.uptp-expense-tracker .uptp-et-action-btns button:first-child:hover {
  opacity: 0.88;
}

/* Secondary button hover (Export CSV) */
.uptp-expense-tracker .uptp-et-action-btns button:last-child:hover {
  border-color: var(--et-slate);
  background: rgba(106,124,139,0.08);
  color: var(--et-text);
}

/* ---- Print-only element (hidden on screen) ---- */
.uptp-expense-tracker .uptp-et-print-header {
  display: none;
}

/* Mobile: always visible in normal document flow */
@media (max-width: 640px) {
  .uptp-expense-tracker .uptp-et-action-bar,
  .uptp-expense-tracker .uptp-et-action-bar.uptp-et-bar-visible,
  .uptp-expense-tracker .uptp-et-action-bar.uptp-et-bar-docked {
    position: static;
    display: block;
    box-shadow: none;
    margin-top: 16px;
  }

  .uptp-expense-tracker.uptp-et-has-bar .uptp-et-main {
    padding-bottom: 0;
  }

  .uptp-expense-tracker .uptp-et-action-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ================================================================
   BUDGET MAKER HANDOFF NOTICE
   ================================================================ */

.uptp-expense-tracker .uptp-et-handoff-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #EBF8FF;
  border: 1px solid #90CDF4;
  border-radius: 6px;
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #2B6CB0;
}

.uptp-expense-tracker .uptp-et-handoff-notice.uptp-et-hidden {
  display: none;
}

.uptp-expense-tracker .uptp-et-handoff-dismiss {
  background: none;
  border: none;
  color: #2B6CB0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  opacity: 0.7;
}

.uptp-expense-tracker .uptp-et-handoff-dismiss:hover {
  opacity: 1;
}

/* ================================================================
   PRINT — @media print
   ================================================================ */

@media print {

  /* ---- Global site chrome — prevents site header/footer/nav/cookie bars from printing ---- */
  header,
  footer,
  nav,
  #header,
  #site-header,
  #masthead,
  #footer,
  #site-footer,
  #colophon,
  #wpadminbar,
  #wt-header,
  #wt-footer,
  .wt-header,
  .wt-footer,
  .wt-topbar,
  .wt-topbar-bar,
  .wt-header-wrap,
  .wt-navigation,
  .wt-main-menu,
  .wt-footer-widgets,
  .wt-footer-bottom,
  .site-header,
  .site-footer,
  .main-navigation,
  .primary-navigation,
  .site-navigation,
  .navbar,
  .topbar,
  .top-bar,
  .announcement-bar,
  .header-bar,
  .sticky-header,
  .elementor-location-header,
  .elementor-location-footer,
  [data-elementor-type="header"],
  [data-elementor-type="footer"],
  .cky-consent-container,
  .cky-modal,
  .cky-overlay,
  .cky-btn-revisit-wrapper,
  [class*="cky-"],
  [id*="cky-"],
  .cookieyes,
  .cookie-notice,
  .cookie-bar {
    display: none !important;
  }

  /* ---- Tracker wrapper ---- */
  .uptp-expense-tracker {
    position: static !important;
  }

  /* ---- Print-only report header ---- */
  .uptp-expense-tracker .uptp-et-print-header {
    display: block !important;
    border-bottom: 2px solid #252525;
    padding: 0 0 10px;
    margin-bottom: 14px;
    font-size: 14px;
    color: #000 !important;
  }

  .uptp-expense-tracker .uptp-et-print-header strong {
    font-size: 16px;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
  }

  /* ---- Hide screen-only elements ---- */
  .uptp-expense-tracker .uptp-et-header,
  .uptp-expense-tracker .uptp-et-action-bar,
  .uptp-expense-tracker .uptp-et-handoff-notice,
  .uptp-expense-tracker .uptp-et-mob-label {
    display: none !important;
  }

  /* ---- Single-column layout ---- */
  .uptp-expense-tracker .uptp-et-main {
    display: block !important;
    padding: 0 !important;
    background: #fff !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }

  .uptp-expense-tracker .uptp-et-right {
    position: static !important;
    margin-top: 24px;
  }

  .uptp-expense-tracker .uptp-et-panel-card {
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  /* ---- Summary bar ---- */
  .uptp-expense-tracker .uptp-et-summary-bar {
    max-width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .uptp-expense-tracker .uptp-et-summary-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    max-width: 100% !important;
  }

  /* ---- Table card ---- */
  .uptp-expense-tracker .uptp-et-table-card {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* ---- Prevent rows from breaking across pages ---- */
  .uptp-expense-tracker .uptp-et-item-row {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .uptp-expense-tracker .uptp-et-sect-subtotal {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .uptp-expense-tracker .uptp-et-sect-hdr {
    page-break-after: avoid;
    break-after: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .uptp-expense-tracker .uptp-et-grand-total {
    page-break-inside: avoid;
    break-inside: avoid;
    overflow: visible !important;
    box-shadow: none !important;
    margin-top: 16px !important;
  }

  /* ---- Actual cost inputs: render as plain text ---- */
  .uptp-expense-tracker .uptp-et-input-wrap {
    display: inline !important;
    position: static !important;
    float: none !important;
    max-width: none !important;
    width: auto !important;
  }

  .uptp-expense-tracker .uptp-et-dollar-prefix {
    position: static !important;
    display: inline !important;
    font-size: inherit !important;
    color: inherit !important;
  }

  .uptp-expense-tracker .uptp-et-actual {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    display: inline !important;
  }

  /* ---- Color rules ---- */
  .uptp-expense-tracker * {
    color: #000 !important;
  }

  /* Section header text stays white on colored row background */
  .uptp-expense-tracker .uptp-et-sect-title,
  .uptp-expense-tracker .uptp-et-sect-num {
    color: #fff !important;
  }

  /* Status banner: preserve background color and white text */
  .uptp-expense-tracker .uptp-et-status-banner {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color: #fff !important;
  }

  /* Semantic diff/budget colors */
  .uptp-expense-tracker .uptp-et-under {
    color: #2d6a2d !important;
  }

  .uptp-expense-tracker .uptp-et-over {
    color: #c91056 !important;
  }

  /* Preserve badge backgrounds, chart legend dots, progress fills, and SVG segment colors */
  .uptp-expense-tracker .uptp-et-badge,
  .uptp-expense-tracker .uptp-et-legend-dot,
  .uptp-expense-tracker .uptp-et-prog-fill,
  .uptp-expense-tracker .uptp-et-donut-svg circle {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}