/* ==========================================================================
   Samaa/IDO EDMS — Bridge layer
   --------------------------------------------------------------------------
   Maps Mayan's server-rendered Bootstrap 3 DOM onto the approved design
   system (new-theme-design). Loads AFTER bootstrap.min.css, appearance.css
   and theme-tokens.css so equal-specificity rules here win.

   Layout contract with mayan_app.js:
     body.sidebar-collapsed   sidebar hidden, viewport/topbar full width
     #menu-main.menu-main-opened   mobile off-canvas open
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Canvas and typography
   -------------------------------------------------------------------------- */

body {
    background: var(--canvas);
    color: var(--text-default);
    font-family: var(--font-ui);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--text-link);
}

a:hover,
a:focus {
    color: var(--primary-hover);
}

hr {
    border-top: 1px solid var(--border-default);
    margin-top: var(--space-3);
    margin-bottom: var(--space-4);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    font-family: var(--font-ui);
}

code {
    background: var(--surface-sunken);
    border-radius: 4px;
    color: var(--color-primary-700);
    font-family: var(--font-mono);
}

pre {
    background: var(--surface-muted);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-default);
}

blockquote {
    border-left: 3px solid var(--primary-border);
    color: var(--text-muted);
}

::selection {
    background: var(--primary-soft-hover);
}

/* --------------------------------------------------------------------------
   2. Topbar
   -------------------------------------------------------------------------- */

#menu-topbar .navbar {
    background: var(--surface-topbar);
    backdrop-filter: none;
    border: 0;
    border-bottom: 1px solid var(--border-default);
    box-shadow: none;
    margin-bottom: 0;
    min-height: var(--topbar-height);
    transition: left var(--duration-slow) var(--ease-standard);
}

/* The topbar sits to the right of the persistent sidebar on desktop. */
@media (min-width: 768px) {
    #menu-topbar .navbar-fixed-top {
        left: var(--sidebar-width);
        right: 0;
        width: auto;
    }

    body.sidebar-collapsed #menu-topbar .navbar-fixed-top {
        left: 0;
    }
}

#menu-topbar .container-fluid {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
}

/* Brand text lives in the sidebar on desktop; keep it for mobile only. */
#menu-topbar .navbar-brand {
    color: var(--text-strong);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: var(--weight-semibold);
    height: var(--topbar-height);
    letter-spacing: -0.01em;
    line-height: 34px;
    text-align: left;
    width: auto;
}

#menu-topbar .navbar-brand:hover {
    color: var(--primary);
    transform: none;
}

@media (min-width: 768px) {
    #menu-topbar .navbar-brand {
        display: none;
    }
}

#menu-topbar .navbar-default .navbar-nav > li > a {
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    margin: 12px 2px;
    padding: 9px 12px;
    transform: none;
    transition: background var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

#menu-topbar .navbar-default .navbar-nav > li > a:hover,
#menu-topbar .navbar-default .navbar-nav > li > a:focus {
    background: var(--surface-hover);
    color: var(--text-strong);
    transform: none;
}

#menu-topbar .navbar-default .navbar-nav > .active > a,
#menu-topbar .navbar-default .navbar-nav > .active > a:hover,
#menu-topbar .navbar-default .navbar-nav > .active > a:focus,
#menu-topbar .navbar-default .navbar-nav > .open > a,
#menu-topbar .navbar-default .navbar-nav > .open > a:hover,
#menu-topbar .navbar-default .navbar-nav > .open > a:focus {
    background: var(--surface-selected);
    color: var(--primary);
}

#menu-topbar .navbar-toggle {
    border-color: var(--border-default);
    margin-top: 15px;
}

#menu-topbar .navbar-toggle .icon-bar {
    background-color: var(--text-muted);
}

/* Hamburger inside the topbar (mobile) */
#menu-topbar #main-menu-button-open {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--text-muted);
    font-size: 16px;
    margin: 13px 8px 0 0;
    padding: 9px 12px;
}

#menu-topbar #main-menu-button-open:hover,
#menu-topbar #main-menu-button-open:focus {
    background: var(--surface-hover);
    box-shadow: none;
    color: var(--text-strong);
    transform: none;
}

/* --------------------------------------------------------------------------
   3. Sidebar (main navigation)
   -------------------------------------------------------------------------- */

#menu-main {
    background: var(--surface-sidebar);
    border-right: 1px solid var(--border-default);
    bottom: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    left: calc(var(--sidebar-width) * -1);
    overflow: hidden;
    padding-top: 0;
    position: fixed;
    top: 0;
    transition: left var(--duration-slow) var(--ease-standard);
    width: var(--sidebar-width);
    z-index: calc(var(--z-sticky) + 30);
}

@media (min-width: 768px) {
    #menu-main {
        left: 0;
    }

    body.sidebar-collapsed #menu-main {
        left: calc(var(--sidebar-width) * -1);
    }
}

.menu-main-opened {
    left: 0 !important;
}

/* Brand block at the top of the sidebar (menu_main.html) */
.appearance-sidebar-brand {
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-3);
    height: var(--topbar-height);
    padding: 0 var(--space-5);
}

.appearance-sidebar-brand,
.appearance-sidebar-brand:hover,
.appearance-sidebar-brand:focus {
    text-decoration: none;
}

.appearance-sidebar-brand-name,
.appearance-sidebar-brand-sub {
    display: block;
}

.appearance-sidebar-brand img {
    display: block;
    flex: 0 0 auto;
    height: 32px;
    width: 32px;
}

.appearance-sidebar-brand-name {
    color: var(--text-strong);
    font-size: var(--text-body-size);
    font-weight: var(--weight-semibold);
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appearance-sidebar-brand-sub {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: var(--weight-medium);
    letter-spacing: 0.06em;
    line-height: 16px;
    text-transform: uppercase;
}

#accordion-sidebar {
    flex: 1;
    margin-bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--space-4) var(--space-3);
}

#accordion-sidebar .panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

#accordion-sidebar .panel + .panel {
    margin-top: var(--space-1);
}

/* Group headers */
#accordion-sidebar .panel-heading {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-default);
    padding: 0;
}

#accordion-sidebar .panel-heading:hover {
    background: transparent;
}

#accordion-sidebar .panel-title {
    font-size: var(--text-body-size);
}

#accordion-sidebar .panel-title > a {
    border-radius: var(--radius-sm);
    color: var(--text-default);
    display: block;
    font-weight: var(--weight-medium);
    line-height: var(--text-body-line);
    padding: var(--space-2) var(--space-3);
    transition: background var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

#accordion-sidebar .panel-title > a:hover {
    background: var(--surface-hover);
    color: var(--text-strong);
}

#accordion-sidebar a[aria-expanded="true"] {
    background: var(--surface-selected);
    border-radius: var(--radius-sm);
    color: var(--primary);
    font-weight: var(--weight-semibold);
}

#accordion-sidebar .panel-title i.fa,
#accordion-sidebar .panel-title svg {
    color: var(--text-subtle);
    margin-right: var(--space-2);
    transition: color var(--duration-fast) var(--ease-standard);
    width: 18px;
}

#accordion-sidebar .panel-title > a:hover i.fa,
#accordion-sidebar .panel-title > a:hover svg {
    color: var(--text-muted);
}

#accordion-sidebar a[aria-expanded="true"] i.fa,
#accordion-sidebar a[aria-expanded="true"] svg {
    color: var(--primary);
}

/* Caret rotation */
#accordion-sidebar .accordion-indicator {
    color: var(--text-subtle);
    transition: transform var(--duration-base) var(--ease-standard);
}

#accordion-sidebar .collapsed .accordion-indicator {
    transform: rotate(-90deg);
}

/* Submenu list */
#accordion-sidebar .panel-body {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--border-default);
    border-radius: 0;
    margin: var(--space-1) 0 var(--space-1) var(--space-5);
    padding: 0 0 0 var(--space-3);
}

#accordion-sidebar .panel-body a {
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    display: block;
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    padding: var(--space-2) var(--space-3);
    transition: background var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

#accordion-sidebar .panel-body a:hover {
    background: var(--surface-hover);
    color: var(--text-strong);
}

#accordion-sidebar > .panel > div > .panel-body > ul > li {
    border-radius: var(--radius-sm);
}

#accordion-sidebar > .panel > div > .panel-body > ul > li:hover {
    background: transparent;
}

