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

:root {
    /* Желтый акцент (Industrial Yellow) */
    --primary-color: #FFD600; 
    --primary-hover-color: #E6C200;
    --primary-text-on-yellow: #000000; /* Черный текст на желтой кнопке */

    /* Черно-белая основа (Dark Mode) */
    --bg-color: #121212;         /* Почти черный фон страницы */
    --bg-card-color: #1E1E1E;    /* Темно-серый фон карточек/хедера */
    --text-color: #FFFFFF;       /* Белый основной текст */
    --text-muted: #A0A0A0;       /* Серый вторичный текст */
    
    --secondary-color: #333333;
    --border-color: #333333;
    
    /* Статусы */
    --success-color: #28a745; 
    --danger-color: #e74c3c; 
    --warning-color: #f1c40f;
    
    --border-radius: 4px; /* Более квадратные углы для "строгого" стиля */
    --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

body { 
    font-family: 'Inter', sans-serif; 
    margin: 0; 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    line-height: 1.6; 
    font-size: 16px; 
    -webkit-font-smoothing: antialiased; 
}

.page-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.main-content { flex-grow: 1; }
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }

/* --- HEADER --- */
.header { 
    background: var(--bg-card-color); 
    padding: 1rem 2rem; 
    border-bottom: 1px solid var(--border-color); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
}

/* Логотип (контейнер) */
.header .logo { 
    font-weight: 700; 
    font-size: 1.5rem; 
    color: var(--text-color); /* Белый текст */
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    transition: color 0.3s ease;
}

/* При наведении на логотип текст и иконка станут желтыми */
.header .logo:hover {
    color: var(--primary-color);
}

/* ВАШ КОД ЛОГОТИПА */
.icon-logo {
    display: inline-block;
    width: 32px; /* Чуть уменьшил для гармонии в хедере, можно вернуть 48px */
    height: 32px;
    vertical-align: middle;
    margin-right: 5px;

    /* Цвет берется из цвета текста родителя (color: ...) */
    background-color: currentColor; 

    /* Превращаем SVG в маску */
    -webkit-mask-image: url('logo.svg');
    mask-image: url('logo.svg');
    
    -webkit-mask-size: contain;
    mask-size: contain;
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    
    -webkit-mask-position: center;
    mask-position: center;
}

/* Навигация */
.header nav a { 
    color: var(--text-color); 
    text-decoration: none; 
    font-weight: 500; 
    margin-left: 1.5rem; 
    transition: color 0.2s ease; 
}
.header nav a:hover { color: var(--primary-color); }

.header .user-info { display: flex; align-items: center; gap: 1rem; font-weight: 500; }
.user-info .role-badge { 
    background-color: var(--primary-color); 
    color: var(--primary-text-on-yellow); 
    padding: 0.2rem 0.6rem; 
    border-radius: 2px; 
    font-size: 0.75rem; 
    font-weight: 700; 
    text-transform: uppercase; 
}

/* --- BUTTONS --- */
.btn { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.5rem; 
    padding: 0.75rem 1.5rem; 
    border: none; 
    border-radius: var(--border-radius); 
    font-weight: 600; 
    font-size: 1rem; 
    cursor: pointer; 
    text-decoration: none; 
    transition: all 0.2s ease; 
}

/* Желтая кнопка с черным текстом */
.btn-primary { 
    background-color: var(--primary-color); 
    color: var(--primary-text-on-yellow); 
}
.btn-primary:hover { 
    background-color: var(--primary-hover-color); 
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(255, 214, 0, 0.3); 
}

/* Вторичная кнопка (темная) */
.btn-secondary { 
    background-color: var(--secondary-color); 
    color: white; 
}
.btn-secondary:hover {
    background-color: #444;
}

.btn-danger { 
    background-color: transparent; 
    color: var(--danger-color); 
    border: 1px solid var(--danger-color); 
}
.btn-danger:hover { 
    background-color: var(--danger-color); 
    color: white; 
}

.btn-icon { padding: 0.5rem; width: 38px; height: 38px; font-size: 1.2rem; border-radius: 50%; }
.btn:disabled { background: #333; color: #666; cursor: not-allowed; }

/* --- FORMS & CARDS --- */
.card { 
    background: var(--bg-card-color); 
    border-radius: var(--border-radius); 
    box-shadow: var(--box-shadow); 
    padding: 1.5rem; 
    margin-bottom: 1.5rem; 
    border: 1px solid var(--border-color);
}

.auth-form { 
    max-width: 450px; 
    margin: 4rem auto; 
    padding: 2.5rem; 
    background: var(--bg-card-color); 
    border-radius: var(--border-radius); 
    box-shadow: var(--box-shadow); 
    text-align: center; 
    border: 1px solid var(--border-color);
}

.form-group { margin-bottom: 1.5rem; text-align: left; }
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; color: var(--text-color); }

/* Инпуты в темном стиле */
.form-group .input-control { 
    width: 100%; 
    padding: 0.75rem 1rem; 
    font-size: 1rem; 
    background-color: #2A2A2A; /* Темнее фона карточки */
    border: 1px solid var(--border-color); 
    border-radius: var(--border-radius); 
    color: white;
}
.form-group .input-control:focus { 
    outline: none; 
    border-color: var(--primary-color); 
    box-shadow: 0 0 0 2px rgba(255, 214, 0, 0.2); 
}

/* --- ALERTS & TOASTS --- */
.alert { padding: 1rem; margin-bottom: 1.5rem; border-radius: var(--border-radius); border: 1px solid transparent; display: none; }
.alert-danger { background-color: rgba(220, 53, 69, 0.2); color: #ff6b6b; border-color: #dc3545; }

#toast { 
    position: fixed; 
    bottom: -100px; 
    left: 50%; 
    transform: translateX(-50%); 
    padding: 1rem 1.5rem; 
    background-color: var(--primary-color); 
    color: var(--primary-text-on-yellow); 
    border-radius: var(--border-radius); 
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); 
    font-weight: 600; 
    z-index: 9999; 
    transition: bottom 0.5s ease-in-out; 
}
#toast.show { bottom: 2rem; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .container { padding: 1rem; }
    .header { flex-direction: column; gap: 1rem; padding: 1rem; }
    .header nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; }
    .header nav a { margin-left: 0; }
    .header .user-info { flex-wrap: wrap; justify-content: center; }
    .auth-form { margin: 2rem 1rem; padding: 1.5rem; }
}