/* ====================================================== */
/* GLOBAL SITE STYLES                                   */
/* (Including unified admin panel component styles)       */
/* ====================================================== */

/* Google Fonts - Combined imports for all fonts used across the site */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;600&family=Segoe+UI:wght@400;500;600;700&display=swap');

/* --- Root Variables for Common Theming --- */
/* You can now adjust these to affect both main site and admin panel */
:root {
    /* Primary Colors (Branding) - Used for links, primary buttons, table headers */
    --main-primary-blue: #007BFF;
    --main-primary-dark: #0056b3;

    /* Accent Colors (Specific Actions) */
    --accent-success: #28a745;
    --accent-danger: #dc3545;
    --accent-info: #17a2b8;
    --accent-warning: #ffc107;

    /* Grayscale Palette */
    --light-grey-bg: #f9f9f9;
    --white-bg: #ffffff;
    --dark-text: #333;
    --medium-text: #5b6f82;
    --light-border: #e0e0e0;
    --dark-border: #bdc3c7;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-subtle: rgba(0, 0, 0, 0.05);

    /* Typography */
    --font-heading: 'Montserrat', sans-serif; /* For specific headings, e.g., admin h3 */
    --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Default body font */
    --font-secondary-body: 'Open Sans', sans-serif; /* For elements like tab buttons */

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-s: 15px;
    --spacing-m: 20px;
    --spacing-l: 30px;
    --spacing-xl: 40px;

    /* Border Radii */
    --border-radius-small: 5px;
    --border-radius-medium: 10px;
    --border-radius-large: 15px;

    /* Transition */
    --transition-ease: all 0.3s ease-in-out;

    /* Additional variables that were mixed in later, consolidated here */
    --spacing-xxl: 50px;
    --light-border-login: #ccc; /* Specifically for login/forgot input borders */
    --shadow-light-login: rgba(0, 0, 0, 0.1); /* Specifically for login/forgot box shadow */
    --border-radius-small-login: 6px; /* Specifically for login/forgot inputs */
    --border-radius-medium-login: 15px; /* Specifically for login/forgot box */
}

body {
    margin: 0;
    font-family: var(--font-body); /* Using variable */
    background-color: var(--light-grey-bg); /* Using variable */
    color: var(--dark-text); /* Using variable */
    line-height: 1.6;
    display: flex; /* Added for sticky footer */
    flex-direction: column; /* Added for sticky footer */
    min-height: 100vh; /* Added for sticky footer */
}

header {
    background-color: var(--white-bg); /* Using variable */
    color: var(--dark-text); /* Using variable */
    box-shadow: 0 2px 4px var(--shadow-light); /* Using variable */
    padding: var(--spacing-s) var(--spacing-l); /* Using variable */
}

.topbar {
    display: flex;
    justify-content: space-between; /* Pushes logo to left, nav to right */
    align-items: center; /* Vertically centers content */
}

.topbar h1 {
    margin: 0;
    padding: 0;
}

.topbar h1 a {
    text-decoration: none;
    color: var(--dark-text);
    transition: var(--transition-ease);
}

.topbar h1 a:hover {
    color: var(--main-primary-blue);
}

.topbar nav a,
.topbar nav .welcome-text {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    font-weight: 500;
    color: var(--dark-text);
    text-decoration: none;
    transition: var(--transition-ease);
}

.topbar nav a:not(:last-child),
.topbar nav .welcome-text {
    margin-right: 15px;
}

.topbar nav a:last-child {
    margin-right: 0;
}

.topbar nav a:hover {
    color: var(--main-primary-blue);
}

nav a {
    color: var(--dark-text);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-ease);
}

nav a:hover {
    color: var(--main-primary-blue);
}

.container {
    max-width: 1000px;
    margin: var(--spacing-l) auto; /* Using variable */
    padding: 0 var(--spacing-m); /* Using variable */
    box-sizing: border-box; /* Ensures padding is included in max-width */
}

/* Base styles for all headings */
h1, h2 {
    color: var(--dark-text); /* Using variable */
    font-family: var(--font-body); /* Default to main body font */
    font-weight: 600;
}

/* Specific style for h2 (often used in admin panels) */
h2 {
    font-size: 2.2em;
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--main-primary-blue); /* Use primary blue for admin headings */
}

/* Specific style for h3 (often used in admin sections) */
h3 {
    font-family: var(--font-heading); /* Use Montserrat for admin subheadings */
    color: var(--dark-text);
    border-bottom: 2px solid var(--light-border); /* Using variable */
    padding-bottom: var(--spacing-s); /* Using variable */
    margin-top: var(--spacing-xl); /* Using variable */
    margin-bottom: var(--spacing-m); /* Using variable */
    font-size: 1.8em;
    font-weight: 600;
    line-height: 1.2;
}

