/* =========================
   LOAY PLANNER - FULL SITE CSS
   ========================= */

:root {
    --app-bg: #f5f7fb;
    --app-surface: #ffffff;
    --app-surface-soft: #f8fafc;
    --app-border: #e5e7eb;
    --app-dark: #111827;
    --app-text: #1f2937;
    --app-muted: #6b7280;
    --app-primary: #2563eb;
    --app-primary-soft: #eff6ff;
    --app-success: #16a34a;
    --app-warning: #d97706;
    --app-danger: #dc2626;
    --shadow-xs-soft: 0 2px 8px rgba(15, 23, 42, 0.04);
    --shadow-sm-soft: 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-md-soft: 0 18px 48px rgba(15, 23, 42, 0.10);
}

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

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

body {
    margin: 0;
    background: var(--app-bg);
    color: var(--app-text);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

a {
    text-decoration: none;
}

.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-select:focus,
textarea:focus {
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.12);
    border-color: #93c5fd;
}

/* =========================
   GLOBAL PAGE SHELL
   ========================= */

.page-shell {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 22px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.35rem;
    flex-wrap: wrap;
}

.page-title {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.08;
    color: var(--app-dark);
    margin: 0 0 0.35rem;
}

.page-subtitle {
    margin: 0;
    color: var(--app-muted);
    font-size: 1rem;
}

.quick-action-btn {
    border-radius: 999px;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* =========================
   TOP NAV PLANNER LAYOUT
   ========================= */

.planner-topbar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 12px 28px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--app-border);
    position: sticky;
    top: 0;
    z-index: 1030;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.planner-topbar-left,
.planner-topbar-right {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.planner-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--app-dark);
    min-width: max-content;
}

.brand-badge {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #111827 0%, #2563eb 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: var(--shadow-xs-soft);
}

.planner-brand-title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.1;
}

.planner-brand-subtitle {
    color: var(--app-muted);
    font-size: 0.82rem;
    margin-top: 0.12rem;
}

.planner-main-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.planner-nav-link {
    text-decoration: none;
    color: #475467;
    font-weight: 700;
    padding: 0.78rem 1rem;
    border-radius: 999px;
    transition: all 0.18s ease;
}

    .planner-nav-link:hover {
        color: var(--app-dark);
        background: #f8fafc;
    }

    .planner-nav-link.active {
        color: #2563eb;
        background: #eff6ff;
    }

.planner-main {
    padding: 1.25rem 0 2rem;
}

.topbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.9rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--app-border);
    color: var(--app-dark);
    font-weight: 700;
    box-shadow: var(--shadow-xs-soft);
}

    .topbar-chip:hover {
        background: #111827;
        border-color: #111827;
        color: #fff;
    }

/* =========================
   CARDS / CONTENT
   ========================= */

.content-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 1.3rem;
    box-shadow: var(--shadow-sm-soft);
    padding: 1.25rem;
}

.section-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.card-section-title {
    margin: 0;
    color: var(--app-dark);
    font-size: 1.15rem;
    font-weight: 800;
}

.card-section-subtitle {
    margin-top: 0.2rem;
    color: var(--app-muted);
    font-size: 0.92rem;
}

/* =========================
   DASHBOARD / STAT CARDS
   ========================= */



.dashboard-grid-gap {
    row-gap: 1rem;
}

.stat-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.stat-card {
    height: 100%;
    min-height: 84px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 1.1rem;
    padding: 12px 14px;
    box-shadow: var(--shadow-xs-soft);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm-soft);
    }

.stat-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.stat-card-text {
    min-width: 0;
}

.stat-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    font-size: .95rem;
}

.icon-total {
    background: #eef2ff;
    color: #4338ca;
}

.icon-today {
    background: #ecfeff;
    color: #0891b2;
}

.icon-overdue {
    background: #fef2f2;
    color: #dc2626;
}

.icon-priority {
    background: #fff7ed;
    color: #d97706;
}

.icon-projects {
    background: #eff6ff;
    color: #2563eb;
}

.icon-reminders {
    background: #f5f3ff;
    color: #7c3aed;
}

.stat-label {
    color: var(--app-muted);
    font-size: 0.92rem;
    margin-bottom: 0;
    font-weight: 600;
    line-height: 1.1;
}

.stat-value {
    color: var(--app-dark);
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    margin-left: auto;
    flex: 0 0 auto;
}
/* =========================
   FOCUS PANEL
   ========================= */

