/* Accounts App Specific Styles (Login, Register, Dashboard, etc.) */

/* Login Page Styles (from signin-reference.html) */
.login-section {
    flex: 1; /* Takes up available vertical space */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg) 0;
    background-color: var(--secondary-bg-color); /* --gray-100 */
}
body[data-theme="dark"] .login-section {
    background-color: var(--primary-bg-color); /* Use main dark page background */
}

.login-container {
    background-color: var(--secondary); /* white */
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    padding: var(--space-xl);
    width: 100%;
    max-width: 400px; /* Max width for the login box */
}
body[data-theme="dark"] .login-container {
    background-color: var(--secondary-bg-color); /* Darker card background */
    border: 1px solid var(--border-color); /* Consistent border color */
}


.login-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.login-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: var(--space-xs);
    letter-spacing: -0.02em;
    color: var(--primary-text-color);
}

.login-subtitle {
    color: var(--secondary-text-color); /* --gray-600 */
    font-size: 0.9375rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.form-group { /* General form group styling */
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm); /* Default margin, can be overridden by gap in form */
}
.login-form .form-group { /* Specific for login form if needed */
    margin-bottom: 0; /* Gap in .login-form handles spacing */
}


.form-label { /* General form label */
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--primary-text-color); /* --gray-800 */
}

.form-input { /* General form input, can be in main.css if widely used */
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--border-color); /* --gray-300 */
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--primary-text-color); /* --gray-900 */
    transition: var(--transition);
    background-color: var(--secondary);
}
.form-input:focus {
    outline: none;
    border-color: var(--accent-color); /* --accent */
    box-shadow: 0 0 0 3px var(--accent-color-translucent, rgba(0,188,235,0.2));
}
.form-input::placeholder {
    color: var(--gray-500);
}
body[data-theme="dark"] .form-input {
    background-color: var(--gray-200); /* Dark input background */
    border-color: var(--border-color);   /* Consistent border for inputs */
    color: var(--primary-text-color);    /* Light text for dark inputs */
}
body[data-theme="dark"] .form-input::placeholder {
    color: var(--gray-400);
}


.form-error-message {
    color: #ef4444; /* Red */
    font-size: 0.875rem;
    margin-top: var(--space-xs);
}
.form-input.error { /* Class to add on error */
    border-color: #ef4444; /* Red */
}
.form-input.error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-message {
    padding: var(--space-sm);
    border-radius: 4px;
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
    border: 1px solid transparent;
}
.form-message-success {
    background-color: rgba(16, 185, 129, 0.1); /* Light green */
    color: #10b981; /* Green */
    border-color: #10b981;
}
.form-message-error {
    background-color: rgba(239, 68, 68, 0.1); /* Light red */
    color: #ef4444; /* Red */
    border-color: #ef4444;
}


.form-row-flex { /* For remember me and forgot password */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--space-sm) 0;
}

.form-checkbox { /* General checkbox container */
    display: flex;
    align-items: center;
    gap: var(--space-xs); /* Smaller gap for checkbox and label */
}
.form-checkbox input[type="checkbox"] {
    width: 16px; /* Adjusted from 18px */
    height: 16px;
    cursor: pointer;
    accent-color: var(--primary);
}
.form-checkbox-label {
    font-size: 0.875rem; /* Adjusted from 0.9375rem */
    color: var(--secondary-text-color); /* --gray-700 */
    cursor: pointer;
    user-select: none;
    font-weight: normal; /* Ensure not bold if label tag is used */
}

.forgot-password-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--link-color);
}
.forgot-password-link:hover {
    text-decoration: underline;
}

.login-btn { /* Extends .btn .btn-primary */
    width: 100%;
    margin-top: var(--space-sm); /* Space above button */
}
.login-btn:disabled {
    background-color: var(--gray-400);
    cursor: not-allowed;
}
body[data-theme="dark"] .login-btn:disabled {
    background-color: var(--gray-600);
}


.form-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: var(--space-md) 0;
}
.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color); /* --gray-300 */
}
.form-divider-text {
    padding: 0 var(--space-sm);
    color: var(--secondary-text-color); /* --gray-600 */
    font-size: 0.875rem;
}

.create-account-section {
    text-align: center;
    margin-top: var(--space-md);
}
.create-account-text {
    color: var(--secondary-text-color); /* --gray-600 */
    font-size: 0.9375rem;
    margin-bottom: var(--space-xs);
}
.create-account-btn { /* Extends .btn .btn-secondary */
    display: block; /* Make it full width */
    width: 100%;
}

