/* Milu brand and small adjustments on top of Tabler. */

:root,
[data-bs-theme="light"] {
    --tblr-primary: #2f6feb;
    --tblr-primary-rgb: 47, 111, 235;
    --tblr-body-bg: #f6f8fb;
}

[data-bs-theme="dark"] {
    --tblr-primary: #5b8dff;
    --tblr-primary-rgb: 91, 141, 255;
}

/* --- Brand logo ----------------------------------------------------------------------------
   One SVG asset serves every placement. The artwork is 778x208 with the "People Products
   Possibilities" tagline occupying the bottom band from y=168. Where the logo renders small the
   tagline would be under a pixel tall, so those placements clip it by constraining the box to
   778x167 and hiding the overflow, rather than shipping a second file to keep in sync. */

.milu-logo {
    display: block;
    overflow: hidden;
}

.milu-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* Wordmark only: tagline clipped. */
.milu-logo-compact {
    aspect-ratio: 778 / 167;
}

/* The sidebar panel is always dark, so the artwork is rendered in white. */
.milu-logo-sidebar {
    width: 10.5rem;
    margin-inline: auto;
    filter: brightness(0) invert(1);
}

/* Once the sidebar is a panel, the brand fills its width so the mark sits in the middle. */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg .navbar-brand {
        width: 100%;
        justify-content: center;
    }
}

/* Sign-in shows the full logo, tagline included, where there is room for it to read. */
.milu-logo-auth {
    width: 100%;
    max-width: 21rem;
    margin-inline: auto;
}

[data-bs-theme="dark"] .milu-logo-auth {
    filter: brightness(0) invert(1);
}

.milu-logo-receipt {
    width: 15rem;
}

/* --- Theme toggle: show only the button that switches to the other theme -------------------- */

.milu-theme-toggle[data-milu-theme="dark"] {
    display: inline-flex;
}

.milu-theme-toggle[data-milu-theme="light"] {
    display: none;
}

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

[data-bs-theme="dark"] .milu-theme-toggle[data-milu-theme="light"] {
    display: inline-flex;
}

/* Sidebar section label. Tabler 1.5 dropped its own .navbar-heading rule, so this aligns
   the label with the nav links using Tabler's sidebar padding variable. */
.milu-nav-heading {
    margin: 1.25rem 0 .25rem;
    padding-inline: var(--tblr-sidebar-nav-padding-x, .75rem);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tblr-secondary);
    opacity: .75;
}

/* --- Sign-in page -------------------------------------------------------------------------- */

/* Signed-out pages have no sidebar or header, so the card sits in the middle of the viewport. */
.milu-page-center {
    min-height: 100vh;
    min-height: 100dvh;
    justify-content: center;
}

.milu-page-center .page-body {
    margin-block: 0;
}

/* The sign-in card sits in the middle of the viewport rather than at the top of it. The
   min-height leaves room for the page's own padding; on a short screen it simply scrolls. */
.milu-auth {
    max-width: 26rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 4rem);
}

.milu-auth-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 1.75rem;
}

/* Show/hide button at the end of a password field. Tabler's input addons ignore the pointer,
   since they are only decoration; this one is a button, so it takes clicks back. */
.milu-password-toggle {
    pointer-events: auto;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.milu-password-toggle:hover,
.milu-password-toggle:focus-visible {
    color: var(--tblr-body-color);
}

.milu-password-toggle[aria-pressed="true"] .milu-password-show,
.milu-password-toggle:not([aria-pressed="true"]) .milu-password-hide {
    display: none;
}

/* Test-account rows on the sign-in page (Development only). */
.milu-dev-accounts code {
    background: none;
    padding: 0;
    color: inherit;
}

/* --- Tables -------------------------------------------------------------------------------- */

/* Row actions stay out of the way until the row is hovered, on pointer devices only. */
@media (hover: hover) {
    .milu-row-actions {
        opacity: 0;
        transition: opacity .12s ease-in-out;
    }

    tr:hover .milu-row-actions,
    tr:focus-within .milu-row-actions {
        opacity: 1;
    }
}

/* --- Catalogue tree ------------------------------------------------------------------------ */

/* One table for the whole tree, so every branch and leaf keeps the same columns. */
.milu-tree tbody tr.milu-tree-row:hover > td {
    background: var(--tblr-bg-surface-secondary);
}

.milu-tree-toggle {
    border: 0;
    background: none;
    color: var(--tblr-secondary);
}

.milu-tree-toggle .icon {
    transition: transform .15s ease-in-out;
}

.milu-tree-toggle[aria-expanded="true"] .icon {
    transform: rotate(90deg);
}

.milu-tree-toggle:disabled {
    opacity: .35;
}

.milu-tree-icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Every row sets --milu-depth (1 for a top-level category), which drives both the indent and the
   guide line, so nesting deeper needs no new rules. The step is 1.75rem, the width of a small icon
   button, and rows start at the 1.25rem the card table pads its first column by.
   These selectors are deliberately specific enough to beat Tabler's `.card-table tr td:first-child`
   padding, which otherwise wins and leaves every row flush with the card edge. */
.milu-tree tbody tr {
    --milu-depth: 1;
    --milu-indent: calc(1.25rem + (var(--milu-depth) - 1) * 1.75rem);
}

.milu-tree tbody tr > td:first-child {
    position: relative;
    padding-inline-start: var(--milu-indent);
}

/* A guide line dropping from the parent row's toggle, which sits 0.875rem into its own indent. */
.milu-tree tbody tr.milu-tree-leaf > td:first-child::before,
.milu-tree tbody tr[data-milu-parent]:not([data-milu-parent=""]) > td:first-child::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--milu-indent) - 0.875rem);
    border-inline-start: var(--tblr-border-width) var(--tblr-border-style) var(--tblr-border-color);
}

