/* Shared toolbar grid for all connector edit pages (13.10.2026).
 *
 * Every connector had grown its own toolbar: the Dialfire login as a small flat button,
 * the documentation as a large bare link, the disconnect button somewhere else per
 * connector, and the source / target / "+" controls each on their own baseline. This
 * file gives them one grid:
 *
 *   row 1  .ct-actions   [disconnect / connect]                 [Documentation] [Login]
 *   row 2  .ct-main      source column | ⇄ | Dialfire column | +
 *
 * The markup only had to change in the action row; the main row keeps its content and
 * gets the class `ct-main`. Selectors are doubled (.ct-grid.ct-grid) so they win over
 * the per-connector style.css and the inline <style> of each partial, which load later
 * or are more specific.
 *
 * Height: the toolbar used a fixed height per screen width (115-170px) and the content
 * below sat absolutely at the same offset. Neither knew what was actually in the
 * toolbar, so a two-line hint or a notice spilled over the first binding. #connector is
 * a flex column in every connector, so the content now simply follows the toolbar and
 * the toolbar is as tall as its content.
 */

.editor-toolbar.ct-grid.ct-grid {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative !important;
    height: auto !important;
    min-height: 0;
    padding-top: 10px;
    padding-bottom: 4px;
}
.editor-toolbar.ct-grid.ct-grid ~ .editor-content {
    position: relative !important;
    top: auto !important;
}

/* ---------- row 1: actions ---------- */

.ct-grid.ct-grid .ct-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    margin: 0 0 8px 0;
}
.ct-grid.ct-grid .ct-actions-left,
.ct-grid.ct-grid .ct-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.ct-grid.ct-grid .ct-actions-right {
    margin-left: auto;
}
.ct-grid.ct-grid .ct-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    margin: 0;
    padding: 0 14px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
}

/* Dialfire login: the one primary action */
.ct-grid.ct-grid .ct-actions .ct-login {
    background: #cc4a47;
    border-color: #cc4a47;
    color: hsl(0, 0%, 100%);
}
.ct-grid.ct-grid .ct-actions .ct-login:hover,
.ct-grid.ct-grid .ct-actions .ct-login:focus {
    background: #b83f3c;
    border-color: #b83f3c;
    color: hsl(0, 0%, 100%);
}
.ct-grid.ct-grid .ct-actions .ct-login[disabled] {
    background: hsl(0, 0%, 72%);
    border-color: hsl(0, 0%, 72%);
    color: hsl(0, 0%, 100%);
}

/* Documentation: secondary, same size as the login */
.ct-grid.ct-grid .ct-actions .doc-help-link {
    background: hsl(0, 0%, 100%);
    border-color: hsl(211, 28%, 78%);
    color: hsl(210, 28%, 28%);
}
.ct-grid.ct-grid .ct-actions .doc-help-link:hover,
.ct-grid.ct-grid .ct-actions .doc-help-link:focus {
    background: hsl(210, 40%, 97%);
    border-color: hsl(211, 28%, 65%);
    color: hsl(210, 28%, 20%);
}

/* Disconnect / reconnect: present, but not competing with the login */
.ct-grid.ct-grid .ct-actions-left .btn-cta-error {
    background: hsl(0, 0%, 100%);
    border-color: hsl(0, 60%, 82%);
    color: hsl(0, 60%, 42%);
}
.ct-grid.ct-grid .ct-actions-left .btn-cta-error:hover,
.ct-grid.ct-grid .ct-actions-left .btn-cta-error:focus {
    background: hsl(0, 100%, 97%);
    border-color: hsl(0, 60%, 65%);
    color: hsl(0, 60%, 36%);
}
.ct-grid.ct-grid .ct-actions-left .btn-cta:not(.btn-cta-error) {
    background: hsl(0, 0%, 100%);
    border-color: hsl(145, 45%, 70%);
    color: hsl(145, 55%, 28%);
}
.ct-grid.ct-grid .ct-actions-left .btn[disabled] {
    opacity: 0.55;
}

/* ---------- row 2: source | ⇄ | Dialfire | + ---------- */

.ct-grid.ct-grid .toolbar-row.ct-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px;
    column-gap: 16px;
    align-items: start;
    min-height: 0;
    padding: 0 0 8px 0;
}
.ct-grid.ct-grid .ct-main > .content2n {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    margin: 0;
}
/* the control line of both columns has the same height, so source and target controls
   sit on one baseline although their buttons are padded differently per connector */
.ct-grid.ct-grid .ct-main > .content2n > :not(div):not(img):not(i),
.ct-grid.ct-grid .ct-main > .content2n > .btn-group,
.ct-grid.ct-grid .ct-main > .content2n > .inputgroup {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.ct-grid.ct-grid .ct-main > .content2n > .btn-group > .btn,
.ct-grid.ct-grid .ct-main > .content2n > button.btn {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.ct-grid.ct-grid .ct-main > .content2n > ul.dropdown-menu {
    display: none;
    min-height: 0;
}
.ct-grid.ct-grid .ct-main > .content2n.open > ul.dropdown-menu,
.ct-grid.ct-grid .ct-main > .content2n > .open > ul.dropdown-menu {
    display: block;
}
.ct-grid.ct-grid .ct-main > .content2nImage,
.ct-grid.ct-grid .ct-main > .nav {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
}
/* controls stay on one line; hints, notices and everything else take the full width */
.ct-grid.ct-grid .ct-main > .content2n > div:not(.btn-group):not(.inputgroup),
.ct-grid.ct-grid .ct-main > .content2n > .hint {
    flex: 1 0 100%;
    max-width: 100%;
}
.ct-grid.ct-grid .ct-main > .content2n > .hint {
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
}
.ct-grid.ct-grid .ct-main > .content2n > .inputgroup {
    flex: 1 1 160px;
    min-width: 140px;
    margin: 0;
}
.ct-grid.ct-grid .ct-main > .content2nImage {
    padding-top: 8px;
    text-align: center;
}
.ct-grid.ct-grid .ct-main > .content2nImage img {
    max-width: 100%;
}
.ct-grid.ct-grid .ct-main > .nav {
    float: none;
    justify-self: end;
    margin: 0;
    padding-top: 4px;
}
.ct-grid.ct-grid .ct-main > .nav .btn-group {
    float: none;
}