/* ==========================================================================
   TENTANG GAPKINDO PAGE STYLES
   
   TABLE OF CONTENTS:
   
   1. Base Styles .............................. Line 25
   2. Sidebar Styling (AdminLTE) ............... Line 45
   3. Animations ............................... Line 190
   4. DateTime Container (Reusable) ............ Line 225
   5. Content Card Styling (Reusable) .......... Line 285
   6. Small Box Styling (Reusable) ............. Line 305
   7. Timeline Modern Styling .................. Line 355
   8. Image Containers ......................... Line 425
   9. Info Box Styling (Reusable) .............. Line 450
   10. Pengurus Card ........................... Line 510
   11. Responsive Styles ....................... Line 525
   
   USAGE:
   - ✅ REUSABLE: Can be used in other AdminLTE pages
   - ⚠️ DEPENDS ON: AdminLTE 3.2, Bootstrap 5
   
   File Size: ~600 lines
   Created: 2025-01-XX
   Last Updated: 2025-01-XX
   ========================================================================== */


/* ==========================================================================
   1. BASE STYLES
   
   PURPOSE: Global reset and base element styling
   USED IN: All pages
   REUSABLE: YES ✅
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
}


/* ==========================================================================
   2. SIDEBAR STYLING (AdminLTE)
   
   PURPOSE: Custom styling for AdminLTE sidebar component
   USED IN: All AdminLTE pages with sidebar
   REUSABLE: YES ✅✅
   DEPENDENCIES: AdminLTE 3.2 framework
   
   COMPONENTS:
   - Main sidebar container with gradient
   - Brand link (logo and text)
   - Search form
   - Navigation links with active states
   ========================================================================== */

