/* fileoo.com/style.css */
body {
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    background-color: #080510;
    color: #00FF41; /* Main theme color for general text if not overridden */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden; /* Allow vertical scroll if content exceeds viewport, hide horizontal */
    overflow-y: auto;
}

canvas#cyberpunk-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.auth-wrapper {
    background-color: rgba(10, 20, 40, 0.92);
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0, 255, 65, 0.3), 0 0 10px rgba(0,255,65,0.2) inset;
    max-width: 480px; /* Unified max-width (register was 480px, login 450px) */
    width: 100%;
    margin: auto;
    border: 1px solid #00e0c0;
    z-index: 1;
    position: relative;
}

.auth-wrapper h2 {
    text-align: center;
    color: #00e0c0;
    margin-bottom: 25px;
    font-family: 'Consolas', 'Courier New', Courier, monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.5em; /* Unified font-size (login was 1.5em, register 1.4em) */
}

.auth-form-group {
    margin-bottom: 20px; /* Unified (login was 20px, register 18px) */
}

.auth-form-group label {
    display: block;
    margin-bottom: 8px; /* Unified (login was 8px, register 7px) */
    color: #00e0c0;
    font-size: 0.9em;
    text-transform: uppercase;
}

.auth-input { /* For input[type="text"], input[type="password"], input[type="email"] */
    width: calc(100% - 22px); /* Account for padding */
    padding: 12px 10px; /* Unified (login was 12px 10px, register 10px) */
    border: 1px solid #00e0c0;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.65);
    color: #00e0c0; /* Unified (login was #00e0c0, register #e0e0e0) */
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
}

.auth-input:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(0,255,65,0.7);
    border-color: #33FF99;
}

.form-field-error { /* Unified from .login-error-message and .error-message */
    color: #FF4747;
    font-size: 0.85em;
    margin-top: 5px;
    display: block;
}

.auth-submit-button { /* Unified from .login-submit-button and direct input[type="submit"] styling */
    background-color: #00FF41;
    color: #000000;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em;
    width: 100%;
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.1s;
}

.auth-submit-button:hover {
    background-color: #33FF99;
    box-shadow: 0 0 15px #00FF41;
}

.auth-submit-button:active {
    transform: scale(0.98);
}

.auth-link-container { /* Unified from .register-link-container and .login-link-container */
    text-align: center;
    margin-top: 25px;
    font-size: 0.9em;
    color: #aaa; /* For text like "Already have an account?" */
}

.auth-link-container a {
    color: #00e0c0;
    text-decoration: none;
    font-weight: bold;
}

.auth-link-container a:hover {
    text-decoration: underline;
}

/* == Login Page Specific Styles == */
.login-overall-error {
    color: #FF4747;
    text-align: center;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #FF4747;
    background-color: rgba(255,71,71,0.15);
    border-radius: 4px;
}

/* == Register Page Specific Styles == */
.registration-feedback {
    font-size: 1em;
    text-align: center;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid; /* Base border, color set by .success or .error */
}

.registration-feedback.success {
    color: #33FF66;
    border-color: #33FF66;
    background-color: rgba(51,255,102,0.15);
}

.registration-feedback.error {
    color: #FF4747;
    border-color: #FF4747;
    background-color: rgba(255,71,71,0.15);
}

.registration-feedback a { /* Style for links specifically within registration feedback messages */
    color: #00FF41; /* Brighter green to match submit button */
    font-weight: bold;
    text-decoration: none;
}

.registration-feedback a:hover {
    text-decoration: underline;
}

/* === RESPONSIVE TABLE (CARD VIEW) === */
.responsive-table-container {
    width: 100%;
    margin: 20px auto; /* Example margin */
    overflow-x: auto; /* Allows horizontal scrolling on very small screens if content still overflows */
    background-color: rgba(10, 20, 40, 0.85); /* Dark background for the table container */
    border: 1px solid #00e0c0;
    border-radius: 6px;
    padding: 15px;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
}

.responsive-table {
    width: 100%;
    border-collapse: collapse;
    color: #00e0c0; /* Text color for table content */
}

.responsive-table th,
.responsive-table td {
    border: 1px solid #008a75; /* Darker teal for borders */
    padding: 10px 12px;
    text-align: left;
    font-size: 0.9em;
}

.responsive-table thead th {
    background-color: rgba(0, 50, 40, 0.7); /* Darker header background */
    color: #33FF99; /* Brighter text for headers */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.responsive-table tbody tr:nth-child(even) {
    background-color: rgba(0, 20, 30, 0.5); /* Slightly different bg for even rows */
}

.responsive-table tbody tr:hover {
    background-color: rgba(0, 60, 50, 0.7); /* Hover effect */
}

.responsive-table td a {
    color: #00FF41;
    text-decoration: none;
}
.responsive-table td a:hover {
    text-decoration: underline;
    color: #33FF99;
}

/* Card view for smaller screens */
@media screen and (max-width: 768px) {
    .responsive-table thead {
        display: none; /* Hide table headers */
    }

    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr,
    .responsive-table td {
        display: block; /* Make table elements stack */
        width: 100% !important; /* Force full width */
    }

    .responsive-table tr {
        margin-bottom: 15px;
        border: 1px solid #00e0c0; /* Border for each card */
        border-radius: 4px;
        background-color: rgba(10, 25, 45, 0.9); /* Background for each card */
    }
    .responsive-table tr:nth-child(even) { /* Override even row styling for card view consistency */
        background-color: rgba(10, 25, 45, 0.9);
    }


    .responsive-table td {
        text-align: right; /* Align text to the right */
        padding-left: 50%; /* Create space for the label */
        position: relative;
        border: none; /* Remove individual cell borders inside card */
        border-bottom: 1px dashed rgba(0, 224, 192, 0.3); /* Dashed separator for items in card */
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .responsive-table td:last-child {
        border-bottom: none; /* No border for the last item in a card */
    }

    .responsive-table td::before {
        content: attr(data-label); /* Use data-label for the pseudo-element content */
        position: absolute;
        left: 10px; /* Position label on the left */
        width: calc(50% - 20px); /* Label width */
        padding-right: 10px;
        font-weight: bold;
        text-align: left; /* Align label text to the left */
        color: #33FF99; /* Label color */
        text-transform: uppercase;
        font-size: 0.8em;
    }
}