/* Reimbursements and expense approvals. Colours come from the CSS variables (--bg-main, --bg-card,
   --color-accent, --color-border, --text-primary, --text-secondary). Layout uses flexbox and grid only. */
#view-reimbursements {
  background: var(--bg-main);
  color: var(--text-primary);
  padding: 8px 16px 32px;
}
#view-reimbursements .project-header h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); }
#view-reimbursements .project-header .hint { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--text-secondary); }

/* Cards: white surface, fine border, soft shadow. */
#view-reimbursements .reimbursement-totals-box,
#view-reimbursements .admin-block {
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(12, 13, 14, .06);
  padding: 16px;
}
#view-reimbursements .reimbursement-totals-box { margin-top: 16px; display: grid; gap: 14px; }
#view-reimbursements .admin-block { margin-top: 16px; }
#view-reimbursements .admin-block > h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--text-primary); }

/* Filter icon, top-right of the metrics card. */
#view-reimbursements .reimbursement-totals-header { display: flex; justify-content: flex-end; align-items: center; }
#view-reimbursements .reimbursement-filter-icon {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 12px;
  cursor: pointer;
}
#view-reimbursements .reimbursement-filter-icon .icon { width: 20px; height: 20px; }

/* Three-column summary: TOTAL, PENDING, APPROVED. Values wrap safely on small screens. */
#view-reimbursements .reimbursement-summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#view-reimbursements .reimbursement-summary-strip > div { display: grid; align-content: start; gap: 4px; min-width: 0; }
#view-reimbursements .reimbursement-summary-strip > div > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
#view-reimbursements .reimbursement-summary-strip b {
  font-size: clamp(15px, 4.2vw, 22px);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: var(--text-primary);
}
#view-reimbursements .reimbursement-summary-strip small { font-size: 12px; color: var(--text-secondary); }

/* Export CSV: outline utility button, aligned to the right at the bottom of the card. */
#view-reimbursements .reimbursement-totals-actions { display: flex; justify-content: flex-end; }
#view-reimbursements #reimbursement-export,
#view-reimbursements .reimbursement-totals-actions .btn {
  min-height: 44px;
  padding: 0 16px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font-weight: 600;
}

/* Section header: bold title left, emerald primary button right. */
#view-reimbursements .reimbursement-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 20px 0 12px; }
#view-reimbursements .reimbursement-section-heading h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }

/* Primary buttons use the brand accent. Every button keeps a 44px touch target. */
#view-reimbursements .btn { min-height: 44px; border-radius: 12px; font-size: 14px; }
#view-reimbursements .btn-primary { background: var(--color-accent); border: 1px solid var(--color-accent); color: #ffffff; font-weight: 700; padding: 0 16px; }
#view-reimbursements .btn-secondary { background: transparent; border: 1px solid var(--color-border); color: var(--text-primary); }
#view-reimbursements .btn:focus-visible,
#view-reimbursements .reimbursement-filter-icon:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Desktop table keeps its columns. Its header row is the labels for the phone cards. */
#view-reimbursements .reimbursement-table { width: 100%; border-collapse: collapse; font-size: 14px; }
#view-reimbursements .reimbursement-table th {
  padding: 10px 8px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--color-border);
}
#view-reimbursements .reimbursement-table td { padding: 12px 8px; color: var(--text-primary); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
#view-reimbursements .reimbursement-table input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--color-accent); cursor: pointer; }

/* Phones: each expense becomes a card of key-value rows. Labels come from js/table-card-labels.js. */
@media (max-width: 560px) {
  #view-reimbursements .reimbursement-table-wrap { overflow: visible; }
  #view-reimbursements .reimbursement-table,
  #view-reimbursements .reimbursement-table tbody { display: block; width: 100%; }
  #view-reimbursements .reimbursement-table thead { display: none; }
  #view-reimbursements .reimbursement-table tr {
    display: grid;
    gap: 2px;
    margin-bottom: 10px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--color-border);
    border-radius: 12px;
  }
  #view-reimbursements .reimbursement-table td {
    display: grid;
    grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 0;
    border: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  #view-reimbursements .reimbursement-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  #view-reimbursements .reimbursement-table td[colspan] { display: block; }
  #view-reimbursements .reimbursement-table td:has(input[type="checkbox"]) { justify-items: end; }
  #view-reimbursements .reimbursement-table td:has(input[type="checkbox"])::before { justify-self: start; }
  #view-reimbursements .reimbursement-table input[type="checkbox"] { width: 24px; height: 24px; }
  #view-reimbursements .reimbursement-table td:has(.btn) { min-height: 44px; }
  #view-reimbursements .reimbursement-summary-strip { gap: 8px; }
  #view-reimbursements .reimbursement-section-heading { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { #view-reimbursements * { transition: none !important; } }

