/* ==========================================================================
   PERATURAN (REGULATIONS PORTAL) PAGE STYLES (AdminLTE Template)
   
   TABLE OF CONTENTS:
   
   1. Base Styles .................................. Line 35
   2. Sidebar Styling (AdminLTE) ................... Line 50
   3. DateTime Container ........................... Line 85
   4. Animations ................................... Line 140
   5. Welcome Info Container ....................... Line 165
   6. Small Info Boxes ............................. Line 200
   7. Table Container .............................. Line 270
   8. Table Header ................................. Line 295
   9. Modern Table Design .......................... Line 320
   10. Status Badges ............................... Line 395
   11. Action Buttons .............................. Line 430
   12. Mobile Card View ............................ Line 465
   13. Card Header Mobile .......................... Line 515
   14. Card Body Mobile ............................ Line 605
   15. Info Rows ................................... Line 645
   16. Action Buttons Mobile ....................... Line 690
   17. Responsive: Mobile (≤768px) ................. Line 735
   
   USAGE:
   - ✅ REUSABLE: DateTime, Table design, Status badges
   - ⚠️ SEMI-REUSABLE: Welcome screen, Info boxes
   - ❌ PAGE SPECIFIC: Kategori navigation, Mobile cards
   
   DEPENDENCIES:
   - Bootstrap 5.x
   - Font Awesome 5.x
   - AdminLTE 3.2
   - DataTables (Bootstrap 4 style)
   - Google Fonts (Lato)
   - SweetAlert2
   - jQuery 3.6.0
   
   File Size: ~800 lines
   Created: 2025-01-XX
   Last Updated: 2025-01-XX
   ========================================================================== */


/* ==========================================================================
   1. BASE STYLES
   
   PURPOSE: Global reset and font
   USED IN: All elements
   REUSABLE: YES ✅
   ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  overflow-x: hidden;
}


/* ==========================================================================
   2. SIDEBAR STYLING (AdminLTE)
   
   PURPOSE: Custom styling for AdminLTE sidebar navigation
   USED IN: Left navigation menu (kategori selection)
   REUSABLE: YES ✅ (for other AdminLTE pages)
   
   FEATURES:
   - Purple/blue gradient background
   - Active state with green gradient + dot indicator
   - Smooth transitions
   ========================================================================== */

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

.sidebar .nav-link.active-kategori {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important;
  border-left: 5px solid #2f855a !important;
  color: white !important;
  font-weight: 700;
  position: relative;
}

.sidebar .nav-link.active-kategori::after {
  content: '●';
  position: absolute;
  right: 15px;
  font-size: 20px;
  color: white;
}


/* ==========================================================================
   3. DATETIME CONTAINER
   
   PURPOSE: Date display with scrolling news ticker
   USED IN: Top of page below navbar
   REUSABLE: YES ✅✅✅
   
   NOTE: Identical across 9+ pages - MUST extract to shared-components.css
   ========================================================================== */

.datetime-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  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;
}

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

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


/* ==========================================================================
   4. ANIMATIONS
   
   PURPOSE: Reusable keyframe animations
   USED IN: Running text
   REUSABLE: YES ✅
   ========================================================================== */

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


/* ==========================================================================
   5. WELCOME INFO CONTAINER
   
   PURPOSE: Welcome screen when no kategori selected
   USED IN: Initial page state
   REUSABLE: YES ✅
   
   FEATURES:
   - Light gray gradient background
   - Title with icon
   - Subtitle
   - Info boxes grid
   ========================================================================== */

