/* ============================================================================
   "Object View Builder" (Admin.view.main.NewOrLoad) - the modal the tool starts
   with.

   Like the AI Import Wizard the dialog is one block of HTML rendered by
   Admin.view.main.NewOrLoadController; this file styles it completely, the Ext
   window underneath only contributes its positioning and its modal mask.

   Design tokens identical to aiimportwizard-redesign.css.
   ============================================================================ */

body.xadmintool .x-window.nol-window {
    --nol-white: #FFFFFF;
    --nol-slate-50: #F8F9FA;
    --nol-slate-100: #F2F4F6;
    --nol-slate-200: #E7EAED;
    --nol-slate-300: #D2D7DC;
    --nol-slate-500: #97A2AD;
    --nol-slate-600: #7E8B99;
    --nol-slate-700: #55606C;
    --nol-slate-800: #3C454F;
    --nol-slate-900: #2A3138;

    --nol-teal-50: #F1FBFA;
    --nol-teal-100: #E4F6F5;
    --nol-teal-200: #C0EAE7;
    --nol-teal-500: #589999;
    --nol-teal-600: #4A8686;
    --nol-teal-700: #3F7373;

    --nol-font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nol-font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nol-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* the list of recent files scrolls once it would grow past this */
    --nol-recents-max: 230px;

    background: var(--nol-white);
    border: none;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(42, 49, 56, .35);
    overflow: hidden;
    font-family: var(--nol-font-body);
}

body.xadmintool .x-window.nol-window > .x-window-body,
body.xadmintool .x-window.nol-window .x-autocontainer-outerCt,
body.xadmintool .x-window.nol-window .x-autocontainer-innerCt {
    background: transparent;
    border: none;
    padding: 0;
}

/* ----------------------------------------------------------------------------
   Header: product mark, title, tagline
   ---------------------------------------------------------------------------- */
body.xadmintool .nol-window .nolHeader {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--nol-slate-200);
    background: linear-gradient(180deg, #EDF5F4, #F9FBFB);
}

body.xadmintool .nol-window .nolMark {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nol-teal-600);
    color: #FFFFFF;
}
body.xadmintool .nol-window .nolMark .nolIcon {
    width: 21px;
    height: 21px;
}

body.xadmintool .nol-window .nolTitle {
    display: block;
    font-family: var(--nol-font-head);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    color: var(--nol-slate-900);
}

body.xadmintool .nol-window .nolTagline {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nol-teal-600);
}

/* ----------------------------------------------------------------------------
   Body: the two entry cards, the recent files, the toggles
   ---------------------------------------------------------------------------- */
body.xadmintool .nol-window .nolBody {
    padding: 18px 24px 22px;
}

body.xadmintool .nol-window .nolChoices {
    display: flex;
    gap: 16px;
}

body.xadmintool .nol-window .nolChoice {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--nol-slate-200);
    border-radius: 12px;
    background: var(--nol-white);
    cursor: pointer;
    user-select: none;
    transition: border-color 130ms ease, background-color 130ms ease;
}
body.xadmintool .nol-window .nolChoice:hover {
    border-color: var(--nol-teal-500);
    background: var(--nol-teal-50);
}

/* "New" is the card the dialog recommends: filled with the accent colour instead
   of the white of "Open" */
body.xadmintool .nol-window .nolChoice.nolChoicePrimary {
    border-color: var(--nol-teal-500);
    background: var(--nol-teal-500);
    box-shadow: 0 6px 16px -6px rgba(63, 115, 115, .55);
}
body.xadmintool .nol-window .nolChoice.nolChoicePrimary:hover {
    border-color: var(--nol-teal-600);
    background: var(--nol-teal-600);
}
body.xadmintool .nol-window .nolChoicePrimary .nolChoiceIcon {
    /* the tile keeps its own shade on the filled card */
    background: rgba(255, 255, 255, .22);
    color: #FFFFFF;
}
body.xadmintool .nol-window .nolChoicePrimary .nolChoiceTitle {
    color: #FFFFFF;
}
body.xadmintool .nol-window .nolChoicePrimary .nolChoiceSub {
    color: rgba(255, 255, 255, .82);
}

body.xadmintool .nol-window .nolChoiceIcon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nol-teal-100);
    color: var(--nol-teal-700);
}
body.xadmintool .nol-window .nolChoiceIcon .nolIcon {
    width: 17px;
    height: 17px;
}

body.xadmintool .nol-window .nolChoiceTitle {
    display: block;
    font-family: var(--nol-font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--nol-slate-900);
}
body.xadmintool .nol-window .nolChoiceSub {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: var(--nol-slate-600);
}

/* --- "RECENT FILES" + the number of entries --- */
body.xadmintool .nol-window .nolRecentsHead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 20px 0 6px;
}
body.xadmintool .nol-window .nolRecentsLabel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nol-slate-600);
}
body.xadmintool .nol-window .nolRecentsCount {
    font-size: 12px;
    color: var(--nol-slate-500);
}

