/*
 * ==========================================================================
 * components.css — Aderian Zelly Component Styles
 * ==========================================================================
 *
 * Reusable UI component styles for the CloudOps application.
 * This file is loaded AFTER design-tokens.css and layout.css so that all
 * CSS custom properties (var(--az-*)) are available.
 *
 * Naming convention:  .az-{component}[-{element}][--{modifier}]
 *   az  = Aderian Zelly prefix
 *
 * Sections:
 *   1. Page Layout Helpers
 *   2. Buttons
 *   3. Tables
 *   4. Modals
 *   5. Filters & Form Inputs
 *   6. Pagination
 *   7. Loading Spinner
 *   8. No-Data / Empty States
 *   9. Charts
 *  10. Status Badges
 *  11. Multi-Select Dropdown
 *  12. Responsive Overrides (≤ 768px)
 * ========================================================================== */

/* ==========================================================================
 * 1. Page Layout Helpers
 * ========================================================================== */

.az-page-container {
  padding: var(--az-space-lg);
  max-width: 100%;
}

.az-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--az-space-lg);
}

.az-page-header h2 {
  margin: 0;
  color: var(--az-text-primary);
  font-family: var(--az-font-family);
  font-weight: var(--az-font-weight-heading);
  font-size: var(--az-font-size-h2);
  line-height: var(--az-line-height-heading);
}

.az-page-header .az-item-count {
  color: var(--az-text-secondary);
  font-size: 14px;
}

/* ==========================================================================
 * 2. Buttons
 * ========================================================================== */

.az-btn-primary,
.az-btn-secondary,
.az-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--az-space-sm);
  padding: var(--az-space-sm) var(--az-space-md);
  border-radius: var(--az-radius-button);
  font-family: var(--az-font-family);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: filter var(--az-duration) var(--az-ease),
              box-shadow var(--az-duration) var(--az-ease);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.az-btn-primary {
  background: var(--az-color-primary);
  color: var(--az-color-white);
  border: none;
}

.az-btn-secondary {
  background: transparent;
  color: var(--az-color-primary);
  border: 1px solid var(--az-color-primary);
}

.az-btn-danger {
  background: var(--az-color-error);
  color: var(--az-color-white);
  border: none;
}

.az-btn-primary:hover,
.az-btn-secondary:hover,
.az-btn-danger:hover {
  filter: brightness(0.9);
}

.az-btn-primary:focus,
.az-btn-secondary:focus,
.az-btn-danger:focus {
  outline: 2px solid var(--az-color-primary);
  outline-offset: 2px;
}

.az-clear-filters-btn {
  padding: var(--az-space-sm) var(--az-space-md);
  background: var(--az-color-error);
  color: var(--az-color-white);
  border: none;
  border-radius: var(--az-radius-button);
  font-family: var(--az-font-family);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: filter var(--az-duration) var(--az-ease);
  white-space: nowrap;
}

.az-clear-filters-btn:hover {
  filter: brightness(0.9);
}

.az-clear-filters-btn:focus {
  outline: 2px solid var(--az-color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
 * 3. Tables
 * ========================================================================== */

.az-table-container {
  background: var(--az-surface-main);
  border-radius: var(--az-radius-card);
  box-shadow: var(--az-shadow-card);
  overflow: hidden;
}

.az-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--az-font-family);
  font-size: 14px;
}

.az-table thead {
  background: var(--az-surface-header);
  border-bottom: 1px solid var(--az-border-color);
}

.az-table th {
  padding: var(--az-space-md) 12px;
  text-align: left;
  font-weight: 600;
  color: var(--az-text-primary);
  white-space: nowrap;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.az-table tbody tr {
  border-bottom: 1px solid var(--az-border-color);
  transition: all var(--az-duration) var(--az-ease);
  cursor: pointer;
}

.az-table tbody tr:hover {
  background-color: var(--az-surface-header);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.az-table td {
  padding: var(--az-space-md) 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  color: var(--az-text-primary);
}

/* Sortable Headers */
.az-table .az-sortable-header {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background var(--az-duration) var(--az-ease);
}

.az-table .az-sortable-header:hover {
  background: var(--az-border-color);
}

.az-table .az-sort-indicator {
  margin-left: var(--az-space-sm);
  font-size: 12px;
  color: var(--az-color-primary);
}

/* ==========================================================================
 * 4. Modals
 * ========================================================================== */

@keyframes az-modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.az-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--az-space-lg);
}

