/*
════════════════════════════════════════════════════════════════
  style.css — Invoice Creator

  TABLE OF CONTENTS
  1.  Reset & Base
  2.  Layout (app shell, topbar, panel)
  3.  Cards
  4.  Forms (inputs, labels, textareas, selects)
  5.  Buttons
  6.  Tab bar & tab content panels
  7.  Time tracker
  8.  Work days list
  9.  Line items list
  10. Invoice preview (printable layout)
  11. Search results
  12. Totals bar
  13. Recent clients dropdown
  14. Saved clients list
  15. Utility classes
  16. Print styles (@media print)
════════════════════════════════════════════════════════════════
*/


/* ════════════════════════════════════════
   1. RESET & BASE
════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  background: #f5f4f0;
  min-height: 100vh;
}


/* ════════════════════════════════════════
   2. LAYOUT
════════════════════════════════════════ */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #e0ded8;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-title { font-size: 15px; font-weight: 600; }
.topbar-btns  { display: flex; gap: 8px; }
.panel        { padding: 16px; }


/* ════════════════════════════════════════
   3. CARDS
════════════════════════════════════════ */
.card {
  background: #fff;
  border: 1px solid #e0ded8;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.card-title {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}


/* ════════════════════════════════════════
   4. FORMS
════════════════════════════════════════ */
.form-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 120px;
}
.form-group label { font-size: 12px; color: #666; }
input, textarea, select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #d0cec8;
  border-radius: 6px;
  font-size: 13px;
  background: #fafaf8;
  color: #1a1a1a;
  font-family: inherit;
  transition: border-color 0.15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: #4a90d9; }
textarea    { resize: vertical; min-height: 60px; }
input[readonly] { opacity: 0.65; cursor: default; background: #f0efe9; }


/* ════════════════════════════════════════
   5. BUTTONS
════════════════════════════════════════ */
.btn {
  padding: 7px 14px;
  border: 1px solid #d0cec8;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  background: #f0efe9;
  color: #1a1a1a;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn:hover   { background: #e8e6df; }
.btn:active  { transform: scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: #ddeeff; color: #185fa5; border-color: #a8caef; }
.btn-primary:hover { background: #cce0f5; }
.btn-success { background: #e0f0d0; color: #3b6d11; border-color: #aad080; }
.btn-success:hover { background: #d0e8c0; }
.btn-danger  { background: #fce8e8; color: #a32d2d; border-color: #f0a0a0; }
.btn-danger:hover  { background: #f8d8d8; }
/* Amber/orange — used for the Edit button to distinguish from red Delete */
.btn-edit    { background: #fff3d0; color: #7a5000; border-color: #e8c97a; }
.btn-edit:hover    { background: #ffe8a0; }
.btn-sm    { padding: 4px 10px; font-size: 12px; }
.btn-block { width: 100%; }


/* ════════════════════════════════════════
   6. TAB BAR & CONTENT
════════════════════════════════════════ */
.tabs {
  display: flex;
  border-bottom: 1px solid #e0ded8;
  background: #fff;
  overflow-x: auto;
}
.tab {
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  color: #888;
  user-select: none;
  transition: color 0.15s;
}
.tab:hover  { color: #1a1a1a; }
.tab.active { color: #1a1a1a; border-bottom-color: #1a1a1a; }
.tab-content        { display: none; }
.tab-content.active { display: block; }


/* ════════════════════════════════════════
   7. TIME TRACKER
════════════════════════════════════════ */
.time-display {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  padding: 10px 0;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.time-status {
  font-size: 12px;
  color: #888;
  text-align: center;
  margin-bottom: 10px;
}
.time-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.timer-running { color: #3b6d11; font-weight: 500; }
.timer-stopped { color: #a32d2d; font-weight: 500; }


/* ════════════════════════════════════════
   8. WORK DAYS LIST
════════════════════════════════════════ */
.day-entry {
  border: 1px solid #e8e6df;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}
/*
  Highlight a day entry that is currently being edited.
  editDay() in app.js adds this class; cancelEditDay() removes it.
*/
.day-entry.editing {
  border-color: #f0c060;
  background: #fffbf0;
}
.day-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}
.day-date  { font-weight: 600; font-size: 13px; }
.day-hours { font-size: 12px; color: #666; }
.day-desc  { font-size: 12px; color: #666; margin-top: 4px; line-height: 1.5; }
/* Row of action buttons (Edit + Remove) at the right of each day entry */
.day-actions { display: flex; gap: 6px; flex-shrink: 0; }


/* ════════════════════════════════════════
   9. LINE ITEMS LIST
════════════════════════════════════════ */
.line-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid #f0efe9;
}
.line-item:last-child { border-bottom: none; }
.line-item-desc { flex: 1; font-size: 13px; }
.line-item-amt  { font-size: 13px; font-weight: 600; min-width: 70px; text-align: right; }


/* ════════════════════════════════════════
   10. INVOICE PREVIEW
   Styles for the printable invoice rendered in tab-preview.

   KEY DESIGN DECISION — "screen-only" detail rows:
   Some rows in the invoice table carry the class "screen-only".
   These rows show on screen (so you have your records) but
   @media print hides them via display:none. See section 16.
════════════════════════════════════════ */
.invoice-preview {
  background: #fff;
  border: 1px solid #e0ded8;
  border-radius: 10px;
  padding: 24px;
  font-size: 12px;
  line-height: 1.6;
}
.inv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.inv-sender .biz-name { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.inv-meta             { text-align: right; }
.inv-meta .inv-title  { font-size: 22px; font-weight: 700; letter-spacing: 0.12em; color: #888; }
.inv-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e0ded8;
}
.inv-from-label, .inv-to-label {
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
/* Envelope-window box for the Bill To address */
.inv-to-block {
  border: 1px solid #c0beb8;
  padding: 8px 12px;
  border-radius: 4px;
  line-height: 1.7;
}
.inv-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.inv-table th {
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 6px;
  border-bottom: 1px solid #e0ded8;
  text-align: left;
}
.inv-table th:last-child,
.inv-table td:last-child { text-align: right; }
.inv-table td {
  padding: 6px;
  border-bottom: 1px solid #f0efe9;
  font-size: 12px;
  vertical-align: top;
}

/*
  SCREEN-ONLY ROWS
  These table rows appear in the on-screen preview so you can
  review the detail (rate, break info) for your own records.
  The @media print block below hides them entirely when printing,
  so the client never sees them on the PDF/paper.
*/
/*
  .screen-only rows are HIDDEN by default.
  They become visible only when the parent invoice wrapper has the
  .detail-visible class, which is toggled by the "Show Time Detail"
  button in the Preview tab (see toggleTimeDetail() in app.js).
  @media print always hides them regardless of the toggle state.
*/
.screen-only {
  display: none; /* hidden by default — toggle reveals */
}

/* When parent has .detail-visible, show the screen-only rows */
.detail-visible .screen-only {
  display: table-row;
  background: #fffbee; /* subtle yellow tint — easy to spot on screen */
}

/* Small label inside screen-only cells */
.screen-only-label {
  font-size: 10px;
  color: #b08000;
  font-style: italic;
  margin-left: 4px;
}

/*
  The toggle button — amber when active (detail showing),
  normal gray when detail is hidden.
*/
.btn-active-detail {
  background: #fff3d0 !important;
  color: #7a5000 !important;
  border-color: #e8c97a !important;
}

.inv-totals      { display: flex; justify-content: flex-end; }
.inv-totals-box  { min-width: 200px; }
.inv-total-row   { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; }
.inv-total-row.grand {
  font-weight: 700;
  font-size: 14px;
  border-top: 1px solid #e0ded8;
  padding-top: 6px;
  margin-top: 4px;
}

/*
  COMBINED DESCRIPTION PARAGRAPH
  All the day-by-day work descriptions are joined into a single
  paragraph block at the bottom of the invoice table.
  On screen it appears normally; it prints fine too.
*/
.inv-desc-block {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid #e8e6df;
  border-radius: 6px;
  background: #fafaf8;
  font-size: 12px;
  line-height: 1.7;
  color: #333;
}
.inv-desc-label {
  font-size: 10px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.inv-footer {
  margin-top: 30px;
  padding-top: 12px;
  border-top: 1px solid #e0ded8;
  font-size: 11px;
  color: #888;
  font-style: italic;
}


/* ════════════════════════════════════════
   11. SEARCH RESULTS
════════════════════════════════════════ */
.search-result {
  padding: 10px;
  border: 1px solid #e0ded8;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.search-result:hover { background: #f5f4f0; }
.sr-top   { display: flex; justify-content: space-between; }
.sr-num   { font-weight: 600; font-size: 13px; }
.sr-amt   { font-size: 13px; color: #3b6d11; font-weight: 600; }
.sr-client{ font-size: 12px; color: #888; }


/* ════════════════════════════════════════
   12. TOTALS BAR
════════════════════════════════════════ */
.totals-bar { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.total-pill {
  background: #f5f4f0;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.total-pill-label { font-size: 11px; color: #888; margin-bottom: 2px; }
.total-pill-val   { font-size: 17px; font-weight: 700; }


/* ════════════════════════════════════════
   13. RECENT CLIENTS DROPDOWN
════════════════════════════════════════ */
.client-selector {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e6df;
}
.client-selector .form-group { flex: 1; }
#recent-clients-select {
  background: #ddeeff;
  color: #185fa5;
  border-color: #a8caef;
  font-weight: 500;
  cursor: pointer;
}


/* ════════════════════════════════════════
   14. SAVED CLIENTS LIST
════════════════════════════════════════ */
.client-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #e8e6df;
  border-radius: 8px;
  margin-bottom: 6px;
}
.client-row-info { font-size: 13px; }
.client-row-sub  { font-size: 11px; color: #888; }
.client-row-btns { display: flex; gap: 6px; }


/* ════════════════════════════════════════
   15. UTILITY CLASSES
════════════════════════════════════════ */
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.badge        { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.badge-info   { background: #ddeeff; color: #185fa5; }
.empty-state  { text-align: center; color: #aaa; padding: 20px; font-size: 13px; line-height: 1.6; }



/* ════════════════════════════════════════
   SEGMENTS LIST (Time Tracker tab)
   Each segment row shows start → end, duration, and a remove button.
   Break gap rows appear between segments showing the gap time.
════════════════════════════════════════ */

/* One segment: start → end | duration | remove button */
.segment-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #d4edda;         /* clear green — active work time */
  border: 1px solid #7dc491;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 13px;
}

.segment-times {
  flex: 1;
  font-weight: 500;
}

.segment-duration {
  font-size: 12px;
  color: #3b6d11;
  font-weight: 600;
  min-width: 55px;
  text-align: right;
}

/* Break gap row shown BETWEEN segments — derived, not entered */
.segment-break-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #fff8e8;         /* light amber — break/away time */
  border: 1px solid #e8d090;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  color: #7a5000;
  font-style: italic;
}

/* Summary row at the bottom: total hours + total break */
.segment-summary {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px 2px;
  font-size: 12px;
  color: #555;
  border-top: 1px solid #e8e6df;
  margin-top: 4px;
}

.segment-summary strong {
  color: #1a1a1a;
  font-size: 13px;
}

/* ════════════════════════════════════════
   16. PRINT STYLES
   When window.print() is called (or the user prints from
   the browser), these rules apply on top of everything else.
════════════════════════════════════════ */
@media print {

  /* Hide all app chrome: topbar, tabs, action buttons, etc. */
  .no-print { display: none !important; }

  body { background: white; font-size: 11px; }
  .panel { padding: 0; }

  .invoice-preview {
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  /* Force the preview panel to show even if another tab was active */
  #tab-preview.tab-content { display: block !important; }

  .inv-table { page-break-inside: avoid; }

  /*
    screen-only rows: NO print override here.
    The toggle button fully controls visibility on screen AND in print.
    If detail is toggled ON  → rows show on screen and print.
    If detail is toggled OFF → rows hidden on screen and in print.
    What you see is what you get.
  */

  /* Strip the yellow tint when printing so it looks clean on paper */
  .detail-visible .screen-only {
    background: white;
  }
}