﻿/* Обновленный стиль для форума на тему деревообработки
   Вдохновлено природными цветами дерева и деревообрабатывающей тематикой */

/* SVG фон - древесная текстура */
body {
    background-color: #f5f1e8;
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath fill='%238B7355' fill-opacity='0.1' d='M50 0h50v50H50V0zm0 100h50v50H50v-50zm100-100h50v50h-50V0zm0 100h50v50h-50v-50zM0 50h50v50H0V50zm0 100h50v50H0v-50zm100 0h50v50h-50v-50zm100 0h50v50h-50v-50z'/%3E%3Cpath fill='%235D4037' fill-opacity='0.05' d='M100 50h100v50H100V50zm0 100h100v50H100v-50zM0 150h100v50H0v-50zM0 0h100v50H0V0z'/%3E%3C/g%3E%3C/svg%3E");
    scrollbar-color: #8D6E63 #EFEBE9;
    scrollbar-width: thin;
    margin: 0;
    font-family: 'Segoe UI', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #5D4037;
    line-height: 1.6;
    padding: 8px;
}

/* Современные scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #EFEBE9;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb {
    background: #A1887F;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #8D6E63;
}

/* Базовые стили для текста */
.code_td, .php_td, .q_td, .quote_td {
    font-size: 14px;
    color: #5D4037;
    font-family: 'Cascadia Code', 'Consolas', 'Monaco', monospace;
}

font, th, td, p {
    font-family: 'Segoe UI', 'SF Pro Text', -apple-system, sans-serif;
    font-size: 15px;
    color: #5D4037;
}

.gensmall { font-size: 13px; }
.genmed { font-size: 14px; }
TD.genmed { font-size: 14px; }
.explaintitle {
    font-weight: 600;
    font-size: 14px;
    color: #8D6E63;
}

/* Ссылки - цвета дерева и коры */
a:link, a:active, a:visited {
    color: #795548;
    text-decoration: none;
    transition: color 0.2s ease;
    border-bottom: 1px dotted transparent;
}
a:hover {
    color: #5D4037;
    text-decoration: none;
    border-bottom-color: #8D6E63;
}

a.postlink {
    color: #795548;
    text-decoration: none;
}
a.postlink:hover {
    color: #5D4037;
    text-decoration: underline;
}

/* Заголовки тем */
.topictitle {
    font-weight: 600;
    font-size: 14px;
}
a.topictitle:visited {
    color: #6D4C41;
}
a.topictitle:hover {
    color: #4E342E;
}

.name {
    font-weight: 600;
    font-size: 14px;
}

/* Горизонтальная линия */
hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #BCAAA4, transparent);
    margin: 20px 0;
}