#accordion-sidebar > .panel > div > .panel-body > ul > li.active {
    background: var(--surface-selected);
}

#accordion-sidebar > .panel > div > .panel-body > ul > li.active > a {
    color: var(--primary);
    font-weight: var(--weight-semibold);
}

/* Mobile close row */
#menu-main-button-close {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    height: 44px;
    width: 100%;
}

#menu-main-button-close a {
    color: var(--text-muted);
}

@media (min-width: 768px) {
    #menu-main-button-close {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   4. Viewport / content area
   -------------------------------------------------------------------------- */

#appearance-main-viewport {
    margin-top: var(--topbar-height);
    padding: var(--space-6) var(--content-gutter) var(--space-12);
    transition: margin-left var(--duration-slow) var(--ease-standard);
}

@media (min-width: 768px) {
    #appearance-main-viewport {
        margin-left: var(--sidebar-width);
        padding-left: var(--content-gutter);
        padding-right: var(--content-gutter);
    }

    body.sidebar-collapsed #appearance-main-viewport {
        margin-left: 0;
    }

    body:not(.sidebar-collapsed) #appearance-main-viewport {
        margin-left: var(--sidebar-width);
    }
}

@media (max-width: 991px) {
    #appearance-main-viewport {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

#ajax-content {
    margin-left: auto;
    margin-right: auto;
    max-width: 1560px;
}

#ajax-header {
    margin-left: auto;
    margin-right: auto;
    max-width: 1560px;
}

/* Page title */
#content-title {
    color: var(--text-strong);
    font-size: var(--text-page-title-size);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
    line-height: var(--text-page-title-line);
    /* No margin: the design's title sits flush in the header, and the 12px
       this used to add carried the whole header from 61px to 65px. It dates
       from when the title drew its own rule above the content. */
    margin: 0;
}

#content-title + p > small,
#content-title ~ p small {
    color: var(--text-muted);
    font-size: var(--text-body-size);
}

/* The topbar carries the single menu toggle; hide the duplicate that
   form_title.html renders next to the page title. */
#appearance-main-viewport #main-menu-button-open {
    display: none;
}

/* Hamburger next to the page title (desktop sidebar toggle) */
#viewport #main-menu-button-open,
#ajax-header #main-menu-button-open {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--text-muted);
    font-size: 15px;
    margin: var(--space-2) var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    transition: background var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

#viewport #main-menu-button-open:hover,
#ajax-header #main-menu-button-open:hover {
    background: var(--surface-hover);
    box-shadow: none;
    color: var(--text-strong);
    transform: none;
}

/* Actions dropdown — flows with the page header instead of a fixed overlay */
#menu-actions {
    float: right;
    margin: 0 0 var(--space-3) var(--space-3);
    position: static;
    right: auto;
    top: auto;
}

#menu-actions .dropdown-toggle {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
    font-size: var(--text-body-size);
    padding: var(--space-2) var(--space-4);
}

#menu-actions .dropdown-toggle:hover,
#menu-actions .dropdown-toggle:focus,
#menu-actions.open .dropdown-toggle {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--text-on-primary);
}

#menu-actions .dropdown-menu {
    left: auto;
    right: 0;
}

/* Right facet sidebar */
@media (min-width: 768px) {
    #sidebar {
        top: calc(var(--topbar-height) + var(--space-4));
        padding: 0 var(--space-3) var(--space-6) 0;
        width: var(--facet-width);
    }

    /* #viewport prefix beats the nested .zero-margin > [class*="col-"]
       padding reset in appearance.css. */
    #viewport.has-sidebar {
        padding-right: calc(var(--facet-width) + var(--space-3));
    }
}

#sidebar .list-group {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: var(--space-2);
}

#sidebar .list-group-item {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-default);
    font-size: var(--text-table-size);
    font-weight: var(--weight-medium);
    margin-bottom: 1px;
    padding: var(--space-2) var(--space-3);
    transition: background var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

#sidebar .list-group-item:hover {
    background: var(--surface-hover);
    color: var(--text-strong);
}

#sidebar .list-group-item.active,
#sidebar .list-group-item.active:hover,
#sidebar .list-group-item.active:focus {
    background: var(--surface-selected);
    color: var(--primary);
}

#sidebar .dropdown-header {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    padding: var(--space-3) var(--space-3) var(--space-1);
    text-align: left;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
    border-radius: var(--radius-sm);
    font-weight: var(--weight-semibold);
    transition: background var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

.btn:hover,
.btn:focus {
    transform: none;
}

.btn-default {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-default);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: none;
    color: var(--text-on-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: none;
    color: var(--text-on-primary);
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--text-on-primary);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.open > .dropdown-toggle.btn-danger {
    background: var(--danger-hover);
    border-color: var(--danger-hover);
}

.btn-success {
    background: var(--success);
    border-color: var(--success);
}

.btn-success:hover,
.btn-success:focus {
    background: var(--color-success-700);
    border-color: var(--color-success-700);
}

.btn-warning {
    background: var(--warning);
    border-color: var(--warning);
}

.btn-warning:hover,
.btn-warning:focus {
    background: var(--color-warning-700);
    border-color: var(--color-warning-700);
}

.btn-info {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary);
}

.btn-info:hover,
.btn-info:focus {
    background: var(--primary-soft-hover);
    border-color: var(--primary-border);
    color: var(--primary-hover);
}

.btn-sm,
.btn-group-sm > .btn {
    border-radius: var(--radius-sm);
    font-size: var(--text-table-size);
    padding: 6px 10px;
}

.btn-xs {
    border-radius: 6px;
    font-size: var(--text-label-size);
}

.btn.disabled,
.btn[disabled] {
    opacity: 0.55;
}

/* Home-style block buttons keep the card look (defined in section 12). */

/* --------------------------------------------------------------------------
   6. List toolbar and pagination
   -------------------------------------------------------------------------- */

.toolbar,
#list-toolbar .well {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
}

.toolbar:hover {
    box-shadow: var(--shadow-xs);
    transform: none;
}

#list-toolbar.affix {
    top: calc(var(--topbar-height) + var(--space-2));
}

#list-toolbar .btn-group > .btn {
    background: var(--surface);
    border-color: var(--border-default);
    color: var(--text-default);
}

#list-toolbar .btn-group > .btn:hover {
    background: var(--surface-hover);
    color: var(--text-strong);
}

#list-toolbar .btn-group > .btn.active,
#list-toolbar .btn-group > .btn.pagination-disabled.active {
    background: var(--surface-selected);
    border-color: var(--primary-border);
    color: var(--primary);
    font-weight: var(--weight-semibold);
}

#list-toolbar .btn-group > .btn.disabled {
    color: var(--text-subtle);
}

#multi-item-title {
    color: var(--text-muted);
    font-size: var(--text-table-size);
}

.pagination > li > a,
.pagination > li > span {
    border-color: var(--border-default);
    color: var(--text-default);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
    background: var(--primary);
    border-color: var(--primary);
}

/* --------------------------------------------------------------------------
   7. Tables
   -------------------------------------------------------------------------- */

.table {
    background: var(--surface);
    border-radius: var(--radius-md);
    font-size: var(--text-table-size);
    line-height: var(--text-table-line);
    overflow: hidden;
}

.table > thead > tr > th {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-default);
    color: var(--text-muted);
    font-size: var(--text-label-size);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    padding: var(--space-3) var(--space-4);
    text-transform: uppercase;
    white-space: nowrap;
}

.table > thead > tr > th a {
    color: inherit;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--border-subtle);
    color: var(--text-default);
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
}

.table > tbody > tr:hover {
    background: var(--surface-hover);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: transparent;
}

.table-striped > tbody > tr:nth-of-type(odd):hover,
.table-striped > tbody > tr:hover {
    background: var(--surface-hover);
}

.table-hover > tbody > tr:hover {
    background: var(--surface-hover);
}

/* Card frame around list tables */
.table-responsive {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.table-responsive > .table {
    border-radius: var(--radius-md);
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .table-responsive {
        border: 1px solid var(--border-default);
    }
}

/* Row actions inside tables — quiet secondary buttons per the design;
   destructive stays visibly destructive but soft. */
.table .btn-list > .btn {
    background: var(--surface);
    border-color: var(--border-default);
    color: var(--text-default);
    font-weight: var(--weight-medium);
}

.table .btn-list > .btn:hover,
.table .btn-list > .btn:focus {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

.table .btn-list > .btn-primary {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary);
}

.table .btn-list > .btn-primary:hover,
.table .btn-list > .btn-primary:focus {
    background: var(--primary-soft-hover);
    border-color: var(--primary-border);
    color: var(--primary-hover);
}

.table .btn-list > .btn-danger {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--danger);
}

