/* ===== Theme + base ===== */
:root{
    --bg:#0f172a;
    --card:#111827;
    --muted:#94a3b8;
    --text:#e5e7eb;
    --ring:rgba(59,130,246,.35);
    --accent:#3b82f6;
}
html,body{height:100%}
body{
    margin:0;
    font:16px/1.5 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
    background:
            radial-gradient(1200px 600px at 80% -10%, rgba(59,130,246,.15), transparent 60%),
            radial-gradient(1000px 500px at -10% 0%, rgba(99,102,241,.12), transparent 60%),
            var(--bg);
    color:var(--text);
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ===== Layout shells ===== */
.wrap{
    max-width:1400px;            /* wide page */
    margin:32px auto;
    padding:0 16px;
}
.card{
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(6px);
    width:100%;
}

/* ===== Topbar ===== */
.topbar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}
.topbar > h1{
    margin:0;
    text-align:center;
    font-size:22px;
    line-height:1;
}
.topbar-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:8px;
}

/* ===== Buttons ===== */
.btn{
    appearance:none;
    border:none;
    border-radius:10px;
    cursor:pointer;
    padding:10px 14px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    color:var(--text);
}
.btn.primary{ background:var(--accent); color:#fff }
.btn.ghost  { background:transparent; border:1px solid rgba(255,255,255,.15) }
.btn.danger { background:#ef4444; color:#fff }
.btn:focus{ outline:2px solid var(--ring); outline-offset:2px }

/* ===== Form controls (global) ===== */
label{ display:block; color:var(--muted); font-size:.95rem; margin:6px 0 }
input,textarea,select{
    width:100%;
    box-sizing:border-box;
    color:var(--text);
    background:#0b1220;
    border:1px solid rgba(255,255,255,.12);
    padding:10px 12px;
    border-radius:10px;
}
input:focus,textarea:focus,select:focus{ outline:2px solid var(--ring); outline-offset:2px }

/* ===== Table toolbar (search) ===== */
.table-toolbar{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:8px;
    margin:8px 0 12px;
}
/* lock width inside flex */
#taskSearch{
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
    flex:0 0 280px !important;
    color:var(--text);
    background:#0b1220;
    border:1px solid rgba(255,255,255,.12);
    padding:10px 12px;
    border-radius:10px;
}

/* ===== Tasks table ===== */
.tasks-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    table-layout:auto;
}
.tasks-table thead th{
    text-align:left;
    font-weight:600;
    color:var(--muted);
    padding:10px 12px;
    user-select:none;
    cursor:pointer;
}
.tasks-table tbody td{
    padding:12px;
    border-top:1px solid rgba(255,255,255,.08);
    color:var(--text);
}
.tasks-table tbody tr:hover{ background:rgba(255,255,255,.03) }

/* sort indicators (optional; JS toggles .sort-asc / .sort-desc) */
.tasks-table thead th.sort-asc::after{ content:" ▲" }
.tasks-table thead th.sort-desc::after{ content:" ▼" }

/* Give Notes more room */
.tasks-table td:nth-child(5){ width:50% }

/* ===== Utilities ===== */
.loading,.error,.empty{ text-align:center; padding:18px; color:var(--muted) }

/* ===== Mobile ===== */
@media (max-width:560px){
    .wrap{ max-width:none; padding:0 12px }
    .topbar{ grid-template-columns:1fr; row-gap:8px }
    .topbar-actions{ justify-self:center }
    .table-toolbar{ justify-content:stretch }
    #taskSearch{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        flex:1 1 auto !important;
    }
}