/* ============================================================
   Account section — order list, identity rail, profile form

   This is the design layer from the account preview, ported. It is
   deliberately NOT "Bootstrap with a few utilities": the look comes
   from its own type scale, generous padding and uppercase micro-labels,
   and none of that survives being expressed in utility classes.

   Colour is the one thing that stays on Bootstrap variables. This
   module is shared with CyclePassion, Gijsbrechts, Qosmo, VanDessel
   and Shop, so a hardcoded accent would leak Schrieck's gold into all
   of them. Everything else — spacing, weight, rhythm — is ours.
   ============================================================ */

.account-section,
.account-card {
    /* Serif for the values that carry the page. Bootstrap exposes no variable
       for the heading font, so themes set this themselves — see
       account-theme.css in the Schrieck's theme, which points it at Fraunces.
       Without that override this falls back to a generic serif, which reads as
       a different typeface next to the headings. */
    --account-serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;

    /* --bs-info is Bootstrap's #0dcaf0, far too loud for a status stripe next
       to muted text. Pulled toward the body colour so it lands on a deep teal
       while still following whatever the tenant's theme sets. */
    --account-upcoming: color-mix(in srgb, var(--bs-info) 55%, var(--bs-body-color));

    --account-gap: 0.75rem;
    --account-pad: 1.125rem 1.25rem;
    --account-radius: 0.75rem;
}

/* ---- Shared atoms ----------------------------------------- */
.account-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

.account-value {
    font-family: var(--account-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.account-num { font-variant-numeric: tabular-nums; }

.account-card {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--account-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

/* ---- Identity rail ---------------------------------------- */
.account-identity {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.25rem 1.125rem;
}

.account-avatar {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--account-serif);
    font-size: 1.0625rem;
    font-weight: 600;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.22);
}

.account-identity-mail {
    /* Long addresses wrap instead of widening the rail and pushing the
       content column off the grid. */
    overflow-wrap: anywhere;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.account-identity-meta {
    display: flex;
    gap: 1.5rem;
}
.account-identity-meta > div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.account-identity-meta .account-value { font-size: 1.125rem; }

/* ---- Rail navigation -------------------------------------- */
/* Inset rounded items rather than Bootstrap's list-group: that renders
   full-bleed square rows whose active state is a bar running into the card
   edges, which fights the rounded card it sits in. */
.account-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.4375rem;
}

.account-nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 0.6875rem;
    border: 0;
    border-radius: 0.375rem;
    background: none;
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: var(--bs-secondary-color);
    transition: background-color 0.14s ease, color 0.14s ease;
}
@media (prefers-reduced-motion: reduce) {
    .account-nav-item { transition: none; }
}

.account-nav-item i { width: 1rem; text-align: center; opacity: 0.85; }

.account-nav-item:hover,
.account-nav-item:focus-visible {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.account-nav-item.is-active {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}
.account-nav-item.is-active i { opacity: 1; }

.account-nav-item.is-danger { color: var(--bs-danger); }
.account-nav-item.is-danger:hover {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
}

.account-nav-foot {
    border-top: 1px solid var(--bs-border-color);
    padding: 0.4375rem;
}

/* ---- Summary tiles ---------------------------------------- */
.account-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--account-gap);
    margin-bottom: 1.25rem;
}
@media (max-width: 620px) {
    /* Two up, not one: three stacked tiles push the actual list below the
       fold on a phone. */
    .account-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.account-tile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--account-pad);
}
.account-tile .account-value { font-size: 1.5rem; }
/* A product name is not a number: same slot, smaller type, so a long name
   does not blow the tile open. */
.account-tile .account-value-text {
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}
.account-tile .account-sub {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* ---- Order cards ------------------------------------------ */
/* Replaces the five-column table: a table cannot degrade usefully on a
   phone, which is where most of these orders are placed. */
.account-orders {
    display: flex;
    flex-direction: column;
    gap: var(--account-gap);
}

.account-order {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr);
    overflow: hidden;
    transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
@media (prefers-reduced-motion: reduce) {
    .account-order { transition: none; }
}
.account-order:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .05);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}

