label.inline {
    width: 48%;
    text-align: right
}

button.inline {
    width: auto;
}

select.inline, input.inline {
    width: 50%;
    display: inline-block;
}

table.nested-form-table {
    background-color: transparent !important;
    margin-bottom: 0 !important;
}

table.nested-form-table select.inline, table.nested-form-table input.inline {
    width: 100%;
    display: inline-block;
}


@media only screen and (max-width: 767px) {

    .navbar-top-links .dropdown-user {
        right: unset;
    }
}

.CodeMirror-fullscreen {
    z-index: 1001 !important;
}

.table-inside tbody tr:hover {
    background-color: transparent;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sidebar .sidebar-brand {
    padding: .5rem 1rem;
    margin: 0.1rem 0.5rem;
}

.sidebar-brand-icon {
    width: 100%;
}

.sidebar-brand-icon img {
    width: auto;
    height: auto;
    max-height: 80px;
    max-width: 80%;
    display: block;
    padding: 10px 0;
}

table.table-compact td {
    padding: .25rem;
}

option:disabled {
    background-color: lightgrey;
}

@media (max-width: 992px) {
    .d-lg-max-inline {
        display: inline !important;
    }
}

.loader {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 9999;
}

.loader-container {
    background: rgba(0,0,0,0.2);
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    position: fixed;
}

.custom-control-input:checked~.custom-control-label::before, .custom-switch .custom-control-input:checked~.custom-control-label::after,
.custom-switch .custom-control-label::before, .custom-switch .custom-control-label::after  {
    margin-top: -4px;
}

.custom-switch {
    padding-left: 2.75rem;
}

.overflow-wrap a {
    overflow-wrap: anywhere;
}

.text-underline {
    text-decoration: underline;
}

.w-7 {
    width: 7rem!important;
}

.w-10 {
    width: 10%;
}

div.rule:first-of-type {
    /*border-top: 1px solid #e3e6f0;*/
    /*padding-top: 0.5rem !important;*/
    margin-top: 0;
}

.rule i.remove-rule:not(:first-of-type) {
    display: none;
}

.rule {
    padding: 0.5rem;
    margin: 1rem 0;
}

.selected-box {
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-clip: padding-box;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.selected-box img {
    height: 150px;
    min-height: 150px;
}

.selected-box .label {
    text-overflow: ellipsis;
    width: 170px;
    overflow: hidden;
    white-space: nowrap;
}

.href-disabled a, .href-disabled button, a.href-disabled, button.href-disabled {
    opacity: .4;
    cursor: default !important;
    pointer-events: none;
}

.table-checkbox, .table-radio {
    margin-bottom: 0;
}

.table-checkbox td, .table-radio td {
    border: none;
}

.gap-10 {
    gap: 10px;
}

/* Action icons in list rows: keep Remove (a block <form>) and the
   Edit/View/Export links on a single line. */
.table-row-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}
.table-row-btns form {
    display: inline-flex;
    margin: 0;
}

.wrap-all {
    word-break: break-all;
    white-space: normal;
}

.form-group table.form-control {
    height: auto;
}

.sidebar.toggled .nav-item .collapse {
    z-index: 5;
}

form .form-group.codemirror label {
    position: relative;
}

form.btn-form {
    display: inline-block;
}

.dropdown-item form.btn-form {
    display: flex;
}

.controller-endpoint-remove-btn {
    min-width: 1.5rem !important;
    padding: 0rem 1rem 0rem 0rem;
    box-sizing: content-box;
}

.controller-endpoint-remove-btn .nav-link {
    padding: 0;
    padding-left: .2rem;
    border: 0;
    text-align: center;
    background-color: white;
}

.qq-upload-button {
    display: unset!important;
    width: unset!important;
    padding: unset!important;
    float: unset!important;
    text-align: unset!important;
    background: unset!important;
    color: unset!important;
    border-radius: unset!important;
    border: unset!important;
    box-shadow: unset!important;
}

.qq-gallery.qq-uploader:before {
    font-size: inherit!important;
    opacity: 0.5!important;
}

.logo {
    width: 100%;
}

.home img.logo, .register img.logo, .forgot-password img.logo, .login img.logo {
    width: 200px;
}

.version-hash {
    font-family: Source Code Pro;
    font-weight: 500;
}

.crud-card {
    padding: 1.0rem;
    margin: 0.75rem !important;
}

.crud-card-wrapper {
    padding: 0;
}

@media (max-width: 576px) {
    .pagination {
        font-size: 0.75rem;
    }
    .pagination-wrapper {
        flex-direction: column;
        align-items: center;
    }
}

#content table:not(.table) {
    width: 100%;
}

