/* ==========================================================================
   PROFIL ANGGOTA PAGE STYLES
   
   TABLE OF CONTENTS:
   
   1. Fonts & Base Styles ...................... Line 30
   2. Modern Table Container ................... Line 65
   3. Table Header ............................. Line 115
   4. Table Body Content ....................... Line 155
   5. Modern Table Styling (Enhanced) .......... Line 175
   6. Column Styling ........................... Line 280
   7. DataTables Controls ...................... Line 320
   8. Status Badges ............................ Line 480
   9. DateTime & Running Text .................. Line 555
   10. Small Boxes ............................. Line 635
   11. Modal Styling ........................... Line 700
   12. Mobile Card View ........................ Line 785
   13. Print Mode .............................. Line 950
   14. Navbar Alignment ........................ Line 990
   15. Responsive Styles ....................... Line 1025
   
   USAGE:
   - ✅ REUSABLE: DateTime, Small Boxes, Status Badges
   - ⚠️ TABLE SPECIFIC: DataTables customization
   - 🎨 MODERN DESIGN: Gradients, shadows, animations
   
   DEPENDENCIES:
   - Bootstrap 5.1.3
   - DataTables (Bootstrap 4 theme)
   - Font Awesome 5.15.4
   - AdminLTE 3.2.0 (for small boxes)
   - Google Fonts (Inter)
   
   File Size: ~1100 lines
   Created: 2025-01-XX
   Last Updated: 2025-01-XX
   ========================================================================== */


/* ==========================================================================
   1. FONTS & BASE STYLES
   
   PURPOSE: Import fonts and reset base elements
   USED IN: All page elements
   REUSABLE: YES ✅
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}


/* ==========================================================================
   2. MODERN TABLE CONTAINER
   
   PURPOSE: Main container for the company table with gradient design
   USED IN: Table wrapper section
   REUSABLE: MAYBE ⚠️ (can be adapted for other table pages)
   
   FEATURES:
   - Gradient background
   - Animated gradient border on top
   - Glassmorphism effect
   - Shadow and border styling
   ========================================================================== */

.table-container {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fc 100%);
  border-radius: 24px;
  padding: 0;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(102, 126, 234, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  backdrop-filter: blur(10px);
}

.table-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  background-size: 200% 100%;
  animation: gradientMove 3s ease infinite;
}

@keyframes gradientMove {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}


/* ==========================================================================
   3. TABLE HEADER - SIMPLIFIED
   
   PURPOSE: Header section for table with title and icon
   USED IN: Top of table container
   REUSABLE: YES ✅
   ========================================================================== */

.table-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 25px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
}

.table-header-title {
  color: white;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
}

.table-header-title i {
  font-size: 32px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}


/* ==========================================================================
   4. TABLE BODY CONTENT
   
   PURPOSE: Padding container for table content
   USED IN: Table body wrapper
   REUSABLE: YES ✅
   ========================================================================== */

.table-body-content {
  padding: 40px;
}


/* ==========================================================================
   5. MODERN TABLE STYLING (ENHANCED VERSION)
   
   PURPOSE: Custom DataTable styling with modern design
   USED IN: Main company data table
   REUSABLE: MAYBE ⚠️
   DEPENDENCIES: DataTables plugin
   
   FEATURES:
   - Blue gradient header
   - Zebra striping
   - Hover effects with left border accent
   - Smooth transitions
   - Enhanced visual hierarchy
   ========================================================================== */

.modern-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 25px;
  overflow: visible !important;
}

/* Table Header - Enhanced */
.modern-table thead {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  box-shadow: 0 2px 10px rgba(0, 123, 255, 0.2);
}

.modern-table thead th {
  padding: 16px 18px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  border: none;
  white-space: nowrap;
  color: #ffffff !important;
  position: relative;
  background: transparent !important;
  text-align: left;
  vertical-align: middle;
}

.modern-table thead th:first-child {
  border-radius: 12px 0 0 0;
}

.modern-table thead th:last-child {
  border-radius: 0 12px 0 0;
}

/* Remove DataTables sorting arrows */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
  display: none !important;
}

