/* ============================================================================
   kd-pn-account.css · Account-shell pages (peaknetwork.se)
   ----------------------------------------------------------------------------
   The two-column account shell from the reference design
   (peaknetwork.se/peaknetwork/orders.html, read read-only as grounding):
   sticky sidebar nav on the left, page content on the right. Linked ONLY
   from the templates that render inside that shell (today: the commerce
   order-history override and the accounts/_account_nav.html skin it
   includes), never from base_shop.html -- catalogue and checkout pages
   have no account sidebar and must not pay for these rules.

   The mock drives its active nav row from a [data-pn-acct] attribute
   stamped by inline JS before first paint. This package's nav is
   SERVER-rendered from `account_nav` (accounts.account_nav_services),
   where each entry already knows whether it is current -- so the active
   row is a plain `.is-active` class and the attribute machinery is
   deliberately not carried over: no JS, no pre-paint flash, works with
   scripts off.

   Every colour, spacing, radius and type value is a --kd-* custom
   property from kd-tokens.css ("never invent values"). The only literal
   lengths are structural -- the sidebar column, the order-row grid -- the
   same call kd-commerce.css's 340px summary rail already makes.

   Saved-address card rules (.kd-pn-acct__addr*) live in the sibling file
   kd-pn-account-addr.css, split out once this file reached DOCTRINE.md's
   300-line cap -- see that file's own header for why and for what loads
   it.
   ============================================================================ */

/* ===== Page shell -- sidebar + main ===== */
.kd-pn-acct {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--kd-s-9);
    align-items: start;
}
.kd-pn-acct__nav {
    position: sticky;
    top: var(--kd-s-8);
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-radius);
    background: var(--kd-bg-alt);
    padding: var(--kd-s-1);
}
.kd-pn-acct__nav-head {
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-0);
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    padding: var(--kd-s-3) var(--kd-s-4) var(--kd-s-1);
}
.kd-pn-acct__nav a {
    display: flex;
    align-items: center;
    gap: var(--kd-s-2);
    /* 44px, the accessible touch minimum -- same floor kd-btn's base rule
       keeps, so the LayoutGuard sweep can cover this nav without a carved
       exception. */
    min-height: 44px;
    padding: var(--kd-s-3) var(--kd-s-4);
    color: var(--kd-fg-soft);
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-1);
    letter-spacing: 0.02em;
    border-left: 2px solid transparent;
    transition: background var(--kd-dur) var(--kd-ease), color var(--kd-dur) var(--kd-ease);
}
.kd-pn-acct__nav a:hover { background: var(--kd-bg); color: var(--kd-fg); }
.kd-pn-acct__nav a.is-active {
    background: var(--kd-bg);
    color: var(--kd-fg);
    border-left-color: var(--kd-fg);
}
.kd-pn-acct__nav-sep { height: var(--kd-border-w); background: var(--kd-border); margin: var(--kd-s-2) 0; }
/* The sign-out control is a POST form styled to sit among the links --
   a GET logout is refusable by core_auth for CSRF-adjacent reasons, so
   the markup cannot simply be another <a>. */
.kd-pn-acct__nav form { display: contents; }
.kd-pn-acct__nav button {
    display: flex;
    align-items: center;
    gap: var(--kd-s-2);
    width: 100%;
    min-height: 44px;
    padding: var(--kd-s-3) var(--kd-s-4);
    color: var(--kd-fg-soft);
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-1);
    letter-spacing: 0.02em;
    text-align: left;
    background: none;
    border: 0;
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: background var(--kd-dur) var(--kd-ease), color var(--kd-dur) var(--kd-ease);
}
.kd-pn-acct__nav button:hover { background: var(--kd-bg); color: var(--kd-fg); }

/* ===== Dashboard greeting (account_dashboard.html only) ===== */
.kd-pn-acct__greet { margin: 0 0 var(--kd-s-6); }
.kd-pn-acct__greet-eyebrow {
    display: block;
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-0);
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
    margin-bottom: var(--kd-s-1);
}
.kd-pn-acct__greet-title {
    margin: 0;
    font-size: clamp(24px, 3vw, 36px);
    font-weight: var(--kd-w-semi);
    color: var(--kd-fg);
    letter-spacing: var(--kd-track-snug);
}

/* ===== One order row in the history list ===== */
.kd-pn-acct__order {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr) 120px 110px;
    gap: var(--kd-s-3);
    align-items: center;
    padding: var(--kd-s-4);
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-radius);
    background: var(--kd-bg);
    color: inherit;
    margin-bottom: var(--kd-s-2);
    transition: background var(--kd-dur) var(--kd-ease);
}
.kd-pn-acct__order:hover { background: var(--kd-bg-alt); }
.kd-pn-acct__order-id {
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-1);
    letter-spacing: 0.04em;
    color: var(--kd-fg);
}
.kd-pn-acct__order-date {
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-0);
    color: var(--kd-fg-muted);
}
.kd-pn-acct__order-summary { font-size: var(--kd-text-1); color: var(--kd-fg-soft); }
.kd-pn-acct__order-total {
    font-family: var(--kd-font-mono);
    font-weight: var(--kd-w-semi);
    color: var(--kd-fg);
    text-align: right;
    white-space: nowrap;
}