#content table:not(.table), #content table:not(.table) th, #content table:not(.table) td {
    border: 1px solid #0A474F;
}

#content table:not(.table) th {
    background-color: #18b2c6;
    color: #fff;
    font-weight: normal;
}

#content table:not(.table) tr:nth-child(2n) {
    background-color: #f1f1f1;
}

button.files-btn {min-width: 0;}
div.file-card {height:fit-content; width:15rem; margin: 0 0.5% 4px; padding:0; overflow:hidden; text-align:center}

.files-upload-label {z-index: 100;}

div.qq-gallery.qq-uploader {
    padding: 30px 10px 10px;
}

/* Date / datetime / time inputs: picker icon on the LEFT (easier to click),
   vertically centered, plus a sensible width so the field isn't full-row wide. */
form input[type=date].form-control:not(.simple-control),
form input[type=datetime-local].form-control:not(.simple-control),
form input[type=time].form-control:not(.simple-control) {
    position: relative;
    padding-left: 2.4rem;
}
form input[type=date].form-control:not(.simple-control)    { max-width: 14rem; }
form input[type=datetime-local].form-control:not(.simple-control) { max-width: 19rem; }
form input[type=time].form-control:not(.simple-control)    { max-width: 11rem; }

input[type=date]:not(.simple-control)::-webkit-calendar-picker-indicator,
input[type=datetime-local]:not(.simple-control)::-webkit-calendar-picker-indicator,
input[type=time]:not(.simple-control)::-webkit-calendar-picker-indicator {
    position: absolute;
    left: .7rem;
    top: 0;
    bottom: 0;
    margin: auto 0;          /* reliable vertical centering */
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    opacity: .6;
    transition: opacity var(--ok-speed, .18s) var(--ok-ease, ease);
}
input[type=date]:not(.simple-control)::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]:not(.simple-control)::-webkit-calendar-picker-indicator:hover,
input[type=time]:not(.simple-control)::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/*#wrapper #content-wrapper {background-color: #f5f5f5;}*/
html.plain-view {background-color: #f5f5f5;}

@media (min-width: 768px) {
    .sidebar .nav-item .nav-link {
        margin: 0.1rem 0.5rem;
        width: 13rem;
    }
}

@media (min-width: 768px) {
    .sidebar .nav-item .collapse .collapse-inner .collapse-item,
    .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
        padding: 0.4rem 1rem;
        margin-bottom: 0.1rem;
    }
}

.sidebar.toggled .nav-item .nav-link {
    text-align: center;
    padding: 0.5rem 0.5rem;
    margin: 0.1rem 0.1rem;
    width: 6.3rem;
}

.form-control::placeholder {
    color: #c0c7c7;
    opacity: 1;
}

.grid-stack>.grid-stack-item>.grid-stack-item-content {
    overflow-y: hidden;
}

ul.nav.dashboard-nav {
    width: 100%;
}

.dashboard-widget-x {
    float:right;
    display:none;
    padding: 0 2px;
    vertical-align: middle;
    position: absolute;
    cursor: pointer;
    right: 0;
    line-height: 1;
}

.grid-stack.preview .dashboard-widget-x {
    display: inline-block;
}

.dashboard-widget-x:hover {
    color: #dddfeb;
}

img.option-img {
    height: 100px;
}

table.table-checkbox-grouped, table.table-checkbox-grouped tbody{
    width: 100%;
    display: block;
}

table.table-checkbox-grouped label {
    position: relative;
    font-size: 1rem;
    margin-bottom: 0;
    text-overflow: unset;
    height: auto;
    overflow: unset;
}

table.table-checkbox-grouped .checkbox-table-cat, table.table-checkbox-grouped .checkbox-table-group {
    padding: 0.5rem 0.25rem;
}

.checkbox-table-cat {
    text-transform: uppercase;
    font-weight: 900;
    border-bottom: 1px solid #d1d3e2;
    margin: 10px 0;
}

.checkbox-table-group-name {
    font-weight: 900;
    font-size: 0.9rem;
}

.checkbox-table-group {
    margin-bottom: 20px;
}

.dropdown-item {
    white-space: normal;
}

a:hover > i, form button[type="button"]:hover > i {
    color: #07353B!important;
}
form button[type="button"][disabled] > i {
    color: #d1d3e2!important;
}

.bootstrap-select>.dropdown-toggle {
    border-color: #d1d3e2;
    background-color: #fff;
    padding: .25rem .8rem;
    font-size: .875rem;
    line-height: 1.5;
}

.nav-tabs {
    border-bottom-width: 0;
}

input[type=file] {
    padding: 0;
    height: 100%;
}

