/* App styles */
:root {
  --app-color-done:          #008000; 
  --app-color-todo:          #0052cc;
  --app-color-stop:          #8b0000;
  --app-color-wait:          #ffd43b;
  --app-color-warn:          #ff991f;

  --ds-surface:              var(--aui-page-background);
  --ds_text:                 var(--aui-body-text);
  --ds-background-discovery: var(--aui-message-change-bg-color); 
  --ds-text-discovery:       var(--aui-message-change-text-color);
}

/* add border so stacked dialogs don't blur together  */
.aui-dialog2 {
  border-color: var(--ds-border) !important;
  border-style: solid !important; 
  border-width: 1px !important;
}

.aui-dialog2-xlarge .aui-dialog2-content {
  padding-left: 30px;
  padding-right: 30px;
}

/* reduce whitespace above toolbar buttons */
.aui-toolbar2 .aui-button {
  margin-top: 4px;
  margin-left: 2px;
  margin-right: 2px;
}

/* doc status specific lozenge formatting */
.aui-lozenge.status-span {
  min-width: 84px !important;
  padding-left: 3px;
  padding-right: 3px;
}

/* override aui help */
.aui-help {
  width: auto !important;
  max-width: 1000px !important;
  margin-top: 15px;
  padding-top: 10px;
  padding-bottom: 5px;
}

.aui-help .aui-help-content {
  font-size: 13px ;
  color: var(--ds-text-discovery);
}

.aui-help-content h3, .aui-help-content h4 {
  color: var(--ds-text-discovery) !important;
}
.aui-help-content ul {
  margin-top: 0px;
  padding: 5px 0px 5px 20px;
  list-style-type: circle;
}

/* smaller and subdued icon style for atlassian aui icons like shortcut link icon, etc */
span.icon-subtle {
    color: var(--ds-text-subtle);  
    opacity: 0.6; 
    transform: scale(0.75); 
}

.intro-header h1 {
  font-size: 48px;
  line-height: 60px;
  padding-top: 20px;
}

.intro-header p.subtitle {
  font-size: 24px;
  line-height: 30px;
  padding-bottom: 20px;
}

.main-panel .aui-page-panel-item {
  padding: 20px 40px 20px 0;
  height: 100px;
}

span.hint, td.hint {
  color: var(--ds-text-subtlest);
  font-size: 12px;
  font-style: italic;
  margin-left: 4px;
}

body {
  color: var(--ds-text);
  background-color: transparent !important;
}

.display-none { display: none; }

.done-color { color: var(--ds-text-success); }
.stop-color { color: var(--ds-text-danger); font-weight: 500;}
.todo-color { color: var(--ds-text-information); }
.warn-color { color: var(--ds-text-warning); font-weight: 500;}

div.description {
  color: var(--aui-form-description-text-color);
  font-size: 13px !important;  
  line-height: 20px !important;
}

form.aui {
  margin-top: 10px;
}

form.aui input,
form.aui select {
  border-width: 0.8px !important;
}

/* disabled form items for improved readibility */
form.aui input:disabled,
form.aui textarea:disabled {
  background-color: var(--aui-dialog-bg-color) !important; 
  color: var(--aui-form-field-default-text-color) !important;
  padding-left: 0px !important;
}

h1, h2, h3 {
  font-weight: 400 !important;
}


.release-copy-color {
  color: var(--ds-text-success);
}
.release-copy-stamp { 
  border-radius: 5px; 
  border-width: 1.5px; 
  border-style: dotted; 
  border-color: var(--ds-text-success);
  color: var(--ds-text-success); 
  font-size: 14px;
  font-weight: 500; 
  letter-spacing: 0.1em;
  margin: 0px 2px; 
  padding: 3px 8px; 
}

.working-copy-color {
  color: var(--ds-text-information);
}
.working-copy-stamp { 
  border-radius: 5px; 
  border-width: 1.5px; 
  border-style: dotted; 
  border-color: var(--ds-text-information);
  color: var(--ds-text-information); 
  font-size: 14px;
  font-weight: 500; 
  letter-spacing: 0.1em;
  margin: 0px 2px; 
  padding: 3px 8px; 
}

.selectize-control { 
  margin-bottom: -5px !important;  /* hack to prevent extra space under selectize controls */
}

.selectize-dropdown-content {
  padding-left: 5px !important;     /* add some whitespace to left of drop down select items */
  /* max-height: 200px  DEFAULT */
}

.selectize-input {
  border-color: var(--aui-form-field-border-color) !important;
  min-height: 30px;
  padding: 3px 0px 0px 3px !important;    
}
.selectize-input > div.item {
  margin: 0px 5px 2px 0px;
}

.selectize-control.multi .selectize-input > div {
  margin: 0 2px 3px 2px;
}

/* Styling Tom-Select */
div.ts-wrapper {
  margin-top: -3px; 
}

div.ts-control, div.ts-dropdown {
  background-color: var(--aui-form-field-default-bg-color) !important; 
  color: var(--aui-body-text) !important; 
}
div.ts-controlxx, div.ts-control>div, div.ts-control>input, div.ts-dropdownxx {
  /* background-color: var(--aui-form-field-default-bg-color) !important; */
  background-color: var(--ds-background-input) !important; 
  background-image: none !important;
  color: var(--aui-body-text) !important; 
}
div.ts-control>div.active, div.ts-dropdown div.active {
  background-color: var(--ds-background-selected-pressed) !important; 
  color: var(--aui-body-text) !important; 
}
div.ts-control>div.item a.remove {
  border-left-style: none !important; 
  margin-left: 2px !important;
  padding: 0px 4px 0px 4px !important;
}