.az-modal {
  background: var(--az-surface-main);
  border-radius: 0;
  max-width: 800px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  animation: az-modal-fade-in var(--az-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

.az-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--az-space-lg);
  border-bottom: 1px solid var(--az-border-color);
}

.az-modal__header h3 {
  margin: 0;
  color: var(--az-text-primary);
  font-family: var(--az-font-family);
  font-weight: 600;
  font-size: var(--az-font-size-h3);
}

.az-modal__body {
  padding: var(--az-space-lg);
}

.az-modal__close {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--az-text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--az-radius-input);
  transition: all var(--az-duration) var(--az-ease);
}

.az-modal__close:hover {
  background: var(--az-surface-header);
  color: var(--az-text-primary);
}

/* Modal Detail Rows */
.az-detail-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid var(--az-border-color);
}

.az-detail-row:last-child {
  border-bottom: none;
}

.az-detail-label {
  font-weight: 600;
  color: var(--az-text-primary);
  min-width: 200px;
  margin-right: var(--az-space-md);
  flex-shrink: 0;
}

.az-detail-value {
  color: var(--az-text-primary);
  word-break: break-word;
  flex: 1;
  display: flex;
  align-items: center;
}

/* Modal Detail Sections */
.az-detail-section {
  background: var(--az-surface-header);
  border-radius: var(--az-radius-input);
  padding: var(--az-space-lg);
  border: 1px solid var(--az-border-color);
  margin-bottom: var(--az-space-lg);
}

.az-detail-section:last-child {
  margin-bottom: 0;
}

.az-section-title {
  margin: 0 0 var(--az-space-md) 0;
  color: var(--az-text-primary);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding-bottom: var(--az-space-sm);
  border-bottom: 2px solid var(--az-border-color);
}

.az-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==========================================================================
 * 5. Filters & Form Inputs
 * ========================================================================== */

.az-filter-container {
  background: var(--az-surface-main);
  border-radius: var(--az-radius-card);
  box-shadow: var(--az-shadow-card);
  margin-bottom: var(--az-space-md);
  padding: var(--az-space-lg);
}

.az-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: center;
}

.az-filter-input,
.az-filter-select {
  padding: 8px 12px;
  border: 1px solid var(--az-border-input);
  border-radius: var(--az-radius-input);
  font-family: var(--az-font-family);
  font-size: 14px;
  color: var(--az-text-primary);
  background: var(--az-surface-main);
  transition: border-color var(--az-duration) var(--az-ease),
              box-shadow var(--az-duration) var(--az-ease);
}

.az-filter-input:focus,
.az-filter-select:focus {
  outline: none;
  border-color: var(--az-color-primary);
  box-shadow: 0 0 0 3px rgba(8, 31, 240, 0.1);
}

.az-filter-input::placeholder {
  color: var(--az-text-secondary);
}

/* ==========================================================================
 * 6. Pagination
 * ========================================================================== */

.az-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--az-space-lg);
  padding: var(--az-space-md) 0;
}

.az-pagination__info {
  color: var(--az-text-secondary);
  font-size: 14px;
}

.az-pagination__controls {
  display: flex;
  gap: var(--az-space-sm);
  align-items: center;
}

.az-pagination__btn {
  padding: var(--az-space-sm) 12px;
  border: 1px solid var(--az-border-input);
  background: var(--az-surface-main);
  color: var(--az-text-primary);
  border-radius: var(--az-radius-input);
  cursor: pointer;
  font-family: var(--az-font-family);
  font-size: 14px;
  transition: all var(--az-duration) var(--az-ease);
  min-width: 40px;
  text-align: center;
}

