/*
 * Socialize Theme for Commons
 * Inspired by blog.robintehofstee.com
 * Clean, minimal design with slate palette and #e93139 accent
 */

/* ===== Dark Mode ===== */
html:root,
html[data-theme="dark"] {
  --bg-primary: #020618;
  --bg-secondary: #0f172b;
  --bg-tertiary: #1d293d;
  --bg-table-header: #0f172b;
  --border-color: #1d293d;
  --border-subtle: #1d293d;
  --text-primary: #ffffff;
  --text-secondary: #90a1b9;
  --text-muted: #62748e;
  --accent: #e93139;
  --accent-hover: #ef4444;
  --accent-text: #ef4444;
  --accent-dark: #dc2626;
  --header-top-bg: rgba(15, 23, 43, 0.8);
  --header-nav-bg: rgba(15, 23, 43, 0.8);
  --header-text: #ffffff;
  --header-text-muted: #90a1b9;
  --cat-header-bg: #0f172b;
  --cat-header-text: #ffffff;
  --cat-header-border: #1d293d;
  --row-alt: #0f172b;
  --row-hover: #1d293d;
  --post-bg: #0f172b;
  --post-header-bg: #1d293d;
  --post-author-bg: #020618;
  --post-border: #1d293d;
  --breadcrumb-bg: #0f172b;
  --input-bg: #020618;
  --input-border: #1d293d;
  --input-focus: #e93139;
  --btn-primary: #e93139;
  --btn-primary-hover: #ef4444;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #1d293d;
  --btn-danger: #dc2626;
  --danger: #ef4444;
  --danger-muted: rgba(239, 68, 68, 0.12);
  --warning: #f59e0b;
  --warning-muted: rgba(245, 158, 11, 0.12);
  --success: #10b981;
  --success-muted: rgba(16, 185, 129, 0.12);
  --locked: #ef4444;
  --pinned: #f59e0b;
  --msg-incoming: #1d293d;
  --msg-outgoing: #e93139;
  --msg-outgoing-text: #ffffff;
  --avatar-bg: #e93139;
  --panel-alt: #020618;
  --code-text: #ffffff;
  --badge-admin-bg: rgba(239, 68, 68, 0.15);
  --badge-admin-text: #ef4444;
  --badge-mod-bg: rgba(233, 49, 57, 0.15);
  --badge-mod-text: #ef4444;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --font-body: "Geist", "Geist Fallback", system-ui, sans-serif;
  --font-heading: "Geist", "Geist Fallback", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", monospace;
  --nav-style: pills;
  --header-style: glassmorphism;
  --header-border-bottom: none;
  --post-author-width: 200px;
  --btn-radius: 8px;
  --btn-style: solid;
  --cat-header-style: solid;
  --border-style: solid;
  --container-max: 1024px;
}

