/* Custom styles for Toody Task Manager */

/* Global styles (moved from base.html) */
html { scrollbar-gutter: stable; }
body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #F4F6FA;
    min-height: 100vh;
}
::selection { background: #C7D2FE; }
input:focus, textarea:focus, select:focus {
    border-color: #818CF8 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important;
}
[x-cloak] { display: none !important; }

/* Prevent layout shift from scrollbar appearing/disappearing between pages */
html {
    overflow-y: scroll;
}

/* Smooth page entry animation — fires on both full load and HTMX boost swap */
#page-content {
    animation: page-enter 0.15s ease-out;
}

@keyframes page-enter {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Smooth transitions for HTMX */
.htmx-swapping {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

/* Task item animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.task-item {
    transition: background 0.12s ease;
}

.task-item.htmx-swapping {
    opacity: 0;
    transform: scale(0.95);
}

.task-item.htmx-added {
    animation: slideIn 0.3s ease;
}

/* Theme toggle button styles */
.theme-toggle-btn {
    transition: all 0.2s ease;
}

.theme-toggle-btn.active {
    background-color: #3B82F6;
    color: white;
}

/* Loading indicator */
.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-indicator {
    display: none;
}

/* Mobile responsive improvements */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    img, video, pre, table {
        max-width: 100%;
    }

    .mobile-menu-hidden {
        display: none;
    }

    .mobile-menu-visible {
        display: flex !important;
    }

    #mobileMenu {
        position: relative;
        left: 0;
        right: 0;
        width: 100%;
    }

    button, a:not([class*="flex"]) {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Mobile task row fix ───────────────────────────────────────── */
@media (max-width: 639px) {

  /* Row 1: checkbox · dot · title · avatar · status — all center-aligned */
  .task-row-mobile {
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  /* Title: undo the broad 768px a{inline-flex, justify-content:center} rule,
     then force LTR so text starts from left next to checkbox/dot.
     unicode-bidi: plaintext preserves per-character RTL rendering. */
  .task-row-mobile > a[dir="auto"] {
    display: block !important;
    min-height: unset !important;
    min-width: unset !important;
    direction: ltr !important;
    unicode-bidi: plaintext !important;
    text-align: left !important;
  }

  /* Status pill: smaller on mobile */
  .task-row-mobile > button[style*="border-radius: 99px"] {
    flex-shrink: 0;
    font-size: 10px;
    padding: 3px 7px;
  }

  /* Meta items: stay on one line, don't compress */
  .task-row-mobile .task-meta-row span {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Overflow (⋮) menu: hide on mobile */
  .task-row-mobile > div[style*="opacity"] {
    display: none !important;
  }

}