/**
 * Base Site Styles - Actuate Admin
 * CSS Custom Properties + CSS Nesting (Chrome 112+, Firefox 117+, Safari 16.5+)
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
  /* Brand colors */
  --color-primary: #264a87;
  --color-primary-hover: #1f72e2;
  --color-primary-dark: #1e4588;
  --color-primary-darker: #19315a;

  /* Status colors */
  --color-success: #70bf2b;
  --color-success-dark: #5a9922;
  --color-success-light: #cbee87;
  --color-success-light-dark: #8ab85a;
  --color-warning: #efb80c;
  --color-error: #dd4646;
  --color-accent: #ff8400;

  /* Grayscale */
  --color-white: #fff;
  --color-gray-100: #f9f9f9;
  --color-gray-200: #f8f8f8;
  --color-gray-300: #eee;
  --color-gray-400: #e8e8e8;
  --color-gray-500: #ccc;
  --color-gray-600: #aaa;
  --color-gray-700: #666;
  --color-gray-800: #444;
  --color-gray-900: #333;

  /* Semantic colors (light mode defaults) */
  --body-bg: var(--color-white);
  --body-fg: var(--color-gray-900);
  --darkened-bg: var(--color-gray-200);
  --hairline-color: var(--color-gray-400);
  --border-color: var(--color-gray-500);
  --text-muted: var(--color-gray-700);
  --text-quiet: var(--color-gray-600);
  --selection-bg: #ffc;

  /* Spacing & sizing */
  --border-radius: 4px;
  --logo-max-width: 400px;
}

/* ==========================================================================
   Logo & Branding
   ========================================================================== */
.admin-interface #branding h1#site-name {
  & img.logo,
  & img.customer-logo {
    max-width: var(--logo-max-width);
    margin-right: 1em;
    display: inline-block !important;
  }

  & img.logo {
    max-height: 35px;
    margin-top: 3px;
    margin-bottom: 3px;
  }

  & img.customer-logo {
    max-height: 50px;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* layout fix should only apply to the alert screen */
.admin-interface.model-alert .module {
  width: auto;
}

h1#site-name {
  font-size: 20px;

  & > span {
    font-size: 14px;
  }
}

/* ==========================================================================
   Buttons & Links
   ========================================================================== */
.analytics-link {
  font-weight: 300;
  font-size: 15px;
  border-radius: var(--border-radius);
  background-color: var(--color-primary);
  padding: 5px 10px;
  margin-top: 5px;

  &:hover {
    background-color: var(--color-primary-hover);
  }

  & a,
  & a:hover {
    text-decoration: none;
  }

  & .help-icon {
    filter: brightness(3);
    margin-bottom: -1px;
  }
}

a.linkbutton {
  display: inline-block;
  background: var(--color-primary-dark);
  border-radius: var(--border-radius);
  padding: 10px 15px;
  height: 15px;
  line-height: 15px;
  color: var(--color-white) !important;

  &:hover {
    background-color: var(--color-primary-darker);
    color: var(--color-white);
  }

  &:visited,
  &:active {
    color: var(--color-white);
  }
}

a.disabled {
  &:link,
  &:visited {
    color: darkgray;
  }

  &:hover,
  &:active {
    color: var(--color-accent);
  }
}

/* ==========================================================================
   Top Links Navigation
   ========================================================================== */
.top-links,
.top-links-submenu {
  list-style: none;
  padding: 5px 10px;
  border-width: 1px 0;

  & li {
    display: inline;
    padding: 0 10px;
    border-left: solid 1px var(--color-gray-500);

    &:first-child {
      border-left: none;
      padding-left: 0;
    }
  }
}

.top-links {
  background-color: var(--color-gray-100);
  border: solid var(--color-gray-300);

  & li strong {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 14px;
  }
}

.top-links-submenu li {
  font-size: small;
  font-weight: bold;
}

/* ==========================================================================
   Status Icons & Colors
   ========================================================================== */
.ico-green {
  color: var(--color-success);
}

.ico-yellow {
  color: var(--color-warning);
}

.ico-red,
.ico-lightred {
  color: var(--color-error);
}

.ico-lightgreen {
  color: var(--color-success-light);
}

.ico-blue {
  color: var(--color-primary-dark);
}

.neutral-to-positive {
  filter: sepia(1) hue-rotate(35deg) saturate(4.1) brightness(0.6);
}

.icon-status-light-green {
  filter: sepia(0.5) hue-rotate(2deg) saturate(0.8) brightness(1.3);
}

.icon-status-light-red {
  filter: sepia(0.8) hue-rotate(-45deg) saturate(1.5) brightness(1);
  width: 13px;
}

