/* ---------------------------------------------------------------------------
   Finora — application styling on top of Tabler.
   Only additions and refinements live here; Tabler remains the design system.
   Every colour uses Tabler's CSS variables so light and dark mode both work.
   --------------------------------------------------------------------------- */

/* Brand mark ------------------------------------------------------------- */
.finora-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #0054a6 0%, #4299e1 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}

.finora-logo-lg {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.5rem;
    border-radius: 10px;
}

.finora-wordmark {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.finora-wordmark-lg {
    font-size: 1.6rem;
}

/* Company switcher ------------------------------------------------------- */
.finora-company-switcher {
    width: 100%;
}

.finora-company-current {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--tblr-border-radius);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}

.finora-company-current:hover,
.finora-company-current:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
}

.finora-company-current::after {
    margin-left: auto;
}

.finora-company-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

.finora-company-name {
    font-weight: 600;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finora-company-meta {
    font-size: 0.7rem;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finora-company-menu {
    width: 20rem;
    max-width: calc(100vw - 2rem);
    padding-bottom: 0.25rem;
}

.finora-company-menu .dropdown-menu-scrollable {
    max-height: 18rem;
    overflow-y: auto;
}

.finora-company-item {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
}

/* Sidebar ---------------------------------------------------------------- */
.finora-nav-section {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
}

.navbar-vertical .navbar-nav .nav-item.active > .nav-link {
    font-weight: 600;
}

/* Navbar ----------------------------------------------------------------- */
.finora-search {
    max-width: 32rem;
}

.finora-kbd-hint {
    pointer-events: none;
}

/* Type-ahead panel under the navbar search box. */
.finora-suggest {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    max-height: 26rem;
    overflow-y: auto;
    z-index: 1050;
}

.finora-suggest .dropdown-header {
    position: sticky;
    top: 0;
    background: var(--tblr-dropdown-bg, var(--tblr-bg-surface));
    z-index: 1;
}

.finora-kbd-hint kbd {
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
}

.finora-active-company {
    min-width: 0;
}

.finora-theme-toggle {
    line-height: 1;
    padding: 0.5rem;
    color: var(--tblr-body-color);
}

[data-bs-theme="light"] .finora-theme-icon-light,
:root:not([data-bs-theme="dark"]) .finora-theme-icon-light {
    display: none;
}

[data-bs-theme="dark"] .finora-theme-icon-dark {
    display: none;
}

/* Auth pages ------------------------------------------------------------- */
.finora-auth-body {
    background-color: var(--tblr-bg-surface-secondary);
}

/* Tables ----------------------------------------------------------------- */
.table th a {
    white-space: nowrap;
}

/* Money and other figures always align on the decimal separator. */
.finora-amount {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.finora-amount-negative {
    color: var(--tblr-danger);
}

.finora-code {
    font-family: var(--tblr-font-monospace);
    font-size: 0.8125rem;
}

/* Editable line tables (invoices, journal entries) ----------------------- */
.finora-lines td {
    vertical-align: middle;
}

.finora-lines .form-control,
.finora-lines .form-select {
    min-width: 0;
}

.finora-lines input.finora-amount {
    text-align: right;
}

.finora-line-remove {
    color: var(--tblr-secondary);
}

.finora-line-remove:hover {
    color: var(--tblr-danger);
}

/* Totals card ------------------------------------------------------------ */
.finora-totals dt {
    font-weight: 400;
    color: var(--tblr-secondary);
}

.finora-totals dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.35rem;
}

.finora-totals .finora-grand-total {
    font-size: 1.25rem;
    font-weight: 600;
}

/* Print ------------------------------------------------------------------ */
@media print {
    .page-wrapper {
        margin: 0 !important;
    }

    .card {
        border: 0 !important;
        box-shadow: none !important;
    }
}

/* Mobile refinements ----------------------------------------------------- */
@media (max-width: 575.98px) {
    .page-header .btn-list {
        width: 100%;
    }

    .page-header .btn-list .btn {
        flex: 1 1 auto;
    }
}

/* Recognised document text. Monospace and pre-wrapped because OCR output is positional:
   the columns of an invoice's line table only read correctly if the spacing survives.

   The explicit `color` is load-bearing, not decoration. Tabler styles bare <pre> as
   `color: var(--tblr-light)` — near-white, meant for code on a dark block — which rendered
   this panel as white text on a light surface, i.e. invisible. Setting the body colour puts
   it back on the normal text token, so it stays readable in both light and dark themes. */
.finora-extracted-text {
    max-height: 22rem;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--tblr-body-color);
    background: var(--tblr-bg-surface-secondary);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    padding: 0.75rem;
    margin: 0;
}

/* Document inbox --------------------------------------------------------- */

/* A row's preview.

   Deliberately page-shaped rather than a square: an invoice is portrait, and a portrait outline
   is what makes a row scannable as "a document" at a glance. Cropped from the top because that
   is where the letterhead is — the half-inch of a page that actually identifies its sender.

   The image is the real file, loaded lazily through the authorised stream. There is no
   thumbnail service: generating one would mean a server-side image library, and neither of the
   candidates is worth it here (ImageSharp is not free for commercial use above a revenue
   threshold, SkiaSharp drags in a native dependency) for a preview this size. */
.finora-thumb {
    display: block;
    width: 2.25rem;
    height: 3rem;
    overflow: hidden;
    border: 1px solid var(--tblr-border-color);
    border-radius: 3px;
    background: var(--tblr-bg-surface);
}

.finora-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* The type icon a PDF gets instead, sized to match so the column stays straight. */
.finora-thumb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 3rem;
    border-radius: 3px;
}

