/* =============================================================================
   MY BUDGET APP - Main Stylesheet
   style.css
   
   TABLE OF CONTENTS:
   1.  CSS Variables (Colors, Spacing)
   2.  Reset & Base
   3.  Header
   4.  Navigation Bar (Tabs)
   5.  Content Area
   6.  Cards
   7.  Grid Layout
   8.  Forms & Inputs
   9.  Buttons
   10. Tables - Base Styles
   11. Tables - Bills & Expenses Column Widths  <-- EDIT HERE TO ADJUST COLUMNS
   12. Tables - Money In Column Widths          <-- EDIT HERE TO ADJUST MONEY IN
   13. Table Inputs (inline editing)
   14. Special UI Components (check button, delete button, tags)
   15. Summary Section
   16. Income Rows
   17. Total Row
   18. Bank Section
   19. Responsive - Mobile (max-width: 600px)
   20. Print Styles
   ============================================================================= */


/* =============================================================================
   1. CSS VARIABLES
   Colors, borders, and backgrounds used throughout the app.
   Change these to restyle the entire app at once.
   ============================================================================= */
:root {
  /* Brand Colors */
  --green:        #c9a84c;
  --green-light:  #f5edd8;
  --green-dark:   #9a7830;

  --red:          #d13b3b;
  --red-light:    #fdeaea;
  --red-bg:       #fff5f5;

  --blue:         #2563eb;
  --blue-light:   #eff6ff;

  --orange:       #ea580c;
  --orange-light: #fff7ed;

  /* Backgrounds */
  --bg:           #f5f4f0;  /* Page background */
  --white:        #ffffff;  /* Card/surface background */
  --paid-bg:      #fdf8ee;  /* Paid row background (green tint) */

  /* Text */
  --text:         #393a3d;  /* Primary text */
  --text-light:   #6b6c70;  /* Secondary text */
  --text-muted:   #9a9b9e;  /* Hint text */

  /* Borders */
  --border:       rgba(45,45,45,0.25);  /* Standard border */
  --border-light: rgba(45,45,45,0.12);  /* Subtle border */
}


/* =============================================================================
   2. RESET & BASE
   ============================================================================= */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}


/* =============================================================================
   3. HEADER
   Top bar with logo, month navigation, and user info.
   ============================================================================= */
.header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 57px;
}

.logo             { display: flex; align-items: center; gap: 8px; }
.logo-icon        { width: 30px; height: 30px; background: var(--green); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; }
.logo-text        { font-size: 15px; font-weight: 700; }
.logo-sub         { font-size: 10px; color: var(--text-muted); }

.month-nav        { display: flex; align-items: center; gap: 6px; }
.month-nav button { background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; cursor: pointer; font-size: 14px; color: var(--text); font-family: inherit; }
.month-label      { background: var(--green-light); color: var(--green-dark); padding: 6px 14px; border-radius: 4px; font-weight: 600; font-size: 14px; min-width: 130px; text-align: center; box-sizing: border-box; border: 1px solid transparent; }


/* =============================================================================
   4. NAVIGATION BAR (TABS)
   The tab row below the header.
   ============================================================================= */
