html {
  font-size: 14px;
}

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

.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: 60px;
  background-color:lightblue;
}

.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;
}

/* ===== Task app theme (also styles the _TaskList partial loaded into #taskList) ===== */
.task-app {
    --t-primary: #4f46e5;
    --t-primary-2: #7c3aed;
    --t-ink: #1f2937;
    --t-muted: #6b7280;
    --t-line: #e5e7eb;
    --t-ease: cubic-bezier(.2, .8, .2, 1);
}

    /* Cards */
    .task-app .task-card {
        border: 0;
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 10px 30px rgba(79, 70, 229, .12);
        animation: taskFadeUp .6s var(--t-ease) both;
    }

    .task-app .task-list-card {
        animation: none;
    }

    /* Header */
    .task-app .task-header {
        position: relative;
        overflow: hidden;
        border: 0;
        padding: 1.25rem 1.5rem;
        color: #fff;
        background: linear-gradient(135deg, var(--t-primary), var(--t-primary-2));
    }

        .task-app .task-header::after {
            content: "";
            position: absolute;
            right: -40px;
            top: -60px;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .12);
            pointer-events: none;
            animation: taskFloat 5s ease-in-out infinite;
        }

        .task-app .task-header h2 {
            margin: 0;
            font-size: 1.6rem;
            font-weight: 700;
            color: #fff;
        }

        .task-app .task-header p {
            margin: 0;
            opacity: .85;
        }

    .task-app .task-header-icon {
        flex: 0 0 auto;
        width: 52px;
        height: 52px;
        margin-right: 1rem;
        display: grid;
        place-items: center;
        font-size: 1.6rem;
        border-radius: 14px;
        background: rgba(255, 255, 255, .2);
        animation: taskFloat 3s ease-in-out infinite;
    }

    .task-app .task-form-card .card-body {
        padding: 1.5rem;
    }

    /* Labels and inputs */
    .task-app label {
        margin-bottom: .35rem;
        font-size: .875rem;
        font-weight: 600;
        color: var(--t-ink);
    }

    .task-app .req {
        margin-left: 2px;
        color: #ef4444;
    }

    .task-app input.form-control,
    .task-app select.form-control {
        height: auto;
        padding: .55rem .85rem;
        border: 1.5px solid var(--t-line);
        border-radius: 10px;
        transition: border-color .2s, box-shadow .2s, transform .2s;
    }

        .task-app input.form-control:hover,
        .task-app select.form-control:hover {
            border-color: #c7d2fe;
        }

        .task-app input.form-control:focus,
        .task-app select.form-control:focus {
            border-color: var(--t-primary);
            box-shadow: 0 0 0 .22rem rgba(79, 70, 229, .18);
            transform: translateY(-1px);
        }

        .task-app input.form-control.is-invalid,
        .task-app select.form-control.is-invalid {
            animation: taskShake .4s;
        }

    .task-app .form-control.is-invalid ~ .invalid-feedback {
        animation: taskFadeUp .25s both;
    }

    .task-app .task-hint {
        margin-top: 1rem;
        font-size: .78rem;
        color: var(--t-muted);
    }

    /* Buttons */
    .task-app .btn {
        position: relative;
        overflow: hidden;
        border: 0;
        border-radius: 10px;
        font-weight: 600;
        transition: transform .15s, box-shadow .2s, filter .2s;
    }

        .task-app .btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
            transform: skewX(-20deg);
            transition: left .6s;
            pointer-events: none;
        }

        .task-app .btn:hover::before {
            left: 130%;
        }

        .task-app .btn:hover {
            transform: translateY(-2px);
            filter: brightness(1.05);
        }

        .task-app .btn:active {
            transform: translateY(0) scale(.97);
        }

        .task-app .btn:disabled {
            opacity: .65;
            transform: none;
            filter: none;
        }

    .task-app .btn-primary {
        color: #fff;
        background: linear-gradient(135deg, var(--t-primary), var(--t-primary-2));
        box-shadow: 0 6px 16px rgba(79, 70, 229, .3);
    }

        .task-app .btn-primary:hover {
            box-shadow: 0 10px 22px rgba(79, 70, 229, .4);
        }

    .task-app .btn-danger {
        color: #fff;
        background: linear-gradient(135deg, #ef4444, #f43f5e);
        box-shadow: 0 6px 16px rgba(239, 68, 68, .25);
    }

        .task-app .btn-danger:hover {
            box-shadow: 0 10px 22px rgba(239, 68, 68, .35);
        }

    .task-app .btn-info {
        color: #fff;
        background: linear-gradient(135deg, #06b6d4, #3b82f6);
        box-shadow: 0 6px 16px rgba(59, 130, 246, .25);
    }

        .task-app .btn-info:hover {
            box-shadow: 0 10px 22px rgba(59, 130, 246, .35);
        }

    /* ===== Task list (partial) ===== */
    .task-app .task-list-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--t-line);
    }

        .task-app .task-list-head h5 {
            margin: 0;
            font-weight: 700;
            color: var(--t-ink);
        }

        .task-app .task-list-head small {
            color: var(--t-muted);
        }

    .task-app .task-count {
        padding: .2rem .75rem;
        border-radius: 999px;
        background: #eef2ff;
        color: var(--t-primary);
        font-size: .8rem;
        font-weight: 700;
    }

    .task-app .task-progress {
        height: 4px;
        background: #eef2ff;
    }

    .task-app .task-progress-bar {
        height: 100%;
        width: var(--w);
        background: linear-gradient(90deg, var(--t-primary), var(--t-primary-2));
        animation: taskGrow 1s var(--t-ease) both;
    }

    .task-app .task-list-card .card-body {
        padding: 0;
    }

    .task-app .task-table {
        margin: 0;
    }

        .task-app .task-table thead th {
            padding: .85rem 1rem;
            border-top: 0;
            border-bottom: 2px solid var(--t-line);
            background: #f8fafc;
            color: var(--t-muted);
            font-size: .75rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .task-app .task-table td {
            padding: .85rem 1rem;
            vertical-align: middle;
            border-color: #f1f5f9;
        }

        .task-app .task-table tbody tr {
            animation: taskRowIn .5s var(--t-ease) both;
            transition: background .2s, transform .2s, box-shadow .2s;
        }

            .task-app .task-table tbody tr:hover {
                background: #f5f3ff;
                transform: translateX(3px);
                box-shadow: inset 3px 0 0 var(--t-primary);
            }

    .task-app .t-name {
        font-weight: 600;
        color: var(--t-ink);
    }

    .task-app .t-done {
        color: var(--t-muted);
        text-decoration: line-through;
    }

    /* Badges */
    .task-app .t-badge {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .28rem .7rem;
        border-radius: 999px;
        font-size: .78rem;
        font-weight: 600;
        white-space: nowrap;
    }

        .task-app .t-badge::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: currentColor;
        }

    .task-app .t-status-completed {
        background: #dcfce7;
        color: #15803d;
    }

    .task-app .t-status-progress {
        background: #e0e7ff;
        color: #4338ca;
    }

    .task-app .t-status-notstarted {
        background: #f1f5f9;
        color: #475569;
    }

    .task-app .t-prio-high {
        background: #fee2e2;
        color: #b91c1c;
    }

    .task-app .t-prio-medium {
        background: #fef3c7;
        color: #b45309;
    }

    .task-app .t-prio-low {
        background: #e0f2fe;
        color: #0369a1;
    }

    .task-app .t-status-progress::before {
        animation: taskPulse 1.4s ease-in-out infinite;
    }

    .task-app .t-overdue {
        margin-left: .4rem;
        padding: .1rem .4rem;
        border-radius: 6px;
        background: #fee2e2;
        color: #b91c1c;
        font-size: .7rem;
        font-weight: 700;
    }

    /* Row actions */
    .task-app .task-actions {
        white-space: nowrap;
    }

        .task-app .task-actions .btn {
            padding: .35rem .75rem;
            font-size: .8rem;
        }

            .task-app .task-actions .btn + .btn {
                margin-left: .4rem;
            }

        .task-app .task-actions svg {
            width: 14px;
            height: 14px;
            margin-right: .3rem;
            vertical-align: -2px;
        }

    /* Empty state */
    .task-app .task-table tbody tr.t-empty-row:hover {
        background: transparent;
        transform: none;
        box-shadow: none;
    }

    .task-app .task-empty {
        padding: 2.5rem 1rem;
        color: var(--t-muted);
    }

        .task-app .task-empty .emoji {
            display: block;
            margin-bottom: .5rem;
            font-size: 2.5rem;
            animation: taskFloat 3s ease-in-out infinite;
        }

        .task-app .task-empty strong {
            display: block;
            color: var(--t-ink);
        }

/* Keyframes */
@keyframes taskFadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes taskRowIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes taskFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes taskShake {
    0%, 100% {
        transform: translateX(0);
    }

    20%, 60% {
        transform: translateX(-5px);
    }

    40%, 80% {
        transform: translateX(5px);
    }
}

@keyframes taskPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(1.4);
    }
}

@keyframes taskGrow {
    from {
        width: 0;
    }

    to {
        width: var(--w);
    }
}

@media (max-width: 576px) {
    .task-app .task-header h2 {
        font-size: 1.3rem;
    }

    .task-app .task-header-icon {
        width: 44px;
        height: 44px;
    }

    .task-app .task-table thead th,
    .task-app .task-table td {
        padding: .65rem .6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .task-app *, .task-app *::before, .task-app *::after {
        animation: none !important;
        transition: none !important;
    }
}