.table .btn-list > .btn-danger:hover,
.table .btn-list > .btn-danger:focus {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger-hover);
}

/* Tag color widget renders its value as the input background — keep it a
   compact swatch instead of a full-width bar. */
form .input-group:has(> input[name$='color']),
form input[name$='color'].form-control:only-child {
    max-width: 220px;
}

form .input-group > input[name$='color'] {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* --------------------------------------------------------------------------
   8. Panels, wells, cards
   -------------------------------------------------------------------------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.panel-default > .panel-heading,
.panel-primary > .panel-heading {
    background: var(--surface);
    border-bottom: 1px solid var(--border-subtle);
    border-top-left-radius: calc(var(--radius-md) - 1px);
    border-top-right-radius: calc(var(--radius-md) - 1px);
    color: var(--text-strong);
    font-weight: var(--weight-semibold);
    padding: var(--space-4) var(--space-5);
}

.panel-title {
    color: var(--text-strong);
    font-size: 15px;
    font-weight: var(--weight-semibold);
}

.panel-body {
    padding: var(--space-5);
}

.panel-footer {
    background: var(--surface-muted);
    border-top: 1px solid var(--border-subtle);
    border-bottom-left-radius: calc(var(--radius-md) - 1px);
    border-bottom-right-radius: calc(var(--radius-md) - 1px);
}

.well {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

/* Item cards (documents grid) */
.panel-item {
    animation: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

.panel-item:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-md);
    transform: none;
}

.panel-item > .panel-heading {
    background: var(--surface);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-table-size);
}

.panel-highlighted,
.panel-highlighted:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring-halo);
}

/* Per-card actions dropdown inside grid items — quiet, not alarm-red. */
.panel-item .dropdown-toggle.btn-danger,
.panel-item .dropdown-toggle.btn-default {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-default);
    font-weight: var(--weight-medium);
}

.panel-item .dropdown-toggle.btn-danger:hover,
.panel-item .dropdown-toggle.btn-danger:focus,
.panel-item .open > .dropdown-toggle.btn-danger,
.panel-item .dropdown-toggle.btn-default:hover,
.panel-item .dropdown-toggle.btn-default:focus {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

/* Fieldsets */
.appearance-fieldset {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: none;
    padding: var(--space-4) var(--space-5) var(--space-3);
}

.appearance-legend {
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-pill);
    color: var(--primary);
    font-size: var(--text-label-size);
    font-weight: var(--weight-semibold);
    padding: 1px var(--space-3) 2px;
}

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */

label,
.control-label {
    color: var(--text-strong);
    font-size: var(--text-body-size);
    font-weight: var(--weight-semibold);
}

.form-control {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--text-strong);
    font-size: var(--text-body-size);
    height: 40px;
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
    height: auto;
    min-height: 96px;
}

.form-control:hover:not(:disabled):not([readonly]) {
    border-color: var(--border-strong);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring-halo);
    outline: none;
}

.form-control::placeholder {
    color: var(--text-subtle);
}

.form-control[disabled],
.form-control[readonly] {
    background: var(--surface-sunken);
    color: var(--text-subtle);
}

.help-block {
    color: var(--text-muted);
    font-size: var(--text-table-size);
    line-height: var(--text-table-line);
}

.has-error .form-control {
    border-color: var(--danger);
    box-shadow: none;
}

.has-error .form-control:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

.has-error .help-block,
.has-error .control-label {
    color: var(--danger);
}

fieldset legend {
    border-bottom: 1px solid var(--border-default);
    color: var(--text-strong);
    font-size: var(--text-section-title-size);
    font-weight: var(--weight-semibold);
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    min-height: 40px;
}

.select2-container--default .select2-selection--single {
    height: 40px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-strong);
    line-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring-halo);
}

.select2-dropdown {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--primary);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-pill);
    color: var(--primary);
}

/* --------------------------------------------------------------------------
   10. Tabs, dropdowns, modals, alerts, badges, progress
   -------------------------------------------------------------------------- */

.nav-tabs {
    border-bottom: 1px solid var(--border-default);
}

.nav-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    margin-right: var(--space-1);
    padding: var(--space-3) var(--space-3);
    transition: color var(--duration-fast) var(--ease-standard);
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--border-strong);
    color: var(--text-strong);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
    font-weight: var(--weight-semibold);
}

.nav-pills > li > a {
    border-radius: var(--radius-sm);
    color: var(--text-default);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
    background: var(--surface-selected);
    color: var(--primary);
}

/* Dropdowns */
.dropdown-menu {
    animation: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2);
}

.dropdown-menu > li > a {
    border-radius: var(--radius-sm);
    color: var(--text-default);
    font-size: var(--text-body-size);
    padding: var(--space-2) var(--space-3);
    transition: background var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--surface-hover);
    color: var(--text-strong);
}

.dropdown-menu .divider {
    background: var(--border-subtle);
    margin: var(--space-2) 0;
}

.dropdown-menu > .dropdown-header {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-3) var(--space-1);
    text-transform: uppercase;
}

/* Modals */
.modal-content {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.modal-header {
    border-bottom: 1px solid var(--border-subtle);
    padding: var(--space-5);
}

.modal-title {
    color: var(--text-strong);
    font-size: var(--text-section-title-size);
    font-weight: var(--weight-semibold);
}

.modal-body {
    padding: var(--space-5);
}

.modal-footer {
    background: var(--surface-muted);
    border-top: 1px solid var(--border-subtle);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}

.modal-backdrop.in {
    background: var(--surface-overlay);
    opacity: 1;
}

/* Alerts */
.alert {
    border-radius: var(--radius-md);
    border-width: 1px;
    font-size: var(--text-body-size);
    padding: var(--space-3) var(--space-4);
}

.alert-success {
    background: var(--success-soft);
    border-color: var(--success-border);
    color: var(--color-success-700);
}

.alert-info {
    background: var(--info-soft);
    border-color: var(--info-border);
    color: var(--color-primary-700);
}

.alert-warning {
    background: var(--warning-soft);
    border-color: var(--warning-border);
    color: var(--color-warning-700);
}

.alert-danger {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--color-danger-700);
}

/* Labels and badges */
.label {
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: var(--text-label-size);
    font-weight: var(--weight-medium);
    padding: 2px var(--space-2);
}

.label-default {
    background: var(--surface-sunken);
    border-color: var(--border-default);
    color: var(--text-default);
}

.label-primary,
.label-info {
    background: var(--info-soft);
    border-color: var(--info-border);
    color: var(--info);
}

.label-success {
    background: var(--success-soft);
    border-color: var(--success-border);
    color: var(--success);
}

.label-warning {
    background: var(--warning-soft);
    border-color: var(--warning-border);
    color: var(--warning);
}

.label-danger {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--danger);
}

.badge {
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
    color: var(--text-default);
    font-size: var(--text-label-size);
    font-weight: var(--weight-semibold);
}

/* Progress bars */
.progress {
    background: var(--surface-sunken);
    border-radius: var(--radius-pill);
    box-shadow: none;
    height: 8px;
}

.progress-bar {
    background: var(--primary);
    box-shadow: none;
}

/* Breadcrumbs */
.breadcrumb {
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-table-size);
    padding-left: 0;
}

/* Popovers / tooltips */
.popover {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.tooltip-inner {
    background: var(--color-neutral-800);
    border-radius: var(--radius-sm);
    font-size: var(--text-label-size);
    padding: var(--space-1) var(--space-2);
}

/* List groups (generic) */
.list-group-item {
    border-color: var(--border-subtle);
    color: var(--text-default);
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background: var(--surface-selected);
    border-color: var(--primary-border);
    color: var(--primary);
}

/* Toastr notifications */
#toast-container > div {
    background-color: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--text-default);
    opacity: 1;
    padding: var(--space-4) var(--space-4) var(--space-4) 52px;
}

#toast-container > .toast-success {
    background-color: var(--surface);
    border-left: 3px solid var(--success);
    color: var(--text-default);
}

