/*************************************************************
БОРДОВЫЙ СТИЛЬ ДЛЯ PUNBB (улучшенная боковая панель)
Версия 2.0 — компактная панель: Вход/Регистрация + Админы онлайн
**************************************************************/

:root {
  --primary: #8B0000;
  --primary-light: #A52A2A;
  --primary-dark: #660000;
  --primary-border: #8B0000;
  --bg-white: #ffffff;
  --text-black: #000000;
  --bg-gray: #f7f7f7;
  --shadow: 0 4px 12px rgba(0,0,0,0.10);
  --radius: 8px;
  --transition: 0.2s ease;
}

/* ===== БАЗА ===== */
html, body { margin: 0; padding: 0; }
.punbb * { margin: 0; }
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
  padding: 0;
  list-style: none;
}
.punbb img { border: none; }
.punbb .main table {
  table-layout: fixed;
  width: 100%;
}
.checkfield input[type="checkbox"],
.radiofield input[type="radio"] { margin: 0 0.3em; }
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle;
}
body { font-size: 100.01%; }
.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
}
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif;
}
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {
  font-size: 1em;
  font-weight: normal;
}
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;
}
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace;
}
.punbb address, .punbb em { font-style: normal; }
.punbb .post-content em { font-style: italic; }
.punbb .post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
}
.punbb a { text-decoration: underline; }
.punbb optgroup { font-weight: bold; }

/* ===== СБРОС ОБТЕКАНИЙ ===== */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0;
  position: absolute;
  left: -9999px;
  overflow: hidden;
}

/* ===== ОСНОВНОЙ МАКЕТ ===== */
#pun {
  margin: 30px auto;
  max-width: 1400px;
  position: relative;
  padding-right: 280px; /* отступ под панель */
  box-sizing: border-box;
}
.punbb {
  float: left;
  width: 100%;
  height: auto;
}
#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
}
.punbb .section, .punbb .main { margin-bottom: 1em; }
.punbb .category, .punbb .post { margin-top: 0.4em; }
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost { margin-top: 0; }
#pun-post .topic { margin-top: 1em; }

/* ===== КОНТЕЙНЕРЫ И ГРАНИЦЫ ===== */
.punbb .section,
.punbb .forum,
.punbb .formal,
.punbb .modmenu,
.punbb .info,
.punbb .category,
.punbb .post {
  border-style: none none solid none;
  border-width: 0 0 2px 0;
  border-color: var(--primary-border);
}
.punbb .container {
  border-style: solid;
  border-width: 1px;
  border-color: var(--primary-border);
  border-radius: var(--radius);
  background: var(--bg-white);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition);
}
.punbb .container:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.13);
}

/* ===== ЗАГОЛОВКИ РАЗДЕЛОВ ===== */
#pun-stats h2,
.punbb .main h1,
.punbb .main h2,
#pun-debug h2,
.punbb-admin #pun-admin h2 {
  background-color: var(--primary);
  color: #ffffff;
  padding: 0.5em 1em;
  border-style: none solid solid none;
  border-width: 0 1px 1px 0;
  border-color: var(--primary-dark);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ===== ОБЩИЕ ЦВЕТА ===== */
.punbb .section .container,
.punbb .post-body,
.punbb .post-links,
.punbb td.tc2,
.punbb td.tc3,
.punbb .formal fieldset .post-box,
#viewprofile li strong,
#viewprofile li div,
#setmods dd,
.punbb .info-box,
.punbb #pun-main .info-box .legend {
  background-color: var(--bg-white);
  color: var(--text-black);
}
.punbb .main .container,
.punbb .post .container,
.punbb .post h3,
.punbb-admin #pun-admin .adcontainer {
  background-color: var(--bg-white);
  color: var(--text-black);
}

/* ===== ТАБЛИЦЫ ===== */
.punbb .main td {
  background-color: var(--bg-white);
  color: var(--text-black);
  border-color: var(--primary-border);
  border-style: solid none none solid;
  border-width: 1px 0 0 1px;
  padding: 0.8em 1em;
}
.punbb .main th {
  background-color: var(--bg-gray);
  color: var(--text-black);
  border-color: var(--primary-border);
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em;
}
.punbb .main .tcl { border-left-style: none; }
.punbb tbody.hasicon td.tcl { padding-left: 3.2em; }

/* ===== ИКОНКИ ===== */
.punbb div.icon {
  border-color: var(--primary);
  border-style: solid;
  border-width: 0.6em;
  height: 0;
  width: 0;
  line-height: 0;
  margin-top: 0.1em;
}
.punbb div.icon.i-red { border-color: var(--primary); }

/* ===== ССЫЛКИ ===== */
.punbb a:link,
.punbb a:visited {
  color: var(--primary);
  text-decoration: underline;
  transition: color var(--transition);
}
.punbb a:hover,
.punbb a:active {
  color: var(--primary-dark);
}