/* Table Body - Enhanced */
.modern-table tbody tr {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid #e9ecef;
  background: #ffffff;
  position: relative;
  z-index: 1;
}

/* Zebra Striping */
.modern-table tbody tr:nth-child(even) {
  background: #f8f9fa;
}

/* Hover Effect - Enhanced with Left Border Accent */
.modern-table tbody tr:hover {
  background: linear-gradient(90deg,
    rgba(0, 123, 255, 0.05) 0%,
    rgba(0, 86, 179, 0.05) 100%);
  transform: translateX(4px);
  box-shadow:
    -4px 0 0 0 #007bff,
    0 4px 12px rgba(0, 123, 255, 0.15);
  z-index: 999;
  border-radius: 0 8px 8px 0;
}

.modern-table tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  color: #495057;
  font-size: 14px;
  font-weight: 500;
  border: none;
  transition: all 0.3s ease;
}

/* First Row after Header */
.modern-table tbody tr:first-child td {
  padding-top: 20px;
}

/* Last Row */
.modern-table tbody tr:last-child {
  border-bottom: none;
}

.modern-table tbody tr:last-child td {
  padding-bottom: 20px;
}


/* ==========================================================================
   6. COLUMN STYLING
   
   PURPOSE: Specific column styling for number, company name, and capacity
   USED IN: Table columns
   REUSABLE: MAYBE ⚠️
   ========================================================================== */

.number-col {
  width: 60px;
  text-align: center;
  font-weight: 800;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 16px;
}

.company-name {
  font-weight: 700;
  color: #212529;
  font-size: 15px;
  line-height: 1.4;
}

.modern-table tbody tr:hover .company-name {
  color: #007bff;
}

.capacity-value {
  font-weight: 700;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: 'Courier New', monospace;
  font-size: 15px;
}


/* ==========================================================================
   7. DATATABLES CONTROLS
   
   PURPOSE: Custom styling for DataTables pagination, search, and length menu
   USED IN: DataTables controls
   REUSABLE: YES ✅ (for other DataTable pages)
   DEPENDENCIES: DataTables plugin
   
   SECTIONS:
   - Length menu (entries per page)
   - Filter status dropdown (center)
   - Search input
   - Pagination buttons
   - Info text
   ========================================================================== */

/* DataTables Wrapper Layout */
.dataTables_wrapper .row {
  display: flex;
  align-items: center;
}

/* Length Menu Styling */
.dataTables_length {
  float: left;
}

.dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
  margin: 0;
}

.dataTables_length select {
  padding: 8px 35px 8px 12px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  font-weight: 600;
  color: #495057;
  background: white;
  transition: all 0.3s ease;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-width: 80px;
  height: 38px;
  line-height: 1.5;
  text-align: center;
  text-align-last: center;
}

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

.dataTables_length select:hover {
  border-color: #667eea;
}

/* Filter Status Button - CENTER POSITION */
.filter-status-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-btn-table {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 8px 20px;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
}

.status-btn-table:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  color: white;
}

/* Search Filter Styling */
.dataTables_filter {
  float: right;
  position: relative;
}

.dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #495057;
  font-size: 14px;
  margin: 0;
  position: relative;
}

.dataTables_filter input {
  width: 280px;
  padding: 8px 40px 8px 15px;
  border: 2px solid #e9ecef;
  border-radius: 10px;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  background: white;
  transition: all 0.3s ease;
  height: 38px;
}

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

.dataTables_filter input:hover {
  border-color: #667eea;
}

/* Search Icon */
.dataTables_filter label::after {
  content: "\f002";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 15px;
  color: #667eea;
  pointer-events: none;
  font-size: 14px;
}

/* DataTables Info Text */
.dataTables_info {
  padding: 15px 0;
  color: #6c757d;
  font-weight: 500;
  font-size: 14px;
}

/* DataTables Pagination */
.dataTables_paginate {
  padding: 15px 0;
}

.dataTables_paginate .paginate_button {
  padding: 8px 14px;
  margin: 0 2px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  background: white;
  color: #495057 !important;
  font-weight: 600;
  transition: all 0.3s ease;
}

