/* ==========================================================================
   GMP To-Do List Redesign v1.0.0
   Consistent with GMP redesign: Inter font, soft cards, cyan accent
   ========================================================================== */

/* === Page-level container === */
.content__block.action-list {
    background: #fff !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03) !important;
    padding: 28px 32px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* === Header row: "To Do List" + add button === */
.content__block.action-list > header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

.content__block.action-list > header h4 {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}

/* Add button (plus icon) */
.content__block.action-list > header .has-tip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #00D4FF, #00b8d9) !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 212, 255, 0.25) !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.content__block.action-list > header .has-tip:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.35) !important;
}

.content__block.action-list > header .has-tip i {
    font-size: 16px !important;
    color: #fff !important;
    line-height: 1 !important;
}

/* === Add item input form === */
.action-list__add .add:not(.hidden) {
    margin-bottom: 16px !important;
}

.action-list__form input[type="text"] {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    border: 2px solid #00D4FF !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    width: 100% !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
}

.action-list__form input[type="text"]:focus {
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.15) !important;
}

/* === Hide the UL list styling === */
.action-list__list,
.action-list__list-complete,
.action-list__add {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* === Individual to-do items (pending) === */
.action-list__list-item {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    transition: all 0.15s ease !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    gap: 12px !important;
}

.action-list__list-item:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* === Checkbox icon === */
.action-list__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

/* Uncompleted circle */
.action-list__list-item:not(.complete) .action-list__icon {
    border: 2px solid #cbd5e1 !important;
    background: #fff !important;
}

.action-list__list-item:not(.complete) .action-list__icon:hover {
    border-color: #00D4FF !important;
    background: rgba(0, 212, 255, 0.05) !important;
}

.action-list__list-item:not(.complete) .action-list__icon i {
    display: none !important;
}

/* Completed check */
.action-list__list-item.complete .action-list__icon {
    background: #e2e8f0 !important;
    border: 2px solid #e2e8f0 !important;
}

.action-list__list-item.complete .action-list__icon i {
    font-size: 11px !important;
    color: #94a3b8 !important;
}

/* === Text area === */
.action-list__text-wrap {
    flex: 1 !important;
    min-width: 0 !important;
}

.action-list__text {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
}

/* Completed text gets strikethrough and muted */
.action-list__list-item.complete .action-list__text {
    text-decoration: line-through !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

/* Edit input field */
.action-list__text-edit-field {
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 14px !important;
    padding: 6px 10px !important;
    border: 2px solid #00D4FF !important;
    border-radius: 6px !important;
    outline: none !important;
    width: 100% !important;
}

/* === Action buttons (edit, delete) === */
.action-list__edit,
.action-list__delete {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transition: all 0.15s ease !important;
}

.action-list__list-item:hover .action-list__edit,
.action-list__list-item:hover .action-list__delete {
    opacity: 1 !important;
}

.action-list__edit:hover {
    background: #f0fdff !important;
}

.action-list__delete:hover {
    background: #fef2f2 !important;
}

.action-list__edit i {
    font-size: 13px !important;
    color: #64748b !important;
}

.action-list__delete i {
    font-size: 13px !important;
    color: #ef4444 !important;
}

/* === Priority dot === */
.action-list__priority {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    position: relative !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: background 0.15s ease !important;
    overflow: visible !important;
    background: transparent !important;
}

.action-list__priority:hover {
    background: rgba(0,0,0,0.03) !important;
}

/* Priority dot via ::before pseudo-element */
.action-list__priority::before {
    content: '' !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* Also style any i child if present */
.action-list__priority > i,
.action-list__priority > .priority-dot {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    border-radius: 50% !important;
    display: block !important;
    line-height: 1 !important;
    padding: 0 !important;
}

/* Priority colours — applied to ::before pseudo-element */
.action-list__list-item.priority-normal .action-list__priority::before {
    background: #00D4FF !important;
}
.action-list__list-item.priority-normal .action-list__priority > i {
    background: #00D4FF !important;
}

.action-list__list-item.priority-high .action-list__priority::before {
    background: #ef4444 !important;
}
.action-list__list-item.priority-high .action-list__priority > i {
    background: #ef4444 !important;
}

.action-list__list-item.priority-low .action-list__priority::before {
    background: #94a3b8 !important;
}
.action-list__list-item.priority-low .action-list__priority > i {
    background: #94a3b8 !important;
}

/* Medium priority = same as normal */
.action-list__list-item.priority-medium .action-list__priority::before {
    background: #f59e0b !important;
}

/* Default (no priority class) */
.action-list__priority::before {
    background: #cbd5e1 !important;
}

/* Priority dropdown menu */
.action-list__priority .action-list__priority-select {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 100 !important;
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
    padding: 8px 0 !important;
    min-width: 140px !important;
    list-style: none !important;
    border: 1px solid #e2e8f0 !important;
    margin-top: 4px !important;
}

/* Show dropdown only on click (via .show or .open class) — NOT on hover */
.action-list__priority .action-list__priority-select.show,
.action-list__priority.open .action-list__priority-select {
    display: block !important;
}

.action-list__priority-select li {
    padding: 6px 14px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 13px !important;
    color: #475569 !important;
    cursor: pointer !important;
    list-style: none !important;
}

.action-list__priority-select li:hover {
    background: #f8fafc !important;
}

.action-list__priority-select li.heading {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #94a3b8 !important;
    cursor: default !important;
    padding-bottom: 4px !important;
}

/* === Sort / drag handle === */
.action-list__sort {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    min-width: 28px !important;
    cursor: grab !important;
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
    color: #cbd5e1 !important;
}

.action-list__list-item:hover .action-list__sort {
    opacity: 1 !important;
}

.action-list__sort i {
    font-size: 14px !important;
    color: #cbd5e1 !important;
}

/* === Completed section divider === */
.action-list__list-complete {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
}

/* === Completed items: more subtle styling === */
.action-list__list-item.complete {
    background: #f8fafc !important;
    border-color: #f1f5f9 !important;
    padding: 12px 16px !important;
}

.action-list__list-item.complete:hover {
    border-color: #e2e8f0 !important;
}

/* === "Show completed" arrow === */
.content__block.action-list > i.gmp-arrow-up,
.content__block.action-list > i.gmp-arrow-down {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 0 4px !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    transition: color 0.15s ease !important;
}

.content__block.action-list > i.gmp-arrow-up:hover,
.content__block.action-list > i.gmp-arrow-down:hover {
    color: #00D4FF !important;
}

/* === Loading spinner === */
.action-list__loading .spinner {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
}

.action-list__loading .spinner div {
    width: 6px !important;
    height: 6px !important;
    background: #00D4FF !important;
    border-radius: 50% !important;
}

/* === Page background === */
.template-action .content {
    background: #f0f4f8 !important;
}

/* === Responsive === */
@media (max-width: 768px) {
    .content__block.action-list {
        padding: 20px 16px !important;
        margin: 0 8px !important;
        border-radius: 12px !important;
    }

    .action-list__list-item {
        padding: 12px !important;
    }

    .action-list__edit,
    .action-list__delete,
    .action-list__sort {
        opacity: 1 !important;
    }
}

/* ========================================
   GLOBAL TODO TEXT FIX - v1.4.0
   Fix invisible text caused by action buttons consuming flex space
   ======================================== */

.action-list__list-item {
  gap: 0 !important;
}

.action-list__edit,
.action-list__delete,
.action-list__priority,
.action-list__sort {
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  transition: all 0.15s ease !important;
}

.action-list__list-item:hover .action-list__edit,
.action-list__list-item:hover .action-list__delete,
.action-list__list-item:hover .action-list__priority,
.action-list__list-item:hover .action-list__sort {
  opacity: 1 !important;
  width: 28px !important;
  min-width: 28px !important;
}

.action-list__list-item:hover .action-list__delete {
  margin: 0 4px !important;
}

.action-list__text-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}