/* Rebunkr Albums — Boldo-inspired CSS */
/* Identidade visual baseada no tema Boldo (ThemeWagon) */
/* Sem fontes externas, sem CDN */

/* ===== Custom Properties (Boldo palette) ===== */
:root {
  /* Boldo Colors */
  --boldo-dark: #0A2640;
  --boldo-primary: #0dcaf0;
  --boldo-primary-hover: #0bb4d6;
  --boldo-green: #65E4A3;
  --boldo-body: #5B7075;
  --boldo-light: #F1F1F1;
  --boldo-white: #ffffff;
  --boldo-gray-200: #C4C4C4;
  --boldo-gray-300: #8E8E8E;
  --boldo-primary-disabled: rgba(13, 202, 240, 0.4);

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Font */
  --font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;

  /* Layout */
  --content-max-width: 1100px;
  --border-radius: 8px;
  --transition-speed: 150ms;
}

/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--boldo-body);
  background-color: var(--boldo-white);
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--boldo-primary);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

a:hover,
a:focus {
  color: var(--boldo-green);
  text-decoration: underline;
}

/* ===== Layout ===== */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ===== Hero Header (Boldo dark style) ===== */
header.hero {
  background-color: var(--boldo-dark);
  padding: var(--space-xl) 0;
  text-align: center;
}

header.hero h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--boldo-white);
}

main {
  padding: var(--space-xl) 0;
}

footer {
  border-top: 1px solid var(--boldo-light);
  padding: var(--space-md) 0;
  font-size: var(--font-size-sm);
  color: var(--boldo-gray-300);
  text-align: center;
}

/* ===== Search Form ===== */
.search-form {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.search-form input[type="text"],
.search-form input[type="search"] {
  flex: 1;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  border: 1px solid var(--boldo-gray-200);
  border-radius: var(--border-radius);
  background-color: var(--boldo-white);
  color: var(--boldo-dark);
  transition: border-color var(--transition-speed) ease;
}

.search-form input[type="text"]:focus,
.search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--boldo-primary);
  box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.15);
}

.search-form .btn {
  min-width: 44px;
  min-height: 44px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  font-weight: 500;
  color: var(--boldo-dark);
  background-color: var(--boldo-primary);
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-speed) ease,
    opacity var(--transition-speed) ease;
  white-space: nowrap;
}

.btn:hover,
.btn:focus {
  background-color: var(--boldo-green);
  text-decoration: none;
  color: var(--boldo-dark);
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.3);
}

.btn:disabled,
.btn[disabled],
.btn.disabled {
  background-color: var(--boldo-primary-disabled);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}

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

.btn-outline:hover,
.btn-outline:focus {
  background-color: var(--boldo-dark);
  color: var(--boldo-primary);
  border-color: var(--boldo-dark);
}

.btn-outline:disabled,
.btn-outline[disabled],
.btn-outline.disabled {
  color: var(--boldo-primary-disabled);
  background-color: transparent;
  border-color: var(--boldo-light);
}

/* ===== Album List ===== */
.album-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.album-item {
  border-bottom: 1px solid var(--boldo-light);
}

.album-item:last-child {
  border-bottom: none;
}

.album-item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  min-height: 44px;
  color: var(--boldo-dark);
  font-size: var(--font-size-base);
  transition: background-color var(--transition-speed) ease;
  word-break: break-word;
}

.album-item a:hover,
.album-item a:focus {
  background-color: rgba(13, 202, 240, 0.04);
  color: var(--boldo-primary);
  text-decoration: none;
}

.album-item .album-name {
  flex: 1;
  font-weight: 500;
}

.album-item .album-date {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  color: var(--boldo-gray-300);
  white-space: nowrap;
}

/* ===== Pagination ===== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding: var(--space-md) 0;
}

.pagination .btn {
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
}

.pagination form {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.pagination input[type="number"] {
  width: 60px;
  min-height: 44px;
  padding: var(--space-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  border: 1px solid var(--boldo-gray-200);
  border-radius: var(--border-radius);
  text-align: center;
  background-color: var(--boldo-white);
  color: var(--boldo-dark);
}

.pagination input[type="number"]:focus {
  outline: none;
  border-color: var(--boldo-primary);
  box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.15);
}

/* ===== Page Indicator ===== */
.page-indicator {
  font-size: var(--font-size-sm);
  color: var(--boldo-body);
  font-weight: 500;
  padding: var(--space-sm) var(--space-md);
  white-space: nowrap;
}

/* ===== Empty State ===== */
.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--boldo-gray-300);
  font-size: var(--font-size-lg);
  background: var(--boldo-light);
  border-radius: var(--border-radius);
}

.empty-state p {
  margin: var(--space-sm) 0;
}

/* ===== Error Page ===== */
.error-page {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  max-width: 600px;
  margin: 0 auto;
}

.error-page h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-md);
  color: var(--boldo-dark);
}

.error-page p {
  font-size: var(--font-size-lg);
  color: var(--boldo-body);
  margin-bottom: var(--space-lg);
}

.error-page .error-box {
  background-color: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  color: #991b1b;
}

/* ===== Responsive — Mobile First ===== */

/* Mobile: ensure touch targets are at least 44x44px */
@media (max-width: 767px) {
  .container {
    padding: 0 var(--space-sm);
  }

  header.hero h1 {
    font-size: 1.5rem;
  }

  .search-form {
    flex-direction: column;
  }

  .search-form input[type="text"],
  .search-form input[type="search"] {
    width: 100%;
    min-height: 44px;
  }

  .search-form .btn {
    width: 100%;
    min-height: 44px;
  }

  .album-item a {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-sm);
    min-height: 44px;
  }

  .pagination {
    flex-direction: column;
    gap: var(--space-md);
  }

  .pagination .btn {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-sm) var(--space-lg);
  }

  .pagination form {
    width: 100%;
    justify-content: center;
  }

  .pagination input[type="number"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Navigation button group: wrap on small screens */
  .pagination-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    width: 100%;
  }
}

/* Wider screens */
@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-xl);
  }

  header.hero h1 {
    font-size: 2rem;
  }

  .search-form {
    max-width: 600px;
  }

  .album-item a {
    padding: var(--space-sm) var(--space-md);
  }

  .pagination {
    flex-direction: row;
    gap: var(--space-md);
  }
}