/* At the very end of the tree the line stops halfway rather than running off the last row. */
.milu-tree tbody tr:last-child > td:first-child::before {
    inset-block: 0 50%;
}

/* Top-level groupings read as headings for what sits under them. */
.milu-tree tbody tr.milu-tree-depth-1 > td {
    background: var(--tblr-bg-surface-tertiary);
}

/* --- Receipt ------------------------------------------------------------------------------- */

.milu-receipt {
    max-width: 46rem;
}

@media print {
    .milu-receipt {
        max-width: none;
        border: 0;
        box-shadow: none;
    }

    .page-wrapper {
        margin-inline-start: 0 !important;
    }
}

.milu-empty-icon .icon {
    width: 3rem;
    height: 3rem;
    stroke-width: 1.25;
}

/* Deletion log: the JSON copy of a deleted row. Scrolls on its own rather than
   stretching the card, and keeps the page from scrolling sideways. */
.milu-snapshot {
    max-height: 32rem;
    overflow: auto;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Collapsible sidebar group (Reports). The chevron points down while the group is open,
   and the children sit under the parent's label rather than its icon. */
.milu-nav-chevron {
    display: inline-flex;
    transition: transform 0.15s ease-in-out;
}

.milu-nav-collapse:not(.collapsed) .milu-nav-chevron {
    transform: rotate(90deg);
}

.milu-nav-sub {
    padding-left: calc(var(--tblr-sidebar-nav-padding-x, 0.5rem) + 1.75rem);
}

.milu-nav-sub .nav-link {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.875rem;
}

/* Charts. The canvas scales with the card; the tooltip floats over its top-right corner so it
   never covers the newest days, which is where the eye goes first. */
.milu-chart {
    position: relative;
    margin: 0;
}

.milu-chart-canvas {
    width: 100%;
    height: auto;
    overflow: visible;
}

.milu-chart-grid {
    stroke: var(--tblr-border-color);
    stroke-width: 1;
}

.milu-chart-axis {
    fill: var(--tblr-secondary);
    font-size: 11px;
}

.milu-chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.milu-chart-dot {
    opacity: 0.9;
}

.milu-chart-hit {
    fill: transparent;
}

.milu-chart-hit:hover {
    fill: var(--tblr-secondary);
    fill-opacity: 0.06;
}

.milu-chart-tooltip {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 13rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
    pointer-events: none;
}

.milu-chart-key {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 2px;
    margin-right: 0.375rem;
}

/* Tabler lays a card header out as a flex row, so a subtitle written under the title ends up
   beside it. Give it the whole width and it drops onto its own line, as intended. */
.card-header > .card-subtitle {
    flex-basis: 100%;
    margin-top: 0.25rem;
}

/* The count axis on the right, so orders and birr can share one picture. */
.milu-chart-axis-count {
    fill: var(--tblr-green);
}

/* Type-to-search dropdowns. The real <select> stays in the form but out of sight; the input and
   list in front of it do the searching. */
.milu-search {
    position: relative;
}

.milu-search-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.milu-search-list {
    position: absolute;
    z-index: 1050;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 18rem;
    overflow-y: auto;
    padding: 0.25rem;
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
    box-shadow: var(--tblr-box-shadow-dropdown, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.milu-search-option {
    display: block;
    width: 100%;
    padding: 0.375rem 0.5rem;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--tblr-border-radius);
    color: inherit;
    font-size: 0.875rem;
}

.milu-search-option.active,
.milu-search-option:hover {
    background: var(--tblr-primary-lt);
}

.milu-search-option.selected {
    font-weight: 600;
}

.milu-search-empty {
    padding: 0.5rem;
    color: var(--tblr-secondary);
    font-size: 0.8125rem;
}

/* Entry grids. A document's lines are a table people fill in like a spreadsheet, so the cells
   carry the borders and the fields inside them carry none: what you see is the grid, not a
   column of boxes. Focus draws the cell rather than the input. */
.milu-grid {
    margin-bottom: 0;
}

.milu-grid > thead > tr > th {
    background: var(--tblr-bg-surface-tertiary, rgba(0, 0, 0, .02));
    border-bottom: 1px solid var(--tblr-border-color);
    font-size: .7rem;
    letter-spacing: .04em;
    padding: .4rem .625rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.milu-grid > tbody > tr > td {
    border-right: 1px solid var(--tblr-border-color);
    padding: 0;
    vertical-align: middle;
}

.milu-grid > tbody > tr > td:last-child,
.milu-grid > thead > tr > th:last-child {
    border-right: 0;
}

/* Cells that hold plain text rather than a field still need room to breathe. */
.milu-grid .milu-grid-cell {
    padding: .4rem .625rem;
}

.milu-grid .form-control,
.milu-grid .form-select {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    height: 2.25rem;
    padding: .25rem .625rem;
}

.milu-grid .form-control:focus,
.milu-grid .form-select:focus {
    background-color: var(--tblr-bg-surface);
    box-shadow: inset 0 0 0 2px var(--tblr-primary);
}

/* The unit switch and the currency badge ride inside a cell without drawing a second box. */
.milu-grid .input-group {
    flex-wrap: nowrap;
}

.milu-grid .input-group-text {
    background: transparent;
    border: 0;
    color: var(--tblr-secondary);
    padding-left: .625rem;
    padding-right: .25rem;
}

.milu-grid .milu-grid-unit {
    border-left: 1px dashed var(--tblr-border-color);
    color: var(--tblr-secondary);
    flex: 0 0 auto;
    width: auto;
}

.milu-grid .milu-search {
    width: 100%;
}

/* A row's own remove button stays out of the way until the row is pointed at. */
.milu-grid .milu-grid-remove {
    opacity: 0;
    transition: opacity .1s ease-in-out;
}

.milu-grid > tbody > tr:hover .milu-grid-remove,
.milu-grid .milu-grid-remove:focus-visible {
    opacity: 1;
}

.milu-grid .milu-grid-number {
    color: var(--tblr-secondary);
    font-size: .75rem;
    padding: .4rem .5rem;
    text-align: right;
    width: 1%;
}

/* A line still being written should not shout for attention; one that is priced can. */
.milu-grid .milu-grid-amount {
    padding: .4rem .625rem;
    text-align: right;
    white-space: nowrap;
}


/* --- Breadcrumb ---------------------------------------------------------------------------- */

/* Lives in the top bar, level with the account menu, so it takes that bar's vertical rhythm
   rather than Tabler's standalone 1rem gap under a standalone breadcrumb. Not uppercased: crumbs
   carry names and document references, which have to read as they are written. */
.milu-breadcrumb {
    --tblr-breadcrumb-margin-bottom: 0;
    --tblr-breadcrumb-item-active-font-weight: inherit;
    align-items: center;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--tblr-secondary);
}

/* The whole trail reads as one quiet line; only hovering shows which parts are links. The last
   crumb is the page you are on, so it is never one. */
.milu-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.milu-breadcrumb a:hover {
    color: var(--tblr-link-color);
    text-decoration: underline;
}

/* The Milu mark opens the trail and is the way back to the dashboard, the way the sidebar brand
   is. The tile has no intrinsic size, so it must be given one here. */
.milu-breadcrumb-home img {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 0.25rem;
}

.milu-breadcrumb-home a:hover {
    text-decoration: none;
}

/* A module's own reports, grouped inside its section. Quieter than the SETUP heading above the
   sidebar's second list: this one sits inside a list that is already indented. */
.milu-nav-subheading {
    color: var(--tblr-secondary);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    margin: .625rem 0 .125rem;
    opacity: .75;
    text-transform: uppercase;
}