:root {
  --primary-black    : #000;
  --primary-white    : #fff;
  --secondary-gray   : #f0f0f0;
  --accent-gray      : #888;
  --dark-bg          : #222;
  --border-width     : 2px;
  --border-style     : solid;
  --border-color     : var(--primary-black);
  --spacing-xs       : 0.5rem;
  --spacing-sm       : 1rem;
  --spacing-md       : 1.5rem;
  --spacing-lg       : 2rem;
  --spacing-xl       : 3rem;
  --font-primary     : "Courier New", monospace;
  --font-secondary   : "Georgia", serif;
  --shadow           : 4px 4px 0px rgba(0, 0, 0, 1);
  --noir-gray-lighter: #999999;
  --tag-html         : #333;
  --tag-css          : #555;
  --tag-js           : #777;
  --tag-python       : #2f6796;
  --tag-django       : #00980c;
  --tag-javascript   : #efd917;
  --tag-java         : #bbb;
  --tag-react        : #087ea4;
  --tag-node         : #417e38;
  --tag-mobile       : #888;
  --tag-data         : #aaa;
  --tag-carreira     : #ccc;
}

html {
  box-sizing: border-box;
  overflow-x: hidden;
  width     : 100%;
}

* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

body {
  font-family     : var(--font-primary);
  background-color: var(--primary-white);
  color           : var(--primary-black);
  line-height     : 1.6;
  margin          : 0;
  padding         : 0;
  display         : flex;
  flex-direction  : column;
  min-height      : 100vh;
  background-image:
    radial-gradient(circle at 25px 25px, var(--noir-gray-lighter) 2px, transparent 0),
    radial-gradient(circle at 75px 75px, var(--noir-gray-lighter) 1px, transparent 0);
  background-size    : 100px 100px;
  background-position: 0 0, 50px 50px;
}

.container {
  max-width: 1200px;
  margin   : 0 auto;
  padding  : 0 var(--spacing-md);
  width    : 100%;
}


header {
  text-align      : center;
  padding         : var(--spacing-lg) 0;
  border-bottom   : var(--border-width) var(--border-style) var(--border-color);
  margin-bottom   : var(--spacing-lg);
  width           : 100%;
  background-color: var(--primary-white);
}

h1 {
  font-family   : var(--font-secondary);
  font-size     : 3rem;
  letter-spacing: -1px;
  text-transform: uppercase;
  margin-bottom : var(--spacing-sm);
  position      : relative;
  display       : inline-block;
}

h1::after {
  content   : "";
  position  : absolute;
  bottom    : -10px;
  left      : 50%;
  transform : translateX(-50%);
  width     : 100px;
  height    : 4px;
  background: var(--primary-black);
}

.subtitle {
  font-size: 1.2rem;
  max-width: 600px;
  margin   : 0 auto;
  color    : var(--accent-gray);
}


.main-layout {
  display  : flex;
  gap      : var(--spacing-lg);
  max-width: 1600px;
  margin   : 0 auto;
  width    : 100%;
  padding  : 0 var(--spacing-md);
}



.sidebar {
  flex      : 0 0 260px;
  border    : var(--border-width) var(--border-style) var(--border-color);
  padding   : var(--spacing-md);
  align-self: flex-start;
  position  : sticky;
  top       : var(--spacing-md);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--primary-white);
}

.text-center {
  text-align: center;
}

.test-white {
  color: white !important;
}

.unlink {
  text-decoration: none !important;
  color          : inherit !important;
}

.w-600px {
  max-width: 600px;
  margin   : 30px auto !important;
}

.sidebar h2 {
  font-family   : var(--font-secondary);
  font-size     : 1.4rem;
  margin-bottom : var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom : 1px solid var(--border-color);
}

.filter-group {
  margin-bottom: var(--spacing-md);
}

.filter-group h3 {
  font-size    : 1rem;
  margin-bottom: var(--spacing-xs);
  font-weight  : bold;
  color        : var(--primary-black);
}

.filter-search {
  margin-bottom: var(--spacing-xs);
}

.search-input {
  width        : 100%;
  padding      : 0.4rem 0.6rem;
  font-size    : 0.85rem;
  border       : 1px solid var(--accent-gray);
  font-family  : var(--font-primary);
  background   : var(--primary-white);
  border-radius: 0;
}

.search-input:focus {
  outline     : none;
  border-color: var(--primary-black);
}

.filter-options {
  display       : flex;
  flex-direction: column;
  gap           : 0.25rem;
  max-height    : 240px;
  overflow      : hidden;
  position      : relative;
  transition    : max-height 0.3s ease;
}

