/*
 * Power Console — unified site search + command palette.
 *
 * Design hand-off: design_handoff_power_console/.
 * Tokens: re-uses --wv-* variables from colors_and_type.css; console-specific
 * accents are declared as --wv-pc-* under :root below.
 *
 * All component rules are scoped under .power-console so they cannot leak.
 */

:root {
  --wv-pc-overlay: rgba(10, 35, 40, 0.55);
  --wv-pc-shadow: 0 32px 80px rgba(10, 35, 40, 0.42);
  --wv-pc-header-grad-start: var(--wv-secondary, #0a5555);
  --wv-pc-header-grad-end: #073f3f;
  --wv-pc-eyebrow: #9bd5d4;
  --wv-pc-caret: #40bebf;
  --wv-pc-pending-bg: var(--wv-warning-bg, #fbeed4);
  --wv-pc-pending-fg: #8a5e0c;
  --wv-pc-pending-dot: var(--wv-warning, #c98a1d);
  --wv-pc-tile-user-bg: #ece6f5;
  --wv-pc-tile-user-fg: #6741a3;
  --wv-pc-tile-water-entry-bg: #e1eef5;
  --wv-pc-tile-water-entry-fg: #2b7a9b;
  --wv-pc-tile-asset-bg: var(--wv-warning-bg, #fbeed4);
  --wv-pc-tile-asset-fg: #8a5e0c;
  --wv-pc-tile-field-bg: #e3f1e8;
  --wv-pc-tile-field-fg: #1f6a3f;
  --wv-pc-tile-maint-bg: #fbe4e2;
  --wv-pc-tile-maint-fg: #9a2520;
  --wv-pc-tile-page-bg: var(--wv-n100, #eef0ec);
  --wv-pc-tile-page-fg: var(--wv-fg-muted, #5a6470);
}

/* ── Modal frame ─────────────────────────────────────────────────── */

.power-console.modal {
  --bs-modal-bg: var(--wv-n0, #ffffff);
}

.power-console .modal-dialog {
  max-width: 760px;
  width: 100%;
  margin-top: 8vh;
}

.power-console .modal-content,
.power-console__shell {
  border-radius: 16px;
  border: 1px solid var(--wv-border, #e3e7e1);
  box-shadow: var(--wv-pc-shadow);
  overflow: hidden;
  padding: 0;
  background: var(--wv-n0, #ffffff);
  color: var(--wv-fg, #2a333c);
  font-family: var(--wv-font-sans, "Source Sans 3", system-ui, sans-serif);
}

.power-console .modal-backdrop.show {
  background: var(--wv-pc-overlay);
  opacity: 1;
}

/* ── Header ──────────────────────────────────────────────────────── */

.power-console__header {
  background: linear-gradient(135deg, var(--wv-pc-header-grad-start) 0%, var(--wv-pc-header-grad-end) 100%);
  padding: 14px 20px;
  color: #ffffff;
}

.power-console__topline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 11px;
}

.power-console__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wv-pc-eyebrow);
}

.power-console__district {
  flex: 1;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.power-console__esc-hint {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--wv-font-mono, monospace);
  font-size: 11px;
}

.power-console__esc-hint kbd {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1px 5px;
  color: #ffffff;
  font-size: 10px;
  font-family: var(--wv-font-mono, monospace);
}

.power-console__inputrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.power-console__prompt {
  color: var(--wv-pc-caret);
  font-family: var(--wv-font-mono, monospace);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.power-console__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #ffffff;
  font-family: var(--wv-font-mono, monospace);
  font-size: 14px;
  padding: 6px 0;
}

.power-console__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.power-console__caret {
  width: 1.5px;
  height: 16px;
  background: var(--wv-pc-caret);
  animation: wv-pc-blink 1s steps(2) infinite;
}

@keyframes wv-pc-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.power-console__hintstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 11px;
  font-family: var(--wv-font-mono, monospace);
  color: rgba(255, 255, 255, 0.55);
}

.power-console__op-hint .op {
  color: var(--wv-pc-eyebrow);
  font-weight: 600;
}

/* ── Body ────────────────────────────────────────────────────────── */

.power-console__body {
  flex: 1 1 auto;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  background: var(--wv-n0, #ffffff);
  padding: 0;
}

.power-console__empty,
.power-console__results,
.power-console__drilldown {
  padding: 12px 0;
}

.power-console__section {
  padding: 0 20px;
  margin-bottom: 14px;
}

.power-console__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--wv-divider, #ecefe9);
  margin-bottom: 6px;
}

.power-console__count {
  color: var(--wv-fg-muted, #5a6470);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
}

.power-console__group-note {
  color: var(--wv-warning, #c98a1d);
  font-size: 11px;
  font-weight: 600;
}

.power-console__see-all {
  color: var(--wv-primary, #009f9e);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.power-console__see-all:hover {
  text-decoration: underline;
}

/* ── Quick actions ───────────────────────────────────────────────── */

.power-console__quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.power-console__action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--wv-n0, #ffffff);
  border: 1px solid var(--wv-border, #e3e7e1);
  text-align: left;
  text-decoration: none;
  color: var(--wv-fg, #2a333c);
  cursor: pointer;
  transition: background var(--wv-dur-base, 180ms) var(--wv-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
}

.power-console__action:hover {
  background: var(--wv-n100, #eef0ec);
}

.power-console__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--wv-primary-tint, #e2f3f3);
  color: var(--wv-primary, #009f9e);
  flex: 0 0 auto;
}

.power-console__action-label {
  font-size: 13px;
  font-weight: 500;
}

/* ── Rows ────────────────────────────────────────────────────────── */

.power-console__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.power-console__row-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.power-console__row {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
}

.power-console__row:hover {
  background: var(--wv-n100, #eef0ec);
}

.power-console__row[aria-selected="true"] {
  background: var(--wv-primary-tint, #e2f3f3);
  border-left-color: var(--wv-primary, #009f9e);
}

.power-console__row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex: 0 0 auto;
}

.power-console__row-icon.consumer {
  background: var(--wv-primary-tint, #e2f3f3);
  color: var(--wv-primary, #009f9e);
}
.power-console__row-icon.water-entry,
.power-console__row-icon.order {
  background: var(--wv-pc-tile-water-entry-bg);
  color: var(--wv-pc-tile-water-entry-fg);
}
.power-console__row-icon.asset {
  background: var(--wv-pc-tile-asset-bg);
  color: var(--wv-pc-tile-asset-fg);
}
.power-console__row-icon.user,
.power-console__row-icon.role {
  background: var(--wv-pc-tile-user-bg);
  color: var(--wv-pc-tile-user-fg);
}
.power-console__row-icon.field {
  background: var(--wv-pc-tile-field-bg);
  color: var(--wv-pc-tile-field-fg);
}
.power-console__row-icon.maint {
  background: var(--wv-pc-tile-maint-bg);
  color: var(--wv-pc-tile-maint-fg);
}
.power-console__row-icon.page {
  background: var(--wv-pc-tile-page-bg);
  color: var(--wv-pc-tile-page-fg);
}
.power-console__row-icon.action {
  background: var(--wv-primary, #009f9e);
  color: #ffffff;
}

.power-console__row-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.power-console__row-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--wv-fg, #2a333c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.power-console__row-subtitle {
  font-size: 12px;
  color: var(--wv-fg-muted, #5a6470);
}

.power-console__row-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--wv-fg-muted, #5a6470);
}

/* ── Pills (pin / pending status) ────────────────────────────────── */

.power-console__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--wv-border, #e3e7e1);
  background: var(--wv-n0, #ffffff);
  color: var(--wv-fg-muted, #5a6470);
  cursor: pointer;
}

.power-console__pill--pin {
  opacity: 0;
  transition: opacity var(--wv-dur-base, 180ms) var(--wv-ease);
}

.power-console__row-wrap:hover .power-console__pill--pin,
.power-console__row-wrap:focus-within .power-console__pill--pin {
  opacity: 1;
}

.power-console__pill--unpin {
  opacity: 1;
  border-color: var(--wv-primary, #009f9e);
  background: var(--wv-primary-tint, #e2f3f3);
  color: var(--wv-primary, #009f9e);
}

.power-console__pill--pending {
  background: var(--wv-pc-pending-bg);
  color: var(--wv-pc-pending-fg);
  border: 0;
  cursor: default;
}

.power-console__pill--pending .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wv-pc-pending-dot);
}

/* ── Drilldown / pagination ──────────────────────────────────────── */

.power-console__breadcrumb {
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wv-fg-muted, #5a6470);
}

.power-console__back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--wv-primary, #009f9e);
  font-weight: 600;
  text-decoration: none;
}

.power-console__back-link:hover {
  text-decoration: underline;
}

.power-console__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 20px 16px;
  font-size: 11px;
  color: var(--wv-fg-muted, #5a6470);
  font-family: var(--wv-font-mono, monospace);
}

.power-console__pagination-controls {
  display: flex;
  gap: 4px;
  align-items: center;
}

.power-console__page-btn {
  width: auto;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--wv-border, #e3e7e1);
  background: var(--wv-n0, #ffffff);
  color: var(--wv-fg, #2a333c);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--wv-font-mono, monospace);
}

.power-console__page-btn:hover {
  background: var(--wv-n100, #eef0ec);
}

.power-console__page-current {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--wv-primary, #009f9e);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--wv-font-mono, monospace);
}

/* ── Footer ──────────────────────────────────────────────────────── */

.power-console__footer {
  background: var(--wv-n50, #f7f8f6);
  border-top: 1px solid var(--wv-border, #e3e7e1);
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-family: var(--wv-font-mono, monospace);
  color: var(--wv-fg-muted, #5a6470);
}

.power-console__kbd-hints {
  display: flex;
  gap: 14px;
}

.power-console__footer kbd,
.power-console .kbd-hint kbd {
  background: var(--wv-n0, #ffffff);
  border: 1px solid var(--wv-border, #e3e7e1);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: var(--wv-font-mono, monospace);
  color: var(--wv-fg, #2a333c);
}

.power-console__clear-link {
  background: transparent;
  border: 0;
  color: var(--wv-primary, #009f9e);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.power-console__empty-note,
.power-console__empty-state {
  padding: 18px 4px;
  text-align: center;
}

/* ── Operator chips (in input) ───────────────────────────────────── */

.power-console__chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--wv-pc-caret);
  color: #ffffff;
  font-size: 12px;
  font-family: var(--wv-font-mono, monospace);
  margin-right: 4px;
}

.power-console__chip--invalid {
  border-color: var(--wv-warning, #c98a1d);
  background: rgba(201, 138, 29, 0.18);
}

/* ── Mobile bottom-sheet ─────────────────────────────────────────── */

@media (max-width: 600px) {
  .power-console .modal-dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
  }

  .power-console .modal-content,
  .power-console__shell {
    border-radius: 24px 24px 0 0;
    max-height: 92vh;
  }

  .power-console__quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .power-console__row {
    padding: 10px 16px;
  }

  .power-console__row-icon {
    width: 28px;
    height: 28px;
  }

  .power-console__row-label {
    font-size: 13.5px;
  }

  .power-console__row-subtitle {
    font-size: 12px;
  }

  /* On mobile, Pinned section is collapsible and drag-to-reorder is
     disabled (the JS controller skips SortableJS init below 600px). */
  #power-console-pinned-list .power-console__rows {
    display: none;
  }

  #power-console-pinned-list.is-expanded .power-console__rows {
    display: flex;
  }
}