/* KAppleWeb overrides on top of Tabler (tabler.min.css). Bump ?v= in the HTML pages when this changes. */

/* ---- Icons (Tabler Icons webfont, <i class="ti ti-name">) ---- */
.ti {
    font-size: 1.25rem;
    vertical-align: -0.2em;
}

.btn .ti,
.dropdown-item .ti,
.nav-link-icon .ti {
    font-size: 1.25rem;
}

.btn-icon .ti {
    margin: 0;
}

.ti-xl {
    font-size: 3rem;
    line-height: 1;
    vertical-align: middle;
}

.alert .alert-icon.ti {
    font-size: 1.5rem;
}

/* ---- Toolbar ---- */
.search-box {
    width: 320px;
    max-width: 100%;
}

#pager .pager-goto {
    width: 4.5rem;
}

/* ---- Table ---- */
.card-table td {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-table thead.sticky-top {
    z-index: 2;
}

tbody.is-loading {
    opacity: .5;
    pointer-events: none;
    transition: opacity .15s;
}

.row-clickable {
    cursor: pointer;
}

.unread-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: var(--tblr-primary);
    vertical-align: middle;
}

/* ---- Sidebar folders: the dots menu takes real space at the end of the row (system folders get an
   empty spacer of the same width) so it never overlaps the count badge, and badges line up. ---- */
/* Tabler lays sidebar .nav-item out as a centered column; these rows must be a horizontal row. */
.navbar.navbar-vertical .navbar-nav .folder-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}

.navbar.navbar-vertical .navbar-nav .folder-item > .nav-link {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    /* A tighter end padding before the dots column leaves the name more room. */
    padding-inline-end: .5rem;
}

.folder-item .folder-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: 1.75rem; /* exactly the btn-sm btn-icon */
    margin-right: .25rem;
    opacity: 0;
    transition: opacity .1s;
}

.folder-item:hover .folder-actions,
.folder-item:focus-within .folder-actions,
.folder-item .folder-actions:has(.dropdown-menu.show) {
    opacity: 1;
}

.folder-item .folder-actions-spacer {
    opacity: 0 !important;
    pointer-events: none;
}

.folder-item .nav-link-title {
    min-width: 0;
}

/* "All messages" is a view over every folder, not a folder: a rule sets it off from the tree. */
.navbar.navbar-vertical .navbar-nav .folder-item.folder-all {
    margin-bottom: .25rem;
    padding-bottom: .25rem;
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
}

/* The Trash is not a folder either (deleted messages keep theirs): a rule sets it off below the tree. */
.navbar.navbar-vertical .navbar-nav .folder-item.folder-trash {
    margin-top: .25rem;
    padding-top: .25rem;
    border-top: var(--tblr-border-width) solid var(--tblr-border-color);
}

/* Nesting: each level steps the row in by the chevron's width. A leaf carries a blank of
   that width, so the folder icons of one level line up. */
.folder-item .folder-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-inline-start: calc(var(--folder-depth, 0) * 1.25rem);
    padding: 0;
    border: 0;
    border-radius: var(--tblr-border-radius);
    background: none;
    color: var(--tblr-secondary);
}

.folder-item .folder-toggle .ti {
    font-size: 1rem;
    vertical-align: 0;
}

.folder-item button.folder-toggle:hover {
    color: var(--tblr-body-color);
}

.folder-item .folder-toggle-spacer {
    pointer-events: none;
}

/* The "Move to" menus show the same tree, stepped in per level. */
.dropdown-menu .folder-option {
    padding-inline-start: calc(var(--tblr-dropdown-item-padding-x) + var(--folder-depth, 0) * 1rem);
}

/* ---- Sidebar: wider than Tabler's 16rem so folder names such as "Handled-20260918-d0914-12"
   fit one level down next to their count, and foldable to an icon rail. The fold is Tabler's own
   (html[data-bs-sidebar], toggled by the header button's data-bs-toggle="sidebar-folded"); each
   page's <head> script re-applies the saved state. Below lg the sidebar is a collapsed top menu,
   so the fold rules stop there. ---- */
:root {
    --kapple-sidebar-width: 24rem;
    --tblr-sidebar-width: var(--kapple-sidebar-width);
}

/* One header button; the icon follows the state. */
html[data-bs-sidebar^=folded] .hide-sidebar-folded,
html:not([data-bs-sidebar^=folded]) .hide-sidebar-unfolded {
    display: none;
}

@media (min-width: 992px) {
    /* Tabler hard-codes 16rem for the rail while the pointer is over it; use the full width. */
    :where([data-bs-sidebar=folded-hover]) .navbar-vertical.navbar-expand-lg:hover,
    :where([data-bs-sidebar=folded-hover]) .navbar-vertical.navbar-expand-lg:has(:focus-visible) {
        width: var(--kapple-sidebar-width);
    }

    /* Tabler's fold hides the link titles; also drop what only makes sense beside a title
       (brand text, the new-folder button, counts, chevrons and dots menus). */
    :where([data-bs-sidebar=folded]) .navbar-vertical.navbar-expand-lg :is(.navbar-brand span, .nav-section-title .btn, .nav-link .badge, .folder-toggle, .folder-actions),
    :where([data-bs-sidebar=folded-hover]) .navbar-vertical.navbar-expand-lg:not(:hover):not(:has(:focus-visible)) :is(.navbar-brand span, .nav-section-title .btn, .nav-link .badge, .folder-toggle, .folder-actions) {
        display: none;
    }
}