.passwordless-login-section,
.guest-checkout-section {
    margin-top: var(--space-md);
    text-align: center;
}
.passwordless-login-section .link-subtle,
.guest-checkout-section .link-subtle,
.guest-checkout-section .guest-checkout-text { /* From reference */
    color: var(--secondary-text-color); /* --gray-600 */
    font-size: 0.875rem;
    margin-bottom: var(--space-xs);
}
.passwordless-login-section .link-subtle:hover,
.guest-checkout-section .link-subtle:hover {
    color: var(--primary);
    text-decoration: underline;
}

.captcha-group .form-label { /* If captcha needs a label */
    margin-bottom: var(--space-xs);
}
/* Captcha widget itself might need specific styling if default is not good */
/* For hCaptcha, it's an iframe, styling is limited. Ensure container has space. */
.captcha-group > div { /* Assuming captcha_widget renders a div */
    display: flex;
    justify-content: center; /* Center the captcha if it's not full width */
}


/* Account Dashboard Styles (from dashboard-reference.html) */
.dashboard-section {
    padding: var(--space-md) 0 var(--space-xl);
    /* background-color: var(--secondary-bg-color); /* --gray-100 */ /* Already on body */
}

.dashboard-container {
    max-width: 1000px; /* From reference */
    margin: 0 auto;
}

.dashboard-section .page-title { /* General page title from main.css or cart.css */
    font-size: 1.75rem;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.user-profile {
    background-color: var(--secondary); /* white */
    border-radius: 8px;
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body[data-theme="dark"] .user-profile {
    background-color: var(--gray-800);
    border: 1px solid var(--gray-700);
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto var(--space-sm);
    background-color: var(--gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: var(--gray-600);
}
.user-avatar img { /* If using an image */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-name {
    font-weight: 600;
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: var(--space-xs);
}

.user-email {
    font-size: 0.875rem;
    color: var(--secondary-text-color); /* --gray-600 */
    margin-bottom: var(--space-md);
}

.logout-btn { /* Extends .btn */
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--gray-200);
    color: var(--secondary-text-color); /* --gray-700 */
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: var(--transition);
}
.logout-btn:hover { background-color: var(--gray-300); }
body[data-theme="dark"] .logout-btn {
    background-color: var(--gray-700);
    color: var(--gray-200);
}
body[data-theme="dark"] .logout-btn:hover {
    background-color: var(--gray-600);
}


.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.nav-card {
    background-color: var(--secondary); /* white */
    border-radius: 8px;
    padding: var(--space-lg);
    text-align: center;
    transition: var(--transition);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    color: var(--primary-text-color); /* Ensure text inside card is default color */
}
.nav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: var(--primary); /* Link hover color */
}
body[data-theme="dark"] .nav-card {
    background-color: var(--gray-800);
    border: 1px solid var(--gray-700);
    color: var(--gray-100);
}
body[data-theme="dark"] .nav-card:hover {
    color: var(--accent);
}


.nav-icon { /* Placeholder for icon, e.g. SVG or font icon */
    font-size: 2rem;
    color: var(--accent-color); /* --accent */
    margin-bottom: var(--space-xs);
    line-height: 1; /* Ensure icon aligns well */
}

.nav-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: inherit; /* Inherit from .nav-card */
    margin-top: 0;
    margin-bottom: var(--space-xs);
}

.nav-description {
    font-size: 0.875rem;
    color: var(--secondary-text-color); /* --gray-600 */
    line-height: 1.4;
}
body[data-theme="dark"] .nav-description {
    color: var(--gray-400);
}


.activity-section {
    background-color: var(--secondary); /* white */
    border-radius: 8px;
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body[data-theme="dark"] .activity-section {
    background-color: var(--gray-800);
    border: 1px solid var(--gray-700);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color); /* --gray-200 */
}
.section-header .section-title { /* More specific than global .section-title */
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-text-color); /* --gray-900 */
    margin-bottom: 0; /* Reset margin */
    padding-bottom: 0;
    border-bottom: none;
    text-align: left;
}

.see-all-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--link-color);
}
.see-all-link:hover {
    text-decoration: underline;
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding-left: 0;
}

.activity-item {
    display: flex;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color); /* --gray-200 */
}
.activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.activity-icon { /* Placeholder for icon */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem; /* For text icons */
    color: var(--secondary-text-color); /* --gray-700 */
    flex-shrink: 0;
}
body[data-theme="dark"] .activity-icon {
    background-color: var(--gray-700);
    color: var(--gray-300);
}