/* ===== Light Mode ===== */
html[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-table-header: #f8fafc;
  --border-color: #e2e8f0;
  --border-subtle: #e2e8f0;
  --text-primary: #101828;
  --text-secondary: #45556c;
  --text-muted: #62748e;
  --accent: #e93139;
  --accent-hover: #dc2626;
  --accent-text: #e93139;
  --accent-dark: #b91c1c;
  --header-top-bg: rgba(255, 255, 255, 0.8);
  --header-nav-bg: rgba(255, 255, 255, 0.8);
  --header-text: #101828;
  --header-text-muted: #45556c;
  --cat-header-bg: #f8fafc;
  --cat-header-text: #101828;
  --cat-header-border: #e2e8f0;
  --row-alt: #ffffff;
  --row-hover: #f8fafc;
  --post-bg: #ffffff;
  --post-header-bg: #f8fafc;
  --post-author-bg: #f8fafc;
  --post-border: #e2e8f0;
  --breadcrumb-bg: #f8fafc;
  --input-bg: #ffffff;
  --input-border: #e2e8f0;
  --input-focus: #e93139;
  --btn-primary: #e93139;
  --btn-primary-hover: #dc2626;
  --btn-secondary-bg: transparent;
  --btn-secondary-border: #e2e8f0;
  --btn-danger: #dc2626;
  --danger: #dc2626;
  --danger-muted: rgba(220, 38, 38, 0.08);
  --warning: #d97706;
  --warning-muted: rgba(217, 119, 6, 0.08);
  --success: #059669;
  --success-muted: rgba(5, 150, 105, 0.08);
  --locked: #dc2626;
  --pinned: #d97706;
  --msg-incoming: #f1f5f9;
  --msg-outgoing: #e93139;
  --msg-outgoing-text: #ffffff;
  --avatar-bg: #e93139;
  --panel-alt: #f8fafc;
  --code-text: #101828;
  --badge-admin-bg: rgba(220, 38, 38, 0.1);
  --badge-admin-text: #dc2626;
  --badge-mod-bg: rgba(233, 49, 57, 0.1);
  --badge-mod-text: #e93139;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ===== Layout Overrides ===== */

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Glassmorphism header */
.header-top {
  background: var(--header-top-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: none;
  min-height: 34px;
  padding-top:12px;
  padding-bottom:12px;
}

.header-nav {
  background: var(--header-nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  box-shadow: none;
}

/* Clean category headers — flat, no gradient */
.cat-header {
  background: var(--cat-header-bg);
  border-bottom: 1px solid var(--cat-header-border);
  
}

.cat-header h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Rounded panels */
.forum-category,
.panel {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

/* Rounded post containers */
.post {
  border-radius: 0;
}

.post:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.post:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.post:only-child {
  border-radius: var(--radius-md);
}

/* Rounded avatars */
.post-avatar {
  border-radius: var(--radius-md);
}

.profile-avatar {
  border-radius: var(--radius-md);
}

.forum-icon {
  border-radius: var(--radius-md);
}

/* Pill-style navigation */
.nav-links a:not(.btn):not(.brand) {
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  margin: 0 2px;
  font-weight: 500;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
}

.nav-links a:not(.btn):not(.brand):hover {
  background: var(--row-hover);
  color: var(--text-primary);
  text-decoration: none;
}

/* Clean buttons */
.btn {
  border-radius: var(--btn-radius);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  padding: 8px 20px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-secondary {
  border-radius: var(--btn-radius);
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--accent);
}

/* Rounded inputs */
input, textarea, select {
  border-radius: var(--radius-sm);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(233, 49, 57, 0.15);
}

/* Auth card */
.auth-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-md);
}

/* Messages with rounded bubbles */
.msg-incoming {
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
}

.msg-outgoing {
  border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
}

/* Thread status icons */
.topic-status {
  border-radius: var(--radius-sm);
}

/* Forum name */
.forum-name {
  font-weight: 700;
}

/* Stats cell */
.stats-cell strong {
  color: var(--accent-text);
}

/* Badge styling */
.badge {
  border-radius: var(--radius-pill);
  font-weight: 600;
  padding: 2px 8px;
}

/* Clean breadcrumb */
.breadcrumbs {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

/* Pagination */
.pagination a,
.pagination span {
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-weight: 500;
}

/* Profile card */
.profile-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  box-shadow: var(--shadow-sm);
}

/* Messages layout */
.messages-layout {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

/* Search bar */
.search-bar input {
  border-radius: var(--radius-sm);
}

.search-bar .btn {
  border-radius: var(--radius-sm);
}

/* Forum table */
.forum-table tr:hover td {
  background: var(--row-hover);
}

/* Smooth transitions */
.forum-name a,
.thread-title-link,
.post-author-name,
.profile-info h1 {
  transition: color 0.15s ease;
}

/* Subtle hover on forum rows */
.forum-category {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.forum-category:hover {
  box-shadow: var(--shadow-sm);
}

/* Panel header */
.panel-header {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Breadcrumb links */
.breadcrumbs a {
  color: var(--accent);
  font-weight: 500;
}

/* Category description */
.forum-desc {
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
  .nav-links a:not(.btn):not(.brand) {
    padding: 5px 10px;
    font-size: 0.82rem;
  }

  .forum-category,
  .panel {
    border-radius: var(--radius-sm);
  }

  .messages-layout {
    border-radius: var(--radius-sm);
  }
}