.dataTables_paginate .paginate_button:hover {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border-color: #007bff;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border-color: #007bff;
  color: white !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.dataTables_paginate .paginate_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty Table State */
.dataTables_empty {
  padding: 40px 20px !important;
  text-align: center;
  color: #6c757d;
  font-size: 16px;
  font-weight: 500;
}

/* Table Loading State */
.dataTables_processing {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  padding: 15px 30px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.3);
}


/* ==========================================================================
   8. STATUS BADGES
   
   PURPOSE: Animated status badges for Aktif, Idle, Berhenti
   USED IN: Status column in table
   REUSABLE: YES ✅✅
   
   VARIANTS:
   - badge-aktif: Green gradient (active companies)
   - badge-idle: Orange gradient (idle companies)
   - badge-berhenti: Red gradient (stopped companies)
   ========================================================================== */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.status-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.status-badge:hover::before {
  left: 100%;
}

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

.badge-idle {
  background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(237, 137, 54, 0.4);
}

.badge-berhenti {
  background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(245, 101, 101, 0.4);
}


/* ==========================================================================
   9. DATETIME & RUNNING TEXT
   
   PURPOSE: Date display with animated scrolling news ticker
   USED IN: Top of page below navbar
   REUSABLE: YES ✅✅✅
   
   FEATURES:
   - Animated gradient background
   - Icon animation (bounce)
   - Scrolling text animation
   - Glassmorphism container for text
   
   NOTE: Similar to index.php and tentang_gapkindo.php datetime
   ========================================================================== */