.welcome-info-container {
  padding: 20px 15px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.welcome-info-container h1 {
  color: #2c3e50;
  font-weight: 700;
}

.welcome-info-container .subtitle {
  color: #6c757d;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}


/* ==========================================================================
   6. SMALL INFO BOXES
   
   PURPOSE: 3 info boxes in welcome screen
   USED IN: Welcome screen
   REUSABLE: YES ✅✅
   
   FEATURES:
   - Minimum height for consistency
   - Gradient backgrounds (teal, blue, green)
   - Icon overlay
   - Hover lift effect
   
   NOTE: Similar to AdminLTE info boxes / small boxes
   ========================================================================== */

.small-box {
  min-height: 280px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.small-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.small-box .inner {
  padding: 20px;
  position: relative;
  z-index: 2;
}

.small-box h3,
.small-box h4 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.small-box p {
  color: rgba(255, 255, 255, 1);
  line-height: 1.7;
  margin-bottom: 0;
}

.small-box .icon {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}

.small-box .icon i {
  color: rgba(255, 255, 255, 0.3);
  font-size: 70px;
}


/* ==========================================================================
   7. TABLE CONTAINER
   
   PURPOSE: Main container for DataTables
   USED IN: When kategori is selected
   REUSABLE: YES ✅✅
   
   FEATURES:
   - White background
   - Rounded corners
   - Strong box shadow for emphasis
   - Top margin
   ========================================================================== */

.table-container {
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  margin-top: 20px;
}


/* ==========================================================================
   8. TABLE HEADER
   
   PURPOSE: Header section above DataTable
   USED IN: Table container
   REUSABLE: YES ✅
   
   FEATURES:
   - Title with icon
   - Bottom border (purple accent)
   - Spacing
   ========================================================================== */

.table-header {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 3px solid #667eea;
}

.table-header h2 {
  color: #2d3748;
  font-weight: 700;
  margin: 0;
}


/* ==========================================================================
   9. MODERN TABLE DESIGN
   
   PURPOSE: Custom DataTables styling
   USED IN: Desktop table view
   REUSABLE: YES ✅✅✅
   
   FEATURES:
   - Purple gradient header
   - Hover row effects (gradient + slide)
   - Numbered column styling
   - Separate border spacing
   - Smooth transitions
   ========================================================================== */

/* ==========================================================================
   9. MODERN TABLE DESIGN - FIXED FOR DATATABLES
   ========================================================================== */

/* Target DataTable specifically */
table.dataTable.modern-table thead,
#example1 thead,
.modern-table thead {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
}

table.dataTable.modern-table thead th,
#example1 thead th,
.modern-table thead th {
  padding: 18px 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 13px;
  border: none !important;
  text-align: left;
  color: white !important;
  background: transparent !important; /* Remove individual th background */
}

table.dataTable.modern-table thead th:first-child,
#example1 thead th:first-child {
  border-top-left-radius: 8px;
}

table.dataTable.modern-table thead th:last-child,
#example1 thead th:last-child {
  border-top-right-radius: 8px;
}

/* Body rows */
table.dataTable.modern-table tbody tr,
#example1 tbody tr {
  transition: all 0.3s ease;
  border-bottom: 1px solid #e2e8f0;
}

table.dataTable.modern-table tbody tr:hover,
#example1 tbody tr:hover {
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%) !important;
  transform: translateX(5px);
}

table.dataTable.modern-table tbody td,
#example1 tbody td {
  padding: 16px 15px;
  vertical-align: middle;
  color: #4a5568;
  font-size: 14px;
}

.number-col {
  width: 50px;
  text-align: center !important;
  font-weight: 700;
  color: #667eea !important;
}

/* Fix DataTables sorting icons color */
table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* DataTables wrapper styling */
.dataTables_wrapper {
  padding: 20px 0;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: #4a5568;
}

/* Search box styling */
.dataTables_filter input {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  transition: all 0.3s ease;
}

.dataTables_filter input:focus {
  border-color: #667eea;
  outline: none;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Pagination styling */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 8px;
  margin: 0 2px;
  transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
  border-color: transparent;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white !important;
  border-color: transparent;
}


/* ==========================================================================
   10. STATUS BADGES
   
   PURPOSE: Status indicators (BERLAKU / DICABUT)
   USED IN: Table status column
   REUSABLE: YES ✅✅✅
   
   FEATURES:
   - Icon + text
   - Rounded pill shape
   - Gradient backgrounds
   - Green for active, red for revoked
   ========================================================================== */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-berlaku {
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
}

.badge-dicabut {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(245, 101, 101, 0.3);
}


/* ==========================================================================
   11. ACTION BUTTONS
   
   PURPOSE: "Lihat" (View) button in table
   USED IN: Table action column
   REUSABLE: YES ✅
   
   FEATURES:
   - Outlined style (transparent background)
   - Blue border and text
   - Hover fill effect
   - Icon + text
   ========================================================================== */

.btn-view {
  background: transparent;
  border: 2px solid #1E90FF;
  color: #1E90FF;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-view:hover {
  background: #1E90FF;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.3);
}


/* ==========================================================================
   12. MOBILE CARD VIEW
   
   PURPOSE: Alternative card layout for mobile devices
   USED IN: Mobile screens (≤768px)
   REUSABLE: YES ✅✅
   
   FEATURES:
   - Hidden by default (desktop shows table)
   - Expandable cards
   - Card-based layout instead of table
   - Touch-friendly design
   ========================================================================== */

.mobile-card-view {
  display: none;
}

