/**
 * PXMBoard Base CSS
 * Layout and structure rules - shared across all skins
 * Skin-specific colors are defined via CSS variables in skin files
 */

/* Local Fonts */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-mono-v31-latin-regular.woff2') format('woff2');
}

/* CSS Variables - Default values (overridden by skin) */
:root {
  --color-primary: #D5E5E1;
  --color-secondary: #F7F7F7;
  --color-background: #f1f4f5;
  --color-text: #000000;
  --color-link: #551a8b;
  --color-link-read: #551a8b;
  --color-link-active: #b70000;
  --color-link-closed: #C0C0C0;
  --color-quote: #808080;
  --color-error: red;
  --color-white: #ffffff;
  --color-list-header: #EDEDED;

  --font-main: Verdana, Arial, Helvetica, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  --font-size-base: 10pt;
  --font-size-small: small;
  --font-size-xsmall: x-small;
  --font-size-large: 14px;

  /* Message body specific */
  --font-message: "Courier New", Courier, monospace;
  --font-size-message: 14px;

  --width-main: 900px;
  --width-threadlist: 1200px;
  --width-form: 800px;
  --width-box: 400px;
  --width-profile: 500px;
  --width-boardlist: 885px;

  --padding-small: 3px;
  --padding-medium: 5px;
  --padding-large: 10px;
  --gap-small: 2px;
  --gap-medium: 5px;
  --gap-large: 10px;
}

/* Reset & Base */
BODY {
  font-family: var(--font-main);
  background-color: var(--color-background);
  color: var(--color-text);
}

A:link { text-decoration: none; }
A:visited { text-decoration: none; color: var(--color-link); }
A:active { text-decoration: none; color: var(--color-link-active); }

img { border-style: none; }

li {
  margin: 3px 0;
  list-style-type: disc;
}

/* Typography */
.norm { font-size: var(--font-size-base); }
a.fixed { font-weight: bold; }
a.closed { font-weight: lighter; color: var(--color-link-closed); }

/* ==========================================================================
   Navigation
   ========================================================================== */
.navbar {
  display: table;
  width: var(--width-main);
  background-color: var(--color-primary);
  table-layout: auto;
}

.navitemboard {
  display: table-cell;
  padding: 4px;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
}

.navitemboard.active {
  font-weight: bold;
}

.navitem {
  display: table-cell;
  padding: 4px;
  font-size: var(--font-size-base);
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
}

.navlogo {
  display: table-cell;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
}

/* ==========================================================================
   Threadlist
   ========================================================================== */
.threadsmall { font-size: var(--font-size-xsmall); }
.threadnorm { font-size: var(--font-size-small); }

.threadlist {
  width: var(--width-threadlist);
  margin-left: 4px;
  font-size: var(--font-size-base);
}

.thread {
  margin: 2px 0;
  line-height: 1.3;
  font-size: var(--font-size-base);
}

.threadtitle {
  font-size: inherit;
}

.threadtitle.fixed {
  font-weight: bold;
}

.threadmeta {
  font-size: calc(var(--font-size-base) - 2pt);
}

.pagination {
  text-align: center;
  margin-top: var(--padding-large);
  font-size: var(--font-size-base);
}

/* ==========================================================================
   Thread View
   ========================================================================== */
#thread, .threadview {
  font-size: var(--font-size-base);
  width: var(--width-main);
  margin-left: 4px;
}

.threadactions {
  text-align: center;
  margin-top: var(--padding-large);
  font-size: var(--font-size-base);
}

/* ==========================================================================
   Message View
   ========================================================================== */
.messageheader {
  width: var(--width-main);
  padding: var(--padding-medium);
  background-color: var(--color-primary);
  display: grid;
  gap: 3px 1px;
  grid-template-areas:
    "msgsubject msgadminaction"
    "msgfrom msgfrom"
    "msgreplyto msgreplyto";
}

.msgsubject { grid-area: msgsubject; font-size: 18px; font-weight: 600; color: var(--color-text); }
.msgadminaction { grid-area: msgadminaction; justify-self: end; }
.msgreplyto { grid-area: msgreplyto; font-size: 14px; }
.msgfrom { grid-area: msgfrom; font-size: 14px; }

