/* Custom Scrollbars for Native Feel */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--wd-border);
    border-radius: 1rem;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--wd-muted-fg);
}

/* Hide scrollbars when not hovered on some containers */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--wd-border) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 0.375rem;
}

/* Safe area for mobile devices */
.safe-pb {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-pt {
    padding-top: env(safe-area-inset-top);
}

/* Title bar color for mobile PWA */
:root {
    --wd-header-height: 4rem;
}

html {
  font-size: 0.875rem;
}

@media (min-width: 48rem) {
  html {
    font-size: 1rem;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 3.75rem;
}

.wd-task-card {
  cursor: grab;
}

.wd-drag-handle {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  font-weight: 700;
  line-height: 1;
}

.wd-drag-handle:active {
  cursor: grabbing;
}

.wd-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.8;
  box-shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, 0.1);
  transform: rotate(2deg);
  transition: transform 0.1s;
}

.wd-drag-ghost * {
  /* Ensure all content is visible in the ghost */
  visibility: visible !important;
}

.wd-toast {
  position: fixed;
  left: 50%;
  bottom: 1.375rem;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  background: rgba(220, 53, 69, 0.95);
  color: #fff;
  font-size: 0.8125rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-in-out;
  max-width: 70vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wd-toast--show {
  opacity: 1;
}

.wd-task-card--dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.wd-task-card--selected {
  border-color: var(--wd-primary) !important;
  background-color: var(--wd-muted-bg) !important;
  box-shadow: 0 0 0 0.125rem var(--wd-primary) !important;
}

.wd-task-card--preview {
  outline: 0.125rem dashed var(--wd-primary);
  outline-offset: 0.125rem;
  background: var(--wd-muted-bg) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.wd-task-card--preview * {
  visibility: hidden;
}

.wd-task-placeholder {
  pointer-events: none;
  margin-bottom: 0.75rem;
  transition: all 0.15s ease;
}

.wd-dropzone {
  min-height: 2rem;
  padding-bottom: 0.5rem;
}

.wd-dropzone--over {
  background: rgba(13, 110, 253, 0.06);
  border-radius: 0.75rem;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Dropdowns and Popovers */
.wd-popover {
    background-color: var(--wd-card-bg) !important;
    border: 0.0625rem solid var(--wd-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--wd-popover-shadow) !important;
    padding: 0.5rem 0 !important;
    opacity: 1 !important;
}

[data-theme='dark'] .wd-popover {
    background-color: #1f2937 !important;
}

.wd-menu-item, .wd-popover-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wd-fg) !important;
    transition: all 0.2s;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none !important;
    white-space: nowrap;
}

.wd-menu-item:hover, .wd-popover-item:hover {
    background-color: var(--wd-hover-bg) !important;
}

details[data-wd-dropdown] > summary {
    list-none: none;
}

details[data-wd-dropdown] > summary::-webkit-details-marker {
    display: none;
}

details[data-wd-dropdown][open] > .wd-popover {
    display: block;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInFromTop {
    from { transform: translateY(-0.5rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-in {
    animation-duration: 200ms;
    animation-fill-mode: both;
}

.fade-in {
    animation-name: fadeIn;
}

.slide-in-from-top-1 {
    animation-name: slideInFromTop;
}

/* Breathing animation for paused state */
@keyframes wdBreathe {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.85);
    }
}

.wd-animate-breathe {
    animation: wdBreathe 2s ease-in-out infinite;
}

@keyframes wdSpinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin-slow {
    animation: wdSpinSlow 3s linear infinite;
}

/* Task Checklist Styling */
.prose ul > li input[type="checkbox"] {
    margin-right: 0.5rem;
    cursor: pointer;
    accent-color: var(--wd-primary);
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: middle;
}

.prose ul > li:has(input[type="checkbox"]:checked) {
    text-decoration: line-through;
    opacity: 0.6;
}

.prose ul {
    list-style-type: none;
    padding-left: 0.5rem;
}

.prose li {
    padding-left: 0;
}