/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* The app's form fields. Scoped away from the public pages: everything wearing
   the marketing layout - the landing pages, sign in, sign up, password reset,
   the invitation and two-factor screens, the feedback form - is designed in the
   public look and asks for it in its own classes. These rules were overriding
   all of that, so a page written as `rounded-xl border-gray-200 bg-gray-50`
   rendered as a grey box with a black border. */
body:not(.marketing-page) input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
body:not(.marketing-page) select {background: #e5e5e5; border: 1px solid black;}


/* One corner radius app-wide on buttons - real <button>/<input> buttons, the
   btn-* component classes and anchors styled as buttons (a bg-* fill plus px-*
   padding) - from --button-radius (8px), and 2px on all text-entry fields.
   Overrides any per-view rounded-* utility so every control of a kind shares
   the same radius. Checkboxes and radios keep their native shape. */
body:not(.marketing-page) button,
body:not(.marketing-page) input[type="submit"],
body:not(.marketing-page) input[type="button"],
body:not(.marketing-page) input[type="reset"],
body:not(.marketing-page) a[class*="px-"][class*="bg-"],
body:not(.marketing-page) .btn-primary,
body:not(.marketing-page) .btn-secondary,
body:not(.marketing-page) .btn-danger {
  border-radius: var(--button-radius) !important;
}
/* .report-control inputs are left out: the controls above a report - the
   period selector, Quick actions and the Trial Balance's search box - are one
   set that takes the button radius (report.css), and the input selector's
   :not()s would otherwise outscore it and leave the search box at 2px. Only
   the input line carries it: on the select line it would lift that selector
   over report.css's period-select rule instead. */
body:not(.marketing-page) input:not([type="checkbox"]):not([type="radio"]):not(.report-control),
body:not(.marketing-page) select,
body:not(.marketing-page) textarea,
body:not(.marketing-page) trix-editor {
  border-radius: 2px !important;
}
body:not(.marketing-page) input[type="file"]::file-selector-button { border-radius: var(--button-radius); }


/* --------------------------------------------------------------------------------
 COLLAPSIBLE REPORT NAV  (toggled by sidebar_controller via .sidebar-collapsed on <html>)
 --------------------------------------------------------------------------------*/
#report-nav { transition: width 0.15s ease; }
#action-bar { transition: left 0.15s ease; }
#demo-banner { transition: left 0.15s ease; }
main { transition: padding-left 0.15s ease; }
.page-inner, .report-filter { transition: margin-left 0.15s ease; }

.sidebar-collapsed #report-nav { width: 64px; }
.sidebar-collapsed #report-nav .nav-collapsible { display: none !important; }
.sidebar-collapsed #report-nav .nav-header { justify-content: center; }
.sidebar-collapsed #report-nav .nav-item {
  width: 52px;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}
.sidebar-collapsed #report-nav .nav-user {
  width: 52px;
  padding-left: 2px;
  padding-right: 2px;
}

/* The listings' pagination bar, pinned to the foot of the screen.

   It used to follow the last row, so its height on the page was a function of
   how many ledgers the firm had and which page you were on - the last page of a
   list is rarely a full one, and the row of numbers you were about to click
   moved up the screen as you paged towards it. Fixed, it is in the same place
   every time, which is the whole point of it.

   left matches main's padding rather than #action-bar's offset: this sits under
   the content, not over the rail, and follows the rail in when it collapses.

   The legal strip is also fixed along the bottom (shared/_legal_footer), 20px
   tall and hard right, at z-50. This sits below it in the stack and keeps its
   own content to the left, so the two do not fight over the corner. */
.listing-pagination {
  position: fixed;
  left: 260px;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1.5rem;
  background-color: var(--theme-surface);
  border-top: 1px solid #e5e7eb; /* gray-200 */
  transition: left 0.15s ease;   /* with the rail, not after it */
}
.sidebar-collapsed .listing-pagination { left: 84px; }
@media print { .listing-pagination { display: none; } }

