/* Tema minimalista para Gitea - elJedi.dev */
/* Este archivo debe colocarse en: data/gitea/custom/public/css/theme-eljedi.css */

/* Definición de fuentes desde archivos .woff2 */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/Orbitron-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Variables CSS para mantener consistencia */
:root {
  /* Colores del sitio web */
  --color-bg-main: #111827; /* bg-gray-900 */
  --color-text-primary: #f3f4f6; /* text-gray-100 como body */
  --color-text-content: #d1d5db; /* text-gray-300 como párrafos */
  --color-text-secondary: #9ca3af; /* text-gray-400 */
  --color-text-muted: #6b7280; /* text-gray-500 */
  --color-accent: #818cf8; /* text-indigo-400 */
  --color-accent-hover: #a5b4fc; /* text-indigo-300 */
  --color-link: #60a5fa; /* text-blue-400 */
  --color-link-hover: #93c5fd; /* text-blue-300 */
  
  /* Fuentes */
  --font-mono: 'JetBrains Mono', monospace;
  --font-system: 'JetBrains Mono', monospace;
}

/* Fondo sólido igual al sitio web */
body {
  background: var(--color-bg-main) !important;
  color: #f3f4f6 !important; /* text-gray-100 como en BaseLayout */
  font-family: var(--font-system) !important;
  font-size: 1rem !important; /* text-base de Tailwind */
  line-height: 1.5 !important; /* leading-normal de Tailwind */
  font-weight: 400 !important;
}

/* Eliminar todos los bordes, sombras y elementos visuales */
.ui.container,
.ui.segment,
.ui.card,
.ui.cards > .card,
.ui.menu,
.ui.secondary.menu,
.ui.top.secondary.menu,
.ui.table,
.ui.form,
.ui.input,
.ui.button,
.ui.dropdown .menu,
.ui.message,
.ui.pagination.menu .item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Header y navegación minimalista */
.ui.top.secondary.menu,
.ui.secondary.menu {
  background: var(--color-bg-main) !important;
  padding: 1rem 0 !important;
}

.ui.secondary.menu .item {
  color: var(--color-text-secondary) !important;
  padding: 0.5rem 1rem !important;
  transition: color 0.2s ease !important;
}

.ui.secondary.menu .item:hover,
.ui.secondary.menu .active.item {
  color: var(--color-accent) !important;
  background: transparent !important;
}

/* Títulos sin ASCII para lanzamientos/actividad */
h1, .ui.header {
  font-family: var(--font-mono) !important;
  font-size: 1.25rem !important; /* text-xl */
  color: var(--color-accent) !important;
  font-weight: 700 !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* Títulos H1 y H2 dentro del contenido markdown */
.markdown h1,
.file-view h1,
.repository .markdown h1 {
  font-family: var(--font-mono) !important;
  font-size: 1.25rem !important; /* text-xl */
  color: var(--color-accent) !important;
  font-weight: 700 !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.markdown h1::before,
.file-view h1::before,
.repository .markdown h1::before {
  content: '┌─ [ ' !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-mono) !important;
}

.markdown h1::after,
.file-view h1::after,
.repository .markdown h1::after {
  content: ' ]' !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-mono) !important;
}

.markdown h2,
.file-view h2,
.repository .markdown h2 {
  font-family: var(--font-mono) !important;
  font-size: 1.125rem !important; /* text-lg */
  color: var(--color-accent) !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  line-height: 1.5 !important;
}

.markdown h2::before,
.file-view h2::before,
.repository .markdown h2::before {
  content: '├─ [ ' !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-mono) !important;
}

.markdown h2::after,
.file-view h2::after,
.repository .markdown h2::after {
  content: ' ]' !important;
  color: var(--color-text-secondary) !important;
  font-family: var(--font-mono) !important;
}

h2 {
  font-family: var(--font-mono) !important;
  font-size: 1.125rem !important; /* text-lg */
  color: var(--color-accent) !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  line-height: 1.5 !important;
}

h3, h4, h5, h6 {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
}

/* Sub-headers sin decoración */
.ui.header .sub.header {
  color: var(--color-text-secondary) !important;
  font-family: var(--font-system) !important;
}

.ui.header .sub.header::before,
.ui.header .sub.header::after {
  content: none !important;
}

/* Enlaces simples */
a {
  color: var(--color-link) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--color-link-hover) !important;
  text-decoration: underline !important;
}

/* Títulos de repositorios en explorar y organizaciones */
.flex-item-title,
.flex-item-title a {
  color: var(--color-accent) !important; /* text-indigo-400 */
  font-weight: 600 !important;
}

.flex-item-title a:hover {
  color: var(--color-accent-hover) !important; /* text-indigo-300 */
}

/* Listas con puntos normales */
ul, ol,
.markdown ul, .markdown ol,
.file-view ul, .file-view ol {
  color: var(--color-text-content) !important; /* text-gray-300 */
  padding-left: 1.5rem !important;
  font-size: 1rem !important;
  line-height: 1.625 !important;
}

ul li, .markdown ul li, .file-view ul li {
  list-style: disc !important;
  margin-bottom: 0.5rem !important;
  color: var(--color-text-content) !important;
}

