/* Supplementary styles — light mode overrides and extras for styles.css */

/* Mobile container constraint */
.page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Light Mode Overrides — mostly same as default since new theme is already light */
body.light-mode {
    background-color: #f5f5f5;
    color: #333;
}

body.light-mode .page {
    background: #f5f5f5;
}

body.light-mode #authPage {
    background: linear-gradient(160deg, #4a9e8e 0%, #3d8b7a 30%, #2d7a6d 60%, #2a6b70 100%);
}

body.light-mode .auth-container {
    background-color: transparent;
    box-shadow: none;
}

body.light-mode .auth-container h1 {
    color: white;
}

body.light-mode .auth-container p {
    color: rgba(255, 255, 255, 0.8);
}

body.light-mode .auth-form input[type="password"],
body.light-mode .auth-form input[type="text"] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
}

body.light-mode .auth-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

body.light-mode .toggle-password {
    color: rgba(255, 255, 255, 0.6);
}

body.light-mode .remember-password {
    color: rgba(255, 255, 255, 0.8);
}

body.light-mode .chat-header,
body.light-mode .settings-header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid #e0e0e0;
}

body.light-mode .user-details h1 {
    color: #333;
}

body.light-mode .message-bubble .timestamp {
    color: rgba(0, 0, 0, 0.4);
}

body.light-mode .message-bubble.received {
    background-color: #ffffff;
    color: #333;
}

body.light-mode .input-area {
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid #e0e0e0;
}

body.light-mode #messageInput {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
}

body.light-mode #messageInput::placeholder {
    color: #999;
}

body.light-mode .send-btn:disabled {
    background-color: #ccc;
}

body.light-mode .settings-group {
    background-color: #ffffff;
}

body.light-mode .settings-item {
    border-bottom: 1px solid #f0f0f0;
}

body.light-mode .settings-item-text p {
    color: #333;
}

body.light-mode .toggle-switch {
    background-color: #ddd;
}

body.light-mode .user-profile h2 {
    color: #333;
}

body.light-mode .user-profile p {
    color: #999;
}

body.light-mode .modal-content {
    background-color: #ffffff;
}

body.light-mode .modal-content h3 {
    color: #333;
}

body.light-mode .modal-content p {
    color: #666;
}

body.light-mode .modal-actions button.btn-secondary {
    background-color: #f0f0f0;
    color: #333;
}

body.light-mode .modal-actions button.btn-secondary:hover {
    background-color: #e5e5e5;
}

body.light-mode .btn-primary {
    background-color: #5ece5a;
    color: white;
}

body.light-mode .btn-primary:hover {
    background-color: #4db848;
}

/* Confirm Clear Modal — uses class toggle */
#confirmClearModal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

#confirmClearModal.active {
    display: flex;
}

/* Info Modal icon colors */
.modal-icon-container {
    font-size: 36px;
    margin-bottom: 15px;
}

.modal-icon-container.info { color: #007aff; }
.modal-icon-container.success { color: #34c759; }
.modal-icon-container.warning { color: #ffcc00; }
.modal-icon-container.error { color: #ff3b30; }

/* Dark Mode Active placeholder */
body.dark-mode-active {
    /* Default is already dark; placeholder for explicit toggle */
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}