#toast-container > .toast-error {
    background-color: var(--surface);
    border-left: 3px solid var(--danger);
    color: var(--text-default);
}

#toast-container > .toast-info {
    background-color: var(--surface);
    border-left: 3px solid var(--info);
    color: var(--text-default);
}

#toast-container > .toast-warning {
    background-color: var(--surface);
    border-left: 3px solid var(--warning);
    color: var(--text-default);
}

#toast-container > div .toast-title {
    color: var(--text-strong);
}

#toast-container > .toast-success:before,
#toast-container > .toast-error:before,
#toast-container > .toast-info:before,
#toast-container > .toast-warning:before {
    color: var(--text-muted);
}

/* Dropzone uploader */
.dropzone-previews,
.dropzone .dz-message {
    background: var(--surface-muted);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    transition: border-color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard);
}

.dropzone .dz-message:hover,
.dropzone.dz-drag-hover .dz-message {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}

/* --------------------------------------------------------------------------
   11. AJAX spinner
   -------------------------------------------------------------------------- */

#ajax-spinner {
    border: 2px solid var(--border-strong);
    border-top: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    box-shadow: none;
    left: auto;
    right: var(--space-4);
    top: calc(var(--topbar-height) + var(--space-4));
}

/* --------------------------------------------------------------------------
   12. Home dashboard shortcuts
   -------------------------------------------------------------------------- */

.home-shortcuts-panel .panel-body {
    padding-bottom: var(--space-2);
    padding-top: var(--space-5);
}

.home-shortcut-card {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    color: var(--text-default);
    transition: border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

.home-shortcut-card:hover,
.home-shortcut-card:focus {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-md);
    color: var(--text-default);
    transform: none;
}

.home-shortcut-card::after {
    color: var(--primary);
}

.home-shortcut-card-icon {
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-md);
    color: var(--primary);
}

.home-shortcut-card-title {
    color: var(--text-strong);
    font-size: var(--text-body-size);
    font-weight: var(--weight-semibold);
}

.home-shortcut-card-subtitle {
    color: var(--text-muted);
    font-size: var(--text-label-size);
}

/* Legacy double-layer icon shadows fight the flat design — remove globally. */
.fashadow {
    display: none !important;
}

/* Setup/Tools tile buttons — compact rows per the design's tile grid
   (docs/12-foundation-decisions.md D16: no large dark blocks). */
.btn-block {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    color: var(--text-strong);
    display: flex;
    font-size: var(--text-body-size);
    font-weight: var(--weight-medium);
    gap: var(--space-3);
    height: auto !important; /* defeat matchHeight inline heights */
    margin-bottom: var(--space-3);
    min-height: 68px;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    text-shadow: none;
    transition: border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
    white-space: normal;
}

.btn-block:hover,
.btn-block:focus {
    background: var(--surface);
    border-color: var(--primary-border);
    box-shadow: var(--shadow-md);
    color: var(--text-strong);
    transform: none;
}

.btn-block br {
    display: none;
}

/* Icon chip (the span carries an inline font-size: 200%). */
.btn-block > span:first-child {
    align-items: center;
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-sm);
    color: var(--primary);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 16px !important;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.btn-block > span:first-child .fa-layers {
    margin-right: 0 !important;
}

.btn-block i.fa,
.btn-block svg {
    color: var(--primary);
}

/* --------------------------------------------------------------------------
   13. Login and plain pages
   -------------------------------------------------------------------------- */

#body-plain {
    background: var(--canvas);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    min-height: 100vh;
    padding: var(--space-6) var(--space-4);
}

#body-plain .panel,
#body-plain .panel-primary {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

#body-plain .panel-primary > .panel-heading {
    background: var(--surface);
    border-bottom: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    color: var(--text-strong);
    padding: var(--space-8) var(--space-8) 0;
    text-align: center;
}

#body-plain .panel-primary > .panel-heading .panel-title {
    color: var(--text-strong);
    font-size: 22px;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
}

#body-plain .panel-body {
    padding: var(--space-6) var(--space-8) var(--space-8);
}

.appearance-login-brand {
    display: block;
    margin: 0 auto var(--space-6);
    max-height: 56px;
    width: auto;
}

/* --------------------------------------------------------------------------
   14. Icons — soften the solid Font Awesome glyphs
   --------------------------------------------------------------------------
   The design uses light outline icons; Mayan's icon set is FA solid (heavy
   fills). Soften globally: slightly smaller optical size, muted colors for
   decorative and navigation icons, and the design's soft primary chip for
   page-title icons.
   -------------------------------------------------------------------------- */

/* No global optical scaling. This used to render every Font Awesome SVG at
   90% inside its box, which was a guess at softening the solid glyphs against
   the reference's outline set. Measured, it was simply making every icon
   smaller than the design's: 18px boxes drew 16px glyphs and the page header's
   22px drew 20px. The sizes below are taken from the reference instead. */

/* NOTE: Font Awesome runs in data-auto-replace-svg="nest" mode — it strips
   the classes from the authored <i> and puts them on a nested
   svg.svg-inline--fa. Icon selectors must target the bare <i>/span
   containers or the nested svg, never i.fa. */

/* Page-title icon becomes the design's page-header icon chip. */
/* The heading is a block, as the design's is. It used to be a flex row because
   the view's icon was a glyph inside the <h1> that had to be laid out beside
   the text; the icon is its own element now. */

#content-title > i,
#content-title > span.fa-layers {
    align-items: center;
    background: var(--primary-soft);
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-md);
    color: var(--primary);
    display: inline-flex !important;
    flex: 0 0 auto;
    font-size: 18px;
    height: 44px;
    justify-content: center;
    margin: 0 var(--space-1) 0 0 !important;
    padding: 0 !important;
    width: 44px !important;
}

/* Dropdown menu item icons: quiet. */
.dropdown-menu > li > a svg.svg-inline--fa {
    color: var(--text-muted);
}

/* Facet sidebar item icons. */
#sidebar .list-group-item svg.svg-inline--fa {
    color: var(--text-subtle);
}

#sidebar .list-group-item.active svg.svg-inline--fa {
    color: var(--primary);
}

/* Main menu sub-item icons. */
#accordion-sidebar .panel-body a svg.svg-inline--fa {
    color: var(--text-subtle);
    transition: color var(--duration-fast) var(--ease-standard);
}

#accordion-sidebar .panel-body a:hover svg.svg-inline--fa {
    color: var(--text-muted);
}

#accordion-sidebar > .panel > div > .panel-body > ul > li.active a svg.svg-inline--fa {
    color: var(--primary);
}

/* Large decorative icons (empty states, error pages): subtle, never black.
   Semantic status icons (.text-success etc. — moved onto the svg by FA)
   keep their color. */
.icon-error,
.fa-stack,
.text-center > div > i > svg.svg-inline--fa:not(.text-success):not(.text-danger):not(.text-warning),
.text-center > div > span.fa-layers {
    color: var(--text-subtle);
}

/* Secondary-button icons read quieter than their label. */
.btn-default svg.svg-inline--fa {
    color: var(--text-muted);
}

.btn-default:hover svg.svg-inline--fa,
.btn-default:focus svg.svg-inline--fa {
    color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   15. Splash screen
   -------------------------------------------------------------------------- */

#ido-splash-screen {
    background: var(--canvas);
}

.ido-splash-logo {
    color: var(--primary);
    font-size: 30px;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
}

.ido-splash-logo img {
    display: block;
    margin: 0 auto;
    max-height: 64px;
    width: auto;
}

.ido-splash-loader span {
    background: var(--primary);
}

/* ---------------------------------------------------------------------------
   Row overflow trigger

   The design gives each table row one compact "…" button. Mayan's shared
   actions_dropdown.html always appends Bootstrap's caret and its own sizing
   classes, so those are neutralised here rather than by forking that template —
   it is used by several other menus that still want the caret.
   --------------------------------------------------------------------------- */

.edms-row-actions {
    display: inline-block;
}

.edms-row-actions__trigger {
    min-height: 28px;
    min-width: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 18px;
    line-height: 1;
}

.edms-row-actions__trigger .caret {
    display: none;
}

.edms-row-actions__trigger:hover,
.edms-row-actions__trigger:focus {
    background: var(--surface-hover);
}