.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.product-card {
    background-color: var(--white-bg); /* Using variable */
    border-radius: var(--border-radius-medium); /* Using variable */
    padding: var(--spacing-m); /* Using variable */
    box-shadow: 0 2px 6px var(--shadow-subtle); /* Using variable */
    transition: var(--transition-ease); /* Using variable */
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card h3 {
    margin: 0 0 10px;
    color: var(--dark-text); /* Ensure product card h3 color */
}

.product-card p {
    margin-bottom: 12px;
}

/* Unified Button Styles */
button {
    padding: var(--spacing-s) var(--spacing-m); /* Adjusted padding */
    background-color: var(--main-primary-blue); /* Using variable */
    color: white;
    border: none;
    border-radius: var(--border-radius-small); /* Using variable */
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition-ease); /* Added transition for all buttons */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for all buttons */
    text-transform: uppercase; /* Match admin button style */
    letter-spacing: 0.03em; /* Match admin button style */
    font-size: 1em; /* Ensure consistent font size */
}

button:hover {
    background-color: var(--main-primary-dark); /* Using variable */
    transform: translateY(-2px); /* Add subtle lift on hover */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* More pronounced shadow on hover */
}

/* Flash Messages - Consolidated */
.flash-message {
    padding: var(--spacing-s) var(--spacing-m); /* Consistent with login/forgot messages */
    margin-bottom: var(--spacing-m); /* Consistent with login/forgot messages */
    border-radius: var(--border-radius-small-login); /* Use specific login/forgot radius */
    font-weight: 600; /* Consistent with previous flash messages */
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
}

.flash-message.success {
    background-color: var(--accent-success);
    color: white;
    border-color: var(--accent-success);
}

.flash-message.error {
    background-color: #f2dede; /* Specific error color from previous flash messages */
    color: #a94442; /* Specific error text color from previous flash messages */
    border-color: #f5c6cb; /* Specific error border color from previous flash messages */
}

.flash-message.info {
    background-color: #d9edf7; /* Specific info color from previous flash messages */
    color: #31708f; /* Specific info text color from previous flash messages */
    border-color: #bee5eb; /* Specific info border color from previous flash messages */
}


/* --- ADMIN PANEL COMPONENT-SPECIFIC STYLES --- */
/* These styles are for components primarily found in the admin panel,
    but they now use the global theme variables and integrate with the site's overall look. */

/* Tabs Navigation */
.tabs {
    display: flex;
    justify-content: flex-start;
    border-bottom: 2px solid var(--dark-border); /* Using variable */
    margin-bottom: var(--spacing-l); /* Using variable */
    padding-bottom: 0;
    flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
}

.tab-button {
    background-color: var(--light-grey-bg); /* Using variable */
    border: none;
    outline: none;
    cursor: pointer;
    padding: var(--spacing-s) var(--spacing-m); /* Using variable */
    transition: var(--transition-ease); /* Using variable */
    font-size: 1.1em;
    font-weight: 500;
    color: var(--medium-text); /* Using variable */
    border-top-left-radius: var(--border-radius-small); /* Using variable */
    border-top-right-radius: var(--border-radius-small); /* Using variable */
    border: 1px solid transparent;
    border-bottom: none;
    position: relative;
    margin-right: 5px;
    font-family: var(--font-secondary-body); /* Specific font for tabs */
}

.tab-button:hover:not(.active) {
    background-color: rgba(0, 123, 255, 0.1); /* Lighter blue for hover */
    color: var(--main-primary-blue); /* Using variable */
}

.tab-button.active {
    background-color: var(--white-bg); /* Using variable */
    color: var(--main-primary-blue); /* Using variable */
    border: 1px solid var(--dark-border); /* Using variable */
    border-bottom-color: var(--white-bg); /* Using variable - Hide bottom border to merge with content */
    font-weight: 600;
    z-index: 1;
    margin-bottom: -2px; /* Pull active tab down to cover border */
}

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: var(--spacing-l); /* Using variable */
    box-shadow: 0 var(--spacing-s) var(--spacing-m) var(--shadow-light); /* Using variable */
    border-radius: var(--border-radius-medium); /* Using variable */
    overflow: hidden;
    background-color: var(--white-bg); /* Ensure table background is white */
}

.data-table th, .data-table td {
    border: 1px solid var(--light-border); /* Using variable */
    padding: var(--spacing-s) var(--spacing-m); /* Using variable */
    text-align: left;
}

.data-table th {
    background-color: var(--main-primary-blue); /* Using variable */
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.05em;
    font-family: var(--font-secondary-body); /* Specific font for table headers */
}

.data-table tbody tr:nth-child(even) {
    background-color: rgba(0, 123, 255, 0.05); /* Very light blue for even rows */
}