/* ===== Info card (order detail: addresses, order facts) ===== */
.kd-pn-acct__card {
    display: flex;
    flex-direction: column;
    gap: var(--kd-s-2);
    padding: var(--kd-pad-card);
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-radius);
    background: var(--kd-bg);
}
.kd-pn-acct__card-title {
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-0);
    letter-spacing: var(--kd-track-mono);
    text-transform: uppercase;
    color: var(--kd-fg-muted);
}
.kd-pn-acct__card p { margin: 0; font-size: var(--kd-text-1); color: var(--kd-fg-soft); line-height: 1.6; }
.kd-pn-acct__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kd-s-4);
}
/* Stat variant of the same card (pricelist detail's "Line items" /
   "Avg. contract saving" summary row) -- a big mono value plus a small
   caption, still the .kd-pn-acct__card shell so the pricelist and order
   surfaces share one card idiom rather than two. */
.kd-pn-acct__card-value {
    font-family: var(--kd-font-mono);
    font-size: 32px;
    font-weight: var(--kd-w-semi);
    color: var(--kd-fg);
    line-height: 1;
}
.kd-pn-acct__card-meta { font-size: var(--kd-text-0); color: var(--kd-fg-muted); }
.kd-pn-acct__card-cta { font-size: var(--kd-text-1); color: var(--kd-fg); text-decoration: underline; }
.kd-pn-acct__card-cta:hover { color: var(--kd-accent); }
.kd-pn-acct__cards--stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ===== Wishlist / pricelist row (reused by both: a pricelist link on
   the list page, a contract line item on the detail page) ===== */
.kd-pn-acct__pricelist {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px 120px 120px;
    gap: var(--kd-s-3);
    align-items: center;
    padding: var(--kd-s-4);
    border: var(--kd-border-w) solid var(--kd-border);
    border-radius: var(--kd-radius);
    background: var(--kd-bg);
    color: inherit;
    margin-bottom: var(--kd-s-2);
    transition: background var(--kd-dur) var(--kd-ease);
}
.kd-pn-acct__pricelist:hover { background: var(--kd-bg-alt); }
.kd-pn-acct__pricelist-meta {
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-0);
    color: var(--kd-fg-muted);
    text-align: right;
    white-space: nowrap;
}
.kd-pn-acct__pricelist-cta {
    /* -2 = the START of the LAST column, whatever the row's real field
       count -- the list page's row carries one meta column (validity),
       the detail page's carries two (list/contract price) plus a
       saving figure that reuses this same class; both must still end
       flush with the row's right edge. */
    grid-column: -2;
    font-family: var(--kd-font-mono);
    font-size: var(--kd-text-1);
    color: var(--kd-fg);
    text-align: right;
    white-space: nowrap;
}

/* ===== Mobile ===== */
@media (max-width: 720px) {
    .kd-pn-acct { grid-template-columns: minmax(0, 1fr); gap: var(--kd-s-6); }
    .kd-pn-acct__nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
    .kd-pn-acct__nav::-webkit-scrollbar { display: none; }
    .kd-pn-acct__nav a, .kd-pn-acct__nav button {
        flex-shrink: 0;
        white-space: nowrap;
        border-left: 0;
        border-bottom: 2px solid transparent;
    }
    .kd-pn-acct__nav a.is-active { border-left-color: transparent; border-bottom-color: var(--kd-fg); }
    .kd-pn-acct__nav-head, .kd-pn-acct__nav-sep { display: none; }
    .kd-pn-acct__order { grid-template-columns: minmax(0, 1fr) auto; }
    .kd-pn-acct__order-total { grid-column: 2; }
    .kd-pn-acct__cards, .kd-pn-acct__cards--stats { grid-template-columns: minmax(0, 1fr); }
    /* One column, every field stacked and left-aligned -- simpler and
       safer than trying to keep a multi-track grid (the list page's row
       has 1 meta column, the detail page's has 2 plus a saving figure;
       hiding fields by position to make either fit read the ESSENTIAL
       "your price vs. list price" comparison off the detail page on a
       phone, which is the one thing this surface exists to show). */
    .kd-pn-acct__pricelist { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .kd-pn-acct__pricelist-meta, .kd-pn-acct__pricelist-cta {
        grid-column: auto;
        text-align: left;
    }
}