/* The menu is opened from a cell that establishes no containing block, so it
   anchors to the row; align it to the trigger's trailing edge in both scripts. */
.edms-row-actions .dropdown-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    text-align: start;
}

/* ---------------------------------------------------------------------------
   Table cell adaptations

   Two places where Mayan's markup differs from the design's and the component
   layer alone cannot cover the difference.
   --------------------------------------------------------------------------- */

/* The design renders a tag's text as a <span>; Mayan makes it a link to the
   tag's own view. Without this the anchor takes the global link colour and the
   badge reads as blue text on grey instead of the badge's own foreground. */
.edms-badge__text {
    color: inherit;
}

/* `.edms-doc-cell__label` truncates with an ellipsis, but that needs a width
   bound to act on, and a `max-width` on a `td` is advisory under
   `table-layout: auto`. Constraining the cell's own content block gives the
   layout algorithm a real bound, so long labels ellipsize instead of pushing
   the actions column outside the viewport. */
.edms-table__td--strong .edms-doc-cell {
    max-width: 340px;
}

/* Bootswatch underlines every in-table link — `table a:not(.btn)` at (0,1,2)
   outranks the design system's own `a` reset, so table links rendered as blue
   underlined text. Re-asserted here at (0,2,1) for the design's tables only,
   leaving Mayan's other tables untouched. Hover still underlines, as designed. */
.edms-table a:not(.btn) {
    text-decoration: none;
}

.edms-table a:not(.btn):hover {
    text-decoration: underline;
}

/* A select-variant header carries no visible caption in the design — the
   reference puts only a screen-reader label in that cell. Mayan always renders
   the column's label as text, so it is hidden here rather than by special-casing
   the shared list template. The label stays in the accessibility tree. */
.edms-table__th--select .appearance-list-column-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The grid card already leads with a large file glyph in its preview area, so
   the small leading icon that the label cell carries in the table is redundant
   there — the design's card shows the label as plain text. Hidden rather than
   given a card-specific widget, so both views keep using one label template. */
.edms-doc-card .edms-doc-cell__icon {
    display: none;
}

/* ---------------------------------------------------------------------------
   Topbar row

   The design's topbar is one flex line: menu toggle, search cluster, then the
   account actions pushed to the end. Bootstrap instead floats `.navbar-header`
   and leaves `.navbar-collapse` as a block, so a flex search form claims a line
   of its own and drops the account menu to a second row — the bar measured
   108px against the design's 64px.

   Laying the container out as a flex row fixes it at the source. Scoped to the
   desktop breakpoint so the mobile collapse keeps Bootstrap's own behaviour,
   where the menu genuinely does stack below the header.
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {
    nav.navbar > .container-fluid {
        display: flex;
        min-height: var(--topbar-height);
        align-items: center;
        gap: var(--space-4);
    }

    nav.navbar > .container-fluid > .navbar-header,
    nav.navbar > .container-fluid > #navbar {
        float: none;
    }

    /* Absorbs the free space so the account menu sits at the trailing edge. */
    nav.navbar > .container-fluid > #navbar {
        margin-inline-start: auto;
    }

    .edms-topbar__search {
        display: flex;
        min-width: 0;
        align-items: center;
        gap: var(--space-2);
    }
}

/* The cluster's own control heights come from the design; Bootstrap's
   `.form-control`/`.btn` sizing would otherwise make the row 45px tall. */
.edms-search-cluster__input,
.edms-search-cluster__scope {
    height: 38px;
    box-shadow: none;
}

.edms-topbar__search-action {
    display: inline-flex;
    height: 38px;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Icon normalisation

   The design draws its icons as Lucide SVGs: a uniform 16px box, `display:
   block`, no baseline offset. Font Awesome — which Mayan uses — injects inline
   SVGs sized from the glyph's own aspect ratio (fa-w-14, fa-w-16, fa-w-18 all
   differ) and sets `vertical-align: -0.125em`. Inside a centred icon container
   that combination reads as icons of slightly different sizes sitting a little
   off-centre.

   Normalising them where they sit inside an icon container fixes both. Scoped
   to those containers so icons that genuinely run inline with text keep their
   baseline alignment.
   --------------------------------------------------------------------------- */

/* Font Awesome's JS leaves the original <i> wrapping the SVG it injects. That
   wrapper, being inline, is the flex item the container centres — and an inline
   box is sized by font metrics, not by the glyph, which pushed every icon a few
   pixels off centre. Making the wrapper a flex box sizes it to the SVG itself. */
.home-shortcut-card-icon > i,
.edms-icon-button > i,
.edms-doc-cell__icon > i,
.edms-doc-card__preview > i,
.edms-segmented__option > i {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The size selectors carry the FA class deliberately. Font Awesome sizes each
   glyph through a two-class rule (`.svg-inline--fa.fa-w-16 { width: 1em }`), so
   a plain `.container svg` at (0,1,1) loses to it on width while winning on
   height — which stretched the icons rather than resizing them. Matching its
   two classes plus the container puts these at (0,2,1). */
.home-shortcut-card-icon svg.svg-inline--fa,
.edms-icon-button svg.svg-inline--fa,
.edms-doc-cell__icon svg.svg-inline--fa,
.edms-segmented__option svg.svg-inline--fa,
.edms-search-cluster__icon.svg-inline--fa {
    display: block;
    flex: none;
    vertical-align: middle;
}

.home-shortcut-card-icon svg.svg-inline--fa {
    width: 20px;
    height: 20px;
}

.edms-icon-button svg.svg-inline--fa,
.edms-doc-cell__icon svg.svg-inline--fa,
.edms-segmented__option svg.svg-inline--fa,
.edms-search-cluster__icon.svg-inline--fa {
    width: 16px;
    height: 16px;
}

/* ---------------------------------------------------------------------------
   Topbar search actions

   The design's buttons are 40px tall at 14px/600 with an 8px radius; Bootstrap
   sizes `.btn` from its own font scale, which produced 38px at 15px.
   --------------------------------------------------------------------------- */

.edms-topbar__search-action {
    height: 40px;
    padding-inline: var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-body-size);
    font-weight: var(--weight-semibold);
}

.edms-search-cluster {
    height: 40px;
}

/* ---------------------------------------------------------------------------
   Dropdown menus, remaining gaps against the design

   The bridge already matches the design's surface, radius, shadow and item
   padding. These are the parts it had not covered: the design's menus have a
   minimum width so short items do not produce a cramped popup, and their items
   are flex rows, which is what puts an item's icon on the text's optical centre
   instead of its baseline.
   --------------------------------------------------------------------------- */

.dropdown-menu {
    min-width: 220px;
}

.dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.dropdown-menu > li > a svg.svg-inline--fa {
    width: 16px;
    height: 16px;
    flex: none;
}

/* ---------------------------------------------------------------------------
   Icon spacing

   Replaces the inline `padding-right: 5px` that the icon templates used to
   carry. As a logical margin it mirrors in Arabic, and — unlike an inline
   style — a container can cancel it.

   Font Awesome's JS moves the `fa` classes off the <i> and onto the <svg> it
   injects, leaving `data-fa-i2svg` behind, so both states are matched.
   --------------------------------------------------------------------------- */

i.fa,
i[data-fa-i2svg] {
    width: auto;
    margin-inline-end: 5px;
}

/* A lone icon centred in its own container wants no trailing gap: the container
   centres the icon *and* its margin, which put the glyph off-centre. */
.home-shortcut-card-icon i,
.edms-icon-button i,
.edms-doc-cell__icon i,
.edms-doc-card__preview i,
.edms-segmented__option i,
.edms-table__sort i,
.edms-search-cluster i,
.dropdown-toggle i,
.btn i:only-child {
    margin-inline-end: 0;
}

/* Font Awesome sizes each glyph from its own aspect ratio (fa-w-14, fa-w-16 and
   fa-w-18 are all different widths), so centring the <i> still left the glyph a
   few pixels off centre, by a different amount per icon. Letting the wrapper
   fill the container and centre its own content makes the result independent of
   the glyph's width. */