/* Uploading and capturing ------------------------------------------------ */

/* The drop target. A dashed outline reads as "put something here" in a way a solid border does
   not, and the whole block is a <label> so a click anywhere on it opens the file picker. */
.finora-dropzone {
    display: block;
    width: 100%;
    padding: 2.5rem 1rem;
    text-align: center;
    cursor: pointer;
    border: 2px dashed var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary);
    transition: border-color .15s ease, background-color .15s ease;
}

.finora-dropzone:hover,
.finora-dropzone:focus-visible {
    border-color: var(--tblr-primary);
}

.finora-dropzone-over {
    border-color: var(--tblr-primary);
    background: var(--tblr-primary-lt);
}

/* The photo just taken, before it is sent. Capped by viewport height so a portrait photograph
   on a phone still leaves the Retake and Upload buttons on screen. */
.finora-capture-preview {
    max-height: 50vh;
    overflow: hidden;
    border-radius: var(--tblr-border-radius);
    background: var(--tblr-bg-surface-secondary);
}

.finora-capture-preview img {
    display: block;
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
    margin: 0 auto;
}

/* Invoice review --------------------------------------------------------- */

/* Two panes that scroll independently, so the figures stay put while the document is scrolled
   and the accountant never loses their place in either. Height is tied to the viewport rather
   than the content because the whole point is that both halves are visible at once. */
@media (min-width: 992px) {
    .finora-review > [class*="col-"] > .card {
        height: calc(100vh - 15rem);
        min-height: 34rem;
    }

    /* Both panes are always visible side by side on a wide screen, whatever the tab state says.
       The two columns double as Bootstrap tab panes so a phone can switch between them, and
       without this an accountant who tapped "Details" on a tablet and then turned it landscape
       would find the document pane simply gone — the tab strip is hidden at this width, so
       there would be no way to bring it back. */
    .finora-review > .tab-pane {
        display: block !important;
        opacity: 1 !important;
    }
}

.finora-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 24rem;
}

.finora-viewer-toolbar {
    flex: none;
    flex-wrap: wrap;
    background: var(--tblr-bg-surface-secondary);
}

.finora-viewer-stage {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem;
    background: var(--tblr-bg-surface-tertiary, var(--tblr-bg-surface-secondary));
    text-align: center;
}

/* The page and its highlight share one positioned box, so a box recorded at 40% across the page
   stays at 40% across it through every zoom, rotation and resize. */
.finora-viewer-page {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.finora-viewer-page canvas,
.finora-viewer-page img {
    display: block;
    max-width: none;
    box-shadow: 0 0 0 1px var(--tblr-border-color), 0 .5rem 1.5rem rgba(0, 0, 0, .12);
}

/* Where a figure came from. An outline rather than a wash, so the words underneath stay
   readable — the point is to let the accountant read them, not to colour them in. */
.finora-viewer-highlight {
    position: absolute;
    pointer-events: none;
    border: 2px solid var(--tblr-primary);
    border-radius: 2px;
    background: rgba(var(--tblr-primary-rgb), .12);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .04);
    transition: all .12s ease-out;
}

.finora-viewer-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A field the reader was unsure about. Deliberately softer than a validation error — nothing is
   wrong yet, it just deserves a look. */
.is-invalid-soft {
    border-color: var(--tblr-warning);
}

.is-invalid-soft:focus {
    border-color: var(--tblr-warning);
    box-shadow: 0 0 0 .25rem rgba(var(--tblr-warning-rgb), .25);
}

/* On a phone the panes become tabs, so the fixed viewport height would only get in the way. */
@media (max-width: 991.98px) {
    .finora-viewer-stage { max-height: 55vh; }
}