/*!
 * tenant-refinements.css — last-loaded, narrowly-scoped corrections on top of
 * tenant-theme.css. Deliberately small: it does NOT restate the theme.
 *
 * Load order: ... tenant-theme.css -> tenant-refinements.css (last).
 * All rules are scoped to body.inside-aside / body.inside-header / body#tabs /
 * .layui-layer-fast so other pages (login, frontend) are unaffected.
 *
 * Fixes:
 *   1. #content > .row -15px bleed inside every iframe / content document
 *   2. #firstnav tab strip width when the sidebar is visible (1440+224 overflow)
 *   3. Layer header 64px + horizontal 32px setwin buttons drawn with CSS lines
 *   4. Dialog footer padding, 40px buttons, upload/import buttons not "danger red"
 *   5. UMEditor stacking context capped under Layer's 19891015
 *   6. panel-intro nav-tabs: kill the legacy #d8e0e6 block, use green selection
 *   7. local --tt-soft fallback (tokens untouched)
 */

/* --------------------------------------------------------------------------
 * 0. Local variable fallback (does not redefine :root tokens)
 * ------------------------------------------------------------------------ */

body.inside-aside,
body.inside-header {
    --tt-soft: #f4f7f5;
}

/* --------------------------------------------------------------------------
 * 1. Content document horizontal overflow
 *
 * layout/default.html renders  #content > .row > [col-*] > .content
 * Bootstrap gives .row -15px side margins, so the row is 30px wider than the
 * iframe viewport. Reset only that outer row + its direct column; keep the
 * .content padding and allow Bootstrap .table-responsive to keep scrolling.
 * No html/body overflow-x:hidden trick.
 * ------------------------------------------------------------------------ */

body.inside-aside #content,
body.inside-header #content {
    box-sizing: border-box;
    max-width: 100%;
}

body.inside-aside #content > .row,
body.inside-header #content > .row {
    margin-right: 0;
    margin-left: 0;
}

body.inside-aside #content > .row > [class*="col-"],
body.inside-header #content > .row > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
    min-width: 0;
}

/* Grid/table wrappers keep their own scroll container instead of pushing the
   document wider. */
body.inside-aside .content > .table-responsive,
body.inside-header .content > .table-responsive {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
 * 2. #firstnav tab strip geometry
 *
 * .tt-tabbar reserves --tt-primary-w via margin-left, but theme.css sets
 * body#tabs #firstnav { width:100% } which resolves against 100% of the body
 * (1440) and then adds the 224px margin -> right edge at 1664.
 * ------------------------------------------------------------------------ */

body#tabs #firstnav.tt-tabbar {
    box-sizing: border-box;
    width: calc(100% - var(--tt-primary-w));
    height: var(--tt-tabbar-h);
    margin-left: var(--tt-primary-w);
    overflow: visible;
}

body#tabs.tt-has-secondary #firstnav.tt-tabbar {
    width: calc(100% - var(--tt-primary-w) - var(--tt-secondary-w));
    margin-left: calc(var(--tt-primary-w) + var(--tt-secondary-w));
}

body#tabs.sidebar-collapse #firstnav.tt-tabbar {
    width: 100%;
    margin-left: 0;
}

body#tabs #firstnav.tt-tabbar .nav-addtabs {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

