/*
    MerchStudio Common - Shared User Element Styles
    Copyright (c) 2025 Michael Lewis White and MerchStudio Inc.
    Shared styles for user-related components like the edit modal.

    @package      MerchStudio
    @subpackage   CommonCSS
    @author       Michael L. White <mike@bestsignsupply.com>
    @version      common/css/user.css - 0.01 - 2025-06-23 - totaltec

    #included-by: admin/css_load.tpl
*/

/*
    Styles for the user edit/create modal form are defined here.
    This ensures the form looks the same whether it's triggered from
    the `admin/users.php` page or the "My Account" header link.
*/

/* Styles the icon that appears at the top of the modal. */
.modal_header_icon {
    text-align: center;
    margin-bottom: 15px;
    color: var(--highlight);
}

.modal_header_icon .merch_icon.large {
    width: 48px;
    height: 48px;
}

/* This creates our two-column layout for form groups. */
#user_modal_form .form_row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#user_modal_form .form_row .form_group {
    flex: 1 1 200px; /* Allows fields to grow but have a base size. */
}

/* Adds consistent spacing between stacked form groups. */
#user_modal_form .form_group {
    margin-bottom: 15px;
}

#user_modal_form hr {
    margin: 15px 0;
    border-color: var(--line);
}

#user_modal_form .form_note {
    font-size: 0.9em;
    color: var(--middle_grey);
    text-align: center;
    margin-top: -5px;
    margin-bottom: 20px;
}

/*
=========================================
User Address Management Styles
=========================================
*/

.user_address_manager {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.address_column {
    flex: 1 1 300px; /* Each column can grow, base width 300px */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.address_column h3 {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.address_list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 100px; /* Give it some space even when empty */
}

.address_card {
    background-color: var(--base);
    border: 1px solid var(--line);
    border-radius: 4px;
    transition: box-shadow 0.2s ease-out;
}

.address_card.primary {
    border-left: 3px solid var(--highlight);
}

.address_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
}

.address_card_header strong {
    color: var(--highlight);
}

.address_actions {
    display: flex;
    gap: 5px;
}

.address_actions .merch_icon {
    padding: 3px;
    border-radius: 3px;
}

.address_card_body {
    padding: 12px;
    font-size: 0.9em;
    line-height: 1.5;
}

.empty_space {
    font-style: italic;
    color: var(--middle_grey);
    padding: 20px;
    text-align: center;
    background-color: var(--base);
    border-radius: 4px;
}

.order_cards_container {
    display: grid;
    /* Auto-fill columns: fits as many columns as possible.
       minmax(320px, 1fr): Cards are at least 320px wide, but grow to fill space.
       This automatically handles the "Stack on mobile, Grid on desktop" requirement.
    */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 15px;
    /* Ensure container takes up space but scrolls if needed */
    min-height: 200px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px; /* Increased padding slightly for shadow clearance */
}

.order_card {
    background-color: var(--base);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    /* Force the card to have layout */
    display: flex;
    flex-direction: column;
    /* Remove width: 100% so it listens to the Grid container */
    height: 100%; /* Ensures all cards in a row are the same height */
    color: var(--text); /* Explicit text color */
}

.order_card:hover {
    border-color: var(--highlight);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px); /* Slight lift effect */
}

.order_card_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: var(--bg); /* Darker header for contrast */
    border-bottom: 1px solid var(--line);
    font-size: 0.9em;
    font-weight: 600;
}

.order_meta {
    display: flex;
    gap: 15px;
}

.order_date {
    color: var(--middle_grey);
    font-weight: 400;
}

.order_ref {
    color: var(--highlight);
}

.order_card_body {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: var(--base); /* Ensure body has background */
    flex-grow: 1; /* Pushes the footer to the bottom */
}

.order_thumbnails {
    display: flex;
    gap: 8px;
    align-items: center;
}

.thumb_wrapper {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    border: 1px solid var(--line);
    overflow: hidden;
    background-color: #fff; /* Always white for product images */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.thumb_wrapper.empty {
    background-color: var(--line);
    color: var(--middle_grey);
}

.thumb_more {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    background-color: var(--info_bg);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85em;
    font-weight: 600;
    border: 1px dashed var(--line);
}

