/**
 * css/user_styles.css
 * All styles for the user management system.
 * Prefix: usr_
 * Dependencies: Bootstrap 5, Bootstrap Icons
 */

/* ════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — inherits from site palette where possible
════════════════════════════════════════════════════════════════════════════ */
:root {
    --usr-red:        #cc1a1a;
    --usr-red-dk:     #a01414;
    --usr-red-lt:     rgba(204,26,26,.09);
    --usr-bg:         #f5f5f5;
    --usr-surface:    #ffffff;
    --usr-border:     #e2e2e2;
    --usr-text:       #1a1a1a;
    --usr-text-md:    #555555;
    --usr-muted:      #999999;
    --usr-success:    #1a7c4a;
    --usr-success-lt: rgba(26,124,74,.1);
    --usr-warn:       #c47a00;
    --usr-warn-lt:    rgba(196,122,0,.1);
    --usr-radius:     6px;
    --usr-shadow:     0 2px 14px rgba(0,0,0,.09);
    --usr-font:       'Source Sans 3', sans-serif;
    --usr-font-head:  'Playfair Display', Georgia, serif;
}

/* ════════════════════════════════════════════════════════════════════════════
   AUTH PAGES  (login / register / forgot / reset)
   Full-page centred layout when used as standalone page
════════════════════════════════════════════════════════════════════════════ */
.usr_auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--usr-bg);
    padding: 2rem 1rem;
}

.usr_auth-card {
    background: var(--usr-surface);
    border: 1px solid var(--usr-border);
    border-radius: var(--usr-radius);
    box-shadow: var(--usr-shadow);
    width: 100%;
    max-width: 480px;
    padding: 2.25rem 2.5rem 2rem;
}

@media (max-width: 520px) {
    .usr_auth-card { padding: 1.5rem 1.2rem; }
}

/* Brand strip at top of auth cards */
.usr_auth-brand {
    text-align: center;
    margin-bottom: 1.6rem;
}

.usr_auth-brand .usr_logo-icon {
    font-size: 2.2rem;
    color: var(--usr-red);
    display: block;
    margin-bottom: .35rem;
}

.usr_auth-brand h1 {
    font-family: var(--usr-font-head);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--usr-text);
    margin: 0 0 .2rem;
}

.usr_auth-brand p {
    font-size: .85rem;
    color: var(--usr-text-md);
    margin: 0;
}

/* Divider rule below brand */
.usr_auth-divider {
    border: none;
    border-top: 2px solid var(--usr-red);
    margin: 0 0 1.6rem;
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   FORM ELEMENTS
════════════════════════════════════════════════════════════════════════════ */
.usr_label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--usr-text-md);
    margin-bottom: .25rem;
    display: block;
}

.usr_input {
    width: 100%;
    height: 42px;
    padding: .45rem .8rem;
    font-size: .9rem;
    font-family: var(--usr-font);
    color: var(--usr-text);
    background: var(--usr-surface);
    border: 1px solid var(--usr-border);
    border-radius: var(--usr-radius);
    transition: border-color .18s, box-shadow .18s;
    outline: none;
    appearance: none;
}

.usr_input:focus {
    border-color: var(--usr-red);
    box-shadow: 0 0 0 3px var(--usr-red-lt);
}

.usr_input.is-invalid {
    border-color: var(--usr-red);
}

.usr_input-icon-wrap {
    position: relative;
}

.usr_input-icon-wrap .usr_input {
    padding-left: 2.3rem;
}

.usr_input-icon-wrap .usr_field-icon {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--usr-muted);
    font-size: .95rem;
    pointer-events: none;
}

/* Password toggle */
.usr_pw-wrap {
    position: relative;
}

.usr_pw-wrap .usr_input {
    padding-right: 2.5rem;
}

.usr_pw-toggle {
    position: absolute;
    right: .7rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--usr-muted);
    cursor: pointer;
    font-size: .95rem;
    padding: 0;
    line-height: 1;
}

.usr_pw-toggle:hover { color: var(--usr-red); }

/* ── Primary button ──────────────────────────────────────────────────────── */
.usr_btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 42px;
    padding: 0 1.4rem;
    background: var(--usr-red);
    color: #fff;
    font-family: var(--usr-font);
    font-size: .9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--usr-radius);
    cursor: pointer;
    transition: background .15s, transform .1s;
    text-decoration: none;
    white-space: nowrap;
}

.usr_btn-primary:hover  { background: var(--usr-red-dk); color: #fff; text-decoration: none; }
.usr_btn-primary:active { transform: translateY(1px); }
.usr_btn-primary:disabled { opacity: .55; pointer-events: none; }
.usr_btn-primary.w-100 { width: 100%; }

/* ── Secondary / outline button ─────────────────────────────────────────── */
.usr_btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 42px;
    padding: 0 1.2rem;
    background: transparent;
    color: var(--usr-red);
    font-family: var(--usr-font);
    font-size: .88rem;
    font-weight: 600;
    border: 1.5px solid var(--usr-red);
    border-radius: var(--usr-radius);
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
}

.usr_btn-outline:hover {
    background: var(--usr-red-lt);
    color: var(--usr-red-dk);
    text-decoration: none;
}

/* ── Small text links ────────────────────────────────────────────────────── */
.usr_link {
    color: var(--usr-red);
    font-size: .83rem;
    text-decoration: none;
}

.usr_link:hover { color: var(--usr-red-dk); text-decoration: underline; }