.focus-panel {
    height: 100%;
    background: linear-gradient(135deg, #111827 0%, #1f3b8f 100%);
    color: #fff;
    border-radius: 1.4rem;
    padding: 1.4rem;
    box-shadow: var(--shadow-md-soft);
}

.focus-label {
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
    margin-bottom: 0.8rem;
}

.focus-title {
    margin: 0 0 0.8rem;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.15;
}

.focus-time {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 0.7rem;
}

.focus-meta {
    color: rgba(255,255,255,0.82);
    font-size: 0.95rem;
}

/* =========================
   QUICK ADD
   ========================= */

.quick-add-shell {
    display: grid;
    gap: 1rem;
}

.quick-add-top {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.quick-type-btn {
    border: 1px solid var(--app-border);
    background: #fff;
    border-radius: 1.15rem;
    padding: 1rem 1.15rem;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    font-weight: 800;
    color: var(--app-dark);
    box-shadow: var(--shadow-xs-soft);
    transition: all 0.18s ease;
}

    .quick-type-btn i {
        font-size: 1.2rem;
    }

    .quick-type-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm-soft);
        background: #fafcff;
    }

    .quick-type-btn.active {
        background: #111827;
        color: #fff;
        border-color: #111827;
    }

.quick-add-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 1.4rem;
    box-shadow: var(--shadow-sm-soft);
    padding: 1.25rem;
}

.quick-add-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.quick-mode-badge {
    background: #f3f4f6;
    color: #111827;
    border-radius: 999px;
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 800;
}

.quick-input-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.9rem;
    align-items: center;
}

.quick-title-input {
    min-height: 58px;
    font-size: 1.05rem;
    border-radius: 999px;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

.quick-submit-btn {
    min-height: 56px;
    min-width: 140px;
    border-radius: 999px;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.quick-mini-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 0.8rem;
    flex-wrap: wrap;
}

.quick-mini-btn {
    border: 1px solid var(--app-border);
    background: #fff;
    border-radius: 999px;
    padding: 0.6rem 0.9rem;
    font-weight: 700;
    color: var(--app-dark);
}

.quick-helper-text {
    color: var(--app-muted);
    font-size: 0.92rem;
}

.quick-details-panel {
    display: none;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--app-border);
}

    .quick-details-panel.show {
        display: block;
    }

.quick-add-message {
    margin-top: 1rem;
    border-radius: 1rem;
    padding: 0.85rem 1rem;
    font-weight: 700;
}

.quick-add-message-success {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.quick-add-message-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* =========================
   FLOATING QUICK ADD
   ========================= */

.floating-quick-btn,
.fab {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 62px;
    height: 62px;
    border: none;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    font-size: 1.35rem;
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.22);
    z-index: 1050;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .floating-quick-btn:hover,
    .fab:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 22px 46px rgba(17, 24, 39, 0.28);
    }

.floating-quick-panel {
    position: fixed;
    right: 24px;
    bottom: 98px;
    width: 340px;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 1.35rem;
    box-shadow: var(--shadow-md-soft);
    padding: 1rem;
    z-index: 1050;
}

.floating-quick-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    align-items: flex-start;
}

.floating-quick-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--app-dark);
}

.floating-quick-subtitle {
    font-size: 0.88rem;
    color: var(--app-muted);
}

.floating-close-btn {
    border: none;
    background: #f3f4f6;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #374151;
}