.filter-options.expanded {
  max-height: 400px;
  overflow-y: auto;
}

.show-more-container {
  margin-top : 0.3rem;
  margin-left: 1rem;
}

.show-more-btn {
  background : none;
  border     : none;
  color      : var(--accent-gray);
  cursor     : pointer;
  font-size  : 0.8rem;
  padding    : 0;
  text-align : left;
  font-family: var(--font-primary);
  transition : color 0.2s ease;
}

.show-more-btn:hover {
  color: var(--primary-black);
}


.htmx-indicator {
  display   : none;
  position  : fixed;
  top       : 50%;
  left      : 50%;
  transform : translate(-50%, -50%);
  background: var(--primary-white);
  border    : var(--border-width) var(--border-style) var(--border-color);
  padding   : var(--spacing-md);
  z-index   : 1000;
  box-shadow: var(--shadow);
}

.htmx-request .htmx-indicator {
  display: block;
}

.loading-spinner {
  font-family: var(--font-primary);
  font-weight: bold;
  display    : flex;
  align-items: center;
  gap        : var(--spacing-xs);
}

.loading-spinner::after {
  content      : '';
  width        : 16px;
  height       : 16px;
  border       : 2px solid var(--accent-gray);
  border-top   : 2px solid var(--primary-black);
  border-radius: 50%;
  animation    : spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.htmx-settling {
  opacity   : 0.8;
  transition: opacity 0.3s ease;
}

.htmx-swapping {
  opacity: 0.5;
}


#main-content.htmx-request {
  opacity   : 0.7;
  transition: opacity 0.3s ease;
}

.filter-btn {
  background     : none;
  border         : none;
  text-align     : left;
  padding        : 0.35rem 0;
  font-family    : var(--font-primary);
  cursor         : pointer;
  transition     : all 0.2s ease;
  position       : relative;
  padding-left   : 1rem;
  text-decoration: none;
  color          : inherit;
  display        : block;
  font-size      : 0.9rem;
  line-height    : 1.3;
}

.filter-btn::before {
  content      : "";
  position     : absolute;
  left         : 0;
  top          : 50%;
  transform    : translateY(-50%);
  width        : 6px;
  height       : 6px;
  border       : 1px solid var(--border-color);
  border-radius: 50%;
}

.filter-btn:hover,
.filter-btn.active {
  color      : var(--primary-black);
  font-weight: bold;
}

.filter-btn.active::before {
  background: var(--primary-black);
  border    : 2px solid var(--primary-black);
}

main {
  flex : 1;
  width: 100%;
}

.channels-grid {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : var(--spacing-lg);
  margin-bottom        : var(--spacing-xl);
}

.channel-card {
  border        : var(--border-width) var(--border-style) var(--border-color);
  padding       : var(--spacing-md);
  position      : relative;
  transition    : all 0.3s ease;
  background    : var(--primary-white);
  width         : 100%;
  display       : flex;
  flex-direction: column;
  height        : 100%;
}

.country-flag {
  position     : absolute;
  top          : var(--spacing-sm);
  right        : var(--spacing-sm);
  z-index      : 2;
  border-radius: 4px;
  padding      : 2px 4px;
}

.channel-card:hover {
  transform : translateY(-5px);
  box-shadow: var(--shadow);
}

.channel-card::before {
  content       : "";
  position      : absolute;
  top           : -5px;
  left          : -5px;
  right         : 5px;
  bottom        : 5px;
  border        : var(--border-width) var(--border-style) var(--border-color);
  pointer-events: none;
  z-index       : -1;
}

.channel-icon {
  width          : 80px;
  height         : 80px;
  border         : var(--border-width) var(--border-style) var(--border-color);
  border-radius  : 50%;
  margin-bottom  : var(--spacing-sm);
  display        : flex;
  align-items    : center;
  justify-content: center;
  overflow       : hidden;
}

.channel-icon img {
  width     : 100%;
  height    : 100%;
  object-fit: cover;
}

.channel-name {
  font-size    : 1.4rem;
  margin-bottom: var(--spacing-xs);
  font-family  : var(--font-secondary);
}

.channel-subscribers {
  color        : var(--accent-gray);
  margin-bottom: var(--spacing-sm);
  font-size    : 0.9rem;
}

.channel-description {
  margin-bottom: var(--spacing-sm);
  font-size    : 0.95rem;
}


