/* =========================================
   1. АВТОРИЗАЦИЯ
   ========================================= */
.auth-wrapper {
    display: flex; justify-content: center; align-items: center;
    padding: 40px 0; min-height: 60vh;
}
.auth-card {
    background: #fff; width: 100%; max-width: 400px;
    padding: 30px; border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color); text-align: center;
}
.auth-header i { font-size: 40px; color: var(--primary-color); margin-bottom: 15px; }
.auth-links { margin-top: 20px; font-size: 13px; }

/* =========================================
   2. АДМИНКА
   ========================================= */
.admin-layout {
    display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start;
}
.admin-sidebar {
    background: #fff; border-radius: var(--radius);
    border: 1px solid var(--border-color); overflow: hidden;
    position: sticky; top: 80px;
}
.admin-nav-item {
    display: flex; align-items: center; padding: 12px 20px;
    color: var(--text-main); border-bottom: 1px solid #f1f5f9;
    font-weight: 600; font-size: 14px; transition: 0.2s;
}
.admin-nav-item:hover { background: var(--bg-hover); color: var(--primary-color); }
.admin-nav-item.active { background: var(--primary-color); color: #fff; }
.admin-nav-item i { width: 24px; text-align: center; margin-right: 10px; }

.admin-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border-color);
}

.admin-table {
    width: 100%; border-collapse: collapse; background: #fff;
    border-radius: var(--radius); border: 1px solid var(--border-color);
}
.admin-table th { background: #f8fafc; padding: 12px 15px; text-align: left; font-size: 12px; text-transform: uppercase; color: var(--text-muted); }
.admin-table td { padding: 12px 15px; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.admin-table tr:last-child td { border-bottom: none; }

.stats-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.stat-card {
    background: #fff; padding: 20px; border-radius: var(--radius);
    border: 1px solid var(--border-color); display: flex; align-items: center; gap: 15px;
}
.stat-icon {
    width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff;
}
.stat-icon.purple { background: #8b5cf6; }
.stat-icon.blue { background: #3b82f6; }
.stat-info h4 { margin: 0; font-size: 20px; }
.stat-info p { margin: 0; font-size: 12px; color: var(--text-muted); text-transform: uppercase; }

/* =========================================
   3. ПРОФИЛЬ
   ========================================= */
.profile-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.tab-btn {
    padding: 10px 15px; background: none; border: none; border-bottom: 3px solid transparent;
    cursor: pointer; font-weight: 600; color: var(--text-muted); font-size: 14px;
}
.tab-btn.active { color: var(--primary-color); border-color: var(--primary-color); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeEffect 0.5s; }
@keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }

.activity-widget { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; }
.widget-list { list-style: none; margin: 0; padding: 0; }
.widget-item { display: flex; padding: 15px; border-bottom: 1px solid #f1f5f9; }

/* =========================================
   4. ЧАТ (Messenger) - ОБЩИЕ СТИЛИ
   ========================================= */
/* Контейнер списка диалогов и чата в профиле */
.messenger-layout {
    display: grid; grid-template-columns: 250px 1fr; height: 600px;
    background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden;
}

/* Контейнер отдельной страницы чата */
.chat-container {
    display: flex; flex-direction: column; height: 600px;
    background: #fff; border: 1px solid var(--border-color);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}

.msg-list { border-right: 1px solid var(--border-color); overflow-y: auto; background: #fcfcfc; }

.contact-item {
    display: flex; align-items: center; padding: 15px; border-bottom: 1px solid #f1f5f9;
    cursor: pointer; color: inherit; transition: 0.2s;
}
.contact-item:hover { background: #f1f5f9; }
.contact-item.active { background: #eff6ff; border-left: 3px solid var(--primary-color); }

/* Зона чата (используется и в профиле, и в отдельной странице) */
.msg-chat { display: flex; flex-direction: column; background: #fff; }

.chat-header {
    padding: 15px 20px; background: #fff; border-bottom: 1px solid var(--border-color);
    display: flex; justify-content: space-between; align-items: center; z-index: 10;
}
.chat-partner-info { display: flex; align-items: center; gap: 10px; }
.chat-partner-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-color); }

.chat-area { 
    flex-grow: 1; padding: 20px; overflow-y: auto; 
    background-color: #f8fafc; /* Светло-серый фон для переписки */
    display: flex; flex-direction: column; gap: 10px; 
}

.chat-bubble {
    max-width: 75%; padding: 10px 15px; border-radius: 12px; font-size: 14px; position: relative; word-wrap: break-word;
}
.chat-bubble.me { align-self: flex-end; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-bottom-right-radius: 0; }
.chat-bubble.them { align-self: flex-start; background: #fff; border: 1px solid #e2e8f0; color: #334155; border-bottom-left-radius: 0; }
.chat-time { font-size: 10px; text-align: right; opacity: 0.6; margin-top: 4px; }

.chat-input-area, .chat-input-wrapper {
    padding: 15px; border-top: 1px solid var(--border-color); background: #fff;
    display: flex; gap: 10px; align-items: flex-end;
}

.chat-input, .chat-textarea {
    flex-grow: 1; border: 1px solid var(--border-color); border-radius: 8px;
    padding: 10px; font-size: 14px; resize: none; height: 42px; max-height: 120px;
    font-family: inherit; transition: border 0.2s; background: #fff;
}
.chat-input:focus, .chat-textarea:focus {
    border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

@media (max-width: 768px) {
    .admin-layout, .messenger-layout { grid-template-columns: 1fr; }
    .messenger-layout { grid-template-rows: 150px 1fr; } 
    .admin-sidebar { position: static; margin-bottom: 20px; }
}