.messagebody {
  width: var(--width-main);
  padding-top: var(--padding-medium);
  padding-bottom: var(--padding-medium);
  font-family: var(--font-message);
  font-size: var(--font-size-message);
  color: var(--color-text);
  margin-left: var(--padding-medium);
  background-color: var(--color-secondary);
  word-wrap: break-word;
}

.quote {
  border-left-width: thick;
  border-left-style: solid;
  border-left-color: var(--color-quote);
  padding-left: var(--padding-small);
  color: var(--color-quote);
}

.quote a:link,
.quote a:visited,
.quote a:active { color: var(--color-quote); }

/* Video and iframe styling - responsive */
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* Images - responsive */
.msgbodyinner img,
.pmmsgbody img {
  max-width: 100%;
  height: auto;
}

.msgfooter {
  width: var(--width-main);
  padding: var(--padding-medium);
  background-color: var(--color-primary);
  text-align: center;
  font-size: var(--font-size-base);
}

/* ==========================================================================
   Message List
   ========================================================================== */
.messagelist {
  width: var(--width-main);
  font-size: var(--font-size-base);
}

.msglistheader {
  background-color: var(--color-list-header);
  padding: 4px;
  text-align: center;
  font-weight: bold;
}

.msglistbody {
  background-color: var(--color-white);
}

.msglistitem {
  padding: 2px 4px;
}

.msglistfooter {
  background-color: var(--color-list-header);
  padding: 4px;
  text-align: center;
}

/* ==========================================================================
   Message List Flat
   ========================================================================== */
.msglistflat {
  width: var(--width-main);
  font-size: var(--font-size-base);
}

.msgflatitem {
  margin-bottom: var(--padding-large);
}

.msgflatheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.msgflatauthor {
  flex: 1;
}

.msgflatadmin {
  flex-shrink: 0;
}

.msgflatsubject {
  background-color: var(--color-secondary);
  padding: var(--padding-medium);
}

.msgflatbody {
  background-color: var(--color-secondary);
  padding: var(--padding-medium);
}

.msgflatfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.msgflatpagination {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

/* ==========================================================================
   Message Reply Form
   ========================================================================== */
textarea#message {
  width: 100%;
  height: 200px;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
}

.messageform {
  width: var(--width-form);
  font-size: var(--font-size-base);
}

.msgreplyheader {
  background-color: var(--color-primary);
  padding: var(--padding-small);
  text-align: center;
}

.msgreplyerror {
  background-color: var(--color-primary);
  padding: var(--padding-small);
  display: flex;
  gap: var(--gap-large);
}

.msgreplylogin {
  background-color: var(--color-primary);
  padding: var(--padding-small);
  display: flex;
  gap: 20px;
}

.msgreplysubjectrow {
  background-color: var(--color-primary);
  padding: var(--padding-small);
  display: flex;
  gap: var(--gap-large);
  align-items: center;
}

.msgreplysubjectrow input[type="text"] {
  flex: 1;
}

.msgreplybg {
  background-color: var(--color-secondary);
  padding: var(--padding-small);
}

.msgreplybg textarea {
  width: calc(100% - 6px);
  box-sizing: border-box;
}

.msgreplypreviewheader {
  background-color: var(--color-primary);
  padding: var(--padding-small);
}

.msgreplypreviewbody {
  background-color: var(--color-secondary);
  padding: var(--padding-small);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
}

.msgreplyfooter {
  background-color: var(--color-primary);
  padding: var(--padding-small);
  text-align: center;
}

.msgreplyactions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.msgreplybuttons {
  display: flex;
  gap: var(--gap-small);
}

.msgreplysubmit {
  display: flex;
  gap: var(--gap-medium);
  align-items: center;
}

.msgreplyconfirm {
  width: var(--width-box);
  font-size: var(--font-size-base);
  margin: 20px auto;
}

/* ==========================================================================
   Message Search
   ========================================================================== */
.msgsearch {
  width: var(--width-main);
  font-size: var(--font-size-base);
  margin-top: var(--padding-large);
}

.msgsearchheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.msgsearchbg {
  background-color: var(--color-white);
  padding: var(--padding-large);
}

.msgsearchrow {
  display: flex;
  gap: 20px;
  margin-bottom: var(--padding-large);
}

.msgsearchrow:last-child {
  margin-bottom: 0;
}