.activity-details { flex: 1; }
.activity-text {
    font-size: 0.9375rem;
    margin-bottom: 2px;
    color: var(--primary-text-color);
}
.activity-meta {
    font-size: 0.8125rem; /* 13px */
    color: var(--secondary-text-color); /* --gray-600 */
}


@media (max-width: 767px) { /* From dashboard reference */
    .nav-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .nav-card .nav-description { /* Hide on smaller cards if too cluttered */
        /* display: none; */ /* Reference keeps it */
    }
}

@media (max-width: 480px) { /* From dashboard reference */
    .nav-grid {
        grid-template-columns: 1fr;
    }
    .nav-card {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
        padding: var(--space-md);
        gap: var(--space-md);
    }
    .nav-card .nav-icon {
        margin-bottom: 0;
    }
    .user-profile {
        padding: var(--space-md);
    }
}

/* Styles for new accounts layout (base_accounts.html) */
.accounts-container {
    /* Uses .page-container from core/main.css for overall structure */
}

.accounts-section {
    /* Uses .page-section from core/main.css */
}

.accounts-layout {
    display: flex;
    gap: var(--space-lg); /* Gap between sidebar and main content */
}

.accounts-sidebar {
    flex: 0 0 280px; /* Fixed width for sidebar, adjust as needed */
    /* background-color: var(--secondary-bg-color); */ /* Optional: if sidebar needs distinct bg */
    /* padding: var(--space-md); */
    /* border-radius: var(--border-radius-md); */
}

.sidebar-nav .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs); /* Small gap between nav items */
}

.sidebar-nav .nav-item .nav-link {
    display: block;
    padding: var(--space-sm) var(--space-md);
    text-decoration: none;
    color: var(--secondary-text-color);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
    font-weight: 500;
}

.sidebar-nav .nav-item .nav-link:hover {
    background-color: var(--primary-bg-hover-light);
    color: var(--primary-text-color);
}
body[data-theme="dark"] .sidebar-nav .nav-item .nav-link:hover {
    background-color: var(--primary-bg-hover-dark);
}


.sidebar-nav .nav-item .nav-link.active {
    background-color: var(--primary-color);
    color: var(--primary-contrast-text-color);
    font-weight: 600;
}
body[data-theme="dark"] .sidebar-nav .nav-item .nav-link.active {
    background-color: var(--primary-color-dark-theme);
}


.sidebar-nav .nav-item .nav-link-danger {
    color: var(--danger-color);
}
.sidebar-nav .nav-item .nav-link-danger:hover {
    background-color: var(--danger-bg-hover-light);
    color: var(--danger-text-hover-light);
}
body[data-theme="dark"] .sidebar-nav .nav-item .nav-link-danger:hover {
    background-color: var(--danger-bg-hover-dark);
    color: var(--danger-text-hover-dark);
}


.accounts-main-content {
    flex-grow: 1;
}

/* Styles for account_content_card (used in order_list.html, profile_form.html etc.) */
.account-content-card {
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--card-shadow);
    overflow: hidden; /* To contain table borders etc. */
}
body[data-theme="dark"] .account-content-card {
    background-color: var(--card-bg-color-dark);
    border: 1px solid var(--border-color-dark);
}

.account-content-card .card-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}
body[data-theme="dark"] .account-content-card .card-header {
    border-bottom-color: var(--border-color-dark);
}

.account-content-card .card-title {
    font-size: 1.5rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: var(--heading-color);
    margin: 0 0 var(--space-xs) 0;
}
.account-content-card .card-subtitle {
    font-size: 0.9375rem; /* text-sm */
    color: var(--text-color-muted);
    margin: 0;
}

.account-content-card .card-body {
    padding: var(--space-lg);
}

/* Order List Specific Styles */
.order-list-card .table-responsive {
    overflow-x: auto;
}
.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.orders-table th,
.orders-table td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
body[data-theme="dark"] .orders-table th,
body[data-theme="dark"] .orders-table td {
    border-bottom-color: var(--border-color-dark);
}

.orders-table thead th {
    background-color: var(--table-header-bg);
    color: var(--table-header-text-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8125rem; /* text-xs */
    letter-spacing: 0.05em;
}
body[data-theme="dark"] .orders-table thead th {
    background-color: var(--table-header-bg-dark);
}


.orders-table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
}
body[data-theme="dark"] .orders-table tbody tr:hover {
    background-color: var(--table-row-hover-bg-dark);
}

.orders-table td .link-primary {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500;
}
.orders-table td .link-primary:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

