/* ========== PERFORMANCE OPTIMIZATIONS ========== */

/* Force GPU acceleration */
.card-report,
.reorder-item,
.modal-body {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Reduce repaints during scroll */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Smooth scrolling */
html {
    -webkit-overflow-scrolling: touch;
}

#mobileReorderList {
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    overscroll-behavior: contain;
}

/* Disable animations during scroll on mobile */
@media (max-width: 768px) {
    .card-report,
    .reorder-item {
        transition: none !important;
    }
    
    .card-report:hover {
        transform: none !important;
    }
}

/* ========== END PERFORMANCE OPTIMIZATIONS ========== */








body {
    background: #f8f9fa;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.navbar-brand {
    font-size: 1.1rem;
    color: #333 !important;
}

#reportSelector button {
    min-width: 120px;
}

.card-report {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease-in-out;
    overflow: hidden;
    background: white;
}

.card-report:hover {
    transform: translateY(-4px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.12);
}

.card-report img.card-img-top {
    height: 180px;
    object-fit: cover;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.card-report .card-body {
    font-size: 0.9rem;
    color: #333;
}

.card-report .card-title {
    color: #000;
    font-weight: 600;
}

.card-report .small {
    color: #666;
}

.badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
}

/* Grouping headers - Fixed text colors */
.operation-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important;
}

.operation-header h5 {
    color: white !important;
}

.workstation-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white !important;
}

.workstation-header h6 {
    color: white !important;
}

.toggle-icon {
    display: inline-block;
    transition: transform 0.2s;
    color: white !important;
}

/* Responsive Grid Layout */
@media (min-width: 1400px) {
    .card-grid-item {
        flex: 0 0 calc(20% - 1rem);
        max-width: calc(20% - 1rem);
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .card-grid-item {
        flex: 0 0 calc(25% - 1rem);
        max-width: calc(25% - 1rem);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .card-grid-item {
        flex: 0 0 calc(33.333% - 1rem);
        max-width: calc(33.333% - 1rem);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .card-grid-item {
        flex: 0 0 calc(50% - 1rem);
        max-width: calc(50% - 1rem);
    }
}

/* Mobile: Single column */
@media (max-width: 767px) {
    .card-grid-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .operation-header,
    .workstation-header {
        padding: 0.75rem !important;
        font-size: 0.9rem;
    }
    
    .operation-header h5 {
        font-size: 1rem;
    }
    
    .workstation-header h6 {
        font-size: 0.9rem;
    }
    
    #reportSelector {
        margin-bottom: 1rem;
    }
    
    .navbar-brand {
        font-size: 0.9rem;
    }
}

/* Modal styling */
.modal-body a {
    color: #0d6efd;
    text-decoration: underline;
}

.modal-body img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}

/* Link fields styling */
.link-field {
    color: #0d6efd;
    text-decoration: none;
    cursor: pointer;
}

.link-field:hover {
    text-decoration: underline;
}

/* Search functionality */
#searchInput:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.search-highlight {
    background-color: #fff3cd;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}

.card-hidden {
    display: none !important;
}

.no-results-message {
    text-align: center;
    padding: 3rem 1rem;
    color: #6c757d;
}

.no-results-message svg {
    width: 64px;
    height: 64px;
    opacity: 0.3;
    margin-bottom: 1rem;
}


/* Collapse/Expand All Button */
#toggleAllGroupsBtn {
    white-space: nowrap;
    min-width: 44px;
    transition: all 0.2s ease;
}

#toggleAllGroupsBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#toggleAllGroupsBtn svg {
    vertical-align: middle;
}

@media (max-width: 768px) {
    #toggleAllGroupsBtn {
        padding: 0.375rem 0.5rem;
    }
}

/* Rich Text Editor Container */
.richtext-editor-container {
    width: 100%;
}

/* Toolbar styling */
.richtext-toolbar {
    padding: 0.5rem;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-bottom: none;
    border-radius: 0.25rem 0.25rem 0 0;
}

.richtext-toolbar button {
    margin-right: 0.5rem;
}

/* Editable rich text field styling */
.editable-richtext {
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0 0 0.25rem 0.25rem;
    background-color: white;
    line-height: 1.6;
    font-size: 0.95rem;
}

.editable-richtext:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.editable-richtext img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px 0;
    border-radius: 4px;
    cursor: pointer;
}

.editable-richtext p {
    margin-bottom: 0.5rem;
}

.editable-richtext p:last-child {
    margin-bottom: 0;
}

/* Make images resizable when selected */
.editable-richtext img:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}