img.offline {
  width: 13px;
}

.related-widget-wrapper-link img {
  pointer-events: none;
}

/* ==========================================================================
   Layout Components
   ========================================================================== */
.wizard {
  display: inline-block;

  & .screenshot {
    border: 1px solid var(--color-gray-500);
    margin: 20px 10px;
  }
}

.wizard-text-input {
  width: 25em;
}

.deploy-row {
  padding: 10px;
}

.timezonewarning {
  display: none;
}

.timelist > li:nth-child(1) {
  display: none;
}

.pagination {
  float: left;
}

.float-box {
  float: left;
  padding: 20px;
}

.panel {
  float: left;
}

fieldset.djn-fieldset {
  padding-top: 1px;
}

[id^="tippy"] {
  white-space: pre-line;
}

.submit-row button {
  height: 35px;
  line-height: 15px;
  margin: 0 0 0 5px;
  padding: 0 15px;
}

.submit-row a {
  align-self: anchor-center;
}

.camera-preview {
  display: flex;
  flex-wrap: wrap;

  & .preview img {
    display: block;
  }

  & .camera-settings {
    float: right;
  }
}

.status-details {
  margin-left: 10px;
  padding: 10px;
  background-color: var(--color-gray-200);
  border-radius: var(--border-radius);

  & ul {
    padding-inline-start: 0;
  }

  & li {
    list-style-type: none;
  }
}

/* ==========================================================================
   Tables & Forms
   ========================================================================== */
tr.checkbox-header th {
  vertical-align: middle;

  & input[type="checkbox"] {
    margin-right: 3px;
    margin-left: -2px;
  }
}

.detail-row,
.detail-content,
.detail-preview {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.detail-row {
  width: 100%;
  flex-flow: row wrap;
}

.detail-content {
  flex: 1;
  margin-right: 10px;
}

.detail-preview {
  flex: 0;
}

.radio-list {
  & li {
    float: left;
    list-style: none;
  }

  & input {
    vertical-align: text-bottom;
    margin: -2px 2px 0 10px;
  }
}

.alerts-list th {
  & a {
    float: right;
    font-size: smaller;
  }

  & img.icon-download {
    padding: 1px 3px;
    filter: brightness(0.4);
    vertical-align: middle;
  }
}

/* Checkbox rows in alert/alarm forms: put checkbox first, label inline beside it */
.alert-form .form-row:has(input[type="checkbox"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;

  & > label {
    order: 2;
    margin-bottom: 0;
  }

  & > div {
    order: 1;
    flex-shrink: 0;
  }
}

/* Space between label and input in alert/alarm form non-checkbox rows */
.alert-form .form-row > label {
  display: block;
  margin-bottom: 2px;
}

.field-ecs_cpu option:disabled {
  display: none;
}

.form-note {
  padding: 3px 10px;
  font-style: italic;
}

.form-row {
  & input[type="text"]:not([class]) {
    min-width: 250px;
  }

  & input[type="radio"] {
    margin-top: -2px;
  }
}

div[id$="stream_raw_metrics-group"] .tabular tr.has_original td {
  padding-top: inherit;
}

/* ==========================================================================
   Auto-add Feature
   ========================================================================== */
.auto-add {
  & .button {
    padding: 4px 8px;
    margin-left: 5px;
  }

  & .search {
    float: right;
  }

  & .search-text {
    float: left;
  }

  & td.auto-add-tools {
    table-layout: auto;
    padding-right: 8px;
    display: table-cell;
  }
}

.autoadd-camera-original-value,
.autoadd-camera-diff-value {
  font-family: monospace;
  white-space: pre;
}

.autoadd-camera-diff label {
  display: block;
  clear: both;
}

/* ==========================================================================
   UI Components
   ========================================================================== */
.ui-banner {
  display: block;
  font-weight: 800;
  font-size: 15px;
  padding: 10px;
  margin: 0 0 10px;
  background-color: var(--selection-bg);
  border-top: 1px solid var(--color-gray-300);
  border-bottom: 1px solid var(--color-gray-300);
  color: var(--color-gray-900);
}

/* Tooltip (Popper.js) */
#tooltip {
  display: inline-block;
  background: var(--color-white);
  color: #643045;
  font-weight: bold;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: var(--border-radius);

  &[data-popper-placement^="top"] > #arrow {
    bottom: -4px;
  }

  &[data-popper-placement^="bottom"] > #arrow {
    top: -4px;
  }

  &[data-popper-placement^="left"] > #arrow {
    right: -4px;
  }

  &[data-popper-placement^="right"] > #arrow {
    left: -4px;
  }
}

#arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  visibility: hidden;

  &::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    visibility: visible;
    content: "";
    transform: rotate(45deg);
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.label {
  font-weight: normal;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 0.5em;
}

.spacer {
  margin-left: 0.5em;
}

.nowrap {
  white-space: nowrap;
}

.align-checkbox {
  & p.help {
    clear: none !important;
    display: block;
    float: left;
    width: auto;
    margin: 9px 0 !important;
    padding-left: 5px !important;
  }

  & div > input[type="checkbox"] {
    display: block;
    margin: 12px 0;
    float: left;
    line-height: 1;
  }
}

/* ==========================================================================
   Django 6.x Form Field Alignment (legend instead of label)
   ========================================================================== */
.aligned fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;

  & legend {
    float: left;
    width: auto;
    min-width: 160px;
    max-width: 300px;
    padding: 4px 10px 0 0;
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
  }

  & > div,
  & > select,
  & > input {
    flex: 1;
    min-width: 0;
  }
}

/* Checkbox label alignment + inline help text */
.aligned .form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  & > label {
    flex: 0 0 160px;
    max-width: 160px;
  }

  & > div {
    flex: 0 0 auto;
  }

  & > p.help {
    flex: 1;
    margin: 0;
    padding: 0;
    margin-left: 8px;
  }
}

/* Checkbox list spacing and alignment */
fieldset > div:has(input[type="checkbox"]),
[id^="id_"] > div:has(input[type="checkbox"]),
[id$="_features"] > div,
[id$="_options"] > div {
  margin-bottom: 5px;

  & > label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;

    & > input[type="checkbox"] {
      margin: 0;
      flex-shrink: 0;
    }
  }
}

/* Radio button list spacing and alignment */
fieldset > div:has(input[type="radio"]),
[id^="id_"] > div:has(input[type="radio"]) {
  margin-bottom: 5px;

  & > label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap !important;
    width: auto !important;
    max-width: none !important;

    & > input[type="radio"] {
      margin: 0;
      flex-shrink: 0;
    }
  }
}

/* ==========================================================================
   Theme Support - Light/Dark Mode
   ========================================================================== */

/* Light mode (default) */
html:not([data-theme="dark"]),
html[data-theme="light"],
html[data-theme=""] {
  color-scheme: light;
}

