midrandbooks/MidrandBookshop/Components/Pages/Account.razor.css

/* ==========================================================================
   Curated Architecture Dashboard Style Matrix 
   ========================================================================== */

.account-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-family: system-ui, -apple-system, sans-serif;
}

.tab-panel-body {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .tab-panel-body {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.account-main-title {
    font-size: 2.25rem;
    letter-spacing: -0.03em;
    color: #111111;
}

.tracking-wider {
    letter-spacing: 0.08em;
}

.extra-small {
    font-size: 0.72rem !important;
}

/* --- Left Sidebar Architectural Pillar Controls --- */
.account-nav-stack .nav-link {
    color: #555555;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    background: transparent !important;
}

    .account-nav-stack .nav-link.active {
        background-color: #111111 !important;
        color: #FFFFFF !important;
    }

    .account-nav-stack .nav-link:hover:not(.active) {
        background-color: rgba(0, 0, 0, 0.04) !important;
        color: #111111;
    }

.nav-logout:hover {
    background-color: rgba(220, 53, 69, 0.08) !important;
}

/* --- Balanced Status Mapping Badges --- */
.status-badge-base {
    font-family: var(--bs-font-monospace);
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.45rem 0.65rem;
    letter-spacing: 0.02em;
    border-radius: 4px;
}

/* 1. Core Order Lifecycle Badge Styles */
.order-completed {
    background-color: #111111 !important;
    color: #FFFFFF !important;
    border: 1px solid #111111;
}

.order-processing {
    background-color: rgba(0, 0, 0, 0.03) !important;
    color: #111111 !important;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.order-hold {
    background-color: rgba(108, 117, 125, 0.05) !important;
    color: #495057 !important;
    border: 1px solid rgba(108, 117, 125, 0.2);
}

.order-cancelled {
    background-color: rgba(220, 53, 69, 0.04) !important;
    color: #842029 !important;
    border: 1px solid rgba(220, 53, 69, 0.12);
}

/* 2. Logistics Shipment Status Badge Styles */
.status-delivered {
    background-color: rgba(25, 135, 84, 0.06) !important;
    color: #198754 !important;
    border: 1px solid rgba(25, 135, 84, 0.15);
}

.status-shipped {
    background-color: rgba(13, 110, 253, 0.06) !important;
    color: #0d6efd !important;
    border: 1px solid rgba(13, 110, 253, 0.15);
}

.status-processing {
    background-color: rgba(255, 193, 7, 0.08) !important;
    color: #b58100 !important;
    border: 1px solid rgba(255, 193, 7, 0.25);
}

/* 3. Financial Payment Status Badge Styles */
.pay-paid {
    background-color: rgba(25, 135, 84, 0.06) !important;
    color: #198754 !important;
    border: 1px solid rgba(25, 135, 84, 0.15);
}

.pay-pending {
    background-color: rgba(220, 53, 69, 0.06) !important;
    color: #dc3545 !important;
    border: 1px solid rgba(220, 53, 69, 0.15);
}

.pay-refunded {
    background-color: rgba(108, 117, 125, 0.08) !important;
    color: #6c757d !important;
    border: 1px solid rgba(108, 117, 125, 0.2);
}

/* --- Saved Addresses Section Layout --- */
.address-curated-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .address-curated-card:hover {
        border-color: #111111 !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03) !important;
    }

.border-top-dashed {
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.btn-action-trigger {
    padding: 0;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

    .btn-action-trigger:hover {
        opacity: 1;
    }

/* --- Interactive Address Form Fields --- */
.premium-plaintext-field {
    background-color: #FAFAFA;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    color: #111111;
    transition: all 0.2s ease;
}

    .premium-plaintext-field:focus {
        border-color: #111111;
        box-shadow: 0 0 0 1px #111111;
        background-color: #FFFFFF;
    }

.custom-box-tick {
    border: 1.5px solid rgba(0, 0, 0, 0.25);
    width: 1rem;
    height: 1rem;
    border-radius: 4px;
    transition: all 0.15s ease;
    cursor: pointer;
}

    .custom-box-tick:checked {
        background-color: #111111;
        border-color: #111111;
    }

.btn-premium-sm {
    font-size: 0.75rem;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-weight: 500;
}

.btn-clean-cancel {
    background: transparent;
    border: none;
    color: #666666;
    transition: color 0.15s ease;
}

    .btn-clean-cancel:hover {
        color: #111111;
    }

/* --- Profile Settings Identity Pillar Elements --- */
.profile-hero-banner {
    background-color: #FAFAFA;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* --- CSS Grid Book Item Layout --- */
.manifest-grid-wrap {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .manifest-grid-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

.manifest-grid-cell {
    min-width: 0;
}

.manifest-book-item {
    transition: background-color 0.15s ease;
}

    .manifest-book-item:hover {
        background-color: rgba(0, 0, 0, 0.015) !important;
    }

.book-thumbnail-container {
    width: 42px;
    height: 56px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.book-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.min-w-0 {
    min-width: 0;
}

.order-summary-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}