.tags {
  display      : flex;
  flex-wrap    : wrap;
  gap          : var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.tag {
  font-size  : 0.75rem;
  padding    : 0.25rem 0.5rem;
  border     : var(--border-width) var(--border-style) var(--border-color);
  font-weight: bold;
}

.tag-html {
  background-color: var(--tag-html);
  color           : white;
}

.tag-css {
  background-color: var(--tag-css);
  color           : white;
}

.tag-js {
  background-color: var(--tag-js);
  color           : white;
}

.tag-python {
  background-color: var(--tag-python);
  color           : white;
}

.tag-django {
  background-color: var(--tag-django);
  color           : white;
}

.tag-javascript {
  background-color: var(--tag-javascript);
  color           : white;
}

.tag-java {
  background-color: var(--tag-java);
  color           : white;
}

.tag-react {
  background-color: var(--tag-react);
  color           : white;
}

.tag-node {
  background-color: var(--tag-node);
  color           : white;
}

.tag-mobile {
  background-color: var(--tag-mobile);
  color           : white;
}

.tag-data {
  background-color: var(--tag-data);
  color           : white;
}

.tag-carreira {
  background-color: var(--tag-carreira);
  color           : white;
}

.icon {
  width         : 16px;
  height        : 16px;
  margin-right  : 6px;
  vertical-align: middle;
  color         : #fff;
  fill          : #fff;
  stroke        : #fff;
}

.filter-btn:hover .icon,
.filter-btn.active .icon,
.prev-btn:hover:not(:disabled) .icon,
.next-btn:hover:not(:disabled) .icon {
  color : #000;
  fill  : #000;
  stroke: #000;
}

.prev-btn:disabled .icon,
.next-btn:disabled .icon {
  color : #666;
  fill  : #666;
  stroke: #666;
}

.channel-link {
  display        : block;
  text-decoration: none;
  background     : var(--primary-black);
  color          : var(--primary-white);
  font-weight    : bold;
  border         : var(--border-width) var(--border-style) var(--border-color);
  padding        : var(--spacing-xs) var(--spacing-sm);
  transition     : all 0.3s ease;
  width          : 100%;
  margin-top     : auto;
  text-align     : center;
  border-radius  : 0 0 8px 8px;
}

.channel-link:hover {
  background: var(--primary-white);
  color     : var(--primary-black);
}

.channel-link .icon {
  width         : 22px;
  height        : 22px;
  margin-right  : 6px;
  vertical-align: middle;
  filter        : brightness(0) invert(1);
}

.channel-link:hover .icon {
  filter: brightness(0) invert(0);
}

footer {
  text-align      : center;
  border-top      : var(--border-width) var(--border-style) var(--border-color);
  font-size       : 0.9rem;
  background-color: var(--dark-bg);
  color           : var(--primary-white);
  width           : 100%;
  margin-top      : auto;
  box-sizing      : border-box;
  padding         : var(--spacing-lg) var(--spacing-md);
}

footer p {
  margin-bottom: var(--spacing-xs);
}

footer p:last-child {
  margin-bottom: 0;
}


@media (max-width: 1200px) {
  .channels-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .main-layout {
    flex-direction: column;
  }

  .sidebar {
    width     : 100%;
    position  : static;
    order     : 2;
    max-height: none;
    flex      : 0 0 auto;
  }

  .channels-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .filter-options {
    max-height: none;
  }

  .filter-options.expanded {
    max-height: none;
  }

  .filter-group {
    margin-bottom: var(--spacing-sm);
  }

  .search-input {
    font-size: 0.9rem;
  }

  main {
    order: 1;
  }
}

@media (max-width: 768px) {
  .channels-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  h1 {
    font-size: 2.2rem;
  }

  .container {
    padding  : 0 var(--spacing-sm);
    max-width: 100%;
  }

  .main-layout {
    padding: 0 var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .channels-grid {
    grid-template-columns: 1fr;
    gap                  : var(--spacing-md);
    margin-bottom        : var(--spacing-lg);
    width                : 100%;
  }

  .channel-card {
    width: 100%;
  }

  .container {
    padding: 0 var(--spacing-xs);
  }

  .main-layout {
    padding: 0 var(--spacing-xs);
  }

  .subtitle {
    font-size: 1rem;
    padding  : 0 var(--spacing-xs);
  }

  .channel-link {
    display   : block;
    text-align: center;
    width     : 100%;
  }

  .tags {
    justify-content: center;
  }

  footer {
    margin : var(--spacing-md) var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-xs);
  }
}


.add-channel {
  background-color: #fff;
  padding         : 60px 0;
  border-top      : 2px solid #000;
  border-bottom   : 2px solid #000;
}

.add-channel h2 {
  font-size    : 28px;
  font-weight  : bold;
  text-align   : center;
  margin-bottom: 10px;
}

.add-channel p {
  text-align   : center;
  font-size    : 16px;
  color        : #666;
  margin-bottom: 30px;
}

.channel-form {
  max-width       : 600px;
  margin          : 0 auto;
  padding         : 30px;
  border          : 2px solid #000;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 20px;
}

.form-row {
  display: flex;
  gap    : 20px;
}

.form-row .form-group {
  flex: 1;
}

.form-group label {
  display      : block;
  font-size    : 14px;
  font-weight  : bold;
  margin-bottom: 8px;
  color        : #000;
}

.form-group input,
.form-group textarea,
.form-group select {
  width           : 100%;
  padding         : 12px;
  font-size       : 14px;
  border          : 2px solid #000;
  background-color: #fff;
  border-radius   : 0;
  font-family     : inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline         : none;
  border-color    : #333;
  background-color: #fff;
}

.form-group textarea {
  resize    : vertical;
  min-height: 100px;
}

.submit-btn {
  background-color: #000;
  color           : #fff;
  padding         : 15px 30px;
  font-size       : 16px;
  font-weight     : bold;
  border          : none;
  cursor          : pointer;
  width           : 100%;
  text-transform  : uppercase;
  letter-spacing  : 1px;
  transition      : background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #333;
}


@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap           : 0;
  }

  .channel-form {
    padding: 20px;
  }

  .search-bar input {
    width: 200px;
  }
}

