/* ====================================================== */
/* 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;
}

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;
}

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 */
}

/* NEW: Use flexbox for the topbar to align logo and navigation */
.topbar {
    display: flex;
    justify-content: space-between; /* Pushes logo to left, nav to right */
    align-items: center; /* Vertically centers content */
}

/* Remove default margin from h1 inside topbar for cleaner alignment */
.topbar h1 {
    margin: 0;
    padding: 0;
}

/* Styles for navigation links and welcome text within the topbar */
.topbar nav a,
.topbar nav .welcome-text {
    display: inline-block; /* Allows margins to work correctly */
    vertical-align: middle; /* Helps align text/links vertically */
    white-space: nowrap; /* Prevents text from wrapping */
    font-weight: 500; /* Ensures consistent font weight */
    color: var(--dark-text); /* Ensures consistent text color */
    text-decoration: none; /* Removes underline by default */
    transition: var(--transition-ease); /* Smooth transitions */
}

/* NEW: Apply margin-right to all navigation items EXCEPT the last one */
.topbar nav a:not(:last-child),
.topbar nav .welcome-text {
    margin-right: 15px; /* Adjust this value for consistent spacing between items */
}

/* Ensure the very last link has no extra margin on its right */
.topbar nav a:last-child {
    margin-right: 0;
}

/* Hover effect for navigation links */
.topbar nav a:hover {
    color: var(--main-primary-blue); /* Changes color on hover */
}

/* Corrected: Removed conflicting margin-left from generic nav a rule if it existed */
/* This rule now only sets basic styles that are overridden by .topbar nav a for specifics */
nav a {
    color: var(--dark-text); /* Using variable */
    text-decoration: none;
    /* margin-left: var(--spacing-m); -- THIS LINE SHOULD BE REMOVED IF IT'S STILL PRESENT IN YOUR FILE */
    font-weight: 500;
    transition: var(--transition-ease); /* Using variable */
}

nav a:hover {
    color: var(--main-primary-blue); /* Using variable */
}

.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-m) var(--spacing-l); /* Adjusted padding */
    margin-bottom: var(--spacing-m); /* Adjusted margin */
    border-radius: var(--border-radius-small); /* Adjusted border radius */
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.flash-message.success {
    background-color: var(--accent-success); /* Using variable (admin green) */
    color: white; /* White text for better contrast */
    border: 1px solid var(--accent-success); /* Border matches background */
}

.flash-message.error {
    background-color: var(--accent-danger); /* Using variable (admin red) */
    color: white; /* White text for better contrast */
    border: 1px solid var(--accent-danger); /* Border matches background */
}

/* --- 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;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .container {
        padding: var(--spacing-m); /* Using variable */
        margin: var(--spacing-m) auto; /* Using variable */
    }
    h2 {
        font-size: 2em;
    }
    h3 {
        font-size: 1.5em;
    }
    .tab-button {
        font-size: 1em;
        padding: var(--spacing-s) var(--spacing-m); /* Using variable */
        flex-grow: 1; /* Tabs take equal width */
        margin-bottom: 5px; /* Add margin for wrapped tabs */
        margin-right: 0; /* Remove right margin when wrapped */
    }
    .data-table th, .data-table td {
        padding: 10px;
        font-size: 0.9em;
    }
    .actions-cell {
        flex-direction: column; /* Stack buttons on small screens */
        align-items: flex-start;
    }
    button {
        width: 100%; /* Full width buttons */
        margin-bottom: 5px;
    }
    .button-small {
        width: auto; /* Revert small buttons to auto width */
        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%;
    }
}

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

/* ====================================================== */
/* LOGIN PAGE SPECIFIC STYLES                             */
/* ====================================================== */

.login-container {
    display: flex;
    justify-content: center; /* Center the login box horizontally */
    align-items: center; /* Center the login box vertically */
    min-height: calc(100vh - (var(--spacing-l) * 2)); /* Adjust based on header/footer heights if known, otherwise 100vh for full viewport height minus general container margin */
    margin: var(--spacing-l) auto; /* Maintain general container margin, but flex handles primary centering */
    padding: 0 var(--spacing-m);
    box-sizing: border-box;
    max-width: 1000px; /* Max-width of the main container */
}

