/* =====================================================================
   POWERA — Shell pages (login, register, index, password reset, etc.)
   Dark orange theme aligned with powera_app.css (Koti / Tulot).
   Loaded on base.html when ZEUS_APP_THEME=powera (body.pw-shell).
   ===================================================================== */

body.pw-shell {
  --powera-red: #e95a1b;
  --powera-orange: #fab432;
  --powera-yellow: #fcce79;
  --powera-dark-blue: #212e47;
  --powera-black: #1d1d1b;
  --powera-white: #ffffff;
  --bg-flow-top: var(--powera-white);
  --bg-flow-bottom: var(--powera-white);
  --bg-flow: var(--powera-white);
  --bg: var(--powera-white);
  --bg-stage: var(--powera-white);
  --surface-1: var(--powera-white);
  --surface-2: #f7f7f6;
  --surface-3: #f0efed;
  --pw-card-bg: var(--powera-white);
  --pw-card-border: rgba(0, 0, 0, 0.08);
  --hairline: rgba(0, 0, 0, 0.08);
  --hairline-strong: rgba(0, 0, 0, 0.12);
  --border-chrome: rgba(0, 0, 0, 0.1);
  --fg-1: var(--powera-black);
  --fg-2: var(--powera-grey);
  --fg-3: #666666;
  --fg-4: #999999;
  --fg-label: #555555;
  --orange-300: var(--powera-orange);
  --orange-500: var(--powera-red);
  --orange-600: #c44a12;
  --font-body: "Rubik", system-ui, sans-serif;
  --font-heading: "Poppins", system-ui, sans-serif;

  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 27px;
  color: var(--fg-1);
  background: var(--bg-flow);
  color-scheme: light;

  /* Full-height sticky-footer shell. Pico sets the root background to the dark
     --bg, so a short page used to reveal a black band below the body (the brown
     --bg-flow only painted as tall as the content). Forcing the body to the
     full viewport keeps --bg-flow edge-to-edge, and the flex column lets main
     grow (flex:1 below) to push the footer logo to the very bottom. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.pw-shell h1,
body.pw-shell h2,
body.pw-shell h3 {
  font-family: var(--font-heading);
  color: var(--fg-1);
}

/* Pico tokens */
body.pw-shell,
body.pw-shell[data-theme="light"] {
  --pico-font-family-sans-serif: var(--font-body);
  --pico-background-color: var(--bg);
  --pico-color: var(--fg-1);
  --pico-muted-color: var(--fg-3);
  --pico-muted-border-color: var(--hairline);
  --pico-primary: var(--orange-500);
  --pico-primary-background: var(--orange-500);
  --pico-primary-border: var(--border-chrome);
  --pico-primary-underline: var(--orange-300);
  --pico-primary-hover: var(--orange-300);
  --pico-primary-hover-background: var(--orange-600);
  --pico-primary-focus: var(--orange-500);
  --pico-secondary: var(--fg-2);
  --pico-form-element-background-color: var(--surface-2);
  --pico-form-element-active-background-color: var(--surface-2);
  --pico-form-element-focus-color: var(--orange-500);
  --pico-form-element-border-color: var(--hairline-strong);
  --pico-form-element-color: var(--fg-1);
  --pico-form-element-placeholder-color: var(--fg-4);
  --pico-form-element-invalid-border-color: #e07659;
  --pico-form-element-disabled-opacity: 0.55;
  --pico-card-background-color: var(--surface-1);
  --pico-card-border-color: var(--hairline);
  --pico-card-box-shadow: 0 10px 36px rgba(0, 0, 0, 0.32);
}

body.pw-shell a {
  color: var(--orange-300);
}

body.pw-shell a:hover {
  color: var(--fg-1);
}

/* Header */
body.pw-shell .sticky-header {
  min-height: 88px;
  height: auto;
  background: none !important;
}

body.pw-shell header nav.container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: 100% !important;
  padding-inline: 2rem;
}

body.pw-shell .pw-header-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Hug content + pack from the top at ALL widths, so "Kirjaudu ulos" /
     welcome / FI | EN can never be stretched apart and pushed onto the box. */
  align-self: flex-start;
  justify-content: flex-start;
  gap: 6px;
  margin-left: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
  max-width: min(340px, 48vw);
  pointer-events: auto;
}