/* ---- Message drawer ---- */
#message-drawer {
    width: min(780px, 100vw);
}

/* While a message loads the drawer dims under a centered spinner (openDetail). */
#message-drawer.is-loading .offcanvas-header,
#message-drawer.is-loading .offcanvas-body {
    opacity: .5;
    pointer-events: none;
    transition: opacity .15s;
}

.msg-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

/* On a disc, so it reads over whatever the dimmed body shows underneath. */
.msg-loading .spinner-border {
    width: 2.5rem;
    height: 2.5rem;
    box-sizing: content-box;
    padding: .5rem;
    background: var(--tblr-bg-surface);
    background-clip: content-box;
    border-radius: 50%;
    box-shadow: 0 0 0 .5rem var(--tblr-bg-surface), var(--tblr-shadow-dropdown, 0 .5rem 1rem rgba(0,0,0,.15));
}

.drawer-footer {
    padding: .75rem 1.5rem;
    border-top: 1px solid var(--tblr-border-color);
}

.msg-body {
    width: 100%;
    max-height: 55vh;
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius);
}

pre.msg-body {
    padding: 1rem;
    overflow: auto;
    white-space: pre-wrap;
    background: var(--tblr-bg-surface-secondary);
    color: var(--tblr-body-color);
}

iframe.msg-body {
    height: 55vh;
    background: #fff;
}

.tag-editor {
    max-width: 380px;
}

/* ---- Wide tables: tighter cells, actions column stays visible while scrolling sideways ---- */
.card-table th,
.card-table td {
    padding-inline: .75rem;
}

.card-table th:last-child,
.card-table td:last-child {
    position: sticky;
    right: 0;
    background-color: var(--tblr-bg-surface);
    box-shadow: inset 1px 0 0 var(--tblr-border-color);
}

.card-table th:last-child {
    z-index: 3;
}

.card-table thead th {
    background-color: var(--tblr-bg-surface-secondary);
}

/* ---- Sidebar counts: Tabler pins .nav-link badges to the corner; keep ours inline at the end of the row ---- */
.navbar.navbar-vertical .navbar-nav .nav-link .badge {
    position: static;
    inset: auto;
    transform: none;
    margin-left: auto;
}

/* ---- Busy "Move to" button: the dropdown caret and btn-loading both draw ::after; make sure the spinner wins ---- */
.dropdown-toggle.btn-loading::after {
    margin: 0;
    transform: none;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
}

/* Tabler flattens every dropdown inside the vertical navbar into an inline sub-menu (position:
   static, no background, border or shadow, items indented like nav links). The folder actions
   menu is a real popover, so give it the normal dropdown look, floated under the dots button. */
.navbar.navbar-vertical .navbar-collapse .folder-item .folder-actions .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: var(--tblr-dropdown-min-width);
    padding: var(--tblr-dropdown-padding-y) var(--tblr-dropdown-padding-x);
    margin: var(--tblr-dropdown-spacer, 1px) 0 0;
    color: var(--tblr-dropdown-color);
    background-color: var(--tblr-dropdown-bg);
    border: var(--tblr-dropdown-border-width) solid var(--tblr-dropdown-border-color);
    box-shadow: var(--tblr-dropdown-box-shadow);
}

.navbar.navbar-vertical .navbar-collapse .folder-item .folder-actions .dropdown-item {
    padding-inline-start: var(--tblr-dropdown-item-padding-x);
}

/* ---- Import lines modal ---- */
#import-lines {
    white-space: pre;
    overflow-x: auto;
    font-size: .8125rem;
}

.import-table td {
    vertical-align: top;
    overflow-wrap: anywhere;
}

.import-table .import-change {
    font-family: var(--tblr-font-monospace);
    font-size: .8125rem;
}

/* ---- Message Folders page: the tree as table rows. Each level steps the name in by the
   chevron's width; a leaf carries a blank of that width so the icons of one level line up. ---- */
.folders-table td.folder-name {
    max-width: none;
    padding-left: calc(.75rem + var(--folder-depth, 0) * 1.5rem);
}

.folders-table .folder-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: .25rem;
    padding: 0;
    border: 0;
    border-radius: var(--tblr-border-radius);
    background: none;
    color: var(--tblr-secondary);
    vertical-align: middle;
}

.folders-table .folder-toggle .ti {
    font-size: 1rem;
    vertical-align: 0;
}

.folders-table button.folder-toggle:hover {
    color: var(--tblr-body-color);
}

.folders-table .folder-toggle-spacer {
    pointer-events: none;
}

/* A name that matches the filter is picked out; its ancestors show only to keep the path. */
.folders-table tr.folder-context .folder-name {
    color: var(--tblr-secondary);
}

/* ---- Overview Apple Orders modal ---- */
/* While a count re-runs the previous numbers stay on screen, dimmed like the message table. */
#overview-result.is-loading {
    opacity: .5;
    transition: opacity .15s;
}

/* A stage's folders sit one step in under it. */
#overview-table .overview-folder td:first-child {
    padding-left: 2.25rem;
}