/* shadcn/ui Board Skin - Common Styles */

/* CSS Variables for shadcn/ui Theme */
:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;
        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;
        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;
        --primary: 210 40% 98%;
        --primary-foreground: 222.2 47.4% 11.2%;
        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;
        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 212.7 26.8% 83.9%;
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
    }
}

/* Base Styles */
* {
    box-sizing: border-box;
}

body {
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    font-size: 16px;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
    color: hsl(var(--foreground));
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    margin: 0 0 1rem 0;
    color: hsl(var(--foreground));
    font-size: 16px;
}

/* Links */
a {
    color: hsl(var(--primary));
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: 16px;
}

a:hover {
    color: hsl(var(--primary) / 0.8);
    text-decoration: underline;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn:hover {
    background: hsl(var(--primary) / 0.9);
}

.btn-secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    border-color: hsl(var(--border));
}

.btn-secondary:hover {
    background: hsl(var(--secondary) / 0.8);
}

.btn-destructive {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
}

.btn-destructive:hover {
    background: hsl(var(--destructive) / 0.9);
}

.btn-outline {
    background: transparent;
    color: hsl(var(--primary));
    border-color: hsl(var(--border));
}

.btn-outline:hover {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* Form Elements */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.form-label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: hsl(var(--foreground));
    margin-bottom: 0.5rem;
}

/* Cards */
.card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 1.5rem;
}

.card-header {
    margin-bottom: 1rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-description {
    color: hsl(var(--muted-foreground));
    font-size: 16px;
}

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.table th {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    font-weight: 500;
    text-align: left;
    padding: 1rem;
    font-size: 16px;
    border-bottom: 1px solid hsl(var(--border));
}

.table td {
    padding: 1rem;
    border-bottom: 1px solid hsl(var(--border));
    vertical-align: middle;
    font-size: 16px;
}

.table tbody tr:hover {
    background: hsl(var(--accent));
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
}

.badge-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.badge-secondary {
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.badge-destructive {
    background: hsl(var(--destructive));
    color: hsl(var(--destructive-foreground));
}

/* Alerts */
.alert {
    padding: 1.25rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    margin-bottom: 1rem;
    font-size: 16px;
}

.alert-info {
    background: hsl(var(--accent));
    border-color: hsl(var(--border));
    color: hsl(var(--accent-foreground));
}

.alert-success {
    background: hsl(142 76% 36% / 0.1);
    border-color: hsl(142 76% 36%);
    color: hsl(142 76% 36%);
}

.alert-warning {
    background: hsl(38 92% 50% / 0.1);
    border-color: hsl(38 92% 50%);
    color: hsl(38 92% 50%);
}

.alert-destructive {
    background: hsl(var(--destructive) / 0.1);
    border-color: hsl(var(--destructive));
    color: hsl(var(--destructive));
}

/* Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 2rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 2rem; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .card {
        padding: 1rem;
    }
    
    .table th,
    .table td {
        padding: 0.75rem;
    }
    
    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    body, p, a, .form-input, .form-select, .form-textarea, .form-label, .table, .table th, .table td, .alert {
        font-size: 16px;
    }
    
    .btn {
        font-size: 16px;
        height: 44px;
    }
    
    .badge {
        font-size: 15px;
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Focus styles for accessibility */
*:focus {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border: 0 0% 0%;
        --input: 0 0% 0%;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Board Container */
.bo_wrap {
  background-color: #ffffff;
  border-radius: var(--md-radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  border: 1px solid #e2e8f0;
}

/* Board Header */
.bo_title {
  background-color: #ffffff;
  padding: var(--md-spacing-lg);
  border-bottom: 1px solid #e2e8f0;
}

.bo_title h2 {
  color: #1e293b;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

/* Board Navigation */
.bo_nav {
  background-color: #f8fafc;
  padding: var(--md-spacing-md) var(--md-spacing-lg);
  border-bottom: 1px solid #e2e8f0;
}

.bo_nav a {
  color: #475569;
  text-decoration: none;
  transition: color var(--md-transition-fast);
}

.bo_nav a:hover {
  color: #2563eb;
}

/* Board Table */
.bo_table {
  background-color: #ffffff;
}

.bo_table table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
}

.bo_table th {
  background-color: #f8fafc;
  color: #475569;
  padding: var(--md-spacing-md);
  text-align: left;
  font-weight: 500;
  border-bottom: 1px solid #e2e8f0;
}

.bo_table td {
  padding: var(--md-spacing-md);
  border-bottom: 1px solid #f1f5f9;
  transition: background-color var(--md-transition-fast);
  background-color: #ffffff;
}

.bo_table tbody tr:hover td {
  background-color: #f8fafc;
}

/* Board Subject */
.bo_subject {
  color: #1e293b;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--md-transition-fast);
}

.bo_subject:hover {
  color: #2563eb;
}

/* Board Info */
.bo_info {
  color: #64748b;
  font-size: 0.875rem;
}

/* Board Author */
.bo_author {
  color: #475569;
  font-weight: 500;
}

/* Board Date */
.bo_date {
  color: #64748b;
}

/* Board Count */
.bo_count {
  color: #64748b;
  text-align: center;
}

/* Board Actions */
.bo_actions {
  background-color: #ffffff;
  padding: var(--md-spacing-lg);
  border-top: 1px solid #e2e8f0;
}

.bo_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: var(--md-radius-md);
  text-decoration: none;
  font-weight: 500;
  transition: all var(--md-transition-medium);
  cursor: pointer;
}

.bo_btn:hover {
  background-color: #1d4ed8;
  transform: translateY(-1px);
}

.bo_btn_secondary {
  background-color: #ffffff;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.bo_btn_secondary:hover {
  background-color: #f8fafc;
  color: #2563eb;
  border-color: #2563eb;
}

/* Board Search */
.bo_search {
  background-color: #ffffff;
  padding: var(--md-spacing-lg);
  border-top: 1px solid #e2e8f0;
}

.bo_search form {
  display: flex;
  gap: var(--md-spacing-md);
  align-items: center;
}

.bo_search input[type="text"] {
  flex: 1;
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border: 1px solid #e2e8f0;
  border-radius: var(--md-radius-md);
  background-color: #ffffff;
  color: #1e293b;
}

.bo_search select {
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  border: 1px solid #e2e8f0;
  border-radius: var(--md-radius-md);
  background-color: #ffffff;
  color: #1e293b;
}

.bo_search button {
  padding: var(--md-spacing-sm) var(--md-spacing-md);
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: var(--md-radius-md);
  cursor: pointer;
  transition: background-color var(--md-transition-fast);
}

.bo_search button:hover {
  background-color: #1d4ed8;
}

/* Board Pagination */
.bo_pg {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--md-spacing-xs);
  margin: var(--md-spacing-lg) 0;
  background-color: #ffffff;
}

.bo_pg a, .bo_pg strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--md-spacing-sm);
  border-radius: var(--md-radius-md);
  text-decoration: none;
  transition: all var(--md-transition-medium);
}

