/**
 * assets/css/style.css
 *
 * Custom Stylesheet for Second Chance Platform
 * Provides base styles, component overrides, and specific page styling.
 *
 * @version 2.0.0 - Refactored for clarity and consistency.
 */

/* ==========================================================================
   0. CSS Variables & Root Configuration
   ========================================================================== */
:root {
    /* Color Palette (Aligned with Bootstrap potentially) */
    --sc-primary-color: #0d6efd;
    --sc-secondary-color: #6c757d;
    --sc-success-color: #198754;
    --sc-danger-color: #dc3545;
    --sc-warning-color: #ffc107;
    --sc-info-color: #0dcaf0;
    --sc-light-bg: #f8f9fa;
    --sc-dark-text: #212529;
    --sc-muted-text: #6c757d;
    --sc-border-color: #dee2e6;
    --sc-link-color: var(--sc-primary-color);
    --sc-link-hover-color: #0a58ca;
    --sc-star-color: #f39c12; /* Gold for ratings */

    /* Layout & Shadows */
    --sc-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    --sc-card-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);

    /* Typography (Uncomment and configure if using custom fonts) */
    /* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); */
    /* --sc-font-family-sans-serif: 'Roboto', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; */
}

/* ==========================================================================
   1. Global Styles & Layout Helpers
   ========================================================================== */
body {
    background-color: var(--sc-light-bg);
    color: var(--sc-dark-text);
    /* Apply custom font if defined */
    /* font-family: var(--sc-font-family-sans-serif, sans-serif); */
}