html[data-theme="light"] {
  & body,
  & #container,
  & #content,
  & #content-main,
  & tr:nth-child(odd),
  & .row-form-errors {
    background-color: var(--color-white) !important;
    color: var(--color-gray-900) !important;
  }

  & tr:nth-child(even),
  & tr:nth-child(even) .errorlist,
  & tr:nth-child(odd) + .row-form-errors,
  & tr:nth-child(odd) + .row-form-errors .errorlist {
    background: var(--color-gray-200) !important;
  }

  & tr.selected,
  & .selected-row {
    background: var(--selection-bg) !important;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  html[data-theme="dark"],
  html[data-theme="dark"] .admin-interface {
    /* Dark mode color palette */
    --dm-bg-primary: #1a1a2e;
    --dm-bg-secondary: #16213e;
    --dm-bg-header: #0c294d;
    --dm-bg-input: #2d2d44;
    --dm-text-primary: #e0e0e0;
    --dm-text-secondary: #d0d0d0;
    --dm-text-muted: #aaa;
    --dm-text-breadcrumb: #c4dce8;
    --dm-link: #aaccff;
    --dm-link-hover: #58a6ff;
    --dm-border: #333;
    --dm-border-light: #444;
    --dm-border-muted: #555;
    --dm-selected: #1e3a5f;
    --dm-banner-bg: #3d3d00;
    --body-medium-color: #999999;

    color-scheme: dark;

    /* Override semantic variables */
    --body-bg: var(--dm-bg-primary);
    --body-fg: var(--dm-text-primary) !important;
    --body-quiet-color: var(--dm-text-muted);
    --body-loud-color: var(--color-white);
    --header-bg: var(--dm-bg-header);
    --header-color: var(--color-white);
    --header-link-color: var(--color-white);
    --breadcrumbs-fg: var(--dm-text-breadcrumb);
    --breadcrumbs-link-fg: var(--dm-text-breadcrumb);
    --breadcrumbs-bg: var(--dm-bg-secondary);
    --link-fg: var(--dm-link);
    --link-hover-color: var(--dm-link-hover);
    --link-selected-fg: var(--dm-link-hover);
    --hairline-color: var(--dm-border);
    --border-color: var(--dm-border-light);
    --error-fg: #ff6b6b;
    --message-success-bg: #264653;
    --message-warning-bg: #5a4a00;
    --message-error-bg: #4a1a1a;
    --darkened-bg: var(--dm-bg-secondary);
    --selected-bg: #264653;
    --selected-row: var(--dm-selected);
    --button-fg: var(--color-white);
    --button-bg: var(--color-primary);
    --button-hover-bg: var(--color-primary-hover);
    --default-button-bg: var(--color-primary);
    --default-button-hover-bg: var(--color-primary-hover);
    --close-button-bg: var(--dm-border-light);
    --close-button-hover-bg: var(--text-muted);
    --delete-button-bg: #8b0000;
    --delete-button-hover-bg: #a00;
    --object-tools-fg: var(--color-white);
    --object-tools-bg: var(--color-primary);
    --object-tools-hover-bg: var(--color-primary-hover);

    /* Primary background elements */
    & body,
    & #container,
    & #content,
    & #content-main,
    & .form-row,
    & #result_list tbody tr,
    & tr:nth-child(odd),
    & .row-form-errors,
    & .calendar td,
    & .calendar th {
      background-color: var(--dm-bg-primary) !important;
    }

    /* Secondary background elements */
    & #nav-sidebar {
      background-color: var(--dm-bg-secondary) !important;
      border-right-color: var(--dm-border) !important;
    }

    & #toggle-nav-sidebar {
      background-color: var(--dm-bg-secondary) !important;
      border-color: var(--dm-border) !important;
    }


    & .status-details,
    & .top-links,
    & .submit-row,
    & #result_list tbody tr:nth-child(odd),
    & tr:nth-child(even),
    & tr:nth-child(even) .errorlist,
    & tr:nth-child(odd) + .row-form-errors,
    & tr:nth-child(odd) + .row-form-errors .errorlist,
    & .breadcrumbs,
    & div.breadcrumbs,
    & .paginator,
    & #changelist-filter,
    & .calendar,
    & .calendarbox,
    & .calendar-shortcuts {
      background-color: var(--dm-bg-secondary) !important;
    }

    /* Changelist styles */
    & #changelist .actions {
      background-color: var(--dm-bg-secondary) !important;
      border-color: var(--dm-border) !important;
      color: var(--dm-text-primary) !important;
    }

    & #changelist .actions label,
    & #changelist .actions span.action-counter,
    & #changelist .actions span.all,
    & #changelist .actions span.clear,
    & #changelist .actions span.question {
      color: var(--dm-text-primary) !important;
    }

    & #changelist-search {
      background-color: var(--dm-bg-secondary) !important;
      border-color: var(--dm-border) !important;
    }

    & #changelist #toolbar {
      background-color: var(--dm-bg-secondary) !important;
      border-color: var(--dm-border) !important;
    }

    & #changelist .results {
      background-color: var(--dm-bg-primary) !important;
    }

    & .changelist-footer {
      background-color: var(--dm-bg-secondary) !important;
      border-color: var(--dm-border) !important;
    }

    & #changelist .changelist-footer .paginator a,
    & #changelist .changelist-footer .paginator a:link,
    & #changelist .changelist-footer .paginator a:visited {
      background-color: var(--dm-bg-input) !important;
      color: var(--dm-link) !important;
    }

    & #result_list thead th,
    & .inline-group thead th,
    & .tabular thead th,
    & th.djn-th,
    & tr.checkbox-header th {
      background-color: var(--dm-bg-header) !important;
      color: var(--dm-text-primary) !important;
      border-color: var(--dm-border) !important;
    }

    /* Inline group add row */
    & .inline-group div.add-row,
    & .inline-group .tabular tr.add-row td,
    & .djn-thead,
    & .djn-add-item {
      background: var(--dm-bg-secondary) !important;
      color: var(--dm-text-muted) !important;
      border-color: var(--dm-border) !important;
    }

    /* Header background */
    & #header,
    & .module caption,
    & .inline-group h2 {
      background-color: var(--dm-bg-header) !important;
    }

    /* Object tools */
    & .object-tools {
      & li {
        background: transparent !important;
      }

      & a {
        background: var(--color-primary) !important;
        border-radius: 15px !important;

        &:hover {
          background: var(--color-primary-hover) !important;
        }
      }
    }

    & .calendar td.today {
      background: var(--color-primary) !important;
    }

    /* Selected states */
    & tr.selected,
    & .selected-row,
    & #changelist-filter li.selected {
      background: var(--dm-selected) !important;
    }

    /* Form inputs */
    & input[type="text"],
    & input[type="password"],
    & input[type="email"],
    & input[type="url"],
    & input[type="number"],
    & textarea,
    & select,
    & #tooltip {
      background-color: var(--dm-bg-input) !important;
      color: var(--dm-text-primary) !important;
      border-color: var(--dm-border-light) !important;
    }

    /* Nav sidebar filter */
    & #nav-sidebar input,
    & #nav-sidebar input.nav-filter,
    & #nav-sidebar input[type="text"] {
      background-color: var(--dm-bg-input) !important;
      color: var(--dm-text-primary) !important;
      border-color: var(--dm-border-light) !important;
      -webkit-text-fill-color: var(--dm-text-primary) !important;
    }

    & #nav-sidebar input::placeholder {
      color: var(--dm-text-muted) !important;
      -webkit-text-fill-color: var(--dm-text-muted) !important;
    }

    /* Select2 dropdowns */
    & .select2-container--default,
    & .select2-container--admin-autocomplete {
      & .select2-selection--single,
      & .select2-selection--multiple {
        background-color: var(--dm-bg-input) !important;
        color: var(--dm-text-primary) !important;
        border-color: var(--dm-border-light) !important;

        & .select2-selection__rendered {
          color: var(--dm-text-primary) !important;
          background-color: var(--dm-bg-input) !important;
        }

        & .select2-selection__choice {
          background-color: var(--dm-bg-header) !important;
          color: var(--dm-text-primary) !important;
          border-color: var(--dm-border-light) !important;
        }

        & .select2-selection__choice__remove {
          color: var(--dm-text-muted) !important;

          &:hover {
            color: var(--color-error) !important;
          }
        }
      }

      & .select2-results__option {
        background-color: var(--dm-bg-input) !important;
        color: var(--dm-text-primary) !important;

        &--highlighted[aria-selected],
        &--selected {
          background-color: var(--color-primary) !important;
          color: var(--color-white) !important;
        }
      }
    }

    & .select2-dropdown,
    & .select2-search__field {
      background-color: var(--dm-bg-input) !important;
      color: var(--dm-text-primary) !important;
      border-color: var(--dm-border-light) !important;
    }

    & .select2-container--admin-autocomplete .select2-selection__arrow {
      background-color: var(--dm-bg-input) !important;
    }

    /* Text colors */
    & body,
    & #container,
    & #content,
    & .ui-banner {
      color: var(--dm-text-primary) !important;
    }

    & .help,
    & .help-tooltip,
    & .top-links li strong {
      color: var(--dm-text-muted) !important;
    }

    & label,
    & legend,
    & .aligned label,
    & .aligned legend,
    & .form-row label,
    & fieldset legend,
    & .module label,
    & .label {
      color: var(--dm-text-secondary) !important;
    }

    & a {
      color: var(--dm-link) !important;

      &:hover {
        color: var(--dm-link-hover) !important;
      }
    }

    & .analytics-link a {
      color: var(--color-white) !important;
    }

    & .deletelink {
      color: var(--color-white) !important;
    }

    & .breadcrumbs,
    & .breadcrumbs a {
      color: var(--dm-text-breadcrumb) !important;
    }

    /* Borders */
    & .form-row,
    & .top-links,
    & hr,
    & .module hr,
    & .submit-row {
      border-color: var(--dm-border) !important;
      border-width: 1px;
    }

    & .top-links li {
      border-color: var(--dm-border-light) !important;
    }

    & .ui-banner {
      background-color: var(--dm-banner-bg) !important;
      border-color: var(--dm-border-muted) !important;
    }

    & fieldset,
    & .module,
    & .form-row,
    & thead th,
    & tbody td,
    & .aligned fieldset,
    & .inline-group,
    & .tabular fieldset {
      border-color: var(--dm-border) !important;
    }

    & * {
      border-color: inherit;
    }

    /* Inherit backgrounds */
    & fieldset,
    & .module table,
    & .aligned label,
    & .form-row > div {
      background: inherit !important;
    }

    /* Override forms.css light backgrounds */
    & .aligned .form-row input,
    & .aligned .form-row select,
    & .aligned .form-row textarea,
    & form input,
    & form select,
    & form textarea,
    & .vTextField,
    & .vURLField,
    & .vIntegerField,
    & .vBigIntegerField {
      background-color: var(--dm-bg-input) !important;
      color: var(--dm-text-primary) !important;
      border-color: var(--dm-border-light) !important;
    }

    /* Override jQuery UI widget styles */
    & .ui-widget-content {
      background: var(--dm-bg-primary) !important;
      color: var(--dm-text-primary) !important;
      border-color: var(--dm-border) !important;
    }

    & .alert-content {
      color: var(--dm-text-primary) !important;
    }
  }
}