.home-shortcut-card-icon > i,
.edms-icon-button > i,
.edms-doc-card__preview > i {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* The "create" icons are composites: Font Awesome stacks two glyphs inside a
   `.fa-layers` span, so the <i> is a grandchild and the rule above missed it.
   Centring the stack itself covers them. */
.home-shortcut-card-icon > .fa-layers,
.edms-icon-button > .fa-layers {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* Correction to the rule above. Font Awesome lays a stack out as a 1em box with
   its glyphs absolutely positioned inside it; stretching that box to the
   container's full width detached the glyphs from its centre. A stack keeps its
   own geometry, and the container's flex centring places it — which is all it
   needed. The size override is lifted inside a stack for the same reason. */
.home-shortcut-card-icon > .fa-layers,
.edms-icon-button > .fa-layers {
    width: 1em;
    height: 1em;
}

.home-shortcut-card-icon .fa-layers svg.svg-inline--fa,
.edms-icon-button .fa-layers svg.svg-inline--fa {
    width: 100%;
    height: 100%;
}

/* Merging the Facets and Actions menus into one trigger makes a tall menu — for
   a document it came to ~990px, and Mayan's repositioning script then offset it
   nearly a thousand pixels upward to fit the viewport, which put it behind the
   table header where `.edms-table-wrap`'s overflow clipped it.
   Capping the height keeps the menu inside its container and scrolls the
   overflow instead, which is what a menu this long needs regardless. */
.edms-row-actions .dropdown-menu {
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* mayan_app.js flips a dropdown upward (`dropup`) whenever it would run past
   the bottom of the viewport. That is right for a free-standing menu, but a row
   menu lives inside `.edms-table-wrap`, whose overflow is hidden — opening
   upward puts it behind the table header where it is clipped and unusable,
   which is worse than opening downward and scrolling the page.
   These menus therefore always open downward, and cap their height so the
   distance is small. */
.edms-row-actions.dropup .dropdown-menu {
    inset-block-start: 100%;
    inset-block-end: auto;
    margin-block-end: 0;
}

.edms-row-actions .dropdown-menu {
    max-height: 320px;
}

/* Same Font Awesome two-class specificity issue as the icon containers: the
   design sizes sort chevrons at 14px, but `.svg-inline--fa.fa-w-10` (0,2,0)
   outranks `.edms-table__sort svg` (0,1,1) on width, so the chevron rendered
   7px wide and 13px tall. */
.edms-table__sort svg.svg-inline--fa {
    width: 14px;
    height: 14px;
}

/* ===========================================================================
   Right-to-left shell

   The design system's own components are written in logical properties and
   mirror by themselves once the document carries dir="rtl". The shell does not:
   the sidebar, the topbar and the viewport are positioned here with physical
   `left` / `margin-left`, partly because mayan_app.js animates those same
   properties when the sidebar collapses.

   Rather than rewrite those rules — and risk desynchronising them from the JS —
   the physical offsets are mirrored here for RTL only. Everything else in the
   interface flips on its own.
   =========================================================================== */

[dir='rtl'] #menu-main {
    left: auto;
    right: calc(var(--sidebar-width) * -1);
    border-left: 1px solid var(--border-default);
    border-right: 0;
}

[dir='rtl'] .menu-main-opened {
    left: auto !important;
    right: 0 !important;
}

@media (min-width: 768px) {
    [dir='rtl'] #menu-main {
        right: 0;
    }

    [dir='rtl'] body.sidebar-collapsed #menu-main {
        right: calc(var(--sidebar-width) * -1);
    }

    [dir='rtl'] #menu-topbar .navbar-fixed-top {
        left: 0;
        right: var(--sidebar-width);
    }

    [dir='rtl'] body.sidebar-collapsed #menu-topbar .navbar-fixed-top {
        right: 0;
    }

    [dir='rtl'] #appearance-main-viewport,
    [dir='rtl'] body:not(.sidebar-collapsed) #appearance-main-viewport {
        margin-left: 0;
        margin-right: var(--sidebar-width);
    }

    [dir='rtl'] body.sidebar-collapsed #appearance-main-viewport {
        margin-right: 0;
    }
}

[dir='rtl'] #menu-actions .dropdown-menu {
    left: 0;
    right: auto;
}

/* Numbers with a unit, and timestamps, are single left-to-right tokens. Without
   isolation the bidi algorithm reorders them inside an Arabic row — "57 B"
   rendered as "B 57" and "10 Aug 2026, 20:18" led with its time. */
.edms-table__td--numeric,
.edms-table__td time,
.edms-doc-card__meta dd {
    direction: ltr;
    unicode-bidi: isolate;
}

[dir='rtl'] .edms-table__td--numeric,
[dir='rtl'] .edms-table__td time {
    text-align: start;
}

/* ---------------------------------------------------------------------------
   Topbar actions as icon buttons

   The design lines the topbar's trailing edge with uniform 40px icon buttons.
   Mayan's topbar carries the same actions but renders the System and User menus
   as text dropdowns; `icon_only` in the template drops their visible label and
   caret, and these rules give every entry the same square.
   --------------------------------------------------------------------------- */

#menu-topbar .navbar-nav > li > a {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 2px;
    border-radius: var(--radius-md);
}

#menu-topbar .navbar-nav > li > a .caret {
    display: none;
}

#menu-topbar .navbar-nav > li > a i {
    margin-inline-end: 0;
}

#menu-topbar .navbar-nav > li > a svg.svg-inline--fa {
    width: 18px;
    height: 18px;
}

/* The account and system menus open from a 40px square at the trailing edge, so
   they align to that edge rather than spilling past the viewport. */
#menu-topbar .navbar-nav > li.dropdown > .dropdown-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* ---------------------------------------------------------------------------
   Card blocks

   `.edms-doc-card__meta` is a `1fr auto` grid, right for the short scalar pairs
   the design's own card carries (Created, Size). A value whose widget renders
   several lines — document metadata, a cabinet list — stretched the first track
   and collapsed the second, leaving the last label crushed against the edge.
   Those columns render here instead: full width, label above value.
   --------------------------------------------------------------------------- */

.edms-doc-card__block {
    padding-block-start: var(--space-2);
}

.edms-doc-card__block-label {
    display: block;
    margin-block-end: var(--space-1);
    color: var(--text-subtle);
    font-size: var(--text-label-size);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    line-height: var(--text-label-line);
    text-transform: uppercase;
}

:root[lang='ar'] .edms-doc-card__block-label {
    letter-spacing: normal;
    text-transform: none;
}

.edms-doc-card__block-value {
    color: var(--text-default);
    font-size: var(--text-table-size);
    line-height: var(--text-table-line);
    overflow-wrap: anywhere;
}

/* The widgets inside stack rather than run together on one line. */
.edms-doc-card__block-value > div,
.edms-doc-card__block-value > p {
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Topbar search at intermediate widths

   With a facet sidebar present the topbar has noticeably less room, and the
   scope select took enough of the cluster to squeeze the text field down to
   ~74px. Giving the field a floor and capping the select keeps the field
   usable; below the design's own 940px breakpoint the whole cluster is already
   handled by the component layer.
   --------------------------------------------------------------------------- */

@media (min-width: 941px) {
    .edms-search-cluster__input {
        min-width: 140px;
    }

    .edms-search-cluster__scope {
        max-width: 180px;
    }
}

/* The cabinet list is a row of badges now, not italic prose; cabinets.css
   italicised it and left the chips flush against each other. */
div.cabinet-display {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    font-style: normal;
}

/* ---------------------------------------------------------------------------
   Rich columns inside a table

   `edms-card-block` moves multi-line values out of the grid card's meta list,
   but the same columns are ordinary cells in the table, where their several
   lines of content pushed rows from the design's 57px to 145px and stretched
   the table far past its container.

   Clamped to two lines with a width ceiling: the value stays readable and
   searchable, rows keep one height, and the full text remains on the document
   itself. `title` on the cell is not available here, so nothing is hidden that
   the row does not already link to.
   --------------------------------------------------------------------------- */

.edms-table__td.edms-card-block {
    max-width: 200px;
}

.edms-table__td.edms-card-block > * {
    display: -webkit-box;
    overflow: hidden;
    max-height: calc(var(--text-table-line) * 2);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* The tag strip is capped in the card; give it the same ceiling in the table so
   a document with many tags cannot set the row height on its own. */
.edms-table__td.edms-table__td--tags {
    max-width: 200px;
}

/* --------------------------------------------------------------------------
   12. Topbar actions, brought up to the design's set
   --------------------------------------------------------------------------

   Measured against the reference at 1600px: it carries Refresh, System,
   Account, Notifications, Messages, a divider and Language. Ours carried the
   middle four. The two new controls and the divider are styled here; the
   design's own `.edms-icon-button` supplies the 40x40 shape, so these rules
   only place it inside Bootstrap's navbar list.
   -------------------------------------------------------------------------- */

#menu-topbar .navbar-nav > li > .edms-icon-button {
    margin: 12px 2px;
}

/* The design separates Language from the notification group with a hairline.
   Drawn as the last item's leading edge rather than as its own list item, so
   the markup stays a plain list of actions. */
#menu-topbar .navbar-nav > li:last-child {
    position: relative;
    margin-inline-start: calc(var(--space-2) * 2 + 1px);
}