/* Status reads at a glance while scrolling, before any text is parsed. */
.account-order-stripe { background: var(--bs-secondary-bg); }
.account-order[data-state="finalized"] .account-order-stripe { background: color-mix(in srgb, var(--bs-success) 70%, var(--bs-body-color)); }
.account-order[data-state="upcoming"]  .account-order-stripe { background: var(--account-upcoming); }
.account-order[data-state="pending"]   .account-order-stripe { background: color-mix(in srgb, var(--bs-warning) 70%, var(--bs-body-color)); }

.account-order-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: var(--account-pad);
}
.account-order-head .account-value { font-size: 1.1875rem; }
/* Same specificity as the rule above, declared after it — the amount is the
   one thing that should outweigh the date, and a plain .account-order-total
   selector silently lost to it. */
.account-order-head .account-order-total { font-size: 1.4375rem; }

.account-order-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.account-order-lines {
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.account-order-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9375rem;
}
.account-order-line .qty {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--bs-primary);
    font-size: 0.875rem;
}

.account-order-foot {
    padding: 0.8125rem 1.25rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}
@media (max-width: 560px) {
    .account-order-foot > * { flex: 1; }
    .account-order-foot .btn { width: 100%; }
}

/* ---- Profile form ----------------------------------------- */
/* Orchard renders these fields from the content definition, so this styles
   the markup it emits rather than markup of our own.
   The wrapper we control has a single child (.edit-container); the fields sit
   four levels down as siblings inside .content-part-wrapper, each carrying
   .field-wrapper plus a per-field class. So the grid goes on that inner
   container, not on ours — spacing set any higher up simply never reached
   the fields, which kept them on Bootstrap's own mb-3. */
.account-profile-fields .content-part-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem 1rem;
    margin-bottom: 0 !important;
}

/* Full width by default, so a field a tenant adds later behaves sensibly
   without needing a rule of its own. */
.account-profile-fields .field-wrapper {
    margin-bottom: 0 !important;
    grid-column: 1 / -1;
}

/* First and last name are short and belong together — the only pair worth
   putting side by side. */
.account-profile-fields .field-wrapper-customer-first-name,
.account-profile-fields .field-wrapper-customer-last-name {
    grid-column: auto;
}

@media (max-width: 620px) {
    .account-profile-fields .content-part-wrapper { grid-template-columns: minmax(0, 1fr); }
    .account-profile-fields .field-wrapper-customer-first-name,
    .account-profile-fields .field-wrapper-customer-last-name { grid-column: 1 / -1; }
}

.account-profile-fields label {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
}

.account-profile-fields .form-control {
    padding: 0.5625rem 0.6875rem;
    background: var(--bs-tertiary-bg);
}
.account-profile-fields .form-control:focus {
    background: var(--bs-body-bg);
}

.account-profile-fields .hint {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

/* The Is Company checkbox reads as a setting, not as another text field, and
   the two fields it reveals belong visibly to it — hence the shared left rule
   and indent rather than them floating loose under the contact details. */
#Customer_IsCompany_Value_FieldWrapper {
    padding: 0.875rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background: var(--bs-tertiary-bg);
    margin-top: 0.5rem;
}
#Customer_IsCompany_Value_FieldWrapper label {
    font-size: 0.875rem;
    margin-bottom: 0;
    font-weight: 600;
}

.account-profile-fields .field-wrapper-customer-company-name,
.account-profile-fields .field-wrapper-customer-v-a-t-number {
    padding-left: 1rem;
    border-left: 2px solid var(--bs-border-color);
}

/* Save sits on its own bar, so it reads as the end of the form rather than as
   one more thing in the stack of fields. */
.account-card-foot {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    border-radius: 0 0 var(--account-radius) var(--account-radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Company fields are revealed by that checkbox. Hidden with a class rather
   than an inline style so that if the script never runs the fields stay
   visible and fillable instead of becoming unreachable. */
.account-field-hidden { display: none !important; }