/* Категории - как доски дерева */
td.cat, td.catHead, td.catSides, td.catLeft, td.catRight, td.catBottom {
    background: linear-gradient(135deg, #8D6E63 0%, #795548 100%);
    border: none;
    height: 36px;
    color: #FFF8E1;
    font-weight: 600;
    text-indent: 12px;
    letter-spacing: 0.5px;
    border-radius: 6px 6px 0 0;
}

/* Чередующиеся строки - цвета древесины */
.row1 {
    background: linear-gradient(to right, #FFF8E1, #FFECB3);
}
.row2 {
    background: linear-gradient(to right, #FFECB3, #FFE0B2);
}
.row3 {
    background: linear-gradient(to right, #FFE0B2, #FFCCBC);
}

.helpline {
    background: #FFECB3;
}

td.spacerow {
    background: #D7CCC8;
    height: 1px;
    padding: 0;
}

/* Заголовки таблиц */
th {
    padding: 0 16px;
    font-weight: 600;
    font-size: 14px;
    background: linear-gradient(135deg, #A1887F 0%, #8D6E63 100%);
    color: #FFF8E1;
    height: 40px;
    text-align: center;
    border: none;
    border-radius: 6px;
}

/* Основные контейнеры */
.bodyline {
    border: 2px solid #D7CCC8;
    background: #FFF8E1;
    border-radius: 12px;
    padding: 20px;
    margin: 10px auto;
    max-width: 1300px;
    box-shadow: 0 8px 20px rgba(141, 110, 99, 0.15);
}

.forumline {
    border: 2px solid #BCAAA4;
    background: #FFF8E1;
    border-radius: 8px;
    overflow: hidden;
}

/* Заголовки разделов */
.maintitle, h1, h2 {
    font: 600 26px/120% 'Playfair Display', 'Georgia', serif;
    color: #5D4037;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.subtitle {
    font: 600 20px/180% 'Playfair Display', 'Georgia', serif;
    color: #6D4C41;
}

/* Навигация */
.nav {
    font-weight: 600;
    font-size: 14px;
}

/* Содержимое сообщений */
.postbody {
    font-size: 15px;
    line-height: 1.7;
    color: #5D4037;
}

.postdetails {
    font-size: 13px;
    color: #8D6E63;
}

/* Блоки цитат и кода - как деревянные панели */
.code_table, .php_table, .q_table, .quote_table {
    border: 2px solid #BCAAA4;
    font-size: 14px;
    width: 97%;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    border-radius: 8px;
    overflow: hidden;
    background: #FFF8E1;
    margin: 15px 0;
}

.quote {
    border-left: 4px solid #8D6E63;
    font-size: 14px;
    background: #FFECB3;
    color: #5D4037;
    line-height: 1.6;
    border-radius: 4px;
    padding: 15px;
    margin: 10px 0;
}

.code {
    border: 2px solid #A1887F;
    padding: 15px;
    background: #FFF8E1;
    font: 13px 'Cascadia Code', 'Consolas', monospace;
    color: #795548;
    border-radius: 6px;
    overflow-x: auto;
}

.errorline {
    border: 2px solid #D32F2F;
    background: #FFCDD2;
    border-radius: 6px;
    padding: 10px;
}

/* Формы и ввод */
form { display: inline; }
input, select {
    font: 13px 'Segoe UI', sans-serif;
    color: #5D4037;
    background: #FFF8E1;
    border: 2px solid #BCAAA4;
    border-radius: 6px;
    padding: 10px 14px;
    transition: all 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #8D6E63;
    box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.2);
}

input.post, textarea.post {
    background: #FFF8E1;
    border: 2px solid #BCAAA4;
    padding: 12px;
}

textarea.post {
    font: 13px 'Segoe UI', sans-serif;
    min-height: 120px;
    resize: vertical;
}

/* Кнопки - как деревянные */
input.button, input.liteoption, .fakebut {
    border: 2px solid #8D6E63;
    background: linear-gradient(to bottom, #D7CCC8, #BCAAA4);
    font-size: 14px;
    font-weight: 600;
    color: #5D4037;
    border-radius: 6px;
    padding: 10px 22px;
    cursor: pointer;
    transition: all 0.2s ease;
}

input.button:hover, .fakebut:hover {
    background: linear-gradient(to bottom, #BCAAA4, #A1887F);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(141, 110, 99, 0.3);
}

input.mainoption {
    background: linear-gradient(to bottom, #8D6E63, #795548);
    color: #FFF8E1;
    border-color: #5D4037;
}

input.catbutton {
    background: linear-gradient(to bottom, #FFCC80, #FFB74D);
    color: #5D4037;
}

/* Стили администратора и модератора */
.admin {
    font-weight: 600;
    font-size: 14px;
    color: #E65100;
}
a.admin, a.admin:visited {
    color: #E65100;
}
a.admin:hover {
    color: #BF360C;
}

.mod {
    font-weight: 600;
    font-size: 14px;
    color: #2E7D32;
}
a.mod, a.mod:visited {
    color: #2E7D32;
}
a.mod:hover {
    color: #1B5E20;
}

/* Верхняя навигация */
.topnav {
    border: 1px solid #BCAAA4;
    font-size: 14px;
    background: linear-gradient(to bottom, #FFF8E1, #FFECB3);
    color: #5D4037;
    height: 28px;
    white-space: nowrap;
    border-radius: 6px;
}

.topbkg {
    background: linear-gradient(to right, #FFF8E1, #FFECB3, #FFF8E1);
}

/* Копирайт */
.copyright {
    font-size: 12px;
    color: #8D6E63;
    font-family: 'Segoe UI', sans-serif;
    letter-spacing: -0.5px;
}
a.copyright {
    color: #8D6E63;
    text-decoration: none;
}
a.copyright:hover {
    color: #5D4037;
    text-decoration: underline;
}

/* Стили WR-Forum Professional */
.pgbutt a {
    font-family: 'Segoe UI', sans-serif;
    padding: 8px 16px;
    text-decoration: none;
    border: 2px solid #8D6E63;
    background: linear-gradient(to bottom, #FFECB3, #FFCC80);
    color: #5D4037;
    padding: 8px 16px;
    margin: 4px 2px 0 0;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.pgbutt a:hover {
    background: linear-gradient(to bottom, #FFCC80, #FFB74D);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(141, 110, 99, 0.2);
}

/* QR-CODE */
#qr img {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 15px;
    bottom: 15px;
    border: 2px solid #8D6E63;
    padding: 3px;
    background-color: #FFF8E1;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}
#qr img:hover {
    width: 200px;
    height: 200px;
    z-index: 100;
    padding: 5px;
    transform: translateY(-5px);
}

/* Аватар гостя - деревянная табличка */
.guestavatar {
    width: 100px;
    height: 100px;
    text-align: center;
    background: linear-gradient(135deg, #D7CCC8, #BCAAA4);
    color: #5D4037;
    font-size: 36px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 3px solid #8D6E63;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Навигация в админке */
#nav8, #nav8 ul, #nav8 li { margin: 0; padding: 0; border: 0; }
#nav8, #nav8 ul { 
    background: linear-gradient(to bottom, #FFF8E1, #FFECB3);
    border-radius: 8px;
}
#nav8 { border-spacing: 0; position: relative; z-index: 50; width: 100%; }
#nav8 ul { 
    position: absolute; 
    display: none; 
    border-radius: 8px; 
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
#nav8 td:hover ul { display: block; }
#nav8 ul li { list-style: none; }
#nav8 a { 
    display: block; 
    padding: 12px 20px; 
    text-align: center; 
    text-decoration: none; 
    color: #5D4037;
    transition: all 0.2s ease;
}
#nav8 ul a { padding: 10px 25px; text-align: left; }
#nav8 td:hover, #nav8 li:hover { 
    background: linear-gradient(to right, #FFCC80, #FFB74D);
}
#nav8 td { text-align: center; }

/* Индикатор загрузки - как распил дерева */
#cssbar-wrapper { 
    width: 300px; 
    height: 6px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
}
#cssbar-border { 
    border: none; 
    height: 100%; 
    width: 100%; 
    position: relative; 
    left: -50%; 
    top: -50%; 
}
#cssbar-whitespace { 
    overflow: hidden; 
    height: 100%; 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    background: #EFEBE9; 
    border-radius: 3px;
}
#cssbar-line { 
    background: linear-gradient(90deg, #8D6E63, #A1887F, #BCAAA4, #A1887F, #8D6E63);
    background-size: 200% 100%;
    position: absolute; 
    height: 100%; 
    width: 100%; 
    animation: cssbar-slide 2s linear infinite;
    border-radius: 3px;
}

@keyframes cssbar-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    body {
        padding: 4px;
    }
    
    .bodyline {
        padding: 15px;
        margin: 8px;
        border-radius: 8px;
    }
    
    td.cat, td.catHead, th {
        font-size: 13px;
        padding: 8px;
    }
    
    .maintitle, h1, h2 {
        font-size: 20px;
    }
    
    #qr img {
        width: 30px;
        height: 30px;
        right: 10px;
        bottom: 10px;
    }
    
    #qr img:hover {
        width: 150px;
        height: 150px;
    }
}

/* Анимация плавного появления */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.bodyline, .forumline, .code_table, .quote {
    animation: fadeIn 0.4s ease-out;
}

/* Эффект древесных колец для hover */
td.row1:hover, td.row2:hover, td.row3:hover {
    background: linear-gradient(to right, #FFE0B2, #FFCC80);
    transition: background 0.3s ease;
}