#menu-topbar .navbar-nav > li:last-child::before {
    background: var(--border-default);
    content: '';
    height: 24px;
    inset-block-start: 50%;
    inset-inline-start: calc(var(--space-2) * -1 - 1px);
    position: absolute;
    transform: translateY(-50%);
    width: 1px;
}

/* The design shows no sidebar toggle on the desktop topbar — the sidebar is
   always present at that width, so the control has nothing to reveal. It stays
   below the breakpoint, where the sidebar is off-canvas. */
@media (min-width: 768px) {
    #menu-topbar #main-menu-button-open {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   13. Remaining measured gaps against the design reference
   -------------------------------------------------------------------------- */

/* The sidebar brand is a link, so it inherited the anchor colour and read as
   blue against the design's plain text. */
.appearance-sidebar-brand,
.appearance-sidebar-brand:hover,
.appearance-sidebar-brand:focus {
    color: var(--text-default);
}

.appearance-sidebar-brand-name {
    color: var(--text-strong);
}

.appearance-sidebar-brand-sub {
    color: var(--text-muted);
}

/* The design insets the topbar's content by 32px, matching the page gutter, so
   the search field lines up with the page title below it. That inset now comes
   from `.edms-topbar` itself, as it does in the reference; the container inside
   it carries none, where Bootstrap's own 15px plus the navbar header had left
   ours starting 20px further in. The header holds only controls already hidden
   at this width — the sidebar toggle, the collapse toggle and the brand — so it
   is taken out of the flow entirely rather than zeroed piece by piece. */
@media (min-width: 768px) {
    #menu-topbar .container-fluid {
        padding-inline: 0;
    }

    #menu-topbar .navbar-header {
        display: none;
    }
}

/* A pager control that leads nowhere is a span, which `:disabled` cannot
   reach. */
.edms-pagination__page--disabled {
    color: var(--text-subtle);
    opacity: 0.6;
}

/* The grid's pager keeps the table frame's look without a table above it. */
.edms-doc-grid__pagination {
    margin-top: var(--space-4);
}

.edms-doc-grid__pagination .edms-pagination {
    border-block-start: 0;
}

/* Said when the toolbar's filter matches nothing. */
.appearance-list-filter-empty {
    padding: var(--space-4);
    text-align: center;
}

/* --------------------------------------------------------------------------
   14. Six measured offsets, each traced to a Bootstrap default
   -------------------------------------------------------------------------- */

/* Bootstrap's clearfix pseudo-elements on `.container-fluid` are real boxes.
   Once the bar became a flex row they turned into flex items, and the row's
   16px gap was spent on the empty one before the search — putting the field
   16px past the page gutter it is meant to line up with. */
@media (min-width: 768px) {
    #menu-topbar .container-fluid::before,
    #menu-topbar .container-fluid::after {
        display: none;
    }
}

/* Bootstrap gives every heading a vertical margin; the design's page title has
   none, and the 12px was pushing the header from 61px to 65px. */
.edms-page-header__title {
    margin: 0;
}

/* `label { margin-bottom: 5px }` from Bootstrap: harmless in a data cell, but
   in the header cell it made the row 54px against the design's 51px. */
.edms-checkbox {
    margin: 0;
}

/* Bootstrap sets `input[type=checkbox] { margin: 4px 0 0 }`; the design uses
   3px, which is what centres the box against the header's cap height. */
.edms-checkbox__control {
    margin-block-start: 3px;
}

/* The design's buttons space their icon with the flex `gap` alone. The global
   icon rule added its own trailing margin on top, making the topbar's Search
   and Advanced buttons 3px and 6px wider than the reference — which is exactly
   what the search cluster beside them lost. */
.edms-button i.fa,
.edms-button i[data-fa-i2svg],
.edms-pagination__page i.fa,
.edms-pagination__page i[data-fa-i2svg] {
    margin-inline-end: 0;
}

/* The pager's chevrons point along the reading direction. The reference marks
   them `.edms-icon-directional`, a class its own stylesheet defines but our
   copy of the design system does not carry, so the rule is supplied here.
   Both the <i> and the <svg> Font Awesome swaps in are covered, because the
   class survives that swap on some icons and not others. */
[dir='rtl'] .edms-pagination__page .fa,
[dir='rtl'] .edms-pagination__page .svg-inline--fa,
[dir='rtl'] .edms-icon-directional {
    transform: scaleX(-1);
}

/* --------------------------------------------------------------------------
   15. Icon sizing and centring, corrected against the reference
   --------------------------------------------------------------------------

   Measured at 1600px: the reference draws 18x18 glyphs in its 40px icon
   buttons, 16x16 in the 32px small ones, and 22x22 in the page header's tile —
   every one centred exactly. Ours sat at 16x16 in the large buttons and, in the
   page header, at 11x20 pushed a further 5px off centre. Two causes: the block
   above pinned every icon container to 16px, and the page header's tile was
   never added to the list of containers that cancel the trailing icon margin.
   -------------------------------------------------------------------------- */

.edms-page-header__icon > i,
.edms-page-header__icon > i[data-fa-i2svg] {
    align-items: center;
    display: flex;
    justify-content: center;
    line-height: 1;
    margin: 0;
}

.edms-page-header__icon svg.svg-inline--fa {
    display: block;
    flex: none;
    height: 22px;
    vertical-align: middle;
    width: 22px;
}

/* An inline wrapper is sized by font metrics rather than by the glyph inside
   it, which is what left the icons two pixels high of centre. */
.edms-icon-button > i,
.edms-icon-button > i[data-fa-i2svg] {
    line-height: 1;
    margin: 0;
}

.edms-icon-button svg.svg-inline--fa {
    height: 18px;
    width: 18px;
}

/* The small variant keeps the 16px the reference gives it. Declared after the
   rule above so it wins at equal specificity. */
.edms-icon-button--sm svg.svg-inline--fa {
    height: 16px;
    width: 16px;
}

/* --------------------------------------------------------------------------
   16. Forms, brought to the design's field and button shapes
   --------------------------------------------------------------------------

   Every form in the system renders through generic_form_subtemplate.html as
   Bootstrap markup, so the mapping is done here rather than by rewriting each
   template. Inputs already matched; what was left was the label weight, the
   select's native arrow against the design's chevron, and the secondary button.
   -------------------------------------------------------------------------- */

/* `.edms-field__label` in the design: 14px semibold in the strong ink, with the
   field beneath it rather than beside it. */
form label,
form .control-label {
    color: var(--text-strong);
    font-size: var(--text-body-size);
    font-weight: var(--weight-semibold);
    line-height: 20px;
    margin-bottom: var(--space-2);
}

/* The design draws its own chevron and hides the platform one, so a select
   reads as the same control on every browser. Scoped to form selects: the
   topbar's scope select is part of the search cluster and styled with it. */
form select.form-control {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
    padding-inline-end: var(--space-8);
}

[dir='rtl'] form select.form-control {
    background-position: 18px 17px, 13px 17px;
}

/* The secondary button: white, bordered, dark ink — the design's shape for
   every action that is not the one carrying the form forward. */
form .btn-default,
form a.btn-default {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--text-strong);
    font-size: var(--text-body-size);
    font-weight: var(--weight-semibold);
    height: 40px;
    padding-inline: var(--space-4);
}