.login-box {
    background-color: var(--white-bg);
    padding: var(--spacing-xl); /* Generous padding inside the box */
    border-radius: var(--border-radius-large); /* Rounded corners */
    box-shadow: 0 5px 20px var(--shadow-light); /* More pronounced shadow for a distinct card */
    max-width: 400px; /* Limit the width of the login box */
    width: 100%; /* Ensure it takes full width up to max-width */
    text-align: center;
    border: 1px solid var(--light-border); /* Subtle border for definition */
}

.login-box h2 {
    color: var(--main-primary-blue); /* Consistent heading color */
    font-family: var(--font-heading); /* Use Montserrat for the main heading */
    margin-bottom: var(--spacing-l); /* Space below heading */
    font-size: 2.2em; /* Keep it prominent */
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m); /* Space between form groups */
    margin-top: var(--spacing-l);
}

.form-group {
    text-align: left; /* Align labels and inputs to the left within their group */
}

.form-group label {
    display: block; /* Make labels take full width */
    font-weight: 600;
    margin-bottom: var(--spacing-xs); /* Space between label and input */
    color: var(--dark-text);
    font-size: 0.95em;
}

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

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

.login-form .btn-primary { /* Targeting the specific button */
    /* Inherits most styles from the global 'button' rule */
    margin-top: var(--spacing-m); /* Space above the button */
    width: 100%; /* Full width button */
    padding: var(--spacing-m) var(--spacing-l); /* Slightly larger button */
    font-size: 1.1em;
}

/* Existing CSS for your register link */
.register-link {
    margin-top: var(--spacing-l); /* Space above the register link */
    font-size: 0.95em;
    color: var(--medium-text);
}

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

.register-link a:hover {
    color: var(--main-primary-dark);
    text-decoration: underline;
}

/* --- NEW CSS TO FIX INPUT FIELD SIZING --- */
/* Add these rules to the same CSS file (e.g., style.css) */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    width: 100%; /* Make them take full width of their container */
    padding: 10px; /* Add some internal spacing */
    margin-bottom: 15px; /* Space below each input */
    border: 1px solid #ccc; /* A light grey border */
    border-radius: 4px; /* Slightly rounded corners */
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    font-size: 16px; /* Ensure readable font size */
    line-height: 1.5; /* Good line height for text */
}

/* Optional: Add focus styles for when the user clicks into the input */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus {
    border-color: #007bff; /* Blue border on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Light blue shadow on focus */
}

/* Responsive adjustments for login page */
@media (max-width: 768px) {
    .login-box {
        padding: var(--spacing-l); /* Reduce padding on smaller screens */
        box-shadow: none; /* Remove shadow on very small screens to save space/be cleaner */
        border-radius: 0; /* Make it full width on small screens */
        border: none; /* Remove border */
    }
    .login-container {
        margin: 0; /* Remove top/bottom margin */
        padding: 0; /* Remove side padding */
    }
}

/* Style for the FooPhones 2.0 brand link in the header */
header .topbar h1 a {
    text-decoration: none; /* This removes the underline */
    color: var(--dark-text); /* Ensures the link inherits the same color as the h1 text */
    transition: var(--transition-ease); /* Adds a smooth transition for hover effect */
}

header .topbar h1 a:hover {
    color: var(--main-primary-blue); /* Changes color to your primary blue on hover */
}

footer {
    text-align: center; /* This will center the text content horizontally */
    padding: 20px 0; /* Add some padding for better visual spacing */
    margin-top: 40px; /* Add some space above the footer */
    background-color: var(--light-grey-bg); /* Optional: give it a subtle background */
    color: var(--dark-text); /* Optional: set text color */
    border-top: 1px solid var(--light-border); /* Optional: add a top border */
}