.az-pagination__btn:hover:not(:disabled) {
  background: var(--az-surface-header);
  border-color: var(--az-text-secondary);
}

.az-pagination__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--az-surface-header);
}

.az-pagination__btn--active {
  background: var(--az-color-primary);
  color: var(--az-color-white);
  border-color: var(--az-color-primary);
}

.az-pagination__btn--active:hover {
  background: var(--az-color-primary);
  filter: brightness(0.9);
  border-color: var(--az-color-primary);
}

/* ==========================================================================
 * 7. Loading Spinner
 * ========================================================================== */

@keyframes az-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.az-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--az-text-secondary);
}

.az-spinner__circle {
  width: 20px;
  height: 20px;
  border: 2px solid var(--az-border-color);
  border-top: 2px solid var(--az-color-primary);
  border-radius: 50%;
  animation: az-spin 1s linear infinite;
  margin-right: 12px;
}

.az-spinner__text {
  font-family: var(--az-font-family);
  font-size: 14px;
  color: var(--az-text-secondary);
}

/* ==========================================================================
 * 8. No-Data / Empty States
 * ========================================================================== */

.az-no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--az-text-secondary);
  font-family: var(--az-font-family);
}

.az-no-data i {
  margin-right: 12px;
  font-size: 18px;
}

.az-no-results-message {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--az-text-secondary);
  font-family: var(--az-font-family);
}

.az-no-results-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--az-space-sm);
}

.az-no-results-content i {
  font-size: 2rem;
  color: var(--az-text-secondary);
  margin-bottom: var(--az-space-sm);
}

.az-no-results-content h4 {
  margin: 0;
  color: var(--az-text-primary);
  font-weight: 600;
}

.az-no-results-content p {
  margin: 0;
  color: var(--az-text-secondary);
  font-size: 0.875rem;
}

.az-clear-filters-link {
  color: var(--az-color-primary);
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  transition: color var(--az-duration) var(--az-ease);
}

.az-clear-filters-link:hover {
  text-decoration: underline;
  filter: brightness(0.8);
}

/* ==========================================================================
 * 9. Charts
 * ========================================================================== */

.az-chart-container {
  background: var(--az-surface-main);
  border-radius: 0;
  box-shadow: var(--az-shadow-card);
  margin-bottom: var(--az-space-lg);
  overflow: hidden;
}

.az-chart-header {
  padding: var(--az-space-lg) var(--az-space-lg) var(--az-space-md) var(--az-space-lg);
  border-bottom: 1px solid var(--az-border-color);
  background: var(--az-surface-header);
}

.az-chart-header h3 {
  margin: 0 0 var(--az-space-sm) 0;
  color: var(--az-text-primary);
  font-family: var(--az-font-family);
  font-weight: 600;
  font-size: var(--az-font-size-h3);
  display: flex;
  align-items: center;
}

.az-chart-header h3 i {
  margin-right: var(--az-space-sm);
  color: var(--az-color-primary);
  font-size: 1rem;
}

.az-chart-header p {
  margin: 0;
  color: var(--az-text-secondary);
  font-size: 0.875rem;
  line-height: 1.4;
}

.az-chart-content {
  padding: var(--az-space-lg);
  min-height: 400px;
  position: relative;
}

.az-chart-section {
  background: var(--az-surface-main);
  border-radius: 0;
  box-shadow: var(--az-shadow-card);
  margin-bottom: var(--az-space-lg);
  overflow: hidden;
}

/* Chart Summary Stats */
.az-chart-summary {
  margin-top: var(--az-space-lg);
  padding-top: var(--az-space-md);
  border-top: 1px solid var(--az-border-color);
}

.az-chart-summary .az-summary-stats {
  display: flex;
  gap: var(--az-space-lg);
  flex-wrap: wrap;
}

.az-stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--az-space-xs);
}