.rm-mobile{display:none}
@media(max-width:1023px){
 #app:has(#view-reimbursements:not(.hidden)) .mobile-topbar{display:none!important}
 #app:has(#view-reimbursements:not(.hidden))>.main{padding:0 0 calc(80px + env(safe-area-inset-bottom))!important}
 #app #view-reimbursements{padding:0!important;min-height:calc(100dvh - 74px);background:#f7f8fa;color:#5e6570}
 #reimbursements-content.rm-ready>.project-header,#reimbursements-content.rm-ready>.admin-block{display:none}
 #reimbursements-content>.admin-block:has(#employee-reimbursement-form:not(.hidden)),#reimbursements-content>.admin-block:has(#reimbursement-filter-page:not(.hidden)){display:block;margin:16px}
 .rm-mobile{display:block;padding-bottom:25px}.rm-form-open .rm-mobile{display:none}
 .rm-header{height:174px;background:#087cf0;color:#fff;display:flex;gap:14px;align-items:flex-start;padding:calc(18px + env(safe-area-inset-top)) 18px 100px;border-radius:0 0 0 0;box-sizing:content-box;max-height:50px}
 .rm-header h1{font-size:16px;font-weight:600;flex:1;margin:7px 0;color:#fff;line-height:1.2}
 .rm-header button{border:0;background:none;color:#fff;padding:0;width:24px;height:31px;font-size:25px;cursor:pointer}.rm-header .rm-alerts{display:grid;place-items:center}
 .rm-summary{margin:-88px 16px 22px;position:relative;background:#fff;border-radius:4px;box-shadow:0 2px 6px #0003;padding:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;color:#8b9099}
 .rm-summary>div{display:grid;gap:6px;font-size:11px}.rm-summary b{font-size:15px;color:#1dbb36;font-weight:600}.rm-summary .rm-total{grid-column:1/-1}.rm-summary .rm-total b{font-size:19px}.rm-summary .rm-pending{color:#f3a12a}.rm-approved-column{text-align:right}
 .rm-range{position:absolute;top:17px;right:12px;font-size:9px;border-radius:12px;padding:4px 8px;background:#f3f4f6;max-width:60%;color:#898f99}
 .rm-list-heading{display:flex;align-items:center;gap:15px;margin:0 17px 12px}.rm-list-heading h2{font-size:13px;font-weight:600;margin:0;flex:1}.rm-list-heading button{border:0;background:none;color:#737983;font-size:22px;padding:0;cursor:pointer;width:24px;height:28px}
 .rm-list{margin:0 16px;background:white;border-radius:4px;box-shadow:0 1px 5px #0002;overflow:hidden}
 .rm-request{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;min-height:87px;width:100%;border:0;border-bottom:1px solid #f0f1f3;background:#fff;padding:13px 14px;text-align:left;color:#69717d;cursor:pointer}
 .rm-person{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.rm-id{font-size:11px;color:#9b9fa6;text-align:right}.rm-date{font-size:10px;color:#9298a1;grid-column:1/-1}.rm-status{font-size:10px;margin-top:4px;color:#f2a12b}.rm-status.approved{color:#20bd36}.rm-status.rejected{color:#ef5965}.rm-amount{font-size:13px;text-align:right;align-self:end;color:#616974;font-weight:600}
 .rm-add{position:fixed;bottom:calc(88px + env(safe-area-inset-bottom));right:22px;width:49px;height:49px;background:#087cf0;color:#fff;border:0;border-radius:50%;box-shadow:0 3px 9px #0003;font-size:35px;line-height:1;z-index:42;cursor:pointer}
 .rm-pages{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:15px 17px;font-size:11px}.rm-pages button{background:#fff;color:#69717d;border:1px solid #e8eaee;border-radius:5px;padding:7px 10px;font-size:11px}.rm-pages button:disabled{opacity:.35}.rm-pages small{color:#9b9fa7;text-align:center}
 .rm-search{padding:0 16px 14px}.rm-search[hidden]{display:none}.rm-search input{width:100%;border:1px solid #e8eaee;background:#fff;color:#555;border-radius:5px;padding:11px;font-size:13px}.rm-empty{padding:22px;font-size:12px;color:#9298a1;text-align:center}
}

.rm-drawer-actions{display:none}@media(max-width:1023px){.rm-drawer-actions{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0;border-top:1px solid var(--line)}}

/* Keep the phone status area separate from the reimbursement header. */
@media(max-width:1023px){
 html.is-native #view-reimbursements .rm-mobile{padding-top:max(env(safe-area-inset-top),28px);background:#f7f8fa}
 html.is-native #view-reimbursements .rm-header{padding-top:18px}
}

@media(max-width:1023px){
 #app.drawer-open .rm-add{display:none}
 #reimbursement-drawer .reimbursement-close-footer{display:flex;align-items:center;gap:10px}
 #reimbursement-drawer .reimbursement-close-footer .rm-drawer-actions{display:contents}
 #reimbursement-drawer .reimbursement-close-footer button{flex:1;min-width:0;min-height:44px;margin:0}
}

/* Reimbursements follows the shared app palette in both appearance modes. */
#app #view-reimbursements { --bg-main:var(--bg); --bg-card:var(--surface); --text-primary:var(--ink); --text-secondary:var(--muted); --color-border:var(--line); background:var(--bg); color:var(--ink); }
#app #view-reimbursements .rm-mobile { background:var(--bg); }

@media(max-width:1023px){
 #view-reimbursements .rm-summary,#view-reimbursements .rm-list,#view-reimbursements .rm-request{background:var(--surface);color:var(--ink)}
 #view-reimbursements .rm-request{border-color:var(--line)}
 #view-reimbursements .rm-person,#view-reimbursements .rm-amount{color:var(--ink)}
 #view-reimbursements .rm-date,#view-reimbursements .rm-id,#view-reimbursements .rm-list-heading button{color:var(--muted)}
 #view-reimbursements .rm-range{background:var(--bg);color:var(--muted)}
 #view-reimbursements .rm-search input{background:var(--surface);color:var(--ink);border-color:var(--line)}
 .rm-feed-end{min-height:32px;padding:16px;text-align:center;color:var(--muted);font-size:12px}
 .rm-retry{display:block;margin:8px auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:10px;border-radius:8px}.rm-retry[hidden]{display:none}
}

@media(max-width:1023px){
 html[data-theme="dark"] #view-reimbursements .rm-header{background:var(--bg);color:var(--ink)}
 html[data-theme="dark"] #view-reimbursements .rm-header h1,html[data-theme="dark"] #view-reimbursements .rm-header button{color:var(--ink)}
}