.pagination {
  display        : flex;
  justify-content: center;
  align-items    : center;
  margin-top     : 40px;
  gap            : 20px;
  padding        : 60px 0;
}

.prev-btn,
.next-btn {
  background-color: #000;
  color           : #fff;
  padding         : 12px 20px;
  border          : 2px solid #000;
  font-size       : 14px;
  font-weight     : bold;
  cursor          : pointer;
  text-transform  : uppercase;
  letter-spacing  : 1px;
  transition      : all 0.3s ease;
  text-decoration : none;
  display         : inline-block;
}

.prev-btn:hover:not(:disabled),
.next-btn:hover:not(:disabled) {
  background-color: #fff;
  color           : #000;
}

.prev-btn:disabled,
.next-btn:disabled {
  background-color: #ccc;
  border-color    : #ccc;
  cursor          : not-allowed;
  color           : #666;
}

.page-numbers {
  display: flex;
  gap    : 10px;
}

.page-number {
  width          : 40px;
  height         : 40px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  border         : 2px solid #000;
  font-weight    : bold;
  cursor         : pointer;
  transition     : all 0.3s ease;
  text-decoration: none;
  color          : #000;
}

.page-number:hover {
  background-color: #000;
  color           : #fff;
}

.page-number.active {
  background-color: #000;
  color           : #fff;
}


@media (max-width: 768px) {
  .pagination {
    flex-direction: column;
    gap           : 15px;
  }

  .page-numbers {
    order: -1;
  }

  .prev-btn,
  .next-btn {
    width  : 100%;
    padding: 15px;
  }
}

/* Alert Styles */
.alert {
  position   : relative;
  padding    : 15px 20px;
  margin     : 20px 0;
  border     : 2px solid #000;
  font-size  : 14px;
  font-weight: bold;
  display    : flex;
  align-items: center;
  gap        : 10px;
}

.alert-success {
  background-color: #d4edda;
  border-color    : #28a745;
  color           : #155724;
}

.alert-warning {
  background-color: #fff3cd;
  border-color    : #ffc107;
  color           : #856404;
}

.alert-danger {
  background-color: #f8d7da;
  border-color    : #dc3545;
  color           : #721c24;
}

.alert-icon {
  font-size  : 18px;
  font-weight: bold;
  min-width  : 20px;
  text-align : center;
}

.alert-text {
  flex       : 1;
  line-height: 1.4;
}

.alert-close {
  background     : none;
  border         : none;
  font-size      : 20px;
  font-weight    : bold;
  cursor         : pointer;
  padding        : 0;
  width          : 20px;
  height         : 20px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  border-radius  : 50%;
  transition     : background-color 0.3s ease;
}

.alert-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Estilos específicos para manter o tema preto e branco */
.alert-success .alert-close:hover {
  background-color: #28a745;
  color           : white;
}

.alert-info .alert-close:hover {
  background-color: #ffc107;
  color           : black;
}

.alert-danger .alert-close:hover {
  background-color: #dc3545;
  color           : white;
}

/* Responsive alerts */
@media (max-width: 768px) {
  .alert {
    padding  : 12px 15px;
    font-size: 12px;
  }

  .alert-icon {
    font-size: 16px;
  }

  .alert-close {
    font-size: 18px;
    width    : 18px;
    height   : 18px;
  }
}

/* badges */
.badges {
  margin-top: 10px;
}