.order_summary_text {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item_count {
    display: block;
    font-size: 0.85em;
    color: var(--middle_grey);
    margin-bottom: 4px;
}

.order_total {
    display: block;
    font-weight: 700;
    font-size: 1.2em;
    color: var(--text);
}

.order_card_footer {
    display: flex;
    justify-content: space-between; /* Pushes buttons to opposite sides */
    align-items: center;
    padding: 10px 15px;
    border-top: 1px solid var(--line);
    text-align: right;
    background-color: var(--bg); /* Match header */
    margin-top: auto; /* Double check footer alignment */
    position: relative;
    z-index: 2;
}

/* --- Status Badges (Specific to Orders) --- */
/* P = Paid, S = Shipped, C = Cancelled, R = Refunded, X = Pending */

.status_badge.status_P { /* Paid */
    background-color: #d1e7dd;
    color: #0f5132;
    border-color: #0f5132;
}

.status_badge.status_S { /* Shipped */
    background-color: #cfe2ff;
    color: #084298;
    border-color: #084298;
}

.status_badge.status_C { /* Cancelled */
    background-color: #f8d7da;
    color: #842029;
    border-color: #842029;
}

.status_badge.status_R { /* Refunded */
    background-color: #e2e3e5;
    color: #41464b;
    border-color: #41464b;
}

.status_badge.status_X,
.status_badge.status_O { /* Pending/Processing */
    background-color: #fff3cd;
    color: #664d03;
    border-color: #664d03;
}

/* --- Inline Order Details (Accordion) --- */

.order_details_container {
    border-top: 1px dashed var(--line); /* Distinct separator */
    background-color: #fafafa; /* Very light grey to distinguish from card body */
    animation: fade_in 0.3s ease-out;
    padding: 15px; /* Add padding inside the container */
}

/* --- Embedded Receipt Styling Overrides --- */
.order_details_container .merch_receipt.embedded {
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
    font-size: 16px; /* Ensure base font is readable */
    color: #333333; /* Force theme text color */
}

/* Hide non-essential print elements in inline view */
.order_details_container .receipt_header,
.order_details_container .receipt_footer .receipt_notes {
    display: none;
}

/* Make grid rows wrap nicely on smaller widths */
.order_details_container .grid_row {
    background-color: #fff; /* White background for items against grey container */
    margin-bottom: 5px;
    border-radius: 4px;
    border: 1px solid var(--line);
    padding: 15px;
}

/* Force text colors for readability */
.order_details_container .grid_col {

}
.order_details_container .col_total {
    font-weight: 800;
    color: var(--contrast);
    font-size: 1.1em;
}

/* Adjust totals section alignment */
.order_details_container .receipt_totals {
    width: 100%; /* Full width totals */
    margin-top: 20px;
    padding-top: 10px;
    border-top: 2px solid var(--line);
}

.order_details_container .total_row {
    padding: 5px 0;
    font-size: 1.1em;
}

/* Ensure the Close button area looks like a footer */
.order_card_footer {
    color: var(--text);
    position: relative;
    z-index: 2;
    background-color: var(--bg); /* Match card background */
}

/* --- Order Tracker Component --- */
.order_tracker {
    display: flex;
    align-items: center;       /* Vertically align text and arrows */
    justify-content: flex-start; /* Keep items in a line on the left */
    gap: 15px;                 /* Space between steps and arrows */
    padding: 15px;             /* Breathing room */
    background-color: var(--base);
    border-top: 1px solid var(--line);
    font-size: 0.9em;          /* Slightly smaller than body text */
    font-weight: 400;          /* Semi-bold for readability */
}

/* --- Base State (Inactive / Future Steps) --- */
.track_step,
.track_sep {
    color: #b0b0b0; /* Light Gray for remaining steps */
    transition: color 0.3s ease;
}

/* --- Active State (Completed Steps) --- */
.track_step.active,
.track_sep.active {
    color: #ff9800; /* Orange */
}

/* --- Separator Icon Styling --- */
.track_sep {
    display: flex;
    align-items: center;
    justify-content: center;
}

.track_sep .merch_icon.tiny {
    width: 12px;
    height: 12px;
    /* Ensure the icon takes the text color (Orange/Gray) */
    fill: currentColor;
}

/* --- Mobile Adjustments --- */
@media (max-width: 400px) {
    .order_tracker {
        font-size: 0.8em;
        gap: 8px; /* Tighter spacing on small screens */
        justify-content: space-between; /* Spread out if space is tight */
    }
}
/* Empty State */
.empty_state {
    text-align: center;
    padding: 40px 20px;
    color: var(--middle_grey);
    border: 2px dashed var(--line);
    border-radius: 8px;
    margin-top: 20px;
}

.empty_icon svg {
    width: 64px;
    height: 64px;
    margin-bottom: 15px;
    opacity: 0.5;
}