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

::deep .container {
    max-width: 1100px;
}

/* Navigation Layout overrides */
.nav-pills .nav-link {
    color: #6c757d;
    border-radius: 0;
    padding: 0.75rem 0;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .nav-pills .nav-link.active {
        background-color: transparent !important;
        color: #1A1A1A;
        border-bottom: 2px solid #1A1A1A;
    }

    .nav-pills .nav-link:hover:not(.active) {
        color: #1A1A1A;
    }

/* Cards layout rules */
.card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
}

.address-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .address-card:hover {
        border-color: rgba(0, 0, 0, 0.16);
    }

/* Container Wrapper to Suppress the Scrollbar completely */
.table-container-fixed {
    width: 100%;
    overflow-x: hidden; /* Hard disables horizontal scroll bar activation */
}

/* Global Table Typography - Reduced uniformly to keep items on a single line */
.profile-table {
    font-size: 0.78rem; /* Scaled down further to eliminate overflow bounds */
    width: 100%;
    table-layout: fixed; /* Fixes proportions to fit 100% parent container space */
}

    .profile-table tbody td {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }

    .profile-table thead th {
        background-color: #F9F9F9;
        font-size: 0.7rem;
        letter-spacing: 0.04rem;
    }

/* Compact Column Proportions */
.col-order-id {
    width: 115px;
}

.col-date {
    width: 100px;
}

.col-total {
    width: 85px;
}

.col-status {
    width: 105px;
}

.col-invoice {
    width: 65px;
}

.col-title {
    width: auto; /* Takes shared residual space smoothly */
}

.col-address {
    width: auto; /* Takes shared residual space smoothly */
}

/* Product link handling */
.product-link {
    color: #1A1A1A;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.2s ease;
    display: inline-block;
}

    .product-link:hover {
        border-color: #1A1A1A;
    }

/* Base Badge Settings */
.badge {
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    padding: 0.4em 0.8em;
    border-radius: 4px;
    font-weight: 600;
}

/* Status Badge Palette Colors */
.status-shipped {
    background-color: #e3f2fd !important;
    color: #0d6efd !important;
    border: 1px solid rgba(13, 110, 253, 0.15);
}

.status-delivered {
    background-color: #e8f5e9 !important;
    color: #198754 !important;
    border: 1px solid rgba(25, 135, 84, 0.15);
}

.badge-tag {
    background-color: #f0f0f0 !important;
    color: #4a4a4a !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Form Buttons */
.btn-outline-dark {
    border-radius: 50px;
    border-width: 1px;
}

.btn-dark {
    border-radius: 50px;
}

/* Action button configurations */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

    .action-btn:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .action-btn.text-danger:hover {
        background-color: rgba(220, 53, 69, 0.1);
    }

    .action-btn:active {
        transform: scale(0.95);
    }

/* Compact SVG Icons sizing */
.svg-icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
}

.pointer-label {
    cursor: pointer;
    user-select: none;
}

/* Shared Card Styling Unification Rules */
.order-history-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 0; /* Matches your address card configuration */
}

    .order-history-card:hover {
        border-color: rgba(0, 0, 0, 0.16);
    }

/* Micro Typography Alignment */
.xx-small {
    font-size: 0.65rem;
}

.tracking-wider {
    letter-spacing: 0.05rem;
}

/* Responsive adjustments across layout break-points */
@media (max-width: 575.98px) {
    .border-sm-top-0 {
        border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
}