.az-stat-label {
  font-size: 0.75rem;
  color: var(--az-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.az-stat-value {
  font-size: 0.875rem;
  color: var(--az-text-primary);
  font-weight: 600;
}

/* Chart States */
.az-chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 350px;
  color: var(--az-text-secondary);
}

.az-chart-loading .az-chart-loading__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.az-chart-loading .az-chart-loading__content p {
  margin: var(--az-space-md) 0 0 0;
  font-size: 0.875rem;
  color: var(--az-text-secondary);
}

.az-chart-error {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 350px;
  color: var(--az-color-error);
}

.az-chart-error .az-chart-error__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 400px;
}

.az-chart-error .az-chart-error__content i {
  font-size: 2rem;
  margin-bottom: var(--az-space-md);
  color: var(--az-color-error);
}

.az-chart-error .az-chart-error__content h4 {
  margin: 0 0 var(--az-space-sm) 0;
  color: var(--az-text-primary);
  font-weight: 600;
}

.az-chart-error .az-chart-error__content p {
  margin: 0 0 var(--az-space-md) 0;
  color: var(--az-text-secondary);
  font-size: 0.875rem;
}

.az-chart-no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 350px;
  color: var(--az-text-secondary);
}

.az-chart-no-data .az-chart-no-data__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.az-chart-no-data .az-chart-no-data__content i {
  font-size: 2rem;
  margin-bottom: var(--az-space-md);
  color: var(--az-text-secondary);
}

.az-chart-no-data .az-chart-no-data__content h4 {
  margin: 0 0 var(--az-space-sm) 0;
  color: var(--az-text-primary);
  font-weight: 600;
}

.az-chart-no-data .az-chart-no-data__content p {
  margin: 0;
  color: var(--az-text-secondary);
  font-size: 0.875rem;
}

/* ==========================================================================
 * 10. Status Badges
 * ========================================================================== */

.az-status-success,
.az-status-warning,
.az-status-error,
.az-status-info {
  display: inline-flex;
  align-items: center;
  padding: var(--az-space-xs) var(--az-space-sm);
  border-radius: var(--az-radius-input);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.az-status-success {
  background-color: var(--az-color-success-bg);
  color: var(--az-color-success);
  border: 1px solid var(--az-color-success-border);
}

.az-status-warning {
  background-color: var(--az-color-warning-bg);
  color: var(--az-color-warning);
  border: 1px solid var(--az-color-warning-border);
}

.az-status-error {
  background-color: var(--az-color-error-bg);
  color: var(--az-color-error);
  border: 1px solid var(--az-color-error-border);
}

.az-status-info {
  background-color: var(--az-color-info-bg);
  color: var(--az-color-info);
  border: 1px solid var(--az-color-info-border);
}

/* ==========================================================================
 * 11. Multi-Select Dropdown
 * ========================================================================== */

.az-multi-select-dropdown {
  position: relative;
  width: 100%;
}

.az-multi-select-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid var(--az-border-input);
  border-radius: var(--az-radius-input);
  background: var(--az-surface-main);
  cursor: pointer;
  font-family: var(--az-font-family);
  font-size: 14px;
  color: var(--az-text-primary);
  transition: border-color var(--az-duration) var(--az-ease),
              box-shadow var(--az-duration) var(--az-ease);
  min-height: 38px;
}

.az-multi-select-dropdown__trigger:focus {
  outline: none;
  border-color: var(--az-color-primary);
  box-shadow: 0 0 0 3px rgba(8, 31, 240, 0.1);
}

.az-multi-select-dropdown__trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.az-multi-select-dropdown__trigger-arrow {
  margin-left: var(--az-space-sm);
  font-size: 12px;
  color: var(--az-text-secondary);
  transition: transform var(--az-duration) var(--az-ease);
}

.az-multi-select-dropdown--open .az-multi-select-dropdown__trigger-arrow {
  transform: rotate(180deg);
}