/* Sidebar Container - Gradient Background */
.main-sidebar {
  background: linear-gradient(180deg, #230146ff 0%, #042de7ff 100%);
}

/* Brand Link - Logo Area */
.main-sidebar .brand-link {
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  padding: 0.8rem 0.8rem !important;
  min-height: 60px !important;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-sidebar .brand-link:hover {
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none !important;
}

.main-sidebar .brand-link img,
.main-sidebar .brand-link .brand-image {
  width: 35px !important;
  height: auto !important;
  max-width: 35px !important;
  max-height: none !important;
  object-fit: contain !important;
  margin-left: 0.2rem !important;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.main-sidebar .brand-link:hover img,
.main-sidebar .brand-link:hover .brand-image {
  opacity: 1;
  transform: scale(1.05);
}

.main-sidebar .brand-link .brand-text {
  margin-left: 0.5rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-weight: 300 !important;
  font-size: 1.05rem !important;
  transition: all 0.3s ease;
}

.main-sidebar .brand-link:hover .brand-text {
  color: white !important;
}

/* Sidebar Search Form */
.sidebar .form-control-sidebar {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  transition: all 0.3s ease;
}

.sidebar .form-control-sidebar:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.sidebar .form-control-sidebar::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-style: normal !important;
}

.sidebar .btn-sidebar {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.sidebar .btn-sidebar:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Sidebar Navigation Links */
.sidebar .nav-link {
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.sidebar .nav-link:hover {
  background: rgba(102, 126, 234, 0.15);
  color: white;
}

/* Active Navigation Link - Green Gradient with Glow Effect */
.sidebar .nav-link.active {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  color: white !important;
  font-weight: 700;
  border-left: 5px solid #2f855a;
  box-shadow: inset 0 0 20px rgba(72, 187, 120, 0.3);
  animation: glow-active 2s ease-in-out infinite;
  position: relative;
}

.sidebar .nav-link.active .nav-icon {
  color: white !important;
  transform: scale(1.15);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.sidebar .nav-link.active p {
  color: white !important;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.sidebar .nav-link.active::after {
  content: '●';
  position: absolute;
  right: 15px;
  font-size: 20px;
  color: white;
  animation: pulse-dot 1.5s ease-in-out infinite;
}


/* ==========================================================================
   3. ANIMATIONS
   
   PURPOSE: Reusable keyframe animations
   USED IN: Sidebar active states, badges, etc.
   REUSABLE: YES ✅
   ========================================================================== */

/* Glow effect for active sidebar item */
@keyframes glow-active {
  0%,
  100% {
    box-shadow: inset 0 0 20px rgba(72, 187, 120, 0.3);
  }
  50% {
    box-shadow: inset 0 0 30px rgba(72, 187, 120, 0.5);
  }
}

/* Pulsing dot animation */
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.3);
  }
}


/* ==========================================================================
   4. DATETIME CONTAINER
   
   PURPOSE: Date display with scrolling news ticker
   USED IN: tentang_gapkindo.php, potentially other pages
   REUSABLE: YES ✅✅
   DEPENDENCIES: None
   
   NOTE: Similar to index.php datetime, but with gradient styling
   ========================================================================== */

.datetime-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 0px;
  padding: 15px 25px;
  color: white;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
  margin: -2px 0 0 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}

.date-display {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.running-text-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 250px;
  max-width: 100%;
}

.running-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-text 25s linear infinite;
  font-weight: 500;
}

@keyframes scroll-text {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}


/* ==========================================================================
   5. CONTENT CARD STYLING
   
   PURPOSE: Generic card styling with hover effects
   USED IN: All content sections (timeline, histori, pengurus)
   REUSABLE: YES ✅✅✅
   ========================================================================== */

.content-card {
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.content-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}


/* ==========================================================================
   6. SMALL BOX STYLING
   
   PURPOSE: Info boxes for dashboard statistics
   USED IN: Default welcome page, potentially dashboard pages
   REUSABLE: YES ✅✅
   DEPENDENCIES: AdminLTE small-box component
   ========================================================================== */

.small-box {
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  overflow: hidden;
}

.small-box:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

.small-box .icon {
  font-size: 70px;
  opacity: 0.3;
  transition: all 0.3s ease;
}

.small-box:hover .icon {
  opacity: 0.5;
  transform: scale(1.1) rotate(10deg);
}

.small-box .inner h3 {
  font-size: 2rem;
  font-weight: 700;
}

.small-box-footer {
  transition: all 0.3s ease;
}

.small-box:hover .small-box-footer {
  background: rgba(0, 0, 0, 0.2) !important;
}


/* ==========================================================================
   7. TIMELINE MODERN STYLING
   
   PURPOSE: Vertical timeline for displaying chronological events
   USED IN: Timeline section (showTimeline function)
   REUSABLE: MAYBE ⚠️
   
   COMPONENTS:
   - .timeline-modern: Container
   - .timeline-line: Vertical connecting line
   - .timeline-item: Individual event item
   - .timeline-marker: Year/date marker dot
   - .timeline-content: Event content card
   ========================================================================== */

.timeline-modern {
  position: relative;
  padding: 20px 0;
}

.timeline-line {
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #007bff, #6f42c1);
  border-radius: 2px;
}

.timeline-item {
  display: flex;
  margin-bottom: 30px;
  position: relative;
}

.timeline-marker {
  position: absolute;
  left: 18px;
  width: 24px;
  height: 24px;
  background: #007bff;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
  z-index: 10;
}

.timeline-content {
  margin-left: 60px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #007bff;
}

.timeline-year {
  background: linear-gradient(135deg, #007bff, #6f42c1);
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
}

.timeline-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.timeline-desc {
  color: #6c757d;
  line-height: 1.6;
}


/* ==========================================================================
   8. IMAGE CONTAINERS
   
   PURPOSE: Image containers with hover zoom effect
   USED IN: Histori and Pengurus sections
   REUSABLE: YES ✅
   ========================================================================== */

.card-img-container {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.card-img-container img {
  transition: transform 0.3s ease;
  width: 100%;
  height: auto;
}

.card-img-container:hover img {
  transform: scale(1.05);
}

.card-body .mb-4 img {
  width: 100px !important;
  height: auto !important;
  max-width: 100%;
}


/* ==========================================================================
   9. INFO BOX STYLING
   
   PURPOSE: Information boxes with icon and content
   USED IN: Pengurus section (MUSCAB info)
   REUSABLE: YES ✅✅
   DEPENDENCIES: AdminLTE info-box component
   ========================================================================== */

.info-box {
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  min-height: 80px;
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.info-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.info-box-icon {
  border-radius: 10px 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  font-size: 2rem;
  transition: all 0.3s ease;
}

.info-box:hover .info-box-icon {
  transform: scale(1.1);
}

.info-box-content {
  padding: 10px;
  flex: 1;
}

.info-box-text {
  display: block;
  font-size: 0.9rem;
  color: #6c757d;
  font-weight: 500;
}

.info-box-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #2c3e50;
}


/* ==========================================================================
   10. PENGURUS CARD
   
   PURPOSE: Special styling for Pengurus header card
   USED IN: Pengurus section only
   REUSABLE: NO ❌
   ========================================================================== */

.pengurus-card {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  border-radius: 10px 10px 0 0;
}

/* ==========================================================================
   10.5 LIST ALIGNMENT & INDENTATION FIX
   
   PURPOSE: Ensure lists align properly with proper indentation
   USED IN: Histori section (PENDIRIAN, TUJUAN, LINGKUP KEGIATAN)
   REUSABLE: YES ✅
   ========================================================================== */

/* Ordered Lists (PENDIRIAN) - Rata Kiri Sempurna */
.card-body ol {
    list-style-type: lower-alpha;
    margin: 0;
    padding-left: 20px;
    margin-bottom: 1rem;
}

.card-body ol li {
    padding-left: 5px;
    margin-bottom: 8px;
    line-height: 1.8;
}

/* Unordered Lists (regular) */
.card-body ul:not(.list-group) {
    list-style-type: disc;
    margin: 0;
    padding-left: 20px;
    margin-bottom: 1rem;
}

.card-body ul:not(.list-group) li {
    padding-left: 5px;
    margin-bottom: 8px;
    line-height: 1.8;
}

/* List Group (LINGKUP KEGIATAN) - No Indent */
.card-body .list-group {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

.card-body .list-group-item {
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(0,0,0,.125);
    padding: 12px 0;
    line-height: 1.8;
}

.card-body .list-group-item:first-child {
    border-top: none;
}

.card-body .list-group-item i {
    display: inline-block;
    width: 20px;
    margin-right: 10px;
    text-align: center;
}

/* Heading Spacing */
.card-body h5.card-title {
    margin-bottom: 15px;
    margin-top: 0;
    font-weight: 600;
}

/* Paragraph - NO INDENT */
.card-body p,
.card-body p.card-text {
    line-height: 1.8;
    margin: 0 0 1rem 0;
    padding: 0;
}

/* HR Separator */
.card-body hr.my-4 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border: 0;
    border-top: 2px solid #e9ecef;
}


/* ==========================================================================
   11. RESPONSIVE STYLES
   
   PURPOSE: Mobile and tablet optimizations
   USED IN: All components above
   ========================================================================== */

/* Responsive: Tablet & Small Desktop (≤991.98px) */
@media (max-width: 991.98px) {
  /* Timeline responsive adjustments */
  .timeline-line {
    left: 15px;
  }

  .timeline-marker {
    left: 3px;
  }

  .timeline-content {
    margin-left: 40px;
  }

  /* Sidebar brand responsive */
  .main-sidebar .brand-link {
    padding: 1rem 0.6rem !important;
    min-height: 70px !important;
  }

  .main-sidebar .brand-link img,
  .main-sidebar .brand-link .brand-image {
    width: 40px !important;
    max-width: 40px !important;
  }

  .main-sidebar .brand-link .brand-text {
    font-size: 1rem !important;
  }
}

/* Responsive: Mobile (≤575.98px) */
@media (max-width: 575.98px) {
  /* Welcome logo size reduction */
  .card-body .mb-4 img {
    width: 80px !important;
  }

  /* DateTime Container Mobile Layout */
  .datetime-container {
    flex-direction: column;
    text-align: center;
    padding: 15px;
    gap: 10px;
  }

  .date-display {
    font-size: 1rem;
    justify-content: center;
    width: 100%;
  }

  .running-text-container {
    width: 100%;
    min-width: 100%;
  }

  .running-text {
    font-size: 0.9rem;
  }
}

/* Responsive: Extra Small Mobile (≤400px) */
@media (max-width: 400px) {
  .datetime-container {
    padding: 10px 8px;
  }

  .date-display {
    font-size: 0.85rem;
    gap: 6px;
  }

  .running-text {
    font-size: 0.8rem;
  }
}


/* ==========================================================================
   END OF STYLESHEET
   
   MAINTENANCE NOTES:
   - Keep AdminLTE version synchronized (currently 3.2)
   - Test sidebar navigation on mobile devices
   - Timeline colors can be customized per event
   - DateTime container reusable across pages
   
   DEPENDENCIES:
   - AdminLTE 3.2
   - Bootstrap 5.1.3
   - Font Awesome 5.15.4
   - Google Fonts (Inter)
   
   PERFORMANCE:
   - Animations use GPU-accelerated properties (transform, opacity)
   - Minimal use of box-shadow for better mobile performance
   - Image hover effects optimized with transform
   ========================================================================== */