/* App styles */

/* default --ds variables that don't exist in original theme for sites/users that don't have dark or light */
:root {
  --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);

  --app-color-done:          #008000; 
  --app-color-todo:          #0052cc;
  --app-color-stop:          #8b0000;
  --app-color-wait:          #ffd43b;
  --app-color-warn:          #ff991f;
  --app-color-ink:           #20295C;
  
}

.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;}


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

/* apply to dialog body to automatically center */
@media screen {
  .dialog-autocenter-body {    
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%) !important;  
  }

  /* apply to body and main dialog section */
  .dialog-xlarge {
    height: 700px !important; 
    margin: 0px !important;
    width: 960px !important;  
  }

  /* apply to body and main dialog section */
  .dialog-large {
    height: 540px !important; 
    margin: 0px !important;
    width: 900px !important;  
  }
}

.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;
}

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

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


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


div.description {
  font-size: 13px !important;
  line-height: 20px !important;
}

span.description {
  font-size: 13px !important;
  color: var(--aui-form-description-text-color);
  padding-left: 8px;
}

/* override aui help */
.aui-help {
  /* max-width: 700px; */
  width: 100% !important;
  padding-bottom: 5px;
}

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

.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: disc;
}

.subtlest-text {
  color: var(--ds-text-subtlest) !important;
  font-size: 13px;
}


/* Tag Layout Styles */
div.tag-container {
  padding: 0px 0px 0px 0px; 
  max-width: 760px;
}

div.tag-line {
  padding: 0px 5px 0px 5px; 
  break-inside: avoid;
}

div.tag-line:first-of-type { 
  margin-top: 0 !important; 
}


div.tag-above {
  min-height: 24px;
  line-height: 24px;  
  padding: 0px 0px 0px 0px !important; 
  margin-bottom: 0 !important;
}

div.tag-above button {
  align-items: center;
  display: flex;
}

div.tag-above div.tag-name {
  color: var(--app-color-ink);
  font-family: "Birthstone", serif;
  font-size: 30px;
  font-weight: 400;
  padding-left: 25px;
  text-indent: -15px;  /* if wrap occurs, the second line will be indented - must be smaller than padding-left */
}

div.tag-above div.tag-date {
  color: var(--app-color-ink);
  font-family: "Birthstone", serif; 
  font-size: 26px; 
  font-weight: 300;
} 

div.tag-above .sign-here-btn {
  font-size:  14px;
  font-weight: 500;
  height: 24px !important;
  margin: 0px 0px 0px -4px;  /* make the tag image align with left edge of div.tag-line  */   
  min-width: 75% !important;
  padding: 0px 5px 0px 0px;  /* T R B L */
  text-align: left !important;   
}

div.tag-above .sign-here-btn:disabled {
  font-size: 14px;
  font-weight: 400;
}

div.tag-below {
  font-size: 12px;
  /* color: var(--ds-text-subtle) !important; */
  vertical-align: text-top !important;
  /* color:#172b4d !important; */
  padding: 0px 0px 0px 0px !important;
  margin-bottom: 0 !important;
}

div.tag-below .aui-buttons {
  align-items: center;
  display: flex;
}


div.tag-below button {
  align-items: center;
  color: var(--subtle-text-color);
  display: flex;
  font-size: 12px;   
  padding: 0px 3px !important; 
  height:18px !important;
  text-align: left;       
}

div.tag-below button .aui-icon {
  transform: scale(0.8);  /* shrink the icon */ 
}

div.tag-above div.tag-col1,
div.tag-above div.tag-col2 {
  border-bottom-style: solid !important;
  border-bottom-width: 1px !important;
}

div.tag-col1 {
  display: block;
  width: 100%;  
}

div.tag-col1 .tag-name-below { 
  display: none;  /* hidden by default.  Override to inline in the page local css */
} 

div.tag-col2 {
  display: none;  /* note hidden by default.  Override to inline-block in the page local css */
  padding-left: 5px; 
  margin-left: 10px;
  width: 0%;
}

span.tag-slug {
  color: var(--ds-text-subtlest) !important;
  display: none;  /* show for debug.  */
}

/* End Tag Styles */

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

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

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

.warning-text {
  color: var(--app-color-warn); 
  font-weight:600;
}

.stop-text {
  color: var(--app-color-stop); 
  font-weight:600;
}

/* override AUI to force iframe page backgrounds to white */
/* body.iframe {
  background-color: white !important;
} */

/* override some colors in dark mode */
html[data-color-mode="dark"] {
  --app-color-ink: #ABB4E2;

  --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); 
  }

  /* aui tables 
  table.aui tr {
    color: var(--ds-text) !important;
    color: pink !important;
  }
  */

  /* Selectize overrides for dark */
  .selectize-control.multi .selectize-input>div {
    background-color: var(--ds-background-neutral);
    background-color: var(--ds-text-selected);
    color: var(--ds-text-inverse);
  }  
  .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);
  }
  .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 */