body.pw-shell .pw-header-aside > * {
  margin-top: 0;
  margin-bottom: 0;
}

body.pw-shell .pw-header-aside > ul {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: 0 !important;
  padding: 0 !important;
  /* The logout ul is :first-child of the aside, so the logo's small-screen
     rule `nav ul:first-child { position: absolute }` wrongly matched it and
     pulled it out of the flex flow (welcome + FI|EN then dropped below it).
     Keep it in normal flow so the whole group stays tightly stacked. */
  position: static !important;
}

body.pw-shell .pw-header-aside > ul li {
  margin: 0;
  padding: 0;
}

body.pw-shell .pw-header-welcome {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg-1);
  text-align: right;
  max-width: 100%;
  /* One line always — never wrap and grow the header group. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.pw-shell .pw-header-aside .pw-lang-toggle {
  position: static !important;
}

body.pw-shell:has(.pw-header-welcome) main.container {
  padding-top: 124px;
}

body.pw-shell .header-background {
  clip-path: none !important;
  background: none !important;
}

body.pw-shell header nav ul:last-child a {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 500;
  padding: 0.4rem 0 !important;
  transition: opacity 200ms ease;
}

body.pw-shell header nav ul:last-child a:hover {
  color: #ffffff !important;
  opacity: 0.82;
}

body.pw-shell #logo {
  width: 228px;
  max-width: min(228px, 42vw);
  height: auto;
  filter: brightness(1.05);
}

/* FI | EN language toggle — same markup as _lang_toggle.html on the app pages,
   styled to match the dark shell header. powera_app.css is not loaded here so
   these rules replicate its .pw-lang-toggle block with shell-appropriate colors. */
body.pw-shell .pw-lang-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: auto !important;
  margin: 0 !important;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}

body.pw-shell .pw-lang-toggle form {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  width: auto !important;
}

body.pw-shell .pw-lang-toggle button {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  cursor: pointer !important;
  font-family: var(--font-heading) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: var(--fg-2) !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
}

body.pw-shell .pw-lang-toggle button:hover {
  color: var(--fg-1) !important;
  background: rgba(233, 90, 27, 0.12) !important;
}

body.pw-shell .pw-lang-toggle button.pw-active {
  color: var(--orange-300) !important;
}