@media (max-width: 900px) {
    body#tabs #firstnav.tt-tabbar,
    body#tabs.tt-has-secondary #firstnav.tt-tabbar {
        width: 100%;
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
 * 3. Layer header + window controls
 *
 * FastAdmin draws setwin glyphs with the iconfont at 18px, but theme.css also
 * switches the container to grid, which stacks the 32px buttons vertically.
 * Here the container is an inline flex row and every glyph is drawn with CSS
 * boxes/lines only — no iconfont, no FontAwesome, so there is no code-mix
 * "tofu" risk. Native layer click handlers and classes stay untouched:
 * .layui-layer-close1 / .layui-layer-maxmin keep working, .layui-layer-min and
 * .layui-layer-max stay hidden exactly as FastAdmin ships them.
 * ------------------------------------------------------------------------ */

/* Header: 20px top + 26px line + 18px bottom = 64px, title 18px/600. */
.layui-layer-fast.layui-layer .layui-layer-title {
    box-sizing: border-box;
    height: 64px;
    padding: 20px 122px 18px 24px;
    color: var(--tt-heading, #123b33) !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #fff !important;
    border-bottom: 1px solid var(--tt-border, #e4ebe7);
}

.layui-layer-fast.layui-layer .layui-layer-setwin,
.layui-layer-fast.layui-layer .layui-layer-title ~ .layui-layer-setwin {
    position: absolute;
    top: 0;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: auto;
    height: 64px;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.layui-layer-fast.layui-layer .layui-layer-setwin > a,
.layui-layer-fast.layui-layer .layui-layer-title ~ .layui-layer-setwin > a {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    color: #63766b;
    line-height: 1;
    text-align: center;
    background: transparent !important;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

/* Kill both the theme FontAwesome glyph and backend.css's iconfont glyph. */
.layui-layer-fast.layui-layer .layui-layer-setwin > a:after,
.layui-layer-fast.layui-layer .layui-layer-setwin > a:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    box-sizing: border-box;
    margin: 0;
    font-family: inherit;
    background: currentColor;
    border: 0;
    transform: translate(-50%, -50%);
}

/* close: two 14px diagonals forming an X */
.layui-layer-fast.layui-layer .layui-layer-setwin .layui-layer-close1:before {
    width: 14px;
    height: 2px;
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
}
.layui-layer-fast.layui-layer .layui-layer-setwin .layui-layer-close1:after {
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* minimize: a single 12px bar */
.layui-layer-fast.layui-layer .layui-layer-setwin .layui-layer-min:before {
    width: 12px;
    height: 2px;
    border-radius: 1px;
}
.layui-layer-fast.layui-layer .layui-layer-setwin .layui-layer-min:after {
    content: "";
    display: none;
}

/* maximize: a 12px square outline */
.layui-layer-fast.layui-layer .layui-layer-setwin .layui-layer-max:before {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 2px;
}
.layui-layer-fast.layui-layer .layui-layer-setwin .layui-layer-max:after {
    content: "";
    display: none;
}

/* restore (maxmin): two overlapping squares, lower-right one filled */
.layui-layer-fast.layui-layer .layui-layer-setwin .layui-layer-maxmin:before {
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 2px;
    transform: translate(-50%, -50%) translate(-2px, -2px);
}
.layui-layer-fast.layui-layer .layui-layer-setwin .layui-layer-maxmin:after {
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 1px;
    transform: translate(-50%, -50%) translate(2px, 2px);
}

/* FastAdmin hides min/max by default; keep that. maxmin must stay usable when
   layer actually renders it (maxmin:true), so do not blanket display:none. */
.layui-layer-fast.layui-layer .layui-layer-setwin .layui-layer-maxmin {
    display: inline-flex;
}

.layui-layer-fast.layui-layer .layui-layer-setwin > a:hover,
.layui-layer-fast.layui-layer .layui-layer-setwin > a:focus {
    color: var(--tt-primary-hover, #126d57);
    background: #f0f5f2 !important;
    outline: none;
}

.layui-layer-fast.layui-layer .layui-layer-setwin > a:focus-visible {
    outline: 2px solid rgba(22, 130, 104, 0.45);
    outline-offset: 1px;
}

/* Keep the (rare) close2 round button from inheriting the 32px flex row. */
.layui-layer-fast.layui-layer .layui-layer-setwin .layui-layer-close2 {
    position: absolute;
    top: -14px;
    right: -14px;
}

/* Layer titles are variable height; layer.js reads outerHeight() at open, so
   the 64px header stays compatible with Fast.api.layerfooter / iframe layout. */

/* Minimized layers are a 180px bar: leave room for the two 32px controls so
   the title does not collapse to a single glyph. */
.layui-layer-fast.layui-layer[minLeft] .layui-layer-title {
    padding-right: 86px;
    padding-left: 18px;
}

.layui-layer-fast.layui-layer .layui-layer-content {
    border-radius: 0 0 var(--tt-radius-dialog, 14px) var(--tt-radius-dialog, 14px);
}

.layui-layer-fast.layui-layer iframe {
    display: block;
}

/* --------------------------------------------------------------------------
 * 4. Dialog footer + buttons
 *
 * Footer padding 16/24/20 with 40px / 7px-radius buttons. The attachment
 * picker iframe (general/attachment/select) has its own footer CSS and is not
 * matched here. Table .btn-xs stays compact at 32px.
 * ------------------------------------------------------------------------ */

.layui-layer-fast.layui-layer .layui-layer-btn {
    box-sizing: border-box;
    padding: 16px 24px 20px !important;
    text-align: right !important;
    background: #fff;
    border-top: 1px solid var(--tt-border, #e4ebe7);
    border-radius: 0 0 var(--tt-radius-dialog, 14px) var(--tt-radius-dialog, 14px);
}

.layui-layer-fast.layui-layer .layui-layer-btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 40px;
    margin: 0 0 0 10px;
    padding: 0 20px;
    color: #3d574b !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 38px;
    background: #fff;
    border: 1px solid var(--tt-input-border, #cddbd3);
    border-radius: 7px;
}

.layui-layer-fast.layui-layer .layui-layer-btn a:hover {
    color: var(--tt-primary-hover, #126d57) !important;
    background: var(--tt-hover, #f0f7f3);
    border-color: #a6c9b8;
}

.layui-layer-fast.layui-layer .layui-layer-btn .layui-layer-btn0 {
    color: #fff !important;
    background: var(--tt-primary, #168268);
    border-color: var(--tt-primary, #168268);
}

.layui-layer-fast.layui-layer .layui-layer-btn .layui-layer-btn0:hover {
    color: #fff !important;
    background: var(--tt-primary-hover, #126d57);
    border-color: var(--tt-primary-hover, #126d57);
}

/* Global admin buttons: normal controls 40px, compact table buttons 32px. */
body.inside-aside .btn,
body.inside-header .btn {
    box-sizing: border-box;
    height: 40px;
    padding: 0 16px;
    line-height: 38px;
    border-radius: 7px;
}

body.inside-aside .table .btn-xs,
body.inside-header .table .btn-xs,
body.inside-aside .table-condensed .btn-xs,
body.inside-header .table-condensed .btn-xs,
body.inside-aside .btn-group-xs > .btn,
body.inside-header .btn-group-xs > .btn {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 30px;
    border-radius: 6px;
}

/* Upload / import buttons are marked .btn-danger upstream but they are not
   destructive: neutral-green outline, only inside toolbar/upload scopes. */
body.inside-aside .btn-danger.faupload,
body.inside-header .btn-danger.faupload,
body.inside-aside .faupload.btn-danger,
body.inside-header .faupload.btn-danger,
body.inside-aside .btn-danger.plupload,
body.inside-header .btn-danger.plupload,
body.inside-aside .plupload.btn-danger,
body.inside-header .plupload.btn-danger,
body.inside-aside .btn-importPage.btn-danger,
body.inside-header .btn-importPage.btn-danger,
body.inside-aside .btn-danger.btn-importPage,
body.inside-header .btn-danger.btn-importPage {
    color: var(--tt-primary, #168268) !important;
    background: #fff;
    border-color: #bfd8cc;
}

body.inside-aside .btn-danger.faupload:hover,
body.inside-header .btn-danger.faupload:hover,
body.inside-aside .btn-danger.plupload:hover,
body.inside-header .btn-danger.plupload:hover,
body.inside-aside .btn-danger.btn-importPage:hover,
body.inside-header .btn-danger.btn-importPage:hover {
    color: var(--tt-primary-hover, #126d57) !important;
    background: var(--tt-soft, #f4f7f5);
    border-color: #a6c9b8;
}

/* Real destructive actions stay red (delete buttons in toolbars / tables). */
body.inside-aside .btn-danger.btn-del,
body.inside-header .btn-danger.btn-del,
body.inside-aside .btn-danger.btn-delete,
body.inside-header .btn-danger.btn-delete,
body.inside-aside .btn-danger[data-action="del"],
body.inside-header .btn-danger[data-action="del"] {
    color: #fff !important;
    background: var(--tt-danger, #c44848);
    border-color: var(--tt-danger, #c44848);
}

/* --------------------------------------------------------------------------
 * 5. UMEditor stacking context
 *
 * The editor shell ships inline z-index:999999999, which paints over Layer
 * (19891015). Cap it inside its own stacking context instead of deleting the
 * component: the editor's own dropdown/popup stays inside that context and
 * still renders above page content, while Layer sits above the whole editor.
 * ------------------------------------------------------------------------ */

body.inside-aside .edui-container,
body.inside-header .edui-container {
    position: relative;
    z-index: 2 !important;
    isolation: isolate;
}

body.inside-aside .edui-default .edui-editor,
body.inside-header .edui-default .edui-editor {
    position: relative;
    z-index: auto !important;
}

/* --------------------------------------------------------------------------
 * 6. panel-intro tab strip (attachments / config tabs)
 *
 * backend.css paints inactive tabs #d8e0e6 with higher specificity. Use the
 * body scope to win and switch to a clean green selection. Scoped out of
 * .ta-panel (attachment side categories) so those keep their own styles.
 * ------------------------------------------------------------------------ */

/* Status tabs are owned by tenant-workspace.css. */

/* --------------------------------------------------------------------------
 * 7. Layer footer form groups (iframe dialog content pages)
 * ------------------------------------------------------------------------ */

body.inside-aside .form-group.layer-footer,
body.inside-header .form-group.layer-footer {
    margin-bottom: 0;
    padding: 16px 24px 20px;
    background: #fff;
    border-top: 1px solid var(--tt-border, #e4ebe7);
}

/* SelectPage owns one field outline; its tag list is content, not a second input. */
:is(body.inside-aside, body.inside-header) .sp_container.sp_container_combo {
    min-height: 36px;
    background: #fff;
    border: 1px solid var(--tt-input-border, #dce3df);
    border-radius: 6px;
    box-shadow: none;
}
:is(body.inside-aside, body.inside-header) .sp_container.sp_container_combo > .sp_element_box {
    box-sizing: border-box;
    min-height: 34px;
    margin: 0 32px 0 0;
    padding: 4px 4px 2px 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
:is(body.inside-aside, body.inside-header) .sp_container_combo .sp_element_box > li.input_box {
    height: 26px;
    min-height: 26px;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
:is(body.inside-aside, body.inside-header) .sp_container_combo .sp_element_box input.sp_combo_input {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0;
    line-height: 26px !important;
    background: transparent;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
}
:is(body.inside-aside, body.inside-header) .sp_container_combo .sp_element_box > li.selected_tag {
    box-sizing: border-box;
    height: 24px;
    margin: 0 4px 2px 0;
    padding: 0 24px 0 8px;
    color: #126d57;
    font-size: 13px;
    line-height: 22px;
    background: #eaf5ef;
    border: 1px solid #cce4d7;
    border-radius: 5px;
    box-shadow: none;
    text-overflow: ellipsis;
}
:is(body.inside-aside, body.inside-header) .sp_container_combo .selected_tag .tag_close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 22px;
    margin: 0;
    color: #6b8777;
}
:is(body.inside-aside, body.inside-header) .sp_container_combo .selected_tag .tag_close:hover {
    color: #126d57;
}
:is(body.inside-aside, body.inside-header) .sp_container:not(.sp_container_combo) > input.sp_input {
    height: 36px;
    min-height: 36px;
    padding: 6px 64px 6px 12px;
    line-height: 22px;
    border-radius: 6px;
}
:is(body.inside-aside, body.inside-header) .sp_container > .sp_button {
    width: 32px;
    color: #819087;
    background: transparent;
    border: 0;
}
:is(body.inside-aside, body.inside-header) .sp_container > .sp_button > .sp_caret {
    top: 50%;
    right: 13px;
    width: 6px;
    height: 6px;
    margin: 0;
    border: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
}
:is(body.inside-aside, body.inside-header) .sp_container.sp_container_open > .sp_button > .sp_caret {
    transform: translateY(-15%) rotate(225deg);
}
:is(body.inside-aside, body.inside-header) .sp_container > .sp_clear_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    right: 32px;
    width: 28px;
    margin: 0;
    padding: 0;
    color: #8b9890;
}
:is(body.inside-aside, body.inside-header) .sp_container > .sp_clear_btn.sp_align_right { right: 4px; }
:is(body.inside-aside, body.inside-header) .sp_container > .sp_clear_btn:hover { color: #126d57; }
:is(body.inside-aside, body.inside-header) .sp_container.sp_container_combo:not(.sp_disabled):is(:focus-within, .sp_container_open) {
    border-color: #168268;
    box-shadow: 0 0 0 3px #16826812;
}
:is(body.inside-aside, body.inside-header) .has-error .sp_container.sp_container_combo {
    border-color: var(--tt-danger, #c44848);
}
:is(body.inside-aside, body.inside-header) .sp_container.sp_container_combo.sp_disabled,
:is(body.inside-aside, body.inside-header) .sp_container:not(.sp_container_combo) > input.sp_input:is(:disabled, .sp_input_off) {
    color: #98a49d;
    background: #f5f7f6;
    border-color: #e2e7e4;
    box-shadow: none;
    cursor: not-allowed;
}
:is(body.inside-aside, body.inside-header) .sp_container.sp_disabled > .sp_button { color: #b3bcb7; cursor: not-allowed; }
:is(body.inside-aside, body.inside-header) .sp_container.sp_disabled .selected_tag {
    color: #98a49d;
    background: #edf1ee;
    border-color: #e0e6e2;
}

/* bootstrap-select keeps the same quiet outline and green option feedback. */
:is(body.inside-aside, body.inside-header) .bootstrap-select > .dropdown-toggle .filter-option { line-height: 22px; }
:is(body.inside-aside, body.inside-header) .bootstrap-select > .dropdown-menu {
    width: 100%;
    min-width: 100%;
    margin-top: 6px;
    padding: 5px;
    border: 1px solid var(--tt-input-border, #dce3df);
    border-radius: 8px;
}
:is(body.inside-aside, body.inside-header) .bootstrap-select.open > .dropdown-toggle,
:is(body.inside-aside, body.inside-header) .bootstrap-select > .dropdown-toggle:focus {
    color: var(--tt-text);
    background: #fff;
    border-color: #168268;
    outline: 0 !important;
    box-shadow: 0 0 0 3px #16826812;
}
:is(body.inside-aside, body.inside-header) .bootstrap-select > .dropdown-toggle .caret {
    right: 14px;
    width: 6px;
    height: 6px;
    margin-top: -4px;
    color: #819087;
    border: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
:is(body.inside-aside, body.inside-header) .bootstrap-select.open > .dropdown-toggle .caret {
    margin-top: -1px;
    transform: rotate(225deg);
}
:is(body.inside-aside, body.inside-header) .bootstrap-select .dropdown-menu > li > a {
    min-height: 36px;
    padding: 7px 10px;
    font-size: 14px;
    line-height: 22px;
    border-radius: 5px;
}
:is(body.inside-aside, body.inside-header) .bootstrap-select .dropdown-menu > li:not(.disabled) > a:is(:hover, :focus),
:is(body.inside-aside, body.inside-header) .bootstrap-select .dropdown-menu > li.selected:not(.disabled) > a {
    color: #126d57;
    background: #eaf5ef;
}
:is(body.inside-aside, body.inside-header) .bootstrap-select.disabled > .dropdown-toggle,
:is(body.inside-aside, body.inside-header) .bootstrap-select > .dropdown-toggle:disabled {
    color: #98a49d;
    background: #f5f7f6;
    border-color: #e2e7e4;
    opacity: 1;
}

/* SelectPage can keep its initial sp_input_off class after being re-enabled by
   the subject/category cascade. Only style it disabled when the input is truly disabled. */
:is(body.inside-aside, body.inside-header) .sp_container > input.sp_input.sp_input_off:not(:disabled) {
    color: var(--tt-text, #303a36);
    background: #fff;
    border-color: var(--tt-input-border, #dce3df);
    box-shadow: none;
    cursor: text;
}