/* ----- My Account area -----
   Covers Profile, Orders, Verify Email, Manage Notifications and Device Info.
   Every rule is scoped to .account-area so nothing else on the site is affected.
   Loaded per-page via the layout's "Styles" section, not globally. */

.account-area h1,
.account-area h2,
.account-area h3,
.account-area h4,
.account-area h5,
.account-area h6 {
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Account headings opt into fw-bold in a few places; the account tone calls for
   the lighter weight, so win on specificity rather than editing every view. */
.account-area h1.fw-bold,
.account-area h2.fw-bold,
.account-area h3.fw-bold,
.account-area h4.fw-bold,
.account-area h5.fw-bold,
.account-area h6.fw-bold {
    font-weight: 500;
}

/* Long unbroken values (user agent strings, emails) must never force a scrollbar. */
.account-area {
    overflow-wrap: break-word;
}

/* Manage Notifications: keep search and bulk actions pinned above the list. */
.account-area .notification-list-toolbar {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Full-width rows with a comfortable tap target for the whole label.
   Bootstrap's .form-check positions the input with padding-left: 1.5em on the
   row plus a matching negative margin and float on the input. Overriding the
   row padding breaks that, so the row is laid out with flex instead and the
   float/offset are reset. */
.account-area .notification-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.account-area .notification-row .form-check-input {
    flex: 0 0 auto;
    float: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    margin-left: 0;
}

.account-area .notification-row .form-check-label {
    flex: 1 1 auto;
    margin-bottom: 0;
    padding-left: 0;
    cursor: pointer;
    user-select: none;
}

/* Device Info: label/value pairs, side by side on wide screens. */
.account-area .account-summary {
    margin-bottom: 0;
}

.account-area .account-summary-row {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 0.25rem 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.account-area .account-summary-row dt {
    font-weight: 600;
}

.account-area .account-summary-row dd {
    margin-bottom: 0;
    min-width: 0;
}

/* User agent strings have no natural break opportunities. */
.account-area .account-summary-value-wrap {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Device Info page heading icon, sized to replace the old 50px bitmap. */
.account-area .device-info-icon {
    font-size: 48px;
    line-height: 1;
    color: #6c757d;
}

@media (max-width: 575.98px) {
    .account-area .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Tighten the generous desktop card padding on small screens. */
    .account-area .p-4,
    .account-area .p-md-5 {
        padding: 1rem !important;
    }

    .account-area .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* Primary form and action buttons go full width on mobile only.
       btn-sm is excluded: those are inline row actions (Save/Cancel, card
       controls) that are meant to sit side by side. */
    .account-area .btn-primary:not(.btn-sm),
    .account-area .btn-outline-secondary:not(.btn-sm),
    .account-area .account-action-btn {
        display: block;
        width: 100%;
    }

    /* Comfortable touch targets. */
    .account-area .btn,
    .account-area .nav-link,
    .account-area .form-control,
    .account-area .form-select {
        min-height: 44px;
    }

    .account-area .btn-sm {
        min-height: 40px;
    }

    .account-area input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Profile: the tab switcher spans the full width, each tab sharing it evenly. */
    .account-area .account-tabs {
        flex-wrap: nowrap;
    }

    .account-area .account-tabs .nav-item {
        flex: 1 1 0;
    }

    .account-area .account-tabs .nav-link {
        width: 100%;
        text-align: center;
    }

    /* Orders: stack the order card header so badges, price and chevron don't crowd. */
    .account-area .order-history-toggle {
        flex-wrap: wrap;
    }

    /* Orders: keep the totals list from being pushed off-screen. */
    .account-area .order-history-card dl[style] {
        min-width: 0 !important;
        width: 100%;
    }

    /* Device Info: label above value instead of a single run-on line. */
    .account-area .account-summary-row {
        display: flex;
        flex-direction: column;
    }
}

/* ----- Dark mode -----
   darkmode.css only inverts .bg-white / .bg-light, so the surfaces and borders
   introduced above need their own overrides. This sheet loads after
   darkmode.css (it renders in the layout's "Styles" section), so no !important
   is required. */
body.darkmode--activated .account-area .notification-list-toolbar {
    background-color: #1e1e1e;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

body.darkmode--activated .account-area .notification-row,
body.darkmode--activated .account-area .account-summary-row {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* ----- Loading skeleton -----
   Bootstrap placeholders only size horizontally via col-*, so the heights that make
   the skeleton resemble the real tabs and form fields are set here. */
.account-area .account-skeleton-tab {
    width: 6rem;
    height: 2.25rem;
}

.account-area .account-skeleton-field {
    height: 2.5rem;
    border-radius: 0.375rem;
}