.bo_pg a {
  background-color: #ffffff;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.bo_pg a:hover {
  background-color: #f8fafc;
  color: #2563eb;
  border-color: #2563eb;
}

.bo_pg strong {
  background-color: #2563eb;
  color: #ffffff;
  border: 1px solid #2563eb;
}

/* Board Empty */
.bo_empty {
  text-align: center;
  padding: var(--md-spacing-xl);
  color: #64748b;
  background-color: #ffffff;
}

/* Board Notice */
.bo_notice {
  background-color: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: var(--md-spacing-md);
  margin-bottom: var(--md-spacing-md);
  border-radius: var(--md-radius-md);
}

.bo_notice td {
  background-color: #fef3c7 !important;
}

/* Board Sticky */
.bo_sticky {
  background-color: #f0f9ff;
  border-left: 4px solid #0ea5e9;
}

.bo_sticky td {
  background-color: #f0f9ff !important;
}

.bo_sticky:hover td {
  background-color: #e0f2fe !important;
}

/* Board New */
.bo_new {
  position: relative;
}

.bo_new::after {
  content: "N";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background-color: #ef4444;
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Board Hot */
.bo_hot {
  position: relative;
}

.bo_hot::after {
  content: "H";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  background-color: #f59e0b;
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Board Secret */
.bo_secret {
  color: #64748b;
}

.bo_secret::before {
  content: "🔒 ";
}

/* Board Lock */
.bo_lock {
  color: #64748b;
}

.bo_lock::before {
  content: "🔒 ";
}

/* Board File */
.bo_file {
  color: #64748b;
}

.bo_file::before {
  content: "📎 ";
}

/* Board Image */
.bo_image {
  color: #64748b;
}

.bo_image::before {
  content: "🖼️ ";
}

/* Board Video */
.bo_video {
  color: #64748b;
}

.bo_video::before {
  content: "🎥 ";
}

/* Board Audio */
.bo_audio {
  color: #64748b;
}

.bo_audio::before {
  content: "🎵 ";
}

/* Board Download */
.bo_download {
  color: #64748b;
}

.bo_download::before {
  content: "⬇️ ";
}

/* Board Reply */
.bo_reply {
  color: #64748b;
}

.bo_reply::before {
  content: "↩️ ";
}

/* Board Comment */
.bo_comment {
  color: #64748b;
}

.bo_comment::before {
  content: "💬 ";
}

/* Board View */
.bo_view {
  color: #64748b;
}

.bo_view::before {
  content: "👁️ ";
}

/* Board Like */
.bo_like {
  color: #64748b;
}

.bo_like::before {
  content: "❤️ ";
}

/* Board Dislike */
.bo_dislike {
  color: #64748b;
}

.bo_dislike::before {
  content: "💔 ";
}

/* Board Share */
.bo_share {
  color: #64748b;
}

.bo_share::before {
  content: "📤 ";
}

/* Board Print */
.bo_print {
  color: #64748b;
}

.bo_print::before {
  content: "🖨️ ";
}

/* Board Email */
.bo_email {
  color: #64748b;
}

.bo_email::before {
  content: "📧 ";
}

/* Board SMS */
.bo_sms {
  color: #64748b;
}

.bo_sms::before {
  content: "📱 ";
}

/* Board URL */
.bo_url {
  color: #64748b;
}

.bo_url::before {
  content: "🔗 ";
}

/* Board QR */
.bo_qr {
  color: #64748b;
}

.bo_qr::before {
  content: "📱 ";
}

/* Board Social */
.bo_social {
  color: #64748b;
}

.bo_social::before {
  content: "🌐 ";
}

/* Board Mobile */
@media (max-width: 768px) {
  .bo_table {
    font-size: 0.875rem;
  }
  
  .bo_table th,
  .bo_table td {
    padding: var(--md-spacing-sm);
  }
  
  .bo_actions {
    flex-direction: column;
    gap: var(--md-spacing-sm);
  }
  
  .bo_search form {
    flex-direction: column;
    align-items: stretch;
  }
}