.az-multi-select-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--az-surface-main);
  border: 1px solid var(--az-border-input);
  border-radius: var(--az-radius-input);
  box-shadow: var(--az-shadow-hover);
  margin-top: var(--az-space-xs);
  max-height: 250px;
  overflow-y: auto;
}

.az-multi-select-dropdown__search {
  padding: var(--az-space-sm);
  border-bottom: 1px solid var(--az-border-color);
}

.az-multi-select-dropdown__search input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--az-border-input);
  border-radius: var(--az-radius-input);
  font-family: var(--az-font-family);
  font-size: 13px;
  color: var(--az-text-primary);
  background: var(--az-surface-main);
}

.az-multi-select-dropdown__search input:focus {
  outline: none;
  border-color: var(--az-color-primary);
  box-shadow: 0 0 0 3px rgba(8, 31, 240, 0.1);
}

.az-multi-select-dropdown__option {
  display: flex;
  align-items: center;
  gap: var(--az-space-sm);
  padding: var(--az-space-sm) 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--az-text-primary);
  transition: background var(--az-duration) var(--az-ease);
}

.az-multi-select-dropdown__option:hover {
  background: var(--az-surface-header);
}

.az-multi-select-dropdown__option--selected {
  background: rgba(8, 31, 240, 0.05);
}

.az-multi-select-dropdown__option input[type="checkbox"] {
  accent-color: var(--az-color-primary);
}

.az-multi-select-dropdown__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--az-space-xs);
  padding: var(--az-space-xs) 0;
}

.az-multi-select-dropdown__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--az-space-xs);
  padding: 2px var(--az-space-sm);
  background: rgba(8, 31, 240, 0.1);
  color: var(--az-color-primary);
  border-radius: var(--az-radius-button);
  font-size: 12px;
  font-weight: 500;
}

.az-multi-select-dropdown__tag-remove {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--az-duration) var(--az-ease);
}

.az-multi-select-dropdown__tag-remove:hover {
  opacity: 1;
}

/* ==========================================================================
 * 12. Responsive Overrides (≤ 768px)
 * ========================================================================== */

@media (max-width: 768px) {
  /* Page Layout */
  .az-page-container {
    padding: var(--az-space-md);
  }

  .az-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--az-space-sm);
  }

  /* Tables */
  .az-table-container {
    overflow-x: auto;
  }

  /* Modals */
  .az-modal {
    width: 95vw;
    max-width: 95vw;
    margin: var(--az-space-sm);
  }

  .az-modal__header {
    padding: var(--az-space-md);
  }

  .az-modal__body {
    padding: var(--az-space-md);
  }

  .az-detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--az-space-xs);
  }

  .az-detail-label {
    min-width: auto;
    margin-right: 0;
    margin-bottom: var(--az-space-xs);
  }

  /* Filters */
  .az-filter-container {
    padding: var(--az-space-md);
  }

  .az-filter-row {
    grid-template-columns: 1fr;
  }

  /* Charts */
  .az-chart-header {
    padding: var(--az-space-md) var(--az-space-lg) 12px var(--az-space-lg);
  }

  .az-chart-header h3 {
    font-size: 1rem;
  }

  .az-chart-content {
    padding: var(--az-space-lg) var(--az-space-md);
    min-height: 300px;
  }

  .az-chart-loading,
  .az-chart-error,
  .az-chart-no-data {
    min-height: 280px;
  }

  .az-chart-summary .az-summary-stats {
    gap: var(--az-space-md);
  }

  /* Pagination */
  .az-pagination {
    flex-direction: column;
    gap: var(--az-space-sm);
    align-items: stretch;
    text-align: center;
  }

  .az-pagination__controls {
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* ==========================================================================
 * Dark Mode Component Overrides
 * ========================================================================== */

[data-theme="dark"] .az-table-container {
  border: 1px solid var(--az-border-color);
}

[data-theme="dark"] .az-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .az-filter-container {
  border: 1px solid var(--az-border-color);
}

[data-theme="dark"] .az-modal {
  border: 1px solid var(--az-border-color);
}

[data-theme="dark"] .az-modal__close:hover {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .az-detail-row {
  border-bottom-color: var(--az-border-color);
}

[data-theme="dark"] .az-pagination__btn {
  background: var(--az-surface-header);
  border-color: var(--az-border-color);
}

[data-theme="dark"] .az-pagination__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .az-chart-container {
  border: 1px solid var(--az-border-color);
}

[data-theme="dark"] .az-chart-header {
  background: var(--az-surface-header);
}

[data-theme="dark"] .az-btn-secondary {
  color: #93a3f8;
  border-color: #93a3f8;
}

[data-theme="dark"] .az-multi-select-dropdown__menu {
  border-color: var(--az-border-color);
}

[data-theme="dark"] .az-multi-select-dropdown__option:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .az-multi-select-dropdown__option--selected {
  background: rgba(8, 31, 240, 0.15);
}

/* Select dropdowns in dark mode */
[data-theme="dark"] select,
[data-theme="dark"] .customer-selector select {
  color: var(--az-text-primary);
  background-color: var(--az-surface-header);
  border-color: var(--az-border-input);
  color-scheme: dark;
}

[data-theme="dark"] select option {
  background-color: #111640;
  color: #e5e7eb;
}

/* General input/select dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea {
  color: var(--az-text-primary);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--az-text-secondary);
}

/* ==========================================================================
 *
 * 13. Navigation Icons (inline SVG backgrounds)
 *
 * ========================================================================== */

.bi {
  display: inline-block;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-size: cover;
}

.bi-house-door-fill-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-key-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-key' viewBox='0 0 16 16'%3E%3Cpath d='M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z'/%3E%3Cpath d='M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
}

.bi-people-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-people' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8Zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002A.274.274 0 0 1 15 13H7.022ZM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816ZM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E");
}

