/* ==========================================================================
   PUPPY FRUTIGER AERO THEME - STYLE.CSS
   ========================================================================== */

/* ==========================================================================
   CUSTOM PUPPY THEME SCROLLBAR
   ========================================================================== */

/* Webkit Browsers (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
  background-color: #e6f2ff;
}

::-webkit-scrollbar-track {
  background: #e6f2ff;
  border-left: 2px solid #b3d9ff;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffd1dc 0%, #ffb6c1 100%);
  border: 2px solid #ffffff;
  border-radius: 10px;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.8);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffb6c1 0%, #ff8da1 100%);
}

::-webkit-scrollbar-thumb:active {
  background: #d85a7f;
}

/* Firefox Support */
* {
  scrollbar-width: thin;
  scrollbar-color: #ffb6c1 #e6f2ff;
}

/* ==========================================================================
   REST OF YOUR CSS STARTS BELOW
   ========================================================================== */

/* --- 1. Global Page Setup & Background --- */
body {
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Fredoka', cursive, sans-serif;
  background-color: #e6f2ff; /* Soft Baby Blue Background */
  background-image: radial-gradient(#ffc0cb 15%, transparent 16%); /* Soft Pink Polka Dots */
  background-size: 24px 24px;
  color: #4a4a4a;
  padding: 20px;
  margin: 0;
}

/* Base Link Styling */
a {
  color: #ff8da1;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* --- 2. Main Outer Container --- */
.gallery-container {
  max-width: 850px;
  margin: 0 auto;
  background: #ffffff;
  border: 4px solid #b3d9ff; /* Soft Blue Border */
  border-radius: 20px;
  padding: 20px;
  box-shadow: 6px 6px 0px #ffb6c1; /* Soft Pink Shadow */
}

.gallery-container h2 {
  color: #ff8da1;
  text-align: center;
  margin-top: 0;
  font-size: 1.8rem;
}

/* --- 3. Frutiger Aero Glossy Hero Banner --- */
.hero-banner {
  background: linear-gradient(180deg, #ffffff 0%, #ffd1dc 40%, #ffb6c1 100%);
  border: 3px solid #b3d9ff;
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(179, 217, 255, 0.5), inset 0 2px 4px #ffffff;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

/* Glassy Shine Overlay Effect */
.hero-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 17px 17px 0 0;
  pointer-events: none;
}

.hero-banner h1 {
  color: #d85a7f;
  margin: 0 0 8px 0;
  font-size: 2.2rem;
  text-shadow: 2px 2px 0px #ffffff;
}

.hero-banner p {
  color: #4a7bb0;
  margin: 0;
  font-weight: bold;
}

/* --- 4. Two-Column Layout (Sidebar + Main Content) --- */
.home-layout {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.sidebar {
  flex: 1;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.main-content {
  flex: 2;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* --- 5. Aero Glass Widget Boxes --- */
.aero-box {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  border: 3px solid #b3d9ff;
  border-radius: 16px;
  padding: 15px;
  box-shadow: 4px 4px 0px #ffb6c1, inset 0 1px 3px #ffffff;
}

.aero-box h3 {
  margin-top: 0;
  color: #ff8da1;
  border-bottom: 2px dashed #b3d9ff;
  padding-bottom: 6px;
  font-size: 1.1rem;
}

/* --- 6. Quick Navigation Button Grid --- */
.nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.aero-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(180deg, #e6f2ff 0%, #b3d9ff 100%);
  color: #3b6694;
  font-weight: bold;
  padding: 10px;
  border-radius: 12px;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.aero-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ffb6c1 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(255, 182, 193, 0.5);
  text-decoration: none;
}

/* --- 7. Gallery Tabs & Folder Views --- */
.tab-buttons {
  display: flex;
  gap: 10px;
  border-bottom: 3px dashed #b3d9ff;
  padding-bottom: 12px;
  margin-bottom: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Puppy Ear / Paw Tab Buttons */
.tab-btn {
  background: #e6f2ff; /* Baby Blue */
  color: #4a7bb0;
  border: 3px solid #b3d9ff;
  border-radius: 25px 25px 10px 10px;
  padding: 10px 18px;
  cursor: pointer;
  font-weight: bold;
  font-family: inherit;
  font-size: 0.95rem;
  transition: all 0.2s ease-in-out;
}

.tab-btn:hover {
  background: #ffd1dc; /* Soft Pink Hover */
  color: #d85a7f;
  border-color: #ffb6c1;
  transform: translateY(-2px);
}

.tab-btn.active {
  background: #ffb6c1; /* Baby Pink Active */
  color: #ffffff;
  border-color: #ff8da1;
  box-shadow: 3px 3px 0px #b3d9ff;
  transform: translateY(-2px);
}

/* Gallery Grid Layout */
.gallery-folder {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 15px;
}

.gallery-folder.active {
  display: grid;
}

/* Individual Image Item Cards */
.gallery-item {
  border: 3px solid #b3d9ff;
  border-radius: 15px;
  padding: 8px;
  background: #fff5f7; /* Soft Pink Tint */
  text-align: center;
  transition: transform 0.2s;
}

.gallery-item:hover {
  transform: scale(1.03);
  border-color: #ffb6c1;
}

.gallery-item img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #ffffff;
}

.gallery-item p {
  margin: 8px 0 2px 0;
  font-size: 0.9rem;
  font-weight: bold;
  color: #5a7da0;
}

/* --- 8. Commission Badges & Widgets --- */
.comm-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 2px solid #ffb6c1;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 0.9rem;
}

.status-badge.open {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.8rem;
}

.status-badge.closed {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.8rem;
}

/* Status Pill Box */
.status-badge {
  background: #e6f2ff;
  border: 2px solid #b3d9ff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: #4a7bb0;
}

/* --- 9. Journal & News Logs --- */
.journal-preview {
  background: #ffffff;
  border: 2px dashed #b3d9ff;
  border-radius: 12px;
  padding: 12px;
  margin-top: 8px;
}

.journal-title {
  font-weight: bold;
  color: #d85a7f;
  margin-bottom: 4px;
}

.journal-date {
  font-size: 0.75rem;
  color: #7a9bbd;
  margin-bottom: 8px;
}

.journal-text {
  font-size: 0.85rem;
  line-height: 1.4;
  color: #4a4a4a;
}

.update-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}

.update-list li {
  padding: 6px 0;
  border-bottom: 1px dotted #ffd1dc;
}

.update-list span {
  font-weight: bold;
  color: #ff8da1;
}