.datetime-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  background-size: 200% 100%;
  animation: gradientShift 8s ease infinite;
  border-radius: 0px;
  padding: 8px 30px;
  color: white;
  box-shadow:
    0 15px 45px rgba(102, 126, 234, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  margin: 60px 0 20px 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: -20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.date-display {
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.date-display i {
  font-size: 1.5rem;
  animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.running-text-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 250px;
  max-width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 8px 20px;
  backdrop-filter: blur(10px);
}

.running-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-text 30s linear infinite;
  font-weight: 600;
  font-size: 1rem;
}

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


/* ==========================================================================
   10. SMALL BOXES
   
   PURPOSE: Statistics boxes for each region (SU, RI, SB, AC)
   USED IN: Top section showing company counts per region
   REUSABLE: YES ✅✅
   DEPENDENCIES: AdminLTE 3.2.0 small-box component, Ionicons
   
   FEATURES:
   - Hover lift animation
   - Icon rotation on hover
   - Gradient overlay
   ========================================================================== */

.small-box {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.small-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.small-box:hover::before {
  opacity: 1;
}

.small-box:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.small-box h3 {
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -1px;
}

.small-box p {
  font-size: 1rem;
  font-weight: 600;
}

.small-box .icon {
  transition: all 0.4s ease;
}

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

.content-padding {
  padding-left: 20px;
  padding-right: 20px;
}

.small-box .text-white {
  color: white !important;
}


/* ==========================================================================
   11. MODAL STYLING
   
   PURPOSE: Custom modal design for Add, Edit, Detail forms
   USED IN: Modal dialogs
   REUSABLE: YES ✅
   
   FEATURES:
   - Gradient header
   - Enhanced form controls
   - Styled buttons
   ========================================================================== */

.modal-content {
  border-radius: 20px;
  border: none;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
}

.modal-header.custom-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 30px;
  border: none;
}

.modal-header.custom-header .modal-title {
  font-weight: 700;
  font-size: 1.25rem;
}

.modal-body {
  padding: 30px;
}

.modal-body .form-label {
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-body .form-control,
.modal-body .form-select {
  border: 2px solid rgba(102, 126, 234, 0.15);
  border-radius: 12px;
  padding: 12px 16px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.modal-footer {
  padding: 20px 30px;
  border-top: 2px solid rgba(0, 0, 0, 0.05);
}

.modal-footer .btn {
  border-radius: 12px;
  padding: 12px 28px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.modal-footer .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

.modal-footer .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

::placeholder {
  font-style: italic;
  color: #a0aec0;
}


/* ==========================================================================
   12. MOBILE CARD VIEW
   
   PURPOSE: Alternative mobile-friendly card layout for company data
   USED IN: Mobile devices (<768px)
   REUSABLE: MAYBE ⚠️
   
   FEATURES:
   - Expandable accordion cards
   - Gradient header
   - Smooth expand/collapse animation
   - Touch-friendly design
   ========================================================================== */

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

.company-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8f9fc 100%);
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.company-card:hover {
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.2);
  transform: translateY(-4px);
}

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

.card-title-mobile {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-number {
  background: rgba(255, 255, 255, 0.25);
  padding: 4px 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  backdrop-filter: blur(10px);
}

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

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

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

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

.card-body-mobile {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #f8f9fa;
}

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

.card-content {
  padding: 20px;
}

.info-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

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

.info-label {
  font-weight: 700;
  color: #667eea;
  min-width: 110px;
  font-size: 13px;
}

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


/* ==========================================================================
   13. PRINT MODE
   
   PURPOSE: Print-specific styles to hide unnecessary elements
   USED IN: When printing the page
   REUSABLE: YES ✅
   ========================================================================== */

@media print {
  body {
    margin: 0;
    padding: 20px;
  }
  
  .datetime-container,
  .header-berita,
  .dataTables_wrapper .row:first-child,
  .dataTables_wrapper .row:last-child,
  .pagination-wrapper,
  .news-card-container-wrapper,
  #navtop,
  .navbar,
  footer {
    display: none !important;
  }
  
  .table-container {
    box-shadow: none;
    margin: 0;
    padding: 0;
  }
  
  .modern-table {
    width: 100%;
    font-size: 10px;
  }
  
  .modern-table thead th {
    background: #667eea !important;
    color: white !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* ==========================================================================
   14. NAVBAR ALIGNMENT
   
   PURPOSE: Fix navbar positioning and alignment issues
   USED IN: Page body and navbar
   REUSABLE: NO ❌ (page-specific fix)
   ========================================================================== */

body#profil {
  margin: 0 !important;
  padding: 0 !important;
}

/* Navbar positioning fix */
#navtop {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.navbar {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.navbar-brand {
  margin-left: -16px !important;
  padding-left: 0px !important;
}

/* Content wrapper alignment */
.content-padding {
  margin-top: 25px;
}


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

/* Responsive: Medium Desktop (≤1200px) */
@media (max-width: 1200px) {
  .modern-table thead th {
    padding: 14px 12px;
    font-size: 11px;
  }

  .modern-table tbody td {
    padding: 14px 12px;
    font-size: 13px;
  }
}

/* Responsive: Tablet (≤768px) */
@media (max-width: 768px) {
  .table-container {
    margin-top: 30px;
  }

  .table-header {
    padding: 20px;
  }

  .table-header-title {
    font-size: 1.2rem;
  }

  .table-header-title i {
    font-size: 28px;
  }

  .table-body-content {
    padding: 20px;
  }

  .desktop-table-view {
    display: none !important;
  }

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

  .datetime-container {
    flex-direction: column;
    padding: 18px 20px;
    gap: 15px;
    margin-top: 50px;
  }

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

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

  .small-box h3 {
    font-size: 1.4rem !important;
  }

  .small-box p {
    font-size: 0.9rem;
  }
}

/* Responsive: Mobile (≤576px) */
@media (max-width: 576px) {
  .content-padding {
    padding-left: 15px;
    padding-right: 15px;
  }

  .datetime-container {
    padding: 15px;
  }

  .date-display {
    font-size: 0.95rem;
  }

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

  .small-box h3 {
    font-size: 1.2rem !important;
  }
}


/* ==========================================================================
   END OF STYLESHEET
   
   MAINTENANCE NOTES:
   - Keep DataTables version synchronized
   - Test table responsiveness on multiple devices
   - Status badge colors match company status logic
   - Datetime container reusable across pages
   - Mobile card view provides better UX on small screens
   
   PERFORMANCE TIPS:
   - Use transform for animations (GPU accelerated)
   - Minimize box-shadow usage on mobile
   - Lazy load table data for large datasets
   - Consider virtual scrolling for 1000+ rows
   
   ACCESSIBILITY:
   - Ensure sufficient color contrast (WCAG AA)
   - Add aria-labels to interactive elements
   - Test keyboard navigation
   - Support screen readers
   ========================================================================== */