/* Duawell DW6 components. Plain CSS on the tokens; no framework. */
.dw, .dw * { box-sizing: border-box; }
.dw { font-family: var(--font-sans); font-size: 14px; line-height: 22px; color: var(--ink); background: var(--sky); -webkit-font-smoothing: antialiased; }
.dw :focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dw-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.dw-icon { width: 14px; height: 14px; flex: none; fill: currentColor; }
.dw a { color: var(--link); }

/* AppBar */
.dw-bar { background: var(--bar); color: var(--on-bar); border-bottom: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); position: relative; z-index: 30; }
.dw-bar__inner { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-2); min-height: var(--bar-height); }
.dw-bar__brand { font-size: 20px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; margin-right: var(--space-3); color: var(--accent); text-decoration: none; }
.dw .dw-bar__brand { color: var(--accent); }
.dw-bar__menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.dw-bar__menu > li { display: flex; align-items: center; }
.dw-bar__item { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; font: 600 14px/20px var(--font-sans); color: var(--on-bar); text-decoration: none; cursor: pointer; white-space: nowrap; }
.dw .dw-bar__item { color: var(--on-bar); }
.dw-bar__item:hover { background: var(--bar-highlight); color: var(--ink-strong); }
.dw-bar__item[aria-current="page"] { background: var(--bar-active); color: var(--bar-active-ink); }
.dw .dw-bar__item[aria-current="page"] { color: var(--bar-active-ink); }
.dw-bar__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .6; }
.dw-bar__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.dw-bar__toggle { display: none; appearance: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; align-items: center; justify-content: center; }
.dw-bar__toggle span, .dw-bar__toggle span::before, .dw-bar__toggle span::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; position: relative; content: ""; }
.dw-bar__toggle span::before { position: absolute; top: -6px; left: 0; }
.dw-bar__toggle span::after { position: absolute; top: 6px; left: 0; }
.dw-menu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-menu); padding: 6px; min-width: 210px; list-style: none; margin: 0; }
.dw-menu a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-weight: 500; }
.dw .dw-menu a { color: var(--ink); }
.dw-menu a:hover, .dw-menu a:focus-visible { background: var(--accent-soft); color: var(--bar-active-ink); }

/* Panel */
.dw-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: var(--space-4); }
.dw-panel__title { font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--ink-strong); margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.dw-section { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink-strong); margin: var(--space-4) 0 var(--space-2); }

/* Buttons: default is secondary, --go is primary, --step is a quiet tinted action */
.dw-btn { font: 600 14px/20px var(--font-sans); min-height: var(--control-height); padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-strong); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; transition: background-color .12s, border-color .12s; }
.dw .dw-btn { color: var(--ink-strong); }
.dw-btn:hover { background: var(--surface-sunk); border-color: var(--ink-muted); }
.dw-btn--go { background: var(--go); border-color: var(--go); color: var(--on-fill); }
.dw .dw-btn--go { color: var(--on-fill); }
.dw-btn--go:hover { background: var(--go-hover); border-color: var(--go-hover); }
.dw-btn--step { background: var(--accent-soft); border-color: #bcd6f1; color: var(--bar-active-ink); min-width: 100px; text-decoration: none; }
.dw .dw-btn--step { color: var(--bar-active-ink); }
.dw-btn--step:hover { background: #d6e7f9; border-color: var(--accent); }
.dw-btn--danger { background: var(--danger); border-color: var(--danger); color: var(--on-fill); }
.dw .dw-btn--danger { color: var(--on-fill); }
.dw-btn--danger:hover { background: #a02f23; border-color: #a02f23; }
.dw-btn--icon { min-width: var(--control-height); padding: 0 12px; }
.dw-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Fields */
.dw-fields { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: flex-end; }
.dw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dw-field__label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.dw-input, .dw-select { font: 400 14px/20px var(--font-sans); color: var(--ink-strong); background: var(--surface); height: var(--control-height); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); min-width: 0; transition: border-color .12s, box-shadow .12s; }
.dw-select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; cursor: pointer; }
.dw-input:hover, .dw-select:hover { border-color: var(--ink-muted); }
.dw-input:focus, .dw-select:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
.dw-input[readonly], .dw-input[disabled], .dw-select[disabled] { background-color: var(--surface-sunk); color: var(--ink-muted); }
.dw-input--error { border-color: var(--error-ink); }
.dw-field__error { color: var(--error-ink); font-size: 13px; line-height: 18px; }
.dw-hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.dw-inline { display: flex; gap: var(--space-1); align-items: center; }

/* Table */
.dw-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: auto; background: var(--surface); -webkit-overflow-scrolling: touch; }
/* only the tables DW4 scrolled (tableScroll, modal body): every other table shows all its rows */
.dw-table-wrap--scroll { max-height: 560px; }
.dw-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; line-height: 20px; }
.dw-table th { position: sticky; top: 0; z-index: 2; background: var(--surface-sunk); font-weight: 700; font-size: 12px; letter-spacing: .02em; color: var(--ink-muted); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.dw-table th.dw-num { text-align: right; }
.dw-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface); vertical-align: middle; }
.dw-table td:first-child { white-space: nowrap; }
.dw-table tbody tr:last-child td { border-bottom: 0; }
.dw-table tbody tr:nth-child(even) td { background: var(--zebra); }
.dw-table tbody tr:hover td { background: #eef4fb; }
.dw-table tbody tr.is-current td { background: var(--row-current); }
.dw-table tbody tr.is-current-pay td { background: var(--row-current-cell); }
.dw-table tbody tr.is-suspended td { background: var(--row-suspended); color: var(--ink-muted); }
.dw-table tbody tr.is-saved td { background: var(--row-saved); }
.dw-table tbody tr.is-saved td.dw-money { background: var(--row-saved-cell); }
.dw-table tbody tr.is-rejected td { background: var(--row-rejected); color: var(--rejected-ink); }
.dw-table a { color: var(--link); text-decoration: none; font-weight: 600; }
.dw-table a:hover { text-decoration: underline; }
.dw-table .dw-input, .dw-table .dw-select { height: 32px; padding-top: 0; padding-bottom: 0; }
.dw-legend { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 12px; line-height: 16px; margin-top: var(--space-2); color: var(--ink-muted); }
.dw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dw-legend i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--line-strong); display: inline-block; font-style: normal; }

