:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --danger-color: #e74c3c;
  --warning-color: #f1c40f;
  --info-color: #9b59b6;
  --light-color: #f8f9fa;
  --dark-color: #343a40;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f5f7fa;
  color: #333;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}

/* Bootstrap overrides */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover {
  background-color: #2980b9;
  border-color: #2980b9;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

/* Todo Items */
.todo-list {
  margin-bottom: 2rem;
}

.todo-item {
  transition: all 0.3s ease;
  border-left: 3px solid var(--primary-color);
}

.todo-item.completed {
  border-left-color: var(--secondary-color);
  opacity: 0.7;
}

.todo-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.todo-drag-handle {
  cursor: move;
  padding: 5px;
  font-size: 1.2rem;
}

.todo-content {
  padding: 5px 0;
}

/* Labels */
.color-swatch {
  width: 30px;
  height: 30px;
  margin: 0 5px 5px 0;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.color-swatch:hover {
  transform: scale(1.1);
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.color-preview {
  border-radius: 4px 0 0 4px;
}

/* DataTables customization */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
  margin-bottom: 15px;
}

/* PWA styles */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .btn-group {
    display: flex;
    flex-wrap: wrap;
  }
  
  .btn-group .btn {
    margin-bottom: 5px;
    border-radius: 4px !important;
  }
}

/* Animation for completed items */
@keyframes fadeComplete {
  from { opacity: 1; }
  to { opacity: 0.7; }
}

.todo-complete-animation {
  animation: fadeComplete 0.5s forwards;
}

/* UI Sortable styles */
.ui-sortable-helper {
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  opacity: 0.9;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 1000;
}

.ui-sortable-placeholder {
  background-color: rgba(52, 152, 219, 0.1);
  border: 2px dashed var(--primary-color);
  visibility: visible !important;
  height: 60px;
  margin-bottom: 10px;
  border-radius: 4px;
}

/* Enhanced order controls for mobile */
.order-controls {
  margin-left: -5px;
  touch-action: manipulation;
}

.order-controls button {
  margin: 2px 0;
}

.order-controls i {
  font-size: 1.2rem;
}

/* Give buttons a larger touch target on mobile */
@media (max-width: 767.98px) {
  .order-controls button {
    padding: 5px !important;
  }
  
  .order-controls i {
    font-size: 1.4rem;
  }
}

/* Hide text selection while dragging */
.ui-sortable-helper * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}