:root{--doj-green:#004b23;--doj-green-soft:#e8f2ec;--border:#d0d7de;--bg:#f4f5f7;--paper:#fff;--text:#111827;--muted:#6b7280;--danger:#991b1b;--link:#2563eb}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Calibri,Arial,Helvetica,sans-serif;font-size:16px}
.topbar{background:var(--doj-green);color:#fff;position:sticky;top:0;z-index:1000;}
.topbar .container{max-width:1200px;margin:0 auto;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{font-weight:700;letter-spacing:.2px}
.nav a{color:#fff;text-decoration:none;margin-left:12px;opacity:.9}
.nav a:hover{opacity:1}
.nav .welcome{margin-left:12px;opacity:.9}
.mode{margin-left:6px;opacity:.8}
.container{max-width:1200px;margin:0 auto;padding:16px}
.card{background:var(--paper);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.03);overflow:hidden;margin-bottom:14px}
.card-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);background:#fafbfc}
.card-head .stamp{font-size:13px;color:var(--muted)}
.card-head .postnum{font-weight:600;color:var(--doj-green)}
.alert{background:#fff4f4;border:1px solid #f5c2c7;padding:10px;border-radius:8px;color:#7f1d1d;margin-bottom:10px}
a{color:var(--link)}
.thread-header{display:flex;justify-content:space-between;align-items:center;margin:12px 0 16px}
.thread-header h1{font-size:22px;margin:0}
.thread-meta{color:var(--muted);font-size:14px}
.admin-bar{display:flex;gap:10px}
.admin-bar a,.admin-bar button{border:1px solid var(--border);background:var(--paper);padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--text);cursor:pointer}
.admin-bar .danger{border-color:#f1c0c0;color:var(--danger)}
.post-row{display:grid;grid-template-columns:220px 1fr;align-items:stretch}
.post-left{border-right:1px solid var(--border);padding:12px;background:#fcfdfc}
.userbox{display:flex;gap:10px}
.user-avatar{width:44px;height:44px;border-radius:50%;background:#e8f2ec;display:inline-block;cursor:pointer}
.user-meta{display:flex;flex-direction:column}
.user-meta .username{font-weight:600}
.user-meta .role{font-size:13px;color:var(--muted)}
.user-stats{margin-top:8px;font-size:13px;color:var(--muted)}
.post-right{padding:14px;display:flex;flex-direction:column;gap:8px}
.post-body{font-size:16px;line-height:1.5}
.post-body blockquote{border-left:3px solid var(--border);margin:0 0 10px;padding:8px 12px;background:#f7faf9;color:#374151}
.post-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;border-top:1px solid var(--border)}
.post-bottom .left{display:flex;gap:10px;align-items:center}
.post-bottom .right{display:flex;gap:8px;align-items:center}
.post-bottom .score{min-width:24px;text-align:center;font-weight:600}
.sep{opacity:.5;margin:0 6px}
.v-btn{border:1px solid var(--border);background:var(--paper);border-radius:6px;padding:2px 8px;text-decoration:none;color:var(--text)}
.v-btn:hover{background:#f0f5f2}
.reddit-item{padding:6px}
.reddit-row{display:grid;grid-template-columns:56px 1fr;gap:10px}
.votes{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0}
.score{font-weight:600;color:#374151}
.r-body{padding:8px 6px 10px 0}
.r-head{font-size:14px;color:var(--muted);margin-bottom:4px}
.r-head .user{font-weight:600;color:var(--text)}
.composer textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:16px}
.composer .composer-actions{margin-top:8px}
.composer .composer-actions button{border:1px solid var(--border);background:var(--paper);padding:6px 10px;border-radius:8px;cursor:pointer}

.header-avatar{width:32px;height:32px;border-radius:50%;display:inline-block;margin-right:8px;background:#e5e7eb;cursor:pointer}
.user-avatar.avatar-mod,.header-avatar.avatar-mod{background:#004b23}
.user-avatar.avatar-user-1,.header-avatar.avatar-user-1{background:#1d4ed8}
.user-avatar.avatar-user-2,.header-avatar.avatar-user-2{background:#9333ea}
.user-avatar.avatar-user-3,.header-avatar.avatar-user-3{background:#f97316}
.user-avatar.avatar-user-4,.header-avatar.avatar-user-4{background:#0d9488}
.user-avatar.avatar-user-5,.header-avatar.avatar-user-5{background:#16a34a}
.user-avatar.avatar-user-6,.header-avatar.avatar-user-6{background:#db2777}


.editor-toolbar{
  display:flex;
  gap:6px;
  margin-bottom:6px;
}
.editor-toolbar button{
  border:1px solid var(--border);
  background:var(--paper);
  border-radius:6px;
  padding:4px 8px;
  font-size:13px;
  cursor:pointer;
}
.editor-toolbar button:hover{
  background:#f3f4f6;
}

.thread-row.thread-sticky{
  background:#fffbe6;
}
.thread-row.thread-sticky td:first-child a{
  font-weight:600;
}
.persona-toggle{
  display:flex;
  align-items:center;
  margin-left:12px;
}

/* Old .persona-label no longer used, safe to leave or remove */
.persona-label{
  display:none;
}

/* Persona switch toggle (User / Admin) */
/*
Source - https://stackoverflow.com/questions/39846282/how-to-add-the-text-on-and-off-to-toggle-button
Posted by null
Retrieved 2025-11-13, License - null
*/

.persona-toggle{
  display:flex;
  align-items:center;
  margin-left:16px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {
  display:none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #b91c1c; /* admin mode colour */
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #15803d; /* user mode colour */
}

input:checked + .slider:before {
  transform: translateX(55px);
}

/* Text inside switch */
.on, .off {
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 11px;
  font-family: Calibri, Verdana, sans-serif;
  letter-spacing: 0.05em;
}

.on { display: none; }
input:checked + .slider .on { display: block; }
input:not(:checked) + .slider .off { display: block; }
input:checked + .slider .off { display: none; }

/* Position labels differently in User vs Admin modes */
input:checked + .slider .on {
  display: block;
  top: 50%;
  left: 35%;
  font-size: 16px;
}

input:not(:checked) + .slider .off {
  display: block;
  top: 40%;
  left: 65%;
  font-size: 16px;
}

/* Rounded slider */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
.header-avatar,
.user-avatar{
  position:relative;
  overflow:hidden;
}

.header-avatar .avatar-img,
.user-avatar .avatar-img{
  width:100%;
  height:100%;
  border-radius:50%;
  display:block;
  object-fit:cover;
}
/* Base: outline style */
.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  background: transparent;
  color: #666;           /* arrow color */
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}

/* Slight hover, still outline */
.v-btn:hover {
  border-color: #999;
}

/* When the user has voted on this post */
.v-btn.voted {
  background: #333;      /* solid button background */
  color: #fff;           /* white arrow/text */
  border-color: #333;
}

/* If you want different colours for up/down votes, you can split them: */
.v-btn.voted-up {
  background: #2e7d32;   /* green-ish */
  border-color: #2e7d32;
}

.v-btn.voted-down {
  background: #c62828;   /* red-ish */
  border-color: #c62828;
}

/* Ensure icons inherit color, e.g. Font Awesome arrows */
.v-btn i {
  pointer-events: none;
}


/* Voting states */
.v-btn.up,
.v-btn.down{
  min-width:24px;
  text-align:center;
  padding:2px 6px;
}


.userbox .username,
.userbox .username:link,
.userbox .username:visited,
.userbox .username:hover,
.userbox .username:active{
  color: inherit;
  text-decoration: none;
}

/* Profile activity tabs */
.profile-tabs{width:100%}
.profile-tab-head{display:flex;gap:8px;border-bottom:1px solid var(--border);margin-bottom:8px}
.profile-tab-btn{border:0;background:transparent;padding:6px 10px;cursor:pointer;font:inherit;color:var(--muted);border-bottom:2px solid transparent}
.profile-tab-btn.is-active{color:var(--text);border-color:var(--doj-green);font-weight:600}
.profile-tab-panel{display:none}
.profile-tab-panel.is-active{display:block}

/* Header right cluster */
.topbar-right{margin-left:8px;display:inline-block}
.topbar-right-table{border-collapse:collapse}
.topbar-right-table td{padding:0 4px;vertical-align:middle}
.topbar-icon{text-decoration:none;font-size:25px;display:inline-block;line-height:25px;width:25px;height:25px;text-align:center}
.topbar-icon-cell{min-width:20px;text-align:center}
.topbar-avatar-cell{padding-left:6px}

/* Topbar main table to keep controls on one line */
.topbar-main{border-collapse:collapse;width:100%}
.topbar-main .topbar-left-cell{text-align:left;white-space:nowrap}
.topbar-main .topbar-right-cell{text-align:right;white-space:nowrap}
.persona-toggle-inline{display:inline-block;margin-left:12px}

.topbar-main td{vertical-align:middle;white-space:nowrap}


/* Layout toggle icons (classic / threaded) */
.layout-icon{
  margin-left:4px;
}
.layout-icon.active{
  background:#dbeafe;
  border-radius:50%;
}
.topbar-cell{vertical-align:middle;white-space:nowrap}
.topbar-spacer{width:100%}
.layout-icon{
  margin-left:4px;
}
.layout-icon.active{
  background:#dbeafe;
  border-radius:50%;
}

/* Interface settings layout */
.interface-form{
  display:grid;
  grid-template-columns: 220px minmax(0,1fr);
  gap:10px 16px;
  align-items:flex-start;
}
.interface-form .field-label{
  font-weight:600;
  font-size:14px;
  padding-top:4px;
}
.interface-form .field-input select,
.interface-form .field-input input[type="text"],
.interface-form .field-input input[type="number"]{
  max-width:220px;
}
.interface-form .field-input input[type="checkbox"]{
  transform:translateY(1px);
}


/* Global Bootstrap-like defaults for form controls */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  font-family: inherit;
}

textarea {
  min-height: 80px;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}


/* Profile activity cards */
.profile-threads-list,
.profile-posts-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.profile-item{
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 10px;
  background:#f9fafb;
}
.profile-item-header a{
  font-weight:600;
}
.profile-item-meta{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}
.profile-item-snippet{
  font-size:13px;
  color:var(--text);
  margin-top:4px;
}


/* Private messages */
.pm-thread-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pm-thread-card{
  padding:8px 10px;
}
.pm-thread-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:4px;
}
.pm-thread-subject a{
  font-weight:600;
}
.pm-unread-pill{
  border-radius:999px;
  padding:2px 8px;
  font-size:11px;
  background:#dc2626;
  color:#ffffff;
}
.pm-thread-meta{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}
.pm-thread-snippet{
  font-size:13px;
}
.pm-messages{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pm-message{
  padding:6px 8px;
  border-radius:6px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
}
.pm-message-meta{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
}
.pm-message-body{
  font-size:14px;
}


/* Topbar spacing */
.topbar-cell {
    padding: 0 12px;
}

.topbar-icon-cell {
    padding: 0 12px !important;
}

.topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Advert slot styling */
.ad-slot-header .card,
.ad-slot-sidebar .card,
.ad-slot-inline .card {
  background: #fffef5;
  border: 1px dashed #e5e7eb;
}

.ad-slot-header .muted,
.ad-slot-sidebar .muted,
.ad-slot-inline .muted {
  font-size: 12px;
}


/* Moved from layout.php inline <style> */
.persona-switch{display:inline-flex;align-items:center;gap:6px;margin-left:8px}
    .persona-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:3px 8px;font-size:12px;background:#fff}
    .persona-pill .dot{width:8px;height:8px;border-radius:50%}
    .persona-pill.user .dot{background:#2563eb}
    .persona-pill.admin .dot{background:#16a34a}
    .persona-pill a{margin-left:6px;text-decoration:none}
    article.card.reported-highlight {
      border-color:#b91c1c;
      box-shadow:0 0 0 1px #b91c1c, 0 10px 25px rgba(185,28,28,0.35);
    }
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      display: none;
      align-items: flex-start;
      justify-content: center;
      z-index: 1000;
    }
    .modal .modal-dialog {
      margin-top: 10vh;
      max-width: 480px;
      width: 100%;
    }
    .modal .modal-dialog {
      margin-top: 10vh;
      max-width: 480px;
      width: 100%;
    }
    .modal-content {
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #d0d7de;
      box-shadow: 0 10px 25px rgba(15,23,42,0.25);
      overflow: hidden;
    }
    .modal-header {
      padding: 10px 14px;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .modal-title {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
    }
    .modal-body {
      padding: 12px 16px 10px;
      font-size: 14px;
      color: #111827;
    }
    .modal-footer {
      padding: 8px 14px 10px;
      border-top: 1px solid #e5e7eb;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      background: #f9fafb;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      border-radius: 999px;
      padding: 4px 12px;
      border: 1px solid #d1d5db;
      background: #f9fafb;
      color: #111827;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
    }
    .btn:hover {
      background: #e5e7eb;
    }
    .btn-primary {
      border-color: #2563eb;
      background: #2563eb;
      color: #ffffff;
    }
    .btn-primary:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
    }
    .btn-danger {
      border-color: #b91c1c;
      background: #b91c1c;
      color: #ffffff;
    }
    .btn-danger:hover {
      background: #991b1b;
      border-color: #991b1b;
    }
    .btn-light {
      background: #f9fafb;
      border-color: #d1d5db;
      color: #111827;
    }
    .btn-light:hover {
      background: #e5e7eb;
    }
    .btn-close {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: transparent;
      color: #6b7280;
      font-size: 18px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .btn-close::before {
      content: "\00d7";
    }
    .btn-close:hover {
      background: #f3f4f6;
      border-color: #e5e7eb;
      color: #111827;
    }
    .form-label {
      display: block;
      margin-bottom: 4px;
      font-size: 13px;
      font-weight: 500;
      color: #374151;
    }
    .form-control,
    .form-select {
      width: 100%;
      border-radius: 6px;
      border: 1px solid #d1d5db;
      padding: 6px 8px;
      font-size: 14px;
      font-family: inherit;
      box-sizing: border-box;
    }
    .form-control:focus,
    .form-select:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 0 1px rgba(37,99,235,0.25);
    }
    .mb-3 {
      margin-bottom: 12px;
    }

  
    .topbar .nav { position: relative; }

    .header-avatar { cursor: pointer; }

    .user-dropdown {
      position: absolute;
      right: 0;
      top: 52px;
      background: #ffffff;
      border: 1px solid #d0d7de;
      border-radius: 4px;
      padding: 6px 0;
      min-width: 170px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
      display: none;
      z-index: 1100;
    }
    .user-dropdown.open { display: block; }
    .user-dropdown a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
      color: #111827 !important;
      font-size: 14px;
    }
    .user-dropdown a:hover {
      background: #f3f4f6;
    }

    .topbar {
      background: #0f3f6d;
      color: #ffffff;
    }
    .topbar .nav a { color:#ffffff; }
    .topbar .brand a { color:#ffffff; }
    .topbar .brand img { display:block; }
    .topbar .container { display:flex;align-items:center;justify-content:space-between; }

    .toggle-switch {
      position: relative;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }
    .toggle-switch input {
      display: none;
    }
    .toggle-switch .slider {
      position: relative;
      width: 40px;
      height: 20px;
      border-radius: 999px;
      background: #d1d5db;
      transition: background 0.2s ease;
    }
    .toggle-switch .slider::before {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #ffffff;
      top: 2px;
      left: 2px;
      transition: transform 0.2s ease;
    }
    .toggle-switch input:checked + .slider {
      background: #0f3f6d;
    }
    .toggle-switch input:checked + .slider::before {
      transform: translateX(20px);
    }

    /* Bootstrap-like form controls (no external Bootstrap) */
    .form-control {
      display: block;
      width: 100%;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      line-height: 1.5;
      color: #111827;
      background-color: #ffffff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
    .form-control:focus {
      color: #111827;
      background-color: #ffffff;
      border-color: #80bdff;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }
    .form-select {
      display: block;
      width: 100%;
      padding: 0.375rem 2.25rem 0.375rem 0.75rem;
      font-size: 1rem;
      line-height: 1.5;
      color: #111827;
      background-color: #ffffff;
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%236b7280' d='M2 0L0 2h4L2 0zm0 5L0 3h4l-2 2z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 8px 10px;
      border: 1px solid #ced4da;
      border-radius: 0.25rem;
      appearance: none;
    }
    .form-select:focus {
      border-color: #80bdff;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
    }
    .btn {
      display: inline-block;
      font-weight: 400;
      line-height: 1.5;
      color: #ffffff;
      text-align: center;
      text-decoration: none;
      vertical-align: middle;
      cursor: pointer;
      user-select: none;
      background-color: #0d6efd;
      border: 1px solid #0d6efd;
      padding: 0.375rem 0.75rem;
      font-size: 1rem;
      border-radius: 0.25rem;
      transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
    .btn:hover {
      color: #ffffff;
      background-color: #0b5ed7;
      border-color: #0a58ca;
    }
    .btn-secondary {
      background-color: #6c757d;
      border-color: #6c757d;
    }
    .btn-secondary:hover {
      background-color: #5c636a;
      border-color: #565e64;
    }

    .topbar-cell.topbar-icon-cell {
      position: relative;
    }
    .notif-icon,
    .msg-icon {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .notif-count,
    .msg-count {
      position: absolute;
      top: -4px;
      right: -10px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border-radius: 999px;
      background: #dc2626;
      color: #ffffff;
      font-size: 11px;
      line-height: 16px;
      font-weight: 600;
      text-align: center;
      box-shadow: 0 0 0 1px rgba(15,23,42,0.15);
    }

/* Ensure user popup and backdrop are hidden by default */
#user-popup-backdrop,
#user-popup {
  display: none;
}

/* Positioning for user popup (if inline styles are missing) */
#user-popup-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 11;
}
#user-popup {
  position: absolute;
  z-index: 12;
}

/* Slightly stronger badge positioning in case of Bootstrap overrides */
.topbar-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notif-count,
.msg-count {
  position: absolute;
  top: -4px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* System settings cards */
.system-settings .settings-card {
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.system-settings .settings-card-header {
  padding: 10px 14px;
  background: #e8f2ec; /* soft DOJ green */
  border-bottom: 1px solid #d0d7de;
}

.system-settings .settings-card-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.system-settings .settings-card-subtitle {
  margin: 2px 0 0;
  font-size: 11px;
  color: #6b7280;
}

.system-settings .settings-card-body {
  padding: 10px 14px 12px;
}



.system-settings .v-table th:first-child,
.system-settings .v-table td:first-child {
  text-align: right;
}


/* Classic view: standalone upvoted/thanks section under main post column */
.post-upvoters {
  margin-top: 2px;
  margin-left: calc(220px + 12px); /* avatar column + padding */
  margin-right: 12px;
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-top-style: dashed;
  border-radius: 0 0 12px 12px;
  background: #f9fafb;
  font-size: 12px;
  color: #4b5563;
}

.post-upvoters-inner {
  padding: 0;
}

/* Reddit view: keep existing behaviour */
.r-upvoters {
  margin-top: 0;
  padding: 6px 10px;
  border-top: 1px dashed #d1d5db;
  font-size: 12px;
  background: #f9fafb;
  color: #4b5563;
}

/* label */
.post-upvoters-label {
  font-weight: 600;
  margin-right: 4px;
}

px 0;
  font-size:.875rem;
}
.site-footer .footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
}
.site-footer .footer-links a{
  color:#fff;
  text-decoration:none;
  opacity:.9;
}
.site-footer .footer-links a:hover{
  opacity:1;
  text-decoration:underline;
}

/* Topbar search panel */
.topbar-search-panel{
  background:#f9fafb;
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 4px rgba(0,0,0,.06);
}
.topbar-search-panel .search-inner{
  max-width:1200px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
}
.topbar-search-panel .search-field{
  display:flex;
  flex-direction:column;
  min-width:200px;
}
.topbar-search-panel label{
  font-size:.85rem;
  font-weight:600;
  margin-bottom:4px;
}
.topbar-search-panel input[type="text"],
.topbar-search-panel select{
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:4px;
}
.topbar-search-panel .search-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}
.topbar-search-panel .search-actions button{
  padding:6px 10px;
  border-radius:4px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.topbar-search-panel .search-actions button:hover{
  background:#e5e7eb;
}

/* Search category dropdown */
.search-cat-dropdown{
  position:relative;
}
.search-cat-toggle{
  width:100%;
  text-align:left;
  padding:6px 8px;
  border-radius:4px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:.9rem;
}
.search-cat-menu{
  position:absolute;
  z-index:50;
  top:100%;
  left:0;
  margin-top:4px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:4px;
  padding:6px 8px;
  max-height:220px;
  overflow:auto;
  min-width:220px;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.search-cat-menu label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.9rem;
  padding:2px 0;
}
.search-cat-menu input[type="checkbox"]{
  margin:0;
}


/* Breadcrumb bar */
.breadcrumb-bar{
  background:#f3f4f6;
  border-bottom:1px solid var(--border);
}
.breadcrumb-bar .container{
  max-width:1200px;
  margin:0 auto;
  padding:6px 16px;
}
.breadcrumb-list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  font-size:.85rem;
  color:var(--muted);
}
.breadcrumb-item{
  display:flex;
  align-items:center;
}
.breadcrumb-item + .breadcrumb-item::before{
  content:'›';
  margin:0 4px;
  color:var(--muted);
}
.breadcrumb-item a{
  color:var(--link);
  text-decoration:none;
}
.breadcrumb-item a:hover{
  text-decoration:underline;
}
.breadcrumb-item.current span{
  font-weight:600;
  color:var(--text);
}


/* Online/offline indicator */
.user-status{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:12px;
}
.user-status-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#9ca3af; /* grey by default */
}
.user-status-dot.online{
  background:#16a34a; /* green when online */
}
.user-status-label{
  font-size:12px;
  color:var(--muted);
}


/* =========================================
   Dark mode support
   ========================================= */
body.dark-mode {
  /* Tuned dark-green palette */
  --paper: #091a21;      /* cards, posts */
  --border: #12313c;
  --text: #e6f1f3;
  --muted: #9fb3bb;
  --link: #7bdcb5;       /* or #00a96e if you want stronger DOJ green */

  background: #061118;   /* page background */
  color: var(--text);
}

.theme-toggle-btn{
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
}
.theme-toggle-btn svg{
  display:block;
}

/* General surfaces */
body.dark-mode .topbar{
  background:#04141a;
  color:var(--text);
  border-bottom:1px solid #12313c;
}
body.dark-mode .topbar .nav a{
  color:var(--text);
}
body.dark-mode .breadcrumb-bar{
  background:#061118;
  border-bottom:1px solid #12313c;
}
body.dark-mode .breadcrumb-item.current span{
  color:var(--text);
}
body.dark-mode .container{
  color:var(--text);
}
body.dark-mode .card{
  background:var(--paper);
  border-color:var(--border);
  box-shadow:none;
}
body.dark-mode .card-head{
  background:var(--paper);
  border-bottom-color:var(--border);
}
body.dark-mode .post-left{
  background:#0b2028;
  border-right-color:var(--border);
}
body.dark-mode .post-body{
  color:var(--text);
}
body.dark-mode .post-body blockquote{
  background:#0b2028;
  border-color:#12313c;
  color:var(--text);
}
body.dark-mode a{
  color:var(--link);
}
body.dark-mode .site-footer{
  background:#04141a;
  border-top:1px solid #12313c;
  color:var(--muted);
}
body.dark-mode .site-footer a{
  color:var(--muted);
}

/* Forms & inputs */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode input[type="number"],
body.dark-mode input[type="url"],
body.dark-mode select,
body.dark-mode textarea{
  background:#091a21;
  color:var(--text);
  border-color:#374151;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder{
  color:#6b7280;
}

/* Modals */
body.dark-mode .modal-content{
  background:#091a21;
  border-color:#12313c;
  color:var(--text);
}
body.dark-mode .modal-header,
body.dark-mode .modal-footer{
  border-color:#12313c;
}

/* Tables */
body.dark-mode table{
  color:var(--text);
}
body.dark-mode thead{
  background:#091a21;
}
body.dark-mode tbody tr:nth-child(odd){
  background:var(--paper);
}
body.dark-mode tbody tr:nth-child(even){
  background:var(--paper);
}

/* Misc */
body.dark-mode .muted,
body.dark-mode .user-status-label{
  color:var(--muted);
}


/* Mention suggestions dropdown */
.mention-suggest{
  position:absolute;
  min-width:180px;
  max-width:260px;
  background:#ffffff;
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:0 4px 8px rgba(0,0,0,.08);
  font-size:14px;
  z-index:2000;
}
.mention-suggest ul{
  list-style:none;
  margin:0;
  padding:4px 0;
}
.mention-suggest li{
  padding:6px 10px;
  cursor:pointer;
}
.mention-suggest li:hover{
  background:#f3f4f6;
}


/* Highlighted @mention inside post bodies */
.post-body .mention {
  background: #e3f2ff;
  padding: 0 2px;
  border-radius: 3px;
}

body.dark-mode .post-body .mention {
  background: #1e3a5f;
}
/* --- Icon action buttons (Edit / Quote / Report) --- */
.btn-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 26px;              /* match vote button width */
    height: 26px;             /* match vote button height */
    border: 1px solid #000;   /* black outline */
    border-radius: 4px;       /* <-- square with slight rounding */
    background: #fff;
    color: #000;
    margin-left: 6px;
    text-decoration: none;
    font-size: 13px;
    padding: 0;
    box-sizing: border-box;
}

.btn-icon i {
    pointer-events: none;
    font-size: 14px;
}

.btn-icon:hover {
    background: #000;
    color: #fff;
}



/* Saved posts */
.saved-page {
  max-width: 900px;
  margin: 0 auto;
}
.saved-post-card {
  margin-bottom: 16px;
}
.saved-post-left {
  min-width: 220px;
}
.saved-post-right .post-body {
  font-size: 15px;
}

/* Star for saved posts */
.save-toggle i {
  color: #9ca3af;
}
.save-toggle.is-saved i {
  color: #facc15;
}


/* Highlight for saved-post click-through */
.saved-highlight {
  border: 2px solid #facc15 !important;
  box-shadow: 0 0 0 2px #fef9c3;
}


/* Ensure anchored posts are visible below sticky header */
.card[id^="p"], article[id^="p"] {
  scroll-margin-top: 80px;
}
.post-body img,
.post-right img,
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;       /* prevents overflow issues */
}