.bi-exclamation-triangle-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-exclamation-triangle' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z'/%3E%3C/svg%3E");
}

.bi-graph-up-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-graph-up' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z'/%3E%3C/svg%3E");
}

.bi-list-ul-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-ul' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
}

.bi-gear-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z'/%3E%3C/svg%3E");
}

.bi-gear-wide-connected-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-gear-wide-connected' viewBox='0 0 16 16'%3E%3Cpath d='M7.068.727c.243-.97 1.62-.97 1.864 0l.071.286a.96.96 0 0 0 1.622.434l.205-.211c.695-.719 1.888-.03 1.613.931l-.08.284a.96.96 0 0 0 1.187 1.187l.283-.081c.96-.275 1.65.918.931 1.613l-.211.205a.96.96 0 0 0 .434 1.622l.286.071c.97.243.97 1.62 0 1.864l-.286.071a.96.96 0 0 0-.434 1.622l.211.205c.719.695.03 1.888-.931 1.613l-.284-.08a.96.96 0 0 0-1.187 1.187l.081.283c.275.96-.918 1.65-1.613.931l-.205-.211a.96.96 0 0 0-1.622.434l-.071.286c-.243.97-1.62.97-1.864 0l-.071-.286a.96.96 0 0 0-1.622-.434l-.205.211c-.695.719-1.888.03-1.613-.931l.08-.284a.96.96 0 0 0-1.186-1.187l-.284.081c-.96.275-1.65-.918-.931-1.613l.211-.205a.96.96 0 0 0-.434-1.622l-.286-.071c-.97-.243-.97-1.62 0-1.864l.286-.071a.96.96 0 0 0 .434-1.622l-.211-.205c-.719-.695-.03-1.888.931-1.613l.284.08a.96.96 0 0 0 1.187-1.186l-.081-.284c-.275-.96.918-1.65 1.613-.931l.205.211a.96.96 0 0 0 1.622-.434l.071-.286zM12.973 8.5H8.25l-2.834 3.779A4.998 4.998 0 0 0 8.126 16a5 5 0 0 0 4.847-6.5zM7.874 16a5 5 0 0 1-4.847-6.5H7.75l2.834 3.779A4.998 4.998 0 0 1 7.874 16z'/%3E%3C/svg%3E");
}