.nav          { background: var(--white); border-bottom: 1px solid var(--border); padding: 4px 16px; display: flex; gap: 2px; overflow-x: auto; position: sticky; top: 57px; z-index: 99; }
.nav button   { background: transparent; border: none; color: var(--text-light); padding: 7px 12px; border-radius: 4px; cursor: pointer; font-weight: 400; font-size: 13px; white-space: nowrap; font-family: inherit; }
.nav button.active { background: var(--green); color: #fff; font-weight: 600; }


/* =============================================================================
   5. CONTENT AREA
   ============================================================================= */
.content       { padding: 16px 32px; margin: 0 auto; max-width: 1420px; }
.section-title { font-size: 18px; font-weight: 600; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }


/* =============================================================================
   6. CARDS
   White surface containers used throughout the app.
   ============================================================================= */
.card             { background: var(--white); border: 1px solid var(--border-light); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.card-label       { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.card-value       { font-size: 24px; font-weight: 600; }
.card-value.green { color: var(--green); }
.card-value.red   { color: var(--red); }
.card-value.blue  { color: var(--blue); }


/* =============================================================================
   7. GRID LAYOUT
   Dashboard summary cards grid.
   ============================================================================= */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }


/* =============================================================================
   8. FORMS & INPUTS
   All input fields, selects, and labels.
   ============================================================================= */
input[type="number"],
input[type="text"],
input[type="password"],
select {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 14px;
  width: 100%;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  height: 36px;
}

/* Custom dropdown arrow — removes browser default double arrow */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

input:focus,
select:focus { border-color: var(--green); }

label        { font-size: 12px; color: var(--text-light); display: block; margin-bottom: 3px; }
.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-actions { display: flex; gap: 8px; margin-top: 12px; }

/* Remove number input spinners */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* =============================================================================
   9. BUTTONS
   ============================================================================= */
.btn           { padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 13px; font-family: inherit; border: none; }
.btn-primary   { background: var(--green); color: #fff; }
.btn-secondary { background: var(--white); border: 1px solid var(--border); color: var(--text); }
.btn-danger    { background: var(--white); border: 1px solid #f0c0c0; color: var(--red); }
.btn-sm        { padding: 5px 10px; font-size: 12px; }


/* =============================================================================
   10. TABLES - BASE STYLES
   Applies to all tables in the app.
   ============================================================================= */
.table-wrap          { -webkit-overflow-scrolling: touch; }
.table-wrap-scroll   { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table        { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; }

thead tr     { background: #2d2d2d; border-bottom: none; }
th           { padding: 13px 8px; font-size: 11px; color: #ffffff; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; white-space: nowrap; }

th:first-child,
td:first-child { padding-left: 16px; }

th:last-child,
td:last-child  { padding-right: 16px; }

td             { padding: 8px 8px; }

tbody tr              { border-bottom: 1px solid var(--border-light); height: 44px; }
tbody tr:nth-child(even) { background: #fafbf8; }
tbody tr.paid-row     { background: var(--paid-bg); }    /* Gold tint — bill is paid */
tbody tr.cleared-row  { background: var(--paid-bg); }    /* Same gold — cleared, in bank = 0 */
tbody tr.ready-row    { background: var(--blue-light); } /* Blue tint — partial payment entered */

tfoot tr { background: #f0ead8; border-top: none; font-weight: 700; color: #2d2d2d; }


/* =============================================================================
   11. TABLES - BILLS & EXPENSES COLUMN WIDTHS
   Edit min-width values here to adjust column widths in Bills & Expenses.
   ============================================================================= */
.col-category { width: 100%; padding: 5px 4px; font-size: 12px; }  /* Category dropdown */
.col-paidfrom { width: 100%; padding: 5px 4px; font-size: 12px; }  /* Paid From dropdown */
.col-type     { width: 100%; padding: 5px 4px; font-size: 12px; }  /* Type (Manual/Auto-pay) */

/* Bills & Expenses table — read-only rows, dblclick to edit */
/* Bills & Expenses table — 14 columns */
.bills-table { table-layout: fixed; min-width: 1200px; width: 100%; }
.bills-table th:nth-child(1),  .bills-table td:nth-child(1)  { width: 18%; text-align: left; }
.bills-table th:nth-child(2),  .bills-table td:nth-child(2)  { width: 10%; text-align: left; }
.bills-table th:nth-child(3),  .bills-table td:nth-child(3)  { width: 10%; text-align: left; }
.bills-table th:nth-child(4),  .bills-table td:nth-child(4)  { width: 7%;  text-align: left; }
.bills-table th:nth-child(5),  .bills-table td:nth-child(5)  { width: 8%;  text-align: right; }
.bills-table th:nth-child(6),  .bills-table td:nth-child(6)  { width: 8%;  text-align: right; }
.bills-table th:nth-child(7),  .bills-table td:nth-child(7)  { width: 8%;  text-align: right; }
.bills-table th:nth-child(8),  .bills-table td:nth-child(8)  { width: 5%;  text-align: right; }
.bills-table th:nth-child(9),  .bills-table td:nth-child(9)  { width: 7%;  text-align: right; }
.bills-table th:nth-child(10), .bills-table td:nth-child(10) { width: 5%;  text-align: center; }
.bills-table th:nth-child(11), .bills-table td:nth-child(11) { width: 4%;  text-align: center; }
.bills-table th:nth-child(12), .bills-table td:nth-child(12) { width: 4%;  text-align: center; }
.bills-table th:nth-child(13), .bills-table td:nth-child(13) { width: 7%;  text-align: center; }
.bills-table th:nth-child(14), .bills-table td:nth-child(14) { width: 3%;  text-align: center; }
.bills-row { cursor: default; }
.bills-row:hover { background: #f5f3ec !important; }
.bills-row.paid-row:hover { background: #f5edd8 !important; }

/* Bill Edit Modal */
#bill-edit-modal       { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; }
.bmodal-overlay        { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.bmodal-box            { position: relative; background: #fff; border-radius: 10px; width: 520px; max-width: 95vw; box-shadow: 0 8px 40px rgba(0,0,0,0.18); z-index: 1; }
.bmodal-header         { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.bmodal-title          { font-size: 16px; font-weight: 700; }
.bmodal-close          { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-muted); line-height: 1; padding: 0 4px; }
.bmodal-body           { padding: 20px; }
.bmodal-grid           { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bmodal-field label    { font-size: 12px; color: var(--text-light); display: block; margin-bottom: 3px; }
.bmodal-footer         { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
td:has(.col-balance), td:has(.col-minimum), td:has(.col-amtpaid), td:has(.col-fee), td:has(.col-inbank),
td.col-balance, td.col-minimum, td.col-amtpaid, td.col-fee, td.col-inbank { text-align: right; }

/* bills-table tfoot: first td has colspan=4, so balance is nth-child(2) */
.bills-table tfoot td:nth-child(1) { text-align: left; }
.bills-table tfoot td:nth-child(2) { text-align: right; width: 9%; }
.bills-table tfoot td:nth-child(3) { text-align: right; width: 9%; }
.bills-table tfoot td:nth-child(4) { text-align: right; width: 9%; }
.bills-table tfoot td:nth-child(5) { text-align: right; width: 7%; }
.bills-table tfoot td:nth-child(6) { text-align: right; width: 7%; }
td:has(.col-due) { text-align: center; }
.col-balance  { width: 100%; text-align: right; padding: 5px 8px; font-size: 13px; }
.col-minimum  { width: 100%; text-align: right; padding: 5px 8px; font-size: 13px; }
.col-amtpaid  { width: 100%; text-align: right; padding: 5px 8px; font-size: 13px; }
.col-fee      { width: 100%; text-align: right; padding: 5px 8px; font-size: 13px; }
.col-inbank   { width: 100%; text-align: right; padding: 5px 8px; font-size: 13px; }
.col-due      { width: 100%; padding: 5px 4px; font-size: 13px; text-align: center; }

/* Inline number inputs inside table cells */
.cell-input    { width: 110px; text-align: right; padding: 5px 8px; font-size: 13px; -moz-appearance: textfield; }
.cell-input-sm { width: 75px;  text-align: right; padding: 5px 8px; font-size: 13px; -moz-appearance: textfield; }
.cell-input::-webkit-outer-spin-button,
.cell-input::-webkit-inner-spin-button,
.cell-input-sm::-webkit-outer-spin-button,
.cell-input-sm::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* =============================================================================
   12. TABLES - MONEY IN COLUMN WIDTHS
   Edit width values here to adjust column widths in the Money In table.
   These classes are also applied to tfoot so totals align perfectly.
   ============================================================================= */
.mi-date    { width: 110px; white-space: nowrap; }   /* Date column */
.mi-type    { width: 110px; }                         /* Type (pill badge) column */
.mi-memo    { }                                        /* Memo column — fills remaining space */
.mi-amount  { width: 130px; text-align: right; white-space: nowrap; } /* Amount column */
.mi-actions { width: 90px;  text-align: right; white-space: nowrap; } /* Edit/Delete buttons column */


/* =============================================================================
   13. TABLE INPUTS (INLINE EDITING)
   Inputs inside table cells are borderless until hovered or focused.
   ============================================================================= */
tbody select,
tbody input[type="text"].tab-field {
  border: 1px solid transparent;
  background: transparent;
}
tbody select:hover,
tbody input[type="text"].tab-field:hover { border-color: var(--border-light); }
tbody select:focus,
tbody input[type="text"].tab-field:focus { border-color: var(--green); background: var(--white); }


/* =============================================================================
   14. SPECIAL UI COMPONENTS
   ============================================================================= */

/* Paid/unpaid toggle checkbox button */
.check-btn         { width: 24px; height: 24px; min-width: 24px; min-height: 24px; border-radius: 4px; border: 2px solid var(--border); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; box-sizing: border-box; flex-shrink: 0; vertical-align: middle; }
.check-btn.checked { border: 2px solid var(--green); background: var(--green); }

/* Delete / remove button (trash icon) */
.del-btn       { background: none; border: none; color: var(--red); cursor: pointer; font-size: 18px; opacity: 0.4; }
.del-btn:hover { opacity: 1; }
.del-btn svg   { width: 18px; height: 18px; }

/* Small badge tag (e.g. AUTO, 7 bills) */
.tag { font-size: 9px; color: var(--text-muted); background: var(--border-light); padding: 1px 5px; border-radius: 3px; margin-left: 4px; }


/* =============================================================================
   15. SUMMARY SECTION
   Used in the Summary tab.
   ============================================================================= */
.summary-row            { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.summary-row:last-child { border-bottom: none; }
.summary-row-bold       { border-top: 2px solid var(--border); padding-top: 10px; margin-top: 4px; border-bottom: none; }
.summary-row + .summary-row-bold { border-bottom: none; }
.summary-row:has(+ .summary-row-bold) { border-bottom: none; }
.summary-label          { color: var(--text-light); font-size: 14px; }
.summary-value          { font-weight: 600; font-size: 14px; }
.summary-value.green    { color: var(--green); }
.summary-value.blue     { color: var(--blue); }


/* =============================================================================
   16. INCOME ROWS
   Used in the old Income section (kept for backward compatibility).
   ============================================================================= */
.income-row                   { padding: 10px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-light); font-size: 14px; }
.income-row:nth-child(even)   { background: #fafbf8; }


/* =============================================================================
   17. TOTAL ROW
   Bottom totals row inside cards (flex layout, not table).
   ============================================================================= */
.total-row { padding: 12px 16px; display: flex; justify-content: space-between; background: #f8f9f6; border-top: 2px solid var(--border); }


/* =============================================================================
   18. BANK SECTION
   ============================================================================= */
.bank-group { display: flex; flex-direction: column; gap: 10px; }
.bank-total { border-top: 1px solid var(--border-light); padding-top: 10px; display: flex; justify-content: space-between; margin-top: 4px; }


/* =============================================================================
   19. RESPONSIVE - MOBILE (max-width: 600px)
   Adjustments for small screens. See also mobile.css for card-based layouts.
   ============================================================================= */
@media (max-width: 600px) {
  .content        { padding: 12px; }
  .grid           { grid-template-columns: 1fr; }
  .card-value     { font-size: 20px; }
  .month-label    { min-width: 110px; font-size: 12px; }
  .form-grid      { grid-template-columns: 1fr; }
  th, td          { padding: 6px 4px; }
  .cell-input     { width: 70px; }
  .cell-input-sm  { width: 50px; }
}


/* =============================================================================
   20. PRINT STYLES
   Print is handled by printSummary() which opens a clean window with its own styles.
   No @media print rules needed here.
   ============================================================================= */

/* =============================================================================
   STICKY TABLE HEADERS
   Only applied to Bills & Expenses and Manage Bills tables.
   Use class .sticky-thead on the <table> element.
   top = header height (57px) + nav height (40px) + subtab height (44px) = 141px
   ============================================================================= */
.sticky-thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #2d2d2d;
}

/* Border radius on table headers — works even with overflow:visible on card */
.card-no-pad thead tr th:first-child,
.card-no-pad-900 thead tr th:first-child { border-radius: 7px 0 0 0; }
.card-no-pad thead tr th:last-child,
.card-no-pad-900 thead tr th:last-child  { border-radius: 0 7px 0 0; }
thead th .sort-due-btn,
.sort-due-btn {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  user-select: none;
  font-family: inherit;
  text-decoration: none;
}
thead th .sort-due-btn:hover,
.sort-due-btn:hover { background: rgba(255,255,255,0.1); }

/* =============================================================================
   21. LAYOUT UTILITIES
   Replaces inline styles throughout index.html
   ============================================================================= */

/* Header */
.logo-img                { width: 40px; height: 40px; }
.month-nav               { position: absolute; left: 50%; transform: translateX(-50%); }
.header-user             { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-light); }
.btn-logout              { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 14px; cursor: pointer; color: var(--text-light); font-family: inherit; }

/* Dashboard */
.dash-wrap               { max-width: 1200px; margin: 0 auto; }
.dash-kpi-grid           { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 16px; }
.dash-subtitle           { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }
.dash-grid-5             { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; margin-bottom: 16px; }
.dash-grid-3             { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.dash-grid-3-stats       { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 20px; }
.dash-cards-row          { display: flex; gap: 16px; margin-bottom: 16px; }
.card-stat               { padding: 14px 16px; margin-bottom: 0; }
.card-stat-label         { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.card-stat-sub           { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.card-stat-value         { font-size: 22px; font-weight: 600; }
.card-green              { flex: 1; border: 2px solid var(--green); }
.card-blue               { flex: 1; border: 2px solid var(--blue); }
.card-label-green        { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--green); font-weight: 600; margin-bottom: 4px; }
.card-label-blue         { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--blue); font-weight: 600; margin-bottom: 4px; }
.card-desc               { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.card-no-mb              { margin-bottom: 0; }
.card-chart-label        { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 12px; }
.chart-h180              { height: 180px; position: relative; }
.chart-h120              { height: 120px; position: relative; }

/* Progress bar */
.dash-progress-wrap      { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.dash-progress-bar       { flex: 1; height: 8px; background: var(--border-light); border-radius: 4px; overflow: hidden; }
.dash-tabs               { display: flex; gap: 0; margin-bottom: 12px; border-bottom: 2px solid var(--border-light); }

/* Bills & Expenses */
.bills-subtab-bar        { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid var(--border); }
.section-title-row       { display: flex; gap: 8px; }
.card-no-pad             { padding: 0; overflow: visible; }
.card-no-pad-900         { padding: 0; overflow: visible; max-width: 900px; }
.th-left                 { text-align: left; }
.th-right                { text-align: right; }
.th-center               { text-align: center; }
.tfoot-label             { text-align: left; padding: 10px 16px; font-weight: 700; }
.bill-name-cell          { font-weight: 500; white-space: nowrap; }

/* CC assignment panel */
.cc-assign-panel         { padding: 4px 8px 10px 8px; border-top: none; }
.cc-assign-inner         { background: var(--blue-light); border: 1px solid #c7d2fe; border-radius: 6px; padding: 10px 12px; margin-left: 8px; }
.cc-assign-header        { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cc-assign-label         { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 12px; color: var(--blue); font-weight: 600; margin: 0; }
.cc-assign-hint          { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.btn-close-sm            { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 0 4px; }

/* Add bill form */
.add-bill-fields         { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.add-bill-field          { min-width: 120px; }
.add-bill-hint           { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.add-bill-footer         { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.add-bill-footer-text    { font-size: 12px; color: var(--text-muted); }
.link-green              { color: var(--green); }

/* Manage Bills */
.manage-wrap             { max-width: 900px; margin: 0 auto; }
.manage-subtitle         { font-size: 13px; color: var(--text-light); margin-bottom: 12px; }
.card-green-border       { border-color: var(--green); }
.card-green-border-2     { border-color: var(--green); border-width: 2px; }
.form-section-title      { font-weight: 600; color: var(--green); margin-bottom: 10px; }
.form-section-title-12   { font-weight: 600; color: var(--green); margin-bottom: 12px; }

/* Categories */
.categories-wrap         { max-width: 700px; margin: 0 auto; }
.cat-subtitle            { font-size: 13px; color: var(--text-light); margin-bottom: 12px; }
.cat-row                 { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.form-row                { display: flex; gap: 8px; align-items: flex-end; }
.form-field-flex         { flex: 1; }
.form-actions-row        { display: flex; gap: 8px; margin-top: 10px; }
.checkbox-label          { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 13px; margin: 0; padding-bottom: 8px; }

/* Deposit types */
.dep-type-row            { display: flex; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-light); }
.dep-row                 { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-light); }
.dep-row-right           { text-align: right; }
.dep-row-btns            { display: flex; gap: 6px; }
.card-dep-types          { max-width: 420px; margin-bottom: 16px; }
.input-color             { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.btn-margin-auto         { margin-top: auto; }

/* Money In */
.moneyin-wrap            { max-width: 900px; margin: 0 auto; }
.moneyin-tabs            { display: flex; gap: 8px; }
.card-starting-bal       { margin-bottom: 16px; display: flex; align-items: center; gap: 16px; }
.starting-bal-label      { margin: 0; white-space: nowrap; min-width: 220px; }
.card-deposits           { padding: 0; overflow: hidden; margin-bottom: 16px; }
.dep-table               { table-layout: auto; width: 100%; }
.tfoot-total-row         { border-top: 2px solid var(--border); }
tfoot .mi-amount { color: #2d2d2d !important; }
.tfoot-moneyin-label     { font-weight: 700; font-size: 15px; color: #2d2d2d; }
.tfoot-moneyin-row       { border-top: 1px solid rgba(45,45,45,0.25); }
.card-new-deposit        { max-width: 900px; margin-bottom: 16px; }
.card-edit-deposit       { max-width: 900px; margin-bottom: 16px; border-color: var(--green); }
.deposit-form-grid       { display: grid; grid-template-columns: 140px 160px 160px 1fr auto; gap: 12px; align-items: end; }
.deposit-form-btns       { display: flex; gap: 8px; }

/* Summary */
.summary-wrap            { max-width: 900px; margin: 0 auto; }
.summary-grid-2          { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.summary-grid-2-last     { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card-need-bank          { border-color: var(--green); border-width: 2px; }
.card-need-bank-label    { color: var(--green); font-size: 13px; }
.card-need-bank-desc     { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.card-need-bank-row      { display: flex; justify-content: space-between; align-items: center; }
.card-need-bank-amount   { text-align: right; font-size: 15px; }
.summary-section         { border-top: 1px solid var(--border-light); margin-top: 16px; padding-top: 16px; }
.summary-progress        { height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.summary-row-bold        { border-top: 2px solid var(--border); padding-top: 10px; margin-top: 4px; }
.summary-label-bold      { font-weight: 600; }
.cc-summary-row-bold     { border-top: 2px solid var(--border); padding-top: 10px; margin-top: 4px; }

/* Settings */
.settings-wrap           { max-width: 700px; margin: 0 auto; }
.settings-tabs           { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--border); padding-bottom: 0; }
.settings-h3             { font-weight: 600; margin-bottom: 6px; }
.settings-h3-red         { font-weight: 600; margin-bottom: 6px; color: var(--red); }
.settings-p              { font-size: 13px; color: var(--text-light); margin-bottom: 12px; }
.print-btn               { display: flex; align-items: center; gap: 4px; }

/* Dashboard bill rows */
.dash-bill-row           { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-light); }
.dash-bill-left          { display: flex; align-items: center; gap: 8px; }
.dash-bill-right         { text-align: right; }
.dash-cat-row            { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.dash-empty              { padding: 12px 0; font-size: 13px; color: var(--text-muted); text-align: center; }
.card-max700             { max-width: 700px; }
.col-date                { width: 120px; }
.col-type-dep            { width: 150px; }
.col-memo                { width: 130px; }
.col-amount-dep          { width: 90px; }
.summary-note            { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.sort-date-btn { background: none; border: 1px solid rgba(255,255,255,0.5); border-radius: 4px; padding: 1px 6px; font-size: 11px; cursor: pointer; color: #ffffff !important; font-family: inherit; font-weight: 600; }


/* =============================================================================
   22. MANAGE USERS PAGE
   Styles for manage-users.html
   ============================================================================= */
.mu-page            { max-width: 860px; margin: 0 auto; padding: 32px 24px 60px; }
.mu-section-title   { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; margin-top: 32px; }
.mu-section-title:first-child { margin-top: 0; }

.mu-alert           { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 24px; }
.mu-alert-success   { background: var(--green-light); border: 1px solid var(--green); color: var(--green-dark); }
.mu-alert-error     { background: var(--red-light); border: 1px solid var(--red); color: var(--red); }

.mu-card            { background: var(--white); border: 1px solid var(--border); border-radius: 8px; overflow: visible; }

.mu-table           { width: 100%; border-collapse: collapse; font-size: 13px; }
.mu-table thead tr  { background: #2d2d2d; border-radius: 7px 7px 0 0; }
.mu-table th        { padding: 13px 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #ffffff; }
.mu-table th:first-child { border-radius: 7px 0 0 0; }
.mu-table th:last-child  { text-align: right; border-radius: 0 7px 0 0; }
.mu-table td        { padding: 14px 20px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.mu-table tbody tr:last-child td { border-bottom: none; }
.mu-user-name       { font-weight: 500; }
.mu-user-username   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.mu-role-badge      { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.mu-role-admin      { background: var(--blue-light); color: var(--blue); }
.mu-role-viewer     { background: var(--green-light); color: var(--green-dark); }
.mu-role-user       { background: #fef3c7; color: #92400e; }

.mu-actions-cell    { display: flex; align-items: center; justify-content: flex-end; position: relative; }
.mu-menu-btn        { background: none; border: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-light); transition: background .15s; letter-spacing: 1px; }
.mu-menu-btn:hover  { background: var(--border); }
.mu-dropdown        { position: absolute; right: 0; top: 40px; background: var(--white); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); z-index: 100; min-width: 160px; overflow: hidden; display: none; }
.mu-dropdown.open   { display: block; }
.mu-dropdown-item   { display: block; width: 100%; padding: 12px 16px; background: none; border: none; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; cursor: pointer; color: var(--text); white-space: nowrap; font-family: inherit; }
.mu-dropdown-item:last-child { border-bottom: none; }
.mu-dropdown-item:hover { background: var(--bg); }
.mu-dropdown-item.danger { color: var(--red); }
.mu-dropdown-item.danger:hover { background: var(--red-bg); }

.mu-create-form     { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 24px; }
.mu-form-grid       { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.mu-field label     { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-light); margin-bottom: 5px; }

.mu-modal-overlay   { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.mu-modal-overlay.open { display: flex; }
.mu-modal           { background: var(--white); border-radius: 10px; padding: 28px; width: 100%; max-width: 380px; box-shadow: 0 8px 40px rgba(0,0,0,0.18); animation: muFadeIn .2s ease; }
@keyframes muFadeIn { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.mu-modal h3        { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.mu-modal p         { font-size: 13px; color: var(--text-light); margin-bottom: 20px; line-height: 1.5; }
.mu-modal-actions   { display: flex; gap: 10px; }
.mu-modal-actions .btn { flex: 1; justify-content: center; }
.mu-modal-field     { margin-bottom: 12px; }
.mu-modal-field label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-light); margin-bottom: 5px; display: block; }


/* =============================================================================
   23. LOGIN PAGE (login.html)
   Full-page centered login card. Overrides body layout for flex centering.
   ============================================================================= */

/* Body layout — centers the card vertically and horizontally */
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 16px;
  overscroll-behavior: none;
}

/* Login card container */
.login-card {
  background: var(--white);
  border-radius: 20px;
  padding: 32px 28px 28px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
}

/* Logo area */
.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* Page title */
.login-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 6px;
}

/* Subtitle below title */
.login-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 24px;
}

/* Form field wrapper */
.login-field {
  margin-bottom: 16px;
}

/* Input fields — override base style for larger font on login */
.login-card input[type="text"],
.login-card input[type="password"] {
  font-size: 16px;
  border-radius: 10px;
  padding: 11px 14px;
}

/* Error message box */
.login-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--red-bg);
  border: 1px solid #fecdd3;
  border-radius: 10px;
  font-size: 13px;
  color: var(--red);
  margin-bottom: 18px;
}
.login-error::before { content: '⚠'; flex-shrink: 0; }

/* Sign in button */
.login-btn {
  width: 100%;
  padding: 13px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
  margin-top: 8px;
}
.login-btn:hover   { background: var(--green-dark); }
.login-btn:active  { transform: scale(0.98); }

/* Footer text */
.login-footer {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 24px;
}

/* Month label: full name on desktop, short name on mobile (controlled by mobile.css) */
.month-short { display: none; }
.month-full  { display: inline; }

/* =============================================================================
   24. PAYMENT SESSION — Summary tab session card
   ============================================================================= */

/* Session toggle in Manage Bills edit/add form */
.session-toggle-wrap        { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--blue-light); border:1px solid #bfdbfe; border-radius:6px; margin-bottom:14px; cursor:pointer; user-select:none; }
.bmodal-body .session-toggle-wrap { margin-top:16px; }
.session-toggle-wrap input  { width:18px; height:18px; accent-color:var(--blue); cursor:pointer; flex-shrink:0; }
.session-toggle-label       { font-size:14px; font-weight:600; color:var(--blue); }
.session-toggle-sub         { font-size:12px; color:var(--text-muted); margin-top:2px; }

/* Session card in Summary */
.summary-session-card       { border:1px solid var(--green); border-radius:10px; overflow:hidden; margin-bottom:16px; }
.summary-session-header     { background:#fff; padding:16px 20px; border-bottom:1px solid rgba(45,45,45,0.35); display:flex; justify-content:space-between; align-items:center; }
.summary-session-row        { display:flex; justify-content:space-between; align-items:center; padding:11px 20px; border-bottom:1px solid var(--border-light); font-size:14px; background:#fff; }
.summary-session-row:last-child { border-bottom:none; }
.summary-session-footer     { background:#fff; padding:14px 20px; border-top:1px solid rgba(45,45,45,0.35); display:flex; justify-content:space-between; align-items:center; }

/* ========== 25. CC Assign Modal ========== */
#cc-assign-modal                { display:none; position:fixed; inset:0; z-index:999; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); }
.ccm-box                       { background:#fff; border-radius:10px; width:420px; max-width:95vw; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 8px 40px rgba(0,0,0,0.18); }
.ccm-header                    { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
.ccm-subtitle                  { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }
.ccm-title                     { font-size:16px; font-weight:700; }
.ccm-close                     { background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-muted); padding:0 4px; }
.ccm-toggle-section            { padding:16px 20px; border-bottom:1px solid var(--border); }
.ccm-toggle-label              { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; font-weight:600; color:var(--blue); }
.ccm-checkbox                  { accent-color:var(--blue); width:16px; height:16px; }
.ccm-list                      { padding:4px 20px 16px; overflow-y:auto; flex:1; }
.ccm-footer                    { padding:12px 20px; border-top:1px solid var(--border); text-align:right; }