/* ============================================================================
   Redesign of the "Object Settings" dialog (Admin.view.main.ObjectSettings).

   Same design language as the Table / Attribute windows
   (resources/tablewindow-redesign.css): white card, teal accent ramp, Poppins
   for headlines and Mulish for body text. Each setting is rendered as an
   option card: check box + plain-language title + the technical flag name as a
   monospace chip + a short explanation.
   ============================================================================ */

body.xadmintool .x-window.settings-window {
    /* ---- design tokens (identical to tablewindow-redesign.css) ---- */
    --xos-white: #FFFFFF;
    --xos-slate-50: #F8F9FA;
    --xos-slate-100: #F2F4F6;
    --xos-slate-200: #E7EAED;
    --xos-slate-300: #D2D7DC;
    --xos-slate-500: #97A2AD;
    --xos-slate-600: #7E8B99;
    --xos-slate-700: #55606C;
    --xos-slate-800: #3C454F;
    --xos-slate-900: #2A3138;

    --xos-accent-50: #F1FBFA;
    --xos-accent-100: #E4F6F5;
    --xos-accent-200: #C0EAE7;
    --xos-accent-400: #68CCC6;
    --xos-accent-500: #589999;
    --xos-accent-700: #3F7373;
    --xos-focus-ring: rgba(88, 153, 153, .55);

    --xos-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --xos-font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --xos-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    font-family: var(--xos-font-body);
    background: var(--xos-white);
    border: 1px solid var(--xos-slate-200) !important;
    border-radius: 14px;
    box-shadow: 16px 16px 22px #a9a9a9;
    overflow: hidden;
}

/* the older "glass" design rendered header and body as two separate floating
   cards - reset both frames so they form one single card again */
body.xadmintool .x-window.settings-window .x-window-body {
    background: var(--xos-white);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* ----------------------------------------------------------------------------
   Title bar
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.settings-window .x-window-header {
    background: var(--xos-white) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--xos-slate-200) !important;
    padding: 12px 16px;
    border-radius: 14px 14px 0 0;
    margin: 0 !important;
    box-shadow: none !important;
}
body.xadmintool .x-window.settings-window .x-window-header .x-title-text {
    font-family: var(--xos-font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--xos-slate-900);
    letter-spacing: -.01em;
}
body.xadmintool .x-window.settings-window .x-window-header .x-title-text strong {
    color: var(--xos-accent-700);
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Object name + intro text
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.settings-window .xosNameField .x-form-item-label-inner {
    font-family: var(--xos-font-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--xos-slate-600);
    padding-top: 8px;
}
body.xadmintool .x-window.settings-window .xosNameField .x-form-text {
    font-family: var(--xos-font-body);
    font-size: 14px;
    color: var(--xos-slate-900);
}

body.xadmintool .x-window.settings-window .xosIntro {
    font-family: var(--xos-font-body);
    font-size: 12px;
    line-height: 1.45;
    color: var(--xos-slate-600);
    background: var(--xos-slate-50);
    border: 1px solid var(--xos-slate-200);
    border-radius: 10px;
    padding: 8px 10px;
}

/* ----------------------------------------------------------------------------
   Section headline ("Memory & speed", "Object key")
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.settings-window .xosSection {
    font-family: var(--xos-font-display);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--xos-slate-500);
    border-bottom: 1px solid var(--xos-slate-200);
    padding-bottom: 6px;
}

/* ----------------------------------------------------------------------------
   Option cards (one per flag): check box + plain language title + technical
   flag name + short explanation. Rendered as containers, because the check box
   layout only reserves a single text line for its own boxLabel.
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.settings-window .xosOption {
    background: var(--xos-white);
    border: 1px solid var(--xos-slate-200);
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
body.xadmintool .x-window.settings-window .xosOption:hover,
body.xadmintool .x-window.settings-window .xosOption.xosOptionChecked {
    border-color: var(--xos-accent-400);
    background: var(--xos-accent-50);
}
body.xadmintool .x-window.settings-window .xosOption .x-form-item-body,
body.xadmintool .x-window.settings-window .xosOption .x-form-cb-wrap {
    height: auto !important;
}
body.xadmintool .x-window.settings-window .xosOption .x-form-checkbox {
    margin-top: 1px;
}
body.xadmintool .x-window.settings-window .xosOption.xosOptionChecked .x-form-checkbox {
    color: var(--xos-accent-500);
}

body.xadmintool .x-window.settings-window .xosOptText {
    font-family: var(--xos-font-body);
    color: var(--xos-slate-700);
}
body.xadmintool .x-window.settings-window .xosOptTitle {
    display: inline;
    font-family: var(--xos-font-display);
    font-size: 13px;
    font-weight: 600;
    color: var(--xos-slate-900);
    letter-spacing: -.01em;
    margin-right: 7px;
}
/* the technical name of the flag - shown for users who know the config files */
body.xadmintool .x-window.settings-window .xosOptFlag {
    display: inline-block;
    font-family: var(--xos-font-mono);
    font-size: 10px;
    color: var(--xos-slate-600);
    background: var(--xos-slate-100);
    border: 1px solid var(--xos-slate-200);
    border-radius: 999px;
    padding: 0 7px;
    vertical-align: 1px;
    white-space: nowrap;
}
body.xadmintool .x-window.settings-window .xosOptDesc {
    display: block;
    margin-top: 3px;
    font-family: var(--xos-font-body);
    font-size: 12px;
    line-height: 1.45;
    color: var(--xos-slate-600);
}

/* "why is this greyed out?" - only shown if the controller added xosOptionDisabled */
body.xadmintool .x-window.settings-window .xosOptHint {
    display: none;
}
body.xadmintool .x-window.settings-window .xosOptionDisabled {
    background: var(--xos-slate-50);
    cursor: default;
}
body.xadmintool .x-window.settings-window .xosOptionDisabled:hover {
    border-color: var(--xos-slate-200);
    background: var(--xos-slate-50);
}
body.xadmintool .x-window.settings-window .xosOptionDisabled .xosOptTitle,
body.xadmintool .x-window.settings-window .xosOptionDisabled .xosOptDesc {
    color: var(--xos-slate-500);
}
body.xadmintool .x-window.settings-window .xosOptionDisabled .xosOptHint {
    display: block;
    margin-top: 6px;
    padding: 5px 9px;
    border-left: 3px solid var(--xos-slate-300);
    background: var(--xos-white);
    border-radius: 0 8px 8px 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--xos-slate-600);
}