.floating-quick-actions {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.floating-type-btn {
    border: 1px solid var(--app-border);
    background: #fff;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--app-dark);
}

    .floating-type-btn.active {
        background: #111827;
        color: #fff;
        border-color: #111827;
    }

/* =========================
   LISTS / TABLES / TILES
   ========================= */

.list-clean {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .list-clean li + li {
        margin-top: 0.75rem;
    }

.mini-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.95rem 1rem;
    border: 1px solid #edf1f5;
    background: #fbfdff;
    border-radius: 1rem;
}

.mini-item-title {
    font-weight: 800;
    color: var(--app-dark);
    margin-bottom: 0.2rem;
}

.mini-item-meta {
    color: var(--app-muted);
    font-size: 0.9rem;
}

.empty-state {
    border: 2px dashed #dbe4ee;
    border-radius: 1rem;
    padding: 1.2rem;
    text-align: center;
    color: var(--app-muted);
    background: #fafcff;
    font-weight: 600;
}

.table-clean thead th {
    border-bottom: 1px solid var(--app-border);
    color: var(--app-muted);
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
    background: #fbfcfe;
}

.table-clean tbody td {
    border-top: 1px solid #eef2f7;
}

.info-tile {
    border: 1px solid #edf1f5;
    background: #fbfdff;
    border-radius: 1rem;
    padding: 1rem;
}

.soft-muted {
    color: var(--app-muted);
}

.progress {
    height: 10px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

/* =========================
   BADGES
   ========================= */

.badge-soft {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.38rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 800;
    border: 1px solid transparent;
}

.badge-priority-low {
    background: #ecfdf3;
    color: #15803d;
    border-color: #bbf7d0;
}

.badge-priority-medium {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.badge-priority-high {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.badge-priority-critical {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.badge-status-new {
    background: #eef2ff;
    color: #4338ca;
    border-color: #c7d2fe;
}

.badge-status-inprogress {
    background: #ecfeff;
    color: #0f766e;
    border-color: #a5f3fc;
}

.badge-status-waiting {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fdba74;
}

.badge-status-completed {
    background: #ecfdf3;
    color: #15803d;
    border-color: #bbf7d0;
}

.badge-status-cancelled {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #d1d5db;
}

.badge-important {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fdba74;
}

/* =========================
   TASK BOARD ENHANCEMENTS
   ========================= */

.tasks-page-shell .content-card {
    overflow: hidden;
}

.kanban-board,
.kanban-board-enhanced {
    display: grid;
    grid-template-columns: repeat(4, minmax(280px, 1fr));
    gap: 1rem;
    align-items: start;
}

.kanban-column {
    background: linear-gradient(180deg, #f8fafc 0%, #f9fbfd 100%);
    border: 1px solid var(--app-border);
    border-radius: 1.1rem;
    padding: 0.95rem;
    min-height: 540px;
    transition: all 0.18s ease;
}

    .kanban-column.drop-active {
        border-color: #2563eb;
        background: #eff6ff;
        box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.08);
    }

.kanban-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    font-weight: 800;
    font-size: 1rem;
    color: var(--app-dark);
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.kanban-header-title {
    font-weight: 800;
}

.kanban-header-count {
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: #111827;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.kanban-column-body {
    display: grid;
    gap: 0.9rem;
}

.kanban-empty-state {
    min-height: 140px;
    border: 2px dashed #dbe4ee;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.55);
}

.project-group-block {
    border: 1px solid #e7edf3;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    padding: 0.7rem;
}

.project-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: #334155;
    margin-bottom: 0.7rem;
    padding: 0.15rem 0.15rem 0.55rem;
    border-bottom: 1px dashed #d8e1ea;
}

.project-group-count {
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0 0.45rem;
}

.project-group-cards {
    display: grid;
    gap: 0.75rem;
}

.task-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 5px solid #cbd5e1;
    border-radius: 1rem;
    padding: 0.95rem;
    margin-bottom: 0;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.05);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    cursor: grab;
}

    .task-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .task-card.is-dragging {
        opacity: 0.55;
        transform: rotate(1deg) scale(0.98);
        cursor: grabbing;
    }

    .task-card.task-saving {
        opacity: 0.6;
        pointer-events: none;
    }

.task-card-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.task-card-title {
    font-weight: 800;
    color: var(--app-dark);
    margin-bottom: 0.35rem;
    line-height: 1.35;
    flex: 1;
}

.task-card-menu {
    flex-shrink: 0;
}

.btn-icon {
    width: 34px;
    height: 34px;
    border-radius: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #475467;
}

    .btn-icon:hover {
        background: #f8fafc;
        color: #111827;
        border-color: #dbe4ee;
    }

.task-card-meta {
    color: var(--app-muted);
    font-size: 0.88rem;
    margin-bottom: 0.3rem;
}

.task-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: #f8fafc;
    color: #475467;
    border: 1px solid #e9eef5;
    font-weight: 600;
}

.task-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.task-priority-low {
    border-left-color: #22c55e;
    background: linear-gradient(180deg, #ffffff 0%, #f6fff8 100%);
}

.task-priority-medium {
    border-left-color: #3b82f6;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.task-priority-high {
    border-left-color: #f59e0b;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf0 100%);
}

.task-priority-critical {
    border-left-color: #ef4444;
    background: linear-gradient(180deg, #ffffff 0%, #fff6f6 100%);
}

.kanban-legend {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.legend-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.42rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 800;
    border: 1px solid transparent;
}

.legend-low {
    background: #ecfdf3;
    color: #15803d;
    border-color: #bbf7d0;
}

.legend-medium {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.legend-high {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.legend-critical {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

.inline-edit-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0.9rem 0 0.9rem;
}

.inline-edit-panel {
    margin-top: 0.25rem;
    background: #f8fafc;
    border: 1px dashed #dbe4ee;
    border-radius: 0.9rem;
    padding: 0.85rem;
}

.inline-edit-message {
    border-radius: 0.8rem;
    padding: 0.65rem 0.8rem;
    font-size: 0.84rem;
    font-weight: 700;
}

.planner-modal-content {
    border: 1px solid #e5e7eb;
    border-radius: 1.2rem;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14);
}

/* =========================
   SPEECH / LIVE REMINDERS / COMPLETED COMPACT
   ========================= */

.speech-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
}

    .speech-input-group .form-control {
        flex: 1;
    }

.speech-input-group-textarea {
    align-items: flex-start;
}

.speech-btn {
    width: 48px;
    min-width: 48px;
    border: 1px solid var(--app-border);
    background: #fff;
    color: var(--app-dark);
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-xs-soft);
    transition: all 0.18s ease;
}

    .speech-btn:hover {
        background: #111827;
        color: #fff;
        border-color: #111827;
    }

    .speech-btn.is-listening {
        background: #dc2626;
        color: #fff;
        border-color: #dc2626;
        box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.15);
    }

.speech-btn-textarea {
    min-height: 100%;
}

.quick-input-row-with-mic {
    grid-template-columns: 1fr auto;
}

.reminder-quick-row {
    grid-template-columns: 1fr auto;
}

.live-reminder-row {
    transition: all 0.2s ease;
}

.reminder-live-due {
    border-color: #fecaca !important;
    background: #fff1f2 !important;
}

.reminder-live-future {
    border-color: #edf1f5 !important;
}

.badge-live-due {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.kanban-column-completed {
    background: linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
}

.project-group-block-completed {
    background: rgba(255, 255, 255, 0.9);
}

.task-card-completed-compact {
    padding: 0.75rem 0.8rem;
    border-left-width: 4px;
    opacity: 0.92;
}

    .task-card-completed-compact .task-card-meta {
        margin-bottom: 0.2rem;
    }

    .task-card-completed-compact .task-card-actions {
        margin-top: 0.7rem !important;
    }

    .task-card-completed-compact .task-meta-chip {
        padding: 0.28rem 0.5rem;
        font-size: 0.82rem;
    }

.reminders-page-shell .table-clean tbody tr td {
    vertical-align: middle;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1400px) {
    .kanban-board,
    .kanban-board-enhanced {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
    }
}

@media (max-width: 991.98px) {
    .planner-topbar {
        padding: 12px 16px;
    }

    .planner-topbar-right {
        width: 100%;
        justify-content: flex-end;
    }

    .planner-main-nav {
        width: 100%;
    }

    .quick-input-row {
        grid-template-columns: 1fr;
    }

    .quick-submit-btn {
        width: 100%;
    }

    .topbar-chip span {
        display: none;
    }

    .quick-input-row-with-mic,
    .reminder-quick-row {
        grid-template-columns: 1fr;
    }

    .speech-input-group {
        width: 100%;
    }

    .speech-btn {
        width: 52px;
        min-width: 52px;
    }
}

@media (max-width: 767.98px) {
    .page-shell {
        padding: 0 14px;
    }

    .page-title {
        font-size: 1.75rem;
    }

    .kanban-board,
    .kanban-board-enhanced {
        grid-template-columns: 1fr;
    }

    .quick-type-btn {
        width: 100%;
        justify-content: center;
    }

    .floating-quick-panel {
        right: 14px;
        left: 14px;
        width: auto;
        bottom: 88px;
    }

    .floating-quick-btn,
    .fab {
        right: 16px;
        bottom: 16px;
    }

    .mini-item {
        flex-direction: column;
    }
}

document.addEventListener("DOMContentLoaded", function () {
    initDashboardTimer();
    initQuickAdd();
    initTasksBoard();
    initSpeechToText();
    initLiveReminderStates();
});

function initDashboardTimer() {
    const timerElement = document.getElementById("dashboardFocusTimer");
    if (!timerElement || !timerElement.dataset.seconds)

{
    return;
}

let secondsRemaining = parseInt(timerElement.dataset.seconds || "0", 10);
const expiredText = timerElement.dataset.expiredText || "00:00:00";

function formatSeconds(totalSeconds) {
    const safeSeconds = Math.max(0, totalSeconds);
    const hours = Math.floor(safeSeconds / 3600);
    const minutes = Math.floor((safeSeconds % 3600) / 60);
    const seconds = safeSeconds % 60;
    return [
            hours.toString().padStart(2, "0"),
            minutes.toString().padStart(2, "0"),
            seconds.toString().padStart(2, "0")
        ].join(":");
}

function renderTimer() {
    timerElement .textContent = secondsRemaining > 0 ? formatSeconds(secondsRemaining) : expiredText;
}

renderTimer();

if (secondsRemaining <= 0) {
    return;
}

setInterval(function () {
        secondsRemaining--;
        renderTimer();
    }, 1000);
}

function initQuickAdd() {
    const quickTitle = document.getElementById("quickTitle");
    const quickDescription = document.getElementById("quickDescription");
    const quickDateTime = document.getElementById("quickDateTime");
    const quickTaskReminderDateTime = document.getElementById("quickTaskReminderDateTime");
    const quickReminderDaily = document.getElementById("quickReminderDaily");
    const quickPriority = document.getElementById("quickPriority");
    const quickProjectId = document.getElementById("quickProjectId");
    const quickSubmitBtn = document.getElementById("quickSubmitBtn");
    const quickModeBadge = document.getElementById("quickModeBadge");
    const quickHelperText = document.getElementById("quickHelperText");
    const quickMessage = document.getElementById("quickAddMessage");
    const quickDetailsPanel = document.getElementById("quickDetailsPanel");
    const toggleQuickDetails = document.getElementById("toggleQuickDetails");
    const quickPriorityWrap = document.getElementById("quickPriorityWrap");
    const quickProjectWrap = document.getElementById("quickProjectWrap");
    const quickTaskReminderWrap = document.getElementById("quickTaskReminderWrap");
    const quickReminderRepeatWrap = document.getElementById("quickReminderRepeatWrap");
    const quickTypeButtons = document.querySelectorAll(".quick-type-btn");
    const floatingBtn = document.getElementById("floatingQuickBtn");
    const floatingPanel = document.getElementById("floatingQuickPanel");
    const floatingClose = document.getElementById("floatingQuickClose");
    const floatingSubmit = document.getElementById("floatingQuickSubmit");
    const floatingTitle = document.getElementById("floatingQuickTitle");
    const floatingDateTime = document.getElementById("floatingQuickDateTime");
    const floatingMessage = document.getElementById("floatingQuickMessage");
    const floatingTypeButtons = document.querySelectorAll(".floating-type-btn");
    const tokenInput = document.querySelector('input[name="__RequestVerificationToken"]');
    const antiForgeryToken = tokenInput ? tokenInput.value : "";
    let currentType = "task";
    let currentFloatingType = "task";
    function showMessage(container, message, isSuccess)

{
    if (!container) return;
    container .classList.remove("d-none", "quick-add-message-success", "quick-add-message-error");
    container .classList.add(isSuccess ? "quick-add-message-success" : "quick-add-message-error");
    container .textContent = message;
}

function clearMessage(container) {
    if (!container) return;
    container .classList.add("d-none");
    container .textContent = "";
}

function applyQuickMode(type) {
    currentType = type;
    quickTypeButtons .forEach(btn => {
            btn.classList.toggle("active", btn.dataset.quickType === type);
        });
    if (quickModeBadge)

{
    quickModeBadge .textContent = type === "task" ? "Task Mode" : type === "project" ? "Project Mode" : "Reminder Mode";
}

if (quickHelperText) {
    quickHelperText .textContent = type === "task" ? "Fastest way: type title and click Add." : type === "project" ? "Create a project with only a name, description optional." : "Create a reminder fast. Date is optional.";
}

if (quickPriorityWrap) {
    quickPriorityWrap .style.display = type === "task" ? "" : "none";
}

if (quickProjectWrap) {
    quickProjectWrap .style.display = type === "project" ? "none" : "";
}

if (quickTaskReminderWrap) {
    quickTaskReminderWrap .classList.toggle("d-none", type !== "task");
}

if (quickReminderRepeatWrap) {
    quickReminderRepeatWrap .classList.toggle("d-none", type === "project");
}

if (quickDescription) {
    quickDescription .placeholder = type === "project" ? "Optional project description" : type === "task" ? "Optional task details" : "Optional reminder notes";
}

if (quickDateTime && quickDateTime.parentElement) {
    quickDateTime .parentElement.style.display = type === "project" ? "none" : "";
}

}

function applyFloatingMode(type) {
    currentFloatingType = type;
    floatingTypeButtons .forEach(btn => {
            btn.classList.toggle("active", btn.dataset.floatingType === type);
        });
    if (floatingDateTime)

{
    floatingDateTime .style.display = type === "project" ? "none" : "";
}

}

async function postQuickAdd(url, payload) {
    const response = await fetch(url, {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
                "RequestVerificationToken": antiForgeryToken
            },
            body: new URLSearchParams(payload)
        });
    return await response.json();
}

async function submitQuickAdd() {
    if (!quickTitle) return;
    clearMessage(quickMessage);
    const title = quickTitle.value.trim();
    const description = quickDescription ? quickDescription.value.trim() : "";
    const dateTime = quickDateTime ? quickDateTime.value : "";
    const reminderDateTime = quickTaskReminderDateTime ? quickTaskReminderDateTime.value : "";
    const reminderIsDaily = quickReminderDaily ? quickReminderDaily.checked : false;
    const priority = quickPriority ? quickPriority.value : "Medium";
    const projectId = quickProjectId ? quickProjectId.value : "";
    if (!title)

{
    showMessage(quickMessage, "Please enter a title first.", false);
    return;
}

if (quickSubmitBtn) {
    quickSubmitBtn .disabled = true;
}

try {
    let result;
    if (currentType === "task")

{
    result = await postQuickAdd("/Dashboard/QuickAddTask", {
                    title: title,
                    description: description,
                    dueDate: dateTime,
                    reminderDateTime: reminderDateTime,
                    reminderIsDaily: reminderIsDaily ? "true" : "false",
                    projectId: projectId,
                    priority: priority
                });
}

else if (currentType === "project") {
    result = await postQuickAdd("/Dashboard/QuickAddProject", {
                    title: title,
                    description: description
                });
}

else {
    result = await postQuickAdd("/Dashboard/QuickAddReminder", {
                    title: title,
                    reminderDateTime: dateTime,
                    isDailyRecurring: reminderIsDaily ? "true" : "false",
                    projectId: projectId
                });
}

if (result.success) {
    showMessage(quickMessage, result.message || "Saved successfully.", true);
    quickTitle .value = "";
    if (quickDescription) quickDescription.value = "";
    if (quickDateTime) quickDateTime.value = "";
    if (quickTaskReminderDateTime) quickTaskReminderDateTime.value = "";
    if (quickPriority) quickPriority.value = "Medium";
    if (quickProjectId) quickProjectId.value = "";
    if (quickReminderDaily) quickReminderDaily.checked = false;
    setTimeout(() => {
                    window.location.reload();
                }, 700);
}

else {
    showMessage(quickMessage, result.message || "Something went wrong.", false);
}

}

catch (error) {
    showMessage(quickMessage, "Unable to save. Please try again.", false);
}

finally {
    if (quickSubmitBtn)

{
    quickSubmitBtn .disabled = false;
}

}
}

async function submitFloatingQuickAdd() {
    if (!floatingTitle) return;
    clearMessage(floatingMessage);
    const title = floatingTitle.value.trim();
    const dateTime = floatingDateTime ? floatingDateTime.value : "";
    if (!title)

{
    showMessage(floatingMessage, "Please enter a title first.", false);
    return;
}

if (floatingSubmit) {
    floatingSubmit .disabled = true;
}

try {
    let result;
    if (currentFloatingType === "task")

{
    result = await postQuickAdd("/Dashboard/QuickAddTask", {
                    title: title,
                    dueDate: dateTime,
                    priority: "Medium"
                });
}

else if (currentFloatingType === "project") {
    result = await postQuickAdd("/Dashboard/QuickAddProject", {
                    title: title
                });
}

else {
    result = await postQuickAdd("/Dashboard/QuickAddReminder", {
                    title: title,
                    reminderDateTime: dateTime,
                    isDailyRecurring: "false"
                });
}

if (result.success) {
    showMessage(floatingMessage, result.message || "Saved successfully.", true);
    floatingTitle .value = "";
    if (floatingDateTime) floatingDateTime.value = "";
    setTimeout(() => {
                    window.location.reload();
                }, 700);
}

else {
    showMessage(floatingMessage, result.message || "Something went wrong.", false);
}

}

catch (error) {
    showMessage(floatingMessage, "Unable to save. Please try again.", false);
}

finally {
    if (floatingSubmit)

{
    floatingSubmit .disabled = false;
}

}
}

quickTypeButtons.forEach(btn => {
        btn.addEventListener("click", function () {
            applyQuickMode(this.dataset.quickType);
        });
    });

floatingTypeButtons.forEach(btn => {
        btn.addEventListener("click", function () {
            applyFloatingMode(this.dataset.floatingType);
        });
    });

if (toggleQuickDetails && quickDetailsPanel) {
    toggleQuickDetails .addEventListener("click", function () {
            quickDetailsPanel.classList.toggle("show");
        });
}

if (quickSubmitBtn) {
    quickSubmitBtn .addEventListener("click", submitQuickAdd);
}

if (quickTitle) {
    quickTitle .addEventListener("keydown", function (e) {
            if (e.key === "Enter") {
                e.preventDefault();
                submitQuickAdd();
            }
        });
}

if (floatingBtn && floatingPanel) {
    floatingBtn .addEventListener("click", function () {
            floatingPanel.classList.toggle("d-none");
        });
}

if (floatingClose && floatingPanel) {
    floatingClose .addEventListener("click", function () {
            floatingPanel.classList.add("d-none");
        });
}

if (floatingSubmit) {
    floatingSubmit .addEventListener("click", submitFloatingQuickAdd);
}

if (floatingTitle) {
    floatingTitle .addEventListener("keydown", function (e) {
            if (e.key === "Enter") {
                e.preventDefault();
                submitFloatingQuickAdd();
            }
        });
}

if (quickTypeButtons.length > 0) {
    applyQuickMode("task");
}

if (floatingTypeButtons.length > 0) {
    applyFloatingMode("task");
}

}

function initTasksBoard() {
    const tasksPage = document.querySelector(".tasks-page-shell");
    if (!tasksPage)

{
    return;
}

const antiForgeryTokenInput = document.querySelector('#taskAntiForgeryForm input[name="__RequestVerificationToken"]');
const antiForgeryToken = antiForgeryTokenInput ? antiForgeryTokenInput.value : "";
const quickAddModalElement = document.getElementById("taskQuickAddModal");
const quickAddModal = quickAddModalElement ? new bootstrap.Modal(quickAddModalElement) : null;
const openQuickAddBtn = document.getElementById("openTaskQuickAddModal");
const globalFab = document.getElementById("plannerGlobalFab");

if (openQuickAddBtn && quickAddModal) {
    openQuickAddBtn .addEventListener("click", function () {
            quickAddModal.show();
        });
}

if (globalFab) {
    globalFab .addEventListener("click", function () {
            if (quickAddModal) {
                quickAddModal.show();
            } else {
                window.location.href = "/Tasks/Create";
            }
        });
}

const hiddenCompletedKey = "loayplanner_hidden_completed_tasks";

function getHiddenCompletedTaskIds() {
    try

{
    const raw = localStorage.getItem(hiddenCompletedKey);
    const parsed = raw ? JSON.parse(raw) : [];
    return Array.isArray(parsed) ? parsed.map(x => String(x)) : [];
}

catch {
    return [];
}

}

function setHiddenCompletedTaskIds(ids) {
    localStorage .setItem(hiddenCompletedKey, JSON.stringify(ids));
}

function hideCompletedTaskCard(taskId) {
    const ids = getHiddenCompletedTaskIds();
    if (!ids.includes(String(taskId)))

{
    ids .push(String(taskId));
    setHiddenCompletedTaskIds(ids);
}

applyHiddenCompletedTasks();
}

function applyHiddenCompletedTasks() {
    const hiddenIds = getHiddenCompletedTaskIds();
    document .querySelectorAll(".task-card[data-task-id]").forEach(card => {
            const taskId = card.dataset.taskId;
            const status = card.dataset.taskStatus || "";
            if (status === "Completed" && hiddenIds.includes(String(taskId))) {
                card.style.display = "none";
                card.classList.add("task-card-hidden-by-user");
            } else {
                card.style.display = "";
                card.classList.remove("task-card-hidden-by-user");
            }
        });
    document .querySelectorAll(".kanban-column").forEach(column => {
            const status = column.dataset.status || "";
            const visibleCards = Array.from(column.querySelectorAll(".task-card[data-task-id]"))
                .filter(card => card.style.display !== "none");

            const countEl = column.querySelector(".kanban-header-count");
            if (countEl) {
                countEl.textContent = visibleCards.length.toString();
            }

            column.querySelectorAll(".project-group-block").forEach(group => {
                const visibleGroupCards = Array.from(group.querySelectorAll(".task-card[data-task-id]"))
                    .filter(card => card.style.display !== "none");
                group.style.display = visibleGroupCards.length === 0 ? "none" : "";
            });

            const body = column.querySelector(".kanban-column-body");
            if (!body) return;

            let emptyState = body.querySelector(".kanban-empty-state.dynamic-empty-state");
            const hasVisibleGroups = Array.from(body.querySelectorAll(".project-group-block"))
                .some(group => group.style.display !== "none");

            if (!hasVisibleGroups) {
                if (!emptyState) {
                    emptyState = document.createElement("div");
                    emptyState.className = "kanban-empty-state dynamic-empty-state";
                    emptyState.textContent = status === "Completed" ? "No visible completed tasks" : "Drop a task here";
                    body.appendChild(emptyState);
                } else {
                    emptyState.textContent = status === "Completed" ? "No visible completed tasks" : "Drop a task here";
                    emptyState.style.display = "";
                }
            } else if (emptyState) {
                emptyState.style.display = "none";
            }
        });
}

document.querySelectorAll(".btn-hide-completed-task").forEach(button => {
        button.addEventListener("click", function (e) {
            e.preventDefault();
            e.stopPropagation();

            const taskId = this.dataset.hideTaskId;
            if (!taskId) return;

            hideCompletedTaskCard(taskId);
        });
    });

const draggableCards = document.querySelectorAll(".task-card[draggable='true']");
const dropZones = document.querySelectorAll(".task-drop-zone");

draggableCards.forEach(card => {
        card.addEventListener("dragstart", function (e) {
            this.classList.add("is-dragging");
            e.dataTransfer.setData("text/plain", this.dataset.taskId || "");
        });

        card.addEventListener("dragend", function () {
            this.classList.remove("is-dragging");
        });
    });

dropZones.forEach(zone => {
        zone.addEventListener("dragover", function (e) {
            e.preventDefault();
            this.classList.add("drop-active");
        });

        zone.addEventListener("dragleave", function () {
            this.classList.remove("drop-active");
        });

        zone.addEventListener("drop", async function (e) {
            e.preventDefault();
            this.classList.remove("drop-active");

            const taskId = e.dataTransfer.getData("text/plain");
            const newStatus = this.dataset.status || "";
            const draggedCard = document.querySelector(`.task-card[data-task-id='${taskId}']`);

            if (!taskId || !newStatus || !draggedCard) {
                return;
            }

            const currentStatus = draggedCard.dataset.taskStatus || "";
            if (currentStatus === newStatus) {
                return;
            }

            draggedCard.classList.add("task-saving");

            try {
                const response = await fetch("/Tasks/UpdateStatus", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
                        "RequestVerificationToken": antiForgeryToken
                    },
                    body: new URLSearchParams({
                        id: taskId,
                        status: newStatus
                    })
                });

                const result = await response.json();

                if (result.success) {
                    window.location.reload();
                } else {
                    draggedCard.classList.remove("task-saving");
                    alert(result.message || "Unable to move task.");
                }
            } catch (error) {
                draggedCard.classList.remove("task-saving");
                alert("Unable to move task right now.");
            }
        });
    });

