/*
 * Tokeny 1:1 z cockpitem (Hadron_Cockpit, view/adminhtml/web/cockpit/src/styles.css, blok .cockpit)
 * — operator ma to samo "przyzwyczajenie" wizualne w obu miejscach. Wartości skopiowane wprost
 * (osobny dokument, osobne drzewo DOM — nie da się odziedziczyć custom properties z /secad).
 */
#hadron-front-editor {
    --bg: #f6f4f0;
    --surface: #ffffff;
    --surface-2: #faf9f6;
    --ink: #16191f;
    --ink-2: #3d434e;
    --muted: #757d8a;
    --line: #e7e3db;
    --line-2: #d7d2c8;
    --accent: #0e8a6f;
    --accent-d: #0a6e58;
    --accent-soft: #e3f3ee;
    --r-s: 8px;
    --r-m: 12px;
    --shadow-1: 0 1px 2px rgba(20, 25, 31, .05), 0 1px 1px rgba(20, 25, 31, .04);
    --shadow-3: 0 18px 50px rgba(20, 25, 31, .16), 0 4px 12px rgba(20, 25, 31, .08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}

#hadron-front-editor .hadron-front-editor-toggle {
    position: fixed;
    top: 40%;
    right: 0;
    z-index: 10000;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 12px 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    border-radius: var(--r-s) 0 0 var(--r-s);
    box-shadow: var(--shadow-1);
    transition: background .12s;
}

#hadron-front-editor .hadron-front-editor-toggle:hover {
    background: var(--accent-d);
}

#hadron-front-editor .hadron-front-editor-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 360px;
    max-width: 90vw;
    height: 100vh;
    overflow-y: auto;
    background: var(--bg);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    padding: 48px 18px 24px;
    z-index: 9999;
    box-sizing: border-box;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.5;
    transform: translateX(100%);
    transition: transform .2s ease-in-out;
}

#hadron-front-editor .hadron-front-editor-panel * {
    box-sizing: border-box;
}

#hadron-front-editor .hadron-front-editor-panel.is-open {
    transform: translateX(0);
}

#hadron-front-editor .hadron-front-editor-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--muted);
}

#hadron-front-editor .hadron-front-editor-close:hover {
    color: var(--ink);
}

#hadron-front-editor .hadron-front-editor-header {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

#hadron-front-editor .hadron-front-editor-variants .hadron-front-editor-header {
    margin-top: 8px;
}

#hadron-front-editor .hadron-front-editor-field {
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    padding: 8px 10px;
    box-shadow: var(--shadow-1);
}

#hadron-front-editor .hadron-front-editor-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin-bottom: 5px;
}

#hadron-front-editor .hadron-front-editor-field input,
#hadron-front-editor .hadron-front-editor-field select,
#hadron-front-editor .hadron-front-editor-field textarea {
    width: 100%;
    border: 1px solid var(--line-2);
    border-radius: var(--r-s);
    padding: 7px 9px;
    font-size: 13px;
    font-family: inherit;
    background: var(--surface);
    color: var(--ink);
}

#hadron-front-editor .hadron-front-editor-field input:focus,
#hadron-front-editor .hadron-front-editor-field select:focus,
#hadron-front-editor .hadron-front-editor-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

#hadron-front-editor .hadron-front-editor-field textarea {
    resize: vertical;
    min-height: 70px;
}

#hadron-front-editor .hadron-front-editor-cacherow {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#hadron-front-editor .hadron-front-editor-cachebtn {
    background: var(--surface);
    border: 1px solid var(--line-2);
    color: var(--ink-2);
    border-radius: var(--r-s);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

#hadron-front-editor .hadron-front-editor-cachebtn:hover {
    border-color: var(--accent);
    color: var(--accent-d);
}

#hadron-front-editor .hadron-front-editor-cachestatus {
    font-size: 12px;
    color: var(--muted);
}

/*
 * Comboboxy = biblioteka Chosen (już w motywie przez Blueskytechco_RokanBase, chosen.css robi
 * strukturę/pozycjonowanie) — tu tylko nadpisujemy KOLORY/RADIUS na tokeny cockpitu, żeby nie
 * wyglądały jak obcy widget.
 */
#hadron-front-editor .chosen-container {
    font-family: inherit;
    font-size: 13px;
}

#hadron-front-editor .chosen-container .chosen-single,
#hadron-front-editor .chosen-container .chosen-choices {
    border: 1px solid var(--line-2);
    border-radius: var(--r-s);
    background: var(--surface);
    box-shadow: none;
    height: auto;
    padding: 6px 9px;
    line-height: 1.4;
}

#hadron-front-editor .chosen-container-active.chosen-with-drop .chosen-single,
#hadron-front-editor .chosen-container-active .chosen-choices {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

#hadron-front-editor .chosen-container .chosen-single div b {
    background: none;
}

#hadron-front-editor .chosen-container .chosen-single div b::before {
    content: '▾';
    color: var(--muted);
}

#hadron-front-editor .chosen-container .chosen-drop {
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    box-shadow: var(--shadow-3);
    background: var(--surface);
}

#hadron-front-editor .chosen-container .chosen-search input {
    border: 1px solid var(--line-2);
    border-radius: var(--r-s);
    background: var(--surface);
    color: var(--ink);
}

#hadron-front-editor .chosen-container .chosen-results li.highlighted {
    background: var(--accent-soft);
    color: var(--accent-d);
}

#hadron-front-editor .chosen-container .chosen-results li.result-selected {
    color: var(--accent-d);
    font-weight: 600;
}

#hadron-front-editor .chosen-container-multi .chosen-choices li.search-choice {
    background: var(--accent-soft);
    color: var(--accent-d);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 2px 20px 2px 9px;
}

#hadron-front-editor .hadron-front-editor-variant {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
}

#hadron-front-editor .hadron-front-editor-variant label {
    flex: 0 0 auto;
    margin: 0;
    font-weight: 700;
    text-transform: none;
    font-size: 12px;
    color: var(--ink-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

#hadron-front-editor .hadron-front-editor-variant input {
    flex: 1 1 auto;
}

#hadron-front-editor .hadron-front-editor-variant a {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-d);
    text-decoration: none;
    white-space: nowrap;
}

#hadron-front-editor .hadron-front-editor-variant a:hover {
    text-decoration: underline;
}