/* ----------------------------------------------------------------------------
   Button bar
   ---------------------------------------------------------------------------- */
body.xadmintool .x-window.settings-window .x-toolbar-footer {
    background: var(--xos-slate-50) !important;
    border-top: 1px solid var(--xos-slate-200) !important;
    padding: 10px 14px;
}
body.xadmintool .x-window.settings-window .x-toolbar-footer a.x-btn {
    background: var(--xos-white) !important;
    border: 1px solid var(--xos-slate-300) !important;
    border-radius: 999px;
    padding: 4px 14px;
}
body.xadmintool .x-window.settings-window .x-toolbar-footer a.x-btn .x-btn-inner {
    font-family: var(--xos-font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--xos-slate-700) !important;
}
body.xadmintool .x-window.settings-window .x-toolbar-footer a.x-btn .x-btn-icon-el {
    color: var(--xos-slate-500) !important;
    font-size: 13px;
}
body.xadmintool .x-window.settings-window .x-toolbar-footer a.x-btn:hover {
    background: var(--xos-accent-50) !important;
    border-color: var(--xos-accent-400) !important;
}
body.xadmintool .x-window.settings-window .x-toolbar-footer a.x-btn:hover .x-btn-inner,
body.xadmintool .x-window.settings-window .x-toolbar-footer a.x-btn:hover .x-btn-icon-el {
    color: var(--xos-accent-700) !important;
}
body.xadmintool .x-window.settings-window .x-toolbar-footer a.x-btn.x-btn-focus {
    box-shadow: 0 0 0 3px var(--xos-focus-ring);
}

/* ----------------------------------------------------------------------------
   Dark theme (body.oe-theme-dark, see resources/dark-theme.css)
   ---------------------------------------------------------------------------- */
body.oe-theme-dark.xadmintool .x-window.settings-window,
body.oe-theme-dark .x-window.settings-window {
    --xos-white: #15181e;
    --xos-slate-50: #1c2029;
    --xos-slate-100: #1f2937;
    --xos-slate-200: #262a33;
    --xos-slate-300: #2f3542;
    --xos-slate-500: #93a4bd;
    --xos-slate-600: #d7dae0;
    --xos-slate-700: #e6e8eb;
    --xos-slate-800: #f2f3f5;
    --xos-slate-900: #f2f3f5;

    --xos-accent-50: #1b2630;
    --xos-accent-400: #5b8cff;
    --xos-accent-500: #5b8cff;
    --xos-accent-700: #8fb3ff;
    --xos-focus-ring: rgba(91, 140, 255, .45);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}