.macro-preview-overlay {
  background-color: rgba(100,100,100,0.10); 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

span.description {
  color: var(--aui-form-description-text-color);
}

.subtext {
  font-size: 12px;
  color: var(--ds-text-subtle);
}

.disabled-text {
  color: var(--ds-text-disabled) !important;
}

.hint-text {
  color: var(--ds-text-subtlest) !important;
  font-style: italic;
}

textarea {
  background-color: var(--aui-dialog-bg-color) !important;
  border-width: 0.8px !important;
  color: var(--aui-form-field-default-text-color)!important;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif !important;
  padding: 0px 2px;
  resize: vertical; 
}

textarea:disabled {
  border-color: var(--ds-background-accent-gray-subtler) !important;
  border-width: 1px !important;
}

textarea::placeholder {
  color: var(--ds-text-subtlest) !important;
  font-style: italic;
}

.text-align-center { text-align: center !important; }
.text-align-right  { text-align: right  !important; }

/* override colors in dark mode */
html[data-color-mode="dark"] {
  --aui-body-text: var(--ds-text);

  --aui-button-default-bg-color:    var(--ds-background-neutral);
  --aui-button-default-text-color:  var(--ds-text);
  --aui-button-subtle-text-color:   var(--ds-text);
  --aui-button-default-disabled-text-color: 	var(--ds-text-disabled);

  --aui-dialog-bg-color: var(--ds-surface-overlay);
  --aui-dialog-border-color: var(--ds-border); 
  
  --aui-dropdown-bg-color: var(--ds-surface-overlay);

  --aui-form-description-text-color:    var(--ds-text-subtlest);
  --aui-form-disabled-field-bg-color: 	var(--ds-surface-overlay);   /* var(--ds-text-disabled); */
  --aui-form-disabled-field-text-color: var(--ds-text);  /* default: --ds-text-subtlest */
  --aui-form-field-default-bg-color:    var(--ds-background-input);
  --aui-form-field-default-text-color:  var(--ds-text);
  --aui-form-field-focus-bg-color:      var(--ds-background-input);
  --aui-form-field-border-color:        var(--ds-border-input);
  --aui-form-field-hover-border-color:  var(--ds-border-focused);
  --aui-form-field-hover-bg-color:      var(--ds-background-input-hovered);
  --aui-form-label-text-color:          var(--ds-text-subtle);
  --aui-form-select-bg-color:           var(--ds-background-input);
  --aui-form-select-border-color:       var(--ds-border-input);
  --aui-form-select-hover-bg-color:     var(--ds-border-input);

  --aui-item-text: var(--ds-text);

  --aui-link-color:       var(--ds-link);
  --aui-link-hover-color: var(--ds-link);
  
  --aui-message-change-bg-color:    var(--ds-background-discovery);
  --aui-message-change-icon-color:  var(--ds-icon-discovery);
  --aui-message-change-text-color:  var(--ds-text);
  --aui-message-error-bg-color:     var(--ds-background-danger);
  --aui-message-error-icon-color:   var(--ds-icon-danger);
  --aui-message-error-text-color:   var(--ds-text);
  --aui-message-info-bg-color:      var(--ds-background-information);
  --aui-message-info-icon-color:    var(--ds-icon-information);
  --aui-message-info-text-color:    var(--ds-text);
  --aui-message-success-bg-color:   var(--ds-background-success);
  --aui-message-success-icon-color: var(--ds-icon-success);
  --aui-message-success-text-color: var(--ds-text);
  --aui-message-warning-bg-color:   var(--ds-background-warning);
  --aui-message-warning-icon-color: var(--ds-icon-warning);
  --aui-message-warning-text-color: var(--ds-text);

  --aui-table-row-text-color: var(--ds-text);

  .aui-page-panel {
    background-color: var(--ds-surface); 
  }

  /* Selectize overrides for dark */
  .selectize-control.multi .selectize-input>div {
    background-color: var(--ds-background-neutral);
    color: var(--ds-text);
  }  
  .selectize-dropdown {
    background-color: var(--ds-background-input);
    color: var(--ds-text);
  }
  .selectize-input {
    background-color: var(--ds-background-input);
    border-color: var(--ds-border-input);
    border-width: 1px;
    color: var(--ds-text);
  }
  .selectize-input.disabled {
    /* background-color: var(--ds-text-disabled); */
    background-color: var(--ds-background-neutral);
    color: var(--ds-text);
    /* color: var(--ds-text-disabled);  */
  }
  .selectize-input:focus-within {
    border-color: var(--aui-focus);
  }
  .selectize-input>input {
    background-color: var(--ds-background-input);
    color: var(--ds-text);
  }
  /* custom class selectize-option injected in js render html code */
  .selectize-option {
    background-color: var(--ds-border-input);
    color: var(--ds-text);
  }
  .selectize-option:hover {
    background-color: var(--ds-text-selected);
    color: var(--ds-text-inverse);
  }

} /* end - html dark theme */