body.pw-shell .pw-lang-toggle .pw-lang-sep {
  all: unset !important;
  color: var(--fg-3) !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* Main layout */
body.pw-shell main.container {
  padding-top: 104px;
  width: 100%;
  max-width: min(50vw, 860px);
  margin-inline: auto;
  /* Grow to absorb leftover viewport height so the footer is pushed to the
     bottom on short pages; width:100% keeps the cross-size definite so the
     centered max-width layout is unchanged inside the flex column. */
  flex: 1 0 auto;
}

body.pw-shell main.container > article {
  background: var(--pw-card-bg);
  border: 1px solid var(--pw-card-border);
  border-radius: 24px;
  padding: 1rem 1.25rem;
  backdrop-filter: blur(16px) saturate(108%);
  -webkit-backdrop-filter: blur(16px) saturate(108%);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 196, 0.05),
    0 12px 40px rgba(0, 0, 0, 0.32);
  transition:
    border-color 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.pw-shell main.container > article:hover {
  border-color: rgba(233, 90, 27, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 196, 0.06),
    0 0 0 1.5px rgba(233, 90, 27, 0.2),
    0 6px 20px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

body.pw-shell .errorlist {
  color: #e07659;
}

/* Section headings */
body.pw-shell h2 {
  color: var(--fg-1);
  border-bottom-color: var(--orange-500);
}

body.pw-shell .assets-section > h2,
body.pw-shell .add-asset-section > h2 {
  font-size: clamp(1.05rem, 2.2vw, 1.45rem) !important;
  text-align: center !important;
  white-space: nowrap !important;
  max-width: 100%;
}

/* Buttons — dark chrome + orange accent */
body.pw-shell button,
body.pw-shell input[type="submit"],
body.pw-shell input[type="button"],
body.pw-shell input[type="reset"],
body.pw-shell [role="button"],
body.pw-shell a.button {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--border-chrome) !important;
  color: var(--fg-1) !important;
  box-shadow: inset 0 1px 0 rgba(255, 226, 196, 0.04) !important;
}

body.pw-shell button:hover,
body.pw-shell input[type="submit"]:hover,
body.pw-shell a.button:hover {
  border-color: rgba(233, 90, 27, 0.32) !important;
  color: var(--orange-300) !important;
  background-color: rgba(22, 16, 12, 0.92) !important;
  box-shadow:
    0 0 0 1.5px rgba(233, 90, 27, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition:
    background 240ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
    color 140ms cubic-bezier(0, 0, 0.2, 1),
    box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.pw-shell button.primary,
body.pw-shell input[type="submit"].primary,
body.pw-shell a.button.primary {
  background: var(--orange-500) !important;
  border-color: var(--border-chrome) !important;
  color: #1a0f08 !important;
  font-weight: 600 !important;
}

body.pw-shell button.primary:hover,
body.pw-shell input[type="submit"].primary:hover,
body.pw-shell a.button.primary:hover {
  background: var(--orange-600) !important;
  color: #1a0f08 !important;
}

/* Text fields — stay dark on focus (override Pico light-theme flash) */
body.pw-shell input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="image"]):not([type="file"]),
body.pw-shell select,
body.pw-shell textarea {
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
  background-color: var(--surface-2) !important;
  color: var(--fg-1) !important;
  border: 1px solid var(--hairline-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255, 226, 196, 0.03) !important;
  outline: none !important;
}

body.pw-shell input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
body.pw-shell input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):active,
body.pw-shell select:focus,
body.pw-shell select:active,
body.pw-shell textarea:focus,
body.pw-shell textarea:active {
  background-color: var(--surface-2) !important;
  color: var(--fg-1) !important;
  border-color: rgba(233, 90, 27, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(233, 90, 27, 0.12) !important;
  outline: none !important;
}

body.pw-shell input::placeholder,
body.pw-shell textarea::placeholder {
  color: var(--fg-4) !important;
  opacity: 1 !important;
}

body.pw-shell input:-webkit-autofill,
body.pw-shell input:-webkit-autofill:hover,
body.pw-shell input:-webkit-autofill:focus,
body.pw-shell input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--fg-1) !important;
  caret-color: var(--fg-1);
  box-shadow: 0 0 0 1000px var(--surface-2) inset !important;
  border: 1px solid var(--hairline-strong) !important;
  transition: background-color 99999s ease-out;
}

body.pw-shell form label {
  color: var(--fg-label);
  font-family: var(--font-heading);
  font-weight: 700;
}

body.pw-shell form .helptext,
body.pw-shell form .helptext * {
  color: var(--fg-2);
}

/* Login / register / auth cards */
body.pw-shell .login-content,
body.pw-shell .register-content {
  background: var(--surface-1) !important;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 196, 0.04),
    0 18px 50px rgba(0, 0, 0, 0.45) !important;
}

body.pw-shell .login-image,
body.pw-shell .register-image {
  display: none !important;
}

/* Index — assets & add battery */
body.pw-shell .assets-and-add-container {
  background: transparent;
  /* Kill the generic 100vh min-height (style_powera.css) that made the
     stretched column grow taller as the viewport / zoom changed — height is
     now driven by content, so the two boxes match. */
  min-height: 0;
}

body.pw-shell .assets-section,
body.pw-shell .add-asset-section {
  background: var(--surface-1) !important;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 196, 0.04),
    0 12px 40px rgba(0, 0, 0, 0.35);
  /* Equal-height columns: let the grid stretch both (overrides the
     `height: fit-content` on .add-asset-section in style.css). */
  height: auto;
}

body.pw-shell .background-image {
  display: none !important;
}

body.pw-shell .asset-card {
  background: var(--surface-2) !important;
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
  width: 100%;
  max-width: 520px;
}