/* ── Alerts / flash messages ─────────────────────────────────────────────── */
.usr_alert {
    padding: .7rem 1rem;
    border-radius: var(--usr-radius);
    font-size: .85rem;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1.1rem;
    border-left: 3px solid transparent;
}

.usr_alert i { font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }

.usr_alert-success {
    background: var(--usr-success-lt);
    border-left-color: var(--usr-success);
    color: var(--usr-success);
}

.usr_alert-error {
    background: var(--usr-red-lt);
    border-left-color: var(--usr-red);
    color: var(--usr-red);
}

.usr_alert-warning {
    background: var(--usr-warn-lt);
    border-left-color: var(--usr-warn);
    color: var(--usr-warn);
}

/* ── Form group spacing ──────────────────────────────────────────────────── */
.usr_field { margin-bottom: 1rem; }
.usr_field:last-child { margin-bottom: 0; }

/* ── Helper / footnote text ──────────────────────────────────────────────── */
.usr_form-footer {
    text-align: center;
    font-size: .83rem;
    color: var(--usr-text-md);
    margin-top: 1.2rem;
}

/* ── Remember-me / checkbox row ─────────────────────────────────────────── */
.usr_check-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.usr_check-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .83rem;
    color: var(--usr-text-md);
    cursor: pointer;
    user-select: none;
}

.usr_check-label input[type="checkbox"] {
    accent-color: var(--usr-red);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════════════════
   ACCOUNT / DASHBOARD PAGES
════════════════════════════════════════════════════════════════════════════ */

/* Page-level wrapper inside the site's 3-column layout */
.usr_page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--usr-red);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.usr_page-title {
    font-family: var(--usr-font-head);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--usr-text);
    margin: 0;
}

.usr_page-title i {
    color: var(--usr-red);
    margin-right: .4rem;
}

/* ── Account card ────────────────────────────────────────────────────────── */
.usr_card {
    background: var(--usr-surface);
    border: 1px solid var(--usr-border);
    border-radius: var(--usr-radius);
    box-shadow: var(--usr-shadow);
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.usr_card-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .75rem 1.1rem;
    background: #fafafa;
    border-bottom: 1px solid var(--usr-border);
    font-weight: 700;
    font-size: .88rem;
    color: var(--usr-text);
}

.usr_card-header i { color: var(--usr-red); font-size: 1rem; }

.usr_card-body { padding: 1rem 1.1rem; }

/* ── Info rows (label : value) ───────────────────────────────────────────── */
.usr_info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem;
}

.usr_info-table tr + tr td,
.usr_info-table tr + tr th {
    border-top: 1px solid var(--usr-border);
}

.usr_info-table th {
    width: 42%;
    padding: .5rem .6rem;
    font-weight: 600;
    color: var(--usr-text-md);
    text-align: left;
    white-space: nowrap;
}

.usr_info-table td {
    padding: .5rem .6rem;
    color: var(--usr-text);
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.usr_badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .18em .55em;
    border-radius: 3px;
}

.usr_badge-active   { background: var(--usr-success-lt); color: var(--usr-success); }
.usr_badge-inactive { background: var(--usr-red-lt);     color: var(--usr-red);     }
.usr_badge-normal   { background: #eef2ff; color: #3c4caa; }
.usr_badge-pay2go   { background: #fff4e0; color: #b06000; }

/* ── Action buttons row ──────────────────────────────────────────────────── */
.usr_action-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Side navigation (inside account section) ────────────────────────────── */
.usr_sidenav {
    background: var(--usr-surface);
    border: 1px solid var(--usr-border);
    border-radius: var(--usr-radius);
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.usr_sidenav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    color: var(--usr-text-md);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--usr-border);
    transition: background .15s, color .15s;
}

.usr_sidenav-item:last-child { border-bottom: none; }

.usr_sidenav-item i {
    color: var(--usr-muted);
    font-size: .95rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.usr_sidenav-item:hover,
.usr_sidenav-item.active {
    background: var(--usr-red-lt);
    color: var(--usr-red);
    text-decoration: none;
}

.usr_sidenav-item:hover i,
.usr_sidenav-item.active i { color: var(--usr-red); }

/* ── Funds history table ─────────────────────────────────────────────────── */
.usr_funds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}

.usr_funds-table th {
    background: #f8f8f8;
    border-bottom: 2px solid var(--usr-border);
    padding: .5rem .7rem;
    font-weight: 700;
    color: var(--usr-text-md);
    text-align: left;
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.usr_funds-table td {
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--usr-border);
    color: var(--usr-text);
}

.usr_funds-table tr:last-child td { border-bottom: none; }

.usr_funds-table .usr_amount-cell {
    font-weight: 700;
    color: var(--usr-success);
    white-space: nowrap;
}

/* ── Progress bar (photos quota) ─────────────────────────────────────────── */
.usr_quota-bar-wrap {
    margin-top: .35rem;
}

.usr_quota-bar-bg {
    height: 8px;
    background: var(--usr-border);
    border-radius: 4px;
    overflow: hidden;
}

.usr_quota-bar-fill {
    height: 100%;
    background: var(--usr-red);
    border-radius: 4px;
    transition: width .4s ease;
}

.usr_quota-label {
    font-size: .75rem;
    color: var(--usr-muted);
    margin-top: .2rem;
}

/* ── Responsive tweaks ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .usr_auth-card { padding: 1.3rem 1rem; }
    .usr_page-header { flex-direction: column; align-items: flex-start; }
    .usr_info-table th { width: 38%; font-size: .8rem; }
}