@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root { 
    --ease-squish: cubic-bezier(0.25, 1, 0.5, 1); 
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }

body {
    height: 100vh; overflow: hidden; background-color: #1a1a2e; 
    display: flex; justify-content: center; align-items: center; padding: 20px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8); color: white;
}

.background-image {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
    background: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop') no-repeat center center/cover;
    transition: background-image 0.5s ease-in-out;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }

/* Hide Scrollbar Class */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Login */
.login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(25px); z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s; }
.login-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.login-card { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); padding: 40px; border-radius: 24px; width: 100%; max-width: 400px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.login-body { display: flex; flex-direction: column; gap: 15px; }
.login-body input { padding: 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.5); color: white; outline: none; text-shadow: none; }
button#login-btn, button#register-btn { padding: 15px; border-radius: 12px; border: none; background: #3498db; color: white; font-weight: bold; cursor: pointer; transition: transform 0.2s; }
button:hover { transform: scale(1.02); }
.secondary-btn { padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: white; cursor: pointer; margin-top: 10px; width: 100%; }
.toggle-text { font-size: 13px; margin-top: 10px; color: rgba(255,255,255,0.7); }
.toggle-text span { color: #f1c40f; cursor: pointer; font-weight: bold; text-decoration: underline; }
.error-msg { color: #e74c3c; font-size: 13px; font-weight: 600; text-shadow: none; background: rgba(0,0,0,0.2); padding: 5px; border-radius: 5px; display: none; }
.success-msg { color: #2ecc71 !important; background: rgba(46, 204, 113, 0.15) !important; display: block !important; }
.error-msg:not(:empty) { display: block; }

/* Dashboard - DYNAMIC RESIZING */
.glass-dashboard { 
    background: rgba(0, 0, 0, 0.3); 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); 
    backdrop-filter: blur(40px); 
    border-radius: 24px; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 25px; 
    
    /* Dynamic Width Settings */
    width: fit-content;
    min-width: 370px; 
    max-width: 95vw; 
    margin: 0 auto; 
    
    max-height: 95vh; 
    display: flex; 
    flex-direction: column; 
    animation: fadeUp 0.8s var(--ease-squish) forwards; 
    /* Smooth resize transition */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* PROFILE WIDGET STYLES */
.profile-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 25px 20px !important; }
.profile-info { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.profile-pfp-large { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.2); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.profile-default-icon { font-size: 80px; color: rgba(255,255,255,0.5); }
.profile-info h3 { margin: 0; font-size: 18px; font-weight: 700; color: white; }

.profile-actions { display: flex; gap: 12px; width: 100%; justify-content: center; margin-top: 5px; }
.profile-action-btn { 
    background: rgba(255, 255, 255, 0.1); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    color: white; 
    width: 40px; height: 40px; 
    border-radius: 12px; 
    cursor: pointer; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 16px; 
    transition: all 0.2s;
}
.profile-action-btn:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.profile-action-btn.logout { color: #e74c3c; border-color: rgba(231, 76, 60, 0.3); }
.profile-action-btn.logout:hover { background: rgba(231, 76, 60, 0.2); }

/* SETTINGS MODAL STYLES */
.settings-card { width: 100%; max-width: 500px; text-align: left; }
.settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.settings-header h2 { margin: 0; font-size: 20px; }
.close-icon { background: none; border: none; color: white; cursor: pointer; font-size: 18px; opacity: 0.7; }
.close-icon:hover { opacity: 1; }

.pfp-section { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
#settings-pfp-preview { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.2); }
.pfp-inputs { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pfp-inputs label { font-size: 12px; opacity: 0.7; }
.pfp-inputs input { width: 100%; padding: 10px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: white; outline: none; }

.settings-divider { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 15px 0; }

.input-group { margin-bottom: 15px; }
.input-group label { display: block; font-size: 12px; margin-bottom: 5px; opacity: 0.8; }
.input-group input { width: 100%; padding: 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: white; outline: none; }

.save-btn { width: 100%; padding: 12px; background: #2ecc71; border: none; border-radius: 10px; color: white; font-weight: bold; cursor: pointer; margin-top: 10px; }
.save-btn:hover { background: #27ae60; }

#upload-pfp-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 500;
}
#upload-pfp-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* LIQUID GLASS SEARCH BAR */
.search-container { display: flex; justify-content: center; margin-bottom: 20px; flex-shrink: 0; }
.search-box {
    display: flex; align-items: center; 
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 15px 25px; border-radius: 20px; width: 100%; max-width: 600px; 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); 
    transition: all 0.3s var(--ease-squish);
}
.search-box:focus-within { transform: scale(1.02); background: rgba(255, 255, 255, 0.3); }
.search-box i { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.search-box input { flex-grow: 1; border: none; background: transparent; outline: none; margin: 0 15px; font-size: 18px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.search-box input::placeholder { color: rgba(255,255,255,0.8); }
.search-btn { background: rgba(52, 152, 219, 0.8); border: none; color: white; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.search-btn:hover { background: #3498db; }

/* DRAG AND DROP STYLES */
.grid-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; overflow-y: auto; padding: 20px; margin: -20px; }

/* SMART COLUMNS */
.grid-column { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    flex: 0 0 320px; /* Fixed width prevents squishing */
    width: 320px;
    min-height: 200px; 
    
    /* Animation for appearing/disappearing */
    transition: all 0.3s ease;
    opacity: 1;
    transform: scale(1);
}

/* Hidden columns are fully removed but animate out */
.grid-column.hidden { 
    display: none; 
    opacity: 0;
    transform: scale(0.9);
}

.card.dragging { opacity: 0.5; border: 2px dashed #f1c40f; transform: scale(0.98); }
.grid-column.drag-over { background: rgba(255,255,255,0.05); border-radius: 15px; }

.card { background: rgba(0, 0, 0, 0.25); border-radius: 18px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.3s var(--ease-squish), background 0.3s ease; position: relative; z-index: 1; display: flex; flex-direction: column; cursor: grab; }
.card:hover { background: rgba(0, 0, 0, 0.35); transform: translateY(-3px); z-index: 10; }
.card-header { padding: 15px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; }
.card-header h3 { font-size: 15px; font-weight: 700; color: white; margin: 0; display: flex; align-items: center; }
.header-with-action { display: flex; justify-content: space-between; align-items: center; }
.add-btn { background: rgba(255,255,255,0.2); border: none; color: white; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: 0.3s; }
.add-btn:hover { background: #2ecc71; transform: rotate(90deg); }
.card-content { padding: 15px 20px; flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; }

/* BIGGER CLOCK (FIXED ALIGNMENT) */
.clock-card { 
    text-align: center; 
    background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1)); 
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--ease-squish), background 0.3s ease;
    /* Ensure there is enough height for movement */
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.clock-card::after {
    content: '📅 Open Calendar';
    position: absolute;
    bottom: 10px; /* Lower positioning */
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    opacity: 0;
    font-size: 11px; /* Slightly smaller text for better fit */
    font-weight: 700;
    color: #f1c40f;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

/* Move clock content WAY UP on hover to clear space */
.clock-card:hover .clock-content {
    transform: translateY(-25px); 
}

.clock-card:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.clock-content {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.digital-clock { font-size: 48px; font-weight: 800; letter-spacing: 2px; }
.date-display { font-size: 16px; color: rgba(255,255,255,0.9); text-transform: uppercase; margin-top: 5px; }

/* TASK WIDGET */
.input-area { 
    margin: 15px 20px 0 20px; 
    padding: 8px; 
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    animation: slideIn 0.3s ease; 
    display: flex; gap: 10px; align-items: center; 
    border-radius: 16px; 
}
.input-area.hidden { display: none; }
.input-area input { flex:1; padding: 10px 15px; background: transparent; border: none; color: white; font-size: 14px; outline: none; text-shadow: none; }
.input-area input::placeholder { color: rgba(255,255,255,0.5); }
.confirm-btn { background: #3498db; border: none; color: white; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 600; transition: 0.2s;}
.confirm-btn:hover { background: #2980b9; }

.progress-container { margin-bottom: 20px; padding: 0 5px; }
.progress-info { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; color: rgba(255,255,255,0.8); font-weight: 600; }
.progress-bar-bg { background-color: rgba(0,0,0,0.4); height: 12px; border-radius: 20px; overflow: hidden; width: 100%; border: 1px solid rgba(255,255,255,0.05); }
.progress-bar-fill { background: linear-gradient(90deg, #3498db, #2ecc71); height: 100%; width: 0%; border-radius: 20px; transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 0 10px rgba(46, 204, 113, 0.3); }

.task-list { list-style: none; overflow-y: auto; padding-right: 5px; }
.task-list li { 
    display: flex; align-items: center; justify-content: space-between; 
    background: var(--glass-bg); 
    padding: 12px 15px; 
    border-radius: 16px; 
    margin-bottom: 10px; 
    border: 1px solid var(--glass-border); 
    transition: all 0.2s; 
    animation: slideIn 0.4s var(--ease-squish) forwards; 
}
.task-list li:hover { background: rgba(255,255,255,0.15); transform: translateX(2px); }
.task-left { display: flex; align-items: center; flex: 1; overflow: hidden; gap: 12px; }
.task-left input { cursor: pointer; accent-color: #2ecc71; width: 20px; height: 20px; }
.task-left label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: white; font-size: 15px; transition: color 0.2s, opacity 0.2s; font-weight: 500; }
.checked-label { text-decoration: line-through; opacity: 0.5; color: #aaa; }
.delete-task-btn { background: none; border: none; color: #e74c3c; cursor: pointer; opacity: 0.6; transition: 0.2s; font-size: 16px; padding: 5px; }
.delete-task-btn:hover { opacity: 1; transform: scale(1.1); }

/* CHAT WIDGET */
.chat-card {
    height: 450px;
    min-height: 450px;
    max-height: 450px;
    display: flex;
    flex-direction: column;
}
.chat-card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    height: 100%;
}
.chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 8px; height: 0; }
.chat-msg { 
    font-size: 13px; padding: 8px 12px; border-radius: 12px; 
    background: rgba(0,0,0,0.25); 
    border: 1px solid rgba(255,255,255,0.08);
    max-width: 100%; word-wrap: break-word; line-height: 1.4; 
    animation: slideIn 0.2s ease;
}
.chat-msg strong { margin-right: 5px; font-size: 12px; font-weight: 700; }
.msg-time { font-size: 10px; color: rgba(255,255,255,0.4); margin-left: 6px; }

.chat-msg.pinned { border: 1px solid #f1c40f; background: rgba(241, 196, 15, 0.1); order: -1; }
#chat-pinned-area { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(241, 196, 15, 0.05); }

.chat-input-area { display: flex; padding: 12px 15px; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.1); border-radius: 0 0 18px 18px; gap: 10px; align-items: center; margin-top: auto;}
.chat-input-area input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 8px 15px; color: white; outline: none; text-shadow: none; font-size: 14px; }
.chat-input-area input:focus { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
#send-chat-btn { background: #3498db; border: none; color: white; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
#send-chat-btn:hover { transform: scale(1.1); }
#mute-chat-btn { background: transparent; border: none; color: #fff; cursor: pointer; font-size: 14px; transition: color 0.2s; }
.red-icon { color: #e74c3c !important; }

.delete-msg-btn, .pin-msg-btn, .mute-user-btn { float: right; margin-left: 8px; cursor: pointer; opacity: 0.5; font-size: 11px; margin-top: 3px; }
.delete-msg-btn:hover, .pin-msg-btn:hover, .mute-user-btn:hover { opacity: 1; }

.admin-card { border-color: #e74c3c !important; background: rgba(231, 76, 60, 0.2) !important; }
.head-admin-card { border-color: #f1c40f !important; background: rgba(241, 196, 15, 0.15) !important; }
.request-list { list-style: none; max-height: 200px; overflow-y: auto; }
.request-item { display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px; margin-bottom: 8px; gap: 10px; }
.request-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.accept-btn { background: #2ecc71; color: white; border:none; padding:5px 10px; border-radius:5px; cursor:pointer;}
.decline-btn { background: #e74c3c; color: white; border:none; padding:5px 10px; border-radius:5px; cursor:pointer; margin-left:5px;}
.role-toggle-label { font-size: 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.role-toggle-label input { margin: 0; cursor: pointer; width: 16px; height: 16px; accent-color: #f1c40f; }
.role-toggle-label input:disabled { opacity: 0.5; cursor: not-allowed; }

/* USER MANAGEMENT WIDGET */
/* Wrapper to keep buttons side-by-side */
.user-actions-group {
    display: flex;
    gap: 4px; /* Slightly tighter gap to fit 4 buttons */
    align-items: center;
    flex-shrink: 0; /* Prevents buttons from shrinking too much */
}

/* General Button Style */
.user-action-btn {
    border: none;
    padding: 4px 8px; /* SMALLER PADDING */
    border-radius: 6px; /* SMALLER RADIUS */
    cursor: pointer;
    font-size: 10px; /* SMALLER FONT */
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px; 
    min-width: 45px; /* REDUCED WIDTH */
}

/* Mute / Unmute (Blue) */
.btn-mute { background: rgba(52, 152, 219, 0.15); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.4); }
.btn-mute:hover { background: #3498db; color: white; transform: translateY(-1px); }

.btn-unmute { background: rgba(52, 152, 219, 0.15); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.4); opacity: 0.7; }
.btn-unmute:hover { opacity: 1; background: #3498db; color: white; }

/* Pause (Yellow) */
.btn-pause { 
    background: rgba(241, 196, 15, 0.15); 
    color: #f1c40f; 
    border: 1px solid rgba(241, 196, 15, 0.4); 
}
.btn-pause:hover { 
    background: #f1c40f; 
    color: #000; 
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.2);
    transform: translateY(-1px);
}

/* Unpause (Green) */
.btn-unpause { 
    background: rgba(46, 204, 113, 0.15); 
    color: #2ecc71; 
    border: 1px solid rgba(46, 204, 113, 0.4); 
}
.btn-unpause:hover { 
    background: #2ecc71; 
    color: white; 
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.2);
    transform: translateY(-1px);
}

/* Settings Button (Purple) */
.btn-settings { 
    background: rgba(155, 89, 182, 0.15); 
    color: #9b59b6; 
    border: 1px solid rgba(155, 89, 182, 0.4);
    min-width: 24px !important; /* Fixed Square like Delete */
    width: 24px;
    padding: 0 !important;
}
.btn-settings:hover { 
    background: #9b59b6; 
    color: white; 
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(155, 89, 182, 0.3);
}

/* Delete User Button (Small Red for Admin List) */
.btn-delete { 
    background: rgba(231, 76, 60, 0.15); 
    color: #e74c3c; 
    border: 1px solid rgba(231, 76, 60, 0.4);
    min-width: 24px !important; /* Fixed Square */
    width: 24px;
    padding: 0 !important;
}
.btn-delete:hover { 
    background: #e74c3c; 
    color: white; 
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.3);
}

/* --- SETTINGS: DELETE MY ACCOUNT (Danger Zone) --- */
.danger-zone {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(231, 76, 60, 0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.danger-zone-title {
    font-size: 12px;
    color: #e74c3c;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.delete-account-btn {
    width: 100%;
    padding: 12px;
    background: rgba(231, 76, 60, 0.1); /* Subtle red background */
    border: 1px solid rgba(231, 76, 60, 0.5);
    border-radius: 10px;
    color: #e74c3c;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.delete-account-btn:hover {
    background: #e74c3c;
    color: white;
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.25);
    transform: scale(1.02);
}

.delete-account-btn i {
    font-size: 14px;
}

/* ANIMATION GLITCH FIX */
.list-item { display: flex; align-items: center; text-decoration: none; color: rgba(255,255,255,0.95); padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; font-size: 14px; transition: all 0.2s; }
.list-item:hover { background: rgba(255,255,255,0.2); transform: scale(1.02); color: white; }
.list-item img { width: 18px; height: 18px; margin-right: 12px; }

.notepad-area { width: 100%; height: 100px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 10px; color: white; resize: none; outline: none; text-shadow: none; }

.weather-card { background: linear-gradient(135deg, rgba(41, 128, 185, 0.4), rgba(142, 68, 173, 0.4)); cursor: pointer; transition: transform 0.3s; }
.weather-header { display: flex; align-items: center; height: 40px; cursor: default; border-radius: 18px 18px 0 0; }
.location-clickable { border-bottom: 1px dashed rgba(255,255,255,0.6); cursor: pointer; }
.edit-icon { font-size: 12px; opacity: 0.7; margin-left: 6px; cursor: pointer; }
#weather-edit-mode { display: flex; gap: 5px; width: 100%; }
.hidden { display: none !important; }
#city-input { flex: 1; border: none; border-radius: 6px; padding: 4px 8px; font-size: 13px; outline: none; color: #333; text-shadow: none; }
#geo-btn { background: rgba(255,255,255,0.3); border: none; color: white; border-radius: 6px; width: 28px; cursor: pointer; }
#weather-content-area { cursor: pointer; }
.weather-grid { display: flex; flex-direction: column; gap: 8px; }
.weather-day { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.15); padding: 8px 12px; border-radius: 8px; color: white; font-size: 14px; }

/* ANIMATIONS */
@keyframes slideIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideOut { to { opacity: 0; transform: translateX(20px); } }
.slide-out { animation: slideOut 0.3s forwards; }

/* TOAST NOTIFICATIONS */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.1);
    animation: slideDown 0.3s ease forwards;
    min-width: 300px;
    justify-content: center;
}

.toast.error { border-color: #e74c3c; color: #ffadad; }
.toast.success { border-color: #2ecc71; color: #d1f2eb; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- FILE SHARING WIDGET --- */
.file-tabs { display: flex; gap: 10px; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px; }
.file-tab { background: transparent; border: none; color: rgba(255,255,255,0.5); font-weight: bold; cursor: pointer; font-size: 13px; }
.file-tab.active { color: #f1c40f; border-bottom: 2px solid #f1c40f; }
.file-list { list-style: none; overflow-y: auto; max-height: 250px; }
.file-item { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.05); padding: 8px 12px; border-radius: 8px; margin-bottom: 5px; font-size: 13px; }
.file-item a { color: #3498db; text-decoration: none; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.file-item a:hover { text-decoration: underline; }
.file-meta { font-size: 10px; color: rgba(255,255,255,0.4); margin-left: 10px; }
.delete-file-btn { background: none; border: none; color: #e74c3c; cursor: pointer; opacity: 0.6; }
.delete-file-btn:hover { opacity: 1; }

/* CHAT RECIPIENT DROPDOWN */
.chat-recipient-dropdown { 
    font-size: 11px; 
    padding: 4px; 
    border-radius: 5px; 
    border: 1px solid rgba(255,255,255,0.2); 
    background: rgba(0,0,0,0.3); 
    color: white; 
    outline: none; 
    max-width: 100px; 
}

/* --- CALENDAR MODAL STYLES --- */
#calendar-modal .login-card {
    max-width: 450px;
    padding: 25px;
    will-change: transform, opacity; /* Optimalisatie voor animatie */
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.calendar-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.cal-nav-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
}
.cal-nav-btn:hover { background: rgba(255,255,255,0.3); }

/* Grid for Days */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 20px;
}

.day-name {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: rgba(255,255,255,0.5);
    margin-bottom: 5px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    position: relative;
    border: 1px solid transparent;
    transition: 0.2s;
}

.calendar-day:hover { background: rgba(255,255,255,0.15); }

.calendar-day.empty { background: transparent; cursor: default; }

.calendar-day.today {
    border-color: #3498db;
    background: rgba(52, 152, 219, 0.1);
    font-weight: bold;
    color: #3498db;
}

.calendar-day.has-event::after {
    content: '';
    width: 4px;
    height: 4px;
    background-color: #f1c40f;
    border-radius: 50%;
    position: absolute;
    bottom: 4px;
}

.calendar-day.selected {
    background: #3498db;
    color: white;
    border-color: #3498db;
}

/* Selected Date Details */
.selected-date-view {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
}

.event-list {
    list-style: none;
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 10px;
}

.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.2);
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 5px;
    font-size: 13px;
}

.delete-event-btn {
    background: none;
    border: none;
    color: #e74c3c;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.7;
}
.delete-event-btn:hover { opacity: 1; }

#add-event-form {
    display: flex;
    gap: 8px;
}

/* --- APPLE STYLE ANIMATION --- */
.apple-zoom-in {
    animation: appleZoomIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes appleZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5); /* Start klein */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* Eindig normaal */
    }
}