.data-table tbody tr:hover {
    background-color: var(--light-grey-bg); /* Using variable */
    color: var(--dark-text); /* Using variable */
    transition: var(--transition-ease); /* Using variable */
}

.actions-cell {
    white-space: nowrap;
    display: flex;
    gap: var(--spacing-xs); /* Using variable */
    align-items: center;
}

/* Admin Forms */
.admin-form {
    background-color: var(--white-bg); /* Forms will have a white background */
    padding: var(--spacing-l); /* Using variable */
    border-radius: var(--border-radius-medium); /* Using variable */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05); /* Subtle inner shadow */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m); /* Using variable */
    border: 1px solid var(--light-border); /* Added light border for definition */
}

.admin-form label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    color: var(--dark-text); /* Using variable */
    font-size: 1.05em;
}

.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="password"],
.admin-form input[type="number"],
.admin-form select {
    width: 100%;
    padding: var(--spacing-s) var(--spacing-m); /* Using variable */
    border: 1px solid var(--light-border); /* Using variable */
    border-radius: var(--border-radius-small); /* Using variable */
    box-sizing: border-box;
    font-size: 1em;
    background-color: var(--white-bg); /* Using variable */
    color: var(--dark-text); /* Using variable */
    transition: var(--transition-ease); /* Using variable */
}

.admin-form input[type="text"]:focus,
.admin-form input[type="email"]:focus,
.admin-form input[type="password"]:focus,
.admin-form input[type="number"]:focus,
.admin-form select:focus {
    border-color: var(--main-primary-blue); /* Using variable */
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); /* Focus ring matches primary blue */
}

.admin-form input[type="checkbox"] {
    margin-right: var(--spacing-xs); /* Using variable */
    transform: scale(1.15);
    accent-color: var(--main-primary-blue); /* Blue checkbox */
}

.input-small {
    width: 110px !important; /* Specific width for amount input */
    display: inline-block;
    margin-right: var(--spacing-xs); /* Using variable */
}

/* Specific Button Colors for Admin Actions */
/* These override the base button background for specific actions */
.button-recharge {
    background-color: var(--accent-success); /* Using variable */
}
.button-recharge:hover {
    background-color: #218838; /* Darker green */
}

.button-delete {
    background-color: var(--accent-danger); /* Using variable */
}
.button-delete:hover {
    background-color: #c82333; /* Darker red */
}

.button-create {
    background-color: var(--accent-info); /* Using variable */
}
.button-create:hover {
    background-color: #138496; /* Darker teal */
}

/* Smaller button for inline actions */
.button-small {
    padding: 6px 12px;
    font-size: 0.85em;
    margin-top: 0;
    transform: none; /* Override general button hover transform */
    box-shadow: none; /* Override general button shadow */
}
.button-small:hover {
    transform: none;
    box-shadow: none;
}

/* ====================================================== */
/* LOGIN & FORGOT PASSWORD SPECIFIC STYLES               */
/* These are placed after general styles for specificity  */
/* ====================================================== */

/* Outer container for login/forgot pages to center the box vertically and horizontally */
.login-container {
    padding-top: var(--spacing-xxl); /* 50px */
    padding-bottom: var(--spacing-xxl); /* 50px */
    display: flex;
    justify-content: center;
    align-items: center; /* Centers box vertically */
    flex-grow: 1; /* Allows it to take up available space, pushing footer down */
    margin: 0 auto; /* Ensure it's centered if its parent isn't flex */
}

/* Common styling for the white box for both login and forgot password */
.login-box {
    background: var(--white-bg);
    border-radius: var(--border-radius-medium-login); /* 15px */
    box-shadow: 0px 0px 12px var(--shadow-light-login); /* rgba(0, 0, 0, 0.1) */
    max-width: 420px; /* 420px */
    margin: auto; /* Centers the box horizontally within its flex parent */
    padding: var(--spacing-xl) var(--spacing-xl); /* 30px symmetrical padding */
    width: 100%;
    box-sizing: border-box;
    text-align: center; /* Centers H2 and other inline/inline-block children */
}

.login-box h2 {
    color: var(--main-primary-blue);
    font-family: var(--font-body); /* Using body font for consistency with other labels */
    margin-bottom: var(--spacing-l);
    font-size: 2.2em;
}