.bi-pc-display-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-pc-display' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V1Zm1 13.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0Zm2 0a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0ZM9.5 1a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1h-5ZM9 3.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1h-5a.5.5 0 0 0-.5.5ZM1.5 2A1.5 1.5 0 0 0 0 3.5v7A1.5 1.5 0 0 0 1.5 12H6v2h-.5a.5.5 0 0 0 0 1H7v-4H1.5a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5h5A.5.5 0 0 1 7 3v4h1V3.5A1.5 1.5 0 0 0 6.5 2h-5Z'/%3E%3C/svg%3E");
}

.bi-layers-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-layers' viewBox='0 0 16 16'%3E%3Cpath d='M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zm3.515 7.008L14.438 10 8 13.433 1.562 10 4.25 8.567l3.515 1.874a.5.5 0 0 0 .47 0l3.515-1.874zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z'/%3E%3C/svg%3E");
}

.bi-currency-dollar-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-currency-dollar' viewBox='0 0 16 16'%3E%3Cpath d='M4 10.781c.148 1.667 1.513 2.85 3.591 3.003V15h1.043v-1.216c2.27-.179 3.678-1.438 3.678-3.3 0-1.59-.947-2.51-2.956-3.028l-.722-.187V3.467c1.122.11 1.879.714 2.07 1.616h1.47c-.166-1.6-1.54-2.748-3.54-2.875V1H7.591v1.233c-1.939.23-3.27 1.472-3.27 3.156 0 1.454.966 2.483 2.661 2.917l.61.162v4.031c-1.149-.17-1.94-.8-2.131-1.718H4zm3.391-3.836c-1.043-.263-1.6-.825-1.6-1.616 0-.944.704-1.641 1.8-1.828v3.495l-.2-.05zm1.591 1.872c1.287.323 1.852.859 1.852 1.769 0 1.097-.826 1.828-2.2 1.939V8.73l.348.086z'/%3E%3C/svg%3E");
}

.bi-bookmark-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bookmark' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z'/%3E%3C/svg%3E");
}

.bi-heart-pulse-nav-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-heart-pulse' viewBox='0 0 16 16'%3E%3Cpath d='m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053.918 3.995.78 5.323 1.508 7H.43c-.424 0-.764.336-.764.76C-.334 8.36 0 8.9.43 8.9h1.379c.312.418.641.835.979 1.2.165.178.359.406.562.674.348.46.733.94 1.107 1.393C4.764 12.44 6.042 13 8 13c1.958 0 3.236-.56 3.543-.833.374-.453.759-.932 1.107-1.393.203-.268.397-.496.562-.674.338-.365.667-.782.979-1.2h1.379c.424 0 .764-.54.764-1.14 0-.424-.34-.76-.764-.76h-1.078c.728-1.677.59-3.005.108-3.947C13.486.878 10.4.28 8.717 2.01L8 2.748ZM2.212 10C1.108 8.732 1.108 7.268 2.212 6h1.977c.22.738.484 1.548.762 2.416.273.852.56 1.738.846 2.584H2.212ZM9.626 6c-.242-.84-.504-1.65-.762-2.416C8.591 2.716 8.304 1.83 8.018 1c-.286.83-.573 1.716-.846 2.584C6.894 4.35 6.632 5.16 6.374 6h3.252Zm4.162 4H10.203c.286-.846.573-1.732.846-2.584.278-.868.542-1.678.762-2.416h1.977c1.104 1.268 1.104 2.732 0 4Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
 * 14. Dark Mode Toggle
 * ========================================================================== */

.az-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: var(--az-color-white);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--az-duration) var(--az-ease),
              border-color var(--az-duration) var(--az-ease);
  margin-right: var(--az-space-sm);
  flex-shrink: 0;
}

.az-theme-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
}

.az-theme-toggle:focus {
  outline: 2px solid var(--az-color-white);
  outline-offset: 2px;
}