.status-badge {
    padding: 0.25em 0.6em;
    font-size: 0.75rem; /* text-xs */
    font-weight: 600; /* font-semibold */
    border-radius: var(--border-radius-full);
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
}
/* Status badge colors - using CSS variables for themes */
.status-badge.status-completed,
.status-badge.status-delivered,
.status-badge.status-shipped {
    background-color: var(--success-bg-light);
    color: var(--success-text-dark);
}
.status-badge.status-cancelled,
.status-badge.status-refunded {
    background-color: var(--danger-bg-light);
    color: var(--danger-text-dark);
}
.status-badge.status-pending_payment,
.status-badge.status-on_hold,
.status-badge.status-awaiting_manual_payment {
    background-color: var(--warning-bg-light);
    color: var(--warning-text-dark);
}
.status-badge.status-processing, /* Default/Processing */
.status-badge.status-awaiting_shipment_quote,
.status-badge.status-ready_for_shipment {
    background-color: var(--info-bg-light);
    color: var(--info-text-dark);
}

body[data-theme="dark"] .status-badge.status-completed,
body[data-theme="dark"] .status-badge.status-delivered,
body[data-theme="dark"] .status-badge.status-shipped {
    background-color: var(--success-bg-dark);
    color: var(--success-text-light);
}
body[data-theme="dark"] .status-badge.status-cancelled,
body[data-theme="dark"] .status-badge.status-refunded {
    background-color: var(--danger-bg-dark);
    color: var(--danger-text-light);
}
body[data-theme="dark"] .status-badge.status-pending_payment,
body[data-theme="dark"] .status-badge.status-on_hold,
body[data-theme="dark"] .status-badge.status-awaiting_manual_payment {
    background-color: var(--warning-bg-dark);
    color: var(--warning-text-light);
}
body[data-theme="dark"] .status-badge.status-processing,
body[data-theme="dark"] .status-badge.status-awaiting_shipment_quote,
body[data-theme="dark"] .status-badge.status-ready_for_shipment {
    background-color: var(--info-bg-dark);
    color: var(--info-text-light);
}


.order-list-card .empty-state {
    text-align: center;
    padding: var(--space-xl) var(--space-md);
}
.order-list-card .empty-state-icon .icon {
    width: 3rem; /* h-12 w-12 */
    height: 3rem;
    color: var(--icon-color-muted);
    margin: 0 auto var(--space-md);
}
.order-list-card .empty-state-title {
    font-size: 1.125rem; /* text-lg */
    font-weight: 500;
    color: var(--heading-color);
    margin-bottom: var(--space-xs);
}
.order-list-card .empty-state-message {
    color: var(--text-color-muted);
    margin-bottom: var(--space-lg);
}
.order-list-card .empty-state-actions .btn {
    /* Standard button styles from core/main.css */
}


/* Responsive adjustments for accounts layout */
@media (max-width: 991px) { /* md breakpoint in Bootstrap is 768, lg is 992. Let's use lg-ish */
    .accounts-layout {
        flex-direction: column;
    }
    .accounts-sidebar {
        flex: 0 0 auto; /* Reset flex basis */
        width: 100%;
        margin-bottom: var(--space-lg);
    }
    .sidebar-nav .nav-list {
        flex-direction: row; /* Horizontal on smaller screens */
        overflow-x: auto; /* Allow scrolling if too many items */
        padding-bottom: var(--space-sm); /* Space for scrollbar */
    }
    .sidebar-nav .nav-item {
        flex-shrink: 0; /* Prevent items from shrinking */
    }
}
/* Minimal User Profile Styles */
.minimal-user-profile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-top: 20px;
    border-top: 1px solid var(--border-color); /* Ensure --border-color is defined in core/main.css or adjust */
}

.minimal-user-greeting {
    font-size: 0.9em;
    color: var(--text-color-secondary); /* Or your desired text color */
}

.minimal-logout-form {
    margin: 0;
}

.minimal-logout-btn {
    background-color: var(--button-secondary-bg-color, #6c757d);
    color: var(--button-secondary-text-color, #fff);
    border: none;
    padding: 8px 15px;
    border-radius: var(--border-radius-small, 3px);
    cursor: pointer;
    font-size: 0.9em;
    text-transform: uppercase; /* Optional: for a bit more style */
    letter-spacing: 0.5px; /* Optional */
}

.minimal-logout-btn:hover {
    background-color: var(--button-secondary-hover-bg-color, #5a6268);
}

/* Adjustments for dashboard layout if needed */
.dashboard-container .nav-grid + .minimal-user-profile {
    margin-bottom: 30px; /* Add space before activity section */
}