.time-logs-table {
    font-size: 0.9rem;
}

.time-log-row:hover {
    background-color: #f8f9fa;
}

.btn-outline-info {
    color: #0dcaf0;
    border-color: #0dcaf0;
}

.btn-outline-info:hover {
    background-color: #0dcaf0;
    color: white;
}

#timeLogsModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.time-log-form-card {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}



/* =========================================================
   Rich Text Image Constraints
========================================================= */

.editable-richtext img,
.rich-text img,
.ql-editor img {
    max-height: 300px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    cursor: pointer;
    display: block;
    margin: 8px 0;
}





/* ========== DRAG AND DROP STYLES (Complete) ========== */

/* The ghost/placeholder that shows where card will drop */
.sortable-ghost {
    opacity: 0.3 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: 3px dashed #667eea !important;
    position: relative;
}

/* Show clear drop indicator line */
.sortable-ghost::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    height: 4px;
    background: #667eea;
    box-shadow: 0 0 10px #667eea;
}

/* Card being chosen (initial long-press) */
.sortable-chosen {
    box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
    transform: scale(1.02);
    z-index: 1000 !important;
}

/* Card while being dragged */
.sortable-drag {
    opacity: 0.5 !important;
    transform: scale(0.95) rotate(2deg) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    z-index: 9999 !important;
    cursor: grabbing !important;
}

/* Custom class when dragging */
.is-dragging {
    opacity: 0.6 !important;
    transform: scale(0.9) !important;
    transition: all 0.2s ease;
}

/* Remove default cursor from card */
.card-report.sortable-enabled {
    cursor: default;
}

/* Drag Handle */
.drag-handle {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: grab !important;
    padding: 8px;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 6px;
    z-index: 10;
    font-size: 1.3rem;
    color: #667eea;
    user-select: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.drag-handle:hover {
    background: rgba(102, 126, 234, 0.2);
    transform: scale(1.1);
    border-color: #667eea;
}

.drag-handle:active {
    cursor: grabbing !important;
    transform: scale(0.95);
}

/* Make card body relative for handle positioning */
.card-report .card-body {
    position: relative;
}

/* Prevent text selection during drag */
.sortable-fallback {
    cursor: grabbing !important;
    opacity: 0.5;
    z-index: 10000 !important;
}




/* Mobile specific improvements */
@media (max-width: 768px) {
    .card-report {
        touch-action: manipulation;
        position: relative;
    }
    
    /* Make drag handle MUCH bigger and easier to grab on mobile */
    .drag-handle {
        padding: 15px;
        font-size: 1.8rem;
        top: 5px;
        right: 5px;
        background: rgba(102, 126, 234, 0.2);
        border: 2px solid #667eea;
    }
    
    .drag-handle:active {
        background: rgba(102, 126, 234, 0.4);
    }
    
    /* Make ghost placeholder VERY visible on mobile */
    .sortable-ghost {
        min-height: 80px !important;
        border: 5px dashed #667eea !important;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%) !important;
    }
    
    .sortable-ghost::before {
        height: 8px;
        background: #667eea;
        box-shadow: 0 0 15px #667eea, 0 0 30px #667eea;
        animation: pulse-line 0.5s ease-in-out infinite;
    }
    
    @keyframes pulse-line {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    
    /* Dragged card becomes MUCH smaller and transparent on mobile */
    .sortable-drag {
        opacity: 0.2 !important;
        transform: scale(0.6) rotate(3deg) !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.4) !important;
    }
    
    /* Card being chosen shows clear feedback */
    .sortable-chosen {
        transform: scale(1.05) !important;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4) !important;
        border: 2px solid #667eea !important;
    }
    
    /* When actively dragging */
    .is-dragging {
        opacity: 0.3 !important;
        transform: scale(0.7) rotate(2deg) !important;
    }
    
    /* Ensure cards don't overlap during drag */
    .card-grid-item {
        margin-bottom: 1rem;
    }
}


/* ========== END DRAG AND DROP STYLES ========== */








/* ========== MOBILE REORDER MODAL ========== */

#mobileReorderList {
    max-height: 60vh;
    overflow-y: auto;
}

.reorder-item {
    cursor: move;
    padding: 1rem;
    margin-bottom: 0.5rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Removed transitions for better performance */
}

.reorder-item:active {
    background: #f8f9fa;
    /* Removed transform */
}

.reorder-item-handle {
    font-size: 1.5rem;
    color: #667eea;
    flex-shrink: 0;
}

.reorder-item-content {
    flex: 1;
    min-width: 0;
}