.msgsearchrow label {
  flex: 1;
}

.msgsearchfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

/* ==========================================================================
   Boardlist
   ========================================================================== */
.boardlistcontainer {
  width: var(--width-boardlist);
  margin: 0 auto;
}

.boardlistlogo {
  background-color: var(--color-primary);
  text-align: center;
  padding: var(--padding-medium);
}

.boardlistnav {
  background-color: var(--color-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--padding-medium);
}

.boardlistnav .norm {
  flex-shrink: 0;
}

.boardlistnav .norm + .norm {
  margin-left: 20px;
}

.boardlistmain {
  margin-top: var(--padding-large);
}

.boardlistrow {
  display: flex;
  gap: var(--gap-medium);
  padding: var(--padding-medium);
}

.brdlstname {
  width: 150px;
  flex-shrink: 0;
  text-align: left;
}

.brdlstthema {
  flex: 1;
  text-align: left;
}

.brdlstlastmsg {
  width: 180px;
  flex-shrink: 0;
  text-align: right;
}

.brdlistadm {
  width: 60px;
  flex-shrink: 0;
  text-align: center;
}

.boardlistbg {
  background-color: var(--color-secondary);
}

.boardlisthd {
  background-color: var(--color-primary);
}

.boardlistadminrow {
  text-align: center;
  display: block;
  padding: var(--padding-medium);
}

.boardlistlogin {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
}

.loginform {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.boardlisterror {
  background-color: var(--color-secondary);
  text-align: center;
  padding: var(--padding-medium);
}

.boardlistfooter {
  text-align: center;
  padding: var(--padding-large);
}

/* ==========================================================================
   Private Messages
   ========================================================================== */
.privatemsg {
  width: 100%;
  font-size: var(--font-size-base);
}

.pmheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.pmtabs {
  display: flex;
}

.pmtab {
  flex: 1;
  padding: var(--padding-medium);
  text-align: center;
  background-color: var(--color-secondary);
}

.pmtab.active {
  background-color: var(--color-primary);
}

.pmmessage {
  margin-top: var(--padding-medium);
}

.pmmsgheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
}

.pmmsgsubject {
  background-color: var(--color-secondary);
  padding: var(--padding-medium);
}

.pmmsgbody {
  background-color: var(--color-secondary);
  padding: var(--padding-medium);
}

.pmmsgfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.pmlist {
  margin-top: var(--padding-medium);
}

.pmlistheader {
  display: flex;
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  font-weight: bold;
}

.pmlistitem {
  display: flex;
  background-color: var(--color-secondary);
  padding: var(--padding-medium);
}

.pmlistcol-subject {
  flex: 1;
}

.pmlistcol-user {
  width: 150px;
}

.pmlistcol-date {
  width: 120px;
  text-align: right;
}

.pmlistfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.pmform {
  margin-top: var(--padding-medium);
}

.pmformerror {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  color: var(--color-error);
}

.pmformheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.pmformrow {
  background-color: var(--color-secondary);
  padding: var(--padding-medium);
  display: flex;
  gap: var(--gap-large);
}

.pmformrow label {
  width: 80px;
}

.pmformrow textarea {
  width: 400px;
  height: 200px;
}

.pmformfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
}

.pmformactions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pmformbuttons {
  display: flex;
  gap: var(--gap-small);
}

.pmconfirm {
  margin-top: var(--padding-medium);
}

.pmconfirmheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.pmconfirmbody {
  background-color: var(--color-secondary);
  padding: var(--padding-large);
  text-align: center;
}

.pmconfirmfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

/* ==========================================================================
   User Profile
   ========================================================================== */
.userprofile {
  width: 100%;
  max-width: var(--width-profile);
  font-size: var(--font-size-base);
  box-sizing: border-box;
}

.upheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.upbody {
  display: flex;
  background-color: var(--color-secondary);
}

.upinfo {
  flex: 1;
}

.uppic {
  padding: var(--padding-medium);
}

.updetails {
  background-color: var(--color-secondary);
}

.uprow {
  display: flex;
  padding: var(--padding-small) var(--padding-medium);
}

.uplabel {
  width: 180px;
  flex-shrink: 0;
}

.upvalue {
  flex: 1;
}

.upfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.uptabs {
  display: flex;
}