/* ===== ПОЛЯ ВВОДА ===== */
.punbb input,
.punbb select,
.punbb textarea,
.punbb .formal .container input,
.punbb .formal .container select,
.punbb .formal .container textarea {
  background-color: var(--bg-white);
  color: var(--text-black);
  border: 1px solid var(--primary-border);
  border-radius: 4px;
  padding: 0.3em 0.5em;
}
.punbb input:focus,
.punbb select:focus,
.punbb textarea:focus {
  border-color: var(--primary-dark);
  box-shadow: 0 0 4px rgba(139,0,0,0.3);
  outline: none;
}

/* ===== КНОПКИ ===== */
.punbb input[type="submit"],
.punbb input[type="button"] {
  background-color: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary-dark);
  border-radius: 4px;
  padding: 0.4em 1.2em;
  cursor: pointer;
  transition: background var(--transition), transform 0.1s;
}
.punbb input[type="submit"]:hover,
.punbb input[type="button"]:hover {
  background-color: var(--primary-dark);
  transform: scale(1.02);
}

/* ===== ЦИТАТЫ И КОД ===== */
.punbb .post-content .quote-box,
.punbb .post-content .code-box {
  background-color: var(--bg-gray);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius);
  color: var(--text-black);
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
}
.punbb .quote-box cite,
.punbb .code-box strong.legend {
  color: var(--primary);
  font-weight: bold;
  padding-bottom: 0.7em;
}

/* ===== ИНФО-БОКСЫ ===== */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius);
  background: var(--bg-white);
  margin: 0 0 1.1em 0;
}

/* ===== ПОСТЫ ===== */
.punbb .post .container {
  border-style: none solid solid solid;
  border-width: 1px;
  margin-top: -1px;
  padding-bottom: 1px;
}
.punbb .post h3 {
  border-style: solid solid none solid;
  border-width: 1px;
  border-color: var(--primary-border);
  background: var(--bg-white);
  border-radius: var(--radius) var(--radius) 0 0;
}
.punbb .post h3 span {
  padding: 0.5em 1em;
  display: block;
  margin-left: 19em;
  border-left: 1px solid var(--primary-border);
}
.punbb .post h3 strong {
  float: right;
  width: 5em;
  text-align: right;
  font-weight: normal;
}
.punbb .post .post-author {
  float: left;
  width: 19em;
  margin-top: -1.5em;
}
.punbb .post .post-author ul, .punbb .post .post-author p {
  padding: 0 1em 1em 1em;
  line-height: 140%;
}
.pa-author { font-size: 1.1em; font-weight: bold; }
.pa-author a { text-decoration: none; }
li.pa-title { padding-bottom: 0.4em; font-weight: bold; }
li.pa-online {
  border-left: 0.7em solid #66ff66;
  padding-left: 0.4em;
  margin-top: 0.7em;
}
.punbb .post-body {
  margin-left: 19em;
  border-left: 1px solid var(--primary-border);
  padding: 0 0 1px 0;
}
.punbb .post-box { padding: 1em; }
.punbb .post-links {
  margin-left: 19em;
  border-left: 1px solid var(--primary-border);
}
.punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  margin-left: -19em;
  border-top: 1px dashed var(--primary-border);
  text-align: right;
}
.punbb .post-links li { display: inline; padding-left: 1em; }
.pl-email, .pl-website { float: left; }

/* ===== НАВИГАЦИЯ ===== */
#pun-title {
  margin: 0;
  border: 1px solid var(--primary-border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-white);
}
#pun-title .container { border: none; }
#pun-title h1 {
  display: block;
  height: 40px;
  padding: 2em 1em 0 1em;
}
#pun-title h1 span { font-size: 1.5em; color: var(--primary); }

#pun-navlinks .container,
#pun-ulinks .container {
  background: var(--bg-white);
  border: 1px solid var(--primary-border);
  border-top: none;
  padding: 0.7em 1em;
}
#pun-navlinks li { display: inline; padding-right: 1em; }
#pun-navlinks li a,
#pun-ulinks li a {
  color: var(--primary);
  font-size: 1.1em;
}
#pun-navlinks li a:hover,
#pun-ulinks li a:hover { color: var(--primary-dark); }

#pun-ulinks .container { border-top: none; }
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  border-left: 1px solid var(--primary-border);
  white-space: nowrap;
}
#pun-ulinks li a { padding: 0 0.3em 0 0.6em; }
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
  border-left: none;
  padding-left: 0;
}

/* ===== СТАТИСТИКА (внизу) ===== */
#pun-stats .container {
  background: var(--bg-white);
  padding: 0.8em 1em;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius);
}
#pun-stats h2 {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
}
#pun-stats li.item1, #pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;
}
#pun-stats li.item3, #pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
}
li#onlinelist {
  margin-top: 1em;
  border-top: 1px solid var(--primary-border);
  float: left;
  width: 100%;
  line-height: 130%;
}
li#onlinelist div {
  border-top: 1px solid var(--primary-border);
  padding: 0.7em 0 0 0;
}

