/*
 * Copyright (c) 2015 - 2025 by itopia ag, Zurich
 */

:root,
:host {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /*--sl-font-size-small: 0.875rem;*/
    /*font-size: var(--sl-font-size-small);*/

    --isy-color-red: #dc3545;
    --isy-main-nav-height: 58px;

    /*--sl-input-border-color: var(--sl-color-neutral-400);*/
    --sl-input-border-color: #c0c0c0;
}

.h-100 {
    height: 100%;
}

.w-100 {
    width: 100%;
}

.isynth-main-nav {
    top: 0px;
    height: var(--isy-main-nav-height);
    width: 100%;
    background: var(--sl-color-gray-700);
    display: flex;
    justify-content: flex-start;
    align-content: center;
}

.isynth-main-content {
    top: var(--isy-main-nav-height);
    height: calc(100% - var(--isy-main-nav-height) - 30px);
    margin: 15px;
    width: calc(100% - 30px);
    background-color: var(--sl-color-gray-50);
}

.isynth-logo-image {
    height: 85%;
    margin-left: 22px;
    align-self: center;
}

.isynth-logo-text {
    margin-left: 2px;
    align-self: center;
    font-size: 2.3rem;
    font-family: JetBrainsMono-Bold-Italic;
    color: var(--sl-color-amber-400);
}

.isynth-spacer {
    align-self: stretch;
    flex-grow: 1;
}

.isynth-avatar {
    margin-right: 10px;
    align-self: center;
}

.isynth-main-tab-group::part(nav) {
    --track-width: 0px;
}

.isynth-main-nav-item {
    align-self: center;
    padding-left: 15px;
    padding-right: 15px;
}

.isynth-main-nav-text {
    color: var(--sl-color-gray-400);
    font-size: 1.15rem;
}

.isynth-main-tab::part(base) {
    margin-top: 5px;
    font-size: 1.15rem;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: var(--sl-font-weight-normal);
    --sl-color-primary-600: var(--sl-color-amber-600);
}

sl-button.isynth-env-switcher-btn::part(base) {
    color: var(--sl-color-gray-100);
    background-color: var(--isy-color-red);
    border-color: black;
    font-size: 1.0rem;
}

.isynth-card-header [slot='header'] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


sl-card.h-100::part(base) {
    height: 100%;
    --border-color: var(--sl-color-neutral-400);
    --border-width: 0;
}

sl-card::part(header) {
    background-color: var(--sl-color-neutral-100);
    padding: 3px;
    padding-left: 12px;
}

.isynth-toolbar-button::part(base) {
    background-color: var(--sl-color-neutral-100);
}

.isynth-code-editor::part(textarea) {
    font-family: JetBrainsMono-Regular;
    height: 100%;
}

sl-split-panel::part(divider) {
    background-color: var(--sl-color-neutral-0);
}

/*
 * The alerts
 */
.sl-toast-stack {
    top: auto;
    left: auto;
    bottom: 10px;
    right: 10px;
}


sl-alert.alert-info::part(base) {
    border-top-width: 0;
    background-color: var(--sl-color-primary-100);
}

sl-alert.alert-error::part(base) {
    border-top-width: 0;
    background-color: var(--sl-color-danger-100);
}


/*
 * File action styles
 */

.sl-icon-xs {
    height: 18px;
    width: 18px;
    margin-bottom: -4px;
    color: #6A757E;
}

/*
 * Selectable button tags, e.g. for enum values
 */

sl-button.selectable-value::part(base) {
    border-width: 0;
    padding: 1px;
    transition: none;
}

sl-button.selectable-value::part(base):hover {
    border-width: 1px;
    padding: 0;
    transition: none;
}

sl-button.util-browser.selectable-value::part(base) {
    background-color: var(--sl-color-primary-50);
    margin-left: -8px;
}


/*
 * Utility browser style...
 */

sl-tab-group.h-100::part(base) {
    height: 100%;
}

