/* Urenregistratie-module – sluit aan op de InvoiceShelf-stijl (primary-kleur, grijstinten, afgeronde kaarten). */
.uren-stack { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; padding-bottom: 5rem; }
.uren-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.uren-strong { font-weight: 600; color: #111827; }
.uren-muted { font-size: .8125rem; color: #6b7280; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.uren-h2 { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; margin: 0 0 .6rem; }
.uren-note { font-size: .8125rem; color: #6b7280; margin: .75rem 0 0; }
.uren-error { margin-top: .75rem; padding: .6rem .8rem; border-radius: .5rem; background: #fef2f2; color: #b91c1c; font-size: .875rem; }
.uren-back { font-size: .875rem; color: var(--color-primary-500); margin-top: .25rem; }

/* timer */
.uren-timer { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; }
.uren-timer-form { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: .6rem; }
.uren-timer-info { display: flex; gap: .75rem; align-items: center; min-width: 0; }
.uren-timer-info > div { min-width: 0; flex: 1; }
.uren-timer-clock { font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 600; color: var(--color-primary-500); letter-spacing: .02em; }
.uren-timer-clock.is-idle { color: #d1d5db; }
.uren-timer-btn { white-space: nowrap; }
.uren-inline-input { width: 100%; border: 0; border-bottom: 1px dashed #d1d5db; padding: .15rem 0; font-size: .875rem; color: #374151; background: transparent; outline: none; }
.uren-inline-input:focus { border-bottom-color: var(--color-primary-400); }

/* inputs in InvoiceShelf-look */
.uren-select, .uren-input, .uren-textarea {
  width: 100%; border: 1px solid #e5e7eb; border-radius: .375rem; background: #fff; padding: .5rem .75rem;
  font-size: .875rem; color: #111827; line-height: 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.uren-select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .5rem center; background-size: 1.25rem; }
.uren-select:focus, .uren-input:focus, .uren-textarea:focus { outline: none; border-color: var(--color-primary-400); box-shadow: 0 0 0 1px var(--color-primary-400); }
.uren-textarea { resize: vertical; min-height: 4.5rem; }
.uren-check { display: flex; gap: .5rem; align-items: center; font-size: .875rem; color: #374151; min-height: 2.4rem; }
.uren-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--color-primary-500); }

/* stats */
.uren-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.uren-stat { background: #fff; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: .9rem 1rem; }
.uren-stat-label { font-size: .75rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.uren-stat-value { font-size: 1.5rem; font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; margin-top: .15rem; }

/* open to invoice */
.uren-open { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.uren-open-card { display: flex; justify-content: space-between; align-items: center; gap: .75rem; background: #fff; border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: .9rem 1rem; border-left: 4px solid var(--p, var(--color-primary-500)); }
.uren-open-right { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }

/* filters */
.uren-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: .6rem; }

/* list */
.uren-list-head { display: flex; justify-content: space-between; padding: .75rem 1.25rem; border-bottom: 1px solid #f3f4f6; font-size: .8125rem; color: #6b7280; }
.uren-day-head { display: flex; justify-content: space-between; padding: .55rem 1.25rem; background: #f9fafb; font-size: .75rem; font-weight: 600; color: #6b7280; }
.uren-day-head span:first-child::first-letter { text-transform: uppercase; }
.uren-row { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; width: 100%; text-align: left; padding: .8rem 1.25rem; border-bottom: 1px solid #f3f4f6; background: #fff; }
.uren-row:hover { background: var(--color-primary-50); }
.uren-row-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.uren-row-title { font-size: .9rem; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uren-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; font-variant-numeric: tabular-nums; }
.uren-dot { width: .7rem; height: .7rem; border-radius: 999px; flex: none; background: var(--color-primary-500); }
.uren-dot.is-live { animation: uren-pulse 1.4s ease-in-out infinite; }
@keyframes uren-pulse { 50% { opacity: .35; } }
.uren-badge { display: inline-block; font-size: .6875rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; background: #f3f4f6; color: #6b7280; }
.uren-badge.is-done { background: #ecfdf5; color: #047857; }
.uren-empty { padding: 2rem 1.25rem; text-align: center; color: #6b7280; display: flex; flex-direction: column; gap: .6rem; align-items: center; }

/* projects */
.uren-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; margin-top: 1.5rem; }
.uren-project { text-align: left; background: #fff; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: 1rem 1.1rem;
  border-top: 4px solid var(--p, var(--color-primary-500)); display: flex; flex-direction: column; gap: .25rem; transition: box-shadow .15s; }
.uren-project:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.uren-project.is-inactive { opacity: .6; }
.uren-project-meta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .4rem; font-size: .8125rem; color: #374151; }
.uren-colors { display: flex; gap: .45rem; flex-wrap: wrap; min-height: 2.4rem; align-items: center; }
.uren-color { width: 1.6rem; height: 1.6rem; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px #e5e7eb; }
.uren-color.is-active { box-shadow: 0 0 0 2px #111827; }

/* modal */
.uren-modal-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(17,24,39,.45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.uren-modal { background: #fff; border-radius: .75rem; width: 100%; max-width: 560px; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; box-shadow: 0 20px 40px rgba(0,0,0,.2); }
.uren-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #f3f4f6; }
.uren-modal-head h3 { font-size: 1.05rem; font-weight: 600; color: #111827; margin: 0; }
.uren-modal-body { padding: 1.1rem 1.25rem; overflow-y: auto; }
.uren-modal-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .9rem 1.25rem; border-top: 1px solid #f3f4f6; background: #f9fafb; border-radius: 0 0 .75rem .75rem; }
.uren-foot-right { display: flex; gap: .5rem; }
.uren-icon-btn { color: #9ca3af; padding: .25rem; border-radius: .375rem; }
.uren-icon-btn:hover { color: #374151; background: #f3f4f6; }
.uren-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.uren-span-2 { grid-column: span 2; }
.uren-dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; font-size: .9rem; margin: 0 0 1rem; }
.uren-dl dt { color: #6b7280; } .uren-dl dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

/* toast + floating button */
.uren-toast { position: fixed; z-index: 70; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: #111827; color: #fff; padding: .7rem 1.1rem; border-radius: .5rem; font-size: .875rem; box-shadow: 0 10px 25px rgba(0,0,0,.2); max-width: calc(100vw - 2rem); }
.uren-toast.is-error { background: #b91c1c; }
.uren-fab { display: none; }

/* ------------------------------------------------------------------ mobiel */
@media (max-width: 640px) {
  .uren-stack { gap: 1rem; margin-top: 1rem; }
  .uren-actions .uren-hide-sm { display: none; }
  .uren-timer { grid-template-columns: 1fr auto; }
  .uren-timer-form, .uren-timer-info { grid-column: 1 / -1; }
  .uren-timer-form { grid-template-columns: 1fr; }
  .uren-timer-clock { font-size: 1.35rem; }
  .uren-stats { gap: .5rem; }
  .uren-stat { padding: .7rem .75rem; }
  .uren-stat-value { font-size: 1.2rem; }
  .uren-filters { grid-template-columns: 1fr 1fr; }
  .uren-filters > :first-child { grid-column: 1 / -1; }
  .uren-row, .uren-list-head, .uren-day-head { padding-left: 1rem; padding-right: 1rem; }
  .uren-form { grid-template-columns: 1fr; }
  .uren-span-2 { grid-column: auto; }
  .uren-modal-backdrop { align-items: flex-end; padding: 0; }
  .uren-modal { max-width: none; border-radius: 1rem 1rem 0 0; max-height: 92vh; }
  .uren-modal-foot { border-radius: 0; padding-bottom: calc(.9rem + env(safe-area-inset-bottom)); }
  .uren-select, .uren-input, .uren-textarea { font-size: 16px; } /* geen zoom op iOS */
  .uren-fab { display: grid; place-items: center; position: fixed; right: 1.1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom)); z-index: 50;
    width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--color-primary-500); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
  .uren-toast { bottom: 5.5rem; }
}

/* ------------------------------------------------------------------ BTW-aangifte */
.btw-period .uren-select { min-width: 7rem; }
.btw-quarters { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.btw-q { text-align: left; background: #fff; border-radius: .5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .15rem; border: 2px solid transparent; }
.btw-q.is-active { border-color: var(--color-primary-500); }
.btw-q-label { font-size: .75rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.btw-q-value { font-size: 1.15rem; font-weight: 600; color: #111827; font-variant-numeric: tabular-nums; }
.btw-alert { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; border-radius: .5rem; padding: .7rem .9rem; font-size: .875rem; }
.btw-alert.is-info { background: var(--color-primary-50); color: var(--color-primary-800); border-color: var(--color-primary-100); }
.btw-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #f3f4f6; }
.btw-deadline { display: flex; flex-direction: column; align-items: flex-end; font-size: .75rem; color: #6b7280; }
.btw-deadline strong { font-size: .95rem; color: #111827; }
.btw-table { display: flex; flex-direction: column; }
.btw-row { display: grid; grid-template-columns: 1fr 9.5rem 9.5rem; gap: .75rem; align-items: center; padding: .55rem 1.25rem; border-bottom: 1px solid #f3f4f6; }
.btw-row-head { font-size: .75rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; background: #f9fafb; }
.btw-row-head span:not(:first-child) { text-align: right; }
.btw-row.is-empty .btw-label { color: #9ca3af; }
.btw-label { font-size: .875rem; color: #374151; }
.btw-label b { display: inline-block; min-width: 1.8rem; color: var(--color-primary-500); }
.btw-copy { display: flex; justify-content: flex-end; align-items: center; gap: .4rem; padding: .3rem .5rem; border-radius: .375rem; color: #9ca3af; }
.btw-copy:hover { background: var(--color-primary-50); color: var(--color-primary-500); }
.btw-copy.is-copied { background: #ecfdf5; color: #047857; }
.btw-num { font-variant-numeric: tabular-nums; font-weight: 600; color: #111827; text-align: right; }
.btw-num.muted { color: #d1d5db; font-weight: 400; padding-right: .5rem; }
.btw-total { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; background: var(--color-primary-50); }
.btw-total span:first-child { font-weight: 600; color: #111827; }
.btw-total-value { font-size: 1.6rem; font-weight: 700; color: var(--color-primary-600); font-variant-numeric: tabular-nums; }
.btw-total.is-refund { background: #ecfdf5; } .btw-total.is-refund .btw-total-value { color: #047857; }
.btw-foot { font-size: .75rem; color: #6b7280; padding: .7rem 1.25rem 1rem; margin: 0; }
.btw-section { display: flex; justify-content: space-between; width: 100%; padding: .9rem 1.25rem; font-weight: 600; color: #111827; text-align: left; }
.btw-line { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; padding: .7rem 1.25rem; border-top: 1px solid #f3f4f6; color: inherit; }
a.btw-line:hover { background: var(--color-primary-50); }
.btw-line-main { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.btw-line-right { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.btw-kind { width: 15rem; }
.btw-kind.is-unknown { border-color: #f59e0b; }

@media (max-width: 640px) {
  .btw-quarters { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .btw-head { flex-direction: column; } .btw-deadline { align-items: flex-start; }
  .btw-row { grid-template-columns: 1fr auto; padding: .6rem 1rem; row-gap: .15rem; }
  .btw-row-head { display: none; }
  .btw-row .btw-label { grid-column: 1 / -1; }
  .btw-row > :nth-child(2), .btw-row > :nth-child(3) { justify-self: start; }
  .btw-row:not(.btw-row-head) > :nth-child(2)::before { content: 'Omzet'; font-size: .7rem; font-weight: 400; color: #9ca3af; margin-right: .35rem; }
  .btw-row:not(.btw-row-head) > :nth-child(3):not(:empty)::before { content: 'BTW'; font-size: .7rem; font-weight: 400; color: #9ca3af; margin-right: .35rem; }
  .btw-row.is-empty { padding-top: .4rem; padding-bottom: .4rem; }
  .btw-row.is-empty > :nth-child(2), .btw-row.is-empty > :nth-child(3) { display: none; }
  .btw-total, .btw-section, .btw-line { padding-left: 1rem; padding-right: 1rem; }
  .btw-line { grid-template-columns: 1fr auto; }
  .btw-kind { grid-column: 1 / -1; width: 100%; order: 3; }
}