const inlineEditToggleButtons = document.querySelectorAll(".btn-inline-edit-toggle");
const inlineEditCancelButtons = document.querySelectorAll(".btn-inline-edit-cancel");
const inlineEditForms = document.querySelectorAll(".inline-task-edit-form");

inlineEditToggleButtons.forEach(button => {
        button.addEventListener("click", function () {
            const taskCard = this.closest(".task-card");
            const panel = taskCard ? taskCard.querySelector(".inline-edit-panel") : null;

            if (panel) {
                panel.classList.toggle("d-none");
            }
        });
    });

inlineEditCancelButtons.forEach(button => {
        button.addEventListener("click", function () {
            const panel = this.closest(".inline-edit-panel");
            if (panel) {
                panel.classList.add("d-none");
            }
        });
    });

inlineEditForms.forEach(form => {
        form.addEventListener("submit", async function (e) {
            e.preventDefault();

            const taskId = this.dataset.taskId || "";
            const title = this.querySelector('input[name="title"]')?.value?.trim() || "";
            const dueDate = this.querySelector('input[name="dueDate"]')?.value || "";
            const projectId = this.querySelector('select[name="projectId"]')?.value || "";
            const priority = this.querySelector('select[name="priority"]')?.value || "";
            const messageBox = this.querySelector(".inline-edit-message");
            const submitButton = this.querySelector('button[type="submit"]');

            if (!title) {
                showInlineMessage(messageBox, "Title is required.", false);
                return;
            }

            if (submitButton) {
                submitButton.disabled = true;
            }

            try {
                const response = await fetch("/Tasks/InlineUpdate", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
                        "RequestVerificationToken": antiForgeryToken
                    },
                    body: new URLSearchParams({
                        id: taskId,
                        title: title,
                        dueDate: dueDate,
                        projectId: projectId,
                        priority: priority
                    })
                });

                const result = await response.json();

                if (result.success) {
                    showInlineMessage(messageBox, result.message || "Saved.", true);
                    setTimeout(() => {
                        window.location.reload();
                    }, 350);
                } else {
                    showInlineMessage(messageBox, result.message || "Unable to save.", false);
                }
            } catch (error) {
                showInlineMessage(messageBox, "Unable to save right now.", false);
            } finally {
                if (submitButton) {
                    submitButton.disabled = false;
                }
            }
        });
    });