/* Info grid */
.dw-info { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr); gap: 6px 24px; max-width: 640px; }
.dw-info dt { font-weight: 600; color: var(--ink-muted); }
.dw-info dd { margin: 0; color: var(--ink-strong); }
@media (max-width: 520px) { .dw-info { grid-template-columns: max-content minmax(0, 1fr); } }

/* Alert: inline messages instead of DW4's popups */
.dw-alert { border-radius: var(--radius-md); padding: 10px 14px; font-size: 14px; line-height: 20px; display: flex; gap: 8px; align-items: baseline; border: 1px solid var(--line); border-left-width: 4px; background: var(--surface-sunk); }
.dw-alert--saved { background: var(--row-saved); border-color: var(--row-saved-cell); border-left-color: var(--chart-paid); color: var(--saved-ink); }
.dw-alert--error { background: var(--row-rejected); border-color: #f3cbc7; border-left-color: var(--danger); color: var(--rejected-ink); }
.dw-alert--offline { background: var(--sync-offline-fill); border-color: #f3dc9b; border-left-color: #e0a21a; color: var(--sync-offline); }

/* Sync status */
.dw-sync { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; line-height: 16px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid #bfe3cb; background: var(--row-saved); color: var(--saved-ink); white-space: nowrap; font-family: var(--font-sans); }
.dw-sync[hidden] { display: none; }
.dw-sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--chart-paid); }
.dw-sync--offline { background: var(--sync-offline-fill); border-color: #f3dc9b; color: var(--sync-offline); }
.dw-sync--offline::before { background: #e0a21a; }
.dw-sync--sending { background: var(--accent-soft); border-color: #bcd6f1; color: var(--bar-active-ink); }
.dw-sync--sending::before { background: var(--accent); }

/* Activity list (Home: Recent activities) */
.dw-activity { list-style: none; margin: 0; padding: 0; }
.dw-activity__day { color: var(--ink-strong); font-weight: 700; margin-top: var(--space-2); font-size: 13px; }
.dw-activity__entry { border-left: 2px solid var(--line); margin-left: 4px; padding: 4px 0 4px 12px; font-size: 13px; }
.dw-activity__entry b { color: var(--ink-strong); }
.dw-activity__entry a { color: var(--link); font-weight: 600; text-decoration: none; }

/* Footer */
.dw-footer { background: var(--surface); border-top: 1px solid var(--line); padding: var(--space-3) max(var(--space-4), calc((100% - var(--page-width)) / 2 + var(--space-4))); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 13px; color: var(--ink-muted); }
.dw-footer a { color: var(--link); text-decoration: none; font-weight: 600; }
.dw-footer a:hover { text-decoration: underline; }

/* Chart colours: one palette for the pie, the columns and the legends */
.dw [fill="#3FB041" i] { fill: var(--chart-paid); }
.dw [fill="#B7231E" i] { fill: var(--chart-unpaid); }
.dw [fill="#EEB826" i] { fill: var(--chart-balance); }
.dw i[style*="3FB041" i] { background: var(--chart-paid) !important; border-color: transparent; }
.dw i[style*="B7231E" i] { background: var(--chart-unpaid) !important; border-color: transparent; }
.dw i[style*="EEB826" i] { background: var(--chart-balance) !important; border-color: transparent; }
.dw span[style*="3FB041" i] { color: var(--chart-paid) !important; }
.dw span[style*="EEB826" i] { color: var(--chart-balance) !important; }
.dw-alert[hidden], .dw-alert:empty { display: none; }
.dw hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-3) 0; }
.dw details > summary { cursor: pointer; }
.dw-select[multiple], .dw-select[size]:not([size="1"]) { height: auto; padding: 4px; background-image: none; cursor: default; }
.dw-select[multiple] option, .dw-select[size] option { padding: 4px 8px; border-radius: 4px; }