/* ==========================================================
   eegov.net – стили портала поверх XP.css
   ========================================================== */

/* XP.css по умолчанию ставит пиксельный шрифт без кириллицы – меняем на системный Tahoma */
body, input, label, textarea, select, option, button, .status-bar-field, ul.tree-view, .window {
  font-family: Tahoma, Verdana, "MS Sans Serif", Arial, sans-serif;
}

body {
  margin: 0;
  padding: 10px 0 20px;
  background: #0b2a7a url(/img/bg.gif);
  color: #000;
  font-size: 12px;
}

a { color: #0033cc; }
a:visited { color: #663399; }
a:hover { color: #ff0000; }
img { border: 0; }
h1, h2, h3 { font-family: Verdana, Tahoma, sans-serif; color: #0a246a; }
h1 { font-size: 20px; margin: 0 0 10px; }
h2 { font-size: 16px; margin: 14px 0 8px; }
h3 { font-size: 13px; margin: 10px 0 6px; }
p { margin: 0 0 8px; line-height: 1.45; }
hr { border: 0; border-top: 1px solid #7f9db9; border-bottom: 1px solid #fff; }

.center { text-align: center; }
.small { font-size: 11px; color: #444; }
.mid { vertical-align: middle; }
.red { color: #cc0000; }
.blink { animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* ---------- Каркас страницы: 1000 пикселей по центру ---------- */
#page {
  width: 1000px;
  margin: 0 auto;
  background: #fff;
  border: 2px outset #6f8fd8;
  box-shadow: 0 0 0 1px #000;
}

/* При дробном масштабе экрана (125%, 150%) между кусками нарезки бывают
   субпиксельные щели – подложка в тон шапке делает их незаметными */
#hdr { display: table; background: #1846c4; }
#hdr td { padding: 0; }
#hdr img { display: block; }
#hdr-wap { display: none; }

#nav {
  background: linear-gradient(#16307a, #06134a);
  padding: 4px 20px;
  border-bottom: 2px solid #ffb000;
  line-height: 0;
}
#nav img { display: inline-block; }

#ticker {
  background: #ffffcc;
  border-bottom: 1px solid #c0a000;
  color: #990000;
  font-weight: bold;
  padding: 3px 0;
}

/* Сетка – «таблица на максималках»: две боковые колонки и контент */
#layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 200px;
  grid-template-areas: "left content right";
  gap: 10px;
  padding: 10px;
  background: #ece9d8;
}
#left { grid-area: left; }
#content { grid-area: content; min-width: 0; }
#right { grid-area: right; }

/* Боковые окошки в стиле Windows XP */
.window.side { margin-bottom: 10px; }
.window.side .window-body { margin: 6px; }
.window-body.collapsed { display: none; }
.window.content-box { margin-bottom: 12px; }
.window.content-box > .window-body { margin: 10px; background: #fff; padding: 10px; border: 1px solid #7f9db9; }

#today { font-weight: bold; text-align: center; margin-bottom: 4px; }
.lcd {
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #33ff33;
  background: #001a00;
  border: 2px inset #808080;
  padding: 2px 0;
}

.side-search { display: flex; gap: 4px; }
.side-search input { flex: 1; min-width: 0; }
.side-search button { min-width: 0; padding: 0 6px; }

.counter {
  display: inline-block;
  width: 88px; height: 31px;
  box-sizing: border-box;
  background: linear-gradient(#3a3a3a, #000);
  border: 1px solid #000;
  color: #fff;
  line-height: 1;
  padding-top: 3px;
}
.counter-label { display: block; font-size: 9px; color: #ffcc00; }
.counter-digits { display: block; font: bold 13px "Courier New", monospace; color: #33ff33; letter-spacing: 1px; margin-top: 2px; }

.poll-row { margin-bottom: 6px; font-size: 11px; }
.poll-row progress { display: block; width: 100%; margin-top: 2px; }

.news-date { font-weight: bold; color: #cc0000; margin-bottom: 2px; }
#right textarea { width: 100%; box-sizing: border-box; font-size: 10px; resize: none; }

#content ul.bullets { list-style: none; padding-left: 0; }
#content ul.bullets li { background: url(/img/bullet.gif) no-repeat 0 4px; padding-left: 14px; margin-bottom: 5px; }

/* Таблицы форума, доски объявлений и т.п. */
table.grid { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
table.grid th {
  background: linear-gradient(#3a7bf0, #0a246a);
  color: #fff;
  text-align: left;
  padding: 4px 6px;
  font-size: 11px;
}
table.grid td { border: 1px solid #b0c4de; padding: 5px 6px; vertical-align: top; }
table.grid tr:nth-child(even) td { background: #f0f5ff; }

.post { border: 1px solid #7f9db9; margin-bottom: 10px; }
.post-head { background: #dfe8f7; border-bottom: 1px solid #7f9db9; padding: 3px 6px; font-size: 11px; }
.post-head b { color: #0a246a; }
.post-body { padding: 6px 8px; }

.photo-float { float: right; margin: 0 0 8px 10px; border: 3px ridge #c0c0c0; background: #fff; }
.clear { clear: both; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gallery figure { margin: 0; text-align: center; border: 2px outset #ddd; background: #f8f8f8; padding: 6px; font-size: 11px; }
.gallery img { max-width: 100%; height: auto; }

.form-table td { padding: 3px 4px; vertical-align: top; }
.form-table input[type=text], .form-table textarea { width: 100%; box-sizing: border-box; }

#footer {
  background: linear-gradient(#16307a, #06134a);
  color: #dfe8ff;
  text-align: center;
  padding: 10px;
  border-top: 2px solid #ffb000;
}
#footer a { color: #ffd23f; }
#footer .small { color: #aab8e8; }
#footer .banners img { margin: 0 2px; }

/* Модальное XP-окно (заменяет alert(), который запрещён в нашей вёрстке) */
.xp-modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.xp-modal { width: 320px; max-width: calc(100vw - 32px); }
.xp-modal .window-body { display: flex; gap: 10px; align-items: flex-start; margin: 12px; }
.xp-modal .xp-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9fd0ff, #1d5fd6); color: #fff; font: bold 22px/32px Georgia, serif; text-align: center; }
.xp-modal .buttons { text-align: center; margin: 0 12px 12px; }

/* Искорки за курсором */
.sparkle { position: fixed; pointer-events: none; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #ffd23f; box-shadow: 0 0 6px #fff200; transform: rotate(45deg); z-index: 999; animation: sparkle 0.7s linear forwards; }
@keyframes sparkle { to { opacity: 0; transform: rotate(225deg) translateY(18px) scale(0.3); } }

/* ==========================================================
   «WAP-раскладка»: на узких экранах сетка перестраивается
   без JS – одна колонка, компактная шапка, кнопки плиткой
   ========================================================== */
@media (max-width: 1019px) {
  body { padding: 0; }
  #page { width: auto; border: 0; box-shadow: none; }
  #hdr { display: none; }
  #hdr-wap { display: block; background: #06134a; text-align: center; line-height: 0; }
  #hdr-wap img { max-width: 100%; height: auto; }
  #nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; }
  /* Кнопки не растягиваем больше родных 120px – иначе мылятся */
  #nav a { text-align: center; }
  #nav img { max-width: 100%; height: auto; }
  #layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "content content" "left right";
    padding: 8px;
  }
}

@media (max-width: 640px) {
  #nav { grid-template-columns: repeat(2, 1fr); }
  #layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "left" "right"; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .photo-float { float: none; display: block; margin: 0 auto 10px; max-width: 100%; height: auto; }
  table.grid .hide-wap { display: none; }
  #footer .banners img { margin: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .blink, .sparkle { animation: none; }
}