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

/* Dark-mode adaptation of the console-specific accents. The neutral surface/text/
   border tokens (--wv-n0/--wv-fg/--wv-border/--wv-fg-muted) already flip via
   wv-tokens.css; this only re-tints the category tiles + pending chip so their light
   pastel fills don't glare on the dark console surface (dark hue-tint bg + light fg). */
:root[data-bs-theme='dark'] {
    --wv-pc-pending-bg: #3a2f14;
    --wv-pc-pending-fg: #e3b65a;
    --wv-pc-tile-user-bg: #2f2547;
    --wv-pc-tile-user-fg: #c3aef0;
    --wv-pc-tile-water-entry-bg: #15323e;
    --wv-pc-tile-water-entry-fg: #7fc3df;
    --wv-pc-tile-asset-bg: #3a2f14;
    --wv-pc-tile-asset-fg: #e3b65a;
    --wv-pc-tile-field-bg: #17331f;
    --wv-pc-tile-field-fg: #74c894;
    --wv-pc-tile-maint-bg: #3a1d1b;
    --wv-pc-tile-maint-fg: #e89089;
}

/* Modal frame */

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

.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, #fff);
    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: #fff;
}

.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__help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 13px;
    transition:
        color 120ms ease,
        background 120ms ease;
}

.power-console__help:hover,
.power-console__help:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

.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: #fff;
    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: #fff;
    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, #fff);
    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, #fff);
    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: #fff;
}

.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, #fff);
    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, #fff);
    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: #fff;
    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, #fff);
    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: #fff;
    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 (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;
    }
}