.regulasi-card {
  background: white;
  border-radius: 12px;
  margin-bottom: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.regulasi-card:hover {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}


/* ==========================================================================
   13. CARD HEADER MOBILE
   
   PURPOSE: Expandable header for mobile cards
   USED IN: Mobile card view
   REUSABLE: YES ✅
   
   FEATURES:
   - Purple gradient background
   - Card number badge
   - Truncated title
   - Expand/collapse icon
   - Click to toggle
   ========================================================================== */

.card-header-mobile {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.card-title-mobile {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-number {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  min-width: 30px;
  text-align: center;
}

.expand-icon {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.expand-icon i {
  transition: transform 0.3s ease;
  font-size: 14px;
}

.regulasi-card.expanded .expand-icon {
  background: rgba(255, 255, 255, 0.3);
}

.regulasi-card.expanded .expand-icon i {
  transform: rotate(45deg);
}


/* ==========================================================================
   14. CARD BODY MOBILE
   
   PURPOSE: Collapsible content area of mobile cards
   USED IN: Mobile card view
   REUSABLE: YES ✅
   
   FEATURES:
   - Smooth max-height transition
   - Hidden by default
   - Light gray background
   - Contains info rows and action buttons
   ========================================================================== */

.card-body-mobile {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #f8f9fa;
}

.regulasi-card.expanded .card-body-mobile {
  max-height: 1000px;
}

.card-content {
  padding: 15px;
}


/* ==========================================================================
   15. INFO ROWS
   
   PURPOSE: Label-value pairs in mobile cards
   USED IN: Card body mobile
   REUSABLE: YES ✅✅
   
   STRUCTURE:
   - Label (purple, bold)
   - Value (gray, flexible width)
   - Bottom border separator
   ========================================================================== */

.info-row {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #e2e8f0;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 600;
  color: #667eea;
  min-width: 100px;
  font-size: 13px;
  flex-shrink: 0;
}

.info-value {
  flex: 1;
  color: #4a5568;
  font-size: 13px;
  word-wrap: break-word;
}


/* ==========================================================================
   16. ACTION BUTTONS MOBILE
   
   PURPOSE: Action buttons in mobile card footer
   USED IN: Card footer mobile
   REUSABLE: YES ✅
   
   FEATURES:
   - Full-width button
   - Outlined style
   - Hover fill effect
   - Icon + text
   ========================================================================== */

.action-buttons-mobile {
  display: flex;
  gap: 8px;
  padding: 15px;
  background: white;
  border-top: 2px solid #e2e8f0;
}

.btn-action-mobile {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid #1E90FF;
  background: white;
  color: #1E90FF;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

.btn-action-mobile:hover {
  background: #1E90FF;
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.3);
}


/* ==========================================================================
   17. RESPONSIVE: MOBILE (≤768px)
   
   PURPOSE: Mobile optimization
   CHANGES:
   - Hide desktop table view
   - Show mobile card view
   - Reduce padding
   - Stack DateTime container
   - Adjust info box heights
   ========================================================================== */

@media (max-width: 768px) {
  /* Welcome Container Mobile */
  .welcome-info-container {
    padding: 15px 10px;
  }

  /* Table Container Mobile */
  .table-container {
    padding: 15px;
    border-radius: 15px;
  }

  /* Switch Views */
  .desktop-table-view {
    display: none !important;
  }

  .mobile-card-view {
    display: block !important;
  }

  /* Info Boxes Mobile */
  .small-box {
    min-height: auto;
    margin-bottom: 15px;
  }

  /* DateTime Container Mobile */
  .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;
  }

  /* Table Header Mobile */
  .table-header h2 {
    font-size: 1.3rem;
  }
}


/* ==========================================================================
   END OF STYLESHEET
   
   MAINTENANCE NOTES:
   - DateTime container identical across 9+ pages - MUST extract to shared CSS
   - Mobile card view is a great UX pattern - reusable for other list pages
   - Status badges follow consistent color scheme (green/red)
   - AdminLTE sidebar active state uses green (sustainability theme)
   
   DEPENDENCIES:
   - Bootstrap 5.x
   - Font Awesome 5.x
   - AdminLTE 3.2
   - DataTables (Bootstrap 4 style)
   - Google Fonts (Lato)
   - SweetAlert2
   - jQuery 3.6.0
   
   PERFORMANCE:
   - Transform animations are GPU-accelerated
   - DataTables handles large datasets efficiently
   - Mobile card view uses CSS transitions (not JavaScript)
   - Minimal box-shadow for mobile performance
   
   ACCESSIBILITY:
   - Table has proper semantic structure
   - Mobile cards are keyboard accessible
   - Color contrast meets WCAG AA standards
   - Status badges have icons + text (not color alone)
   - Action buttons have descriptive text
   
   BROWSER SUPPORT:
   - CSS Grid: IE11+ (with -ms- prefix)
   - Flexbox: IE11+ (full support)
   - Transform animations: All modern browsers
   - Gradient backgrounds: IE10+
   - Max-height transitions: All modern browsers
   
   DESIGN PATTERNS:
   - AdminLTE template integration
   - Purple/blue sidebar theme (consistent with eudr_rubber.php)
   - DataTables with export buttons
   - Mobile-first responsive design
   - Expandable cards for mobile
   - Hover effects (lift + shadow)
   - Rounded corners (8-20px border-radius)
   
   JAVASCRIPT DEPENDENCIES:
   - DataTables initialization (inline script)
   - Mobile card toggle function
   - SweetAlert2 for notifications
   - AdminLTE sidebar toggle
   
   DATA HANDLING:
   - Server-side pagination via PHP
   - Client-side DataTables features
   - Dynamic kategori filtering
   - SQL injection protection (mysqli_real_escape_string)
   
   FUTURE IMPROVEMENTS:
   - Extract DateTime container to shared CSS
   - Consider AJAX for kategori switching (no page reload)
   - Add loading states for DataTables
   - Implement search highlighting
   - Add column sorting persistence (localStorage)
   ========================================================================== */