function showInlineMessage(container, message, isSuccess) {
    if (!container) return;
    container .classList.remove("d-none", "quick-add-message-success", "quick-add-message-error");
    container .classList.add(isSuccess ? "quick-add-message-success" : "quick-add-message-error");
    container .textContent = message;
}

applyHiddenCompletedTasks();
}

function initSpeechToText() {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition)

{
    return;
}

const buttons = document.querySelectorAll("[data-speech-target]");

buttons.forEach(button => {
        button.addEventListener("click", function () {
            const targetId = this.dataset.speechTarget;
            const target = document.getElementById(targetId);

            if (!target) return;

            const recognition = new SpeechRecognition();
            recognition.lang = document.documentElement.lang === "ar" ? "ar-SA" : "en-US";
            recognition.interimResults = false;
            recognition.maxAlternatives = 1;

            this.classList.add("is-listening");

            recognition.onresult = function (event) {
                const transcript = event.results[0][0].transcript || "";
                if (target.tagName === "TEXTAREA") {
                    target.value = target.value ? `${target.value} ${transcript}` : transcript;
                } else {
                    target.value = transcript;
                }
                target.dispatchEvent(new Event("input", { bubbles: true }));
            };

            recognition.onerror = function () {
                button.classList.remove("is-listening");
            };

            recognition.onend = function () {
                button.classList.remove("is-listening");
            };

            recognition.start();
        });
    });
}

