/* Usability helpers shared by several pages.
   Loaded last so these small rules win over older theme files.
   Colors come from the existing theme variables, so light and dark themes both work. */

/* Search and filter row above a table (Chart of accounts, Audit log). */
.table-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; margin: 0 0 14px; }
.table-toolbar .toolbar-search { flex: 1 1 260px; max-width: 420px; font-size: 12px; font-weight: 700; color: var(--muted); }
.table-toolbar .checkbox { padding-bottom: 10px; font-size: 13px; }
.table-toolbar .toolbar-count { margin-left: auto; padding-bottom: 10px; color: var(--muted); }

/* "Review suggested fixes" panel: likely set-up mistakes with one-click fixes. */
.review-panel { border-left: 5px solid var(--warning, #a96a13); }
.review-panel h2 { margin-bottom: 8px; }
.review-panel p { margin: 12px 0 8px; color: var(--muted); line-height: 1.5; }
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.review-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.review-list .code { margin-right: 6px; }

/* Inline "Are you sure?" step inside a table row. */
.row-actions { white-space: nowrap; }
.row-confirm { display: inline-flex; align-items: center; gap: 6px; }
.row-confirm small { color: var(--danger, #b93c45); font-weight: 700; }
.button.danger { background: var(--danger, #b93c45); border-color: var(--danger, #b93c45); color: #fff; }

/* Friendly empty states (lists with no rows yet). */
.empty-state { padding: 34px 18px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; margin-bottom: 6px; color: var(--ink, inherit); font-size: 15px; }

/* Small secondary text under a value, such as a local time zone name. */
.subtle-note { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }

/* Hint shown inside a panel that links to where a problem can be fixed. */
.inline-hint { margin: 10px 0 0; padding: 10px 12px; border-radius: 9px; background: #fff2da; color: #7a4d0e; font-size: 12px; line-height: 1.5; }
.inline-hint a { font-weight: 800; text-decoration: underline; }

@media (max-width: 650px) {
    .table-toolbar .toolbar-count { margin-left: 0; }
    .review-list li { flex-direction: column; align-items: flex-start; }
}