ol li, .markdown ol li, .file-view ol li {
  margin-bottom: 0.5rem !important;
  color: var(--color-text-content) !important;
}

/* Texto y párrafos - exactos del sitio web */
p,
.markdown p,
.file-view p,
.repository .markdown p {
  color: #d1d5db !important; /* text-gray-300 como en PostLayout */
  font-size: 1rem !important; /* text-base */
  line-height: 1.625 !important; /* leading-relaxed */
  margin-bottom: 1rem !important;
  font-family: var(--font-system) !important;
}

/* Código inline y bloques */
code {
  background: transparent !important;
  color: #10b981 !important; /* text-green-400 */
  font-family: var(--font-mono) !important;
  padding: 0.2em 0.4em !important;
  border: none !important;
}

pre {
  background: transparent !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-mono) !important;
  padding: 1rem 0 !important;
  overflow-x: auto !important;
  border: none !important;
}

pre code {
  background: transparent !important;
  padding: 0 !important;
}

/* Tablas minimalistas */
.ui.table {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}

.ui.table thead th {
  background: transparent !important;
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--color-text-secondary) !important;
  padding: 0.75rem 0.5rem !important;
}

.ui.table tbody td {
  border: none !important;
  padding: 0.5rem !important;
  color: var(--color-text-primary) !important;
}

.ui.table tbody tr:hover {
  background: transparent !important;
}

/* Formularios minimalistas */
.ui.form .field > label {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

.ui.input > input,
.ui.form textarea {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--color-text-secondary) !important;
  color: var(--color-text-primary) !important;
  padding: 0.5rem 0 !important;
  font-family: var(--font-system) !important;
}

.ui.input > input:focus,
.ui.form textarea:focus {
  border-bottom-color: var(--color-accent) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Botones como enlaces simples */
.ui.button {
  background: transparent !important;
  color: var(--color-link) !important;
  border: none !important;
  padding: 0.5rem 0 !important;
  font-family: var(--font-system) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

.ui.button:hover {
  color: var(--color-link-hover) !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

.ui.primary.button {
  color: var(--color-accent) !important;
}

.ui.primary.button:hover {
  color: var(--color-accent-hover) !important;
}

/* Menús desplegables minimalistas */
.ui.dropdown .menu {
  background: var(--color-bg-main) !important;
  border: 1px solid var(--color-text-secondary) !important;
  border-radius: 0 !important;
}

.ui.dropdown .menu .item {
  color: var(--color-text-primary) !important;
  padding: 0.5rem 1rem !important;
  border: none !important;
}

.ui.dropdown .menu .item:hover {
  background: transparent !important;
  color: var(--color-accent) !important;
}

/* Paginación minimalista */
.ui.pagination.menu {
  background: transparent !important;
}

.ui.pagination.menu .item {
  background: transparent !important;
  color: var(--color-text-secondary) !important;
  border: none !important;
  margin: 0 0.5rem !important;
  padding: 0.5rem !important;
}

.ui.pagination.menu .active.item {
  color: var(--color-accent) !important;
  background: transparent !important;
  text-decoration: underline !important;
}

/* Mensajes minimalistas */
.ui.message {
  background: transparent !important;
  color: var(--color-text-primary) !important;
  border: none !important;
  padding: 1rem 0 !important;
}

.ui.positive.message {
  color: #10b981 !important; /* text-green-400 */
}

.ui.negative.message {
  color: #ef4444 !important; /* text-red-400 */
}

.ui.warning.message {
  color: #f59e0b !important; /* text-yellow-400 */
}

/* Etiquetas como en el sitio web */
.ui.label,
.release-tag,
.tag {
  background: transparent !important;
  color: #d8b4fe !important; /* text-purple-300 como en PostTags */
  border: none !important;
  padding: 0 !important;
  font-size: 0.875rem !important;
}

.ui.label::before,
.release-tag::before,
.tag::before {
  content: '#' !important;
}

/* Líneas separadoras para archivos */
.file-header,
.diff-file-header {
  border-bottom: 1px solid var(--color-text-secondary) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 1rem !important;
}

.repository .file-actions {
  border-top: 1px solid var(--color-text-secondary) !important;
  padding-top: 0.5rem !important;
  margin-top: 1rem !important;
}

/* Contenido del README - ancho máximo 800px en móvil */
.repository.file .file-view,
.repository .diff-file-box .file-body,
.markdown {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
}

@media (min-width: 768px) {
  .repository.file .file-view,
  .repository .diff-file-box .file-body,
  .markdown {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Responsive - tamaños exactos del sitio web */
@media (max-width: 640px) {
  h1, .ui.header,
  .markdown h1,
  .file-view h1,
  .repository .markdown h1 {
    font-size: 1.125rem !important; /* text-lg */
  }
  
  h2,
  .markdown h2,
  .file-view h2,
  .repository .markdown h2 {
    font-size: 1rem !important; /* text-base */
  }
}

/* Eliminar transiciones y animaciones innecesarias */
* {
  transition: color 0.2s ease !important;
}

/* Scrollbars minimalistas */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-text-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}