body.xadmintool .nol-window .nolRecents {
    max-height: var(--nol-recents-max);
    overflow-y: auto;
    overflow-x: hidden;
    /* room for the scrollbar, so the "Public" column does not touch it */
    padding-right: 4px;
}

/* a thin scrollbar instead of the broad default one */
body.xadmintool .nol-window .nolRecents::-webkit-scrollbar {
    width: 8px;
}
body.xadmintool .nol-window .nolRecents::-webkit-scrollbar-thumb {
    background: var(--nol-slate-300);
    border-radius: 999px;
}
body.xadmintool .nol-window .nolRecents::-webkit-scrollbar-track {
    background: transparent;
}

body.xadmintool .nol-window .nolRecent {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    user-select: none;
}
body.xadmintool .nol-window .nolRecent:hover {
    background: var(--nol-slate-50);
}
body.xadmintool .nol-window .nolRecentType {
    flex: none;
    padding: 3px 8px;
    border-radius: 7px;
    background: var(--nol-teal-100);
    color: var(--nol-teal-700);
    font-family: var(--nol-font-mono);
    font-size: 11px;
    line-height: 1.4;
}

body.xadmintool .nol-window .nolRecentName {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--nol-slate-800);
}

body.xadmintool .nol-window .nolRecentOwner {
    flex: none;
    font-size: 12px;
    color: var(--nol-slate-500);
}

/* --- the first start: no recent files, so the box says what to do instead --- */
body.xadmintool .nol-window .nolEmpty {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--nol-teal-200);
    border-radius: 12px;
    background: var(--nol-teal-50);
}

body.xadmintool .nol-window .nolEmptyIcon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--nol-teal-100);
    color: var(--nol-teal-600);
}
body.xadmintool .nol-window .nolEmptyIcon .nolIcon {
    width: 15px;
    height: 15px;
}

body.xadmintool .nol-window .nolEmptyText {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

body.xadmintool .nol-window .nolEmptyTitle {
    font-family: var(--nol-font-head);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nol-teal-700);
}

body.xadmintool .nol-window .nolEmptyBody {
    font-size: 13px;
    line-height: 1.55;
    color: var(--nol-slate-700);
}
body.xadmintool .nol-window .nolEmptyBody b {
    font-weight: 700;
    color: var(--nol-slate-900);
}

/* --- the two options --- */
body.xadmintool .nol-window .nolSettings {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--nol-slate-200);
    border-radius: 12px;
    background: var(--nol-slate-50);
}

body.xadmintool .nol-window .nolSetting {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
body.xadmintool .nol-window .nolSetting + .nolSetting {
    margin-top: 12px;
}

body.xadmintool .nol-window .nolToggle {
    flex: none;
    position: relative;
    width: 40px;
    height: 22px;
    margin-top: 1px;
    border-radius: 999px;
    background: var(--nol-slate-300);
    cursor: pointer;
    transition: background-color 140ms ease;
}
body.xadmintool .nol-window .nolToggle.is-on {
    background: var(--nol-teal-500);
}
body.xadmintool .nol-window .nolToggle.is-disabled {
    opacity: .45;
    cursor: default;
}
body.xadmintool .nol-window .nolToggleKnob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(42, 49, 56, .3);
    transition: left 140ms ease;
}
body.xadmintool .nol-window .nolToggle.is-on .nolToggleKnob {
    left: 21px;
}

body.xadmintool .nol-window .nolSettingText {
    font-size: 13px;
    line-height: 1.45;
    color: var(--nol-slate-700);
}
body.xadmintool .nol-window .nolSettingText b {
    font-weight: 700;
    color: var(--nol-slate-900);
}

/* ----------------------------------------------------------------------------
   Dark theme (body.oe-theme-dark, see resources/dark-theme.css)
   ---------------------------------------------------------------------------- */
body.oe-theme-dark.xadmintool .x-window.nol-window,
body.oe-theme-dark .x-window.nol-window {
    --nol-white: #22282E;
    --nol-slate-50: #262D34;
    --nol-slate-100: #2E353C;
    --nol-slate-200: #39424A;
    --nol-slate-300: #46505A;
    --nol-slate-500: #8593A0;
    --nol-slate-600: #9AA7B3;
    --nol-slate-700: #BAC4CD;
    --nol-slate-800: #D6DDE3;
    --nol-slate-900: #EDF1F4;

    --nol-teal-50: #22322F;
    --nol-teal-100: #2A403C;
    --nol-teal-200: #37544F;
    --nol-teal-600: #589999;
    --nol-teal-700: #9FD0CC;

    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

body.oe-theme-dark .nol-window .nolHeader {
    background: linear-gradient(180deg, #273230, #22282E);
}
body.oe-theme-dark .nol-window .nolTagline {
    color: #9FD0CC;
}
body.oe-theme-dark .nol-window .nolChoice.nolChoicePrimary {
    box-shadow: none;
}