.uptab {
  flex: 1;
  padding: var(--padding-medium);
  text-align: center;
  background-color: var(--color-secondary);
}

.uptab.active {
  background-color: var(--color-primary);
}

.upform {
  background-color: var(--color-secondary);
}

.upform input[type="text"],
.upform input[type="password"],
.upform textarea {
  width: 250px;
  box-sizing: border-box;
}

.upconfirm {
  background-color: var(--color-secondary);
}

.upconfirmtext {
  padding: var(--padding-medium);
  text-align: center;
}

/* ==========================================================================
   User Registration
   ========================================================================== */
.userregistration {
  width: 100%;
  max-width: var(--width-profile);
  font-size: var(--font-size-base);
  margin: 0 auto;
}

.reglogo {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.regheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.regform {
  background-color: var(--color-secondary);
}

.regrow {
  display: flex;
  padding: var(--padding-small) var(--padding-medium);
}

.reglabel {
  width: 140px;
  flex-shrink: 0;
}

.reginfo {
  padding: var(--padding-medium);
  text-align: center;
}

.regconfirm {
  background-color: var(--color-secondary);
}

.regconfirmtext {
  padding: var(--padding-medium);
  text-align: center;
}

.regfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

/* ==========================================================================
   Confirm/Error Box
   ========================================================================== */
.confirmbox {
  width: var(--width-box);
  font-size: var(--font-size-base);
  margin: 20px auto;
}

.confirmheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.confirmbody {
  background-color: var(--color-secondary);
  padding: var(--padding-large);
  text-align: center;
}

.confirmfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

/* ==========================================================================
   User List
   ========================================================================== */
.userlistbox {
  width: var(--width-box);
  font-size: var(--font-size-base);
  margin: 20px auto;
}

.userlistheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.userlistbody {
  background-color: var(--color-secondary);
  padding: var(--padding-large);
}

.userlistgrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-large);
}

.userlistitem {
  width: calc(50% - 5px);
}

.userlistfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  display: flex;
  justify-content: space-between;
}

/* ==========================================================================
   User Search Form
   ========================================================================== */
.usersearchbox {
  width: var(--width-box);
  font-size: var(--font-size-base);
  margin: 20px auto;
}

.usersearchheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.usersearchbody {
  background-color: var(--color-secondary);
  padding: var(--padding-large);
}

.usersearchrow {
  display: flex;
  gap: var(--gap-large);
  align-items: center;
  margin-bottom: var(--padding-medium);
}

.usersearchrow:last-child {
  margin-bottom: 0;
}

.usersearchfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

/* ==========================================================================
   Password Reset Form
   ========================================================================== */
.pwdresetbox {
  width: var(--width-box);
  font-size: var(--font-size-base);
  margin: 20px auto;
}

.pwdresetheader {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

.pwdresetbody {
  background-color: var(--color-secondary);
  padding: var(--padding-large);
}

.pwdresetrow {
  display: flex;
  gap: var(--gap-large);
  align-items: center;
  margin-bottom: var(--padding-medium);
}

.pwdresetrow:last-child {
  margin-bottom: 0;
}

.pwdresetfooter {
  background-color: var(--color-primary);
  padding: var(--padding-medium);
  text-align: center;
}

/* ==========================================================================
   Badge for notifications
   ========================================================================== */
span.badge {
  position: relative;
  left: -2px;
  top: -8px;
  padding: 2px 6px;
  border: 1px solid white;
  border-radius: 60px;
  background: linear-gradient(to bottom, #FF6969 0%, #ff0000 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.4), 0 0 1px rgba(0,0,0,.7) inset, 0 10px 0px rgba(255,255,255,.11) inset;
  font: bold 12px/16px "Helvetica Neue", sans-serif;
  color: white;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}

/* ==========================================================================
   Member-only content
   ========================================================================== */
.member-content {
  /* No special styling - content displays normally when logged in */
}

.member-hidden {
  color: #999;
  font-style: italic;
  background-color: #f0f0f0;
  padding: 2px 4px;
  border-radius: 3px;
}

/* ==========================================================================
   Read Messages (server-tracked, cross-device)
   ========================================================================== */
a.msg-read,
a.msg-read:link,
a.msg-read:visited {
  color: var(--color-link-read);
}