/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body.app-wide main {
  max-width: none !important;
  padding: 0 !important;
}

.admin-main {
  max-width: none !important;
  padding: 0 !important;
}

/* The house left-hand rail (see the left-vertical-menu skill). The rail carries
   a ground of its own so the active band - parchment, which is the page's own
   colour - is actually visible on it. A see-through rail on a parchment page
   renders no band at all however right the CSS looks. */
.rail-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100vh - 4rem);
}

.rail {
  padding: 1.375rem 0;
  border-right: 1px solid #e5dfd3;
  background: #ffffff;
}

.rail-heading {
  margin: 0 1.25rem 0.75rem;
  color: #6d665d;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 0.75rem;
}

.rail-item {
  display: block;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.rail-item:hover {
  background: #f6f1e7;
  color: #1f4d3a;
}

.rail-foot {
  margin: 1.25rem 0.75rem 0;
  padding-top: 1rem;
  border-top: 1px solid #e5dfd3;
}

.rail-body {
  min-width: 0;
  padding: 1.5rem 2rem 3rem;
}

/* Editing on the left, what it produces on the right, and the result stays in
   view while the form scrolls. */
.editor-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.rail-preview {
  position: sticky;
  top: 1.5rem;
}

.rail-preview-frame {
  display: block;
  width: 100%;
  height: 30rem;
  border: 0;
  /* A preview, not a second browser. Clicking into it navigated it away from
     the shopfront with no way back, so the way in is the Open link. */
  pointer-events: none;
}

@media (max-width: 1100px) {
  .editor-split {
    grid-template-columns: 1fr;
  }

  .rail-preview {
    position: static;
  }
}

/* A vertical rail on a phone is a list you scroll past to reach the thing you
   came for, so it runs along the top instead. */
@media (max-width: 720px) {
  .rail-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .rail {
    padding: 0.75rem 0;
    border-right: 0;
    border-bottom: 1px solid #e5dfd3;
    /* Without this the horizontal rail does not scroll, it WIDENS THE PAGE. A
       grid item defaults to min-width:auto, so .rail takes its min-content
       from its nowrap items and the overflow-x on .rail-nav never gets a
       smaller box to scroll inside. Billing's four labels measure about 544px,
       so every phone narrower than that scrolled the whole document sideways
       with the panel clipped. Measured and fixed at review, 2026-08-25.
       If you are checking this: 600px passes either way, because 600 > 544.
       Test at 390, or read the document's scrollWidth. */
    min-width: 0;
  }

  .rail-nav {
    flex-direction: row;
    gap: 0.125rem;
    overflow-x: auto;
  }

  .rail-item {
    width: auto;
    white-space: nowrap;
  }

  .rail-foot {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  .rail-body {
    padding: 1.25rem 1.25rem 2.5rem;
  }
}

.admin-rail-layout {
  display: grid;
  grid-template-columns: 14.5rem minmax(0, 1fr);
  min-height: calc(100vh - 4rem);
}

.admin-rail {
  padding: 1.5rem 0;
  border-right: 1px solid #e5dfd3;
}

.admin-rail-heading {
  margin: 0 1.25rem 0.5rem;
  color: #6d665d;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-rail ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-rail a {
  display: block;
  padding: 0.625rem 1.25rem;
  color: #2b2620;
  font-size: 0.9375rem;
  text-decoration: none;
}

.admin-rail a:hover {
  background: #f6f1e7;
  color: #1f4d3a;
  text-decoration: none;
}

.admin-rail a.admin-rail-current {
  background: #f6f1e7;
  font-weight: 600;
}

.admin-rail-body {
  min-width: 0;
  padding: 2rem;
}

.admin-dashboard-container {
  max-width: 96rem;
}

.admin-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1rem;
}

.admin-user-grid-single {
  grid-template-columns: 1fr;
}

.admin-users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.admin-user-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-user-search input[type="text"] {
  width: min(24rem, 100%);
  padding: 0.625rem 0.875rem;
  border: 1px solid #e5dfd3;
  border-radius: 0.75rem;
  background: #fff;
  color: #2b2620;
  font-size: 0.875rem;
}

.admin-user-search input[type="submit"] {
  padding: 0.625rem 0.875rem;
  border: 0;
  border-radius: 0.75rem;
  background: #1f4d3a;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.admin-user-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid #e5dfd3;
  border-radius: 0.75rem;
  background: #fff;
}

.admin-gem-domain,
.admin-gem-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.admin-user-application {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: #f6f1e7;
  border: 1px solid #e5dfd3;
}

.admin-user-application-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: #2b2620;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.admin-user-card-gems {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: 1rem;
}

