/*
 * JOAT Tools - 1975 Hardware Store Theme
 * "Starsky and Hutch meets old school hardware store"
 */

/* Import 70s-inspired fonts */
@import url('https://fonts.googleapis.com/css2?family=Cooper+Hewitt:wght@400;600;700&family=Alfa+Slab+One&family=Source+Code+Pro:wght@400;500&display=swap');

/* Color Palette - 1975 Hardware Store */
:root {
  /* Base colors - warm hardware store walls */
  --bs-body-bg: #faf7f0;
  --bs-body-color: #2d2a24;
  --bs-secondary-bg: #f5f2eb;

  /* Accent colors - vibrant 70s pops */
  --joat-orange: #e85a2b;
  --joat-brown: #8b4513;
  --joat-mustard: #d4af37;
  --joat-avocado: #6b7c32;
  --joat-cream: #faf7f0;
  --joat-charcoal: #2d2a24;

  /* Hardware store inspired colors */
  --joat-pegboard: #e8dcc0;
  --joat-metal: #6c757d;
  --joat-rust: #b85450;

  /* Bootstrap overrides */
  --bs-primary: #e85a2b;
  --bs-secondary: #8b4513;
  --bs-success: #6b7c32;
  --bs-warning: #d4af37;
  --bs-info: #17a2b8;
  --bs-danger: #b85450;

  /* Typography */
  --joat-font-brand: 'Alfa Slab One', serif;
  --joat-font-headers: 'Cooper Hewitt', sans-serif;
  --joat-font-body: 'Cooper Hewitt', sans-serif;
  --joat-font-code: 'Source Code Pro', monospace;
}

