/* Base styles */
html {
    font-size: 16px;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0.625rem;
    min-height: 100vh;
    font-size: 1rem;
    line-height: 1.5;
}

.container {
    display: flex;
    gap: 1.25rem;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0.625rem;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
}

.user-profile, .full-name-section {
    flex: 1;
    max-width: 21.875rem;
    padding: 0.9375rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
}

.user-profile h2, .full-name-section h2 {
    color: #2c3e50;
    font-size: 1.4em;
    margin-bottom: 0.9375rem;
    border-bottom: 0.125rem solid #3498db;
    padding-bottom: 0.625rem;
}

#data-container, #full-name-container {
    margin-top: 0.9375rem;
}

.data-item {
    padding: 0.625rem;
    border: 0.0625rem solid #ddd;
    border-radius: 0.3125rem;
    margin: 0.3125rem 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
    word-break: break-word;
}

.data-item:hover {
    background-color: #f1f1f1;
}

.email-section {
    flex: 3;
    min-width: 0;
    padding: 0 0.625rem;
}

.header {
    margin-bottom: 1.875rem;
}

.header h1 {
    color: #2c3e50;
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.email-display, .emails-list, .email-view {
    margin-top: 1.25rem;
}

.emails-list {
    max-height: 25rem;
    overflow-y: auto;
    border: 0.0625rem solid #ddd;
    padding: 0.625rem;
    border-radius: 0.3125rem;
}

.email-item {
    display: flex;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 0.0625rem solid #ddd;
    cursor: pointer;
}

.email-item:hover {
    background-color: #f1f1f1;
}

.email-sender {
    font-weight: bold;
    margin-right: 0.625rem;
    min-width: 9.375rem;
    color: #2c3e50;
}

.email-subject {
    flex: 1;
    color: #333;
    margin-right: 0.625rem;
    word-break: break-word;
}

#toast {
    visibility: hidden;
    min-width: 15.625rem;
    margin-left: -7.8125rem;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 0.3125rem;
    padding: 1rem;
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: 1.875rem;
    font-size: 0.875rem;
}

#toast.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 1.875rem; opacity: 1;}
}

@keyframes fadeout {
    from {bottom: 1.875rem; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}

.email-view {
    background: white;
    padding: 0.9375rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
}

.email-view h3 {
    font-size: 1.3em;
    margin: 0 0 0.625rem 0;
    color: #2c3e50;
    word-break: break-word;
}

.email-view .email-sender {
    color: #666;
    margin-bottom: 0.9375rem;
    font-size: 0.9em;
}

.email-content {
    margin-top: 0.9375rem;
    padding: 0.9375rem;
    background: #f9f9f9;
    border-radius: 0.3125rem;
    line-height: 1.5;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
}

.email-content iframe {
    width: 100% !important;
    min-height: 18.75rem;
    border: none;
    display: block;
}

.back-button {
    padding: 0.5rem 1rem;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.3s;
    margin-bottom: 0.9375rem;
    text-decoration: none;
    display: inline-block;
}

.back-button:hover {
    background-color: #2980b9;
}

.email-display {
    background: white;
    padding: 0.9375rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
    margin-bottom: 1.25rem;
}

.email-display h2 {
    font-size: 1.2em;
    margin: 0 0 0.625rem 0;
    color: #2c3e50;
}

.email-password-container {
    display: flex;
    gap: 0.625rem;
    margin: 0.625rem 0;
}

.email-box, .password-box {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: #f1f1f1;
    border-radius: 0.25rem;
    border: 0.0625rem solid #ddd;
    font-family: monospace;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s;
    word-break: break-all;
}

.email-box:hover, .password-box:hover {
    background: #e1e1e1;
}

.email-label {
    font-weight: bold;
    margin-bottom: 0.3125rem;
    color: #555;
    font-size: 0.875rem;
}

.fetch-button {
    padding: 0.5rem 1rem;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.3s;
    width: 100%;
    max-width: 100%;
}

.fetch-button:hover {
    background-color: #2980b9;
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
    html {
        font-size: 14px;
    }
    
    .container {
        max-width: 95%;
    }
}

@media screen and (max-width: 992px) {
    html {
        font-size: 13px;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 12px;
    }

    .container {
        flex-direction: column;
        padding: 0.625rem;
    }

    .user-profile, .email-section, .full-name-section {
        max-width: 100%;
        margin-bottom: 1.25rem;
    }
    
    .email-password-container {
        flex-direction: column;
    }

    .email-sender {
        min-width: 6.25rem;
    }
}

@media screen and (max-width: 480px) {
    html {
        font-size: 11px;
    }

    .email-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .email-sender {
        margin-bottom: 0.3125rem;
    }
}

/* High Resolution Screens */
@media screen and (min-width: 2000px) {
    html {
        font-size: 18px;
    }

    .container {
        max-width: 1800px;
    }
}

@media screen and (min-width: 2500px) {
    html {
        font-size: 20px;
    }

    .container {
        max-width: 2000px;
    }
}

/* Print styles */
@media print {
    .container {
        display: block;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .email-section {
        page-break-before: always;
    }
}