.admin-gem-row {
  display: grid;
  grid-template-columns: minmax(11rem, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid #e5dfd3;
}

.admin-gem-title {
  color: #2b2620;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.admin-gem-title:hover {
  color: #b08943;
}

.listing-editor {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

.gem-editor-mobile-actions {
  display: none;
}

/* A colour input fills whatever box it is given, so sizing IS the fix here
   (board #246). The inner padding a browser puts around the swatch has to go
   too, or a 2.75rem well shows a 1.5rem colour in a white surround. */
.colour-well {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid #e5dfd3;
  border-radius: 0.75rem;
  background: none;
  cursor: pointer;
}

.colour-well::-webkit-color-swatch-wrapper {
  padding: 0;
}

.colour-well::-webkit-color-swatch,
.colour-well::-moz-color-swatch {
  border: none;
  border-radius: 0.625rem;
}

/* The desktop half of "Save should float" (board #241). The phone already had
   a fixed bar; on desktop the only Save sat at the foot of the rail, off
   screen for the whole of a long section. */
.gem-editor-save-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  border-top: 1px solid #e5dfd3;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  padding: 0.75rem 1rem;
}

.gem-editor-save-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

/* The bar is fixed, so the last field of a section would otherwise sit under
   it and be unreachable. */
.gem-editor-content {
  padding-bottom: 6rem;
}

.gem-editor-rail {
  min-height: auto;
  align-self: flex-start;
}

.gem-editor-rail-nav button {
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.gem-editor-rail-nav button:hover {
  background: #f6f1e7;
  color: #1f4d3a;
  text-decoration: none;
}

.gem-editor-rail-nav button[aria-current="page"] {
  background: #f6f1e7;
  color: #2b2620;
  font-weight: 600;
}

.choice-rule-row {
  display: grid;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  padding: 0.875rem;
  border: 1px solid #e5dfd3;
  border-radius: 0.75rem;
  background: #faf8f3;
}

.choice-rule-clause {
  display: grid;
  align-items: center;
  gap: 0.5rem;
}

.choice-rule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.choice-rule-number {
  margin: 0;
  color: #2b2620;
  font-size: 0.8125rem;
  font-weight: 700;
}

.choice-rule-if {
  grid-template-columns: auto minmax(10rem, 0.85fr) auto minmax(10rem, 1fr);
}

.choice-rule-then {
  grid-template-columns: auto minmax(9rem, 0.45fr) minmax(0, 1fr);
}

.choice-rule-target {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.choice-rule-clause select {
  min-width: 0;
  background: #fff;
}

.choice-rule-word {
  color: #746f66;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.choice-rule-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #fff;
  border: 1px solid #e5dfd3;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.choice-rule-remove:hover {
  background: #fdf0eb;
  border-color: #c9633d;
}

.choice-rule-preview,
.choice-rule-message {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .admin-rail-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .admin-rail {
    padding: 0.75rem 0;
    border-right: 0;
    border-bottom: 1px solid #e5dfd3;
  }

  .admin-rail-heading {
    margin-bottom: 0.4rem;
  }

  .admin-rail ul {
    display: flex;
    gap: 0.125rem;
    overflow-x: auto;
  }

  .admin-rail a {
    padding: 0.5rem 1rem;
    white-space: nowrap;
  }

  .admin-rail-body {
    padding: 1.25rem;
  }

  .admin-user-grid {
    grid-template-columns: 1fr;
  }

  .admin-user-search {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .admin-user-search input[type="text"] {
    width: 100%;
  }

  .admin-gem-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .listing-editor {
    display: block;
  }

  .gem-editor-rail {
    display: none;
  }

  .gem-editor-content {
    padding-bottom: 9.5rem;
  }

  .gem-editor-heading {
    margin-bottom: 1rem;
  }

  .choice-rule-row {
    gap: 0.625rem;
    padding: 0.75rem;
  }

  .choice-rule-if {
    grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .choice-rule-then {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .choice-rule-target {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .gem-editor-save-bar {
    display: none;
  }

  .gem-editor-mobile-actions {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    border-top: 1px solid #e5dfd3;
    background: rgba(255, 255, 255, 0.96);
    padding: 0.75rem;
    backdrop-filter: blur(12px);
  }

  .gem-editor-mobile-actions-inner {
    max-width: 42rem;
    margin: 0 auto;
  }

  .gem-editor-mobile-action-links {
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
}