/* Base typography */
body {
  font-family: var(--joat-font-body);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Brand styling - vintage hardware store logo */
.navbar-brand h4 {
  font-family: var(--joat-font-brand);
  color: var(--joat-orange) !important;
  text-shadow: 2px 2px 0px var(--joat-brown);
  letter-spacing: -1px;
}

.navbar-brand small {
  font-family: var(--joat-font-headers);
  font-weight: 600;
  color: var(--joat-brown) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.7rem !important;
}

/* Hardware store checkout counter navbar */
.navbar {
  background: linear-gradient(180deg, #f5f2eb 0%, #ebe5d6 100%) !important;
  border-bottom: 3px solid var(--joat-brown) !important;
  box-shadow: inset 0 -2px 4px rgba(139, 69, 19, 0.1);
}

/* Subtle pegboard pattern */
.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 10px 10px, rgba(139, 69, 19, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* Hardware store chunky buttons */
.btn {
  font-family: var(--joat-font-headers);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px;
  border-width: 2px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.2);
  transition: all 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0,0,0,0.2);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.btn-primary {
  background: linear-gradient(145deg, var(--joat-orange), #d14d20);
  border-color: var(--joat-brown);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(145deg, #f06635, var(--joat-orange));
  border-color: var(--joat-brown);
}

.btn-outline-primary {
  border-color: var(--joat-orange);
  color: var(--joat-orange);
}

.btn-outline-secondary {
  border-color: var(--joat-brown);
  color: var(--joat-brown);
}

/* Price tag styling for badges */
.badge,
.tool-badge {
  font-family: var(--joat-font-headers);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-radius: 4px;
  position: relative;
}

.badge-popular,
.tool-badge.badge-popular {
  background: linear-gradient(135deg, var(--joat-orange), #d14d20) !important;
  color: white !important;
}

.badge-new,
.tool-badge.badge-new {
  background: linear-gradient(135deg, var(--joat-avocado), #5a6629) !important;
  color: white !important;
}

.badge-beta,
.tool-badge.badge-beta {
  background: linear-gradient(135deg, var(--joat-mustard), #c19b2b) !important;
  color: var(--joat-charcoal) !important;
}

/* Tool bin label styling for category tabs */
.category-tabs {
  background: linear-gradient(180deg, var(--joat-pegboard), #ddd1b8) !important;
  border-bottom: 2px solid var(--joat-brown) !important;
}

.nav-tabs .nav-link {
  font-family: var(--joat-font-headers);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px 8px 0 0;
  margin-right: 2px;
  background: rgba(139, 69, 19, 0.1);
  border: 2px solid transparent;
  color: var(--joat-brown);
}

.nav-tabs .nav-link:hover {
  background: rgba(232, 90, 43, 0.1);
  border-color: var(--joat-orange);
  color: var(--joat-orange);
}

.nav-tabs .nav-link.active {
  background: var(--bs-body-bg);
  border-color: var(--joat-brown) var(--joat-brown) var(--bs-body-bg);
  color: var(--joat-orange);
  font-weight: 700;
}

/* Category count labels like old price stickers */
.category-count {
  background: var(--joat-mustard) !important;
  color: var(--joat-charcoal) !important;
  font-family: var(--joat-font-code);
  font-weight: 500;
  font-size: 0.65rem !important;
  padding: 0.15rem 0.4rem !important;
  border-radius: 3px !important;
  margin-left: 0.5rem !important;
}

/* Tool list styling - hardware catalog feel */
.tool-list .tool-item {
  border-bottom: 1px solid rgba(139, 69, 19, 0.1) !important;
  transition: all 0.2s ease;
}

.tool-list .tool-item:hover {
  background: rgba(232, 90, 43, 0.05) !important;
  border-left: 4px solid var(--joat-orange) !important;
}

.tool-list .tool-item.active {
  background: rgba(232, 90, 43, 0.1) !important;
  border-left: 4px solid var(--joat-orange) !important;
}

.tool-name {
  font-family: var(--joat-font-headers);
  font-weight: 600;
  color: var(--joat-charcoal);
}

.tool-description {
  font-family: var(--joat-font-body);
  color: #6c5c47;
}

.usage-count {
  font-family: var(--joat-font-code);
  color: var(--joat-brown);
  font-weight: 500;
}

/* Cash register receipt styling for code blocks */
pre,
code {
  font-family: var(--joat-font-code);
  background: #f8f5f0 !important;
  border: 1px solid rgba(139, 69, 19, 0.2) !important;
  border-radius: 4px;
}

pre {
  background: linear-gradient(180deg, #f8f5f0, #f2ede4) !important;
  border-left: 4px solid var(--joat-orange) !important;
}

/* Cards with hardware store shelf styling */
.card {
  background: var(--bs-body-bg);
  border: 1px solid rgba(139, 69, 19, 0.2);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(139, 69, 19, 0.1);
}

.card-header {
  background: linear-gradient(180deg, var(--joat-pegboard), #e0d3b7);
  border-bottom: 1px solid rgba(139, 69, 19, 0.2);
  font-family: var(--joat-font-headers);
  font-weight: 600;
  color: var(--joat-brown);
}

/* Forms with vintage hardware store feel */
.form-control {
  border-color: rgba(139, 69, 19, 0.3);
  border-radius: 6px;
  background: #fefcf7;
}

.form-control:focus {
  border-color: var(--joat-orange);
  box-shadow: 0 0 0 0.2rem rgba(232, 90, 43, 0.25);
}

.input-group-text {
  background: var(--joat-pegboard);
  border-color: rgba(139, 69, 19, 0.3);
  color: var(--joat-brown);
}

/* Search styling like old cash register */
.input-group .form-control {
  border-right: none;
  border-color: rgba(139, 69, 19, 0.4);
  background: #fefcf7;
}

.input-group .form-control:focus {
  border-color: var(--joat-orange);
  box-shadow: none;
  background: white;
}

.input-group .btn {
  border-left: none;
  border-color: rgba(139, 69, 19, 0.4);
}

/* Special styling for navbar search */
.navbar .input-group .form-control {
  border: 2px solid rgba(139, 69, 19, 0.3);
  border-right: none;
  background: rgba(254, 252, 247, 0.9);
  border-radius: 8px 0 0 8px;
}

.navbar .input-group .input-group-text {
  border: 2px solid rgba(139, 69, 19, 0.3);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: var(--joat-pegboard);
}

.navbar .input-group .btn {
  border: 2px solid rgba(139, 69, 19, 0.3);
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: var(--joat-pegboard);
  color: var(--joat-brown);
}

.navbar .input-group .btn:hover {
  background: rgba(232, 90, 43, 0.1);
  border-color: var(--joat-orange);
  color: var(--joat-orange);
}

/* Dropdown menus like hanging price tags */
.dropdown-menu {
  background: var(--bs-body-bg);
  border: 2px solid var(--joat-brown);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(139, 69, 19, 0.2);
}

.dropdown-item {
  font-family: var(--joat-font-headers);
  color: var(--joat-charcoal);
}

.dropdown-item:hover {
  background: rgba(232, 90, 43, 0.1);
  color: var(--joat-orange);
}

/* Hero section with vintage charm */
.display-4 {
  font-family: var(--joat-font-brand);
  color: var(--joat-orange);
  text-shadow: 3px 3px 0px var(--joat-brown);
  letter-spacing: -2px;
}

/* Value prop icons with hardware store feel */
.rounded-circle {
  box-shadow: 0 3px 6px rgba(139, 69, 19, 0.2);
}

/* Offcanvas mobile search like old store catalog */
.offcanvas {
  background: var(--bs-body-bg);
  border: 2px solid var(--joat-brown);
}

.offcanvas-header {
  background: var(--joat-pegboard);
  border-bottom: 1px solid rgba(139, 69, 19, 0.2);
}

.offcanvas-title {
  font-family: var(--joat-font-headers);
  font-weight: 600;
  color: var(--joat-brown);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .navbar-brand h4 {
    font-size: 1.5rem;
  }

  .display-4 {
    font-size: 2rem;
  }

  .tool-grid {
    background: var(--bs-body-bg);
  }
}

/* Subtle texture overlay for depth */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 25% 25%, rgba(139, 69, 19, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(232, 90, 43, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Tool icons with subtle hardware catalog styling */
.tool-icon {
  box-shadow: 0 2px 4px rgba(139, 69, 19, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* List group items like inventory cards */
.list-group-item {
  background: var(--bs-body-bg);
  border-color: rgba(139, 69, 19, 0.2);
}

.list-group-item:hover {
  background: rgba(232, 90, 43, 0.05);
}

/* Alert styling like old store notices */
.alert {
  border-radius: 8px;
  border-width: 2px;
  font-family: var(--joat-font-headers);
}

.alert-success {
  background: rgba(107, 124, 50, 0.1);
  border-color: var(--joat-avocado);
  color: #4a5523;
}

.alert-warning {
  background: rgba(212, 175, 55, 0.1);
  border-color: var(--joat-mustard);
  color: #a08429;
}

.alert-danger {
  background: rgba(184, 84, 80, 0.1);
  border-color: var(--joat-rust);
  color: #8b4440;
}