sl-tab-group.util-browser::part(base) {
    border-color: #c0c0c0;  /* Same border color as bootstrap cards */
    border-style: solid;
    border-width: 1px;
    border-radius: 0;
    /*background-color: #f6c5c5;  !* Same border color as bootstrap cards *!*/
}

/* Utility browser tabs: hide active tab indictaotr */
sl-tab-group.util-browser::part(active-tab-indicator) {
    border-width: 0;
}

sl-tab-group.util-browser::part(tabs) {
    background-color: #f7f7f7;  /* The same background color as bootstrap card headers */
    border-color: #c0c0c0;  /* Same border color as bootstrap cards */;
    border-width: 0;
    border-bottom-width: 1px;  /* only show the bottom border... */
    border-style: solid;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

sl-tab-group.util-browser::part(body) {
    height: 100%;
}


sl-tab.util-browser::part(base) {
    padding: 9px;  // The space arount the tab labels...
}

sl-tab-panel.h-100::part(base) {
    height: 100%;
}

sl-tab-panel.util-browser::part(base) {
    display: flex;
    height: 100%;
    /*align-content: space-evenly;*/
    padding-bottom: 0;
}

/*
 * Utility browser table style
 */
table.util-browser {
    border-spacing: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

table.util-browser tr {  /* All table rows of a table with class "util-browser" */
    font-size: var(--sl-font-size-small);
    border-bottom: 1px solid #ddd;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
}

table.util-browser tr:last-child {
    border-bottom: none;
}

table.util-browser td {  /* All cell delimiters of a table with class "util-browser" */
    padding: 5px;
}

.util-browser.pane {
    width: calc(100% - 32px);  /* Full width, reduced by twice the padding */
    padding: 16px;
    border-radius: 8px;
    background-color: var(--sl-color-primary-50);
    margin: 16px;
    font-size: var(--sl-font-size-small);
}

/* Util browsers: Ensure collabsable detail panes */
.util-browser sl-details::part(base) {
    background-color: transparent;
    border-width: 0;
}

.util-browser sl-details::part(header) {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    font-weight: bold;
}

.util-browser sl-details::part(content) {
    padding: 0;
    padding-bottom: 16px;
}

sl-card.info::part(base) {
    background-color: var(--sl-color-primary-50);
    border-style: none;
    margin: 16px;
    font-size: var(--sl-font-size-small);
    color: var(--sl-color-primary-800);
    --border-radius: 8px;
}

sl-card.info::part(body) {
    padding: var(--sl-spacing-medium);
    display: flex;
    justify-content: start;
    align-items: flex-start;
}

sl-tooltip sl-icon {
    padding-right: 8px;
}


sl-input.compact::part(clear-button) {
    /* compact input fields with clear button have a reduced margin for the clear button -> let's fix that. */
    margin-right: 8px;
}

/*
 * Input forms with label on the left... (taken from https://shoelace.style/components/input#customizing-label-position)
 */
.label-on-left {
    --label-width: 5.0rem;
    --gap-width: 1rem;
  }

  .label-on-left + .label-on-left {
    margin-top: var(--sl-spacing-medium);
  }

  .label-on-left::part(form-control) {
    display: grid;
    grid: auto / var(--label-width) 1fr;
    gap: var(--sl-spacing-3x-small) var(--gap-width);
    align-items: center;
  }

  .label-on-left::part(form-control-label) {
    text-align: right;
  }

  .label-on-left::part(form-control-help-text) {
    grid-column-start: 2;
  }


/*
 * These are temporary style changes to mimik bootstrap look and feel.
 * TODO: To be removed once we transition fully to Shoelace... Ralph, 13.01.2025
 */

sl-dialog::part(base) {
    align-items: baseline;
    margin-top: 30px;
}


sl-dialog::part(body) {
    border-top: 1px solid rgba(0,0,0,.2);
    border-bottom: 1px solid rgba(0,0,0,.2);
}

sl-dialog::part(overlay) {
    background-color: rgba(0, 0, 0, 0.5);
}

sl-dialog::part(title) {
    font-weight: 500;
}