/* Shared module editing surface. Stored column widths and margins stay intact. */
.nc2-edit-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--nc2-edit-panel-z, 1100) - 1);
    background: rgb(15 23 42 / 42%);
}

.nc2-edit-panel {
    position: fixed;
    inset: 16px 0 auto;
    z-index: var(--nc2-edit-panel-z, 1100);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: min(720px, calc(100vw - 32px));
    min-width: 0;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: 0 auto;
    padding: 0;
    border: 1px solid #bac7d8;
    border-radius: 12px;
    background: #fff;
    color: #202b3c;
    box-shadow: 0 18px 64px rgb(15 23 42 / 28%);
    font: 14px/1.6 "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    text-align: left;
    isolation: isolate;
}

.nc2-edit-panel--article { width: min(1060px, calc(100vw - 32px)); }
.nc2-edit-panel:where(:has(.journal_grid_table)) { width: min(900px, calc(100vw - 32px)); }
.nc2-edit-panel[hidden], .nc2-edit-backdrop[hidden], .nc2-edit-panel [hidden] { display: none !important; }

.nc2-edit-panel__bar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    box-sizing: border-box;
    min-height: 60px;
    padding: 10px 16px;
    border-bottom: 1px solid #dce4ee;
    border-radius: 11px 11px 0 0;
    background: #f5f8fc;
    color: #202b3c;
}

.nc2-edit-panel__bar h2 {
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #202b3c;
    font: 700 17px/1.5 "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    white-space: normal;
    overflow-wrap: anywhere;
}

.nc2-edit-panel__actions {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    margin-left: auto;
}

.nc2-edit-panel__body {
    container: nc2-edit-panel-body / inline-size;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 16px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: #fff;
    color: #202b3c;
}

