/* Atlas Knowledge Base — Custom Styles */

/* ==================== BASE ==================== */
:root {
  --atlas-primary: #1240c4;
  --atlas-dark: #0d1a46;
  --atlas-light: #f0f4ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ==================== EDITOR ==================== */
.editor-tool-btn {
  @apply w-8 h-8 flex items-center justify-center rounded-md text-gray-500 hover:bg-gray-200 hover:text-gray-700 transition text-sm;
}

#editor-area:empty:before {
  content: attr(placeholder);
  color: #cbd5e1;
  pointer-events: none;
}

/* ==================== ARTICLE CONTENT ==================== */
.article-content h1 { @apply text-2xl font-bold text-gray-900 mt-6 mb-3; }
.article-content h2 { @apply text-xl font-bold text-gray-900 mt-6 mb-3 pb-2 border-b border-gray-100; }
.article-content h3 { @apply text-lg font-semibold text-gray-800 mt-4 mb-2; }
.article-content h4 { @apply text-base font-semibold text-gray-700 mt-3 mb-2; }

.article-content p { @apply text-gray-700 leading-relaxed mb-4; }

.article-content ul { @apply list-disc list-inside space-y-1.5 mb-4 ml-4; }
.article-content ol { @apply list-decimal list-inside space-y-1.5 mb-4 ml-4; }
.article-content li { @apply text-gray-700; }

.article-content strong { @apply font-semibold text-gray-900; }
.article-content em { @apply italic; }

.article-content a { @apply text-blue-600 underline hover:text-blue-800; }

.article-content blockquote {
  @apply border-l-4 border-atlas-500 pl-4 py-1 my-4 bg-atlas-50 rounded-r-lg text-gray-700 italic;
}

.article-content code {
  @apply bg-gray-100 text-red-600 px-1.5 py-0.5 rounded text-sm font-mono;
}

.article-content pre {
  @apply bg-gray-900 text-gray-100 p-4 rounded-xl overflow-x-auto mb-4;
}
.article-content pre code {
  @apply bg-transparent text-gray-100 p-0;
}

.article-content table {
  @apply w-full border-collapse mb-4 text-sm;
}
.article-content th {
  @apply bg-atlas-50 text-atlas-800 font-semibold px-3 py-2 text-left border border-gray-200;
}
.article-content td {
  @apply px-3 py-2 border border-gray-200 text-gray-700;
}
.article-content tr:nth-child(even) td {
  @apply bg-gray-50;
}

.article-content img {
  @apply max-w-full rounded-xl my-4 shadow-md cursor-pointer hover:shadow-lg transition;
}

.article-content hr { @apply border-gray-200 my-6; }

/* ==================== NAVIGATION ==================== */
.nav-btn.active {
  @apply text-white bg-atlas-700;
}

/* ==================== CARDS ==================== */
.category-card {
  @apply bg-white rounded-xl p-5 border border-gray-100 shadow-sm cursor-pointer hover:shadow-md hover:border-atlas-200 transition-all duration-200;
}

.article-card {
  @apply bg-white rounded-xl p-5 border border-gray-100 shadow-sm cursor-pointer hover:shadow-md hover:border-atlas-200 transition-all duration-200;
}

/* ==================== ROLE BADGES ==================== */
.role-badge {
  @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
}
.role-partner { @apply bg-blue-50 text-blue-700; }
.role-support { @apply bg-green-50 text-green-700; }
.role-editor { @apply bg-purple-50 text-purple-700; }
.role-admin { @apply bg-orange-50 text-orange-700; }

/* ==================== STATUS BADGES ==================== */
.status-published { @apply bg-green-50 text-green-700 border border-green-200; }
.status-draft { @apply bg-yellow-50 text-yellow-700 border border-yellow-200; }
.status-archived { @apply bg-gray-50 text-gray-500 border border-gray-200; }

/* ==================== SIDEBAR ==================== */
.cat-filter-btn {
  @apply w-full text-left px-3 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50 transition;
}
.cat-filter-btn.active {
  @apply bg-atlas-50 text-atlas-700 font-medium;
}

/* ==================== ADMIN TABLE ==================== */
.admin-table {
  @apply w-full;
}
.admin-table th {
  @apply text-left text-xs font-semibold text-gray-500 uppercase tracking-wide px-4 py-3 border-b border-gray-100 bg-gray-50;
}
.admin-table td {
  @apply px-4 py-3 border-b border-gray-50 text-sm text-gray-700;
}
.admin-table tr:hover td {
  @apply bg-gray-50;
}
.admin-table tr:last-child td {
  @apply border-b-0;
}

/* ==================== MODAL ==================== */
.modal-header {
  @apply flex items-center justify-between p-5 border-b border-gray-100;
}
.modal-body { @apply p-5; }
.modal-footer {
  @apply flex items-center justify-end gap-3 p-5 border-t border-gray-100;
}

/* ==================== FORM ELEMENTS ==================== */
.form-input {
  @apply w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-atlas-500 focus:border-transparent outline-none transition bg-white;
}
.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1.5;
}
.btn-primary {
  @apply px-5 py-2.5 bg-atlas-600 text-white rounded-lg text-sm font-semibold hover:bg-atlas-700 transition;
}
.btn-secondary {
  @apply px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-50 transition;
}
.btn-danger {
  @apply px-5 py-2.5 bg-red-600 text-white rounded-lg text-sm font-semibold hover:bg-red-700 transition;
}

/* ==================== TAGS ==================== */
.tag-chip {
  @apply inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium border cursor-pointer transition;
}
.tag-chip-selected {
  @apply border-atlas-400 bg-atlas-50 text-atlas-700;
}
.tag-chip-unselected {
  @apply border-gray-200 bg-white text-gray-500 hover:border-atlas-300 hover:text-atlas-600;
}

/* ==================== TOAST ==================== */
.toast {
  @apply pointer-events-auto flex items-center gap-3 px-4 py-3 rounded-xl shadow-lg text-sm font-medium min-w-64;
  animation: slideIn 0.3s ease-out;
}
.toast-success { @apply bg-green-600 text-white; }
.toast-error { @apply bg-red-600 text-white; }
.toast-info { @apply bg-atlas-600 text-white; }
.toast-warning { @apply bg-orange-500 text-white; }

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

/* ==================== LOADING ==================== */
.skeleton {
  @apply bg-gray-200 rounded animate-pulse;
}

.loading-spinner {
  @apply inline-block w-5 h-5 border-2 border-white/30 border-t-white rounded-full;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==================== SEARCH HIGHLIGHT ==================== */
.search-highlight { @apply bg-yellow-100 text-yellow-800 rounded px-0.5; }

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { @apply bg-gray-100 rounded; }
::-webkit-scrollbar-thumb { @apply bg-gray-300 rounded hover:bg-gray-400; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 640px) {
  .article-content h1 { @apply text-xl; }
  .article-content h2 { @apply text-lg; }
  .article-content table { @apply text-xs; }
}

/* ==================== PRINT ==================== */
@media print {
  header, footer, .sticky, #article-edit-btn { display: none !important; }
  .article-content { @apply text-black; }
}