/* Form Group & Input Styles (Common for both forms) - Re-aligned with global variables */
/* This block should now be sufficient for general input styling */
.form-group {
    width: 100%;
    /* text-align will be overridden by specific form classes if needed */
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--dark-text);
    font-size: 0.95em;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] {
    border-radius: var(--border-radius-small-login); /* 6px */
    border: 1px solid var(--light-border-login); /* #ccc */
    width: 100%; /* Default to 100% width */
    padding: var(--spacing-s) var(--spacing-m); /* 10px 15px */
    box-sizing: border-box;
    font-size: 1em;
    background-color: var(--white-bg);
    color: var(--dark-text);
    transition: var(--transition-ease);
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus {
    border-color: var(--main-primary-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* Login Form Specifics */
.login-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally within the form */
    gap: var(--spacing-m); /* Space between form groups and button */
    margin-bottom: var(--spacing-m); /* Space below the form */
}

.login-form .form-group label {
    text-align: left; /* Ensure login labels are left-aligned */
}

.btn-primary { /* Applied directly to this button (Login button) */
    width: 100%; /* Full width as per your login-form button */
    padding: var(--spacing-m) var(--spacing-l); /* Larger padding as per your login-form button */
    font-size: 1.1em;
    margin-top: 0; /* Managed by form's gap */
}


/* Forgot Password Form Specifics (Critical for centering and width) */
.forgot-password-form {
    /* Inherits display: flex, flex-direction: column, align-items: center, gap from .login-form */
}

.forgot-password-form .form-group label {
    text-align: center; /* Override to center the "Enter your username or email:" label */
}

.forgot-password-form input[type="text"] {
    max-width: 280px; /* Constrain the width for the "Username or Email" input */
    margin-left: auto; /* Center the narrower input */
    margin-right: auto;
}

.forgot-password-form .btn { /* Targets the btn-warning specifically within this form */
    max-width: 280px; /* Constrain the width for the "Send Reset Link" button */
    margin-left: auto; /* Center the narrower button */
    margin-right: auto;
    padding: var(--spacing-s) var(--spacing-l); /* Add padding from general btn definition */
    font-size: 1em; /* Add font-size from general btn definition */
}


/* Links below the forms (Register and Forgot Password) */
.register-link,
.forgot-password-link {
    text-align: center;
    font-size: 0.9em;
    margin-top: var(--spacing-m); /* Consistent space above these links */
}

.register-link a,
.forgot-password-link a {
    color: var(--main-primary-blue);
    text-decoration: none;
    font-weight: 600;
}

.register-link a:hover,
.forgot-password-link a:hover {
    text-decoration: underline;
}


/* ====================================================== */
/* Responsive Adjustments                                 */
/* ====================================================== */
@media (max-width: 768px) {
    .container {
        padding: var(--spacing-m);
        margin: var(--spacing-m) auto;
    }
    h2 {
        font-size: 2em;
    }
    h3 {
        font-size: 1.5em;
    }
    .tab-button {
        font-size: 1em;
        padding: var(--spacing-s) var(--spacing-m);
        flex-grow: 1;
        margin-bottom: 5px;
        margin-right: 0;
    }
    .data-table th, .data-table td {
        padding: 10px;
        font-size: 0.9em;
    }
    .actions-cell {
        flex-direction: column;
        align-items: flex-start;
    }
    button { /* Applies to all general buttons, could affect admin buttons */
        width: 100%;
        margin-bottom: 5px;
    }
    /* Overrides for specific buttons on smaller screens if they need to stay small */
    .button-small {
        width: auto;
        margin-right: 0;
        margin-bottom: 5px;
    }
    .input-small {
        width: 100% !important;
        margin-bottom: 10px;
    }
    .admin-form input[type="text"],
    .admin-form input[type="email"],
    .admin-form input[type="password"],
    .admin-form input[type="number"],
    .admin-form select {
        width: 100%;
    }

    /* Responsive adjustments for login/forgot box specifically */
    .login-box {
        padding: var(--spacing-l);
        box-shadow: none;
        border-radius: 0;
        border: none;
    }
    .login-container {
        margin: 0;
        padding: 0;
        align-items: flex-start; /* Align to top to prevent box from getting too tall */
    }
    /* Ensure forgot password elements still narrow down, but within 100% of current view */
    .forgot-password-form input[type="text"],
    .forgot-password-form .btn {
        max-width: 90%; /* Adjust to be responsive, but still narrower than full width */
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .container {
        padding: var(--spacing-s);
        margin: var(--spacing-s) auto;
    }
    h2 {
        font-size: 1.8em;
    }
    .tabs {
        flex-wrap: wrap;
    }
    .tab-button {
        flex-grow: 1;
        margin-bottom: 5px;
    }
}

/* ====================================================== */
/* GLOBAL FOOTER STYLES                                   */
/* ====================================================== */

footer {
    background-color: var(--light-grey-bg);
    padding: var(--spacing-l) 0;
    margin-top: var(--spacing-xl);
    border-top: 1px solid var(--light-border);
    width: 100%;
    text-align: center;
    color: var(--dark-text);
    font-size: 0.9em;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevents footer from shrinking if content is too large */
}

footer .container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--spacing-m);
}