/*
 * Component styles for the public device-owner account area (My Account,
 * My Devices & Ownership) -- part of the mobile UI/UX redesign pass.
 * Reuses existing tokens/classes (.public-card, .public-btn-secondary,
 * .badge, .reference-badge, --gv-* custom properties) rather than
 * introducing a second design language; this file only adds the
 * component shapes that didn't exist yet (device card sections, account
 * action tiles, empty states).
 */

/* -------------------------------------------------------------------
   Page header with a trailing action button -- wraps instead of
   cramming the button against the heading on narrow screens, and lets
   the button go full-width rather than forcing it beside the heading.
------------------------------------------------------------------- */
.public-page-header-action {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}
.public-page-header-action > .public-btn { flex-shrink: 0; }

@media (max-width: 480px) {
    .public-page-header-action { flex-direction: column; align-items: stretch; }
    .public-page-header-action > .public-btn { width: 100%; }
}

/* -------------------------------------------------------------------
   My Account header + action grid
------------------------------------------------------------------- */
.account-header-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 0;
}

.account-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--gv-primary, #2563EB);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 750;
    font-size: 20px;
    flex-shrink: 0;
}

.account-name { font-size: 16px; font-weight: 750; color: var(--gv-text, #111827); line-height: 1.3; }
.account-email { font-size: 12.5px; color: var(--gv-muted, #8792a2); margin-top: 2px; overflow-wrap: anywhere; }

.account-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-top: 0;
}

@media (max-width: 420px) {
    .account-actions-grid { grid-template-columns: 1fr; }
}

.account-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--gv-border, #e2e8f0);
    background: var(--gv-background, #f8fafc);
    color: var(--gv-text, #111827);
    font-weight: 650;
    font-size: 13.5px;
    text-decoration: none;
    min-height: 48px;
}
.account-action-btn:active { background: color-mix(in srgb, var(--gv-primary, #2563EB) 8%, var(--gv-background, #f8fafc)); }
.account-action-btn i { font-size: 17px; color: var(--gv-primary, #2563EB); width: 20px; text-align: center; flex-shrink: 0; }
.account-action-btn-danger { color: var(--gv-danger, #dc2626); }
.account-action-btn-danger i { color: var(--gv-danger, #dc2626); }

/* -------------------------------------------------------------------
   Compact empty state -- one shared shape for My Reports/Sightings/
   Disputes and the devices list, instead of a plain .public-hint line
   or an oversized empty box.
------------------------------------------------------------------- */
.public-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 16px;
    gap: 4px;
}

.public-empty-state-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gv-background, #f8fafc);
    color: var(--gv-muted, #94a3b8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 6px;
}

.public-empty-state-title { font-size: 14px; font-weight: 700; color: var(--gv-text, #111827); }
.public-empty-state-desc { font-size: 12.5px; color: var(--gv-muted, #8792a2); max-width: 34ch; }

.public-empty-state .public-btn,
.public-empty-state .public-btn-secondary {
    margin-top: 12px;
    width: auto;
    padding: 0 18px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
}

/* -------------------------------------------------------------------
   Device card -- replaces the previous ad-hoc inline-styled block.
   Grouped sections (identity / identifiers / actions / ownership),
   compact labels, readable monospace values.
------------------------------------------------------------------- */
.device-card {
    padding: 16px 0;
    border-top: 1px solid var(--gv-border, #edf0f4);
}
.device-card:first-child { border-top: none; padding-top: 2px; }

.device-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.device-card-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.device-card-title { font-size: 15.5px; font-weight: 750; color: var(--gv-text, #111827); }

.device-card-meta {
    font-size: 11.5px;
    color: var(--gv-muted, #8792a2);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.device-card-section { margin-top: 14px; }

.device-card-section-label {
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gv-muted, #9aa4b2);
    margin-bottom: 6px;
}

.device-identifiers { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.device-identifier { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; min-width: 0; }
.device-identifier-label { color: var(--gv-muted, #8792a2); flex-shrink: 0; }
.device-identifier-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--gv-text, #172033);
    text-align: right;
    overflow-wrap: anywhere;
    min-width: 0;
    flex: 1 1 auto;
}

.device-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.device-actions .public-btn-secondary,
.device-actions .device-btn-danger {
    flex: 1 1 auto;
    min-width: 118px;
    width: auto;
    padding: 0 12px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 12.5px;
    text-align: center;
}

.device-btn-danger {
    background: color-mix(in srgb, var(--gv-danger, #dc2626) 8%, white);
    border: 1px solid color-mix(in srgb, var(--gv-danger, #dc2626) 30%, white);
    color: var(--gv-danger, #dc2626);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.device-btn-danger:active { background: color-mix(in srgb, var(--gv-danger, #dc2626) 14%, white); }

@media (max-width: 420px) {
    .device-actions .public-btn-secondary,
    .device-actions .device-btn-danger { flex: 1 1 100%; }
}

.device-ownership-status { font-size: 13px; color: var(--gv-text, #172033); }
.device-ownership-status form { display: inline; }
.device-ownership-status .device-link-btn {
    background: none; border: none; color: var(--gv-danger, #a52b2b);
    font-size: 12px; font-weight: 650; cursor: pointer; padding: 0;
}

.device-transfer-form { display: flex; flex-direction: column; gap: 8px; }
.device-transfer-hint { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gv-muted, #8792a2); }
.device-transfer-row { display: flex; gap: 8px; flex-wrap: wrap; }
.device-transfer-row input[type="email"] { flex: 1; min-width: 180px; }

.device-transfer-form input[type="email"],
.device-transfer-form input[type="text"],
.device-end-ownership-body input[type="text"] {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--gv-border, #dce2ea);
    border-radius: 9px;
    font-size: 13.5px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.device-btn {
    width: auto;
    padding: 0 16px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13px;
    white-space: nowrap;
}

.device-end-ownership summary {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--gv-danger, #a52b2b);
    cursor: pointer;
    list-style: none;
}
.device-end-ownership summary::-webkit-details-marker { display: none; }
.device-end-ownership-body {
    margin-top: 8px;
    padding: 12px;
    background: color-mix(in srgb, var(--gv-danger, #dc2626) 5%, white);
    border: 1px solid color-mix(in srgb, var(--gv-danger, #dc2626) 20%, white);
    border-radius: 10px;
}

.device-history summary {
    font-size: 12.5px;
    color: var(--gv-muted, #687386);
    cursor: pointer;
    list-style: none;
}
.device-history summary::-webkit-details-marker { display: none; }
.device-history-item {
    font-size: 12px;
    color: var(--gv-muted, #687386);
    padding: 6px 0;
    border-top: 1px solid var(--gv-border, #edf0f4);
}

/* -------------------------------------------------------------------
   Step-up confirmation box -- the "Confirm it's really you" wrapper
   around an OTP/PIN step-up form, used identically on the transfer
   accept and closure-request accept pages.
------------------------------------------------------------------- */
.public-verify-box {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--gv-border, #edf0f4);
    border-radius: 12px;
    background: var(--gv-background, #f8fafc);
}
.public-verify-box-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--gv-text, #111827); }
.public-verify-box .public-hint { margin-bottom: 12px; }
.public-verify-box-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.public-verify-box-actions .public-btn,
.public-verify-box-actions .public-btn-secondary { width: auto; padding: 0 20px; }

@media (max-width: 420px) {
    .public-verify-box-actions { flex-direction: column; }
    .public-verify-box-actions .public-btn,
    .public-verify-box-actions .public-btn-secondary { width: 100%; }
}

/* -------------------------------------------------------------------
   Primary submit + secondary Cancel, side by side -- replaces the
   "button, then a plain <a>Cancel</a> underneath" pattern used across
   several public account forms.
------------------------------------------------------------------- */
.public-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.public-form-actions .public-btn { flex: 1 1 auto; }
.public-form-actions .public-btn-secondary {
    width: auto;
    padding: 0 18px;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    text-decoration: none;
}

@media (max-width: 420px) {
    .public-form-actions { flex-direction: column-reverse; align-items: stretch; }
    .public-form-actions .public-btn-secondary { width: 100%; }
}

/* -------------------------------------------------------------------
   Pending Ownership Action rows -- same list-row shape used on both
   the dashboard's "pending action" banner and the devices page's own
   Pending Ownership Actions card.
------------------------------------------------------------------- */
.pending-action-row { padding: 12px 0; border-top: 1px solid var(--gv-border, #edf0f4); }
.pending-action-row:first-child { border-top: none; }
.pending-action-row-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.pending-action-row-desc { font-size: 13px; color: var(--gv-ink2, #39465a); }
.pending-action-row-sub { font-size: 12px; color: var(--gv-muted, #687386); margin-top: 2px; }