input[type=file]::file-selector-button:hover {
    cursor: pointer;
}

em.alert-danger::before {
    content: '\f071';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    margin-right: 4px;
}

input[type=checkbox] {
    margin: 3px 3px 3px 4px;
}

.form-control.auto input[type=checkbox] {
    margin: 0;
}

.form-control.auto {
    height: auto;
}

div.navbar.feature-request {
    padding: .5rem 1.5rem;
}

a.entity-link {
    width: 100px;
    height: 100px;
}

a.entity-link.large {
    width: 200px;
    height: 200px;
}

a.entity-link:hover {
    text-decoration: none;
}

a.entity-link:hover span {
    text-decoration: underline;
}

a.entity-link span {
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

a.entity-link span, a.entity-link div.icon-div {
    flex: 1;
    justify-content: flex-end;
    display: flex
}

a.entity-link i {
    margin: auto;
}

.card .card-header div form .input-group {
    padding: 0!important;
    margin: 0!important;
}

[data-toggle="collapse"][aria-expanded="true"] i {
    transform: rotate(180deg) ;
}

.embedded-preview {
    text-align: center;
}

.embedded-preview-title {
    font-size: 1.3em;
    margin-top: 6px;
}


.spinner-border {
    display: none;
}
.loading .spinner-border {
    display: inline-block;
}
.loading .btn-text {
    display: none;
}

form.genericForm {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
}

form.genericForm.formGrid {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 10px;
}

table tr.key-value:first-of-type td {
    border-top: 0;
}

ul.one-to-many {
    padding-inline-start: 0;
    list-style-position: inside;
}

.spinner-border {
    display: none;
}
.loading .spinner-border {
    display: inline-block;
}
.loading .btn-text {
    display: none;
}

/* ===== Modern polish for Bootstrap 4.5.2 (Openkoda) ===== */
:root {
    --ok-radius: .75rem;
    --ok-radius-lg: 1rem;
    --ok-shadow-sm: 0 4px 10px rgba(9, 30, 66, .06);
    --ok-shadow: 0 10px 24px rgba(9, 30, 66, .10);
    --ok-speed: .18s;
    --ok-ease: cubic-bezier(.4,0,.2,1);
    --ok-muted: #6c757d;
    --ok-text: #2b2f36;
}

/* Cards – subtle elevation + motion */
.card { border: 0; border-radius: var(--ok-radius); box-shadow: var(--ok-shadow-sm); }
.card:hover { box-shadow: var(--ok-shadow); }
.card-header { background: #fff; border-bottom: 1px solid #eef0f5; border-top-left-radius: var(--ok-radius); border-top-right-radius: var(--ok-radius); }

/* Action tiles on dashboard */
.card-action { border-radius: var(--ok-radius-lg); box-shadow: var(--ok-shadow-sm); transition: transform var(--ok-speed) var(--ok-ease), box-shadow var(--ok-speed) var(--ok-ease); }
.card-action:hover { box-shadow: var(--ok-shadow); }
.icon-circle {
    width: 40px; height: 40px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; color: var(--primary, #566eff);
}

/* Menu cards */
.card-menu-modern .card-header h6 { letter-spacing: .2px; }
.link-menu { color: var(--ok-text); }
.link-menu:hover { color: var(--primary, #566eff) !important; text-decoration: none; }


/* Rounded dropdowns */
.dropdown-menu { border: 1px solid #eef0f5; border-radius: .75rem; box-shadow: var(--ok-shadow-sm); }

/* Typography tweaks */
body { color: var(--ok-text); }
.font-weight-600 { font-weight: 600; }

/* Responsive grid tightening for tiles */
@media (min-width: 1200px) {
    #registered-cruds .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* Optional: prettier scrollbars (WebKit only) */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 999px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }

/* ===== Rich dashboard menus (compact) ===== */
.menu-rich-grid .card-menu { border-radius: .75rem; }

.menu-rich-grid .card-menu a { color: .75rem; }

.menu-rich .list-group-item {
    padding: .55rem .9rem;
    border: 0;
    border-top: 1px solid #f1f3f7;
}
.menu-rich .list-group-item:first-child { border-top: 0; }

.menu-link {
    font-weight: 600;
    line-height: 1.2;
    display: inline-block;
}
.menu-link:hover { text-decoration: none; color: var(--primary, #566eff) !important; }

.menu-desc {
    font-size: .85rem;
    color: #6b7380;
    margin-top: .15rem;
}

.menu-bullet {
    width: 28px; height: 28px;
    border-radius: 999px;
    background: rgba(86,110,255,.10); /* falls back if no dynamic theme */
    color: var(--primary, #566eff);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem;
    flex: 0 0 28px;
}

/* Small action buttons */
.btn-icon {
    padding: .25rem .45rem;
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(9,30,66,.06);
}
.btn-icon i { font-size: .85rem; }

/* Compact tiles */
.compact-tile .card-body { padding: .75rem !important; }
.compact-tile .icon-circle { width: 36px; height: 36px; font-size: .95rem; }

/* Reduce empty space inside card headers */
.card-menu .card-header { padding: .5rem .9rem; }

/* Make columns breathe less on large screens */
@media (min-width: 992px) {
    .menu-rich-grid > [class*="col-"] { padding-right: .75rem; padding-left: .75rem; }
}

.simple-searchable-dropdown {
    position: relative;
}
 
.simple-searchable-dropdown .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    z-index: 1050;

    max-height: 240px;      /* 👈 controls visible height */
    overflow-y: scroll;       /* 👈 enables scrolling */
    overflow-x: hidden;

    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.25rem;

    padding-left: 0;
    margin-top: 2px;
}

/* ===================================================================
   Generic table UX (Phase 4) — compact layout, search sizing,
   responsive action toolbar, bulk-action bar positioning.
   =================================================================== */

/* --- Card header: compact, single tidy toolbar row --- */
.card-header.py-3 {
    padding-top: .65rem;
    padding-bottom: .65rem;
    align-items: center !important;
    flex-wrap: wrap;
    row-gap: .5rem;
}
.card-header .card-header-buttons {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

/* --- Issue 1: search keeps a usable width and stops shrinking --- */
.card-header .search-form {
    flex: 0 1 auto;
}
.card-header .search-form .input-group {
    min-width: 18rem;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    float: none !important;
}
@media (max-width: 575px) {
    .card-header .search-form { flex: 1 1 100%; width: 100%; }
    .card-header .search-form .input-group { min-width: 0; }
}

/* --- Issue 2: the responsive "..." menu only on narrow screens --- */
@media (min-width: 768px) {
    .card-header .dropdown.dropdown-lg,
    .card-header .dropdown.dropdown-sm { display: none; }
}
@media (max-width: 767.98px) {
    .card-header .card-header-buttons { display: none; }
}

/* --- Row action icons: uniform icon-buttons, semantic colors, tidy hover --- */
.table-row-btns { gap: .25rem; }
.table-row-btns a,
.table-row-btns button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    line-height: 1;
    border-radius: .45rem;
    transition: background-color var(--ok-speed, .18s) var(--ok-ease, ease);
}
.table-row-btns a:hover,
.table-row-btns button:hover { background-color: var(--ok-surface-2, #f1f3f7) !important; }
.table-row-btns i {
    font-size: .95rem;
    line-height: 1;
    transition: color var(--ok-speed, .18s) var(--ok-ease, ease);
}
/* Unify the link actions (edit / view / export) on the brand color */
.table-row-btns a i { color: var(--primary); }
.table-row-btns a:hover > i { color: var(--primary-dark) !important; }
/* Destructive (remove) stays red — override the global dark-teal hover */
.table-row-btns i.text-danger,
.table-row-btns form button:hover > i.text-danger { color: #d63939 !important; }
.table-row-btns form button:hover > i.text-danger { color: #b02a30 !important; }

/* --- Issue 3: bulk-action bar — left-aligned compact toolbar above table --- */
#bulkActionGroup:not(.d-none) {
    display: flex !important;
    align-items: center;
    padding: .5rem .25rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--ok-border, #e6e9f0);
}
#bulkActionGroup .card-header-buttons {
    /* neutralize the col-8/row grid classes that pushed it off-center */
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
#bulkActionGroup .card-header-buttons > [class*="col-"] {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#bulkActionGroup .bootstrap-select.form-control { width: auto !important; min-width: 12rem; }

/* --- Gap between the search field and the action buttons --- */
.card-header .search-form { margin-right: .85rem; }

/* --- Prominent entity label on tables and view/edit (not dashboard menu cards) --- */
.card:not(.card-menu) > .card-header h6.font-weight-bold {
    font-size: 1.15rem;
    letter-spacing: .1px;
}

/* --- Topbar menus (user / notifications): readable, not full-width --- */
.topbar .dropdown-menu[aria-labelledby="userDropdown"] { min-width: 12rem; }
.topbar .dropdown-menu[aria-labelledby="alertsDropdown"] { width: 22rem; max-width: 92vw; }

/* ===================================================================
   Forms UX (Phase 4) — label hierarchy, section titles, validation.
   =================================================================== */

/* Field labels: smaller, medium weight, calm color, tight to the input */
.genericForm .form-group > label:not(.custom-control-label):not(.checkbox-label),
.genericForm .form-group > div > label:not(.custom-control-label):not(.checkbox-label) {
    font-size: .8rem;
    font-weight: 600;
    color: var(--ok-text-muted);
    margin-bottom: .3rem;
    letter-spacing: .01em;
}

/* Section titles (divider field): the most prominent label in a form,
   above the field labels — fixes the previously inverted hierarchy. */
.genericForm .form-section-title,
.form-card-body .form-section-title {
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ok-brand-900, #07353B);
    padding-bottom: .35rem;
    margin-bottom: .75rem !important;
    border-bottom: 1px solid var(--ok-border, #e6e9f0);
}
.genericForm .form-section-title.mt-3 { margin-top: 1.5rem !important; }

/* Inline validation errors: clean small red text, not a filled box */
.genericForm em.alert-danger,
form em.alert-danger {
    display: block;
    background: none !important;
    border: 0 !important;
    padding: .25rem 0 0 !important;
    margin: 0 !important;
    color: #d63939 !important;
    font-size: .78rem;
    font-style: normal;
    line-height: 1.3;
}

/* A touch more breathing room between fields */
.genericForm .form-group { margin-bottom: 1.1rem; }

/* Checkbox lists (privilege groups, loggers, etc.): align box + label on one
   centered line with a real gap; rows comfortable to click. */
.form-control div:has(> label.checkbox-label) {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .18rem 0;
}
.form-control div > input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
}
.form-control label.checkbox-label {
    margin: 0;
    line-height: 1.3;
    font-weight: 400;
    cursor: pointer;
}
/* Brand-colored checkboxes/radios */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* ===================================================================
   Audit feed (audit-all.html) — compact, scannable log
   =================================================================== */
.audit-feed { list-style: none; margin: 0; padding: 0; }
.audit-item {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    gap: .25rem 1rem;
    align-items: start;
    padding: .55rem .25rem .55rem .85rem;
    border-left: 3px solid var(--ok-border);
    border-bottom: 1px solid var(--ok-border);
}
.audit-item:last-child { border-bottom: 0; }
.audit-item:hover { background: var(--ok-surface-2); }
.audit-sev-warning { border-left-color: #d99000; }
.audit-sev-error   { border-left-color: #d63939; }

/* Operation badge */
.audit-op { grid-row: 1 / span 3; padding-top: .1rem; }
.audit-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: .22rem .5rem; border-radius: var(--ok-radius-pill); white-space: nowrap;
}
.audit-badge i { font-size: .65rem; }
.audit-op-add    { background: #e3f3ea; color: #0f7a44; }
.audit-op-edit   { background: #e3f1fb; color: #1665a8; }
.audit-op-delete { background: #fbe3e4; color: #c0353b; }
.audit-op-browse { background: #eef0f5; color: #6b7380; }
.audit-op-assign { background: #efe6fb; color: #6b39b6; }

/* Main column */
.audit-main { grid-column: 2; min-width: 0; }
.audit-entity { font-weight: 600; font-size: .92rem; }
.audit-entity a { color: var(--ok-text); }
.audit-entity a:hover { color: var(--primary); }
.audit-entity-muted { color: var(--ok-text-muted); font-weight: 500; }

.audit-meta {
    font-size: .74rem; color: var(--ok-text-muted);
    margin-top: .3rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
}
.audit-meta a { color: var(--primary); }
.audit-sep { color: var(--ok-border-strong); }
.audit-id { margin-left: auto; color: var(--ok-text-subtle); }

/* Structured edit diff */
.audit-diff { margin-top: .4rem; display: flex; flex-direction: column; gap: .2rem; }
.diff-row {
    display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr auto 1fr;
    gap: .5rem; align-items: center; font-size: .8rem;
}
.diff-field { font-weight: 600; color: var(--ok-text); }
.diff-old { color: #c0353b; text-decoration: line-through; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-new { color: #0f7a44; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diff-arrow { color: var(--ok-text-subtle); font-size: .68rem; }

/* Change-text fallback (ADD / DELETE / BROWSE) */
.audit-change-html { margin-top: .35rem; font-size: .82rem; }
.audit-change-body { position: relative; max-height: 4.5rem; overflow: hidden; line-height: 1.5; }
.audit-change-html.expanded .audit-change-body { max-height: none; }
/* Fade-out gradient at the bottom of clamped content (only while collapsed) */
.audit-change-html.is-clamped:not(.expanded) .audit-change-body::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.8rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ok-surface, #fff));
}
.audit-item:hover .audit-change-html.is-clamped:not(.expanded) .audit-change-body::after {
    background: linear-gradient(to bottom, rgba(248, 250, 252, 0), var(--ok-surface-2, #f1f3f7));
}
.audit-change-body b { font-weight: 600; color: var(--ok-text); }
.audit-change-toggle { background: none; border: 0; color: var(--primary); font-size: .78rem; padding: .15rem 0; cursor: pointer; }

/* Actions */
.audit-actions { grid-column: 3; display: flex; gap: .15rem; align-items: flex-start; }
.audit-actions a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.85rem; height: 1.85rem; border-radius: .45rem; color: var(--primary);
}
.audit-actions a:hover { background: var(--ok-surface-2); color: var(--primary-dark); }

@media (max-width: 767.98px) {
    .audit-item { grid-template-columns: minmax(0,1fr) auto; }
    .audit-op { grid-row: auto; grid-column: 1; }
    .audit-main { grid-column: 1 / -1; }
    .diff-row { grid-template-columns: 1fr; gap: .1rem; }
    .diff-old, .diff-new { white-space: normal; }
    .diff-arrow { display: none; }
}

/* ===================================================================
   Log feed (logs-all.html) — compact, severity-aware, monospace body
   =================================================================== */
.log-feed { list-style: none; margin: 0; padding: 0; }
.log-item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: .25rem 1rem;
    padding: .55rem .25rem .55rem .85rem;
    border-left: 3px solid var(--ok-border);
    border-bottom: 1px solid var(--ok-border);
}
.log-item:last-child { border-bottom: 0; }
.log-item:hover { background: var(--ok-surface-2); }
.log-sev-warning { border-left-color: #d99000; }
.log-sev-error   { border-left-color: #d63939; }

.log-level { padding-top: .1rem; }
.log-badge {
    display: inline-flex; align-items: center;
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: .2rem .45rem; border-radius: var(--ok-radius-pill);
}
.log-info    { background: #eef0f5; color: #6b7380; }
.log-warning { background: #fef3d6; color: #8a6300; }
.log-error   { background: #fbe3e4; color: #c0353b; }

.log-main { min-width: 0; }
.log-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.log-source { font-weight: 600; font-size: .85rem; color: var(--ok-text); }
.log-req { font-size: .72rem; color: var(--primary); font-family: var(--ok-font-mono); }

.log-body-wrap { position: relative; margin-top: .25rem; }
.log-body {
    position: relative;
    white-space: pre-wrap; word-break: break-word;
    font-family: var(--ok-font-mono); font-size: .74rem; line-height: 1.5;
    margin: 0; color: var(--ok-text-muted);
    max-height: 6.5rem; overflow: hidden;
}
.log-body-wrap.expanded .log-body { max-height: none; }
.log-body-wrap.is-clamped:not(.expanded) .log-body::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.8rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--ok-surface, #fff));
}
.log-item:hover .log-body-wrap.is-clamped:not(.expanded) .log-body::after {
    background: linear-gradient(to bottom, rgba(248, 250, 252, 0), var(--ok-surface-2, #f1f3f7));
}
.log-toggle { background: none; border: 0; color: var(--primary); font-size: .78rem; padding: .15rem 0; cursor: pointer; }

@media (max-width: 767.98px) {
    .log-item { grid-template-columns: 1fr; }
    .log-level { grid-column: 1; }
}

/* ===================================================================
   System health (system-health.html) — KPI metric cards
   =================================================================== */
.health-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.health-card {
    background: var(--ok-surface);
    border-radius: var(--ok-radius);
    box-shadow: var(--ok-shadow-sm);
    padding: 1.05rem 1.2rem;
}
.health-card-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ok-text-muted); margin-bottom: .5rem;
}
.health-card-tag {
    font-family: var(--ok-font-mono); text-transform: none; letter-spacing: 0;
    color: var(--ok-text); background: var(--ok-surface-2); padding: 0 .35rem; border-radius: .35rem;
}
.health-gauge { display: flex; align-items: baseline; gap: .25rem; }
.health-gauge-value { font-size: 2rem; font-weight: 700; color: var(--ok-text); line-height: 1; }
.health-gauge-value-pct { font-size: 1.05rem; font-weight: 700; color: var(--ok-text-muted); }
.health-gauge-meta { font-size: .78rem; color: var(--ok-text-muted); margin-left: .25rem; }
.health-bar { height: .5rem; border-radius: 999px; background: var(--ok-border); overflow: hidden; margin: .7rem 0 .85rem; }
.health-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width .4s var(--ok-ease); }
.health-bar.health-ok   > span { background: #1c9b5e; }
.health-bar.health-warn > span { background: #d99000; }
.health-bar.health-crit > span { background: #d63939; }
.health-kv { display: flex; gap: 1.5rem; margin: 0; }
.health-kv > div { display: flex; flex-direction: column; }
.health-kv dt { font-size: .68rem; color: var(--ok-text-subtle); text-transform: uppercase; letter-spacing: .03em; }
.health-kv dd { margin: 0; font-size: .92rem; font-weight: 600; color: var(--ok-text); }

.health-status-ok { display: inline-flex; align-items: center; gap: .5rem; color: #1c7a4a; font-weight: 600; }
.health-status-ok i { font-size: 1.05rem; }

/* Task statistics (pidstat) — wide process table made scannable */
.pidstat { font-size: .76rem; font-variant-numeric: tabular-nums; }
.pidstat th, .pidstat td { white-space: nowrap; }
.pidstat th.text-right, .pidstat td.text-right { text-align: right; font-family: var(--ok-font-mono); }
.pidstat .pidstat-key { color: var(--primary); }            /* %CPU / %MEM header */
.pidstat td.pidstat-key { font-weight: 700; color: var(--ok-text); }
.pidstat td.pidstat-zero { color: var(--ok-text-subtle); }  /* mute 0 / -1 so active values pop */
/* Pin the Command column to the right edge while the table scrolls */
.pidstat .pidstat-cmd {
    position: sticky; right: 0; text-align: left;
    font-family: var(--ok-font-mono); color: var(--ok-text);
    background: var(--ok-surface);
    box-shadow: -8px 0 8px -8px rgba(9, 30, 66, .15);
}
.pidstat thead .pidstat-cmd { background: var(--ok-surface); }
.table-hover.pidstat tbody tr:hover .pidstat-cmd { background: var(--ok-surface-2); }
/* Click-to-sort headers */
.pidstat th.pidstat-sortable { cursor: pointer; user-select: none; }
.pidstat th.pidstat-sortable:hover { color: var(--primary); }
.pidstat th.sort-asc::after  { content: " \25B2"; font-size: .6em; vertical-align: middle; }
.pidstat th.sort-desc::after { content: " \25BC"; font-size: .6em; vertical-align: middle; }
.pidstat-toolbar { margin-bottom: .6rem; }
.pidstat-toolbar .pidstat-filter { max-width: 22rem; }

/* ===================================================================
   Users page  (tables::users — global users + org team members)
   =================================================================== */
.users-card .users-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    padding: 1rem 1.25rem;
}
.users-card-heading { display: flex; align-items: center; gap: .6rem; }
.users-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.5rem; height: 1.5rem; padding: 0 .45rem;
    font-size: .72rem; font-weight: 700;
    color: var(--ok-text-muted);
    background: var(--ok-surface-2);
    border: 1px solid var(--ok-border);
    border-radius: var(--ok-radius-pill);
}
.users-card-tools { display: flex; align-items: center; gap: .6rem; }
/* The shared search fragment floats + adds bottom margin; neutralize inside the flex toolbar */
.users-card-tools .search-form { margin: 0 !important; }
.users-card-tools .search-form .input-group { margin: 0 !important; float: none !important; }
.users-new-btn { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }

/* ---- Table layout ---- */
.users-table { margin-bottom: 0; }
.users-table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--ok-border);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ok-text-subtle);
    font-weight: 700;
    padding: .6rem .75rem;
}
.users-table thead th a { color: var(--ok-text-subtle); }
.users-table tbody td {
    vertical-align: top;
    padding: .7rem .75rem;
    border-top: 1px solid var(--ok-border);
}
/* keep the single-line identity + actions optically aligned with the first role row */
.users-table tbody td.users-col-id,
.users-table tbody td.users-col-user,
.users-table tbody td.users-col-actions { padding-top: .8rem; }
.users-col-id { width: 1%; white-space: nowrap; }
.user-id { color: var(--ok-text-subtle); font-variant-numeric: tabular-nums; font-size: var(--ok-text-sm); }
.users-col-actions { width: 1%; white-space: nowrap; text-align: right; }

/* ---- User identity cell ---- */
.user-cell { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.user-avatar {
    position: relative;
    flex: 0 0 auto;
    width: 2.25rem; height: 2.25rem;
    border-radius: var(--ok-radius-pill);
    overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary), white 8%),
        color-mix(in srgb, var(--primary), black 14%));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
/* a little colour variety per row, seeded from the user id */
.user-avatar[style*="--ok-avatar-seed:1"] { background: linear-gradient(135deg,#6d8bff,#4759d6); }
.user-avatar[style*="--ok-avatar-seed:2"] { background: linear-gradient(135deg,#3bb9a3,#1d8a78); }
.user-avatar[style*="--ok-avatar-seed:3"] { background: linear-gradient(135deg,#e08a4b,#c25f23); }
.user-avatar[style*="--ok-avatar-seed:4"] { background: linear-gradient(135deg,#b169d6,#7e3fb0); }
.user-avatar[style*="--ok-avatar-seed:5"] { background: linear-gradient(135deg,#e0698a,#bf3556); }
.user-avatar-initial {
    color: #fff; font-weight: 700; font-size: .9rem; line-height: 1;
    text-transform: uppercase; user-select: none;
}
.user-avatar-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.user-cell-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-name { font-weight: 600; color: var(--ok-text); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.user-name:hover { color: var(--primary); }
.user-email { font-size: var(--ok-text-xs); color: var(--ok-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Roles cell ----
   Two-column grid so org names align in one column and the role controls
   in another, no matter how ragged the names are. Each .user-role-line is
   display:contents so its org + control land directly in the grid tracks. */
.user-roles {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) 1fr;
    align-items: center;
    gap: .35rem .9rem;
}
.user-roles.user-roles--noorg { grid-template-columns: 1fr; }
.user-role-line { display: contents; }
.user-role-org {
    justify-self: start;
    align-self: center;
    font-size: var(--ok-text-sm);
    font-weight: 500;
    color: var(--primary);
    white-space: nowrap;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-role-control { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.user-role-control form { margin: 0; display: inline-flex; align-items: center; }
/* normalise the bootstrap-select role picker to one compact, consistent width
   so the remove buttons line up across rows */
.user-role-control .bootstrap-select { width: 13.5rem !important; margin: 0 !important; }
.user-role-control .bootstrap-select > .dropdown-toggle {
    font-size: var(--ok-text-sm);
    padding: .3rem .65rem;
    border-radius: var(--ok-radius-sm);
    border: 1px solid var(--ok-border-strong);
    background: var(--ok-surface);
}
.user-role-control .bootstrap-select > .dropdown-toggle:hover { border-color: var(--primary-light); }
/* the trash/remove icon button */
.user-role-control form button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem;
    padding: 0; border: 0; background: none;
    border-radius: var(--ok-radius-sm);
    transition: background-color var(--ok-speed, .15s) ease;
}
.user-role-control form button:hover { background: var(--ok-surface-2); }
.user-no-roles { font-size: var(--ok-text-sm); color: var(--ok-text-subtle); font-style: italic; }
.role-chip {
    display: inline-flex; align-items: center;
    padding: .2rem .6rem;
    font-size: .74rem; font-weight: 600;
    color: var(--ok-text-muted);
    background: var(--ok-surface-2);
    border: 1px solid var(--ok-border);
    border-radius: var(--ok-radius-pill);
}

/* ---- Collapse long role lists (> 6 roles) ---- */
.user-roles-wrap { position: relative; }
/* ~6 role lines tall: 6 * (1.9rem control + .35rem row-gap) ≈ 13.5rem */
.user-roles-wrap.is-collapsible:not(.is-expanded) .user-roles {
    max-height: 13.5rem;
    overflow: hidden;
}
.user-roles-wrap.is-collapsible:not(.is-expanded)::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: calc(13.5rem - 2.3rem);
    height: 2.3rem;
    background: linear-gradient(to bottom, transparent, var(--ok-surface));
    pointer-events: none;
}
.user-roles-toggle {
    display: none;
    margin-top: .4rem;
    padding: 0;
    border: 0; background: none;
    font-size: var(--ok-text-sm); font-weight: 600;
    color: var(--primary);
    cursor: pointer;
}
.user-roles-wrap.is-collapsible > .user-roles-toggle { display: inline-flex; align-items: center; gap: .3rem; }
.user-roles-toggle:hover { color: var(--primary-dark); text-decoration: underline; }
.user-roles-toggle .user-roles-toggle-less { display: none; }
.user-roles-wrap.is-expanded .user-roles-toggle .user-roles-toggle-more { display: none; }
.user-roles-wrap.is-expanded .user-roles-toggle .user-roles-toggle-less { display: inline; }

/* ---- Row action buttons ---- */
.users-table .table-row-btns {
    display: inline-flex; flex-wrap: nowrap; align-items: center; gap: .15rem; justify-content: flex-end;
}
.users-table .table-row-btns > a,
.users-table .table-row-btns form button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: var(--ok-radius-sm);
    transition: background-color var(--ok-speed, .15s) ease;
}
.users-table .table-row-btns > a:hover,
.users-table .table-row-btns form button:hover { background: var(--ok-surface-2); }