body.pw-shell .asset-card p {
  color: var(--fg-2);
  /* Long, space-less asset id must wrap rather than clip the card edge. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.pw-shell .asset-card header a,
body.pw-shell .asset-card header h3,
body.pw-shell .asset-card p strong {
  color: var(--fg-label);
  font-family: var(--font-heading);
  font-weight: 700;
}

body.pw-shell .asset-card header:hover {
  background-color: rgba(233, 90, 27, 0.1) !important;
}

body.pw-shell .asset-card header:hover a,
body.pw-shell .asset-card header:hover h3 {
  color: var(--orange-300) !important;
}

body.pw-shell .assets-grid {
  width: 100%;
  max-width: 560px;
}

/* Two-column (assets | add battery) on wider screens — UNCHANGED from the
   original desktop layout (only the breakpoint moved 900 -> 1024 so the stacked
   view below kicks in a bit sooner). */
@media (min-width: 1024px) {
  body.pw-shell .assets-and-add-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: stretch;
  }

  body.pw-shell .assets-section,
  body.pw-shell .add-asset-section {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* Smaller screens: stack the two boxes into one scrollable column at equal full
   width, widen the content column so text isn't squeezed, and shrink the logo
   so it sits in the header bar instead of floating over the boxes. Everything
   at >=1024px is left exactly as it was. */
@media (max-width: 1023px) {
  body.pw-shell main.container {
    max-width: min(92vw, 640px);
  }

  body.pw-shell .assets-and-add-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  body.pw-shell .assets-section,
  body.pw-shell .add-asset-section {
    width: 100%;
    max-width: none;
  }

  body.pw-shell #logo {
    width: auto;
    max-height: 80px;
    max-width: min(200px, 46vw);
  }

  /* Force the header group ("Kirjaudu ulos" / welcome / FI | EN) to hug its
     content and pack from the top, so it can NEVER get stretched tall and
     spread its items down onto the box — even at extreme zoom. !important +
     the child margin reset defeat whatever stretches/spreads it at these
     sizes (it isn't apparent from the static CSS). */
  body.pw-shell .pw-header-aside {
    align-self: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 4px !important;
  }
  body.pw-shell .pw-header-aside > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Welcome stays one ellipsised line so it can't wrap and push FI | EN down. */
  body.pw-shell .pw-header-welcome {
    font-size: 12px;
    line-height: 1.3;
    max-width: min(60vw, 300px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Footer */
body.pw-shell footer.container-fluid {
  background: transparent !important;
  color: var(--fg-3);
  /* Sit at the bottom of the flex column and never compress. */
  flex-shrink: 0;
}

body.pw-shell footer a {
  color: var(--fg-3);
}

/* Legacy asset detail charts */
body.pw-shell .graphcontainerblock {
  background: var(--surface-1) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--fg-1);
}

body.pw-shell .graphcontainerblock svg rect {
  stroke: var(--stroke-muted, rgba(42, 32, 24, 0.38));
}

body.pw-shell button.small[aria-current="true"] {
  background-color: var(--orange-500) !important;
  border-color: var(--border-chrome) !important;
  color: #1a0f08 !important;
}

/* Remove-asset confirmation modal (My assets + shared partial) */
.pw-remove-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.pw-remove-modal[hidden] {
  display: none;
}

.pw-remove-modal__panel {
  width: 100%;
  max-width: 320px;
  padding: 28px 24px 20px;
  border-radius: 16px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
  background: var(--surface-1, #1a1510);
  text-align: center;
}

.pw-remove-modal__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg-1, #f4ece2);
  line-height: 1.4;
}

.pw-remove-modal__body {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--fg-3, #8a7c6f);
  line-height: 1.45;
}

.pw-remove-modal__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.pw-remove-modal__btn {
  flex: 1;
  appearance: none;
  padding: 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.pw-remove-modal__btn--cancel {
  background: var(--fill-subtle, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.08));
  color: var(--fg-2, #c4b8a8);
}

.pw-remove-modal__btn--danger {
  background: rgba(224, 118, 89, 0.12);
  border: 1px solid rgba(224, 118, 89, 0.25);
  color: #e07659;
}

@media (max-width: 767px) {
  body.pw-shell main.container {
    padding-top: 100px;
  }

  body.pw-shell:has(.pw-header-welcome) main.container {
    padding-top: 128px;
  }

  body.pw-shell header nav.container {
    flex-direction: column;
    align-items: stretch;
    /* Override style.css's 2.5rem top pad so the right-hand group sits at the
       top — it's right-aligned and the logo is absolute on the left, so they
       don't collide. */
    padding-top: 0.75rem !important;
  }

  body.pw-shell header nav > ul:first-child {
    position: absolute;
    top: 0;
    left: 0;
  }

  body.pw-shell .pw-header-aside {
    width: 100%;
    max-width: none;
    /* Top-right like the wide-screen layout (no extra drop). */
    padding-top: 0;
  }
}