/* Sticky Footer Setup (requires body.d-flex.flex-column.min-vh-100 and footer.mt-auto in HTML) */
body.d-flex {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.container { /* Or other main content wrapper */
    flex: 1; /* Push footer down */
}
footer.mt-auto {
    margin-top: auto !important;
}

/* General main content padding */
main.main-content {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

/* Utility Classes */
.border-dashed {
    border-style: dashed !important;
}

/* ==========================================================================
   2. Header / Navbar (Public)
   ========================================================================== */
.main-navbar { /* Class added in header.php v2 */
    border-bottom: 1px solid var(--sc-border-color);
}

.main-navbar .navbar-brand {
    font-weight: 600;
}

/* Navbar Icons & Badges */
.main-navbar .navbar-nav .nav-link i.fa-fw { /* Ensure fixed width for icons */
    width: 1.4em;
    text-align: center; /* Center icon within fixed width */
}

.main-navbar .navbar-nav .badge.cart-count {
    position: absolute;
    top: 0.3rem;
    right: -0.2rem; /* Adjust positioning as needed */
    font-size: 0.65em;
    line-height: 1;
    padding: 0.25em 0.45em;
    /* display handled by PHP/JS initially */
}

/* Wishlist Icon States (Header and Product Grid) */
.btn-wishlist i {
    transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out;
}
.btn-wishlist.active i {
    font-weight: 900; /* Solid */
    color: var(--sc-danger-color);
}

/* User Dropdown */
.main-navbar .dropdown-menu {
    min-width: 12rem;
    font-size: 0.95rem;
}
.main-navbar .dropdown-item .badge { /* Notification badge inside dropdown */
    font-size: 0.8em;
}


/* ==========================================================================
   3. Footer (Public)
   ========================================================================== */
footer.site-footer {
    background-color: #e9ecef;
    color: var(--sc-muted-text);
    font-size: 0.9em;
    border-top: 1px solid var(--sc-border-color);
}

.footer-links a {
    color: var(--sc-muted-text);
    text-decoration: none;
    margin: 0 5px;
    transition: color 0.15s ease-in-out;
}
.footer-links a:hover {
    color: var(--sc-dark-text);
    text-decoration: underline;
}

/* ==========================================================================
   4. Product & Auction Grids (e.g., index.php, auctions.php)
   ========================================================================== */
.products-grid,
.auctions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Responsive grid */
    gap: 1.25rem; /* Approx 20px */
    margin-top: 1.5rem;
}

.product-item,
.auction-item {
    /* Using Bootstrap .card class provides base styles */
    /* Enhancements: */
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
    display: flex; /* Ensure flex works if base class doesn't provide it */
    flex-direction: column;
    height: 100%; /* Make cards in a row equal height (requires parent row to manage height) */
}

.product-item:hover,
.auction-item:hover {
    box-shadow: var(--sc-card-hover-shadow);
    transform: translateY(-3px);
}

/* Ensure images within grid items don't exceed card width */
.product-item .card-img-top,
.auction-item img { /* Assuming auction items might not use card-img-top */
    width: 100%;
    height: 200px; /* Fixed height for consistent grid */
    object-fit: contain; /* Or 'cover' depending on desired look */
    background-color: #fdfdfd;
    border-bottom: 1px solid var(--sc-border-color); /* Add border if using contain */
}

/* Ensure titles have minimum height to prevent misalignment */
.product-item .card-title,
.auction-item h4 { /* Assuming auction uses h4 */
    min-height: 44px; /* Adjust as needed based on typical title lengths */
    font-size: 1.05rem; /* Slightly smaller than default h5 */
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.product-item .card-title a.product-link {
    color: var(--sc-dark-text);
    text-decoration: none;
    /* stretched-link applied in HTML */
}
.product-item .card-title a.product-link:hover {
    color: var(--sc-link-color);
}

/* Meta info styling */
.product-item-meta,
.auction-item-meta {
    font-size: 0.85em;
    color: var(--sc-muted-text);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.product-item-meta span.d-block,
.auction-item-meta span.d-block {
    margin-bottom: 0.2rem; /* Small space between meta lines */
}
.product-item-meta i.fa-fw,
.auction-item-meta i.fa-fw {
    width: 1.2em; /* Consistent icon width */
}

/* Price styling */
.product-item-price {
    font-weight: bold;
    color: var(--sc-primary-color);
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

/* Action buttons alignment */
.product-item .card-body,
.auction-item .card-body { /* Assuming .card-body wrapper */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow card body to grow */
}

.product-item-actions,
.auction-item-actions {
    margin-top: auto; /* Push actions to the bottom */
    padding-top: 0.75rem;
    /* border-top: 1px solid #eee; /* Optional separator */
    z-index: 2; /* Keep buttons above stretched link */
    position: relative;
}
/* Grid action button sizing */
.product-grid-actions button,
.product-grid-actions a {
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

/* ==========================================================================
   5. Tables (General & Admin)
   ========================================================================== */
.table th,
.table td {
    vertical-align: middle;
}

/* Cart table specifics */
.cart-table img {
    max-height: 70px;
    object-fit: contain;
    border: 1px solid var(--sc-border-color);
}
.cart-table .quantity-input {
    max-width: 70px;
    text-align: center;
}
.cart-table .unavailable-item {
    opacity: 0.65;
    background-color: #f8d7da !important; /* Visually indicate issue */
}
.cart-table .unavailable-item a {
    pointer-events: none; /* Prevent clicking links on unavailable items */
    color: var(--sc-muted-text) !important;
}

/* Admin table specifics (assuming .admin-table class is used) */
.admin-table {
    font-size: 0.9rem; /* Slightly smaller font for admin tables */
}
.admin-table .actions-cell {
    white-space: nowrap;
    min-width: 180px; /* Adjust as needed for buttons */
    text-align: center;
}
.admin-table .actions-cell a,
.admin-table .actions-cell button,
.admin-table .actions-cell form {
    margin: 0 2px; /* Small horizontal gap */
}
.admin-table .actions-cell form {
    display: inline-block;
    vertical-align: middle;
}

/* ==========================================================================
   6. Forms & Inputs
   ========================================================================== */
/* General form adjustments */
label {
    font-weight: 500; /* Make labels slightly bolder */
    margin-bottom: 0.3rem;
}
.form-text {
    font-size: 0.85em; /* Make help text smaller */
}

/* Filter Bar Specifics (assuming class .filters from index.php) */
.filters {
    background-color: #f1f5f9; /* Light blue/grey background */
    padding: 1rem 1.25rem;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
}
.filters label {
    font-size: 0.85rem;
}
.filters .form-control-sm,
.filters .form-select-sm {
    font-size: 0.875rem;
}
.filters button,
.filters .btn {
    font-size: 0.875rem;
}

/* Rating Star Input (e.g., leave_review.php) */
.rating-stars-input .btn-check + .btn {
    color: #ccc; /* Default star color (empty) */
    border-color: #ccc;
    font-size: 1.5rem; /* Make stars larger */
    padding: 0.3rem 0.6rem;
}
.rating-stars-input .btn-check:checked + .btn,
.rating-stars-input .btn-check:hover + .btn { /* Highlight on hover too */
    color: var(--sc-star-color);
    border-color: var(--sc-star-color);
}
/* Style stars that come *after* the hovered/checked one */
.rating-stars-input .btn-check:hover ~ .btn {
    color: #ccc; /* Reset following stars on hover */
    border-color: #ccc;
}
.rating-stars-input .btn-check:checked ~ .btn {
    color: #ccc; /* Ensure following stars are empty when one is checked */
    border-color: #ccc;
}
/* Ensure the checked star itself remains colored */
.rating-stars-input .btn-check:checked + .btn {
    color: var(--sc-star-color);
    border-color: var(--sc-star-color);
}


/* ==========================================================================
   7. Feedback & Notifications
   ========================================================================== */
/* Bootstrap alerts are used for primary feedback. */

/* Toast container for AJAX feedback */
.toast-container {
    z-index: 1100; /* High z-index */
}

/* Notifications Page List Item */
.notifications-list .notification-item {
    border-left: 4px solid var(--sc-info-color);
}
.notifications-list .notification-item .card-text {
    font-size: 0.95rem;
    line-height: 1.5;
}
.notifications-list .notification-item small.text-muted {
    font-size: 0.85em;
}

/* ==========================================================================
   8. Reviews & Ratings Display
   ========================================================================== */
.reviews-list .review-item {
    border-bottom: 1px dashed var(--sc-border-color);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
}
.reviews-list .review-item:last-child {
    border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}
.rating-stars {
    color: var(--sc-star-color);
    font-size: 1.1em; /* Default size */
    letter-spacing: 1px;
}
.rating-stars.small { font-size: 0.95em; }
.review-meta {
    font-size: 0.9em;
    color: var(--sc-muted-text);
    margin-left: 0.5rem;
}
.review-comment {
    background-color: #f8f9fa; /* Light background for comment */
    border: 1px solid #eee;
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.95em;
    line-height: 1.5;
    white-space: pre-wrap; /* Respect line breaks in comments */
}
.review-product-link {
     font-size: 0.9em;
     color: var(--sc-muted-text);
}
.review-product-link a { color: var(--sc-secondary-color); }
.review-product-link a:hover { text-decoration: underline; }

/* ==========================================================================
   9. Specific Page Styles (Account, Wallet, Product Detail, etc.)
   ========================================================================== */
/* Account Page */
.account-details dt { font-weight: 500; color: var(--sc-secondary-color); }
.account-details dd { margin-bottom: 0.7rem; }
.account-actions .list-group-item { border-left: 0; border-right: 0; padding: 0.8rem 0; }
.account-actions .list-group-item:first-child { border-top: 0; }
.account-actions .list-group-item a { text-decoration: none; display: block; }
.account-actions .list-group-item a:not(.text-danger):hover { background-color: #f8f9fa; }
.account-actions .list-group-item a.text-danger { font-weight: 500; }
.account-actions .list-group-item a.text-danger:hover { background-color: var(--sc-danger-color); color: #fff !important; }

/* Wallet Page */
.wallet-info .card-title { font-size: 0.8rem; letter-spacing: 0.5px; text-transform: uppercase; }
.wallet-info .display-5 { line-height: 1; }

/* Product Detail Page */
.product-page-rating .rating-stars { font-size: 1.2em; }
#variantSelectorForm label { font-size: 0.9rem; }
.seller-info-card { font-size: 0.9rem; }
.product-meta { font-size: 0.85rem; }

/* ==========================================================================
   10. Admin Area Styles (If needed and not using separate admin.css)
   ========================================================================== */
/* Styles in admin_header.php take precedence if inline. */
/* Use a body class like 'admin-body' if applied by admin_header.php */

.admin-body {
    /* Example: Different background for admin */
    /* background-color: #e9ecef; */
}

/* Admin Dashboard Stats Cards */
.stat-card .card-title { /* Referenced in admin/index.php */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.stat-card .progress { height: 5px; }
.stat-card .btn-sm { font-size: 0.8rem; padding: 0.2rem 0.5rem; }

/* Ensure consistency for action buttons in admin quick links */
.admin-dashboard .quick-actions .btn { /* Add a wrapper class if needed */
    font-size: 0.9rem;
}