.reorder-item-title {
    font-weight: 600;
    color: #000;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reorder-item-subtitle {
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile reorder sortable styles */
.reorder-item.sortable-chosen {
    background: #e7f3ff;
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.reorder-item.sortable-drag {
    opacity: 0.5;
    transform: rotate(2deg);
}

.reorder-item.sortable-ghost {
    opacity: 0.3;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 3px dashed #667eea;
}

/* Only show mobile reorder on small screens */
@media (min-width: 769px) {
    .mobile-reorder-trigger {
        display: none !important;
    }
}

/* Hide desktop drag handle on mobile, show tap icon instead */
@media (max-width: 768px) {
    .drag-handle {
        background: rgba(102, 126, 234, 0.15);
        border: 2px solid #667eea;
        padding: 12px;
        cursor: pointer;
    }
    
    .drag-handle i::before {
        content: "☰"; /* Menu icon instead of grip */
        font-style: normal;
    }
}


/* Better scrolling in modal list */
#mobileReorderList {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    overscroll-behavior: contain;
    padding: 0.5rem;
}

/* Make modal body scrollable */
#mobileReorderModal .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 70vh;
}

/* Ensure items have enough space */
.reorder-item {
    cursor: move;
    padding: 1rem;
    margin-bottom: 0.75rem; /* Increased spacing */
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 1rem;
    touch-action: none; /* Prevent native touch scrolling on items */
}


/* ========== END MOBILE REORDER MODAL ========== */










/* Small handles ONLY for admin reorder lists (field/group/subgroup) */
#globalReportConfigModal .admin-drag-handle {
  position: static !important;
  top: auto !important;
  right: auto !important;

  padding: 0 !important;
  margin-right: 8px !important;

  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 14px !important;
  line-height: 14px !important;
  color: #667eea !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  transform: none !important;
  cursor: grab !important;
}

/* Your admin handle span is empty; draw a small grip */
#globalReportConfigModal .admin-drag-handle::before {
  content: "⋮⋮";
  letter-spacing: -2px;
  opacity: 0.8;
}




/* ========== OPERATION PLANNING MODAL STYLES ========== */

/* Hide mobile card reorder buttons inside modals - they conflict with operation planning */
.modal .drag-handle {
  display: none !important;
}

/* Exception: Show operation table drag handles */
#operationsTable .bi-grip-vertical {
  display: inline-block !important;
  color: #6c757d;
}

/* Operation table styling */
#operationsTable {
  font-size: 0.9rem;
}

#operationsTable thead th {
  background-color: #f8f9fa;
  font-weight: 600;
  border-bottom: 2px solid #dee2e6;
}

/* Order column with gray background */
#operationsTable tbody tr td:first-child {
  background-color: #f8f9fa;
  border-right: 2px solid #e9ecef;
}

/* Hover effect for draggable operation rows */
#operationsTable tbody tr[style*="cursor: move"]:hover {
  background-color: #e3f2fd !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}

/* Visual feedback during drag */
#operationsTable tbody tr.dragging {
  opacity: 0.5;
  background-color: #fff3cd !important;
  border: 2px dashed #ffc107;
}

/* Sortable ghost placeholder for operations */
#operationsTable tbody .sortable-ghost {
  opacity: 0.3 !important;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%) !important;
  border: 3px dashed #667eea !important;
}

/* Operation row completed styling */
#operationsTable tbody tr.table-success {
  background-color: #d1e7dd !important;
}

#operationsTable tbody tr.table-success:hover {
  background-color: #badbcc !important;
}

/* Grip icon styling in operation table */
#operationsTable .bi-grip-vertical {
  font-size: 1.2rem;
  cursor: move;
  transition: all 0.2s ease;
}

#operationsTable .bi-grip-vertical:hover {
  color: #667eea;
  transform: scale(1.1);
}

/* Operation modal full-width */
#operationPlanningModal .modal-dialog {
  max-width: 95%;
}

@media (min-width: 1200px) {
  #operationPlanningModal .modal-dialog {
    max-width: 1400px;
  }
}

/* Mobile responsiveness for operation table */
@media (max-width: 768px) {
  #operationsTable {
    font-size: 0.8rem;
  }
  
  #operationsTable tbody tr td {
    padding: 0.5rem 0.25rem;
  }
  
  #operationsTable .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  /* Larger grip handle on mobile */
  #operationsTable .bi-grip-vertical {
    font-size: 1.5rem;
  }
}

/* ========== END OPERATION PLANNING MODAL STYLES ========== */