/* ==================================================================
   Admin Theme Overrides
   ================================================================== */

/* Admin Navbar */
.admin-layout .navbar {
  background: var(--color-primary);
}

.admin-layout .navbar a {
  color: white;
}

.admin-layout .navbar a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.admin-layout .container {
  max-width: 1400px;
}

.admin-layout .nav-menu a {
  color: var(--color-primary);
}

.admin-layout .nav-menu a:hover {
  color: var(--color-primary-hover);
}

.admin-layout .nav-menu a.active {
  color: var(--color-gray-800);
}

.admin-layout .btn {
  background: var(--color-primary);
  color: white;
}

.admin-layout .btn:hover {
  background: var(--color-primary-hover);
  color: white;
}

.admin-layout .btn-primary {
  background: var(--color-primary);
  color: white;
}

.admin-layout .btn-primary:hover {
  background: var(--color-primary-hover);
  color: white;
}

.admin-layout .btn-view {
  background: var(--color-primary);
  color: white;
  border: 1px solid var(--color-primary);
}

.admin-layout .btn-view:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: white;
}

.admin-layout .btn-secondary {
  background: var(--color-gray-600);
  color: white;
}

.admin-layout .btn-secondary:hover {
  background: var(--color-gray-700);
  color: white;
}

.admin-layout .btn-danger {
  background: #7f1d1d;
  color: white;
}

.admin-layout .btn-danger:hover {
  background: #991b1b;
  color: white;
}

/* Active filter links in filter-bar keep white text */
.admin-layout .filter-bar a.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* Other active links use primary color */
.admin-layout .filter-link.active {
  color: var(--color-primary);
}

/* Links */
.admin-layout a {
  color: var(--color-primary);
}

.admin-layout a:hover {
  color: var(--color-primary-hover);
}

/* Back links */
.admin-layout .back-link {
  color: var(--color-primary);
}

.admin-layout .back-link:hover {
  color: var(--color-primary-hover);
}

/* Form focus states */
.admin-layout .form-input:focus,
.admin-layout .form-select:focus,
.admin-layout .form-textarea:focus {
  border-color: var(--color-primary);
}

.admin-layout .form-check-input:checked {
  accent-color: var(--color-primary);
}

/* Badge primary */
.admin-layout .badge-primary {
  background: var(--color-primary);
}

/* Cooldown Settings Inline Form */
.cooldown-setting {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--color-gray-100);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cooldown-setting .inline-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cooldown-setting label {
  font-size: 0.875rem;
  color: var(--color-gray-700);
  white-space: nowrap;
}

.cooldown-setting .cooldown-input {
  width: 60px;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  text-align: center;
  border: 1px solid var(--color-gray-300);
  border-radius: 4px;
}

.cooldown-setting .btn {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

/* ==================================================================
   Settings Page Styles
   ================================================================== */

/* Settings Category */
.settings-category {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
  overflow: hidden;
}

.category-header {
  background: var(--color-gray-100);
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-700);
  text-transform: capitalize;
  border-bottom: 1px solid var(--color-border);
}

.settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

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

.setting-info {
  flex: 1;
}

.setting-key {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-xs);
}

.setting-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-lighter);
  margin-bottom: var(--spacing-sm);
}

.setting-value {
  font-family: monospace;
  font-size: var(--font-size-sm);
  background: var(--color-gray-100);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  color: var(--color-gray-700);
}

.setting-value span {
  color: var(--color-text-lighter);
  font-family: inherit;
}

.setting-actions {
  margin-left: var(--spacing-lg);
}

/* Purge Status Card */
.purge-status-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.purge-status-card h2 {
  font-size: var(--font-size-xl);
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--color-gray-800);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--spacing-md);
}

.purge-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

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

.purge-stat .label {
  font-size: var(--font-size-sm);
  color: var(--color-text-lighter);
  margin-bottom: var(--spacing-xs);
}

.purge-stat .value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-800);
}

.purge-stat .value.warning {
  color: var(--color-warning);
}

.purge-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.purge-actions .btn-danger {
  background: var(--color-danger);
}

.purge-actions .btn-danger:hover {
  background: #b91c1c;
}

.purge-warning {
  font-size: var(--font-size-sm);
  color: var(--color-text-lighter);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--spacing-3xl);
  color: var(--color-text-lighter);
}

/* Info Box (settings edit page) */
.admin-layout .info-box {
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.admin-layout .info-box-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
  margin-bottom: var(--spacing-sm);
}

.admin-layout .info-box-content {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.admin-layout .info-box-content ul {
  margin: var(--spacing-sm) 0 0 var(--spacing-lg);
  padding: 0;
}

.admin-layout .info-box-content li {
  margin-bottom: var(--spacing-xs);
}

.admin-layout .info-box-content code {
  background: var(--color-gray-200);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

/* ==================================================================
   Dashboard Section Cards
   ================================================================== */

.section-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-3xl);
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) var(--spacing-xl);
  background: var(--color-gray-100);
  border-bottom: 2px solid var(--color-border);
  margin: 0;
}

.section-header h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  color: var(--color-gray-800);
}

/* "View All" button in section header - outline style for contrast */
.section-header .btn {
  background: var(--color-bg-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.section-header .btn:hover {
  background: var(--color-primary);
  color: white;
}

.section-body {
  padding: 0;
}

/* Padded variant for non-table content (credentials, forms, etc.) */
.section-body-padded {
  padding: var(--spacing-lg) var(--spacing-xl);
}

/* --- Credential Display (dark code blocks) --- */

.credential-field {
  margin-bottom: var(--spacing-xl);
}

.credential-field-last {
  margin-bottom: 0;
}

.credential-field label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.credential-field .code-block {
  margin-bottom: 0;
}

/* Constrain form inputs inside padded section bodies */
.section-body-padded .form-control {
  max-width: 400px;
}

/* Narrower variant for confirmation inputs */
.regenerate-confirm-input {
  max-width: 300px;
}

/* Inline action buttons in table cells (button_to generates a <form>, which is block-level) */
.table-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.table-actions form {
  margin: 0;
}

/* Tables in section-body - remove top margin gap */
.section-body table {
  margin: 0;
  width: 100%;
}

/* Table header row gets distinct background */
.section-body table thead th {
  background: var(--color-gray-50);
  padding: var(--spacing-md) var(--spacing-xl);
  border-bottom: 2px solid var(--color-border);
}

/* Table body cells */
.section-body table td {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

/* Remove bottom border from last table row */
.section-body table tbody tr:last-child td {
  border-bottom: none;
}

.section-body .empty-message {
  color: var(--color-text-lighter);
  text-align: center;
  padding: var(--spacing-xl);
  margin: 0;
}

/* Detail grid inside section-body - single row layout */
.section-body .detail-grid {
  margin-bottom: 0;
  padding: var(--spacing-xl);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* Smaller detail cards when in section-body */
.section-body .detail-card {
  padding: var(--spacing-lg);
}

.section-body .detail-card h3 {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

.section-body .detail-card .value {
  font-size: var(--font-size-3xl);
}

/* Cooldown form spacing */
.section-body .cooldown-setting {
  margin: 0;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}

/* Stat card links (clickable stat cards) */
.stat-card-link {
  text-decoration: none;
  display: block;
}

.stat-card-link:hover .stat-card {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Admin stat cards use admin color gradient */
.admin-layout .stat-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
}

.admin-layout .stat-card.alt {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-gradient-end) 100%);
}

/* Stats grid - ensure even wrapping */
.admin-layout .stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

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

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

/* Prevent date/time wrapping */
.nowrap {
  white-space: nowrap;
}