/* ===== 🔥 НОВАЯ БОКОВАЯ ПАНЕЛЬ (только вход/регистрация + админы) ===== */
#pun-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  width: 260px;
  padding: 0 0 0 20px;
  box-sizing: border-box;
}
#pun-sidebar .block {
  background: var(--bg-white);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 1.2em;
  padding: 1em;
}
#pun-sidebar .block h3 {
  background: var(--primary);
  color: #fff;
  margin: -1em -1em 0.8em -1em;
  padding: 0.5em 1em;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 1.1em;
  font-weight: bold;
}
/* Блок авторизации — крупные кнопки */
#pun-sidebar .auth-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
#pun-sidebar .auth-buttons a {
  display: block;
  text-align: center;
  padding: 0.6em 0;
  background: var(--primary);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.2em;
  transition: background var(--transition), transform 0.1s;
  border: 1px solid var(--primary-dark);
}
#pun-sidebar .auth-buttons a:hover {
  background: var(--primary-dark);
  transform: scale(1.02);
}
#pun-sidebar .auth-buttons a.register {
  background: #2e7d32; /* зелёный для регистрации */
  border-color: #1b5e20;
}
#pun-sidebar .auth-buttons a.register:hover {
  background: #1b5e20;
}
/* Если пользователь уже вошёл — показываем его имя */
#pun-sidebar .user-info {
  text-align: center;
  font-size: 1.1em;
  padding: 0.5em 0;
}
#pun-sidebar .user-info strong {
  color: var(--primary);
}
#pun-sidebar .user-info a {
  display: inline-block;
  margin-top: 0.3em;
  font-size: 0.9em;
}

/* Блок администраторов онлайн */
#pun-sidebar .admins-online ul {
  padding: 0;
  margin: 0;
}
#pun-sidebar .admins-online li {
  padding: 0.4em 0;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  gap: 8px;
}
#pun-sidebar .admins-online li:last-child { border-bottom: none; }
#pun-sidebar .admins-online .admin-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #ff4444;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(255,68,68,0.5);
}
#pun-sidebar .admins-online .admin-name {
  font-weight: bold;
  color: var(--primary);
}
#pun-sidebar .admins-online .admin-role {
  font-size: 0.85em;
  color: #888;
  margin-left: auto;
}
/* Если админов нет */
#pun-sidebar .admins-online .no-admins {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 0.3em 0;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 1100px) {
  #pun { padding-right: 0; }
  #pun-sidebar {
    position: static;
    width: 100%;
    padding: 20px 0 0 0;
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
  }
  #pun-sidebar .block {
    flex: 1 1 200px;
  }
}
@media (max-width: 700px) {
  .punbb .post .post-author {
    float: none;
    width: 100%;
    margin-top: 0;
  }
  .punbb .post-body,
  .punbb .post-links {
    margin-left: 0;
    border-left: none;
  }
  .punbb .post h3 span { margin-left: 0; border-left: none; }
  .punbb .post-links ul { margin-left: 0; }
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ УЛУЧШЕНИЯ ===== */
.punbb .formal .container { padding: 1.7em 2.3em 1.1em; }
.punbb fieldset {
  border: 1px solid var(--primary-border);
  border-radius: var(--radius);
  padding: 0 18px;
  margin: 0 0 1em 0;
}
.punbb fieldset legend {
  padding: 0 5px;
  margin: 0 0 0 11px;
  font-size: 1.1em;
}
.punbb .helplinks { color: var(--primary); }
.punbb .modmenu .container {
  background: var(--bg-white);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius);
  padding: 0.5em 1em;
  text-align: right;
}
.punbb .modmenu .container strong { float: left; }

/* =============================================================
   ПРИМЕР HTML ДЛЯ НОВОЙ БОКОВОЙ ПАНЕЛИ (вставьте в шаблон)
   =============================================================
   <div id="pun-sidebar">
     <!-- Блок авторизации -->
     <div class="block">
       <h3>Добро пожаловать</h3>
       <?php if ($pun_user['is_guest']): ?>
         <div class="auth-buttons">
           <a href="login.php" class="login">Войти</a>
           <a href="register.php" class="register">Регистрация</a>
         </div>
       <?php else: ?>
         <div class="user-info">
           <strong><?php echo $pun_user['username']; ?></strong><br>
           <a href="profile.php?id=<?php echo $pun_user['id']; ?>">Мой профиль</a> |
           <a href="login.php?action=logout">Выйти</a>
         </div>
       <?php endif; ?>
     </div>

     <!-- Блок администраторов онлайн -->
     <div class="block admins-online">
       <h3>&#128081; Администраторы онлайн</h3>
       <ul>
         <?php
         // Здесь должен быть ваш код, получающий список администраторов онлайн.
         // Пример статических данных:
         $admins_online = ['Admin1', 'Admin2'];
         if (count($admins_online) > 0):
           foreach ($admins_online as $admin):
         ?>
           <li>
             <span class="admin-dot"></span>
             <span class="admin-name"><?php echo $admin; ?></span>
             <span class="admin-role">администратор</span>
           </li>
         <?php
           endforeach;
         else:
         ?>
           <li class="no-admins">Сейчас админов нет</li>
         <?php endif; ?>
       </ul>
     </div>
   </div>
   ============================================================= */