/* Room under the last row for the bar, plus the legal strip's 20px. */
.listing-with-pagination { padding-bottom: 5rem; }
/* Client Ledgers' bar is two lines deep (see .ledger-pager-bar). */
.listing-with-pagination:has(.ledger-pager-bar) { padding-bottom: 7rem; }

/* Shift the page content over to meet the narrowed rail */
.sidebar-collapsed #action-bar { left: 64px; }
.sidebar-collapsed #demo-banner { left: 64px; }
.sidebar-collapsed main { padding-left: 84px; }
.sidebar-collapsed .page-inner { margin-left: 96px; }
.sidebar-collapsed .report-filter { margin-left: 96px; }

/* The toggle chevron points the other way once collapsed */
.sidebar-collapsed #report-nav .nav-toggle svg { transform: rotate(180deg); }

/* Sidebar "Recents" disclosure (a native <details> under Client Ledgers List):
   drop the browser's default triangle marker so the row matches the other nav
   items, and point our own chevron down while it's open. */
#report-nav .nav-recents > summary { list-style: none; }
#report-nav .nav-recents > summary::-webkit-details-marker { display: none; }
#report-nav .nav-recents[open] > summary .nav-recents-chevron { transform: rotate(90deg); }

/* --------------------------------------------------------------------------------
 MODERN THEMES: collapsible nav sections
 --------------------------------------------------------------------------------*/
/* Shortcut keys now show in modern themes too (small, far-right of each nav
   item) - visibility is governed by the user's hide-shortcuts preference via
   hotkey_hint, not the theme. */

/* Section headers are inert by default; the chevron only shows (and the header
   becomes clickable) on the modern themes, where nav_section_controller runs. */
#report-nav .nav-section-chevron { display: none; }
[data-theme^="modern"] #report-nav .nav-section-chevron { display: block; }
[data-theme^="modern"] #report-nav .nav-section-header { cursor: pointer; }
[data-theme^="modern"] #report-nav .nav-section-open .nav-section-chevron { transform: rotate(90deg); }

/* --------------------------------------------------------------------------------
 MODERN THEMES: light/dark toggle in the action bar
 --------------------------------------------------------------------------------*/
/* A two-segment switch: both icons ship in the markup and the one for the theme
   you are *in* is picked out with a white pill. Doing it in CSS off the
   data-theme attribute keeps it correct after a Turbo navigation without any JS,
   and means the theme-toggle controller only has to move that attribute.

   The old form showed a single icon of the theme you'd switch *to*, which had
   to be read twice - a moon meant "you are in light". A switch just shows you
   where you are. */
/* The track has rounded corners, not pill ends. A rounded-* utility on the
   element loses to the radius this file pins every <button> to further up,
   and so did the plain `.theme-toggle` this rule used to be - that rule is
   !important too and outscores a lone class, so the track came out at 2px and
   read as square. Matching its selector shape is what actually answers it.
   It happens to equal --button-radius now, but stays its own value: it is a
   switch, not a button. */