form .btn-default:hover:not(:disabled),
form .btn-default:focus:not(:disabled) {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

form .btn-primary {
    border-radius: var(--radius-sm);
    font-size: var(--text-body-size);
    font-weight: var(--weight-semibold);
    height: 40px;
    padding-inline: var(--space-4);
}

/* Both button shapes align their icon with the label the way the design's
   buttons do, on a flex gap rather than a trailing margin. */
form .btn-default,
form .btn-primary {
    align-items: center;
    display: inline-flex;
    gap: var(--space-2);
    justify-content: center;
    vertical-align: middle;
}

form .btn-default i.fa,
form .btn-default i[data-fa-i2svg],
form .btn-primary i.fa,
form .btn-primary i[data-fa-i2svg] {
    margin-inline-end: 0;
}

/* A step that cannot be taken is dimmed rather than drawn as an equal option. */
form .btn[disabled],
form .btn.disabled {
    box-shadow: none;
    opacity: 0.5;
}

/* The form's action row, now a sibling of the card rather than its last band.
   The design lays it along the page ground with the secondary actions at the
   lead edge and the one that carries the form forward at the trailing edge. */
.edms-form-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: 0;
    padding-block-start: var(--space-5);
}

.edms-form-actions .btn-primary {
    margin-inline-start: auto;
}

/* The reference's own outline icons, inlined by the lucide driver. Sized like
   the Font Awesome glyphs they stand beside so the topbar reads as one row. */
.edms-lucide {
    display: block;
    flex: none;
    height: 18px;
    width: 18px;
}

.edms-page-header__icon .edms-lucide {
    height: 22px;
    width: 22px;
}

.edms-icon-button--sm .edms-lucide,
.edms-doc-cell__icon .edms-lucide {
    height: 16px;
    width: 16px;
}

/* --------------------------------------------------------------------------
   17. Sign-in page
   --------------------------------------------------------------------------

   The page is built from the design's own login components, which ship whole in
   theme-components.css. Only three things are ours: the password-reset link the
   reference has no equivalent for, an error variant of its notice, and undoing
   the Bootstrap margins the form controls arrive with inside a flex field.
   -------------------------------------------------------------------------- */

.edms-login__aside {
    margin: var(--space-5) 0 0;
    text-align: center;
}

.edms-login__aside a {
    color: var(--primary);
    font-size: var(--text-table-size);
}

.edms-login__notice--error {
    border-color: var(--danger-border);
    background: var(--danger-soft);
    color: var(--danger);
}

/* The login form is written out in its own template rather than rendered
   through the generic form ones, so its controls never receive Bootstrap's
   `.form-control` and arrived as bare browser inputs — square, hairline black.
   They take the design's field shape directly: the same 40px, 8px radius and
   border that `.edms-input` carries. */
.edms-login__form input[type='text'],
.edms-login__form input[type='password'],
.edms-login__form input[type='email'],
.edms-login__form input:not([type]),
.edms-login__form select,
.edms-login__form textarea {
    background: var(--surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: none;
    color: var(--text-strong);
    font-size: var(--text-body-size);
    height: 40px;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
    width: 100%;
}

.edms-login__form input:hover:not(:disabled) {
    border-color: var(--border-strong);
}

.edms-login__form input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus-ring-halo);
    outline: none;
}

.edms-login__form textarea {
    height: auto;
    min-height: 96px;
}

.edms-login__form .edms-field + .edms-field {
    margin-block-start: var(--space-4);
}

.edms-login__form .edms-button--block {
    margin-block-start: var(--space-5);
}

/* The notice's success variant, for the end of the password-reset flow. */
.edms-login__notice--success {
    border-color: var(--success-border);
    background: var(--success-soft);
    color: var(--success);
}

/* A button used as the aside's only child fills it, as it does in the form. */
.edms-login__aside .edms-button--block {
    display: flex;
}

/* The topbar's search row stretches its children, as the reference's does. Ours
   centred them, which is invisible while every child is exactly 40px but stops
   being so the moment one is not. */
.edms-topbar__search {
    align-items: stretch;
}

/* The widget's rows are a <ul>, which arrives with the browser's own list
   indent and bullets. The design's has neither. */
.edms-widget__rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The wizard's steps are an <ol>, which arrives with the browser's own list
   indent and numbering. The design's carries neither — each step shows its own
   number in a chip. */
.edms-wizard__steps {
    list-style: none;
    margin-block-start: var(--space-4);
    margin-inline-start: 0;
    padding-inline-start: 0;
}

/* Bootstrap's own margins on a <p> and an <h2>, showing through two elements
   the design gives none. Measured at 1600px, they pushed the list 11px and the
   dashboard 6px below where the reference puts them. */
.edms-page-header__meta {
    margin: 0;
}

.edms-dashboard__heading {
    margin: var(--space-4) 0;
}

/* --------------------------------------------------------------------------
   18. The shell wears the design's names
   --------------------------------------------------------------------------

   The sidebar, topbar and content pane now carry `.edms-sidebar`,
   `.edms-topbar` and `.edms-shell__content` alongside the ids this file has
   always positioned them by. Every rule here is written against those ids, so
   it outranks the design's classes: the classes fill in what we never set, and
   change nothing we do.

   Two properties have to be taken back, both because our layout is fixed
   positioning where the reference's is a grid — which is what the off-canvas
   drawer below the breakpoint depends on.
   -------------------------------------------------------------------------- */

/* `.edms-topbar` is sticky. Sticky inside our flow drops the bar to x=0,
   underneath the sidebar. */
#menu-topbar .navbar.edms-topbar {
    position: fixed;
}

/* `.edms-sidebar` is sticky and 100vh tall. Ours is fixed and pinned to both
   ends, so it can slide off-canvas. */
#menu-main.edms-sidebar {
    height: auto;
    position: fixed;
}

/* The content pane's padding is set above against its id; the design's class
   would otherwise add its own on top of the topbar offset. */
#appearance-main-viewport.edms-shell__content {
    flex: none;
}

/* Bootstrap's clearfix pseudo-elements again, one level up. The <nav> became a
   flex row when it took `.edms-topbar`, and its own `::before` then claimed the
   row's first slot and a 16px gap — putting the search field 16px past the
   gutter, exactly as the container's did before it. */
@media (min-width: 768px) {
    #menu-topbar .navbar::before,
    #menu-topbar .navbar::after {
        display: none;
    }
}

/* The design slides its off-canvas drawer with `transform: translateX(-100%)`
   below 1024px, where ours moves it with `left`. Taking `.edms-shell__sidebar`
   brought that transform along, and with both applying the drawer sat one full
   width too far out — closed at -480px instead of -240, and "open" at -240
   instead of flush. Ours is kept: it is what `.menu-main-opened` toggles and
   what the topbar button has always driven.

   The two also disagree on where the drawer starts: the reference keeps it one
   until 1024px and ours pins the sidebar open from 768px. That difference is
   left alone — it changes how the app behaves on a tablet, not how it looks. */
#menu-main.edms-sidebar {
    transform: none;
}

/* The sidebar group's row is an <h4>, which Bootstrap dresses as a heading:
   semibold, 15.4px line box, strong ink. The design's row carries none of that
   — the link inside it is what is styled — so the heading's own type is taken
   back off. */
#accordion-sidebar .panel-title.edms-sidebar__group-row {
    color: var(--text-default);
    font-weight: var(--weight-regular);
    line-height: var(--text-body-line);
}

/* Sub-items read at the body size in the design, where ours had them a step
   smaller than the group headings above them. */
#accordion-sidebar .edms-sidebar__sublist {
    font-size: var(--text-body-size);
}

/* The sidebar's items take the design's own padding. Bootstrap dresses an
   anchor inside a `.panel` at 10px 15px, which made each row 4px taller than
   the reference's 38px. */
#accordion-sidebar .edms-sidebar__item {
    padding: var(--space-2) var(--space-3);
}

/* The caret sits at the row's trailing edge, as the design places it. */
#accordion-sidebar .edms-sidebar__caret-button {
    padding: 0;
}

/* Sub-items take the design's padding too; Bootstrap's anchor padding inside a
   `.panel` made each 4px taller than the reference's 38px. */
#accordion-sidebar .edms-sidebar__subitem {
    padding: var(--space-2) var(--space-3);
}

/* The list filter is the search app's, sitting in the design's filter slot. Its
   clear button rides inside the field at the trailing edge. */
.edms-toolbar__filter .edms-input-group {
    position: relative;
}

.edms-toolbar__filter .edms-input {
    padding-inline: var(--space-8);
}

.edms-input-group__clear {
    inset-block-start: 50%;
    inset-inline-end: var(--space-1);
    position: absolute;
    transform: translateY(-50%);
}