function initLiveReminderStates() {
    const rows = document.querySelectorAll(".live-reminder-row");
    if (!rows.length)

{
    return;
}

function applyReminderState(row) {
    const dateString = row.dataset.liveReminder;
    const isSent = row.dataset.liveSent === "true";
    const badge = row.querySelector(".live-reminder-badge");
    if (!dateString || !badge) return;
    const dueDate = new Date(dateString);
    const now = new Date();
    const isDue = !isSent && dueDate <= now;
    row .classList.remove("reminder-live-due", "reminder-live-future");
    badge .classList.remove("badge-status-waiting", "badge-status-completed", "badge-live-due");
    if (isSent)

{
    row .classList.add("reminder-live-future");
    badge .classList.add("badge-status-completed");
    badge .textContent = "Sent";
    return;
}

if (isDue) {
    row .classList.add("reminder-live-due");
    badge .classList.add("badge-live-due");
    badge .textContent = "Due Now";
}

else {
    row .classList.add("reminder-live-future");
    badge .classList.add("badge-status-waiting");
    badge .textContent = "Pending";
}

}

rows.forEach(applyReminderState);

setInterval(function () {
        rows.forEach(applyReminderState);
    }, 30000);
}



    .page-shell .stat-card .stat-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }

    .page-shell .stat-card .stat-label {
        margin-bottom: 4px;
        line-height: 1.2;
    }

    .page-shell .stat-card .stat-value {
        line-height: 1;
    }

/* =========================
   GLOBAL COMPACT STAT CARDS
   ========================= */



    .page-shell .compact-stat-card .stat-icon {
        width: 42px !important;
        height: 42px !important;
        margin-bottom: 8px !important;
    }

    .page-shell .compact-stat-card .stat-label {
        margin-bottom: 4px !important;
        line-height: 1.15 !important;
    }

    .page-shell .compact-stat-card .stat-value {
        font-size: 1.5rem !important;
        line-height: 1 !important;
    }

.stat-card-active {
    border-color: #b9c9e8 !important;
    box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.08), var(--shadow-sm-soft) !important;
    background: #f8fbff;
}