/* Hypervolt scheduling pages (hypervolt-login/connect/dashboard) — layered on
   top of styles.css's existing tokens/.login-card/.card/.form-group/.btn-*
   conventions, not a parallel design system. Breakpoints match this site's
   existing convention (@media (width <= 700px) for mobile stacking). */

/* Main dashboard */
.hv-container { max-width: 720px; margin: 0 auto; }
.hv-header-actions { position: static; display: flex; gap: 4px; }

.hv-status-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.hv-status-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding: 8px 0; border-bottom: 1px solid rgb(255 255 255 / 6%); }
.hv-status-row:last-child { border-bottom: none; }
.hv-status-label { color: var(--text-secondary); }
.hv-refresh-btn { width: auto; }

/* Read-only echo of the .hv-slider gradient below, for the Current Settings
   row — same dark-to-bright track, a dot instead of a draggable thumb. */
.hv-brightness-status { display: flex; align-items: center; gap: 10px; }
.hv-brightness-track { position: relative; width: 90px; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #2a2f45 0%, #ffb020 55%, #ffe27a 100%); border: 1px solid var(--border-color); }
.hv-brightness-thumb { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgb(0 0 0 / 35%); }
.hv-brightness-value { font-variant-numeric: tabular-nums; }

/* Power throughput card — layout borrowed from EnergyApp's own EV Dashboard
   (.hv-stat mini-tiles in a wrapping row), so this page's "how fast is it
   charging right now" reads the same way that one does. */
.hv-power-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-stat { flex: 1 1 100px; text-align: center; padding: 8px 4px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); }
.hv-stat-value { font-size: 18px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.hv-stat-label { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.hv-stat-value.hv-charging { color: #22c55e; }
.hv-stat-value.hv-idle { color: var(--text-secondary); }

/* Live control panel — each row is a label + inline input/select + Apply
   button, so a change here doesn't get confused with the (separately
   saved) Scheduled Rules below. */
.hv-live-row { margin-bottom: 16px; }
.hv-live-row:last-of-type { margin-bottom: 8px; }
.hv-live-row > label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.hv-live-inline { display: flex; align-items: center; gap: 10px; }

/* .hv-live-row isn't a .form-group, so its select gets none of styles.css's
   dark-dropdown treatment for free — mirror it here rather than falling back
   to the browser's own light-themed native select. */
.hv-live-inline select {
    flex: 1;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    padding: 10px 32px 10px 12px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a9cc0' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.hv-live-inline select:focus { border-color: var(--accent); }
.hv-live-inline select option { background: var(--input-bg); color: var(--text-primary); }
.hv-live-inline .hv-slider { flex: 1; }
.hv-live-apply { width: auto; flex-shrink: 0; }
#liveCustomColourGroup { margin-top: 10px; }
#liveCustomColourGroup label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }

/* Lock/mode toggle switches — same visual pattern as EnergyApp's own EV
   Dashboard .hv-toggle-switch, ported here since this page had no toggle
   control before. */
.hv-live-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.hv-live-toggle-row > label { margin-bottom: 0; }
.hv-toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.hv-toggle-input { opacity: 0; width: 0; height: 0; }
.hv-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--input-border); border-radius: 24px; transition: background var(--transition); }
.hv-toggle-input:checked + .hv-toggle-slider { background: var(--accent); }
.hv-toggle-input:checked + .hv-toggle-slider + .hv-toggle-thumb { transform: translateX(20px); }
.hv-toggle-thumb { position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform var(--transition); pointer-events: none; }

.hv-add-rule-btn { width: auto; margin-top: 12px; }

.hv-rule-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgb(255 255 255 / 6%); flex-wrap: wrap; }
.hv-rule-row:last-child { border-bottom: none; }
.hv-rule-info { display: flex; flex-direction: column; gap: 2px; }
.hv-rule-action { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.hv-rule-trigger { font-size: 12px; color: var(--text-secondary); }
.hv-rule-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hv-rule-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.hv-rule-toggle input { width: auto; }

/* Confirm modal (replaces native confirm()) */
.hv-confirm-modal { max-width: 380px; width: 100%; text-align: left; }
.hv-confirm-modal p { margin: 0 0 18px; color: var(--text-primary); line-height: 1.5; }

/* Rule modal */
.hv-rule-modal { max-width: 440px; width: 100%; text-align: left; }
.hv-rule-modal-actions { display: flex; gap: 10px; margin-top: 4px; }
.hv-rule-modal-actions .btn-primary, .hv-rule-modal-actions .btn-secondary { flex: 1; }
.hv-hint { font-size: 11px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }
.hv-hint code { background: var(--input-bg); padding: 1px 5px; border-radius: 3px; }

.hv-trigger-tabs { display: flex; gap: 8px; margin-bottom: 4px; }
.hv-trigger-tab { flex: 1; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-secondary); border-radius: var(--radius-sm); padding: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color var(--transition), color var(--transition); }
.hv-trigger-tab.is-active { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim); }

.hv-day-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hv-day-picker label { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }

/* .hv-day-picker lives inside a .form-group, so without this override
   styles.css's ".form-group input" rule (width: 100%; padding: 10px 12px;
   background/border...) stretches each day checkbox into a full-width
   blob stacked on the next, making them unclickable as individual days. */
.hv-day-picker input[type="checkbox"] { width: auto; padding: 0; background: none; border: none; }

/* The bare <input type="color"> otherwise inherits the form's full-width
   text-input styling, which collapses the browser's own colour swatch down
   to an invisible sliver — give it a fixed, visibly swatch-shaped box. */
#ruleCustomColour, #liveCustomColour { width: 64px; height: 40px; padding: 2px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); cursor: pointer; }

/* Custom-styled to mirror Hypervolt's own app — a dark-to-bright gradient
   track (rather than a plain accent-coloured bar) reads as "brightness" at a
   glance the way a bare progress bar doesn't. WebKit/Blink and Firefox need
   separate ::-webkit-slider-runnable-track/::-moz-range-track rules — there's
   no shared shorthand for styling a native range track's fill colour. */
.hv-slider {
    width: 100%;
    height: 28px;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.hv-slider::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2a2f45 0%, #ffb020 55%, #ffe27a 100%);
    border: 1px solid var(--border-color);
}

.hv-slider::-moz-range-track {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2a2f45 0%, #ffb020 55%, #ffe27a 100%);
    border: 1px solid var(--border-color);
}

.hv-slider::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -7px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--accent);
    box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
}

.hv-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--accent);
    box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
}
.hv-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.hv-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (width <= 700px) {
    .hv-container { max-width: 100%; }
    .hv-rule-row { flex-direction: column; align-items: flex-start; }
    .hv-rule-actions { width: 100%; justify-content: space-between; }
}

/* Admin: Hypervolt users overview */
.hv-admin-table-wrap { overflow-x: auto; }
.hv-admin-user-block { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid rgb(255 255 255 / 6%); }
.hv-admin-user-block:last-child { border-bottom: none; margin-bottom: 0; }
.hv-admin-user-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.hv-admin-user-email { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.hv-admin-user-meta { font-size: 12px; color: var(--text-secondary); }
.hv-admin-rule-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 999px; padding: 4px 12px; font-size: 12px; margin: 3px 6px 3px 0; color: var(--text-primary); }
.hv-admin-rule-chip.is-disabled { opacity: 0.45; }