body:not(.marketing-page) button.theme-toggle { border-radius: 8px !important; }
.theme-toggle-seg { transition: background-color 150ms ease, box-shadow 150ms ease; }
[data-theme="modern-light"] .theme-toggle-sun,
[data-theme="modern-dark"] .theme-toggle-moon {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}
/* The dark track needs its own greys, or the pill and the icons on it vanish. */
[data-theme="modern-dark"] .theme-toggle { background: #334155; }
[data-theme="modern-dark"] .theme-toggle-seg { color: #cbd5e1; }
[data-theme="modern-dark"] .theme-toggle-moon { background: #0f172a; color: #f1f5f9; }
.theme-toggle:hover .theme-toggle-seg svg { transform: scale(1.1); }
.theme-toggle svg { transition: transform 200ms ease; }

/* Modern-dark CRUD/admin pages: a dark canvas (lighter than the #0f172a sidebar)
   with slightly-lighter cards and light text. Scoped to <main>, so only the
   application/listing layouts go dark - reports render in their own layout and
   stay light. Selectors are more specific than the Tailwind utilities they
   override, so no !important is needed. */
[data-theme="modern-dark"] main { background-color: #1e293b; color: #f1f5f9; }
[data-theme="modern-dark"] main .bg-white { background-color: #334155; }
[data-theme="modern-dark"] main .bg-gray-50,
[data-theme="modern-dark"] main .bg-gray-100 { background-color: #2b3a52; }
[data-theme="modern-dark"] main .border-gray-200,
[data-theme="modern-dark"] main .border-gray-300,
[data-theme="modern-dark"] main .border-gray-400 { border-color: #475569; }
[data-theme="modern-dark"] main .text-gray-900,
[data-theme="modern-dark"] main .text-gray-800,
[data-theme="modern-dark"] main .text-gray-700,
[data-theme="modern-dark"] main .text-black,
/* The blue used for headings on these pages - the Changelog's dates are the
   ones you notice. It is a near-black navy chosen against a white card, and on
   the dark canvas it all but disappeared. Scoped to <main>, so the reports keep
   their blue headings: they draw on a white page whichever theme is on. */
[data-theme="modern-dark"] main .text-blue-900 { color: #f1f5f9; }
[data-theme="modern-dark"] main .text-gray-600,
[data-theme="modern-dark"] main .text-gray-500,
[data-theme="modern-dark"] main .text-gray-400 { color: #cbd5e1; }
/* Darker error / selection / status highlights so they sit on the dark canvas
   (companies listing: selected row is yellow, error row is red). */
[data-theme="modern-dark"] main .bg-yellow-100,
[data-theme="modern-dark"] main .bg-yellow-200 { background-color: #7a5310; }
[data-theme="modern-dark"] main .bg-blue-50 { background-color: #000000; } /* firms listing: selected row */
[data-theme="modern-dark"] main .hover\:bg-gray-50:hover { background-color: #000000; } /* e.g. company-name hover */
/* Report Packs rows. Needs its own value: the utility above is only mapped for
   bg-gray-50, so an unmapped hover:bg-gray-100 would paint a near-white band
   across the row on the dark canvas. Kept close to the canvas so it reads as a
   pointer, not a selection. */
[data-theme="modern-dark"] main .hover\:bg-gray-100:hover { background-color: #2f3f57; }
[data-theme="modern-dark"] main .bg-red-50,
[data-theme="modern-dark"] main .bg-red-100 { background-color: #7f1d1d; }
[data-theme="modern-dark"] main .bg-green-100 { background-color: #14532d; }
[data-theme="modern-dark"] main .text-red-500,
[data-theme="modern-dark"] main .text-red-700 { color: #fca5a5; }
[data-theme="modern-dark"] main .text-green-700 { color: #86efac; }
/* Black form fields with light text (the :not chain mirrors the base input rule
   above so this wins on specificity; checkboxes/radios are left alone). */
[data-theme="modern-dark"] main input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="modern-dark"] main textarea,
[data-theme="modern-dark"] main select {
  background-color: #000000;
  color: #f1f5f9;
  border-color: #475569;
  color-scheme: dark; /* render the native dropdown list / arrow dark too */
}
[data-theme="modern-dark"] main input::placeholder,
[data-theme="modern-dark"] main textarea::placeholder { color: #94a3b8; }
/* Rich-text (Trix) editor: black field with light text; invert the toolbar
   icons so they stay visible on the dark surface. */
[data-theme="modern-dark"] main trix-editor,
[data-theme="modern-dark"] main .trix-content {
  background-color: #000000;
  color: #f1f5f9;
  border-color: #475569;
}
[data-theme="modern-dark"] main trix-toolbar .trix-button { filter: invert(1); }

/* Modern-dark action-bar buttons (Refresh, PDF, Changelog, Help, Save, etc):
   a much darker background with a white outline instead of bright fills. */
[data-theme="modern-dark"] #action-bar .bg-primary-button,
[data-theme="modern-dark"] #action-bar .bg-accent,
[data-theme="modern-dark"] #action-bar .bg-blue-600,
[data-theme="modern-dark"] #action-bar .bg-green-700,
[data-theme="modern-dark"] #action-bar .bg-gray-100,
[data-theme="modern-dark"] #action-bar .btn-primary,
[data-theme="modern-dark"] #action-bar .btn-secondary {
  background-color: #0a0a0a;
  border: 1px solid #ffffff;
  color: #ffffff;
}
[data-theme="modern-dark"] #action-bar .bg-primary-button:hover,
[data-theme="modern-dark"] #action-bar .bg-accent:hover,
[data-theme="modern-dark"] #action-bar .bg-blue-600:hover,
[data-theme="modern-dark"] #action-bar .bg-green-700:hover,
[data-theme="modern-dark"] #action-bar .bg-gray-100:hover,
[data-theme="modern-dark"] #action-bar .btn-primary:hover,
[data-theme="modern-dark"] #action-bar .btn-secondary:hover,
[data-theme="modern-dark"] #action-bar .hover\:bg-gray-50:hover {
  background-color: #1f2937;
}

/* Back controls app-wide: a plain underlined black link with the esc <kbd>
   hint shown beside it - identical on every theme and page (the static
   privacy/license pages in public/ carry a matching copy of this style).
   On modern-dark's dark surfaces the text flips to light for legibility. */
.back-btn {
  background: transparent;
  border: 0;
  padding: 0;
  color: #000000;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.back-btn:hover {
  background: transparent;
  text-decoration: none;
}

/* The same unbutton, for an action inside a row rather than above a page.
   The Chart of Accounts' "+ Sub", "Edit" and the filter row's "Clear".

   These were btn-secondary chips. Three bordered boxes in every row of a table
   hundreds of rows long is a wall of buttons, and it got heavier when every
   button in the app went to a flat 40px: the chips grew with them and took the
   rows from 26px to 54, so a chart that used to show forty accounts showed
   twenty. A row action is a thing you click occasionally on the one row you are
   looking at, and a link says that at a fraction of the weight.

   No font-size, unlike .back-btn: these take the size of the row they sit in,
   which on the Chart of Accounts is text-xs. Nothing sets a height, so they
   drop out of the 40px button rule - the rule reaches btn-primary/secondary/
   danger, and these are none of those. That is the point of them. */
.btn-link {
  background: transparent;
  border: 0;
  padding: 0;
  color: #000000;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-link:hover {
  background: transparent;
  text-decoration: none;
}
[data-theme="modern-dark"] main .btn-link { color: #f1f5f9; }

/* An icon doing a button's job, in the danger colour - the Chart of Accounts'
   Delete. The word was the widest thing in the row's action column and the
   only red box on the page, which gave the least-used action of the three the
   most weight. The bin says it in an icon's width.

   It keeps the red: this is the one row action that cannot be undone, and
   dropping it to a link like the two beside it would lose the only warning the
   row carries. line-height: 0 so the box is the icon's height and not a text
   line's. */
.btn-icon-danger {
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 0;
  color: var(--theme-danger-button);
  cursor: pointer;
}
.btn-icon-danger:hover { color: var(--theme-danger-button-hover); }

/* The same button in the two other colours the Chart of Accounts row needs:
   a tick to save an inline edit and a cross to abandon it. Two words in boxes
   were wider than the row's action column and pushed Delete out of line; a
   tick and a cross say the same thing in the space an icon takes, and read
   the same way round as the bin beside them. */
.btn-icon-confirm,
.btn-icon-cancel {
  background: transparent;
  border: 0;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}
/* A plain icon control with no box around it - the cog on a custom page box.
   Grey until pointed at, like the grip beside it. */
.btn-icon {
  background: transparent;
  border: 0;
  padding: 0;
  color: #9ca3af;
  cursor: pointer;
}
.btn-icon:hover { color: #4b5563; }
[data-theme="modern-dark"] main .btn-icon { color: #cbd5e1; }
.btn-icon-confirm { color: #16a34a; }
.btn-icon-confirm:hover { color: #15803d; }
.btn-icon-cancel { color: #64748b; }
.btn-icon-cancel:hover { color: #334155; }
[data-theme="modern-dark"] main .btn-icon-cancel { color: #cbd5e1; }

/* Folding a parent's sub-accounts away on the Chart of Accounts. Its own class
   rather than `hidden`, because the search filter owns that one and a row can
   be out of the results and folded away at once. The chevron is the sidebar's,
   and turns the same way. */
.account-folded { display: none !important; }
.account-chevron { transition: transform 150ms ease; }
.account-chevron-open { transform: rotate(90deg); }

/* Rows picked out with ctrl-click, to be dragged together. The bar down the
   left is what carries at a glance on a chart hundreds of rows long - a tint
   alone is hard to tell from the white/grey banding underneath it, which is
   also why the tint has to win over that banding. */
.account-selected {
  background-color: #dbeafe !important;
  box-shadow: inset 3px 0 0 0 #2563eb;
}
[data-theme="modern-dark"] main .account-selected { background-color: #1e3a5f !important; }

/* Dragging an account onto a new parent. Into the middle of a row files it
   under that account; the line at the top or bottom edge files it beside. */
.account-dragging { opacity: 0.45; }
.account-drop-into { outline: 2px solid #2563eb; outline-offset: -2px; border-radius: 4px; }
.account-drop-beside { box-shadow: inset 0 2px 0 0 #2563eb; }
[data-theme="modern-dark"] #action-bar .back-btn,
[data-theme="modern-dark"] main .back-btn { color: #f1f5f9; }

/* Modern themes use Inter, which ships proper normal/bold weights (the joe
   theme keeps Open Sans). Selectors beat the base `html, body` rule in report.css. */
[data-theme^="modern"],
[data-theme^="modern"] body { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
/* …but reports do not follow the theme's font. They print in whatever the
   business (or the ledger) chose - see ReportFonts and shared/_report_font -
   defaulting to the original joe font, so output is unchanged for anyone who
   has not set one. .page-inner wraps the whole report (header + body) on
   every theme.
   Carries the same fallbacks as the base rule in report.css - see the note
   there for why a report of all things must not drop through to a serif. */
[data-theme^="modern"] .page-inner { font-family: var(--report-font, "Open Sans", ui-sans-serif, system-ui, sans-serif); }

/* Roomier vertical rhythm on the modern themes (item widths are left untouched
   so the fixed 220px rail / collapsed rail still line up). */
[data-theme^="modern"] #report-nav .nav-item { padding-top: 0.35rem; padding-bottom: 0.35rem; margin-top: 0.2rem; }

/* Indent items within a collapsible section so they read as sub-items under the
   heading (modern themes, expanded rail only - the collapsed icon rail keeps its
   centred items). */
html[data-theme^="modern"]:not(.sidebar-collapsed) #report-nav [data-nav-section-target="body"] .nav-item { padding-left: 22px; }
[data-theme^="modern"] #report-nav .nav-section-header { margin-top: 0.85rem; margin-bottom: 0.3rem; }
[data-theme^="modern"] #report-nav .nav-user { margin-bottom: 0.6rem; }

a {text-decoration:none;}

/* The tracks are set per user by ledger_grid_template, as --ledger-grid on the
   listing (companies/_ledger_listing.html.erb), so the header and every row
   share one template that only has the columns that user has switched on.

   The grid scrolls sideways inside its wrapper rather than dropping columns as
   the window narrows - which ones to show is the user's call now, not the
   viewport's. min-width keeps each row as wide as its tracks so a highlighted
   row's background runs the full width when it scrolls. */
.companies-grid {
  grid-template-columns: var(--ledger-grid);
  min-width: fit-content;
}

.companies-grid .col-code,
.companies-grid .col-client-type,
.companies-grid .col-business,
.companies-grid .col-period,
.companies-grid .col-source,
.companies-grid .col-group,
.companies-grid .col-turnover {
  font-size: 0.75rem;
  line-height: 1rem;
}

/* A <dialog> that fades in over a dimmed page and fades back out - the
   Customise columns dialog on Client Ledgers.

   Both the panel and its ::backdrop go from transparent to opaque. A closed
   dialog is display:none, which would cut the fade off on the way out, so
   display and overlay transition as allow-discrete: they flip at the end of
   the fade rather than the start. @starting-style is the opening state, since
   a box that has just appeared has no previous style to transition from. */
.dialog-fade,
.dialog-fade::backdrop {
  opacity: 0;
  transition: opacity 200ms ease-out, display 200ms allow-discrete, overlay 200ms allow-discrete;
}
.dialog-fade[open],
.dialog-fade[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .dialog-fade[open],
  .dialog-fade[open]::backdrop {
    opacity: 0;
  }
}
.dialog-fade::backdrop {
  background-color: rgb(17 24 39 / 0.4);
}

/* The Client Ledgers pager (shared/_pagination_spread), in the fixed bar
   above: Previous and Next at the two ends, the numbers centred between them, and the current page a
   filled square - near black on modern-light, near white on modern-dark. */
/* Client Ledgers' fixed bar holds two lines - the totals, then the pager -
   and its pager runs the full width, so unlike the other listings' bar it has
   something at the right-hand end. The extra padding underneath lifts that
   above the legal strip, which owns the bottom-right corner at z-50. */
.listing-pagination.ledger-pager-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding-bottom: 1.75rem;
}

.ledger-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 0.875rem;
  color: var(--theme-secondary-button-text);
}
.ledger-pager-end { display: flex; }
.ledger-pager-numbers { display: flex; align-items: center; gap: 0.25rem; }
.ledger-pager-step {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--button-radius);
}
.ledger-pager-step:hover { background-color: var(--theme-secondary-button-hover); }
.ledger-pager-step.is-disabled { opacity: 0.4; }
.ledger-pager-step.is-disabled:hover { background-color: transparent; }
.ledger-pager-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.25rem;
  border-radius: 0.375rem;
}
a.ledger-pager-number:hover { background-color: var(--theme-secondary-button-hover); }
.ledger-pager-number.is-current {
  background-color: #111827; /* gray-900 */
  color: #ffffff;
  font-weight: 600;
}
[data-theme="modern-dark"] main .ledger-pager-number.is-current {
  background-color: #f1f5f9; /* slate-100 */
  color: #0f172a;            /* slate-900 */
}
@media print { .ledger-pager { display: none; } }

/* Status and Issues pills. A shared class keeps every pill the same shape and
   width so they line up in a column. min-width is sized to the widest label in
   use ("disconnected" / "warnings: NN"); the colour is set per-pill inline.

   Shape only - no colour. The pills that stay a solid state colour carry their
   own fill and text-white; the ones that took a badge state (errors, warnings,
   a stale Synced) take both from --theme-badge-*, and a white declared here
   would have won over the badge class and left light text on a light chip. This
   file is unlayered, and unlayered beats @layer components whatever the order. */
.ledger-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 6rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  white-space: nowrap;
}


/* The icon buttons on a Client Ledgers row - refresh, edit, delete and the
   chevron that opens the ledger. No box, just the icon in a 2rem square that
   tints on hover (--button-radius, like every other button - ButtonRadiusTest), so a row of them reads as one quiet group beside the one
   worded action, Disconnect. Edit takes the secondary button's text colour and
   refresh the primary fill, so a theme moves them with its buttons; the bin is
   .btn-icon-danger's red. */
.ledger-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--theme-secondary-button-text);
  cursor: pointer;
}
.ledger-action:hover { background-color: var(--theme-secondary-button-hover); }
.ledger-action svg { width: 20px; height: 20px; }
.ledger-action-refresh { color: var(--theme-primary-button); }
.ledger-action.btn-icon-danger { color: var(--theme-danger-button); line-height: normal; padding: 0; }
.ledger-action.text-primary-link { color: var(--theme-primary-link); }

/* A source's logo in the Client Ledgers Source column. Height only - the
   width follows the artwork's own proportions, which is what Intuit's and
   Xero's brand rules ask for - and capped to the column so a wide wordmark
   can't push the row out. */
/* The ledger name is a link, and says so with an underline as the design
   does. Written here because the bare `a { text-decoration: none }` above is
   unlayered and beats Tailwind's underline utility. */
.companies-grid .col-name a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ledger-source-logo {
  height: 20px;
  width: auto;
  max-width: 100%;
}
/* Xero's wordmark is all x-height, so at the others' 20px it reads twice the
   size of them. Half, still by height only. Only shown if the round mark
   (CompaniesHelper::SOURCE_ICONS) is missing. */
.ledger-source-logo-xero { height: 10px; }

/* The same pill inline in a report, beside an account name rather than in a
   column of its own - the Trial Balance's Error and Warning flags.

   Everything that makes it a pill stays: the shape, the type, and the two badge
   states meaning what they mean on the listing. What comes off is the column
   sizing. min-width above is there to line a column of pills
   up with each other, which is worth 6rem when they sit under one another and
   nothing at all when they follow a name of any length - it just padded a
   five-letter word out to 96px in the middle of a row of figures.

   Smaller with it, because a flag on a page of numbers should be readable
   without being the first thing on the line you look at. */
.ledger-pill-sm {
  /* inline-block, not the inline-flex above, and this is load-bearing rather
     than tidying. The pill is bound to the account name by a non-breaking space
     so it cannot wrap away from it (see trial_balance_status_flag), which means
     that when the name nearly fills the column the pill has to fit in whatever
     is left of the line. An inline-flex box shrinks to that space and lets its
     own text overflow - centred, so "Warning" came out clipped to "rning" at
     both ends. An inline-block sizes to its content and refuses to shrink, so
     the name-and-pill unit moves to the next line whole instead. */
  display: inline-block;

  /* Both labels to the width of the wider one, so an Error and a Warning are
     the same size wherever they fall down the report - the same reason the
     listing's pill carries a min-width, sized here to "Warning" rather than to
     a column of status text. A red pill visibly smaller than the orange one
     beside it reads as the lesser of the two, which is backwards.

     text-align because this is an inline-block: the justify-content on
     .ledger-pill centres the label of a flex box, and does nothing here, so
     "Error" would sit against the left edge of the wider box without it. */
  min-width: 3.5rem;
  text-align: center;
  padding: 0 0.375rem;
  font-size: 0.6875rem;
  line-height: 0.95rem;

  /* The account name column hangs its wrapped lines on a negative text-indent,
     and text-indent inherits into every block container inside it - which an
     inline-block is. The pill was taking the cell's -18px as its own, drawing
     its label 18px to the left of its fill and shrinking its box by the same
     18px: "Warning" came out as a 35px pill reading "rning", "Error" as a 19px
     one reading "or". Nothing to do with the pill's own size; it just has to
     say it does not want the indent. */
  text-indent: 0;
}

/* ------------------------------------------------------------------------- */
/* Dragging the help contents into order (help_order_controller.js).          */
/*                                                                            */
/* The same visual language as a dragged report row - a faded row, a line     */
/* where it would land - written out here rather than shared with the         */
/* .report-order-* rules, which are about a report and say so in their names. */

.help-order-row { position: relative; }

/* The grip, in the margin to the left of the row it moves. Shown on hover of
   the row rather than always, so a list nobody is reordering reads as a list. */
.help-order-handle {
  display: inline-flex;
  align-items: center;
  color: var(--color-gray-400);
  cursor: grab;
  opacity: 0;
  transition: opacity 100ms ease-in;
}
.help-order-row:hover .help-order-handle,
.help-order-handle:focus-visible { opacity: 1; }
.help-order-handle:active { cursor: grabbing; }

/* ------------------------------------------------------------------------- */
/* Dragging an account onto another to re-parent it (account_tree_controller) */
/*                                                                            */
/* The row has always been draggable where the parent is ours to set, with    */
/* nothing on screen saying so. This is that affordance, in the same visual    */
/* language as the help contents grip above: hidden until the row is hovered,  */
/* so a chart nobody is rearranging still reads as a chart.                    */
/*                                                                            */
/* Hung off [data-account-row], which the row already carries for             */
/* account_tree_controller, rather than a class added only to be hovered.     */

.account-drag-handle {
  display: inline-flex;
  align-items: center;
  color: var(--color-gray-400);
  cursor: grab;
  opacity: 0;
  transition: opacity 100ms ease-in;
}
[data-account-row]:hover .account-drag-handle { opacity: 1; }
.account-drag-handle:active { cursor: grabbing; }

/* One fixed width for the grip and for the empty gutter that stands in its
   place on the filter row, the headings and the new account row. Those are
   separate grids from the chart's rows, so they only line up while every one
   of them opens with a column of the same width - which is why the gutter is
   a partial rather than four copies of a <div>. */
.account-drag-gutter { width: 10px; flex: none; }

/* Nothing to grab on paper, and the column would only push the chart along. */
@media print {
  .account-drag-handle,
  .account-drag-gutter { display: none; }
}

/* What is moving. Faded so the eye follows the line rather than the row, and
   outlined so a faded row still reads as a row rather than one that failed. */
.help-order-dragging { opacity: 0.4; outline: 1px dashed var(--color-blue-400); outline-offset: 1px; }

/* Where it would land. A pseudo-element rather than a border: a border is two
   pixels of height, so every row below the pointer would step down and back up
   again as it crossed each half-row, and a list that jitters is hard to aim at. */
.help-order-drop-above::after,
.help-order-drop-below::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--color-blue-600);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.85);
  pointer-events: none;
  z-index: 2;
}
.help-order-drop-above::after { top: -2px; }
.help-order-drop-below::after { bottom: -2px; }

/* ---------------------------------------------------------------------------
   The client plan's vertical line

   The step being read, on both screens. A tint rather than a border: the rows
   sit against a line drawn through them, and a border would move the tick off
   it by a pixel every time the pointer crossed a row. */
.plan-step-open { background: var(--color-blue-50); }
.plan-step { transition: background-color 120ms ease-in-out; }

/* Hidden until the row is hovered, like the chart of accounts' grip. A grip on
   every row at rest is six dots of furniture per step. */
.plan-step-grip { opacity: 0; transition: opacity 120ms ease-in-out; }
.plan-step:hover .plan-step-grip,
.plan-step-grip:focus-visible { opacity: 1; }
.plan-step-grip:active { cursor: grabbing; }

/* Dragging a step into place. The same two rules the help contents uses, and
   for the same reasons - see the note above them. */
.plan-step-dragging { opacity: 0.4; outline: 1px dashed var(--color-blue-400); outline-offset: 1px; }

.plan-step-drop-above::after,
.plan-step-drop-below::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--color-blue-600);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.85);
  pointer-events: none;
  z-index: 2;
}
.plan-step-drop-above::after { top: -2px; }
.plan-step-drop-below::after { bottom: -2px; }