.nc2-edit-panel__content {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Keep the actual cell in the DOM so Ajax and block-style saves use the same parent. */
.nc2-edit-panel__content > .cell {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.nc2-edit-panel__content :is(.module_box, table.blockstyle_0, table.th_hina, table.th_none),
.nc2-edit-panel__content table[id^="_theme_top"]:has([id^="_journal_list"]) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed;
}

.nc2-edit-panel__content :is(.content, .outerdiv, .th_hina_content, .th_none_content) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.nc2-edit-panel__content .nc2-module-toolbar { display: none !important; }
.nc2-edit-panel__content :is(._block_title_event_abs, ._block_title_abs, ._move_bar) { cursor: default; }
.nc2-edit-panel__content .nc2-tabs { display: flex; flex-wrap: wrap; max-width: 100%; }
.nc2-edit-panel__content .nc2-tabs [role="tab"] { min-height: 40px; white-space: normal; }
.nc2-edit-panel__content :is(input, select, textarea):not(.nc2-editor *) { box-sizing: border-box; max-width: 100%; }
.nc2-edit-panel__content :is(input[type="text"], input[type="password"], input[type="email"], input[type="url"], textarea):not(.nc2-editor *) { min-width: 0; }
.nc2-edit-panel__content .nc2-form-layout { width: 100%; max-width: 100%; }
/* Legacy action labels must fit at the mobile input font size. The minimum
   overrides the generic responsive input reset without changing touch heights. */
:is(.nc2-edit-panel__content, .nc2-window) :is(button, input[type="button"], input[type="submit"], input[type="reset"]).btn-width:not(.nc2-editor *) {
    width: auto;
    min-width: 75px !important;
    white-space: nowrap;
}
/* Keep the journal header, all management links and the native scrollbar in
   one horizontal viewport. Widths apply before LiveGrid measures its columns;
   row heights and logical page size remain under LiveGrid's control. Apply
   before a directly loaded edit view moves into the panel, too. */
[id^="_journal_list"] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
[id^="_journal_list"] :is(.grid_header, .journal_grid_table) {
    width: 736px;
    min-width: 736px;
    max-width: none;
    table-layout: fixed;
}
[id^="_journal_list"] .grid_change_disp { width: 24px; }
[id^="_journal_list"] .grid_name { width: 200px; }
[id^="_journal_list"] .grid_operate { width: 72px; }
[id^="_journal_list"] .grid_creator { width: 96px; }
[id^="_journal_list"] .grid_create_date { width: 92px; }
[id^="_journal_list"] .journal_grid_manage { width: 216px; }
[id^="_journal_list"] :is(th, td.grid_row, tr.grid_row > td) { white-space: nowrap; }
[id^="_journal_list"] :is(.grid_name, .grid_creator) > div { text-overflow: ellipsis; }

/* Journal settings must shrink even when fallback fonts widen its labels. */
.nc2-edit-panel__content form[id^="journal_form"] fieldset { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; }
.nc2-edit-panel__content form[id^="journal_form"] .nc2-form-layout > tbody > tr > th { white-space: normal; overflow-wrap: anywhere; }
.nc2-edit-panel__content .circular_mail_notice { box-sizing: border-box; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.nc2-edit-panel__content .nc2-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
.nc2-edit-panel__content .nc2-editor { min-width: 0; max-width: 100%; }
.nc2-edit-panel__content .jodit-container { box-sizing: border-box; min-width: 0; max-width: 100%; }

/* The article area has its own height; wrapping toolbars must not consume it.
   Jodit's size plugin writes inline heights to all three layers, so override
   those together. Fullscreen keeps the editor's own viewport calculation. */
.nc2-edit-panel__content .jodit-container:not(.jodit_fullsize) {
    --nc2-editing-height: clamp(280px, 40dvh, 420px);
    --jd-jodit-workplace-height: var(--nc2-editing-height) !important;
    height: auto !important;
    max-height: none !important;
}
.nc2-edit-panel__content .jodit-container:not(.jodit_fullsize) :is(.jodit-workplace, .jodit-jodit__workplace-slot_center_true) {
    height: var(--nc2-editing-height) !important;
    min-height: 280px !important;
    max-height: var(--nc2-editing-height) !important;
}
.nc2-edit-panel__content .jodit-container:not(.jodit_fullsize) .jodit-workplace > :is(.jodit-wysiwyg, .jodit-wysiwyg_iframe, .jodit-source) {
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    overflow: auto;
}

.nc2-edit-panel__footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    box-sizing: border-box;
    min-height: 60px;
    padding: 10px 16px;
    border-top: 1px solid #dce4ee;
    border-radius: 0 0 11px 11px;
    background: #f5f8fc;
    color: #202b3c;
}

.nc2-edit-panel :is(.nc2-edit-panel__bar, .nc2-edit-panel__footer) button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 40px;
    max-width: 100%;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #a8b8cd;
    border-radius: 6px;
    background: #fff;
    color: #233b5c;
    box-shadow: none;
    font: 600 14px/1.5 "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.nc2-edit-panel :is(.nc2-edit-panel__bar, .nc2-edit-panel__footer) button:hover { background: #e9f0fa; color: #172d4a; }
.nc2-edit-panel :is(.nc2-edit-panel__bar, .nc2-edit-panel__footer) button:focus-visible { outline: 3px solid #2563b9; outline-offset: 2px; }
.nc2-edit-panel :is(.nc2-edit-panel__bar, .nc2-edit-panel__footer) button:disabled { opacity: .5; cursor: wait; }
.nc2-edit-panel .nc2-edit-panel__footer :is([data-nc2-edit-panel-save], .nc2-edit-panel__save) { border-color: #294f7f; background: #294f7f; color: #fff; }
.nc2-edit-panel .nc2-edit-panel__footer :is([data-nc2-edit-panel-save], .nc2-edit-panel__save):hover { border-color: #1d3c64; background: #1d3c64; color: #fff; }
.nc2-edit-panel [data-nc2-edit-panel-preview][aria-pressed="true"] { border-color: #2563b9; background: #e6effb; color: #173c70; }
.nc2-edit-panel [data-nc2-edit-panel-size] { color: #52657f; font-size: 12px; line-height: 1.5; }

.nc2-edit-panel__preview {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #d3dfed;
    border-radius: 8px;
    background: #f5f8fc;
    color: #233b5c;
    overflow-x: auto;
}

.nc2-edit-panel__preview iframe {
    display: block;
    box-sizing: border-box;
    max-width: none;
    min-height: 220px;
    margin: 8px auto 0;
    border: 1px solid #ccd7e5;
    background: #fff;
}

/* This depends on the editing space, not the browser's full width. */
@container nc2-edit-panel-body (max-width: 600px) {
    .nc2-edit-panel__content .nc2-form-layout,
    .nc2-edit-panel__content .nc2-form-layout > tbody { display: block; box-sizing: border-box; width: 100% !important; min-width: 0; }
    .nc2-edit-panel__content .nc2-form-layout > tbody > tr:not(.display-none):not([hidden]) { display: block; }
    .nc2-edit-panel__content .nc2-form-layout > tbody > tr > :is(th, td) { display: block; box-sizing: border-box; width: 100% !important; min-width: 0; padding: 8px; white-space: normal; overflow-wrap: anywhere; }
    .nc2-edit-panel__content .nc2-form-layout > tbody > tr > th { padding-bottom: 4px; text-align: left; }
    .nc2-edit-panel__content .nc2-form-layout > tbody > tr > td { padding-top: 4px; }
}

@media (max-width: 600px) {
    .nc2-edit-panel, .nc2-edit-panel--article {
        inset: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
    }
    .nc2-edit-panel__bar { gap: 6px 10px; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); border-radius: 0; }
    .nc2-edit-panel__bar h2 { flex-basis: 160px; font-size: 16px; }
    .nc2-edit-panel__body { padding: 12px 8px; scrollbar-gutter: auto; }
    .nc2-edit-panel__footer { padding: 8px 12px; padding-bottom: max(8px, env(safe-area-inset-bottom)); border-radius: 0; }
    .nc2-edit-panel :is(.nc2-edit-panel__bar, .nc2-edit-panel__footer) button { min-height: 44px; padding: 8px 12px; }
    .nc2-edit-panel__content .outerdiv { padding: 8px; }
}

@media (forced-colors: active) {
    .nc2-edit-panel { border: 1px solid CanvasText; }
    .nc2-edit-panel :is(.nc2-edit-panel__bar, .nc2-edit-panel__footer) button { border-color: ButtonText; }
}

/* Legacy management windows keep prose readable and data grids scrollable. */
/* LiveGrid uses a fixed row height. Keep its action labels on one line and
   give the header/body the same small amount of extra text space. */
.nc2-window__body:has(.module_current_version) .comp_tabset_content :is(th, td.grid_row):last-child {
    width: max(250px, 20em) !important;
    min-width: 20em;
}
.nc2-window__body:has(.module_current_version) .comp_tabset_content td.grid_row:last-child > div {
    width: auto !important;
}
@media (max-width: 760px) {
    .nc2-window__body :is(.authority_top_description, .share_top_description) {
        box-sizing: border-box;
        width: auto;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .nc2-window__body .nowrap:has(> label > input[name="target_module[]"]) {
        display: flex;
        flex-wrap: wrap;
        gap: 2px 10px;
        white-space: normal;
    }
    .nc2-window__body .nowrap:has(> label > input[name="target_module[]"]) > label {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        max-width: 100%;
        white-space: normal;
    }
    .nc2-window__body .nowrap:has(> label > input[name="target_module[]"]) > br { display: none; }

    .nc2-window__body:has(.share_top_description) .grid_container { max-width: 100%; overflow-x: auto; }

    .nc2-window__body form > table:has(> tbody > tr > .backup_side_top),
    .nc2-window__body form > table > tbody:has(> tr > .backup_side_top),
    .nc2-window__body form > table > tbody > tr:has(> .backup_side_top),
    .nc2-window__body :is(.backup_side_top, .backup_main) {
        display: block;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }
    .nc2-window__body :is(.backup_side_menu, .backup_side_menu_header) { box-sizing: border-box; width: 100%; }
    .nc2-window__body .backup_side_menu { height: auto; max-height: 180px; }
    .nc2-window__body .backup_main { margin-top: 12px; overflow-x: auto; overscroll-behavior-x: contain; }
    .nc2-window__body .backup_main .nc2-table-scroll { max-width: none; overflow: visible; }
    .nc2-window__body .backup_main :is(table.grid, table.grid_header) { width: 701px; min-width: 701px; table-layout: fixed; }
    .nc2-window__body .backup_main :is(th, td.grid_row) { white-space: nowrap; }
}